/* REEL — cinematic, work-first redesign for itsthierry. New layout, not a reskin. */
@font-face{font-family:"Hanken";src:url("assets/fonts/hanken.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"GeistMono";src:url("assets/fonts/geistmono.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bg:#070708; --bg-1:#0d0d0f; --bg-2:#141417;
  --ink:#ECE6DA; --dim:#9C968B; --faint:#857F75;
  --gold:#F2AB3A; --gold-hi:#F6C885; --gold-deep:#C98A2A;
  --line:rgba(236,230,218,.10); --line-2:rgba(236,230,218,.18);
  --font:"Hanken",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"GeistMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,72px); --maxw:1320px; --sect:clamp(68px,9vw,124px); /* tightened ~30% 2026-07-01 (Boban fix #3: kill the empty-viewport bands) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.rl{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:350;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#0a0a0a}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--gold);color:#000;padding:10px 16px;border-radius:4px}

/* cinema letterbox + grain */
.lb{position:fixed;left:0;right:0;height:clamp(10px,2.2vh,22px);background:#000;z-index:120;pointer-events:none}
.lb-top{top:0}.lb-bot{bottom:0}
/* tier-1: film gate weave — subliminal ±1px float on the cinema bars */
@keyframes lbweave{0%{transform:translateY(0)}50%{transform:translateY(1px)}100%{transform:translateY(-1px)}}
.grain{position:fixed;inset:0;z-index:130;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>")}

/* shared type */
.ey{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.7em;align-items:center}
.ey::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
.sec-h{font-weight:420;font-size:clamp(2.2rem,5.6vw,5.2rem);letter-spacing:-.032em;line-height:1.0;margin:.35em 0 0;max-width:18ch} /* tier-1 type courage 2026-07-01 */
.lead{color:var(--dim);font-size:clamp(1.04rem,1.4vw,1.24rem);line-height:1.55;max-width:52ch;margin-top:1.1em}
b{font-weight:600;color:var(--ink)}

/* buttons */
.cta{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font);font-weight:600;font-size:.98rem;
  background:var(--gold);color:#0a0a0a;padding:15px 26px;border-radius:4px;border:0;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);letter-spacing:.005em}
.cta:hover{background:var(--gold-hi);transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(242,171,58,.5)}
.cta-lg{padding:17px 32px;font-size:1.04rem}
.cta-sm{padding:11px 18px;font-size:.88rem}
.cta-block{display:flex;width:100%;justify-content:center}
/* "Watch the reel" = an obvious button, not a faint label (Boban fix #5, 2026-07-01) */
.ghost{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:13px 22px;border:1px solid rgba(242,171,58,.45);border-radius:4px;background:rgba(7,7,8,.38);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
/* keyboard parity for the restyled/interactive controls (panel fix 2026-07-01) */
.ghost:focus-visible,.hero-pin:focus-visible,.cta:focus-visible,.sr-stage:focus-visible,.sr-thumb:focus-visible,.sr-fs:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ghost:hover{border-color:var(--gold);background:rgba(242,171,58,.12);transform:translateY(-1px)}
.ghost .ar{color:var(--gold)}
.ar{transition:transform .3s var(--ease)}.cta:hover .ar{transform:translateX(3px)}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vh,26px) var(--pad);transition:background .35s var(--ease),padding .35s var(--ease),border-color .35s;border-bottom:1px solid transparent}
.bar.stuck{background:rgba(7,7,8,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:14px;padding-bottom:14px}
.mark{display:inline-flex;align-items:baseline;gap:.6em}
.mark b{font-weight:600;letter-spacing:.14em;font-size:1.02rem;color:var(--ink)}
.mark span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#C9C3B7}
.bar-r{display:flex;align-items:center;gap:28px}
.bar-nav{display:flex;gap:26px}
.bar-nav a{font-size:.92rem;color:var(--dim);transition:color .25s}
.bar-nav a:hover{color:var(--ink)}
@media (max-width:760px){.bar-nav{display:none}}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.02) contrast(1.03)}
.hero-grade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(7,7,8,.55) 0%,rgba(7,7,8,.05) 26%,rgba(7,7,8,.55) 72%,rgba(7,7,8,.96) 100%),
  radial-gradient(120% 90% at 70% 30%,transparent 35%,rgba(7,7,8,.6) 100%)}
.hero-wrap{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(70px,12vh,150px)}
.hero-h{font-weight:400;font-size:clamp(2.7rem,7.4vw,6.4rem);letter-spacing:-.03em;line-height:.96;max-width:15ch;margin:.28em 0 0;text-wrap:balance}
.hero-sub{margin-top:1.2em;max-width:42ch;font-size:clamp(1.06rem,1.6vw,1.34rem);line-height:1.5;color:#d8d2c6}
.hero-cta{display:flex;align-items:center;gap:24px;margin-top:1.6em;flex-wrap:wrap}
/* hero "Free sample" — demoted from a bordered card to quiet clickable TEXT (Boban 2026-07-01:
   two stacked boxes read as button clutter on the phone; ONE button in the hero = Watch the reel,
   the offer stays visible as text with the gold label + underlined Get started) */
.hero-pin{display:block;max-width:430px;margin-top:1.6em;padding:0;border:0;background:transparent;transition:opacity .3s var(--ease)}
.hero-pin:hover{opacity:.92}
.hero-pin-label{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.hero-pin-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.hero-pin-text{margin:.55em 0 .55em;color:#d8d2c6;font-size:.98rem;line-height:1.5;max-width:44ch;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-pin-go{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--gold);font-size:.98rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(242,171,58,.5)}
.hero-pin-go .ar{color:var(--gold);transition:transform .3s var(--ease)}
.hero-pin:hover .hero-pin-go{text-decoration-color:var(--gold)}
.hero-pin:hover .hero-pin-go .ar{transform:translateX(4px)}
.hero-now{position:absolute;z-index:2;right:var(--pad);bottom:clamp(70px,12vh,150px);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.7em}
.hero-now .dot,.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);display:inline-block}
.hero-now .dot{animation:blink 2.4s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* trust strip */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;justify-content:center;padding:22px var(--pad);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.strip i{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6}

/* (removed orphaned .reel film-strip system — superseded by the .player/.thumbs work section; 0 HTML refs, council 2026-06-30) */

/* (removed orphaned .deal/.beats — 0 HTML refs, council 2026-06-30) */

/* ============ TRADES marquee ============ */
.trades{padding:var(--sect) 0;text-align:center} /* r4: full-width borders removed — they doubled the background grid lines */
.trades .ey{margin:0 auto}
.marq{margin:clamp(34px,5vw,60px) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-row{display:flex;gap:0;width:max-content;animation:marq 36s linear infinite}
.marq-row span{font-weight:430;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.02em;color:var(--ink);padding:0 .6em;white-space:nowrap;display:inline-flex;align-items:center}
.marq-row span::after{content:"·";color:var(--gold);margin-left:1.2em;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-row{animation:none}}
.trades-foot{max-width:48ch;margin:0 auto;padding:0 var(--pad);color:var(--faint)}

/* ============ GET + PRICING ============ */
.get{max-width:var(--maxw);margin:0 auto;padding:var(--sect) var(--pad);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:start}
/* (removed orphaned .deliver — superseded by .feat-grid; 0 HTML refs, council 2026-06-30) */
.price-card{background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line-2);border-radius:10px;padding:clamp(28px,3vw,42px);position:sticky;top:14vh}
.price-anchor{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:.2em 0 0}
.price-anchor + .price{margin-top:.05em}
.price{position:relative;display:flex;align-items:flex-start;font-weight:500;letter-spacing:-.04em;line-height:.82;font-size:clamp(5rem,13vw,9rem);margin:.1em 0 .2em;
  /* tier-1: gold emits — the number carries light, not just color */
  text-shadow:0 0 30px rgba(242,171,58,.22),0 0 80px rgba(242,171,58,.10)}
.price .cur{font-size:.34em;color:var(--gold);margin-right:.06em;margin-top:.2em;text-shadow:0 0 22px rgba(242,171,58,.5)}
/* tier-1: anamorphic flare sweep, fired once when the count-up lands */
.price::after{content:"";position:absolute;left:-8%;right:-8%;top:52%;height:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,214,130,.85) 45%,rgba(255,235,190,1) 50%,rgba(255,214,130,.85) 55%,transparent);
  filter:blur(.4px)}
@keyframes priceflare{0%{opacity:0;transform:scaleX(.2)}35%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.15)}}
.price.flare::after{animation:priceflare .9s ease-out}
.price .flat{font-family:var(--mono);font-size:.12em;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);align-self:flex-end;margin:0 0 .9em .5em}
.price-sub{color:var(--dim);font-size:1rem;line-height:1.55;margin-bottom:1.6em}
.price-foot{display:flex;align-items:center;gap:.6em;margin-top:1.2em;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ============ FAQ ============ */
.faq{max-width:960px;margin:0 auto;padding:var(--sect) var(--pad)}
.faq-list{margin-top:clamp(28px,4vw,48px)}
.qa{border-top:1px solid var(--line)}.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:450;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:0 0 auto;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gold);transition:transform .3s var(--ease)}
.qa summary i::before{width:16px;height:1.5px}.qa summary i::after{width:1.5px;height:16px}
.qa[open] summary i::after{transform:scaleY(0)}
.qa p{color:var(--dim);padding:0 0 26px;max-width:68ch;line-height:1.6}

/* ============ START / FORM ============ */
.start{max-width:var(--maxw);margin:0 auto;padding:var(--sect) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.start-points{list-style:none;margin-top:2em;display:flex;flex-direction:column;gap:14px}
.start-points li{position:relative;padding-left:28px;color:var(--dim);font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.start-points li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.brief{background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line-2);border-radius:10px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:16px}
.fp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:8px}
.f label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.f .opt{color:var(--faint);text-transform:none;letter-spacing:0}
.f input,.f textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:4px;padding:14px 15px;color:var(--ink);font-family:var(--font);font-size:1rem;transition:border-color .25s,box-shadow .25s;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,171,58,.16)}
/* placeholders never chop mid-word — overflow fades to an ellipsis (2026-07-01) */
.f input::placeholder{text-overflow:ellipsis}
.f input::placeholder,.f textarea::placeholder{color:var(--faint)}
.hp{position:absolute;left:-9999px}
.brief-note,.fstatus{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);display:flex;align-items:center;gap:.6em}
.fstatus.ok{color:var(--gold)}.fstatus.err{color:#e0683a}
.email-alt{font-size:.9rem;color:var(--faint)}.email-alt a{color:var(--gold)}

/* ============ FOOTER ============ */
.foot{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,7vw,90px) var(--pad);display:flex;flex-direction:column;gap:20px} /* r4: border-top removed — doubled the grid */
.foot-honest{max-width:62ch;color:var(--dim);font-size:.96rem;line-height:1.6}
.foot-meta{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.foot-meta a{color:var(--dim);transition:color .25s}.foot-meta a:hover{color:var(--gold)}
.foot-c{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}

/* ============ MOTION (reveal start states; .ready clears them) ============ */
html.js .rl [data-rise]{opacity:0;transform:translateY(18px);will-change:transform,opacity} /* hidden ONLY when JS is live (red-team B1 fix) */
.rl.ready [data-rise].in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
/* filmstrip: fade-only (no rise) so the tiny labels never smear mid-transition (fix #6) */
.rl .sr-strip[data-rise]{transform:none}
.split-line{display:block;overflow:hidden}.split-line>span{display:block;will-change:transform}
@media (prefers-reduced-motion:reduce){.rl [data-rise]{opacity:1!important;transform:none!important}.split-line>span{transform:none!important}}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .deal,.get,.start{grid-template-columns:1fr;gap:40px}
  .deal-l,.price-card{position:static}
  .frame{width:86vw}.frame.vert{width:64vw}
}
@media (max-width:560px){
  .fp{grid-template-columns:1fr}
  .hero-now{display:none}
  .bar-tc{display:none}
  .reel-foot{margin-left:0}
}
/* phones: keep the bar to wordmark + CTA so they never collide (footer keeps its tagline) */
@media (max-width:480px){
  .bar .mark span{display:none}
  .cta-sm{padding:10px 15px;font-size:.85rem}
  .bar{padding-left:18px;padding-right:18px}
}
/* mobile hero fills with bright footage — keep small eyebrow/sub legible with a soft scrim
   (no offset = a contrast scrim, not a visible drop-shadow; desktop unaffected) */
@media (max-width:760px){
  .hero .ey,.hero-sub{text-shadow:0 1px 16px rgba(0,0,0,.55)}
}


/* ===== STUDIO work (player+thumbs) + how (cards) ported into REEL — Boban 2026-06-29 =====
   .sframe/.sbar namespaced to avoid REEL's old film-strip .frame; vertical videos pillarboxed. */
.head{max-width:60ch}.head.center{margin:0 auto;text-align:center}.head.center .lead{margin-left:auto;margin-right:auto;max-width:54ch}
.work{max-width:var(--maxw);margin:0 auto;padding:var(--sect) var(--pad)}
.player{margin-top:clamp(36px,5vw,56px)}
.sframe{position:relative;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#000;box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 0 1px rgba(242,171,58,.06)}
.sbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--bg-2);border-bottom:1px solid var(--line);position:relative;z-index:2}
.sbar i{width:9px;height:9px;border-radius:50%;background:var(--faint);opacity:.5}
.sbar b{margin-left:14px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.blurfill{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(34px) brightness(.4);transform:scale(1.18)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(7,7,8,.4);backdrop-filter:blur(8px);pointer-events:none;transition:opacity .3s,background .3s,transform .3s,border-color .3s}
.fs-btn{position:absolute;right:14px;bottom:14px;z-index:4;width:40px;height:40px;border-radius:8px;border:1px solid var(--line-2);background:rgba(7,7,8,.5);backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;display:grid;place-items:center;opacity:.82;transition:background .3s,color .3s,opacity .3s,transform .3s}
.fs-btn:hover{background:var(--gold);color:#000;opacity:1;transform:translateY(-1px)}
.big-play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;transform:translateX(3px)}
.big-play:hover{background:var(--gold);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.06)}.big-play:hover::before{border-left-color:#000}
.player.playing .big-play{opacity:0;pointer-events:none}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
.thumb{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;transition:border-color .3s,transform .3s,filter .3s;filter:grayscale(.3) brightness(.7)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,8,.7),transparent 60%)}
.thumb span{position:absolute;left:8px;bottom:6px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.thumb:hover{transform:translateY(-2px);filter:none}
.thumb.active{border-color:var(--gold);filter:none;box-shadow:0 0 0 1px var(--gold)}
.work-foot{margin-top:30px;color:var(--faint);font-size:.92rem}
/* ============ HOW IT WORKS — premium process w/ gold spine (rebuilt 2026-06-29) ============ */
.how{max-width:var(--maxw);margin:0 auto;padding:var(--sect) var(--pad)}
.proc{position:relative;margin-top:clamp(46px,6vw,78px)}
/* the spine: faint rail + gold fill that grows with scroll (--p set by reel.js, 0..1) */
.proc-spine{position:absolute;top:31px;left:12.5%;right:12.5%;height:2px;z-index:0;pointer-events:none}
.proc-rail{position:absolute;inset:0;background:var(--line-2);border-radius:2px}
.proc-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:2px;box-shadow:0 0 16px -2px rgba(242,171,58,.5)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px)}
.step{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,2vw,30px);padding-top:56px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(168deg,var(--bg-2),var(--bg-1) 58%,var(--bg));
  box-shadow:inset 0 1px 0 rgba(236,230,218,.05),0 28px 58px -34px rgba(0,0,0,.9);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(236,230,218,.07),0 38px 72px -30px rgba(0,0,0,.95),0 0 0 1px rgba(242,171,58,.13)}
.step-node{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:2;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--dim);
  background:radial-gradient(circle at 50% 32%,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.85);
  transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.step-node svg{width:22px;height:22px}
.step.on .step-node,.step:hover .step-node{color:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(242,171,58,.10),0 0 22px -2px rgba(242,171,58,.5);transform:translateX(-50%) scale(1.07)}
.step-n{font-family:var(--mono);font-weight:400;font-size:clamp(2.1rem,2.6vw,2.7rem);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);margin-bottom:.45em;transition:-webkit-text-stroke-color .4s,color .4s}
.step.on .step-n{-webkit-text-stroke-color:var(--gold-deep);color:rgba(242,171,58,.07)}
.step h3{font-weight:560;font-size:1.16rem;letter-spacing:-.01em;margin-bottom:.42em}
.step p{color:var(--dim);font-size:.98rem;line-height:1.55}
/* tablet/mobile: vertical timeline — spine on the left, cards stacked (robust, no pin) */
@media (max-width:900px){
  .proc-spine{top:0;bottom:0;left:25px;right:auto;width:2px;height:auto}
  .proc-fill{transform-origin:top center;transform:scaleY(var(--p,0))}
  .steps{grid-template-columns:1fr;gap:18px}
  .step{padding:22px 24px 22px 70px}
  .step-node{top:22px;left:0;transform:none}
  .step.on .step-node,.step:hover .step-node{transform:scale(1.07)}
  .step-n{position:static;margin:0 0 .45em;font-size:.95rem;font-family:var(--mono);letter-spacing:.1em;-webkit-text-stroke:0;color:var(--gold)}
  /* panel fix 2026-07-01: the desktop ghost treatment (.step.on .step-n, specificity 0,2,1) was
     beating this mobile override once a step activated — numerals went near-invisible on phones */
  .step.on .step-n{-webkit-text-stroke:0;color:var(--gold)}
  .thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){.thumbs{grid-template-columns:repeat(2,1fr)}}

/* ================================================================
   FX LAYER (added 2026-06-29) — Tier-1 micro-interactions + Tier-2 cinematic.
   transform/opacity only · capped · prefers-reduced-motion safe ·
   NO invented background · NO custom cursor (per Boban). GSAP already vendored.
   ================================================================ */

/* film-start entrance — CSS-driven so it clears even if JS never runs */
.boot{position:fixed;inset:0;background:#000;z-index:200;pointer-events:none;animation:bootclear 1s .25s forwards}
@keyframes bootclear{to{opacity:0;visibility:hidden}}
/* tier-2: film-leader slate on the boot cover (JS gates it to once per session via body.slate) */
.boot{display:flex;align-items:center;justify-content:center}
.boot-slate{opacity:0;position:relative;font-family:var(--mono);font-size:clamp(64px,14vw,150px);color:rgba(236,230,218,.16);line-height:1}
.boot-slate::before{content:"";position:absolute;inset:-38%;border:1px solid rgba(236,230,218,.10);border-radius:50%}
.boot-slate::after{content:"";position:absolute;inset:-38%;border-radius:50%;
  border:1px solid transparent;border-top-color:rgba(242,171,58,.55);animation:slatesweep .8s linear}
@keyframes slatesweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.slate .boot-slate{opacity:1}
/* tier-1: the live timecode in the player bar (fr-tags removed per Boban 2026-07-01) */
.sr-pbar-tc{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);opacity:.7;flex-shrink:0;font-variant-numeric:tabular-nums}
@media (max-width:560px){.sr-pbar-tc{display:none}}
.lb{transform:scaleY(0);transform-origin:50% 0;animation:lbgrow .9s .15s forwards,lbweave 9s 1.4s ease-in-out infinite alternate}
.lb-bot{transform-origin:50% 100%}
@keyframes lbgrow{to{transform:scaleY(1)}}

/* scroll-progress hairline (JS sets scaleX) */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));z-index:101;pointer-events:none;will-change:transform}

/* active-section nav + hover underline */
.bar-nav a{position:relative}
.bar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.bar-nav a:hover::after,.bar-nav a.cur::after{transform:scaleX(1)}
.bar-nav a.cur{color:var(--ink)}

/* primary-button gold sheen sweep on hover */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;top:-10%;left:-140%;width:55%;height:120%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.cta:hover::after{animation:sheen .85s var(--ease)}
@keyframes sheen{to{left:160%}}
.cta.mag{will-change:transform}

/* underline-draw on footer + email links */
.foot-meta a,.email-alt a{position:relative}
.foot-meta a::after,.email-alt a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.foot-meta a:hover::after,.email-alt a:hover::after{transform:scaleX(1)}

/* contained cursor-spotlight on the price + form cards (NOT a page background) */
.price-card,.brief{position:relative;overflow:hidden}
.price-card::before,.brief::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(242,171,58,.12),transparent 62%)}
.price-card.lit::before,.brief.lit::before{opacity:1}
.price-card>*,.brief>*{position:relative;z-index:1}

/* smooth FAQ answer reveal (JS animates height) */
.qa p{overflow:hidden}

/* live thumbnails: subtle ken-burns lift on hover */
.thumb{will-change:transform,filter}
.thumb:hover{transform:translateY(-3px) scale(1.015);filter:none}

/* hero parallax hooks */
.rl .hero-reel{will-change:transform}
.rl .hero-wrap{will-change:transform,opacity}

/* reduced-motion: no entrance, no sheen/zoom; show everything at rest */
@media (prefers-reduced-motion:reduce){
  .boot{display:none}
  .lb{animation:none;transform:scaleY(1)}
  .cta:hover::after{animation:none;display:none}
  .thumb:hover{transform:none}
  .prog{display:none}
}

/* ===== Mobile hero polish + lighter free-sample card (Boban 2026-06-29) =====
   Appended LAST so these win source-order over the earlier mobile blocks (GOTCHA #6).
   - eyebrow shortened to "Cinematic video ads" (one line on phones; Boban kept this part).
   - tighten the subhead + spacing so the text stack breathes.
   - free-sample pin: MORE transparent (footage shows through) + the -webkit- blur prefix
     the base rule lacks (iOS) + a text-shadow so it stays legible at the lower opacity. */
@media (max-width:640px){
  .hero-sub{font-size:.98rem;line-height:1.45;margin-top:.9em}
  .hero-cta{margin-top:1.2em}
  /* text-only pin on phones too (2026-07-01 — the card box is gone at all widths) */
  .hero-pin{margin-top:1.3em;padding:0;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-pin:hover{background:transparent}
  .hero-pin-text{margin:.5em 0 .5em;font-size:.95rem;line-height:1.45}
  .hero-pin-label,.hero-pin-text,.hero-pin-go{text-shadow:0 1px 14px rgba(0,0,0,.7)}
}

/* ================================================================
   ENGINEERED LAYER — "take it up a notch / higher engineered / Morph" (Boban 2026-06-29)
   Bento blocks + mono precision + depth + motion, on the dark+gold brand.
   NO invented background — depth comes from SURFACES only. Appended LAST = wins source-order.
   ================================================================ */

/* nav: reverted to the accepted full-width bar (Boban 2026-06-29: top stays accepted; the pill read "over engineered" up there). */

/* (removed orphaned .metrics bento — reverted to the trust strip; 0 HTML refs, council 2026-06-30) */

/* ===== feature bento (deliverables -> tiles) ===== */
.feat-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:1.7em}
.feat{position:relative;display:flex;gap:.85em;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(168deg,var(--bg-1),var(--bg));transition:border-color .35s var(--ease),transform .35s var(--ease)}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px)}
.feat-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--gold);
  background:rgba(242,171,58,.08);border:1px solid rgba(242,171,58,.22);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.feat-ic svg{width:16px;height:16px}
.feat>span{font-size:.97rem;color:#cfc9bd;line-height:1.42}
/* scroll-glow: feature tiles light gold as you scroll past them (mirrors .step.on in how-it-works) */
.feat.on{border-color:var(--line-2)}
.feat.on .feat-ic{color:var(--gold);border-color:var(--gold);background:rgba(242,171,58,.16);
  box-shadow:0 0 0 4px rgba(242,171,58,.08),0 0 18px -3px rgba(242,171,58,.55)}

/* ===== price card — engineered gradient border + included chips ===== */
.price-card::after{content:"";position:absolute;inset:0;border-radius:10px;padding:1px;pointer-events:none;z-index:0;
  background:linear-gradient(150deg,rgba(242,171,58,.45),transparent 38%,transparent 72%,rgba(242,171,58,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.price-incl{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:.2em 0 1.5em}
.price-incl li{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;display:inline-flex;align-items:center;gap:.5em}
.price-incl li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ===== FAQ — elevated panels (was hairline rows) ===== */
.faq-list{display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--line);border-radius:12px;padding:0 clamp(18px,2vw,24px);
  background:linear-gradient(168deg,var(--bg-1),var(--bg));transition:border-color .35s var(--ease),background .35s var(--ease)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa[open]{border-color:var(--line-2);background:linear-gradient(168deg,var(--bg-2),var(--bg-1))}
.qa:hover{border-color:var(--line-2)}
.qa summary{padding:19px 0}

/* ===== footer — structured engineered ===== */
.foot{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(26px,5vw,72px);align-items:start}
.foot-l{display:flex;flex-direction:column;gap:16px}
.foot-r{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.foot-status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:.6em}
.foot-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#46c17a;box-shadow:0 0 9px #46c17a;animation:blink 2.6s var(--ease) infinite}
@media (max-width:760px){.foot{grid-template-columns:1fr;gap:30px}}

/* ===== responsive ===== */
@media (max-width:900px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.metrics-grid{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr}}

/* ================================================================
   REEL WALL (Pattern A) — silent autoplay-muted looping grid.
   The work is the hero: a masonry-ish wall of moving footage, muted
   palette at rest (cohesive), full color on hover; tap = sound + fullscreen.
   ================================================================ */
.reelwall{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:14px;margin-top:clamp(36px,5vw,56px)}
.rw-tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#000;cursor:pointer;padding:0;
  box-shadow:0 30px 70px -42px rgba(0,0,0,.9);transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.rw-tile.wide{grid-column:span 3;aspect-ratio:16/9}            /* two across */
.rw-tile.tall{grid-column:span 2;aspect-ratio:9/16}           /* three across, portrait */
.rw-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(.34) brightness(.74) contrast(1.02);transition:filter .5s var(--ease),transform .6s var(--ease)}
.rw-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,7,8,.78) 2%,rgba(7,7,8,.12) 42%,transparent 70%)}
.rw-meta{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:3px;pointer-events:none;
  transform:translateY(2px);transition:transform .4s var(--ease)}
.rw-meta b{font-weight:560;font-size:.96rem;letter-spacing:-.01em;color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.rw-meta i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* tap-for-sound play glyph (appears on hover/focus) */
.rw-play{position:absolute;right:13px;top:13px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(7,7,8,.4);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s,border-color .3s}
.rw-play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;transform:translateX(2px)}
.rw-tile:hover,.rw-tile:focus-visible{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(242,171,58,.18);outline:none}
.rw-tile:hover video,.rw-tile:focus-visible video{filter:grayscale(0) brightness(.96) contrast(1.04);transform:scale(1.04)}
.rw-tile:hover .rw-meta,.rw-tile:focus-visible .rw-meta{transform:translateY(0)}
.rw-tile:hover .rw-play,.rw-tile:focus-visible .rw-play{opacity:1;transform:scale(1)}
.rw-play.on{background:var(--gold);border-color:var(--gold)}.rw-play.on::before{border-left-color:#000}
/* a tile that is currently playing with sound: full color, gold frame, pause glyph */
.rw-tile.live video{filter:grayscale(0) brightness(1) contrast(1.04)}
.rw-tile.live{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.rw-tile.live .rw-play{opacity:1;transform:scale(1);background:var(--gold);border-color:var(--gold)}
.rw-tile.live .rw-play::before{border:0;width:11px;height:12px;border-left:3.5px solid #000;border-right:3.5px solid #000;transform:none}
@media (max-width:900px){
  .reelwall{grid-template-columns:repeat(2,1fr)}
  .rw-tile.wide{grid-column:span 2}.rw-tile.tall{grid-column:span 1}
}
@media (max-width:560px){
  .reelwall{grid-template-columns:1fr;gap:12px}
  .rw-tile.wide,.rw-tile.tall{grid-column:span 1}
  .rw-play{opacity:1;transform:scale(1)}    /* no hover on touch — always show the tap hint */
}
@media (prefers-reduced-motion:reduce){.rw-tile video{transition:none}.rw-tile:hover{transform:none}}

/* ================================================================
   PATTERN B — SHOWREEL overrides (appended last; source-order wins)
   Cinematic film-director aesthetic: heavier grade, letterbox-inside-hero,
   title-card layout, single gated player + horizontal filmstrip.
   All new classes are sr-* namespaced. No invented background scene.
   ================================================================ */

/* ---- Hero: deeper grade + cinematic atmosphere ---- */
.sr-hero .hero-reel{filter:saturate(.72) contrast(1.12) brightness(.78)}
.sr-grade{background:
  linear-gradient(180deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.18) 22%,
    rgba(0,0,0,.08) 46%,
    rgba(0,0,0,.58) 74%,
    rgba(0,0,0,.97) 100%),
  radial-gradient(130% 100% at 60% 20%, transparent 28%, rgba(0,0,0,.72) 100%) !important}

/* inner letterbox bars (heavier than the global .lb; these are decorative film frame) */
.sr-lbh{position:absolute;left:0;right:0;height:clamp(36px,5.5vh,66px);background:#000;z-index:3;pointer-events:none}
.sr-lbh-top{top:0}.sr-lbh-bot{bottom:0}

/* studio ID + timecode — top-left leader */
.sr-studio{position:absolute;top:clamp(44px,7vh,78px);left:var(--pad);z-index:4;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.sr-studio-id{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,218,.42)}
.sr-studio-tc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(236,230,218,.28)}

/* hero content: bottom-left at display scale */
.sr-wrap{padding-bottom:clamp(78px,12vh,160px) !important}
.sr-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,230,218,.5);display:block;margin-bottom:.9em}
.sr-h{font-size:clamp(3.2rem,8.5vw,7.6rem) !important;max-width:14ch !important;font-weight:380 !important;letter-spacing:-.035em !important}
.sr-cred{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,230,218,.38);display:block;margin-top:1.6em}
.sr-cta{margin-top:2em !important}

/* the "▶ WATCH THE REEL · 00:30" film cue button */
.sr-play-cue{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(236,230,218,.32);border-radius:3px;
  padding:13px 22px;
  background:rgba(7,7,8,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.sr-play-cue:hover{border-color:var(--gold);color:var(--gold);background:rgba(7,7,8,.48);transform:translateY(-2px)}

/* grain: heavier in showreel mode */
.sr-hero ~ .grain,.grain{opacity:.09 !important}

/* ---- Work section: showreel layout ---- */
.sr-work{max-width:var(--maxw);margin:0 auto;padding:var(--sect) var(--pad)}
/* hide the old reel wall if present */
.sr-work .reelwall{display:none}

/* featured player frame */
.sr-player{margin-top:clamp(40px,5.5vw,64px)}
.sr-pframe{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.98),0 0 0 1px rgba(242,171,58,.07)}

/* cinema top bar */
.sr-pbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#0a0a0c;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.sr-pbar-id{color:rgba(236,230,218,.28);flex-shrink:0}
.sr-pbar-label{color:var(--ink);flex:1;text-align:center;font-size:10px;letter-spacing:.16em}
.sr-pbar-badge{flex-shrink:0;font-size:9px;letter-spacing:.14em;color:var(--gold);border:1px solid rgba(242,171,58,.35);border-radius:2px;padding:2px 7px}

/* the stage: 16:9 aspect, video contained, blur pillarbox fill */
.sr-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer}
.sr-stage .blurfill{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(40px) brightness(.35);transform:scale(1.22);transition:background-image .1s}
.sr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}

/* the overlay: shown at rest (before first play); hidden while playing */
.sr-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,0,0,.22);transition:opacity .35s var(--ease)}
.sr-overlay.hidden{opacity:0;pointer-events:none}

/* the play ring button */
.sr-play-ring{display:block;width:80px;height:80px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(7,7,8,.36);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.sr-play-ring::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;transform:translateX(4px)}
.sr-stage:hover .sr-play-ring{background:var(--gold);border-color:var(--gold);transform:scale(1.06)}
.sr-stage:hover .sr-play-ring::before{border-left-color:#000}

/* runtime cue label */
.sr-reel-cue{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,218,.75)}

/* fullscreen button */
.sr-fs{position:absolute;right:14px;bottom:14px;z-index:4;width:40px;height:40px;border-radius:6px;
  border:1px solid var(--line-2);background:rgba(7,7,8,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;
  opacity:.75;transition:background .3s,color .3s,opacity .3s,transform .3s;padding:0}
.sr-fs:hover{background:var(--gold);color:#000;opacity:1;transform:translateY(-1px)}

/* player bottom bar */
.sr-pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:9px 16px;background:#0a0a0c;border-top:1px solid var(--line)}
.sr-pfoot-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(236,230,218,.3)}
.sr-pfoot-right{text-align:right}

/* ---- Filmstrip ---- */
.sr-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.sr-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:5px;
  background:#000;cursor:pointer;padding:0;
  filter:grayscale(.55) brightness(.62);
  transition:border-color .3s var(--ease),filter .3s var(--ease),transform .3s var(--ease)}
.sr-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.sr-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 55%);z-index:1}
.sr-thumb-label{position:absolute;left:6px;bottom:6px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(236,230,218,.92);line-height:1.3;
  /* solid chip (panel fix 2026-07-01): thumbs autoplay ads with BURNED-IN captions — a shadow
     alone left labels garbled over caption frames; the chip keeps them readable over anything */
  background:rgba(7,7,8,.78);padding:3px 7px;border-radius:3px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sr-thumb-label i{font-style:normal;color:var(--gold)}
.sr-thumb:hover{filter:grayscale(.1) brightness(.9);transform:translateY(-2px);border-color:var(--line-2)}
.sr-thumb.active{filter:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 20px -2px rgba(242,171,58,.5)} /* tier-1: active thumb emits */

/* ---- Scanline texture overlay (CSS-only, no invented scene) ---- */
.sr-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);
  opacity:.6}

/* ---- Responsive ---- */
@media (max-width:900px){
  .sr-strip{grid-template-columns:repeat(3,1fr)}
  .sr-lbh{height:clamp(24px,3.8vh,44px)}
  .sr-pfoot-right{display:none}
}
@media (max-width:600px){
  .sr-strip{grid-template-columns:repeat(2,1fr);gap:8px}
  .sr-studio{display:none}
  .sr-h{font-size:clamp(2.6rem,10vw,4.2rem) !important}
  .sr-lbh{height:20px}
  .sr-pbar-id{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sr-thumb{filter:none;transition:none}
  .sr-play-ring{transition:none}
  .sr-overlay{transition:none}
}

/* ================================================================
   BLUEPRINT GRID BACKGROUND ported onto showreel2 (Boban 2026-06-30:
   "add the background of the blueprint to showreel2"). Ultra-faint
   hairline graph-paper field behind all content — CSS only, no scene.
   The full-bleed hero video sits over it; it reads through the dark
   body sections (work / how / pricing / faq / start), same as Blueprint.
   ================================================================ */
:root{ --bp-line:rgba(236,230,218,.12); }
body.rl{
  background-color:var(--bg);
  /* r4 (2026-07-01). Two real causes found for "double lines / rectangles":
     1) full-width section borders (.trades/.foot) crossing this grid a few px
        from a grid row — REMOVED; the grid is the only line-work now.
     2) fractional display scaling (Win 125%, Galaxy ~2.6x) smearing CSS-px
        hairlines unevenly — reel.js snaps tile + thickness to WHOLE hardware
        pixels (thickness = nearest device px to 1 CSS px, so the weight
        matches the approved look). Fallbacks = the no-JS-safe values. */
  background-image:
    linear-gradient(to bottom, var(--bp-line) 0 var(--bp-th,1px), transparent var(--bp-th,1px)),
    linear-gradient(to right,  var(--bp-line) 0 var(--bp-th,1px), transparent var(--bp-th,1px));
  background-size:var(--bp-cell,60px) var(--bp-cell,60px);
  background-position:0 0;
}
/* let the grid show through the work + process + faq + start sections (give them a transparent field
   so the graph-paper reads in their negative space, like blueprint) */
.sr-work,.how,.faq,.start,.trades,.get{background:transparent}