/* ═══════════════════════════════════════════════════
       DESIGN TOKENS
    ═══════════════════════════════════════════════════ */
    :root {
      /* Brand Greens */
      --green-950: #071a07;
      --green-900: #0d2e0d;
      --green-800: #134813;
      --green-700: #195c19;
      --green-600: #1f7a1f;
      --green-500: #268c26;
      --green-400: #34a834;
      --green-300: #55c455;
      --green-100: #dcf0dc;
      --green-50:  #f0faf0;

      /* Brand Gold */
      --gold-700:  #a87e00;
      --gold-600:  #c49900;
      --gold-500:  #ffd700;
      --gold-400:  #ffe033;
      --gold-300:  #ffeb7a;
      --gold-100:  #fff8cc;
      --gold-50:   #fffde8;

      /* Neutrals */
      --n-950: #080808;
      --n-900: #111111;
      --n-800: #1e1e1e;
      --n-700: #2d2d2d;
      --n-600: #444444;
      --n-500: #666666;
      --n-400: #888888;
      --n-300: #b0b0b0;
      --n-200: #d8d8d8;
      --n-100: #f0f0f0;
      --n-50:  #f8f8f8;

      /* Semantic */
      --surface:     #ffffff;
      --surface-2:   #f7f9f7;
      --surface-3:   #eef5ee;
      --border:      #e0e8e0;
      --border-sub:  #f0f5f0;
      --text-1:      #0d1a0d;
      --text-2:      #3a4a3a;
      --text-3:      #6a7a6a;
      --interactive: #1f7a1f;
      --interactive-h: #145214;

      /* Spacing */
      --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
      --s6:24px; --s8:32px; --s10:40px; --s12:48px;
      --s16:64px; --s20:80px; --s24:96px; --s32:128px;

      /* Type */
      --f-display: 'Montserrat', sans-serif;
      --f-body:    'Poppins', sans-serif;

      /* Radius */
      --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
      --r-xl: 28px; --r-2xl: 36px; --r-pill: 9999px;

      /* Shadow */
      --sh-sm:  0 2px 8px rgba(0,0,0,0.07);
      --sh-md:  0 6px 24px rgba(0,0,0,0.10);
      --sh-lg:  0 12px 40px rgba(0,0,0,0.13);
      --sh-xl:  0 20px 60px rgba(0,0,0,0.18);
      --sh-grn: 0 8px 30px rgba(31,122,31,0.30);
      --sh-gld: 0 8px 30px rgba(255,215,0,0.35);

      /* Easing */
      --ease-out: cubic-bezier(0.16,1,0.3,1);
      --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
      --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
    }

    /* ═══════════════════════════════════════════════════
       RESET
    ═══════════════════════════════════════════════════ */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{font-size:17px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{font-family:var(--f-body);background:var(--surface);color:var(--text-1);line-height:1.7;overflow-x:hidden}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    ul{list-style:none}
    button{font-family:var(--f-body);cursor:pointer}

    /* Skip link */
    .skip{position:absolute;top:-100px;left:var(--s6);background:var(--green-600);color:#fff;padding:var(--s3) var(--s6);border-radius:var(--r-sm);font-weight:700;z-index:9999;transition:top .2s}
    .skip:focus{top:var(--s4)}

    /* Focus ring */
    :focus-visible{outline:3px solid var(--green-500);outline-offset:3px;border-radius:4px}

    /* Screen-reader only */
    .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}

    /* ═══════════════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════════════ */
    @keyframes fadeUp   {to{opacity:1;transform:translateY(0)}}
    @keyframes fadeIn   {to{opacity:1}}
    @keyframes scaleIn  {to{opacity:1;transform:scale(1)}}
    @keyframes slideRight{to{opacity:1;transform:translateX(0)}}
    @keyframes pulse    {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
    @keyframes scrollBob{0%,100%{transform:translateY(0)}60%{transform:translateY(9px)}}
    @keyframes drift    {0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.97)}}
    @keyframes shimmer  {0%{background-position:200% center}100%{background-position:-200% center}}
    @keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes barGrow  {from{width:0}to{width:var(--bar-w,100%)}}
    @keyframes heroMainIn{0%{opacity:0;transform:scale(.9) translateY(28px)}to{opacity:1;transform:scale(1) translateY(0)}}
    @keyframes heroMiniIn{0%{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
    @keyframes heroBadgePop{0%{opacity:0;transform:scale(.6) translateY(12px)}70%{transform:scale(1.08) translateY(0)}100%{opacity:1;transform:scale(1) translateY(0)}}
    @keyframes heroCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes heroShine{0%,72%,100%{transform:translateX(-130%) skewX(-12deg)}86%{transform:translateX(130%) skewX(-12deg)}}
    @keyframes badgeGlow{0%,100%{box-shadow:0 0 0 rgba(255,215,0,0)}50%{box-shadow:0 0 22px rgba(255,215,0,.35)}}

    /* Reveal on scroll */
    .reveal{opacity:0;transform:translateY(32px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
    .reveal.from-left{transform:translateX(-32px)}
    .reveal.from-right{transform:translateX(32px)}
    .reveal.scale-in{transform:scale(.94);transition:opacity .6s var(--ease-out),transform .6s var(--ease-spring)}
    .reveal.visible{opacity:1;transform:none}
    .d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}
    .d4{transition-delay:.38s}.d5{transition-delay:.48s}.d6{transition-delay:.58s}

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
      html{scroll-behavior:auto}
      .hero-img-main,.hero-mini-card,.float-badge{opacity:1!important;transform:none!important;animation:none!important}
      .hero-img-main::after,.hero-mini-card::after{display:none}
    }

    /* ═══════════════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════════════ */
    .container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s6)}
    .section-pad{padding:clamp(72px,10vw,130px) 0}
    .section-pad-sm{padding:clamp(48px,7vw,88px) 0}

    /* ═══════════════════════════════════════════════════
       TYPOGRAPHY HELPERS
    ═══════════════════════════════════════════════════ */
    .eyebrow{
      font-family:var(--f-display);font-weight:700;
      font-size:clamp(.68rem,1.1vw,.78rem);
      letter-spacing:.16em;text-transform:uppercase;
      color:var(--green-600);
      display:inline-flex;align-items:center;gap:var(--s2)
    }
    .eyebrow::before{
      content:'';width:20px;height:2px;
      background:linear-gradient(90deg,var(--green-500),var(--gold-500));
      border-radius:2px;flex-shrink:0
    }
    .s-title{
      font-family:var(--f-display);
      font-size:clamp(1.9rem,3.8vw,2.9rem);
      font-weight:900;line-height:1.1;
      letter-spacing:-.03em;color:var(--text-1)
    }
    .s-sub{
      font-family:var(--f-body);
      font-size:clamp(1rem,1.6vw,1.1rem);
      font-weight:400;color:var(--text-2);
      line-height:1.8;max-width:62ch
    }
    .gold-text{
      background:linear-gradient(135deg,var(--gold-500) 0%,var(--gold-300) 50%,var(--gold-500) 100%);
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      animation:shimmer 4s linear infinite
    }

    /* ═══════════════════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════════════════ */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
      font-family:var(--f-display);font-weight:700;
      border:none;border-radius:var(--r-pill);
      padding:15px 34px;min-height:54px;
      font-size:.95rem;letter-spacing:.01em;
      transition:transform .22s var(--ease-spring),box-shadow .22s var(--ease-out),background .2s,filter .2s;
      white-space:nowrap;cursor:pointer
    }
    .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;flex-shrink:0}

    .btn-primary{background:var(--green-600);color:#fff;box-shadow:var(--sh-grn)}
    .btn-primary:hover,.btn-primary:focus-visible{background:var(--green-700);transform:translateY(-3px);box-shadow:0 12px 36px rgba(31,122,31,.45)}
    .btn-primary:active{transform:translateY(0)}

    .btn-gold{background:var(--gold-500);color:var(--n-900);box-shadow:var(--sh-gld)}
    .btn-gold:hover,.btn-gold:focus-visible{background:var(--gold-400);transform:translateY(-3px);box-shadow:0 12px 36px rgba(255,215,0,.50)}
    .btn-gold:active{transform:translateY(0)}

    .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.35)}
    .btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,255,255,.22);transform:translateY(-3px)}

    .btn-outline-grn{background:transparent;color:var(--green-600);border:2.5px solid var(--green-600)}
    .btn-outline-grn:hover,.btn-outline-grn:focus-visible{background:var(--green-600);color:#fff;transform:translateY(-3px)}

    .btn-lg{padding:18px 46px;min-height:62px;font-size:1.05rem}
    .btn-sm{padding:11px 24px;min-height:44px;font-size:.85rem}

    /* ═══════════════════════════════════════════════════
       HEADER & NAV
    ═══════════════════════════════════════════════════ */
    .site-header{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      transition:background .35s,box-shadow .35s,backdrop-filter .35s
    }
    .site-header.scrolled{
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(20px) saturate(180%);
      box-shadow:0 2px 24px rgba(0,0,0,.09)
    }

    .nav-wrap{
      display:flex;align-items:center;justify-content:space-between;
      height:78px
    }

    /* Logo */
    .logo-link{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex-shrink:0}
    .logo-mark{
      width:50px;height:50px;
      background:linear-gradient(135deg,var(--green-700),var(--green-500));
      border-radius:var(--r-md);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 16px rgba(31,122,31,.4);
      flex-shrink:0;
      position:relative;overflow:hidden
    }
    .logo-mark::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,215,0,.25) 0%,transparent 60%);
    }
    .logo-mark svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;position:relative;z-index:1}
    .logo-text-wrap{display:flex;flex-direction:column;line-height:1.15}
    .logo-name{
      font-family:var(--f-display);font-weight:900;
      font-size:1.05rem;letter-spacing:-.02em;
      color:var(--text-1)
    }
    .logo-name .accent{color:var(--green-600)}
    .logo-sub{
      font-family:var(--f-body);font-size:.6rem;
      font-weight:500;letter-spacing:.09em;
      text-transform:uppercase;color:var(--text-3)
    }

    /* Scrolled state logo text */
    .site-header:not(.scrolled) .logo-name{color:#fff}
    .site-header:not(.scrolled) .logo-sub{color:rgba(255,255,255,.65)}
    .site-header:not(.scrolled) .logo-name .accent{color:var(--gold-400)}

    /* Desktop nav links */
    .nav-links{display:flex;align-items:center;gap:4px}
    .nav-links a{
      font-family:var(--f-display);font-size:.88rem;font-weight:600;
      color:rgba(255,255,255,.88);
      padding:var(--s3) var(--s4);border-radius:var(--r-sm);
      transition:color .2s,background .2s;
      position:relative
    }
    .nav-links a::after{
      content:'';position:absolute;bottom:5px;left:var(--s4);right:var(--s4);
      height:2px;background:var(--gold-500);border-radius:2px;
      transform:scaleX(0);transform-origin:left;
      transition:transform .25s var(--ease-out)
    }
    .nav-links a:hover{color:#fff}
    .nav-links a:hover::after{transform:scaleX(1)}

    .site-header.scrolled .nav-links a{color:var(--text-2)}
    .site-header.scrolled .nav-links a:hover{color:var(--green-700)}
    .site-header.scrolled .nav-links a::after{background:var(--green-600)}

    .nav-links a.is-active{font-weight:800}
    .site-header.scrolled .nav-links a.is-active{color:var(--green-600)}
    .site-header.scrolled .nav-links a.is-active::after{transform:scaleX(1);background:var(--green-600)}
    .site-header:not(.scrolled) .nav-links a.is-active{color:var(--gold-400)}
    .site-header:not(.scrolled) .nav-links a.is-active::after{transform:scaleX(1);background:var(--gold-400)}

    /* CTA nav btn */
    .nav-cta{margin-left:var(--s4)}

    /* Hamburger */
    .hamburger{
      display:none;flex-direction:column;gap:5px;
      background:none;border:none;padding:var(--s2);
      border-radius:var(--r-sm);min-width:44px;min-height:44px;
      align-items:center;justify-content:center;
      transition:background .2s
    }
    .hamburger:hover{background:rgba(255,255,255,.15)}
    .site-header.scrolled .hamburger:hover{background:var(--n-100)}
    .hamburger span{
      display:block;width:26px;height:2.5px;
      background:#fff;border-radius:2px;
      transition:transform .32s var(--ease-out),opacity .32s
    }
    .site-header.scrolled .hamburger span{background:var(--text-1)}
    .hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
    .hamburger.open span:nth-child(2){opacity:0}
    .hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

    /* Mobile drawer */
    .mobile-drawer{
      display:none;position:fixed;inset:0;top:78px;
      background:#fff;z-index:999;
      flex-direction:column;padding:var(--s8) var(--s6);
      gap:var(--s1);overflow-y:auto;
      opacity:0;transform:translateY(-12px);pointer-events:none;
      transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)
    }
    .mobile-drawer.open{display:flex;opacity:1;transform:none;pointer-events:all}

    .mobile-drawer .drawer-link{
      font-family:var(--f-display);font-size:1.25rem;font-weight:700;
      color:var(--text-1);
      padding:var(--s4) var(--s5);
      border-radius:var(--r-md);border-bottom:1px solid var(--border-sub);
      transition:background .2s,color .2s
    }
    .mobile-drawer .drawer-link:hover{background:var(--green-50);color:var(--green-700)}
    .mobile-drawer .btn{margin-top:var(--s6);width:100%;font-size:1.1rem;min-height:62px}

    /* Drawer divider label */
    .drawer-section-label{
      font-family:var(--f-display);font-size:.68rem;font-weight:700;
      letter-spacing:.14em;text-transform:uppercase;
      color:var(--text-3);padding:var(--s5) var(--s5) var(--s2)
    }

    /* ═══════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════ */
    .hero{
      position:relative;min-height:100svh;
      display:flex;align-items:center;overflow:hidden;
      padding-top:78px
    }

    /* BG image */
    .hero-bg{position:absolute;inset:0;z-index:0}
    .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}

    /* Layered gradient overlay */
    .hero-bg::after{
      content:'';position:absolute;inset:0;
      background:
        linear-gradient(0deg, rgba(7,26,7,.95) 0%, rgba(7,26,7,.0) 40%),
        linear-gradient(100deg, rgba(7,26,7,.88) 0%, rgba(7,26,7,.55) 45%, rgba(7,26,7,.18) 100%)
    }

    /* Animated mesh orbs */
    .hero-orb{
      position:absolute;border-radius:50%;
      filter:blur(80px);pointer-events:none;z-index:1
    }
    .hero-orb-1{
      width:500px;height:500px;
      background:radial-gradient(circle,rgba(31,122,31,.35) 0%,transparent 70%);
      top:-100px;right:-100px;
      animation:drift 20s ease-in-out infinite
    }
    .hero-orb-2{
      width:350px;height:350px;
      background:radial-gradient(circle,rgba(255,215,0,.18) 0%,transparent 70%);
      bottom:-60px;left:-60px;
      animation:drift 26s ease-in-out infinite reverse
    }

    /* Gold accent bar at bottom */
    .hero::after{
      content:'';position:absolute;bottom:0;left:0;right:0;height:4px;z-index:3;
      background:linear-gradient(90deg,transparent,var(--gold-500) 30%,var(--green-400) 70%,transparent)
    }

    .hero-inner{
      position:relative;z-index:2;
      display:grid;grid-template-columns:1fr 1fr;
      gap:var(--s16);align-items:center;width:100%
    }

    /* Left: content */
    .hero-content{display:flex;flex-direction:column;gap:var(--s5)}

    .hero-badge{
      display:inline-flex;align-items:center;gap:var(--s3);
      background:rgba(255,215,0,.12);
      border:1px solid rgba(255,215,0,.35);
      border-radius:var(--r-pill);
      padding:var(--s2) var(--s5);width:fit-content;
      opacity:0;transform:translateY(14px);
      animation:fadeUp .6s .15s var(--ease-out) forwards
    }
    .badge-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-500);animation:pulse 2s infinite}
    .badge-text{
      font-family:var(--f-display);font-size:.72rem;font-weight:700;
      letter-spacing:.09em;text-transform:uppercase;color:var(--gold-400)
    }

    .hero-title{
      font-family:var(--f-display);
      font-size:clamp(2.5rem,6vw,4.6rem);
      font-weight:900;line-height:1.04;letter-spacing:-.04em;
      color:#fff;
      opacity:0;transform:translateY(24px);
      animation:fadeUp .75s .35s var(--ease-out) forwards
    }
    .hero-title .line2{
      display:block;
      background:linear-gradient(135deg,var(--gold-500),var(--gold-300),var(--gold-500));
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      animation:shimmer 4s linear infinite
    }

    .hero-desc{
      font-family:var(--f-body);
      font-size:clamp(1rem,1.7vw,1.12rem);
      font-weight:400;color:rgba(255,255,255,.82);
      line-height:1.78;max-width:52ch;
      opacity:0;transform:translateY(20px);
      animation:fadeUp .7s .6s var(--ease-out) forwards
    }

    .hero-actions{
      display:flex;flex-wrap:wrap;gap:var(--s4);
      opacity:0;transform:translateY(16px);
      animation:fadeUp .6s .85s var(--ease-out) forwards
    }

    /* Trust strip */
    .hero-trust{
      display:flex;gap:clamp(var(--s4),2.5vw,var(--s8));flex-wrap:nowrap;
      margin-top:var(--s4);padding-top:var(--s8);
      border-top:1px solid rgba(255,255,255,.15);
      opacity:0;animation:fadeIn .8s 1.1s var(--ease-out) forwards;
      align-items:stretch;justify-content:space-between;width:100%
    }
    .trust-stat{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
    .trust-num{
      font-family:var(--f-display);font-weight:900;
      font-size:clamp(1.35rem,2.2vw,2.1rem);
      line-height:1;color:var(--gold-500)
    }
    .trust-lbl{
      font-size:clamp(.62rem,1.4vw,.78rem);
      color:rgba(255,255,255,.62);font-weight:400;
      line-height:1.25
    }
    .trust-sep{width:1px;flex-shrink:0;background:rgba(255,255,255,.18);align-self:stretch}

    /* Right: floating card panel */
    .hero-card-panel{
      display:flex;flex-direction:column;gap:var(--s5);
      opacity:0;transform:translateX(36px);
      animation:slideRight .9s .5s var(--ease-out) forwards;
      perspective:1000px;
      transform-style:preserve-3d;
      transition:transform .35s var(--ease-out)
    }

    .hero-img-main{
      position:relative;
      border-radius:var(--r-xl);overflow:hidden;
      aspect-ratio:4/3;
      box-shadow:0 24px 64px rgba(0,0,0,.45);
      border:2px solid rgba(255,255,255,.12);
      opacity:0;
      animation:heroMainIn .9s .75s var(--ease-spring) forwards;
      transition:box-shadow .45s var(--ease-out),border-color .45s var(--ease-out),transform .45s var(--ease-out)
    }
    .hero-img-main::after{
      content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
      background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
      animation:heroShine 5.5s 2.8s ease-in-out infinite
    }
    .hero-img-main:hover{
      box-shadow:0 28px 72px rgba(0,0,0,.55),0 0 0 1px rgba(255,215,0,.25);
      border-color:rgba(255,215,0,.35);
      transform:translateY(-6px) scale(1.01)
    }
    .hero-img-main img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
    .hero-img-main:hover img{transform:scale(1.06)}

    .hero-cards-row{
      display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);
      animation:heroCardFloat 7s 2.4s ease-in-out infinite
    }
    .hero-mini-card{
      position:relative;border-radius:var(--r-lg);overflow:hidden;
      aspect-ratio:16/10;
      box-shadow:0 10px 32px rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.10);
      opacity:0;
      transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out),border-color .4s
    }
    .hero-mini-card:nth-child(1){animation:heroMiniIn .75s 1.05s var(--ease-out) forwards}
    .hero-mini-card:nth-child(2){animation:heroMiniIn .75s 1.25s var(--ease-out) forwards}
    .hero-mini-card::after{
      content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
      background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
      animation:heroShine 6s 3.5s ease-in-out infinite
    }
    .hero-mini-card:hover{
      transform:translateY(-5px) scale(1.02);
      box-shadow:0 16px 40px rgba(0,0,0,.45);
      border-color:rgba(255,255,255,.22)
    }
    .hero-mini-card img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
    .hero-mini-card:hover img{transform:scale(1.08)}

    /* Floating stat badge on image */
    .float-badge{
      position:absolute;
      bottom:var(--s5);right:var(--s5);z-index:3;
      background:rgba(7,26,7,.85);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,215,0,.35);
      border-radius:var(--r-md);
      padding:var(--s4) var(--s5);
      display:flex;flex-direction:column;
      opacity:0;
      animation:heroBadgePop .7s 1.35s var(--ease-spring) forwards, badgeGlow 3s 2.4s ease-in-out infinite;
      transition:transform .35s var(--ease-spring)
    }
    .hero-img-main:hover .float-badge{transform:scale(1.05) translateY(-2px)}
    .float-badge-num{
      font-family:var(--f-display);font-weight:900;
      font-size:1.5rem;color:var(--gold-500);line-height:1;
      background:linear-gradient(135deg,var(--gold-500),var(--gold-300),var(--gold-500));
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      animation:shimmer 3s linear infinite
    }
    .float-badge-lbl{font-size:.72rem;color:rgba(255,255,255,.75);margin-top:2px}


    /* Scroll cue */
    .scroll-cue{
      position:absolute;bottom:var(--s8);left:50%;transform:translateX(-50%);
      z-index:3;display:flex;flex-direction:column;align-items:center;gap:var(--s2);
      opacity:0;animation:fadeIn 1s 1.6s forwards
    }
    .scroll-cue span{
      font-family:var(--f-display);font-size:.65rem;font-weight:700;
      letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)
    }
    .scroll-mouse{
      width:22px;height:34px;border:2px solid rgba(255,255,255,.35);
      border-radius:11px;display:flex;align-items:flex-start;justify-content:center;padding-top:5px
    }
    .scroll-mouse::after{
      content:'';width:4px;height:7px;background:rgba(255,255,255,.8);
      border-radius:2px;animation:scrollBob 1.8s infinite
    }

    /* ═══════════════════════════════════════════════════
       LOGO BAR (Trust)
    ═══════════════════════════════════════════════════ */
    .logo-bar{
      background:var(--surface-2);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:var(--s8) 0
    }
    .logo-bar-inner{
      display:flex;align-items:center;justify-content:space-between;
      gap:var(--s8);flex-wrap:wrap
    }
    .logo-bar-label{
      font-family:var(--f-display);font-size:.72rem;font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;
      color:var(--text-3);white-space:nowrap;flex-shrink:0
    }
    .trust-logos{
      display:flex;align-items:center;gap:var(--s10);flex-wrap:wrap;flex:1;justify-content:center
    }
    .trust-logo-item{
      font-family:var(--f-display);font-size:.82rem;font-weight:800;
      color:var(--n-300);letter-spacing:.05em;
      display:flex;align-items:center;gap:var(--s2);
      transition:color .2s
    }
    .trust-logo-item:hover{color:var(--green-600)}
    .trust-logo-item svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}

    /* ═══════════════════════════════════════════════════
       ABOUT
    ═══════════════════════════════════════════════════ */
    .about{background:var(--surface)}

    .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:center}

    .about-visual{position:relative}
    .about-main-img{
      border-radius:var(--r-xl);overflow:hidden;
      aspect-ratio:4/3;box-shadow:var(--sh-xl)
    }
    .about-main-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
    .about-main-img:hover img{transform:scale(1.04)}

    /* Small accent image */
    .about-accent-img{
      position:absolute;bottom:-28px;right:-28px;
      width:45%;border-radius:var(--r-lg);overflow:hidden;
      aspect-ratio:1;
      box-shadow:var(--sh-xl);
      border:4px solid var(--surface)
    }
    .about-accent-img img{width:100%;height:100%;object-fit:cover}

    /* Green badge */
    .about-cert-badge{
      position:absolute;top:-20px;left:-20px;
      background:var(--green-700);
      border-radius:var(--r-lg);padding:var(--s5);
      box-shadow:var(--sh-lg);text-align:center;
      display:flex;flex-direction:column;align-items:center;gap:4px;
      border:3px solid var(--surface)
    }
    .cert-icon{width:36px;height:36px;fill:none;stroke:var(--gold-500);stroke-width:2}
    .cert-label{font-family:var(--f-display);font-size:.65rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.06em;text-transform:uppercase}
    .cert-value{font-family:var(--f-display);font-size:1.1rem;font-weight:900;color:var(--gold-500);line-height:1}

    .about-content{display:flex;flex-direction:column;gap:var(--s6)}
    .about-content .s-sub{max-width:100%}

    /* Pillar list */
    .pillars{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s2)}
    .pillar{
      display:flex;align-items:flex-start;gap:var(--s4);
      padding:var(--s5);border-radius:var(--r-md);
      background:var(--surface-2);border:1px solid var(--border-sub);
      transition:border-color .2s,box-shadow .2s,background .2s
    }
    .pillar:hover{border-color:var(--green-300);box-shadow:var(--sh-sm);background:var(--green-50)}

    .pillar-icon{
      width:46px;height:46px;border-radius:var(--r-sm);
      background:var(--green-100);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      transition:background .2s
    }
    .pillar:hover .pillar-icon{background:var(--green-600)}
    .pillar-icon svg{width:22px;height:22px;stroke:var(--green-700);fill:none;stroke-width:2;transition:stroke .2s}
    .pillar:hover .pillar-icon svg{stroke:#fff}

    .pillar-body h4{font-family:var(--f-display);font-size:.95rem;font-weight:700;color:var(--text-1);margin-bottom:2px}
    .pillar-body p{font-size:.85rem;color:var(--text-2);line-height:1.65}

    /* ═══════════════════════════════════════════════════
       SERVICES
    ═══════════════════════════════════════════════════ */
    .services{background:var(--surface-2)}
    .services-header{text-align:center;margin-bottom:var(--s16)}
    .services-header .s-sub{margin:var(--s4) auto 0}

    .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}

    .svc-card{
      background:var(--surface);
      border-radius:var(--r-xl);border:1px solid var(--border);
      overflow:hidden;display:flex;flex-direction:column;
      transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s;
      cursor:default
    }
    .svc-card:hover{transform:translateY(-8px);box-shadow:var(--sh-xl);border-color:var(--green-300)}

    .svc-img{aspect-ratio:16/9;overflow:hidden;position:relative}
    .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
    .svc-card:hover .svc-img img{transform:scale(1.08)}

    /* Image overlay tint on hover */
    .svc-img::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(0deg,rgba(7,26,7,.6) 0%,transparent 50%);
      opacity:0;transition:opacity .3s
    }
    .svc-card:hover .svc-img::after{opacity:1}

    .svc-tag{
      position:absolute;top:var(--s4);left:var(--s4);z-index:1;
      background:var(--green-700);color:#fff;
      font-family:var(--f-display);font-size:.65rem;font-weight:700;
      letter-spacing:.09em;text-transform:uppercase;
      padding:4px 12px;border-radius:var(--r-pill)
    }

    .svc-body{padding:var(--s8);display:flex;flex-direction:column;gap:var(--s4);flex:1}

    .svc-icon-wrap{
      width:52px;height:52px;background:var(--green-100);border-radius:var(--r-sm);
      display:flex;align-items:center;justify-content:center;
      transition:background .25s
    }
    .svc-card:hover .svc-icon-wrap{background:var(--green-600)}
    .svc-icon-wrap svg{width:26px;height:26px;stroke:var(--green-700);fill:none;stroke-width:1.8;transition:stroke .25s}
    .svc-card:hover .svc-icon-wrap svg{stroke:#fff}

    .svc-body h3{
      font-family:var(--f-display);font-size:1.18rem;font-weight:800;
      color:var(--text-1);letter-spacing:-.015em
    }
    .svc-body p{font-size:.88rem;color:var(--text-2);line-height:1.75;flex:1}

    .svc-list{
      display:flex;flex-direction:column;gap:var(--s2);
      padding-top:var(--s3);border-top:1px solid var(--border-sub)
    }
    .svc-list li{
      font-size:.82rem;color:var(--text-2);
      display:flex;align-items:center;gap:var(--s2)
    }
    .svc-list li::before{
      content:'';width:6px;height:6px;border-radius:50%;
      background:var(--green-500);flex-shrink:0
    }

    .svc-cta{
      display:inline-flex;align-items:center;gap:var(--s2);
      font-family:var(--f-display);font-size:.82rem;font-weight:700;
      color:var(--green-600);text-transform:uppercase;letter-spacing:.07em;
      margin-top:var(--s2);transition:gap .2s,color .2s
    }
    .svc-cta:hover{gap:var(--s4);color:var(--green-800)}
    .svc-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5}

    /* ═══════════════════════════════════════════════════
       PROCESS / HOW WE WORK
    ═══════════════════════════════════════════════════ */
    .process{background:var(--green-950);position:relative;overflow:hidden}
    .process::before{
      content:'';position:absolute;inset:0;
      background:
        radial-gradient(ellipse 60% 60% at 10% 50%,rgba(31,122,31,.25) 0%,transparent 70%),
        radial-gradient(ellipse 50% 50% at 90% 50%,rgba(255,215,0,.1) 0%,transparent 70%)
    }

    .process-header{text-align:center;margin-bottom:var(--s16)}
    .process-header .eyebrow{color:var(--gold-400)}
    .process-header .s-title{color:#fff}
    .process-header .s-sub{color:rgba(255,255,255,.65);margin:var(--s4) auto 0}

    .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);position:relative;z-index:1}

    /* connector line */
    .steps-grid::before{
      content:'';position:absolute;
      top:40px;left:calc(12.5% + 20px);right:calc(12.5% + 20px);
      height:2px;background:linear-gradient(90deg,var(--green-700),var(--gold-600));
      z-index:0
    }

    .step{
      display:flex;flex-direction:column;align-items:center;
      text-align:center;gap:var(--s5);position:relative;z-index:1
    }
    .step-num{
      width:80px;height:80px;border-radius:50%;
      background:linear-gradient(135deg,var(--green-700),var(--green-500));
      border:3px solid var(--green-400);
      display:flex;align-items:center;justify-content:center;
      font-family:var(--f-display);font-size:1.5rem;font-weight:900;color:#fff;
      box-shadow:0 8px 24px rgba(31,122,31,.4);flex-shrink:0;
      transition:transform .25s var(--ease-spring),box-shadow .25s
    }
    .step:hover .step-num{transform:scale(1.1);box-shadow:0 12px 32px rgba(31,122,31,.55)}
    .step-label{
      font-family:var(--f-display);font-size:.72rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;color:var(--gold-400)
    }
    .step h3{
      font-family:var(--f-display);font-size:1.05rem;font-weight:800;
      color:#fff;letter-spacing:-.01em;line-height:1.25
    }
    .step p{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.7}

    /* ═══════════════════════════════════════════════════
       PORTFOLIO
    ═══════════════════════════════════════════════════ */
    .portfolio{background:var(--surface)}
    .portfolio-header{text-align:center;margin-bottom:var(--s16)}
    .portfolio-header .s-sub{margin:var(--s4) auto 0}

    /* Masonry-like grid */
    .port-grid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      grid-template-rows:auto auto;
      gap:var(--s5);
      align-items:stretch
    }

    .port-card{
      position:relative;border-radius:var(--r-xl);overflow:hidden;
      cursor:pointer;background:var(--n-900);
      min-height:0
    }
    /* Featured – tall left, height matches right column (row1 + gap + row2) */
    .port-card:nth-child(1){
      grid-column:1;grid-row:1/3;
      position:relative;
      height:0;
      padding-bottom:calc((100% * 9 / 16) + var(--s5) + ((200% + var(--s5)) * 9 / 21));
      align-self:start
    }
    .port-card:nth-child(2){grid-column:2;grid-row:1;aspect-ratio:16/9}
    .port-card:nth-child(3){grid-column:3;grid-row:1;aspect-ratio:16/9}
    .port-card:nth-child(4){grid-column:2/4;grid-row:2;aspect-ratio:21/9}

    .port-card img{
      width:100%;height:100%;object-fit:cover;
      display:block;
      transition:transform .6s var(--ease-out)
    }
    .port-card:nth-child(1) img{
      position:absolute;inset:0
    }
    .port-card:hover img{transform:scale(1.08)}

    .port-overlay{
      position:absolute;inset:0;
      background:linear-gradient(0deg,rgba(7,26,7,.92) 0%,rgba(7,26,7,.2) 50%,transparent 100%);
      display:flex;flex-direction:column;justify-content:flex-end;
      padding:var(--s8);transition:background .3s
    }
    .port-card:hover .port-overlay{
      background:linear-gradient(0deg,rgba(7,26,7,.96) 0%,rgba(7,26,7,.4) 60%,rgba(7,26,7,.1) 100%)
    }

    .port-type{
      font-family:var(--f-display);font-size:.68rem;font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;
      color:var(--gold-500);margin-bottom:var(--s2);
      display:flex;align-items:center;gap:var(--s2)
    }
    .port-type::before{
      content:'';width:16px;height:2px;
      background:var(--gold-500);border-radius:2px
    }

    .port-overlay h3{
      font-family:var(--f-display);
      font-size:clamp(1rem,1.8vw,1.4rem);
      font-weight:800;color:#fff;
      letter-spacing:-.02em;line-height:1.2;
      margin-bottom:var(--s2)
    }
    .port-overlay p{
      font-size:.82rem;color:rgba(255,255,255,.7);
      line-height:1.5;max-width:40ch
    }

    .port-arrow{
      position:absolute;top:var(--s5);right:var(--s5);
      width:38px;height:38px;border-radius:50%;
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.2);
      display:flex;align-items:center;justify-content:center;
      opacity:0;transform:scale(.8);
      transition:opacity .25s,transform .25s var(--ease-spring)
    }
    .port-card:hover .port-arrow{opacity:1;transform:scale(1)}
    .port-arrow svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5}

    .port-footer{text-align:center;margin-top:var(--s12)}

    /* ═══════════════════════════════════════════════════
       TESTIMONIALS
    ═══════════════════════════════════════════════════ */
    .testimonials{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .test-header{text-align:center;margin-bottom:var(--s16)}
    .test-header .s-sub{margin:var(--s4) auto 0}

    .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}

    .test-card{
      background:var(--surface);border-radius:var(--r-xl);
      border:1px solid var(--border);padding:var(--s8);
      display:flex;flex-direction:column;gap:var(--s5);
      transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s
    }
    .test-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--green-300)}

    .test-stars{display:flex;gap:3px}
    .test-stars svg{width:17px;height:17px;fill:var(--gold-500)}

    .test-quote{
      font-family:var(--f-body);font-size:.95rem;
      color:var(--text-2);line-height:1.8;
      font-style:italic;flex:1;
      border-left:3px solid var(--green-400);padding-left:var(--s5)
    }

    .test-author{
      display:flex;align-items:center;gap:var(--s4);
      padding-top:var(--s4);border-top:1px solid var(--border-sub)
    }
    .test-avatar{
      width:50px;height:50px;border-radius:50%;overflow:hidden;
      border:2px solid var(--green-400);flex-shrink:0
    }
    .test-avatar img{width:100%;height:100%;object-fit:cover}
    .test-name{font-family:var(--f-display);font-size:.9rem;font-weight:700;color:var(--text-1)}
    .test-role{font-size:.78rem;color:var(--text-3);margin-top:1px}

    /* ═══════════════════════════════════════════════════
       CONTACT
    ═══════════════════════════════════════════════════ */
    .contact{background:var(--surface)}

    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:stretch}

    .contact-info{display:flex;flex-direction:column;gap:var(--s8);height:100%}
    .contact-info .s-sub{max-width:100%}

    /* Contact methods */
    .c-methods{display:flex;flex-direction:column;gap:var(--s3)}
    .c-method{
      display:flex;align-items:center;gap:var(--s5);
      padding:var(--s5) var(--s6);
      background:var(--surface-2);border-radius:var(--r-lg);
      border:1px solid var(--border);text-decoration:none;
      transition:border-color .2s,box-shadow .2s,transform .2s,background .2s
    }
    .c-method:hover{border-color:var(--green-400);box-shadow:var(--sh-md);transform:translateX(5px);background:var(--green-50)}

    .c-method-icon{
      width:54px;height:54px;background:var(--green-100);border-radius:var(--r-md);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      transition:background .2s
    }
    .c-method:hover .c-method-icon{background:var(--green-600)}
    .c-method-icon svg{width:24px;height:24px;stroke:var(--green-700);fill:none;stroke-width:2;transition:stroke .2s}
    .c-method:hover .c-method-icon svg{stroke:#fff}

    .c-method-lbl{
      font-family:var(--f-display);font-size:.68rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;
      color:var(--text-3);margin-bottom:2px
    }
    .c-method-val{
      font-family:var(--f-display);font-size:1rem;font-weight:700;
      color:var(--text-1)
    }

    /* Hours box */
    .hours-box{
      background:var(--green-50);border-radius:var(--r-lg);
      border:1px solid var(--green-100);padding:var(--s6);
      margin-top:auto
    }
    .hours-box h4{
      font-family:var(--f-display);font-size:.78rem;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;
      color:var(--green-700);margin-bottom:var(--s4);
      display:flex;align-items:center;gap:var(--s2)
    }
    .hours-box h4 svg{width:16px;height:16px;stroke:var(--green-600);fill:none;stroke-width:2}
    .hours-row{
      display:flex;justify-content:space-between;
      font-size:.88rem;padding:var(--s2) 0;
      border-bottom:1px solid var(--green-100)
    }
    .hours-row:last-child{border-bottom:none}
    .hours-day{font-weight:600;color:var(--text-1)}
    .hours-time{color:var(--text-2)}
    .hours-closed{color:var(--n-400)}

    /* Form panel */
    .form-panel{
      background:var(--surface);border-radius:var(--r-xl);
      border:1px solid var(--border);padding:var(--s10);
      box-shadow:var(--sh-lg);
      display:flex;flex-direction:column;height:100%
    }
    .form-panel form{display:flex;flex-direction:column;flex:1}
    .form-panel .fld-message{flex:1;display:flex;flex-direction:column}
    .form-panel .fld-message textarea{flex:1;min-height:120px}
    .form-panel h3{
      font-family:var(--f-display);font-size:1.5rem;font-weight:900;
      color:var(--text-1);letter-spacing:-.02em;margin-bottom:var(--s1)
    }
    .form-panel>p{font-size:.9rem;color:var(--text-2);margin-bottom:var(--s8)}

    .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

    .fld{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
    .fld label{
      font-family:var(--f-display);font-size:.8rem;font-weight:700;
      color:var(--text-1)
    }
    .req{color:#ef4444;margin-left:2px}

    .fld input,.fld select:not(.custom-select-native),.fld textarea{
      width:100%;min-height:52px;
      border:1.5px solid var(--border);border-radius:var(--r-md);
      padding:0 var(--s5);font-family:var(--f-body);font-size:.95rem;
      color:var(--text-1);background:var(--surface);
      transition:border-color .2s,box-shadow .2s;outline:none
    }
    .fld textarea{padding:var(--s4) var(--s5);min-height:120px;resize:vertical}
    .fld input:focus,.fld select:not(.custom-select-native):focus,.fld textarea:focus{
      border-color:var(--green-600);
      box-shadow:0 0 0 4px rgba(31,122,31,.1)
    }
    .fld input::placeholder,.fld textarea::placeholder{color:var(--n-400)}
    .fld select:not(.custom-select-native){
      appearance:none;cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 16px center;padding-right:48px
    }

    /* Custom select dropdown */
    .custom-select{position:relative;width:100%}
    .custom-select-native,
    .custom-select > select{
      display:none !important
    }
    .custom-select-trigger{
      width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
      border:1.5px solid var(--border);border-radius:var(--r-md);
      padding:0 var(--s5);font-family:var(--f-body);font-size:.95rem;
      color:var(--text-1);background:var(--surface);cursor:pointer;
      transition:border-color .2s,box-shadow .2s,background .2s;text-align:left
    }
    .custom-select-trigger:hover{border-color:var(--green-400);background:var(--green-50)}
    .custom-select.is-open .custom-select-trigger,
    .custom-select-trigger:focus-visible{
      border-color:var(--green-600);
      box-shadow:0 0 0 4px rgba(31,122,31,.1);outline:none
    }
    .custom-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .custom-select-value.is-placeholder{color:var(--n-400)}
    .custom-select-chevron{
      width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
      color:var(--green-600);transition:transform .22s var(--ease-out)
    }
    .custom-select-chevron svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5}
    .custom-select.is-open .custom-select-chevron{transform:rotate(180deg)}
    .custom-select.is-open{z-index:50}
    .custom-select-menu{
      position:fixed;z-index:9999;
      background:var(--surface);border:1px solid var(--green-200);
      border-radius:var(--r-lg);box-shadow:0 16px 40px rgba(13,46,13,.14);
      max-height:min(280px,45vh);overflow:auto;padding:var(--s2) 0;
      animation:selectMenuIn .18s var(--ease-out);
      scrollbar-width:thin;scrollbar-color:var(--green-400) var(--green-50)
    }
    .custom-select-menu::-webkit-scrollbar{width:8px}
    .custom-select-menu::-webkit-scrollbar-track{background:var(--green-50);border-radius:8px;margin:4px 0}
    .custom-select-menu::-webkit-scrollbar-thumb{background:var(--green-400);border-radius:8px}
    .custom-select-menu::-webkit-scrollbar-thumb:hover{background:var(--green-600)}
    @keyframes selectMenuIn{
      from{opacity:0;transform:translateY(-6px)}
      to{opacity:1;transform:translateY(0)}
    }
    .custom-select-group{padding:var(--s2) 0}
    .custom-select-group + .custom-select-group{border-top:1px solid var(--border-sub)}
    .custom-select-group-label{
      padding:var(--s2) var(--s5) var(--s1);
      font-family:var(--f-display);font-size:.68rem;font-weight:800;
      letter-spacing:.1em;text-transform:uppercase;color:var(--green-700)
    }
    .custom-select-option{
      display:block;width:100%;text-align:left;border:none;background:transparent;
      padding:var(--s3) var(--s5) var(--s3) var(--s8);
      font-family:var(--f-body);font-size:.92rem;color:var(--text-1);
      cursor:pointer;transition:background .15s,color .15s;line-height:1.35
    }
    .custom-select-option:hover,
    .custom-select-option:focus-visible{
      background:var(--green-50);color:var(--green-800);outline:none
    }
    .custom-select-option.is-selected{
      background:var(--green-100);color:var(--green-800);font-weight:600
    }
    .custom-select-option.is-selected::before{
      content:'';display:inline-block;width:6px;height:6px;margin-right:8px;margin-left:-14px;
      border-radius:50%;background:var(--green-600);vertical-align:middle
    }
    .custom-select-option--solo{padding-left:var(--s5)}

    .submit-btn{width:100%;margin-top:auto}

    .form-alert{
      font-size:.85rem;font-weight:600;text-align:center;
      padding:var(--s3) var(--s4);border-radius:var(--r-md);
      margin-bottom:var(--s3)
    }
    .form-alert.success{background:var(--green-50);color:var(--green-700);border:1px solid var(--green-200)}
    .form-alert.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}

    .form-note{
      font-size:.75rem;color:var(--text-3);
      text-align:center;margin-top:var(--s4);line-height:1.6
    }
    .form-note a{color:var(--green-600);text-decoration:underline}

    /* ═══════════════════════════════════════════════════
       CTA STRIP
    ═══════════════════════════════════════════════════ */
    .cta-strip{
      position:relative;overflow:hidden;
      background:linear-gradient(120deg,var(--green-900) 0%,var(--green-700) 50%,var(--green-600) 100%)
    }
    .cta-strip::before{
      content:'';position:absolute;
      width:600px;height:600px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,215,0,.12) 0%,transparent 70%);
      top:-200px;right:-100px
    }
    .cta-strip::after{
      content:'';position:absolute;
      width:400px;height:400px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%);
      bottom:-150px;left:-80px
    }

    .cta-inner{
      position:relative;z-index:1;
      display:grid;grid-template-columns:1fr auto;
      gap:var(--s12);align-items:center
    }

    .cta-text h2{
      font-family:var(--f-display);
      font-size:clamp(1.6rem,3vw,2.4rem);
      font-weight:900;color:#fff;
      letter-spacing:-.03em;line-height:1.15;
      margin-bottom:var(--s3)
    }
    .cta-text p{font-size:clamp(.9rem,1.4vw,1rem);color:rgba(255,255,255,.75);line-height:1.7;max-width:55ch}

    .cta-btns{display:flex;gap:var(--s4);flex-wrap:wrap;flex-shrink:0}

    /* ═══════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════ */
    .site-footer{background:var(--n-950)}

    .footer-top{
      display:grid;
      grid-template-columns:2.2fr 1fr 1fr 1.6fr;
      gap:var(--s12);
      padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px)
    }

    .f-brand{display:flex;flex-direction:column;gap:var(--s5)}
    .f-brand .logo-name{color:#fff}
    .f-brand .logo-sub{color:var(--green-400)}
    .f-brand .logo-mark{background:linear-gradient(135deg,var(--green-700),var(--green-500))}
    .f-brand-desc{font-size:.88rem;color:rgba(255,255,255,.45);line-height:1.8;max-width:30ch}

    .f-social{display:flex;gap:var(--s3)}
    .f-soc-link{
      width:42px;height:42px;border-radius:var(--r-sm);
      background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
      display:flex;align-items:center;justify-content:center;
      transition:background .2s,border-color .2s,transform .2s
    }
    .f-soc-link:hover{background:var(--green-600);border-color:var(--green-600);transform:translateY(-3px)}
    .f-soc-link svg{width:18px;height:18px;stroke:rgba(255,255,255,.75);fill:none;stroke-width:2}

    .f-col h4{
      font-family:var(--f-display);font-size:.72rem;font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;
      color:#fff;margin-bottom:var(--s5)
    }
    .f-col ul{display:flex;flex-direction:column;gap:var(--s3)}
    .f-col ul li a{font-size:.88rem;color:rgba(255,255,255,.45);transition:color .2s}
    .f-col ul li a:hover{color:var(--gold-400)}

    /* Newsletter */
    .f-newsletter-desc{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:var(--s5)}

    .newsletter-row{display:flex;gap:var(--s2)}
    .newsletter-row input{
      flex:1;min-height:48px;
      border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);
      padding:0 var(--s4);background:rgba(255,255,255,.06);
      color:#fff;font-family:var(--f-body);font-size:.88rem;outline:none;
      transition:border-color .2s
    }
    .newsletter-row input::placeholder{color:rgba(255,255,255,.3)}
    .newsletter-row input:focus{border-color:var(--green-500)}
    .newsletter-row button{
      min-width:48px;min-height:48px;background:var(--green-600);border:none;
      border-radius:var(--r-md);cursor:pointer;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      transition:background .2s
    }
    .newsletter-row button:hover{background:var(--green-500)}
    .newsletter-row button svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5}

    /* Footer bottom */
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      padding:var(--s6) 0;
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)
    }
    .footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.28)}
    .footer-legal{display:flex;gap:var(--s6)}
    .footer-legal a{font-size:.8rem;color:rgba(255,255,255,.28);transition:color .2s}
    .footer-legal a:hover{color:rgba(255,255,255,.65)}

    /* ═══════════════════════════════════════════════════
       BACK TO TOP
    ═══════════════════════════════════════════════════ */
    .btt{
      position:fixed;bottom:var(--s8);right:var(--s8);z-index:600;
      width:54px;height:54px;background:var(--green-600);border:none;
      border-radius:50%;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 6px 24px rgba(31,122,31,.5);
      opacity:0;pointer-events:none;transform:translateY(20px);
      transition:opacity .3s,transform .3s var(--ease-spring),background .2s
    }
    .btt.visible{opacity:1;pointer-events:all;transform:translateY(0)}
    .btt:hover{background:var(--green-700);transform:translateY(-3px)}
    .btt svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.5}

    /* ═══════════════════════════════════════════════════
       SECTION DIVIDER (green to white gradient rule)
    ═══════════════════════════════════════════════════ */
    .divider-bar{
      height:3px;width:100%;
      background:linear-gradient(90deg,transparent,var(--green-500) 25%,var(--gold-500) 50%,var(--green-500) 75%,transparent)
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE — TABLET 1024px
    ═══════════════════════════════════════════════════ */
    @media(max-width:1024px){
      .hero-inner{grid-template-columns:1fr;gap:var(--s10)}
      .hero-card-panel{display:none} /* hide on tablet/mobile to keep it clean */
      .hero-title{font-size:clamp(2.4rem,7vw,3.8rem)}
      .hero-trust{gap:var(--s6)}

      .about-grid{gap:var(--s10)}
      .about-accent-img{display:none}
      .about-cert-badge{top:-15px;left:-10px}

      .steps-grid{grid-template-columns:repeat(2,1fr)}
      .steps-grid::before{display:none}

      .footer-top{grid-template-columns:1fr 1fr;gap:var(--s8)}

      .cta-inner{grid-template-columns:1fr;gap:var(--s8)}
      .cta-btns{justify-content:flex-start}
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE — MOBILE 768px
    ═══════════════════════════════════════════════════ */
    @media(max-width:768px){
      html{font-size:16px}

      /* Nav */
      .nav-links,.nav-cta{display:none}
      .hamburger{display:flex}

      /* Hero */
      .hero{min-height:100svh}
      .hero-trust{gap:var(--s4);flex-wrap:nowrap}
      .trust-sep{display:block}
      .trust-num{font-size:1.6rem}

      /* About */
      .about-grid{grid-template-columns:1fr}
      .about-cert-badge{top:var(--s4);left:var(--s4)}

      /* Services */
      .svc-grid{grid-template-columns:1fr}

      /* Portfolio */
      .port-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto
      }
      .port-card:nth-child(1){grid-column:1;grid-row:auto;aspect-ratio:16/9}
      .port-card:nth-child(2){grid-column:1;grid-row:auto}
      .port-card:nth-child(3){grid-column:1;grid-row:auto}
      .port-card:nth-child(4){grid-column:1;grid-row:auto;aspect-ratio:16/9}

      /* Testimonials */
      .test-grid{grid-template-columns:1fr}

      /* Contact */
      .contact-grid{grid-template-columns:1fr}
      .form-row-2{grid-template-columns:1fr}

      /* Footer */
      .footer-top{grid-template-columns:1fr}

      /* Process */
      .steps-grid{grid-template-columns:1fr 1fr}

      /* CTA */
      .cta-inner{gap:var(--s6)}
      .cta-btns{width:100%}
      .cta-btns .btn{flex:1;min-width:0}

      /* Back to top */
      .btt{bottom:var(--s5);right:var(--s5)}
    }

    @media(max-width:560px){
      .hero-actions{flex-direction:column}
      .hero-actions .btn{width:100%}
      .hero-trust{gap:var(--s2)}
      .trust-num{font-size:1.25rem}
      .trust-lbl{font-size:.58rem}
      .steps-grid{grid-template-columns:1fr}
      .cta-btns{flex-direction:column}
      .cta-btns .btn{width:100%}
      .about-cert-badge{display:none}
    }