/* ========================================================================== FELIXADS — Theme v3 · "Signal" Dark editorial ad-tech system. Oversized display type, pinned scroll choreography, duotone brand art. Palette derived from the FelixAds mark: violet #5452A2 + pink #ED3B88. ========================================================================== */ /* ---------- Fonts (self-hosted, CSP-safe) ---------- */ @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/brand/sora-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/brand/sora-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/brand/sora-latin-800-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/brand/manrope-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/brand/manrope-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/brand/manrope-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/brand/manrope-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/brand/manrope-latin-800-normal.woff2') format('woff2')} /* ---------- Tokens ---------- Light is the default. Add data-theme="dark" to for the dark theme (regenerate the artwork to match with: python3 tools/genart.py --theme dark). --bg-rgb / --fg-rgb back every translucent overlay in the sheet, so the two themes stay in sync from one place. -------------------------------------------------------------------------- */ :root{ --bg-rgb:247,245,250; --fg-rgb:22,18,45; --ink:#F7F5FA; /* page */ --ink-2:#FFFFFF; /* alternating band */ --ink-3:#FFFFFF; /* cards */ --ink-4:#EFEBF6; /* media placeholder */ --violet:#5452A2; --vivid:#4A46B2; --vivid-2:#3F3BA8; --pink:#C9256A; /* deepened to clear 4.5:1 as text on paper */ --hot:#ED3B88; /* the logo pink — fills, hovers, accents */ --cream:#16122D; /* primary text */ --mute:rgba(22,18,45,.66); --mute-2:rgba(22,18,45,.62); --line:rgba(22,18,45,.15); --line-2:rgba(22,18,45,.08); --glass:rgba(22,18,45,.03); --shadow-sm:0 1px 2px rgba(22,18,45,.04), 0 6px 18px rgba(22,18,45,.05); --shadow-md:0 2px 4px rgba(22,18,45,.04), 0 18px 44px rgba(22,18,45,.08); --grain-opacity:.16; --grain-blend:multiply; --logo-filter:none; --map-filter:grayscale(1) contrast(1.02) brightness(1.02); --d:'Sora',system-ui,sans-serif; --b:'Manrope',system-ui,sans-serif; --pad:clamp(20px,4.4vw,72px); --maxw:1560px; --r:6px; --e:cubic-bezier(.22,1,.36,1); --e2:cubic-bezier(.65,0,.35,1); --t:.55s var(--e); } html[data-theme="dark"]{ --bg-rgb:7,6,15; --fg-rgb:246,243,255; --ink:#07060F; --ink-2:#0D0A1C; --ink-3:#141029; --ink-4:#1B1538; --violet:#5452A2; --vivid:#6E6BE0; --vivid-2:#8B88FF; --pink:#ED3B88; --hot:#FF5FA2; --cream:#F6F3FF; --mute:rgba(246,243,255,.60); --mute-2:rgba(246,243,255,.38); --line:rgba(246,243,255,.12); --line-2:rgba(246,243,255,.06); --glass:rgba(246,243,255,.035); --shadow-sm:none; --shadow-md:none; --grain-opacity:.30; --grain-blend:overlay; --logo-filter:brightness(0) invert(1); --map-filter:var(--map-filter); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:auto} body{ font-family:var(--b);font-size:clamp(15px,1.02vw,17px);line-height:1.6; color:var(--cream);background:var(--ink); overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg,video{max-width:100%;display:block} ul,ol{list-style:none} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none} button{cursor:pointer} ::selection{background:var(--pink);color:#fff} :focus-visible{outline:2px solid var(--hot);outline-offset:3px} /* Global film grain — atmosphere, not texture for its own sake */ body::after{ content:'';position:fixed;inset:0;z-index:9998;pointer-events:none; background:url('../img/art/grain.png') repeat;background-size:128px 128px; opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend); } /* ---------- Layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .sec{padding:clamp(84px,11vw,180px) 0;position:relative} .sec--tight{padding:clamp(56px,7vw,110px) 0} .rule{height:1px;background:var(--line-2);border:0} .grid{display:grid;gap:clamp(20px,2.4vw,40px)} /* ---------- Type ---------- */ h1,h2,h3,h4,h5{font-family:var(--d);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--cream)} .display{font-size:clamp(2.9rem,9.4vw,10.5rem);line-height:.88;letter-spacing:-.048em;font-weight:800} .h-xl{font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:.95;letter-spacing:-.042em} .h-lg{font-size:clamp(1.85rem,3.7vw,3.4rem);line-height:1.02;letter-spacing:-.035em} .h-md{font-size:clamp(1.35rem,2vw,2rem);line-height:1.1;letter-spacing:-.028em} .h-sm{font-size:clamp(1.06rem,1.25vw,1.32rem);line-height:1.2;letter-spacing:-.02em;font-weight:700} .lede{font-size:clamp(1.06rem,1.42vw,1.44rem);line-height:1.5;color:var(--mute);font-weight:400;max-width:34ch} .body-lg{font-size:clamp(1rem,1.15vw,1.14rem);color:var(--mute)} p{color:var(--mute)} .ink{color:var(--cream)} .pink{color:var(--pink)} .viv{color:var(--vivid-2)} .stroke{color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.42)} .mw-50{max-width:50ch}.mw-44{max-width:44ch}.mw-36{max-width:36ch} /* Section eyebrow — thin rule + spaced label */ .label{ display:flex;align-items:center;gap:14px; font-family:var(--d);font-weight:700;font-size:.7rem;letter-spacing:.24em; text-transform:uppercase;color:var(--mute-2);white-space:nowrap; } .label::before{content:'';width:clamp(28px,4vw,64px);height:1px;background:var(--pink);flex:none} .label--dot::before{width:7px;height:7px;border-radius:50%;background:var(--pink)} /* ---------- Line-mask reveal ---------- */ .u-mask{display:block} .u-mask .ln{display:block;overflow:hidden} .u-mask .ln > span{display:block;will-change:transform} html.no-gsap .u-mask .ln > span{transform:none!important;opacity:1!important} /* generic reveal fallback (IntersectionObserver) */ .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s} /* ---------- Buttons ---------- */ .btn{ --bg:var(--cream);--fg:var(--ink); position:relative;display:inline-flex;align-items:center;gap:.7em; font-family:var(--d);font-weight:700;font-size:.86rem;letter-spacing:.04em; text-transform:uppercase;padding:1.15em 1.9em;border-radius:100px; color:var(--fg);background:var(--bg);overflow:hidden;isolation:isolate; transition:color .45s var(--e),border-color .45s var(--e);white-space:nowrap; } .btn::before{ content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--pink);transform:translateY(101%);transition:transform .5s var(--e); } .btn:hover{color:#fff} .btn:hover::before{transform:translateY(0)} .btn i,.btn .arw{transition:transform .45s var(--e)} .btn:hover .arw{transform:translate(4px,-4px)} .btn--ghost{--bg:transparent;--fg:var(--cream);border:1px solid var(--line)} .btn--ghost:hover{border-color:var(--pink)} .btn--pink{--bg:var(--pink);--fg:#fff} .btn--pink::before{background:var(--cream)} .btn--pink:hover{color:var(--ink)} .btn--sm{padding:.85em 1.5em;font-size:.76rem} .btn--lg{padding:1.35em 2.4em;font-size:.95rem} /* Text link with sweeping underline */ .tlink{ position:relative;display:inline-flex;align-items:center;gap:.55em; font-family:var(--d);font-weight:700;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase; transition:color .35s var(--e); } .tlink::after{ content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e); } .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink:hover{color:var(--pink)} .arw{display:inline-block;width:.9em;height:.9em;flex:none} /* ---------- Custom cursor ---------- */ .cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;mix-blend-mode:difference} .cursor{width:38px;height:38px;border:1px solid rgba(var(--fg-rgb),.65);margin:-19px 0 0 -19px;transition:width .35s var(--e),height .35s var(--e),margin .35s var(--e),background .35s var(--e),opacity .3s} .cursor-dot{width:5px;height:5px;background:var(--cream);margin:-2.5px 0 0 -2.5px} body.cur-lg .cursor{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(var(--fg-rgb),.14)} body.cur-hide .cursor,body.cur-hide .cursor-dot{opacity:0} .cursor__txt{ position:absolute;inset:0;display:grid;place-items:center;font-family:var(--d); font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--cream);opacity:0;transition:opacity .3s } body.cur-txt .cursor__txt{opacity:1} @media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}} /* ---------- Preloader ---------- */ .pre{position:fixed;inset:0;z-index:10001;background:var(--ink);display:grid;place-items:center} .pre__inner{text-align:center} .pre__logo{width:clamp(130px,15vw,190px);margin:0 auto 26px;opacity:.96} .pre__bar{width:min(280px,52vw);height:2px;background:var(--line);overflow:hidden;margin:0 auto} .pre__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vivid),var(--pink))} .pre__num{margin-top:16px;font-family:var(--d);font-size:.72rem;letter-spacing:.3em;color:var(--mute-2)} .pre.done{transform:translateY(-101%);transition:transform 1s var(--e)} /* ---------- Header ---------- */ .hdr{ position:fixed;top:0;left:0;width:100%;z-index:900; padding:clamp(16px,1.7vw,26px) 0;transition:transform .6s var(--e),padding .5s var(--e); } .hdr::before{ content:'';position:absolute;inset:0;background:rgba(var(--bg-rgb),.72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); opacity:0;transition:opacity .5s var(--e); } .hdr.stuck::before{opacity:1} .hdr.stuck{padding:clamp(11px,1.1vw,16px) 0} .hdr.up{transform:translateY(-102%)} .hdr__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px} .hdr__brand img{width:clamp(120px,10vw,158px);transition:opacity .3s} .hdr__brand:hover img{opacity:.72} .hdr__nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px)} .hdr__nav a{ position:relative;font-family:var(--d);font-weight:600;font-size:.82rem; letter-spacing:.03em;color:var(--mute);transition:color .35s var(--e);padding:6px 0; } .hdr__nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)} .hdr__nav a:hover,.hdr__nav a.on{color:var(--cream)} .hdr__nav a:hover::after,.hdr__nav a.on::after{transform:scaleX(1);transform-origin:left} .hdr__cta{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px)} .hdr__login{font-family:var(--d);font-weight:600;font-size:.8rem;color:var(--mute);transition:color .3s} .hdr__login:hover{color:var(--pink)} .burger{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;gap:5px;align-content:center;transition:border-color .4s var(--e),background .4s} .burger span{display:block;width:16px;height:1.5px;background:var(--cream);transition:transform .45s var(--e),opacity .3s} .burger:hover{border-color:var(--pink)} .burger.on span:nth-child(1){transform:translateY(3.25px) rotate(45deg)} .burger.on span:nth-child(2){opacity:0} .burger.on span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)} /* ---------- Fullscreen menu overlay ---------- */ .menu{ position:fixed;inset:0;z-index:890;background:var(--ink-2); clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--e); display:flex;flex-direction:column;justify-content:center;overflow-y:auto; visibility:hidden; } .menu.open{clip-path:inset(0 0 0 0);visibility:visible} .menu::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 78% 12%,rgba(110,107,224,.30),transparent 60%), radial-gradient(90% 70% at 10% 95%,rgba(237,59,136,.24),transparent 62%); } .menu__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px var(--pad) 60px;display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(30px,5vw,80px);align-items:end} .menu__list li{overflow:hidden} .menu__list a{ display:block;font-family:var(--d);font-weight:800;letter-spacing:-.04em; font-size:clamp(2.1rem,6.4vw,5.6rem);line-height:1.06;color:var(--cream); transform:translateY(105%);transition:color .4s var(--e);position:relative; } .menu.open .menu__list a{transform:translateY(0);transition:transform .9s var(--e) calc(var(--i,0)*.07s + .12s),color .4s var(--e)} .menu__list a span{display:inline-block;transition:transform .5s var(--e)} .menu__list a:hover{color:var(--pink)} .menu__list a:hover span{transform:translateX(22px)} .menu__list a i{font-family:var(--b);font-size:.8rem;color:var(--mute-2);vertical-align:super;margin-left:10px;letter-spacing:.1em;font-style:normal} .menu__side{display:grid;gap:26px;padding-bottom:14px} .menu__side h5{font-family:var(--d);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);margin-bottom:10px} .menu__side a{color:var(--cream);transition:color .3s} .menu__side a:hover{color:var(--pink)} .menu__socials{display:flex;gap:18px;flex-wrap:wrap} .menu__socials a{font-family:var(--d);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(120px,16vh,190px);overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero__bg img{width:100%;height:118%;object-fit:cover;object-position:70% 26%;opacity:.42;will-change:transform} .hero__bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(90deg,var(--ink) 0%,rgba(var(--bg-rgb),.94) 30%,rgba(var(--bg-rgb),.42) 60%,rgba(var(--bg-rgb),.10) 100%), linear-gradient(180deg,rgba(var(--bg-rgb),.62) 0%,rgba(var(--bg-rgb),.06) 32%,rgba(var(--bg-rgb),.72) 86%,var(--ink) 100%); } .hero__grid{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px); mask-image:radial-gradient(80% 70% at 50% 40%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 20%,transparent 78%); } .hero__wrap{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(46px,5vw,74px)} .hero__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .hero__claim{width:100%} .hero h1{margin:.26em 0 0;font-size:clamp(2.6rem,8.2vw,8.8rem)} .hero h1 .stroke{-webkit-text-stroke-width:2px} .hero__meta{display:flex;gap:clamp(22px,3vw,54px);flex-wrap:wrap;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);padding-top:clamp(20px,2.2vw,30px);margin-top:clamp(26px,3.4vw,44px)} .hero__meta .lede{max-width:26ch;flex:1 1 240px} .hero__stats{display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap} .hero__stat{display:grid;gap:2px} .hero__stat b{font-family:var(--d);font-size:clamp(1.5rem,2.6vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--cream);line-height:1} .hero__stat > span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);font-family:var(--d);font-weight:600} .hero__acts{display:flex;gap:12px;flex-wrap:wrap} .scroll-cue{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--d);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);writing-mode:vertical-rl} .scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(180deg,var(--pink),transparent);animation:cue 2.2s var(--e) infinite} @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- Ticker ---------- */ .ticker{ position:relative;overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2); padding:clamp(14px,1.5vw,22px) 0;background:var(--ink-2); } .ticker__track{display:flex;width:max-content;gap:clamp(28px,3vw,54px);align-items:center;animation:tick 34s linear infinite} .ticker--rev .ticker__track{animation-direction:reverse} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__track > *{flex:none} .ticker b{font-family:var(--d);font-weight:800;font-size:clamp(1.1rem,2.4vw,2.1rem);letter-spacing:-.03em;text-transform:uppercase;color:var(--cream)} .ticker em{font-family:var(--d);font-weight:800;font-size:clamp(1.1rem,2.4vw,2.1rem);letter-spacing:-.03em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.38);font-style:normal} .ticker .dot{width:7px;height:7px;border-radius:50%;background:var(--pink)} @keyframes tick{to{transform:translateX(-50%)}} /* Logo marquee */ .logos{padding:clamp(34px,4vw,60px) 0;overflow:hidden} .logos__head{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)} .logos__track{display:flex;width:max-content;gap:clamp(40px,5vw,86px);align-items:center;animation:tick 44s linear infinite} .logos__track img{height:clamp(20px,2.2vw,30px);width:auto;filter:var(--logo-filter);opacity:.5;transition:opacity .4s var(--e)} .logos__track img:hover{opacity:1} .std{ font-family:var(--d);font-weight:700;font-size:clamp(.92rem,1.55vw,1.45rem);letter-spacing:-.02em; color:var(--mute-2);white-space:nowrap;position:relative;padding-left:clamp(40px,5vw,86px); transition:color .4s var(--e); } .std:first-child{padding-left:0} .std::before{content:'';position:absolute;left:clamp(16px,2.2vw,38px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--pink);opacity:.55} .std:first-child::before{display:none} .logos__track:hover .std{color:var(--mute)} /* static (non-marquee) standards list — .logos__track is cloned at runtime by the marquee script, so a fixed list must not use that class */ .stdlist{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(28px,3.4vw,56px)} .stdlist .std{padding-left:0} .stdlist .std::before{display:none} /* ---------- Scroll-fill statement ---------- */ .statement{padding:clamp(90px,13vw,200px) 0} .statement__txt{ font-family:var(--d);font-weight:700;letter-spacing:-.038em; font-size:clamp(1.6rem,4.5vw,4.1rem);line-height:1.16;max-width:20ch; } .statement__txt .w{color:rgba(var(--fg-rgb),.22);transition:color .3s linear} html.no-gsap .statement__txt .w{color:var(--cream)} .statement__txt .w.hot{color:var(--pink)} .statement__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--line-2);padding-top:26px} /* ---------- Edge: pinned stacking cards ---------- */ .stack{position:relative} .stack__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:clamp(40px,6vw,90px)} .stack__item{position:sticky;top:clamp(84px,11vh,140px);margin-bottom:clamp(18px,2vw,30px);will-change:transform} .card-edge{ position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,3vw,54px); align-items:center;background:var(--ink-3);border:1px solid var(--line-2); border-radius:var(--r);overflow:hidden;padding:clamp(24px,3vw,52px); min-height:clamp(340px,46vh,480px); } .card-edge::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 120% at 100% 0%,rgba(110,107,224,.16),transparent 58%); } .card-edge__n{ position:absolute;top:clamp(16px,2vw,30px);right:clamp(18px,2.4vw,38px); font-family:var(--d);font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem); letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.28);line-height:1; } .card-edge__body{position:relative;z-index:2;max-width:46ch;display:grid;gap:16px;align-content:center} .card-edge__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .tag{ font-family:var(--d);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--mute);border:1px solid var(--line);border-radius:100px;padding:.55em 1em; } .card-edge__fig{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--ink-4)} .card-edge__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)} .card-edge:hover .card-edge__fig img{transform:scale(1.055)} /* ---------- Rail: pinned horizontal scroll ---------- */ .rail{position:relative;background:var(--ink-2)} .rail__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} .rail__head{width:100%;max-width:var(--maxw);margin:0 auto clamp(22px,3vw,44px);padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap} .rail__track{display:flex;gap:clamp(14px,1.5vw,26px);padding-left:var(--pad);will-change:transform} .rail__prog{width:100%;max-width:var(--maxw);margin:clamp(20px,3vw,40px) auto 0;padding:0 var(--pad)} .rail__prog i{display:block;height:2px;background:var(--line);position:relative;overflow:hidden} .rail__prog i::after{content:'';position:absolute;inset:0;width:var(--p,0%);background:var(--pink)} .slide{ position:relative;flex:none;width:clamp(260px,25vw,380px);aspect-ratio:3/4; border-radius:var(--r);overflow:hidden;background:var(--ink-4);border:1px solid var(--line-2); display:flex;flex-direction:column;justify-content:flex-end; } .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform 1.1s var(--e),opacity .6s var(--e)} .slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 22%,rgba(var(--bg-rgb),.90) 88%)} .slide:hover img{transform:scale(1.07);opacity:.92} .slide__body{position:relative;z-index:2;padding:clamp(18px,1.8vw,28px);display:grid;gap:10px} .slide__n{position:absolute;top:clamp(14px,1.5vw,22px);left:clamp(16px,1.6vw,26px);z-index:2;font-family:var(--d);font-weight:700;font-size:.72rem;letter-spacing:.18em;color:var(--mute)} .slide__body p{font-size:.9rem;line-height:1.45;color:var(--mute);max-width:32ch} .slide__body .tlink{margin-top:4px;font-size:.72rem} .rail__hint{display:none} /* ---------- Scale / counters ---------- */ .scale{background:var(--ink);position:relative;overflow:hidden} .scale::before{ content:'';position:absolute;inset:0; background:radial-gradient(60% 60% at 82% 8%,rgba(237,59,136,.15),transparent 62%), radial-gradient(60% 60% at 10% 92%,rgba(110,107,224,.16),transparent 62%); } .scale__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)} .scale__cell{padding:clamp(28px,3.6vw,60px) clamp(14px,2vw,34px) clamp(28px,3.6vw,54px) 0;border-bottom:1px solid var(--line)} .scale__cell + .scale__cell{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,42px)} .scale__num{font-family:var(--d);font-weight:800;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.3rem,5.4vw,5rem);color:var(--cream);display:flex;align-items:baseline} .scale__num .sym{color:var(--pink)} .scale__cell p{margin-top:12px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--d);font-weight:600;color:var(--mute-2);line-height:1.4} /* ---------- Showreel ---------- */ .reel{position:relative;height:clamp(400px,78vh,760px);overflow:hidden;display:grid;place-items:center;border-radius:var(--r)} .reel img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;opacity:1;will-change:transform} .reel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),.10),rgba(var(--bg-rgb),.46))} .reel__body{position:relative;z-index:2;text-align:center;display:grid;gap:22px;justify-items:center;padding:0 var(--pad)} .reel__play{ width:clamp(88px,9vw,124px);height:clamp(88px,9vw,124px);border-radius:50%; border:1px solid rgba(var(--fg-rgb),.4);display:grid;place-items:center;position:relative; transition:background .5s var(--e),border-color .5s var(--e); } .reel__play::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.28);animation:pulse 2.8s var(--e) infinite} .reel__play:hover{background:var(--pink);border-color:var(--pink)} .reel__play svg{width:22px;height:22px;margin-left:4px} @keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.65);opacity:0}} /* ---------- Hubs ---------- */ .hubs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)} .hub{ position:relative;background:var(--ink-2);padding:clamp(26px,3vw,52px);min-height:clamp(280px,32vw,400px); display:flex;flex-direction:column;justify-content:space-between;gap:26px;overflow:hidden;isolation:isolate; } .hub__art{position:absolute;inset:0;z-index:-1;opacity:.62;transition:opacity .7s var(--e),transform 1.2s var(--e);transform:scale(1.04)} .hub__art img{width:100%;height:100%;object-fit:cover} .hub__art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),.42),rgba(var(--bg-rgb),.80))} .hub:hover .hub__art{opacity:1;transform:scale(1)} .hub__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px} .hub__mark{font-family:var(--d);font-weight:800;font-size:1.1rem;letter-spacing:-.03em;color:var(--cream)} .hub__mark span{color:var(--pink)} .hub__n{font-family:var(--d);font-size:.7rem;letter-spacing:.2em;color:var(--mute-2)} .hub h4{font-size:clamp(1.2rem,1.6vw,1.6rem);margin-bottom:12px} .hub p{font-size:.92rem;line-height:1.5;max-width:36ch} .hub__go{position:absolute;right:clamp(20px,2.4vw,38px);bottom:clamp(20px,2.4vw,38px);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transform:translateY(10px);opacity:0;transition:.5s var(--e)} .hub:hover .hub__go{opacity:1;transform:none;background:var(--pink);border-color:var(--pink)} /* ---------- Accordion ---------- */ .acc{border-top:1px solid var(--line)} .acc__item{border-bottom:1px solid var(--line)} .acc__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left; padding:clamp(20px,2.4vw,34px) 0;font-family:var(--d);font-weight:700;letter-spacing:-.03em; font-size:clamp(1.15rem,2.5vw,2.1rem);color:var(--mute);transition:color .45s var(--e); } .acc__item.open .acc__q,.acc__q:hover{color:var(--cream)} .acc__ico{position:relative;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:50%} .acc__ico::before,.acc__ico::after{content:'';position:absolute;top:50%;left:50%;background:currentColor;transition:transform .45s var(--e)} .acc__ico::before{width:12px;height:1.5px;margin:-.75px 0 0 -6px} .acc__ico::after{width:1.5px;height:12px;margin:-6px 0 0 -.75px} .acc__item.open .acc__ico::after{transform:scaleY(0)} .acc__a{overflow:hidden;height:0;transition:height .6s var(--e)} .acc__a > div{padding:0 0 clamp(22px,2.6vw,36px);max-width:62ch} .acc__a p + p{margin-top:14px} /* ---------- Work rows ---------- */ .work{display:grid;gap:1px;background:var(--line-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .work__row{ position:relative;background:var(--ink);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,50px); align-items:center;padding:clamp(22px,2.8vw,44px) var(--pad);transition:background .5s var(--e); } .work__row:hover{background:var(--ink-2)} .work__n{font-family:var(--d);font-size:.74rem;letter-spacing:.2em;color:var(--mute-2);min-width:34px} .work__t{font-family:var(--d);font-weight:800;letter-spacing:-.04em;font-size:clamp(1.4rem,3.4vw,2.9rem);color:var(--cream);transition:transform .6s var(--e)} .work__row:hover .work__t{transform:translateX(clamp(8px,1.4vw,22px))} .work__meta{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;align-items:center} .work__res{font-family:var(--d);font-weight:700;font-size:clamp(.95rem,1.5vw,1.3rem);color:var(--pink);letter-spacing:-.02em} .work__peek{ position:fixed;z-index:60;width:clamp(200px,20vw,300px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden; pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .4s var(--e),transform .5s var(--e); } .work__peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .work__peek img{width:100%;height:100%;object-fit:cover} /* ---------- News ---------- */ .news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,36px)} .post{display:grid;gap:16px;grid-template-rows:auto 1fr} .post__fig{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/10;background:var(--ink-3)} .post__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)} .post:hover .post__fig img{transform:scale(1.07)} .post__date{font-family:var(--d);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)} .post h4{font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.24;margin:8px 0 10px;transition:color .4s var(--e)} .post:hover h4{color:var(--pink)} /* ---------- Big CTA ---------- */ .cta{position:relative;text-align:center;padding:clamp(90px,13vw,190px) 0;overflow:hidden} .cta::before{ content:'';position:absolute;inset:0; background:radial-gradient(60% 70% at 50% 100%,rgba(237,59,136,.26),transparent 66%), radial-gradient(52% 60% at 50% 0%,rgba(110,107,224,.20),transparent 62%); } .cta__in{position:relative;display:grid;gap:clamp(22px,3vw,42px);justify-items:center} .cta__ring{ width:clamp(150px,16vw,220px);height:clamp(150px,16vw,220px);border-radius:50%; border:1px solid var(--line);display:grid;place-items:center;position:relative; font-family:var(--d);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; transition:background .5s var(--e),border-color .5s var(--e),color .5s var(--e); } .cta__ring:hover{background:var(--pink);border-color:var(--pink);color:#fff} .cta__ring svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite} .cta__ring:hover svg{animation-duration:8s} @keyframes spin{to{transform:rotate(360deg)}} .cta__ring b{position:relative;z-index:2;display:grid;place-items:center;gap:4px} /* ---------- Footer ---------- */ .ftr{position:relative;background:var(--ink-2);border-top:1px solid var(--line-2);padding-top:clamp(50px,6vw,90px)} .ftr__top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(26px,3vw,54px);padding-bottom:clamp(40px,5vw,72px)} .ftr__brand img{width:150px;margin-bottom:20px} .ftr__brand p{font-size:.92rem;max-width:38ch} .ftr h5{font-family:var(--d);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);margin-bottom:20px;font-weight:700} .ftr ul{display:grid;gap:11px} .ftr ul a,.ftr ul span{font-size:.92rem;color:var(--mute);transition:color .35s var(--e)} .ftr ul a:hover{color:var(--pink)} .ftr__nl{display:flex;border-bottom:1px solid var(--line);padding-bottom:10px;margin-top:6px;gap:10px} .ftr__nl input{flex:1;font-size:.92rem;color:var(--cream)} .ftr__nl input::placeholder{color:var(--mute-2)} .ftr__nl button{font-family:var(--d);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);transition:opacity .3s} .ftr__nl button:hover{opacity:.7} .ftr__socials{display:flex;gap:12px;margin-top:24px} .ftr__socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:.85rem;color:var(--mute);transition:.4s var(--e)} .ftr__socials a:hover{background:var(--pink);border-color:var(--pink);color:#fff} .ftr__word{overflow:hidden;border-top:1px solid var(--line-2);padding:clamp(16px,2vw,26px) 0} .ftr__word b{display:block;font-family:var(--d);font-weight:800;letter-spacing:-.05em;text-align:center; font-size:clamp(3rem,15vw,15rem);line-height:.82;color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.16)} .ftr__bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 0 26px;border-top:1px solid var(--line-2)} .ftr__bot p,.ftr__bot a{font-size:.8rem;color:var(--mute-2)} .ftr__bot a:hover{color:var(--pink)} .ftr__bot nav{display:flex;gap:20px;flex-wrap:wrap} .to-top{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:800;width:46px;height:46px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:.5s var(--e)} .to-top.show{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--cream);color:var(--ink)} /* ---------- Inner page hero ---------- */ .phero{position:relative;padding:clamp(150px,20vh,250px) 0 clamp(50px,7vw,100px);overflow:hidden} .phero::before{ content:'';position:absolute;inset:0;z-index:0; background:radial-gradient(70% 90% at 78% 0%,rgba(110,107,224,.26),transparent 62%), radial-gradient(60% 80% at 4% 100%,rgba(237,59,136,.20),transparent 60%); animation:auraA 19s ease-in-out infinite; } /* second, counter-drifting aura layer — transform-only, so it composites on the GPU */ .phero::after{ content:'';position:absolute;inset:-12%;z-index:0;pointer-events:none; background:radial-gradient(38% 44% at 22% 18%,rgba(237,59,136,.20),transparent 70%), radial-gradient(42% 48% at 82% 76%,rgba(110,107,224,.22),transparent 72%); animation:auraB 26s ease-in-out infinite; } .phero__in{position:relative;z-index:1} @keyframes auraA{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-2.5%,2%,0) scale(1.10)} } @keyframes auraB{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33% {transform:translate3d(4%,-3%,0) scale(1.12)} 66% {transform:translate3d(-3.5%,2.5%,0) scale(1.06)} } .crumbs{display:flex;gap:10px;align-items:center;font-family:var(--d);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);margin-top:22px} .crumbs a:hover{color:var(--pink)} /* ---------- Split feature ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:center} .split--rev .split__fig{order:2} .split__fig{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/6;background:var(--ink-3)} .split__fig img{width:100%;height:112%;object-fit:cover;will-change:transform} .split__body{display:grid;gap:20px;align-content:center} .checks{display:grid;gap:12px;margin-top:6px} .checks li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--mute)} .checks i{flex:none;width:19px;height:19px;border-radius:50%;background:rgba(237,59,136,.16);color:var(--pink);display:grid;place-items:center;font-size:.6rem;margin-top:3px} /* .checks inside .prose: the tick is the bullet — suppress the generic prose dot */ .prose ul.checks{margin:16px 0;padding-left:0} .prose ul.checks li{padding-left:0;font-size:1rem;line-height:1.72} .prose ul.checks li::before{display:none} /* ---------- Team ---------- */ .team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px)} .mate__fig{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/5;background:var(--ink-3)} .mate__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--e),transform 1s var(--e)} .mate:hover .mate__fig img{filter:none;transform:scale(1.05)} .mate h4{margin-top:16px;font-size:1.05rem} .mate span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);font-family:var(--d)} /* ---------- Contact ---------- */ .contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.4vw,60px);align-items:start} .panel{background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(24px,3vw,48px)} .cline{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-2)} .cline:last-child{border-bottom:0} .cline > i{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(110,107,224,.14);color:var(--vivid-2);display:grid;place-items:center;font-size:.9rem} .cline h6{font-family:var(--d);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);margin-bottom:5px;font-weight:700} .cline a,.cline p{color:var(--cream);font-size:.98rem} .cline a:hover{color:var(--pink)} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .fgroup{display:grid;gap:8px} .fgroup.full{grid-column:1/-1} .fgroup label{font-family:var(--d);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);font-weight:600} .fgroup input,.fgroup textarea,.fgroup select{ width:100%;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--cream); font-size:.98rem;transition:border-color .4s var(--e);resize:vertical; } .fgroup input::placeholder,.fgroup textarea::placeholder{color:var(--mute-2)} .fgroup input:focus,.fgroup textarea:focus,.fgroup select:focus{border-color:var(--pink)} .fgroup select{ appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;padding-right:26px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .fgroup select option{background:var(--ink-2);color:var(--cream)} .fnote{margin-top:18px;font-size:.84rem;line-height:1.55;color:var(--mute-2)} .fnote a{color:var(--pink);text-decoration:underline;text-underline-offset:3px} .form-status{margin-top:16px;font-size:.9rem;color:var(--vivid-2)} .map{border-radius:var(--r);overflow:hidden;height:clamp(280px,42vw,460px);border:1px solid var(--line-2);filter:grayscale(1) invert(.92) hue-rotate(190deg) contrast(.9)} .map iframe{width:100%;height:100%;border:0;display:block} /* ---------- Prose / legal ---------- */ .prose{max-width:80ch} .prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:44px 0 16px} .prose h3{font-size:clamp(1.15rem,1.6vw,1.42rem);margin:32px 0 12px} .prose h4{font-size:1.05rem;margin:24px 0 10px} .prose p,.prose li{color:var(--mute);font-size:1rem;line-height:1.72} .prose p + p{margin-top:14px} .prose ul,.prose ol{margin:14px 0 14px 20px;display:grid;gap:9px} .prose ul li{list-style:none;position:relative;padding-left:20px} .prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pink)} .prose ol{list-style:decimal} .prose ol li{list-style:decimal} .prose a{color:var(--vivid-2);text-decoration:underline;text-underline-offset:3px} .prose a:hover{color:var(--pink)} .prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem} .prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left;color:var(--mute)} .prose th{font-family:var(--d);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:var(--ink-3)} .prose strong,.prose b{color:var(--cream)} /* legacy legal copy uses a leading as its section heading */ .prose p > strong:first-child,.prose p > b:first-child{ display:block;font-family:var(--d);font-weight:700;font-size:1.06rem; letter-spacing:-.02em;color:var(--cream);margin-bottom:8px; } .prose p > strong:first-child:only-child,.prose p > b:first-child:only-child{margin-bottom:0} .prose hr{border:0;height:1px;background:var(--line-2);margin:32px 0} .legal-toc{position:sticky;top:120px;align-self:start} .legal-toc a{display:block;padding:8px 0 8px 16px;font-size:.88rem;color:var(--mute-2);border-left:1px solid var(--line);transition:.35s var(--e)} .legal-toc a:hover{color:var(--cream);border-color:var(--pink)} .legal-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,5vw,80px);align-items:start} .legal-single{display:block} /* legacy spacer utilities kept for older markup */ .space8{height:8px}.space10{height:10px}.space16{height:16px}.space20{height:20px} .space24{height:24px}.space30{height:30px}.space32{height:32px}.space34{height:34px} .space40{height:40px}.space50{height:50px}.space60{height:60px} /* ---------- Frame embed ---------- */ .frame{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;height:clamp(420px,74vh,820px);background:var(--ink-3)} .frame iframe{width:100%;height:100%;border:0;display:block} /* ---------- 404 ---------- */ .e404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:140px var(--pad) 80px} .e404 b{display:block;font-family:var(--d);font-weight:800;font-size:clamp(6rem,26vw,22rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(var(--fg-rgb),.22)} /* ========================================================================== Light-theme refinements Depth on paper comes from elevation and hairlines, not from darker fills — these rules add that, and are neutralised under data-theme="dark". ========================================================================== */ .card-edge,.panel{box-shadow:var(--shadow-md)} .split__fig,.post__fig,.card-edge__fig,.reel,.map,.frame,.slide{box-shadow:var(--shadow-sm)} .hdr.stuck::before{box-shadow:0 1px 0 var(--line-2),0 10px 30px rgba(var(--fg-rgb),.05)} .hero__bg img{opacity:.92;object-position:78% 22%} .hero__grid{opacity:.75} .slide img{opacity:.9} .hub__art{opacity:.5} .ftr__word b{-webkit-text-stroke-color:rgba(var(--fg-rgb),.19)} .mate__fig img{filter:grayscale(1) contrast(1.02) brightness(1.03)} html[data-theme="dark"] .card-edge, html[data-theme="dark"] .panel, html[data-theme="dark"] .split__fig, html[data-theme="dark"] .post__fig, html[data-theme="dark"] .card-edge__fig, html[data-theme="dark"] .reel, html[data-theme="dark"] .map, html[data-theme="dark"] .frame, html[data-theme="dark"] .slide, html[data-theme="dark"] .hdr.stuck::before{box-shadow:none} html[data-theme="dark"] .hero__bg::after{ background:linear-gradient(180deg,rgba(var(--bg-rgb),.86) 0%,rgba(var(--bg-rgb),.42) 38%,rgba(var(--bg-rgb),.88) 88%,var(--ink) 100%), radial-gradient(70% 60% at 18% 78%,rgba(84,82,162,.42),transparent 70%); } html[data-theme="dark"] .hero__bg img{opacity:.42} html[data-theme="dark"] .hero__grid{opacity:.5} html[data-theme="dark"] .slide img{opacity:.72} html[data-theme="dark"] .statement__txt .w{color:rgba(var(--fg-rgb),.13)} html[data-theme="dark"] .ticker em{-webkit-text-stroke-color:rgba(var(--fg-rgb),.30)} html[data-theme="dark"] .card-edge__n{-webkit-text-stroke-color:rgba(var(--fg-rgb),.20)} html[data-theme="dark"] .hub{background:var(--ink)} html[data-theme="dark"] .work__row:hover{background:var(--ink-3)} html[data-theme="dark"] .reel img{opacity:.62} html[data-theme="dark"] .reel::after{background:linear-gradient(180deg,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),.72))} html[data-theme="dark"] .mate__fig img{filter:grayscale(1) contrast(1.05)} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1180px){ .scale__grid{grid-template-columns:repeat(2,1fr)} .scale__cell:nth-child(3){border-left:0;padding-left:0} .hubs__grid{grid-template-columns:repeat(2,1fr)} .news__grid{grid-template-columns:repeat(2,1fr)} .team__grid{grid-template-columns:repeat(3,1fr)} .ftr__top{grid-template-columns:1fr 1fr} .legal-grid{grid-template-columns:1fr} .legal-toc{position:static} } @media (max-width:960px){ .hdr__nav,.hdr__login{display:none} .menu__inner{grid-template-columns:1fr;align-items:start;padding-top:130px} .card-edge{grid-template-columns:1fr;min-height:0} .card-edge__fig{aspect-ratio:16/10} .card-edge__n{font-size:2.6rem} .stack__head{grid-template-columns:1fr} .split{grid-template-columns:1fr} .split--rev .split__fig{order:0} .split__fig{aspect-ratio:4/3} .contact__grid{grid-template-columns:1fr} .work__row{grid-template-columns:auto 1fr;row-gap:10px} .work__meta{grid-column:2;justify-content:flex-start} .work__peek{display:none} .statement__txt{max-width:none} .scroll-cue{display:none} } @media (max-width:720px){ .hero{min-height:94svh} .hero__stat b{font-size:1.5rem} .scale__grid{grid-template-columns:1fr} .scale__cell,.scale__cell + .scale__cell{border-left:0;padding-left:0} .hubs__grid{grid-template-columns:1fr} .news__grid{grid-template-columns:1fr} .team__grid{grid-template-columns:repeat(2,1fr)} .ftr__top{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} .rail__pin{height:auto;padding:clamp(56px,9vw,90px) 0} .rail__track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;-webkit-overflow-scrolling:touch;transform:none!important;width:100%} .rail__track::-webkit-scrollbar{display:none} .slide{width:78vw;scroll-snap-align:start} .rail__prog{display:none} .rail__hint{display:flex;gap:8px;align-items:center;font-family:var(--d);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);padding:0 var(--pad);margin-top:14px} .stack__item{position:static} .ftr__word b{-webkit-text-stroke-width:.7px} .reel{height:62svh} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .rv{opacity:1;transform:none} .statement__txt .w{color:var(--cream)} .u-mask .ln > span{transform:none!important} .phero::before,.phero::after{animation:none!important;transform:none!important} }