/*!
 * Srishti Eco Tech — Global stylesheet (loaded on every page)
 * Base tokens, header/nav, buttons, homepage sections, footer, FAQ, utilities.
 */
  :root{
    --ink:#14211b;
    --forest:#184e36;      /* logo green */
    --forest-2:#22694a;
    --forest-deep:#0f3527;
    --emerald:#22694a;
    --gold:#c49d44;        /* logo leaf gold */
    --gold-soft:#e4c877;
    --moss:#d8e6d2;
    --sage:#eaf1e4;
    --paper:#f6f4ec;
    --paper-2:#efece1;
    --line:rgba(20,33,27,.12);
    --muted:#57615b;
    --white:#ffffff;
    --radius:20px;
    --shadow:0 24px 60px -28px rgba(15,53,39,.45);
    --maxw:1200px;
    --pad:28px;
    /* Emil easing curves */
    --ease-out:cubic-bezier(0.23,1,0.32,1);
    --ease-io:cubic-bezier(0.77,0,0.175,1);
    --ease-soft:cubic-bezier(0.16,1,0.3,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{
    font-family:'Outfit',system-ui,sans-serif;
    color:var(--ink);background:var(--paper);line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.015em}
  a{color:inherit;text-decoration:none}

  /* Unified container — every section + nav shares this exact column */
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

  .eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.6em}
  .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold);display:inline-block}
  .eyebrow.plain::before{display:none}

  /* Grain overlay (fixed, no repaint on scroll) */
  .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.96rem;
    padding:.9em 1.6em;border-radius:999px;cursor:pointer;border:1px solid transparent;white-space:nowrap;
    transition:transform .18s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,color .2s;will-change:transform}
  .btn .arw{transition:transform .25s var(--ease-out)}
  .btn:hover .arw{transform:translateX(4px)}
  .btn:active{transform:scale(.97)}
  /* Primary CTA — high-contrast gold with dark ink text */
  .btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#20180a;font-weight:700;
    box-shadow:0 10px 26px -12px rgba(196,157,68,.85),inset 0 1px 0 rgba(255,255,255,.5)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(196,157,68,.95),inset 0 1px 0 rgba(255,255,255,.5)}
  .btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
  .btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
  .btn-dark{background:var(--forest);color:var(--white)}
  .btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .btn-outline{background:transparent;color:var(--forest);border-color:var(--line)}
  .btn-outline:hover{border-color:var(--gold);color:var(--forest-deep);transform:translateY(-2px)}

  /* Nav */
  header.nav{position:sticky;top:0;z-index:40;background:rgba(246,244,236,.72);backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s}
  header.nav.scrolled{border-bottom:1px solid var(--line);box-shadow:0 8px 30px -24px rgba(15,53,39,.5)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo-img{height:44px;width:auto;display:block}
  .foot-logo{height:50px}
  .nav-links{display:flex;align-items:center;gap:2rem;font-size:.94rem;font-weight:500}
  .nav-links a.link{color:var(--muted);position:relative;transition:color .2s}
  .nav-links a.link::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--gold);transition:width .28s var(--ease-out)}
  .nav-links a.link:hover{color:var(--forest)}
  .nav-links a.link:hover::after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:.75rem}

  /* ===== HERO — asymmetric split ===== */
  /* Photograph base with a brand-green scrim layered over it. The scrim sits at
     z-index 0 — above the element's background image, below the glows (z-index 1)
     and the content (z-index 3) — so the existing layering is unchanged. It stays
     darkest on the left, where the headline and copy sit, and lightens to the
     right so the photo reads through behind the lead card. */
  .hero{position:relative;overflow:hidden;color:var(--white);
    background:#0f3527 url('../uploads/hero-bg-img.webp') center center/cover no-repeat}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(to top,rgba(15,53,39,.72) 0%,rgba(15,53,39,0) 36%),
      linear-gradient(90deg,rgba(15,53,39,.8) 0%,rgba(17,58,42,.6) 38%,rgba(20,66,46,.34) 68%,rgba(24,78,54,.24) 100%),
      radial-gradient(120% 120% at 85% 0%,rgba(47,138,99,.16) 0%,rgba(15,53,39,.2) 70%)}
  .hero .wrap{position:relative;z-index:3}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:64px 0 80px}
  .hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);font-weight:600;letter-spacing:-.02em}
  .hero h1 .gold{color:var(--gold-soft);font-style:italic;font-weight:500}
  .hero p.sub{font-size:clamp(1.05rem,1.5vw,1.25rem);color:rgba(255,255,255,.8);margin-top:1.4rem;max-width:540px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
  .hero .tag{display:inline-flex;gap:.55rem;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.04em;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:.5em 1em;border-radius:999px;color:var(--moss);margin-bottom:1.5rem;backdrop-filter:blur(6px)}
  .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-soft)}
  .hero-metrics{display:flex;gap:2rem;margin-top:2.6rem;flex-wrap:wrap}
  .hero-metrics .m .v{font-family:'Fraunces';font-size:1.7rem;font-weight:600;color:var(--gold-soft)}
  .hero-metrics .m .k{font-size:.78rem;color:rgba(255,255,255,.62);letter-spacing:.02em}

  /* static decorative glow (no motion) */
  .glow{position:absolute;border-radius:50%;filter:blur(70px);z-index:1;pointer-events:none}
  .glow.g1{width:360px;height:360px;background:#2f8a63;opacity:.45;top:-130px;right:-70px}
  .glow.g2{width:300px;height:300px;background:#c49d44;opacity:.22;bottom:-130px;left:-50px}

  /* Hero lead form */
  .lead-card{position:relative;z-index:4;background:#fff;border-radius:24px;padding:30px 28px;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.6) inset;border:1px solid rgba(255,255,255,.6)}
  .lead-card .lc-head{margin-bottom:18px}
  .lead-card h3{font-size:1.45rem;color:var(--forest);letter-spacing:-.01em}
  .lead-card .lc-sub{font-size:.9rem;color:var(--muted);margin-top:.35rem}
  .lead-form{display:grid;gap:14px}
  .field{display:grid;gap:6px}
  .field.row2{grid-template-columns:1fr 1fr;display:grid;gap:12px}
  .field label{font-size:.76rem;font-weight:600;color:var(--forest-deep);letter-spacing:.01em}
  .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:.92rem;color:var(--ink);
    background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:.72em .85em;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);appearance:none}
  .field textarea{resize:vertical;min-height:70px}
  .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2357615b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;cursor:pointer}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,157,68,.18)}
  .field input::placeholder,.field textarea::placeholder{color:#9aa39d}
  .lead-form .btn-primary{width:100%;justify-content:center;margin-top:2px}
  .lead-note{font-size:.74rem;color:var(--muted);text-align:center;margin-top:2px;line-height:1.45}
  .lead-ok{display:none;text-align:center;padding:22px 6px}
  .lead-ok.show{display:block}
  .lead-ok .tick{width:52px;height:52px;border-radius:50%;background:var(--sage);display:grid;place-items:center;margin:0 auto 14px}
  .lead-ok .tick svg{width:26px;height:26px;stroke:var(--forest);stroke-width:2.4}
  .lead-ok h3{color:var(--forest);font-size:1.3rem;margin-bottom:.4rem}
  .lead-ok p{font-size:.9rem;color:var(--muted)}

  /* Marquee */
  .marquee{background:var(--forest-deep);color:#fff;padding:16px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:2}
  .marquee .track{display:inline-flex;gap:3rem;animation:scroll 26s linear infinite;will-change:transform}
  .marquee:hover .track{animation-play-state:paused}
  .marquee span{font-size:.9rem;font-weight:500;letter-spacing:.03em;color:rgba(255,255,255,.72);display:inline-flex;gap:3rem;align-items:center}
  .marquee span::after{content:"◆";color:var(--gold);font-size:.6rem}
  @keyframes scroll{to{transform:translateX(-50%)}}

  section{padding:96px 0;position:relative;z-index:2}
  .sec-head{max-width:660px;margin-bottom:54px}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .sec-head h2{font-size:clamp(1.95rem,3.6vw,3rem);margin-top:.8rem}
  .sec-head p{color:var(--muted);font-size:1.06rem;margin-top:1rem}

  /* Trust cells */
  .trust{background:var(--forest);color:#fff}
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .trust-cell{padding:30px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
  .trust-cell:last-child{border-right:0}
  .trust-cell .num{font-family:'Fraunces';font-size:2.1rem;font-weight:600;color:var(--gold-soft)}
  .trust-cell .lbl{font-size:.82rem;color:rgba(255,255,255,.72);margin-top:.25rem}

  /* Audience */
  .aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .aud-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden;
    transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s}
  .aud-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out)}
  .aud-ico{width:48px;height:48px;border-radius:13px;background:var(--sage);display:grid;place-items:center;margin-bottom:18px;transition:transform .35s var(--ease-out)}
  .aud-ico svg{width:24px;height:24px;stroke:var(--forest)}
  .aud-card h3{font-size:1.2rem;margin-bottom:.45rem}
  .aud-card p{font-size:.92rem;color:var(--muted)}
  @media(hover:hover) and (pointer:fine){
    .aud-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
    .aud-card:hover::before{transform:scaleY(1)}
    .aud-card:hover .aud-ico{transform:scale(1.08) rotate(-4deg)}
  }

  /* Services — zig-zag friendly bento */
  .svc-wrap{background:var(--paper-2)}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .svc-card{background:var(--white);border-radius:var(--radius);padding:32px 28px;border:1px solid var(--line);
    display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;
    transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .svc-card .num{font-family:'Fraunces';font-size:.95rem;font-weight:600;color:var(--gold);letter-spacing:.05em}
  .svc-card h3{font-size:1.34rem}
  .svc-card p{font-size:.94rem;color:var(--muted)}
  .svc-card .more{margin-top:auto;padding-top:.7rem;font-weight:600;font-size:.9rem;color:var(--forest);display:inline-flex;gap:.4rem;align-items:center}
  .svc-card .more .arw{transition:transform .25s var(--ease-out)}
  .svc-glow{position:absolute;inset:0;opacity:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(196,157,68,.1),transparent 60%);transition:opacity .3s;pointer-events:none}
  @media(hover:hover) and (pointer:fine){
    .svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .svc-card:hover .more .arw{transform:translateX(4px)}
    .svc-card:hover .svc-glow{opacity:1}
  }

  /* Why */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .why-col .idx{font-family:'Fraunces';font-size:1.05rem;color:var(--gold);font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
  .why-col .idx::before{content:"";width:34px;height:2px;background:var(--gold)}
  .why-col h3{font-size:1.32rem;margin-bottom:.6rem}
  .why-col p{color:var(--muted);font-size:.98rem}

  /* Process */
  .proc-wrap{background:var(--forest);color:#fff}
  .proc-wrap .sec-head h2{color:#fff}
  .proc-wrap .sec-head p{color:rgba(255,255,255,.7)}
  .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .proc-step{position:relative;padding-top:32px}
  .proc-step .line{position:absolute;top:9px;left:0;right:0;height:2px;background:rgba(255,255,255,.14)}
  .proc-step .line::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold);transition:width .8s var(--ease-out)}
  .proc-step.in .line::after{width:100%}
  .proc-step .dot{position:absolute;top:3px;left:0;width:14px;height:14px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 5px rgba(228,200,119,.18)}
  .proc-step .st{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
  .proc-step h3{font-size:1.22rem;margin:.5rem 0 .55rem}
  .proc-step p{font-size:.9rem;color:rgba(255,255,255,.72)}

  /* Cases */
  .case-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px}
  .case-card{border-radius:var(--radius);padding:32px 28px;color:#fff;position:relative;overflow:hidden;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;
    transition:transform .35s var(--ease-out)}
  .case-card.c1{background:linear-gradient(150deg,#22694a,#0f3527)}
  .case-card.c2{background:linear-gradient(150deg,#2f8a63,#123f2c)}
  .case-card.c3{background:linear-gradient(150deg,#3a6b2f,#173a20)}
  .case-card .cat{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)}
  .case-card h3{font-size:1.5rem;margin:.4rem 0 1rem}
  .case-card p{font-size:.94rem;color:rgba(255,255,255,.85)}
  .case-card .num{position:absolute;right:20px;top:12px;font-family:'Fraunces';font-size:4.6rem;opacity:.12;font-weight:600}
  @media(hover:hover) and (pointer:fine){.case-card:hover{transform:translateY(-6px)}}

  /* Quote */
  .quote-wrap{background:var(--paper-2)}
  .quote{max-width:900px;margin:0 auto;text-align:center}
  .quote .mk{font-family:'Fraunces';font-size:4rem;color:var(--gold);line-height:.5;height:36px}
  .quote blockquote{font-family:'Fraunces';font-size:clamp(1.4rem,3vw,2.15rem);font-weight:500;line-height:1.32;color:var(--forest)}
  .quote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.95rem;color:var(--muted);font-weight:500}

  /* FAQ */
  .faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:'Fraunces';font-size:1.16rem;font-weight:600;color:var(--forest);transition:color .2s}
  .faq-q:hover{color:var(--gold)}
  .faq-q .ic{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.3s var(--ease-out);position:relative}
  .faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--forest);transition:.3s var(--ease-out)}
  .faq-q .ic::before{width:12px;height:2px}
  .faq-q .ic::after{width:2px;height:12px}
  .faq-item.open .faq-q .ic{background:var(--forest);border-color:var(--forest);transform:rotate(90deg)}
  .faq-item.open .faq-q .ic::before,.faq-item.open .faq-q .ic::after{background:#fff}
  .faq-item.open .faq-q .ic::after{opacity:0}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
  .faq-a p{padding:0 4px 24px;color:var(--muted);font-size:.98rem;max-width:94%}

  /* Footer CTA */
  .fcta{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 20% 10%,#22694a,#0f3527);color:#fff;text-align:center}
  .fcta .inner{position:relative;z-index:3;max-width:720px;margin:0 auto}
  .fcta h2{font-size:clamp(2rem,4vw,3.1rem)}
  .fcta p{color:rgba(255,255,255,.8);font-size:1.1rem;margin-top:1rem}
  .fcta .hero-cta{justify-content:center}

  footer.site{background:#0c2b1f;color:rgba(255,255,255,.7);padding:70px 0 30px;position:relative;z-index:2}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-about{font-size:.92rem;max-width:300px;margin-top:1.1rem}
  .foot-col h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.1rem}
  .foot-col a{display:block;font-size:.92rem;padding:.32rem 0;transition:color .2s,transform .2s}
  .foot-col a:hover{color:var(--gold-soft);transform:translateX(3px)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:.83rem;color:rgba(255,255,255,.5)}
  .foot-bottom .tagline{color:var(--gold-soft);font-weight:600;letter-spacing:.04em}

  /* Reveal */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
  .reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}
  /* Hero is static — no entrance animation */

  .wa-float{position:fixed;right:22px;bottom:22px;z-index:50;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;
    box-shadow:0 14px 30px -8px rgba(37,211,102,.6);transition:transform .25s var(--ease-out)}
  .wa-float:hover{transform:scale(1.08)}
  .wa-float svg{width:30px;height:30px;fill:#fff}

  @media(max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:30px;padding:48px 0 60px}
    .hero-copy{max-width:620px}
    .hero p.sub{max-width:none}
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .trust-cell:nth-child(2){border-right:0}
    .trust-cell:nth-child(1),.trust-cell:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}
    .aud-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
    .why-grid{grid-template-columns:1fr;gap:30px}
    .proc-grid{grid-template-columns:repeat(2,1fr);gap:34px}
    .case-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  }
  @media(max-width:860px){
    /* Mobile header — hamburger only, no crowded CTA.
       Scoped to header.nav so these beat the base .menu-btn / .mobile-nav
       display rules that appear later in this file (equal specificity, so
       source order would otherwise keep the drawer hidden). */
    .nav-links,.nav-cta{display:none}
    header.nav .menu-btn{display:block}
    body .mobile-nav{display:flex}
    .nav-inner{height:62px}
    .logo-img{height:34px}
    header.nav{background:rgba(246,244,236,.94)}
  }
  @media(max-width:680px){
    :root{--pad:18px}
    section{padding:58px 0}
    .hero-grid{padding:32px 0 44px}
    .hero h1{font-size:clamp(2rem,8.5vw,2.7rem)}
    .hero p.sub{font-size:1.02rem}
    .hero-metrics{gap:1.1rem;margin-top:2rem}
    .hero-metrics .m .v{font-size:1.4rem}
    .hero-metrics .m .k{font-size:.72rem}
    .lead-card{padding:20px 16px;border-radius:18px}
    .lead-card h3{font-size:1.24rem}
    .field.row2{grid-template-columns:1fr}
    .aud-grid,.svc-grid{grid-template-columns:1fr}
    /* Keep the trust stats as a 2-up grid on mobile (2 columns × 2 rows). */
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .trust-cell{padding:22px 14px;border-right:1px solid rgba(255,255,255,.1);border-bottom:0}
    .trust-cell .num{font-size:1.75rem}
    .trust-cell:nth-child(2n){border-right:0}
    .trust-cell:nth-child(1),.trust-cell:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}
    .proc-grid{grid-template-columns:1fr;gap:24px}
    .foot-grid{grid-template-columns:1fr;gap:22px}
    .sec-head{margin-bottom:34px}
    .sec-head h2{font-size:clamp(1.7rem,6.5vw,2.2rem)}
    /* Smaller buttons across the board on mobile */
    .btn{font-size:.86rem;padding:.72em 1.2em}
    /* Inner-page hero CTAs stay on one row */
    .page-hero .hero-cta{flex-wrap:nowrap;gap:.5rem}
    .page-hero .hero-cta .btn{padding:.62em .9em;font-size:.8rem}
    .marquee span,.marquee .track{gap:1.6rem}
    .wa-float{width:52px;height:52px;right:16px;bottom:16px}
  }
  @media(max-width:400px){
    :root{--pad:15px}
    .hero h1{font-size:1.85rem}
    .hero-metrics{gap:.9rem}
    .hero-metrics .m .v{font-size:1.25rem}
    .btn{padding:.62em 1.5em;font-size:.82rem}
    .page-hero .hero-cta .btn{padding:.56em 1.5em;font-size:.76rem}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}
    .reveal{opacity:1;transform:none}
  }

/* =========================================================
   SUBPAGE COMPONENTS (shared across About / Services / Contact)
   ========================================================= */

/* Mobile menu toggle */
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:4px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--forest);margin:5px 0;border-radius:2px;transition:.3s var(--ease-out)}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Premium mobile slide-in drawer */
.nav-backdrop{position:fixed;inset:0;z-index:60;background:rgba(9,25,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}
.nav-backdrop.show{opacity:1;pointer-events:auto}

.mobile-nav{display:none;position:fixed;inset:0;z-index:61;width:100%;
  background:linear-gradient(165deg,var(--forest) 0%,var(--forest-deep) 100%);color:#fff;
  padding:20px var(--pad) calc(26px + env(safe-area-inset-bottom));flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s var(--ease-soft),visibility .42s var(--ease-soft);
  overflow-y:auto;overscroll-behavior:contain}
.mobile-nav.show{transform:none;visibility:visible}

.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:20px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.mnav-head .logo-img{height:34px;width:auto}
.mnav-close{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer;
  transition:transform .3s var(--ease-out),background .25s,border-color .25s}
.mnav-close:hover{background:rgba(196,157,68,.2);border-color:var(--gold);transform:rotate(90deg)}
.mnav-close svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}

.mnav-links{display:flex;flex-direction:column;margin-top:2px}
.mnav-links a{position:relative;display:flex;align-items:center;gap:.7rem;
  font-family:'Fraunces';font-size:1.28rem;font-weight:600;color:rgba(255,255,255,.9);
  padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.1);transition:color .2s var(--ease-out)}
.mnav-links a::before{content:"";width:0;height:2px;background:var(--gold);border-radius:2px;transition:width .3s var(--ease-out)}
.mnav-links a:hover,.mnav-links a.active,.mnav-links a[aria-current],.mnav-links .current-menu-item>a{color:var(--gold-soft)}
.mnav-links a:hover::before,.mnav-links a.active::before,.mnav-links a[aria-current]::before,.mnav-links .current-menu-item>a::before{width:18px}

.mnav-cta{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px}
.mnav-cta .btn{width:100%;justify-content:center;font-family:'Outfit'}

/* Reveal the drawer's contents with a subtle stagger when it opens */
.mobile-nav .mnav-head,.mobile-nav .mnav-links a,.mobile-nav .mnav-cta{opacity:0;transform:translateX(14px)}
.mobile-nav.show .mnav-head,.mobile-nav.show .mnav-links a,.mobile-nav.show .mnav-cta{opacity:1;transform:none;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.mobile-nav.show .mnav-links a:nth-child(1){transition-delay:.08s}
.mobile-nav.show .mnav-links a:nth-child(2){transition-delay:.13s}
.mobile-nav.show .mnav-links a:nth-child(3){transition-delay:.18s}
.mobile-nav.show .mnav-links a:nth-child(4){transition-delay:.23s}
.mobile-nav.show .mnav-links a:nth-child(5){transition-delay:.28s}
.mobile-nav.show .mnav-links a:nth-child(6){transition-delay:.33s}
.mobile-nav.show .mnav-cta{transition-delay:.34s}
.nav-links a.active{color:var(--forest)}
.nav-links a.active::after{width:100%}

/* Form success panel (shared across home hero + inner pages).
   Lives in the global stylesheet so it is hidden by default everywhere,
   and only revealed by site.js (adds .show) after a successful submit. */
.form-ok{display:none;text-align:center;padding:26px 6px}
.form-ok.show{display:block}
.form-ok .tick{width:54px;height:54px;border-radius:50%;background:var(--sage);display:grid;place-items:center;margin:0 auto 14px}
.form-ok .tick svg{width:26px;height:26px;stroke:var(--forest);stroke-width:2.4;fill:none}
.form-ok h3{color:var(--forest);font-size:1.3rem;margin-bottom:.4rem}
.form-ok p{font-size:.92rem;color:var(--muted)}