:root{
      --ink:#0B2E2C;
      --lagoon:#1F5C56;
      --lagoon-2:#2C7268;
      --moss:#7A8B6F;
      --mist:#E6E1D2;
      --foam:#F6F4EC;
      --brass:#C79A46;
      --text:#16302C;
      --text-soft:#4C6560;
      --card:#FFFFFF;
      --line: rgba(22,48,44,0.12);
      --shadow: 0 24px 60px -30px rgba(11,46,42,0.35);
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      background:var(--foam);
      color:var(--text);
      font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
      font-weight:400;
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%;}
    a{color:var(--lagoon); text-decoration:none;}
    a:hover{color:var(--lagoon-2);}
    h1,h2,h3{
      font-family:'Fraunces', Georgia, serif;
      font-weight:500;
      text-wrap:balance;
      margin:0;
      letter-spacing:-0.01em;
    }
    .eyebrow{
      text-transform:uppercase;
      letter-spacing:0.14em;
      font-size:0.72rem;
      font-weight:600;
      color:var(--lagoon-2);
    }
    .wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px);}
    section{position:relative;}
    .icon{display:inline-flex; flex:none;}

    /* ---------- NAV ---------- */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(160%) blur(14px);
      background:rgba(246,244,236,0.86);
      border-bottom:1px solid var(--line);
    }
    nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:18px clamp(20px,4vw,56px);
      max-width:1180px; margin:0 auto;
    }
    .brand{
      font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600;
      letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;
      color:var(--text);
    }
    .navlinks{display:flex; gap:32px; font-size:0.92rem; color:var(--text-soft);}
    .navlinks a{color:var(--text-soft);}
    .navlinks a:hover{color:var(--lagoon-2);}
    .navcta{
      font-size:0.85rem; padding:10px 20px; border-radius:100px;
      background:var(--ink); color:var(--foam);
      white-space:nowrap;
    }
    .navcta:hover{color:var(--foam); background:var(--lagoon);}
    @media (max-width:820px){ .navlinks{display:none;} }

    /* ---------- HERO ---------- */
    .hero{
      padding:clamp(64px,10vw,120px) 0 clamp(40px,6vw,80px);
      overflow:hidden;
    }
    .hero-grid{
      display:flex; gap:clamp(32px,5vw,64px); align-items:center;
    }
    .hero-copy{flex:1 1 0; min-width:300px;}
    .hero-visual-col{flex:1 1 0; min-width:300px;}
    @media (max-width:900px){ .hero-grid{flex-direction:column;} }
    .hero h1{
      font-size:clamp(2.6rem, 5.4vw, 4.4rem);
      line-height:1.02;
    }
    .hero h1 em{
      font-style:italic; color:var(--lagoon-2); font-weight:400;
    }
    .hero p.lede{
      margin-top:22px; font-size:1.14rem; color:var(--text-soft); max-width:46ch;
    }
    .hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; align-items:center;}
    .btn{
      display:inline-flex; align-items:center; gap:8px;
      padding:14px 26px; border-radius:100px; font-size:0.95rem; font-weight:500;
      border:1px solid transparent; cursor:pointer;
    }
    .btn-primary{background:var(--ink); color:var(--foam);}
    .btn-primary:hover{background:var(--lagoon); color:var(--foam);}
    .btn-ghost{border-color:var(--line); color:var(--text); background:transparent;}
    .btn-ghost:hover{border-color:var(--lagoon-2); color:var(--lagoon-2);}
    .btn-brass{background:var(--brass); color:#2A1F08;}
    .btn-brass:hover{background:#D9AE5E; color:#2A1F08;}

    .trustline{
      margin-top:44px; display:flex; gap:clamp(20px,4vw,48px); flex-wrap:wrap;
      padding-top:28px; border-top:1px solid var(--line);
    }
    .trustline .stat b{
      display:block; font-family:'Fraunces', serif; font-size:1.7rem; font-weight:500; color:var(--ink);
    }
    .trustline .stat span{font-size:0.82rem; color:var(--text-soft);}
    .ph{color:var(--brass);}

    /* water visual */
    .water-visual{
      position:relative; aspect-ratio:4/5; border-radius:28px; overflow:hidden;
      background:
        radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,0.5), transparent 55%),
        linear-gradient(200deg, #BFE0D8 0%, #6FA79B 32%, #1F5C56 62%, #0B2E2C 100%);
      box-shadow:var(--shadow);
    }
    .water-visual-img{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; display:block; z-index:1;
    }
    .water-visual .ripple{
      position:absolute; inset:0; z-index:2;
      background-image:
        repeating-radial-gradient(circle at 30% 70%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0.16) 1px, transparent 2px, transparent 42px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 1px, transparent 2px, transparent 58px);
      mix-blend-mode:screen;
      opacity:0.6;
    }
    .water-visual .sunglint{
      position:absolute; width:55%; aspect-ratio:1; right:-10%; top:-8%; z-index:3;
      background:radial-gradient(circle, rgba(231,190,109,0.45), transparent 60%);
      filter:blur(6px);
    }
    .water-visual .scrim{
      position:absolute; inset:0; z-index:4; pointer-events:none;
      background:linear-gradient(0deg, rgba(11,46,44,0.75) 0%, rgba(11,46,44,0.28) 30%, transparent 55%);
    }
    .water-visual .caption{
      position:absolute; left:20px; bottom:20px; right:20px; z-index:5;
      color:#F6F4EC; font-size:0.8rem; letter-spacing:0.03em;
      display:flex; justify-content:space-between; align-items:flex-end;
      opacity:0.9;
    }

    /* wave divider */
    .wave-divider{display:block; width:100%; height:auto; margin-top:-1px;}

    /* ---------- SERVICES ---------- */
    .services{background:var(--ink); color:var(--foam); padding:clamp(70px,9vw,110px) 0;}
    .services .eyebrow{color:var(--brass);}
    .services h2{color:var(--foam); font-size:clamp(2rem,3.4vw,2.8rem); max-width:16ch; margin-top:14px;}
    .services-intro{
      display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; margin-bottom:56px;
    }
    .services-intro > div:first-child{flex:1.3 1 320px;}
    .services-intro p{flex:1 1 280px; color:#C9D6D1; max-width:44ch; font-size:1.02rem; margin:0;}

    .service-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
      background:rgba(246,244,236,0.14);
      border:1px solid rgba(246,244,236,0.14);
      border-radius:18px; overflow:hidden;
    }
    @media (max-width:900px){ .service-grid{grid-template-columns:repeat(2,1fr);} }
    @media (max-width:560px){ .service-grid{grid-template-columns:1fr;} }
    .service-card{
      background:#0E2422; padding:32px 26px; min-height:200px;
      display:flex; flex-direction:column; justify-content:space-between; gap:22px;
    }
    .service-card:hover{background:#123330;}
    .service-card .num{font-family:'Fraunces',serif; font-size:0.85rem; color:var(--brass);}
    .service-card h3{color:var(--foam); font-size:1.18rem; font-weight:500;}
    .service-card p{color:#AEC0BB; font-size:0.9rem; margin:0;}

    /* ---------- PROCESS ---------- */
    .process{padding:clamp(80px,10vw,120px) 0;}
    .section-head{max-width:56ch; margin-bottom:56px;}
    .section-head h2{font-size:clamp(2rem,3.4vw,2.7rem); margin-top:14px;}
    .section-head p{color:var(--text-soft); margin-top:16px; font-size:1.04rem;}

    .process-rail{
      position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
    }
    @media (max-width:900px){ .process-rail{grid-template-columns:1fr 1fr;} }
    @media (max-width:560px){ .process-rail{grid-template-columns:1fr;} }
    .process-rail::before{
      content:""; position:absolute; top:22px; left:0; right:0; height:1px;
      background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
    }
    @media (max-width:900px){ .process-rail::before{display:none;} }
    .step{position:relative;}
    .step .dot{
      width:44px; height:44px; border-radius:50%; background:var(--card);
      border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
      font-family:'Fraunces',serif; color:var(--lagoon); font-size:1rem; position:relative; z-index:1;
      box-shadow:0 6px 18px -10px rgba(11,46,42,0.3);
    }
    .step h3{margin-top:20px; font-size:1.12rem; font-weight:500;}
    .step p{color:var(--text-soft); font-size:0.92rem; margin-top:8px;}

    /* ---------- WHY / USP ---------- */
    .why{background:var(--mist); padding:clamp(80px,10vw,120px) 0;}
    .why-grid{display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,70px); align-items:flex-start;}
    .why-grid > div:first-child{flex:0.9 1 320px;}
    .why-list{flex:1.1 1 380px; display:flex; flex-direction:column;}
    .why-item{
      padding:26px 0; border-top:1px solid var(--line);
      display:flex; gap:20px; align-items:flex-start;
    }
    .why-item:last-child{border-bottom:1px solid var(--line);}
    .why-item .ic{
      width:38px; height:38px; border-radius:10px; flex:none;
      background:var(--card); border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center; color:var(--lagoon);
    }
    .why-item h3{font-size:1.05rem; font-weight:500;}
    .why-item p{color:var(--text-soft); font-size:0.92rem; margin-top:6px;}

    /* ---------- GALLERY ---------- */
    .gallery{padding:clamp(80px,10vw,120px) 0;}
    .gallery-grid{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px;
    }
    .tile{
      border-radius:14px; position:relative; overflow:hidden;
      aspect-ratio:4/3; background:var(--mist);
    }
    .tile img{
      width:100%; height:100%; object-fit:cover; display:block;
      transition:transform .5s ease;
    }
    .tile:hover img{transform:scale(1.06);}

    /* ---------- TESTIMONIAL ---------- */
    .testimonial{padding:clamp(60px,8vw,100px) 0;}
    .quote-card{
      background:var(--card); border:1px solid var(--line); border-radius:22px;
      padding:clamp(36px,5vw,64px); text-align:center; box-shadow:var(--shadow);
    }
    .quote-card q{
      font-family:'Fraunces', serif; font-style:italic; font-weight:400;
      font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.4; color:var(--ink);
      quotes:none;
    }
    .quote-card .who{margin-top:24px; font-size:0.88rem; color:var(--text-soft);}

    /* ---------- CTA / CONTACT ---------- */
    .cta{
      background:linear-gradient(165deg, var(--lagoon) 0%, var(--ink) 100%);
      color:var(--foam); padding:clamp(70px,9vw,110px) 0; border-radius:28px;
      margin:0 clamp(20px,4vw,56px) clamp(80px,10vw,120px);
      position:relative; overflow:hidden;
    }
    .cta .wrap{max-width:1180px; padding:0 clamp(24px,4vw,40px);}
    .cta-grid{display:flex; flex-wrap:wrap; gap:clamp(30px,5vw,60px);}
    .cta-grid > div, .cta-grid form{flex:1 1 320px;}
    .cta h2{color:var(--foam); font-size:clamp(1.9rem,3.4vw,2.6rem); max-width:14ch;}
    .cta p{color:#C9D6D1; margin-top:16px; max-width:42ch;}
    .cta-list{margin-top:28px; display:flex; flex-direction:column; gap:12px; font-size:0.92rem; color:#DCE7E3;}
    .cta-list div{display:flex; align-items:center; gap:10px;}
    /* Real phone/email links replaced plain <span> placeholders here — the
       global a{color:var(--lagoon)} rule would otherwise win over this
       list's inherited light color, since an element-selector rule always
       beats plain inheritance regardless of specificity. */
    .cta-list a{color:#DCE7E3;}
    .cta-list a:hover{color:var(--foam);}

    form.inquire{
      background:rgba(246,244,236,0.06); border:1px solid rgba(246,244,236,0.18);
      border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:14px;
    }
    form.inquire label{font-size:0.78rem; color:#C9D6D1; letter-spacing:0.04em;}
    form.inquire input, form.inquire select, form.inquire textarea{
      width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(246,244,236,0.24);
      background:rgba(11,46,42,0.35); color:var(--foam); font-family:inherit; font-size:0.92rem;
    }
    form.inquire input::placeholder, form.inquire textarea::placeholder{color:#9BB0AB;}
    form.inquire .field{display:flex; flex-direction:column; gap:6px;}
    form.inquire .row{display:flex; gap:14px; flex-wrap:wrap;}
    form.inquire .row .field{flex:1 1 140px;}
    form.inquire button{
      margin-top:6px; padding:14px; border-radius:10px; border:none; cursor:pointer;
      background:var(--brass); color:#2A1F08; font-weight:600; font-size:0.95rem;
    }

    /* ---------- FOOTER ---------- */
    footer{padding:0 0 60px;}
    .footer-grid{
      display:flex; flex-wrap:wrap; gap:32px;
      padding-top:44px; border-top:1px solid var(--line);
    }
    .footer-grid > div:first-child{flex:1.4 1 280px;}
    .footer-grid > div{flex:1 1 140px;}
    .footer-grid h4{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-soft); margin-bottom:14px; font-weight:600;}
    .footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:0.9rem;}
    .footer-grid a{color:var(--text-soft);}
    .footer-grid a:hover{color:var(--lagoon-2);}
    .footer-bottom{
      margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
      display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
      font-size:0.8rem; color:var(--text-soft);
    }

/* ---------- MOBILE NAV (added for production site) ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer; padding:0;
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--foam);
    border-bottom:1px solid var(--line); padding:8px clamp(20px,4vw,56px) 20px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 0; border-top:1px solid var(--line);}
  .navcta{display:none;}
}

/* ---------- WHATSAPP FLOATING BUTTON ---------- */
.whatsapp-fab{
  position:fixed; bottom:22px; right:22px; z-index:999;
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  box-shadow:0 12px 30px -10px rgba(11,46,42,0.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover{
  transform:scale(1.08);
  box-shadow:0 14px 34px -8px rgba(11,46,42,0.5);
}

/* ---------- FORM: honeypot + status ---------- */
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
.form-status{margin:2px 0 0; font-size:0.86rem; min-height:1.2em;}
.form-status.ok{color:#BFE0D8;}
.form-status.error{color:#F0B7A4;}
form.inquire button[disabled]{opacity:0.6; cursor:not-allowed;}

/* ---------- REAL LOGO + PAGE LOADER (added for production site) ---------- */
.brand-logo{
  height:28px; width:auto; display:block;
}
.page-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--foam);
  opacity:1; visibility:visible;
  transition:opacity .5s ease, visibility .5s ease;
}
.page-loader img{width:min(180px, 40vw); height:auto;}
.page-loader.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .page-loader{transition:none;}
}

/* ---------- SHARED UTILITIES (avoid repeating the same inline style across pages) ---------- */
.brand-suffix{font-weight:400; opacity:.6;}
.eyebrow-brass{color:var(--brass);}
.h2-lg{font-size:clamp(2rem,3.4vw,2.7rem); margin-top:14px;}
.mt-14{margin-top:14px;}
.nav-active{color:var(--lagoon-2); font-weight:600;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* .ph (placeholder-flag brass) is readable on the dark hero/CTA backgrounds it's
   normally used on, but fails contrast on the white quote-card — override locally
   rather than darkening --brass globally and losing the "sunglint" accent elsewhere. */
.quote-card .ph{color:#8A6423;}

/* Footer links with no real destination yet (Careers, Instagram, WhatsApp) */
.link-soon{opacity:0.55;}

.footer-tagline{color:var(--text-soft); font-size:0.9rem; margin-top:14px; max-width:32ch;}