/* =========================================================================
   LIQUIDBULLET STUDIOS — liquidbullet.css
   Consolidated site stylesheet (generated from per-page inline styles)
   Structure:
     1. Root variables + base reset (shared across every page)
     2. Shared component classes (nav, footer, buttons, type system, etc.)
     3. Shared responsive rules (@media)
     4. Per-page sections — page-specific classes, and any class name
        that means something different from one page to the next.
        Those are scoped with body[data-page="..."] the same way
        pushka.css disambiguates repeated component classes.
   ========================================================================= */

/* ---------- 1. Root variables & base reset ---------- */


:root{
    --black:#070707;
    --ink:#0e0e0d;
    --white:#ffffff;
    --bone:#f3f2ee;          /* light sheet background */
    --bone-deep:#e9e7e0;
    --accent:#ff6a13;        /* bullet orange */
    --accent-deep:#d84f00;
    --grey:#8f8f8f;
    --line-dark:rgba(7,7,7,.14);
    --outline:rgba(232,230,224,.22);   /* greyish-white hairline — black-on-black seams */
    --line-light:rgba(255,255,255,.16);
    --radius-sheet:0px;      /* Changed from 32px to 0px for sharper edges */
    --radius-card:0px;
    --pad-x:4vw;
    --ease-out:cubic-bezier(.22,1,.36,1);
}
body[data-page="projects"] {
    --radius-card: 20px;
}

/* ---------- 2. Shared base rules & components ---------- */


*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:auto;}

html,body{width:100%;}

body{
    background:var(--black);
    color:var(--white);
    font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
    font-size:14px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

::selection{background:var(--accent);color:var(--black);}

img{display:block;max-width:100%;}

a{color:inherit;text-decoration:none;}

button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}



#smooth-content{will-change:transform;}



.seam-top{border-top:1px solid var(--outline);}

.display--sub{font-size:clamp(34px,6vw,100px);}

.display--section{font-size:clamp(38px,5.4vw,92px);color:var(--ink);}

.display--statement{font-size:clamp(34px,5.6vw,96px);}

.display--cta{font-size:clamp(44px,8.4vw,150px);}

.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}

.body-l{font-size:clamp(15px,1.25vw,19px);line-height:1.7;}

.muted{color:var(--grey);}

.accent{color:var(--accent);}



.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}

.word-mask .word,.word-mask .char{display:inline-block;will-change:transform;}

.js-anim [data-reveal] .word,
.js-anim [data-reveal-chars] .char{transform:translateY(115%);}

.js-anim [data-fade]{opacity:0;transform:translateY(28px);}



.nav{
    position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;justify-content:flex-start;
    transform:translateZ(0);will-change:transform;
    background:transparent;
    padding:.5vw 2vw .5vw 2.5vw;
}

.brand{display:flex;align-items:center;gap:.5vw;font-weight:700;letter-spacing:.02em;font-size:1.6vw;text-transform:uppercase;}

.brand i{width:.8vw;height:.8vw;border-radius:50%;background:var(--accent);flex:none;transition:transform .35s var(--ease-out);}

.brand:hover i{transform:scale(1.5);}


.nav__links{display:flex;gap:0;align-items:center;margin-left:auto;}

.nav__link{font-size:1.111vw;font-weight:400;letter-spacing:0;text-transform:lowercase;line-height:120%;padding:1.5vw 1vw;}

.nav__burger{display:none;width:42px;height:38px;border-radius:12px;border:1px solid var(--line-light);position:relative;}

.nav__burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--white);transition:transform .35s var(--ease-out),top .35s var(--ease-out);}

.nav__burger span:first-child{top:14px;}

.nav__burger span:last-child{top:22px;}

.menu-open .nav__burger span:first-child{top:18px;transform:rotate(45deg);}

.menu-open .nav__burger span:last-child{top:18px;transform:rotate(-45deg);}



.menu{
    position:fixed;inset:0;z-index:55;background:var(--black);
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    padding:0 8vw;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .6s var(--ease-out);
    visibility:hidden;
}

.menu-open .menu{clip-path:inset(0 0 0% 0);visibility:visible;}

.menu a{font-size:clamp(34px,9vw,64px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.15;border-bottom:1px solid var(--line-light);padding:14px 0;display:flex;justify-content:space-between;align-items:center;}

.menu a em{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--accent);}



.veil{position:fixed;inset:0;z-index:100;background:var(--black);display:flex;align-items:center;justify-content:center;}

.veil__word{font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(30px,6vw,80px);display:flex;overflow:hidden;}

.veil__word .char{display:inline-block;transform:translateY(115%);}

.veil__word .dot{color:var(--accent);}

.no-js .veil,.no-anim .veil{display:none;}

.hero__reveal-media{
    position:absolute;left:50%;top:50%;
    width:100vw;height:100vh;
    transform:translate(-50%,-50%);
}

.hero__reveal-media img, .hero__reveal-media video{width:100%;height:100%;object-fit:cover;}

.no-anim .hero-pin{height:auto;}


.hero__glow{
    position:absolute;left:50%;top:-32vw;transform:translateX(-50%);
    width:110vw;height:78vw;border-radius:50%;
    background:radial-gradient(closest-side,rgba(255,106,19,.06),rgba(255,106,19,.01) 55%,transparent 72%);
    pointer-events:none;
}

.hero__title{position:relative;z-index:2;}

.hero__row{display:flex;align-items:center;gap:2.2vw;flex-wrap:wrap;}

.hero__scroll{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}

.hero__scroll svg{animation:nudge 1.8s var(--ease-out) infinite;}

@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.sheet + .sheet{margin-top:0;}

.section-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin:26px 0 6vh;}

.sheet .eyebrow{color:var(--ink);}



.flagship {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--ink);
    color: var(--white);
    width: 100%;
    aspect-ratio: 21 / 9; /* Cinematic proportions */
    min-height: 500px;
    max-height: 85vh; /* Safety catch so it's never taller than screen */
    display: flex;
    align-items: flex-end;
}

.flagship__media img{position:absolute;top:-10%;left:0;width:100%;height:120%;object-fit:cover;will-change:transform;filter:saturate(1.04);}


.flagship__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Richer, smoother gradient sweep up */
    background: linear-gradient(180deg, rgba(7,7,7,0) 20%, rgba(7,7,7,0.4) 50%, rgba(7,7,7,0.95) 95%);
}


.flagship__body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(30px, 5vh, 60px) clamp(24px, 4vw, 60px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
}

.flagship__content {
    flex: 1 1 500px;
    max-width: 680px;
}

.tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-light);border-radius:999px;padding:6px 12px;}

.tag--hot{background:var(--accent);border-color:var(--accent);color:var(--black);}

.flagship__title { font-size: clamp(48px, 8vw, 132px); line-height: 0.9; margin-bottom: 12px; }

.flagship__desc { color: #d8d6d1; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }



.btn{display:inline-flex;align-items:center;gap:12px;}

.btn__coin svg{transition:transform .35s var(--ease-out);}

.btn:hover .btn__label{background:var(--accent);border-color:var(--accent);color:var(--black);}

.btn:hover .btn__coin{background:var(--accent);border-color:var(--accent);color:var(--black);}

.btn:hover .btn__coin svg{transform:translateX(3px);}

.btn--solid .btn__label{background:var(--accent);border-color:var(--accent);color:var(--black);}

.btn--solid:hover .btn__label{background:var(--ink);border-color:var(--ink);color:var(--white);}

.btn--solid:hover .btn__coin{background:var(--ink);border-color:var(--ink);color:var(--white);}

.sheet .btn{color:var(--ink);}



.strip {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-card); /* Softens the row container if it hits the bounds */
}

.strip__track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding-right: 4vw; /* ensures drift doesn't aggressively cut off */
}

.strip__item {
    width: clamp(260px, 22vw, 440px); aspect-ratio: 16 / 9;
    border-radius:0px; overflow: hidden; background: var(--ink);
    flex: none; position: relative;
}


.strip__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius:0px;
    pointer-events: none;
    transition: border-color 0.4s var(--ease-out);
}

.strip__item:hover::after {
    border-color: rgba(255, 106, 19, 0.5); /* Subtle brand glow on hover */
}

.strip__item img {
    width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8);
    transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

.strip__item:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.strip__note {
    margin-top: 24px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #7a786f;
    display: flex;
    align-items: center;
    gap: 16px;
}

.strip__note::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(7, 7, 7, 0.08); /* Clean horizontal anchoring line */
}



.dossier{margin-top:12vh;}

.dossier__row{
    display:grid;grid-template-columns:78px 1fr auto;gap:3vw;align-items:center;
    padding:30px 6px;border-top:1px solid var(--line-dark);position:relative;
}

.dossier__row:last-child{border-bottom:1px solid var(--line-dark);}

.dossier__idx{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);}

.dossier__name{font-size:clamp(26px,3.6vw,54px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1;}

.dossier__state{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:999px;padding:8px 14px;white-space:nowrap;}

.dossier__row--live{cursor:pointer;}

.dossier__row--live .dossier__state{background:var(--ink);border-color:var(--ink);color:var(--white);}

.dossier__row--locked{color:#9a988f;}

.dossier__row--locked .dossier__name{-webkit-text-stroke:1px #b9b7ac;color:transparent;}

.dossier__peek{
    position:absolute;right:16%;top:50%;width:min(300px,24vw);aspect-ratio:16/9;
    border-radius:0px;overflow:hidden;pointer-events:none;z-index:5;
    transform:translateY(-50%) rotate(3deg) scale(.85);opacity:0;
    transition:opacity .35s,transform .45s var(--ease-out);
    box-shadow:0 30px 60px rgba(7,7,7,.35);
}

.dossier__peek img{width:100%;height:100%;object-fit:cover;}

.dossier__row--live:hover .dossier__peek{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1);}

.works__foot{display:flex;justify-content:center;margin-top:9vh;}


.marquee{
    position:relative;z-index:3;
    background:var(--accent);color:var(--black);
    overflow:hidden;padding:22px 0;
    border-top:1px solid var(--black);border-bottom:1px solid var(--black);
}

.marquee__track{display:flex;width:max-content;will-change:transform;}

.marquee__seq{display:flex;align-items:center;flex:none;}

a.marquee-link{display:block;}

.grow__stage{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad-x);}

.grow__circle{
    position:absolute;left:50%;top:50%;
    width:42vw;height:42vw;margin-left:-21vw;margin-top:-21vw;
    border-radius:50%;background:var(--accent);
    transform:scale(.001);
    will-change:transform;
}

.grow__label{position:relative;z-index:2;margin-bottom:3.4vh;color:var(--white);}

.no-anim .grow{height:auto;padding:16vh 0;}

.no-anim .grow__circle{display:none;}

.no-anim .grow__stage{background:var(--accent);color:var(--black);height:auto;padding:14vh var(--pad-x);}

.contact-card__cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4.5vh;padding-bottom:13vh;}


.contact-card__line{max-width:14ch; color:#0e0e0d !important;}

.contact-card__lede{max-width:46ch;color:#4c4a45;font-size:clamp(15px,1.15vw,19px);line-height:1.8;}

.pill-cta::before{
    content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
    background:var(--accent);
    transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.25,1);
}

.pill-cta svg{width:1em;height:1em;transition:transform .45s var(--ease-out);}

.pill-cta:hover{color:var(--black);border-color:var(--accent);transform:scale(1.04);}

.pill-cta:hover::before{transform:translateY(0);}

.pill-cta:hover svg{transform:translateX(8px);}

.contact-card__dark .blurb{max-width:380px;color:var(--grey);margin-top:16px;}

.contact-card__dark .copyright{margin-top:7vh;font-size:12px;letter-spacing:.08em;color:var(--grey);line-height:1.9;}

.footer__col a{display:block;padding:7px 0;font-size:14px;letter-spacing:.04em;text-transform:lowercase;color:#d5d3ce;transition:color .25s,transform .25s var(--ease-out);}

.footer__col a:hover{color:var(--accent);transform:translateX(4px);}

.endcap__word{
    font-weight:700;font-size:12vw;line-height:.9;letter-spacing:-.025em;white-space:nowrap;
    max-width:96vw;overflow:hidden;
    color:transparent;
    -webkit-text-stroke:2px var(--accent);
    transition:color .5s var(--ease-out);
}

.endcap__word:hover{color:var(--accent);}

.endcap__word .dot{-webkit-text-stroke:0;color:var(--accent);}

.endcap__bar{display:flex;gap:26px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}

.endcap__bar a:hover{color:var(--accent);}



.wipe{display:inline-block;position:relative;vertical-align:top;}

.js-anim [data-reveal] .word,
.js-anim [data-reveal-chars] .char{transform:translateY(115%);}


.perks{
    position:relative;z-index:2;display:flex;gap:2.4vw;margin-top:5vh;
    color:var(--black);flex-wrap:wrap;justify-content:center;max-width:1300px;
}

.perk{flex:1 1 170px;max-width:230px;text-align:left;}

.perk__num{
    font-size:11px;font-weight:700;letter-spacing:.2em;
    display:block;padding-bottom:10px;margin-bottom:12px;
    border-bottom:1px solid rgba(7,7,7,.25);
}

.perk h4{font-size:clamp(15px,1.3vw,20px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;margin-bottom:8px;}

.perk p{font-size:13px;line-height:1.6;font-weight:500;color:rgba(7,7,7,.72);}

.no-anim .grow__label,.no-anim .grow__text{color:var(--black);}

@keyframes starspin{to{transform:rotate(360deg);}}

a:hover > .wipe .wipe__over,
a:focus-visible > .wipe .wipe__over,
button:hover > .wipe .wipe__over,
[data-hover-stagger]:hover .wipe__over,
[data-hover-stagger]:focus-visible .wipe__over{clip-path:inset(0 0 0 0);}

a:hover > .wipe .wipe__base,
a:focus-visible > .wipe .wipe__base,
button:hover > .wipe .wipe__base,
[data-hover-stagger]:hover .wipe__base,
[data-hover-stagger]:focus-visible .wipe__base{clip-path:inset(0 0 0 100%);}

/* ---------- 3. Shared responsive rules ---------- */
@media (max-width:900px) {

    :root{--pad-x:6vw;--radius-sheet:0px;}

    .nav{padding:14px 5vw;}

    .nav__links{display:none;}

    .nav__burger{display:block;margin-left:auto;}

    .brand{font-size:17px;gap:6px;}

    .brand i{width:9px;height:9px;}

    .hero{padding-top:calc(9vh + 64px);}

    .hero__kicker{flex-direction:column;align-items:flex-start;gap:10px;}

    .section-head{grid-template-columns:1fr;align-items:start;}



    .flagship { aspect-ratio: 4 / 5; min-height: 600px; max-height: none; }

    .flagship__body { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 24px; }

    .flagship__actions { width: 100%; }

    .dossier__row{grid-template-columns:44px 1fr;grid-template-rows:auto auto;}

    .dossier__state{grid-column:2;justify-self:start;}

    .dossier__peek{display:none;}


    .contact-card__dark{grid-template-columns:1fr;gap:40px;}

    .endcap{height:60vh;gap:4vh;}

    .endcap__word{font-size:11.2vw;-webkit-text-stroke-width:1.3px;}


    .perks{gap:18px 16px;margin-top:4vh;}

    .perk{flex:1 1 40%;max-width:none;}

    .perk p{display:none;}
}
@media (max-width:1200px) {

    .flagship { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion:reduce) {

    .hero__scroll svg{animation:none;}
}
@media (max-height:760px) and (min-width:901px) {

    .perk p{display:none;}

    .grow__text{font-size:clamp(28px,3.4vw,52px);}
}


/* =========================================================================
   4. PER-PAGE STYLES
   ========================================================================= */

/* ----------------------------------------------------------------
   PAGE: INDEX (Home)  —  body[data-page="index"]
   ---------------------------------------------------------------- */
body[data-page="index"] .display{
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:-.02em;
    line-height:.9;
}
body[data-page="index"] .display--hero{font-size:clamp(46px,9vw,150px);}
body[data-page="index"] .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:max(11px,.85vw);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
body[data-page="index"] .brand__logo{height:clamp(26px,2.3vw,40px);width:auto;display:block;}
body[data-page="index"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* min(12vw, 15vh) ensures the logo respects whichever dimension is SMALLER */
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="index"] .brand:hover .brand__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="index"] .footer__logo{
    display: block;
    width: clamp(150px, 13vw, 950px);
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* Dynamically pulls the logo up to negate any transparent space in the image */
    margin-top: -3.1vw;
    margin-bottom: 0;
}
body[data-page="index"] .brand:hover .footer__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="index"] .hero-pin{position:relative;height:230vh;background:var(--black);}
body[data-page="index"] .hero{
    position:relative;
    height:100vh;
    padding:calc(8vh + 70px) var(--pad-x) 6vh;
    display:flex;flex-direction:column;justify-content:flex-start;
    overflow:hidden;
}
body[data-page="index"] .hero__reveal{
    position:absolute;left:50%;top:50%;z-index:1;
    width:40vw;height:40vw;border-radius:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;pointer-events:none;
}
body[data-page="index"] .hero__reveal-media::after{ /* tint keeps the headline readable over any art */
    content:"";position:absolute;inset:0;
    background:radial-gradient(closest-side,rgba(7,7,7,.28),rgba(7,7,7,.62));
}
body[data-page="index"] .no-anim .hero{height:auto;min-height:100vh;}
body[data-page="index"] .no-anim .hero__reveal{width:64vw;height:64vw;}


.hero__play{
    position:absolute;right:var(--pad-x);bottom:6vh;z-index:4;
    width:clamp(104px,9vw,152px);aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
}

.hero__play-ring{position:absolute;inset:0;width:100%;height:100%;animation:ringspin 16s linear infinite;}

.hero__play:hover .hero__play-ring{animation-duration:6s;}

.hero__play-ring text{fill:var(--accent);font-size:8.4px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;}

.hero__play-icon{
    width:38%;aspect-ratio:1;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--accent);color:var(--accent);
    transition:background .3s,color .3s,transform .35s var(--ease-out);
}

.hero__play-icon svg{width:34%;height:auto;transform:translateX(6%);}

.hero__play:hover .hero__play-icon{background:var(--accent);color:var(--black);transform:scale(1.12);}

@keyframes ringspin{to{transform:rotate(360deg);}}


.ytmodal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(7,7,7,.92);padding:4vmin;}

.ytmodal.is-open{display:flex;}

.ytmodal__frame{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;background:#000;border-radius:0px;overflow:hidden;border:1px solid var(--line-light);}

.ytmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.ytmodal__close{
    position:absolute;top:3vmin;right:3vmin;width:52px;height:52px;border-radius:50%;
    border:1px solid var(--line-light);color:var(--white);font-size:22px;line-height:1;
    transition:background .25s,color .25s;
}

.ytmodal__close:hover{background:var(--accent);border-color:var(--accent);color:var(--black);}
body[data-page="index"] .hero__kicker{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5vh;gap:24px;}
body[data-page="index"] .hero__meta{
    display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
    margin-top:auto;padding-bottom:0;padding-right:clamp(120px,11vw,180px); /* clears the play button */
}
body[data-page="index"] .hero__blurb{max-width:420px;}
body[data-page="index"] .sheet{
    position:relative;z-index:3;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:11vh var(--pad-x) 12vh;
}
body[data-page="index"] .sheet--works{margin-top:-11vh;}
body[data-page="index"] .section-head .lede{max-width:460px;color:#4c4a45;font-size:max(15px,1.05vw);}
body[data-page="index"] .showcase-wrapper{
    width: 100%;
    max-width: 1600px;
    margin: 4vh auto 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body[data-page="index"] .img-fallback{ background: radial-gradient(120% 120% at 20% 0%, #2a1206, var(--ink) 60%); }
body[data-page="index"] .img-fallback img{ display: none; }
body[data-page="index"] .flagship__tags{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
body[data-page="index"] .flagship__actions{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 0 0 max-content;
}
body[data-page="index"] .btn__label{
    border:1px solid currentColor;border-radius:999px;
    padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="index"] .btn__coin{
    width:44px;height:44px;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;flex:none;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="index"] .dossier__sub{font-size:max(11px,.78vw);letter-spacing:.16em;text-transform:uppercase;color:#7a786f;margin-top:8px;}
body[data-page="index"] .marquee__item{
    display:flex;align-items:center;gap:2.6vw;padding-right:2.6vw;
    font-size:clamp(22px,3.2vw,44px);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
}


.marquee__item::after{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--black);flex:none;}
body[data-page="index"] .grow{position:relative;z-index:3;height:320vh;background:var(--black);}
body[data-page="index"] .grow__text{position:relative;z-index:2;text-align:center;max-width:26ch;}



.grow__desc {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin-top: 4vh;
    margin-bottom: 2vh;
    text-align: center;
    color: var(--black);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;
    font-weight: 500;
}

.grow__desc p { margin-bottom: 1.2em; }

.grow__desc p:last-child { margin-bottom: 0; }



.grow__stats{
    position:relative;z-index:2;display:flex;gap:6vw;margin-top:5vh;
    color:var(--black);flex-wrap:wrap;justify-content:center;
}

.stat{text-align:center;}

.stat__num{font-size:clamp(38px,5vw,76px);font-weight:700;letter-spacing:-.02em;line-height:1;}

.stat__cap{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;}

.no-anim .grow__label,.no-anim .grow__text,.no-anim .grow__desc{color:var(--black);}
body[data-page="index"] .contact-card{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    margin-top:-12vh;
    padding:14vh var(--pad-x) 0;
    overflow:hidden;
}
body[data-page="index"] .pill-cta{
    position:relative;display:inline-flex;align-items:center;gap:16px;
    border:1px solid var(--ink);border-radius:999px;
    padding:clamp(18px,2vw,26px) clamp(36px,3.4vw,54px);
    font-size:clamp(17px,1.4vw,24px);text-transform:lowercase;color:var(--ink);
    overflow:hidden;isolation:isolate;
    transition:color .35s,border-color .35s,transform .45s var(--ease-out);
}
body[data-page="index"] .contact-card__dark{
    background:var(--black);color:var(--white);
    margin:0 calc(-1 * var(--pad-x));
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;

    /* THIS CRITICAL LINE ENSURES ALL COLUMNS ARE FLUSH AT THE TOP */
    align-items: start;
}
body[data-page="index"] .contact-card__dark h5{
    /* ZEROING OUT BROWSER DEFAULT MARGINS SO THE GRID DOESNT PUSH TEXT DOWN */
    margin-top: 0;
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
body[data-page="index"] .endcap{
    position:relative;z-index:4;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}
body[data-page="index"] .wipe__base{
    display:inline-block;
    clip-path:inset(0 0 0 0);
    transition:clip-path .5s cubic-bezier(.7,0,.25,1);
}
body[data-page="index"] .wipe__over{
    position:absolute;inset:0;color:var(--accent);pointer-events:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path .5s cubic-bezier(.7,0,.25,1);
}



a:hover > .wipe .wipe__over,
a:focus-visible > .wipe .wipe__over,
button:hover > .wipe .wipe__over,
[data-hover-stagger]:hover .wipe__over,
[data-hover-stagger]:focus-visible .wipe__over{clip-path:inset(0 0 0 0);}



a:hover > .wipe .wipe__base,
a:focus-visible > .wipe .wipe__base,
button:hover > .wipe .wipe__base,
[data-hover-stagger]:hover .wipe__base,
[data-hover-stagger]:focus-visible .wipe__base{clip-path:inset(0 0 0 100%);}

/* INDEX (Home) — responsive overrides */
@media (max-width:1600px) {
    body[data-page="index"] .brand__logo{
        width: clamp(180px, min(12vw, 12vh), 240px);
        margin-bottom: -8px;
    }
}
@media (max-width:900px) {
    body[data-page="index"] .brand__logo{
        width: 150px;
        margin-bottom: -4px;
    }
    body[data-page="index"] .footer__logo{
        margin-top: -10px; /* Adjusted offset for mobile bounds */
    }
    body[data-page="index"] .hero-pin{height:200vh;}
    body[data-page="index"] .hero__reveal{width:74vw;height:74vw;}
    body[data-page="index"] .hero__meta{flex-direction:column;align-items:flex-start;padding-right:0;padding-bottom:clamp(110px,30vw,140px);}

    .hero__play{right:5vw;bottom:4vh;width:clamp(96px,26vw,120px);}
}
@media (max-height:700px) {
    body[data-page="index"] .brand__logo{
        width: clamp(140px, 12vh, 180px);
        margin-bottom: 0;
    }
}

/* ----------------------------------------------------------------
   PAGE: CAREERS  —  body[data-page="careers"]
   ---------------------------------------------------------------- */
body[data-page="careers"] .display{
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:-.02em;
    line-height:.9;
}
body[data-page="careers"] .display--hero{font-size:clamp(46px,9vw,150px);}
body[data-page="careers"] .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:max(11px,.85vw);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
body[data-page="careers"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="careers"] .brand:hover .brand__logo{transform:scale(1.04);filter:brightness(1.2);}
body[data-page="careers"] .footer__logo{
    display:block;width:clamp(150px,13vw,950px);height:auto;
    transform-origin:left center;
    transition:transform .4s var(--ease-out), filter .4s;
    margin-top:-3.1vw;margin-bottom:0;
}
body[data-page="careers"] .brand:hover .footer__logo{transform:scale(1.04);filter:brightness(1.2);}
body[data-page="careers"] .hero-pin{position:relative;height:210vh;background:var(--black);}
body[data-page="careers"] .hero{
    position:relative;height:100vh;
    padding:calc(8vh + 70px) var(--pad-x) 6vh;
    display:flex;flex-direction:column;justify-content:flex-start;
    overflow:hidden;
}
body[data-page="careers"] .hero__reveal{
    position:absolute;left:50%;top:50%;z-index:1;
    width:40vw;height:40vw;border-radius:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;pointer-events:none;
}
body[data-page="careers"] .hero__reveal-media::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(closest-side,rgba(7,7,7,.28),rgba(7,7,7,.62));
}
body[data-page="careers"] .img-fallback{background:radial-gradient(120% 120% at 20% 0%, #2a1206, var(--ink) 60%);}
body[data-page="careers"] .img-fallback img{display:none;}
body[data-page="careers"] .no-anim .hero{height:auto;min-height:100vh;}
body[data-page="careers"] .no-anim .hero__reveal{width:64vw;height:64vw;}
body[data-page="careers"] .hero__kicker{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5vh;gap:24px;}
body[data-page="careers"] .hero__meta{
    display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
    margin-top:auto;padding-bottom:0;
}
body[data-page="careers"] .hero__blurb{max-width:460px;}



.hero__count{
    position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;
    margin-top:3.4vh;align-self:flex-start;
    border:1px solid var(--line-light);border-radius:999px;
    padding:10px 18px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}

.hero__count b{color:var(--accent);font-size:15px;letter-spacing:0;}

.hero__count i{
    width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
    box-shadow:0 0 0 0 rgba(255,106,19,.7);animation:pulse 2.4s infinite;
}

.hero__count.is-closed i{background:var(--grey);animation:none;box-shadow:none;}

@keyframes pulse{
    70%{box-shadow:0 0 0 10px rgba(255,106,19,0);}
    100%{box-shadow:0 0 0 0 rgba(255,106,19,0);}
}
body[data-page="careers"] .sheet{
    position:relative;z-index:3;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:11vh var(--pad-x) 12vh;
}

.sheet--jobs{margin-top:-11vh;}
body[data-page="careers"] .section-head .lede{max-width:460px;color:#4c4a45;font-size:max(15px,1.05vw);}


.sheet--jobs .section-head{margin:22px 0 4vh;}
body[data-page="careers"] .btn__label{
    border:1px solid currentColor;border-radius:999px;
    padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="careers"] .btn__coin{
    width:44px;height:44px;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;flex:none;
    transition:background .3s,color .3s,border-color .3s;
}



.jobs__toolbar{
    display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;
    padding-bottom:26px;border-bottom:1px solid var(--line-dark);
}

.search{
    position:relative;flex:1 1 340px;max-width:520px;
}

.search svg{
    position:absolute;left:20px;top:50%;transform:translateY(-50%);
    width:15px;height:15px;color:#8b8981;pointer-events:none;
}

.search input{
    width:100%;font:inherit;font-size:14px;color:var(--ink);
    background:var(--bone-deep);
    border:1px solid transparent;border-radius:999px;
    padding:15px 46px 15px 48px;
    transition:border-color .3s, background .3s;
}

.search input::placeholder{color:#8b8981;letter-spacing:.04em;}

.search input:focus{outline:none;border-color:var(--accent);background:#fff;}

.search__clear{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    width:22px;height:22px;border-radius:50%;display:none;place-items:center;
    background:rgba(7,7,7,.12);color:var(--ink);font-size:13px;line-height:1;
}

.search__clear.is-visible{display:grid;}

.search__clear:hover{background:var(--accent);color:var(--black);}


.chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}

.chip{
    font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    border:1px solid var(--line-dark);border-radius:999px;padding:9px 15px;color:#5a5852;
    transition:background .28s var(--ease-out), color .28s, border-color .28s, transform .28s var(--ease-out);
    white-space:nowrap;
}

.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);}

.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--white);}

.chip__n{opacity:.55;margin-left:7px;font-size:10px;}


.jobs__count{
    margin:22px 0 2vh;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7a786f;
}

.jobs__list{margin-top:2vh;}



.job{border-top:1px solid var(--line-dark);}

.job:last-child{border-bottom:1px solid var(--line-dark);}

.job__head{
    width:100%;text-align:left;
    display:grid;grid-template-columns:78px 1fr auto 44px;gap:3vw;align-items:center;
    padding:30px 6px;position:relative;
}

.job__idx{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);}

.job__name{font-size:clamp(22px,2.9vw,44px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;display:block;transition:color .3s;}

.job:hover .job__name{color:var(--accent);}

.job__sub{font-size:max(11px,.78vw);letter-spacing:.16em;text-transform:uppercase;color:#7a786f;margin-top:8px;display:block;}

.job__state{
    font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    border:1px solid var(--line-dark);border-radius:999px;padding:8px 14px;white-space:nowrap;
    background:var(--ink);border-color:var(--ink);color:var(--white);
}

.job__chevron{
    width:44px;height:44px;border:1px solid var(--line-dark);border-radius:50%;
    display:grid;place-items:center;justify-self:end;
    transition:transform .4s var(--ease-out), background .3s, border-color .3s, color .3s;
}

.job.is-open .job__chevron{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--black);}

.job__head:hover .job__chevron{background:var(--accent);border-color:var(--accent);color:var(--black);}



.job__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out);}

.job.is-open .job__panel{grid-template-rows:1fr;}

.job__panel-inner{overflow:hidden;}

.job__body{
    display:grid;grid-template-columns:1fr 1fr;gap:2vw 4vw;
    padding:8px 6px 40px 6px;
}

.job__lede{grid-column:1 / -1;max-width:70ch;color:#4c4a45;font-size:max(15px,1.05vw);line-height:1.75;margin-bottom:1vh;}

.job__col h4{
    font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
    margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-dark);
}

.job__col ul{list-style:none;}

.job__col li{
    position:relative;padding-left:20px;margin-bottom:10px;color:#4c4a45;font-size:14px;line-height:1.7;
}

.job__col li::before{
    content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--accent);
}

.job__meta{
    grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:1vh;
}

.job__meta .tag{border-color:var(--line-dark);color:#5a5852;}

.job__foot{grid-column:1 / -1;margin-top:2vh;}



.jobs__empty{
    display:none;
    text-align:center;padding:9vh 6vw;
    border:1px dashed rgba(7,7,7,.18);border-radius:var(--radius-card);
    background:rgba(7,7,7,.02);
}

.jobs__empty.is-visible{display:block;}

.jobs__empty-mark{
    font-size:52px;line-height:1;color:var(--accent);margin-bottom:22px;display:block;font-weight:700;
}

.jobs__empty h3{
    font-size:clamp(24px,3vw,44px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--ink);
}

.jobs__empty p{max-width:52ch;margin:18px auto 0;color:#4c4a45;font-size:max(15px,1.05vw);line-height:1.75;}

.jobs__empty .btn{margin-top:34px;}
body[data-page="careers"] .grow{position:relative;z-index:3;height:300vh;background:var(--black);}
body[data-page="careers"] .grow__text{position:relative;z-index:2;text-align:center;max-width:24ch;font-size:clamp(30px,4.2vw,68px);}



.apply{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    margin-top:-12vh;
    padding:14vh var(--pad-x) 12vh;
    overflow:hidden;
}

.apply .eyebrow{color:var(--ink);}

.apply__grid{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:5vw;align-items:start;max-width:1600px;margin:0 auto;
}



.form-card{
    background:var(--white);
    border:1px solid rgba(7,7,7,.08);
    border-radius:var(--radius-card);
    padding:clamp(26px,2.6vw,48px);
}

.form-block + .form-block{margin-top:44px;}

.form-block__title{
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
    padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--line-dark);
}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

.field{display:flex;flex-direction:column;gap:10px;}

.field--full{grid-column:1 / -1;}

.field label{
    font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5a5852;
    transition:color .25s;
}

.field label .req{color:var(--accent);}

.field label.in-focus{color:var(--accent);}

.field input,
.field textarea,
.field select{
    width:100%;font:inherit;font-size:14px;line-height:1.6;color:var(--ink);
    background:var(--bone);
    border:1px solid var(--line-dark);border-radius:0px;
    padding:15px 16px;
    transition:border-color .3s, background .3s, box-shadow .3s;
}

.field input::placeholder,.field textarea::placeholder{color:#9a988f;}

.field input:focus,.field textarea:focus,.field select:focus{
    outline:none;border-color:var(--accent);background:var(--white);
    box-shadow:0 0 0 3px rgba(255,106,19,.14);
}

.field textarea{resize:vertical;min-height:150px;}

.field select{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    padding-right:44px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ff6a13' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;background-size:13px;
}

.field select:focus{background-color:var(--white);}

.field select optgroup{color:#7a786f;font-style:normal;font-weight:700;}

.field select option{color:var(--ink);}

.field__hint{font-size:11px;letter-spacing:.06em;color:#7a786f;}



.upload{position:relative;}

.upload input[type="file"]{
    position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}

.upload__face{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:var(--bone);border:1px dashed rgba(7,7,7,.22);border-radius:0px;
    padding:16px;font-size:13px;color:#7a786f;
    transition:border-color .3s,background .3s,color .3s;
}

.upload__face b{color:var(--accent);font-weight:700;}

.upload__face svg{width:16px;height:16px;flex:none;color:#9a988f;transition:transform .35s var(--ease-out),color .3s;}

.upload input[type="file"]:focus + .upload__face,
.upload:hover .upload__face{border-color:var(--accent);background:var(--white);color:var(--ink);}

.upload:hover .upload__face svg{transform:translateY(-2px);color:var(--accent);}

.upload.has-file .upload__face{border-style:solid;border-color:var(--accent);background:rgba(255,106,19,.05);color:var(--ink);}

.upload.has-error .upload__face{border-style:solid;border-color:#c8362b;color:#c8362b;background:rgba(200,54,43,.04);}



.recaptcha-wrap{margin-top:34px;}

.g-recaptcha{transform-origin:0 0;}



.consent{
    display:flex;align-items:flex-start;gap:14px;margin-top:26px;cursor:pointer;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.8;color:#5a5852;
}

.consent input{position:absolute;opacity:0;width:0;height:0;}

.consent__box{
    width:18px;height:18px;flex:none;margin-top:4px;border-radius:4px;
    border:1px solid rgba(7,7,7,.28);background:var(--bone);
    display:grid;place-items:center;transition:background .25s,border-color .25s;
}

.consent__box svg{width:10px;height:10px;color:var(--black);opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease-out);}

.consent input:checked + .consent__box{background:var(--accent);border-color:var(--accent);}

.consent input:checked + .consent__box svg{opacity:1;transform:scale(1);}

.consent input:focus-visible + .consent__box{outline:2px solid var(--accent);outline-offset:3px;}

.consent:hover .consent__box{border-color:var(--ink);}

.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

.consent.is-error .consent__box{border-color:#c8362b;background:rgba(200,54,43,.06);}



.form-card .btn{color:var(--ink);margin-top:34px;}

.form-card.is-busy .btn{pointer-events:none;opacity:.5;}

.submit__spin{
    display:none;width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(7,7,7,.25);border-top-color:var(--black);
    animation:spin .7s linear infinite;
}

.form-card.is-busy .submit__spin{display:block;}

.form-card.is-busy .submit__arrow{display:none;}

@keyframes spin{to{transform:rotate(360deg);}}

@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}

.form-card.is-error{animation:shake .5s;}



.form__response{
    display:none;margin-top:26px;border-radius:0px;padding:16px 18px;
    font-size:13px;line-height:1.7;
}

.form__response.is-visible{display:block;}

.form__response.is-success{background:rgba(24,120,52,.07);border:1px solid rgba(24,120,52,.35);color:#1b6b32;}

.form__response.is-error{background:rgba(200,54,43,.06);border:1px solid rgba(200,54,43,.38);color:#b8362b;}

.form__response ul{margin-top:10px;padding-left:20px;}

.form__response li{margin-bottom:4px;}



.apply__aside{padding-top:6vh;}

.apply__title{margin:3vh 0 0;color:var(--ink);font-size:clamp(32px,4.8vw,80px);}

.aside__note{display:flex;gap:28px;align-items:flex-start;margin-top:6vh;}

.aside__star{
    font-size:64px;line-height:.8;color:var(--accent);flex:none;
    animation:starspin 22s linear infinite;
}

.aside__note p{font-size:clamp(15px,1.15vw,18px);line-height:1.75;color:#4c4a45;max-width:44ch;}

.aside__note strong{color:var(--ink);}

.aside__box{
    margin-top:7vh;background:var(--white);border:1px solid rgba(7,7,7,.08);
    border-radius:0px;padding:24px 26px;font-size:13px;line-height:1.8;color:#5a5852;
}

.aside__box b{color:var(--ink);}

.aside__box p + p{margin-top:14px;}

.aside__box a{color:var(--accent);}

.aside__box a:hover{text-decoration:underline;}
body[data-page="careers"] .contact-card{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:0 var(--pad-x) 0;
    overflow:hidden;
}
body[data-page="careers"] .contact-card__dark{
    background:var(--black);color:var(--white);
    margin:0 calc(-1 * var(--pad-x));
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;
    align-items:start;
}
body[data-page="careers"] .contact-card__dark h5{
    margin-top:0;
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
body[data-page="careers"] .endcap{
    position:relative;z-index:4;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}
body[data-page="careers"] .wipe__base{display:inline-block;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}
body[data-page="careers"] .wipe__over{
    position:absolute;inset:0;color:var(--accent);pointer-events:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path .5s cubic-bezier(.7,0,.25,1);
}

/* CAREERS — responsive overrides */
@media (max-width:1600px) {
    body[data-page="careers"] .brand__logo{width:clamp(180px, min(12vw, 12vh), 240px);margin-bottom:-8px;}
}
@media (max-width:900px) {
    body[data-page="careers"] .brand__logo{width:150px;margin-bottom:-4px;}
    body[data-page="careers"] .footer__logo{margin-top:-10px;}
    body[data-page="careers"] .hero-pin{height:190vh;}
    body[data-page="careers"] .hero__reveal{width:74vw;height:74vw;}
    body[data-page="careers"] .hero__meta{flex-direction:column;align-items:flex-start;gap:20px;}


    .jobs__toolbar{flex-direction:column;align-items:stretch;}

    .search{max-width:none;}

    .chips{margin-left:0;}

    .job__head{grid-template-columns:38px 1fr 40px;gap:16px;padding:24px 2px;}

    .job__state{grid-column:2;justify-self:start;margin-top:12px;}

    .job__chevron{width:38px;height:38px;}

    .job__body{grid-template-columns:1fr;padding-bottom:32px;}


    .field-grid{grid-template-columns:1fr;}

    .aside__note{gap:18px;}

    .aside__star{font-size:44px;}

    .g-recaptcha{transform:scale(.88);}
}
@media (max-height:700px) {
    body[data-page="careers"] .brand__logo{width:clamp(140px, 12vh, 180px);margin-bottom:0;}
}
@media (max-width:1200px) {

    .apply__grid{grid-template-columns:1fr;gap:8vh;}

    .apply__aside{padding-top:0;order:-1;}
}
@media (prefers-reduced-motion:reduce) {

    .aside__star,.hero__count i{animation:none;}
}

/* ----------------------------------------------------------------
   PAGE: CONTACT  —  body[data-page="contact"]
   ---------------------------------------------------------------- */
body[data-page="contact"] .display{font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;}
body[data-page="contact"] .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;}
body[data-page="contact"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* min(12vw, 15vh) ensures the logo respects whichever dimension is SMALLER */
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="contact"] .brand:hover .brand__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="contact"] .footer__logo{
    display: block;
    width: clamp(150px, 13vw, 950px);
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* Dynamically pulls the logo up to negate any transparent space in the image */
    margin-top: -6px;
    margin-bottom: 0;
}
body[data-page="contact"] .brand:hover .footer__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="contact"] .wipe__base{display:inline-block;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}
body[data-page="contact"] .wipe__over{position:absolute;inset:0;color:var(--accent);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}

a:hover > .wipe .wipe__over, a:focus-visible > .wipe .wipe__over,
[data-hover-stagger]:hover .wipe__over, [data-hover-stagger]:focus-visible .wipe__over{clip-path:inset(0 0 0 0);}

a:hover > .wipe .wipe__base, a:focus-visible > .wipe .wipe__base,
[data-hover-stagger]:hover .wipe__base, [data-hover-stagger]:focus-visible .wipe__base{clip-path:inset(0 0 0 100%);}
body[data-page="contact"] .grow{position:relative;height:240vh;background:var(--black);}
body[data-page="contact"] .grow__text{position:relative;z-index:2;text-align:center;max-width:15ch;}
body[data-page="contact"] .sheet{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    margin-top:-12vh;
    /* CRITICAL FIX 1: Padding bottom set to 0 to completely destroy the white bar gap. */
    /* Overflow hidden ensures the square corners of the black footer are clipped to match the sheet radius. */
    padding:14vh var(--pad-x) 0;
    overflow:hidden;
}


.contact-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start;
    /* CRITICAL FIX 2: Added margin-bottom to push the black footer completely clear of the content. */
    margin-bottom: 12vh;
}

.contact-header{margin-bottom:6vh;}

.contact-header h2{font-size:clamp(32px,4vw,64px);line-height:.95;margin-bottom:16px;}

.contact-header p{max-width:420px;color:#4c4a45;}



.form-group{margin-bottom:36px;display:flex;flex-direction:column;position:relative;}

.form-label{
    font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--grey);margin-bottom:8px;
}

.form-input{
    width:100%;border:none;border-bottom:1px solid var(--line-dark);
    background:transparent;padding:10px 0;font-family:inherit;font-size:16px;
    color:var(--ink);border-radius:0;transition:border-color .3s;
}

.form-input:focus{outline:none;border-color:var(--accent);}

.form-input::placeholder{color:var(--grey);opacity:.6;}

textarea.form-input{resize:vertical;min-height:120px;}


.bringer-contact-form__response {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
}



button.pill-cta{
    background:transparent;border:1px solid var(--ink);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
}
body[data-page="contact"] .pill-cta{
    position:relative;display:inline-flex;align-items:center;gap:16px;
    border-radius:999px;
    padding:clamp(18px,2vw,26px) clamp(36px,3.4vw,54px);
    font-size:clamp(17px,1.4vw,24px);text-transform:lowercase;color:var(--ink);
    overflow:hidden;isolation:isolate;
    transition:color .35s,border-color .35s,transform .45s var(--ease-out);
}



.socials-massive{display:flex;flex-direction:column;gap:0;}

.socials-massive a{
    font-size:clamp(32px, 4.5vw, 68px);font-weight:500;text-transform:uppercase;
    letter-spacing:-.02em;line-height:1.2;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--line-dark);padding:3vh 0;
}

.socials-massive a:first-child{border-top:1px solid var(--line-dark);}

.socials-massive a span.icon{font-size:18px;color:var(--grey);transition:color .35s;}

.socials-massive a:hover span.icon{color:var(--accent);}
body[data-page="contact"] .contact-card__dark{
    background:var(--black);color:var(--white);
    margin:0 calc(-1 * var(--pad-x));
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;
    align-items: start;
}
body[data-page="contact"] .contact-card__dark h5{
    margin-top: 0;
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
body[data-page="contact"] .endcap{
    position:relative;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}

/* CONTACT — responsive overrides */
@media (max-width:1600px) {
    body[data-page="contact"] .brand__logo{
        width: clamp(180px, min(12vw, 12vh), 240px);
        margin-bottom: -8px;
    }
}
@media (max-width:900px) {
    body[data-page="contact"] .brand__logo{
        width: 150px;
        margin-bottom: -4px;
    }
    body[data-page="contact"] .footer__logo{
        margin-top: 0; /* Adjusted offset for mobile bounds */
    }

    .contact-grid{grid-template-columns:1fr;gap:10vh;margin-bottom:10vh;}
}
@media (max-height:700px) {
    body[data-page="contact"] .brand__logo{
        width: clamp(140px, 12vh, 180px);
        margin-bottom: 0;
    }
}

/* ----------------------------------------------------------------
   PAGE: DECAYED (project subpage)  —  body[data-page="decayed"]
   ---------------------------------------------------------------- */
body[data-page="decayed"] .display{font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;}
body[data-page="decayed"] .display--hero{font-size:clamp(46px,10vw,180px);}
body[data-page="decayed"] .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:max(11px,.85vw);font-weight:500;letter-spacing:.22em;text-transform:uppercase;}
body[data-page="decayed"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="decayed"] .brand:hover .brand__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="decayed"] .footer__logo{
    display: block;
    width: clamp(150px, 13vw, 950px);
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* Restored to your exact dynamic value */
    margin-top: -3.1vw;
    margin-bottom: 0;
}
body[data-page="decayed"] .brand:hover .footer__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="decayed"] .hero-pin{position:relative;height:220vh;background:var(--black);}
body[data-page="decayed"] .hero{
    position:relative;
    height:100vh;
    padding:calc(8vh + 70px) var(--pad-x) 9vh;
    display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;
}
body[data-page="decayed"] .hero__reveal{
    position:absolute;left:50%;top:50%;z-index:1;
    width:42vw;height:42vw;border-radius:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;pointer-events:none;
}

.hero__reveal-media img{width:100%;height:100%;object-fit:cover;}
body[data-page="decayed"] .hero__reveal-media::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(closest-side,rgba(7,7,7,.15),rgba(7,7,7,.55));
}

.hero__reveal-logo{
    position:absolute;left:50%;top:50%;z-index:2;
    transform:translate(-50%,-50%);
    width:min(68vw,80vh,1120px);height:auto;opacity:0;
    filter:drop-shadow(0 18px 50px rgba(0,0,0,.65));
    pointer-events:none;
}

.hero__hint{
    position:absolute;right:var(--pad-x);bottom:8vh;z-index:2;
    display:flex;align-items:center;gap:12px;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}

.hero__hint svg{animation:hintbob 1.7s ease-in-out infinite;}

@keyframes hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
body[data-page="decayed"] .no-anim .hero{height:auto;min-height:70vh;}
body[data-page="decayed"] .no-anim .hero__reveal{width:68vw;height:68vw;}

.no-anim .hero__reveal-logo{opacity:1;}
body[data-page="decayed"] .hero__kicker{margin-bottom:3vh;}
body[data-page="decayed"] .sheet{
    position:relative;z-index:3;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:11vh var(--pad-x) 12vh;
}
body[data-page="decayed"] .sheet--works{margin-top:-8vh;}
body[data-page="decayed"] .section-head .lede{max-width:460px;color:#4c4a45;font-size:15px;}
body[data-page="decayed"] .showcase-wrapper{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flagship__media{position:absolute;inset:0;overflow:hidden;transform:scale(1);transition:transform 1.4s var(--ease-out);}

.flagship:hover .flagship__media{transform:scale(1.035);}
body[data-page="decayed"] .img-fallback{ background: radial-gradient(120% 120% at 20% 0%, #2a1206, var(--ink) 60%); }
body[data-page="decayed"] .img-fallback img{ display: none; }
body[data-page="decayed"] .flagship__actions{ display: flex; gap: clamp(14px,2vw,28px); flex-wrap: wrap; flex: 0 0 max-content; align-items: center; }
body[data-page="decayed"] .flagship__tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 2px;}

.flagship__tag{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    padding:8px 15px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#e8e6e1;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

.flagship__tag--hot{border-color:var(--accent);color:var(--accent);}

.flagship__stamp{
    position:absolute;top:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);z-index:2;
    display:flex;align-items:center;gap:10px;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#d8d6d1;
}

.flagship__stamp i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:stamp-pulse 2.2s infinite;}

@keyframes stamp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,106,19,.55)}55%{box-shadow:0 0 0 9px rgba(255,106,19,0)}}


.pill-cta--dark{color:var(--white);border-color:rgba(255,255,255,.55);padding:clamp(15px,1.5vw,20px) clamp(28px,2.6vw,42px);font-size:clamp(15px,1.15vw,19px);}

.pill-cta--dark:hover{color:var(--black);border-color:var(--accent);}

.view-link{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e8e6e1;
    padding:14px 2px;transition:color .3s;
}

.view-link svg{transition:transform .4s var(--ease-out);}

.view-link:hover{color:var(--accent);}

.view-link:hover svg{transform:translateX(6px);}


.gallery{display:flex;gap:14px;height:clamp(300px,46vh,520px);}

.gallery__item{
    position:relative;flex:1;border-radius:0px;overflow:hidden;background:var(--ink);
    transition:flex .85s var(--ease-out);
}

.gallery__item img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(.55) brightness(.82);transform:scale(1.07);
    transition:filter .7s,transform 1.3s var(--ease-out);
}

.gallery__item::after{
    content:attr(data-cap);position:absolute;left:18px;bottom:14px;
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
    opacity:0;transform:translateY(8px);
    transition:opacity .5s,transform .5s var(--ease-out);
    text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.gallery__item:hover{flex:2.7;}

.gallery__item:hover img{filter:grayscale(0) brightness(1);transform:scale(1);}

.gallery__item:hover::after{opacity:1;transform:translateY(0);}

.gallery__note{margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f8d88;}



.board{position:relative;margin-top:2vh;}


.board__type{
    position:absolute;top:34%;left:0;z-index:1;white-space:nowrap;
    font-weight:700;font-size:17vw;line-height:1;letter-spacing:-.03em;text-transform:uppercase;
    color:transparent;-webkit-text-stroke:1.5px rgba(14,14,13,.15);
    pointer-events:none;user-select:none;
}

.board__grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:repeat(12,1fr);gap:2vw;align-items:start;
}


.board__main{
    grid-column:1/9;position:relative;
    border-radius:var(--radius-card);overflow:hidden;background:var(--ink);
    aspect-ratio:16/10;will-change:transform;
}

.board__media{position:absolute;inset:0;overflow:hidden;}

.board__media img{width:100%;height:116%;object-fit:cover;margin-top:-8%;will-change:transform;filter:saturate(1.04);}

.board__media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(200deg,rgba(7,7,7,0) 40%,rgba(7,7,7,.55) 100%);
}

.board__logo{
    position:absolute;left:clamp(20px,3vw,46px);bottom:clamp(20px,3vw,46px);z-index:2;
    width:clamp(280px,30vw,520px);height:auto;
    filter:drop-shadow(0 14px 40px rgba(0,0,0,.6));
}

.board__stamp{
    position:absolute;top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);z-index:2;
    display:flex;align-items:center;gap:10px;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#e4e2dd;
}

.board__stamp i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:stamp-pulse 2.2s infinite;}


.board__side{grid-column:9/13;display:flex;flex-direction:column;gap:26px;padding-top:.5vh;}

.board__desc{color:#4c4a45;font-size:clamp(15px,1.2vw,18px);line-height:1.7;}

.board__readout{list-style:none;border-top:1px solid var(--line-dark);}

.board__readout li{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:13px 2px;border-bottom:1px solid var(--line-dark);
    transition:padding-left .35s var(--ease-out);
}

.board__readout li:hover{padding-left:10px;}

.board__readout span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f8d88;}

.board__readout b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:color .3s;}

.board__readout li:hover b{color:var(--accent);}

.board__actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}

.view-link--ink{color:var(--ink);}


.board__shot{
    position:relative;margin:0;border-radius:0px;overflow:hidden;background:var(--ink);
    transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}

.board__shot img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(.4) brightness(.88);transform:scale(1.08);
    transition:filter .6s,transform 1.2s var(--ease-out);
}

.board__shot::after{
    content:attr(data-cap);position:absolute;left:16px;bottom:12px;
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
    opacity:0;transform:translateY(8px);
    transition:opacity .45s,transform .45s var(--ease-out);
    text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.board__shot:hover{transform:translateY(-8px);box-shadow:0 26px 60px -22px rgba(7,7,7,.45);}

.board__shot:hover img{filter:grayscale(0) brightness(1);transform:scale(1);}

.board__shot:hover::after{opacity:1;transform:translateY(0);}

.board__shot--a{grid-column:1/5;aspect-ratio:3/4;margin-top:-9vh;z-index:3;}

.board__shot--b{grid-column:5/10;aspect-ratio:16/9;margin-top:7vh;}

.board__shot--c{grid-column:10/13;aspect-ratio:3/4;margin-top:16vh;}

.board__shot--d{grid-column:2/8;aspect-ratio:21/9;margin-top:6vh;}


.board__more{
    grid-column:8/12;margin-top:14vh;min-height:190px;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;
    padding:28px 32px;border:1px dashed rgba(14,14,13,.35);border-radius:0px;
    transition:background .4s,border-color .4s,color .4s,transform .6s var(--ease-out);
}

.board__more-num{font-weight:700;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.02em;line-height:1;}

.board__more-label{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}

.board__more-label svg{transition:transform .4s var(--ease-out);}

.board__more:hover{background:var(--accent);border-color:var(--accent);color:var(--black);transform:translateY(-8px);}

.board__more:hover .board__more-label svg{transform:translateX(6px);}




.systems{background:var(--black);color:var(--white);border-radius:var(--radius-sheet);margin-top:0;padding:11vh var(--pad-x) 13vh;}


.systems .display--section{color:var(--white);}

.systems__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:5vw;margin-top:6vh;align-items:start;}

.systems__sticky-wrap{position:relative;height:100%;}

.systems__sticky{position:sticky;top:14vh;}

.systems__media{
    position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-card);
    overflow:hidden;background:var(--ink);
}

.systems__img{
    position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transform:scale(1.08);
    transition:opacity 1s var(--ease-out),transform 1.4s var(--ease-out);
}

.systems__img.is-active{opacity:1;transform:scale(1);}

.systems__count{
    margin-top:16px;display:flex;align-items:baseline;gap:6px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8f8d88;
}

.systems__count span{font-size:15px;font-weight:700;color:var(--white);transition:color .3s;}

.systems__list{list-style:none;border-top:1px solid var(--outline);}

.systems__item{
    padding:5vh 2px;border-bottom:1px solid var(--outline);cursor:default;
    opacity:.32;transition:opacity .5s var(--ease-out);
}

.systems__item.is-active{opacity:1;}

.systems__num{
    display:block;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent);margin-bottom:10px;
}

.systems__title{
    font-size:clamp(24px,2.6vw,38px);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;
    margin-bottom:12px;transition:transform .5s var(--ease-out);
}

.systems__item.is-active .systems__title{transform:translateX(10px);}

.systems__body{max-width:52ch;color:#d8d6d1;font-size:clamp(14px,1.05vw,16px);line-height:1.75;}
body[data-page="decayed"] .btn__label{
    border:1px solid currentColor;border-radius:999px;
    padding:13px 22px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="decayed"] .btn__coin{
    width:42px;height:42px;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;flex:none;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="decayed"] .dossier__sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7a786f;margin-top:8px;}
body[data-page="decayed"] .marquee__item{
    display:flex;align-items:center;gap:2.6vw;padding-right:2.6vw;
    font-size:clamp(22px,3.2vw,44px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
}

.marquee__item i{width:.55em;height:.55em;border-radius:50%;background:var(--black);flex:none;}


.sheet--features{background:var(--bone-deep);}

.feature{
    display:grid;grid-template-columns:110px 1fr 1.1fr;gap:3vw;align-items:start;
    padding:5.4vh 6px;border-top:1px solid var(--line-dark);
}

.feature:last-of-type{border-bottom:1px solid var(--line-dark);}

.feature__num{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--accent);padding-top:.6em;}

.feature__title{font-size:clamp(28px,3.8vw,58px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;}

.feature__body{color:#4c4a45;max-width:520px;font-size:15px;align-self:center;}
body[data-page="decayed"] .contact-card{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    margin-top:-12vh;
    padding:14vh var(--pad-x) 0;
    overflow:hidden;
}
body[data-page="decayed"] .pill-cta{
    position:relative;display:inline-flex;align-items:center;gap:16px;
    border:1px solid var(--ink);border-radius:999px;
    padding:clamp(18px,2vw,26px) clamp(36px,3.4vw,54px);
    font-size:clamp(17px,1.4vw,24px);text-transform:lowercase;color:var(--ink);
    overflow:hidden;isolation:isolate;
    transition:color .35s,border-color .35s,transform .45s var(--ease-out);
}
body[data-page="decayed"] .contact-card__dark{
    background:var(--black);color:var(--white);
    margin:0 calc(-1 * var(--pad-x));
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;
    align-items: start;
}
body[data-page="decayed"] .contact-card__dark h5{
    margin-top: 0;
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
body[data-page="decayed"] .endcap{
    position:relative;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}
body[data-page="decayed"] .wipe__base{display:inline-block;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}
body[data-page="decayed"] .wipe__over{position:absolute;inset:0;color:var(--accent);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}

a:hover > .wipe .wipe__over, a:focus-visible > .wipe .wipe__over, button:hover > .wipe .wipe__over, [data-hover-stagger]:hover .wipe__over, [data-hover-stagger]:focus-visible .wipe__over{clip-path:inset(0 0 0 0);}

a:hover > .wipe .wipe__base, a:focus-visible > .wipe .wipe__base, button:hover > .wipe .wipe__base, [data-hover-stagger]:hover .wipe__base, [data-hover-stagger]:focus-visible .wipe__base{clip-path:inset(0 0 0 100%);}

/* DECAYED (project subpage) — responsive overrides */
@media (max-width:1600px) {
    body[data-page="decayed"] .brand__logo{ width: clamp(180px, min(12vw, 12vh), 240px); margin-bottom: -8px; }
}
@media (max-width:900px) {
    body[data-page="decayed"] .brand__logo{ width: 150px; margin-bottom: -4px; }
    body[data-page="decayed"] .footer__logo{
        margin-top: -10px; /* Adjusted offset for mobile bounds */
    }
    body[data-page="decayed"] .hero-pin{height:190vh;}
    body[data-page="decayed"] .hero__reveal{width:76vw;height:76vw;}

    .hero__reveal-logo{width:min(84vw,42vh,460px);}

    .hero__hint{display:none;}

    .board__type{font-size:30vw;top:26%;}

    .board__grid{grid-template-columns:1fr;gap:22px;}

    .board__main{grid-column:1/-1;aspect-ratio:4/5;}

    .board__logo{width:min(64vw,320px);}

    .board__side{grid-column:1/-1;}

    .board__shot--a,.board__shot--b,.board__shot--c,.board__shot--d,.board__more{grid-column:1/-1;margin-top:0;}

    .board__shot--a,.board__shot--c{aspect-ratio:16/10;}

    .board__shot img{filter:none;transform:scale(1);}

    .board__shot::after{opacity:1;transform:none;}

    .board__more{min-height:150px;}

    .systems__grid{grid-template-columns:1fr;gap:5vh;}

    .systems__sticky{position:relative;top:0;}

    .systems__media{aspect-ratio:16/10;}

    .systems__item{opacity:1;}

    .gallery{flex-direction:column;height:auto;}

    .gallery__item{flex:none;aspect-ratio:16/9;}

    .gallery__item img{filter:none;transform:scale(1);}

    .gallery__item::after{opacity:1;transform:none;}

    .feature{grid-template-columns:56px 1fr;grid-template-rows:auto auto;}

    .feature__body{grid-column:2;}
}
@media (max-height:700px) {
    body[data-page="decayed"] .brand__logo{ width: clamp(140px, 12vh, 180px); margin-bottom: 0; }
}

/* ----------------------------------------------------------------
   PAGE: PRIVACY POLICY  —  body[data-page="privacy"]
   ---------------------------------------------------------------- */
body[data-page="privacy"] .display{font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;}
body[data-page="privacy"] .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;}

.js-anim [data-reveal] .word,
.js-anim [data-reveal-chars] .char{transform:translateY(115%);}
body[data-page="privacy"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* min(12vw, 15vh) ensures the logo respects whichever dimension is SMALLER */
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="privacy"] .brand:hover .brand__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="privacy"] .footer__logo{
    display: block;
    width: clamp(150px, 13vw, 950px);
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;

    /* Dynamically pulls the logo up to negate any transparent space in the image */
    margin-top: -3.1vw;
    margin-bottom: 0;
}
body[data-page="privacy"] .brand:hover .footer__logo{
    transform: scale(1.04);
    filter: brightness(1.2);
}
body[data-page="privacy"] .sheet{
    position:relative;z-index:3;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:11vh var(--pad-x) 12vh;
}
body[data-page="privacy"] .contact-card__dark{
    background:var(--black);color:var(--white);
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;
}
body[data-page="privacy"] .contact-card__dark h5{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;}
body[data-page="privacy"] .endcap{
    position:relative;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}
body[data-page="privacy"] .wipe__base{display:inline-block;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}
body[data-page="privacy"] .wipe__over{position:absolute;inset:0;color:var(--accent);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}

a:hover > .wipe .wipe__over, a:focus-visible > .wipe .wipe__over,
[data-hover-stagger]:hover .wipe__over, [data-hover-stagger]:focus-visible .wipe__over{clip-path:inset(0 0 0 0);}

a:hover > .wipe .wipe__base, a:focus-visible > .wipe .wipe__base,
[data-hover-stagger]:hover .wipe__base, [data-hover-stagger]:focus-visible .wipe__base{clip-path:inset(0 0 0 100%);}



.hero-mini{
    position:relative;
    height:45vh;
    background:var(--black);
    padding:16vh var(--pad-x) 8vh;
    display:flex;flex-direction:column;justify-content:flex-end;
    z-index: 1;
}


.legal-container{
    max-width:760px;
    margin:0 auto;
}

.legal-container h3{
    font-size:clamp(20px, 2.5vw, 28px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:-.01em;
    line-height: 1.1;
    margin:3.5em 0 1em;
    color:var(--ink);
}

.legal-container p{
    margin-bottom:1.4em;
    color:#4c4a45;
    font-size:15px;
}

.legal-container ul{
    margin-bottom:1.5em;
    padding-left:1.5em;
    color:#4c4a45;
    font-size:15px;
}

.legal-container li{
    margin-bottom:.6em;
    padding-left:0.5em;
}

.legal-container li::marker{
    color:var(--accent);
}

.legal-container a{
    color: var(--ink);
    text-decoration:underline;
    text-decoration-color:var(--line-dark);
    text-underline-offset:4px;
    font-weight: 500;
    transition:color .2s, text-decoration-color .2s;
}

.legal-container a:hover{
    color:var(--accent);
    text-decoration-color:var(--accent);
}

.legal-divider{
    border:none;
    border-top:1px solid var(--line-dark);
    margin:3em 0 1em;
}

/* PRIVACY POLICY — responsive overrides */
@media (max-width:1600px) {
    body[data-page="privacy"] .brand__logo{
        width: clamp(180px, min(12vw, 12vh), 240px);
        margin-bottom: -8px;
    }
}
@media (max-width:900px) {
    body[data-page="privacy"] .brand__logo{
        width: 150px;
        margin-bottom: -4px;
    }
    body[data-page="privacy"] .footer__logo{
        margin-top: -10px; /* Adjusted offset for mobile bounds */
    }

    .hero-mini{height: 35vh;}
}
@media (max-height:700px) {
    body[data-page="privacy"] .brand__logo{
        width: clamp(140px, 12vh, 180px);
        margin-bottom: 0;
    }
}

/* ----------------------------------------------------------------
   PAGE: PROJECTS  —  body[data-page="projects"]
   ---------------------------------------------------------------- */
body[data-page="projects"] .display{
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:-.02em;
    line-height:.9;
}
body[data-page="projects"] .display--hero{font-size:clamp(46px,9vw,150px);}
body[data-page="projects"] .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:max(11px,.85vw);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}
body[data-page="projects"] .brand__logo{
    display: block;
    height: auto;
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.4s;
    width: clamp(200px, min(12vw, 15vh), 360px);
    margin-top: 0;
    margin-bottom: -12px;
}
body[data-page="projects"] .brand:hover .brand__logo{transform:scale(1.04);filter:brightness(1.2);}
body[data-page="projects"] .footer__logo{
    display:block;width:clamp(150px,13vw,950px);height:auto;
    transform-origin:left center;
    transition:transform .4s var(--ease-out), filter .4s;
    margin-top:-3.1vw;margin-bottom:0;
}
body[data-page="projects"] .brand:hover .footer__logo{transform:scale(1.04);filter:brightness(1.2);}
body[data-page="projects"] .hero-pin{position:relative;height:210vh;background:var(--black);}
body[data-page="projects"] .hero{
    position:relative;height:100vh;
    padding:calc(8vh + 70px) var(--pad-x) 6vh;
    display:flex;flex-direction:column;justify-content:flex-start;
    overflow:hidden;
}
body[data-page="projects"] .hero__reveal{
    position:absolute;left:50%;top:50%;z-index:1;
    width:40vw;height:40vw;border-radius:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;pointer-events:none;
}
body[data-page="projects"] .hero__reveal-media::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(closest-side,rgba(7,7,7,.28),rgba(7,7,7,.62));
}
body[data-page="projects"] .img-fallback{background:radial-gradient(120% 120% at 20% 0%, #2a1206, var(--ink) 60%);}
body[data-page="projects"] .img-fallback img{display:none;}
body[data-page="projects"] .no-anim .hero{height:auto;min-height:100vh;}
body[data-page="projects"] .no-anim .hero__reveal{width:64vw;height:64vw;}
body[data-page="projects"] .hero__kicker{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5vh;gap:24px;}
body[data-page="projects"] .hero__meta{
    display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
    margin-top:auto;padding-bottom:0;
}
body[data-page="projects"] .hero__blurb{max-width:460px;}
body[data-page="projects"] .sheet{
    position:relative;z-index:3;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:11vh var(--pad-x) 12vh;
}
body[data-page="projects"] .section-head .lede{max-width:460px;color:#4c4a45;font-size:max(15px,1.05vw);}
body[data-page="projects"] .btn__label{
    border:1px solid currentColor;border-radius:999px;
    padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="projects"] .btn__coin{
    width:44px;height:44px;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;flex:none;
    transition:background .3s,color .3s,border-color .3s;
}



.reel{position:relative;z-index:3;background:var(--black);height:360vh;}

.reel__stage{
    position:relative;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;
}



.reel__head{
    position:absolute;top:calc(6vh + 40px);left:var(--pad-x);right:var(--pad-x);z-index:4;
    display:flex;align-items:baseline;gap:2vw;pointer-events:none;
}


.reel__track{display:flex;height:100%;width:max-content;will-change:transform;}

.panel{
    width:100vw;height:100vh;flex:none;
    padding:calc(13vh + 40px) var(--pad-x) 14vh;
    display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,80px);
    position:relative;
}

.panel + .panel{border-left:1px solid var(--outline);}



.panel__body{
    flex:1 1 auto;min-width:0;max-width:min(46%,820px);
    display:flex;flex-direction:column;align-items:flex-start;
}

.panel__idx{
    font-size:clamp(44px,5.4vw,120px);font-weight:700;line-height:.8;letter-spacing:-.03em;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);
    margin-bottom:clamp(16px,2.4vh,34px);
    transition:-webkit-text-stroke-color .6s var(--ease-out);
}

.panel:hover .panel__idx{-webkit-text-stroke-color:var(--accent);}

.panel__logo{
    width:clamp(190px,19vw,440px);height:auto;display:block;
    margin-bottom:clamp(14px,2vh,28px);
}

.panel__redacted{
    font-size:clamp(22px,2.3vw,46px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);
    margin-bottom:clamp(10px,1.4vh,18px);
    transition:-webkit-text-stroke-color .6s var(--ease-out);
}

.panel--locked:hover .panel__redacted{-webkit-text-stroke-color:var(--accent);}

.panel__sub{
    font-size:clamp(11px,.8vw,15px);letter-spacing:.16em;text-transform:uppercase;color:#9a988f;
    margin-bottom:clamp(14px,2vh,26px);
}

.panel__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(14px,2vh,26px);}

.panel .tag{
    border-color:var(--outline);
    font-size:clamp(10px,.62vw,13px);padding:clamp(5px,.5vw,9px) clamp(10px,.85vw,16px);
}

.panel__desc{
    color:#d8d6d1;font-size:clamp(14px,1.05vw,21px);line-height:1.6;
    max-width:54ch;   /* ch of its own font-size — a proper reading measure */
    margin-bottom:clamp(20px,3vh,40px);
}

.panel__actions{display:flex;gap:12px;flex-wrap:wrap;}

.panel .btn{color:var(--white);}

.panel .btn__label{font-size:clamp(11px,.72vw,15px);padding:clamp(11px,.95vw,18px) clamp(18px,1.7vw,32px);}

.panel .btn__coin{width:clamp(38px,3.1vw,58px);height:clamp(38px,3.1vw,58px);}



.panel__art{
    position:relative;flex:none;
    width:min(44vw,62vh);aspect-ratio:1;
    border-radius:50%;overflow:hidden;
    border:1px solid var(--outline);
    background:var(--ink);
    /* the ring is drawn as box-shadow so overflow:hidden can't clip it:
       a black gap, then a hairline of orange, both growing out on hover */
    box-shadow:0 0 0 0 var(--black), 0 0 0 0 rgba(255,106,19,0);
    transition:transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
    will-change:transform;
}

.panel:hover .panel__art{
    transform:scale(1.03);
    box-shadow:0 0 0 12px var(--black), 0 0 0 13px rgba(255,106,19,.55);
}


.panel__art img{
    position:absolute;top:0;left:0;width:100%;height:100%;
    max-width:none;
    object-fit:cover;object-position:center;
    transform:scale(1.03);filter:saturate(.9);
    transition:transform 1.3s var(--ease-out), filter 1.3s var(--ease-out);
    will-change:transform;
}


.panel__veil{
    position:absolute;inset:0;background:var(--black);opacity:.52;
    transition:opacity .9s var(--ease-out);
}

.panel:hover .panel__veil{opacity:.1;}

.panel:hover .panel__art img{transform:scale(1.12);filter:saturate(1.05);}



.panel__art--locked{
    background:
            radial-gradient(120% 130% at 50% 0%, rgba(255,106,19,.16), transparent 60%),
            repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 10px, transparent 10px 22px),
            #0d0d0c;
    display:grid;place-items:center;
}

.panel__seal{
    font-size:clamp(70px,8vw,180px);line-height:1;color:var(--accent);opacity:.5;
    font-weight:700;
    transition:transform 1.2s var(--ease-out), opacity .8s;
    animation:starspin 26s linear infinite;
}

.panel--locked:hover .panel__seal{opacity:.9;}

.panel--locked .panel__veil{opacity:.3;}

.panel--locked:hover .panel__veil{opacity:.1;}



.reel__meta{
    position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:5vh;z-index:4;
    display:flex;align-items:center;gap:clamp(16px,2vw,36px);
    font-size:clamp(10px,.68vw,14px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--grey);pointer-events:none;
}

.reel__count b{color:var(--white);}

.reel__rail{flex:1;height:1px;background:var(--outline);position:relative;overflow:hidden;}

.reel__fill{
    position:absolute;inset:0;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;
}

.reel__hint{display:flex;align-items:center;gap:10px;}

.reel__hint svg{animation:nudgeX 1.8s var(--ease-out) infinite;}

@keyframes nudgeX{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}



.no-anim .reel{height:auto;}

.no-anim .reel__stage{height:auto;}

.no-anim .reel__head{position:static;padding:12vh var(--pad-x) 0;}

.no-anim .reel__track{flex-direction:column;width:100%;height:auto;}

.no-anim .panel{width:100%;height:auto;}

.no-anim .panel + .panel{border-left:0;border-top:1px solid var(--outline);}

.no-anim .reel__meta{display:none;}
body[data-page="projects"] .grow{position:relative;z-index:3;height:300vh;background:var(--black);}
body[data-page="projects"] .grow__text{position:relative;z-index:2;text-align:center;max-width:24ch;font-size:clamp(30px,4.2vw,68px);}
body[data-page="projects"] .contact-card{
    position:relative;z-index:4;
    background:var(--bone);color:var(--ink);
    border-radius:var(--radius-sheet);
    padding:0 var(--pad-x) 0;
    overflow:hidden;
}
body[data-page="projects"] .contact-card__dark{
    background:var(--black);color:var(--white);
    margin:0 calc(-1 * var(--pad-x));
    padding:9vh var(--pad-x) 6vh;
    display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:5vw;
    align-items:start;
}
body[data-page="projects"] .contact-card__dark h5{
    margin-top:0;
    font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
body[data-page="projects"] .endcap{
    position:relative;z-index:4;background:var(--black);
    height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;
    overflow:hidden;
}
body[data-page="projects"] .wipe__base{display:inline-block;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.25,1);}
body[data-page="projects"] .wipe__over{
    position:absolute;inset:0;color:var(--accent);pointer-events:none;
    clip-path:inset(0 100% 0 0);
    transition:clip-path .5s cubic-bezier(.7,0,.25,1);
}

/* PROJECTS — responsive overrides */
@media (max-width:1600px) {
    body[data-page="projects"] .brand__logo{width:clamp(180px, min(12vw, 12vh), 240px);margin-bottom:-8px;}
}
@media (max-width:900px) {
    body[data-page="projects"] .brand__logo{width:150px;margin-bottom:-4px;}
    body[data-page="projects"] .footer__logo{margin-top:-10px;}
    body[data-page="projects"] .hero-pin{height:190vh;}
    body[data-page="projects"] .hero__reveal{width:74vw;height:74vw;}
    body[data-page="projects"] .hero__meta{flex-direction:column;align-items:flex-start;gap:20px;}



    .reel{height:auto;}

    .reel__stage{height:auto;overflow:visible;}

    .reel__head{position:static;padding:14vh var(--pad-x) 0;flex-direction:column;gap:10px;align-items:flex-start;}

    .reel__track{flex-direction:column;width:100%;height:auto;transform:none !important;}

    .panel{
        width:100%;height:auto;flex-direction:column;align-items:flex-start;
        padding:9vh var(--pad-x);gap:36px;
    }

    .panel + .panel{border-left:0;border-top:1px solid var(--outline);}

    .panel__body{max-width:none;order:2;}

    .panel__art{order:1;width:min(78vw,420px);}

    .reel__meta{display:none;}
}
@media (max-height:700px) {
    body[data-page="projects"] .brand__logo{width:clamp(140px, 12vh, 180px);margin-bottom:0;}
}
@media (prefers-reduced-motion:reduce) {

    .panel__seal{animation:none;}
}

/* ----------------------------------------------------------------
   PAGE: 404 (Not Found)  —  body[data-page="404"]
   ---------------------------------------------------------------- */
body[data-page="404"] .notfound{
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    gap:18px;
    padding:9vh var(--pad-x);
}
body[data-page="404"] .display--404{
    font-size:clamp(90px,18vw,260px);
    color:var(--accent);
    margin:6px 0 2px;
}
body[data-page="404"] .body-l{max-width:44ch;margin-bottom:18px;}
body[data-page="404"] .btn{margin-top:6px;}
body[data-page="404"] .btn__label{
    border:1px solid currentColor;border-radius:999px;
    padding:14px 24px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:background .3s,color .3s,border-color .3s;
}
body[data-page="404"] .btn__coin{
    width:44px;height:44px;border:1px solid currentColor;border-radius:50%;
    display:grid;place-items:center;overflow:hidden;flex:none;
    transition:background .3s,color .3s,border-color .3s;
}