/* ═══════════════════════════════════════════════════════════════════════
   VISION STUDIO — "CINEMA ENGINE"  ·  v2026.2  — BRUTAL EDITION
   Standalone layer. Does not depend on main.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg,video,iframe{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── 2 · TOKENS ────────────────────────────────────────────────────── */
:root{
  --ink:#000000; --ink-2:#070709; --ink-3:#0E0E12; --ink-4:#16161C;
  --bone:#F2EFE8;
  --bone-70:rgba(242,239,232,.78);
  --bone-50:rgba(242,239,232,.62);
  --bone-34:rgba(242,239,232,.50);
  --bone-18:rgba(242,239,232,.42);
  --gold:#E8C56A; --gold-dim:rgba(232,197,106,.45); --gold-ghost:rgba(232,197,106,.10);
  --rec:#FF2D0E;
  --hair:rgba(242,239,232,.10); --hair-2:rgba(242,239,232,.18);

  --ff-d:'Instrument Serif','Times New Roman',Georgia,serif;
  --ff-b:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --ff-m:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --ff-s:'Instrument Serif',Georgia,serif;

  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px; --s10:180px;
  --gutter:clamp(18px,4.4vw,80px);
  --bay:clamp(84px,13vh,190px);
  --nav-h:76px;
  --maxw:1780px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

/* ── 3 · BASE ──────────────────────────────────────────────────────── */
body{
  background:var(--ink);color:var(--bone);font-family:var(--ff-b);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
body.is-locked{overflow:hidden}
::selection{background:var(--rec);color:var(--bone)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.bay{padding-block:var(--bay)}
.skip{position:fixed;top:-100px;left:var(--gutter);z-index:9999;background:var(--gold);color:var(--ink);
  padding:12px 20px;font:700 13px/1 var(--ff-b);transition:top .2s}
.skip:focus{top:14px}

/* NOTE: no transform or will-change here. Either one would make #skewer a
   containing block for position:fixed, which breaks ScrollTrigger pinning.
   Velocity skew is applied to [data-skew] blocks instead. */

/* ── 4 · TYPE ──────────────────────────────────────────────────────── */
.d0,.d1,.d2,.d3{font-family:var(--ff-d);line-height:.82;letter-spacing:-.045em;text-wrap:balance}
.d0{font-size:clamp(56px,13.5vw,250px);font-weight:400;}
.d1{font-size:clamp(46px,10vw,190px);font-weight:400;}
.d2{font-size:clamp(38px,7.4vw,132px);font-weight:400;line-height:.88}
.d3{font-size:clamp(28px,4.4vw,70px);font-weight:400;line-height:.94}

.ital{font-family:var(--ff-s);font-style:italic;font-weight:300;letter-spacing:-.012em;
  color:var(--gold);font-variation-settings:normal;line-height:.94}

/* chrome-shine fill for the hero headline */
.shine{
  background:linear-gradient(100deg,#7A7468 0%,var(--bone) 22%,#FFFFFF 34%,var(--gold) 48%,var(--bone) 62%,#6E6A60 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shineRun 7s linear infinite
}
@keyframes shineRun{to{background-position:-280% 0}}

.lede{font-size:clamp(16px,1.5vw,22px);line-height:1.55;color:var(--bone-70);max-width:60ch;font-weight:300}
.mono{font-family:var(--ff-m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-50)}

.slug{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4)}
.slug::before{content:'';width:clamp(24px,4vw,80px);height:2px;background:var(--rec);flex:none}
.slug span{font-family:var(--ff-m);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.slug em{font-style:normal;color:var(--bone-34);margin-left:2px}

.stroke{color:transparent;-webkit-text-stroke:1.4px var(--bone-34)}

/* ── 5 · BUTTONS ───────────────────────────────────────────────────── */
.btn{
  --bg:var(--gold);--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:0 30px;
  font-family:var(--ff-b);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);overflow:hidden;will-change:transform
}
.btn span,.btn svg{position:relative;z-index:2}
.btn svg{transition:transform .45s var(--e-out)}
.btn::after{content:'';position:absolute;inset:0;background:var(--bone);transform:translateY(101%);
  transition:transform .5s var(--e-out);z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn:hover svg{transform:translateX(6px)}
.btn--ghost{--bg:transparent;--fg:var(--bone);border:1px solid var(--hair-2)}
.btn--ghost:hover{color:var(--ink);border-color:var(--bone)}
.btn--rec{--bg:var(--rec);--fg:var(--bone)}
.btn--rec::after{background:var(--bone)}
.btn--rec:hover{color:var(--ink)}
.playchip{position:relative;z-index:2;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;
  display:grid;place-items:center;flex:none}
.playchip svg{width:8px;height:10px}

/* ── 6 · CHROME / HUD ──────────────────────────────────────────────── */
#grain{position:fixed;inset:-120%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 600ms steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
#vignette{position:fixed;inset:0;z-index:8990;pointer-events:none;
  background:radial-gradient(ellipse 132% 96% at 50% 46%,transparent 46%,rgba(0,0,0,.48) 100%)}
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:8995;background:var(--rec);
  box-shadow:0 0 20px var(--rec);pointer-events:none}

/* fixed HUD frame — crosshair + brackets + timecode */
#hud{position:fixed;inset:0;z-index:8980;pointer-events:none;mix-blend-mode:difference;opacity:.5}
#hud .xh{position:absolute;background:var(--bone-34)}
#hud .xh--v{top:0;bottom:0;width:1px}
#hud .xh--h{left:0;right:0;height:1px}
#hud .brk{position:absolute;width:26px;height:26px;border:1.5px solid var(--bone-34)}
#hud .brk--tl{top:14px;left:14px;border-right:0;border-bottom:0}
#hud .brk--tr{top:14px;right:14px;border-left:0;border-bottom:0}
#hud .brk--bl{bottom:14px;left:14px;border-right:0;border-top:0}
#hud .brk--br{bottom:14px;right:14px;border-left:0;border-top:0}
#hud .tc{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--ff-m);font-size:10px;letter-spacing:.3em;color:var(--bone-34)}
@media (hover:none),(pointer:coarse){#hud .xh{display:none}}

/* cursor */
#cur{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--bone);
  z-index:9500;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .3s,height .3s,opacity .3s}
#cur-r{position:fixed;top:0;left:0;width:42px;height:42px;border:1.5px solid var(--bone-34);border-radius:50%;
  z-index:9500;pointer-events:none;transform:translate(-50%,-50%);display:grid;place-items:center;
  transition:width .5s var(--e-out),height .5s var(--e-out),border-color .3s,background .3s,opacity .3s}
#cur-r .cur-lbl{font-family:var(--ff-m);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink);
  opacity:0;transition:opacity .25s;white-space:nowrap;text-transform:uppercase}
body.cur-play #cur{opacity:0}
body.cur-play #cur-r{width:110px;height:110px;background:var(--rec);border-color:var(--rec)}
body.cur-play #cur-r .cur-lbl{opacity:1;color:var(--bone)}
body.cur-link #cur{width:0;height:0}
body.cur-link #cur-r{width:62px;height:62px;background:rgba(232,197,106,.14);border-color:var(--gold)}
@media (hover:none),(pointer:coarse){#cur,#cur-r{display:none!important}}

/* ── 7 · LOADER (film gate) ────────────────────────────────────────
   The original loading screen — sprocket rails, the VISION STUDIO letters
   rising out of a mask, a gold hairline track and a percentage — rebuilt on
   the 2026 tokens. The rails actually run: the perforation strip loops one
   cell per iteration, so it reads as film moving through a gate rather than
   a static frame. Progress is driven by real work in js (§2), not a script. */
#loader{position:fixed;inset:0;z-index:9900;background:var(--ink);overflow:hidden;
  display:grid;place-items:center}
#loader::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 46%,rgba(0,0,0,.62) 100%)}

#loader .ld-glow{position:absolute;width:min(92vw,900px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(232,197,106,.16),transparent 64%);
  animation:ld-pulse 3.2s ease-in-out infinite}
@keyframes ld-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.24);opacity:1}}

/* the gate: a lit slit sweeping down the frame */
#loader .ld-scan{position:absolute;left:0;right:0;top:-46vh;height:34vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(232,197,106,.05) 44%,
    rgba(232,197,106,.11) 50%,rgba(232,197,106,.05) 56%,transparent);
  animation:ld-scan 3.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ld-scan{to{transform:translateY(160vh)}}

#loader .ld-rail{position:absolute;top:0;bottom:0;left:0;z-index:2;overflow:hidden;
  width:clamp(28px,3.2vw,52px);padding-top:6px;
  border-right:1px solid rgba(242,239,232,.06);background:rgba(0,0,0,.5)}
#loader .ld-rail--r{left:auto;right:0;border-right:none;border-left:1px solid rgba(242,239,232,.06)}
#loader .ld-perf{display:block;animation:ld-run 1.05s linear infinite}
/* 26px hole + 12px gap = one 38px cell, which is exactly the loop distance */
#loader .ld-perf i{display:block;height:26px;margin:0 9px 12px;border-radius:2px;
  border:1px solid rgba(242,239,232,.17)}
@keyframes ld-run{to{transform:translateY(-38px)}}

#loader .ld-core{position:relative;z-index:3;text-align:center;padding-inline:var(--gutter)}
#loader .ld-logo{display:flex;justify-content:center;overflow:hidden;
  font-family:var(--ff-d);font-size:clamp(30px,5.6vw,66px);font-weight:400;line-height:1.08;
  letter-spacing:.3em;text-indent:.3em;color:var(--bone)}
#loader .ld-logo span{display:block;transform:translateY(106%)}
#loader .ld-logo .sp{width:.4em}
#loader .ld-sub{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--gold);margin-top:18px;opacity:0}

#loader .ld-track{position:relative;width:min(300px,56vw);height:1px;margin:46px auto 14px;
  background:rgba(242,239,232,.14)}
#loader .ld-fill{display:block;position:relative;height:100%;width:0;background:var(--gold)}
#loader .ld-fill::after{content:'';position:absolute;right:-3.5px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
#loader .ld-pct{font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;color:var(--bone-34);
  font-variant-numeric:tabular-nums}

/* The exit hands the reveal over to #curtain (§8), whose six bands are
   already covering the page at this point — see loader() in js. */

@media (prefers-reduced-motion:reduce){
  #loader .ld-glow,#loader .ld-scan,#loader .ld-perf{animation:none}
}

/* ── 8 · NAV ───────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;width:100%;height:var(--nav-h);z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-inline:var(--gutter);
  transition:background .5s var(--e-out),backdrop-filter .5s,border-color .5s,transform .55s var(--e-out);
  border-bottom:1px solid transparent}
#nav.stuck{background:rgba(0,0,0,.7);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom-color:var(--hair)}
#nav.hide{transform:translateY(-101%)}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:26px;width:auto}
.nav-menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px)}
.nav-menu a{position:relative;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bone-70);padding-block:9px;display:block;transition:color .3s}
.nav-menu a::after{content:'';position:absolute;left:0;bottom:3px;width:100%;height:1.5px;background:var(--rec);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:var(--bone)}
.nav-menu a:hover::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:var(--s3);flex:none}
.nav-cta{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 22px;
  background:var(--rec);color:var(--bone);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .35s,color .35s}
.nav-cta:hover{background:var(--gold);color:var(--ink)}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--bone);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.burger{display:none;width:46px;height:46px;position:relative;flex:none}
.burger span{position:absolute;left:11px;width:24px;height:2px;background:var(--bone);transition:.4s var(--e-out)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:26px}
.burger.on span:nth-child(1){top:22.5px;transform:rotate(45deg)}
.burger.on span:nth-child(2){top:22.5px;transform:rotate(-45deg)}

#drawer{position:fixed;inset:0;z-index:790;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--nav-h) + 20px) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-io)}
#drawer.open{clip-path:inset(0 0 0 0)}
#drawer a:not(.btn){font-family:var(--ff-d);font-size:clamp(32px,8vw,68px);font-weight:400;
  line-height:1.1;letter-spacing:-.04em;
  color:var(--bone-70);transition:color .3s;display:flex;align-items:baseline;gap:16px}
#drawer a i{font-family:var(--ff-m);font-size:11px;font-style:normal;color:var(--rec)}
#drawer a:not(.btn):hover{color:var(--gold)}

/* curtain page transition */
#curtain{position:fixed;inset:0;z-index:9700;pointer-events:none;display:flex}
#curtain i{flex:1;background:var(--ink);transform:scaleY(0);transform-origin:bottom}

/* ── 9 · HERO ──────────────────────────────────────────────────────── */
#hero{position:relative;height:100svh;min-height:620px;overflow:hidden;perspective:1500px;perspective-origin:50% 42%}
.stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.stage-screen{position:absolute;inset:0;overflow:hidden;background:#000;transform-style:preserve-3d}
.stage-screen iframe,.stage-screen video{position:absolute;top:50%;left:50%;
  width:177.78vh;height:100vh;min-width:100%;min-height:56.25vw;transform:translate(-50%,-50%);
  border:0;object-fit:cover;pointer-events:none;z-index:2;transition:opacity .6s var(--e-out)}
.stage-screen.no-player iframe{opacity:0}
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:grayscale(.6) brightness(.4) contrast(1.2)}
.stage-frame{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:4;
  border:1.5px solid var(--gold);box-shadow:0 80px 200px -40px #000,0 0 0 1px rgba(0,0,0,.7)}
.stage-frame::before,.stage-frame::after{content:'';position:absolute;left:0;right:0;height:5.6%;background:var(--ink)}
.stage-frame::before{top:0}
.stage-frame::after{bottom:0}
.stage-cap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;opacity:0;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);z-index:5}
.stage-tick{position:absolute;width:22px;height:22px;border:1.5px solid var(--gold)}
.stage-tick--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.stage-tick--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.stage-tick--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.stage-tick--br{bottom:-1px;right:-1px;border-left:0;border-top:0}

.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.26) 30%,rgba(0,0,0,.52) 64%,var(--ink) 100%),
             radial-gradient(ellipse 72% 56% at 50% 55%,transparent 0%,rgba(0,0,0,.6) 100%)}
.hero-scan{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.32) 2px 3px)}

.hero-body{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(24px,5vh,56px);max-width:var(--maxw);margin-inline:auto}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4);flex-wrap:wrap}
.hero-eyebrow .rec{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-m);font-size:10px;
  letter-spacing:.26em;color:var(--bone-70);text-transform:uppercase}
.hero-eyebrow .rec i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:pulse 1.4s infinite;font-style:normal}
.hero-eyebrow .bar{flex:1;height:1px;background:var(--hair);max-width:200px}
.hero-eyebrow .meta{font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;color:var(--bone-34);text-transform:uppercase}
/* the real headline is long — capped so both lines fit the fold without clipping */
.hero-h1{margin-bottom:var(--s4);max-width:24ch;font-size:clamp(34px,5.6vw,86px)}
.hero-sub{max-width:50ch;margin-bottom:var(--s5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s6)}
.hero-note{font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;color:var(--bone-34);text-transform:uppercase}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--hair);flex-wrap:wrap}
.hero-kpis{display:flex;gap:clamp(18px,3.4vw,64px);flex-wrap:wrap}
.hero-kpi b{display:block;font-family:var(--ff-d);font-size:clamp(22px,2.6vw,40px);font-weight:400;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hero-kpi span{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;color:var(--bone-34);
  text-transform:uppercase;margin-top:8px}
.hero-cue{display:flex;align-items:center;gap:12px;font-family:var(--ff-m);font-size:10px;letter-spacing:.28em;
  color:var(--bone-34);text-transform:uppercase}
.hero-cue .rail{width:2px;height:46px;background:var(--hair-2);position:relative;overflow:hidden}
.hero-cue .rail::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--rec);
  animation:cueRun 1.9s var(--e-io) infinite}
@keyframes cueRun{0%{top:-100%}60%,100%{top:100%}}

.sl{display:block;overflow:hidden;padding-bottom:.08em}
.sl>span{display:block;will-change:transform}
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform}

/* ── 10 · TUNNEL (3D thumbnail fly-through) ────────────────────────── */
.tunnel{position:relative;background:var(--ink);overflow:hidden}
.tunnel-vp{height:100svh;position:relative;perspective:1250px;perspective-origin:50% 50%;overflow:hidden}
.tunnel-space{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.tn{position:absolute;top:50%;left:50%;width:clamp(300px,34vw,720px);aspect-ratio:16/9;
  margin:-8% 0 0 -8%;overflow:hidden;border:1px solid var(--hair-2);background:var(--ink-3);
  will-change:transform,opacity;box-shadow:0 30px 80px -20px #000}
/* stay invisible until the thumbnail actually decodes — a pending or blocked
   request otherwise paints the browser's broken-image glyph inside the frame */
.tn img,.strip-frame img{opacity:0;transition:opacity .5s var(--e-out)}
.tn img.ok,.strip-frame img.ok{opacity:1}
.tn img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.06)}
.tn::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.5))}
.tunnel-mid{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  text-align:center;padding-inline:var(--gutter);pointer-events:none}
.tunnel-mid .inner{pointer-events:auto;width:100%;max-width:min(1000px,88vw);margin-inline:auto;
  text-shadow:0 4px 40px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.9)}
.tunnel-mid .inner h2{font-size:clamp(30px,5.4vw,92px)}
.tunnel-fog{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 50% 50%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.66) 48%,rgba(0,0,0,.25) 72%,transparent 88%)}
.tunnel-edge{position:absolute;inset:0;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,transparent 14%,transparent 86%,var(--ink) 100%)}

/* ── 11 · FILMSTRIP DIVIDER (replaces the old text bands) ──────────
   A real 35mm strip: sprocket rows top and bottom, project frames between.
   Scrolls with scroll velocity. Purely visual — no shouty type. */
.strip{position:relative;overflow:hidden;background:var(--ink-3);
  border-block:1px solid var(--hair);padding-block:0}
.strip::before,.strip::after{content:'';position:absolute;top:0;bottom:0;
  width:clamp(50px,10vw,180px);z-index:4;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.strip-perf{height:clamp(16px,2vw,26px);background:var(--ink);position:relative;z-index:3;flex:none}
.strip-perf i{position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(12px,1.2vw,17px);height:clamp(8px,.85vw,12px);border-radius:2px;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(242,239,232,.08)}
.strip-lane{display:flex;overflow:hidden;position:relative;z-index:2;background:#000}
.strip-track{display:flex;gap:clamp(6px,.7vw,12px);width:max-content;will-change:transform;
  padding-block:clamp(6px,.7vw,12px)}
.strip-frame{position:relative;flex:none;height:clamp(78px,11vh,150px);aspect-ratio:16/9;
  overflow:hidden;background:var(--ink-3);border:1px solid rgba(0,0,0,.9)}
.strip-frame img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.5) contrast(1.12) brightness(.8);transition:filter .5s var(--e-out)}
.strip:hover .strip-frame img{filter:saturate(1) contrast(1) brightness(1)}
.strip-frame::after{content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(242,239,232,.07)}

/* ── 12 · CLIENT MARQUEE ───────────────────────────────────────────── */
.marq{position:relative;padding-block:var(--s6);border-block:1px solid var(--hair);overflow:hidden;background:var(--ink)}
.marq::before,.marq::after{content:'';position:absolute;top:0;bottom:0;width:clamp(50px,12vw,220px);z-index:3;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.marq::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.marq-track{display:flex;width:max-content;gap:clamp(36px,6vw,100px);align-items:center;animation:marq 40s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
/* Fixed cell + object-fit:contain gives every wordmark the same optical size,
   whatever its own aspect ratio. brightness(0) invert(1) forces pure white
   (this is the original site's rule); the hover chain warms that white to gold. */
.marq-item{display:flex;align-items:center;justify-content:center;flex:none;
  width:clamp(110px,11vw,168px);height:46px;padding-inline:6px}
.marq-item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.5;
  transition:opacity .45s var(--e-out),filter .45s var(--e-out),transform .45s var(--e-out)}
.marq-item:hover img{opacity:1;transform:scale(1.09);
  filter:brightness(0) invert(1) sepia(1) saturate(4.2) hue-rotate(3deg) brightness(1.02)}
.marq-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}

/* ── 13 · INVERTED BAND (light shock) ──────────────────────────────── */
.invert{background:var(--bone);color:var(--ink)}
.invert .slug span{color:var(--rec)}
.invert .slug em{color:rgba(0,0,0,.42)}
.invert .lede{color:rgba(0,0,0,.72)}
.invert .mono{color:rgba(0,0,0,.55)}
.invert .ital{color:var(--rec)}
.invert .stroke{-webkit-text-stroke-color:rgba(0,0,0,.3)}
.invert .diff li{color:rgba(0,0,0,.78);border-bottom-color:rgba(0,0,0,.12)}
.invert .diff li s{color:rgba(0,0,0,.45)}
.invert .diff-col{border-top-color:rgba(0,0,0,.15)}
.invert .diff-col--yes{border-top-color:var(--ink)}
.invert .diff-col--no{border-top-color:var(--rec)}
.invert .diff-col--yes .diff-h,.invert .diff-col--yes b{color:var(--ink)}

/* ── 14 · REEL (pinned horizontal 3D) ──────────────────────────────── */
.reel{position:relative;background:var(--ink-2);overflow:hidden}
.reel-head{position:absolute;top:0;left:0;width:100%;z-index:6;
  padding:calc(var(--nav-h) + 24px) var(--gutter) 0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--s4);pointer-events:none}
.reel-viewport{height:100svh;display:flex;align-items:center;overflow:hidden;perspective:1700px}
.reel-track{display:flex;gap:clamp(18px,2.4vw,40px);padding-inline:var(--gutter);will-change:transform;transform-style:preserve-3d}
.reel-card{position:relative;flex:none;width:clamp(280px,46vw,800px);aspect-ratio:16/10;
  background:var(--ink-3);overflow:hidden;border:1px solid var(--hair);transform-style:preserve-3d;
  will-change:transform;cursor:none}
.reel-card .rc-media{position:absolute;inset:-6%;overflow:hidden}
.reel-card .rc-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);
  transition:transform 1.1s var(--e-out),filter .7s;filter:saturate(.7) contrast(1.08)}
.reel-card:hover .rc-media img{transform:scale(1.24);filter:saturate(1) contrast(1)}
.reel-card .rc-media iframe{position:absolute;top:50%;left:50%;width:177.78%;height:100%;min-height:124%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s;border:0;pointer-events:none}
.reel-card.playing .rc-media iframe{opacity:1}
.reel-card .rc-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 32%,rgba(0,0,0,.92) 100%)}
.reel-card .rc-body{position:absolute;left:0;bottom:0;width:100%;padding:clamp(16px,2.2vw,34px);z-index:3}
.reel-card .rc-idx{position:absolute;top:clamp(14px,1.8vw,26px);left:clamp(16px,2.2vw,34px);z-index:3;
  font-family:var(--ff-m);font-size:11px;letter-spacing:.2em;color:var(--rec);font-weight:700}
.reel-card .rc-cat{position:absolute;top:clamp(14px,1.8vw,26px);right:clamp(16px,2.2vw,34px);z-index:3;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-70);
  border:1px solid var(--hair-2);padding:6px 11px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.reel-card .rc-client{font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.reel-card .rc-title{font-family:var(--ff-d);font-size:clamp(20px,2.5vw,42px);font-weight:400;
  line-height:.98;letter-spacing:-.035em}
.reel-card .rc-meta{display:flex;gap:16px;margin-top:13px;font-family:var(--ff-m);font-size:9.5px;
  letter-spacing:.16em;color:var(--bone-34);text-transform:uppercase;flex-wrap:wrap}
.reel-card .rc-line{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--rec);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out);z-index:4}
.reel-card:hover .rc-line{transform:scaleX(1)}
.reel-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,5vh,52px);height:2px;
  background:var(--hair);z-index:6}
.reel-progress i{display:block;height:100%;width:0;background:var(--rec);box-shadow:0 0 16px var(--rec)}
.reel-count{position:absolute;right:var(--gutter);bottom:calc(clamp(24px,5vh,52px) + 18px);z-index:6;
  font-family:var(--ff-m);font-size:11px;letter-spacing:.24em;color:var(--bone-34)}
.reel-count b{color:var(--rec)}
.reel-end{flex:none;width:clamp(240px,26vw,400px);display:flex;flex-direction:column;justify-content:center;
  gap:var(--s3);padding-left:clamp(16px,3vw,52px);border-left:1px solid var(--hair)}

/* ── 15 · STACKED STICKY CARDS ─────────────────────────────────────── */
.stack{position:relative}
.stack-item{position:sticky;top:calc(var(--nav-h) + 4vh);will-change:transform}
.stack-card{position:relative;border:1px solid var(--hair);background:var(--ink-2);overflow:hidden;
  padding:clamp(26px,4vw,72px);display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,3vw,56px);
  min-height:clamp(280px,44vh,460px);align-items:center}
.stack-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--rec)}
.stack-n{font-family:var(--ff-d);font-size:clamp(40px,5vw,86px);font-weight:400;
  line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px var(--gold-dim)}
.stack-card h3{font-family:var(--ff-d);font-size:clamp(24px,3.4vw,54px);font-weight:400;
  letter-spacing:-.035em;line-height:.98;margin-bottom:var(--s3)}
.stack-card p{color:var(--bone-50);font-size:clamp(14px,1.3vw,17px);line-height:1.62;font-weight:300;max-width:62ch}

/* ── 16 · CAPABILITY ROWS ──────────────────────────────────────────── */
.cap-row{position:relative;display:grid;grid-template-columns:84px 1fr minmax(0,40ch) 64px;gap:var(--s4);
  align-items:center;padding-block:clamp(22px,3vw,44px);border-top:1px solid var(--hair);overflow:hidden}
.cap-row:last-of-type{border-bottom:1px solid var(--hair)}
.cap-row::before{content:'';position:absolute;inset:0;background:var(--rec);transform:scaleY(0);
  transform-origin:bottom;transition:transform .6s var(--e-out);z-index:0}
.cap-row:hover::before{transform:scaleY(1)}
.cap-row>*{position:relative;z-index:1}
.cap-n{font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;color:var(--rec);transition:color .4s}
.cap-row:hover .cap-n{color:var(--bone)}
.cap-t{font-family:var(--ff-d);font-size:clamp(22px,3vw,52px);font-weight:400;
  letter-spacing:-.035em;line-height:.98;
  transition:transform .6s var(--e-out)}
.cap-row:hover .cap-t{transform:translateX(18px)}
.cap-tag{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;color:var(--bone-18);text-transform:uppercase;
  display:block;margin-top:10px;transition:color .4s}
.cap-row:hover .cap-tag{color:rgba(242,239,232,.72)}
.cap-d{color:var(--bone-50);font-size:14.5px;line-height:1.62;font-weight:300;transition:color .4s}
.cap-row:hover .cap-d{color:var(--bone-70)}
.cap-go{justify-self:end;color:var(--bone-34);transition:.5s var(--e-out)}
.cap-row:hover .cap-go{color:var(--bone);transform:translateX(10px) rotate(-45deg)}

/* ── 17 · STATS / ODOMETER ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat{padding:clamp(28px,5vw,80px) clamp(14px,2vw,36px);border-right:1px solid var(--hair);position:relative;overflow:hidden}
.stat:last-child{border-right:none}
.stat b{display:flex;align-items:flex-end;font-family:var(--ff-d);font-size:clamp(40px,6.4vw,110px);font-weight:400;
  line-height:.86;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--bone)}
/* direct child only — a descendant selector would also hit the odometer
   spans inside <b> and collapse the digits to label size */
.stat > span{display:block;font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;color:var(--bone-34);
  text-transform:uppercase;margin-top:18px}
.stat::after{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--rec);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out)}
.stat:hover::after{transform:scaleX(1)}
.odo{display:inline-flex;align-items:flex-end}
.odo-col{display:block;overflow:hidden;height:.86em}
.odo-col i{display:block;font-style:normal;height:.86em;line-height:.86}

/* ── 18 · PROCESS ──────────────────────────────────────────────────── */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,44px);position:relative;margin-top:var(--s7)}
.proc-spine{position:absolute;left:0;top:12px;height:2px;width:100%;background:var(--hair)}
.proc-spine i{display:block;height:100%;width:0;background:var(--rec)}
.proc-step{position:relative;padding-top:var(--s6)}
.proc-step::before{content:'';position:absolute;top:5px;left:0;width:16px;height:16px;background:var(--ink);
  border:2px solid var(--hair-2);transition:.5s var(--e-out)}
.proc-step.on::before{background:var(--rec);border-color:var(--rec);box-shadow:0 0 0 8px rgba(255,45,14,.16)}
.proc-step .pn{font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;color:var(--rec);margin-bottom:14px;display:block}
.proc-step h3{font-family:var(--ff-d);font-size:clamp(19px,2vw,30px);font-weight:400;
  letter-spacing:-.03em;margin-bottom:12px;line-height:1}
.proc-step p{color:var(--bone-50);font-size:14px;line-height:1.62;font-weight:300}

/* ── 19 · SCREEN / FEATURE ─────────────────────────────────────────── */
.feature{position:relative;overflow:hidden;background:var(--ink-2)}
.feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,80px);align-items:center}
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--hair);cursor:none}
.screen img,.screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.screen iframe{opacity:0;transition:opacity .7s}
.screen.playing iframe{opacity:1}
.screen .bar{position:absolute;left:0;width:100%;height:clamp(20px,5%,44px);background:var(--ink);z-index:3;
  transition:height .7s var(--e-out)}
.screen .bar--t{top:0}
.screen .bar--b{bottom:0}
.screen:hover .bar{height:clamp(10px,2%,18px)}
.screen .sc-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75));z-index:2;transition:opacity .6s}
.screen.playing .sc-veil{opacity:0}
.screen .sc-tag{position:absolute;left:clamp(14px,2vw,30px);bottom:clamp(30px,7%,60px);z-index:4;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;color:var(--bone-70);text-transform:uppercase}
.screen .sc-play{position:absolute;inset:0;display:grid;place-items:center;z-index:4;transition:opacity .5s}
.screen.playing .sc-play{opacity:0}
.play-ring{width:clamp(70px,8vw,116px);height:clamp(70px,8vw,116px);border-radius:50%;border:1.5px solid var(--bone-34);
  display:grid;place-items:center;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);transition:.6s var(--e-out)}
.screen:hover .play-ring{background:var(--rec);border-color:var(--rec);transform:scale(1.1)}
.play-ring .tri{width:0;height:0;border-left:16px solid var(--bone);border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:5px}

.res-row{display:flex;gap:clamp(20px,3vw,56px);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair)}
.res b{display:block;font-family:var(--ff-d);font-size:clamp(26px,3.2vw,50px);font-weight:400;
  letter-spacing:-.04em;line-height:1;color:var(--gold)}
.res span{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;color:var(--bone-34);
  text-transform:uppercase;margin-top:10px}
.spec{display:grid}
.spec-item{display:grid;grid-template-columns:150px 1fr;gap:var(--s3);padding-block:15px;border-bottom:1px solid var(--hair)}
.spec-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;color:var(--bone-34);text-transform:uppercase;padding-top:3px}
.spec-v{font-size:14.5px;line-height:1.55;color:var(--bone-70);font-weight:300}

/* ── 20 · POSTS ────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,44px)}
.post{display:flex;flex-direction:column;gap:14px;padding-top:var(--s4);border-top:2px solid var(--hair);transition:border-color .5s}
.post:hover{border-color:var(--rec)}
.post .p-cat{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;color:var(--rec);text-transform:uppercase}
.post h3{font-family:var(--ff-d);font-size:clamp(18px,1.8vw,27px);font-weight:400;
  letter-spacing:-.03em;line-height:1.1;transition:color .35s}
.post:hover h3{color:var(--gold)}
.post p{color:var(--bone-50);font-size:14px;line-height:1.6;font-weight:300}
.post .p-meta{margin-top:auto;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;color:var(--bone-34);
  text-transform:uppercase;padding-top:10px}

/* ── 21 · DIFF LISTS ───────────────────────────────────────────────── */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,64px);margin-top:var(--s6)}
.diff-col{border-top:2px solid var(--hair);padding-top:var(--s4)}
.diff-col--yes{border-color:var(--gold)}
.diff-col--no{border-color:var(--rec)}
.diff-h{font-family:var(--ff-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:var(--s4)}
.diff-col--no .diff-h{color:var(--rec)}
.diff-col--yes .diff-h{color:var(--gold)}
.diff li{display:flex;gap:14px;align-items:flex-start;padding-block:14px;border-bottom:1px solid var(--hair);
  font-size:clamp(14px,1.35vw,18px);line-height:1.45;color:var(--bone-70)}
.diff li s{color:var(--bone-34);text-decoration:none}
.diff li b{flex:none;font-family:var(--ff-m);font-size:13px;font-weight:700}
.diff-col--no b{color:var(--rec)}
.diff-col--yes b{color:var(--gold)}

/* ── 22 · FORM ─────────────────────────────────────────────────────── */
.brief{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,110px);align-items:start}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.f-field{position:relative;display:flex;flex-direction:column;gap:9px}
.f-field.full{grid-column:1/-1}
.f-field label{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;color:var(--bone-50);text-transform:uppercase}
.f-field label .req{color:var(--rec)}
.f-field input,.f-field select,.f-field textarea{width:100%;min-height:54px;padding:15px 0;background:transparent;
  color:var(--bone);border-bottom:1px solid var(--hair-2);font-size:16px;font-weight:300;transition:border-color .4s}
.f-field textarea{min-height:100px;resize:vertical;line-height:1.55}
.f-field select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-34) 50%),linear-gradient(135deg,var(--bone-34) 50%,transparent 50%);
  background-position:calc(100% - 13px) 25px,calc(100% - 8px) 25px;background-size:5px 5px;background-repeat:no-repeat}
.f-field select option{background:var(--ink-3);color:var(--bone)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-bottom-color:var(--rec)}
.f-field input::placeholder,.f-field textarea::placeholder{color:var(--bone-18)}
.f-help{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;color:var(--bone-34)}
.f-err{font-family:var(--ff-m);font-size:10px;color:var(--rec);letter-spacing:.06em;display:none}
.f-field.invalid input,.f-field.invalid select,.f-field.invalid textarea{border-bottom-color:var(--rec)}
.f-field.invalid .f-err{display:block}
.f-foot{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.f-checks{display:flex;flex-direction:column;gap:12px;margin-top:var(--s5)}
.f-checks span{display:flex;gap:11px;align-items:center;font-family:var(--ff-m);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-50)}
.f-checks b{color:var(--gold)}

/* ── 23 · CTA ──────────────────────────────────────────────────────── */
.cta{position:relative;text-align:center;overflow:hidden;background:var(--ink)}
.cta-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--ff-d);font-size:clamp(140px,30vw,520px);font-weight:400;
  letter-spacing:-.06em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(242,239,232,.07);white-space:nowrap;z-index:0}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.cta .slug{justify-content:center}
.cta .slug::after{content:'';width:clamp(24px,4vw,80px);height:2px;background:var(--rec)}

/* ── 24 · FOOTER ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);background:var(--ink);position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,4vw,80px);padding-block:var(--s8)}
.ft-desc{color:var(--bone-50);font-size:14.5px;line-height:1.7;font-weight:300;max-width:34ch;margin-top:var(--s3)}
.ft-h{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;color:var(--rec);text-transform:uppercase;margin-bottom:var(--s3)}
.ft-links li{margin-bottom:11px}
.ft-links a{font-size:14px;color:var(--bone-50);transition:color .3s,padding-left .35s var(--e-out);display:inline-block;font-weight:300}
.ft-links a:hover{color:var(--bone);padding-left:7px}
.ft-c{display:flex;flex-direction:column;gap:12px}
.ft-c a{font-size:14.5px;color:var(--bone-70);transition:color .3s}
.ft-c a:hover{color:var(--gold)}
.ft-bot{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-block:var(--s4);border-top:1px solid var(--hair)}
.ft-bot p,.ft-bot a{font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;color:var(--bone-34);text-transform:uppercase}
.ft-word{font-family:var(--ff-d);font-size:clamp(60px,15vw,260px);font-weight:400;
  letter-spacing:-.05em;line-height:.8;color:transparent;
  -webkit-text-stroke:1.2px rgba(242,239,232,.09);text-align:center;padding-bottom:var(--s4);user-select:none}

/* ── 25 · MODAL ────────────────────────────────────────────────────── */
#modal{position:fixed;inset:0;z-index:9800;display:none;place-items:center;padding:var(--s4)}
#modal.on{display:grid}
.modal-back{position:absolute;inset:0;background:rgba(0,0,0,.96);backdrop-filter:blur(16px);opacity:0}
.modal-box{position:relative;width:min(1320px,95vw);opacity:0}
.modal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s3)}
.modal-tag{font-family:var(--ff-m);font-size:10px;letter-spacing:.26em;color:var(--rec);text-transform:uppercase;margin-bottom:9px}
.modal-title{font-family:var(--ff-d);font-size:clamp(21px,3vw,44px);font-weight:400;
  letter-spacing:-.035em;line-height:.98}
.modal-x{width:52px;height:52px;border:1px solid var(--hair-2);border-radius:50%;display:grid;place-items:center;
  flex:none;transition:.4s var(--e-out)}
.modal-x:hover{background:var(--rec);border-color:var(--rec);transform:rotate(90deg)}
.modal-video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--hair)}
.modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair)}
.modal-foot .mf-l{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;color:var(--bone-34);text-transform:uppercase;margin-bottom:7px}
.modal-foot .mf-v{font-size:14px;color:var(--bone)}

/* ── 26 · PORTFOLIO ────────────────────────────────────────────────── */
.pf-hero{position:relative;padding:calc(var(--nav-h) + clamp(50px,9vh,120px)) 0 var(--s6);overflow:hidden}
.pf-hero-ghost{position:absolute;right:calc(var(--gutter) * -.5);top:54%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--ff-d);font-size:clamp(130px,23vw,380px);font-weight:400;
  letter-spacing:.01em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(232,197,106,.10);white-space:nowrap;z-index:0}
.pf-hero>.wrap{position:relative;z-index:2}

.toolbar{position:sticky;top:var(--nav-h);z-index:400;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;padding-block:var(--s3);background:rgba(0,0,0,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-block:1px solid var(--hair)}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{position:relative;height:40px;padding:0 18px;border:1px solid var(--hair);
  font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-50);
  transition:.35s var(--e-out);white-space:nowrap}
.pill:hover{color:var(--bone);border-color:var(--hair-2)}
.pill[aria-pressed="true"]{background:var(--rec);border-color:var(--rec);color:var(--bone)}
.pill .num{opacity:.6;margin-left:8px;font-size:9px}
.view-switch{display:flex;align-items:center;gap:var(--s3)}
.vcount{font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;color:var(--bone-34);text-transform:uppercase}
.vtoggle{display:flex;border:1px solid var(--hair);overflow:hidden}
.vtoggle button{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;font-family:var(--ff-m);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-34);transition:.35s var(--e-out)}
.vtoggle button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(110px,10vw,175px);
  grid-auto-flow:dense;gap:clamp(10px,1.4vw,24px);padding-block:var(--s6)}
.card{position:relative;grid-column:span 4;grid-row:span 2;overflow:hidden;background:var(--ink-3);
  border:1px solid var(--hair);cursor:none;will-change:transform,opacity}
.card--wide{grid-column:span 8;grid-row:span 3}
.card--tall{grid-column:span 4;grid-row:span 3}
.card .c-media{position:absolute;inset:-5%;overflow:hidden}
/* private video: vumbnail returns a padlock — show the graded panel instead */
.card.no-thumb img{display:none}
.card.no-thumb .c-media{background:linear-gradient(150deg,var(--ink-4),var(--ink-2) 60%,#1a0f0c)}
.card img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);
  transition:transform 1.2s var(--e-out),filter .8s;filter:saturate(.62) contrast(1.08)}
.card:hover img{transform:scale(1.22);filter:saturate(1) contrast(1)}
.card iframe{position:absolute;top:50%;left:50%;width:177.78%;height:100%;min-height:122%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .7s;border:0;pointer-events:none;z-index:1}
.card.playing iframe{opacity:1}
.card .c-veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 36%,rgba(0,0,0,.93) 100%)}
.card .c-body{position:absolute;left:0;bottom:0;width:100%;padding:clamp(14px,1.9vw,30px);z-index:3}
.card .c-client{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.card .c-title{font-family:var(--ff-d);font-size:clamp(17px,1.9vw,30px);font-weight:400;
  letter-spacing:-.032em;line-height:1}
.card .c-meta{display:flex;gap:14px;margin-top:11px;font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;
  color:var(--bone-34);text-transform:uppercase}
.card .c-tag{position:absolute;top:clamp(12px,1.5vw,22px);left:clamp(14px,1.9vw,30px);z-index:3;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-70);
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:6px 11px;border:1px solid var(--hair)}
.card .c-line{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--rec);transform:scaleX(0);
  transform-origin:left;transition:transform .8s var(--e-out);z-index:4}
.card:hover .c-line{transform:scaleX(1)}

/* editorial index */
.idx-row{position:relative;display:grid;align-items:center;gap:var(--s4);
  grid-template-columns:70px 1fr 200px 140px 96px;padding-block:clamp(16px,2.4vw,32px);
  border-top:1px solid var(--hair);cursor:none;transition:opacity .45s var(--e-out)}
.idx-row:last-child{border-bottom:1px solid var(--hair)}
.idx.hovering .idx-row{opacity:.24}
.idx.hovering .idx-row.on{opacity:1}
.idx-row::before{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--rec);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out);z-index:2}
.idx-row.on::before{transform:scaleX(1)}
.idx-n{font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;color:var(--bone-34);transition:color .4s}
.idx-row.on .idx-n{color:var(--rec)}
.idx-t{font-family:var(--ff-d);font-size:clamp(21px,2.9vw,50px);font-weight:400;
  line-height:.98;letter-spacing:-.038em;
  transition:transform .6s var(--e-out),color .4s;transform-origin:left}
.idx-row.on .idx-t{transform:translateX(22px)}
.idx-c,.idx-y{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-34);transition:color .4s}
.idx-row.on .idx-c,.idx-row.on .idx-y{color:var(--bone-70)}
.idx-go{justify-self:end;width:48px;height:48px;border-radius:50%;border:1px solid var(--hair-2);
  display:grid;place-items:center;transition:.5s var(--e-out);flex:none}
.idx-row.on .idx-go{background:var(--rec);border-color:var(--rec);color:var(--bone);transform:rotate(-45deg)}

#peek{position:fixed;top:0;left:0;width:clamp(280px,26vw,440px);aspect-ratio:16/9;z-index:600;
  pointer-events:none;opacity:0;overflow:hidden;background:var(--ink-3);border:1px solid var(--hair-2);
  box-shadow:0 50px 110px -30px #000;will-change:transform}
.no-js #peek{transform:translate(-50%,-50%)}
#peek img{width:100%;height:100%;object-fit:cover}
#peek .peek-tag{position:absolute;left:12px;bottom:12px;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  color:var(--bone);text-transform:uppercase;background:rgba(0,0,0,.75);padding:6px 10px}
@media (hover:none),(pointer:coarse){#peek{display:none}}

.empty{text-align:center;padding-block:var(--s8);grid-column:1/-1}
.empty p{color:var(--bone-50);margin-top:12px}

/* ── 27 · REVEAL ───────────────────────────────────────────────────── */
[data-rev]{opacity:0;transform:translateY(34px)}
/* once revealed, the element owns its resting state — without this the rule
   above snaps it back down the moment gsap clears the inline transform */
[data-rev].is-in{opacity:1;transform:none}
.no-js [data-rev]{opacity:1;transform:none}

/* ── 28 · RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width:1180px){
  .nav-menu{display:none}
  .burger{display:block}
  .feature-grid,.brief{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .idx-row{grid-template-columns:50px 1fr 160px 76px}
  .idx-go{display:none}
  .card--wide{grid-column:span 12;grid-row:span 3}
  .card{grid-column:span 6;grid-row:span 2}
  .card--tall{grid-column:span 6;grid-row:span 3}
  .cap-row{grid-template-columns:64px 1fr minmax(0,32ch) 48px}
}
@media (max-width:860px){
  :root{--nav-h:66px}
  .nav-cta{display:none}
  .nav-logo img{height:22px}
  .posts{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .proc-spine{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .f-grid,.diff{grid-template-columns:1fr}
  .modal-foot{grid-template-columns:1fr 1fr}
  .spec-item{grid-template-columns:1fr;gap:5px}
  .stack-card{grid-template-columns:1fr;gap:var(--s3)}
  .stack-item{top:calc(var(--nav-h) + 10px)}
  .tunnel-vp{height:80svh}
}
@media (max-width:680px){
  .idx-row{grid-template-columns:36px 1fr;row-gap:8px}
  .idx-c{grid-column:2;font-size:9.5px}
  .idx-y{display:none}
  .cap-row{grid-template-columns:44px 1fr;row-gap:10px}
  .cap-d{grid-column:2}
  .cap-go{display:none}
  .card,.card--wide,.card--tall{grid-column:span 12;grid-row:span 2}
  .ft-top{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-cue{display:none}
  .hero-eyebrow .meta,.hero-eyebrow .bar{display:none}
  .reel-viewport{height:auto;padding-block:var(--s6)}
  .toolbar{position:static}
  #hud .brk{display:none}
}

/* ── 29 · REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rev]{opacity:1!important;transform:none!important}
  .marq-track,.shine{animation:none}
  .shine{-webkit-text-fill-color:var(--bone);color:var(--bone)}
  #cur,#cur-r,#peek,#hud{display:none!important}
  .stage{transform:none!important}
  .stack-item{position:static}
  .tunnel-vp{height:auto;padding-block:var(--s7)}
}

/* ═══════════════════════════════════════════════════════════════════
   30 · BRUTAL LAYER  ·  v2026.3
   Loudness pass: monster type, a full-bleed red slab, tape-glitch
   hovers and oversized parallax ghost words.
   ═══════════════════════════════════════════════════════════════════ */

/* ── monster hero headline (4 stacked lines, same copy) ──────────── */
.hero-h1{
  font-size:clamp(38px,8vw,128px);
  max-width:none;
  letter-spacing:-.055em;
  line-height:.84;
  margin-left:-.035em;          /* optical flush-left for the big cap */
  margin-bottom:var(--s4)
}
.hero-h1 .sl{padding-bottom:.02em}
.hero-sub{margin-bottom:var(--s4);max-width:44ch}
.hero-ctas{margin-bottom:var(--s5)}

/* section headings bleed past the left gutter */
.bleed{margin-left:-.055em}

/* ── oversized parallax ghost words ─────────────────────────────── */
.ghost-word{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:var(--ff-d);font-size:clamp(120px,22vw,340px);font-weight:400;
  letter-spacing:-.05em;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(242,239,232,.055);
  white-space:nowrap;pointer-events:none;z-index:0;user-select:none;will-change:transform
}
.has-ghost{position:relative;overflow:hidden}
.has-ghost > .wrap{position:relative;z-index:1}

/* ── CTA: cinematic black slab, tilted in 3D on scroll ──────────── */
.cta{perspective:1200px}
.cta-inner{transform-style:preserve-3d;will-change:transform}
.cta h2{font-size:clamp(40px,8.6vw,150px);letter-spacing:-.055em;max-width:15ch}
.cta::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(232,197,106,.07),transparent 70%)}

/* ── tape-glitch hover for thumbnails ───────────────────────────── */
.card .c-media,.reel-card .rc-media,.screen{isolation:isolate}
.card .c-media::after,.reel-card .rc-media::after,.screen::after{
  content:'';position:absolute;left:0;right:0;height:22%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(242,239,232,.16) 45%,rgba(242,239,232,.30) 50%,rgba(242,239,232,.16) 55%,transparent);
  mix-blend-mode:screen;opacity:0;top:-25%
}
.card:hover .c-media::after,.reel-card:hover .rc-media::after,.screen:hover::after{
  animation:tapeSweep .75s cubic-bezier(.4,0,.2,1) 1
}
@keyframes tapeSweep{
  0%{opacity:0;top:-25%}
  12%{opacity:1}
  100%{opacity:0;top:105%}
}
/* the frame itself kicks like a bad tape splice */
.card:hover .c-media,.reel-card:hover .rc-media{animation:tapeKick .42s steps(3) 1}
@keyframes tapeKick{
  0%,100%{transform:translate3d(0,0,0)}
  30%{transform:translate3d(-1.2%,.5%,0)}
  60%{transform:translate3d(.9%,-.4%,0)}
}

/* ── hero plane: periodic tape damage ───────────────────────────── */
/* filter only — GSAP owns transform on .stage-screen for the pointer tilt,
   so animating transform here would fight it every frame */
.stage-screen{animation:planeDrift 9s steps(1) infinite}
@keyframes planeDrift{
  0%,92%{filter:none}
  93%{filter:contrast(1.4) saturate(1.6) hue-rotate(-10deg)}
  94%{filter:brightness(1.3) contrast(.85)}
  95%{filter:contrast(1.25) hue-rotate(6deg)}
  96%,100%{filter:none}
}

/* ── louder section rhythm ──────────────────────────────────────── */
.slug::before{height:3px}
.cap-row{border-top-width:1px}
.cap-t{font-size:clamp(24px,3.6vw,64px)}
.stat b{font-size:clamp(44px,7.4vw,128px)}
.stack-card h3{font-size:clamp(26px,4vw,64px)}
.idx-t{font-size:clamp(22px,3.4vw,60px)}
.card .c-title{font-size:clamp(18px,2.2vw,36px)}
.reel-card .rc-title{font-size:clamp(21px,2.9vw,48px)}

@media (max-width:860px){
  .hero-h1{font-size:clamp(34px,10vw,64px)}
  .ghost-word{font-size:clamp(90px,28vw,180px)}
  .cta h2{font-size:clamp(34px,10vw,64px)}
}
@media (prefers-reduced-motion:reduce){
  .stage-screen{animation:none}
  .card:hover .c-media,.reel-card:hover .rc-media,
  .card:hover .c-media::after,.reel-card:hover .rc-media::after,.screen:hover::after{animation:none}
}

/* ═══ 31 · VELOCITY CHROMATIC ABERRATION ═══════════════════════════
   --ca is set by JS from scroll velocity; 0 at rest = invisible.
   Applied to opaque display type only — .shine has transparent glyph
   fill, a zero-offset shadow would bleed through it as a solid tint. */
.d2,.d3,.cap-t,.stat b,.idx-t,.reel-card .rc-title{
  text-shadow:
    calc(var(--ca,0)*1px) 0 0 rgba(255,45,14,.5),
    calc(var(--ca,0)*-1px) 0 0 rgba(0,190,255,.38)
}
@media (prefers-reduced-motion:reduce){
  .d2,.d3,.cap-t,.stat b,.idx-t,.reel-card .rc-title{text-shadow:none}
}

/* ═══ 32 · CRAWLABLE CASE-STUDY LINK ═══════════════════════════════
   The grid/list is JS-rendered and cards open a modal, so without this
   anchor there is no crawlable path from /portfolio to the case studies. */
.c-case{
  display:inline-block;margin-top:10px;
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--gold-dim);padding-bottom:3px;
  transition:color .3s,border-color .3s
}
.c-case:hover{color:var(--bone);border-color:var(--bone)}
.idx-y .c-case{margin-top:6px;display:block;font-size:9px}

/* ═══ 33 · SERVICES PAGE ════════════════════════════════════════════
   Clean, image-led cards. Deliberately different from the homepage
   (text rows) and the portfolio (dense grid): here each service gets a
   large frame of real footage and a lot of air around it. */
.srv-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,44px);padding-block:var(--s6)
}
.srv-card{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/11;background:var(--ink-3);border:1px solid var(--hair);
  will-change:transform
}
.srv-media{position:absolute;inset:-4%;overflow:hidden}
.srv-media img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.1);
  filter:saturate(.5) contrast(1.06) brightness(.62);
  transition:transform 1.2s var(--e-out),filter .8s var(--e-out)
}
.srv-card:hover .srv-media img{transform:scale(1.17);filter:saturate(.9) contrast(1) brightness(.8)}
.srv-veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 26%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.96) 100%)
}
.srv-body{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.8vw,46px)
}
.srv-num{
  position:absolute;top:clamp(16px,2.2vw,34px);left:clamp(20px,2.8vw,46px);
  font-family:var(--ff-d);font-size:clamp(44px,5.6vw,96px);font-weight:400;
  line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,197,106,.5);
  transition:-webkit-text-stroke-color .5s var(--e-out)
}
.srv-card:hover .srv-num{-webkit-text-stroke-color:var(--gold)}
.srv-rule{width:44px;height:3px;background:var(--rec);margin-bottom:var(--s3);
  transition:width .6s var(--e-out)}
.srv-card:hover .srv-rule{width:96px}
.srv-title{
  font-family:var(--ff-d);font-size:clamp(26px,3.5vw,58px);font-weight:400;
  line-height:.96;letter-spacing:-.035em;
  margin-bottom:var(--s3);transition:transform .6s var(--e-out);transform-origin:left
}
.srv-card:hover .srv-title{transform:translateX(10px)}
.srv-desc{
  color:var(--bone-70);font-size:clamp(13.5px,1.15vw,16px);line-height:1.6;font-weight:300;
  max-width:44ch;margin-bottom:var(--s4)
}
.srv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)}
.srv-tags span{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-50);border:1px solid var(--hair-2);padding:6px 11px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px)
}
.srv-go{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);transition:gap .5s var(--e-out)
}
.srv-card:hover .srv-go{gap:20px}
.srv-line{
  position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out);z-index:4
}
.srv-card:hover .srv-line{transform:scaleX(1)}

/* process — vertical, roomier than the homepage's 4-across spine */
.srv-proc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,56px);margin-top:var(--s7)}
.srv-step{
  position:relative;padding:clamp(24px,3vw,44px);
  border:1px solid var(--hair);background:var(--ink-2);overflow:hidden
}
.srv-step::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--rec);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)
}
.srv-step:hover::before{transform:scaleX(1)}
.srv-step-n{
  font-family:var(--ff-m);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rec);display:block;margin-bottom:var(--s4)
}
.srv-step h3{
  font-family:var(--ff-d);font-size:clamp(22px,2.6vw,42px);font-weight:400;
  letter-spacing:-.03em;line-height:1;
  margin-bottom:var(--s3)
}
.srv-step p{color:var(--bone-50);font-size:14.5px;line-height:1.65;font-weight:300}

@media (max-width:980px){
  .srv-grid,.srv-proc{grid-template-columns:1fr}
  .srv-card{aspect-ratio:16/12}
}
@media (max-width:680px){
  .srv-card{aspect-ratio:4/5}
  .srv-desc{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .srv-card:hover .srv-media img,.srv-card:hover .srv-title{transform:none}
}

/* breadcrumb — plain, so it does not mimic the section label's red rule */
.crumb{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34);margin-bottom:var(--s5);display:block
}
.crumb a{color:var(--bone-50);transition:color .3s}
.crumb a:hover{color:var(--gold)}
.crumb i{font-style:normal;margin-inline:8px;color:var(--bone-18)}

/* ═══ 34 · TYPE CALIBRATION — Instrument Serif ══════════════════════
   The tracking above was drawn for a wide bold grotesk. A high-contrast
   serif sets much wider optically, so the negative tracking is relaxed
   and the leading opened. Instrument Serif ships ONE weight (400):
   font-synthesis-weight is off so nothing can fake a bold and smear it.
   Numerals stay in the sans — the odometer needs tabular figures. */
body{font-synthesis-weight:none}

.d0,.d1,.d2,.d3{letter-spacing:-.02em;line-height:.9}
.d2{line-height:.96}
.d3{line-height:1.04}

.ital{font-weight:400;letter-spacing:-.004em;line-height:1}

#loader .ld-cnt,.cta-ghost,.ft-word,.pf-hero-ghost,.ghost-word{letter-spacing:-.02em;line-height:.84}
.srv-num{letter-spacing:-.01em}
.stack-n{letter-spacing:-.022em;line-height:.86}
.reel-card .rc-title,.cap-t,.stack-card h3,.modal-title,.card .c-title,.idx-t,
.srv-title,.srv-step h3,.post h3,.proc-step h3,#drawer a:not(.btn){letter-spacing:-.014em;line-height:1.02}

/* numerals: sans, tabular, so the odometer columns cannot jitter */
.stat b,.hero-kpi b,.res b{font-family:var(--ff-b);font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* IBM Plex Mono runs a touch larger than Space Mono at the same size */
.mono,.slug span{font-size:10.5px}

/* 1ch IS the advance of "0", so every odometer column is exactly one digit
   wide whether or not the face ships tabular figures — digits cannot shuffle
   sideways as they roll. */
.odo-col{width:1ch;text-align:center}
/* Instrument Sans sets wide: "1500+" overran its column at the old size. */
.stat b{font-size:clamp(34px,5vw,88px)}

/* ── 35 · BLOG INDEX ───────────────────────────────────────────────
   Twenty-one articles across five topics. The job here is grouping, so the
   page is built as: one decision map → a sticky topic filter → a featured
   piece → five labelled bands, each with its own intro and card grid. Every
   card carries a real frame from the portfolio instead of placeholder art. */

/* hero */
.bl-hero{position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(48px,8vh,110px));padding-bottom:var(--s8)}
.bl-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:end}
.bl-kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.bl-kw a{font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-50);border:1px solid var(--hair);padding:9px 15px;
  transition:color .3s,background .3s,border-color .3s}
.bl-kw a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.bl-upd{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34);margin-bottom:var(--s3);text-align:right}
.bl-side{display:flex;flex-direction:column;align-items:flex-end}

/* decision map — the grouping statement, before any article */
.bl-map{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:var(--s7);
  padding-block:var(--s8);border-top:1px solid var(--hair);align-items:start}
.bl-map-lede{font-size:clamp(14px,1.15vw,16.5px);line-height:1.7;color:var(--bone-50);margin-top:var(--s4)}
.bl-map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.bl-map-item{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden;
  padding:clamp(20px,2.1vw,32px);background:var(--ink);min-height:186px;transition:background .45s var(--e-out)}
.bl-map-item:hover{background:var(--ink-3)}
.bl-map-n{font-family:var(--ff-m);font-size:10px;letter-spacing:.22em;color:var(--rec)}
.bl-map-t{font-family:var(--ff-d);font-size:clamp(19px,1.85vw,26px);line-height:1.06}
.bl-map-d{font-size:13px;line-height:1.62;color:var(--bone-50)}
.bl-map-item::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--gold);transition:width .55s var(--e-out)}
.bl-map-item:hover::after{width:100%}

/* sticky topic filter */
.bl-filter{position:sticky;top:var(--nav-h);z-index:60;
  background:rgba(0,0,0,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-block:1px solid var(--hair)}
.bl-filter-in{display:flex;align-items:center;gap:7px;overflow-x:auto;
  padding:12px var(--gutter);scrollbar-width:none}
.bl-filter-in::-webkit-scrollbar{display:none}
.bl-fb{flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-50);border:1px solid var(--hair);padding:10px 16px;
  transition:color .3s,background .3s,border-color .3s}
.bl-fb b{font-weight:400;color:var(--bone-18)}
.bl-fb:hover{color:var(--bone);border-color:var(--hair-2)}
.bl-fb.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.bl-fb.on b{color:rgba(0,0,0,.55)}

/* topic band */
.bl-sec{padding-block:clamp(56px,7vw,110px)}
.bl-sec + .bl-sec{border-top:1px solid var(--hair)}
.bl-intro{max-width:80ch;margin-top:var(--s5);display:grid;gap:var(--s3)}
.bl-intro p{font-size:clamp(14px,1.1vw,16px);line-height:1.74;color:var(--bone-50)}
.bl-intro strong{color:var(--bone);font-weight:600}
.bl-intro a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.bl-intro a:hover{border-bottom-color:var(--gold)}

/* featured article */
.bl-feat{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  border:1px solid var(--hair);background:var(--ink-2);overflow:hidden;margin-top:var(--s6);
  will-change:transform}
.bl-feat-media{position:relative;overflow:hidden;background:var(--ink-3);min-height:300px}
.bl-feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);filter:grayscale(.34) contrast(1.05);
  transition:transform 1.2s var(--e-out),filter .9s}
.bl-feat:hover .bl-feat-media img{transform:scale(1.13);filter:grayscale(0) contrast(1.08)}
.bl-feat-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 45%,rgba(0,0,0,.55))}
.bl-feat-body{padding:clamp(24px,3.1vw,56px);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s3)}
.bl-feat-super{font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.bl-feat h2{font-family:var(--ff-d);font-size:clamp(26px,2.9vw,46px);line-height:1.02;letter-spacing:-.015em}
.bl-feat p{font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.7;color:var(--bone-50)}
.bl-feat-meta{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--ff-m);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-34)}
.bl-feat-go{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s2);
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);transition:gap .35s var(--e-out)}
.bl-feat:hover .bl-feat-go{gap:18px}

/* three high-intent cards */
.bl-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(14px,1.6vw,26px)}
.bl-tc{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  padding:clamp(20px,2.2vw,34px);border:1px solid var(--hair);background:var(--ink-2);
  transition:background .45s var(--e-out);will-change:transform}
.bl-tc:hover{background:var(--ink-3)}
.bl-tc-badge{align-self:flex-start;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rec);border:1px solid rgba(255,45,14,.35);padding:5px 10px}
.bl-tc-cat{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-34)}
.bl-tc h3{font-family:var(--ff-d);font-size:clamp(19px,1.7vw,26px);line-height:1.08}
.bl-tc p{font-size:13.5px;line-height:1.64;color:var(--bone-50)}
.bl-tc-foot{margin-top:auto;padding-top:var(--s3);display:flex;justify-content:space-between;
  align-items:center;gap:12px;border-top:1px solid var(--hair);
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-34)}
.bl-tc-foot em{font-style:normal;color:var(--gold)}
.bl-tc::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
  transition:width .55s var(--e-out)}
.bl-tc:hover::after{width:100%}

/* article cards */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);margin-top:var(--s6)}
.bl-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);background:var(--ink-2);will-change:transform}
.bl-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-3)}
.bl-card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  filter:grayscale(.42) brightness(.7);transition:transform 1.05s var(--e-out),filter .75s}
.bl-card:hover .bl-card-media img{transform:scale(1.13);filter:grayscale(0) brightness(.92)}
.bl-card-cat{position:absolute;left:0;top:0;z-index:2;font-family:var(--ff-m);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:7px 12px;
  background:rgba(0,0,0,.74);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.bl-card-rt{position:absolute;right:9px;bottom:9px;z-index:2;font-family:var(--ff-m);font-size:9px;
  letter-spacing:.14em;color:var(--bone-70);background:rgba(0,0,0,.62);padding:5px 9px}
.bl-card-body{flex:1;display:flex;flex-direction:column;gap:11px;padding:clamp(16px,1.6vw,24px)}
.bl-card h3{font-family:var(--ff-d);font-size:clamp(17px,1.45vw,22px);line-height:1.12}
.bl-card p{font-size:13px;line-height:1.62;color:var(--bone-50)}
.bl-card-foot{margin-top:auto;padding-top:var(--s3);display:flex;justify-content:space-between;
  align-items:center;gap:10px;border-top:1px solid var(--hair);
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-34)}
.bl-card-go{display:inline-flex;align-items:center;gap:8px;color:var(--gold);transition:gap .35s var(--e-out)}
.bl-card:hover .bl-card-go{gap:14px}
.bl-card::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
  transition:width .55s var(--e-out)}
.bl-card:hover::after{width:100%}

/* related-service links inside a band */
.bl-ilink{margin-top:var(--s6);border:1px solid var(--hair);padding:clamp(18px,2vw,28px)}
.bl-ilink-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rec);margin-bottom:var(--s3)}
.bl-ilink-g{display:flex;flex-wrap:wrap;gap:8px}
.bl-il{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);
  padding:10px 14px;font-size:12.5px;color:var(--bone-70);transition:color .3s,border-color .3s}
.bl-il i{font-style:normal;font-family:var(--ff-m);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-18)}
.bl-il:hover{border-color:var(--gold);color:var(--gold)}
.bl-il:hover i{color:var(--gold-dim)}

/* inline call to action + lead magnet */
.bl-icta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  padding:clamp(26px,3.4vw,56px);border:1px solid var(--hair-2);background:var(--ink-3)}
.bl-icta .lbl{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rec);margin-bottom:var(--s3)}
.bl-icta h2{font-family:var(--ff-d);font-size:clamp(22px,2.5vw,40px);line-height:1.06;letter-spacing:-.015em}
.bl-icta h2 em{font-style:italic;color:var(--gold)}
.bl-icta p{margin-top:var(--s3);font-size:14.5px;line-height:1.66;color:var(--bone-50);max-width:60ch}
.bl-icta-btns{display:flex;gap:12px;flex-wrap:wrap}
.bl-lm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  padding:clamp(24px,3vw,44px);border:1px solid var(--gold-dim);background:var(--gold-ghost)}
.bl-lm-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bl-lm h3{font-family:var(--ff-d);font-size:clamp(20px,2.1vw,32px);line-height:1.08;margin-top:12px}
.bl-lm p{margin-top:12px;font-size:14px;line-height:1.66;color:var(--bone-50);max-width:62ch}

/* service band + the four-to-read grid */
.bl-band{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-block:var(--s6);
  border-top:1px solid var(--hair)}
.bl-band-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-34);margin-right:var(--s3)}
.bl-band a{font-size:12.5px;color:var(--bone-70);border:1px solid var(--hair);padding:9px 14px;
  transition:color .3s,border-color .3s}
.bl-band a:hover{color:var(--gold);border-color:var(--gold)}
.bl-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);margin-top:var(--s6)}
.bl-rc{position:relative;display:flex;flex-direction:column;gap:12px;min-height:196px;
  padding:clamp(18px,2vw,28px);background:var(--ink);transition:background .45s var(--e-out)}
.bl-rc:hover{background:var(--ink-3)}
.bl-rc-cat{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--rec)}
.bl-rc-t{font-family:var(--ff-d);font-size:clamp(16px,1.35vw,20px);line-height:1.14}
.bl-rc-r{margin-top:auto;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}

/* filter state */
[data-fhide]{display:none!important}

@media (max-width:1080px){
  .bl-hero-in{grid-template-columns:1fr}
  .bl-side{align-items:flex-start;margin-top:var(--s5)}
  .bl-upd{text-align:left}
  .bl-map{grid-template-columns:1fr;gap:var(--s5)}
  .bl-map-grid{grid-template-columns:repeat(2,1fr)}
  .bl-feat{grid-template-columns:1fr}
  .bl-feat-media{min-height:0;aspect-ratio:16/9}
  .bl-grid,.bl-trio{grid-template-columns:repeat(2,1fr)}
  .bl-rel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .bl-grid,.bl-trio,.bl-rel,.bl-map-grid{grid-template-columns:1fr}
  .bl-icta,.bl-lm{grid-template-columns:1fr}
}
/* the blog h1 is four hard-broken lines of the original copy — at full display
   scale it filled the whole viewport and pushed the KPIs off screen */
.bl-hero h1{font-size:clamp(30px,4.9vw,80px);line-height:1;max-width:20ch}
.bl-map h2{font-size:clamp(23px,2.5vw,38px);line-height:1.04;margin-top:var(--s3)}

/* ── 36 · LONG-READ (ÁRAK) ─────────────────────────────────────────
   The prices page is a 10-minute article whose markup is littered with inline
   styles written against the legacy token names. Rather than rewrite a hundred
   style attributes — and risk mangling copy — the wrapper re-points those old
   names at the 2026 palette, so every inline rule resolves to the new system
   on its own. Everything below then styles the structure around them. */
/* NOT .post — that class is already the blog-card component in §22, and
   putting it on <main> made the page a flex column whose auto margins then
   shrank every section to its content width. */
.legacy-tok{
  --c-gold:var(--gold); --c-gold2:#F0D48A;
  --c-white:var(--bone); --c-light:var(--bone-70); --c-mid:var(--bone-50);
  --c-grey1:var(--hair); --c-grey2:var(--bone-34);
  --c-black:var(--ink); --c-dark:var(--ink-2); --c-dark2:var(--ink-3);
  --ff-display:var(--ff-d); --ff-ui:var(--ff-b); --ff-mono:var(--ff-m);
}

/* hero */
.post-hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(48px,8vh,110px)) 0 clamp(32px,4vw,56px)}
.post-hero-ghost{position:absolute;right:calc(var(--gutter) * -.4);top:56%;transform:translateY(-50%);
  font-family:var(--ff-d);font-size:clamp(120px,21vw,340px);line-height:1;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,197,106,.10);
  white-space:nowrap;pointer-events:none;z-index:0}
.post-hero > .wrap{position:relative;z-index:2}
.breadcrumb{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34);margin-bottom:var(--s5)}
.breadcrumb a{color:var(--bone-50)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-sep{margin:0 10px;color:var(--bone-18)}
.post-meta{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:var(--s4);
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-34)}
.post-meta span:first-child{color:var(--gold)}
.post-h1{font-family:var(--ff-d);font-size:clamp(32px,5.4vw,88px);line-height:1;
  letter-spacing:-.02em;max-width:19ch}
.post-h1 em{font-style:italic}

/* two-column read: a sticky map of the article, then the article */
.post-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,80px);
  align-items:start;padding-bottom:clamp(56px,7vw,110px)}
.post-toc{position:sticky;top:calc(var(--nav-h) + 28px);display:flex;flex-direction:column;gap:2px}
.post-toc-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rec);padding-bottom:var(--s3);border-bottom:1px solid var(--hair);margin-bottom:var(--s3)}
.post-toc a{position:relative;display:block;padding:8px 0 8px 16px;font-size:12.5px;line-height:1.45;
  color:var(--bone-34);border-left:1px solid var(--hair);transition:color .3s,border-color .3s}
.post-toc a::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--e-out)}
.post-toc a:hover,.post-toc a.on{color:var(--bone)}
.post-toc a.on::before,.post-toc a:hover::before{transform:scaleY(1)}

/* prose */
.post-content{max-width:76ch}
.post-content > p{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.78;color:var(--bone-70);
  margin-bottom:var(--s4)}
.post-content > p strong{color:var(--bone);font-weight:600}
.post-content a{color:var(--gold);border-bottom:1px solid var(--gold-dim);transition:border-color .3s}
.post-content a:hover{border-bottom-color:var(--gold)}
.post-content h2{font-family:var(--ff-d);font-size:clamp(24px,3vw,48px);line-height:1.03;
  letter-spacing:-.02em;margin:clamp(48px,5.5vw,90px) 0 var(--s4);scroll-margin-top:calc(var(--nav-h) + 24px)}
.post-content h2::before{content:'';display:block;width:clamp(24px,4vw,72px);height:2px;
  background:var(--rec);margin-bottom:var(--s4)}
.post-content h3{font-family:var(--ff-d);font-size:clamp(19px,1.8vw,27px);line-height:1.1;
  margin:var(--s6) 0 var(--s3)}
.post-content ul,.post-content ol{margin:0 0 var(--s4) 0;display:grid;gap:12px}
.post-content li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--bone-70)}
.post-content ul li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)}
.post-content ol{counter-reset:pc}
.post-content ol li{counter-increment:pc}
.post-content ol li::before{content:counter(pc,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--ff-m);font-size:10px;color:var(--rec)}
.post-img{margin:var(--s6) 0;border:1px solid var(--hair);overflow:hidden;background:var(--ink-3)}
.post-img img{display:block;width:100%;height:auto}
.post-quote{margin:var(--s6) 0;padding:clamp(20px,2.4vw,34px) clamp(22px,2.8vw,44px);
  border-left:2px solid var(--gold);background:var(--gold-ghost);
  font-family:var(--ff-d);font-size:clamp(18px,1.9vw,26px);line-height:1.3}

/* price tables — the centre of gravity on this page */
.post-table-wrap{margin:var(--s6) 0;border:1px solid var(--hair);background:var(--ink-2)}
.post-content table{width:100%;border-collapse:collapse}
.post-content thead tr{border-bottom:1px solid var(--gold-dim)!important;background:var(--ink-3)}
.post-content th{font-family:var(--ff-m)!important;font-size:9.5px!important;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)!important;padding:16px 18px!important;text-align:left}
.post-content td{padding:15px 18px!important;font-size:14px;line-height:1.5;
  border-bottom:1px solid var(--hair)!important;font-variant-numeric:tabular-nums}
.post-content tbody tr{transition:background .3s}
.post-content tbody tr:hover{background:rgba(232,197,106,.045)}
.post-content tbody tr:last-child td{border-bottom:none!important}
.post-content td:first-child{color:var(--bone-70)!important;font-family:var(--ff-b)}

/* faq */
.post-content details{border-bottom:1px solid var(--hair)!important;padding:0!important}
.post-content summary{padding:20px 0!important;font-family:var(--ff-b)!important;font-size:15.5px;
  color:var(--bone)!important;gap:20px;transition:color .3s}
.post-content summary::-webkit-details-marker{display:none}
.post-content summary:hover{color:var(--gold)!important}
.post-content details[open] summary{color:var(--gold)!important}
.post-content details[open] summary span{transform:rotate(45deg)}
.post-content summary span{flex:none;transition:transform .4s var(--e-out);display:inline-block}
.post-content details > p{padding-bottom:20px;font-size:14.5px;line-height:1.7;max-width:70ch}

/* the legacy buttons, dressed as 2026 ones */
.btn-gold,.btn-ghost,.nav-btn,.arak-sticky-cta-btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  font-family:var(--ff-b);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);overflow:hidden;border:none;
  transition:background .35s var(--e-out),color .35s}
.btn-gold:hover,.nav-btn:hover,.arak-sticky-cta-btn:hover{background:var(--bone);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--hair-2)}
.btn-ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* inline callouts already on the page */
.blog-cta,.post-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;margin:var(--s6) 0;padding:clamp(22px,2.6vw,38px);
  border:1px solid var(--hair-2);background:var(--ink-3);font-size:15px;line-height:1.6;color:var(--bone-70)}
.blog-cta strong{display:block;color:var(--gold);font-weight:600}
.post-cta{display:block;text-align:center;border-color:var(--gold-dim);background:var(--gold-ghost)}
.sec-label{display:flex;align-items:center;gap:12px}
.sec-label-bar{width:clamp(20px,3vw,54px);height:2px;background:var(--rec);flex:none}
.sec-label-txt{font-family:var(--ff-m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--hair)}
.post-tag,.int-link{display:inline-flex;align-items:center;border:1px solid var(--hair);
  padding:10px 15px;font-size:12.5px;color:var(--bone-70);transition:color .3s,border-color .3s}
.post-tag:hover,.int-link:hover{color:var(--gold);border-color:var(--gold)}
.int-links{display:flex;flex-wrap:wrap;gap:8px}

/* sticky ask-for-a-quote bar */
.arak-sticky-cta{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:700;
  display:flex;align-items:center;gap:18px;max-width:calc(100vw - 32px);
  padding:12px 12px 12px 22px;border:1px solid var(--hair-2);
  background:rgba(0,0,0,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.arak-sticky-cta-txt{font-size:13px;line-height:1.4;color:var(--bone-70)}
.arak-sticky-cta-btn{min-height:44px;padding:0 20px;font-size:11px}
.arak-sticky-cta-close{flex:none;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--hair);color:var(--bone-34);background:none;font-size:15px;line-height:1;
  transition:color .3s,border-color .3s}
.arak-sticky-cta-close:hover{color:var(--bone);border-color:var(--hair-2)}

@media (max-width:1080px){
  .post-shell{grid-template-columns:1fr;gap:var(--s5)}
  .post-toc{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    padding-bottom:var(--s3);scrollbar-width:none}
  .post-toc::-webkit-scrollbar{display:none}
  .post-toc-l{display:none}
  .post-toc a{flex:none;border-left:none;border:1px solid var(--hair);padding:9px 14px;white-space:nowrap}
  .post-toc a::before{display:none}
  .post-toc a.on{border-color:var(--gold);color:var(--gold)}
}
@media (max-width:680px){
  .post-content th,.post-content td{padding:12px 12px!important;font-size:13px}
  .arak-sticky-cta{left:16px;right:16px;transform:none;padding:12px}
  .arak-sticky-cta-txt{display:none}
  .arak-sticky-cta-btn{flex:1;justify-content:center}
}
/* the quote form that lives inside the article */
#arak-form{background:var(--ink-3)!important;border:1px solid var(--hair-2)!important;
  border-left:2px solid var(--gold)!important;border-radius:0!important;
  padding:clamp(24px,3vw,44px)!important;margin:var(--s7) 0!important}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-50)}
.form-input,.form-select,.form-textarea{width:100%;padding:14px 16px;font-size:14.5px;color:var(--bone);
  background:var(--ink-2);border:1px solid var(--hair);transition:border-color .3s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--gold)}
.form-textarea{min-height:120px;resize:vertical}
.form-select{appearance:none;cursor:pointer;
  /* appearance:none removes the native arrow and puts nothing back, so a
     dropdown reads as a text field. Two gradients make the chevron. */
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-50) 50%),
                   linear-gradient(135deg,var(--bone-50) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}

/* the sticky bar starts off-screen and slides in past the first quarter */
.arak-sticky-cta{transform:translateY(160%);transition:transform .45s var(--e-out)}
.arak-sticky-cta.visible{transform:translateX(-50%) translateY(0)}
@media (max-width:680px){.arak-sticky-cta.visible{transform:translateY(0)}}
/* a bare 1fr track keeps an auto minimum, so the wide price tables stretched
   the column instead of scrolling inside their own wrapper */
.post-shell{min-width:0}
.post-shell > *{min-width:0}
@media (max-width:1080px){.post-shell{grid-template-columns:minmax(0,1fr)}}
.post-content{min-width:0}
.post-table-wrap,.post-content > div:has(> table){overflow-x:auto}
/* prose-link styling must not repaint the buttons — .post-content a beat
   .btn-gold on specificity and painted gold text onto the gold fill */
.post-content a.btn-gold,.post-content a.btn-ghost,.post-content a.post-tag,
.post-content a.int-link,.post-content a.arak-sticky-cta-btn{border-bottom:none}
.post-content a.btn-gold{color:var(--ink)}
.post-content a.btn-gold:hover{color:var(--ink)}
.post-content a.btn-ghost{color:var(--bone)}
.post-content a.btn-ghost:hover{color:var(--ink)}
.post-content a.post-tag,.post-content a.int-link{color:var(--bone-70)}
.post-content a.post-tag:hover,.post-content a.int-link:hover{color:var(--gold)}

/* ── 37 · PRICES & FAQ ─────────────────────────────────────────────
   Six indicative price bands and a dozen answers. Same trick as §36: the
   markup carries inline styles written against the legacy token names, so the
   wrapper re-points them and the copy is never touched. */

.pricing-intro{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(48px,8vh,110px)) var(--gutter) clamp(32px,4vw,56px);
  max-width:var(--maxw);margin-inline:auto}
.pricing-ghost{position:absolute;right:calc(var(--gutter) * -.4);top:58%;transform:translateY(-50%);
  font-family:var(--ff-d);font-size:clamp(110px,20vw,320px);line-height:1;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,197,106,.10);
  white-space:nowrap;pointer-events:none;z-index:0}
/* not the ghost: this selector outranks .pricing-ghost and was overriding
   its position:absolute, so the word sat in the flow and pushed the hero
   copy 320px down */
.pricing-intro > *:not(.pricing-ghost){position:relative;z-index:2}
.pricing-intro h1{font-family:var(--ff-d)!important;font-size:clamp(38px,6.4vw,110px)!important;
  font-weight:400!important;line-height:.98!important;letter-spacing:-.02em;max-width:14ch}
.pricing-intro h1 em{font-style:italic;color:var(--gold)}

.pricing-section{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--hair)}
.pricing-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.pricing-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:var(--s7)}
.pricing-title{font-family:var(--ff-d);font-size:clamp(30px,4.4vw,72px);line-height:.98;
  letter-spacing:-.02em;margin-top:var(--s3)}
.pricing-subtext{font-size:clamp(14px,1.1vw,16px);line-height:1.72;color:var(--bone-50)}
.pricing-note-inline{display:block;margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--hair);font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;
  line-height:1.9;text-transform:uppercase;color:var(--bone-34)}

/* the six bands */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.svc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink);padding:clamp(24px,2.6vw,42px);transition:background .45s var(--e-out);
  will-change:transform}
.svc-card:hover{background:var(--ink-3)}
.svc-card::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
  transition:width .55s var(--e-out)}
.svc-card:hover::after{width:100%}
.svc-index{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rec)}
.svc-name{font-family:var(--ff-d);font-size:clamp(22px,2.2vw,34px);line-height:1.02;
  letter-spacing:-.015em;margin-top:var(--s3)}
.svc-desc{margin-top:var(--s3);font-size:13.5px;line-height:1.65;color:var(--bone-50)}
.svc-sep{height:1px;background:var(--hair);margin:var(--s5) 0 var(--s4)}
.svc-price-label{font-family:var(--ff-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-34)}
.svc-price{margin-top:10px;font-family:var(--ff-b);font-size:clamp(20px,1.9vw,28px);font-weight:600;
  letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.svc-price em{font-style:normal;font-size:.62em;margin-left:7px;color:var(--gold-dim)}
.svc-price-note{margin-top:8px;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-34)}
.svc-includes{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair);
  display:grid;gap:10px}
.svc-includes li{position:relative;padding-left:20px;font-size:13px;line-height:1.55;color:var(--bone-70)}
.svc-includes li::before{content:'';position:absolute;left:0;top:.6em;width:9px;height:1px;background:var(--gold)}

.pricing-footer-note{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s6);
  padding:clamp(20px,2.2vw,32px);border:1px solid var(--gold-dim);background:var(--gold-ghost)}
.pricing-footer-icon{flex:none;width:34px;height:34px;border:1px solid var(--gold-dim);
  display:grid;place-items:center;position:relative}
.pricing-footer-icon::before{content:'i';font-family:var(--ff-d);font-style:italic;font-size:17px;color:var(--gold)}
.pricing-footer-note p{font-size:14px;line-height:1.7;color:var(--bone-70)}
.pricing-footer-note strong{color:var(--bone);font-weight:600}

/* faq */
.faq-section{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--hair)}
.faq-inner{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.faq-inner h2{font-family:var(--ff-d)!important;font-size:clamp(28px,4vw,64px)!important;
  font-weight:400!important;line-height:1!important;letter-spacing:-.02em}
.faq-inner h2 em{font-style:italic;color:var(--gold)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item:first-child{border-top:1px solid var(--hair)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;
  padding:clamp(18px,1.9vw,26px) 0;text-align:left;
  font-family:var(--ff-b);font-size:clamp(15px,1.25vw,18px);line-height:1.35;color:var(--bone);
  transition:color .3s}
.faq-q:hover,.faq-item.vs-open .faq-q{color:var(--gold)}
.faq-arrow{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--hair);transition:transform .45s var(--e-out),border-color .3s}
.faq-arrow svg{width:11px;height:7px;fill:none;stroke:currentColor;stroke-width:1.4}
.faq-item.vs-open .faq-arrow{transform:rotate(180deg);border-color:var(--gold)}
/* 0fr → 1fr animates a natural height with no javascript measurement, so it
   stays correct when the text rewraps on resize */
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-io)}
.faq-item.vs-open .faq-body{grid-template-rows:1fr}
.faq-body-inner{overflow:hidden;min-height:0}
.faq-a{padding:0 0 clamp(20px,2.2vw,30px);max-width:82ch}
.faq-a p{font-size:14.5px;line-height:1.75;color:var(--bone-50)}
.faq-a strong{color:var(--bone);font-weight:600}

@media (prefers-reduced-motion:reduce){.faq-body{transition:none}}
@media (max-width:1080px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-header{grid-template-columns:1fr;align-items:start}
}
@media (max-width:680px){
  .service-grid{grid-template-columns:1fr}
  .pricing-footer-note{flex-direction:column;gap:var(--s3)}
}

/* ── 38 · CONTACT ──────────────────────────────────────────────────
   A quiet page: a hero, the reference marquee as a trust signal, then the
   brief form beside the direct contact details. Nothing here competes with
   the form — it is the only thing the page is for. */
.ct-hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(48px,8vh,110px)) 0 clamp(32px,4vw,56px)}
.ct-ghost{position:absolute;right:calc(var(--gutter) * -.4);top:58%;transform:translateY(-50%);
  font-family:var(--ff-d);font-size:clamp(96px,16vw,270px);line-height:1;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,197,106,.10);
  white-space:nowrap;pointer-events:none;z-index:0}
.ct-hero > .wrap{position:relative;z-index:2}
.ct-hero h1{font-family:var(--ff-d);font-size:clamp(38px,6.4vw,110px);line-height:.98;
  letter-spacing:-.02em;max-width:13ch}
.ct-hero h1 em{font-style:italic;color:var(--gold)}

.ct-body{padding-block:clamp(48px,6vw,96px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,68px);align-items:start}
.ct-form{border:1px solid var(--hair);background:var(--ink-2);padding:clamp(22px,2.8vw,46px)}
.ct-form form{display:grid;gap:var(--s4)}
.ct-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.ct-form button[type=submit]{width:100%;justify-content:center;margin-top:var(--s2)}
.ct-req{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-34)}

/* direct details — one hairline stack, so the eye reads it as a single block */
.ct-aside{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.ct-card{position:relative;background:var(--ink-2);padding:clamp(18px,1.9vw,26px);
  transition:background .4s var(--e-out)}
.ct-card:hover{background:var(--ink-3)}
.ct-label{font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone-34);margin-bottom:9px}
.ct-value{font-family:var(--ff-d);font-size:clamp(17px,1.5vw,23px);line-height:1.2;color:var(--bone);
  transition:color .3s}
a.ct-value:hover{color:var(--gold)}
.ct-note{background:var(--gold-ghost);padding:clamp(18px,1.9vw,26px)}
.ct-note .ct-label{color:var(--gold)}
.ct-note p{font-size:13.5px;line-height:1.72;color:var(--bone-50)}
.ct-note strong{color:var(--bone);font-weight:600}

@media (max-width:1080px){
  .ct-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ct-form .form-row{grid-template-columns:1fr}
}

/* ── 39 · CASE STUDIES ─────────────────────────────────────────────
   The twenty portfolio pages are the ones that actually sell — full
   narratives with real numbers. Same approach as §36/§38: the markup keeps
   its inline legacy styles (the .legacy-tok wrapper re-points those tokens),
   and every cs-* class is restated in the 2026 language. */

/* full-bleed video hero */
.cs-hero{position:relative;height:clamp(460px,78vh,860px);overflow:hidden;background:var(--ink-2)}
.cs-hero-video{position:absolute;inset:0;z-index:0}
.cs-hero-video iframe{position:absolute;top:50%;left:50%;width:177.78vw;height:56.25vw;
  min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.cs-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 38%,rgba(0,0,0,.93) 100%)}
.cs-hero-body{position:absolute;left:0;bottom:0;width:100%;z-index:3;
  padding:0 var(--gutter) clamp(30px,4.5vw,64px);max-width:var(--maxw);margin-inline:auto}
.cs-hero-client{font-family:var(--ff-m);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s3)}
.cs-hero-title{font-family:var(--ff-d);font-size:clamp(34px,6.6vw,116px);font-weight:400;
  line-height:.94;letter-spacing:-.025em;max-width:16ch}
.cs-hero-title em{font-style:italic;color:var(--gold)}
.cs-hero-meta{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,64px);margin-top:clamp(20px,2.6vw,40px);
  padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14)}
.cs-hero-stat-n{font-family:var(--ff-b);font-size:clamp(20px,2.3vw,34px);font-weight:600;
  letter-spacing:-.02em;color:var(--bone);font-variant-numeric:tabular-nums;line-height:1}
.cs-hero-stat-l{margin-top:7px;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-50)}

/* body */
.cs-body{max-width:1180px;margin-inline:auto;padding:clamp(48px,6vw,96px) var(--gutter)}
.cs-section + .cs-section{margin-top:clamp(48px,6vw,96px)}
.cs-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);
  align-items:start}
.cs-section-label{font-family:var(--ff-m);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rec);margin-bottom:var(--s3)}
.cs-section-title{font-family:var(--ff-d);font-size:clamp(26px,3.5vw,56px);font-weight:400;
  line-height:1;letter-spacing:-.02em;margin-bottom:var(--s4)}
.cs-section-title em{font-style:italic;color:var(--gold)}
.cs-p{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.78;color:var(--bone-50);max-width:68ch}
.cs-p + .cs-p{margin-top:var(--s3)}
.cs-p strong{color:var(--bone);font-weight:600}

/* the embedded film, framed like a monitor */
.cs-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;
  border:1px solid var(--hair)}
.cs-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-video-bars{position:absolute;inset:0;z-index:2;pointer-events:none}
.cs-video-bar{position:absolute;left:0;width:100%;height:clamp(14px,2.2vw,30px);background:#000;
  transition:transform .9s var(--e-out)}
.cs-video-bar--t{top:0}
.cs-video-bar--b{bottom:0}
.cs-video-frame:hover .cs-video-bar--t{transform:translateY(-100%)}
.cs-video-frame:hover .cs-video-bar--b{transform:translateY(100%)}

/* process — numbered, hairline-separated */
.cs-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:var(--s5)}
.cs-phase{background:var(--ink-2);padding:clamp(22px,2.4vw,38px);transition:background .45s var(--e-out)}
.cs-phase:hover{background:var(--ink-3)}
.cs-phase-n{font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;color:var(--gold)}
.cs-phase-t{font-family:var(--ff-d);font-size:clamp(19px,1.9vw,28px);line-height:1.05;
  letter-spacing:-.015em;margin:var(--s3) 0}
.cs-phase-d{font-size:13.5px;line-height:1.68;color:var(--bone-50)}

/* the numbers that close the sale */
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--gold-dim);margin-top:var(--s5)}
.cs-result{background:var(--gold-ghost);padding:clamp(24px,2.8vw,44px);text-align:center}
.cs-result-n{font-family:var(--ff-d);font-size:clamp(28px,4vw,62px);line-height:1;letter-spacing:-.03em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.cs-result-l{margin-top:var(--s3);font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-50)}

/* the shimmering hairline the legacy pages use between blocks */
.glow-divider{position:relative;height:1px;background:var(--hair);overflow:hidden}
.glow-divider::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:glowSweep 5.5s var(--shimmer-delay,0s) infinite linear}
.glow-divider.rose::after{background:linear-gradient(90deg,transparent,var(--rec),transparent)}
@keyframes glowSweep{to{left:120%}}

@media (prefers-reduced-motion:reduce){.glow-divider::after{animation:none;opacity:.35}}
@media (max-width:1080px){
  .cs-cols{grid-template-columns:1fr}
  .cs-phases,.cs-results{grid-template-columns:1fr}
}
@media (max-width:680px){
  .cs-hero-meta{gap:var(--s4)}
}

/* ── 40 · CASE-STUDY PAGE COMPONENTS ───────────────────────────────
   Each case study grew its own prefixed blocks (av-, lg-, mj-, xx-, hosp-,
   club-), but they are only three shapes repeated: a stat cell, a rich cell
   with a title and a description, and the grid that holds them. Grouped
   selectors so a new page inherits the look instead of arriving unstyled. */

/* the grids — one hairline lattice, like every other panel on the site */
.av-stat-strip,.lg-stat-strip,.mj-stat-strip,.xx-stat-strip,
.hosp-grid,.lg-journey,.mj-artists,.mj-location-grid,
.club-format-grid,.xx-variants,.xx-tech-grid{
  display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:var(--s5)}
.av-stat-strip,.lg-stat-strip,.mj-stat-strip,.xx-stat-strip{grid-template-columns:repeat(4,1fr)}
.hosp-grid,.lg-journey,.mj-artists,.club-format-grid,.xx-variants{grid-template-columns:repeat(3,1fr)}
.mj-location-grid,.xx-tech-grid{grid-template-columns:repeat(2,1fr)}

/* the cells */
.av-stat-cell,.lg-stat-cell,.mj-stat-cell,.xx-stat-cell,.hosp-cell,
.lg-step,.xx-variant,.mj-artist,.mj-location,.club-format-cell,.xx-tech{
  background:var(--ink-2);padding:clamp(20px,2.2vw,34px);transition:background .45s var(--e-out)}
.av-stat-cell:hover,.lg-stat-cell:hover,.mj-stat-cell:hover,.xx-stat-cell:hover,.hosp-cell:hover,
.lg-step:hover,.xx-variant:hover,.mj-artist:hover,.mj-location:hover,.club-format-cell:hover,
.xx-tech:hover{background:var(--ink-3)}

/* the big number / headline line of a cell */
.av-stat-n,.lg-stat-n,.mj-stat-n,.xx-stat-n,.hosp-cell-n,.lg-step-n,.xx-variant-n{
  font-family:var(--ff-d);font-size:clamp(22px,2.6vw,40px);line-height:1;letter-spacing:-.025em;
  color:var(--gold);font-variant-numeric:tabular-nums}
/* the label under it */
.av-stat-l,.lg-stat-l,.mj-stat-l,.xx-stat-l,.hosp-cell-l,.lg-step-l,.xx-variant-l,
.mj-artist-role,.mj-location-tag,.xx-tech-label,.av-insight-label,.av-timeline-day{
  margin-top:10px;font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-50)}
.xx-tech-label,.av-insight-label,.mj-artist-role,.mj-location-tag{margin-top:0;margin-bottom:10px;color:var(--rec)}

/* rich cells: a display-face title over a paragraph */
.club-format-n,.mj-artist-name,.mj-location-name,.xx-tech-name,.av-timeline-title{
  font-family:var(--ff-d);font-size:clamp(17px,1.7vw,25px);line-height:1.1;letter-spacing:-.015em;
  color:var(--bone)}
.club-format-t{margin-top:8px;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.club-format-d,.mj-location-desc,.xx-tech-desc,.av-timeline-desc,.av-insight-text{
  margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--bone-50)}

/* the shoot-day timeline reads as a numbered list, not a grid */
.av-timeline{grid-template-columns:1fr;background:none;border:none;border-top:1px solid var(--hair)}
.av-timeline-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(14px,2vw,34px);
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--hair)}
.av-timeline-day{margin-top:0;font-family:var(--ff-d);font-size:clamp(22px,2.4vw,36px);
  letter-spacing:-.02em;color:var(--gold);text-transform:none}
.av-insight{margin-top:var(--s5);padding:clamp(20px,2.2vw,34px);
  border-left:2px solid var(--gold);background:var(--gold-ghost)}

/* the hero stat cell wrapper and the framed player, missed in §39 */
.cs-hero-stat{min-width:0}
.cs-video{margin-top:var(--s5)}

/* the play affordance over an embed */
.play-circle{display:grid;place-items:center;width:clamp(52px,5vw,78px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  transition:transform .5s var(--e-out),background .4s}
.play-circle:hover{transform:scale(1.08);background:var(--gold);color:var(--ink)}

@media (max-width:1080px){
  .av-stat-strip,.lg-stat-strip,.mj-stat-strip,.xx-stat-strip{grid-template-columns:repeat(2,1fr)}
  .hosp-grid,.lg-journey,.mj-artists,.club-format-grid,.xx-variants,
  .mj-location-grid,.xx-tech-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .av-stat-strip,.lg-stat-strip,.mj-stat-strip,.xx-stat-strip{grid-template-columns:1fr}
  .av-timeline-row{grid-template-columns:1fr;gap:8px}
}
.av-timeline-content{min-width:0}

/* ── 41 · COOKIE CONSENT ───────────────────────────────────────────
   GA4 sets cookies, so in the EU it may only load after the visitor agrees.
   The banner is the gate: nothing measuring loads until a choice is made. */
/* bottom-RIGHT: the hero CTAs sit bottom-left, and a consent box must never
   cover the primary button */
.ck{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:9000;width:min(430px,calc(100vw - var(--gutter) * 2));
  background:var(--ink-2);border:1px solid var(--hair);padding:clamp(20px,2.2vw,30px);
  box-shadow:0 24px 70px rgba(0,0,0,.7);opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.ck.on{opacity:1;transform:none}
.ck-h{font-family:var(--ff-m);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s3)}
.ck-t{font-size:13.5px;line-height:1.7;color:var(--bone-50)}
.ck-t a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.ck-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s4)}
.ck-btns .btn{flex:1 1 auto;justify-content:center}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}
/* On a 390px screen the full box swallowed 40% of the viewport and covered
   the hero's own call to action. Compact form: tighter copy, buttons side by
   side, and it clears the fold. */
@media (max-width:560px){
  .ck{left:10px;right:10px;bottom:10px;width:auto;padding:16px 16px 14px}
  .ck-h{margin-bottom:8px}
  .ck-t{font-size:12.5px;line-height:1.55}
  .ck-btns{gap:8px;margin-top:14px}
  .ck-btns .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:9.5px;letter-spacing:.12em}
}

/* ── 42 · LEGAL DOCUMENT ───────────────────────────────────────────
   A privacy notice is read, not admired: one column, generous leading, and
   headings that let someone scan for the section that concerns them. */
.doc{max-width:900px;margin-inline:auto;padding:clamp(40px,5vw,80px) var(--gutter) clamp(56px,7vw,110px)}
.doc h2{font-family:var(--ff-d);font-size:clamp(22px,2.6vw,38px);font-weight:400;line-height:1.05;
  letter-spacing:-.02em;margin:clamp(38px,4.5vw,68px) 0 var(--s4);padding-top:var(--s5);
  border-top:1px solid var(--hair)}
.doc h2:first-of-type{border-top:none;padding-top:0;margin-top:var(--s5)}
.doc h3{font-family:var(--ff-b);font-size:clamp(15px,1.2vw,18px);font-weight:600;color:var(--bone);
  margin:var(--s5) 0 var(--s3)}
.doc p{font-size:15px;line-height:1.82;color:var(--bone-50);margin-bottom:var(--s3);max-width:72ch}
.doc strong{color:var(--bone);font-weight:600}
.doc a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.doc ul{margin:0 0 var(--s4);padding:0;display:grid;gap:10px}
.doc ul li{position:relative;padding-left:22px;font-size:15px;line-height:1.75;color:var(--bone-50);
  max-width:72ch}
.doc ul li::before{content:'';position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--gold)}
.doc-meta{font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34);margin-top:var(--s4)}
.doc-tablewrap{overflow-x:auto;margin:var(--s4) 0 var(--s5);border:1px solid var(--hair)}
.doc table{width:100%;border-collapse:collapse;min-width:560px}
.doc th{background:var(--ink-3);font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);text-align:left;padding:14px 16px;white-space:nowrap}
.doc td{padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--bone-50);
  border-top:1px solid var(--hair);vertical-align:top}
.doc-card{border:1px solid var(--hair);background:var(--ink-2);padding:clamp(20px,2.2vw,32px);
  margin:var(--s4) 0}
.doc-card p:last-child{margin-bottom:0}
/* an unmistakable marker so a draft cannot be published by accident */
.doc-todo{border:1px solid var(--rec);background:rgba(255,59,26,.07);padding:clamp(18px,2vw,28px);
  margin:var(--s4) 0}
.doc-todo b{display:block;font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rec);margin-bottom:10px}
.doc-todo p{color:var(--bone-70);margin-bottom:0}

/* ── 43 · BLOG ARTICLES ────────────────────────────────────────────
   Twenty-four articles, eighty-odd class names — but only a dozen shapes
   repeated under different prefixes. Grouped selectors so the next article
   inherits the look instead of arriving unstyled. */

/* the reading column */
.blog-article,.blog-body,.blog-content,.landing-content,.listicle-body{
  max-width:760px;margin-inline:auto;padding-inline:var(--gutter)}
.blog-body,.blog-content,.landing-content,.listicle-body{padding-bottom:clamp(48px,6vw,90px)}
.blog-body>h2,.blog-content>h2,.landing-content>h2,.listicle-body>h2{
  font-family:var(--ff-d);font-size:clamp(24px,2.9vw,42px);font-weight:400;line-height:1.04;
  letter-spacing:-.022em;color:var(--bone);margin:clamp(40px,4.6vw,72px) 0 var(--s4)}
.blog-body>h3,.blog-content>h3,.landing-content>h3,.listicle-body>h3,
.step-content>h3,.checklist-item>h3{
  font-family:var(--ff-b);font-size:clamp(16px,1.35vw,20px);font-weight:600;color:var(--bone);
  margin:var(--s5) 0 var(--s3);line-height:1.3}
.blog-body>h4,.blog-content>h4,.funnel-card>h4,.funnel-card>h3{font-family:var(--ff-b);font-size:15px;font-weight:600;
  color:var(--bone);margin-bottom:10px}
.blog-body p,.blog-content p,.landing-content p,.listicle-body p,
.step-content p,.checklist-item p,.competitor-card p,.funnel-card p{
  font-size:15.5px;line-height:1.82;color:var(--bone-50);margin-bottom:var(--s3)}
.blog-body strong,.blog-content strong,.landing-content strong,.listicle-body strong{
  color:var(--bone);font-weight:600}
.blog-body a,.blog-content a,.landing-content a,.listicle-body a{
  color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.blog-body ul,.blog-body ol,.blog-content ul,.blog-content ol,
.landing-content ul,.landing-content ol,.listicle-body ul,.listicle-body ol,
.snippet-block ol,.snippet-block ul,.takeaways-box ul,.card-pros ul,.card-cons ul{
  margin:0 0 var(--s4);padding-left:0;list-style:none;display:grid;gap:11px;counter-reset:vsli}
.blog-body li,.blog-content li,.landing-content li,.listicle-body li,
.snippet-block li,.takeaways-box li,.card-pros li,.card-cons li{
  position:relative;padding-left:24px;font-size:15px;line-height:1.72;color:var(--bone-50)}
.blog-body ul>li::before,.blog-content ul>li::before,.landing-content ul>li::before,
.listicle-body ul>li::before,.snippet-block ul>li::before,.takeaways-box li::before,
.card-pros li::before,.card-cons li::before{
  content:'';position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--gold)}
.blog-body ol>li,.blog-content ol>li,.landing-content ol>li,.listicle-body ol>li,
.snippet-block ol>li{padding-left:30px}
.blog-body ol>li::before,.blog-content ol>li::before,.landing-content ol>li::before,
.listicle-body ol>li::before,.snippet-block ol>li::before{
  counter-increment:vsli;content:counter(vsli,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;color:var(--gold)}
.card-cons li::before{background:var(--rec)}

/* article head */
.blog-hero,.blog-post-hero,.listicle-hero{
  padding:calc(var(--nav-h) + clamp(36px,6vh,84px)) var(--gutter) clamp(24px,3vw,44px);
  max-width:900px;margin-inline:auto}
.blog-h1,.listicle-h1,.blog-title{font-family:var(--ff-d);font-size:clamp(30px,4.6vw,68px);
  font-weight:400;line-height:1.02;letter-spacing:-.025em;color:var(--bone)}
.blog-meta,.blog-meta-row,.listicle-meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3);margin-top:var(--s4);font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-34)}
.blog-cat,.blog-category,.rank-badge,.updated-badge,.card-tag,.f-level,.comparison-label,
.table-label,.snippet-label,.cta-label,.price-range-tag{
  display:inline-block;font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.blog-cat,.blog-category,.rank-badge,.updated-badge{
  border:1px solid var(--gold-dim);background:var(--gold-ghost);padding:5px 11px}
.blog-readtime{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34)}
.blog-intro,.blog-lead,.listicle-intro{font-size:clamp(16px,1.35vw,19px);line-height:1.7;
  color:var(--bone-70);margin-top:var(--s4);max-width:64ch}

/* callouts — a gold rail on the left, so they read as an aside, not a heading */
.blog-summary-box,.takeaways-box,.context-box,.snippet-block,.vs-answer-box,
.warning-box,.tip-box,.updated-note,.ci-red-flag{
  margin:var(--s5) 0;padding:clamp(18px,2.1vw,30px);border-left:2px solid var(--gold);
  background:var(--gold-ghost)}
.warning-box,.ci-red-flag{border-left-color:var(--rec);background:rgba(255,59,26,.06)}
.blog-summary-box p,.takeaways-box p,.context-box p,.snippet-block p,.vs-answer-box p,
.warning-box p,.tip-box p,.updated-note p,.ci-red-flag{
  font-size:14.5px;line-height:1.75;color:var(--bone-70);margin-bottom:0}
.blog-summary-box p+p,.snippet-block p+p{margin-top:var(--s3)}
.snippet-label{display:block;margin-bottom:var(--s3)}
.ci-red-flag{font-size:13.5px;line-height:1.7;color:var(--bone-70)}

/* tables */
.blog-table-wrap,.summary-table-wrap{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--hair)}
.blog-table,.summary-table{width:100%;border-collapse:collapse;min-width:520px}
.blog-table th,.summary-table th{background:var(--ink-3);font-family:var(--ff-m);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:left;padding:14px 16px;
  white-space:nowrap}
.blog-table td,.summary-table td{padding:14px 16px;font-size:13.5px;line-height:1.6;
  color:var(--bone-50);border-top:1px solid var(--hair);vertical-align:top}
.blog-table tr:hover td,.summary-table tr:hover td{background:var(--ink-2);color:var(--bone-70)}
.vs-row.is-vs td,.vs-row.is-vs{background:var(--gold-ghost)}

/* figures */
.blog-img{margin:var(--s5) 0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--hair)}
.blog-img-inner{width:100%;height:100%}
.blog-img img{width:100%;height:100%;object-fit:cover}

/* in-article contents */
.blog-toc{margin:var(--s5) 0;padding:clamp(20px,2.2vw,32px);border:1px solid var(--hair);
  background:var(--ink-2)}
.blog-toc a{color:var(--bone-70);border-bottom:none}
.blog-toc a:hover{color:var(--gold)}

/* numbered rows — steps, checklist items, roi layers */
.step-block,.checklist-item,.roi-layer{display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:clamp(14px,2vw,28px);padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid var(--hair)}
/* single column, so the grid gap would stack on top of each child's own
   margin and leave a hole under the number */
.checklist-item{grid-template-columns:1fr;gap:0}
.step-num,.ci-num,.roi-layer-num{font-family:var(--ff-d);font-size:clamp(24px,2.6vw,40px);
  line-height:1;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.ci-num{display:block;margin-bottom:var(--s3)}
.step-content>*:last-child,.roi-layer>div>*:last-child{margin-bottom:0}
.roi-layer-title{font-family:var(--ff-b);font-size:16px;font-weight:600;color:var(--bone);
  margin-bottom:8px}
.roi-layer-desc{font-size:14px;line-height:1.72;color:var(--bone-50)}

/* card grids */
.funnel-block,.roi-layers,.tech-stack,.proof-bar{display:grid;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin:var(--s5) 0;grid-template-columns:repeat(3,1fr)}
.roi-layers{grid-template-columns:1fr;background:none;border:none;gap:0}
.funnel-card,.tech-card,.proof-stat{background:var(--ink-2);padding:clamp(20px,2.2vw,32px);
  transition:background .45s var(--e-out)}
.funnel-card:hover,.tech-card:hover,.proof-stat:hover{background:var(--ink-3)}
.f-level{margin-bottom:var(--s3)}
.proof-stat{text-align:center;font-family:var(--ff-d);font-size:clamp(18px,2vw,28px);
  letter-spacing:-.02em;color:var(--gold)}

.competitor-card{border:1px solid var(--hair);background:var(--ink-2);
  padding:clamp(20px,2.4vw,34px);margin:var(--s4) 0;transition:background .45s var(--e-out)}
.competitor-card:hover{background:var(--ink-3)}
.card-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3)}
.card-name{font-family:var(--ff-d);font-size:clamp(19px,1.9vw,27px);line-height:1.1;
  letter-spacing:-.018em;color:var(--bone)}
.price-range-tag{display:block;margin-bottom:var(--s3);color:var(--bone-50)}
.card-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:var(--s4)}
.card-pros,.card-cons{background:var(--ink);padding:clamp(16px,1.8vw,24px)}
.card-pros li,.card-cons li{font-size:13.5px;line-height:1.6}

/* byline */
.author-block{display:flex;align-items:flex-start;gap:var(--s4);margin:var(--s6) 0 0;
  padding-top:var(--s5);border-top:1px solid var(--hair)}
.author-icon,.author-avatar{flex:none;width:48px;height:48px;border:1px solid var(--gold-dim);
  border-radius:50%;background:var(--gold-ghost);display:grid;place-items:center}
.author-info{font-size:13.5px;line-height:1.75;color:var(--bone-50)}
.author-info strong{display:block;font-family:var(--ff-b);font-size:15px;color:var(--bone);
  margin-bottom:6px}
.author-info a{color:var(--gold)}
.stars{color:var(--gold);letter-spacing:.16em}

/* in-article and closing calls to action */
.inline-cta,.cta-section,.cta-band{margin:var(--s6) 0;padding:clamp(24px,3vw,48px);
  border:1px solid var(--gold-dim);background:var(--gold-ghost);text-align:center;
  position:relative;overflow:hidden}
.cta-bg-word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-d);
  font-size:clamp(70px,13vw,190px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(232,197,106,.08);pointer-events:none;white-space:nowrap}
.inline-cta>*,.cta-section>*,.cta-band>*{position:relative;z-index:2}
.cta-title{font-family:var(--ff-d);font-size:clamp(23px,3vw,44px);font-weight:400;line-height:1.05;
  letter-spacing:-.022em;color:var(--bone);margin-bottom:var(--s3)}
.cta-title em{font-style:italic;color:var(--gold)}
.cta-sub{font-size:15px;line-height:1.7;color:var(--bone-50);max-width:56ch;margin-inline:auto}
.cta-label{display:block;margin-bottom:var(--s3)}
.cta-links,.cta-btns{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;
  margin-top:var(--s4)}

/* the article-local button variants */
.btn-primary,.btn-secondary,.btn-outline{display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--gold);transition:background .4s var(--e-out),color .4s var(--e-out);
  border-bottom-width:1px!important}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-2,#F0D48A)}
.btn-secondary,.btn-outline{background:transparent;color:var(--gold)}
.btn-secondary:hover,.btn-outline:hover{background:var(--gold);color:var(--ink)}
.blog-body .btn-primary,.blog-content .btn-primary,.landing-content .btn-primary,
.listicle-body .btn-primary{color:var(--ink)}

@media (max-width:760px){
  .funnel-block,.tech-stack,.proof-bar{grid-template-columns:1fr}
  .card-pros-cons{grid-template-columns:1fr}
  .step-block,.roi-layer{grid-template-columns:1fr;gap:10px}
  .card-header{flex-direction:column;gap:8px}
}

/* ── 44 · REMAINING PAGE COMPONENTS ────────────────────────────────
   Industries, service pages, the case study, the city landings, about, 404
   and the thank-you page. A hundred-odd class names, but the same three
   shapes as everywhere else: a lattice grid, a cell, and a number over a
   title over a description. Grouped so a new page inherits the look. */

/* ── grids ─────────────────────────────────────────────────────── */
.ind-grid,.value-grid,.hub-grid,.result-grid,.en-proj-grid,.feat-grid,
.metrics-row,.stats-row,.en-stat-row{
  display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  margin:var(--s5) 0;grid-template-columns:repeat(3,1fr)}
.metrics-row,.stats-row,.en-stat-row{grid-template-columns:repeat(4,1fr)}
.feat-grid,.en-proj-grid{grid-template-columns:repeat(2,1fr)}
.value-grid{grid-template-columns:repeat(2,1fr)}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s4) 0}

/* ── cells ─────────────────────────────────────────────────────── */
.ind-card,.value-box,.hub-card,.result-card,.en-proj-card,.feat-box,
.metric-cell,.en-stat{
  position:relative;display:block;overflow:hidden;background:var(--ink-2);
  padding:clamp(20px,2.4vw,36px);transition:background .45s var(--e-out)}
.ind-card:hover,.value-box:hover,.hub-card:hover,.result-card:hover,
.en-proj-card:hover,.feat-box:hover,.metric-cell:hover,.en-stat:hover{background:var(--ink-3)}
.metric-cell,.en-stat{text-align:center}

/* the four edge rules a card draws on itself when hovered */
.bd-t,.bd-r,.bd-b,.bd-l{position:absolute;background:var(--gold);z-index:2;
  transition:transform .55s var(--e-out)}
.bd-t,.bd-b{left:0;width:100%;height:1px;transform:scaleX(0)}
.bd-l,.bd-r{top:0;width:1px;height:100%;transform:scaleY(0)}
.bd-t{top:0;transform-origin:left}
.bd-b{bottom:0;transform-origin:right}
.bd-l{left:0;transform-origin:bottom}
.bd-r{right:0;transform-origin:top}
.ind-card:hover .bd-t,.ind-card:hover .bd-b{transform:scaleX(1)}
.ind-card:hover .bd-l,.ind-card:hover .bd-r{transform:scaleY(1)}

/* ── the number / title / description stack ────────────────────── */
.value-n,.result-num,.m-n,.en-stat-n,.ps-num{
  font-family:var(--ff-d);font-size:clamp(24px,3vw,46px);line-height:1;letter-spacing:-.025em;
  color:var(--gold);font-variant-numeric:tabular-nums}
.ind-ghost-num{position:absolute;right:14px;top:6px;z-index:0;font-family:var(--ff-d);
  font-size:clamp(56px,7vw,110px);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(232,197,106,.13);pointer-events:none}
.ind-card>*:not(.bd-t):not(.bd-r):not(.bd-b):not(.bd-l):not(.ind-ghost-num){position:relative;z-index:1}
.ind-tag,.case-eyebrow,.en-eyebrow,.vsm-tag,.err-label,.ty-divider{
  font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.value-t,.hub-card-title,.feat-box-t,.ind-title,.proc-list-title{
  font-family:var(--ff-d);font-size:clamp(18px,1.9vw,27px);line-height:1.1;letter-spacing:-.018em;
  color:var(--bone);margin:var(--s3) 0 10px}
.value-d,.hub-card-text,.result-desc,.feat-box-d,.ind-desc,.proc-list-desc,
.m-l,.en-stat-l{font-size:13.5px;line-height:1.7;color:var(--bone-50)}
.m-l,.en-stat-l{margin-top:10px;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase}
.ind-icon,.hub-card-icon{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.2;
  margin-bottom:var(--s3)}
.ind-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── section headings shared by the landings ───────────────────── */
.sec-title,.about-values-title,.lc-h2,.en-h1,.case-h1{
  font-family:var(--ff-d);font-weight:400;line-height:1.02;letter-spacing:-.022em;color:var(--bone)}
.sec-title,.about-values-title,.lc-h2{font-size:clamp(24px,3.2vw,48px);margin-bottom:var(--s4)}
.en-h1,.case-h1{font-size:clamp(30px,5vw,78px);line-height:.98;letter-spacing:-.028em}
.sec-title em,.lc-h2 em,.en-h1 em,.case-h1 em,.err-title em,.ty-heading em{
  font-style:italic;color:var(--gold)}
.lc-p,.en-sub,.case-subtitle{font-size:clamp(15px,1.2vw,17.5px);line-height:1.78;
  color:var(--bone-50);max-width:68ch;margin-bottom:var(--s3)}
.lc-ul{display:grid;gap:11px;margin:var(--s4) 0;padding:0;list-style:none}
.lc-ul li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:var(--bone-50)}
.lc-ul li::before{content:'';position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--gold)}
.en-div{height:1px;background:var(--hair);margin:var(--s5) 0}

/* ── page shells ───────────────────────────────────────────────── */
.landing-hero,.case-hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(40px,7vh,96px)) var(--gutter) clamp(30px,4vw,56px);
  max-width:var(--maxw);margin-inline:auto}
.landing-body,.case-body,.about-body{max-width:860px;margin-inline:auto;
  padding:clamp(36px,4.5vw,72px) var(--gutter)}
.landing-art,.showcase-wrap,.about-visual{margin:var(--s5) 0}
.about-frame{position:relative;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/5}
.about-frame img{width:100%;height:100%;object-fit:cover}
.about-accent{position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(36px,4.5vw,72px) var(--gutter)}
.about-quote{font-family:var(--ff-d);font-size:clamp(20px,2.4vw,34px);font-style:italic;
  line-height:1.3;letter-spacing:-.015em;color:var(--bone);margin:var(--s5) 0;
  padding-left:var(--s4);border-left:2px solid var(--gold)}
.about-email{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.stat-divider{width:1px;background:var(--hair)}
.faq-list{display:block}
.reel-cur,.reel-total{font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;color:var(--bone-50)}

/* ── boxes and pull quotes ─────────────────────────────────────── */
.info-box,.quote-block,.cta-inline{margin:var(--s5) 0;padding:clamp(18px,2.1vw,30px);
  border-left:2px solid var(--gold);background:var(--gold-ghost)}
.info-box.green{border-left-color:#7FBF7F;background:rgba(127,191,127,.07)}
.info-box p,.cta-inline p{font-size:14.5px;line-height:1.75;color:var(--bone-70);margin-bottom:0}
.quote-block p{font-family:var(--ff-d);font-size:clamp(19px,2.2vw,32px);font-style:italic;
  line-height:1.32;letter-spacing:-.015em;color:var(--bone);margin-bottom:0}
.process-step,.proc-list-item{display:grid;grid-template-columns:60px minmax(0,1fr);
  gap:clamp(14px,2vw,28px);padding:clamp(18px,2.2vw,30px) 0;border-top:1px solid var(--hair)}
.proc-list{display:block;margin:var(--s5) 0}
.ps-content>*:last-child{margin-bottom:0}

/* ── the framed video showcase on the city landings ────────────── */
.vid-showcase{margin:var(--s5) 0}
.vid-showcase-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;
  border:1px solid var(--hair)}
.vid-showcase-screen{position:absolute;inset:0}
.vid-showcase-screen img,.vid-showcase-screen iframe{width:100%;height:100%;object-fit:cover;border:0}
.vid-showcase-bars{position:absolute;inset:0;z-index:2;pointer-events:none}
.vid-bar{position:absolute;left:0;width:100%;height:clamp(14px,2.2vw,30px);background:#000;
  transition:transform .9s var(--e-out)}
.vid-bar--t{top:0}
.vid-bar--b{bottom:0}
.vid-showcase-frame:hover .vid-bar--t{transform:translateY(-100%)}
.vid-showcase-frame:hover .vid-bar--b{transform:translateY(100%)}
.vid-showcase-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:12px 0;border-bottom:1px solid var(--hair)}
.vsm-dur{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-34)}
.en-proj-overlay{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.9) 100%)}
.en-proj-tag{position:relative;z-index:3;font-family:var(--ff-m);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.en-proj-name{position:relative;z-index:3;font-family:var(--ff-d);font-size:clamp(17px,1.8vw,25px);
  line-height:1.1;color:var(--bone);margin-top:8px}
.en-form-wrap{border:1px solid var(--hair);background:var(--ink-2);
  padding:clamp(22px,2.8vw,44px);margin:var(--s5) 0}

/* ── 404 ───────────────────────────────────────────────────────── */
.err-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,72px);
  align-items:center;min-height:72vh;max-width:1100px;margin-inline:auto;
  padding:calc(var(--nav-h) + var(--s6)) var(--gutter) var(--s7)}
.err-num{font-family:var(--ff-d);font-size:clamp(90px,15vw,240px);line-height:.85;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(232,197,106,.28)}
.err-title{font-family:var(--ff-d);font-size:clamp(30px,4.6vw,68px);font-weight:400;line-height:1;
  letter-spacing:-.025em;color:var(--bone);margin:var(--s3) 0}
.err-sub{font-size:15.5px;line-height:1.78;color:var(--bone-50);max-width:52ch}
.err-actions,.ty-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.err-btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  border:1px solid var(--hair);font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);transition:border-color .4s,color .4s}
.err-btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.err-links{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--hair);font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase}
.err-links a{color:var(--bone-50)}
.err-links a:hover{color:var(--gold)}

/* ── thank-you ─────────────────────────────────────────────────── */
.ty-section{min-height:76vh;display:grid;place-items:center;
  padding:calc(var(--nav-h) + var(--s6)) var(--gutter) var(--s7)}
.ty-inner{max-width:620px;text-align:center}
.ty-icon{width:66px;height:66px;margin:0 auto var(--s4);display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:50%;color:var(--gold)}
.ty-heading{font-family:var(--ff-d);font-size:clamp(28px,4.2vw,60px);font-weight:400;line-height:1.02;
  letter-spacing:-.025em;color:var(--bone);margin-bottom:var(--s4)}
.ty-divider{display:block;margin-bottom:var(--s3)}
.ty-sub{font-size:15.5px;line-height:1.78;color:var(--bone-50)}
.ty-actions{justify-content:center}

@media (max-width:1080px){
  .ind-grid,.value-grid,.hub-grid,.result-grid{grid-template-columns:repeat(2,1fr)}
  .metrics-row,.stats-row,.en-stat-row{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ind-grid,.value-grid,.hub-grid,.result-grid,.feat-grid,.en-proj-grid,
  .metrics-row,.stats-row,.en-stat-row{grid-template-columns:1fr}
  .err-wrap{grid-template-columns:1fr;gap:var(--s4);min-height:0}
  .process-step,.proc-list-item{grid-template-columns:1fr;gap:8px}
}
.err-content{min-width:0}

/* ── 45 · LEGACY INLINE GRIDS ON SMALL SCREENS ────────────────────
   Some migrated pages hard-code their column counts in a style attribute,
   which no class rule can beat — a four-column stat strip then forced the
   page 110px wider than a phone. Matching on the attribute is ugly, but it
   is the only lever that reaches an inline value, and it survives a rebuild
   of the page (editing the markup would not). */
@media (max-width:680px){
  .legacy-tok [style*="repeat(4,1fr)"],
  .legacy-tok [style*="repeat(3,1fr)"],
  .legacy-tok [style*="1fr 1fr 1fr"]{grid-template-columns:1fr!important}
}
@media (max-width:480px){
  .legacy-tok [style*="repeat(2,1fr)"],
  .legacy-tok [style*="1fr 1fr"]:not([style*="1fr 1fr 1fr"]){grid-template-columns:1fr!important}
}

/* A grid item's default min-width:auto refuses to shrink below its content's
   minimum — and .blog-table carries min-width:520px. The scrolling wrapper
   around the table was therefore stretching its whole column instead of
   scrolling inside it, pushing two articles 150px wider than a phone. */
.step-block,.step-content,.checklist-item,.roi-layer,.roi-layer>div,
.process-step,.ps-content,.proc-list-item,.cs-phase,.competitor-card{min-width:0}

/* ── 46 · MOBILE ERGONOMICS ────────────────────────────────────────
   Measured on a 390px handset: the drawer links were 33px tall, the logo
   22px and breadcrumb links 14px — all below a comfortable thumb. And the
   mono labels, a deliberate 8–9px editorial device on desktop, are simply
   unreadable at arm's length. Both fixed here, at touch widths only, so the
   desktop typography is untouched. */
@media (hover: none), (pointer: coarse) {
  /* every link the thumb actually aims at gets a 44px box */
  #drawer a:not(.btn){padding-block:11px}
  .nav-logo{min-height:44px}
  .crumb a,.breadcrumb a{display:inline-block;padding-block:11px;margin-block:-11px}
  .ft-links a,.err-links a,.doc a{padding-block:4px}

  /* the smallest type on the page, lifted to a readable floor */
  .mono,.slug span,.slug em,.post-meta,.c-meta,.idx-c,.marq-head .mono,
  .cs-hero-stat-l,.cs-result-l,.m-l,.en-stat-l,.svc-price-note,.svc-price-label,
  .ct-label,.doc-meta,.blog-readtime,.vsm-dur,.ci-num,.f-level{font-size:10.5px!important}
  .sec-label-txt,.slug span,.ind-tag,.case-eyebrow,.en-eyebrow,.snippet-label,
  .cta-label,.card-tag,.price-range-tag,.table-label,.comparison-label{font-size:10px!important}
  /* wide tracking at 10px costs more width than it earns */
  .slug span,.sec-label-txt,.ind-tag,.cta-label{letter-spacing:.18em}
}

/* ── 47 · MOBILE TYPE FLOOR ────────────────────────────────────────
   Generated from every rule in this file that sets type below 10.5px. The
   micro-mono labels are the site's signature on desktop, but at arm's length
   on a handset they are simply not readable. Two tiers so the hierarchy
   between an 8px tag and a 10px label survives the lift. */
@media (hover: none), (pointer: coarse){
.reel-card .rc-cat,
.cap-tag,
.modal-foot .mf-l,
.pill .num,
.card .c-meta,
.card .c-tag,
#peek .peek-tag,
.idx-y .c-case,
.srv-tags span,
.bl-tc-badge,
.bl-card-cat,
.bl-card-rt,
.bl-il i,
.bl-rc-cat,
.svc-price-label,
.ct-label,
.cs-hero-stat-l,
.cs-section-label,
.cs-phase-n,
.cs-result-l,
.club-format-t,
.ck-h,
.doc th,
.doc-todo b,
.blog-cat,.blog-category,.rank-badge,.updated-badge,.card-tag,.f-level,.comparison-label, .table-label,.snippet-label,.cta-label,.price-range-tag,
.blog-table th,.summary-table th,
.ind-tag,.case-eyebrow,.en-eyebrow,.vsm-tag,.err-label,.ty-divider,
.m-l,.en-stat-l,
.vsm-dur,
.en-proj-tag{font-size:10px}
#hud .tc,
#cur-r .cur-lbl,
#loader .ld-sub,
#loader .ld-pct,
.stage-cap,
.hero-eyebrow .rec,
.hero-eyebrow .meta,
.hero-note,
.hero-kpi span,
.hero-cue,
.reel-card .rc-client,
.reel-card .rc-meta,
.proc-step .pn,
.screen .sc-tag,
.res span,
.spec-l,
.post .p-cat,
.post .p-meta,
.diff-h,
.f-field label,
.f-help,
.f-err,
.f-checks span,
.ft-h,
.ft-bot p,.ft-bot a,
.modal-tag,
.pill,
.vcount,
.vtoggle button,
.card .c-client,
.idx-c,
.srv-go,
.srv-step-n,
.bl-kw a,
.bl-upd,
.bl-map-n,
.bl-fb,
.bl-feat-super,
.bl-feat-meta,
.bl-tc-cat,
.bl-tc-foot,
.bl-card-foot,
.bl-ilink-l,
.bl-icta .lbl,
.bl-lm-l,
.bl-band-l,
.bl-rc-r,
.post-meta,
.post-toc-l,
.post-content ol li::before,
.post-content th,
.sec-label-txt,
.form-label,
.pricing-note-inline,
.svc-index,
.svc-price-note,
.ct-req,
.cs-hero-client,
.doc-meta,
.blog-body ol>li::before,.blog-content ol>li::before,.landing-content ol>li::before, .listicle-body ol>li::before,.snippet-block ol>li::before,
.blog-meta,.blog-meta-row,.listicle-meta,
.blog-readtime,
.ind-link,
.reel-cur,.reel-total,
.err-btn-ghost,
.err-links{font-size:10.5px}
  /* footer links and table heads are read and tapped, not decoration */
  .ft-links a{display:inline-block;padding-block:9px}
  th,.form-label{font-size:10.5px}
}

/* ── 48 · INLINE MICRO-TYPE ON TOUCH ───────────────────────────────
   614 style attributes in the migrated markup hard-code 8px and 9px labels.
   An inline value beats every class rule, so §47 could not reach them — the
   attribute selector is the only lever, and it survives a page rebuild. */
@media (hover: none), (pointer: coarse){
  [style*="font-size:8px"]{font-size:10px!important}
  [style*="font-size:9px"]{font-size:10.5px!important}
}

/* ── 49 · TUNNEL LEGIBILITY ON SMALL SCREENS ───────────────────────
   On a phone the flying screens crowd the middle of the viewport and the
   headline sits straight on top of them — a text-shadow alone was not
   holding it. A soft radial well behind the copy separates the two planes
   without hiding the artwork. */
@media (max-width: 860px){
  .tunnel-mid::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:150%;aspect-ratio:1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 42%,transparent 76%)}
  .tunnel-mid .inner{position:relative}
  .tunnel-mid .inner h2{font-size:clamp(27px,7.4vw,44px);line-height:1.04}
  .tunnel-mid .inner .lede{font-size:14px;line-height:1.6;max-width:32ch;margin-inline:auto}
}

/* ── 50 · CARD LEGIBILITY ON A PHONE ───────────────────────────────
   A mobile card is ~230px tall, so the desktop veil's dark zone gets
   compressed into almost nothing and the title lands on raw artwork.
   Deeper, earlier gradient — the image still reads, the words win. */
@media (max-width: 860px){
  .card .c-veil,.reel-card .rc-veil{
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 30%,
      rgba(0,0,0,.82) 66%,rgba(0,0,0,.96) 100%)}
  .card .c-title{font-size:clamp(18px,4.8vw,24px);line-height:1.06}
  .card .c-body{padding:16px}
  .card .c-tag{top:12px;left:12px}
  /* the case-study link needs to look tappable, not like a caption */
  .card .c-case{display:inline-block;margin-top:8px;padding:11px 0}
}

/* the drawer's lower half was dead space; on a phone that is the most
   valuable real estate on the site — a thumb is one tap from calling */
.drawer-contact{margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--hair);
  display:grid;gap:2px}
#drawer .drawer-contact a{display:block;padding:12px 0;font-family:var(--ff-b);font-size:15px;
  color:var(--bone-70);transition:color .3s}
#drawer .drawer-contact a:hover{color:var(--gold)}
#drawer .drawer-contact a i{display:block;font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;font-style:normal;color:var(--bone-34);margin-bottom:4px}

/* ── 51 · FOOTER TOUCH TARGETS ─────────────────────────────────────
   The last small controls on the site, all in the footer: the email and
   phone lines were 23px tall and the legal row 17px — the two places a
   phone user is most likely to reach for. */
@media (hover: none), (pointer: coarse){
  .ft-c a,.ft-bot a,.ft-bot p a{display:inline-block;padding-block:11px;margin-block:-6px}
  .ft-links a{padding-inline-end:8px}
}

/* ── 52 · INLINE-STYLED MICRO LINKS ────────────────────────────────
   The migrated articles carry standalone "Esettanulmány →" / "Részletek →"
   links whose size lives in a style attribute, so they measured 18px tall.
   §48 already lifts their type; this gives the thumb something to hit. */
@media (hover: none), (pointer: coarse){
  a[style*="font-size:9px"],a[style*="font-size:8px"],a[style*="font-size:10px"]{
    display:inline-block;padding-block:10px}
  .err-links a{padding-block:10px}
  .arak-sticky-cta-close{width:40px;height:40px}
}

/* Any standalone link the migrated markup sizes with a style attribute gets a
   thumb-sized box; links sitting inside a sentence are put back to inline, so
   the line rhythm of the prose is never touched. */
@media (hover: none), (pointer: coarse){
  .legacy-tok a[style]{display:inline-block;padding-block:10px}
  .legacy-tok p a[style],.legacy-tok li a[style],.legacy-tok td a[style],
  .legacy-tok h1 a[style],.legacy-tok h2 a[style],.legacy-tok h3 a[style]{
    display:inline;padding-block:0}
  .ct-value{display:inline-block;padding-block:9px;margin-block:-5px}
}
@media (hover: none), (pointer: coarse){
  /* the two remaining flat links: the hero's scroll cue and a landing-page
     inline anchor that carries no style attribute for §52 to catch */
  .hero-cue,.landing-body a:not([class]):not([style]){display:inline-block;padding-block:10px}
}

/* ── 53 · LANGUAGE SWITCHER ────────────────────────────────────────
   The English section is a smaller, separate site, not a translation layer,
   so the switch sits in the nav rather than per-page. The current language is
   a span, not a link — there is nowhere to go — and it carries the gold fill
   so the pair reads as one control with a state, not as two links.

   It stays visible at every width. The drawer still carries a written
   "English site" / "Magyar oldal" row, but a visitor should never have to open
   a menu to find out the site exists in their language. */
.nav-lang{display:inline-flex;align-items:stretch;flex:none;
  margin-right:var(--s3);border:1px solid var(--hair-2);background:var(--ink-2);
  font-family:var(--ff-m);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1}
.nav-lang a,.nav-lang span{display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:38px;padding:0 12px;
  transition:background .35s var(--e-out),color .35s var(--e-out)}
.nav-lang > * + *{border-left:1px solid var(--hair-2)}
.nav-lang a{color:var(--bone-50);background:transparent}
.nav-lang a:hover,.nav-lang a:focus-visible{color:var(--gold);background:var(--gold-ghost)}
.nav-lang span[aria-current]{color:var(--ink);background:var(--gold);font-weight:700}

@media (hover:none),(pointer:coarse){
  .nav-lang a,.nav-lang span{min-width:50px;min-height:44px}
}
@media (max-width:860px){
  .nav-lang{font-size:11px;margin-right:10px}
  .nav-lang a,.nav-lang span{min-width:44px;min-height:40px;padding:0 9px}
}

/* The drawer row is the written version of the same switch — on a phone it is
   what a reader scanning the menu actually notices. */
.drawer-contact a[hreflang]{color:var(--gold)}
.drawer-contact a[hreflang] i{color:var(--gold-dim)}

/* ── 54 · ENGLISH SECTION ──────────────────────────────────────────
   The English site is smaller and flatter than the Hungarian one — six pages
   aimed at international brands, agencies and producers shooting in Hungary.
   Its markup uses its own short prefixes (en-, w-, fw-, wc-, fig-, ty-), but
   underneath they are the same three shapes this stylesheet already speaks:
   a lattice grid, a cell, and a number over a title over a description. */

/* ── page shells ───────────────────────────────────────────────── */
.en-hero,.w-hero,.ty-wrap{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(44px,7vh,104px)) 0 clamp(30px,4vw,60px)}
.en-inner,.w-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.en-sec,.w-sec{padding-block:clamp(48px,6vw,104px);border-top:1px solid var(--hair)}
.en-sec-alt,.w-sec-alt{background:var(--ink-2)}
.en-body{padding-block:clamp(40px,5vw,80px)}
.en-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}

/* ── type ──────────────────────────────────────────────────────── */
.en-h1,.w-h1,.ty-h1{font-family:var(--ff-d);font-size:clamp(34px,6.2vw,104px);font-weight:400;
  line-height:.97;letter-spacing:-.025em;color:var(--bone);max-width:17ch}
.en-h2,.w-h2{font-family:var(--ff-d);font-size:clamp(26px,3.6vw,58px);font-weight:400;
  line-height:1;letter-spacing:-.022em;color:var(--bone);margin-bottom:var(--s4)}
.en-h1 em,.w-h1 em,.en-h2 em,.w-h2 em,.ty-h1 em{font-style:italic;color:var(--gold)}
.en-lead,.w-lead,.ty-p{font-size:clamp(15px,1.35vw,19px);line-height:1.72;color:var(--bone-70);
  max-width:66ch;margin-top:var(--s4)}
.en-p,.w-p{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.82;color:var(--bone-50);
  max-width:70ch;margin-bottom:var(--s3)}
.en-p strong,.w-p strong{color:var(--bone);font-weight:600}
.en-note{margin:var(--s5) 0;padding:clamp(18px,2.1vw,30px);border-left:2px solid var(--gold);
  background:var(--gold-ghost);font-size:14.5px;line-height:1.75;color:var(--bone-70)}
.step-t{font-family:var(--ff-d);font-size:clamp(18px,1.9vw,26px);line-height:1.1;color:var(--bone);
  margin-bottom:10px}
.step-d{font-size:14px;line-height:1.7;color:var(--bone-50)}

/* ── grids ─────────────────────────────────────────────────────── */
.en-stats,.fig-grid,.en-grid,.fw-grid,.w-grid,.feat-metrics,.lg-wrap{
  display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:var(--s5)}
.en-stats,.fig-grid,.feat-metrics{grid-template-columns:repeat(4,1fr)}
.en-grid,.fw-grid,.w-grid{grid-template-columns:repeat(3,1fr)}
.lg-wrap{grid-template-columns:repeat(6,1fr);margin-top:var(--s4)}

/* ── stat cells ────────────────────────────────────────────────── */
.fig,.fm{background:var(--ink-2);padding:clamp(20px,2.4vw,38px);text-align:center;
  transition:background .45s var(--e-out)}
.fig:hover,.fm:hover{background:var(--ink-3)}
.fig-n,.fm-n{font-family:var(--ff-d);font-size:clamp(26px,3.4vw,52px);line-height:1;
  letter-spacing:-.03em;color:var(--gold);font-variant-numeric:tabular-nums}
.fig-l,.fm-l{margin-top:12px;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.7;color:var(--bone-50)}

/* ── link cards ────────────────────────────────────────────────── */
.en-card{position:relative;display:block;background:var(--ink-2);overflow:hidden;
  padding:clamp(22px,2.6vw,40px);transition:background .45s var(--e-out)}
.en-card:hover{background:var(--ink-3)}
.en-card::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);
  transition:width .55s var(--e-out)}
.en-card:hover::after{width:100%}
.en-card-l,.feat-l{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rec)}
.en-card-t,.feat-t{font-family:var(--ff-d);font-size:clamp(20px,2.1vw,30px);line-height:1.05;
  letter-spacing:-.018em;color:var(--bone);margin:var(--s3) 0 10px}
.en-card-d,.feat-d{font-size:13.5px;line-height:1.7;color:var(--bone-50)}
.en-card-a{display:inline-block;margin-top:var(--s4);font-family:var(--ff-m);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── work cards ────────────────────────────────────────────────── */
.wc,.fw{position:relative;display:block;overflow:hidden;background:var(--ink-3);
  aspect-ratio:4/3;cursor:pointer}
.wc-media,.fw-media{position:absolute;inset:0}
.wc-media img,.fw img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--e-out),filter .8s;filter:saturate(.66) contrast(1.06)}
.wc:hover .wc-media img,.fw:hover img{transform:scale(1.07);filter:saturate(1) contrast(1)}
.wc::after,.fw-ov{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,.9) 100%)}
.wc-body{position:absolute;left:0;bottom:0;width:100%;z-index:2;padding:clamp(16px,1.9vw,26px)}
.wc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.wc-tag,.fw-tag{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
.wc-meta{font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;color:var(--bone-34)}
.wc-t,.fw-t{font-family:var(--ff-d);font-size:clamp(17px,1.8vw,25px);line-height:1.06;
  letter-spacing:-.018em;color:var(--bone)}
.wc-client{margin-top:6px;font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-50)}
.fw-tag,.fw-t{position:relative;z-index:2}
.fw{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.9vw,26px)}

/* the play affordance over a still */
.play-btn{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  width:clamp(46px,4.4vw,64px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  color:var(--bone);transition:transform .5s var(--e-out),background .4s,border-color .4s}
.wc:hover .play-btn,.fw:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);
  background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ── client logos ──────────────────────────────────────────────── */
.lg{background:var(--ink);display:grid;place-items:center;padding:clamp(16px,2vw,28px);
  min-height:84px}
.lg img{max-width:100%;max-height:34px;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.5;transition:opacity .4s,transform .5s var(--e-out)}
.lg:hover img{opacity:1;transform:scale(1.07)}

/* ── full-width image band ─────────────────────────────────────── */
.imgband{position:relative;overflow:hidden;border:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:clamp(300px,30vw,440px)}
.imgband-media{background-size:cover;background-position:center;min-height:clamp(240px,28vw,400px)}
/* A portrait photograph of people in a wide band: centre lands on their chests.
   Pull the crop up to where the faces are. */
.imgband-media--faces{background-position:50% 26%}
.imgband-body{padding:clamp(22px,2.8vw,44px);display:flex;flex-direction:column;
  justify-content:center;background:var(--ink-2)}

/* ── contact page ──────────────────────────────────────────────── */
.ct-wrap{max-width:var(--maxw);margin-inline:auto;
  padding:clamp(36px,4.5vw,72px) var(--gutter)}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.ct-side-item{padding:clamp(16px,1.9vw,24px);border:1px solid var(--hair);background:var(--ink-2);
  margin-bottom:1px;transition:background .4s var(--e-out)}
.ct-side-item:hover{background:var(--ink-3)}
.ct-side-l{font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone-34);margin-bottom:8px}
.ct-side-v{font-family:var(--ff-d);font-size:clamp(16px,1.5vw,22px);line-height:1.25;color:var(--bone)}
a.ct-side-v:hover{color:var(--gold)}

/* ── odds and ends ─────────────────────────────────────────────── */
.en-cta,.w-cta{margin-top:var(--s6);padding:clamp(26px,3.2vw,52px);text-align:center;
  border:1px solid var(--gold-dim);background:var(--gold-ghost)}
.en-faq-q{font-family:var(--ff-b);font-size:clamp(15px,1.25vw,18px);font-weight:600;color:var(--bone);
  margin:var(--s5) 0 10px}
.fbtn,.w-filter button{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;padding:11px 18px;border:1px solid var(--hair);color:var(--bone-50);
  background:transparent;transition:border-color .3s,color .3s,background .3s}
.fbtn:hover,.fbtn[aria-pressed="true"],.w-filter button:hover{border-color:var(--gold);color:var(--gold)}
.w-filter{display:flex;flex-wrap:wrap;gap:8px;margin-block:var(--s5)}
.ty-links{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s5)}

@media (max-width:1080px){
  .en-stats,.fig-grid,.feat-metrics{grid-template-columns:repeat(2,1fr)}
  .en-grid,.fw-grid,.w-grid{grid-template-columns:repeat(2,1fr)}
  .lg-wrap{grid-template-columns:repeat(4,1fr)}
  .imgband{grid-template-columns:1fr}
}
@media (max-width:680px){
  .en-stats,.fig-grid,.feat-metrics,.en-grid,.fw-grid,.w-grid{grid-template-columns:1fr}
  .lg-wrap{grid-template-columns:repeat(3,1fr)}
  .form-two{grid-template-columns:1fr}
}

/* ── 55 · ENGLISH LONG-FORM PROSE ──────────────────────────────────
   The tax-rebate explainer is a 1,500-word article whose headings carry no
   class — the old stylesheet styled bare h2/h3. These sit inside .en-inner,
   so the selector is a descendant, and :not([class]) keeps it from outranking
   the .en-h2 / .en-p classes used elsewhere on the English pages. */
.en-body,.en-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.en-body h2:not([class]),.en-narrow h2:not([class]){
  font-family:var(--ff-d);font-size:clamp(25px,3.1vw,46px);font-weight:400;
  line-height:1.02;letter-spacing:-.022em;color:var(--bone);
  margin:clamp(40px,4.6vw,74px) 0 var(--s4)}
.en-body h3:not([class]),.en-narrow h3:not([class]){
  font-family:var(--ff-b);font-size:clamp(16px,1.35vw,20px);font-weight:600;
  color:var(--bone);margin:var(--s5) 0 var(--s3);line-height:1.3}
.en-body p:not([class]),.en-narrow p:not([class]){
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.84;color:var(--bone-50);
  margin-bottom:var(--s3);max-width:70ch}
.en-body strong,.en-narrow strong{color:var(--bone);font-weight:600}
.en-body a:not([class]),.en-narrow a:not([class]){color:var(--gold);
  border-bottom:1px solid var(--gold-dim)}
.en-body ul:not([class]),.en-body ol:not([class]),
.en-narrow ul:not([class]),.en-narrow ol:not([class]){
  margin:0 0 var(--s4);padding-left:0;list-style:none;display:grid;gap:11px;counter-reset:enli}
.en-body ul:not([class])>li,.en-body ol:not([class])>li,
.en-narrow ul:not([class])>li,.en-narrow ol:not([class])>li{
  position:relative;padding-left:24px;font-size:15px;line-height:1.74;
  color:var(--bone-50);max-width:70ch}
.en-body ul:not([class])>li::before,.en-narrow ul:not([class])>li::before{
  content:'';position:absolute;left:0;top:.74em;width:11px;height:1px;background:var(--gold)}
.en-body ol:not([class])>li,.en-narrow ol:not([class])>li{padding-left:30px}
.en-body ol:not([class])>li::before,.en-narrow ol:not([class])>li::before{
  counter-increment:enli;content:counter(enli,decimal-leading-zero);
  position:absolute;left:0;top:.1em;font-family:var(--ff-m);font-size:10px;
  letter-spacing:.1em;color:var(--gold)}
.en-body table,.en-narrow table{width:100%;border-collapse:collapse;margin:var(--s5) 0;
  border:1px solid var(--hair)}
.en-body th,.en-narrow th{background:var(--ink-3);font-family:var(--ff-m);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:left;padding:14px 16px}
.en-body td,.en-narrow td{padding:14px 16px;font-size:13.5px;line-height:1.65;
  color:var(--bone-50);border-top:1px solid var(--hair)}
/* .en-inner carries the page gutter for top-level sections, but inside an
   article container that gutter is already applied — nesting them stacked the
   indent twice and pushed the column off centre */
.en-body .en-inner,.en-narrow .en-inner{max-width:none;padding-inline:0}
/* the English work cards are their own grid, not the Hungarian .card lattice */
.wc[hidden]{display:none}
.fbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--gold-ghost)}
@media (hover: none), (pointer: coarse){
  /* the English contact sidebar's email and phone lines */
  .ct-side-v{display:inline-block;padding-block:10px;margin-block:-5px}
}
/* ── 56 · ENGLISH HOMEPAGE ─────────────────────────────────────────
   The English homepage runs on the same components as the Hungarian one, so
   this section is small on purpose: the aerial band's own type (it used to be
   inline-styled), and the places where the English wording runs longer than
   the Hungarian it replaces. */
.imgband-h{font-family:var(--ff-d);font-size:clamp(24px,2.9vw,40px);font-weight:400;
  line-height:1.04;letter-spacing:-.026em;color:var(--bone);margin:var(--s3) 0 var(--s3)}
.imgband-p{font-size:clamp(14px,1.1vw,15.5px);line-height:1.86;color:var(--bone-50);margin:0;max-width:46ch}
.imgband-body .en-card-l{margin:0}

/* The hero strapline is a full sentence here rather than the Hungarian single
   clause, so it needs room before it starts stacking into the KPI row. */
#hero .hero-sub{max-width:60ch}
.hero-eyebrow .meta{white-space:normal}

/* Six capability rows whose titles are two words longer than the Hungarian
   ones: give the headline column the space and let the description shrink. */
:lang(en) .cap-row{grid-template-columns:72px minmax(0,1fr) minmax(0,34ch) 0}
:lang(en) .cap-t{font-size:clamp(21px,2.5vw,42px)}

/* The inverted band carries two paragraphs side by side instead of a headline
   and a list, so the grid needs equal columns rather than the feature split. */
.bay.invert .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start}
.bay.invert .feature-grid .lede{margin:0}

@media (max-width:900px){
  :lang(en) .cap-row{grid-template-columns:1fr;gap:var(--s2)}
  :lang(en) .cap-row .cap-n{font-size:10px}
  .bay.invert .feature-grid{grid-template-columns:1fr}
}

/* The English closing line is a full sentence where the Hungarian is a clause;
   at the display scale it filled the viewport on its own. */
:lang(en) .cta-inner h2{font-size:clamp(26px,3.4vw,54px);max-width:26ch}
/* ── 57 · GROUPED FAQ ──────────────────────────────────────────────
   Used by the English homepage, where the question list is long enough to
   need signposting. The group label rides the same mono scale as the section
   slugs, so it reads as structure rather than as another question. */
.faq-group + .faq-group{margin-top:clamp(34px,4vw,62px)}
.faq-group-l{font-family:var(--ff-m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);padding-bottom:var(--s2);display:flex;align-items:center;gap:14px}
.faq-group-l::after{content:'';flex:1;height:1px;background:var(--hair)}

/* An answer that points at the page which covers it in full is the whole
   point of a FAQ this size — the link has to be visible inside body text. */
.faq-a a{color:var(--gold);border-bottom:1px solid var(--gold-dim);
  transition:border-color .3s,color .3s}
.faq-a a:hover{border-bottom-color:var(--gold)}
/* ── 58 · CAPTIONED WORK CARD ──────────────────────────────────────
   A .wc card carries its title inside the frame, over the still. Where the
   page also wants a sentence about the film — the corporate page does, because
   that sentence is the reason a reader clicks — it goes under the card, not
   into the overlay, which is sized for a title and nothing more. */
.cw{display:flex;flex-direction:column;gap:14px}
.cw .wc{flex:none}
.cw-d{font-size:13.5px;line-height:1.7;color:var(--bone-50);margin:0}

/* The "Related" links at the foot of the English pages sit on their own line
   but are only as tall as their text — a 20px target on a phone. Inline links
   inside a sentence are exempt from the 44px rule; these are not inline, they
   are a list of destinations. */
@media (pointer:coarse){
  .en-rel a{display:inline-flex;align-items:center;min-height:44px}
}
/* ── 59 · IMAGE BAND ON A PHONE ────────────────────────────────────
   Stacked, the media row is as wide as the screen. A portrait shot of three
   people needs height to survive that, or it is a crop of three torsos. */
@media (max-width:900px){
  .imgband{min-height:0}
  .imgband-media{min-height:300px}
  .imgband-media--faces{min-height:380px;background-position:50% 22%}
}
@media (max-width:520px){
  .imgband-media--faces{min-height:340px}
}

/* ── 60 · NUMBERED PROCESS STEPS (English) ─────────────────────────
   The "A shoot in Hungary, step by step" list shipped with .step / .step-n
   markup and no rule for either, so the five steps ran together as one block
   of text with a stray number in front of each. Same two-column shape the
   Hungarian capability rows use: the number in its own gutter, a hairline
   between steps. */
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);
  align-items:start;padding-block:clamp(22px,2.6vw,36px);border-top:1px solid var(--hair)}
.step:last-of-type{border-bottom:1px solid var(--hair)}
.step-n{font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;color:var(--gold);
  padding-top:6px}
.step-d{max-width:74ch;margin:0}

@media (max-width:640px){
  .step{grid-template-columns:1fr;gap:8px}
  .step-n{padding-top:0}
}
/* ── 61 · ENGLISH CONTACT FORM ─────────────────────────────────────
   A row here is a label above its field. The shared .form-row puts two fields
   side by side, which is right on the Hungarian pages and wrong on this one —
   so it is overridden by scope. Genuine pairs use .form-two. */
.en-formcard form{display:grid;gap:clamp(16px,1.8vw,22px)}
.ct-wrap .form-row{display:grid;grid-template-columns:1fr;gap:9px;align-content:start}
.ct-wrap .form-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.ct-wrap .ct-label{margin-bottom:0;display:block}

.en-formcard{border:1px solid var(--hair);background:var(--ink-2);
  padding:clamp(22px,2.8vw,46px)}
.en-formcard > .ct-label{margin-bottom:9px}

/* A field is a target before it is a rectangle: 48px minimum, and 16px text so
   iOS Safari does not zoom the page the moment it is focused. */
.ct-wrap .form-input,.ct-wrap .form-select,.ct-wrap .form-textarea{
  min-height:48px;padding:13px 15px;font-size:15.5px;line-height:1.4;
  background:var(--ink-3);border:1px solid var(--hair-2,var(--hair))}
.ct-wrap .form-textarea{min-height:150px;padding-block:14px}
.ct-wrap .form-input::placeholder,.ct-wrap .form-textarea::placeholder{color:var(--bone-34)}


.en-formside{display:grid;gap:0;align-content:start}

@media (max-width:680px){
  .ct-wrap .form-two{grid-template-columns:1fr}
  .ct-wrap .form-input,.ct-wrap .form-select,.ct-wrap .form-textarea{font-size:16px}
  .en-formcard{padding:20px 18px}
}

/* A note under a field, not a label: quieter than the field, and it wraps. */
.ct-hint{font-size:12.5px;line-height:1.6;color:var(--bone-34);margin:2px 0 0}
@media (pointer:coarse){.ct-hint{font-size:13.5px;color:var(--bone-50)}}

/* Below 400px the nav now carries logo + language pill + burger, and on a
   320px screen that ran the burger past the right edge. Tighten all three
   rather than hiding the switch again — a visitor on a small phone is exactly
   the one who should not have to hunt for their language. */
@media (max-width:400px){
  #nav{gap:8px;padding-inline:12px}
  .nav-logo img{height:20px}
  .nav-lang{font-size:10.5px;margin-right:4px;letter-spacing:.08em}
  .nav-lang a,.nav-lang span{min-width:38px;padding:0 6px}
  .burger{width:40px}
  .burger span{left:8px;width:22px}
}
/* ── 62 · STICKY QUOTE BAR ─────────────────────────────────────────
   Small screens only — the JS never builds it above 860px. It sits on the
   safe-area inset so it clears the iOS home indicator, and it is translated
   out of the way rather than hidden, so it slides rather than blinks. */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:700;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--hair-2);
  transform:translateY(110%);transition:transform .42s var(--e-out);
  pointer-events:none}
.sbar.on{transform:translateY(0);pointer-events:auto}
.sbar-t{flex:1;min-width:0;font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-34);line-height:1.5}
.sbar-t b{display:block;font-family:var(--ff-b);font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--bone)}
.sbar-b{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;background:var(--gold);color:var(--ink);
  font-family:var(--ff-b);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sbar-x{flex:none;width:44px;height:46px;display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--bone-34);background:transparent}
.sbar-x:hover{color:var(--bone)}

@media (max-width:400px){
  .sbar{gap:8px;padding-inline:10px}
  .sbar-t{font-size:9px}
  .sbar-t b{font-size:12px}
  .sbar-b{padding:0 13px;font-size:11px}
}
/* the decorative timecode lives at the bottom centre — lift it over the bar */
body.has-sbar #hud .tc{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

@media (prefers-reduced-motion:reduce){
  .sbar{transition:none}
}