:root{
  --sand:#EFE8D9;
  --sand-deep:#E4DBC6;
  --white:#FFFDF8;
  --ink:#10222B;
  --deep:#0B3B52;
  --deep-2:#092C3D;
  --aqua:#1EA7A0;
  --aqua-light:#6FD6CE;
  --sun:#E2793D;
  --line:rgba(16,34,43,0.12);
  --line-light:rgba(255,253,248,0.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--aqua);
  font-weight:500;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 28px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--sun); color:var(--white);}
.btn-primary:hover{background:#c9642c;}
.btn-outline-dark{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline-dark:hover{background:var(--ink); color:var(--sand);}
.btn-outline-light{border-color:var(--line-light); color:var(--white); background:transparent;}
.btn-outline-light:hover{background:var(--white); color:var(--deep);}

/* ===== Fill gauge (signature element) ===== */
#gauge{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  width:14px; height:220px; border-radius:20px;
  border:1.5px solid var(--ink);
  background:rgba(255,253,248,0.5);
  overflow:hidden; z-index:500;
}
#gauge-fill{
  position:absolute; bottom:0; left:0; width:100%; height:4%;
  background:linear-gradient(180deg, var(--aqua-light), var(--aqua));
  transition:height .08s linear;
}
#gauge-label{
  position:fixed; right:44px; top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink); opacity:0.55; z-index:500; white-space:nowrap;
}
@media (max-width:860px){ #gauge, #gauge-label{display:none;} }

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:400;
  background:rgba(239,232,217,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; display:flex; align-items:center; gap:10px;}
.logo img{height:52px; width:auto;}
nav ul{list-style:none; display:flex; gap:34px;}
nav a{font-size:14.5px; font-weight:500; opacity:0.85; transition:opacity .15s;}
nav a:hover, nav a.active{opacity:1;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.phone-pill{font-family:'IBM Plex Mono',monospace; font-size:13.5px; font-weight:500; opacity:0.8;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle svg{width:24px; height:24px;}
.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  background:var(--white); border-top:1px solid var(--line);
  padding:10px 28px 18px;
}
.mobile-nav a{padding:12px 0; font-size:15px; font-weight:500; border-bottom:1px solid var(--line);}
.mobile-nav.open{display:flex;}
@media (max-width:860px){
  nav{display:none;}
  .menu-toggle{display:block;}
  .phone-pill{display:none;}
}

/* ===== Page hero (inner pages) ===== */
.page-hero{background:var(--deep); color:var(--white); padding:70px 0 60px;}
.page-hero .eyebrow{color:var(--aqua-light);}
.page-hero h1{font-size:clamp(30px,4vw,46px); margin-top:14px;}
.page-hero p{opacity:0.8; max-width:520px; margin-top:14px;}
.crumbs{font-size:13px; opacity:0.6; margin-top:18px; font-family:'IBM Plex Mono',monospace;}

/* ===== Hero (home) ===== */
.hero{position:relative; padding:70px 0 100px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(34px,4.6vw,58px); margin:18px 0 22px;}
.hero h1 .accent{color:var(--aqua);}
.hero p{font-size:17px; max-width:460px; opacity:0.82; margin-bottom:30px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--ink); padding-left:12px;}
.hero-stats b{font-family:'Space Grotesk',sans-serif; font-size:20px; display:block;}
.hero-stats span{font-size:12.5px; opacity:0.65;}
.hero-img-wrap{border-radius:20px; overflow:hidden; position:relative;}
.hero-img-wrap img{width:100%; height:100%; object-fit:cover; aspect-ratio:1122/708;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-img-wrap{order:-1;} }

/* ===== Trust bar ===== */
.trust-bar{background:var(--deep); color:var(--white); padding:22px 0;}
.trust-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.trust-item{display:flex; align-items:center; gap:12px; font-size:14px;}
.trust-item svg{width:22px; height:22px; flex-shrink:0; color:var(--aqua-light);}
.trust-item b{display:block; font-family:'Space Grotesk',sans-serif; font-size:15px;}

/* ===== Section basics ===== */
section{padding:96px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:12px;}
.section-head p{opacity:0.75; margin-top:14px; font-size:16px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ===== About ===== */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.about-img-wrap{border-radius:20px; overflow:hidden;}
.about-img-wrap img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;}
.about-body p{margin-bottom:16px; opacity:0.82;}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr;} .about-img-wrap{order:-1;} }

/* ===== Values / why grid used on About page ===== */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px;}
.value-card{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:26px 22px;}
.value-card h3{font-size:18px; margin-bottom:8px;}
.value-card p{font-size:14.5px; opacity:0.75;}
@media (max-width:800px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .values-grid{grid-template-columns:1fr;} }

/* ===== Services ===== */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,59,82,0.1);}
.service-img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.service-card .service-body{padding:22px 22px 26px; display:flex; flex-direction:column; flex-grow:1;}
.service-card h3{font-size:19px; margin-bottom:10px;}
.service-card p{font-size:14.5px; opacity:0.75; flex-grow:1; margin-bottom:20px;}
.service-card a.link{font-size:13.5px; font-weight:600; color:var(--sun); display:inline-flex; align-items:center; gap:5px;}
@media (max-width:960px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .services-grid{grid-template-columns:1fr;} }

/* Services page: alternating detail rows */
.service-detail{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-bottom:1px solid var(--line);}
.service-detail:last-child{border-bottom:none;}
.service-detail.rev .service-detail-img{order:2;}
.service-detail-img{border-radius:18px; overflow:hidden;}
.service-detail-img img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.service-detail-body ul{margin:18px 0 24px; padding-left:20px;}
.service-detail-body li{margin-bottom:8px; font-size:14.5px; opacity:0.8;}
@media (max-width:860px){ .service-detail{grid-template-columns:1fr;} .service-detail.rev .service-detail-img{order:0;} }

/* ===== Why choose ===== */
.why{background:var(--deep); color:var(--white);}
.why .eyebrow{color:var(--aqua-light);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:10px;}
.why-card{border:1px solid var(--line-light); border-radius:16px; padding:26px 22px;}
.why-card .num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--aqua-light); opacity:0.8;}
.why-card h3{font-size:18px; margin:10px 0 8px;}
.why-card p{font-size:14px; opacity:0.72;}
@media (max-width:960px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .why-grid{grid-template-columns:1fr;} }

/* ===== Gallery ===== */
.gallery-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.filter-btn{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line);
  background:var(--white); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.filter-btn:hover{border-color:var(--ink);}
.filter-btn.active{background:var(--ink); color:var(--sand); border-color:var(--ink);}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-item{border-radius:14px; overflow:hidden; cursor:pointer; position:relative; background:var(--ink);}
.gallery-item img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:linear-gradient(0deg, rgba(9,20,26,0.75), transparent);
  color:var(--white); font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em;
  opacity:0; transition:opacity .25s ease;
}
.gallery-item:hover .cap{opacity:1;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .gallery-grid{grid-template-columns:1fr;} }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(9,20,26,0.92); z-index:900;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(900px,92vw); max-height:82vh; object-fit:contain; border-radius:10px;}
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; background:rgba(255,253,248,0.12); color:var(--white); border:none;
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-close{top:24px; right:24px;}
.lightbox .lb-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox .lb-next{right:24px; top:50%; transform:translateY(-50%);}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover{background:rgba(255,253,248,0.24);}

/* ===== Testimonials ===== */
.testimonials{background:var(--white);}
.test-track-wrap{overflow:hidden;}
.test-track{display:flex; gap:22px; transition:transform .4s ease;}
.test-card{min-width:calc(33.333% - 15px); background:var(--sand); border-radius:18px; padding:28px 26px; display:flex; flex-direction:column;}
.stars{color:var(--sun); font-size:14px; letter-spacing:2px; margin-bottom:14px;}
.test-card p{font-size:14.5px; opacity:0.82; margin-bottom:20px; flex-grow:1;}
.test-who{display:flex; align-items:center; gap:12px;}
.test-who img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.test-who b{display:block; font-size:14.5px;}
.test-who span{font-size:12.5px; opacity:0.6;}
.test-controls{display:flex; gap:10px; margin-top:30px;}
.test-controls button{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--ink);
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.test-controls button:hover{background:var(--ink); color:var(--sand);}
@media (max-width:900px){ .test-card{min-width:calc(50% - 11px);} }
@media (max-width:600px){ .test-card{min-width:100%;} }

/* ===== CTA band ===== */
.cta-band{background:var(--sun); color:var(--white); text-align:center;}
.cta-band h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:16px;}
.cta-band p{opacity:0.92; max-width:520px; margin:0 auto 30px;}

/* ===== Stats ===== */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center;}
.stat b{font-family:'Space Grotesk',sans-serif; font-size:clamp(32px,4.2vw,46px); color:var(--deep); display:block;}
.stat span{font-size:13.5px; opacity:0.7; font-family:'IBM Plex Mono',monospace; letter-spacing:0.05em;}
@media (max-width:760px){ .stats-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }

/* ===== Contact page ===== */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start;}
.contact-form{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:34px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.form-group{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-group label{font-size:13px; font-weight:500; opacity:0.75;}
.form-group input, .form-group select, .form-group textarea{
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:14.5px; background:var(--sand);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:2px solid var(--aqua); outline-offset:1px;}
.form-note{font-size:13px; opacity:0.6; margin-top:14px;}
.form-success{display:none; background:var(--aqua-light); color:var(--deep-2); padding:14px 18px; border-radius:10px; font-size:14px; margin-bottom:16px; font-weight:500;}
.form-success.show{display:block;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }

.contact-side{display:flex; flex-direction:column; gap:22px;}
.contact-card{background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; gap:14px; align-items:flex-start;}
.contact-card svg{width:22px; height:22px; color:var(--aqua); flex-shrink:0; margin-top:2px;}
.contact-card b{display:block; font-size:15px; margin-bottom:4px;}
.contact-card span, .contact-card a{font-size:14px; opacity:0.75;}
.map-frame{border-radius:18px; overflow:hidden; border:1px solid var(--line); min-height:340px; margin-top:16px;}
.map-frame iframe, #gmap{width:100%; height:100%; min-height:340px; border:0; display:block;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

/* ===== Footer ===== */
footer{background:var(--deep-2); color:var(--white); padding:70px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line-light);}
.foot-grid h4{font-size:14px; margin-bottom:18px; opacity:0.6; font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:11px; font-size:14.5px; opacity:0.82;}
.foot-grid li a:hover{opacity:1; text-decoration:underline;}
.foot-logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.foot-logo img{height:32px;}
.foot-desc{font-size:14.5px; opacity:0.65; max-width:300px; margin-bottom:20px;}
.social-links{display:flex; gap:10px;}
.social-links a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
  color:var(--ink);
}
.social-links a:hover{background:var(--aqua); border-color:var(--aqua); color:var(--white); transform:translateY(-2px);}
.social-links svg{width:18px; height:18px; fill:currentColor;}
.bottom-row{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; opacity:0.55; flex-wrap:wrap; gap:10px;}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }

/* WhatsApp floating button */
.wa-float{
  position:fixed; bottom:24px; left:24px; z-index:480;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,0.25);
}
.wa-float svg{width:28px; height:28px; fill:var(--white);}

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}