/* ============================================================
   OhPuppy — shared site design system
   Apple-clean · brand green · photographic · motion
   ============================================================ */
:root{
  --ink:#1d1d1f; --ink-2:#3a3a42; --mute:#6e6e73; --faint:#86868b;
  --line:#e6e6ea; --hair:rgba(0,0,0,.09);
  --bg:#ffffff; --mist:#f5f5f7; --mist-2:#fbfbfd;
  --green:#1f8f5f; --green-d:#12603f; --green-l:#eaf5ef; --green-ring:rgba(31,143,95,.42);
  --blue:#0071e3;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow-card:0 26px 60px -34px rgba(16,24,40,.5);
  --shadow-soft:0 10px 30px -18px rgba(16,24,40,.34);
  --maxw:1120px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  letter-spacing:-.014em;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}
.center{text-align:center}

/* ---------- type ---------- */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
h1,h2,h3{letter-spacing:-.032em;font-weight:600;line-height:1.04}
.display{font-size:clamp(40px,7vw,84px);line-height:1.01;letter-spacing:-.035em}
.h-xl{font-size:clamp(34px,5.4vw,62px);text-wrap:balance}
.h-lg{font-size:clamp(28px,4.2vw,46px);text-wrap:balance}
.lead{font-size:clamp(18px,2.1vw,23px);color:var(--mute);line-height:1.5;font-weight:400;letter-spacing:-.01em;text-wrap:pretty}
.link{color:var(--blue);font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:2px}
.link:hover{text-decoration:underline}
.link::after{content:"›";font-size:21px;line-height:0;position:relative;top:1px;transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(3px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:15px;
  font-weight:500;padding:11px 22px;border-radius:980px;border:0;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s,filter .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:#fff}
/* Hover: darken/lift the button's OWN colour instead of forcing one fixed green
   (which clashed with teal/sky/coral buttons across the site). */
.btn-primary:hover{filter:brightness(.93);transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(0,0,0,.28)}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.26)}
.btn-outline{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-outline:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn.lg{font-size:17px;padding:14px 30px}
/* Nav CTA is more compact (was too large/heavy on every page) */
.nav .btn{font-size:13px;padding:8px 16px;font-weight:600}
.btn-link-lg{font-size:17px;font-weight:500}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:0 30px;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07)}
.nav.on-photo{background:transparent;border-bottom-color:transparent;color:#fff}
.nav.on-photo.scrolled{background:rgba(255,255,255,.72);color:var(--ink);border-bottom-color:rgba(0,0,0,.07);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.02em}
.nav .brand img{width:25px;height:25px;border-radius:7px}
.nav .links{display:flex;gap:28px;font-size:13.5px;opacity:.9}
.nav .links a{transition:opacity .2s,color .2s}
.nav .links a:hover{opacity:1;color:var(--green-d)}
.nav.on-photo:not(.scrolled) .links a:hover{color:#fff}
.nav .actions{display:flex;align-items:center;gap:13px}
.nav .signin{font-size:13.5px;opacity:.9;transition:opacity .2s}
.nav .signin:hover{opacity:1}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:980px;overflow:hidden}
.nav.on-photo:not(.scrolled) .lang{border-color:rgba(255,255,255,.55)}
.lang button{border:0;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--faint);padding:5px 11px;cursor:pointer;transition:.15s}
.nav.on-photo:not(.scrolled) .lang button{color:rgba(255,255,255,.85)}
.lang button.on{background:var(--ink);color:#fff}
.nav.on-photo:not(.scrolled) .lang button.on{background:#fff;color:var(--ink)}
@media(max-width:860px){.nav .links{display:none}.nav .signin{display:none}}

/* ---------- mobile hamburger + slide-down menu ---------- */
.nav-burger{display:none;position:relative;width:42px;height:42px;margin:-9px -10px -9px 0;
  border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;color:inherit;z-index:91}
.nav-burger span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .32s cubic-bezier(.4,.01,.16,1),opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* dim backdrop behind the panel */
.nav-scrim{position:fixed;inset:0;z-index:78;background:rgba(20,24,22,.34);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.menu-open .nav-scrim{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

/* the panel itself — clean white, slides down from under the bar */
.nav-menu{position:fixed;top:54px;left:0;right:0;z-index:79;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 24px 48px -24px rgba(20,24,22,.28);
  padding:14px 22px calc(22px + env(safe-area-inset-bottom));
  max-height:calc(100svh - 54px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .34s cubic-bezier(.32,.72,0,1),opacity .26s ease,visibility .34s ease}
body.menu-open .nav-menu{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.nav-menu a{display:flex;align-items:center;font-size:17px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);padding:14px 4px;border-bottom:1px solid rgba(0,0,0,.06);
  transition:color .15s ease}
.nav-menu a:active,.nav-menu a:hover{color:var(--green-d)}
.nav-menu .nm-sep{height:8px;border:0}
.nav-menu .nm-signin{font-weight:600}
.nav-menu .nm-cta{justify-content:center;margin-top:16px;border:0;padding:0}
.nav-menu .nm-cta .btn{width:100%;font-size:16px;padding:15px 24px;border-radius:14px}
/* staggered entrance for the links */
body.menu-open .nav-menu a{animation:nmIn .42s cubic-bezier(.32,.72,0,1) both}
@keyframes nmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:860px){.nav-burger{display:inline-flex}}
@media(min-width:861px){.nav-menu,.nav-scrim{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-burger span,.nav-menu,.nav-scrim{transition:none}
  body.menu-open .nav-menu a{animation:none}
}

/* ---------- full-bleed photo hero ---------- */
.hero-full{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-full .bg{position:absolute;inset:-8% 0 0 0;z-index:0}
.hero-full .bg img{width:100%;height:116%;object-fit:cover;object-position:center 38%}
.hero-full .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.66) 100%)}
.hero-full .inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 30px 8vh}
.hero-full .display{max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero-full .lead{color:rgba(255,255,255,.92);max-width:30ch;margin-top:18px;text-shadow:0 1px 18px rgba(0,0,0,.3)}
.hero-full .cta-row{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-full .cta-row .link{color:#fff}
.hero-full .scroller{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;width:22px;height:36px;border:2px solid rgba(255,255,255,.6);border-radius:14px;display:flex;justify-content:center;padding-top:6px}
.hero-full .scroller::before{content:"";width:3px;height:7px;border-radius:3px;background:#fff;animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%{opacity:0;transform:translateY(7px)}100%{opacity:0}}

/* ---------- scroll-scrubbed festive hero (icon macro->micro, gray->green, doodles burst) ---------- */
:root{--p:1;--logoS:.405;--logoG:0;--copyO:1;--introO:0}
.hero-scroll{position:relative;height:230vh}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 72% at 50% 26%, #ffffff 0%, #f1f7f4 90%)}
.hero-pin-inner{position:relative;z-index:2;text-align:center;width:100%;
  transform:translateY(calc(-15vh * var(--p)));will-change:transform}
.hero-intro{position:absolute;left:0;right:0;bottom:14vh;z-index:2;text-align:center;
  font-size:clamp(28px,4.6vw,48px);font-weight:700;letter-spacing:-.03em;
  opacity:var(--introO);pointer-events:none}
.hero-intro .word{display:inline-block;color:var(--ink)}
@keyframes wordpop{from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:none}}
.festive-logo{width:clamp(208px,23vw,290px);height:auto;border-radius:23%;display:block;margin:0 auto;
  image-rendering:auto;backface-visibility:hidden;
  box-shadow:0 30px 60px -24px rgba(18,96,63,calc(.2 + .5*var(--p)));
  transform:scale(var(--logoS));transform-origin:center;
  filter:grayscale(var(--logoG)) saturate(calc(.45 + .55*(1 - var(--logoG))))}
.hero-copy{position:absolute;left:50%;top:calc(100% + 26px);width:min(780px,92vw);padding:0 8px;
  transform:translateX(-50%) translateY(calc((1 - var(--copyO)) * 20px));
  opacity:var(--copyO);will-change:opacity,transform}
.hero-copy .eyebrow{margin-bottom:14px}
.hero-copy .display{max-width:16ch;margin:0 auto}
.hero-copy .lead{max-width:42ch;margin:18px auto 0}
.hero-copy .cta-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:30px}
.doodles{position:absolute;inset:0;z-index:1;pointer-events:none}
.doodle{position:absolute;left:50%;top:50%;
  transform:translate(calc(-50% + var(--tx) * var(--p)), calc(-50% + var(--ty) * var(--p))) scale(var(--p));
  will-change:transform}
.doodle svg{display:block;width:100%;height:100%;animation:dfloat var(--d,6s) ease-in-out infinite var(--fd,0s)}
@keyframes dfloat{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
.hero-photo-sec{padding:0 0 clamp(20px,4vw,44px)}

/* ---------- cinematic full-screen photo (sticky + ken-burns) ---------- */
.cine-scroll{position:relative;height:155vh}
.cine-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cine-pin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.06);animation:cinezoom 18s ease-in-out infinite alternate}
@keyframes cinezoom{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.cine-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.32) 46%,rgba(0,0,0,.5) 100%)}
/* top blend: photo emerges from the hero's mint background — no hard edge */
.cine-pin::before{content:"";position:absolute;top:0;left:0;right:0;height:20vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#f1f7f4 0%,rgba(241,247,244,.4) 50%,rgba(241,247,244,0) 100%)}
.cine-pin::after{content:"";position:absolute;bottom:0;left:0;right:0;height:13vh;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%)}
.cine-text{position:relative;z-index:3;text-align:center;color:#fff;padding:0 24px;max-width:820px}
.cine-text h2{font-size:clamp(34px,6vw,70px);letter-spacing:-.035em;line-height:1.05;text-shadow:0 2px 32px rgba(0,0,0,.42)}
.cine-text p{font-size:clamp(17px,2vw,22px);margin-top:16px;color:rgba(255,255,255,.93);text-shadow:0 1px 16px rgba(0,0,0,.45)}
@media(prefers-reduced-motion:reduce){
  .cine-scroll{height:auto}.cine-pin{position:static;height:84vh}.cine-pin>img{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero-pin{position:static;height:auto;padding:118px 0 50px}
  .doodle svg{animation:none}
}

/* ---------- white hero + wide photo band (home) ---------- */
.hero-white{padding:128px 0 0;text-align:center;overflow:hidden}
.hero-white .eyebrow{margin-bottom:14px}
.hero-white .display{max-width:16ch;margin:0 auto}
.hero-white .lead{max-width:42ch;margin:20px auto 0}
.hero-white .cta-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-photo{margin:clamp(36px,5vw,76px) auto 0;max-width:1280px;padding:0 22px}
.hero-photo .frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;
  transform:scale(calc(.9 + .1*var(--g,1)));transform-origin:center;will-change:transform;
  box-shadow:0 44px 100px -54px rgba(16,24,40,calc(.18 + .55*var(--g,1)))}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.1) translateY(var(--py,0));will-change:transform}
@media(prefers-reduced-motion:reduce){
  .hero-photo .frame{transform:none}.hero-photo .frame img{transform:none}
}
@media(max-width:760px){.hero-white{padding:104px 0 0}.hero-photo .frame{aspect-ratio:4/3}}

/* ---------- split photo hero (role pages) ---------- */
.hero-split{padding:118px 0 40px;position:relative;overflow:hidden}
.hero-split .grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.hero-split .copy .eyebrow{margin-bottom:14px}
.hero-split .copy .lead{margin-top:18px;max-width:34ch}
.hero-split .copy .cta-row{margin-top:30px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-split .figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-card)}
.hero-split .figure img{width:100%;height:100%;object-fit:cover}
.hero-split .figure.tall{aspect-ratio:3/4}
.hero-split .figure.hero-figure{aspect-ratio:4/5;background:var(--mist-2)}
.figure .brand-wm{position:absolute;left:15px;bottom:13px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.40);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-weight:600;font-size:15px;letter-spacing:-.01em;padding:6px 13px 6px 8px;border-radius:980px}
.figure .brand-wm img{width:20px;height:20px;border-radius:6px}
@media(max-width:860px){.hero-split{padding:96px 0 30px}.hero-split .grid{grid-template-columns:1fr;gap:30px}.hero-split .figure{aspect-ratio:16/11;order:-1}}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(78px,11vw,128px) 0}
.section.mist{background:var(--mist)}
.section.tight{padding:clamp(56px,8vw,92px) 0}
.sec-head{max-width:48ch;margin:0 auto 44px}
.sec-head.left{margin-left:0;text-align:left}
/* Affiliate band: wider text block so the copy isn't cramped into many short lines */
#affiliate .sec-head{max-width:60ch}
#affiliate .sec-head .lead{max-width:54ch;margin-left:auto;margin-right:auto}
.sec-head .eyebrow{margin-bottom:12px}
.sec-head .lead{margin-top:14px;max-width:46ch}
.center .sec-head{margin-left:auto;margin-right:auto}

/* statement */
.statement{padding:clamp(120px,18vw,190px) 0;text-align:center}
.statement h2{font-size:clamp(32px,5.6vw,68px);letter-spacing:-.035em;max-width:24ch;margin:0 auto;text-wrap:balance}
.statement .dim{color:#c2c2c8;transition:color 1.1s var(--ease)}
.statement.in .dim{color:var(--ink)}

/* ---------- platform rail (SIGNATURE) ---------- */
.rail-band{padding:clamp(64px,8vw,96px) 0}
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:var(--maxw);margin:34px auto 0;padding:0 30px}
.rail-item{position:relative;display:flex;flex-direction:column;gap:13px;padding:24px 20px 22px;background:var(--bg);
  border:1px solid var(--hair);border-radius:var(--r-md);transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;overflow:hidden}
.rail-item:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px color-mix(in srgb, var(--rc,#1f8f5f) 60%, transparent);border-color:color-mix(in srgb, var(--rc,#1f8f5f) 45%, transparent)}
.rail-item .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--rc,#1f8f5f);color:#fff;box-shadow:0 11px 20px -10px color-mix(in srgb, var(--rc,#1f8f5f) 65%, transparent)}
.rail-item .ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail-item b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.rail-item small{font-size:13px;color:var(--mute);line-height:1.4}
.rail-item .go{margin-top:2px;font-size:13px;font-weight:600;color:var(--rc,#12603f);opacity:0;transform:translateX(-4px);transition:.26s var(--ease)}
.rail-item:hover .go{opacity:1;transform:none}
@media(max-width:860px){.rail{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:460px){.rail{grid-template-columns:1fr}}
/* role-tinted cards + scroll-triggered icon motion (let's-go energy) */
.rail-item{background:linear-gradient(168deg, color-mix(in srgb, var(--rc,#1f8f5f) 8%, #fff) 0%, #fff 64%)}
.rail-item .ic{transition:transform .26s var(--ease)}
.rail-item.in .ic{animation:icpop .65s var(--ease) both}
@keyframes icpop{0%{transform:scale(.45);opacity:.25}58%{transform:scale(1.16)}100%{transform:scale(1)}}
.ic-walk{transform-origin:center bottom}
.rail-item.in .ic-walk{animation:walkbob .5s ease-in-out 4 .2s}
@keyframes walkbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-1.5px) rotate(4deg)}}
.rail-item:hover .ic{transform:translateY(-2px) scale(1.06)}
/* multicolour word (letters coloured by site.js) */
.multi{white-space:nowrap}
.multi span{display:inline-block}

/* ---------- feature rows (photo + copy) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.feature + .feature{margin-top:clamp(80px,11vw,130px)}
.feature.flip .copy{order:2}
.feature .copy .eyebrow{margin-bottom:12px}
.feature .copy h2{margin-bottom:14px}
.feature .copy .lead{max-width:38ch}
.feature .copy .link{margin-top:22px}
.feature .figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-card)}
.feature .figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:26px}.feature.flip .copy{order:0}}

/* ---------- card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-md);padding:34px 28px 30px;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),#3cc488);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:var(--green-ring)}
.card:hover::after{transform:scaleX(1)}
.card .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#2aa873,#12603f);color:#fff;margin-bottom:18px;box-shadow:0 12px 22px -12px rgba(18,96,63,.75)}
.card .ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;margin-bottom:8px;letter-spacing:-.02em}
.card p{font-size:15.5px;color:var(--mute);line-height:1.55}
.section.mist .card{background:var(--bg)}
@media(max-width:860px){.cards,.cards.four{grid-template-columns:1fr 1fr}.cards.two{grid-template-columns:1fr}}
@media(max-width:560px){.cards,.cards.four{grid-template-columns:1fr}}

/* ---------- steps (numbered, only where order matters) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:var(--maxw);margin:0 auto;padding:0 30px;counter-reset:step}
.step{position:relative;padding-top:18px;border-top:2px solid var(--green)}
.step .num{font-size:14px;font-weight:600;color:var(--green-d);letter-spacing:.02em}
.step h3{font-size:20px;margin:8px 0 7px;letter-spacing:-.02em}
.step p{font-size:15.5px;color:var(--mute);line-height:1.5}
/* phone above each step */
.step-col{display:flex;flex-direction:column;gap:30px}
.step-phone{display:flex;justify-content:center;align-items:flex-end}
.step-phone .p3d{box-shadow:0 26px 50px -28px rgba(16,24,40,.55),0 0 0 1.5px #000}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:46px}.step-col{gap:24px}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:980px;margin:0 auto;padding:0 30px;text-align:center}
.stat .n{font-size:clamp(38px,5vw,60px);font-weight:600;letter-spacing:-.04em}
.stat small{display:block;color:var(--mute);font-size:15px;margin-top:4px}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr;gap:40px 28px}}

/* ---------- photo strip / collage ---------- */
.collage{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:14px;max-width:var(--maxw);margin:0 auto;padding:0 30px;height:min(76vh,640px)}
.collage figure{position:relative;border-radius:var(--r-md);overflow:hidden}
.collage figure:first-child{grid-row:1/3}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figcaption{position:absolute;left:18px;bottom:16px;color:#fff;font-size:15px;font-weight:600;text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media(max-width:760px){.collage{grid-template-columns:1fr 1fr;height:auto;grid-auto-rows:200px}.collage figure:first-child{grid-row:auto;grid-column:1/3;height:260px}}

/* ---------- big CTA band ---------- */
.cta-band{text-align:center;background:var(--mist);padding:clamp(90px,13vw,150px) 0}
.cta-band h2{font-size:clamp(38px,6.4vw,80px);letter-spacing:-.035em;max-width:22ch;margin:0 auto 16px;text-wrap:balance}
.cta-band p{font-size:clamp(18px,2.1vw,21px);color:var(--mute);margin-bottom:32px;max-width:50ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;padding:12px 22px;border-radius:14px;transition:transform .2s var(--ease),opacity .2s}
.store:hover{transform:translateY(-2px);opacity:.92}
.store svg{width:23px;height:23px;fill:#fff}
.store small{display:block;font-size:10px;letter-spacing:.4px;opacity:.82;line-height:1;text-transform:uppercase}
.store b{font-size:17px;font-weight:600;line-height:1.25}

/* ---------- iOS / TestFlight "coming soon" CTA (single source of truth) ---------- */
/* One styled, non-broken control. The real TestFlight URL drops into TESTFLIGHT_URL in assets/cta.js. */
.ios-cta{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;
  padding:12px 22px;border-radius:14px;transition:transform .2s var(--ease),opacity .2s;text-align:left}
.ios-cta:hover{transform:translateY(-2px);opacity:.94}
.ios-cta svg{width:23px;height:23px;fill:#fff;flex:none}
.ios-cta .ios-cta-tx{display:flex;flex-direction:column;line-height:1}
.ios-cta .ios-cta-k{font-size:10px;letter-spacing:.4px;opacity:.82;text-transform:uppercase;margin-bottom:3px}
.ios-cta .ios-cta-b{font-size:17px;font-weight:600;line-height:1.2}
.ios-cta .ios-cta-soon{margin-left:4px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  color:#fff;font-size:11px;font-weight:600;letter-spacing:.2px;padding:4px 9px;border-radius:999px;white-space:nowrap}
@media(max-width:460px){.ios-cta .ios-cta-soon{display:none}}

/* role-page CTA band on photo */
.cta-photo{position:relative;overflow:hidden;text-align:center;color:#fff;padding:clamp(96px,14vw,160px) 0}
.cta-photo .bg{position:absolute;inset:0;z-index:0}
.cta-photo .bg img{width:100%;height:100%;object-fit:cover}
.cta-photo .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,40,30,.5),rgba(10,22,16,.78))}
.cta-photo .inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.cta-photo h2{font-size:clamp(34px,5.6vw,64px);letter-spacing:-.035em;max-width:18ch;margin:0 auto 14px;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.cta-photo p{font-size:clamp(17px,2vw,21px);color:rgba(255,255,255,.9);margin-bottom:30px}
.cta-photo .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* pill stat / pricing note */
.pricing{display:inline-flex;align-items:baseline;gap:10px;background:var(--green-l);color:var(--green-d);
  padding:11px 20px;border-radius:980px;font-size:15px;font-weight:500}
.pricing b{font-size:19px;font-weight:600}

/* ---------- device mockup (reused from app shots) ---------- */
.scene{display:inline-block;position:relative}
.scene .floor{position:absolute;left:8%;right:8%;bottom:-4%;height:7%;background:rgba(0,0,0,.2);filter:blur(28px);border-radius:50%;z-index:-1}
.p3d{--w:300px;position:relative;width:var(--w);aspect-ratio:1206/2622;border-radius:calc(var(--w)*.182);
  padding:calc(var(--w)*.026);background:linear-gradient(135deg,#34343a,#0c0c0e 42%,#161619 70%,#040406);
  box-shadow:0 0 0 1.5px #000,0 1px 1px rgba(255,255,255,.1) inset,var(--shadow-card)}
.p3d .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.156);overflow:hidden;background:#000}
.p3d .screen>img,.p3d .screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p3d .gl{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 20%)}
.device-over{position:absolute;right:6%;bottom:-6vh;z-index:3}
@media(max-width:860px){.device-over{display:none}}

/* ---------- footer ---------- */
.foot{background:var(--mist);border-top:1px solid var(--line);padding:54px 0 30px;color:var(--mute);font-size:13.5px}
.foot .grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.foot .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;color:var(--ink);margin-bottom:12px}
.foot .brand img{width:23px;height:23px;border-radius:6px}
.foot .tag{max-width:26ch;line-height:1.5}
.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin-bottom:14px;font-weight:600}
.foot .col a{display:block;margin-bottom:10px;transition:color .2s}
.foot .col a:hover{color:var(--green-d)}
.foot .bar{max-width:var(--maxw);margin:40px auto 0;padding:20px 30px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot .bar .bar-end{display:inline-flex;align-items:center;gap:16px}
.foot .bar .foot-lang{flex:none}
@media(max-width:760px){.foot .grid{grid-template-columns:1fr 1fr}.foot .brandcol{grid-column:1/3}}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.parallax{will-change:transform}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none!important}
  .hero-full .scroller{display:none}
}

/* ============================================================
   PLATFORM — "Five roles. One world." experience
   Phase 1 (.rvd-*) falling icon tiles + dashed connector
   Phase 2 (.rva-*) story chapters with photo parallax
   Fully namespaced — no collision with hero / cine / reveal
   ============================================================ */
.rvd-stage,.rva-root{
  --c-owner:#2D6A4F; --c-walker:#457B9D; --c-vet:#3D4859; --c-shop:#0E8C8B; --c-shelter:#E07A5F;
}

/* ---- Phase 1 : pinned intro with falling icons ---- */
.rvd-stage{position:relative;height:200vh}
.rvd-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;will-change:opacity,transform}
.rvd-roles{position:relative;width:100%;padding:0 24px;max-width:1120px;margin:0 auto}
.rvd-head{text-align:center;max-width:760px;margin:0 auto 70px;position:relative;z-index:3}
.rvd-eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--green);text-transform:uppercase;margin:0 0 18px}
.rvd-title{font-size:clamp(40px,6.4vw,72px);line-height:1.03;letter-spacing:-.03em;font-weight:700;margin:0;color:var(--ink)}
.rvd-field{position:relative;min-height:300px}

.rvd-doodles{position:absolute;inset:-120px 0 0 0;pointer-events:none;z-index:1}
.rvd-doodle{position:absolute;width:22px;height:22px;opacity:0;will-change:transform,opacity}

.rvd-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3.2vw,42px);flex-wrap:wrap;position:relative;z-index:2;padding-top:40px}
.rvd-role{width:172px;text-align:center;transform:translateY(var(--drop-y,0px))}
.rvd-role.--r-owner{--drop-y:-30px}
.rvd-role.--r-walker{--drop-y:44px}
.rvd-role.--r-vet{--drop-y:-8px}
.rvd-role.--r-shop{--drop-y:60px}
.rvd-role.--r-shelter{--drop-y:12px}

.rvd-tile{width:52px;height:52px;border-radius:15px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;position:relative;will-change:transform,opacity;box-shadow:0 12px 26px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.24);opacity:0;transform:translateY(-140vh) rotate(-22deg)}
.rvd-tile svg{width:27px;height:27px;display:block;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rvd-tile.--owner{background:linear-gradient(155deg,#3a8463,var(--c-owner))}
.rvd-tile.--walker{background:linear-gradient(155deg,#5a93b3,var(--c-walker))}
.rvd-tile.--vet{background:linear-gradient(155deg,#525d70,var(--c-vet))}
.rvd-tile.--shop{background:linear-gradient(155deg,#17a3a2,var(--c-shop))}
.rvd-tile.--shelter{background:linear-gradient(155deg,#ea9279,var(--c-shelter))}

.rvd-name{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rvd-desc{font-size:14.5px;line-height:1.45;color:var(--mute);margin:0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}

.rvd-thread{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2;opacity:0;transition:opacity .8s var(--ease)}
.rvd-roles.is-ordered .rvd-thread{opacity:1}
.rvd-thread .rvd-thread-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 10;opacity:.62}
.rvd-thread .rvd-thread-dot{filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}

.rvd-cue{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .6s var(--ease);z-index:4}
.rvd-cue.show{opacity:.85}
.rvd-cue .chev{width:18px;height:18px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);animation:rvdBob 1.6s var(--ease) infinite}
@keyframes rvdBob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

@keyframes rvdDrop{
  0%{opacity:0;transform:translateY(-140vh) rotate(var(--rot-start,-30deg));animation-timing-function:cubic-bezier(.45,0,.85,.45)}
  8%{opacity:1}
  55%{transform:translateY(0) rotate(var(--rot-land,8deg));animation-timing-function:cubic-bezier(.3,1.6,.5,1)}
  68%{transform:translateY(-46px) rotate(calc(var(--rot-land,8deg) + 6deg));animation-timing-function:cubic-bezier(.5,0,.8,.5)}
  82%{transform:translateY(0) rotate(var(--rot-tumble,12deg));animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
  90%{transform:translateY(-16px) rotate(calc(var(--rot-tumble,12deg) - 4deg));animation-timing-function:cubic-bezier(.5,0,.8,.5)}
  100%{opacity:1;transform:translateY(0) rotate(var(--rot-tumble,12deg))}
}
@keyframes rvdStraighten{
  from{opacity:1;transform:translateY(0) rotate(var(--rot-tumble,12deg))}
  to{opacity:1;transform:translateY(0) rotate(0deg)}
}
@keyframes rvdDoodleDrop{
  0%{opacity:0;transform:translateY(-120vh) rotate(var(--rot-start,0deg)) scale(.9);animation-timing-function:cubic-bezier(.45,0,.85,.45)}
  10%{opacity:1}
  60%{transform:translateY(0) rotate(var(--rot-land,20deg)) scale(1);animation-timing-function:cubic-bezier(.3,1.7,.5,1)}
  74%{transform:translateY(-30px) rotate(calc(var(--rot-land,20deg) + 10deg)) scale(1);animation-timing-function:cubic-bezier(.5,0,.8,.5)}
  100%{opacity:.85;transform:translateY(0) rotate(var(--rot-tumble,18deg)) scale(1)}
}
.rvd-roles.is-falling .rvd-tile{animation:rvdDrop var(--dur,1.25s) var(--delay,0s) both}
.rvd-roles.is-falling .rvd-doodle{animation:rvdDoodleDrop var(--dur,1.1s) var(--delay,0s) both}
.rvd-roles.is-ordered .rvd-tile{animation:rvdStraighten .7s var(--ease) forwards}
.rvd-roles.is-ordered .rvd-name,
.rvd-roles.is-ordered .rvd-desc{opacity:1;transform:translateY(0)}

/* ---- Phase 2 : story chapters ---- */
.rva-root *{box-sizing:border-box;margin:0;padding:0}
.rva-root{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;position:relative;z-index:5}
.rva-root .chapters{padding-top:0}
.rva-root .chapter{min-height:100vh;display:flex;align-items:center;padding:120px clamp(24px,7vw,110px) 100px;overflow:hidden}
.rva-root .chapter .inner{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.rva-root .chapter:nth-child(even) .inner{grid-template-columns:1fr 1.05fr}
.rva-root .chapter:nth-child(even) .text{order:2}
.rva-root .chapter:nth-child(even) .visual{order:1}

.rva-root .text{position:relative;z-index:2}
.rva-root .ch-index{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:26px;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) .05s,transform .7s var(--ease) .05s}
.rva-root .ch-index .dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:9px;vertical-align:middle}

.rva-root .tile{width:clamp(108px,12vw,144px);height:clamp(108px,12vw,144px);border-radius:30px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;box-shadow:0 24px 60px -24px var(--shadow,rgba(0,0,0,.4));opacity:0;transform:scale(.72) translateY(10px);transition:opacity .7s var(--ease),transform .85s var(--ease)}
.rva-root .tile svg{width:58%;height:58%}

.rva-root .ch-name{font-size:clamp(48px,7.4vw,92px);font-weight:700;letter-spacing:-.03em;line-height:.96;margin-bottom:24px;opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease) .12s,transform .75s var(--ease) .12s}
.rva-root .ch-desc{font-size:clamp(19px,2.1vw,25px);line-height:1.4;color:var(--mute);letter-spacing:-.01em;max-width:30ch;margin-bottom:36px;opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease) .22s,transform .75s var(--ease) .22s}
.rva-root .ch-link{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:600;letter-spacing:-.01em;text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease) .32s,transform .75s var(--ease) .32s}
.rva-root .ch-link .arrow{transition:transform .35s var(--ease)}
.rva-root .ch-link:hover .arrow{transform:translateX(5px)}

.rva-root .visual{position:relative;z-index:1}
.rva-root .frame{position:relative;aspect-ratio:3/4;width:100%;max-width:480px;margin:0 auto;border-radius:30px;overflow:hidden;background:#f2f2f4;box-shadow:0 40px 90px -40px rgba(0,0,0,.42);opacity:0;transform:scale(.9);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rva-root .frame::after{content:"";position:absolute;inset:0;border-radius:30px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);pointer-events:none}
.rva-root .frame img{position:absolute;left:0;width:100%;top:-8%;height:116%;object-fit:cover;object-position:center;will-change:transform;transform:translate3d(0,0,0)}
.rva-root .frame .ribbon{position:absolute;left:18px;bottom:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);box-shadow:0 8px 24px -10px rgba(0,0,0,.3)}
.rva-root .frame .ribbon i{width:8px;height:8px;border-radius:999px;display:inline-block}

.rva-root .chapter.in .ch-index,
.rva-root .chapter.in .ch-name,
.rva-root .chapter.in .ch-desc,
.rva-root .chapter.in .ch-link{opacity:1;transform:none}
.rva-root .chapter.in .tile{opacity:1;transform:none}
.rva-root .chapter.in .frame{opacity:1;transform:scale(1)}

.rva-root .coda{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 24px 120px;gap:26px}
.rva-root .coda h2{font-size:clamp(34px,5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1}
.rva-root .coda p{font-size:19px;color:var(--mute);max-width:34ch;letter-spacing:-.01em}
.rva-root .coda a{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.01em;padding:15px 28px;border-radius:999px;transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 16px 40px -18px rgba(31,143,95,.7)}
.rva-root .coda a:hover{transform:translateY(-2px);box-shadow:0 22px 50px -18px rgba(31,143,95,.8)}

@media (max-width:860px){
  .rva-root .chapter{padding:108px 24px 80px;min-height:auto}
  .rva-root .chapter .inner,
  .rva-root .chapter:nth-child(even) .inner{grid-template-columns:1fr;gap:40px}
  .rva-root .chapter:nth-child(even) .text{order:1}
  .rva-root .chapter:nth-child(even) .visual{order:2}
  .rva-root .frame{max-width:420px}
  .rva-root .ch-desc{max-width:36ch}
}
@media (max-width:760px){
  .rvd-row{gap:26px 14px;padding-top:8px}
  .rvd-role{width:42%;transform:none}
  .rvd-role.--r-owner,.rvd-role.--r-walker,.rvd-role.--r-vet,.rvd-role.--r-shop,.rvd-role.--r-shelter{--drop-y:0px}
  .rvd-thread{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rvd-stage{height:auto}
  .rvd-pin{position:static;height:auto;padding:120px 0}
  .rvd-tile{opacity:1;transform:none;animation:none!important}
  .rvd-doodle{opacity:.85;transform:none;animation:none!important}
  .rvd-role{transform:none}
  .rvd-name,.rvd-desc{opacity:1;transform:none;transition:none}
  .rvd-thread{opacity:1}
  .rvd-thread #rvd-thread-path{stroke-dashoffset:0!important}
  .rvd-cue{display:none}
  .rva-root .ch-index,.rva-root .ch-name,.rva-root .ch-desc,.rva-root .ch-link,.rva-root .tile,.rva-root .frame{opacity:1!important;transform:none!important;transition:none!important}
  .rva-root .frame img{transform:none!important;top:0;height:100%}
  .rva-root .coda a{transition:none}
}

/* ============================================================
   SHARED INTERACTION COMPONENTS (reusable across all pages)
   1) .scrub   pinned device showcase   2) .progbar  progress bar
   3) .steps3  connector steps          4) .tilt     pointer tilt
   5) .reveal-l/.reveal-r directional   6) .doodle-bookend drift
   Role accent via --rc (default brand green). Fully namespaced.
   ============================================================ */

/* ---------- 1) .scrub — pinned device screenshot showcase ---------- */
.scrub{position:relative}
.scrub-rail{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);
  max-width:var(--maxw);margin:0 auto;padding:0 30px;align-items:start}
/* sticky stage holds the phone centred while copy steps scroll past */
.scrub-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
/* soft role-tinted ambient glow behind the device so it feels designed, not floating */
.scrub-stage::before{content:"";position:absolute;z-index:0;width:min(82%,440px);aspect-ratio:1/1.15;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--rc,var(--green)) 32%,transparent), transparent 66%);
  filter:blur(48px);opacity:.72;pointer-events:none}
.scrub-phone{--w:clamp(286px,29vw,350px);--ro:calc(var(--w)*.166);position:relative;z-index:1;width:var(--w);aspect-ratio:1206/2622;
  border-radius:var(--ro);padding:calc(var(--w)*.03);
  /* brushed-titanium rail: lit corners, dark middle */
  background:linear-gradient(125deg,#6c6c74 0%,#2b2b30 13%,#45454d 27%,#1b1b1f 50%,#3e3e45 72%,#202024 87%,#56565e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 2px 5px rgba(0,0,0,.24),
    0 46px 84px -36px rgba(16,24,40,.6),
    0 20px 42px -28px rgba(16,24,40,.48)}
/* true-black inner bezel ring */
.scrub-phone::before{content:"";position:absolute;inset:calc(var(--w)*.03);border-radius:calc(var(--ro) - var(--w)*.03);background:#060607;z-index:1}
/* glass reflection sweep */
.scrub-phone::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:var(--ro);
  background:linear-gradient(122deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 77%,rgba(255,255,255,.06) 100%)}
.scrub-screen{position:absolute;top:calc(var(--w)*.046);left:calc(var(--w)*.046);
  width:calc(100% - var(--w)*.092);height:calc(100% - var(--w)*.092);
  border-radius:calc(var(--ro) - var(--w)*.046);overflow:hidden;object-fit:cover;object-position:top center;background:#000;
  opacity:0;transition:opacity .55s var(--ease);z-index:2}
.scrub-screen.is-on{opacity:1;z-index:3}
/* copy column: blocks dim until active */
.scrub-copy{display:flex;flex-direction:column}
.scrub-block{min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.32;filter:saturate(.6);transition:opacity .5s var(--ease),filter .5s var(--ease)}
.scrub-block.is-on{opacity:1;filter:none}
.scrub-block:first-child{min-height:46vh;padding-top:14vh}
.scrub-block:last-child{min-height:46vh;padding-bottom:14vh}
.scrub-k{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--rc,var(--green));margin-bottom:14px}
.scrub-block h3{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin-bottom:14px;max-width:16ch}
.scrub-block p{font-size:clamp(16px,1.9vw,20px);color:var(--mute);line-height:1.5;max-width:34ch}
@media(max-width:860px){
  /* stack: each block carries its own phone, simple reveal, no sticky */
  .scrub-rail{grid-template-columns:1fr;gap:0}
  .scrub-stage{display:none}
  .scrub-copy{display:block}
  .scrub-block{min-height:0;opacity:1;filter:none;padding:46px 0;text-align:center;align-items:center}
  .scrub-block:first-child,.scrub-block:last-child{min-height:0;padding:46px 0}
  .scrub-block h3,.scrub-block p{max-width:30ch;margin-left:auto;margin-right:auto}
  /* mobile inline phone (rendered by JS clone) */
  .scrub-mphone{--w:244px;position:relative;width:var(--w);aspect-ratio:1206/2622;margin:0 auto 26px;
    border-radius:calc(var(--w)*.158);padding:calc(var(--w)*.034);
    background:linear-gradient(145deg,#43434b 0%,#111114 20%,#070709 50%,#1b1b20 80%,#030304 100%);
    box-shadow:0 0 0 1px rgba(0,0,0,.9),0 0 0 3px #26262c,0 30px 56px -30px rgba(16,24,40,.55)}
  .scrub-mphone img{position:absolute;top:calc(var(--w)*.034);left:calc(var(--w)*.034);
    width:calc(100% - var(--w)*.068);height:calc(100% - var(--w)*.068);
    border-radius:calc(var(--w)*.124);overflow:hidden;object-fit:cover;object-position:top center;background:#0a0a0c}
}
@media(prefers-reduced-motion:reduce){
  .scrub-stage{position:static;height:auto}
  .scrub-block{opacity:1;filter:none;min-height:0;transition:none}
  .scrub-screen{transition:none}
}

/* ---------- 2) .progbar — scroll progress bar ---------- */
.progbar{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:79;transform-origin:0 50%;
  transform:scaleX(0);background:var(--rc,var(--green));pointer-events:none;
  transition:transform .08s linear}
@media(prefers-reduced-motion:reduce){.progbar{transition:none}}

/* ---------- 3) .steps3 — scroll-driven "how it works" connector ---------- */
.steps3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,56px);
  max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,48px) 30px}
/* connector svg holds a faint base track + a coloured progress line that fills with scroll */
.steps3-line{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:0;overflow:visible}
.steps3-line .s3-track{stroke:var(--rc,var(--green));stroke-width:2;stroke-linecap:round;opacity:.16}
.steps3-line .s3-fill{stroke:var(--rc,var(--green));stroke-width:2.6;stroke-linecap:round;
  /* --len set by JS; --prog 0..1 fills the line left->right tied to scroll progress */
  stroke-dasharray:var(--len,1);stroke-dashoffset:calc(var(--len,1) * (1 - var(--prog,0)));
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rc,#1f8f5f) 55%,transparent))}
/* travelling pulse / glow node riding the progress head */
.steps3-pulse{position:absolute;width:13px;height:13px;border-radius:50%;z-index:1;pointer-events:none;
  background:var(--rc,var(--green));opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--rc,#1f8f5f) 22%,transparent),
             0 0 16px 2px color-mix(in srgb,var(--rc,#1f8f5f) 60%,transparent);
  transition:opacity .4s var(--ease)}
.steps3.in .steps3-pulse{opacity:1}

.s3{position:relative;z-index:2;text-align:center}
.s3-n{width:58px;height:58px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:700;color:#fff;background:var(--rc,var(--green));margin-bottom:22px;
  box-shadow:0 18px 34px -14px color-mix(in srgb,var(--rc,#1f8f5f) 78%,transparent),
             0 0 0 1px color-mix(in srgb,var(--rc,#1f8f5f) 18%,transparent),
             0 0 0 7px color-mix(in srgb,var(--rc,#1f8f5f) 9%,transparent);
  opacity:0;transform:scale(.35);
  /* springy pop in */
  transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .5s var(--ease)}
.s3.active .s3-n{opacity:1;transform:none}
.s3.active .s3-n{box-shadow:0 18px 38px -12px color-mix(in srgb,var(--rc,#1f8f5f) 85%,transparent),
             0 0 0 1px color-mix(in srgb,var(--rc,#1f8f5f) 30%,transparent),
             0 0 0 9px color-mix(in srgb,var(--rc,#1f8f5f) 13%,transparent)}
/* heading + text rise & fade in as the connector reaches the step */
.s3 h4,.s3 p{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .6s var(--ease)}
.s3 h4{font-size:21px;letter-spacing:-.02em;margin-bottom:8px;font-weight:600;transition-delay:.06s}
.s3 p{font-size:15.5px;color:var(--mute);line-height:1.5;max-width:28ch;margin:0 auto;transition-delay:.12s}
.s3.active h4,.s3.active p{opacity:1;transform:none}

@media(max-width:760px){
  .steps3{grid-template-columns:1fr;gap:clamp(34px,9vw,46px)}
  /* vertical connector draws top->bottom; numbers sit left, content beside */
  .s3{text-align:left;display:grid;grid-template-columns:58px 1fr;column-gap:18px;align-items:start}
  .s3-n{margin-bottom:0;grid-row:1/3;align-self:start}
  .s3 h4{margin-top:6px}
  .s3 p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .steps3-line .s3-fill{stroke-dashoffset:0}
  .steps3-pulse{display:none}
  .s3-n,.s3 h4,.s3 p{opacity:1;transform:none;transition:none}
}

/* ---------- 4) .tilt — pointer tilt on hover ---------- */
.tilt{transform:perspective(900px) rotateX(0) rotateY(0);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change:transform}
.tilt.is-tilting{transition:transform .08s linear,box-shadow .2s var(--ease)}

/* ---------- 5) directional reveal (extends .reveal) ---------- */
.reveal-l,.reveal-r{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal-l{transform:translateX(-46px)}
.reveal-r{transform:translateX(46px)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal-l,.reveal-r{opacity:1;transform:none;transition:none}
}

/* ---------- 6) .doodle-bookend — faint drifting brand doodles ---------- */
.doodle-bookend{position:relative}
.db-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.doodle-bookend>:not(.db-layer){position:relative;z-index:1}
.db-doodle{position:absolute;opacity:.07;will-change:transform}
.db-doodle svg{display:block;width:100%;height:100%}
.db-doodle svg path,.db-doodle svg circle{fill:var(--rc,var(--green))}
@keyframes dbDrift{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-22px) rotate(calc(var(--rot,0deg) + 6deg))}}
.db-doodle{animation:dbDrift var(--d,14s) ease-in-out infinite var(--fd,0s)}
@media(prefers-reduced-motion:reduce){
  .db-doodle{animation:none}
}

/* ---------- 7) .postmark — photo flies in & "franks" into place like a posted print ---------- */
.postmark{position:relative;width:100%;max-width:520px;margin-inline:auto;perspective:1100px;--pm-rot:-3deg}
.postmark .pm-card{position:relative;background:#fff;border-radius:12px;padding:13px 13px 15px;
  box-shadow:0 34px 64px -30px rgba(16,24,40,.45),0 8px 20px -12px rgba(16,24,40,.3);
  transform:rotate(var(--pm-rot));transform-origin:52% 64%}
.postmark .pm-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
/* washi-tape pieces pinning the print to the page */
.postmark .pm-tape{position:absolute;z-index:5;height:30px;width:98px;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--rc,#E07A5F) 34%,transparent) 0 9px,
    color-mix(in srgb,var(--rc,#E07A5F) 17%,transparent) 9px 18px);
  box-shadow:0 2px 8px rgba(16,24,40,.13);mix-blend-mode:multiply;border-radius:1px}
.postmark .pm-tape::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.postmark .pm-tape-tl{top:-13px;left:14px;transform:rotate(-8deg)}
.postmark .pm-tape-br{right:10px;bottom:26px;width:78px;transform:rotate(-8deg)}
/* round franking postmark, top-right corner */
.postmark .pm-stamp{position:absolute;top:-6px;right:-10px;width:108px;height:108px;z-index:6;
  color:var(--rc,#E07A5F);transform:rotate(-13deg) scale(.6);opacity:0;mix-blend-mode:multiply;
  transition:opacity .5s var(--ease) .58s,transform .6s cubic-bezier(.34,1.56,.64,1) .58s}
.postmark.in .pm-stamp{opacity:.66;transform:rotate(-13deg) scale(1)}
/* fly-in + stamp-down */
.postmark:not(.in) .pm-card{opacity:0}
.postmark.in .pm-card{animation:pmDrop .92s cubic-bezier(.2,.8,.2,1) both}
@keyframes pmDrop{
  0%  {opacity:0;transform:translate(54px,-128px) rotate(-17deg) scale(1.15);filter:blur(2px)}
  60% {opacity:1;transform:translate(0,9px) rotate(calc(var(--pm-rot) + 4deg)) scale(.982);filter:blur(0)}
  78% {transform:translate(0,-3px) rotate(calc(var(--pm-rot) - 1.5deg)) scale(1.006)}
  100%{opacity:1;transform:rotate(var(--pm-rot)) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .postmark:not(.in) .pm-card,.postmark.in .pm-card{opacity:1;animation:none;transform:rotate(var(--pm-rot))}
  .postmark.in .pm-stamp{opacity:.6;transform:rotate(-13deg)}
}
@media(max-width:860px){
  .postmark{max-width:440px}
  .postmark .pm-stamp{width:88px;height:88px}
}

/* ---------- 7b) .feat-media-xl + .zoom-scroll — larger feature image that scales with scroll ---------- */
.feature.feat-media-xl{grid-template-columns:1.18fr .82fr}
.feature.feat-media-xl.flip{grid-template-columns:.82fr 1.18fr}
.feature.feat-media-xl .figure{aspect-ratio:4/3}
@media(max-width:860px){.feature.feat-media-xl,.feature.feat-media-xl.flip{grid-template-columns:1fr}}
/* JS sets --zs (1 → ~1.07) from scroll progress; image eases toward it */
.zoom-scroll img{transform:scale(var(--zs,1));transition:transform .15s linear;will-change:transform}
@media(prefers-reduced-motion:reduce){.zoom-scroll img{transform:none}}

/* ---------- 8) .journey — playful illustrated map: apply → approved → first adoption ---------- */
.journey{position:relative;max-width:var(--maxw);margin:clamp(28px,5vw,56px) auto 0;padding:0 30px;
  --rc:#E07A5F}
.journey-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);align-items:start;z-index:2}
/* the winding dashed route + drawn-on progress line live in this svg (sized by JS) */
.journey-route{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.journey-route .jr-track{fill:none;stroke:var(--rc);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1 9;opacity:.34}
.journey-route .jr-fill{fill:none;stroke:var(--rc);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:var(--len,1);stroke-dashoffset:calc(var(--len,1) * (1 - var(--prog,0)));
  filter:drop-shadow(0 1px 5px color-mix(in srgb,var(--rc) 55%,transparent))}
/* the little traveller (dog) that rides the route as you scroll */
.journey .jr-dog{position:absolute;left:0;top:0;z-index:3;font-size:30px;line-height:1;
  /* scaleX(-1) so the dog faces its direction of travel (left→right), not backwards */
  transform:translate(-50%,-58%) scaleX(-1);opacity:0;transition:opacity .4s var(--ease);
  filter:drop-shadow(0 6px 8px rgba(16,24,40,.28))}
.journey.in .jr-dog{opacity:1;animation:jrBob 1.1s ease-in-out infinite}
@keyframes jrBob{0%,100%{margin-top:0}50%{margin-top:-5px}}

.jstop{position:relative;text-align:center;z-index:2}
.jstop-disc{position:relative;width:84px;height:84px;border-radius:26px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  box-shadow:0 20px 36px -16px var(--c2),0 0 0 1px rgba(255,255,255,.4) inset;
  transform:rotate(-4deg) scale(.45);opacity:0;
  transition:transform .65s cubic-bezier(.34,1.56,.64,1),opacity .45s var(--ease)}
.jstop-disc svg{width:40px;height:40px;display:block}
.jstop-disc::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 55%,transparent);transition:box-shadow .5s var(--ease)}
.jstop.active .jstop-disc{transform:rotate(0) scale(1);opacity:1}
.jstop.active .jstop-disc::after{box-shadow:0 0 0 10px color-mix(in srgb,var(--c2) 0%,transparent),
  0 0 0 7px color-mix(in srgb,var(--c2) 16%,transparent)}
/* little orbiting spark on each stop */
.jstop-disc .jr-spark{position:absolute;width:16px;height:16px;top:-7px;right:-6px;color:#fff;
  opacity:0;transform:scale(0) rotate(-20deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .2s,opacity .4s .2s}
.jstop.active .jstop-disc .jr-spark{opacity:.95;transform:scale(1) rotate(0)}
.jstop-k{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c2);margin-bottom:6px;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s}
.jstop h4{font-size:21px;letter-spacing:-.02em;font-weight:600;margin-bottom:7px;
  opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease) .14s,transform .55s var(--ease) .14s}
.jstop p{font-size:15.5px;color:var(--mute);line-height:1.5;max-width:26ch;margin:0 auto;
  opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease) .2s,transform .55s var(--ease) .2s}
.jstop.active .jstop-k,.jstop.active h4,.jstop.active p{opacity:1;transform:none}

@media(max-width:760px){
  .journey-grid{grid-template-columns:1fr;gap:clamp(30px,8vw,44px)}
  .journey-route{display:none}
  .journey .jr-dog{display:none}
  /* vertical dotted spine between stacked stops */
  .jstop:not(:last-child)::before{content:"";position:absolute;left:50%;top:84px;bottom:-34px;width:2px;
    transform:translateX(-50%);background:linear-gradient(var(--rc),var(--rc)) 0 0/2px 8px repeat-y;opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .jstop-disc,.jstop-k,.jstop h4,.jstop p,.jstop-disc .jr-spark{opacity:1;transform:none;transition:none}
  .journey.in .jr-dog{animation:none}
  .journey-route .jr-fill{stroke-dashoffset:0}
}