/* ============================================================
   HEXAREEL STUDIOS — site-wide styles
   Display font: Brinova (drop the font files in /assets/fonts
   and uncomment the @font-face below). Bebas Neue is the
   automatic fallback until then.
   ============================================================ */

/* ---------- cross-document view transitions (2026): cinematic cut between pages.
   Default crossfade only; degrades to instant nav in older browsers.
   Reduced motion = hard cut (no fade). ---------- */
@view-transition{navigation:auto;}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}


@font-face{
  font-family:'Brinova';
  src:url('../assets/fonts/brinova-regular.woff2') format('woff2'),
      url('../assets/fonts/brinova-regular.ttf') format('truetype');
  font-weight:400;font-display:swap;
}

:root{
  --secpad:clamp(70px,10vh,130px); /* THE section rhythm: one value everywhere */
  --black:#000; --white:#fff;
  --g1:#0a0a0a; --g2:#161616; --g3:#333; --g4:#777; --g5:#bbb; --g6:#e9e9e9;
  --display:'Brinova','Bebas Neue',Impact,sans-serif;
  --body:'Quicksand',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:hidden;}
::selection{background:var(--white);color:var(--black);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.02em;}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(5vw,20px);padding-right:max(5vw,20px);}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-100px;pointer-events:none;z-index:2000;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(6) infinite;will-change:transform;contain:strict;}
@media (pointer:coarse),(max-width:820px){.grain{animation:none;inset:0;}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-30px,20px)}40%{transform:translate(20px,-30px)}60%{transform:translate(-20px,-20px)}80%{transform:translate(30px,10px)}100%{transform:translate(0,0)}}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;background:var(--black);z-index:3000;display:flex;align-items:center;justify-content:center;transition:transform .8s cubic-bezier(.77,0,.18,1);}
#loader.done{transform:translateY(-101%);}
.leader{position:relative;width:min(46vmin,340px);height:min(46vmin,340px);display:flex;align-items:center;justify-content:center;}
.leader-ring{position:absolute;inset:0;border:1px solid var(--g3);border-radius:50%;}
.leader-cross-v{position:absolute;left:50%;top:-8%;bottom:-8%;width:1px;background:var(--g3);}
.leader-cross-h{position:absolute;top:50%;left:-8%;right:-8%;height:1px;background:var(--g3);}
.leader-sweep{position:absolute;inset:0;border-radius:50%;}
#count{font-family:var(--display);font-size:min(24vmin,180px);line-height:1;color:var(--white);}
.leader-tag{position:absolute;bottom:-56px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.4em;color:var(--g4);white-space:nowrap;}

/* ---------- custom cursor ---------- */
#cursor{position:fixed;top:0;left:0;width:44px;height:44px;border:1px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;z-index:2500;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;mix-blend-mode:difference;will-change:transform;}
#cursor .tick{position:absolute;background:#fff;}
#cursor .t1{top:-5px;left:50%;width:1px;height:6px;transform:translateX(-50%);}
#cursor .t2{bottom:-5px;left:50%;width:1px;height:6px;transform:translateX(-50%);}
#cursor .t3{left:-5px;top:50%;height:1px;width:6px;transform:translateY(-50%);}
#cursor .t4{right:-5px;top:50%;height:1px;width:6px;transform:translateY(-50%);}
#cursor.big{width:86px;height:86px;background:rgba(255,255,255,.08);}
#rec{position:fixed;top:0;left:0;pointer-events:none;z-index:2500;font-size:9px;letter-spacing:.25em;color:#fff;display:flex;align-items:center;gap:5px;transform:translate(28px,28px);mix-blend-mode:difference;will-change:transform;}
#rec .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
@media (hover:none),(pointer:coarse){#cursor,#rec{display:none;}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:1500;display:flex;align-items:center;justify-content:space-between;padding:20px max(5vw,20px) 34px;background:linear-gradient(180deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 55%,rgba(0,0,0,0) 100%);}
nav .logo img{height:32px;width:auto;filter:drop-shadow(0 1px 10px rgba(0,0,0,.6));}
nav .links{display:flex;gap:clamp(18px,2.6vw,38px);font-size:12px;letter-spacing:.28em;font-weight:600;}
nav .links a{position:relative;padding:4px 0;white-space:nowrap;}
nav .links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;transition:width .3s;}
nav .links a:hover::after,nav .links a[aria-current]::after{width:100%;}
#burger{display:none;background:none;border:none;color:#fff;font-family:var(--body);font-size:12px;letter-spacing:.3em;font-weight:700;cursor:pointer;padding:8px 0;}
#menu{position:fixed;inset:0;background:var(--black);z-index:1400;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:2px;transform:translateY(-101%);transition:transform .6s cubic-bezier(.77,0,.18,1);}
#menu.open{transform:translateY(0);}
#menu a{font-family:var(--display);font-size:clamp(40px,11vw,90px);line-height:1.05;color:var(--white);display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;}
#menu a span{font-family:var(--body);font-size:11px;letter-spacing:.3em;color:var(--g4);}
@media (max-width:880px){nav .links{display:none;}#burger{display:block;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid #fff;color:#fff;background:transparent;padding:16px 34px;font-family:var(--body);font-size:12px;letter-spacing:.28em;font-weight:700;cursor:pointer;transition:background .3s,color .3s;will-change:transform;text-align:center;}
.btn:hover{background:#fff;color:#000;}
.btn.solid{background:#fff;color:#000;}
.btn.solid:hover{background:rgba(0,0,0,.55);color:#fff;border-color:#fff;}
#cta .btn{border-color:#fff;color:#fff;background:transparent;}
#cta .btn:hover{background:#fff;color:#000;}
#cta .btn.solid{background:#fff;color:#000;}
#cta .btn.solid:hover{background:transparent;color:#fff;border-color:#fff;}
.on-white .btn,.btn.dark{border-color:#000;color:#000;}
.on-white .btn:hover,.btn.dark:hover{background:#000;color:#fff;}
.on-white .btn.solid,.btn.dark.solid{background:#000;color:#fff;}
.on-white .btn.solid:hover,.btn.dark.solid:hover{background:transparent;color:#000;}

/* ---------- section heading device ---------- */
.num-head{display:flex;align-items:baseline;gap:20px;margin-bottom:5vh;flex-wrap:wrap;}
.num-head .no{font-family:var(--display);font-size:clamp(20px,2.4vw,34px);color:transparent;-webkit-text-stroke:1px currentColor;}
.num-head h2{font-size:clamp(38px,6vw,96px);line-height:.95;}
/* side note rides UNDER the heading as a lede line (hairline removal, Jul 11):
   the old right-floated note lost its anchor when section hairlines were cut */
.num-head .side{flex-basis:100%;order:3;margin:14px 0 0;font-size:13px;color:inherit;opacity:.55;max-width:560px;line-height:1.7;}
@media (max-width:700px){.num-head .side{display:none;}}

/* ---------- home hero : full-bleed showreel ---------- */
#hero{position:relative;height:100svh;min-height:520px;background:var(--black);overflow:hidden;}
#hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;}
#hero .vig{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 22%,rgba(0,0,0,.28) 72%,rgba(0,0,0,.68) 100%);pointer-events:none;}
#hero .label{position:absolute;top:96px;left:max(5vw,20px);z-index:6;font-size:10px;letter-spacing:.35em;color:#fff;display:flex;align-items:center;gap:8px;}
#hero .label .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.1s steps(1) infinite;flex-shrink:0;}
#tc{position:absolute;top:96px;right:max(5vw,20px);z-index:6;font-size:11px;letter-spacing:.25em;color:#fff;display:flex;gap:10px;align-items:center;}
#tc .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.1s steps(1) infinite;}
.hero-meta{position:absolute;bottom:28px;left:max(5vw,20px);right:max(5vw,20px);z-index:6;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.3em;color:var(--g5);gap:12px;}
.scrolldown{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:6;width:1px;height:52px;background:rgba(255,255,255,.35);overflow:hidden;}
.scrolldown::after{content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;background:#fff;animation:drop 1.6s ease-in-out infinite;}
@keyframes drop{to{top:110%;}}
@media (max-width:860px){#hero{height:82svh;min-height:420px;}}

/* ---------- hero HUD: viewfinder brackets + headline over the reel (2026-07 refresh).
   Same corner grammar as .frame/.sc-card, hero-scaled. REC owns the blink;
   the timecode reads clean. Headline line 2 = ghost stroke, same as #intro l2. ---------- */
#hero .hud-c{position:absolute;z-index:6;width:30px;height:30px;border:1px solid rgba(255,255,255,.75);pointer-events:none;}
#hero .hc1{top:86px;left:22px;border-right:none;border-bottom:none;}
#hero .hc2{top:86px;right:22px;border-left:none;border-bottom:none;}
#hero .hc3{bottom:24px;left:22px;border-right:none;border-top:none;}
#hero .hc4{bottom:24px;right:22px;border-left:none;border-top:none;}
.hero-head{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;font-family:var(--display);line-height:.92;letter-spacing:.02em;}
.hero-head span{display:block;white-space:nowrap;font-size:clamp(46px,8.6vw,150px);}
.hero-head .hl1{color:#fff;}
.hero-head .hl2{color:transparent;-webkit-text-stroke:2px #fff;}

/* ---------- fact ticker (film-leader strip under the hero).
   Reuses the marquee mechanics (mqa); reduced motion = static row. ---------- */
.ticker{padding:18px 0;background:var(--black);overflow:hidden;}
.ticker .tk{display:flex;white-space:nowrap;width:max-content;will-change:transform;animation:mqa 36s linear infinite;}
.ticker span{font-size:12px;letter-spacing:.3em;color:var(--g4);padding:0 28px;font-weight:600;}
.ticker span b{color:var(--white);font-weight:700;}
.ticker span.sep{padding:0;color:var(--g3);}

/* ---------- home intro headline ---------- */
#intro{padding:16vh 0 6vh;background:var(--black);overflow:hidden;text-align:center;}
.hero-line{display:block;font-family:var(--display);font-size:clamp(56px,12vw,200px);line-height:.92;will-change:transform;white-space:nowrap;color:#fff;}
.hero-line.l2{color:transparent;-webkit-text-stroke:2px #fff;}
.hero-sub{margin-top:28px;font-size:clamp(13px,1.2vw,16px);color:var(--g5);max-width:560px;line-height:1.8;margin-left:auto;margin-right:auto;will-change:transform;}
.hero-cta{margin-top:34px;display:inline-flex;}

/* ---------- inner page hero ---------- */
/* NOTE: top/bottom only — the shorthand `padding:26vh 0 10vh` used to zero out
   .wrap's side padding, which made every inner-page hero touch the screen edge
   (Ibrahim, Jul 10). Never reintroduce a padding shorthand here. */
.page-hero{padding-top:26vh;padding-bottom:10vh;position:relative;overflow:hidden;}
.page-hero h1{font-size:clamp(56px,11vw,190px);line-height:.9;}
.page-hero h1 .ghost{display:block;color:transparent;-webkit-text-stroke:1px var(--g4);}
.page-hero .lede{margin-top:28px;max-width:620px;color:var(--g5);line-height:1.8;font-size:clamp(14px,1.2vw,17px);}
.on-white .page-hero .lede{color:#555;}
.page-hero .meta{margin-top:40px;display:flex;gap:28px;font-size:10px;letter-spacing:.3em;color:var(--g4);flex-wrap:wrap;}

/* ---------- statement ---------- */
#statement{padding:var(--secpad) 0;background:var(--black);}
#statement p.big{font-family:var(--display);font-size:clamp(32px,5.2vw,84px);line-height:1.08;max-width:1200px;}
#statement p.big .w{opacity:.14;transition:opacity .35s;}
#statement p.big .w.on{opacity:1;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;margin-top:8vh;}
.stat{border-left:1px solid var(--g3);padding-left:clamp(16px,1.8vw,28px);}
.stat .num{font-family:var(--display);font-size:clamp(44px,6vw,96px);line-height:1;}
.stat .lbl{font-size:11px;letter-spacing:.28em;color:var(--g4);margin-top:8px;}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:40px 4vw;}}

/* ---------- service rows ---------- */
.rows-section{background:var(--white);color:var(--black);padding:var(--secpad) 0;}
.srow{position:relative;display:block;padding:4.5vh 0;overflow:hidden;}
.srow .inner{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);}
.srow .idx{font-size:12px;letter-spacing:.3em;color:#767676;min-width:44px;flex-shrink:0;}
.srow .name{font-family:var(--display);font-size:clamp(30px,5.6vw,96px);line-height:.95;transition:transform .4s cubic-bezier(.2,.8,.2,1);overflow-wrap:anywhere;}
.srow .tag{font-size:12px;color:#666;max-width:300px;text-align:right;line-height:1.6;margin-left:auto;flex-shrink:0;}
.srow:hover .name{transform:translateX(14px);}
.srow .peek{position:absolute;top:50%;left:55%;width:min(280px,32vw);aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .5s;pointer-events:none;z-index:2;}
.srow:hover .peek{filter:grayscale(0) contrast(1.02);}
.srow:hover .peek{transform:translate(-50%,-50%) scale(1) rotate(-2deg);}
@media (max-width:760px){.srow .tag{display:none;}.srow .peek{display:none;}}

/* ---------- work frames ---------- */
.wfilter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4vh;}
.wfilter button{background:none;border:1px solid var(--g3);color:var(--g5);font-family:var(--body);font-size:11px;letter-spacing:.22em;font-weight:700;padding:10px 20px;cursor:pointer;transition:border-color .3s,color .3s,background .3s;}
.wfilter button:hover{border-color:#fff;color:#fff;}
.wfilter button[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;}
.frame.fhide{display:none;}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;}
.frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--g1);display:block;}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s;}
.frame:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.03);}
.frame .bar{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:10px;letter-spacing:.25em;color:#fff;gap:8px;}
.frame .corner{position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.7);transition:all .4s;}
.frame .c1{top:12px;left:12px;border-right:none;border-bottom:none;}
.frame .c2{top:12px;right:12px;border-left:none;border-bottom:none;}
.frame .c3{bottom:46px;left:12px;border-right:none;border-top:none;}
.frame .c4{bottom:46px;right:12px;border-left:none;border-top:none;}
.frame:hover .corner{width:26px;height:26px;}
.frame .tcode{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.25em;color:rgba(255,255,255,.85);opacity:0;transition:opacity .4s;}
.frame:hover .tcode{opacity:1;}
@media (max-width:860px){.wgrid{grid-template-columns:repeat(2,1fr);gap:3vw;}}
@media (max-width:520px){.wgrid{grid-template-columns:1fr;gap:20px;}}

/* ---------- marquee ---------- */
.credits{padding:9vh 0;background:var(--black);overflow:hidden;}
.mq{display:flex;white-space:nowrap;will-change:transform;}
.mq span{font-family:var(--display);font-size:clamp(36px,5.5vw,84px);line-height:1.12;padding:0 2.6vw;color:transparent;-webkit-text-stroke:1px var(--g4);}
.mq span.fill{color:var(--white);-webkit-text-stroke:0;}
.mq.a{animation:mqa 44s linear infinite;}
.mq.b{animation:mqb 40s linear infinite;margin-top:6px;}
.mq.c{animation:mqa 48s linear infinite;margin-top:6px;}
@keyframes mqa{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqb{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.credits .note{text-align:center;font-size:10px;letter-spacing:.4em;color:var(--g4);margin-top:5vh;padding:0 20px;}
.mq-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:5vh;font-size:clamp(28px,4.2vw,60px);line-height:1;}
.mq-head span{font-family:var(--body);font-size:10px;letter-spacing:.4em;color:var(--g4);font-weight:600;}

/* ---------- game slate ---------- */
#intermission{padding:var(--secpad) 0;background:var(--white);color:var(--black);}
#intermission .head{text-align:center;margin-bottom:5vh;}
#intermission h2{font-size:clamp(44px,7vw,110px);line-height:1;}
#intermission .sub{color:#555;max-width:480px;margin:18px auto 0;line-height:1.75;font-size:14px;}
.slate{max-width:520px;margin:0 auto;border:2px solid #000;background:#fff;}
.slate-top{display:flex;justify-content:space-between;align-items:center;background:#000;color:#fff;padding:12px 18px;font-size:10px;letter-spacing:.22em;gap:10px;}
.slate-top .clap{display:flex;gap:4px;flex-shrink:0;}
.slate-top .clap i{width:14px;height:10px;background:#fff;transform:skewX(-20deg);display:inline-block;}
.slate-top .clap i:nth-child(even){background:#555;}
#board{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#000;padding:3px;aspect-ratio:1;}
.tile{position:relative;background-image:url('../assets/corporate-photo.jpg');background-size:300% 300%;filter:grayscale(1) contrast(1.05);cursor:pointer;transition:transform .12s;user-select:none;-webkit-user-select:none;touch-action:manipulation;}
.tile:active{transform:scale(.97);}
.tile.empty{background:#000;cursor:default;filter:none;}
.tile .n{position:absolute;top:6px;left:8px;font-family:var(--display);font-size:15px;color:#fff;text-shadow:0 0 6px #000;}
.slate-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:2px solid #000;font-size:11px;letter-spacing:.2em;gap:10px;flex-wrap:wrap;}
.slate-bottom button{background:none;border:1px solid #000;padding:8px 16px;font-family:var(--body);font-size:10px;letter-spacing:.25em;font-weight:700;cursor:pointer;transition:all .3s;}
.slate-bottom button:hover{background:#000;color:#fff;}
#solved{position:relative;max-width:520px;margin:24px auto 0;border:2px solid #000;padding:32px;text-align:center;display:none;}
#solved.show{display:block;animation:pop .5s cubic-bezier(.2,.8,.2,1);}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
#solved .big{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);line-height:1.1;}
#solved p{color:#555;font-size:13px;margin:12px 0 20px;line-height:1.7;}

/* ---------- cta ---------- */
#cta{padding:var(--secpad) 0;background:var(--black);text-align:center;position:relative;overflow:hidden;}
#cta h2{font-size:clamp(44px,9vw,150px);line-height:.95;}
#cta h2 .ghost{color:transparent;-webkit-text-stroke:1px var(--g4);display:block;}
#cta .after{color:var(--g5);margin-top:28px;font-size:14px;padding:0 20px;}
#cta .row{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:0 20px;}

/* ---------- origin story on the stadium backdrop (about, static) ---------- */
.oc-story{position:relative;overflow:hidden;}
.oc-story .ocbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:contrast(1.05);}
.oc-story .ocshade{position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.62) 82%,rgba(0,0,0,.82) 90%,rgba(0,0,0,.96) 96%,#000 99%);}
.oc-story .wrap{position:relative;z-index:2;}
.oc-story .split p{color:#d6d6d6;}

/* ---------- content blocks (inner pages) ---------- */
.page-hero + .block,.page-hero + section.block{padding-top:2vh!important;}
.block{padding:var(--secpad) 0;}
.block.white{background:var(--white);color:var(--black);}
.block.white + .block.white{margin-top:-2px;padding-top:2px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;}
.split .stick{position:sticky;top:120px;}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:48px;}.split .stick{position:static;}}
.split h3{font-size:clamp(30px,4vw,60px);line-height:1;margin-bottom:20px;}
.split p{line-height:1.85;font-size:15px;color:var(--g5);margin-bottom:18px;}
.block.white .split p{color:#555;}
.checklist{list-style:none;}
.checklist li{padding:18px 0 18px 40px;position:relative;font-size:15px;line-height:1.6;}
.block.white .checklist li{color:#333;}
.checklist li::before{content:'';position:absolute;left:4px;top:26px;width:16px;height:1px;background:currentColor;}
.checklist li strong{font-weight:700;}
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr);gap:32px 4vw;}}
@media (max-width:480px){.steps{grid-template-columns:1fr;}}
/* card marker: a single viewfinder corner bracket (same grammar as the work
   frames + hero HUD) replaces the old full-width border-top "broken lines" */
.step{counter-increment:st;position:relative;padding-top:24px;}
.step::after{content:'';position:absolute;top:0;left:0;width:20px;height:20px;border-top:1px solid currentColor;border-left:1px solid currentColor;opacity:.75;}
.step::before{content:counter(st,decimal-leading-zero);font-family:var(--display);font-size:clamp(36px,4vw,60px);display:block;color:transparent;-webkit-text-stroke:1px currentColor;margin-bottom:12px;}
.step h4{font-family:var(--display);font-size:clamp(20px,2vw,28px);margin-bottom:10px;letter-spacing:.03em;}
.step p{font-size:13px;line-height:1.7;opacity:.65;}

/* ---------- service detail sections ---------- */
.svc{padding:9vh 0;}
.svc .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:5vw;align-items:start;}
@media (max-width:820px){.svc .grid{grid-template-columns:1fr;gap:36px;}}
.svc h2{font-size:clamp(36px,5.5vw,86px);line-height:.95;margin-bottom:22px;}
.svc .lede{font-size:16px;line-height:1.85;color:#444;max-width:560px;}
.svc .for{margin-top:26px;font-size:12px;letter-spacing:.14em;color:#767676;line-height:2;}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .6s;}
.svc img:hover{filter:grayscale(0) contrast(1.02);}
.svc .items{list-style:none;margin-top:24px;}
.svc .items li{display:inline-block;border:1px solid #000;padding:8px 16px;margin:0 8px 10px 0;font-size:11px;letter-spacing:.16em;font-weight:600;}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2vw;}
@media (max-width:520px){.team-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}

/* ---------- crew carousel (about, 2026-07 refresh): polaroid cards on a rolling
   track. Desktop = auto-roll (clones added by JS, pause on hover); mobile /
   reduced motion = swipe strip, no clones. Write-up lives in the polaroid tab. ---------- */
.crew-caro{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.crew-caro::-webkit-scrollbar{display:none;}
.crew-caro.rolling{overflow:hidden;scroll-snap-type:none;}
.crew-track{display:flex;gap:clamp(18px,1.8vw,30px);width:max-content;will-change:transform;padding:6px 2px;}
.crew-track.roll{animation:crewroll 60s linear infinite;}
.crew-caro.rolling:hover .crew-track.roll{animation-play-state:paused;}
@keyframes crewroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.crew-track .member{width:clamp(210px,17vw,250px);flex:0 0 auto;scroll-snap-align:start;}
/* polaroid: white mat, no outline (lives on a BLACK section — Ibrahim, Jul 10),
   handwritten name + bio (Caveat, loaded on about.html only) in the bottom tab */
.member.polaroid{background:#fff;color:#111;padding:14px 14px 0;}
.member.polaroid h4{font-family:'Caveat',var(--body),cursive;font-size:27px;font-weight:700;letter-spacing:.01em;margin-top:12px;padding:0 2px;color:#111;}
.member.polaroid > p{padding:0 2px;color:#767676;}
.member.polaroid > p:last-child{padding-bottom:16px;}
.member.polaroid .bio{font-family:'Caveat',var(--body),cursive;font-size:20px;font-weight:500;line-height:1.3;letter-spacing:.01em;color:#222;text-transform:none;margin-top:8px;padding:0 2px 16px;}
.member{position:relative;}
.member .ph{aspect-ratio:3/4;overflow:hidden;background:var(--g2);display:flex;align-items:center;justify-content:center;}
.member .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .6s,filter .6s;}
.member:hover .ph img{transform:scale(1.05);filter:grayscale(0) contrast(1.02);}
.member .ph .init{font-family:var(--display);font-size:56px;color:var(--g3);}
.member h4{font-family:var(--display);font-size:clamp(18px,1.8vw,26px);margin-top:14px;letter-spacing:.04em;}
.member p{font-size:11px;letter-spacing:.18em;color:var(--g4);margin-top:4px;text-transform:uppercase;}
.member .bio{font-size:12.5px;letter-spacing:0;color:#666;margin-top:8px;line-height:1.7;text-transform:none;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:20px;}}
.ccard{border:1px solid var(--g2);padding:36px 30px;transition:border-color .3s;}
.ccard:hover{border-color:var(--g4);}
.ccard h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:14px;}
.ccard p{font-size:13px;color:var(--g5);line-height:1.8;}
.ccard a.line{display:inline-block;margin-top:18px;border-bottom:1px solid var(--g4);padding-bottom:3px;font-size:13px;letter-spacing:.08em;transition:border-color .3s;}
.ccard a.line:hover{border-color:#fff;}

/* ---------- contact call sheet ---------- */
/* rows are TOP-aligned; the arrow marker and the first contact link both sit
   on the title's first line (calc centres them inside the h3 line box) */
.csheet .crow{display:grid;grid-template-columns:90px 1.15fr .85fr;gap:clamp(16px,3vw,48px);padding:4.5vh 0;align-items:start;}
.csheet .cidx{font-size:clamp(18px,1.8vw,26px);line-height:1;color:var(--g4);padding-top:calc((.95*clamp(26px,3.2vw,50px) - clamp(18px,1.8vw,26px))/2);transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.csheet .crow:hover .cidx{transform:translateX(8px);}
.csheet .crow h3{font-size:clamp(26px,3.2vw,50px);line-height:.95;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.csheet .crow:hover h3{transform:translateX(14px);}
.csheet .cmid p{margin-top:12px;font-size:13px;line-height:1.8;color:var(--g5);max-width:480px;}
.csheet .cend{display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-self:end;padding-top:calc((.95*clamp(26px,3.2vw,50px) - 20px)/2);}
.csheet .cend a{font-size:13.5px;letter-spacing:.06em;border-bottom:1px solid var(--g4);padding-bottom:3px;transition:border-color .3s;white-space:nowrap;}
.csheet .cend a:hover{border-color:#fff;}
@media (max-width:820px){
  .csheet .crow{grid-template-columns:1fr;gap:10px;padding:3.6vh 0;}
  .csheet .cidx{padding-top:0;}
  .csheet .cend{justify-self:start;padding-top:4px;gap:10px;}
}

/* ---------- case file log (work, on-white) ---------- */
.cflog{margin-top:1vh;}
.cflog .cfrow{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);padding:4vh 0;align-items:center;}
.cflog .cfidx{font-size:11px;letter-spacing:.3em;color:#767676;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cflog .cfmid h3{font-size:clamp(26px,3.2vw,50px);line-height:.95;letter-spacing:.02em;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.cflog .cfrow:hover .cfmid h3{transform:translateX(14px);}
.cflog .cfmid p{margin-top:12px;font-size:13px;line-height:1.8;color:#555;max-width:600px;}
.cflog .cfloc{font-size:11px;letter-spacing:.3em;color:#767676;justify-self:end;white-space:nowrap;}
@media (max-width:820px){
  .cflog .cfrow{grid-template-columns:1fr;gap:8px;padding:3.4vh 0;}
  .cflog .cfidx{padding-top:0;}
  .cflog .cfloc{justify-self:start;padding-top:2px;order:3;}
}

/* ---------- process timeline (contact, on-white) ---------- */
.tl{position:relative;margin-top:1vh;}
.tl-ruler{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #000;padding-bottom:8px;font-size:10px;letter-spacing:.14em;color:#767676;font-variant-numeric:tabular-nums;}
.tl-ruler i{width:1px;height:8px;background:#ccc;}
.tl-body{position:relative;}
.tl-head{position:absolute;top:0;left:0;width:2px;height:100%;background:#000;z-index:2;pointer-events:none;will-change:transform;}
.tl-head::before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #000;}
.tl-clips{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:8px;padding-top:14px;}
.tl-clip{border:1px solid #000;padding:22px 18px 24px;display:flex;flex-direction:column;min-height:190px;}
.tl-clip .tidx{font-size:10px;letter-spacing:.25em;color:#767676;}
.tl-clip h4{font-family:var(--display);font-size:clamp(18px,1.6vw,26px);line-height:1;letter-spacing:.03em;margin-top:12px;color:transparent;-webkit-text-stroke:1px #000;transition:color .35s;}
.tl-clip.on h4{color:#000;}
.tl-clip p{font-size:12.5px;line-height:1.7;color:#666;margin-top:10px;}
.tl-clip.final{background:#000;border-color:#000;color:#fff;}
.tl-clip.final .tidx{color:#777;}
.tl-clip.final h4{-webkit-text-stroke:0;color:#fff;}
.tl-clip.final .cta{margin-top:auto;align-self:flex-start;border:1px solid #fff;padding:10px 14px;font-size:11px;letter-spacing:.2em;transition:background .3s,color .3s;}
.tl-clip.final:hover .cta{background:#fff;color:#000;}
.tl-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;letter-spacing:.2em;color:#767676;}
.tl-foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#000;margin-right:6px;vertical-align:0;animation:blink 1.1s steps(1) infinite;}
@media (max-width:820px){
  .tl-ruler{display:none;}
  .tl-head{display:none;}
  .tl-clips{grid-template-columns:1fr;gap:10px;padding-top:0;}
  .tl-clip{min-height:0;padding:20px 18px;}
  .tl-clip h4{color:#000;-webkit-text-stroke:0;font-size:22px;}
  .tl-clip.final h4{color:#fff;}
}

/* ---------- footer ---------- */
footer{background:var(--black);padding:9vh 0 0;overflow:hidden;color:var(--white);}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:5vw;padding-bottom:7vh;font-size:13px;color:var(--g5);}
.fgrid h4{font-size:10px;letter-spacing:.4em;color:var(--g4);margin-bottom:18px;font-family:var(--body);font-weight:700;}
.fgrid a{display:block;margin-bottom:10px;transition:color .3s;}
.fgrid a:hover{color:#fff;}
.fgrid .sig{font-size:13px;line-height:1.8;color:var(--g5);max-width:320px;}
.fwordmark{font-family:var(--display);font-size:clamp(80px,17.5vw,300px);line-height:.78;text-align:center;color:var(--g2);letter-spacing:.02em;transform:translateY(18%);user-select:none;}
.fbar{display:flex;justify-content:space-between;padding:18px 0;font-size:10px;letter-spacing:.22em;color:var(--g4);gap:10px;flex-wrap:wrap;}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:40px 6vw;}}

/* ---------- FAQ (contact) ---------- */
.faq{max-width:920px;}
/* FAQ keeps its hairlines (Ibrahim, Jul 11): rows need segregation here,
   even though separator lines were removed site-wide */
.faq details{border-top:1px solid #ddd;}
.faq details:last-of-type,.faq details:has(+ .faq-cat){border-bottom:1px solid #ddd;}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-family:var(--display);font-size:clamp(15px,1.7vw,21px);letter-spacing:.02em;line-height:1.2;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--body);font-size:24px;font-weight:300;color:#767676;flex-shrink:0;transition:transform .3s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .a{padding:0 0 26px;color:#555;line-height:1.85;font-size:14px;max-width:720px;}
.faq-cat{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,44px);letter-spacing:.01em;margin:64px 0 14px;}
.faq .faq-cat:first-child{margin-top:0;}

/* ---------- contact sheet (live Instagram) ---------- */
#feed{padding:var(--secpad) 0;background:var(--black);}
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:5vh;}
.feed-head h2{font-size:clamp(40px,6.5vw,96px);line-height:1;}
.feed-head .sub{color:var(--g5);max-width:380px;font-size:14px;line-height:1.75;text-align:right;}
.sheet{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:22px 0;}
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;height:8px;background-image:repeating-linear-gradient(90deg,var(--g3) 0 16px,transparent 16px 38px);}
.sheet::before{top:0;}
.sheet::after{bottom:0;}
.shframe{display:block;position:relative;}
.shframe .fimg{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--g1);position:relative;}
.shframe .fimg img,.shframe .fimg video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .6s,filter .6s;}
.shframe:hover .fimg img,.shframe:hover .fimg video{transform:scale(1.05);filter:grayscale(0) contrast(1.02);}
.shframe .fcap{position:absolute;left:0;right:0;bottom:0;padding:44px 10px 12px;font-size:11.5px;line-height:1.55;color:var(--g6);background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transition:opacity .4s;}
.shframe:hover .fcap{opacity:1;}
.shframe .fmeta{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--g4);font-variant-numeric:tabular-nums;}
.shframe:hover .fmeta{color:var(--g5);}
.feed-foot{margin-top:6vh;text-align:center;}

/* ---------- on linkedin (about) ---------- */
.li-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw;}
.li-card{display:flex;flex-direction:column;border:1px solid var(--g2);padding:26px 22px;transition:border-color .3s,transform .3s;will-change:transform;}
.li-card:hover{border-color:var(--g4);transform:translateY(-6px);}
.li-card .who{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;letter-spacing:.18em;color:var(--g4);text-transform:uppercase;margin-bottom:20px;}
.li-card .who .fr{font-variant-numeric:tabular-nums;flex-shrink:0;}
.li-card .q{font-family:var(--display);font-size:clamp(17px,1.45vw,21px);line-height:1.32;letter-spacing:.02em;color:var(--g6);flex:1;}
.li-card .out{margin-top:26px;align-self:flex-start;font-size:10.5px;letter-spacing:.18em;color:var(--g5);border-bottom:1px solid var(--g3);padding-bottom:4px;transition:color .3s,border-color .3s;}
.li-card:hover .out{color:var(--white);border-color:var(--white);}
.li-follow{margin-top:7vh;padding-top:30px;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 36px;}
.li-follow .lbl{font-family:var(--display);font-size:clamp(18px,1.6vw,24px);letter-spacing:.04em;margin-right:8px;}
.li-follow a{font-size:13px;letter-spacing:.08em;border-bottom:1px solid var(--g3);padding-bottom:3px;transition:border-color .3s;}
.li-follow a:hover{border-color:var(--white);}
@media (max-width:1000px){.li-grid{grid-template-columns:repeat(2,1fr);}}
/* on-white variant (About: proof chapter sits on white — posts read as documents) */
.block.white .li-card{border-color:#dcdcdc;}
.block.white .li-card:hover{border-color:#000;}
.block.white .li-card .q{color:#111;}
.block.white .li-card .who{color:#767676;}
.block.white .li-card .out{color:#555;border-color:#bbb;}
.block.white .li-card:hover .out{color:#000;border-color:#000;}
.block.white .li-follow a{border-bottom-color:#bbb;}
.block.white .li-follow a:hover{border-bottom-color:#000;}

/* ---------- screenings (work page, click-to-load youtube) ---------- */
.yt-grid{display:grid;grid-template-columns:1fr 1fr;gap:2vw;}
.yt{position:relative;aspect-ratio:16/9;background:var(--g1);overflow:hidden;cursor:pointer;}
.yt.feat{grid-column:1/-1;}
.yt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .6s,filter .6s;}
.yt:hover img{transform:scale(1.03);filter:grayscale(0) contrast(1.02);}
.yt .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(0,0,0,.45);color:#fff;font-size:20px;cursor:pointer;transition:background .3s,transform .3s;display:flex;align-items:center;justify-content:center;padding-left:5px;}
.yt:hover .play{background:rgba(0,0,0,.75);transform:translate(-50%,-50%) scale(1.08);}
.yt .bar{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:10px;letter-spacing:.25em;color:#fff;gap:8px;}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt.on .play,.yt.on .bar,.yt.on img{display:none;}

/* ---------- screenings v2: sc-grid + lightbox ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vw;margin-top:3vw;}
.sc-card{position:relative;overflow:hidden;cursor:pointer;background:var(--g1);}
.sc-card.feat{grid-column:1/-1;aspect-ratio:21/9;}
.sc-card:not(.feat){aspect-ratio:16/9;}
.sc-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:transform .7s,filter .7s;}
.sc-card:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.02);}
.sc-card .corner{position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.6);transition:all .4s;}
.sc-card .c1{top:12px;left:12px;border-right:none;border-bottom:none;}
.sc-card .c2{top:12px;right:12px;border-left:none;border-bottom:none;}
.sc-card .c3{bottom:12px;left:12px;border-right:none;border-top:none;}
.sc-card .c4{bottom:12px;right:12px;border-left:none;border-top:none;}
.sc-card:hover .corner{width:24px;height:24px;}
.sc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.62);width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;padding-left:5px;color:#fff;font-size:19px;opacity:.55;transition:opacity .35s,transform .35s;}
.sc-card.feat .sc-play{opacity:.75;transform:translate(-50%,-50%) scale(1);}
.sc-card:hover .sc-play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.sc-card.feat:hover .sc-play{transform:translate(-50%,-50%) scale(1.1);}
.sc-info{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.9));display:flex;flex-direction:column;gap:3px;}
.sc-cat{font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.55);text-transform:uppercase;}
.sc-title{font-family:'Bebas Neue','Brinova',sans-serif;font-size:clamp(13px,1.3vw,19px);letter-spacing:.1em;color:#fff;line-height:1.1;}
.sc-card.feat .sc-title{font-size:clamp(18px,2vw,26px);}
/* lightbox */
.yt-lb{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .38s ease;}
.yt-lb.open{opacity:1;pointer-events:all;}
.yt-lb-inner{position:relative;width:min(88vw,1200px);aspect-ratio:16/9;transition:transform .38s cubic-bezier(.2,.8,.2,1);transform:scale(.93);}
.yt-lb.open .yt-lb-inner{transform:scale(1);}
.yt-lb-inner iframe{width:100%;height:100%;border:0;display:block;}
.yt-lb-inner .corner{position:absolute;width:20px;height:20px;border:1px solid rgba(255,255,255,.55);transition:none;}
.yt-lb-inner .c1{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.yt-lb-inner .c2{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.yt-lb-inner .c3{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.yt-lb-inner .c4{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.yt-lb-info{margin-top:18px;text-align:center;}
.yt-lb-cat{display:block;font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.42);margin-bottom:5px;}
.yt-lb-title{display:block;font-family:'Bebas Neue','Brinova',sans-serif;font-size:clamp(16px,2.2vw,30px);letter-spacing:.15em;color:#fff;}
.yt-lb-close{position:absolute;top:22px;right:24px;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:22px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:border-color .2s,background .2s;}
.yt-lb-close:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);}

/* ---------- brand zero: six steps (production-log grammar, on black) ---------- */
/* rows share ONE baseline: index, title and copy first-lines all sit on the
   same invisible line (align-items:baseline replaces the old padding-top hacks) */
.bz6 .bzrow{display:grid;grid-template-columns:90px minmax(0,.85fr) 1.15fr;gap:clamp(16px,3vw,48px);padding:4vh 0;align-items:center;}
.bz6 .bzidx{font-size:11px;letter-spacing:.3em;color:var(--g4);font-variant-numeric:tabular-nums;white-space:nowrap;}
.bz6 h3{font-size:clamp(26px,3.2vw,50px);line-height:.95;letter-spacing:.02em;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.bz6 .bzrow:hover h3{transform:translateX(14px);}
.bz6 .bzcopy{font-size:13px;line-height:1.8;color:var(--g5);max-width:560px;}
@media (max-width:820px){
  .bz6 .bzrow{grid-template-columns:1fr;gap:8px;padding:3.4vh 0;}
  .bz6 .bzidx{padding-top:0;}
  .bz6 .bzcopy{padding-top:0;}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ---------- render below-fold sections only when near ---------- */
.rows-section,.credits,#intermission,#feed,#cta,footer,.svc,.block{content-visibility:auto;contain-intrinsic-size:auto 800px;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .grain,#cursor,#rec,.scrolldown{display:none;}
  .rv{opacity:1;transform:none;}
  #statement p.big .w{opacity:1;}
}

/* ---------- mobile refinements ---------- */
@media (max-width:600px){
  :root{--secpad:clamp(52px,8vh,80px);}
  #hero .hud-c{display:none;}
  .hero-head span{font-size:clamp(34px,11vw,54px);white-space:normal;}
  .ticker{padding:14px 0;}
  .ticker span{font-size:10.5px;padding:0 18px;}
  .wfilter{gap:8px;margin-bottom:24px;}
  .wfilter button{padding:9px 14px;font-size:10px;}
  .hero-line{font-size:clamp(38px,12.5vw,60px);}
  #intro{padding:11vh 0 3vh;}
  .hero-sub{margin-top:18px;padding:0 6px;}
  .hero-cta{margin-top:26px;}
  .page-hero{padding-top:20vh;padding-bottom:8vh;}
  .page-hero h1{font-size:clamp(40px,12.5vw,64px);}
  .page-hero .meta{margin-top:26px;gap:14px;}
  #statement p.big{font-size:clamp(28px,7.4vw,40px);}
  .stats{margin-top:6vh;gap:32px 5vw;}
  .stat .num{font-size:clamp(38px,11vw,56px);}
  .num-head{margin-bottom:4vh;gap:12px;}
  .num-head h2{font-size:clamp(32px,8.6vw,44px);}
  .srow{padding:3.2vh 0;}
  .srow .name{font-size:clamp(26px,7.4vw,40px);}
  .mq-head{font-size:clamp(24px,6.4vw,34px);margin-bottom:4vh;}
  .mq-head span{letter-spacing:.25em;}
  #cta h2{font-size:clamp(36px,10.5vw,56px);}
  .feed-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:4vh;}
  .feed-head h2{font-size:clamp(34px,9.5vw,48px);}
  .feed-head .sub{text-align:left;max-width:100%;}
  .sheet{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sheet::-webkit-scrollbar{display:none;}
  .shframe{flex:0 0 58vw;scroll-snap-align:start;}
  .shframe .fcap{display:none;}
  .feed-foot{margin-top:4vh;}
  .li-grid{grid-template-columns:1fr;gap:14px;}
  .li-card{padding:22px 18px;}
  .li-card .q{font-size:18px;}
  .li-follow{margin-top:5vh;gap:12px 26px;}
  .yt-grid{grid-template-columns:1fr;gap:16px;}
  .yt .play{width:56px;height:56px;font-size:16px;}
  .sc-grid{grid-template-columns:1fr;gap:16px;margin-top:24px;}
  .sc-card.feat{aspect-ratio:16/9;}
  .sc-card:not(.feat){aspect-ratio:16/9;}
  .sc-play{opacity:.8!important;transform:translate(-50%,-50%) scale(1)!important;}
  .yt-lb-inner{width:96vw;}
  .yt-lb-info{margin-top:12px;}
  .yt-lb-title{font-size:clamp(14px,4vw,22px);}
  .yt-lb-close{top:14px;right:14px;width:38px;height:38px;font-size:18px;}
  .fwordmark{font-size:clamp(64px,16.5vw,110px);}
  .fgrid{gap:32px 6vw;font-size:12.5px;}
  .split h3{font-size:clamp(28px,8vw,40px);}
  .svc h2{font-size:clamp(30px,8.6vw,44px);}
  #intermission h2{font-size:clamp(36px,10vw,52px);}
}

/* ---------- designed keyboard focus (2026): hairline frame in the section's ink.
   :focus-visible = keyboard only; mouse clicks stay clean. currentColor gives
   white frames on black sections, black frames on white ones. ---------- */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

/* ---------- archive category sets (work page): desktop = flat grid via
   display:contents; <=600px each set becomes a labelled swipe strip ---------- */
.agrid .aset{display:contents;}
.aset .aset-label{display:none;}
.aset .aset-track{display:contents;}
@media (max-width:600px){
  .afilter{display:none;}
  .agrid.wgrid{display:block;}
  .agrid .aset{display:block;margin-bottom:34px;}
  .aset .aset-label{display:block;font-size:11px;letter-spacing:.3em;color:var(--g4);margin-bottom:12px;}
  .aset .aset-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .aset .aset-track::-webkit-scrollbar{display:none;}
  .aset .aset-track .frame{flex:0 0 58vw;scroll-snap-align:start;}
}

/* ---------- THE BRIEF: contact pre-qualification flow (2026-07, HXM S15).
   Chips reuse .wfilter grammar. Steps reveal progressively; .bf-pass unlocks
   WhatsApp (and .locknum links below), .bf-soft captures email via intake.php. ---------- */
.bf{max-width:880px;}
.bf-step{display:none;margin-bottom:4.5vh;}
.bf-step.on{display:block;}
.bf-q{display:block;font-size:11px;letter-spacing:.3em;font-weight:700;color:var(--g5);margin-bottom:16px;}
.bf-sub{font-size:12px;color:var(--g4);margin:-8px 0 14px;}
.bf-chips{margin-bottom:0;}
.bf [hidden]{display:none!important;}
.bf-pass,.bf-soft{margin-top:1vh;border:1px solid var(--g3);padding:clamp(22px,3vw,36px);}
.bf-pass h3,.bf-soft h3{font-size:clamp(26px,3.2vw,44px);line-height:.95;margin-bottom:10px;}
.bf-pass p,.bf-soft p{font-size:13px;line-height:1.8;color:var(--g5);max-width:520px;margin-bottom:18px;}
.bf-note{font-size:10px!important;letter-spacing:.22em;color:var(--g4)!important;margin:16px 0 0!important;}
#bf-form{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;}
#bf-email{flex:1;min-width:220px;background:none;border:none;border-bottom:1px solid var(--g3);color:#fff;font-family:var(--body);font-size:14px;letter-spacing:.04em;padding:12px 2px;border-radius:0;}
#bf-email::placeholder{color:var(--g4);}
#bf-email:focus{outline:none;border-color:#fff;}
#bf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.bf-ok,.bf-err{font-size:13px;line-height:1.7;color:#fff;margin:0!important;}
.csheet .lockmsg{border-bottom-color:var(--g3)!important;color:var(--g5);}
@media (max-width:600px){
  .bf-step{margin-bottom:32px;}
  .bf-pass,.bf-soft{padding:20px 16px;}
}