/* Operant homepage film.
   One continuous black stage lit by brand orange. Scenes are scrubbed by scroll
   (progress in --p, written by film.js). Without film.js, or with reduced motion,
   every scene renders in its finished state in normal document flow. */

:root{--or:#d98a1d;--or-hi:#f2a63c;--or-glow:rgba(217,138,29,.32);--bone:#f3f0e8;--bone-2:rgba(243,240,232,.66);--bone-3:rgba(243,240,232,.56);--hair:rgba(243,240,232,.12);--ease:cubic-bezier(.2,.7,.1,1)}
.home,body:has(.op-opening){background:#000;color:var(--bone)}
.home main{background:#000}
.home .site-header.overlay{background:rgba(0,0,0,.72);border-bottom:1px solid rgba(243,240,232,.07);backdrop-filter:saturate(140%) blur(16px);-webkit-backdrop-filter:saturate(140%) blur(16px)}
.home h2 em,.home h1 em{color:var(--or)}
.home .wrap{position:relative}

/* ---------- shared type ---------- */
.op-eyebrow{display:flex;align-items:center;gap:.8rem;margin:0;font:500 .72rem/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
.op-eyebrow>span:empty{height:6px;width:6px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 16px 2px currentColor}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span,.ln>em{display:block}
.film-link{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;min-height:48px;margin-top:1.8rem;padding:.55rem 0 .7rem;border-bottom:1px solid rgba(243,240,232,.45);font-size:.95rem;font-weight:600;line-height:1.35;text-decoration:none;color:var(--bone);transition:color .25s,border-color .25s}
.film-link svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.film-link:hover{color:var(--or);border-color:var(--or)}.film-link:hover svg{transform:translateX(5px)}

/* ---------- film grain + chapter rail ---------- */
.film-grain{position:fixed;inset:-60%;z-index:90;pointer-events:none;opacity:.085;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:op-grain .9s steps(6) infinite}
@keyframes op-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.scene-rail{display:none}
@media(min-width:1280px){
 .scene-rail{display:block;position:fixed;z-index:45;right:14px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .5s;pointer-events:none}
 .op-past-hero .scene-rail,.scene-rail:focus-within{opacity:1;pointer-events:auto}
 .scene-rail ol{list-style:none;margin:0;padding:0 12px 0 0;display:grid;gap:2px}
 .scene-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:26px;font:500 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(243,240,232,.38);text-decoration:none;transition:color .3s}
 .sr-n{position:relative;padding-right:14px}
 .sr-n::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:currentColor;transition:width .3s var(--ease)}
 .scene-rail a[aria-current] .sr-n::after{width:12px}
 .sr-name{position:absolute;right:calc(100% + 8px);white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s var(--ease);background:#000;padding:5px 8px;border-radius:2px;pointer-events:none}
 .scene-rail a:hover,.scene-rail a:focus-visible{color:var(--bone)}
 .scene-rail a:hover .sr-name,.scene-rail a:focus-visible .sr-name{opacity:1;transform:none}
 .scene-rail.is-muted{opacity:.25}.scene-rail.is-muted:hover,.scene-rail.is-muted:focus-within{opacity:1}
 .scene-rail a[aria-current]{color:var(--or)}
 .sr-track{position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(243,240,232,.14)}
 .sr-track i{position:absolute;inset:0 0 auto;height:calc(var(--page,0)*100%);background:var(--or);box-shadow:0 0 10px var(--or)}
 .scene-rail.on-orange a{color:rgba(0,0,0,.45)}.scene-rail.on-orange a[aria-current]{color:#000}.scene-rail.on-orange .sr-name{background:rgba(217,138,29,.9)}
 .scene-rail.on-orange .sr-track{background:rgba(0,0,0,.2)}.scene-rail.on-orange .sr-track i{background:#000;box-shadow:none}
}

/* ---------- 01 opening ---------- */
.op-opening{position:relative;min-height:min(960px,calc(100svh - 104px));isolation:isolate;overflow:hidden;background:#000;padding-top:1px}
.op-bloom{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46% 58% at 70% 46%,rgba(217,138,29,.26),transparent 70%),radial-gradient(ellipse 30% 22% at 72% 92%,rgba(217,138,29,.22),transparent 70%),radial-gradient(ellipse 70% 50% at 0% 100%,rgba(217,138,29,.07),transparent 70%)}
.op-beam{position:absolute;z-index:-1;top:-30%;left:46%;width:44%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,196,120,.07) 40%,rgba(255,214,160,.11) 50%,rgba(255,196,120,.06) 60%,transparent);transform:rotate(18deg);transform-origin:50% 0;filter:blur(6px);animation:op-sway 14s ease-in-out infinite alternate}
@keyframes op-sway{to{transform:rotate(9deg) translateX(-4%)}}
.op-opening::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.15) 50%,transparent 62%),linear-gradient(0deg,#000 0%,transparent 26%)}
#operant-stage{position:absolute;top:-1%;left:38%;width:66%;height:calc(100% - 50px);z-index:0;contain:layout paint;transform:translate3d(0,calc(var(--p,0)*9%),0) scale(calc(1 + var(--p,0)*.1));opacity:calc(1 - var(--p,0)*.85);will-change:transform}
#operant-stage canvas{width:100%;height:100%;max-width:none;display:block;position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
#operant-stage.stage-ready canvas{opacity:1}
.stage-poster{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .75s;pointer-events:none}
.stage-ready .stage-poster{opacity:0}
.stage-poster.has-render picture{display:grid;place-items:center;width:100%;height:100%}
.stage-poster.has-render img{width:100%;height:auto;max-height:100%;object-fit:contain;mask-image:linear-gradient(#000 90%,transparent 100%)}
.op-opening-inner{position:relative;z-index:3;padding-top:clamp(64px,10vh,118px);padding-bottom:120px;pointer-events:none;transform:translate3d(0,calc(var(--p,0)*-110px),0);opacity:calc(1 - var(--p,0)*1.5)}
.op-opening-inner a{pointer-events:auto}
.op-opening h1{font-size:clamp(3.5rem,7.6vw,8rem);font-weight:600;letter-spacing:-.058em;line-height:.93;max-width:11ch;margin:30px 0 30px;color:var(--bone);text-wrap:initial}
.op-opening h1 em{font-weight:600}
.op-opening-promise{max-width:31ch;font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.5;color:var(--bone-2);font-weight:400}
.op-opening .btn-row{margin-top:32px;gap:.7rem}.op-opening .btn{min-height:54px;font-size:.95rem;padding-inline:1.45rem}
.op-opening .btn-ghost{border-color:rgba(243,240,232,.3);background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.op-opening-caption{font:400 .72rem/1.6 var(--f-mono);letter-spacing:.02em;color:var(--bone-3);margin-top:26px;max-width:46ch}
.op-opening-bottom{position:absolute;z-index:4;bottom:0;left:0;right:0;display:flex;align-items:center;gap:28px;min-height:72px;border-top:1px solid var(--hair);color:var(--bone-3);font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.op-discover{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--bone-2)}
.op-scroll-line{height:30px;width:1px;background:rgba(243,240,232,.25);position:relative;overflow:hidden}
.op-scroll-line::after{content:"";position:absolute;top:-12px;left:0;width:1px;height:12px;background:var(--or);animation:op-descend 2.4s var(--ease) infinite}
@keyframes op-descend{to{transform:translateY(54px)}}
.op-location{margin-left:auto}
#motion-toggle{padding:10px 0 10px 20px;display:flex;gap:10px;align-items:center;background:transparent;border:0;border-left:1px solid var(--hair);cursor:pointer;color:var(--bone-2);font:inherit;letter-spacing:inherit;text-transform:inherit;min-height:44px}
#motion-toggle:hover{color:var(--or)}

/* opening intro: one-shot, CSS only, skipped for reduced motion */
.op-intro .op-opening .ln>*{animation:op-rise 1.15s var(--ease) both}
.op-intro .op-opening .ln:nth-child(1)>*{animation-delay:.12s}.op-intro .op-opening .ln:nth-child(2)>*{animation-delay:.24s}.op-intro .op-opening .ln:nth-child(3)>*{animation-delay:.36s}
.op-intro .op-opening .op-eyebrow,.op-intro .op-opening-promise,.op-intro .op-opening .btn-row,.op-intro .op-opening-caption,.op-intro .op-opening-bottom{animation:op-fade 1.2s var(--ease) both}
.op-intro .op-opening-promise{animation-delay:.55s}.op-intro .op-opening .btn-row{animation-delay:.68s}.op-intro .op-opening-caption{animation-delay:.8s}.op-intro .op-opening-bottom{animation-delay:1s}
@keyframes op-rise{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes op-fade{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* ---------- offer ticker ---------- */
.offer-ticker{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--hair);background:#000;padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk-track{display:flex;width:max-content;animation:op-ticker 46s linear infinite}
.tk-set{display:flex;align-items:center;flex:none}
.tk-set>span{font-size:clamp(1.15rem,2.1vw,1.85rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;color:var(--bone)}
.tk-set>i{display:inline-grid;place-items:center;margin-inline:clamp(1.2rem,2.6vw,2.4rem)}
.tk-mark{width:clamp(16px,1.6vw,22px);height:auto}
@keyframes op-ticker{to{transform:translate3d(-50%,0,0)}}

/* ---------- 02 manifesto (pinned) ---------- */
.mf{position:relative;background:#000}
.mf-sticky{position:relative;display:grid;align-items:center;min-height:100svh;overflow:hidden;padding-block:clamp(90px,12vw,160px)}
.op-film .mf{height:300vh}
.op-film .mf-sticky{position:sticky;top:0;height:100svh;padding-block:0}
.mf-ghost{position:absolute;z-index:0;right:-14vw;top:50%;width:min(92vmin,980px);aspect-ratio:1;transform:translateY(-50%) rotate(calc(-28deg + var(--p,1)*48deg)) scale(calc(.9 + var(--p,1)*.12));pointer-events:none}
.mf-mark{width:100%;height:100%}
.mf-inner{z-index:1}
.mf h2{margin:34px 0 0;max-width:17ch;font-size:clamp(2.3rem,5.5vw,5.8rem);font-weight:500;line-height:1.04;letter-spacing:-.05em}
.mf-line{display:block}
.mf .mw{display:inline-block;opacity:clamp(.12,calc(var(--p,1)*(var(--n) + 5) - var(--i)),1);transition:opacity .25s linear,color .25s}
.mf-key .mw{color:var(--or)}
.mf-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:52px;max-width:1100px;opacity:clamp(0,calc((var(--p,1) - .72)*5),1);transform:translate3d(0,calc((1 - clamp(0,calc((var(--p,1) - .72)*5),1))*24px),0)}
.mf-foot p{max-width:46ch;font-size:1.06rem;color:var(--bone-2);margin:0}
.mf-foot .film-link{margin-top:0}

/* ---------- chapters ---------- */
.ch{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:#000;padding-block:clamp(100px,12vw,180px)}
.slate{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);margin-bottom:clamp(48px,6vw,90px)}
.slate-n{font-size:clamp(3.2rem,6.4vw,6rem);font-weight:200;letter-spacing:-.06em;line-height:.8;color:var(--or)}
.slate-rule{height:1px;background:var(--hair);position:relative;overflow:hidden}
.slate-rule i{position:absolute;inset:0;background:linear-gradient(90deg,var(--or),rgba(217,138,29,.15));transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--p,1)*3.4 - .6),1))}
.slate-meta{display:grid;gap:4px;text-align:right;font:500 .66rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3)}
.slate-meta b{color:var(--bone);font-weight:500}
.ch h2{margin:0;font-size:clamp(3.4rem,7.8vw,8rem);font-weight:600;line-height:.9;letter-spacing:-.062em;text-wrap:initial}
.ch-lead{max-width:34ch;margin:2rem 0 0;font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.55;color:var(--bone-2)}

/* 01 advertising */
.ch-light{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 40% 55% at 78% 55%,rgba(217,138,29,.2),transparent 70%)}
.ch-ads-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.ch-points{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem;max-width:40ch}
.ch-points li{position:relative;padding-left:1.6rem;font-size:.98rem;color:var(--bone-2);line-height:1.5}
.ch-points li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:conic-gradient(var(--or) 0 50%,var(--bone) 50% 100%);transform:rotate(-40deg)}
.ad-stage{position:relative;margin:0;height:clamp(460px,52vw,700px);perspective:1400px;isolation:isolate}
.ad-beam{position:absolute;inset:-10% -20% -10% -10%;z-index:-1;background:radial-gradient(circle at 52% 46%,rgba(217,138,29,.42),transparent 55%);filter:blur(10px);opacity:calc(.5 + var(--p,.5)*.6)}
.ad-card{position:absolute;box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
.ad-back{z-index:1;left:42%;top:2%;width:52%;height:76%;background:#0c0c0c;border:1px solid rgba(243,240,232,.12);padding:7%;overflow:hidden;transform:rotate(calc(9deg - var(--p,.5)*7deg)) translate3d(calc((.5 - var(--p,.5))*-70px),calc((.5 - var(--p,.5))*50px),0)}
.ad-back-type{display:block;font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:600;line-height:1;letter-spacing:-.05em;color:rgba(243,240,232,.86)}
.ad-back-mark{position:absolute;width:88%;right:-26%;bottom:-24%}
.ad-poster{z-index:2;left:12%;top:8%;width:52%;height:84%;display:flex;flex-direction:column;justify-content:space-between;padding:6.5%;background:linear-gradient(160deg,#e5962a,#d98a1d 45%,#c97b12);color:#000;transform:rotate(calc(-11deg + var(--p,.5)*9deg)) translate3d(0,calc((.5 - var(--p,.5))*110px),0)}
.ad-poster::after{content:"";position:absolute;inset:7px;border:1px solid rgba(0,0,0,.14);pointer-events:none}
.ad-poster-top{display:flex;justify-content:space-between;align-items:start;gap:12px;font:500 .58rem/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.ad-mini{width:30px;height:30px}
.ad-poster-type{margin:0;font-size:clamp(2.6rem,5.4vw,5.4rem);font-weight:700;line-height:.84;letter-spacing:-.07em}
.ad-poster-type span{color:transparent;-webkit-text-stroke:2px #000}
.ad-poster-foot{display:flex;justify-content:space-between;align-items:end;gap:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.35);font-size:.74rem;font-weight:500;line-height:1.3}
.ad-poster-foot svg{width:30px;height:30px;fill:none;stroke:#000;stroke-width:2}
.ad-phone{position:absolute;z-index:3;left:-2%;bottom:-2%;width:clamp(150px,15vw,214px);aspect-ratio:9/18.5;padding:7px;border-radius:30px;background:#0d0d0d;border:1px solid rgba(243,240,232,.22);box-shadow:0 40px 80px -20px #000,inset 0 0 0 2px #000;transform:rotate(-6deg) translate3d(0,calc((.5 - var(--p,.5))*-150px),0)}
.ad-phone-screen{height:100%;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px 14px;text-align:center;background:radial-gradient(circle at 50% 35%,#f0a43a,#d98a1d 45%,#a8660f);color:#000;position:relative}
.ad-phone-top{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;font:500 .5rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.ad-phone-top i{width:14px;height:14px;border-radius:50%;background:#000}
.ad-phone-mark{width:52%}
.ad-phone-screen b{font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.05;letter-spacing:-.03em}
.ad-phone-cta{font-size:.62rem;font-weight:600;padding:.5em 1.1em;border-radius:99px;background:#000;color:var(--bone)}
.ad-stage figcaption{position:absolute;right:0;bottom:-38px;font:400 .62rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bone-3)}

/* 02 websites */
.ch-web{padding-bottom:clamp(60px,7vw,110px)}
.ch-web-word{position:absolute;z-index:-1;top:36%;left:0;white-space:nowrap;font-size:clamp(9rem,24vw,26rem);font-weight:800;letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(217,138,29,.22);transform:translate3d(calc(4% - var(--p,.5)*34%),0,0);pointer-events:none}
.ch-web-head{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:clamp(2rem,6vw,6rem)}
.ch-web-intro .ch-lead{margin-top:0}
.web-stage{--q:clamp(0,calc(var(--p,1)*2.4 - .35),1);position:relative;margin:clamp(60px,7vw,110px) 0 0;perspective:1700px;perspective-origin:50% 20%}
.web-rig{position:relative;width:min(1440px,94vw);margin-inline:auto;height:clamp(300px,44vw,700px);transform-style:preserve-3d;transform:rotateX(calc((1 - var(--q))*30deg)) translate3d(0,calc((1 - var(--q))*80px),0) scale(calc(.86 + var(--q)*.14));transform-origin:50% 100%}
.win{position:absolute;overflow:hidden;border-radius:10px;background:#0b0b0b;border:1px solid rgba(243,240,232,.14);box-shadow:0 70px 120px -40px rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.6)}
.win img{display:block;width:100%;height:auto}
.win-bar{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 12px;background:#121212;border-bottom:1px solid rgba(243,240,232,.08);font:400 .62rem/1 var(--f-mono);color:var(--bone-3)}
.win-dots{display:flex;gap:5px}.win-dots i{width:7px;height:7px;border-radius:50%;background:rgba(243,240,232,.18)}.win-dots i:first-child{background:var(--or)}
.win-url{margin-inline:auto;padding-right:40px}
.win-main{z-index:3;left:19%;width:62%;top:0;box-shadow:0 70px 120px -40px #000,0 0 120px -30px rgba(217,138,29,.45)}
.win-left{z-index:2;left:0;width:34%;top:20%;transform:translate3d(calc((1 - var(--q))*-30%),0,-140px) rotateY(16deg);opacity:calc(.35 + var(--q)*.65)}
.win-right{z-index:2;right:0;width:34%;top:24%;transform:translate3d(calc((1 - var(--q))*30%),0,-140px) rotateY(-16deg);opacity:calc(.35 + var(--q)*.65)}
.web-floor{position:absolute;left:10%;right:10%;bottom:-8%;height:30%;background:radial-gradient(ellipse at 50% 0,rgba(217,138,29,.3),transparent 70%);filter:blur(20px);z-index:-1}
.web-stage figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(30px,4vw,60px);padding-top:16px;border-top:1px solid var(--hair);font:400 .64rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}

/* 03 operations */
.ch-flow{background:radial-gradient(ellipse 60% 40% at 50% 55%,rgba(217,138,29,.08),transparent 70%),#000}
.ch-flow-copy{text-align:center;display:grid;justify-items:center}
.ch-flow-copy .ch-lead{text-align:center;max-width:44ch}
.flow-stage{--d:clamp(0,calc(var(--p,1)*2.6 - .5),1);position:relative;height:clamp(300px,40vw,560px);margin-top:clamp(20px,3vw,40px)}
.flow-ribbons{position:absolute;inset:0;width:100%;height:100%}
.flow-ribbons path{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--d))}
.flow-b path{stroke-dashoffset:calc(var(--d) - 1)}
.flow-orbit{transform-origin:720px 280px;animation:op-orbit 40s linear infinite}
@keyframes op-orbit{to{transform:rotate(360deg)}}
.flow-core{position:absolute;left:50%;top:50%;width:clamp(96px,10vw,146px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#161616,#050505 70%);border:1px solid rgba(217,138,29,.5);box-shadow:0 0 0 12px rgba(217,138,29,.05),0 0 90px 10px rgba(217,138,29,calc(.12 + var(--d)*.25));transform:translate(-50%,-50%) scale(calc(.82 + var(--d)*.18))}
.flow-mark{width:54%;height:auto}
.flow-labels span{position:absolute;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);opacity:var(--d)}
.flow-labels span:nth-child(1){left:12%;top:47%}.flow-labels span:nth-child(2){left:50%;top:calc(50% + clamp(70px,7vw,100px));transform:translateX(-50%)}.flow-labels span:nth-child(3){right:12%;top:47%}
.flow-steps{list-style:none;margin:clamp(40px,5vw,70px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.flow-steps li{padding:26px 26px 0 0;border-top:1px solid var(--hair);position:relative}
.flow-steps li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:1px;background:var(--or)}
.flow-steps span{font:500 .66rem var(--f-mono);color:var(--or);letter-spacing:.1em}
.flow-steps h3{margin:14px 0 10px;font-size:1.18rem;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.flow-steps p{margin:0;font-size:.92rem;line-height:1.55;color:var(--bone-3)}
.flow-steps li:nth-child(2){--d:1}.flow-steps li:nth-child(3){--d:2}.flow-steps li:nth-child(4){--d:3}
.flow-cta{margin-top:2.6rem}

/* ---------- work reel (horizontal on wide screens) ---------- */
.reel{position:relative;background:#000;border-top:1px solid var(--hair)}
.reel-sticky{position:relative;overflow:hidden}
.reel-track{display:flex;flex-direction:column;gap:80px;padding:clamp(90px,11vw,150px) 0}
.reel-panel{position:relative;width:min(1240px,calc(100% - 32px));margin-inline:auto}
.reel-intro h2{margin:28px 0 24px;font-size:clamp(3rem,6.2vw,6.4rem);font-weight:600;line-height:.92;letter-spacing:-.06em}
.reel-intro>p:not(.op-eyebrow){max-width:36ch;color:var(--bone-2);font-size:1.05rem;margin:0}
.reel-hint{display:none}
.reel-project{display:grid;grid-template-columns:1.55fr 1fr;align-items:end;gap:clamp(1.5rem,3.5vw,4rem)}
.reel-screen{display:block;text-decoration:none;border-radius:10px;overflow:hidden;background:#0b0b0b;border:1px solid rgba(243,240,232,.14);box-shadow:0 60px 110px -40px #000;transition:transform .6s var(--ease),box-shadow .6s}
.reel-screen:hover{transform:translateY(-8px);box-shadow:0 70px 120px -40px #000,0 0 90px -30px rgba(217,138,29,.55)}
.reel-screen img{display:block;width:100%;height:auto}
.reel-copy{position:relative;padding-bottom:6px}
.reel-n{display:block;font-size:clamp(4rem,8vw,8rem);font-weight:200;letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(217,138,29,.7);margin-bottom:22px}
.reel-copy h3{margin:0;font-size:clamp(1.7rem,2.7vw,2.7rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.reel-copy p{margin:18px 0 0;color:var(--bone-2);font-size:1rem;line-height:1.6;max-width:40ch}
.reel-scope{display:block;margin-top:18px;font:400 .64rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.reel-copy .film-link{margin-top:1.4rem}
.reel-next{background:linear-gradient(150deg,#e3962b,#d98a1d 50%,#c47811);color:#000;border-radius:6px;padding:clamp(2rem,5vw,4.5rem);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.reel-next-mark{position:absolute;z-index:-1;width:min(400px,46%);right:-9%;top:-24%;opacity:.95;transform:rotate(calc(var(--p,1)*40deg - 20deg))}
.reel-next-k{margin:0;font:500 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.reel-next h3{margin:18px 0 18px;font-size:clamp(3rem,6vw,6.2rem);font-weight:700;letter-spacing:-.065em;line-height:.88}
.reel-next>p:not(.reel-next-k){max-width:38ch;margin:0;font-size:1.05rem;line-height:1.55}
.reel-next .btn-row{margin-top:28px}
.reel-progress{display:none}
@media(min-width:901px){
 .op-film .reel-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
 .op-film .reel-track{flex-direction:row;align-items:center;gap:7vw;padding:0 7vw 0 max(7vw,calc((100vw - 1240px)/2));transform:translate3d(var(--rx,0px),0,0);will-change:transform}
 .op-film .reel-panel{width:auto;margin:0;flex:none}
 .op-film .reel-intro{width:min(32rem,34vw)}
 .op-film .reel-hint{display:inline-flex;align-items:center;gap:12px;margin-top:3.5rem;font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3)}
 .op-film .reel-hint svg{width:18px;fill:none;stroke:var(--or);stroke-width:1.6;animation:op-nudge 1.8s var(--ease) infinite}
 .op-film .reel-project{width:min(1180px,80vw)}
 .op-film .reel-next{width:min(820px,64vw);height:min(76svh,680px)}
 .op-film .reel-progress{display:block;position:absolute;left:7vw;right:7vw;bottom:clamp(24px,5vh,48px);height:1px;background:var(--hair)}
 .op-film .reel-progress i{position:absolute;inset:0;background:var(--or);transform-origin:0 50%;transform:scaleX(var(--p,0))}
}
@keyframes op-nudge{50%{transform:translateX(6px)}}

/* ---------- services ---------- */
.svc{position:relative;background:#000;padding-block:clamp(100px,12vw,170px);border-top:1px solid var(--hair)}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 0% 20%,rgba(217,138,29,.1),transparent 70%);pointer-events:none}
.svc-layout{display:grid;grid-template-columns:1fr 1.55fr;gap:7%}
.svc-intro{position:sticky;top:130px;align-self:start}
.svc h2{margin:28px 0;font-size:clamp(2.9rem,4.9vw,5rem);font-weight:600;line-height:.95;letter-spacing:-.06em}
.svc-intro>p:not(.op-eyebrow){max-width:34ch;color:var(--bone-2);line-height:1.65;margin:0}
.svc-index>a{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:46px 1fr 28px;gap:18px;padding:28px 20px;border-top:1px solid var(--hair);text-decoration:none;color:var(--bone);transition:color .45s var(--ease)}
.svc-index>a:last-child{border-bottom:1px solid var(--hair)}
.svc-index>a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--or);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.svc-index>a:hover,.svc-index>a:focus-visible{color:#000}
.svc-index>a:hover::before,.svc-index>a:focus-visible::before{transform:scaleY(1)}
.svc-n{font:500 .66rem var(--f-mono);color:var(--or);padding-top:9px;transition:color .45s}
.svc-index>a:hover .svc-n,.svc-index>a:focus-visible .svc-n{color:#000}
.svc-body h3{margin:0;font-size:clamp(1.35rem,2.3vw,2.15rem);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.svc-blurb{display:block;margin-top:10px;font-size:.93rem;line-height:1.55;color:var(--bone-3);max-width:50ch;transition:color .45s}
.svc-index>a:hover .svc-blurb,.svc-index>a:focus-visible .svc-blurb{color:rgba(0,0,0,.76)}
.svc-arrow{padding-top:8px}.svc-arrow .arr{font-size:1.3rem;display:inline-block;transition:transform .45s var(--ease)}
.svc-index>a:hover .svc-arrow .arr{transform:translateX(6px) rotate(-45deg)}
.svc-path{list-style:none;margin:clamp(70px,9vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}
.svc-path li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-top:22px;border-top:2px solid rgba(243,240,232,.12);position:relative}
.svc-path li:first-child{border-top-color:var(--or)}
.svc-path b{font:500 .7rem var(--f-mono);color:var(--or);padding-top:3px}
.svc-path span{font-size:.92rem;line-height:1.5;color:var(--bone-3)}
.svc-path strong{display:block;color:var(--bone);font-size:1.05rem;font-weight:500;margin-bottom:4px;letter-spacing:-.02em}

/* ---------- founder ---------- */
.fdr{position:relative;background:#000;padding-block:clamp(90px,10vw,150px);border-top:1px solid var(--hair);overflow:hidden}
.fdr-layout{display:grid;grid-template-columns:.75fr 1.4fr;gap:9%;align-items:center}
.fdr-photo{position:relative;margin:0;max-width:380px}
.fdr-photo::before{content:"";position:absolute;inset:0;transform:translate(22px,22px);background:var(--or);z-index:0}
.fdr-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/4.7;object-fit:cover;object-position:50% 18%;filter:saturate(.9) contrast(1.04)}
.fdr-photo figcaption{margin-top:36px;font:400 .64rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-3)}
.fdr h2{margin:26px 0;font-size:clamp(2.7rem,5vw,5rem);font-weight:600;line-height:.95;letter-spacing:-.06em}
.fdr-copy>p:not(.op-eyebrow){max-width:46ch;color:var(--bone-2);font-size:1.06rem;line-height:1.65;margin:0}
.fdr .btn-row{margin-top:32px}

/* ---------- faq on the film stage ---------- */
.home-faq .sec{background:#000;border-top:1px solid var(--hair);padding-block:clamp(80px,9vw,130px)}
.home-faq h2{font-weight:600;letter-spacing:-.05em}
.home-faq .label{color:var(--or)}
.home-faq summary:hover{color:var(--or)}

/* ---------- finale: orange iris from the mark ---------- */
.fin{position:relative;background:#000;color:#000}
.fin-sticky{position:relative;display:grid;place-items:center;min-height:100svh;overflow:hidden;padding-block:clamp(110px,12vw,170px);isolation:isolate}
.op-film .fin{height:240vh}
.op-film .fin-sticky{position:sticky;top:0;height:100svh;padding-block:0}
.fin{--r:clamp(.035,calc(var(--p,1)*1.9 - .12),1);--t:clamp(0,calc((var(--p,1) - .3)*3.6),1)}
.fin-iris{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 50%,#eea23a,#d98a1d 45%,#c4770f);clip-path:circle(calc(var(--r)*76vmax) at 50% 50%)}
.fin-seed{position:absolute;left:50%;top:50%;width:clamp(90px,9vw,130px);transform:translate(-50%,-50%) rotate(calc(var(--r)*120deg)) scale(calc(1 + var(--r)*5));opacity:clamp(0,calc(1 - var(--r)*2.4),1);z-index:-1}
.fin-mark{width:100%;height:auto}
.fin-inner{text-align:center;opacity:var(--t);transform:translate3d(0,calc((1 - var(--t))*40px),0)}
.fin-k{margin:0;font:500 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.fin h2{margin:26px auto 28px;font-size:clamp(3.4rem,9.4vw,10rem);font-weight:700;line-height:.86;letter-spacing:-.068em;color:#000}
.fin-inner>p:not(.fin-k){margin:0;font-size:1.08rem;line-height:1.6;color:rgba(0,0,0,.82)}
.fin .btn-row{justify-content:center;margin-top:34px}
.fin .btn-dark{box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.fin-contact{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:34px;font:500 .8rem var(--f-mono)}
.fin-contact a{color:#000;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(0,0,0,.35)}
.fin-contact a:hover{text-decoration-color:#000}
.fin :focus-visible{outline-color:#000}

/* ---------- footer on the film stage ---------- */
.home .site-footer{background:#000;border-top:0}
.home .ft-brand>p.line{display:none}

/* ---------- reveal (enabled by film.js) ---------- */
.op-film [data-reveal]{opacity:0;transform:translate3d(0,46px,0);transition:opacity 1s var(--ease),transform 1.15s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.op-film [data-reveal] .ln>*{transform:translate3d(0,108%,0);transition:transform 1.15s var(--ease)}
.op-film [data-reveal] .ln:nth-child(2)>*{transition-delay:.1s}.op-film [data-reveal] .ln:nth-child(3)>*{transition-delay:.2s}
.op-film [data-reveal].is-in{opacity:1;transform:none}
.op-film [data-reveal].is-in .ln>*{transform:none}

/* ---------- ambient motion paused ---------- */
.op-motion-paused .film-grain,.op-motion-paused .op-beam,.op-motion-paused .tk-track,.op-motion-paused .flow-orbit,.op-motion-paused .op-scroll-line::after,.op-motion-paused .reel-hint svg{animation-play-state:paused}

/* ---------- responsive ---------- */
@media(min-width:1600px){.op-opening{min-height:920px}}
@media(max-width:1080px){
 .op-opening h1{font-size:clamp(3.6rem,8vw,6.2rem)}.op-opening .btn-row{max-width:480px}
 .ch-ads-grid{grid-template-columns:1fr}.ad-stage{height:clamp(440px,70vw,620px);max-width:760px;width:100%;margin-inline:auto}
 .ch-web-head{grid-template-columns:1fr}
 .flow-steps{grid-template-columns:1fr 1fr;gap:0 24px}.flow-steps li{padding-bottom:28px}
 .svc-path{grid-template-columns:1fr 1fr;row-gap:28px}
 .fdr-layout{gap:6%}
}
@media(max-width:900px){
 .reel-project{grid-template-columns:1fr}
 .reel-next{min-height:480px}
}
@media(max-width:760px){
 .op-opening{min-height:800px}
 .op-opening::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.94) 34%,transparent 76%)}
 .op-beam{left:20%;width:80%}
 .op-bloom{background:radial-gradient(ellipse 80% 40% at 50% 22%,rgba(217,138,29,.3),transparent 70%)}
 #operant-stage{left:0;top:0;width:100%;height:340px}
 .stage-poster.has-render img{object-fit:cover}
 .op-opening-inner{padding-top:262px;padding-bottom:96px}
 .op-opening .op-eyebrow{font-size:.58rem;letter-spacing:.1em;gap:.55rem}
 .op-opening h1{font-size:clamp(2.9rem,13vw,5.5rem);margin:18px 0 20px;line-height:.94;max-width:14ch}
 .op-opening-promise{font-size:1.05rem;max-width:33ch}
 .op-opening .btn-row{margin-top:24px;gap:9px;flex-wrap:wrap}.op-opening .btn{font-size:.86rem;min-height:50px;padding:.8rem 1rem}
 .op-opening-caption{margin-top:18px;font-size:.66rem}
 .op-opening-bottom{min-height:60px;font-size:.56rem;gap:12px}.op-location{display:none}#motion-toggle{margin-left:auto;padding-left:13px}
 .offer-ticker{padding:16px 0}
 .op-film .mf{height:240vh}
 .mf-ghost{right:-45vw;width:120vw;top:58%}
 .mf h2{font-size:clamp(2.1rem,9.6vw,3.4rem);line-height:1.08;margin-top:24px}
 .mf-foot{display:block;margin-top:34px}.mf-foot p{font-size:.98rem}.mf-foot .film-link{margin-top:1.4rem}
 .ch{padding-block:90px}
 .slate{grid-template-columns:auto 1fr;margin-bottom:40px}.slate-meta{grid-column:1/-1;text-align:left}
 .ch h2{font-size:clamp(3rem,15vw,4.6rem)}
 .ad-stage{height:min(122vw,520px);margin-top:20px}
 .ad-poster{left:14%;width:62%;height:78%}.ad-back{left:40%;width:58%}
 .ad-phone{width:36%;left:-1%;bottom:4%}
 .ad-stage figcaption{bottom:-30px;left:0;right:auto}
 .web-stage{margin-top:50px}
 .web-rig{height:auto;width:calc(100% - 32px);transform:rotateX(calc((1 - var(--q))*22deg)) scale(calc(.92 + var(--q)*.08));display:grid;gap:14px}
 .win{position:relative;left:auto!important;right:auto!important;top:auto!important}
 .win-main{width:100%;order:1}
 .win-left,.win-right{width:84%;transform:none;opacity:1;order:2}.win-right{justify-self:end;order:3;margin-top:-28%}
 .win-bar{min-height:24px;font-size:.5rem}
 .web-stage figcaption{flex-direction:column;gap:6px}
 .ch-web-word{top:22%}
 .flow-stage{height:300px;margin-inline:-16px}
 .flow-labels span:nth-child(1){left:4%}.flow-labels span:nth-child(3){right:4%}
 .flow-steps{grid-template-columns:1fr}
 .reel-track{gap:64px;padding-block:90px}
 .reel-next{min-height:540px;padding:2.2rem 1.5rem}
 .reel-next-mark{width:46%;right:-12%;top:-8%}
 .reel-next .btn{font-size:.86rem}
 .svc{padding-block:90px}.svc-layout{display:block}.svc-intro{position:static;margin-bottom:36px}
 .svc-index>a{grid-template-columns:30px 1fr 20px;gap:12px;padding:22px 6px}
 .svc-path{grid-template-columns:1fr}
 .fdr-layout{grid-template-columns:1fr;gap:56px}.fdr-photo{width:72%;max-width:300px}
 .op-film .fin{height:200vh}
 .fin h2{font-size:clamp(3rem,15vw,5rem)}.fin-inner>p:not(.fin-k) br{display:none}
 .fin-contact{flex-direction:column;gap:8px}.fin-contact span{display:none}
 .home .mbar{background:rgba(0,0,0,.94);backdrop-filter:blur(14px)}
}
@media(prefers-reduced-motion:reduce){
 .film-grain,.op-beam,.tk-track,.flow-orbit,.op-scroll-line::after,.reel-hint svg{animation:none}
 .tk-track{width:auto}.tk-set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;row-gap:10px;padding-inline:16px}.tk-set[aria-hidden]{display:none}.offer-ticker{mask-image:none}
 .svc-index>a,.svc-index>a::before,.reel-screen,.film-link svg{transition:none}
}