/* ===========================================================
   Chapter 6 Media — The Kickstart
   Palette: studio black, cyc wall, chroma-key blue, tally red
   Type: Big Shoulders Display (display), Archivo (text), IBM Plex Mono (timecode only)
   =========================================================== */

@font-face{font-family:"BSD";src:url(../fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"BSD";src:url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"BSD";src:url(../fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --black:#000;
  --stage:#0d0d0f;        /* panels on black */
  --line-d:#2b2b30;       /* hairlines on black */
  --cyc:#e6e6e2;          /* studio cyc wall */
  --cyc-2:#d6d6d1;
  --ink:#000;
  --steel:#6c6c68;        /* secondary text on cyc */
  --fog:#a3a3a8;          /* secondary text on black */
  --key:#2140ff;          /* chroma-key blue */
  --key-hi:#4a63ff;
  --tally:#ff3b1f;        /* REC / playhead */
  --white:#fff;

  --f-disp:"BSD", "Arial Narrow", Impact, sans-serif;
  --f-text:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gut:clamp(16px, 4vw, 56px);
  --max:1360px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--f-text);font-size:17px;line-height:1.5;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
[hidden]{display:none!important}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--key);color:#fff;padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--key-hi);outline-offset:3px}

/* ---------- shared type ---------- */
.h2{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(52px,8.4vw,128px);line-height:.86;letter-spacing:-.005em}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:34ch;font-stretch:96%}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:2px;font-family:var(--f-text);font-weight:700;font-stretch:112%;font-size:16px;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px}
.btn-key{background:var(--key);color:#fff}
.btn-key:hover{background:var(--key-hi)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn-ghost .dur{font-family:var(--f-mono);font-weight:400;font-size:13px;color:var(--fog)}
.btn-ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3)}
.btn-ghost-dark:hover{box-shadow:inset 0 0 0 1.5px #000}
.btn-sm{min-height:42px;padding:0 16px;font-size:14px}
.btn-block{width:100%}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gut);padding-top:max(10px,env(safe-area-inset-top));transition:background-color .3s,backdrop-filter .3s}
.nav.is-solid{background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:block;line-height:0}
.brand img{height:50px;width:auto}

/* ---------- REC dot ---------- */
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tally);box-shadow:0 0 12px rgba(255,59,31,.7);animation:blink 1.1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,72px);align-items:center;padding:clamp(96px,12vh,140px) var(--gut) clamp(48px,7vh,80px);max-width:var(--max);margin:0 auto}
.hero::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:
  radial-gradient(60% 50% at 78% 40%, rgba(33,64,255,.16), transparent 70%),
  var(--black)}
.hero-kicker{display:flex;align-items:center;gap:10px;font-weight:700;font-stretch:118%;font-size:15px;letter-spacing:.02em;margin-bottom:22px;color:#fff}
.hero-title{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(60px,min(7.4vw,11.5vh),124px);line-height:.84;letter-spacing:-.008em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.02em}
.hero-title .line>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.is-loaded .hero-title .line>span{transform:none}
.is-loaded .hero-title .line:nth-child(2)>span{transition-delay:.08s}
.is-loaded .hero-title .line:nth-child(3)>span{transition-delay:.16s}
.is-loaded .hero-title .line:nth-child(4)>span{transition-delay:.24s}
.hero-sub{margin-top:22px;max-width:42ch;font-size:clamp(17px,1.35vw,19px);color:#d9d9de;font-stretch:96%}

.slate-strip{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:24px;border:1.5px solid rgba(255,255,255,.22);width:max-content;max-width:100%}
.slate-strip>div{padding:10px 20px 12px;border-left:1.5px solid rgba(255,255,255,.22)}
.slate-strip>div:first-child{border-left:0}
.slate-strip dt{font-size:12px;font-weight:600;font-stretch:115%;color:var(--fog);letter-spacing:.02em}
.slate-strip dd{font-family:var(--f-disp);font-weight:900;font-size:clamp(34px,3.6vw,48px);line-height:.95}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* frames: 1 wide main + 4 vertical supporting */
.hero-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.frame{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;background:#111;cursor:pointer;opacity:0;transform:scale(.96);transition:opacity .6s, transform .9s var(--ease)}
.is-loaded .frame{opacity:1;transform:none}
.is-loaded .frame:nth-child(1){transition-delay:.35s}
.is-loaded .frame:nth-child(2){transition-delay:.55s}
.is-loaded .frame:nth-child(3){transition-delay:.65s}
.is-loaded .frame:nth-child(4){transition-delay:.75s}
.is-loaded .frame:nth-child(5){transition-delay:.85s}
.frame video{width:100%;height:100%;object-fit:cover}
.frame-main{grid-column:1/-1;aspect-ratio:16/9}
.frame-sup{aspect-ratio:9/16}
.frame video{position:absolute;inset:0}
.frame-cap{position:absolute;left:8px;bottom:7px;font-size:12px;font-weight:600;font-stretch:112%;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);text-align:left}
.frame-main .frame-cap{left:auto;right:48px;bottom:18px;font-size:13px}
.frame::before{content:"";position:absolute;z-index:2;right:8px;top:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/12px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);opacity:0;transition:opacity .2s,background-color .2s}
.frame-main::before{right:auto;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;background-size:22px}
.frame:hover::before,.frame:focus-visible::before{opacity:1;background-color:var(--key)}
.frame:focus-visible{outline-offset:2px}
.frame-sup::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.frame-sup:hover::after,.frame-sup:focus-visible::after{box-shadow:inset 0 0 0 2px var(--key)}

/* viewfinder overlay */
.vf{position:absolute;inset:0;z-index:1;pointer-events:none;font-family:var(--f-mono);font-size:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vf-c{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.9)}
.vf-c.tl{left:14px;top:14px;border-right:0;border-bottom:0}
.vf-c.tr{right:14px;top:14px;border-left:0;border-bottom:0}
.vf-c.bl{left:14px;bottom:14px;border-right:0;border-top:0}
.vf-c.br{right:14px;bottom:14px;border-left:0;border-top:0}
.vf-rec{position:absolute;left:50px;top:19px;display:flex;align-items:center;gap:7px;font-weight:500}
.vf-tc{position:absolute;right:50px;top:19px;font-weight:500;letter-spacing:.02em}
.vf-meta{position:absolute;left:50px;bottom:19px;color:rgba(255,255,255,.8)}
.vf::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:
  linear-gradient(#fff,#fff) center/100% 1.5px no-repeat,
  linear-gradient(#fff,#fff) center/1.5px 100% no-repeat;opacity:.55}

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:22px 0 24px;overflow:hidden}
.marquee-label{padding:0 var(--gut);font-size:13px;font-weight:600;font-stretch:115%;color:var(--fog);margin-bottom:10px}
.marquee-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee-row{display:flex;align-items:center;flex-shrink:0}
.marquee-row span{font-family:var(--f-disp);font-weight:800;font-size:clamp(34px,4.4vw,60px);text-transform:uppercase;line-height:1;white-space:nowrap;color:#fff;padding:0 .35em}
.marquee-row i{width:14px;height:14px;border:2px solid var(--key);transform:rotate(45deg);flex-shrink:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===========================================================
   PROCESS (cyc)
   =========================================================== */
.process{background:var(--cyc);color:var(--ink);padding:clamp(80px,11vw,150px) var(--gut)}
.process-head,.process-grid{max-width:var(--max);margin:0 auto}
.process-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(48px,6vw,80px)}
.process-head .lede{color:#2b2b2b}
.process-grid{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:start}

.phone{position:sticky;top:96px}
.phone-screen{position:relative;display:block;width:100%;aspect-ratio:9/16;cursor:pointer;padding:0;border:0;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #0c0c0c,0 0 0 9.5px #3a3a3a,0 30px 60px -20px rgba(0,0,0,.45)}
.phone-screen img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.phone-screen:hover img{transform:scale(1.03)}
.phone-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--key);display:grid;place-items:center;color:#fff;box-shadow:0 0 0 0 rgba(33,64,255,.6);animation:pulse 2.4s infinite}
.phone-play svg{width:24px;height:24px;margin-left:4px}
@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(33,64,255,0)}100%{box-shadow:0 0 0 0 rgba(33,64,255,0)}}
.phone-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:40px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-weight:700;font-stretch:112%;font-size:15px;text-align:left}
.phone-cap span{font-family:var(--f-mono);font-weight:400;font-size:13px;opacity:.8}

.steps{counter-reset:none;border-top:2px solid var(--ink)}
.step{position:relative;display:grid;grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr);gap:16px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid rgba(0,0,0,.18)}
.step-n{font-family:var(--f-disp);font-weight:900;font-size:clamp(44px,5vw,72px);line-height:.8;color:var(--key)}
.step h3{font-family:var(--f-text);font-weight:800;font-stretch:118%;font-size:clamp(21px,2.1vw,30px);line-height:1.1;letter-spacing:-.01em}
.step p{margin-top:8px;color:#333;max-width:46ch;font-stretch:96%}
.step-sign{background:var(--white);margin:0 calc(-1 * clamp(12px,1.6vw,24px));padding-left:clamp(12px,1.6vw,24px);padding-right:clamp(12px,1.6vw,24px);border-bottom-color:transparent;box-shadow:0 0 0 2px var(--ink)}
.step-sign h3{font-size:clamp(24px,2.5vw,36px)}
.stamp{position:absolute;right:clamp(10px,2vw,28px);top:50%;width:clamp(150px,16vw,210px);color:var(--tally);transform:translateY(-50%) rotate(-9deg) scale(1.8);opacity:0;mix-blend-mode:multiply;transition:transform .35s cubic-bezier(.5,0,.2,1.4),opacity .15s}
.stamp.is-in{transform:translateY(-50%) rotate(-9deg) scale(1);opacity:.92}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;max-width:560px}
.board-cell{position:relative;background:#fff;padding:5px 5px 22px;box-shadow:0 1px 0 rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.12)}
.board-cell img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.board-cell span{position:absolute;left:6px;bottom:4px;font-size:11px;font-weight:700;font-stretch:115%;color:#555}

/* ===========================================================
   DELIVERABLES + NLE
   =========================================================== */
.deliver{padding:clamp(80px,11vw,150px) var(--gut);max-width:var(--max);margin:0 auto}
.deliver-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(40px,5vw,64px)}
.deliver-head .lede{color:#cfcfd4}

.nle{background:var(--stage);border:1px solid var(--line-d);border-radius:6px;overflow:hidden;font-family:var(--f-mono);font-size:12px;color:var(--fog)}
.nle-bar{display:flex;align-items:center;gap:20px;padding:10px 14px;border-bottom:1px solid var(--line-d);background:#141417}
.nle-title{color:#e9e9ee;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nle-count b{color:#fff;font-weight:500}
.nle-tc{color:var(--tally);font-weight:500;letter-spacing:.02em}
.nle-body{position:relative;padding:0 0 12px}
.nle-ruler{height:28px;margin-left:46px;border-bottom:1px solid var(--line-d);position:relative;overflow:hidden}
.nle-ruler .ticks{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 10%) 0 100%/100% 12px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 2%) 0 100%/100% 6px no-repeat}
.nle-ruler .ticks span{position:absolute;top:4px;font-size:10px;color:#77777d;transform:translateX(3px)}
.nle-track{display:grid;grid-template-columns:46px 1fr;align-items:stretch;border-bottom:1px solid #1d1d21}
.nle-track .lbl{display:grid;place-items:center;font-size:11px;color:#8e8e94;background:#121215;border-right:1px solid var(--line-d)}
.lane{position:relative;height:clamp(62px,7vw,88px)}
.nle-v1 .lane{height:clamp(70px,8vw,100px)}
.nle-a1 .lane{height:44px}
.clip{position:absolute;top:8px;bottom:8px;left:var(--x);width:var(--w);border-radius:4px;overflow:hidden;background:#1d2a8c;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);transition:box-shadow .25s,filter .25s;filter:saturate(.25) brightness(.55)}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.clip span{position:absolute;left:6px;bottom:4px;right:4px;font-family:var(--f-text);font-weight:700;font-stretch:110%;font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.clip.is-hit{filter:none;box-shadow:inset 0 0 0 2px var(--key-hi),0 0 24px rgba(33,64,255,.45)}
.clip-main{background:#1a1a1f}
.clip-main .strip{position:absolute;inset:0;background:url(../img/posters/nos.jpg) 0 0/auto 100% repeat-x;opacity:.85}
.clip-main span{font-size:13px}
.wave{width:100%;height:100%}
.wave path{fill:#3dd68c;opacity:.55}
.playhead{position:absolute;top:0;bottom:0;left:46px;width:2px;background:var(--tally);transform:translateX(0);will-change:transform;pointer-events:none}
.playhead span{position:absolute;top:0;left:-7px;width:16px;height:14px;background:var(--tally);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

.deliver-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);grid-template-rows:repeat(3,auto) 1fr;column-gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,64px);align-items:start}
.dv{grid-column:1;display:grid;grid-template-columns:clamp(84px,9vw,128px) minmax(0,1fr);column-gap:24px;align-items:center;border-top:1px solid var(--line-d);padding:22px 0}
.dv:first-child{border-top:2px solid #fff}
.dv h3{display:contents}
.dv .big{grid-row:1/3;font-family:var(--f-disp);font-weight:900;font-size:clamp(84px,9vw,132px);line-height:.78;color:var(--key-hi)}
.dv h3>:not(.big){}
.dv p{grid-column:2;margin-top:6px;color:#c4c4ca;font-stretch:96%;max-width:40ch}
.dv-t{grid-column:2;align-self:end;font-weight:800;font-stretch:118%;font-size:clamp(22px,2vw,28px);line-height:1.1}
.price{grid-column:2;grid-row:1/5}

.price{background:var(--white);color:var(--ink);padding:clamp(22px,2.4vw,32px);border-radius:3px;position:relative}
.price::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(-45deg,#000 0 14px,#fff 14px 28px);border-radius:3px 3px 0 0}
.price-name{margin-top:6px;font-weight:800;font-stretch:118%;font-size:16px}
.price-num{font-family:var(--f-disp);font-weight:900;font-size:clamp(84px,8vw,124px);line-height:.85;margin-top:6px;letter-spacing:-.01em}
.price-num .cur{font-size:.5em;vertical-align:.62em;margin-right:2px}
.price-unit{margin-top:12px;font-weight:600;font-stretch:112%;color:var(--steel)}
.price-list{margin:20px 0 22px;border-top:1px solid #ddd}
.price-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #e6e6e6;font-size:15px;font-stretch:96%}
.price-list li::before{content:"";flex:0 0 14px;height:8px;margin-top:6px;border-left:2.5px solid var(--key);border-bottom:2.5px solid var(--key);transform:rotate(-45deg)}

/* ===========================================================
   GUARANTEE (key blue)
   =========================================================== */
.guarantee{background:var(--key);color:#fff;padding:clamp(72px,10vw,140px) var(--gut);display:grid;grid-template-columns:auto minmax(0,880px);justify-content:center;gap:clamp(28px,5vw,80px);align-items:center}
.guarantee>*{max-width:var(--max)}
.seal{width:clamp(150px,18vw,250px);color:#fff;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.g-title{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(46px,6.4vw,104px);line-height:.88;max-width:15ch}
.g-copy p{margin-top:22px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.88);font-stretch:96%}

/* ===========================================================
   WORK
   =========================================================== */
.work{padding:clamp(80px,11vw,150px) var(--gut);max-width:var(--max);margin:0 auto}
.work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(36px,4vw,56px)}
.work-head .lede{color:#cfcfd4}
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,220px);gap:10px}
.tile{position:relative;overflow:hidden;background:#141418}
.tile button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;text-align:left}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .5s}
.tile video{opacity:0}
.tile video.is-playing{opacity:1}

.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85));pointer-events:none}
.tile-info{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;pointer-events:none}
.tile-client{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:.95;text-transform:uppercase}
.tile-proj{display:block;margin-top:4px;font-size:13px;font-weight:500;font-stretch:108%;color:#d0d0d6}
.tile-play{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:background-color .2s,transform .3s var(--ease);pointer-events:none}
.tile-play svg{width:14px;height:14px;margin-left:2px;color:#fff}
.tile button:hover img,.tile button:hover video,.tile button:focus-visible img,.tile button:focus-visible video{transform:scale(1.04)}
.tile button:hover~.tile-play,.tile button:focus-visible~.tile-play{background:var(--key);transform:scale(1.08)}
.tile button:focus-visible{outline-offset:-4px}
.work-cta{margin-top:36px;display:flex;justify-content:center}

/* ===========================================================
   FAQ (cyc)
   =========================================================== */
.faq{background:var(--cyc);color:var(--ink);padding:clamp(80px,10vw,140px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px)}
.faq-list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid rgba(0,0,0,.2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-weight:750;font-stretch:112%;font-size:clamp(18px,1.6vw,22px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 18px;height:18px;background:
  linear-gradient(var(--ink),var(--ink)) center/100% 2.5px no-repeat,
  linear-gradient(var(--ink),var(--ink)) center/2.5px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:56ch;color:#2c2c2c;font-stretch:96%}

/* ===========================================================
   FORM / SLATE
   =========================================================== */
.start{background:var(--cyc-2);color:var(--ink);padding:clamp(80px,10vw,140px) var(--gut) clamp(96px,11vw,160px)}
.start-head{max-width:880px;margin:0 auto 40px}
.start-head .lede{margin-top:16px;color:#2c2c2c;max-width:44ch}

.slate{max-width:880px;margin:48px auto 0;background:#0b0b0b;color:#fff;border-radius:0 0 6px 6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.slate-stick{position:relative;height:60px;background:#0b0b0b}
.clapper,.clapper-base{position:absolute;left:0;right:0;height:28px;background:repeating-linear-gradient(-60deg,#fff 0 22px,#000 22px 44px)}
.clapper-base{bottom:0;background:repeating-linear-gradient(60deg,#fff 0 22px,#000 22px 44px)}
.clapper{top:2px;transform-origin:0 100%;transform:rotate(-3.5deg);transition:transform .14s cubic-bezier(.6,0,.9,.3)}
.slate.is-clap .clapper{transform:rotate(0)}
.slate-meta{display:grid;grid-template-columns:1.6fr .7fr .7fr;border-top:2px solid #fff;border-bottom:2px solid #fff}
.slate-meta>div{padding:10px 16px 12px;border-left:2px solid #fff;min-width:0}
.slate-meta>div:first-child{border-left:0}
.slate-meta span{display:block;font-size:12px;font-weight:600;font-stretch:115%;color:#9b9ba1}
.slate-meta b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slate-progress{height:4px;background:#222}
.slate-progress span{display:block;height:100%;width:20%;background:var(--key-hi);transition:width .5s var(--ease)}

.kform{padding:clamp(22px,4vw,44px)}
.kstep{display:none;border:0;margin:0;padding:0;min-width:0}
.kstep.is-active{display:block;animation:stepin .45s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateX(18px)}}
.kstep legend{padding:0;font-family:var(--f-disp);font-weight:900;font-size:clamp(34px,4.4vw,56px);line-height:.92;text-transform:uppercase;max-width:20ch}
.hint{margin-top:10px;color:#a9a9af;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{min-height:48px;padding:0 18px;border:0;border-radius:2px;background:#1b1b1f;color:#fff;font-weight:600;font-stretch:108%;font-size:15px;box-shadow:inset 0 0 0 1.5px #34343a;transition:background-color .15s,box-shadow .15s,transform .15s}
.chip:hover{box-shadow:inset 0 0 0 1.5px #75757d}
.chip[aria-pressed="true"]{background:var(--key);box-shadow:inset 0 0 0 1.5px var(--key)}
.chip[aria-pressed="true"]::before{content:"";display:inline-block;width:10px;height:6px;margin:0 9px 3px 0;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:0}
.field-wide{grid-column:1/-1}
.field span{font-size:13px;font-weight:600;font-stretch:112%;color:#b9b9bf}
.field em{font-style:normal;color:#77777d;font-weight:500}
.field input{min-height:52px;padding:0 14px;border:0;border-radius:2px;background:#17171a;color:#fff;font:inherit;font-size:17px;box-shadow:inset 0 0 0 1.5px #34343a;transition:box-shadow .15s}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--key-hi)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--tally)}
.field-other{margin-top:16px;max-width:420px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:13px;color:#a9a9af;line-height:1.45;cursor:pointer}
.consent input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--key)}
.err{min-height:1.4em;margin-top:12px;color:#ff7a66;font-size:14px;font-weight:600}
.kform-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.kform-nav [data-next]{margin-left:auto;min-width:160px}
.kform-nav .btn-ghost-dark{color:#fff;box-shadow:inset 0 0 0 1.5px #3a3a40}
.kform-nav .btn-ghost-dark:hover{box-shadow:inset 0 0 0 1.5px #fff}
.cal{margin-top:20px;background:#fff;border-radius:3px;min-height:640px;overflow:hidden}
.cal iframe{width:100%;min-height:640px;border:0;display:block}
.is-booking .kform-nav{display:none}

/* ===========================================================
   FOOTER + DOCK + LIGHTBOX
   =========================================================== */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;padding:48px var(--gut) 48px;border-top:1px solid var(--line-d)}
.foot-brand{display:flex;gap:20px;align-items:center}
.foot-brand img{height:84px;width:auto}
.foot-brand p{font-weight:600;font-stretch:110%;font-size:15px;line-height:1.35;color:var(--fog)}
.foot-small{font-size:13px;color:#8a8a90}

.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:rgba(12,12,14,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:4px;box-shadow:0 0 0 1px #2c2c32,0 14px 30px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .4s var(--ease)}
.dock p{font-size:14px;color:#d6d6db}
.dock b{color:#fff}
.dock.is-on{transform:none}


.player{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#000;color:#fff;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px var(--gut)}
.player-title{font-family:var(--f-disp);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title span{font-family:var(--f-text);text-transform:none;font-weight:500;font-size:14px;color:var(--fog);margin-left:10px}
.player-close{flex:0 0 46px;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center}
.player-close svg{width:20px;height:20px}
.player-stage{position:relative;min-height:0;margin:0 clamp(0px,2vw,24px)}
.player-stage video,.player-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.player-foot{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px var(--gut) 16px;flex-wrap:wrap}
.player-foot p{font-size:15px;color:#d6d6db}
.player-full{font-size:14px;font-weight:600;color:#fff;text-underline-offset:3px;margin-right:auto}
.is-locked,.is-locked body{overflow:hidden}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:960px){
  .hero{padding-top:92px;padding-bottom:56px;min-height:auto}
  .hero-frames{max-width:640px}
  .process-grid{grid-template-columns:1fr}
  .phone{position:relative;top:0;max-width:230px;margin:0 auto}
  .work-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,26vw,240px)}
  .faq{grid-template-columns:1fr}
  .deliver-grid{grid-template-columns:1fr}
  .price{grid-column:1;grid-row:auto;margin-top:28px}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero-kicker{order:1;margin-bottom:14px}.hero-title{order:2}.hero-frames{order:3;margin-top:24px;width:100%}.hero-sub{order:4;margin-top:24px}.slate-strip{order:5;margin-top:20px}.hero-ctas{order:6;margin-top:20px}
  .guarantee{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav .btn-sm{min-height:38px;padding:0 12px;font-size:13px}
  .hero-title{font-size:clamp(50px,15vw,88px)}
  .hero{padding-top:84px;padding-bottom:44px}
  .brand img{height:42px}
  .slate-strip{width:100%;grid-template-columns:repeat(3,1fr)}
  .slate-strip>div{padding:8px 12px 10px}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-frames{gap:6px}
  .frame-cap{display:none}
  .frame::before{opacity:1;width:24px;height:24px;right:5px;top:5px;background-size:10px}
  .frame-main::before{width:52px;height:52px;margin:-26px 0 0 -26px;right:auto;top:50%;background-size:18px}
  .vf-meta{display:none}
  .vf-c{width:18px;height:18px}
  .vf-rec{left:38px;top:16px}
  .vf-tc{right:38px;top:16px}
  .step{grid-template-columns:48px minmax(0,1fr)}
  .stamp{position:relative;right:auto;top:auto;grid-column:2;width:170px;margin-top:6px;transform:rotate(-7deg) scale(1.8)}
  .stamp.is-in{transform:rotate(-7deg) scale(1)}
  .board{grid-template-columns:repeat(2,1fr)}
  .nle-bar .nle-title{display:none}
  .nle-body{font-size:10px}
  .nle-ruler .ticks span:nth-child(odd){display:none}
  .clip span{display:none}
  .clip-main span{display:block;font-size:11px}
  .dv .big{font-size:84px}
  .dv{grid-template-columns:70px minmax(0,1fr);column-gap:16px}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,44vw,240px);gap:6px}
  .tile-client{font-size:20px}
  .tile-proj{font-size:12px}
  .tile-info{left:10px;bottom:9px}
  .fields{grid-template-columns:1fr}
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .chip{min-height:54px;padding:8px 12px;text-align:left;line-height:1.2;font-size:14px;display:flex;align-items:center}
  .chip[aria-pressed="true"]::before{flex:0 0 auto;margin-bottom:2px}
  .kstep legend{font-size:clamp(32px,9.5vw,44px)}
  .slate-meta>div{padding:8px 10px 10px}
  .kform-nav [data-next]{min-width:0;flex:1}
  .dock{display:flex}
  .foot{padding-bottom:96px}
  .foot-brand img{height:68px}
  .player-title{font-size:19px}
  .player-title span{display:block;margin:2px 0 0}
  .player-foot{justify-content:space-between;flex-wrap:nowrap}
  .player-foot p{font-size:13px;line-height:1.3}
  .player-full:not([hidden]) ~ p{display:none}
  .player-stage{margin:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero-title .line>span,.frame{transform:none!important;opacity:1!important}
  .stamp{opacity:.92;transform:translateY(-50%) rotate(-9deg)}
}
.tile.no-thumb button{background:
  radial-gradient(120% 80% at 20% 0%, rgba(33,64,255,.35), transparent 60%),
  repeating-linear-gradient(90deg, #121216 0 18px, #0e0e11 18px 36px)}

.is-off,.is-off *{animation-play-state:paused!important}

/* ---- merged site: nav links + footer nav ---- */
.nav{gap:24px}
.nav .nav-links{display:flex;gap:26px;margin-left:auto;margin-right:8px}
.nav .nav-links a{font-size:14px;font-weight:600;font-stretch:110%;color:#c9c9ce;text-decoration:none;padding:8px 0;position:relative;transition:color .2s}
.nav .nav-links a:hover,.nav .nav-links a[aria-current="page"]{color:#fff}
.nav .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--key-hi)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px}
.foot-nav a{color:var(--fog);text-decoration:none}
.foot-nav a:hover{color:#fff}
@media (max-width:960px){.nav .nav-links{display:none}}