/* =========================================================
   PRO INTAGE™ — Cinematic landing · base, HUD, hero, studio
   ========================================================= */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#060708; --ink-2:#0b0d10; --ink-3:#12151a;
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2);
  --steel:#7f8790; --silver:#c3c9d0; --paper:#eef1f4;
  --rec:#ff2d1f; --warm:#ffb46a;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,3.2vw,48px);
  --ease:cubic-bezier(.19,1,.22,1);
  --hud-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-display);font-size:16px;line-height:1.5;font-weight:400;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol,dl,dd,figure{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--rec);color:#fff}
:focus-visible{outline:1px solid var(--rec);outline-offset:4px}

.container{padding-inline:var(--gutter);max-width:1680px;margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.display{font-stretch:125%;font-weight:800;line-height:.88;letter-spacing:-.025em;font-size:clamp(2.5rem,7vw,7.4rem);text-transform:uppercase}
.display em,.hero__title em{font-style:normal;color:transparent;-webkit-text-stroke:.018em var(--paper)}
.label{display:flex;align-items:center;gap:14px;color:var(--silver);margin-bottom:clamp(20px,3vw,40px)}
.label span{color:var(--steel)}
.label::before{content:"";width:7px;height:7px;background:var(--rec);flex:none}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 12px var(--rec);animation:blink 1.2s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}

/* ---------- Preloader / film leader ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--ink);display:grid;place-items:center}
.loader__leader{position:relative;width:min(240px,56vw);aspect-ratio:1;display:grid;place-items:center}
.loader__sweep{position:absolute;inset:0;border-radius:50%;--p:0;background:conic-gradient(rgba(255,255,255,.13) calc(var(--p)*1turn),transparent 0)}
.loader__rings{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.loader__cross{position:absolute;background:rgba(255,255,255,.25)}
.loader__cross--h{left:-30%;right:-30%;top:50%;height:1px}
.loader__cross--v{top:-30%;bottom:-30%;left:50%;width:1px}
.loader__count{position:relative;font-stretch:125%;font-weight:800;font-size:clamp(4.5rem,12vw,8rem);line-height:1;font-variant-numeric:tabular-nums}
.loader__meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;display:flex;justify-content:space-between;gap:16px;color:var(--steel)}

/* ---------- Global camera FX ---------- */
.fx-grain{position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.fx-vignette{position:fixed;inset:0;z-index:899;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%)}
.fx-flash{position:fixed;inset:0;z-index:901;pointer-events:none;background:#fff;opacity:0}

/* ---------- Viewfinder cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:1001;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .3s}
.has-cursor .cursor{opacity:1}
.cursor__b{position:absolute;width:9px;height:9px;border:1px solid var(--paper)}
.cursor__b.tl{top:0;left:0;border-right:0;border-bottom:0}.cursor__b.tr{top:0;right:0;border-left:0;border-bottom:0}
.cursor__b.bl{bottom:0;left:0;border-right:0;border-top:0}.cursor__b.br{bottom:0;right:0;border-left:0;border-top:0}
.cursor__dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--paper);transition:background .3s,transform .3s}
.cursor__label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;color:var(--paper);opacity:0;transition:opacity .3s}
.cursor.is-active{width:78px;height:78px;margin:-39px 0 0 -39px}
.cursor.is-active .cursor__dot{background:var(--rec);transform:scale(1.6)}
.cursor.is-active .cursor__label{opacity:1}
.cursor.is-down .cursor__b{border-color:var(--rec)}
@media (hover:hover) and (pointer:fine){.has-cursor,.has-cursor *{cursor:none!important}}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0 0 auto;z-index:800;height:var(--hud-h);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(16px,3vw,48px);padding-inline:var(--gutter);background:linear-gradient(rgba(6,7,8,.7),rgba(6,7,8,0));transition:transform .6s var(--ease)}
.hud.is-hidden{transform:translateY(-100%)}
.hud__logo img{height:clamp(22px,2vw,28px);width:auto}
.hud__nav{display:flex;justify-content:center;gap:clamp(14px,2.2vw,34px)}
.hud__nav a{position:relative;color:var(--silver);padding:6px 0;transition:color .3s}
.hud__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rec);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hud__nav a:hover,.hud__nav a.is-current{color:var(--paper)}
.hud__nav a:hover::after,.hud__nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.hud__rec{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;color:var(--paper)}
.hud__burger{display:none;padding:8px 0;letter-spacing:.14em}

.viewfinder{position:fixed;inset:0;z-index:700;pointer-events:none;color:rgba(238,241,244,.5);font-size:10px}
.vf-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(255,255,255,.35)}
.vf-corner.tl{top:calc(var(--hud-h) + 4px);left:calc(var(--gutter)*.5);border-right:0;border-bottom:0}
.vf-corner.tr{top:calc(var(--hud-h) + 4px);right:calc(var(--gutter)*.5);border-left:0;border-bottom:0}
.vf-corner.bl{bottom:14px;left:calc(var(--gutter)*.5);border-right:0;border-top:0}
.vf-corner.br{bottom:14px;right:calc(var(--gutter)*.5);border-left:0;border-top:0}
.vf{position:absolute;white-space:nowrap}
.vf.tl{top:calc(var(--hud-h) + 12px);left:calc(var(--gutter)*.5 + 34px)}
.vf.tr{top:calc(var(--hud-h) + 12px);right:calc(var(--gutter)*.5 + 34px)}
.vf.bl{bottom:20px;left:calc(var(--gutter)*.5 + 34px)}
.vf.br{bottom:20px;right:calc(var(--gutter)*.5 + 34px)}
.vf b{color:var(--paper);font-weight:500}
.vf-progress{position:absolute;left:50%;bottom:24px;width:140px;height:1px;margin-left:-70px;background:rgba(255,255,255,.18)}
.vf-progress i{position:absolute;inset:0;background:var(--paper);transform-origin:left;transform:scaleX(0)}

.menu{position:fixed;inset:0;z-index:790;background:rgba(6,7,8,.96);display:grid;align-items:center;padding:calc(var(--hud-h) + 24px) var(--gutter) 40px}
.menu nav{display:grid;gap:8px}
.menu a{display:flex;align-items:baseline;gap:14px;font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,11vw,4rem);line-height:1}
.menu small{color:var(--steel)}

/* ---------- SC.01 Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(90% 70% at 50% 38%,#161a20 0%,#08090b 60%,#050506 100%)}
.hero__gl{position:absolute;inset:0;width:100%;height:100%}
.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.no-webgl .hero__fallback{opacity:.7}
.letterbox i{position:absolute;left:0;right:0;height:calc(var(--lb,0px) * var(--lbk,1));background:#000;z-index:2}
.letterbox i:first-child{top:0}.letterbox i:last-child{bottom:0}
.hero__content{position:absolute;inset:auto 0 0;z-index:3;display:grid;grid-template-columns:1fr minmax(240px,340px);align-items:end;gap:32px;padding:0 var(--gutter) clamp(56px,9vh,110px)}
.eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:12px;color:var(--silver)}
.hero__title{font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6.4vw,7.6rem);line-height:.86;letter-spacing:-.03em}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .line>span{display:inline-block;transform:translateY(105%)}
.hero__aside{display:grid;gap:26px;color:var(--silver);font-size:15px;line-height:1.55;padding-bottom:.6vw}
.scroll-cue{display:flex;align-items:center;gap:14px;color:var(--paper)}
.scroll-cue__bar{position:relative;width:1px;height:44px;background:rgba(255,255,255,.2);overflow:hidden}
.scroll-cue__bar i{position:absolute;left:0;top:0;width:1px;height:40%;background:var(--paper);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
.reveal-up{opacity:0;transform:translateY(24px)}

/* ---------- SC.02 Reel ---------- */
.reel{position:relative;z-index:2;background:transparent}
.reel__pin{position:relative;height:100vh;height:100svh;overflow:hidden;perspective:1600px;display:grid;place-items:center}
.reel__words{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--gutter);font-size:clamp(2.6rem,9.5vw,11rem);pointer-events:none;z-index:1}
.reel__w{display:block;white-space:nowrap}
.reel__w--r{align-self:flex-end}
.reel__frame{position:relative;z-index:2;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#000;transform:scale(.4) rotateX(22deg) rotateZ(-3deg);transform-origin:50% 50%;will-change:transform,border-radius;border-radius:24px}
.reel__frame video{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.reel__guides i{position:absolute;width:26px;height:26px;border:1px solid rgba(255,255,255,.6)}
.reel__guides i:nth-child(1){top:5%;left:5%;border-right:0;border-bottom:0}
.reel__guides i:nth-child(2){top:5%;right:5%;border-left:0;border-bottom:0}
.reel__guides i:nth-child(3){bottom:5%;left:5%;border-right:0;border-top:0}
.reel__guides i:nth-child(4){bottom:5%;right:5%;border-left:0;border-top:0}
.reel__ui{position:absolute;left:calc(5% + 40px);right:calc(5% + 40px);top:calc(5% + 4px);display:flex;justify-content:space-between;gap:12px;color:var(--paper)}
.reel__ui span{display:flex;align-items:center;gap:10px}
.reel__play{position:absolute;left:50%;top:50%;width:clamp(110px,11vw,150px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:rgba(6,7,8,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .6s var(--ease),background .4s}
.reel__play:hover{background:rgba(255,45,31,.85);transform:translate(-50%,-50%) scale(1.08)}
.reel__play-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.6)}
.reel__play-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(255,255,255,.28);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- SC.03 Studio ---------- */
.studio{position:relative;overflow:hidden;padding-block:clamp(110px,20vh,220px);background:linear-gradient(var(--ink),var(--ink-2))}
.studio__depth{position:absolute;inset:0;pointer-events:none}
.depth{position:absolute;will-change:transform}
.depth--a{right:-4vw;top:6%;width:clamp(200px,30vw,520px);opacity:.34;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.depth--b{left:-6vw;bottom:-6%;width:clamp(180px,24vw,420px);opacity:.55;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.studio .container{position:relative}
.manifesto{font-stretch:112%;font-weight:500;font-size:clamp(1.7rem,3.9vw,4.2rem);line-height:1.06;letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.manifesto .w{display:inline-block;will-change:filter,opacity}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(70px,12vh,140px);border-top:1px solid var(--line)}
.stat{padding:28px 24px 0 0;border-right:1px solid var(--line);display:grid;gap:14px;align-content:start}
.stat+.stat{padding-left:24px}
.stat:last-child{border-right:0}
.stat__num{font-stretch:125%;font-weight:800;font-size:clamp(3rem,6.4vw,6.6rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat__label{color:var(--steel);max-width:24ch}
.creed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);margin-top:clamp(70px,12vh,140px)}
.creed__item h3{display:flex;gap:10px;color:var(--paper);margin-bottom:18px}
.creed__item h3 span{color:var(--rec)}
.creed__item p{color:var(--silver);font-size:clamp(16px,1.3vw,20px);line-height:1.6;max-width:46ch}