/* Turnkey Launch preview, pass 2 (2026-10-20): the Oryzo standard in Turnkey colors.
   Ground and palette from TK Brand Files/TURNKEY_BRAND_STYLE_GUIDE.md (dark-first) and the TK AI brand guide.
   Function colors: CFO emerald, AI blue, Growth hot magenta, People neon magenta, Operations cyan, Sales gold.
   One light inversion (the proof sheet). Type: Plus Jakarta Sans. */
:root{
  --ground:#0E0A08;--ground2:#1A130F;--glass:rgba(244,244,244,.06);--ink:#F4F4F4;--ink2:rgba(244,244,244,.74);--muted:#B9AFA4;--label:#CFC6BB;
  --line:rgba(244,244,244,.24);--paper:#EFEDE7;--onpaper:#0A0A0A;--onpaper2:#3D3D3D;
  --cfo:#00E676;--ai:#005EFF;--growth:#FF1564;--people:#BD22A7;--ops:#7DE0FF;--sales:#E0B90B;
  --irid:linear-gradient(90deg,#00E676,#7DE0FF 22%,#005EFF 42%,#BD22A7 62%,#FF1564 80%,#E0B90B);
  --gutter:clamp(20px,5vw,72px);--max:1320px;--sec:clamp(96px,12vw,170px);
  --ease:cubic-bezier(.16,1,.3,1);color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}img,video{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
main{position:relative;z-index:1}

/* warm brand corner light behind everything, like Oryzo's radial ground */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90vmax 75vmax at 8% 112%,rgba(122,64,30,.55),rgba(60,32,16,.25) 45%,transparent 72%),radial-gradient(70vmax 60vmax at 105% 40%,rgba(70,38,20,.35),transparent 65%),radial-gradient(60vmax 50vmax at 0% 105%,rgba(224,185,11,.10),transparent 60%),radial-gradient(55vmax 45vmax at 100% -5%,rgba(0,94,255,.10),transparent 60%),radial-gradient(40vmax 40vmax at 100% 100%,rgba(189,34,167,.07),transparent 60%)}
.glow{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.glow.on{opacity:1}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.045em;line-height:.98}
h1{font-size:clamp(2.5rem,min(6.4vw,11svh),6.2rem);max-width:14ch}
h2{font-size:clamp(2.2rem,min(5.2vw,10svh),4.8rem);max-width:15ch}
h3{font-size:clamp(1.2rem,1.5vw,1.45rem);letter-spacing:-.025em;line-height:1.12}
h1,h2{text-wrap:balance}
.eyebrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin:0 0 26px}
.eyebrow b{color:var(--ink);font-weight:800}
.lede{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.45;color:var(--ink2);max-width:36ch;margin:22px 0 0}
.note{font-size:14px;color:var(--muted);margin:28px 0 0;max-width:60ch}
.accent-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 12px var(--c,transparent);flex:none}
.irid{background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}

/* hand-drawn strokes */
.hand{position:relative;display:inline-block;white-space:nowrap}
.hand .stroke{position:absolute;pointer-events:none;overflow:visible}
.hand.u .stroke{left:-2%;width:104%;bottom:-.16em;height:.3em}
.hand.o .stroke{left:-4%;top:-18%;width:108%;height:136%}
.stroke path{fill:none;stroke:url(#irid);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .5s}
.hand.in .stroke path,.annot.in .stroke path{stroke-dashoffset:0}
html:not(.js) .stroke path{stroke-dashoffset:0}

/* letter flip hover */
.flip{display:inline-flex;overflow:hidden;line-height:1.25;height:1.25em;vertical-align:middle}
.flip > span{display:inline-block;white-space:pre;transition:transform .5s var(--ease);text-shadow:0 1.25em 0 currentColor}
a:hover .flip > span,a:focus-visible .flip > span{transform:translateY(-1.25em)}

/* ---------- nav and the flying wordmark ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .4s,box-shadow .4s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.nav.solid{background:rgba(11,11,12,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(244,244,244,.08)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:26px;width:auto}
.brand .sep{width:1px;height:22px;background:var(--line)}
.navword{font-weight:800;font-size:15px;letter-spacing:.04em;line-height:1;opacity:0}
.nav.docked .navword{opacity:1}
.bigword{position:fixed;z-index:61;left:var(--gutter);top:calc(84px + env(safe-area-inset-top,0px));font-weight:800;font-size:clamp(68px,12vw,200px);letter-spacing:-.04em;line-height:1;transform-origin:0 0;pointer-events:none;will-change:transform;color:var(--ink)}
.bigword.gone{visibility:hidden}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav nav a:not(.btn){text-decoration:none;opacity:.82}
.nav nav a:not(.btn):hover{opacity:1}
@media (max-width:820px){.nav nav a:not(.btn){display:none}.brand img{height:22px}.brand{gap:10px}}
@media (max-width:420px){.brand .sep,.navword{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--ground);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;padding:6px 6px 6px 24px;border-radius:999px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);white-space:nowrap;position:relative}
.btn i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ground);color:var(--ink);font-style:normal;font-size:18px;transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -8px rgba(125,224,255,.45),0 4px 30px -10px rgba(255,21,100,.5)}
.btn:hover i{transform:translateX(3px) rotate(-45deg)}
.btn.sm{font-size:13px;padding:4px 4px 4px 16px;gap:10px;letter-spacing:0;text-transform:none}.btn.sm i{width:30px;height:30px;font-size:14px}
.btn.glass{background:rgba(244,244,244,.1);color:var(--ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(244,244,244,.22)}
.btn.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--irid);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.btn.glass i{background:var(--ink);color:var(--ground)}
.tlink{font-weight:700;text-decoration:none;border-bottom:1px dotted currentColor;padding-bottom:2px}
.ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ground)}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;pointer-events:none}
.cursor-light{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(125,224,255,.16),rgba(189,34,167,.08) 40%,transparent 70%)}
.lit .cursor-light{opacity:1}
.hero.hub .scrim{background:linear-gradient(0deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.35) 34%,rgba(11,11,12,0) 55%),linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,0) 30%)}
.hero-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:clamp(64px,11svh,120px)}
.hero.hub h1{font-size:clamp(2.3rem,min(4.6vw,8.4svh),4.6rem);max-width:15ch}
.hero.hub .lede{margin-top:0}
.hero.hub .ctas{margin-top:26px}
.hero-label{position:absolute;z-index:2;right:var(--gutter);top:calc(96px + env(safe-area-inset-top,0px));margin:0;text-align:right;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;color:var(--ink2)}
.scrollcue{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scrollcue i{width:18px;height:18px;border-radius:50%;border:1px solid var(--muted);position:relative}
.scrollcue i::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;background:var(--ink);border-radius:2px;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}100%{transform:translateY(6px);opacity:0}}
.hero.lane .scrim{background:linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.66) 44%,rgba(11,11,12,.1) 78%),linear-gradient(0deg,rgba(11,11,12,.85),rgba(11,11,12,0) 45%),linear-gradient(180deg,rgba(11,11,12,.6),rgba(11,11,12,0) 22%)}
.hero-copy{position:relative;z-index:2;padding-top:calc(72px + env(safe-area-inset-top,0px) + clamp(28px,7svh,96px));padding-bottom:clamp(56px,10svh,110px)}
.hero.lane h1{font-size:clamp(2.3rem,min(5.8vw,10svh),5.6rem);max-width:15ch}
.motion-toggle{position:absolute;right:var(--gutter);bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:3;font:700 11px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;background:rgba(244,244,244,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);border:1px solid rgba(244,244,244,.18);border-radius:999px;padding:9px 14px;cursor:pointer}
@media (max-width:760px){
  .hero.hub{justify-content:flex-start}
  .hero.hub .hero-media{inset:9svh 0 auto 0;height:62svh}
  .bigword{font-size:17vw}
  .hero.hub .hero-media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,var(--ground),transparent)}
  .hero.hub .scrim{display:none}
  .hero-grid{grid-template-columns:1fr;gap:6px;padding-top:58svh;padding-bottom:84px}
  .hero.hub h1{font-size:clamp(2.1rem,9.6vw,2.7rem)}
  .hero-label{display:none}
  .hero.lane .scrim{background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.05) 24%,rgba(11,11,12,.55) 46%,rgba(11,11,12,.94) 72%,var(--ground) 100%)}
  .hero.lane .hero-copy{padding-top:38svh}
  .scrollcue{display:none}
  .motion-toggle{bottom:18px}
}

/* ---------- isn't just an agency ---------- */
.isnt{position:relative;height:115vh}
.isnt .stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.isnt-media{position:absolute;left:50%;top:50%;width:min(62vw,880px);aspect-ratio:16/9;transform:translate(-50%,-50%) scale(var(--s,1));
  -webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
.isnt-media video,.isnt-media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.isnt-grid{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:center;gap:40px}
.isnt-label{margin:0;font-weight:800;font-size:clamp(1.4rem,2.3vw,2.2rem);letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;max-width:9ch}
.isnt-copy{margin:0;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5;color:var(--ink2);max-width:26ch}
.dissolve .wd{display:inline-block;white-space:nowrap}.dissolve .ch{display:inline-block;will-change:opacity,filter}
@media (max-width:760px){
  .isnt{height:110vh}
  .isnt-media{width:120vw;top:50%}
  .isnt-grid{flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;padding-block:110px 60px}
  .isnt-copy{align-self:flex-end;text-align:right}
}

/* ---------- prism sequence ---------- */
.build{position:relative;height:135vh}
.build .stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.build .grid{display:grid;grid-template-columns:minmax(340px,.9fr) 1.5fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.build h2{font-size:clamp(2rem,min(3.8vw,8svh),3.6rem);max-width:none}
.build .seqbox{position:relative}
.build canvas{width:100%;aspect-ratio:1120/630;display:block;mix-blend-mode:lighten}
.build .seqbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s;mix-blend-mode:lighten}
.build .seqbox img.gone{opacity:0}
.lockline{position:absolute;left:0;right:0;top:-4%;margin:0;text-align:center;font-weight:700;font-size:clamp(2rem,4.6vw,4.6rem);letter-spacing:-.04em;line-height:1;pointer-events:none}
.lockline span{display:inline-block;opacity:0;transform:translateY(16px);filter:blur(10px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.lockline span:last-child{transition-delay:.15s}
.lockline span{background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:iridmove 6s linear infinite}
.locked .lockline span{opacity:1;transform:none;filter:none}
@keyframes iridmove{to{background-position:-200% 0}}
.fnlist{list-style:none;margin:30px 0 0;padding:0;display:grid}
.fnlist li{display:grid;grid-template-columns:14px 1fr;gap:4px 14px;align-items:baseline;padding:11px 0;border-top:2px dotted var(--line);opacity:.4;transition:opacity .6s var(--ease),transform .6s var(--ease);transform:translateX(-8px)}
.fnlist li.on{opacity:1;transform:none}
.fnlist li.on b{color:var(--c)}
.fnlist li[style*="--ai"].on b{color:#6E9BFF}
.fnlist b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;transition:color .6s}
.fnlist .d{grid-column:2;font-size:14px;color:var(--ink2);line-height:1.4}
.keep{margin-top:18px;font-size:14px;color:var(--ink2)}.keep b{color:var(--ink)}
@media (max-width:900px){
  .build{height:130vh}
  .build .grid{grid-template-columns:1fr;gap:4px}
  .build .seqbox{order:-1;margin-inline:calc(var(--gutter) * -1)}
  .build h2{font-size:clamp(1.8rem,7.6vw,2.5rem)}
  .fnlist{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:14px}
  .fnlist li{padding:7px 0}.fnlist .d{display:none}
  .keep{display:none}
  .lockline{font-size:clamp(1.5rem,7vw,2.2rem);top:0}
}
@media (min-width:901px) and (max-height:780px){.fnlist .d{display:none}.fnlist li{padding:7px 0}.keep{display:none}}
@media (max-width:900px) and (max-height:700px){.build .eyebrow{display:none}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding-block:clamp(28px,4vw,56px);border-block:2px dotted var(--line)}
.marquee .row{display:flex;gap:.45em;white-space:nowrap;font-weight:700;font-size:clamp(3.4rem,11vw,10rem);letter-spacing:-.05em;line-height:1.02;will-change:transform}
.marquee .row span{display:inline-flex;align-items:center;gap:.45em;color:var(--c)}
.marquee .row span:nth-child(even){color:var(--ink)}
.marquee .row span::after{content:"";width:.14em;height:.14em;border-radius:50%;background:var(--c);box-shadow:0 0 .3em var(--c)}

/* ---------- horizontal stages ---------- */
.stages{position:relative}
.stages .stick{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:clamp(90px,10svh,120px) 40px}
.track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gutter);will-change:transform}
.card{flex:none;width:clamp(260px,26vw,380px)}
.card .ph{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--ground2);box-shadow:inset 0 0 0 1px rgba(244,244,244,.08)}
.card .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c);box-shadow:0 0 24px 2px var(--c)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card .num{position:absolute;left:16px;top:14px;font-size:12px;font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.card h3{margin-top:18px;display:flex;align-items:center;gap:10px}
.card em{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin-top:8px}
.card[style*="--ai"] em{color:#6E9BFF}
.card p{margin:8px 0 0;font-size:15px;color:var(--ink2);line-height:1.45;max-width:32ch}
.stages .note{padding-inline:var(--gutter);margin-top:34px}
.swipe{display:none;padding-inline:var(--gutter);margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .stages .stick{position:static;min-height:0;padding-block:var(--sec) 0}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:start;width:78vw;max-width:340px}
  .stages .note{padding-bottom:var(--sec)}
  .swipe{display:block}
}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:var(--sec)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(44px,6vw,80px)}
.head .lede{margin:0}

/* ---------- timeline ---------- */
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 0;position:relative}
.tl .bar{border-radius:16px;padding:18px 20px;color:var(--onpaper);background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);box-shadow:0 0 50px -14px var(--c)}
.tl .bar[style*="--ai"],.tl .bar[style*="--growth"]{color:#fff}
.tl .bar b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tl .bar span{display:block;font-weight:800;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:-.02em;margin-top:4px;line-height:1.2}
.tl .bar small{display:block;font-size:13.5px;opacity:.9;margin-top:6px;line-height:1.4}
.tl.in .bar{transform:none}
.tl .bar:nth-child(2){transition-delay:.15s}.tl .bar:nth-child(3){transition-delay:.3s}.tl .bar:nth-child(4){transition-delay:.45s}
.tl .months{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-top:2px dotted var(--line);padding-top:12px;margin-top:8px}
@media (max-width:760px){.tl{grid-template-columns:1fr}.tl .bar{grid-column:1/-1!important}.tl .months{display:none}}

/* ---------- proof: the one light inversion, a sheet with a 50px top radius ---------- */
.proof{position:relative;z-index:2;background:var(--paper);color:var(--onpaper);border-radius:50px 50px 0 0;padding-block:var(--sec)}
.proof .eyebrow{color:#6B6B6B}.proof .eyebrow b{color:var(--onpaper)}
.proof .lede{color:var(--onpaper2)}.proof .note{color:#6B6B6B}

@media (max-width:900px){.proof{border-radius:32px 32px 0 0}}
.sheet{position:relative;z-index:3;background:var(--ground);border-radius:50px 50px 0 0;margin-top:-50px}
@media (max-width:900px){.sheet{border-radius:32px 32px 0 0;margin-top:-32px}}

/* ---------- terms split ---------- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split .media{border-radius:24px;overflow:hidden;aspect-ratio:4/5;clip-path:inset(12% 12% 12% 12% round 24px);transition:clip-path 1.4s var(--ease)}
.split .media.in{clip-path:inset(0 0 0 0 round 24px)}
.split .media img{width:100%;height:100%;object-fit:cover}
.rows{margin-top:34px;border-top:2px dotted var(--line)}
.rows div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:18px;padding:18px 0;border-bottom:2px dotted var(--line)}
.rows b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.rows span{font-size:15.5px;color:var(--ink2);line-height:1.45}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .media{aspect-ratio:16/11}.rows div{grid-template-columns:1fr;gap:4px}}

/* ---------- segment tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(420px,56vh,620px);border-radius:24px;overflow:hidden;color:#fff;text-decoration:none;background:var(--ground2);box-shadow:inset 0 0 0 1px rgba(244,244,244,.1)}
.tile video,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover video,.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.35) 45%,rgba(11,11,12,0) 70%)}
.tile::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;z-index:3;background:var(--c);box-shadow:0 0 30px 3px var(--c)}
.tile .tx{position:relative;z-index:2;padding:26px}
.tile h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.tile p{margin:10px 0 0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.82);max-width:30ch}
.tile .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:14px}
.tile .go i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ground);font-style:normal;transition:transform .5s var(--ease)}
.tile:hover .go i{transform:rotate(-45deg)}
.tile .tag{position:absolute;top:20px;left:22px;z-index:2;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tile:nth-child(3) img,.tile:nth-child(3) video{object-position:50% 88%}
@media (max-width:900px){.tiles{grid-template-columns:1fr}.tile{min-height:440px}}

/* ---------- compare ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px}
.cmp{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:15.5px}
.cmp th,.cmp td{padding:18px 16px;text-align:left;border-bottom:2px dotted var(--line)}
.cmp th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cmp td:first-child{font-weight:700;color:var(--ink)}
.cmp td{color:var(--ink2)}
.cmp .us{background:rgba(244,244,244,.07);color:var(--ink);font-weight:800;border-bottom-color:rgba(244,244,244,.12)}
.cmp th.us{border-radius:16px 16px 0 0;color:var(--ink);background:linear-gradient(rgba(244,244,244,.07),rgba(244,244,244,.07)),linear-gradient(90deg,rgba(0,230,118,.25),rgba(0,94,255,.25),rgba(255,21,100,.25))}
.cmp tr:last-child td.us{border-radius:0 0 16px 16px;border-bottom:0}
.cmp td.us::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:10px;background:var(--cfo);box-shadow:0 0 10px var(--cfo);vertical-align:1px}

/* ---------- media band ---------- */
.band{position:relative;min-height:clamp(480px,78svh,800px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ground)}
.band video,.band .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.5) 50%,rgba(11,11,12,.12) 100%)}
.band .wrap{position:relative;z-index:2;width:100%;padding-block:var(--sec) clamp(48px,7vw,90px)}
.band.sheet{border-radius:50px 50px 0 0}
.flow{list-style:none;padding:0;margin:clamp(40px,5vw,72px) 0 0;display:grid;grid-template-columns:repeat(6,1fr);position:relative;counter-reset:f}
.flow::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:rgba(244,244,244,.18)}
.flow::after{content:"";position:absolute;left:0;top:21px;height:2px;width:100%;background:var(--irid);transform-origin:left;transform:scaleX(var(--p,0))}
.flow li{position:relative;padding-right:14px;counter-increment:f}
.flow li::before{content:counter(f,decimal-leading-zero);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ground);border:1px solid rgba(244,244,244,.35);font-size:13px;font-weight:800;position:relative;z-index:1;transition:background .5s,border-color .5s,color .5s}
.flow li.on::before{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.flow li b{display:block;margin-top:16px;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
@media (max-width:860px){
  .flow{grid-template-columns:1fr;gap:0}
  .flow::before,.flow::after{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .flow::after{transform:scaleY(var(--p,0));transform-origin:top;background:linear-gradient(180deg,#00E676,#005EFF,#FF1564)}
  .flow li{display:flex;align-items:center;gap:16px;padding:10px 0}
  .flow li b{margin:0}
  .band video,.band .poster{object-position:50% 80%}
  .band.sheet{border-radius:32px 32px 0 0}
}

/* ---------- pains, before and after ---------- */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.pain .ph{aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--ground2)}
.pain .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pain:hover .ph img{transform:scale(1.04)}
.pain h3{margin-top:20px}
.pain p{margin:8px 0 0;color:var(--ink2);font-size:15.5px;line-height:1.45;max-width:30ch}
.pain:nth-child(2){margin-top:clamp(0px,6vw,90px)}
.pains.wide{grid-template-columns:1.3fr 1fr 1fr}.pains.wide .pain:nth-child(2){margin-top:0}.pains.wide .pain:first-child .ph{aspect-ratio:5/4}
@media (max-width:860px){.pains,.pains.wide{grid-template-columns:1fr;gap:40px}.pain:nth-child(2){margin-top:0}.pain .ph{aspect-ratio:4/3.4}}
.ba{margin-top:clamp(20px,3vw,40px);border-top:2px dotted var(--line)}
.ba-row{display:grid;grid-template-columns:clamp(84px,11vw,150px) 1fr 1fr;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(18px,2.6vw,30px) 0;border-bottom:2px dotted var(--line)}
.ba-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.ba-row small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ba-row b{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.ba-row span:not(.accent-dot){display:block;margin-top:6px;color:var(--ink2);font-size:15px;line-height:1.45;max-width:36ch}
.ba-row .was b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(244,244,244,.3)}
.ba-row .now small{color:var(--c)}
.ba-row .now[style*="--ai"] small{color:#6E9BFF}
@media (max-width:760px){.ba-row{grid-template-columns:72px 1fr;gap:12px 16px}.ba-row .now{grid-column:2}}

/* ---------- fit ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.checks{list-style:none;margin:34px 0 0;padding:0}
.checks li{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:2px dotted var(--line);font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.015em}
.checks li:first-child{border-top:2px dotted var(--line)}
.checks i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cfo);color:var(--onpaper);font-style:normal;font-size:14px;flex:none;box-shadow:0 0 16px -2px var(--cfo)}
@media (max-width:860px){.fit{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{border-top:2px dotted var(--line)}
.faq details{border-bottom:2px dotted var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-weight:700;font-size:clamp(1.1rem,1.8vw,1.45rem);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.6em;line-height:1;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 24px;color:var(--ink2);max-width:60ch;font-size:16.5px}

/* ---------- closer ---------- */
.cta{position:relative;min-height:clamp(560px,92svh,900px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ground)}
.cta video,.cta .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 42%,rgba(11,11,12,.82) 0%,rgba(11,11,12,.55) 40%,rgba(11,11,12,.1) 80%),linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,0) 22%)}
.cta .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta h2{max-width:14ch}.cta .lede{max-width:40ch}
@media (max-width:760px){.cta{min-height:0;padding-block:clamp(110px,18svh,170px)}}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;background:var(--ground);padding-block:72px 48px;border-top:2px dotted var(--line)}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot .flogo{height:32px;width:auto}
.foot p{color:var(--ink2);font-size:14.5px;margin:16px 0 0}
.foot .col{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot .col b{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.foot .col a{text-decoration:none;color:var(--ink)}
.foot .col a:hover{text-decoration:underline dotted}
.foot .fine{border-top:2px dotted var(--line);margin-top:48px;padding-top:20px;font-size:13px;color:var(--muted)}
@media (max-width:760px){.foot .grid{grid-template-columns:1fr}}

/* ---------- reveals (reverse on the way back up) ---------- */
.js .rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.js .split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .split-words .w > span{display:inline-block;transform:translateY(105%);transition:transform .85s var(--ease)}
.js .split-words.in .w > span{transform:none}
.split-words .pn{font-style:normal;margin-left:-.09em;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .js .rv,.js .split-words .w > span,.tl .bar,.split .media,.fnlist li,.lockline span,.stroke path{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important;filter:none!important;stroke-dashoffset:0!important}
  .lockline span{animation:none}
  .scrollcue i::after{animation:none}
}

/* ---------- reviewer pass 3 ---------- */
/* dotted dividers between stacked sections */
main > .sec + .sec > .wrap{border-top:2px dotted var(--line);padding-top:var(--sec)}
main > .sec + .sec{padding-top:0}
main > .sheet + .sec > .wrap{border-top:0}
/* photo heroes on the lanes share the Oryzo hero layout */
.hero.photo .scrim{background:linear-gradient(0deg,rgba(14,10,8,.94) 0%,rgba(14,10,8,.55) 38%,rgba(14,10,8,.1) 62%),linear-gradient(180deg,rgba(14,10,8,.7) 0%,rgba(14,10,8,0) 34%)}
.hero.photo .hero-media{filter:saturate(.92) contrast(1.04)}
@media (max-width:760px){
  .hero.hub h1{font-size:clamp(2rem,9vw,2.4rem)}
  .hero.hub .lede{margin-top:18px}
  .hero.photo .hero-media{inset:9svh 0 auto 0;height:58svh}
  .fnlist b{font-size:14px}
}
/* stage cards: glass panels, no stock photography */
.card .ph{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%),linear-gradient(160deg,rgba(244,244,244,.07),rgba(244,244,244,.02));
  box-shadow:inset 0 0 0 1px rgba(244,244,244,.12),inset 0 1px 0 rgba(255,255,255,.18)}
.card .ph::after{height:2px}
.card .num{left:22px;top:20px;text-shadow:none;color:var(--label)}
.card .big{font-weight:700;font-size:clamp(2.6rem,4vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--ink)}
.card em{margin-top:16px}
/* timeline: outlined cards, color on the dot and the month label only */
.tl .bar{background:rgba(244,244,244,.03);color:var(--ink);border:1px dotted rgba(244,244,244,.3);box-shadow:none}
.tl .bar[style*="--ai"],.tl .bar[style*="--growth"]{color:var(--ink)}
.tl .bar b{display:flex;align-items:center;gap:8px;color:var(--c);opacity:1}
.tl .bar b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.tl .bar[style*="--ai"] b{color:#6E9BFF}
.tl .bar small{color:var(--ink2)}
/* comparison as three statements */
.vsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.vs{border-top:2px dotted var(--line);padding-top:24px}
.vs h3{font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.035em}
.vs p:not(.eyebrow){margin:14px 0 0;color:var(--ink2);font-size:15.5px;line-height:1.5;max-width:32ch}
.vs .eyebrow{margin-bottom:14px}
.vs.us{position:relative;border:0;padding:24px;border-radius:24px;background:linear-gradient(160deg,rgba(244,244,244,.08),rgba(244,244,244,.02))}
.vs.us::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--irid);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vs.us::after{content:"";position:absolute;inset:auto 10% -30px;height:60px;background:var(--irid);filter:blur(40px);opacity:.35;z-index:-1}
@media (max-width:860px){.vsrow{grid-template-columns:1fr}}
/* questions: an editorial numbered list */
.faq{border-top:0;display:grid;gap:0}
.qa{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:22px 0;border-top:2px dotted var(--line)}
.qa .n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--label);padding-top:6px}
.qa h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.qa p{grid-column:2;margin:4px 0 0;color:var(--ink2);font-size:15.5px;max-width:58ch}
/* footer closes on one giant line */
.foot .footline{margin:56px 0 0;font-weight:800;font-size:clamp(2.4rem,9.2vw,9.4rem);letter-spacing:-.055em;line-height:1.12;padding-bottom:.04em;white-space:nowrap;
  background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.foot .fine{margin-top:28px}
.sheet{background:linear-gradient(180deg,var(--ground) 0,var(--ground) 140px,rgba(14,10,8,0) 640px)}
.band.sheet{background:var(--ground)}
/* frames: warm fill + lighten composite in the canvas, soft vignette edge so the render box never shows */
.build canvas,.build .seqbox img{mix-blend-mode:normal;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.hero.photo .scrim{background:linear-gradient(0deg,rgba(14,10,8,.96) 0%,rgba(14,10,8,.72) 30%,rgba(14,10,8,.18) 62%),linear-gradient(180deg,rgba(14,10,8,.82) 0%,rgba(14,10,8,.42) 26%,rgba(14,10,8,0) 46%)}
@media (max-width:760px){.hero.photo .hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,10,8,.8) 0%,rgba(14,10,8,.2) 40%,rgba(14,10,8,0) 60%)}}
.foot .footline{background-size:100% 100%;width:fit-content}
@media (max-width:900px){.card .ph{aspect-ratio:5/4}}

/* ---------- reviewer pass 4 ---------- */
/* function labels carry their brand color all the time; the active one lights up */
.fnlist li{opacity:.66}
.fnlist li b{color:var(--c)}
.fnlist li[style*="--ai"] b{color:#6E9BFF}
.fnlist li.on{opacity:1}
.fnlist li.on .accent-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent),0 0 16px var(--c)}
/* proof: one tilted hero screen straightening on scroll, the rest in a strip */
.proofhero{position:relative;perspective:1800px;margin-top:clamp(10px,2vw,24px)}
.shot{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(10,10,10,.35),0 0 0 1px rgba(10,10,10,.08)}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ECECEC;border-bottom:1px solid rgba(10,10,10,.08)}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:#CFCFCF}
.shot .chrome span{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6B6B6B}
.shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot figcaption{padding:12px 14px 14px;font-size:13.5px;color:var(--onpaper2);line-height:1.4}
.shot figcaption b{color:var(--onpaper);margin-right:4px}
.shot.big{width:72%;transform-origin:30% 100%;transform:rotateX(calc(var(--t,1) * 14deg)) rotateY(calc(var(--t,1) * -10deg)) rotateZ(calc(var(--t,1) * 1.5deg));box-shadow:0 60px 90px -40px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.08);will-change:transform}
.shot.big figcaption{font-size:15px}
.annot{position:absolute;left:calc(72% + 18px);top:18%;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-weight:700;font-size:clamp(1.1rem,1.8vw,1.6rem);letter-spacing:-.02em;line-height:1.15;color:var(--onpaper);pointer-events:none}
.annot .stroke{position:static;width:120px;height:80px;transform:scaleX(-1) rotate(-12deg)}
.annot .stroke path{stroke-width:3.6}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,5vw,64px)}
.strip .shot figcaption{font-size:12.5px}
@media (max-width:900px){
  .shot.big{width:100%}
  .annot{position:static;flex-direction:row;align-items:center;margin-top:18px}
  .annot .stroke{width:64px;height:44px;transform:rotate(-70deg)}
  .strip{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip .shot{scroll-snap-align:start}
}
/* stage cards: shorter, with a hand-drawn icon */
.card .ph{aspect-ratio:1/1;justify-content:space-between}
.card .num{position:static}
.card .ico{width:56px;height:56px;margin-top:auto;margin-bottom:14px;overflow:visible}
.card .ico path{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--c))}
.card[style*="--ai"] .ico path{stroke:#6E9BFF}
@media (max-width:900px){.card .ph{aspect-ratio:5/4}.card .ico{width:44px;height:44px}}
/* merged section: ninety days beside the terms, questions below */
.detgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.months{list-style:none;margin:0;padding:0;border-top:2px dotted var(--line)}
.months li{display:grid;grid-template-columns:130px 1fr;gap:4px 18px;padding:18px 0;border-bottom:2px dotted var(--line)}
.months b{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.months li[style*="--ai"] b{color:#6E9BFF}
.months b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.months span{font-weight:700;font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:-.02em}
.months small{grid-column:2;font-size:14.5px;color:var(--ink2);line-height:1.45}
.det .rows{margin-top:0}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,96px);margin-top:clamp(48px,6vw,80px)}
.qgrid .qa:last-child:nth-child(odd){grid-column:1}
@media (max-width:860px){.detgrid,.qgrid{grid-template-columns:1fr}.months li{grid-template-columns:1fr}.months small{grid-column:1}}
/* closer: a scrim behind the words; on phones the prism sits below the copy */
.cta .wrap::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,110%);height:150%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(14,10,8,.8),rgba(14,10,8,.45) 60%,transparent);pointer-events:none}
@media (max-width:760px){
  .cta{min-height:100svh;align-items:flex-start;padding-block:110px 0}
  .cta video,.cta .poster{top:auto;bottom:0;height:58%}
  .cta::before{background:linear-gradient(180deg,var(--ground) 0%,var(--ground) 38%,rgba(14,10,8,.2) 62%,rgba(14,10,8,0) 100%)}
}
/* the phrase never clips on a phone */
@media (max-width:760px){.isnt-label{font-size:clamp(28px,8vw,44px);max-width:100%}}

/* ---------- reviewer pass 5 ---------- */
.track{scroll-padding-inline:var(--gutter)}
@media (max-width:900px){.card{flex:0 0 80vw}}
/* nav turns light over the light proof sheet */
.nav.onlight{background:rgba(244,244,244,.82);color:var(--onpaper);box-shadow:0 1px 0 rgba(10,10,10,.08)}
.nav.onlight .brand img{filter:invert(1)}
.nav.onlight .brand .sep{background:rgba(10,10,10,.2)}
.nav.onlight .btn{background:var(--onpaper);color:var(--paper)}.nav.onlight .btn i{background:var(--paper);color:var(--onpaper)}
.proof{scroll-margin-top:96px}
/* function list reads as content, not footnotes */
.fnlist b{font-size:clamp(16px,1.3vw,19px)}
.fnlist .d{font-size:14px;color:rgba(244,244,244,.74)}
/* lane heroes: the prism keeps center stage, copy sits on the open side */
.hero.copy-right .hero-grid{grid-template-columns:.85fr 1.15fr}
.hero.copy-right .hl,.hero.copy-right .hr{grid-column:2}
.hero.copy-right .hr{grid-row:2}
.hero.copy-left .hero-grid{grid-template-columns:1.1fr .9fr}
.hero.copy-left .hr{grid-column:1;grid-row:2}
.hero.photo .hero-grid{gap:18px;align-items:end}
.hero.photo h1{font-size:clamp(2.2rem,min(4.2vw,8svh),4.2rem)}
.hero.photo .scrim{background:linear-gradient(0deg,rgba(14,10,8,.9) 0%,rgba(14,10,8,.45) 30%,rgba(14,10,8,0) 55%),linear-gradient(180deg,rgba(14,10,8,.55) 0%,rgba(14,10,8,0) 30%)}
.hero.copy-right .scrim{background:linear-gradient(0deg,rgba(14,10,8,.9) 0%,rgba(14,10,8,.4) 30%,rgba(14,10,8,0) 55%),linear-gradient(270deg,rgba(14,10,8,.75) 0%,rgba(14,10,8,0) 50%),linear-gradient(180deg,rgba(14,10,8,.55) 0%,rgba(14,10,8,0) 30%)}
.hero.copy-left .scrim{background:linear-gradient(0deg,rgba(14,10,8,.9) 0%,rgba(14,10,8,.4) 30%,rgba(14,10,8,0) 55%),linear-gradient(90deg,rgba(14,10,8,.75) 0%,rgba(14,10,8,0) 50%),linear-gradient(180deg,rgba(14,10,8,.55) 0%,rgba(14,10,8,0) 30%)}
@media (max-width:760px){
  .hero.copy-right .hero-grid,.hero.copy-left .hero-grid{grid-template-columns:1fr}
  .hero.copy-right .hl,.hero.copy-right .hr,.hero.copy-left .hr{grid-column:1;grid-row:auto}
  .hero.photo .scrim{display:none}
  .hero.photo .hero-media video,.hero.photo .hero-media .poster{object-position:var(--op,50%) 50%}
  .hero.copy-right .hero-media{--op:30%}.hero.copy-left .hero-media{--op:86%}
}
/* what you keep: four statements */
.keeps{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);border-top:2px dotted var(--line)}
.keeps div{padding:20px 0;border-bottom:2px dotted var(--line)}
.keeps .eyebrow{margin-bottom:10px}
.keeps h3{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.25;font-weight:600}
@media (max-width:560px){.keeps{grid-template-columns:1fr}}
/* footer line: quiet, solid */
.foot .footline{background:none;color:rgba(244,244,244,.1);-webkit-background-clip:border-box;background-clip:border-box}

/* ---------- reviewer pass 6 ---------- */
/* hero: the prism sits below the wordmark, never under it */
@media (min-width:761px){
  .hero.hub:not(.photo) .hero-media{inset:13svh 0 0 0}
  .hero.hub:not(.photo) .hero-media::before{content:"";position:absolute;inset:0 0 auto 0;height:22%;z-index:1;background:linear-gradient(180deg,var(--ground),transparent)}
}
/* marquee gets its own room after the glow */
.marquee{margin-top:clamp(24px,3vw,48px)}
/* stage cards fade at the edges instead of being cut */
@media (min-width:901px){.track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6vw,#000 calc(100% - 6vw),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6vw,#000 calc(100% - 6vw),transparent 100%)}}
/* proof: warm cream sheet, the screen stays tilted like an object on a desk */
.nav.onlight{background:rgba(239,237,231,.86)}
.shot.big{transform:rotateX(calc(5deg + var(--t,1) * 10deg)) rotateY(calc(-4deg + var(--t,1) * -7deg)) rotateZ(calc(var(--t,1) * 1.5deg))}
.proofhero::before{content:"";position:absolute;left:4%;width:64%;bottom:-4%;height:30%;background:var(--irid);filter:blur(60px);opacity:.45;z-index:-1;pointer-events:none}
.proofhero{z-index:0}
.proof .chrome span{color:var(--onpaper2)}
/* readable small type */
.fnlist .d{font-size:15px;color:rgba(244,244,244,.78)}
.months small{font-size:15.5px}
.card p{font-size:16px}
/* questions as an accordion */
details.qa{display:block;padding:0}
details.qa summary{display:grid;grid-template-columns:44px 1fr 24px;gap:14px;align-items:baseline;padding:22px 0;cursor:pointer;list-style:none}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary i{position:relative;width:14px;height:14px;align-self:center}
details.qa summary i::before,details.qa summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--irid);transition:transform .4s var(--ease)}
details.qa summary i::after{transform:rotate(90deg)}
details.qa[open] summary i::after{transform:rotate(0)}
details.qa p{margin:-8px 0 0;padding:0 0 22px 58px}
/* footer closes on the iridescent line */
.foot .footline{background:var(--irid);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.55}

/* ---------- reviewer pass 7 ---------- */
/* the lock moment: one statement, one object. The list steps aside and the prism moves to center */
.build .copy,.build .seqbox{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
@media (min-width:901px){
  .build.locked .copy{opacity:0;transform:translateX(-48px)}
  .build.locked .seqbox{transform:translateX(-34%) scale(1.06)}
  .build.locked .lockline{font-size:clamp(3rem,6.2vw,6.6rem);left:-25%;right:-25%;top:-14%}
}
@media (max-width:900px){
  .fnlist{grid-template-columns:1fr}
  .build.locked .copy{opacity:0}
  .build.locked .seqbox{transform:translateY(20svh) scale(1.12)}
}
.fnlist{transition:opacity .8s var(--ease)}
/* stage cards: a giant colored word and one drawn mark, no boxes */
.card .ph{background:none;box-shadow:none;border-radius:0;border-top:2px dotted var(--line);aspect-ratio:auto;min-height:clamp(200px,28svh,300px);padding:20px 0 22px}
.card .ph::after{height:2px;inset:auto 0 0 0}
.card .num{left:0}
.card .big{color:var(--c)}
.card[style*="--ai"] .big{color:#6E9BFF}
/* proof: three prints scattered on the desk */
@media (min-width:901px){.strip{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(48px,6vw,88px)}}
@media (min-width:901px){
  .strip .shot:nth-child(1){transform:rotate(-2deg) translateY(18px)}
  .strip .shot:nth-child(2){transform:rotate(1.4deg) translateY(-12px)}
  .strip .shot:nth-child(3){transform:rotate(-.8deg) translateY(28px)}
  .strip .shot figcaption{font-size:14px}
}
/* less dead space after the questions */
.sec.det{padding-bottom:clamp(48px,6vw,96px)}
.det + .sec > .wrap{padding-top:clamp(56px,7vw,110px)}
/* footer: a solid cream line, iridescent only on hover */
.foot .footline{background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:#EFEDE7;opacity:.92;transition:color .6s var(--ease)}
.foot .footline:hover{color:transparent}

/* ---------- reviewer pass 8 ---------- */
/* the function list reads at a glance */
@media (min-width:901px){
  .fnlist b{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em}
  .fnlist .d{font-size:15.5px}
  .fnlist li{padding:13px 0}
}
@media (max-width:760px){
  .bigword{font-size:21.5vw}
  .isnt-media{width:150vw}
}
/* lane cards: text always on a dark base */
.tile::after{background:linear-gradient(0deg,rgba(12,9,7,.92) 0%,rgba(12,9,7,.6) 38%,rgba(12,9,7,0) 66%)}
/* the first ninety days: one drawn path across the page, not a table */
@media (min-width:901px){
  .det .detgrid{grid-template-columns:1fr}
  .det .months{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);border-top:0;padding-top:34px}
  .det .months::before{content:"";position:absolute;left:4px;right:0;top:3px;height:2px;border-radius:2px;background:var(--irid);opacity:.8}
  .det .months li{display:block;border-bottom:0;padding:0;position:relative}
  .det .months b{font-size:13px;margin-bottom:14px}
  .det .months b::before{position:absolute;top:-36px;left:0;width:10px;height:10px}
  .det .months span{display:block;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.15;margin-bottom:10px}
  .det .months small{display:block;font-size:15.5px}
  .det .keeps{grid-template-columns:repeat(4,1fr)}
  .det .keeps h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
  .det .qcol{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,96px)}
}
/* questions as large lines */
details.qa h3{font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.02em;line-height:1.2}

/* ---------- reviewer pass 9 ---------- */
/* brand color in the ground: each section carries its function's light */
.isnt{background:radial-gradient(55% 45% at 18% 35%,rgba(189,34,167,.14),transparent 72%)}
.stages{background:radial-gradient(50% 45% at 85% 30%,rgba(255,21,100,.13),transparent 70%),radial-gradient(45% 40% at 8% 92%,rgba(224,185,11,.10),transparent 70%)}
.det.sheet{background:radial-gradient(50% 40% at 88% 18%,rgba(0,230,118,.12),transparent 70%),linear-gradient(180deg,var(--ground) 0,var(--ground) 140px,rgba(14,10,8,0) 640px)}
.sec.det:not(.sheet){background:radial-gradient(50% 40% at 88% 18%,rgba(0,230,118,.12),transparent 70%)}
#fit{background:radial-gradient(50% 45% at 10% 20%,rgba(125,224,255,.11),transparent 70%)}
.foot{background:radial-gradient(60% 55% at 50% 100%,rgba(0,94,255,.16),transparent 72%);overflow:hidden}
/* the aside at the lock, Oryzo's small-caps punchline */
.lockaside{position:absolute;right:0;bottom:-10%;margin:0;text-align:right;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--label);opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s;pointer-events:none}
.locked .lockaside{opacity:1;transform:none}
@media (max-width:900px){.lockaside{display:none}}
/* footer bookend fills the width */
.foot .footline{font-size:min(11.5vw,13.5rem)}
/* mobile: quieter nav pill, stage row fades at the edge */
@media (max-width:820px){
  .nav:not(.onlight) .btn.sm{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(244,244,244,.5)}
  .nav:not(.onlight) .btn.sm i{background:rgba(244,244,244,.9);color:var(--ground)}
}
@media (max-width:900px){.track{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}}

/* ---------- pass 3: one persistent prism ---------- */
.prismstage{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.prismstage.on{opacity:1}
.prismstage.seq{mix-blend-mode:lighten}
.prismstage canvas{display:block;width:100%;height:100%}
.pk{position:absolute;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden}
.marquee,.foot,.band{position:relative}
/* not another agency: a short pin (pass 5 pacing) */
.isnt{height:175vh}
.isnt .isnt-label{font-size:clamp(1.6rem,2.8vw,2.8rem)}
/* six functions: a third of a screen per function, then a long lock (pass 5 pacing) */
.fx{position:relative;height:733vh}
.fx .stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.fxgrid{width:100%}
.fx .copy{max-width:min(520px,38vw);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.fx h2{font-size:clamp(2rem,min(3.8vw,8svh),3.6rem)}
.locked .fx .copy{opacity:0;transform:translateX(-48px)}
.fx .fnlist li{opacity:.32;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fx .fnlist li.on{opacity:.72}
.fx .fnlist li.cur{opacity:1;transform:translateX(10px)}
.fx .fnlist li.cur b{text-shadow:0 0 22px color-mix(in srgb,var(--c) 60%,transparent)}
.fx .lockline{position:absolute;left:0;right:0;top:15svh;font-size:clamp(3rem,6.2vw,6.6rem)}
.fx .lockaside{right:var(--gutter);bottom:12svh}
/* dense sections leave the right column to the prism */
@media (min-width:1101px){.park > .wrap{padding-right:max(var(--gutter),30vw)}}
@media (min-width:901px) and (max-width:1100px){.park > .wrap{padding-right:28vw}}
@media (min-width:901px){
  .park .det .keeps,.det.park .keeps{grid-template-columns:repeat(2,1fr)}
  .park .annot{left:auto;right:2%;top:calc(100% + 6px);bottom:auto}.park .annot .stroke{transform:scaleX(-1) rotate(-75deg)}
  .park .shot.big{width:100%}
}
/* who it is for: every industry, nonprofits first */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.ind .ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--ground2);position:relative}
.ind .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--c);box-shadow:0 0 18px var(--c)}
.ind .ph img{width:100%;height:100%;object-fit:cover}
.ind.lead{grid-column:span 2}
.ind.lead .ph{aspect-ratio:auto;height:calc(100% - 92px);min-height:260px}
.ind h3{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--c)}
.ind[style*="--ai"] h3{color:#6E9BFF}
.ind p{margin:6px 0 0;font-size:15.5px;color:var(--ink2);line-height:1.45;max-width:34ch}
.ind.lead h3{font-size:clamp(1.4rem,2vw,1.9rem)}
.dives{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2vw,28px);margin-top:clamp(48px,6vw,80px)}
.dives .eyebrow{grid-column:1/-1}
.dive{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;padding:18px 0;border-top:2px dotted var(--line);color:var(--ink);text-decoration:none}
.dive b{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.dive span:not(.accent-dot){grid-column:2;font-size:14.5px;color:var(--ink2)}
.dive i{font-style:normal;grid-row:1;grid-column:3;transition:transform .4s var(--ease)}
.dive:hover i{transform:translateX(6px)}
@media (max-width:900px){.inds{grid-template-columns:1fr 1fr}.ind.lead{grid-column:span 2}.ind.lead .ph{height:auto;aspect-ratio:16/10}.dives{grid-template-columns:1fr}}
@media (max-width:520px){.inds{grid-template-columns:1fr}.ind.lead{grid-column:auto}.ind .ph{aspect-ratio:16/11}}
/* the closer: words up top, the prism rests below them */
.cta{min-height:100svh;align-items:flex-start;padding-top:16svh}
@media (max-width:900px){
  .isnt{height:140vh}
  .fx{height:733vh}
  .fx .stick{align-items:flex-end;padding-bottom:6svh}
  .fx .copy{max-width:none}
  .fx .lockline{top:18svh;font-size:clamp(1.8rem,8vw,2.6rem)}
  .cta{padding-top:110px}
}
/* closer: copy on the left, the prism rests on the right */
@media (min-width:901px){
  .cta{justify-content:flex-start;text-align:left;align-items:center;padding-top:0}
  .cta .wrap{padding-right:max(var(--gutter),40vw)}
  .cta .wrap::before{display:none}
  .cta .ctas{justify-content:flex-start}
  .cta .lede{margin-inline:0}
}
.marquee{z-index:41}
.ac{color:var(--c);font-weight:inherit}

/* pass 4: the month row pins while the prism takes one pose per month; the current card and month carry full weight */
.mpath{position:relative}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mpath{height:360vh}
  .mstick{position:sticky;top:calc(50svh - 130px)}
  .months.live li{transition:opacity .7s var(--ease)}
  .months.live li:not(.cur){opacity:.38}
  .track.live .card{transition:opacity .7s var(--ease)}
  .track.live .card:not(.cur){opacity:.45}
}
/* pass 4: the function list leaves before the lock line arrives, so the two headlines never cross */
.locked .fx .copy{transition-duration:.45s}
.locked .fx .lockline span{transition-delay:.5s}.locked .fx .lockline span:last-child{transition-delay:.65s}
/* pass 5: phones get the same pinned pacing: stage cards slide sideways while pinned, the month row pins and steps */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .stages .stick{position:sticky;top:0;min-height:100svh;padding-block:84px 28px}
  .track{overflow:visible;scroll-snap-type:none;padding-bottom:0;-webkit-mask-image:none;mask-image:none}
  .swipe{display:none}
  .stages .note{padding-bottom:0}
  .mpath{height:300vh}
  .mstick{position:sticky;top:76px}
  .months.live li{transition:opacity .7s var(--ease)}
  .months.live li:not(.cur){opacity:.38}
  .track.live .card{transition:opacity .7s var(--ease)}
  .track.live .card:not(.cur){opacity:.45}
}

/* ---------- pass 5: client logo showcase (velocity-skewed dual carousel) ---------- */
.logos{position:relative;z-index:41;background:var(--ground);border-radius:50px 50px 0 0;margin-top:-50px;padding-block:var(--sec) clamp(48px,6vw,88px);overflow:hidden}
.logos .head{margin-bottom:0}
.lrows{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(36px,5vw,64px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lrow{position:relative;display:flex;width:max-content;will-change:transform;transform-origin:50% 50%}
.lset{display:flex;gap:clamp(12px,1.6vw,20px);margin:0;padding:0 clamp(12px,1.6vw,20px) 0 0;list-style:none}
.lg{position:relative;flex:none;width:clamp(150px,15vw,220px);aspect-ratio:2.1/1;border-radius:18px;background:var(--glass);border:1px solid rgba(244,244,244,.1);display:grid;place-items:center;transition:background .5s var(--ease),border-color .5s var(--ease),translate .5s var(--ease)}
.lg img{grid-area:1/1;width:66%;height:50%;object-fit:contain;transition:opacity .45s var(--ease),scale .5s var(--ease)}
.lg .c{opacity:0}
.lg:hover .c,.lg.on .c{opacity:1}
.lg:hover .m,.lg.on .m{opacity:0}
.lg:hover img,.lg.on img{scale:1.06}
.lg[data-g=l]:hover,.lg[data-g=l].on{background:var(--paper);border-color:var(--paper)}
.lg[data-g=d]:hover,.lg[data-g=d].on{background:#211915;border-color:rgba(244,244,244,.3)}
.logos .note{margin-top:clamp(28px,3vw,40px)}
@media (max-width:760px){.logos{border-radius:32px 32px 0 0;margin-top:-32px}.lg{width:140px;border-radius:14px}.lrows{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){
  .lrows{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .lrow{width:auto;transform:none!important}
  .lset{flex-wrap:wrap;justify-content:center;padding:0}
  .lset[aria-hidden]{display:none}
}
.lg.wide img{width:80%}
/* pass 5: min-height plus aspect-ratio forced the lead tile to 416px wide on phones and widened the whole page */
.ind{min-width:0}@media (max-width:900px){.ind.lead .ph{min-height:0}}
/* pass 5 review: the lead caption runs three lines at desktop widths; the peeking next stage card fades instead of cutting words */
@media (min-width:901px){.ind.lead .ph{height:calc(100% - 118px)}}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){.stages .track{-webkit-mask-image:none}.stages .stick{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 99%);mask-image:linear-gradient(90deg,#000 84%,transparent 99%)}}

/* ---------- pass 6 ---------- */
/* the mark is in the first paint: a static poster at the exact first pose, crossfaded to the live mark by prism.js */
.prismstage,.prismstage.on{opacity:1;transition:none;container-type:size}
.prismstage canvas{position:absolute;inset:0;opacity:0}
.mposter{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:calc(var(--s) * min(42cqw, 62cqh) * var(--k));max-width:none;height:auto;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .45s var(--ease)}
.prismstage.gone .mposter{opacity:0}
@media (max-width:900px){
  .prismstage{mix-blend-mode:lighten}
  .mposter{left:calc(var(--mx) * 100%);top:calc(var(--my) * 100%);width:calc(var(--ms) * min(42cqw, 62cqh) / .37)}
}
@media (prefers-reduced-motion:reduce){.prismstage{mix-blend-mode:lighten}}

/* nav: Industries opens a menu of every industry page (hover or keyboard focus) */
.ddn{position:relative}
.ddn > a{text-decoration:none;opacity:.82}
.ddm{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 6px;min-width:290px;display:grid;padding:10px;border-radius:18px;background:rgba(18,13,10,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(244,244,244,.12);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),translate .3s var(--ease),visibility 0s .3s;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}
.ddm::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.ddn:hover .ddm,.ddn:focus-within .ddm{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
.ddm a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;opacity:1!important}
.ddm a:hover,.ddm a:focus-visible{background:rgba(244,244,244,.08)}
.ddm a.all{margin-top:6px;border-top:1px dotted var(--line);border-radius:0 0 10px 10px;justify-content:space-between;color:var(--ink2)}
.ddm i{font-style:normal}
.nav.onlight .ddm{background:rgba(250,248,244,.97);box-shadow:0 30px 60px -20px rgba(10,10,10,.3),inset 0 0 0 1px rgba(10,10,10,.1)}
.nav.onlight .ddm a{color:var(--onpaper)}.nav.onlight .ddm a.all{color:var(--onpaper2);border-color:rgba(10,10,10,.2)}

/* dense sections: a smaller mark needs less of the right column */
@media (min-width:1101px){.park > .wrap{padding-right:max(var(--gutter),25vw)}}
@media (min-width:901px) and (max-width:1100px){.park > .wrap{padding-right:26vw}}

/* industry tiles are whole links to their pages; the lead caption sizes itself (pass 5 reserved a fixed 118px and taller captions ran into the next row) */
.ind{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;border-radius:20px;outline-offset:6px}
.ind .ph img{transition:transform 1.2s var(--ease)}
.ind:hover .ph img,.ind:focus-visible .ph img{transform:scale(1.05)}
.ind .itx{display:flex;flex-direction:column;align-items:flex-start;flex:none}
.ind .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);transition:color .4s var(--ease)}
.ind .go i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(244,244,244,.1);font-style:normal;letter-spacing:0;transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.ind:hover .go,.ind:focus-visible .go{color:var(--ink)}
.ind:hover .go i,.ind:focus-visible .go i{background:var(--c);color:var(--onpaper);transform:translateX(4px)}
.ind:focus-visible{outline:2px solid var(--c)}
@media (min-width:901px){.ind.lead .ph{flex:1 1 0;height:auto;min-height:220px;aspect-ratio:auto}}

/* two-column text blocks get the full width: the mark steps out (fade keys) instead of squeezing the copy */
.fit{grid-template-columns:1fr 1.12fr;gap:clamp(32px,5vw,88px)}
.fit h2{white-space:nowrap}
.rows div{grid-template-columns:minmax(130px,.34fr) 1fr}
.rows span{max-width:58ch}
.dright{position:relative}
.det .qcol .qa p,.qgrid .qa p{max-width:62ch}
@media (max-width:860px){.fit{grid-template-columns:1fr}.fit h2{white-space:normal}}
@media (max-width:560px){.rows div{grid-template-columns:1fr}}

/* industry pain cards without photos: a numbered card */
.pains.txt .pain{position:relative;padding:clamp(24px,2.6vw,36px);border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(244,244,244,.1);min-height:clamp(220px,22vw,300px);display:flex;flex-direction:column;justify-content:flex-end}
.pains.txt .pn{position:absolute;top:clamp(20px,2.2vw,30px);left:clamp(24px,2.6vw,36px);font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;background:var(--irid);-webkit-background-clip:text;background-clip:text;color:transparent}
.band.plain{min-height:clamp(420px,62svh,640px);background:radial-gradient(60% 60% at 80% 20%,rgba(0,94,255,.16),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(0,230,118,.12),transparent 70%),var(--ground)}
.band.plain::before{display:none}

/* proof, pass 6: lead screen, then a deck of prints that fans out on scroll, the client portal, and a reel */
.proof .pintro{position:relative}
.proof .deck{position:relative;margin-top:clamp(56px,7vw,110px)}
.dhead{text-align:center}
.dhead h3,.portal h3{font-size:clamp(1.6rem,2.8vw,2.6rem);letter-spacing:-.03em;line-height:1.1;margin:10px 0 0}
.prints{list-style:none;margin:0;padding:0}
.print{--p:1}
.print .shot{box-shadow:0 40px 70px -30px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.08)}
@media (min-width:901px){
  .proof .deck{height:230vh}
  .dstick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding-top:clamp(84px,11vh,120px);overflow:hidden}
  .prints{position:relative;flex:1;margin-top:28px;--w:min(26vw,380px,calc((100vh - 320px) / 1.4))}
  .print{position:absolute;left:50%;top:50%;width:var(--w);z-index:calc(10 - var(--i));
    transform:translate(-50%,-50%) translate(calc(var(--cx) * var(--w) * 1.08 * var(--p)), calc(var(--cy) * (var(--w) * .34 + 46px) * var(--p))) rotate(calc(var(--r0) * (1 - var(--p)) + var(--r) * var(--p)));will-change:transform}
  .print .shot figcaption{font-size:12.5px;padding:10px 12px 12px}
}
@media (max-width:900px){
  .dhead{text-align:left}
  .prints{margin-top:24px;padding-inline:var(--gutter)}
  .print{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));margin-bottom:28px;transform:rotate(var(--r))}
  .print:last-child{margin-bottom:0}
}
.portal{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(72px,9vw,140px)}
.portal p:not(.eyebrow){color:var(--onpaper2);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.5;max-width:42ch;margin:16px 0 0}
.pvis{position:relative;padding-bottom:22%}
.pvis .p1{width:84%;transform:rotate(-1.5deg)}
.pvis .p2{position:absolute;right:0;bottom:0;width:58%;transform:translateY(calc(var(--t,0) * 40px)) rotate(2.5deg);box-shadow:0 40px 70px -30px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.08)}
@media (max-width:900px){.portal{grid-template-columns:1fr}.pvis{padding-bottom:30%}}
.reel{position:relative;margin-top:clamp(72px,9vw,140px);overflow:hidden}
.rrow{display:flex;gap:clamp(14px,1.6vw,24px);list-style:none;margin:20px 0 0;padding:0 var(--gutter);width:max-content}
.rrow li{width:clamp(260px,28vw,400px);flex:none}
@media (min-width:901px){.rrow{transform:translateX(calc(var(--p,0) * -1 * var(--rw,0px)));will-change:transform}}
@media (max-width:900px){.rrow{width:auto;padding-bottom:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}.rrow::-webkit-scrollbar{display:none}.rrow li{width:78vw;scroll-snap-align:start}}
.proof .note{margin-top:clamp(28px,3vw,44px)}
@media (prefers-reduced-motion:reduce){.print{--p:1!important}}

/* reviews: verbatim quotes as large cards that stack on scroll, plus a slow marquee of the short ones */
.reviews{background:radial-gradient(50% 40% at 15% 20%,rgba(189,34,167,.14),transparent 70%),var(--ground)}
.qstack{display:grid;gap:clamp(18px,2vw,28px);margin-top:clamp(36px,4vw,56px)}
.qcard{position:sticky;top:calc(100px + var(--i) * 16px);margin:0;padding:clamp(28px,3.4vw,52px);padding-top:clamp(56px,5vw,72px);border-radius:28px;background:linear-gradient(160deg,#211915,#16100d);box-shadow:inset 0 0 0 1px rgba(244,244,244,.12),0 -20px 50px -20px rgba(0,0,0,.6);overflow:hidden}
.qcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c);box-shadow:0 0 30px 2px var(--c)}
.qcard .qm{position:absolute;top:clamp(4px,1vw,12px);left:clamp(22px,3vw,44px);font-size:clamp(4rem,7vw,6.5rem);line-height:1;font-weight:800;color:var(--c);opacity:.85}
.qcard blockquote{margin:0;font-size:clamp(1.45rem,2.6vw,2.4rem);line-height:1.22;letter-spacing:-.025em;font-weight:600;max-width:30ch}
.qcard figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:clamp(20px,2.4vw,32px);font-size:15px;color:var(--ink2)}
.qcard figcaption b{color:var(--ink);font-size:16px}
.qcard figcaption a{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--label);text-decoration:none}
.qcard figcaption a:hover{color:var(--ink)}
.qmarq{position:relative;display:flex;overflow:hidden;margin-top:clamp(48px,6vw,88px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.qrow{display:flex;gap:16px;list-style:none;margin:0;padding:0 16px 0 0;flex:none;animation:qm 60s linear infinite}
.qmarq:hover .qrow{animation-play-state:paused}
.qrow li{flex:none;width:clamp(280px,30vw,420px);padding:22px 24px;border-radius:20px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(244,244,244,.1);border-left:3px solid var(--c)}
.qrow q{display:block;font-size:17px;font-weight:600;line-height:1.35}
.qrow span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink2)}.qrow b{color:var(--ink)}
@keyframes qm{to{transform:translateX(-100%)}}
@media (max-width:900px){.qcard{top:calc(80px + var(--i) * 12px)}.qcard figcaption a{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.qrow{animation:none;flex-wrap:wrap}.qrow + .qrow{display:none}.qmarq{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}}

/* pass 6b: the reel prints tilt and stagger like the deck; the phone portal card stays inside the gutter */
@media (min-width:901px){.rrow{padding-block:28px 56px}.rrow li{transform:rotate(var(--rr,0deg)) translateY(var(--ry,0px));transition:transform .5s}.rrow li:nth-child(1){--rr:-2deg;--ry:10px}.rrow li:nth-child(2){--rr:1.5deg;--ry:-14px}.rrow li:nth-child(3){--rr:-1deg;--ry:18px}.rrow li:hover{--rr:0deg;--ry:-6px}}
@media (max-width:900px){.pvis .p2{right:3%;width:60%}}

/* ================= Turnkey Services draft (2026-10-22): parent brand hub, service sections, service pages ================= */
/* hub: the big word flies into the lockup, which already reads Turnkey Services, so the nav word itself stays invisible */
.hubpage:not(.svcpage) .nav .sep,.hubpage:not(.svcpage) .navword{opacity:0!important}
.bigword.long{font-size:clamp(46px,8.4vw,140px)}
/* a service, expanded: what it fixes, what we do, the first 90 days, a real screen, its page */
.svc .svgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,64px)}
.svc .svgrid > div > .eyebrow{margin-bottom:16px}
.fixes,.does{list-style:none;margin:0;padding:0}
.fixes li{padding:16px 0;border-top:2px dotted var(--line)}
.fixes b{display:block;font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:-.015em}
.fixes span{display:block;margin-top:6px;color:var(--ink2);font-size:15px;line-height:1.45;max-width:40ch}
.does{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.does li{padding:16px 18px 18px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(244,244,244,.08)}
.does b{display:flex;gap:10px;align-items:center;font-size:15.5px;letter-spacing:-.01em}
.does span{display:block;margin-top:6px;color:var(--ink2);font-size:14px;line-height:1.45}
.days{list-style:none;padding:0;margin:clamp(36px,4.5vw,64px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.days li{padding:22px 22px 24px;border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 72%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.days small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.days b{display:block;margin-top:10px;font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-.02em}
.days span{display:block;margin-top:8px;color:var(--ink2);font-size:14.5px;line-height:1.45}
.svproof{margin-top:clamp(36px,4.5vw,64px)}
.svproof .shot{max-width:880px}
.svlink{display:inline-flex;gap:12px;align-items:center;margin-top:clamp(28px,3.4vw,44px);color:var(--ink);font-weight:800;text-decoration:none;font-size:15px;letter-spacing:.02em;border-bottom:2px solid var(--c);padding-bottom:6px}
.svlink i{font-style:normal;transition:transform .3s var(--ease)}.svlink:hover i,.svlink:focus-visible i{transform:translateX(4px)}
@media (max-width:900px){.svc .svgrid{grid-template-columns:1fr}.days{grid-template-columns:1fr}}
@media (max-width:560px){.does{grid-template-columns:1fr}}
/* service pages: no photo, a pool of the service color under the glass mark */
.hero.svchero .hero-media{background:radial-gradient(55% 50% at 50% 56%,color-mix(in srgb,var(--c) 20%,transparent),transparent 72%),var(--ground)}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.incl article{padding:22px 24px 24px;border-radius:20px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(244,244,244,.08)}
.incl h3{display:flex;gap:12px;align-items:center;font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.02em;margin:0}
.incl p{margin:10px 0 0;color:var(--ink2);font-size:15px;line-height:1.5;max-width:44ch}
@media (max-width:700px){.incl{grid-template-columns:1fr}}
.launchband .btn{margin-top:30px}

/* reduced motion: the six-function lock line shows only once the list has left (body.locked), never on top of the headline */
@media (prefers-reduced-motion:reduce){body:not(.locked) .fx .lockline{visibility:hidden}}

/* 2026-10-23 Ricky: the solid nav bar cut the mark's glow off in a hard horizontal line. The dark bar now fades out
   below the nav instead of ending in an edge, so light behind it falls off softly. The cream state keeps its sheet. */
.nav.solid:not(.onlight){background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav.solid:not(.onlight)::before{content:"";position:absolute;inset:0 0 -64px 0;z-index:-1;pointer-events:none;background:rgba(11,11,12,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%)}