/* ==========================================================================
   KleenSlate Creative — "Two-Light Cinema" layer.
   Loaded AFTER site.css: it re-tunes the shared tokens (so every page, the
   quote flow and the forms inherit the new look) and adds the cinematic home
   page, viewfinder chrome, letterbox hero, filmstrip and wordmark footer.
   Nothing here renames a class or hook site.js / gallery.js depend on.

   Palette from the studio's own shoot: brand red-orange key light + electric
   blue rim light (the red/blue tube practicals in front of the arc-logo
   backdrop), on deep black.
   Motion patterns rebuilt in vanilla from Scrolltide (Threshold scroll-scrubbed
   hero, Focus Reveal text, Expanded Cards, Wordmark Bleed) and 21st.dev
   (Filmstrip / Horizontal Depth Fade gallery, Vertical Cut Reveal, Kinetic
   Scroll skew). All motion is disabled under prefers-reduced-motion.
   ========================================================================== */
:root{
  --bg:#070708;--bg2:#0d0d10;--panel:#121216;--panel2:#18181e;--line:#23232b;--footer:#050506;
  --accent:#ff4d2e;--accent2:#ff7a45;--accent-press:#e63d1f;
  --cool:#3d7bff;--cool2:#6ea0ff;--cool-glow:rgba(61,123,255,.35);--warm-glow:rgba(255,77,46,.32);
  --ink:#f5f3ef;--ink-soft:#d9d6d0;--dim:#a6a6b1;
  --fm:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:6px;--r-sm:4px;--r-lg:10px;--r-xs:4px;
  --max:1280px;
  --ring:0 0 0 3px rgba(61,123,255,.45);
  --cut:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
::selection{background:var(--cool);color:#fff}
:focus-visible{outline-color:var(--cool2)}
body{background:var(--bg);background-image:radial-gradient(1200px 600px at 110% -10%,rgba(61,123,255,.08),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(255,77,46,.05),transparent 60%);background-attachment:fixed}

/* ---------- Mono "camera metadata" utility ---------- */
.mono,.eyebrow{font-family:var(--fm);font-weight:600;letter-spacing:.16em}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--accent2)}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--warm-glow)}

/* ---------- Buttons: slate-cut corners + light sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:0;clip-path:var(--cut);font-weight:800;letter-spacing:.02em;min-height:48px;padding:.75rem 1.6rem;
  background:linear-gradient(100deg,var(--accent),#ff6a3a);box-shadow:0 10px 30px -12px var(--warm-glow)}
.btn:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn:hover:after{transform:translateX(120%)}
.btn:hover{background:linear-gradient(100deg,#ff5a3a,var(--accent2))}
.btn-ghost{background:rgba(255,255,255,.09);color:var(--ink);border:0;box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(61,123,255,.22);color:var(--ink)}
.btn-cool{background:linear-gradient(100deg,var(--cool),#5b8dff);color:#fff;box-shadow:0 10px 30px -12px var(--cool-glow)}
.btn-cool:hover{background:linear-gradient(100deg,#4a86ff,var(--cool2));color:#fff}
.btn-sm{min-height:40px;padding:.5rem 1.1rem}

/* ---------- Header ---------- */
.hdr{background:rgba(7,7,8,.55);border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.hdr.scrolled{background:rgba(7,7,8,.88)}
.logo{gap:.65rem;color:var(--ink)}
.logo .logo-mark{width:auto;height:46px;flex:none;transition:height var(--dur-2) var(--ease-out),filter .4s}
.logo:hover .logo-mark{filter:drop-shadow(0 0 10px var(--cool-glow))}
.hdr.scrolled .logo .logo-mark{height:38px}
.logo-word{margin-left:0;font:400 1.25rem/1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.logo-word b{font-weight:400;color:var(--accent)}
@media(min-width:900px){
  .nav a:not(.btn){font-size:.9rem;position:relative}
  .nav a[aria-current]{box-shadow:none}
  .nav a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--accent),var(--cool));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
  .nav a:not(.btn):hover:after,.nav a[aria-current]:after{transform:scaleX(1)}
}
.cart-pill{border-radius:0;clip-path:var(--cut)}
.cart-pill.is-empty{border-color:transparent;background:rgba(255,255,255,.09);color:var(--ink)}

/* ---------- Cards / grids ---------- */
.card{border-radius:var(--r);background:linear-gradient(180deg,var(--panel),#0e0e12);border-color:rgba(255,255,255,.07)}
.card:hover,.card:has(:focus-visible){border-color:rgba(110,160,255,.55);box-shadow:0 30px 60px -30px var(--cool-glow)}
.card-img img{transition:transform 1.2s var(--ease-out)}
.card:hover .card-img img{transform:scale(1.05)}
.qadd{border-radius:0;clip-path:var(--cut)}
.chip{border-radius:2px}
.chip:hover,.chip[aria-current]{border-color:var(--cool2);color:var(--ink);background:rgba(61,123,255,.14)}
input,textarea,select{border-radius:var(--r-sm)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--cool2);box-shadow:var(--ring)}
.box,.contact-card,.cta-card,.empty{border-radius:var(--r)}

/* ---------- Page heroes: letterbox + viewfinder corners ---------- */
.page-hero,.hero.short{border-bottom:0}
.page-hero:before,.hero.short:before{content:"";position:absolute;inset:clamp(14px,2.2vw,28px);z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) left top/22px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/2px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right top/22px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/2px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) left bottom/22px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/2px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right bottom/22px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/2px 22px no-repeat;opacity:.55}

/* ---------- Section head: cut-reveal titles ---------- */
.sec-h h2,.cx-h{overflow:hidden}
.js-motion .cut .cw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.js-motion .cut .cw>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i) * 55ms)}
.js-motion .cut.in .cw>span{transform:none}

/* ---------- HOME: pinned letterbox hero (scroll-scrubbed push-in) ---------- */
.cx-hero{position:relative;height:210vh;margin-top:calc(var(--header-h) * -1)}
.cx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.cx-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(calc(1.22 - var(--p,0) * .22));filter:saturate(1.05) contrast(1.05);will-change:transform}
.cx-stage:after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 80% 10%,rgba(61,123,255,.28),transparent 55%),
  radial-gradient(90% 70% at 0% 100%,rgba(255,77,46,.22),transparent 60%),
  linear-gradient(90deg,rgba(7,7,8,.88) 0%,rgba(7,7,8,.6) 38%,rgba(7,7,8,.1) 72%,transparent 100%),
  linear-gradient(180deg,rgba(7,7,8,.45) 0%,rgba(7,7,8,.1) 35%,rgba(7,7,8,.95) 100%)}
.cx-bars{position:absolute;inset:0;z-index:3;pointer-events:none}
.cx-bars:before,.cx-bars:after{content:"";position:absolute;left:0;right:0;height:calc(12.5vh * (1 - var(--p,0)));background:#000}
.cx-bars:before{top:var(--header-h)}.cx-bars:after{bottom:0}
.cx-vf{position:absolute;inset:clamp(18px,3vw,40px);z-index:4;pointer-events:none}
.cx-vf i{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.8)}
.cx-vf i:nth-child(1){left:0;top:calc(var(--header-h) + 4px);border-right:0;border-bottom:0}
.cx-vf i:nth-child(2){right:0;top:calc(var(--header-h) + 4px);border-left:0;border-bottom:0}
.cx-vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.cx-vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.cx-vf .ctr{left:50%;top:50%;width:26px;height:26px;border:0;transform:translate(-50%,-50%);background:linear-gradient(#fff,#fff) center/100% 1.5px no-repeat,linear-gradient(#fff,#fff) center/1.5px 100% no-repeat;opacity:.55}
.cx-meta{position:absolute;z-index:5;left:clamp(26px,4vw,60px);right:clamp(26px,4vw,60px);top:calc(var(--header-h) + clamp(26px,3.4vw,50px));display:flex;justify-content:space-between;gap:1rem;
  font:600 .72rem/1 var(--fm);letter-spacing:.14em;color:rgba(255,255,255,.82);text-transform:uppercase;pointer-events:none}
.cx-meta span{display:inline-flex;gap:1.1rem;flex-wrap:wrap}
.rec{display:inline-flex;align-items:center;gap:.45rem;color:#fff}
.rec:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.cx-copy{position:relative;z-index:6;width:100%;max-width:var(--max);margin:0 auto;padding:0 max(var(--gutter),3vw) calc(12.5vh + clamp(28px,5vh,56px));
  transform:translateY(calc(var(--p,0) * -60px));opacity:calc(1 - var(--p,0) * 1.3)}
.cx-copy h1{font-size:clamp(2.8rem,min(11vw,13.5vh),9.6rem);line-height:.86;margin:.35em 0 .3em;letter-spacing:-.005em}
.cx-copy h1 .l2{display:block;background:linear-gradient(95deg,var(--accent) 10%,#ff9466 60%,var(--cool2) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-copy h1 .l2 .fw{color:transparent}
.cx-copy .lead{font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--ink);max-width:52ch;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.cx-scroll{position:absolute;z-index:6;right:clamp(26px,4vw,60px);bottom:clamp(40px,8vh,80px);display:flex;align-items:center;gap:.8rem;font:600 .7rem var(--fm);letter-spacing:.2em;color:var(--dim);writing-mode:vertical-rl}
.cx-scroll:after{content:"";width:1px;height:70px;background:linear-gradient(var(--ink),transparent);animation:drip 2.2s var(--ease-in-out) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* Focus Reveal: words pull into focus like a lens */
.js-motion .focus .fw{display:inline-block;filter:blur(12px);opacity:.15;transform:scale(1.04);transition:filter .9s var(--ease-out),opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i) * 90ms + .2s)}
.js-motion .focus.in .fw{filter:none;opacity:1;transform:none}
@media(max-width:760px){.cx-hero{height:auto}.cx-stage{position:relative;height:auto;min-height:92svh}.cx-meta .hide-sm{display:none}.cx-scroll{display:none}.cx-bars{display:none}
  .cx-copy{padding-top:calc(var(--header-h) + 90px);padding-bottom:56px}.cx-copy .hero-cta{flex-direction:column;align-items:stretch}.cx-copy .hero-cta .btn{width:100%}
  .cx-copy h1{font-size:clamp(3rem,14vw,4.6rem)}.cx-vf .ctr{display:none}}

/* ---------- Trust ticker ---------- */
.cx-trust{border-block:1px solid rgba(255,255,255,.06);background:linear-gradient(90deg,rgba(255,77,46,.06),rgba(61,123,255,.06));padding:0}
.cx-trust .trust{margin:0;padding:1.1rem 0}
.cx-trust .trust li{font-family:var(--fm);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.cx-trust .trust svg{color:var(--cool2)}

/* ---------- Clapper divider ---------- */
.clap{height:26px;background:repeating-linear-gradient(-55deg,var(--ink) 0 22px,#0b0b0d 22px 44px);opacity:.9;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-out)}
.clap.in{clip-path:inset(0 0 0 0)}

/* ---------- Expanded cards (Scrolltide) ---------- */
.cx-paths{display:flex;gap:10px;height:min(72vh,620px)}
.cx-path{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--r);text-decoration:none;color:var(--ink);transition:flex 1s cubic-bezier(.7,0,.2,1);isolation:isolate}
.cx-path img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);transition:transform 1.4s var(--ease-out),filter .8s}
.cx-path:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,8,.1),rgba(7,7,8,.88) 80%)}
.cx-path:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:inherit;transition:border-color .5s}
.cx-path .pn{position:absolute;top:1.2rem;left:1.3rem;font:600 .72rem var(--fm);letter-spacing:.18em;color:var(--accent2)}
.cx-path .pb{position:absolute;left:1.3rem;right:1.3rem;bottom:1.4rem;width:min(420px,calc(100% - 2.6rem))}
.cx-path h3{font:400 clamp(1.7rem,2.6vw,2.6rem)/.95 var(--fd);text-transform:uppercase;margin:0 0 .5rem;white-space:nowrap}
.cx-path p{margin:0;color:var(--ink-soft);opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .6s .15s var(--ease-out);max-width:38ch}
.cx-path .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font:700 .8rem var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--cool2);opacity:0;transition:opacity .5s .2s}
.cx-path:hover,.cx-path:focus-visible,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child{flex:3.4}
.cx-path:hover img,.cx-path:focus-visible img,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child img{transform:scale(1)}
.cx-path:hover p,.cx-path:hover .go,.cx-path:focus-visible p,.cx-path:focus-visible .go,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child p,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child .go{opacity:1;transform:none}
.cx-path:hover:after,.cx-path:focus-visible:after{border-color:rgba(110,160,255,.6)}
@media(max-width:860px){.cx-paths{flex-direction:column;height:auto}.cx-path{min-height:250px;flex:none}.cx-path p,.cx-path .go{opacity:1;transform:none}.cx-path h3{white-space:normal}}

/* ---------- Gear room (showcase when the catalog is empty) ---------- */
.cx-gear{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cx-gi{position:relative;overflow:hidden;border-radius:var(--r);background:#0e0e12;border:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--ink);aspect-ratio:4/5;display:flex;align-items:flex-end}
.cx-gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s;filter:saturate(.9)}
.cx-gi:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(7,7,8,.9))}
.cx-gi span{position:relative;z-index:2;padding:1rem 1.05rem;font-weight:700;line-height:1.25}
.cx-gi small{display:block;font:600 .66rem var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);margin-bottom:.35rem}
.cx-gi:hover img{transform:scale(1.07);filter:saturate(1.1)}
.cx-gi:hover{border-color:rgba(110,160,255,.5)}
.cx-gi.wide{grid-column:span 2;aspect-ratio:auto}
@media(max-width:900px){.cx-gear{grid-template-columns:1fr 1fr}.cx-gi.wide{grid-column:span 2;aspect-ratio:16/10}}

/* ---------- Statement with scroll-linked focus ---------- */
.cx-statement{font:400 clamp(2.1rem,5.6vw,5rem)/1.02 var(--fd);text-transform:uppercase;max-width:18ch}
.cx-statement .sw{color:rgba(245,243,239,.12);transition:color .45s,text-shadow .45s}
.cx-statement .sw.lit{color:var(--ink)}
.cx-statement .sw.hot.lit{color:var(--accent);text-shadow:0 0 30px var(--warm-glow)}
.cx-statement .sw.cool.lit{color:var(--cool2);text-shadow:0 0 30px var(--cool-glow)}

/* ---------- Kleenhouse room switcher ---------- */
.cx-house{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.cx-house-media{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.cx-house-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease-out),transform 1.6s var(--ease-out)}
.cx-house-media img.on{opacity:1;transform:none}
.cx-house-media .tag{position:absolute;left:1rem;bottom:1rem;z-index:2;font:600 .7rem var(--fm);letter-spacing:.16em;text-transform:uppercase;background:rgba(7,7,8,.75);padding:.5rem .7rem;border-radius:2px}
.cx-rooms{list-style:none;margin:1.6rem 0 2rem;padding:0;border-top:1px solid var(--line)}
.cx-rooms button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);cursor:pointer;font:400 clamp(1.4rem,2.4vw,2rem)/1 var(--fd);text-transform:uppercase;color:var(--dim);transition:color .3s,padding .4s var(--ease-out)}
.cx-rooms button small{font:600 .68rem var(--fm);letter-spacing:.16em;color:var(--accent2)}
.cx-rooms button:hover,.cx-rooms button:focus-visible,.cx-rooms button[aria-pressed=true]{color:var(--ink);padding-left:.6rem}
.cx-rooms button:focus-visible{outline:2px solid var(--cool2);outline-offset:2px}
@media(max-width:860px){.cx-house{grid-template-columns:1fr}}

/* ---------- Filmstrip reel (pinned horizontal scroll + depth-of-field) ---------- */
.cx-reel{position:relative;height:calc(var(--len,3) * 100vh)}
.cx-reel .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,40px)}
.cx-reel .track{display:flex;gap:clamp(14px,2vw,26px);padding:26px max(var(--gutter),6vw);will-change:transform;transform:translate3d(var(--tx,0),0,0);position:relative}
.cx-reel .track:before,.cx-reel .track:after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.14) 10px 22px);border-radius:2px}
.cx-reel .track:before{top:0}.cx-reel .track:after{bottom:0}
.cx-frame{flex:none;width:clamp(260px,34vw,520px);aspect-ratio:3/2;border-radius:4px;overflow:hidden;position:relative;margin:0;background:#000;
  filter:blur(calc(var(--d,0) * 4px)) grayscale(calc(var(--d,0) * .8)) brightness(calc(1 - var(--d,0) * .35));transition:filter .25s linear}
.cx-frame img{width:100%;height:100%;object-fit:cover}
.cx-frame figcaption{position:absolute;left:.8rem;bottom:.7rem;font:600 .66rem var(--fm);letter-spacing:.14em;text-transform:uppercase;background:rgba(7,7,8,.7);padding:.35rem .5rem;border-radius:2px}
.cx-reel .progress{margin:0 max(var(--gutter),6vw);height:2px;background:var(--line)}
.cx-reel .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cool));transform-origin:left;transform:scaleX(var(--rp,0))}
@media(max-width:760px),(prefers-reduced-motion:reduce){
  .cx-reel{height:auto}.cx-reel .pin{position:relative;height:auto;padding:60px 0}
  .cx-reel .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important}.cx-frame{scroll-snap-align:center;width:80vw;filter:none}.cx-reel .progress{display:none}
}

/* ---------- Four steps: film-leader countdown ---------- */
.cx-steps{counter-reset:leader;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);position:relative;margin-top:2.4rem}
.cx-steps:before{content:"";position:absolute;left:0;right:0;top:44px;height:1px;background:var(--line)}
.cx-steps:after{content:"";position:absolute;left:0;top:44px;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--cool));transform-origin:left;transform:scaleX(var(--sp,0))}
.cx-step{position:relative;padding-top:0}
.cx-step .ldr{position:relative;z-index:1;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:#0b0b0d;border:1px solid var(--line);font:400 2.6rem/1 var(--fd);color:var(--dim);margin-bottom:1.3rem;transition:color .5s,border-color .5s,box-shadow .5s}
.cx-step .ldr:before,.cx-step .ldr:after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.cx-step .ldr:after{inset:auto;left:50%;top:6px;bottom:6px;width:1px;border:0;background:rgba(255,255,255,.08)}
.cx-step.on .ldr{color:var(--ink);border-color:var(--cool2);box-shadow:0 0 30px -6px var(--cool-glow)}
.cx-step h3{font:400 1.5rem/1 var(--fd);text-transform:uppercase;margin-bottom:.5rem}
.cx-step p{color:var(--dim);margin:0}
@media(max-width:860px){.cx-steps{grid-template-columns:1fr 1fr}.cx-steps:before,.cx-steps:after{display:none}}

/* ---------- Final CTA ---------- */
.cx-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,14vw,190px) var(--gutter)}
.cx-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 20% 60%,var(--warm-glow),transparent 70%),radial-gradient(60% 80% at 80% 40%,var(--cool-glow),transparent 70%);opacity:.8}
.cx-cta h2{font-size:clamp(3rem,11vw,9rem);line-height:.86;margin-bottom:.4em}
.cx-cta p{color:var(--ink-soft);font-size:1.15rem;max-width:48ch;margin:0 auto 2rem}
.cx-cta .hero-cta{justify-content:center}

/* ---------- Footer: reel strip + wordmark bleed ---------- */
.ftr{position:relative;overflow:hidden;background:var(--footer);border-top:1px solid rgba(255,255,255,.06)}
.ftr-reel{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;padding:.9rem var(--gutter);border-bottom:1px solid rgba(255,255,255,.06);font:600 .7rem var(--fm);letter-spacing:.16em;color:var(--dim)}
.ftr-mark{width:auto;height:96px}
.ftr-cta{margin-top:1rem}
.ftr-word{margin:clamp(20px,4vw,50px) 0 -.14em;font:400 clamp(4.5rem,20vw,19rem)/.8 var(--fd);text-transform:uppercase;text-align:center;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(180deg,rgba(245,243,239,.16),rgba(245,243,239,.02));-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(calc((1 - var(--bp,1)) * 30%));pointer-events:none;user-select:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cx-hero{height:auto}.cx-stage{position:relative;height:92svh}
  .cx-stage>img{transform:none}.cx-bars{display:none}
  .cx-copy{transform:none;opacity:1}
  .js-motion .focus .fw,.js-motion .cut .cw>span{filter:none;opacity:1;transform:none}
  .clap{clip-path:none}.rec:before,.cx-scroll:after{animation:none}
  .cx-statement .sw{color:var(--ink)}
  .ftr-word{transform:none}
  .btn:after{display:none}
}
@media(max-height:700px) and (min-width:761px){.cx-meta{top:calc(var(--header-h) + 14px)}.cx-copy .eyebrow{display:none}}

/* Expanded cards: collapsed panels show a vertical "film can" label; the caption appears when a panel opens */
.cx-path .pv{position:absolute;left:1.1rem;bottom:1.3rem;writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(1.4rem,2vw,1.9rem)/1 var(--fd);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;transition:opacity .35s}
.cx-path .pb{opacity:0;transition:opacity .45s .15s}
.cx-path:hover .pv,.cx-path:focus-visible .pv,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child .pv{opacity:0}
.cx-path:hover .pb,.cx-path:focus-visible .pb,.cx-paths:not(:hover):not(:focus-within) .cx-path:first-child .pb{opacity:1}
@media(max-width:860px){.cx-path .pv{display:none}.cx-path .pb{opacity:1}}