/* ═══════════════════════════════════════════════════════════════
   GENZ — The Idea Company
   Black · neon red · paper.  Archivo (wide ↔ normal) + Courier Prime.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0B; --ink-2:#131315;
  --paper:#F3F2EF; --paper-2:#E6E5E2;
  --red:#FF1F2D;            /* neon — display only */
  --red-btn:#E3111E;        /* buttons: 4.8:1 with white text */
  --mute:#5F5F64;           /* secondary text on light */
  --mute-d:#9A9AA0;         /* secondary text on dark */
  --line:rgba(10,10,11,.13);
  --line-d:rgba(255,255,255,.14);
  --f-sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Courier Prime","Courier New",Courier,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(18px,3.4vw,56px);
  --frame:12px;
  --rad:28px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;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:#070707;color:var(--paper);font-family:var(--f-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
body.is-loading,body.is-locked{overflow:hidden}
h1,h2,h3,p,ul,ol,dl,dd,dt{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg,canvas{display:block}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
::selection{background:var(--red);color:#fff}
.red{color:var(--red)}
.skip{position:fixed;left:16px;top:-80px;z-index:2000;background:#fff;color:#000;padding:12px 18px;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:16px}

.tag{font:700 11px/1.2 var(--f-sans);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}
.h-xl{font-size:clamp(2.5rem,7.6vw,7.4rem);font-weight:800;line-height:.95;letter-spacing:-.05em}
.h-xl em{font-style:normal;color:var(--red)}

/* split-word reveals */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .05em .16em;margin:-.08em -.05em -.16em}
.wi{display:inline-block;will-change:transform}
.is-done .w{overflow:visible}

/* ───────────── Preloader ───────────── */
.loader{position:fixed;inset:0;z-index:1000;background:#050505;display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-io),visibility 0s 1.1s}
body.is-ready .loader{clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none}
.loader__sign{width:min(52vw,320px);aspect-ratio:1;animation:neonOn 1.7s steps(1,end) both}
.loader__sign img{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(255,31,45,.5))}
.loader__row{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + 16px);display:flex;justify-content:space-between;align-items:flex-end;
  font:700 11px/1 var(--f-sans);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:#8d8d92}
.loader__count{font:900 clamp(52px,9vw,128px)/.78 var(--f-sans);font-stretch:125%;letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.loader__bar{position:absolute;left:var(--gut);right:var(--gut);bottom:var(--gut);height:2px;background:rgba(255,255,255,.12)}
.loader__bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px var(--red)}
@keyframes neonOn{0%{opacity:.04}9%{opacity:.9}13%{opacity:.08}22%{opacity:.08}26%{opacity:1}31%{opacity:.25}37%{opacity:1}100%{opacity:1}}
@keyframes hum{0%,91%,95%,98%,100%{opacity:1}92%{opacity:.55}96%{opacity:.75}}

/* ───────────── Cursor ───────────── */
.cursor{position:fixed;left:0;top:0;z-index:900;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid #fff;
  mix-blend-mode:difference;pointer-events:none;opacity:0;display:grid;place-items:center;
  transition:opacity .3s,width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,border-color .3s}
body.has-cursor .cursor{opacity:1}
.cursor.is-link{width:62px;height:62px;margin:-31px 0 0 -31px;background:#fff}
.cursor.is-label{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--red-btn);border-color:var(--red-btn);mix-blend-mode:normal}
.cursor span{font:800 10px/1 var(--f-sans);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-label span{opacity:1}

/* ───────────── Navigation ───────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc(var(--frame) + 12px) calc(var(--frame) + var(--gut) - 10px) 0;
  color:var(--ink);pointer-events:none;transition:transform .6s var(--ease),color .3s}
.nav__in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px;padding:0 9px 0 10px;margin:0 auto;max-width:100%;
  border-radius:999px;border:1px solid transparent;transition:background .4s,border-color .4s,box-shadow .4s,max-width .7s var(--ease)}
.nav.is-stuck .nav__in{max-width:1120px;background:rgba(243,242,239,.74);border-color:rgba(10,10,11,.08);box-shadow:0 14px 40px -16px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.nav.is-dark,body.menu-open .nav{color:var(--paper)}
.nav.is-dark.is-stuck .nav__in{background:rgba(18,18,20,.68);border-color:rgba(255,255,255,.1)}
body.menu-open .nav .nav__in{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.is-hidden{transform:translateY(-140%)}
body.menu-open .nav{transform:none}

.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-stretch:125%;font-size:20px;letter-spacing:-.03em;line-height:1}
.brand__mark{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 20px -8px rgba(255,31,45,.8);transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-12deg) scale(1.06)}
.brand__name b{color:var(--red);font-weight:900}

.nav__links{display:flex;gap:clamp(14px,2.2vw,34px);font-size:14px;font-weight:500}
.nav__links a{position:relative;padding:12px 2px;opacity:.7;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{opacity:1}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:0 50%}

.btn{--h:54px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:var(--h);padding:0 26px;border-radius:999px;
  background:var(--red-btn);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;box-shadow:0 16px 30px -14px rgba(227,17,30,.8);transition:color .35s,box-shadow .35s}
.btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--ink);transform:translateY(102%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
.btn svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--sm{--h:44px;padding:0 20px;font-size:13.5px}
.nav.is-dark .btn::before{background:#fff}
.nav.is-dark .btn:hover{color:var(--ink)}

.burger{display:none;position:relative;width:46px;height:46px;border-radius:50%;background:var(--ink)}
.burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:first-child{top:19px}.burger i:last-child{top:26px}
.burger[aria-expanded="true"] i:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:22px;transform:rotate(-45deg)}
.nav.is-dark .burger,body.menu-open .burger{background:var(--paper)}
.nav.is-dark .burger i,body.menu-open .burger i{background:var(--ink)}

.menu{position:fixed;inset:0;z-index:95;background:#070707;color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:110px var(--gut) 36px;
  clip-path:circle(0 at calc(100% - 52px) 52px);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu.is-open{clip-path:circle(160% at calc(100% - 52px) 52px);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
.menu__links{display:grid}
.menu__links a{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-d);
  font:900 clamp(30px,10.5vw,60px)/1.05 var(--f-sans);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase}
.menu__links small{font:700 11px/1 var(--f-sans);letter-spacing:.14em;color:var(--red)}
.menu__foot{margin-top:auto;padding-top:28px;font:700 11px/1 var(--f-sans);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}

/* ═════════════ 01 · HERO ═════════════ */
.hero{padding:var(--frame)}
.hero__panel{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;min-height:max(calc(100svh - 2*var(--frame)),640px);
  border-radius:var(--rad);color:var(--ink);
  background:
    radial-gradient(52% 62% at 72% 44%,rgba(255,31,45,.13),transparent 64%),
    radial-gradient(70% 60% at 78% 108%,rgba(255,255,255,.95),transparent 62%),
    linear-gradient(180deg,#F7F6F3,#EBE9E5)}
.hero__panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(10,10,11,.045) 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,rgba(10,10,11,.045) 1px,transparent 1px) 0 0/8.333% 100%;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 45%,#000,transparent);mask-image:radial-gradient(70% 70% at 70% 45%,#000,transparent)}
.hero__fig{position:absolute;top:0;right:0;bottom:0;width:70%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 26%);mask-image:linear-gradient(90deg,transparent 2%,#000 26%)}
.hero__fig canvas{position:absolute;inset:0;width:100%;height:100%}
.hero__halo{position:absolute;left:36%;top:10%;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,31,45,.22),transparent);filter:blur(34px)}

.hero__copy{position:relative;z-index:3;width:min(56%,760px);display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(104px,15.5vh,156px) 0 clamp(20px,3.2vh,34px) calc(var(--gut) + 4px)}
.chip{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px 0 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(10,10,11,.08);
  font-size:12.5px;font-weight:600;box-shadow:0 8px 20px -12px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,31,45,.5)}100%{box-shadow:0 0 0 9px rgba(255,31,45,0)}}
.hero__title{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(2.5rem,min(5vw,10vh),5.3rem);font-weight:800;line-height:.98;letter-spacing:-.048em}
.hero__title .line{display:block;overflow:hidden;white-space:nowrap;padding:.04em .06em .1em 0;margin:-.04em 0 -.1em}
.hero__title .line>span{display:block;will-change:transform}
.hero__lead{margin-top:clamp(16px,2.6vh,26px);max-width:45ch;font-size:clamp(15px,1.12vw,17px);line-height:1.6;color:#45454a}
.hero__cta{margin-top:clamp(20px,3.4vh,34px);display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:12px}
.play__btn{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background .3s,transform .5s var(--ease)}
.play__btn svg{width:18px;height:18px;fill:var(--red-btn);stroke:none;transition:fill .3s}
.play:hover .play__btn{background:var(--ink);transform:scale(1.08)}
.play:hover .play__btn svg{fill:#fff}
.play__txt{display:grid;line-height:1.25}
.play__txt b{font-size:14px;font-weight:600}
.play__txt small{font-size:12px;color:var(--mute)}
.stats{margin:clamp(22px,4.4vh,46px) 0 clamp(18px,3vh,30px);display:flex;gap:clamp(14px,2.2vw,34px)}
.stats>div{padding-right:clamp(14px,2.2vw,34px);border-right:1px solid var(--line)}
.stats>div:last-child{border:0;padding-right:0}
.stats dt{font-size:clamp(22px,2.3vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stats dd{margin-top:6px;font-size:12px;color:var(--mute);white-space:nowrap}

.latest{margin-top:auto;display:flex;align-items:center;gap:14px;max-width:390px;padding:10px 14px 10px 10px;border-radius:18px;background:rgba(255,255,255,.74);border:1px solid rgba(10,10,11,.07);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--ease),box-shadow .5s}
.latest:hover{transform:translateY(-4px);box-shadow:0 28px 50px -24px rgba(0,0,0,.5)}
.latest__thumb{flex:none;width:76px;height:60px;border-radius:12px;background:var(--red);color:var(--ink);display:grid;place-items:center}
.latest__thumb svg{width:42px;height:42px;stroke:none}
.latest__txt b{display:block;font-size:13.5px;font-weight:700}
.latest__txt small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--mute)}
.latest__go{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--ease)}
.latest__go svg{width:15px;height:15px}
.latest:hover .latest__go{background:var(--red-btn);color:#fff;border-color:var(--red-btn);transform:rotate(-45deg)}

.hero__cards{position:absolute;z-index:4;right:clamp(14px,2vw,30px);top:15%;display:grid;gap:clamp(24px,5.4vh,56px);width:clamp(214px,17.4vw,252px)}
.gcard{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 20px 44px -22px rgba(10,10,11,.4),inset 0 1px 0 rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.gcard--1{margin-left:-9%;margin-right:9%}.gcard--3{margin-left:-5%;margin-right:5%}
.gcard.is-float{animation:bob 6.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.gcard::before{content:"";position:absolute;right:100%;top:50%;width:clamp(26px,3.6vw,58px);height:1px;background:linear-gradient(90deg,transparent,rgba(10,10,11,.4))}
.gcard::after{content:"";position:absolute;right:calc(100% + clamp(26px,3.6vw,58px));top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--red),0 0 14px var(--red)}
.gcard__ico{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--red-btn);display:grid;place-items:center;box-shadow:0 8px 16px -10px rgba(0,0,0,.45)}
.gcard__ico svg{width:20px;height:20px}
.gcard__txt b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.gcard__txt small{display:block;font-size:12px;line-height:1.35;color:var(--mute)}
.gcard__go{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.gcard__go svg{width:13px;height:13px}

.scrollhint{position:absolute;z-index:4;right:clamp(18px,2.6vw,40px);bottom:clamp(18px,3vh,30px);display:grid;justify-items:center;gap:8px;font-size:11px;font-weight:600}
.mouse{position:relative;width:20px;height:32px;border:1.5px solid var(--ink);border-radius:12px}
.mouse i{position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:var(--red);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(10px);opacity:0}}

/* ═════════════ Crossing bands ═════════════ */
.bands{position:relative;height:clamp(150px,21vw,260px);overflow:hidden;overflow:clip}
.band{--bh:clamp(46px,6vw,80px);position:absolute;left:-8%;right:-8%;top:50%;height:var(--bh);margin-top:calc(var(--bh)/-2);display:flex;align-items:center;overflow:hidden}
.band--red{background:var(--red);color:var(--ink);transform:rotate(-3.2deg);z-index:2;box-shadow:0 0 70px rgba(255,31,45,.4)}
.band--ink{background:#121214;color:var(--paper);transform:rotate(2.6deg);border-block:1px solid rgba(255,255,255,.14)}
.band__track{display:flex;flex:none;white-space:nowrap;font:900 clamp(18px,2.6vw,36px)/1 var(--f-sans);font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase;animation:marq 30s linear infinite;will-change:transform}
.band__track--rev{animation-direction:reverse;animation-duration:44s}
.band__track span{display:inline-flex;align-items:center;gap:.8em;padding-right:.8em}
.band__track span::after{content:"";width:.42em;height:.42em;background:currentColor;transform:rotate(45deg)}
.band--ink .band__track span::after{background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ═════════════ 02 · MANIFESTO ═════════════ */
.mani{position:relative;background:#070707;color:#EDE9E2}
.mani__stage{position:relative;overflow:hidden;display:flex;align-items:center;min-height:max(100svh,700px);padding:clamp(90px,13vh,150px) var(--gut) clamp(70px,11vh,120px)}
.mani__fig{position:absolute;top:0;right:0;bottom:0;width:62%;pointer-events:none}
.mani__fig canvas{position:absolute;inset:0;width:100%;height:100%}
#figMani{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.mani__copy{position:relative;z-index:2;width:min(100%,700px);font-family:var(--f-mono)}
.mono-tag{font:400 13px/1.4 var(--f-mono);letter-spacing:.02em;color:#9a968e}
.type{margin-top:26px;min-height:4.64em;font:700 clamp(1.7rem,4.25vw,3.9rem)/1.16 var(--f-mono);letter-spacing:-.04em;white-space:pre-wrap}
.type .s{position:relative;white-space:nowrap;color:#827e76}
.type .s::after{content:"";position:absolute;left:-.07em;right:-.07em;top:54%;height:.09em;background:var(--red);box-shadow:0 0 14px rgba(255,31,45,.9);transform:scaleX(0);transform-origin:0 50%;transition:transform .34s var(--ease-io)}
.type .s.is-struck::after{transform:scaleX(1)}
.type .r{color:var(--red);text-shadow:0 0 24px rgba(255,31,45,.6)}
.type .caret{display:inline-block;width:.52em;height:.98em;margin-left:.08em;background:#EDE9E2;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mani__lead{margin-top:28px;max-width:54ch;font:400 15px/1.75 var(--f-mono);color:#aeaaa2}
.mani__cta{margin-top:34px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.key{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:5px;background:#EDE9E2;color:#0a0a0b;font:700 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 5px 0 #8a867e;transition:transform .12s,box-shadow .12s,background .2s}
.key:hover{background:#fff}
.key:active{transform:translateY(4px);box-shadow:0 1px 0 #8a867e}
.ulink{padding:8px 0 7px;border-bottom:1px dashed currentColor;font:400 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#cfcac1;transition:color .2s}
.ulink:hover{color:var(--red)}
.mani__meta{position:absolute;left:var(--gut);bottom:26px;z-index:2;display:flex;gap:28px;font:400 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#77736c}

.mani__say{max-width:1480px;margin:0 auto;padding:clamp(60px,10vw,150px) var(--gut) clamp(90px,14vw,200px)}
.say{margin-top:28px;font-size:clamp(1.7rem,4.6vw,4.7rem);font-weight:700;line-height:1.07;letter-spacing:-.045em}
.say .rw{display:inline-block}

/* ═════════════ 03 · WORK ═════════════ */
.work{position:relative;padding:0 var(--frame)}
.work__pin{height:100svh;min-height:600px;padding:var(--frame) 0}
.work__panel{position:relative;isolation:isolate;overflow:hidden;height:100%;border-radius:var(--rad);color:var(--ink);
  background:radial-gradient(70% 60% at 50% 104%,#F7F6F3,transparent 70%),#E3E2DE;
  --pf:clamp(2.5rem,min(10.4vw,17.5vh),10.5rem)}
.work__head{position:absolute;left:0;right:0;top:clamp(74px,12.5vh,126px);height:calc(var(--pf)*1.6)}
.work__block{position:absolute;z-index:-1;left:41.6%;top:-17%;width:calc(var(--pf)*.92);height:134%;background:var(--red)}
.pf{position:absolute;left:0;right:0;top:50%;margin:calc(var(--pf)*-.57) 0 0;text-align:center;font:900 var(--pf)/.8 var(--f-sans);font-stretch:125%;letter-spacing:-.035em;--x:46%}
.pf__row{position:relative;display:block;width:max-content;margin:0 auto}
.pf__row--b{position:absolute;left:0;right:0;top:.34em}
.pf__out{display:block;color:#fff;-webkit-text-stroke:.02em var(--ink);paint-order:stroke fill;mix-blend-mode:multiply}
.pf__fill{position:absolute;inset:0;color:var(--ink)}
.pf__row--a .pf__fill{clip-path:inset(-20% calc(100% - var(--x)) -20% -5%)}
.pf__row--a .pf__out{clip-path:inset(-20% -5% -20% var(--x))}
.pf__row--b .pf__fill{clip-path:inset(-20% -5% -20% var(--x))}
.pf__row--b .pf__out{clip-path:inset(-20% calc(100% - var(--x)) -20% -5%)}
.work__welcome{position:absolute;left:clamp(18px,12.5vw,190px);top:-8%;font:900 clamp(9px,1.02vw,14px)/1.02 var(--f-sans);font-stretch:125%;letter-spacing:.01em;text-transform:uppercase}
.work__target{position:absolute;right:clamp(18px,12.5vw,190px);top:-10%;width:clamp(18px,2vw,28px);height:auto;stroke-width:2.6}
.work__target .f{fill:currentColor;stroke:none}
.work__side{position:absolute;bottom:-9%;font:700 clamp(8px,.72vw,10.5px)/1 var(--f-sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
.work__side--l{left:clamp(18px,12.5vw,190px)}.work__side--r{right:clamp(18px,12.5vw,190px)}
.work__arrow{position:absolute;top:50%;margin-top:-5px;border:5px solid transparent}
.work__arrow--l{left:3.4%;border-left-color:var(--ink)}.work__arrow--r{right:3.4%;border-right-color:var(--ink)}
.work__ticks{position:absolute;left:3.6%;right:3.6%;top:-16%;display:flex;justify-content:space-between}
.work__ticks i{position:relative;width:7px;height:7px;opacity:.55;
  background:linear-gradient(var(--ink),var(--ink)) 50% 50%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 50%/1px 100% no-repeat}
.work__ticks i::after{content:"";position:absolute;left:0;top:calc(var(--pf)*2.1);width:7px;height:7px;background:inherit}

.wheel{position:absolute;z-index:2;left:50%;top:var(--cy,130%);width:0;height:0;outline:none;--cw:220px;--ch:300px;--R:580px;--Rd:400px}
.wheel__rot{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--rot,0deg));will-change:transform}
.card{position:absolute;left:calc(var(--cw)/-2);top:calc(var(--ch)/-2);width:var(--cw);height:var(--ch);overflow:hidden;
  transform:rotate(var(--a)) translateY(calc(var(--R)*-1 - var(--lift,0px)));transition:transform .7s var(--ease),box-shadow .5s;
  display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--cw)*.065);border-radius:calc(var(--cw)*.075);text-align:left;
  background:var(--bg);color:var(--fg);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 10px 20px -12px rgba(0,0,0,.35);
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.card.is-active{--lift:calc(var(--cw)*.085);box-shadow:0 44px 70px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
.card>*{position:relative;z-index:1}
.card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.t-red{--bg:#FF1F2D;--fg:#0A0A0B;--acc:#0A0A0B}
.t-ink{--bg:#0C0C0D;--fg:#F3F2EF;--acc:#FF1F2D}
.t-paper{--bg:#F8F7F4;--fg:#0A0A0B;--acc:#FF1F2D}
.t-grey{--bg:#CECDC8;--fg:#0A0A0B;--acc:#FF1F2D}
.t-ink::before{background:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.5px) 0 0/9px 9px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 62%);mask-image:linear-gradient(200deg,#000,transparent 62%)}
.t-paper::before{background:linear-gradient(rgba(10,10,11,.08) 1px,transparent 1px) 0 0/100% 12.5%,linear-gradient(90deg,rgba(10,10,11,.08) 1px,transparent 1px) 0 0/16.66% 100%}
.t-red::before{background:repeating-linear-gradient(135deg,rgba(10,10,11,.09) 0 1px,transparent 1px 9px)}
.t-grey::before{background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.75),transparent 62%)}
.card__top{display:flex;justify-content:space-between;font:800 calc(var(--cw)*.044)/1 var(--f-sans);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.card__top i,.card__type{font-style:normal}
.card__glyph{width:60%;margin:auto;aspect-ratio:1}
.card__glyph svg{width:100%;height:100%;stroke:none}
.card__name{display:block;font:900 calc(var(--cw)*.084)/1 var(--f-sans);font-stretch:125%;letter-spacing:-.03em;text-transform:uppercase}
.card__type{display:block;margin-top:calc(var(--cw)*.032);font:600 calc(var(--cw)*.047)/1 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;opacity:.72}
.card__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}

.wheel__dial{position:absolute;z-index:3;left:calc(var(--Rd)*-1);top:calc(var(--Rd)*-1);width:calc(var(--Rd)*2);height:calc(var(--Rd)*2);border-radius:50%;touch-action:pan-y;
  background:radial-gradient(circle at 50% 0,#fff,#F0EFEC 34%);box-shadow:0 -26px 60px -24px rgba(0,0,0,.22),inset 0 0 0 1px rgba(10,10,11,.07)}
.wheel__ring{position:absolute;inset:calc(var(--cw)*.6);border-radius:50%;border:1px dashed rgba(10,10,11,.25)}
.dial{position:absolute;left:50%;top:calc(var(--cw)*.045);transform:translateX(-50%);width:min(84vw,480px);display:grid;justify-items:center;gap:5px;text-align:center}
.dial__mark{border:6px solid transparent;border-top-width:0;border-bottom:9px solid var(--ink)}
.dial__idx{margin-top:3px;font:800 10.5px/1 var(--f-sans);font-stretch:125%;letter-spacing:.18em;color:var(--red-btn)}
.dial__title{font:900 clamp(17px,2.1vw,30px)/1.02 var(--f-sans);font-stretch:125%;letter-spacing:-.035em;text-transform:uppercase}
.dial__meta{font-size:12.5px;font-weight:500;color:var(--mute)}
.dial.is-swap>*:not(.dial__mark){animation:swap .5s var(--ease) both}
.dial.is-swap .dial__title{animation-delay:.04s}.dial.is-swap .dial__meta{animation-delay:.08s}
@keyframes swap{from{opacity:0;transform:translateY(10px)}}

.work__ui{position:absolute;z-index:5;left:0;right:0;bottom:clamp(14px,2.4vh,26px);display:flex;align-items:center;gap:14px;padding:0 clamp(14px,2.6vw,40px);pointer-events:none}
.rbtn{pointer-events:auto;flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background .3s,transform .5s var(--ease)}
.rbtn:hover{background:var(--red-btn);transform:scale(1.08)}
.rbtn svg{width:20px;height:20px}
.work__hint{margin-right:auto;font:700 10px/1 var(--f-sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.wheel.is-drag .card{cursor:grabbing}

/* ═════════════ 04 · SERVICES ═════════════ */
.svc{background:#070707;color:var(--paper);padding:clamp(90px,13vw,190px) var(--gut) clamp(80px,11vw,160px)}
.svc__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:22px 40px;margin-bottom:clamp(40px,6vw,90px)}
.svc__head .tag{grid-column:1/-1}
.svc__intro{max-width:30ch;padding-bottom:.5em;font-size:15px;color:var(--mute-d)}
.svc__list{border-top:1px solid var(--line-d)}
.svc__row{position:relative;isolation:isolate;display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,1fr) 250px 54px;align-items:center;gap:0 clamp(16px,2.6vw,44px);
  padding:clamp(20px,2.6vw,38px) clamp(8px,1.4vw,22px);border-bottom:1px solid var(--line-d);transition:color .35s}
.svc__row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.svc__n{font:700 12px/1 var(--f-sans);font-stretch:125%;letter-spacing:.14em;color:var(--red);transition:color .35s}
.svc__row h3{font-size:clamp(1.5rem,3.5vw,3.3rem);font-weight:800;line-height:1;letter-spacing:-.05em;transition:transform .55s var(--ease)}
.svc__row p{max-width:42ch;font-size:14.5px;line-height:1.5;color:var(--mute-d);transition:color .35s}
.svc__row ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:250px}
.svc__row li{padding:6px 11px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;opacity:.75}
.svc__go{width:54px;height:54px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;transition:transform .55s var(--ease),background .35s,color .35s,border-color .35s}
.svc__go svg{width:20px;height:20px}
@media (hover:hover){
  .svc__row:hover{color:var(--ink)}
  .svc__row:hover::before{transform:scaleY(1)}
  .svc__row:hover .svc__n{color:var(--ink)}
  .svc__row:hover h3{transform:translateX(14px)}
  .svc__row:hover p{color:rgba(10,10,11,.82)}
  .svc__row:hover .svc__go{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* ═════════════ 05 · PROCESS ═════════════ */
.proc{padding:0 var(--frame) var(--frame)}
.proc__panel{border-radius:var(--rad);background:#ECEBE8;color:var(--ink);padding:clamp(80px,11vw,160px) var(--gut) clamp(40px,6vw,90px)}
.proc__head{margin-bottom:clamp(40px,6vw,90px)}
.proc__head .tag{display:block;margin-bottom:22px;color:var(--mute)}
.proc__stack{display:grid;gap:clamp(22px,4vh,44px)}
.pcard{position:sticky;top:calc(92px + var(--i)*16px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:min(64vh,560px);
  padding:clamp(20px,2.6vw,38px);border-radius:24px;transform-origin:50% 0;box-shadow:0 -20px 50px -34px rgba(0,0,0,.6);will-change:transform}
.pcard--ink{background:#0C0C0D;color:var(--paper)}
.pcard--paper{background:#fff;color:var(--ink)}
.pcard--red{background:var(--red);color:var(--ink)}
.pcard__top{display:flex;justify-content:space-between;gap:16px;font:700 11px/1 var(--f-sans);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.pcard__body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end;gap:24px clamp(24px,5vw,90px)}
.pcard h3{font:900 clamp(2.2rem,6.5vw,7rem)/.82 var(--f-sans);font-stretch:125%;letter-spacing:-.05em;text-transform:uppercase}
.pcard__txt p{max-width:40ch;font-size:clamp(15px,1.25vw,18px);line-height:1.55}
.pcard__txt ul{margin-top:22px;border-top:1px solid currentColor;counter-reset:s}
.pcard__txt li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(128,128,128,.35);font-size:13px;font-weight:600;counter-increment:s}
.pcard__txt li::after{content:"0" counter(s);font-stretch:125%;font-weight:800;font-size:11px;letter-spacing:.1em;opacity:.7}

/* ═════════════ 06 · CONTACT ═════════════ */
.contact{position:relative;overflow:hidden;background:#050505;color:var(--paper);padding:clamp(100px,14vw,200px) var(--gut) 0}
.contact__sign{position:absolute;right:-3%;top:3%;width:min(54vw,580px);pointer-events:none;animation:hum 5s infinite}
.contact__sign img{width:100%;height:auto;filter:drop-shadow(0 0 60px rgba(255,31,45,.45))}
.contact .tag,.contact__title,.bigbtn,.contact__grid{position:relative;z-index:2}
.contact__title{margin-top:24px;font-size:clamp(2.5rem,8.4vw,8.6rem);font-weight:800;line-height:.95;letter-spacing:-.055em}
.neon{color:#050505;-webkit-text-stroke:.042em #FF3A46;paint-order:stroke fill;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(255,31,45,.9)) drop-shadow(0 0 36px rgba(255,31,45,.5))}
.bigbtn{margin-top:clamp(36px,5vw,70px);width:clamp(150px,15vw,208px);aspect-ratio:1;border-radius:50%;background:var(--red-btn);color:#fff;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;
  font-weight:700;font-size:clamp(15px,1.3vw,19px);line-height:1.1;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 90px rgba(255,31,45,.55);transition:background .3s,color .3s}
.bigbtn:hover{background:#fff;color:var(--ink)}
.bigbtn svg{width:26px;height:26px;transition:transform .5s var(--ease)}
.bigbtn:hover svg{transform:translate(4px,-4px)}
.contact__grid{margin-top:clamp(50px,7vw,110px);padding-top:28px;border-top:1px solid var(--line-d);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.contact__grid .tag{display:block;margin-bottom:14px}
.contact__mail{display:inline-block;padding-bottom:4px;border-bottom:2px solid var(--red);font-size:clamp(1.3rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-.035em;transition:color .25s}
.contact__mail:hover{color:var(--red)}
.contact__soc{display:grid;gap:4px;justify-items:start}
.contact__soc a{display:inline-block;padding:5px 0;font-size:15px;opacity:.82;transition:color .25s,opacity .25s,transform .4s var(--ease)}
.contact__soc a:hover{color:var(--red);opacity:1;transform:translateX(6px)}
.contact__note{font-size:15px;line-height:1.6;color:var(--mute-d)}
.foot{position:relative;margin-top:clamp(50px,8vw,120px)}
.foot__mega{margin:0 calc(var(--gut)*-1);text-align:center;white-space:nowrap;font:900 clamp(5rem,27vw,30rem)/.74 var(--f-sans);font-stretch:125%;letter-spacing:-.05em;
  color:#050505;-webkit-text-stroke:.012em var(--red);paint-order:stroke fill;filter:drop-shadow(0 0 14px rgba(255,31,45,.85)) drop-shadow(0 0 50px rgba(255,31,45,.4));
  transform:translateY(10%);-webkit-user-select:none;user-select:none;animation:hum 6s 1s infinite}
.foot__row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 22px;border-top:1px solid var(--line-d);background:#050505;font-size:13px;color:var(--mute-d)}
.foot__top{display:inline-flex;align-items:center;gap:8px;padding:8px 0;color:var(--paper);transition:color .25s}
.foot__top:hover{color:var(--red)}
.foot__top svg{width:16px;height:16px}

/* ───────────── Project sheet ───────────── */
.case{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(10px,3vw,40px)}
.case[hidden]{display:none}
.case__bg{position:absolute;inset:0;background:rgba(5,5,5,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s}
.case.is-open .case__bg{opacity:1}
.case__sheet{position:relative;width:min(1080px,100%);max-height:calc(100svh - 20px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(18px,3.4vw,52px);
  padding:clamp(14px,2.2vw,28px);border-radius:26px;background:#F5F4F1;color:var(--ink);opacity:0;transform:translateY(40px) scale(.97);transition:transform .65s var(--ease),opacity .4s}
.case.is-open .case__sheet{opacity:1;transform:none}
.case__close{position:absolute;z-index:3;right:14px;top:14px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background .3s,transform .5s var(--ease)}
.case__close:hover{background:var(--red-btn);transform:rotate(90deg)}
.case__close svg{width:18px;height:18px}
.case__art{position:relative;overflow:hidden;min-height:clamp(220px,46vh,520px);border-radius:18px;display:grid;place-items:center;background:var(--bg);color:var(--fg)}
.case__art::before{content:"";position:absolute;inset:0}
.case__art svg{position:relative;width:54%;height:auto;stroke:none}
.case__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case__txt{display:flex;flex-direction:column;padding:clamp(6px,1.4vw,22px) clamp(4px,1vw,14px) 8px 0}
.case__txt .tag{color:var(--mute);padding-right:56px}
.case__title{margin-top:14px;font:900 clamp(1.7rem,3.5vw,3.2rem)/.96 var(--f-sans);font-stretch:125%;letter-spacing:-.045em;text-transform:uppercase}
.case__line{margin-top:16px;font-size:clamp(16px,1.45vw,20px);font-weight:500;line-height:1.45}
.case__dl{margin-top:24px;border-top:1px solid var(--line)}
.case__dl>div{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.case__dl dt{font:700 10.5px/1.5 var(--f-sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.case__dl dd{font-size:14.5px;line-height:1.55;color:#2c2c30}
.case__metric{margin-top:auto;padding-top:22px;display:flex;align-items:baseline;gap:14px}
.case__metric b{font:900 clamp(2.3rem,5vw,4.4rem)/1 var(--f-sans);font-stretch:125%;letter-spacing:-.055em;color:var(--red-btn)}
.case__metric span{max-width:18ch;font-size:13px;line-height:1.3;color:var(--mute)}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ═════════════ Responsive ═════════════ */
@media (max-width:1180px){
  .hero__cards{display:none}
  .hero__fig{width:74%}
}
@media (max-width:1024px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .svc__row{grid-template-columns:44px minmax(0,1fr) 54px;row-gap:12px}
  .svc__row p{grid-column:2}
  .svc__row ul{grid-column:2;justify-content:flex-start;max-width:none}
  .svc__go{grid-column:3;grid-row:1}
  .svc__head{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--frame:8px;--rad:22px}
  .nav{padding:calc(var(--frame) + 8px) calc(var(--frame) + 8px) 0}
  .nav__in{height:56px;padding:0 5px 0 7px}
  .hero__panel{flex-direction:column;min-height:0}
  .hero__copy{width:100%;padding:104px var(--gut) 0}
  .hero__title{font-size:clamp(2.35rem,11.2vw,4.6rem)}
  .hero__title .line{white-space:normal}
  .latest{margin-top:0;max-width:none;width:100%}
  .hero__fig{position:relative;order:2;width:100%;height:min(108vw,580px);margin-top:-4vw;-webkit-mask-image:none;mask-image:none}
  .hero__halo{left:20%;top:8%;width:60%}
  .scrollhint{display:none}
  .stats{flex-wrap:wrap;row-gap:18px}
  .stats>div{flex:1 1 40%;border:0;padding-right:0}
  .mani__stage{flex-direction:column;align-items:flex-start;padding-top:0;min-height:0}
  .mani__fig{position:relative;width:calc(100% + 2*var(--gut));height:min(96vw,520px);margin:0 calc(var(--gut)*-1) 10px}
  .work__panel{--pf:clamp(2.5rem,12.4vw,6rem)}
  .work__head{top:clamp(96px,17vh,150px)}
  .mani__stage{padding-bottom:60px}
  .mani__meta{display:none}
  .mono-tag{font-size:12px}
  .pcard{top:calc(78px + var(--i)*12px);min-height:min(66vh,520px)}
  .pcard__body{grid-template-columns:1fr}
  .pcard h3{font-size:clamp(2rem,10.2vw,4rem)}
  .contact__grid{grid-template-columns:1fr;gap:34px}
  .contact__sign{width:92vw;right:-22%;top:1%;opacity:.55}
  .neon{color:var(--red);-webkit-text-stroke:0;mix-blend-mode:normal;filter:drop-shadow(0 0 16px rgba(255,31,45,.65))}
  .case__sheet{grid-template-columns:1fr}
  .case__art{min-height:200px}
  .case__dl>div{grid-template-columns:1fr;gap:4px}
  .work__hint{display:none}
  .work__ui{justify-content:space-between}
  .rbtn{width:46px;height:46px}
  .foot__row{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .work__welcome,.work__target{top:-22%}
  .work__side{bottom:-26%}
}

/* ═════════════ Reduced motion ═════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .band__track{animation:none}
  .loader__sign{animation:none}
}