/* ============================================================================
   HAVEN — v2 design system
   Brand tokens sampled from Figma (file fdEODv07mE1eaxj0PrCTQ1, frame 224:19).
   Layout, depth and motion are new; the palette and typeface are unchanged.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* brand — unchanged from the Figma design */
  --green:#20BF87;
  --green-bright:#1FD797;
  --green-glow:#04C280;
  --green-deep:#003F29;
  --green-dark:#003321;
  --footer:#003824;
  --mint-hero:#E4F7F0;
  --mint:#EFFAF6;
  --mint-deep:#D6F0E5;
  --pill:rgba(32,191,135,.21);
  --leaf:#B3E9D6;
  --ink:#0B1D16;
  --body:#3B5A4B;
  --muted:#6B8579;
  --grey:#9EA9AA;
  --line:#DDEDE5;
  --box:#F3F3F3;
  --label:#008A5A;
  --num:#262626;
  --num-live:#00C7A2;

  /* new: depth + motion */
  --sh-1:0 2px 8px rgba(0,50,33,.05);
  --sh-2:0 14px 34px -14px rgba(0,50,33,.16);
  --sh-3:0 34px 70px -28px rgba(0,50,33,.26);
  --sh-4:0 60px 120px -40px rgba(0,50,33,.38);
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:24px;
  --r-lg:34px;
  --r-xl:44px;
  --r-pill:100px;
  --pad:clamp(20px,4vw,44px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden; height:100vh}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:10px}
::selection{background:var(--green); color:#fff}

.wrap{width:100%; max-width:1280px; margin:0 auto; padding:0 var(--pad)}
.shell{width:100%; max-width:1440px; margin:0 auto; padding:0 18px}
.narrow{max-width:900px; margin-inline:auto}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.04em; color:var(--green-deep); line-height:1.05}
h1{font-size:clamp(38px,4.6vw,68px); letter-spacing:-.045em; color:var(--ink)}
h2{font-size:clamp(32px,4.6vw,64px)}
h3{font-size:clamp(21px,2vw,30px); letter-spacing:-.03em; line-height:1.2}
h4{font-size:clamp(17px,1.3vw,20px); letter-spacing:-.02em}
p{margin:0}
.g{color:var(--green)}
.lede{font-size:clamp(17px,1.45vw,21px); line-height:1.6; color:var(--body)}
.sm{font-size:15px; color:var(--muted)}
.xs{font-size:13.5px; color:var(--muted)}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label);
}

/* pill eyebrow — carried over from the Figma design */
.tag{
  display:inline-flex; align-items:center; gap:9px; background:var(--pill); color:#00301F;
  border-radius:var(--r-pill); padding:9px 20px; font-size:13.5px; font-weight:500; line-height:1;
}
.tag.on-dark{background:rgba(255,255,255,.13); color:#CFF3E4}
.dot{width:7px; height:7px; border-radius:50%; background:var(--green); position:relative; flex:0 0 auto}
.dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--green); animation:ping 2.6s var(--ease-out) infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:.7} 100%{transform:scale(1.7);opacity:0}}

/* --------------------------------------------------------------- buttons -- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; font-weight:600; border-radius:var(--r-pill);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .28s ease, color .28s ease;
  overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(120deg,#19A874,#20BF87 45%,#41D8A2);
  opacity:0; transition:opacity .32s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-green{background:var(--green); color:#fff; padding:17px 34px; font-size:16px; box-shadow:0 12px 26px -12px rgba(32,191,135,.75)}
.btn-green:hover::before{opacity:1}
.btn-green:hover{box-shadow:0 20px 40px -14px rgba(32,191,135,.6)}
.btn-dark{background:var(--green-deep); color:#fff; padding:17px 34px; font-size:16px}
.btn-dark:hover{background:#00291B}
.btn-white{background:#fff; color:var(--green-deep); padding:16px 32px; font-size:16px; box-shadow:var(--sh-2)}
.btn-ghost{background:transparent; color:var(--green-deep); border:1.5px solid var(--line); padding:16px 32px; font-size:16px}
.btn-ghost:hover{border-color:var(--green); background:var(--mint)}
.btn-sm{padding:12px 24px; font-size:14px}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ----------------------------------------------------------------- forms -- */
.signup{display:flex; gap:10px; flex-wrap:wrap; max-width:520px}
.signup .fieldwrap{position:relative; flex:1 1 260px; min-width:0}
.signup input{
  width:100%; height:60px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  background:#fff; padding:0 26px; font-family:inherit; font-size:15.5px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.signup input::placeholder{color:var(--grey)}
.signup input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(32,191,135,.15)}
.signup .btn{height:60px}
.on-dark .signup input{border-color:transparent}
.note{font-size:15px; color:var(--muted); margin-top:18px; display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.note b{color:var(--label); font-weight:500}
.formmsg{font-size:14.5px; color:var(--green); margin-top:14px; display:none}
.formmsg.show{display:block}

/* ============================================================== PRELOADER */
#pre{
  position:fixed; inset:0; z-index:9999; background:var(--green-dark);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .6s ease .25s, visibility .6s ease .25s;
}
#pre.done{opacity:0; visibility:hidden}
#pre .curtain{position:absolute; inset:0; background:var(--green-dark); transition:transform 1s var(--ease-out)}
#pre.done .curtain.top{transform:translateY(-101%)}
#pre.done .curtain.bot{transform:translateY(101%)}
#pre .curtain.top{clip-path:inset(0 0 50% 0)}
#pre .curtain.bot{clip-path:inset(50% 0 0 0)}
#pre .pre-in{position:relative; z-index:2; text-align:center; transition:opacity .4s ease, transform .6s var(--ease)}
#pre.done .pre-in{opacity:0; transform:scale(.96)}
#pre .mark{width:132px; margin:0 auto 26px}
#pre .mark svg{width:100%; height:auto; overflow:visible}
/* leaves stagger in; trunk + mother/child draw after */
#pre .leaf-p{opacity:0; transform-box:fill-box; transform-origin:center; animation:leafIn .62s var(--ease-out) forwards}
#pre .body-p{opacity:0; animation:bodyIn .8s var(--ease-out) .5s forwards}
@keyframes leafIn{
  0%{opacity:0; transform:scale(.2) rotate(-25deg)}
  60%{opacity:1; transform:scale(1.14) rotate(4deg)}
  100%{opacity:1; transform:scale(1) rotate(0)}
}
@keyframes bodyIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
#pre .word{
  font-size:40px; font-weight:600; letter-spacing:-.04em; color:#fff; line-height:1;
  display:flex; justify-content:center; gap:1px; margin-bottom:10px;
}
#pre .word span{
  display:inline-block; opacity:0; transform:translateY(22px);
  animation:charUp .7s var(--ease-out) forwards;
}
@keyframes charUp{to{opacity:1; transform:none}}
#pre .sub{
  font-size:14px; letter-spacing:.28em; text-transform:uppercase; color:var(--green-glow);
  opacity:0; animation:charUp .8s var(--ease-out) 1.15s forwards;
}
#pre .bar{
  width:190px; height:2px; background:rgba(255,255,255,.16); border-radius:2px;
  margin:38px auto 0; overflow:hidden;
}
#pre .bar i{
  display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--green-glow),#8BF0CB);
  animation:load 1.7s var(--ease) .3s forwards;
}
@keyframes load{to{width:100%}}

/* ============================================================ REVEAL SYSTEM */
[data-reveal]{opacity:0; will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(38px)}
[data-reveal="down"]{transform:translateY(-28px)}
[data-reveal="left"]{transform:translateX(-44px)}
[data-reveal="right"]{transform:translateX(44px)}
[data-reveal="scale"]{transform:scale(.93)}
[data-reveal="fade"]{transform:none}
[data-reveal="clip"]{opacity:1; clip-path:inset(0 0 100% 0)}
[data-reveal].in{
  opacity:1; transform:none; clip-path:inset(0 0 0 0);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out), clip-path 1.1s var(--ease-out);
}
/* per-word headline reveal */
.words span{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.words span i{
  display:inline-block; font-style:inherit; transform:translateY(105%);
  transition:transform .95s var(--ease-out);
}
.words.in span i{transform:none}

/* floaty ambient motion */
.float{animation:float 7s ease-in-out infinite}
.float.d1{animation-delay:-2s}
.float.d2{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}

/* leaf motif */
.leaf{position:absolute; pointer-events:none; z-index:0; opacity:.85}
.leaf img{width:100%}
.drift{animation:drift 16s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(10px,-16px) rotate(5deg)}}

/* ================================================================== NAV -- */
.nav{position:fixed; top:0; left:0; right:0; z-index:900; transition:background .4s ease, box-shadow .4s ease, padding .4s ease}
.nav.stuck{background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(150%); box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex; align-items:center; gap:34px; padding:20px 0; transition:padding .4s ease}
.nav.stuck .nav-in{padding:12px 0}
.nav-logo{height:78px; width:auto; transition:height .4s ease}
.nav.stuck .nav-logo{height:62px}
.nav-links{display:flex; gap:6px; margin-left:auto}
.nav-links a{
  position:relative; font-size:15px; font-weight:400; color:#173D2C; padding:9px 15px; border-radius:var(--r-pill);
  transition:color .25s, background .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:1.5px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--green-deep)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--green); font-weight:500}
.nav-links a[aria-current]::after{transform:scaleX(1)}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:10px; z-index:2}
.burger span{display:block; width:24px; height:2px; background:var(--green-deep); border-radius:2px; transition:transform .35s var(--ease), opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{
  position:fixed; inset:0; z-index:890; background:var(--green-dark);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad);
  clip-path:circle(0% at calc(100% - 46px) 40px); transition:clip-path .7s var(--ease-out);
}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 46px) 40px)}
.mobile-menu a{
  font-size:clamp(28px,8vw,42px); font-weight:600; letter-spacing:-.03em; color:#fff;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0; transform:translateY(20px);
}
.mobile-menu.open a{opacity:1; transform:none; transition:opacity .5s ease, transform .6s var(--ease-out)}
.mobile-menu .btn{margin-top:34px; align-self:flex-start}

/* ================================================================= HERO -- */
.hero{position:relative; padding:190px 0 90px; overflow:hidden; background:var(--mint-hero)}
.hero-mesh{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 620px at 84% 8%, rgba(32,191,135,.30), transparent 62%),
    radial-gradient(620px 520px at 8% 82%, rgba(4,194,128,.16), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(255,255,255,.85), transparent 60%);
}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.03fr .97fr; gap:56px; align-items:center}
.hero h1{margin:26px 0 26px; max-width:15ch}
.hero .lede{max-width:47ch}
.hero .signup{margin-top:38px}
.social-proof{display:flex; align-items:center; gap:16px; margin-top:38px}
.avstack{display:flex}
.avstack img,.avstack span{
  width:44px; height:44px; border-radius:50%; border:2.5px solid var(--mint-hero);
  object-fit:cover; margin-left:-13px;
}
.avstack > *:first-child{margin-left:0}
.avstack span{
  background:var(--green); color:#fff; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* device frames */
.device{
  position:relative; border-radius:44px; padding:9px;
  background:linear-gradient(150deg,#12271E,#04150E 60%);
  box-shadow:var(--sh-4), inset 0 0 0 1px rgba(255,255,255,.09);
}
.device::after{
  content:""; position:absolute; left:9px; right:9px; top:9px; height:38%;
  border-radius:36px 36px 60% 60%/36px 36px 22% 22%;
  background:linear-gradient(175deg,rgba(255,255,255,.16),rgba(255,255,255,0) 78%);
  pointer-events:none; z-index:3;
}
.device .notch{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:74px; height:19px; border-radius:12px; background:#04150E; z-index:4;
}
.device .scr{border-radius:36px; overflow:hidden; background:#fff; position:relative}
.device .scr img{width:100%; height:auto}
.device.sm{border-radius:34px; padding:7px}
.device.sm .scr{border-radius:28px}
.device.sm .notch{width:56px; height:15px; top:15px}

.hero-stage{position:relative; height:672px}
.hero-stage .d-main{position:absolute; left:19%; top:6px; width:53%; z-index:3}
.hero-stage .d-back{position:absolute; right:-7%; top:128px; width:40%; z-index:2; opacity:.94;
  filter:saturate(.96)}
.hero-stage .d-front{position:absolute; left:-11%; bottom:44px; width:36%; z-index:4}

.pop{
  position:absolute; background:#fff; border-radius:20px; padding:14px 17px;
  box-shadow:var(--sh-3); z-index:6; display:flex; gap:11px; align-items:center;
}
.pop .av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto; color:#fff;
  background:linear-gradient(150deg,#20BF87,#0B8258);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600;
}
.pop b{display:block; font-size:13.5px; color:var(--ink); font-weight:600; line-height:1.2}
.pop span{display:block; font-size:12.5px; color:var(--muted); line-height:1.35; margin-top:2px}
.pop.p-a{left:-17%; top:18px; max-width:258px}
.pop.p-b{right:-13%; bottom:56px; max-width:270px}
.pop-in{opacity:0; transform:translateY(16px) scale(.94)}
.pop-in.show{opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .8s var(--ease-out)}

/* ============================================================== MARQUEE -- */
.marq{background:var(--green); color:#fff; padding:20px 0; overflow:hidden; position:relative}
.marq-track{display:flex; width:max-content; animation:slide 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track > div{display:flex; align-items:center; gap:44px; padding-right:44px}
.marq span{font-size:clamp(18px,2vw,26px); font-weight:600; letter-spacing:-.03em; white-space:nowrap}
.marq svg{flex:0 0 auto; opacity:.72}
@keyframes slide{to{transform:translateX(-50%)}}

/* ================================================================ STATS -- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px}
.statc{
  background:var(--mint); border-radius:var(--r-lg); padding:36px 30px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.statc:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.statc b{display:block; font-size:clamp(38px,4vw,56px); font-weight:600; color:var(--green); letter-spacing:-.05em; line-height:1}
.statc span{display:block; margin-top:12px; font-size:15px; color:var(--body)}

/* =============================================================== SECTION -- */
.sec{padding:clamp(74px,9vw,132px) 0; position:relative}
.sec.clipx,footer,.hero{overflow:hidden}
.sec-mint{background:var(--mint)}
.sec-dark{background:var(--green-dark); color:#fff}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lede,.sec-dark p{color:#BFE4D4}
.sec-dark .g{color:var(--green-glow)}
.block{background:var(--mint); border-radius:var(--r-xl); position:relative; overflow:hidden}
/* the sticky "how it works" block must not clip, or position:sticky dies —
   its leaves are positioned inside the bounds instead */
.block.no-clip{overflow:visible}
.head{max-width:800px; margin-bottom:clamp(46px,6vw,76px)}
.head.mid{margin-inline:auto; text-align:center}
.head .tag{margin-bottom:24px}
.head h2{margin-bottom:22px}

/* ============================================== STICKY "HOW IT WORKS" ---- */
.sticky-wrap{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:stretch}
/* the grid item stretches to the full row so the sticky child has travel */
.sticky-col{position:relative}
.sticky-visual{position:sticky; top:110px; height:min(76vh,700px); display:flex; align-items:center; justify-content:center}
.sticky-visual .device{width:min(320px,80%)}
.sticky-visual .scr img{
  position:absolute; inset:0; width:100%; opacity:0; transform:scale(1.03);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
}
.sticky-visual .scr img.active{opacity:1; transform:none; position:relative}
.step-list{display:flex; flex-direction:column; gap:0; padding:0}
.stepi{min-height:62vh; display:flex; flex-direction:column; justify-content:center}
.stepi{position:relative; padding-left:78px; opacity:.32; transition:opacity .55s ease}
.stepi.on{opacity:1}
.stepi .n{
  position:absolute; left:0; top:calc(50% - 96px); width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:600; color:var(--green);
  background:#fff; border:1.5px solid var(--line); transition:all .5s var(--ease);
}
.stepi.on .n{background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 12px 26px -12px rgba(32,191,135,.8)}
.stepi h3{margin-bottom:14px}
.stepi p{font-size:17.5px; margin-bottom:18px}
.stepi ul{list-style:none; margin:0; padding:0}
.stepi li{display:flex; gap:11px; align-items:flex-start; font-size:16px; margin-bottom:10px}
.stepi li svg{flex:0 0 auto; margin-top:4px; color:var(--green)}

/* ================================================================ BENTO -- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.bx{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 32px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.bx:hover{transform:translateY(-7px); box-shadow:var(--sh-3); border-color:rgba(32,191,135,.4)}
.bx .ic{
  width:56px; height:56px; border-radius:18px; background:var(--pill); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  transition:background .4s, color .4s, transform .5s var(--ease);
}
.bx:hover .ic{background:var(--green); color:#fff; transform:rotate(-8deg) scale(1.06)}
.bx h3{margin-bottom:12px; font-size:22px}
.bx p{font-size:15.5px; color:var(--muted)}
.bx-3{grid-column:span 3} .bx-2{grid-column:span 2} .bx-4{grid-column:span 4} .bx-6{grid-column:span 6}
.bx.photo{padding:0; border:0; min-height:300px}
.bx.photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 1.1s var(--ease)}
.bx.photo:hover img{transform:scale(1.06)}
.bx.photo .cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:30px 30px 28px; color:#fff;
  background:linear-gradient(transparent,rgba(0,40,26,.86));
}
.bx.photo .cap h3{color:#fff; margin-bottom:6px}
.bx.photo .cap p{color:#DBF1E7}
.bx.dark{background:var(--green-dark); border-color:transparent; color:#fff}
.bx.dark h3{color:#fff} .bx.dark p{color:#BFE4D4}
.bx.dark .ic{background:rgba(255,255,255,.12); color:var(--green-glow)}
.bx.green{background:var(--green); border-color:transparent; color:#fff}
.bx.green h3{color:#fff} .bx.green p{color:#E4FBF2}
.bx.green .ic{background:rgba(255,255,255,.2); color:#fff}
.bx.tall{min-height:340px}
.bx .shot{
  margin:26px -32px -34px; border-radius:22px 22px 0 0; overflow:hidden;
  max-height:280px; box-shadow:0 -12px 44px -20px rgba(0,50,33,.45);
}
.bx .shot img{object-fit:cover; object-position:top center; width:100%}

/* ================================================================= TABS -- */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:46px}
.tabs button{
  background:#fff; border:1.5px solid var(--line); color:var(--body); cursor:pointer;
  border-radius:var(--r-pill); padding:13px 26px; font-size:15px; font-weight:500;
  transition:all .35s var(--ease);
}
.tabs button:hover{border-color:var(--green); color:var(--green-deep)}
.tabs button[aria-selected="true"]{background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 12px 26px -14px rgba(32,191,135,.9)}
.panel{display:none; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.panel.on{display:grid; animation:panelIn .7s var(--ease-out)}
@keyframes panelIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.panel h3{margin-bottom:18px}
.panel p{font-size:17.5px; margin-bottom:16px}
.panel img{border-radius:var(--r); box-shadow:var(--sh-2)}
.chiprow{display:flex; gap:9px; flex-wrap:wrap; margin-top:24px}
.chiprow span{background:var(--pill); border-radius:var(--r-pill); padding:8px 17px; font-size:13.5px; color:#00301F}

/* =============================================================== PUZZLE -- */
.puz{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.puzgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; width:100%; max-width:560px}
.pz{
  aspect-ratio:1; border-radius:20px; background:rgba(255,255,255,.07);
  border:1.5px dashed rgba(255,255,255,.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  color:#8FD8BC; font-size:11px; text-align:center; padding:8px;
  opacity:0; transform:scale(.6) rotate(-12deg);
}
.pz.lit{
  opacity:1; transform:none; background:rgba(4,194,128,.2); border-style:solid;
  border-color:var(--green-glow); color:#fff;
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out), background .6s, border-color .6s;
}
.pz svg{color:var(--green-glow)}
.pz{font-size:12px}
.pz.lit:hover{background:rgba(4,194,128,.32); transform:translateY(-4px)}
.pz b{font-size:12px; font-weight:500}
.rewards{list-style:none; margin:32px 0 0; padding:0}
.rewards li{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid rgba(255,255,255,.14)}
.rewards li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.rewards .rk{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(4,194,128,.2);
  color:var(--green-glow); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.rewards b{display:block; color:#fff; font-weight:500; font-size:16.5px; margin-bottom:3px}
.rewards span{font-size:15px; color:#A9D8C5}

/* =========================================================== TESTIMONIAL -- */
.quotes{position:relative; overflow:hidden}
.qtrack{display:flex; transition:transform .8s var(--ease-out)}
.qcard{flex:0 0 100%; padding:0 10px}
.qinner{background:#fff; border-radius:var(--r-xl); padding:clamp(34px,4.4vw,60px); box-shadow:var(--sh-2); position:relative}
.qmark{font-size:110px; line-height:.8; color:var(--mint-deep); font-weight:600; position:absolute; top:26px; right:36px}
.qtext{font-size:clamp(19px,2.1vw,28px); line-height:1.48; color:var(--green-deep); letter-spacing:-.025em; position:relative; z-index:2}
.qwho{display:flex; align-items:center; gap:15px; margin-top:32px}
.qwho img{width:56px; height:56px; border-radius:50%; object-fit:cover}
.qwho b{display:block; font-size:16px; color:var(--ink); font-weight:600}
.qwho span{font-size:14.5px; color:var(--muted)}
.qnav{display:flex; gap:10px; justify-content:center; margin-top:36px}
.qnav button{
  width:11px; height:11px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:var(--mint-deep); transition:all .35s var(--ease);
}
.qnav button[aria-current="true"]{background:var(--green); width:34px; border-radius:6px}

/* ================================================================ CARDS -- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.ecard{
  background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); display:flex; flex-direction:column;
}
.ecard:hover{transform:translateY(-8px); box-shadow:var(--sh-3)}
.ecard .im{position:relative; overflow:hidden; aspect-ratio:16/10}
.ecard .im img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.ecard:hover .im img{transform:scale(1.07)}
.ecard .pin{
  position:absolute; left:16px; top:16px; z-index:2; background:rgba(255,255,255,.94);
  border-radius:var(--r-pill); padding:7px 15px; font-size:12.5px; font-weight:500; color:var(--green-deep);
}
.ecard .bd{padding:28px 28px 30px; display:flex; flex-direction:column; flex:1}
.ecard .mt{font-size:13.5px; color:var(--muted); margin-bottom:12px; display:flex; gap:14px; flex-wrap:wrap}
.ecard h3{font-size:21px; margin-bottom:12px; color:var(--ink)}
.ecard p{font-size:15.5px; color:var(--muted); flex:1; margin-bottom:20px}
.ecard .more{color:var(--green); font-weight:500; font-size:15.5px; display:inline-flex; gap:7px; align-items:center}
.ecard:hover .more .arw{transform:translateX(4px)}
.arw{transition:transform .3s var(--ease)}

/* =============================================================== SAFETY -- */
.safety{display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center}
.safelist{list-style:none; margin:0; padding:0}
.safelist li{display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid rgba(255,255,255,.14); font-size:16.5px; color:#D6EFE4}
.safelist li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.safelist b{color:#fff; font-weight:500}
.safelist .tk{flex:0 0 auto; margin-top:3px; color:var(--green-glow)}
.crisis{background:rgba(255,255,255,.07); border-left:3px solid var(--green-glow); border-radius:18px; padding:24px 26px; margin-top:34px}
.crisis p{font-size:15.5px; color:#C6E8D8; margin:0}
.crisis b{color:#fff}

/* ================================================================== FAQ -- */
.faqlist{max-width:940px; margin-inline:auto}
.fq{border-bottom:1px solid var(--line)}
.fq:first-child{border-top:1px solid var(--line)}
.fq summary{
  list-style:none; cursor:pointer; position:relative; padding:28px 60px 28px 0;
  font-size:clamp(17px,1.6vw,21px); font-weight:500; color:var(--green-deep); transition:color .25s;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--green)}
.fq summary::after{
  content:""; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; background:var(--mint);
  background-image:
    linear-gradient(var(--green),var(--green)),
    linear-gradient(var(--green),var(--green));
  background-size:13px 1.8px, 1.8px 13px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:transform .35s var(--ease), background-color .3s;
}
.fq[open] summary::after{background-size:13px 1.8px, 0 0; transform:translateY(-50%) rotate(180deg); background-color:var(--green); background-image:linear-gradient(#fff,#fff), none}
.fq .ans{padding:0 70px 30px 0; font-size:16.5px; line-height:1.72; color:var(--body)}
.fq .ans p+p{margin-top:12px}

/* ============================================================ FINAL CTA -- */
.cta{position:relative; overflow:hidden; background:linear-gradient(150deg,#1FD797,#0E9E6E 58%,#046B4A)}
.cta-in{position:relative; z-index:3; display:grid; grid-template-columns:1.06fr .94fr; gap:50px; align-items:center; padding:clamp(60px,7vw,104px) 0}
.cta h2{color:#fff}
.cta .tree{
  position:absolute; right:-3%; top:-14%; width:520px; opacity:.14; z-index:1;
  filter:brightness(0) invert(1);
}
.cta-photo{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-4)}
.cta-photo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.countdown{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.cd{
  background:#fff; border-radius:22px; min-width:88px; padding:15px 10px 13px; text-align:center;
  box-shadow:var(--sh-2);
}
.cd span{display:block; font-size:13px; font-weight:500; color:var(--label); letter-spacing:-.02em}
.cd b{display:block; font-size:40px; font-weight:500; color:var(--num); letter-spacing:-.05em; line-height:1.1; font-variant-numeric:tabular-nums}
.cd.live b{color:var(--num-live)}

/* =============================================================== FOOTER -- */
footer{background:var(--footer); color:#B4CFC4; padding:clamp(60px,7vw,92px) 0 0; font-size:15.5px; position:relative; overflow:hidden}
footer .leaf{opacity:.06}
.foot-top{display:grid; grid-template-columns:1.2fr repeat(5,.8fr) 1fr; gap:52px; padding-bottom:56px; position:relative; z-index:2}
.foot-lock{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.foot-lock img{height:104px; width:auto}
.foot-lock .word{font-size:42px; font-weight:600; color:#fff; letter-spacing:-.04em; line-height:1}
.foot-lock .sub{font-size:14px; color:var(--green-glow); letter-spacing:-.01em; margin-top:3px}
footer h4,footer .foot-h{color:#fff; font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px; font-weight:500}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:13px}
footer a{transition:color .25s, padding-left .25s}
footer a:hover{color:var(--green-glow); padding-left:4px}
.crow{display:flex; gap:12px; align-items:flex-start; margin-bottom:16px}
.crow svg{flex:0 0 auto; color:var(--green-glow); margin-top:3px}
.socials{display:flex; gap:11px; margin-top:26px}
.socials a{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); color:var(--green-glow);
  transition:background .3s, color .3s, transform .35s var(--ease);
}
.socials a:hover{background:var(--green); color:#fff; transform:translateY(-3px)}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.12); padding:26px 0; display:flex;
  justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:14px; position:relative; z-index:2;
}
.foot-bot nav{display:flex; gap:22px; flex-wrap:wrap}

/* progress bar */
#prog{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--green),var(--green-bright)); z-index:950; transition:width .1s linear}

/* back to top */
#top-btn{
  position:fixed; right:26px; bottom:26px; z-index:800; width:50px; height:50px; border-radius:50%;
  background:var(--green-deep); color:#fff; border:0; cursor:pointer; box-shadow:var(--sh-3);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s, visibility .4s, transform .4s var(--ease), background .3s;
}
#top-btn.show{opacity:1; visibility:visible; transform:none}
#top-btn:hover{background:var(--green)}

/* ========================================================== RESPONSIVE -- */
@media(max-width:1300px){
  .hero-stage .d-front{display:none}
  .pop.p-a{left:-6%}
  .pop.p-b{right:-5%}
}
@media(max-width:1180px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bx-3{grid-column:span 2} .bx-4{grid-column:span 4} .bx-2{grid-column:span 2} .bx-6{grid-column:span 4}
  .hero-stage{height:560px}
}
@media(max-width:1000px){
  .nav-links{display:none}
  .nav .btn:not(.mobile-menu .btn){display:none}
  .burger{display:block}
  .hero{padding:140px 0 70px}
  .hero-in,.sticky-wrap,.panel.on,.puz,.safety,.cta-in{grid-template-columns:1fr; gap:44px}
  .sticky-visual{position:relative; top:auto; height:auto; margin-bottom:10px}
  .sticky-col{position:static}
  .sticky-visual .device{width:min(290px,74%)}
  .step-list{padding:0; gap:52px}
  .stepi{min-height:0; display:block}
  .stepi .n{top:2px}
  .stepi{opacity:1}
  .stepi .n{background:var(--green); color:#fff; border-color:var(--green)}
  .stats{grid-template-columns:1fr 1fr}
  .cards3{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr 1fr; gap:32px}
  .foot-top>div:first-child{grid-column:1/-1}
  .hero-stage{height:520px}
  .cta .tree{width:340px; opacity:.1}
}
@media(max-width:700px){
  :root{--r-xl:28px; --r-lg:24px}
  .bento,.cards3{grid-template-columns:1fr}
  .bx-3,.bx-2,.bx-4,.bx-6{grid-column:span 1}
  .stats{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-stage{height:auto; display:flex; justify-content:center; padding:8px 0 20px}
  .hero-stage .d-main{position:relative; left:auto; top:auto; width:min(272px,72%)}
  .hero-stage .d-back,.hero-stage .d-front,.pop{display:none}
  .leaf{display:none}
  .qmark{display:none}
  .cd{min-width:72px; padding:12px 8px 11px}
  .cd b{font-size:30px}
  .foot-bot{flex-direction:column}
  #top-btn{right:16px; bottom:16px}
}

/* ================================================= REDUCED MOTION ------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important; transform:none !important; clip-path:none !important}
  .words span i{transform:none !important}
  .pz{opacity:1 !important; transform:none !important}
  .pop-in{opacity:1 !important; transform:none !important}
  .marq-track{animation:none !important}
  .stepi{opacity:1 !important}
}

/* puzzle progress meter */
.pzbar{margin-top:28px; max-width:560px}
.pzbar .top{display:flex; justify-content:space-between; font-size:14px; color:#A9D8C5; margin-bottom:10px}
.pzbar .top b{color:#fff; font-weight:500}
.pzbar .rail{height:8px; border-radius:8px; background:rgba(255,255,255,.14); overflow:hidden}
.pzbar .fill{height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--green-glow),#8BF0CB); transition:width 1.6s var(--ease-out) .3s}
.pzbar.go .fill{width:100%}

/* ---------- contact form (sub-pages) ---------- */
.form{background:#fff; border-radius:var(--r-xl); padding:clamp(28px,3.4vw,44px); box-shadow:var(--sh-2); border:1px solid var(--line)}
.field{margin-bottom:22px}
.field label{display:block; font-size:14px; font-weight:500; color:var(--green-deep); margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:16px; padding:15px 18px; background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(32,191,135,.15);
}
@media(max-width:1000px){
  .contact-grid,.thesis-grid,.who-grid,.wh-grid{grid-template-columns:1fr !important; gap:44px !important}
  .contact-grid > *,.thesis-grid > *,.who-grid > *,.wh-grid > *{min-width:0}
}

/* puzzle pieces must be allowed to shrink inside the grid track */
.pz{min-width:0; overflow-wrap:anywhere}
.pz b{max-width:100%}
@media(max-width:700px){
  .puzgrid{gap:10px}
  .pz{border-radius:15px; padding:6px; font-size:10.5px; gap:5px}
  .pz svg{width:18px; height:18px}
  .pzbar,.rewards{max-width:100%}
}


/* ============================================================================
   v3 — rotating hero, header dropdown, spacing normalisation
   ========================================================================== */

/* --- rotating headline --- */
.hero-rot{position:relative; display:block; min-height:2.16em; max-width:none}
.hero-rot .rl{
  position:absolute; inset:0; opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .9s var(--ease-out);
  pointer-events:none;
}
.hero-rot .rl.on{opacity:1; transform:none; position:relative}
.hero-sub{position:relative; min-height:5.2em}
.hero-sub .sl{
  position:absolute; inset:0; opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.hero-sub .sl.on{opacity:1; transform:none; position:relative}

/* --- rotating lifestyle imagery in the hero --- */
.rotpic{
  position:absolute; right:-9%; bottom:18px; width:40%; aspect-ratio:4/5;
  border-radius:28px; overflow:hidden; box-shadow:var(--sh-4); z-index:5;
  border:5px solid #fff;
}
.rotpic img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.07);
  transition:opacity 1.1s var(--ease-out), transform 2.4s var(--ease-out);
}
.rotpic img.on{opacity:1; transform:scale(1)}
.rotpic .cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:22px 20px 18px; color:#fff;
  background:linear-gradient(transparent,rgba(0,40,26,.9));
  font-size:14px; line-height:1.4;
}
.rotdots{display:flex; gap:8px; margin-top:26px}
.rotdots button{
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(0,63,41,.22); transition:all .35s var(--ease);
}
.rotdots button[aria-current="true"]{background:var(--green); width:30px; border-radius:6px}

/* --- header dropdown --- */
.nav-links{align-items:center}
.has-sub{position:relative}
.has-sub > button{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; color:#173D2C; padding:9px 15px; border-radius:var(--r-pill);
  transition:color .25s;
}
.has-sub > button:hover{color:var(--green)}
.has-sub > button svg{transition:transform .3s var(--ease)}
.has-sub[data-open="true"] > button svg{transform:rotate(180deg)}
.has-sub[data-open="true"] > button{color:var(--green)}
.submenu{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(660px,86vw); background:#fff; border:1px solid var(--line); border-radius:26px;
  box-shadow:var(--sh-3); padding:22px; opacity:0; visibility:hidden;
  transition:opacity .3s ease, transform .38s var(--ease), visibility .3s;
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.has-sub[data-open="true"] .submenu{opacity:1; visibility:visible; transform:translateX(-50%)}
.submenu a{
  display:flex; gap:13px; align-items:flex-start; padding:13px 14px; border-radius:16px;
  transition:background .25s;
}
.submenu a:hover{background:var(--mint)}
.submenu .si{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px; background:var(--pill);
  color:var(--green-deep); display:flex; align-items:center; justify-content:center;
}
.submenu b{display:block; font-size:14.5px; font-weight:500; color:var(--green-deep); margin-bottom:2px}
.submenu span{display:block; font-size:12.5px; color:var(--muted); line-height:1.4}
.submenu .foot{
  grid-column:1 / -1; margin-top:8px; padding:14px 14px 4px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}

/* --- spacing / hierarchy normalisation across all pages --- */
.sec{padding:clamp(72px,8.5vw,124px) 0}
.sec + .sec{padding-top:clamp(56px,7vw,104px)}
.head{margin-bottom:clamp(40px,5vw,64px)}
.head p{margin-top:18px}
.marq{margin:0}
.stats{gap:clamp(14px,1.6vw,22px)}
.bento{gap:clamp(14px,1.6vw,20px)}
.cards3{gap:clamp(18px,2vw,28px)}
.tag{margin-bottom:0}
.head .tag{margin-bottom:22px}
/* consistent vertical rhythm for the eyebrow → h2 → lede stack */
.stack > .tag{margin-bottom:22px}
.stack > h2{margin-bottom:20px}
.stack > .lede{margin-bottom:0}

@media(max-width:1100px){
  .rotpic{width:44%; right:-4%}
}
@media(max-width:1000px){
  .submenu{grid-template-columns:1fr; width:min(420px,86vw)}
  .hero-rot{min-height:2.3em}
}
@media(max-width:760px){
  .rotpic{display:none}
  .hero-rot,.hero-sub{min-height:0}
  .hero-rot .rl,.hero-sub .sl{position:relative; display:none}
  .hero-rot .rl.on,.hero-sub .sl.on{display:block}
}
@media(prefers-reduced-motion:reduce){
  .hero-rot .rl,.hero-sub .sl,.rotpic img{transition:none !important}
}

/* keep the response card clear of the rotating photo */
.pop.p-b{right:auto; left:8%; bottom:-6px; max-width:262px}
@media(max-width:1100px){.pop.p-b{left:2%}}
@media(max-width:760px){.pop.p-b{display:none}}


/* ============================================================================
   Announcement bar — fixed above the header, rotating messages
   ========================================================================== */
:root{--ann:46px}
body{padding-top:var(--ann)}
.nav{top:var(--ann)}

#ann{
  position:fixed; top:0; left:0; right:0; height:var(--ann); z-index:920;
  background:linear-gradient(100deg,#003321 0%,#0B8258 48%,#20BF87 100%);
  color:#fff; overflow:hidden; display:flex; align-items:center;
  transition:transform .5s var(--ease), opacity .4s ease;
}
#ann::after{                      /* soft sheen sweeping across, premium feel */
  content:""; position:absolute; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);
  animation:sheen 7s linear infinite; pointer-events:none;
}
@keyframes sheen{from{left:-40%} to{left:110%}}
#ann.gone{transform:translateY(-100%); opacity:0}
.ann-in{
  width:100%; max-width:1280px; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:16px; position:relative; z-index:2;
}
.ann-leaf{flex:0 0 auto; opacity:.85; animation:annleaf 5s ease-in-out infinite}
@keyframes annleaf{0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(-12deg) scale(1.12)}}

/* vertical rotator — one line slides up as the next arrives */
.ann-rot{flex:1 1 auto; position:relative; height:var(--ann); overflow:hidden; min-width:0}
.ann-rot span{
  position:absolute; inset:0; display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:400; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  transform:translateY(110%); opacity:0;
  transition:transform .72s var(--ease-out), opacity .5s ease;
}
.ann-rot span b{font-weight:600}
.ann-cta{
  flex:0 0 auto; font-size:13px; font-weight:600; color:#fff; white-space:nowrap;
  border-bottom:1.5px solid rgba(255,255,255,.5); padding-bottom:1px;
  transition:border-color .25s, opacity .25s;
}
.ann-cta:hover{border-color:#fff}
.ann-x{
  flex:0 0 auto; background:none; border:0; cursor:pointer; color:rgba(255,255,255,.7);
  padding:6px; line-height:0; border-radius:8px; transition:color .25s, background .25s;
}
.ann-x:hover{color:#fff; background:rgba(255,255,255,.14)}

@media(max-width:820px){
  :root{--ann:42px}
  .ann-rot span{font-size:12.8px}
  .ann-cta{display:none}
}
@media(max-width:520px){
  .ann-leaf{display:none}
  .ann-rot span{font-size:12.2px}
}
@media(prefers-reduced-motion:reduce){
  #ann::after{animation:none}
  .ann-leaf{animation:none}
  .ann-rot span{transition:none}
}


/* --- announcement rotation, CSS-driven (no JS dependency) ---------------- */
/* 5 messages x 4.2s = 21s loop. Each is visible for ~4.2s, sliding up out. */
.ann-rot span{
  animation:annCycle 21s var(--ease-out) infinite;
  transform:translateY(110%); opacity:0;
}
.ann-rot span:nth-child(1){animation-delay:0s}
.ann-rot span:nth-child(2){animation-delay:4.2s}
.ann-rot span:nth-child(3){animation-delay:8.4s}
.ann-rot span:nth-child(4){animation-delay:12.6s}
.ann-rot span:nth-child(5){animation-delay:16.8s}
@keyframes annCycle{
  0%      {transform:translateY(110%); opacity:0}
  2.4%    {transform:translateY(0);    opacity:1}
  17.5%   {transform:translateY(0);    opacity:1}
  19.9%   {transform:translateY(-110%);opacity:0}
  100%    {transform:translateY(-110%);opacity:0}
}
#ann:hover .ann-rot span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .ann-rot span{animation:none; opacity:0; transform:none}
  .ann-rot span:nth-child(1){opacity:1}
}

/* --- client Aug 2026 additions --------------------------------------------- */
.stat-bx{text-align:center; padding:38px 26px}
.stat-bx b{display:block; font-size:clamp(38px,4vw,58px); font-weight:600; letter-spacing:-.03em;
  line-height:1; color:var(--green); margin-bottom:14px}
.stat-bx p{margin:0; font-size:15px; line-height:1.55}
.vid-stage{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-4);
  background:var(--green-dark); aspect-ratio:16/9}
.vid-stage video,.vid-stage img.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vid-play{position:absolute; inset:0; margin:auto; width:88px; height:88px; z-index:2; border:0;
  border-radius:50%; cursor:pointer; background:rgba(255,255,255,.94); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-3);
  transition:transform .4s var(--ease-out), background .3s ease}
.vid-play:hover{transform:scale(1.06); background:#fff}
.vid-play svg{margin-left:5px}
.vid-note{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 24px;
  background:linear-gradient(0deg,rgba(0,51,33,.82),transparent); color:#fff; font-size:14px; display:none}
.vid-stage.no-src .vid-note{display:block}
[hidden]{display:none !important}
.vetlist{counter-reset:vet; margin-top:26px; border-top:1px solid var(--line)}
.vetlist li{counter-increment:vet; display:grid; grid-template-columns:56px minmax(0,1fr);
  align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); list-style:none}
.vetlist li::before{content:counter(vet,decimal-leading-zero); font-size:14px; font-weight:500;
  letter-spacing:.06em; color:var(--muted)}
.vetlist li b{font-size:17px; letter-spacing:-.01em}
/* demo video — portrait (social/reel) format, matching the client's banner */
.vid-stage.vid-portrait{aspect-ratio:1000/1235; border-radius:var(--r-xl)}
.vid-stage.vid-landscape{aspect-ratio:16/9}

/* --- hero polish (visual only — no layout or section changes) --------------- */
.hero{position:relative}
.hero-mesh{
  background:
    radial-gradient(58% 46% at 14% 6%, rgba(4,194,128,.20) 0%, rgba(4,194,128,0) 62%),
    radial-gradient(46% 40% at 88% 4%, rgba(0,158,102,.16) 0%, rgba(0,158,102,0) 60%),
    radial-gradient(70% 54% at 50% 100%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
}
.hero::after{                       /* soft vignette so the fold edge reads cleanly */
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
  pointer-events:none; z-index:1;
}
.hero .wrap{position:relative; z-index:2}
.hero h1{letter-spacing:-.032em}
.phero .tag{box-shadow:0 2px 10px rgba(0,51,33,.06)}
.hero .leaf img{opacity:.85}
.device.float img,.device img{image-rendering:auto}
.device{box-shadow:0 32px 70px -28px rgba(0,51,33,.42), 0 8px 24px -12px rgba(0,51,33,.18)}
/* safelist used on light sections (Library / Haven A.I) */
.sec:not(.sec-dark) .safelist span,
.sec-mint .safelist span{color:var(--ink)}
.sec:not(.sec-dark) .safelist b,
.sec-mint .safelist b{color:var(--green-deep)}
.sec:not(.sec-dark) .safelist li,
.sec-mint .safelist li{border-color:var(--line)}
.sec:not(.sec-dark) .safelist .tk,
.sec-mint .safelist .tk{color:var(--green)}
.sec:not(.sec-dark) .crisis,
.sec-mint .crisis{background:#fff; border-color:var(--line)}
.sec:not(.sec-dark) .crisis p,
.sec-mint .crisis p{color:var(--muted)}
.sec:not(.sec-dark) .crisis b,
.sec-mint .crisis b{color:var(--green-deep)}

/* --- related-pages internal linking strip --------------------------------- */
.related{border-top:1px solid var(--line); padding:56px 0 0; margin-top:8px}
.related h3{font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 24px}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:900px){.related-grid{grid-template-columns:1fr}}
.related-grid a{
  display:block; padding:24px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.related-grid a:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--leaf)}
.related-grid b{display:block; font-size:18px; letter-spacing:-.015em; color:var(--green-deep); margin-bottom:6px}
.related-grid span{display:block; font-size:14.5px; line-height:1.55; color:var(--muted)}
.related-grid .go{display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:14px; font-weight:500; color:var(--green)}
.sec-more{margin:34px 0 0}
.sec-more a{display:inline-flex; align-items:center; gap:8px; font-weight:500;
  color:var(--green); border-bottom:1.5px solid rgba(4,194,128,.35); padding-bottom:2px}
.sec-more a:hover{border-color:var(--green)}
.sec-dark .sec-more a{color:var(--green-glow); border-color:rgba(4,194,128,.45)}

/* --- feature page hero: text + visual, properly aligned -------------------- */
.fhero{position:relative; overflow:hidden;
  padding-top:clamp(126px,12vw,150px); padding-bottom:clamp(56px,6vw,92px)}
.fhero .wrap{position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,4.5vw,72px); align-items:center}
.fhero h1{margin:22px 0 20px; letter-spacing:-.035em; max-width:15ch}
.fhero .lede{max-width:46ch}
.fhero .hero-cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px}
.fhero-vis{position:relative; display:flex; justify-content:center; align-items:center; min-height:420px}
.fhero-vis .device{width:min(286px,68%); position:relative; z-index:2}
.fhero-glow{position:absolute; inset:auto; width:min(430px,92%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(4,194,128,.28) 0%, rgba(4,194,128,0) 68%); z-index:1}
.fhero-chip{position:absolute; z-index:3; background:#fff; border-radius:16px; padding:12px 16px;
  box-shadow:0 18px 40px -18px rgba(0,51,33,.34); display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:500; color:var(--green-deep); max-width:230px; line-height:1.35}
.fhero-chip .ci{width:32px; height:32px; flex:0 0 32px; border-radius:10px; background:var(--mint);
  color:var(--green); display:flex; align-items:center; justify-content:center}
.fhero-chip.c-tl{left:0; top:6%}
.fhero-chip.c-br{right:0; bottom:8%}
@media(max-width:940px){
  .fhero .wrap{grid-template-columns:1fr; gap:36px}
  .fhero h1{max-width:none}
  .fhero-vis{min-height:0; order:2}
  .fhero-vis .device{width:min(268px,72%)}
  .fhero-chip{display:none}
}
/* photo band inside feature pages */
.photo-shot{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); width:100%; max-width:100%; margin:0}
.photo-shot img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
@media(max-width:940px){.photo-shot img{aspect-ratio:16/10}}
.feat-grid>*{min-width:0}
.feat-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4vw,66px); align-items:center}
@media(max-width:940px){.feat-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   VISUAL UPGRADE LAYER — patterns, watermarks, icons, refined typography
   Additive only: no section, copy or layout is removed by anything below.
   ========================================================================== */

/* ---------- 1. refined typography ---------------------------------------- */
.sec h2,.hero h1,.phero h1{letter-spacing:-.034em}
.sec h2{line-height:1.08}
.head.mid h2{max-width:20ch; margin-inline:auto}
.sec .lede{line-height:1.62}
.tag{
  letter-spacing:.02em; font-weight:500;
  backdrop-filter:saturate(1.2);
}
/* eyebrow rule under section headings in centred heads */
.head.mid::after{
  content:""; display:block; width:52px; height:3px; margin:26px auto 0;
  border-radius:3px; background:linear-gradient(90deg,var(--green),var(--leaf));
  opacity:.85;
}
.sec-dark .head.mid::after{background:linear-gradient(90deg,var(--green-glow),rgba(255,255,255,.35))}
/* small-caps eyebrow for card headings */
.bx h3{letter-spacing:-.018em}
.related h3{position:relative; padding-left:22px}
.related h3::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg,var(--green),var(--leaf));
}

/* ---------- 2. section background system --------------------------------- */
.sec{position:relative; isolation:isolate; overflow-x:clip}
.sec > .wrap{position:relative; z-index:2}

/* soft brand aura, alternating side */
.sec.aura::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(760px,74vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(4,194,128,.13) 0%, rgba(4,194,128,0) 68%);
  top:-18%; right:-16%;
}
.sec.aura.aura-l::before{right:auto; left:-16%; top:auto; bottom:-20%;}
.sec-dark.aura::before{background:radial-gradient(circle, rgba(4,194,128,.20) 0%, rgba(4,194,128,0) 68%)}

/* dotted grid texture */
.sec.dots::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,51,33,.075) 1.1px, transparent 1.1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 44%, #000 30%, transparent 76%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 44%, #000 30%, transparent 76%);
  opacity:.85;
}
.sec-dark.dots::after{background-image:radial-gradient(rgba(255,255,255,.12) 1.1px, transparent 1.1px)}

/* hairline top rule to separate stacked light sections */
.sec.ruled{border-top:1px solid var(--line)}

/* ---------- 3. logo watermark -------------------------------------------- */
.wm{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:min(420px,42vw); opacity:.052; filter:grayscale(1);
}
.wm.tr{right:-70px; top:-40px}
.wm.bl{left:-80px; bottom:-60px; transform:scaleX(-1)}
.wm.c{left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,58vw); opacity:.04}
.sec-dark .wm{opacity:.075; filter:none}
.sec-mint .wm{opacity:.06}
@media(max-width:760px){.wm{width:min(300px,66vw); opacity:.045}}

/* leaf pattern band */
.leafband{
  position:absolute; z-index:0; pointer-events:none; opacity:.5;
  width:min(300px,34vw);
}
.leafband.r{right:-56px; top:8%}
.leafband.l{left:-64px; bottom:6%; transform:scaleX(-1)}
.sec-dark .leafband{opacity:.16; filter:brightness(3)}

/* ---------- 4. numbered / icon-led list cards ---------------------------- */
.bento .bx,.cards3 .bx{position:relative; overflow:hidden}
.bento .bx::after,.cards3 .bx::after{
  content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,rgba(4,194,128,.10),transparent 70%);
  pointer-events:none;
}
.sec-dark .bx::after{background:radial-gradient(circle,rgba(4,194,128,.20),transparent 70%)}

/* icon chip that sits above a card heading */
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; margin-bottom:18px;
  background:linear-gradient(145deg,rgba(4,194,128,.16),rgba(4,194,128,.06));
  color:var(--green); border:1px solid rgba(4,194,128,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.sec-dark .ico{
  background:linear-gradient(145deg,rgba(4,194,128,.26),rgba(255,255,255,.05));
  color:var(--green-glow); border-color:rgba(4,194,128,.3); box-shadow:none;
}
.ico svg{width:22px; height:22px}

/* numbered variant for step/reason grids */
.bx.num{padding-top:30px}
.bx.num .nm{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:12px; margin-bottom:16px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  background:var(--green-deep); color:#fff;
}
.sec-mint .bx.num .nm{background:var(--green)}
.sec-dark .bx.num .nm{background:var(--green-glow); color:var(--green-deep)}

/* ---------- 5. safelist / checklists get real weight --------------------- */
.safelist li{position:relative; transition:transform .4s var(--ease-out)}
.safelist li:hover{transform:translateX(3px)}
.safelist .tk{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:9px; flex:0 0 26px;
  background:rgba(4,194,128,.13); color:var(--green);
}
.sec-dark .safelist .tk{background:rgba(4,194,128,.24); color:var(--green-glow)}

/* ---------- 6. FAQ polish ------------------------------------------------ */
.fq summary{letter-spacing:-.012em}
.faqlist{position:relative; z-index:2}

/* ---------- 7. stat cards ------------------------------------------------ */
.stat-bx{position:relative; overflow:hidden}
.stat-bx::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg,rgba(4,194,128,.09),transparent 58%);
  pointer-events:none;
}
.stat-bx > *{position:relative; z-index:1}

/* ---------- 8. related cards get an arrow flourish ----------------------- */
.related-grid a{position:relative; overflow:hidden}
.related-grid a::after{
  content:""; position:absolute; right:-24px; bottom:-24px; width:90px; height:90px;
  border-radius:50%; background:radial-gradient(circle,rgba(4,194,128,.12),transparent 70%);
  transition:transform .5s var(--ease-out);
}
.related-grid a:hover::after{transform:scale(1.35)}
/* 4-item point grids sit evenly instead of leaving an orphan card */
.bento.b4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento.b4 .bx{grid-column:auto}
@media(max-width:1080px){.bento.b4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bento.b4{grid-template-columns:1fr}}

/* ============================================================================
   MOTION LAYER — site-wide animation
   Every effect below is disabled under prefers-reduced-motion (block at end).
   ========================================================================== */

/* 1 · scroll progress bar ---------------------------------------------------- */
#scrollbar{position:fixed; left:0; top:0; height:3px; z-index:9999; width:0;
  background:linear-gradient(90deg,var(--green),var(--green-glow),#7BE8C0);
  box-shadow:0 0 12px rgba(4,194,128,.5); transition:width .12s linear; pointer-events:none}

/* 2 · animated counters ------------------------------------------------------ */
.stat-bx b{font-variant-numeric:tabular-nums}

/* 3 · card lift + sheen ------------------------------------------------------ */
.bx,.ecard,.related-grid a{position:relative; overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s ease, border-color .4s ease}
.bx:hover,.ecard:hover{transform:translateY(-6px); box-shadow:var(--sh-3)}
.bx::after,.related-grid a::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none}
.bx:hover::after,.related-grid a:hover::after{animation:sheen 1s var(--ease-out) forwards}
@keyframes sheen{0%{left:-70%;opacity:1}100%{left:130%;opacity:0}}
.sec-dark .bx::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}

/* 4 · photo ken-burns on hover ---------------------------------------------- */
.photo-shot img,.ecard .im img{transition:transform 1.4s var(--ease-out)}
.photo-shot:hover img,.ecard:hover .im img{transform:scale(1.055)}

/* 5 · floating hero device + chips ------------------------------------------ */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fhero-vis .device{animation:floatY 7.5s ease-in-out infinite}
.fhero-chip{animation:floatY2 6s ease-in-out infinite}
.fhero-chip.c-br{animation-delay:-3s}
.fhero-glow{animation:glowPulse 8s ease-in-out infinite}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}

/* 6 · chips + pops entrance -------------------------------------------------- */
.fhero-chip{opacity:0; animation:floatY2 6s ease-in-out infinite, chipIn .9s var(--ease-out) forwards}
.fhero-chip.c-tl{animation-delay:0s, 1.05s}
.fhero-chip.c-br{animation-delay:-3s, 1.35s}
@keyframes chipIn{from{opacity:0; transform:translateY(16px) scale(.94)}to{opacity:1}}

/* 7 · check marks draw in ---------------------------------------------------- */
.safelist li{transition:transform .45s var(--ease-out), border-color .4s ease}
.safelist li:hover{transform:translateX(5px)}
.safelist .tk svg path{stroke-dasharray:26; stroke-dashoffset:26;
  transition:stroke-dashoffset .75s var(--ease-out)}
.safelist.in .tk svg path,[data-reveal].in .tk svg path{stroke-dashoffset:0}
.safelist li:nth-child(2) .tk svg path{transition-delay:.13s}
.safelist li:nth-child(3) .tk svg path{transition-delay:.26s}
.safelist li:nth-child(4) .tk svg path{transition-delay:.39s}

/* 8 · buttons: shine + arrow travel ------------------------------------------ */
.btn{position:relative; overflow:hidden}
.btn::before{content:""; position:absolute; inset:0; left:-80%; width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-20deg); opacity:0}
.btn:hover::before{animation:sheen .85s var(--ease-out) forwards}
.btn .arw,.more .arw,.sec-more .arw{transition:transform .4s var(--ease-out)}
.btn:hover .arw,.more:hover .arw,.sec-more a:hover .arw{transform:translateX(5px)}

/* 9 · tag pulse dot ---------------------------------------------------------- */
.tag .dot{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(4,194,128,.5)}
  55%{box-shadow:0 0 0 7px rgba(4,194,128,0)}}

/* 10 · headline gradient sweep on the green span ----------------------------- */
h1 .g,h2 .g{background:linear-gradient(96deg,var(--green) 20%,#3FE0A6 42%,var(--green) 64%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation:gsweep 9s ease-in-out infinite}
@keyframes gsweep{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* 11 · section reveal: lift + soft blur -------------------------------------- */
[data-reveal]{filter:blur(6px)}
[data-reveal].in{filter:blur(0)}
[data-reveal]{transition-property:opacity,transform,filter}

/* 12 · nav underline sweep --------------------------------------------------- */
header nav>a{position:relative}
header nav>a::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--green); border-radius:2px; transition:right .4s var(--ease-out)}
header nav>a:hover::after{right:0}

/* 13 · footer + social icons ------------------------------------------------- */
.soc a{transition:transform .4s var(--ease-out), background .3s ease}
.soc a:hover{transform:translateY(-4px) rotate(-6deg)}
footer ul li a{display:inline-block; transition:transform .35s var(--ease-out), color .3s ease}
footer ul li a:hover{transform:translateX(4px)}

/* 14 · device tilt following the pointer (JS sets --rx/--ry) ------------------ */
.tilt{transform-style:preserve-3d; will-change:transform}
.tilt .device,.tilt.device{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ---- honour reduced motion: switch the whole layer off --------------------- */
@media(prefers-reduced-motion:reduce){
  #scrollbar{display:none}
  .fhero-vis .device,.fhero-chip,.fhero-glow,.tag .dot,h1 .g,h2 .g{animation:none !important}
  .fhero-chip{opacity:1}
  h1 .g,h2 .g{background:none; -webkit-text-fill-color:currentColor; color:var(--green)}
  [data-reveal]{filter:none !important}
  .bx:hover,.ecard:hover,.related-grid a:hover,.safelist li:hover,.soc a:hover,
  footer ul li a:hover,.photo-shot:hover img,.ecard:hover .im img{transform:none !important}
  .bx::after,.btn::before,.related-grid a::after{display:none}
  .safelist .tk svg path{stroke-dashoffset:0 !important}
  .tilt .device,.tilt.device{transform:none !important}
}
/* gradient headline: brighter ramp on dark sections for contrast */
.sec-dark h1 .g,.sec-dark h2 .g,.fold-dark h2 .g,.cta h2 .g{
  background:linear-gradient(96deg,#7BE8C0 20%,#CFFAE8 42%,#7BE8C0 64%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text}

/* ---- FIX: stat counters were being shrunk by a descendant selector --------
   `.statc span` (v4) also matched the <span data-count> nested inside <b>,
   rendering the number at 15px body colour instead of the 56px display green.
   Scope the label rule to direct children and let the counter inherit.        */
.statc > span{display:block; margin-top:12px; font-size:15px; color:var(--body)}
.statc b > span,
.statc b span[data-count]{
  display:inline; margin:0; font-size:inherit; color:inherit;
  font-weight:inherit; letter-spacing:inherit; line-height:inherit;
  font-variant-numeric:tabular-nums;
}
.statc b{font-variant-numeric:tabular-nums}
.sec-dark .statc > span{color:#BFE4D4}
/* tabular figures everywhere numbers are displayed, so counting doesn't jitter */
.stat b,.stat-bx b,.cd b,.cd-num,[data-count]{font-variant-numeric:tabular-nums}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* skip-to-content link (keyboard users) */
.skip-link{position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--green-deep); color:#fff; padding:12px 20px; border-radius:0 0 12px 0; font-weight:500}
.skip-link:focus{left:0}
#main{scroll-margin-top:120px}

/* --------------------------------- touch targets (mobile a11y floor: 32px+) */
@media(hover:none),(max-width:820px){
  #ann .ann-x{padding:12px; margin:-8px}
  footer ul li a,footer .crow a,.foot-bot nav a,.foot-bot a{
    display:inline-block; padding-block:7px;
  }
  .mob a,#mob a{padding-block:12px}
  .more,.sec-more a,.mail-link,.ledger-row a{display:inline-block; padding-block:7px}
  .related-grid .go{padding-block:6px}
  /* carousel/rotator dots: pad the hit area without changing the visual dot */
  .dots button,.qdots button,[aria-label^="Show message"],[aria-label^="Quote "]{
    position:relative;
  }
  .dots button::after,.qdots button::after,
  [aria-label^="Show message"]::after,[aria-label^="Quote "]::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:44px; height:44px;
  }
  /* email links in cards and ledgers */
  a[href^="mailto:"]{display:inline-block; padding-block:7px}
}

/* ============================ FLOATING ACTION BUTTON ====================== */
.fab-wrap{position:fixed; right:24px; bottom:24px; z-index:900;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.94);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s}
.fab-wrap.show{opacity:1; visibility:visible; transform:none}
.fab{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0;
  padding:15px 22px; border-radius:999px; font:inherit; font-weight:600; font-size:15px;
  color:#fff; background:linear-gradient(120deg,var(--green) 0%,#00A86B 55%,var(--green) 100%);
  background-size:200% 100%; box-shadow:0 16px 34px -12px rgba(0,90,58,.55), 0 4px 10px rgba(0,51,33,.18);
  transition:transform .45s var(--ease-out), box-shadow .45s ease, background-position .7s ease;
  position:relative; overflow:hidden;
}
.fab:hover{transform:translateY(-3px) scale(1.03); background-position:100% 0;
  box-shadow:0 22px 44px -12px rgba(0,90,58,.62)}
.fab:active{transform:translateY(-1px) scale(.99)}
.fab::after{content:""; position:absolute; inset:-3px; border-radius:999px;
  border:2px solid rgba(4,194,128,.55); opacity:0; animation:fabRing 3.4s ease-out infinite}
@keyframes fabRing{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
.fab-ico{display:flex; transition:transform .4s var(--ease-out), opacity .3s ease}
.fab-close{position:absolute; left:22px; opacity:0; transform:rotate(-90deg) scale(.6)}
.fab-wrap.open .fab-open{opacity:0; transform:rotate(90deg) scale(.6)}
.fab-wrap.open .fab-close{opacity:1; transform:none}
.fab-wrap.open .fab-label{opacity:0; max-width:0; margin-left:0}
.fab-label{white-space:nowrap; transition:opacity .35s ease, max-width .45s var(--ease-out); max-width:200px}
.fab-wrap.open .fab::after{animation:none}

.fab-menu{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.fab-item{
  display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:13px 18px; max-width:290px; text-align:left;
  box-shadow:0 18px 40px -18px rgba(0,51,33,.34);
  opacity:0; transform:translateY(12px) scale(.96);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.fab-wrap.open .fab-item{opacity:1; transform:none}
.fab-wrap.open .fab-item:nth-child(1){transition-delay:.04s}
.fab-wrap.open .fab-item:nth-child(2){transition-delay:.1s}
.fab-wrap.open .fab-item:nth-child(3){transition-delay:.16s}
.fab-item:hover{transform:translateX(-4px); border-color:var(--leaf); box-shadow:var(--sh-3)}
.fab-item .fi{width:36px; height:36px; flex:0 0 36px; border-radius:11px; background:var(--mint);
  color:var(--green); display:flex; align-items:center; justify-content:center}
.fab-item b{display:block; font-size:14.5px; color:var(--green-deep); line-height:1.25}
.fab-item span span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35}

@media(max-width:600px){
  .fab-wrap{right:16px; bottom:16px; left:16px; align-items:flex-end}
  .fab{padding:14px 20px}
  .fab-label{font-size:14px}
  .fab-item{max-width:none; width:100%}
}
/* keep the back-to-top control clear of the floating action button */
#top-btn{right:auto !important; left:24px !important}
@media(max-width:600px){#top-btn{left:16px !important; bottom:16px !important}}

@media(prefers-reduced-motion:reduce){
  .fab-wrap{transition:none}
  .fab::after{animation:none; display:none}
  .fab:hover,.fab-item:hover{transform:none !important}
  .fab-item{transition:opacity .2s linear}
}

/* ============================ BUTTON MOTION (all buttons) ================= */
.btn,.fab{--rip:0}
.btn{transition:transform .4s var(--ease-out), box-shadow .4s ease, background .35s ease, color .3s ease}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn-green:hover{box-shadow:0 18px 36px -14px rgba(0,90,58,.55)}
.btn-ghost:hover{border-color:var(--green); color:var(--green-deep)}
.btn-white:hover{box-shadow:0 18px 36px -16px rgba(0,0,0,.35)}
/* click ripple */
.ripple{position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.45); animation:rippleGo .65s var(--ease-out) forwards}
.btn-ghost .ripple,.btn-white .ripple{background:rgba(4,194,128,.28)}
@keyframes rippleGo{to{transform:scale(2.6); opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ripple{display:none}
  .btn:hover,.btn:active{transform:none !important}
}
@media(max-width:820px){
  .nav-logo{height:62px}
  .nav.stuck .nav-logo{height:54px}
  .foot-lock img{height:86px}
}
@media(max-width:420px){ .nav-logo,.nav.stuck .nav-logo{height:54px} }

/* ================================ INSTAGRAM RAIL ========================== */
.ig-sec{overflow:hidden}
.ig-rail{margin:44px 0 40px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ig-track{display:flex; gap:18px; width:max-content; animation:igScroll 52s linear infinite}
.ig-rail:hover .ig-track,.ig-rail:focus-within .ig-track{animation-play-state:paused}
@keyframes igScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ig-tile{position:relative; flex:0 0 auto; width:248px; aspect-ratio:4/5; border-radius:20px;
  overflow:hidden; box-shadow:var(--sh-2); background:var(--mint);
  transition:transform .55s var(--ease-out), box-shadow .45s ease}
.ig-tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out)}
.ig-tile:hover{transform:translateY(-8px) scale(1.02); box-shadow:var(--sh-4); z-index:2}
.ig-tile:hover img{transform:scale(1.08)}
.ig-tile::after{content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(180deg,rgba(0,51,33,0) 35%,rgba(0,51,33,.62));
  transition:opacity .45s ease}
.ig-tile:hover::after{opacity:1}
.ig-ov{position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.8); z-index:3;
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:opacity .4s ease, transform .5s var(--ease-out)}
.ig-tile:hover .ig-ov{opacity:1; transform:translate(-50%,-50%) scale(1)}
.ig-play{position:absolute; right:12px; top:12px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.42); backdrop-filter:blur(4px); color:#fff;
  display:flex; align-items:center; justify-content:center}
.ig-play svg{margin-left:2px}
.ig-cta{display:flex; justify-content:center}
.btn-ig{
  color:var(--green-deep); gap:11px; padding:16px 30px; font-weight:600;
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  box-shadow:0 10px 26px -14px rgba(0,51,33,.28);
  transition:transform .45s var(--ease-out), box-shadow .45s ease, border-color .35s ease}
.btn-ig .ig-glyph{
  width:30px; height:30px; border-radius:9px; flex:0 0 30px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,#F58529,#DD2A7B 46%,#8134AF 74%,#515BD4);
  transition:transform .5s var(--ease-out)}
.btn-ig:hover{color:var(--green-deep); transform:translateY(-3px); border-color:var(--leaf);
  box-shadow:0 20px 40px -16px rgba(0,51,33,.34)}
.btn-ig:hover .ig-glyph{transform:rotate(-8deg) scale(1.06)}
.btn-ig .arw{color:var(--green)}
@media(max-width:640px){
  .ig-tile{width:184px; border-radius:16px}
  .ig-track{gap:12px; animation-duration:40s}
  .ig-rail{margin:32px 0 30px}
}
@media(prefers-reduced-motion:reduce){
  .ig-track{animation:none; width:100%; flex-wrap:wrap; justify-content:center}
  .ig-tile{width:min(200px,44%)}
  .ig-tile:hover,.ig-tile:hover img{transform:none !important}
  .ig-track > .ig-tile:nth-child(n+9){display:none}
}

/* ===================== DIRECTIONAL REVEALS (left ⇄ right) ================= */
[data-reveal="left"]{transform:translateX(-46px)}
[data-reveal="right"]{transform:translateX(46px)}
[data-reveal="left"].in,[data-reveal="right"].in{transform:none}

/* Auto-direction: in any 2-column grid the first child enters from the left and
   the second from the right, so every split section has a sweep. */
.feat-grid > [data-reveal]:nth-child(1):not(.in),
.wh-grid  > [data-reveal]:nth-child(1):not(.in),
.who-grid > [data-reveal]:nth-child(1):not(.in){transform:translateX(-44px)}
.feat-grid > [data-reveal]:nth-child(2):not(.in),
.wh-grid  > [data-reveal]:nth-child(2):not(.in),
.who-grid > [data-reveal]:nth-child(2):not(.in){transform:translateX(44px)}
.feat-grid > *,.wh-grid > *,.who-grid > *{
  transition:transform 1s var(--ease-out), opacity .9s ease, filter .9s ease}

/* Card grids: each card slides in from the left, staggered */
.bento:not(.in) > *:not(.in),
.cards3:not(.in) > *:not(.in),
.related-grid:not(.in) > *:not(.in){transform:translateX(-30px)}
.bento.in > *,.cards3.in > *,.related-grid.in > *,
[data-reveal].in .bento > *,[data-reveal].in .cards3 > *,[data-reveal].in .related-grid > *{transform:none}
.bento > *,.cards3 > *,.related-grid > *{
  transition:transform .9s var(--ease-out), opacity .8s ease; opacity:1}
[data-reveal].in > .bento > *,[data-reveal].in > .cards3 > *,
.bento.in > *,.cards3.in > *,.related.in .related-grid > *{transform:none; opacity:1}
.bento > *:nth-child(2),.cards3 > *:nth-child(2),.related-grid > *:nth-child(2){transition-delay:.1s}
.bento > *:nth-child(3),.cards3 > *:nth-child(3),.related-grid > *:nth-child(3){transition-delay:.2s}
.bento > *:nth-child(4),.cards3 > *:nth-child(4){transition-delay:.3s}
.bento > *:nth-child(5){transition-delay:.4s}

/* Feature list rows sweep in from the left, one after another */
.safelist li:not(.in){transform:translateX(-24px); opacity:0}
.safelist li{transition:transform .8s var(--ease-out), opacity .7s ease}
.safelist.in li,[data-reveal].in .safelist li{transform:none; opacity:1}
.safelist.in li:nth-child(2),[data-reveal].in .safelist li:nth-child(2){transition-delay:.12s}
.safelist.in li:nth-child(3),[data-reveal].in .safelist li:nth-child(3){transition-delay:.24s}
.safelist.in li:nth-child(4),[data-reveal].in .safelist li:nth-child(4){transition-delay:.36s}

/* On mobile everything sweeps horizontally — it reads better in a narrow column */
@media(max-width:820px){
  [data-reveal="up"]{transform:translateX(-32px)}
  [data-reveal="scale"]{transform:translateX(32px) scale(.985)}
  [data-reveal].in{transform:none}
  .feat-grid > [data-reveal]:nth-child(1):not(.in),.wh-grid > [data-reveal]:nth-child(1):not(.in),
  .who-grid > [data-reveal]:nth-child(1):not(.in){transform:translateX(-32px)}
  .feat-grid > [data-reveal]:nth-child(2):not(.in),.wh-grid > [data-reveal]:nth-child(2):not(.in),
  .who-grid > [data-reveal]:nth-child(2):not(.in){transform:translateX(32px)}
}

@media(prefers-reduced-motion:reduce){
  [data-reveal="left"],[data-reveal="right"],
  .feat-grid > *,.wh-grid > *,.who-grid > *,
  .bento > *,.cards3 > *,.related-grid > *,.safelist li{
    transform:none !important; opacity:1 !important; transition:none !important}
}

/* ============================================================================
   ANIMATED BACKGROUNDS + TEXT MOTION
   All of it disabled under prefers-reduced-motion (block at the end).
   ========================================================================== */

/* 1 · drifting aurora orbs behind light sections ---------------------------- */
.sec,.hero,.ig-sec{position:relative}
.sec > .wrap,.hero > .wrap,.ig-sec > .wrap,.ig-rail{position:relative; z-index:2}
.aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aurora span{position:absolute; display:block; border-radius:50%; filter:blur(60px); opacity:.5}
.aurora .o1{width:44vw; height:44vw; max-width:560px; max-height:560px; left:-12%; top:-18%;
  background:radial-gradient(circle,rgba(4,194,128,.34),rgba(4,194,128,0) 68%);
  animation:orbA 26s ease-in-out infinite}
.aurora .o2{width:38vw; height:38vw; max-width:480px; max-height:480px; right:-10%; bottom:-16%;
  background:radial-gradient(circle,rgba(0,158,102,.28),rgba(0,158,102,0) 68%);
  animation:orbB 32s ease-in-out infinite}
.aurora .o3{width:26vw; height:26vw; max-width:340px; max-height:340px; left:46%; top:34%;
  background:radial-gradient(circle,rgba(123,232,192,.3),rgba(123,232,192,0) 70%);
  animation:orbC 38s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(9vw,5vh,0) scale(1.14)}66%{transform:translate3d(3vw,12vh,0) scale(.92)}}
@keyframes orbB{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-8vw,-7vh,0) scale(1.18)}75%{transform:translate3d(-3vw,4vh,0) scale(.95)}}
@keyframes orbC{0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.35}
  50%{transform:translate3d(-11vw,8vh,0) scale(1.2); opacity:.55}}
.sec-dark .aurora span,.cta .aurora span{opacity:.4; filter:blur(70px)}
.sec-dark .aurora .o1{background:radial-gradient(circle,rgba(4,194,128,.5),rgba(4,194,128,0) 66%)}
.sec-dark .aurora .o2{background:radial-gradient(circle,rgba(123,232,192,.34),rgba(123,232,192,0) 66%)}

/* 2 · slow drifting leaf field ---------------------------------------------- */
.leaffield{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:.5}
.leaffield i{position:absolute; width:16px; height:16px; border-radius:60% 0 60% 0;
  background:var(--leaf); opacity:.4; animation:leafDrift linear infinite}
.sec-dark .leaffield i{background:rgba(123,232,192,.4)}
@keyframes leafDrift{
  0%{transform:translate3d(0,110%,0) rotate(0deg); opacity:0}
  12%{opacity:.45}
  88%{opacity:.32}
  100%{transform:translate3d(42px,-120%,0) rotate(220deg); opacity:0}}

/* 3 · animated mesh in the hero --------------------------------------------- */
.hero-mesh{animation:meshShift 24s ease-in-out infinite; background-size:150% 150%}
@keyframes meshShift{0%,100%{background-position:0% 0%}50%{background-position:100% 60%}}

/* 4 · shimmering top hairline on every section ------------------------------ */
.sec-mint::before,.sec-dark::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(4,194,128,.55),transparent);
  background-size:220% 100%; animation:lineSweep 7s linear infinite}
@keyframes lineSweep{0%{background-position:200% 0}100%{background-position:-40% 0}}

/* 5 · TEXT: word-by-word rise (applied by JS to headings) -------------------- */
.tw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em}
.tw > i{display:inline-block; font-style:inherit; transform:translateY(108%);
  transition:transform .95s var(--ease-out), opacity .7s ease; opacity:.35}
.in .tw > i,.tw.in > i{transform:none; opacity:1}
h2 .tw:nth-child(2) > i{transition-delay:.06s}
h2 .tw:nth-child(3) > i{transition-delay:.12s}
h2 .tw:nth-child(4) > i{transition-delay:.18s}
h2 .tw:nth-child(5) > i{transition-delay:.24s}
h2 .tw:nth-child(6) > i{transition-delay:.3s}
h2 .tw:nth-child(n+7) > i{transition-delay:.36s}

/* 6 · lede text fades up softly after its heading ---------------------------- */
.lede{transition:opacity .9s ease .12s, transform .9s var(--ease-out) .12s}

/* 7 · accent underline that draws itself under key spans -------------------- */
h2 .g{position:relative}
h2 .g::after{content:""; position:absolute; left:0; bottom:-.08em; height:3px; width:100%;
  background:linear-gradient(90deg,var(--green),rgba(4,194,128,0));
  border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out) .35s}
[data-reveal].in h2 .g::after,.in h2 .g::after{transform:scaleX(1)}

/* 8 · tag chips pop in ------------------------------------------------------ */
.tag{transition:transform .7s var(--ease-out), opacity .6s ease}
[data-reveal]:not(.in) .tag,.tag[data-reveal]:not(.in){transform:translateY(10px) scale(.94)}

@media(prefers-reduced-motion:reduce){
  .aurora,.leaffield{display:none}
  .hero-mesh,.sec-mint::before,.sec-dark::before{animation:none}
  .tw > i{transform:none !important; opacity:1 !important; transition:none}
  h2 .g::after{transform:scaleX(1) !important; transition:none}
  .tag{transform:none !important}
}

/* ================================ ARTICLE PAGES =========================== */
.art-hero{padding-top:clamp(126px,12vw,150px); padding-bottom:0}
.art-head{max-width:820px}
.crumbs{font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.crumbs a{color:var(--green); font-weight:500}
.crumbs a:hover{text-decoration:underline}
.art-hero h1{font-size:clamp(32px,4.2vw,58px); letter-spacing:-.035em; line-height:1.08; margin:0 0 20px}
.art-meta{display:flex; align-items:center; gap:14px; margin-top:26px; font-size:14px; color:var(--muted)}
.art-shot{margin:44px 0 0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3)}
.art-shot img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.art-body .narrow{max-width:720px}
.art-body p{font-size:17.5px; line-height:1.75; color:#33544A; margin:0 0 22px}
.art-body h2{font-size:clamp(23px,2.3vw,32px); letter-spacing:-.025em; margin:44px 0 18px; color:var(--green-deep)}
.art-list{margin:0 0 24px; padding:0; list-style:none}
.art-list li{position:relative; padding:12px 0 12px 30px; border-bottom:1px solid var(--line);
  font-size:16.5px; line-height:1.6; color:#33544A}
.art-list li::before{content:""; position:absolute; left:6px; top:21px; width:8px; height:8px;
  border-radius:50%; background:var(--green)}
.art-pull{margin:34px 0; padding:26px 30px; border-left:4px solid var(--green);
  background:var(--mint); border-radius:0 var(--r) var(--r) 0}
.art-pull p{margin:0; font-size:19px; line-height:1.55; font-weight:500; color:var(--green-deep)}
.art-note{margin:40px 0 0; padding:22px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:#F7FBF9}
.art-note p{font-size:15px; line-height:1.65; margin:0; color:var(--muted)}
.art-note b{color:var(--green-deep)}
.art-cta{margin:52px 0 0; padding:40px; border-radius:var(--r-xl); background:var(--mint); text-align:center}
.art-cta h2{margin:0 0 14px}
.art-cta .lede{margin:0 auto 26px; max-width:46ch}
@media(max-width:640px){
  .art-body p{font-size:16.5px}
  .art-cta{padding:30px 22px}
  .art-pull{padding:22px}
}

/* ================================ POLICY PAGES ============================ */
.policy-hero{padding-bottom:clamp(30px,4vw,48px)}
.policy-head{max-width:760px}
.policy-hero h1{font-size:clamp(34px,4.4vw,62px); margin:20px 0 18px}
.policy-date{margin-top:22px; font-size:14px; color:var(--muted)}
.policy-body .narrow{max-width:760px}
.policy-body h2{font-size:clamp(21px,2.1vw,29px); letter-spacing:-.022em; margin:42px 0 16px; color:var(--green-deep)}
.policy-body p{font-size:16.5px; line-height:1.72; color:#33544A; margin:0 0 20px}
.policy-body .art-list li{font-size:16px}
.draft-banner{background:#FDF1EE; border:1px solid #F0CFC4; border-left:5px solid #C0492E;
  border-radius:var(--r); padding:20px 24px; margin:0 0 34px; font-size:15px; line-height:1.65; color:#7A3524}
.draft-banner b{color:#A5301A; display:block; margin-bottom:6px; letter-spacing:.02em}
.draft-banner code{background:rgba(160,48,26,.1); padding:1px 6px; border-radius:5px; font-size:13.5px}
.tc{display:inline-block; background:#FFF4D6; border:1px dashed #D9A521; color:#7A5A05;
  padding:2px 9px; border-radius:6px; font-size:14px; font-weight:500}

/* ============================ SCREEN GALLERY (feature pages) ============== */
.screens{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.screens .device{width:min(258px,84%); margin:0}
.screens figure{margin:0; text-align:center; max-width:270px}
.screens figcaption{margin-top:16px; font-size:14.5px; color:var(--muted); line-height:1.5}
.screens figcaption b{display:block; color:var(--green-deep); font-size:16px; margin-bottom:4px}
.screens .device{transition:transform .7s var(--ease-out), box-shadow .5s ease}
.screens figure:hover .device{transform:translateY(-10px)}
.screens figure:nth-child(2) .device{animation-delay:-2.4s}
.screens figure:nth-child(3) .device{animation-delay:-4.8s}
@media(max-width:900px){.screens{gap:18px}.screens .device{width:min(220px,80%)}}
@media(max-width:560px){.screens figure{max-width:none; width:100%}.screens .device{width:min(240px,72%)}}

/* people strip */
.people{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px}
@media(max-width:900px){.people{grid-template-columns:1fr 1fr}}
.people figure{margin:0; position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh-2); aspect-ratio:3/4}
.people img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease-out)}
.people figure:hover img{transform:scale(1.07)}
.people figcaption{position:absolute; left:0; right:0; bottom:0; padding:16px 16px 14px;
  background:linear-gradient(0deg,rgba(0,51,33,.86),rgba(0,51,33,0));
  color:#fff; font-size:13.5px; line-height:1.4; font-weight:500}

/* ================================ SEO / ANSWER PAGES ====================== */
.answer{background:var(--mint); border:1px solid var(--leaf); border-radius:var(--r-lg);
  padding:30px 34px; margin:0 auto; max-width:780px; position:relative}
.answer h2{font-size:clamp(19px,1.7vw,23px); margin:0 0 12px; letter-spacing:-.02em}
.answer p{margin:0; font-size:17px; line-height:1.62; color:var(--ink)}
.answer p+p{margin-top:12px}
.answer .src{margin-top:16px; font-size:13.5px; color:var(--muted)}
.prose{max-width:780px; margin:0 auto}
.prose h2{margin:52px 0 16px; font-size:clamp(24px,2.3vw,32px); letter-spacing:-.025em}
.prose h3{margin:34px 0 10px; font-size:clamp(18px,1.7vw,21px); color:var(--green-deep)}
.prose p{margin:0 0 16px; line-height:1.72}
.prose ul{margin:0 0 18px; padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:28px; margin-bottom:10px; line-height:1.65}
.prose ul li::before{content:""; position:absolute; left:6px; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--green)}
.prose ol{margin:0 0 18px; padding-left:22px}
.prose ol li{margin-bottom:10px; line-height:1.65}
.prose a{color:var(--green); font-weight:500; border-bottom:1.5px solid rgba(4,194,128,.35)}
.prose a:hover{border-color:var(--green)}
.keyfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin:30px 0 8px}
@media(max-width:780px){.keyfacts{grid-template-columns:1fr}}
.keyfacts div{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px}
.keyfacts b{display:block; font-size:clamp(26px,2.6vw,34px); color:var(--green); letter-spacing:-.03em; line-height:1}
.keyfacts span{display:block; margin-top:8px; font-size:14px; color:var(--muted); line-height:1.5}
.crisis-note{background:#FDF1EE; border:1px solid #F3D9D1; border-left:4px solid #C4553A;
  border-radius:var(--r); padding:20px 24px; margin:26px 0}
.crisis-note p{margin:0; color:#6A3A2C; font-size:15px; line-height:1.6}
.crisis-note b{color:#8A2E1C}
.local-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
@media(max-width:820px){.local-list{grid-template-columns:1fr}}
.local-list a{display:block; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s}
.local-list a:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--leaf)}
.local-list b{display:block; color:var(--green-deep); font-size:17px; margin-bottom:4px}
.local-list span{font-size:14px; color:var(--muted)}
/* article byline */
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 0;
  font-size:14.5px; color:var(--muted)}
.byline b{color:var(--green-deep); font-weight:600}
.bl-cat{background:var(--mint); color:var(--green-deep); border-radius:999px;
  padding:5px 13px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
/* demo video — split layout, contained (never stretched) */
.video-col{display:flex; justify-content:center}
.vid-stage.vid-portrait{aspect-ratio:716/1274; width:min(330px,86%); margin-inline:auto}
.vid-stage .poster,.vid-stage video{object-fit:contain; background:#0B3B2A}
.vid-stage video{border-radius:inherit}

/* --- image aspect safety: never stretch a photo ------------------------- */
img{max-width:100%}
.who-grid img,.wh-grid img,.feat-grid img,.bento img,.cards3 img{height:auto}
/* founder portraits on About */
#founder img,#founder-note img{width:100%; height:auto; object-fit:cover; display:block}
#founder .who-grid > div,#founder-note .who-grid > div{min-width:0}
.portrait-img{border-radius:var(--r-xl); box-shadow:var(--sh-3);
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
#founder-note .portrait-img{aspect-ratio:4/5}
@media(max-width:940px){.portrait-img{aspect-ratio:3/2}}

/* ============================================================================
   FOLD FIT — keep standard sections inside one laptop viewport (~800px)
   Long-form content (articles, policies, card grids) is exempt: it must scroll.
   ========================================================================== */
.sec{padding:clamp(56px,5.4vw,84px) 0}
.head{margin-bottom:clamp(32px,3.4vw,48px)}
.fhero{padding-top:clamp(118px,10vw,132px); padding-bottom:clamp(40px,4vw,60px)}
.fhero-vis{min-height:0}
.fhero-vis .device{width:min(250px,60%)}
.fhero h1{margin:16px 0 14px}
.fhero .hero-cta{margin-top:22px}

/* Instagram rail: was the tallest repeated section on every page */
.ig-sec{padding-block:clamp(48px,4.6vw,70px)}
.ig-rail{margin:26px 0 24px}
.ig-tile{width:196px; border-radius:16px}
.ig-sec .head{margin-bottom:8px}

/* tighter rhythm inside split sections */
.feat-grid,.who-grid,.wh-grid{gap:clamp(28px,3.4vw,52px)}
.safelist{margin-top:22px !important}
.safelist li{padding-block:11px}
.screens{gap:20px}
.screens .device{width:min(210px,80%)}
.people figure{aspect-ratio:1/1}
.vetlist li{padding:12px 0}
.related{padding-top:40px}

/* content that is allowed to exceed a fold */
.art-body,.policy-body,.prose,.faqlist,.cards3,.bento{--fold-exempt:1}

@media(max-width:900px){
  .sec{padding:clamp(48px,7vw,72px) 0}
  .fhero{padding-top:clamp(112px,16vw,126px)}
}
/* final fold trim */
.ig-sec{padding-block:clamp(40px,3.8vw,56px)}
.ig-tile{width:174px}
.ig-rail{margin:22px 0 20px}
.ig-cta .btn-ig{padding:13px 26px}
/* About: portraits and long founder copy */
.portrait-img{aspect-ratio:1/1}
#founder-note .portrait-img{aspect-ratio:4/3}
#founder p,#founder-note p{font-size:15.5px; line-height:1.62}
#founder p+p,#founder-note p+p{margin-top:12px !important}
#our-story .stat-bx{padding:26px 20px}
#our-story .stat-bx b{font-size:clamp(32px,3.2vw,46px)}

/* ============================================================================
   FOOTER LAYOUT FIX
   The brand lockup (104px mark + 42px wordmark) overflowed its grid column and
   collided with the Explore links. Brand now spans its own full-width row, and
   the link columns get a sane minimum width instead of being squeezed to ~95px.
   ========================================================================== */
.foot-top{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
  gap:32px 28px;
  padding-bottom:48px;
}
.foot-top > div:first-child{
  grid-column:1 / -1;
  max-width:620px;
  margin-bottom:8px;
}
.foot-lock{gap:12px; margin-bottom:18px; flex-wrap:nowrap}
.foot-lock img{height:76px; width:auto; flex:0 0 auto}
.foot-lock .word{font-size:34px; line-height:1; white-space:nowrap}
.foot-lock .sub{font-size:13.5px; white-space:nowrap}
.foot-top ul li a{white-space:normal; hyphens:none}
.foot-top > div{min-width:0}
.foot-h{white-space:nowrap}

@media(max-width:1100px){
  .foot-top{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:28px 24px}
}
@media(max-width:760px){
  .foot-top{grid-template-columns:1fr 1fr; gap:26px 20px}
  .foot-lock img{height:64px}
  .foot-lock .word{font-size:28px}
  .foot-top > div:first-child{max-width:none}
}
@media(max-width:420px){
  .foot-top{grid-template-columns:1fr}
  .foot-lock img{height:58px}
  .foot-lock .word{font-size:26px}
}
/* long email addresses must not clip out of the last footer column */
.foot-top .crow{align-items:flex-start}
.foot-top .crow a,.foot-top .crow span{
  overflow-wrap:anywhere; word-break:break-word; min-width:0}
.foot-top > div:last-child{min-width:0}


/* keep the contact column's emails inside the wrap at every width */
.foot-top .crow{flex-wrap:nowrap; gap:10px}
.foot-top .crow > svg{flex:0 0 auto}
.foot-top .crow a{display:inline-block; max-width:100%; overflow-wrap:anywhere; font-size:14.5px}

/* contact column: shrink gracefully, never push past the wrap */
.foot-top > div{min-width:0; max-width:100%}
.foot-top .crow{min-width:0}
.foot-top .crow a{font-size:14px; overflow-wrap:anywhere}
/* card link grids collapse properly on small screens */
.local-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(max-width:820px){.local-list{grid-template-columns:1fr}}
.related-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:900px){.related-grid{grid-template-columns:1fr}}
/* breadcrumb links need a tappable height on mobile */
@media(hover:none),(max-width:820px){
  .crumbs a{display:inline-block; padding-block:7px}
}

/* ============================================================================
   FIX · .vetlist — was a 2-column grid, so a <li> containing a title AND a
   description produced 3 grid items and crushed the title into the 56px
   counter column (one character per line). Rebuilt as flow layout with an
   absolutely-positioned counter, so any number of children renders correctly.
   ========================================================================== */
.vetlist{counter-reset:vet; border-top:1px solid var(--line); margin-top:26px; padding:0; list-style:none}
.vetlist li{
  counter-increment:vet;
  display:block !important;
  grid-template-columns:none !important;
  position:relative;
  padding:18px 0 18px 64px;
  border-bottom:1px solid var(--line);
  align-items:initial;
}
.vetlist li::before{
  content:counter(vet,decimal-leading-zero);
  position:absolute; left:0; top:19px;
  font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.vetlist li b{
  display:block; font-size:17.5px; letter-spacing:-.015em; color:var(--green-deep);
  line-height:1.3; margin-bottom:5px;
}
.vetlist li{font-size:15.5px; line-height:1.62; color:var(--muted)}
.sec-dark .vetlist{border-color:rgba(255,255,255,.14)}
.sec-dark .vetlist li{border-color:rgba(255,255,255,.14); color:#BFE4D4}
.sec-dark .vetlist li b{color:#fff}
.sec-dark .vetlist li::before{color:var(--green-glow)}
@media(max-width:600px){
  .vetlist li{padding-left:52px}
  .vetlist li b{font-size:16.5px}
}
/* Wellness Hub giving pledge */
.give-card{background:#fff; border:1px solid var(--leaf); border-radius:var(--r-lg);
  padding:clamp(28px,3vw,42px); text-align:center; box-shadow:var(--sh-2)}
.give-ic{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:16px; background:var(--mint); color:var(--green); margin-bottom:18px}
.give-card h2{font-size:clamp(21px,2.1vw,29px); letter-spacing:-.025em; line-height:1.28; margin:0 0 14px}
.give-card p{margin:0; max-width:60ch; margin-inline:auto; color:var(--muted); line-height:1.66}

/* ============================================================================
   MOBILE CAROUSELS — stacked card grids become horizontal swipe rails.
   Native CSS scroll-snap: no JS, momentum scrolling on iOS, keyboard scrollable.
   ========================================================================== */
@media(max-width:820px){
  .screens,.people,.cards3,.bento,.related-grid,.local-list,.keyfacts,.stat-row,.step-list{
    display:flex !important;
    flex-direction:row !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    gap:14px;
    padding:4px 20px 20px;
    margin-inline:calc(var(--gut,20px) * -1);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .step-list::-webkit-scrollbar,.screens::-webkit-scrollbar,.people::-webkit-scrollbar,.cards3::-webkit-scrollbar,
  .bento::-webkit-scrollbar,.related-grid::-webkit-scrollbar,.local-list::-webkit-scrollbar,
  .keyfacts::-webkit-scrollbar,.stat-row::-webkit-scrollbar{display:none; height:0}

  .screens > *,.people > *,.cards3 > *,.bento > *,.related-grid > *,
  .local-list > *,.keyfacts > *,.stat-row > *,.step-list > *{
    flex:0 0 auto;
    width:80%;
    max-width:320px;
    min-width:0;
    scroll-snap-align:center;
    grid-column:auto !important;
    margin:0 !important;
  }
  .screens > *{width:62%; max-width:240px}
  .people > *{width:58%; max-width:220px}
  .keyfacts > *,.stat-row > *{width:66%; max-width:250px}

  /* the directional reveal transforms fight scroll-snap inside a scroller */
  .bento > *,.cards3 > *,.related-grid > *,.screens > *,.people > *{
    transform:none !important; opacity:1 !important;
  }

  /* swipe affordance */
  .swipe-rail{position:relative}
  .swipe-hint{
    display:flex; align-items:center; gap:7px; justify-content:center;
    margin:-6px 0 2px; font-size:12.5px; font-weight:500; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); opacity:.85;
  }
  .swipe-hint svg{animation:swipeNudge 2.4s ease-in-out infinite}
  @keyframes swipeNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .sec-dark .swipe-hint,.fold-dark .swipe-hint{color:#BFE4D4}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .swipe-hint svg{animation:none}
  .screens,.people,.cards3,.bento,.related-grid,.local-list,.keyfacts,.stat-row{
    scroll-snap-type:none;
  }
}

/* mobile: the scroll-driven sticky "how it works" block is very tall stacked —
   collapse the device to one shot and tighten the step list */
@media(max-width:820px){
  .sticky-wrap{gap:26px !important}
  .sticky-col .device{width:min(214px,58%); margin-inline:auto}
  .sticky-visual{position:static !important; height:auto !important; padding:0 !important}
  .sticky-steps > *{padding-block:16px !important}
  .sticky-steps p{font-size:15px; line-height:1.6}
  /* mobile hero: trim the stacked height */
  .hero{padding-top:118px !important; padding-bottom:34px !important}
  .hero-in{gap:26px !important}
  .hero-stage .device,.hero-stage .d-main{width:min(230px,62%) !important}
  .hero-stage{min-height:0 !important}
  .fhero{padding-top:112px !important; padding-bottom:30px !important}
  .fhero-vis .device{width:min(196px,54%) !important}
  .hero h1,.fhero h1{margin-bottom:12px}
  .hero .note{margin-top:16px}
  .rotpic,.pop{display:none !important}   /* decorative float cards, not content */
  .social-proof{margin-top:18px}
  /* ledger / long text lists */
  .ledger-row{padding-block:16px !important}
  .safelist li{padding-block:10px !important}
}
@media(max-width:820px){
  .step-list > *{width:86% !important; max-width:330px !important}
  .step-list .stepi{opacity:1 !important; border-left:0; padding:20px 22px !important;
    background:#fff; border:1px solid var(--line); border-radius:var(--r)}
  .sec-mint .step-list .stepi{background:#fff}
  /* hero: final trim */
  .hero{padding-top:102px !important}
  .fhero{padding-top:100px !important}
  .hero-stage .device,.hero-stage .d-main{width:min(198px,54%) !important}
  .fhero-vis .device{width:min(172px,48%) !important}
}
/* step cards inside the mobile carousel: badge inline, no min-height, full opacity */
@media(max-width:820px){
  .step-list .stepi{
    min-height:0 !important;
    padding-left:22px !important;
    justify-content:flex-start !important;
  }
  .step-list .stepi .n{
    position:static !important; top:auto !important; left:auto !important;
    width:42px !important; height:42px !important; font-size:16px !important;
    margin-bottom:14px; flex:0 0 42px;
    background:var(--green) !important; color:#fff !important; border-color:var(--green) !important;
  }
  .step-list .stepi h3{font-size:19px; margin-bottom:10px}
  .step-list .stepi p{font-size:15.5px; margin-bottom:12px; line-height:1.6}
  .step-list .stepi li{font-size:14.5px; margin-bottom:8px}
}

/* mobile footer: 7 stacked columns was ~3500px tall */
@media(max-width:820px){
  .foot-top{
    grid-template-columns:1fr 1fr !important;
    gap:26px 20px !important;
    padding-bottom:34px !important;
  }
  .foot-top > div:first-child{grid-column:1 / -1}
  footer .foot-h{margin-bottom:12px !important; font-size:11.5px}
  footer ul li{margin-bottom:0 !important}
  footer ul li a{padding-block:7px !important; font-size:14.5px; line-height:1.35}
  footer .crow{margin-bottom:10px}
  .foot-bot{flex-direction:column; gap:14px; text-align:center; padding-top:22px}
  .foot-bot nav{display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center}
}
@media(max-width:420px){
  .foot-top{gap:22px 16px !important}
  footer ul li a{font-size:14px}
}
/* mobile: cap every in-section phone mockup (they were up to 1354px tall) */
@media(max-width:820px){
  .wh-grid .device,.who-grid .device,.feat-grid .device,.device-stage .device,
  .sticky-col .device,.g12 .device{
    width:min(196px,54%) !important; margin-inline:auto;
  }
  .screens .device{width:100% !important}
  .device-stage,.wh-grid > div,.who-grid > div{min-width:0}
}
/* the mobile hero trim was applied up to 820px, but the header is taller at
   tablet widths — restore adequate clearance between 601px and 820px */
@media(min-width:601px) and (max-width:820px){
  .hero{padding-top:150px !important}
  .fhero{padding-top:150px !important}
}
@media(max-width:600px){
  .hero{padding-top:104px !important}
  .fhero{padding-top:102px !important}
}

/* mobile menu: grouped accordions so all 30+ destinations are reachable */
.mobile-menu{overflow-y:auto; -webkit-overflow-scrolling:touch}
.m-group{border-bottom:1px solid rgba(0,51,33,.08)}
.m-group > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:17px; font-weight:600; color:var(--green-deep);
}
.m-group > summary::-webkit-details-marker{display:none}
.m-group > summary::after{
  content:""; width:9px; height:9px; border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(45deg); transition:transform .3s var(--ease-out); margin-right:4px;
}
.m-group[open] > summary::after{transform:rotate(-135deg)}
.m-group .m-sub{display:none}
.m-group[open] .m-sub{display:flex; flex-direction:column; padding:2px 0 12px 14px;
  border-left:2px solid var(--leaf); margin-left:2px}
.m-sub a{padding-block:9px !important; font-size:15px; color:var(--muted)}
.m-sub a:hover,.m-sub a:focus{color:var(--green-deep)}
@media(prefers-reduced-motion:reduce){.m-group > summary::after{transition:none}}

/* mobile menu: now holds 38 destinations in accordions, so it scrolls rather
   than centring, and link sizes are scaled to fit */
.mobile-menu{
  justify-content:flex-start !important;
  padding-top:118px !important;
  padding-bottom:40px !important;
  overflow-y:auto;
  gap:0 !important;
}
.mobile-menu > a{
  font-size:18px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  padding:14px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-menu > a.btn{
  font-size:16px !important; margin-top:22px; border-bottom:0;
  justify-content:center; padding:15px 26px !important;
}
.m-group{border-bottom:1px solid rgba(255,255,255,.12)}
.m-group > summary{color:#fff; font-size:18px; padding:14px 0}
.m-group > summary::after{border-color:rgba(255,255,255,.7)}
.m-group[open] > summary{color:var(--green-glow)}
.m-group[open] .m-sub{border-left-color:rgba(4,194,128,.5)}
.m-sub a{
  color:rgba(255,255,255,.78) !important;
  font-size:15.5px !important; font-weight:500 !important;
  padding:10px 0 !important; border-bottom:0 !important; letter-spacing:0 !important;
}
.m-sub a:hover,.m-sub a:focus{color:#fff !important}
.mobile-menu.open .m-group{opacity:1; transform:none; transition:opacity .5s ease, transform .6s var(--ease-out)}
.mobile-menu .m-group{opacity:0; transform:translateY(20px)}
@media(prefers-reduced-motion:reduce){.mobile-menu .m-group{opacity:1; transform:none}}

/* ============================================================================
   FIX · single-column heroes were being split by the .fhero two-column grid.
   .fhero .wrap is grid 2-col, which is right for text+device heroes but wrong
   for any hero whose .wrap holds a single stack of content (policy pages,
   article headers). Those now render as one centred column.
   ========================================================================== */
.fhero .wrap.policy-head,
.fhero .wrap.art-head,
.fhero .wrap.single,
.fhero .wrap:not(:has(.fhero-vis)){
  display:block !important;
  grid-template-columns:none !important;
  max-width:820px;
}
.policy-head,.art-head{text-align:left}
.policy-head h1,.art-head h1{max-width:22ch; margin:18px 0 16px}
.policy-head .lede,.art-head .lede{max-width:60ch}
.policy-date{margin-top:18px; font-size:14.5px; color:var(--muted)}
.policy-hero,.art-hero{padding-bottom:clamp(30px,3.4vw,52px)}

/* Wellness Hub premium card + journey stages */
.price-card{background:#fff; border:1px solid var(--leaf); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px); box-shadow:var(--sh-2); max-width:640px; margin-inline:auto}
.price-amt{display:flex; align-items:baseline; gap:10px; margin:0 0 20px}
.price-amt b{font-size:clamp(38px,4.4vw,54px); letter-spacing:-.035em; color:var(--green-deep); line-height:1}
.price-amt span{font-size:15px; color:var(--muted); font-weight:500}
.price-card .safelist{margin-top:0}
.price-note{margin:20px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted)}
.stagegrid{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.stagegrid span{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:12px 22px; font-size:15.5px; font-weight:500; color:var(--green-deep);
  transition:transform .4s var(--ease-out), border-color .3s ease, box-shadow .35s ease;
}
.stagegrid span:hover{transform:translateY(-3px); border-color:var(--leaf); box-shadow:var(--sh-2)}
@media(max-width:600px){.stagegrid span{padding:10px 18px; font-size:14.5px}}
/* Kickstarter badge */
.ks-badge{display:flex; justify-content:center; align-items:center; position:relative; z-index:2;
  transition:transform .55s var(--ease-out)}
.ks-badge img{width:min(300px,74%); height:auto; filter:drop-shadow(0 18px 34px rgba(0,51,33,.24))}
.ks-badge:hover{transform:rotate(-4deg) scale(1.04)}
@media(prefers-reduced-motion:reduce){.ks-badge:hover{transform:none}}

/* ======================== PARTNER APPLICATION FORM ======================= */
.pa-form{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px); box-shadow:var(--sh-2)}
.pa-field{margin-bottom:20px; display:block; border:0; padding:0}
.pa-field > label,.pa-field > legend{
  display:block; font-size:14.5px; font-weight:600; color:var(--green-deep); margin-bottom:7px}
.pa-hint{display:block; font-size:13.5px; color:var(--muted); margin:-3px 0 8px; line-height:1.45}
.pa-form input[type=text],.pa-form input[type=email],.pa-form input[type=tel],
.pa-form input[type=url],.pa-form select,.pa-form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .3s ease, box-shadow .3s ease}
.pa-form textarea{resize:vertical; min-height:108px; line-height:1.6}
.pa-form input:focus,.pa-form select:focus,.pa-form textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(4,194,128,.16)}
.pa-form [aria-invalid="true"]{border-color:#B4472F; box-shadow:0 0 0 3px rgba(180,71,47,.15)}
.pa-row{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
@media(max-width:640px){.pa-row{grid-template-columns:1fr}}
.pa-check legend{margin-bottom:10px}
.pa-cb{display:flex; align-items:center; gap:11px; padding:9px 0; cursor:pointer;
  font-size:15.5px; color:var(--ink)}
.pa-cb input{width:20px; height:20px; flex:0 0 20px; accent-color:var(--green); cursor:pointer}
.pa-privacy{font-size:13.5px; color:var(--muted); line-height:1.55; margin:4px 0 20px}
.pa-privacy a{color:var(--green); font-weight:500; border-bottom:1.5px solid rgba(4,194,128,.35)}
.pa-submit{width:100%; justify-content:center; padding:16px 26px}
.pa-fallback{display:none; margin:14px 0 0; font-size:14px; color:var(--muted); text-align:center}
.pa-form.sent .pa-fallback{display:block}
.pa-err{display:block; font-size:13px; color:#B4472F; margin-top:6px; font-weight:500}

/* ---- partner form: compact, fits one laptop fold ---- */
.pa-sec{padding-block:clamp(40px,4vw,64px)}
.pa-head{max-width:640px; margin:0 auto clamp(20px,2.2vw,30px); text-align:center}
.pa-head h2{margin:14px 0 10px; font-size:clamp(24px,2.5vw,34px)}
.pa-head p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.55}
.pa-compact{max-width:960px; margin-inline:auto; padding:clamp(22px,2.4vw,32px)}
.pa-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px}
.pa-grid .pa-span{grid-column:1 / -1}
.pa-compact .pa-field{margin-bottom:0}
.pa-compact .pa-field > label,.pa-compact .pa-field > legend{
  font-size:13.5px; margin-bottom:5px}
.pa-inline-hint{font-weight:400; color:var(--muted); font-size:12.5px}
.pa-compact input,.pa-compact select,.pa-compact textarea{padding:11px 13px; font-size:15.5px; border-radius:10px}
.pa-compact textarea{min-height:0; line-height:1.55}
.pa-cbrow{display:flex; flex-wrap:wrap; gap:6px 18px}
.pa-compact .pa-cb{padding:4px 0; font-size:14.5px; gap:9px}
.pa-compact .pa-cb input{width:18px; height:18px; flex:0 0 18px}
.pa-foot{display:flex; align-items:center; gap:20px; margin-top:20px; flex-wrap:wrap}
.pa-compact .pa-submit{width:auto; flex:0 0 auto; padding:14px 30px}
.pa-compact .pa-privacy{margin:0; flex:1 1 220px; font-size:13px}
.pa-compact .pa-err{font-size:12.5px; margin-top:4px}
@media(max-width:820px){
  .pa-grid{grid-template-columns:1fr}
  .pa-foot{flex-direction:column; align-items:stretch}
  .pa-compact .pa-submit{width:100%; justify-content:center}
  .pa-compact .pa-privacy{text-align:center}
}
/* fit the whole application section inside one laptop fold */
.pa-sec{padding-block:clamp(28px,2.6vw,40px)}
.pa-head{margin-bottom:clamp(14px,1.4vw,20px)}
.pa-head h2{margin:10px 0 7px; font-size:clamp(22px,2.2vw,30px)}
.pa-head p{font-size:14.5px}
.pa-head .divider,.pa-head hr{display:none}
.pa-compact{padding:clamp(18px,2vw,26px)}
.pa-grid{gap:11px 18px}
.pa-compact .pa-field > label,.pa-compact .pa-field > legend{font-size:13px; margin-bottom:4px}
.pa-compact input,.pa-compact select,.pa-compact textarea{padding:10px 12px; font-size:15px}
.pa-foot{margin-top:16px}
.pa-compact .pa-submit{padding:13px 28px}
/* final squeeze so the application sits inside one laptop fold */
.pa-sec{padding-block:clamp(22px,2vw,32px)}
.pa-head{margin-bottom:12px}
.pa-head .tag{margin-bottom:0}
.pa-head h2{margin:8px 0 5px; font-size:clamp(21px,2vw,27px)}
.pa-head p{font-size:14px}
.pa-grid{gap:10px 18px}
.pa-compact textarea{line-height:1.5}
.pa-foot{margin-top:14px}

/* ---- "Partner with us" as a proper secondary button in the nav ---- */
header nav a.nav-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  border:1.6px solid var(--green); color:var(--green-deep);
  font-weight:600; font-size:15px; letter-spacing:-.005em;
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
  transition:transform .4s var(--ease-out), background .3s ease, box-shadow .4s ease, color .3s ease;
  margin-left:6px;
}
header nav a.nav-btn:hover{
  transform:translateY(-2px); background:var(--green); color:#fff;
  box-shadow:0 14px 28px -12px rgba(0,90,58,.5);
}
header nav a.nav-btn::after{display:none}   /* no underline sweep on a button */
.nav.stuck nav a.nav-btn{padding:9px 17px; font-size:14.5px}
@media(max-width:1180px){ header nav a.nav-btn{padding:9px 15px; font-size:14px; margin-left:2px} }
/* mobile menu variant */
#mob a.m-btn{
  justify-content:center; margin:14px 0 0; border-color:rgba(255,255,255,.55) !important;
  color:#fff !important; font-size:16px !important; padding:14px 22px !important; border-bottom:0 !important;
}
#mob a.m-btn:hover{background:rgba(255,255,255,.12) !important}
@media(prefers-reduced-motion:reduce){header nav a.nav-btn:hover{transform:none}}
/* 2 x 5 grid — every field paired, nothing spans */
.pa-head{margin-bottom:10px}
.pa-head p{display:none}
.pa-head h2{margin:6px 0 0}
.pa-req-note{display:block; text-align:center; font-size:13px; color:var(--muted); margin:6px 0 0}
.pa-check .pa-cbrow{flex-direction:column; gap:2px}
.pa-compact .pa-cb{padding:2px 0; font-size:14px}
/* textareas and checkbox column even out the last two rows */
.pa-grid{align-items:start}
.pa-compact #pa-intro,.pa-compact #pa-notes{height:78px; min-height:78px}
.pa-check{align-self:start}
.pa-foot{margin-top:12px}
.pa-sec{padding-block:20px}
.pa-sec{padding-block:14px}
.pa-compact{padding:20px 22px}
#mob a.m-btn-partner{margin:18px 0 10px}
/* mobile menu buttons — explicit sizing (earlier rules were fighting) */
#mob a.m-btn,#mob a.m-btn-partner{
  display:flex !important; align-items:center; justify-content:center;
  padding:15px 24px !important; min-height:50px;
  font-size:16px !important; font-weight:600 !important;
  border:1.6px solid rgba(255,255,255,.6) !important; border-radius:999px !important;
  color:#fff !important; background:transparent !important; border-bottom-width:1.6px !important;
}
#mob a.m-btn-partner{margin:20px 0 10px !important}

/* ============================================================================
   FIX · nav wrapping. Adding "Partner with us" pushed the link row past its
   available width, so "How it works", "Mother's Village" and the button itself
   wrapped onto two lines at every viewport up to 1920px.
   ========================================================================== */
.nav-links{flex-wrap:nowrap; align-items:center}
.nav-links a,.nav-links > *{white-space:nowrap}
header nav a.nav-btn{white-space:nowrap}

/* progressive tightening instead of wrapping */
@media(min-width:1281px){
  .nav-in{gap:26px}
  .nav-links{gap:2px}
  .nav-links a{padding:9px 13px; font-size:15px}
}
@media(min-width:1101px) and (max-width:1280px){
  .nav-in{gap:16px}
  .nav-links{gap:0}
  .nav-links a{padding:8px 10px; font-size:14.2px}
  header nav a.nav-btn{padding:9px 15px; font-size:14px; margin-left:4px}
  .nav-logo{height:64px}
  .nav.stuck .nav-logo{height:54px}
  .nav .btn:not(.nav-btn){padding:11px 20px; font-size:14.5px}
}
/* below 1100px the row cannot hold 8 links + 2 buttons — use the mobile menu */
@media(max-width:1100px){
  .nav-links{display:none}
  .nav .btn:not(.mobile-menu .btn){display:none}
  .burger{display:block}
}