/* ============================================================
   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.
   ============================================================ */

@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{
  --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,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 100%);}
nav .logo img{height:32px;width:auto;}
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);border-bottom:1px solid var(--g2);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;border-bottom:1px solid currentColor;padding-bottom:24px;margin-bottom:7vh;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;}
.num-head .side{margin-left:auto;font-size:12px;color:inherit;opacity:.55;max-width:280px;line-height:1.6;}
@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,.45) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.62) 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::before{content:'\25B6';font-size:9px;}
#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;}}

/* ---------- 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 ---------- */
.page-hero{padding:26vh 0 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:16vh 0 12vh;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:14vh 0;}
.srow{position:relative;display:block;border-top:1px solid #000;padding:4.5vh 0;overflow:hidden;}
.srow:last-of-type{border-bottom:1px solid #000;}
.srow .inner{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);}
.srow .idx{font-size:12px;letter-spacing:.3em;color:#999;min-width:44px;flex-shrink:0;}
.srow .name{font-family:var(--display);font-size:clamp(30px,5.6vw,96px);line-height:.95;transition:letter-spacing .4s;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{letter-spacing:.06em;}
.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);pointer-events:none;z-index:2;}
.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 ---------- */
.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(1) contrast(1.2);}
.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);border-top:1px solid var(--g2);border-bottom:1px solid var(--g2);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:6vh;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:14vh 0;background:var(--white);color:var(--black);}
#intermission .head{text-align:center;margin-bottom:6vh;}
#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:18vh 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;}

/* ---------- content blocks (inner pages) ---------- */
.block{padding:12vh 0;}
.block.white{background:var(--white);color:var(--black);}
.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;border-bottom:1px solid var(--g2);position:relative;font-size:15px;line-height:1.6;}
.block.white .checklist li{border-color:#ddd;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;}}
.step{counter-increment:st;border-top:1px solid currentColor;padding-top:20px;}
.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{border-top:1px solid #000;padding:9vh 0;}
.svc:first-of-type{border-top:none;}
.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:#888;line-height:2;}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.06);}
.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;}}
.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;}
.member:hover .ph img{transform:scale(1.05);}
.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;}

/* ---------- footer ---------- */
footer{background:var(--black);border-top:1px solid var(--g2);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;border-top:1px solid var(--g2);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;}}

/* ---------- 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,#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){
  .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:20vh 0 8vh;}
  .page-hero h1{font-size:clamp(40px,12.5vw,64px);}
  .page-hero .meta{margin-top:26px;gap:14px;}
  #statement{padding:11vh 0 9vh;}
  #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:5vh;gap:12px;}
  .num-head h2{font-size:clamp(32px,8.6vw,44px);}
  .rows-section,.block{padding:9vh 0;}
  .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);}
  #cta{padding:13vh 0;}
  .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);}
}