@font-face{font-family:"Anton";src:url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/manrope-latin-400-normal.woff2") format("woff2")}@font-face{font-family:"Manrope";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/manrope-latin-600-normal.woff2") format("woff2")}@font-face{font-family:"Manrope";font-weight:800;font-style:normal;font-display:swap;src:url("../assets/fonts/manrope-latin-800-normal.woff2") format("woff2")}@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}:root{--ink:#0a0807;--ink-2:#120d0c;--ruby:#c1121f;--ruby-hot:#e5383b;--cream:#f4efe6;--cream-dim:rgba(244,239,230,0.88);--on-ruby:#f4efe6;--display:"Anton",Impact,"Arial Narrow",sans-serif;--body:"Archivo","Helvetica Neue",Arial,sans-serif;--metal:linear-gradient(165deg,#ff5a5c 0%,#e5383b 34%,#b3121b 58%,#ff6a6c 100%);--glass-hi:rgba(255,255,255,0.12);--glass-lo:rgba(255,255,255,0.045);--edge:rgba(255,255,255,0.14);--ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-theme="light"]{--ruby-hot:#c1121f;--ruby:#a30d18;--ink:#f2ede4;--ink-2:#e8e1d4;--cream:#1a140d;--cream-dim:rgba(26,20,13,0.72);--glass-hi:rgba(26,20,13,0.08);--glass-lo:rgba(26,20,13,0.035);--edge:rgba(26,20,13,0.14)}
html[data-theme="light"] .appbar{background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(240,234,224,0.88));box-shadow:0 18px 50px -12px rgba(26,20,13,0.32),inset 0 1px 0 rgba(255,255,255,0.95)}
html[data-theme="light"] .appbar__tab{color:#1a140d}
html[data-theme="light"] .appbar__tab--slot{background:linear-gradient(180deg,rgba(26,20,13,0.08),rgba(26,20,13,0.04));box-shadow:inset 0 1px 0 rgba(255,255,255,0.55)}
html[data-theme="light"] .dk-peek__card{background:rgba(250,247,240,0.94);box-shadow:0 20px 60px -10px rgba(26,20,13,0.35),inset 0 1px 0 rgba(255,255,255,0.9)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-size:17px;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--ruby);color:var(--cream)}
a{color:inherit;text-decoration:none}
.preloader{position:fixed;inset:0;z-index:200;background:var(--ink);display:none!important;opacity:0;visibility:hidden;pointer-events:none;animation:none}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes mccPreOut{0%,78%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
.preloader__inner{text-align:center}
.preloader__mark{position:relative;width:clamp(100px,20vw,170px);aspect-ratio:1;margin:0 auto;filter:drop-shadow(0 0 40px rgba(193,18,31,0.45))}
.preloader__piece{position:absolute;inset:0;width:100%;height:100%;will-change:transform,opacity,filter}
.preloader__piece--l{clip-path:polygon(0 0,58% 0,28% 100%,0 100%)}
.preloader__piece--r{clip-path:polygon(58% 0,100% 0,100% 100%,28% 100%)}
@keyframes pulse-m{from{opacity:0.55} to{opacity:1} }
.preloader__count{font-family:var(--display);font-size:clamp(2rem,5vw,3.5rem);letter-spacing:0.06em;margin-top:0.5rem}
.preloader.is-hot .preloader__mark{animation:preHot 0.85s ease-in-out infinite}
@keyframes preHot{0%,100%{transform:scale(1);filter:drop-shadow(0 0 40px rgba(193,18,31,0.45))}
50%{transform:scale(1.07);filter:drop-shadow(0 0 65px rgba(229,56,59,0.85))}
}
.preloader.is-blazing .preloader__inner{animation:loadQuake 0.26s linear infinite}
.preloader.is-blazing .preloader__count{color:var(--ruby-hot);animation:loadFlash 0.4s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.preloader.is-hot .preloader__mark,.preloader.is-blazing .preloader__inner,.preloader.is-blazing .preloader__count{animation:none}
}
.preloader__pct{color:var(--ruby)}
.preloader__label{margin-top:0.75rem;font-size:0.84rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--cream-dim)}
.preloader{cursor:pointer}
.preloader__skip{opacity:0;margin-top:1rem;font-weight:800;font-size:0.66rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim);transition:opacity 0.6s ease}
.preloader.is-skippable .preloader__skip{opacity:1}
.zencue{margin:2rem auto 0;max-width:42ch;display:flex;flex-direction:column;align-items:center;gap:1.05rem;padding:0 1rem;opacity:0;animation:zenIn 1.1s ease 0.4s forwards}
.zencue__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.1rem,3.6vw,1.4rem);letter-spacing:0.1em;color:var(--ruby-hot)}
.zencue__msg{font-size:clamp(1rem,3.1vw,1.2rem);line-height:1.7;letter-spacing:0.015em;color:rgba(244,239,230,0.94);text-align:center}
@keyframes zenIn{to{opacity:1} }
.zencue__orb{width:44px;height:44px;border-radius:50%;flex:none;border:1.5px solid rgba(244,239,230,0.5);position:relative;box-shadow:0 0 24px rgba(244,239,230,0.14);animation:zenBreath 11s ease-in-out infinite}
.zencue__orb::after{content:"";position:absolute;inset:30%;border-radius:50%;background:rgba(244,239,230,0.6)}
@keyframes zenBreath{0%{transform:scale(0.8);opacity:0.5}
18%{transform:scale(1.32);opacity:1}
30%{transform:scale(1.2);opacity:0.92}
42%{transform:scale(1.5);opacity:1}
50%{transform:scale(1.5);opacity:1}
100%{transform:scale(0.8);opacity:0.5}
}
.zenbox{position:relative;width:52px;height:52px;flex:none;border:1.5px solid rgba(244,239,230,0.5);border-radius:8px;box-shadow:0 0 20px rgba(244,239,230,0.1)}
.zenbox i{position:absolute;top:-5px;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--ruby-hot);box-shadow:0 0 10px rgba(229,56,59,0.9);animation:zenBoxDot 16s linear infinite}
@keyframes zenBoxDot{0%{transform:translate(0,52px)}
25%{transform:translate(0,0)}
50%{transform:translate(52px,0)}
75%{transform:translate(52px,52px)}
100%{transform:translate(0,52px)}
}
.zen478{width:44px;height:44px;border-radius:50%;flex:none;border:1.5px solid rgba(244,239,230,0.5);position:relative;box-shadow:0 0 24px rgba(244,239,230,0.14);animation:zen478 19s ease-in-out infinite}
.zen478::after{content:"";position:absolute;inset:26%;border-radius:50%;background:rgba(244,239,230,0.6)}
@keyframes zen478{0%{transform:scale(0.72);opacity:0.5}
21%{transform:scale(1.45);opacity:1}
58%{transform:scale(1.45);opacity:1}
100%{transform:scale(0.72);opacity:0.5}
}
.zeneven{width:44px;height:44px;border-radius:50%;flex:none;border:1.5px solid rgba(244,239,230,0.5);position:relative;box-shadow:0 0 24px rgba(244,239,230,0.14);animation:zenEven 10s ease-in-out infinite}
.zeneven::after{content:"";position:absolute;inset:28%;border-radius:50%;background:rgba(244,239,230,0.6)}
@keyframes zenEven{0%,100%{transform:scale(0.8);opacity:0.55} 50%{transform:scale(1.42);opacity:1} }
.zendots{display:flex;gap:10px;flex:none}
.zendots i{width:11px;height:11px;border-radius:50%;background:rgba(244,239,230,0.28);animation:zenDot 10s ease-in-out infinite}
.zendots i:nth-child(2){animation-delay:2s}
.zendots i:nth-child(3){animation-delay:4s}
.zendots i:nth-child(4){animation-delay:6s}
.zendots i:nth-child(5){animation-delay:8s}
@keyframes zenDot{0%,24%,100%{background:rgba(244,239,230,0.28);transform:scale(1);box-shadow:none}
6%{background:var(--ruby-hot);transform:scale(1.5);box-shadow:0 0 12px rgba(229,56,59,0.9)}
18%{background:rgba(244,239,230,0.28);transform:scale(1)}
}
.zensweep{position:relative;width:26px;height:58px;flex:none;border:1.5px solid rgba(244,239,230,0.5);border-radius:13px;overflow:hidden;box-shadow:0 0 20px rgba(244,239,230,0.1)}
.zensweep i{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(229,56,59,0.85),transparent);animation:zenSweep 8s ease-in-out infinite}
@keyframes zenSweep{0%{top:-30%} 70%,100%{top:100%} }
.zenrings{position:relative;width:48px;height:48px;flex:none}
.zenrings::before,.zenrings::after{content:"";position:absolute;inset:30%;border-radius:50%;border:1.5px solid rgba(229,56,59,0.8);animation:zenRing 6s ease-out infinite}
.zenrings::after{animation-delay:3s}
.zenrings i{position:absolute;inset:38%;border-radius:50%;background:rgba(244,239,230,0.6)}
@keyframes zenRing{0%{transform:scale(0.6);opacity:0.9} 100%{transform:scale(2.1);opacity:0} }
@media (prefers-reduced-motion:reduce){.zencue{animation:none;opacity:1}
.zencue__orb,.zenbox i,.zen478,.zeneven,.zendots i,.zensweep i,.zenrings::before,.zenrings::after{animation:none}
}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:195;background:rgba(244,239,230,0.08)}
.scroll-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ruby),var(--ruby-hot));transform-origin:0 50%;transform:scaleX(0)}
.site-head{position:fixed;top:0;left:0;right:0;z-index:140;display:flex;align-items:center;justify-content:space-between;padding:1.4rem clamp(1.2rem,4vw,3rem)}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;height:160%;background:linear-gradient(180deg,rgba(10,8,7,0.9) 0%,rgba(10,8,7,0.55) 55%,transparent 100%);pointer-events:none}
.brand{font-family:var(--display);font-size:1.5rem;letter-spacing:0.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:0.14em}
.brand__mark{height:1.3em;width:auto;display:block;will-change:transform,filter;animation:markflash 2.4s ease-in-out infinite}
@keyframes markflash{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(230,57,70,0))}
50%{filter:brightness(1.75) drop-shadow(0 0 10px rgba(230,57,70,0.85))}
}
@media (prefers-reduced-motion:reduce){.brand__mark{animation:none} }
.songpre{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity 0.7s ease,visibility 0.7s ease}
.songpre.is-done{opacity:0;visibility:hidden;pointer-events:none}
.songpre__inner{text-align:center}
.songpre__chip{position:relative;display:inline-block;margin-bottom:1.4rem}
.songpre__logo{height:76px;width:auto;display:block;filter:drop-shadow(0 0 1px rgba(244,239,230,0.55)) drop-shadow(0 4px 18px rgba(0,0,0,0.65))}
.spre--vaunt .songpre__chip::after{display:none}
.songpre .songpre__chip,.songpre .songpre__chip::after{animation-play-state:paused}
.songpre.is-hot .songpre__chip,.songpre.is-hot .songpre__chip::after{animation-play-state:running}
.songpre.is-blazing .songpre__inner{animation:loadQuake 0.26s linear infinite}
.songpre.is-blazing .songpre__count{color:var(--ruby-hot);animation:loadFlash 0.4s steps(2) infinite}
.songpre.is-blazing .songpre__logo{filter:drop-shadow(0 0 22px rgba(229,56,59,0.95)) drop-shadow(0 0 2px rgba(244,239,230,0.8))}
@keyframes loadQuake{0%{transform:translate(0,0)}
25%{transform:translate(-3px,2px) rotate(-0.4deg)}
50%{transform:translate(3px,-2px) rotate(0.4deg)}
75%{transform:translate(-2px,-3px) rotate(-0.3deg)}
100%{transform:translate(2px,3px) rotate(0.3deg)}
}
@keyframes loadFlash{50%{opacity:0.45} }
@media (prefers-reduced-motion:reduce){.songpre.is-blazing .songpre__inner,.songpre.is-blazing .songpre__count{animation:none}
}
.songpre__count{font-family:var(--display);font-size:2.1rem;color:var(--cream);letter-spacing:0.06em}
.songpre__pct{color:var(--ruby-hot);font-size:0.6em;margin-left:0.15em}
.spre--uprise .songpre__chip{animation:spreMarch 1.5s ease-in-out infinite}
@keyframes spreMarch{0%,100%{transform:translateY(0) rotate(0deg)}
18%{transform:translateY(-16px) rotate(-4deg)}
36%{transform:translateY(0) rotate(0deg)}
44%{transform:translateY(-3px)}
52%{transform:translateY(0)}
70%{transform:translateY(-16px) rotate(4deg)}
88%{transform:translateY(0) rotate(0deg)}
}
.spre--vaunt .songpre__chip{animation:spreFloat 3.4s ease-in-out infinite}
.spre--vaunt .songpre__chip::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,0.85) 50%,transparent 58%);animation:spreGlint 3.4s ease-in-out infinite}
@keyframes spreFloat{0%,100%{transform:translateY(0) rotate(-2.5deg)}
50%{transform:translateY(-18px) rotate(2.5deg)}
}
@keyframes spreGlint{0%,55%{transform:translateX(-110%)}
85%,100%{transform:translateX(110%)}
}
.spre--we .songpre__chip{animation:spreCCTV 1.2s steps(1) infinite}
@keyframes spreCCTV{0%,100%{transform:none;filter:none;opacity:1}
8%{transform:translateX(-3px) skewX(-2deg);filter:drop-shadow(3px 0 0 rgba(255,0,60,0.8)) drop-shadow(-3px 0 0 rgba(0,220,255,0.8))}
14%{transform:translateX(2px);opacity:0.55}
20%{transform:none;filter:none;opacity:1}
62%{transform:translateY(1px);opacity:0.8}
68%{transform:none;opacity:1}
74%{transform:translateX(3px) skewX(2deg);filter:drop-shadow(-3px 0 0 rgba(255,0,60,0.8)) drop-shadow(3px 0 0 rgba(0,220,255,0.8))}
80%{transform:none;filter:none}
}
.spre--antisocial .songpre__chip{animation:spreScroll 1.6s ease-in-out infinite;box-shadow:0 0 34px rgba(80,160,255,0.35)}
@keyframes spreScroll{0%,22%{transform:translateY(0)}
30%{transform:translateY(-12px)}
34%{transform:translateY(-9px)}
56%{transform:translateY(-9px)}
64%{transform:translateY(-22px)}
68%{transform:translateY(-18px)}
86%{transform:translateY(-18px)}
100%{transform:translateY(0)}
}
.spre--wdts .songpre__chip{animation:spreSnap 1.9s ease-in-out infinite}
.spre--wdts::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:spreFlash 1.9s ease-out infinite;pointer-events:none}
@keyframes spreSnap{0%,88%{transform:scale(1)}
92%{transform:scale(0.92)}
96%{transform:scale(1.04)}
100%{transform:scale(1)}
}
@keyframes spreFlash{0%,89%{opacity:0}
92%{opacity:0.9}
100%{opacity:0}
}
.spre--wifi .songpre__chip{animation:sprePing 2s ease-in-out infinite}
.spre--wifi .songpre__inner::before{content:"";position:absolute;left:50%;top:32px;width:90px;height:90px;border:2px solid rgba(230,57,70,0.8);border-radius:50%;transform:translate(-50%,-50%);animation:spreRing 2s ease-out infinite;pointer-events:none}
.spre--wifi .songpre__inner{position:relative}
@keyframes sprePing{0%,100%{transform:scale(1)}
12%{transform:scale(1.06)}
24%{transform:scale(1)}
}
@keyframes spreRing{0%{opacity:0.9;transform:translate(-50%,-50%) scale(0.5)}
100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}
}
@media (prefers-reduced-motion:reduce){.songpre__chip,.spre--wdts::after,.spre--wifi .songpre__inner::before{animation:none !important}
}
.site-foot__brand{display:inline-flex;align-items:center;gap:0.14em}
.brand__m{color:var(--ruby-hot);background:linear-gradient(160deg,#f5f5f5,#9c9c9c 45%,var(--ruby-hot));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.2em}
.site-head__nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem)}
.site-head__nav a{font-size:0.84rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--cream-dim);transition:color 0.3s}
.site-head__nav a:hover{color:var(--cream)}
.head-cta{border:1px solid var(--ruby);color:var(--cream) !important;padding:0.55em 1.3em;border-radius:100px;transition:background 0.3s,color 0.3s}
.head-cta:hover{background:var(--ruby)}
.sound-toggle[hidden]{display:none}
.sound-dock{position:fixed;z-index:141;top:0.9rem;right:clamp(1rem,4vw,2rem)}
.sound-toggle{display:inline-flex;align-items:center;gap:0.5em;background:none;cursor:pointer;border:1px solid rgba(244,239,230,0.3);border-radius:100px;color:var(--cream-dim);font-family:var(--body);font-size:0.84rem;letter-spacing:0.25em;text-transform:uppercase;padding:0.55em 1.3em;min-height:44px;transition:color 0.3s,border-color 0.3s;white-space:revert}
.sound-toggle:hover{color:var(--cream)}
html[data-theme="light"] .sound-toggle{border-color:rgba(26,20,13,0.3)}
.sound-toggle__dot{width:8px;height:8px;border-radius:50%;background:rgba(244,239,230,0.35);transition:background 0.3s,box-shadow 0.3s}
.sound-toggle.is-on{color:var(--cream);border-color:var(--ruby)}
.sound-toggle.is-on .sound-toggle__dot{background:var(--ruby-hot);box-shadow:0 0 12px rgba(229,56,59,0.9);animation:pulse-m 0.8s ease-in-out infinite alternate}
.hero{height:220vh;position:relative}
.hero__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
#orbitCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.hero__fallback.is-active{display:block}
.hero__vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(10,8,7,0.72) 100%),linear-gradient(180deg,rgba(10,8,7,0.55) 0%,transparent 22%,transparent 72%,rgba(10,8,7,0.88) 100%);pointer-events:none}
.hero__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 4vw}
.hero__content a,.hero__content button{pointer-events:auto}
.hero__eyebrow{font-size:0.84rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:1.2rem}
.hero__title{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,13.5vw,12.5rem);line-height:0.92;text-transform:uppercase;letter-spacing:0.01em}
.hero__line{display:block;white-space:nowrap}
.hero__line .ch{display:inline-block;will-change:transform,opacity}
.hero__line--accent,.hero__line--accent .ch{color:var(--ruby-hot);text-shadow:0 0 80px rgba(193,18,31,0.35)}
.hero__sub{margin-top:1.6rem;font-size:clamp(0.85rem,1.6vw,1.15rem);letter-spacing:0.55em;text-transform:uppercase;color:var(--cream)}
.hero__sub .bracket{color:var(--ruby-hot);font-style:normal}
/* THE TWO DOORS in the hero. The first clickable thing on the site,
   answering the two questions people actually arrive with: who is
   this, and how do I work with him. Revealed by CSS on a delay rather
   than by the intro timeline, so a primary call to action cannot be
   left invisible by an animation that did not run. */
.hero__doors{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:0.7rem;justify-content:center;
  animation:heroDoors 0.9s 1.05s both ease-out;
  flex-direction:column;
  align-items:stretch;
  width:min(100%,20rem)}
.hero__door{display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none;
  font-family:var(--body,system-ui,sans-serif);font-weight:800;font-size:0.74rem;
  letter-spacing:0.12em;text-transform:uppercase;padding:0.66rem 1.4rem;min-height:44px;border-radius:100px;
  color:var(--cream);border:2px solid rgba(244,239,230,0.34);background:rgba(10,8,7,0.44);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color 0.25s ease,background 0.25s ease,transform 0.25s ease;
  justify-content:center}
.hero__door:hover,.hero__door:focus-visible{border-color:var(--cream);
  background:rgba(10,8,7,0.74);transform:translateY(-2px)}
.hero__door--lead{color:#fff;border-color:transparent;
  background:var(--metal,linear-gradient(165deg,#ff5a5c 0%,#e5383b 34%,#b3121b 58%,#ff6a6c 100%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 14px 34px -14px rgba(0,0,0,0.85)}
.hero__door--lead:hover,.hero__door--lead:focus-visible{border-color:transparent}
@keyframes heroDoors{from{opacity:0;transform:translateY(0.9rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__doors{animation:none}
  .hero__door{transition:none}}
@media (min-width: 30.001rem) {
  .hero__doors { flex-direction: revert; align-items: revert; width: revert; }
  .hero__door { justify-content: revert; }
}
.reveal-line{overflow:hidden}
.reveal-line > span{display:inline-block}
.hero__hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:1.6rem clamp(1.2rem,4vw,3rem);font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim)}
.hud__deg{font-family:var(--display);font-size:1.6rem;letter-spacing:0.1em;color:var(--cream)}
.hud__arrow{display:inline-block;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.kicker{font-size:0.84rem;letter-spacing:0.45em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:1rem}
.kicker--center{text-align:center}
.section-title{font-family:var(--display);font-size:clamp(3rem,9vw,8rem);line-height:0.9;text-transform:uppercase;font-weight:400}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.bg-video.is-active{display:block}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,7,0.85) 0%,rgba(10,8,7,0.3) 55%,rgba(10,8,7,0.55) 100%)}
.scrim--deep{background:linear-gradient(180deg,rgba(10,8,7,0.9) 0%,rgba(10,8,7,0.42) 40%,rgba(10,8,7,0.9) 100%)}
.kicker__mark{height:1.5em;width:auto;display:inline-block;vertical-align:-0.42em;margin-right:0.3em}
.loadout{height:380vh;position:relative;background:var(--ink)}
.loadout__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.loadout__frame{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:0 clamp(1.2rem,4vw,3rem)}
.loadout__head .work__answer{margin-top:1rem}
.loadout__tile{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(1rem,2.5vw,2.5rem);background:var(--ink-2);border:1px solid rgba(244,239,230,0.12);border-left:3px solid var(--ruby-hot);padding:clamp(1.4rem,3vw,2.6rem);transform-style:preserve-3d;perspective:1000px;will-change:transform,opacity}
.loadout__imgwrap{aspect-ratio:1;overflow:hidden;border-radius:6px;background:#000}
.loadout__imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.loadout__role{font-size:0.78rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--ruby-hot)}
.loadout__name{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.8rem);text-transform:uppercase;line-height:1;margin-top:0.5rem}
.loadout__specs{list-style:none;margin-top:1.1rem}
.loadout__specs li{color:var(--cream-dim);font-size:0.95rem;padding:0.42em 0;border-bottom:1px solid rgba(244,239,230,0.08)}
.loadout__specs li::before{content:"— ";color:var(--ruby-hot)}
.loadout__count{position:absolute;right:clamp(1.2rem,4vw,3rem);top:-16vh;bottom:auto}
@media (min-width: 900.02px) {
  .loadout__frame { grid-template-columns: minmax(280px,1fr) minmax(0,1.3fr); }
  .loadout__tile { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
.stats{position:relative;z-index:2;background:var(--ink-2);border-top:1px solid rgba(244,239,230,0.07);border-bottom:1px solid rgba(244,239,230,0.07);padding-bottom:clamp(3rem,7vw,6rem)}
.marquee{overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(244,239,230,0.07);padding:1.1rem 0}
.marquee__track{display:inline-block;white-space:nowrap;font-family:var(--display);font-size:clamp(1.1rem,2.6vw,2rem);text-transform:uppercase;color:var(--cream-dim);will-change:transform}
.marquee__track span{padding-right:0.5em}
.stats__grid{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:rgba(244,239,230,0.07);margin-top:clamp(3rem,6vw,5rem)}
.stat{background:var(--ink-2);padding:clamp(1.6rem,3.5vw,3rem)}
.stat__obj{height:clamp(7rem,14vw,11rem);display:flex;align-items:center;justify-content:flex-start;animation:float-bob 4.5s ease-in-out infinite}
.stat:nth-child(2) .stat__obj{animation-delay:-1.5s}
.stat:nth-child(3) .stat__obj{animation-delay:-3s}
@keyframes float-bob{0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
.stat__obj img{height:100%;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,0.65)) drop-shadow(0 0 24px rgba(193,18,31,0.25));will-change:transform}
.stat__name{margin-top:1rem;font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,2.2vw,1.7rem);text-transform:uppercase;letter-spacing:0.03em}
.stat__name em{color:var(--ruby-hot);font-style:normal}
.stat__line{margin-top:0.7rem;color:var(--cream-dim);font-size:0.92rem}
.stats__tagline{display:flex;align-items:baseline;gap:1.2rem;padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3rem) 0}
.stat__bignum{font-family:var(--display);font-size:clamp(4rem,12vw,10rem);color:var(--cream);line-height:1}
.stats__tagtext{font-family:var(--display);font-size:clamp(1.4rem,3.5vw,3rem);text-transform:uppercase;color:var(--cream-dim)}
.pillars{height:400vh;position:relative}
.pillars__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.pillars__frame{position:relative;z-index:3;height:100%;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.4fr);align-items:center;padding:0 clamp(1.2rem,4vw,3rem);gap:clamp(1rem,4vw,4rem)}
.pillars__list{display:flex;flex-direction:column;gap:clamp(1rem,2.5vh,2rem)}
.pillar{border-left:3px solid rgba(244,239,230,0.15);padding-left:clamp(1rem,2.5vw,2rem);opacity:0.18;transform:translateX(2.5rem);transition:opacity 0.5s ease,transform 0.5s ease,border-color 0.5s ease}
.pillar.is-active{opacity:1;transform:translateX(0);border-color:var(--ruby-hot)}
.pillar__idx{font-family:var(--display);font-size:clamp(1rem,2vw,1.5rem);color:var(--ruby-hot)}
.pillar__name{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4.6vw,4rem);line-height:0.95;text-transform:uppercase;margin-top:0.3rem}
.pillar__copy{margin-top:0.6rem;max-width:44ch;color:var(--cream-dim);font-size:0.95rem;display:none}
.pillar.is-active .pillar__copy{display:block}
.vauntlive{height:350vh;position:relative}
.vauntlive__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.vauntlive__content{position:absolute;z-index:3;left:clamp(1.2rem,4vw,3rem);bottom:clamp(2.5rem,9vh,5.5rem);max-width:min(92vw,50rem)}
.vauntlive__title{font-family:var(--display);font-weight:400;font-size:clamp(4.5rem,15vw,13rem);line-height:0.9;text-transform:uppercase;color:var(--ruby-hot);text-shadow:0 0 100px rgba(229,56,59,0.4)}
.vauntlive__sub{margin-top:0.9rem;font-size:0.9rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--cream-dim)}
/* THE VAUNT FLY-THROUGH AND THE NIGHT SCROLL SHARE A CUT.

   .services was height:auto with a non-sticky stage, so the Antisocial film
   simply scrolled up over the Vaunt one: at the join you saw the bottom of
   one film and the top of the next in the same viewport, with a hard
   horizontal seam between them. The two films are a transition — the jet
   levels off and the night comes down — and the seam was cutting it in half.

   Pinning this stage the way #work's is puts both films in the same slot, so
   the second takes the screen where the first left it instead of sliding in
   underneath. The section needs real scroll length for a pin to have
   anything to travel through, which is what the min-height buys. */
/* The section is pulled up a full screen so it begins while the Vaunt stage
   is still pinned, and it rides above it — so the night scroll DISSOLVES in
   over the fly-through instead of sliding up with an edge. js/main.js fades
   .services .command__sticky in across the first slice of this section's
   own scroll; the two films now hand the screen over without a seam.
   That same file also HOLDS the night scroll on its opening frame for the
   length of the dissolve — the shot starts above the cloud line, coming out
   of the aircraft, and it was being scrubbed away behind an opacity still
   climbing out of zero. The length here and the trigger's end distance are
   a pair: see PB_HANDOVER in js/main.js before changing either. */
.services{position:relative;z-index:2;min-height:220vh;min-height:220svh;margin-top:-100vh;margin-top:-100svh}
.services .command__sticky{position:sticky;top:0;height:100vh;height:100svh;opacity:0}
.services .command__count{display:none}
.services .song-gate{display:none}
.antiabout{bottom:clamp(2rem,7vh,4rem);max-width:52rem;pointer-events:auto;display:flex;flex-direction:column;gap:1rem}
.antiabout__duo{display:flex;align-items:center;gap:clamp(0.9rem,3vw,1.4rem)}
.antiabout__phone{flex:none;display:grid;place-items:center;width:clamp(3rem,9vw,4rem);height:clamp(3.6rem,11vw,4.8rem);animation:phonePolice 1.32s steps(1,end) infinite,phoneBuzz 3.6s ease-in-out infinite}
.antiabout__phone svg{width:100%;height:100%}
@keyframes phonePolice{0%,49.9%{color:#2f6bff;filter:drop-shadow(0 0 16px rgba(47,107,255,0.75))}
50%,100%{color:#ff3535;filter:drop-shadow(0 0 16px rgba(255,53,53,0.75))}
}
@keyframes phoneBuzz{0%,86%,100%{transform:rotate(0)}
88%{transform:rotate(-6deg)} 90%{transform:rotate(5deg)}
92%{transform:rotate(-4deg)} 94%{transform:rotate(2deg)} 96%{transform:rotate(0)}
}
.antiabout__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem}
.antiabout__points li{display:flex;align-items:center;gap:0.7em;opacity:0;transform:translateX(-14px);animation:ptIn 0.7s cubic-bezier(0.2,0.9,0.2,1) forwards;animation-play-state:paused}
.antiabout__points li + li{animation-delay:0.22s}
.antiabout__duo.is-in .antiabout__points li{animation-play-state:running}
.antiabout__points span{font-family:var(--display);text-transform:uppercase;line-height:0.95;letter-spacing:0.01em;font-size:clamp(1.25rem,4.6vw,2.3rem);color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,0.55)}
@keyframes ptIn{to{opacity:1;transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){.antiabout__phone{animation:none;color:var(--ruby-hot)}
.antiabout__points li{animation:none;opacity:1;transform:none}
}
.antiscroll__title{font-family:var(--display);font-weight:400;margin:0;text-transform:uppercase;line-height:0.82;letter-spacing:-0.01em}
.antiscroll__title span{display:block}
.antiscroll__l1{font-size:clamp(1.6rem,6vw,4rem);color:var(--cream);opacity:0.92}
.antiscroll__l2{font-size:clamp(2.3rem,10vw,6.5rem);background:linear-gradient(100deg,var(--ruby) 0%,var(--ruby-hot) 28%,#ffb3b5 48%,#fff 52%,var(--ruby-hot) 72%,var(--ruby) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slowSheen 5.5s linear infinite,slowBreath 4.5s ease-in-out infinite;transform-origin:left center;filter:drop-shadow(0 0 34px rgba(229,56,59,0.35))}
@keyframes slowSheen{to{background-position:260% 0} }
@keyframes slowBreath{0%,100%{transform:scale(1);letter-spacing:-0.01em} 50%{transform:scale(1.015);letter-spacing:0.015em} }
.antiscroll__l3{font-size:clamp(1.9rem,8vw,5.2rem);margin-top:0.04em;color:transparent;-webkit-text-stroke:1.5px var(--cream);text-stroke:1.5px var(--cream);opacity:0;transform:translateY(-0.25em);animation:homieIn 0.8s cubic-bezier(0.2,0.9,0.2,1) 0.55s forwards;text-shadow:0 0 30px rgba(244,239,230,0.18)}
@keyframes homieIn{to{opacity:0.95;transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){.antiscroll__l2{animation:none;color:var(--ruby-hot)}
.antiscroll__l3{animation:none;opacity:0.95;transform:none}
}
.antiabout__sound{display:inline-flex;align-items:center;gap:0.55em;font-size:0.9rem;letter-spacing:0.04em;color:var(--cream-dim);animation:soundCue 3s ease-in-out infinite}
.antiabout__spk{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;color:var(--ruby-hot);flex:none}
.antiabout__spk svg{width:100%;height:100%}
@keyframes soundCue{0%,100%{color:var(--cream-dim)} 50%{color:var(--cream)} }
@media (prefers-reduced-motion:reduce){.antiabout__sound{animation:none} }
.antiabout__cap{font-size:0.84rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim)}
.antiabout__icons{display:flex;flex-wrap:wrap;gap:0.7rem}
.antiabout__ic{display:flex;flex-direction:column-reverse;align-items:center;gap:0.3rem;padding:0.6rem 0.7rem;min-width:5.2rem;background:rgba(10,8,7,0.5);border:1px solid rgba(244,239,230,0.16);border-radius:12px;cursor:pointer;color:var(--cream-dim);transition:border-color 0.25s,color 0.25s,transform 0.25s}
.antiabout__ic:hover{border-color:var(--ruby-hot);color:var(--cream);transform:translateY(-3px)}
.antiabout__ic .psy__ic{width:22px;height:22px;color:var(--ruby-hot)}
.antiabout__nm{font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;text-align:center}
.antiabout__why{margin-top:0.4rem;max-width:40ch;font-size:clamp(1.05rem,2.8vw,1.5rem);line-height:1.35;color:var(--cream)}
.antiabout__why b{color:var(--ruby-hot)}
.antiabout__enter{display:inline-flex;align-items:center;gap:1.1rem;margin-top:0.6rem;text-decoration:none;color:var(--cream);width:fit-content}
.antiabout__enter-ic{flex:none;position:relative;display:grid;place-items:center;width:clamp(4.6rem,15vw,6rem);height:clamp(4.6rem,15vw,6rem);border-radius:50%;color:#fff;overflow:hidden;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));box-shadow:0 12px 40px rgba(229,56,59,0.5),0 0 0 1px rgba(255,255,255,0.16) inset;animation:antiEnterPulse 2s ease-in-out infinite;transition:transform 0.3s cubic-bezier(0.2,0.9,0.2,1)}
.antiabout__enter-ic::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent);transform:skewX(-18deg);animation:antiShine 3.4s ease-in-out infinite}
@keyframes antiShine{0%,55%{left:-70%} 85%,100%{left:140%} }
.antiabout__enter-rings{position:absolute;inset:0;pointer-events:none}
.antiabout__enter-rings::before,.antiabout__enter-rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(229,56,59,0.7);animation:antiRing 2.4s ease-out infinite}
.antiabout__enter-rings::after{animation-delay:1.2s}
@keyframes antiRing{0%{transform:scale(1);opacity:0.85} 100%{transform:scale(1.9);opacity:0} }
.antiabout__enter-icwrap{position:relative;flex:none}
.antiabout__enter-ic svg{width:42%;height:42%;margin-left:6%;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35))}
.antiabout__enter:hover .antiabout__enter-ic{transform:scale(1.1) rotate(4deg)}
.antiabout__enter:active .antiabout__enter-ic{transform:scale(0.96)}
.antiabout__enter-txt{font-family:var(--display);font-weight:400;line-height:1.05;font-size:clamp(1.2rem,3.6vw,1.8rem);text-transform:uppercase;letter-spacing:0.02em}
.antiabout__enter-txt b{color:var(--ruby-hot);background:linear-gradient(100deg,var(--ruby-hot),#ffb3b5,var(--ruby-hot));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slowSheen 4s linear infinite}
.antiabout__enter-txt::after{content:"";display:block;height:2px;margin-top:0.25em;width:0;background:linear-gradient(90deg,var(--ruby),var(--ruby-hot));transition:width 0.4s cubic-bezier(0.2,0.9,0.2,1)}
.antiabout__enter:hover .antiabout__enter-txt::after{width:100%}
@keyframes antiEnterPulse{0%,100%{box-shadow:0 12px 40px rgba(229,56,59,0.42),0 0 0 1px rgba(255,255,255,0.16) inset}
50%{box-shadow:0 14px 56px rgba(229,56,59,0.85),0 0 28px rgba(229,56,59,0.6),0 0 0 1px rgba(255,255,255,0.3) inset}
}
@media (prefers-reduced-motion:reduce){.antiabout__enter-ic,.antiabout__enter-ic::after,.antiabout__enter-rings::before,.antiabout__enter-rings::after,.antiabout__enter-txt b{animation:none}
}
@media (max-width:720px){.antiabout{gap:0.8rem;bottom:clamp(1.5rem,5vh,3rem)}
.antiabout__points{gap:0.45rem}
.antiabout__icons{gap:0.5rem}
.antiabout__ic{min-width:4.4rem;padding:0.5rem}
}
.command__pitch em{color:var(--ruby-hot);font-style:normal;font-family:var(--display);padding-right:0.25em}
.command{height:300vh;position:relative}
.command__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.command__canvas{opacity:0}
.command__head{position:absolute;z-index:3;top:clamp(4.5rem,12vh,7rem);left:clamp(1.2rem,4vw,3rem);max-width:min(90vw,46rem)}
.command__panels{position:absolute;z-index:3;left:clamp(1.2rem,4vw,3rem);right:clamp(1.2rem,4vw,3rem);bottom:calc(clamp(4.5rem,13vh,7.5rem) + env(safe-area-inset-bottom));min-height:12rem}
.command__panel{position:absolute;left:0;bottom:0;max-width:44rem;opacity:0;transform:translateY(2rem);transition:opacity 0.55s ease,transform 0.55s ease;pointer-events:none;border-left:3px solid var(--ruby-hot);padding-left:clamp(1rem,2.5vw,1.8rem)}
.command__panel.is-active{opacity:1;transform:none}
.command__panel a{pointer-events:auto}
.command__link{color:var(--ruby-hot);border-bottom:1px solid var(--ruby);white-space:nowrap}
.command__meta{display:flex;gap:1rem;align-items:center}
.command__logo{height:2rem;width:auto;background:var(--cream);border-radius:5px;padding:0.2rem 0.45rem}
.command__logo--white{background:#fff}
.vauntlive__logo{height:2.6rem;margin-bottom:1rem;display:block}
.command__idx{font-family:var(--display);color:var(--ruby-hot);font-size:1.1rem}
.command__tag{font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim)}
.command__title{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);text-transform:uppercase;line-height:1;margin-top:0.6rem}
.command__pitch{margin-top:0.7rem;color:var(--cream-dim);font-size:0.98rem;max-width:56ch}
.command__count{position:absolute;z-index:3;right:clamp(1.2rem,4vw,3rem);bottom:calc(clamp(4.5rem,13vh,7.5rem) + env(safe-area-inset-bottom));font-family:var(--display);font-size:clamp(1.2rem,2.6vw,2rem);color:var(--cream-dim);letter-spacing:0.1em;top:revert}
.work{position:relative;overflow:hidden;padding:clamp(5rem,12vh,9rem) 0}
.work__frame{position:relative;z-index:3;padding:0 clamp(1.2rem,4vw,3rem)}
.work__answer{margin-top:1.2rem;font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.8rem);text-transform:uppercase;letter-spacing:0.06em;color:var(--cream-dim)}
.work__answer em{color:var(--ruby-hot);font-style:normal}
.work__grid{margin-top:clamp(2.5rem,6vh,4.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.5vw,2rem)}
.card{position:relative;display:block;background:rgba(10,8,7,0.66);border:1px solid rgba(244,239,230,0.12);padding:clamp(1.6rem,3vw,2.6rem);backdrop-filter:blur(6px);transform:translateY(0);transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),border-color 0.45s,background 0.45s;overflow:hidden;will-change:transform}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ruby);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1)}
.card:hover{transform:translateY(-10px);border-color:rgba(229,56,59,0.6);background:rgba(18,13,12,0.85)}
.card:hover::after{transform:scaleX(1)}
.card__idx{font-family:var(--display);color:var(--ruby-hot);font-size:1.1rem}
.card__tag{float:right;font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim);padding-top:0.4rem}
.card__title{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);text-transform:uppercase;line-height:1;margin-top:1.4rem;clear:both}
.card__pitch{margin-top:0.9rem;color:var(--cream-dim);font-size:0.95rem;min-height:3em}
.card__cta{display:inline-block;margin-top:1.4rem;font-size:0.84rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--ruby-hot)}
/* ── THE ARRIVAL ───────────────────────────────────────────────────────────
   The close lives inside the night descent now, over the film's last frame.
   It is laid out to FIT one viewport alongside the room, which is why the
   headline is a fraction of the finale's old clamp(4.5rem,19vw,17rem): at
   that size there was no screen left for the thing people are here to use.

   Opacity and transform are owned by js/main.js, which drives them from the
   descent's scrub. Nothing here may set .nightroom{opacity:1} -- that would
   put the room on screen through the whole fall. */
.nightroom{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(0.4rem,1.4vh,0.9rem);padding:clamp(1rem,4vh,2rem) clamp(1.2rem,4vw,3rem) calc(clamp(1rem,4vh,2rem) + env(safe-area-inset-bottom));text-align:center;opacity:0;pointer-events:none;will-change:opacity,transform;padding-top:clamp(3.5rem,11vh,5rem)}
.nightroom__title{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6.4vw,4.6rem);line-height:0.9;text-transform:uppercase;margin:0}
.nightroom__title .hero__line--accent .ch{text-shadow:0 0 60px rgba(229,56,59,0.42)}
.nightroom .kicker{margin:0}
/* The room keeps its own width but is capped to what is left of the viewport
   and scrolls inside itself rather than pushing the headline off screen. */
.nightroom .lockroom{margin:0;width:min(46rem,100%);max-height:min(58vh,30rem);max-height:min(58svh,30rem);overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}
.anchor-arrival{position:absolute;bottom:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
@media (min-width: 640.02px) {
  .nightroom { justify-content: center; padding-top: clamp(1rem,4vh,2rem); }
  .nightroom .lockroom { max-height: min(64vh,34rem);max-height:min(64svh,34rem); }
}
@media (prefers-reduced-motion:reduce){
  .nightroom{transition:none}
}
.finale{position:relative;z-index:2;background:radial-gradient(ellipse at 50% 120%,rgba(193,18,31,0.22),transparent 60%),var(--ink);padding:clamp(6rem,18vh,12rem) 1.5rem;text-align:center;border-top:1px solid rgba(244,239,230,0.07)}
.finale__title{font-family:var(--display);font-weight:400;font-size:clamp(4.5rem,19vw,17rem);line-height:0.88;text-transform:uppercase}
.finale__title .hero__line--accent .ch{text-shadow:0 0 110px rgba(229,56,59,0.45)}
.finale__actions{margin-top:clamp(2.2rem,6vh,4rem);display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--body);font-weight:700;font-size:0.9rem;letter-spacing:0.28em;text-transform:uppercase;padding:1.15em 2.6em;border-radius:100px;display:inline-block;background:transparent;border:1px solid transparent;color:var(--cream);cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center;text-decoration:none;line-height:1.1;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),background 0.3s,color 0.3s,box-shadow 0.3s,border-color 0.3s;will-change:transform}
/* A ruby button is a dark chip on BOTH coats — the fill does not go pale in
   daylight, so its label must not flip with --cream. It did, and in light mode
   "Book a call with me" came out near-black on deep red at 2.29:1. --on-ruby
   is bone in both themes, which is what the dark coat was already rendering. */
.btn--ruby{background:var(--ruby);color:var(--on-ruby);box-shadow:0 0 50px rgba(193,18,31,0.35)}
.btn--ruby:hover{background:var(--ruby-hot);box-shadow:0 0 90px rgba(229,56,59,0.55)}
.btn--ghost{border:1px solid rgba(244,239,230,0.5);background:rgba(244,239,230,0.06);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream);background:rgba(244,239,230,0.14)}
/* A ghost button IS its outline. Cream at half alpha is a clear edge on the
   dark coat (4.8:1) and a ghost of a ghost on bone (1.01:1) — the button
   stops existing. These edges follow the coat over. */
html[data-theme="light"] .btn--ghost{border-color:rgba(26,20,13,0.42);background:rgba(26,20,13,0.05)}
html[data-theme="light"] .btn--ghost:hover{border-color:var(--cream);background:rgba(26,20,13,0.1)}
.finale__believe{margin-top:2.2rem;font-size:0.84rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim)}
.site-foot{position:relative;z-index:2;background:var(--ink-2);border-top:1px solid rgba(244,239,230,0.07);padding:clamp(2.5rem,6vh,4rem) clamp(1.2rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.site-foot__brand{font-family:var(--display);font-size:1.6rem;text-transform:uppercase}
.site-foot__links{display:flex;flex-direction:column;gap:0.45rem}
.site-foot__links a{font-size:0.84rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--cream-dim);transition:color 0.3s}
.site-foot__links a:hover{color:var(--ruby-hot)}
.site-foot__note{font-size:0.84rem;color:var(--cream-dim);letter-spacing:0.08em}

/* ============================================================
   THE DOORS — the footer, built as things you press.

   The home page's footer was twelve links stacked in a column,
   uppercase and letter-spaced at .84rem. That is the footer every
   site has, and it fails for the reason every one of them fails:
   twelve links that look identical are not twelve choices, they
   are a paragraph of underlines you scroll past. Nothing in it
   said which room was worth walking into.

   Same rooms, built as doors. A tile with its own mark, its name
   and one line of what is behind it — scanned by shape, hit with a
   thumb, and sized like something meant to be pressed. Reach is
   three pills. The legal line is the only thing left that is
   still just words, which is correct: nobody presses a copyright.

   The other six pages carry the short footer (a brand mark and a
   line) and do not need any of this, so all of it hangs off
   .site-foot--doors and leaves them exactly as they were.
   ============================================================ */
.site-foot--doors { display: block; padding: clamp(2.6rem,7vh,4.4rem) clamp(1.1rem,4vw,3rem); }
/* the bar is fixed over the bottom of every page, and the shorthand above
   outranks the .site-foot rules further down this file that clear it — so the
   clearance is restated here rather than left to lose a specificity fight */
.site-foot--doors { padding-bottom: calc(var(--appbar-h, 3.7rem) + env(safe-area-inset-bottom) + 2rem); }
.foot__inner { max-width: 66rem; margin: 0 auto; display: grid; gap: clamp(1.3rem,4vh,2rem); }
.foot__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; }
.foot__brand { margin: 0; font-family: var(--display); font-size: 1.6rem; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .14em; }
.foot__k { margin: 0; font: 800 .62rem var(--body); letter-spacing: .26em;
  text-transform: uppercase; color: rgba(244,239,230,.49); }

/* 17.5rem is chosen, not guessed: it is the width at which nine tiles fall
   into a clean 3x3 inside the 66rem inner column instead of a 4+4+1 with an
   orphan, and at which no descriptor wraps to a second line. */
.foot__doors { display: grid; gap: .55rem;
  grid-template-columns: minmax(0,1fr); }
.footdoor { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 16px;
  text-decoration: none; color: var(--cream); background: rgba(244,239,230,.045);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.1);
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease; }
.footdoor::after { content: "\2192"; font-size: 1rem; color: rgba(244,239,230,.3);
  transition: color .22s ease, transform .22s ease; }
.footdoor:hover, .footdoor:focus-visible { background: rgba(229,56,59,.14);
  box-shadow: inset 0 0 0 1px var(--ruby-hot); transform: translateY(-2px); }
.footdoor:hover::after, .footdoor:focus-visible::after { color: var(--ruby-hot); transform: translateX(3px); }
.footdoor:active { transform: translateY(0); }
.footdoor__ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(244,239,230,.06);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.1); }
.footdoor__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ruby-hot);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footdoor__ic--mark img { width: 24px; height: 24px; object-fit: contain; }
.footdoor__txt { min-width: 0; }
.footdoor b { display: block; font: 800 .95rem var(--body); letter-spacing: .02em;
  color: var(--cream); }
/* the descriptor is copy somebody actually reads, not an eyebrow, so it sits
   at the house's legible size rather than at label size */
.footdoor small { display: block; margin-top: .12rem; font: 500 .85rem/1.35 var(--body);
  color: var(--cream-dim); }

.foot__reach { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.footreach { display: inline-flex; align-items: center; gap: .55em; text-decoration: none;
  border: 1px solid rgba(244,239,230,.22); border-radius: 99px; padding: .55em 1.1em; min-height: 44px;
  color: var(--cream); font: 700 .76rem var(--body); letter-spacing: .1em;
  text-transform: uppercase; transition: border-color .22s, background .22s, transform .22s; }
.footreach svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footreach:hover, .footreach:focus-visible { border-color: var(--ruby-hot);
  background: rgba(229,56,59,.16); transform: translateY(-2px); }
.footreach__handle { font: 500 .85rem var(--body); color: rgba(244,239,230,.49);
  letter-spacing: .04em; }

/* The legibility pass sets .site-foot__note to 1.14rem along with the site's
   body copy, which down here makes the copyright the loudest thing in the
   footer — louder than the nine doors above it. It stays comfortably
   readable and stops competing: nobody came to this page for the notice. */
.site-foot--doors .site-foot__note { margin: 0; font-size: .95rem; line-height: 1.6;
  max-width: 62rem; color: rgba(244,239,230,.49); }
.site-foot--doors .site-foot__note em { font-style: normal; color: var(--cream-dim); }

/* the tiles read on the bone coat too: the same edges, inked */
html[data-theme="light"] .footdoor { background: rgba(26,20,13,.04);
  box-shadow: inset 0 0 0 1px rgba(26,20,13,.16); }
html[data-theme="light"] .footdoor__ic { background: rgba(26,20,13,.05);
  box-shadow: inset 0 0 0 1px rgba(26,20,13,.14); }
html[data-theme="light"] .footreach { border-color: rgba(26,20,13,.3); }

@media (min-width: 560.02px) {
  .foot__doors { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
  .footdoor { padding: .85rem 1rem; gap: .85rem; }
  .footdoor__ic { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .footdoor, .footdoor::after, .footreach { transition: none; }
  .footdoor:hover, .footreach:hover { transform: none; }
  .footdoor:hover::after { transform: none; }
}
@media (max-width:900px){.pillars__frame{grid-template-columns:minmax(0,1fr);align-content:center;gap:2rem}
.pillars__head .section-title{font-size:clamp(2.4rem,10vw,4rem)}
.site-head__nav a:not(.head-cta){display:none}
}
@media (prefers-reduced-motion:reduce){.hud__arrow{animation:none}
}
.song-gate{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:3.1rem;height:3.1rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(244,239,230,0.28);border-radius:50%;color:var(--cream);background:rgba(10,8,7,0.62);backdrop-filter:blur(5px);font-size:0;text-indent:-9999px;overflow:hidden;transition:color 0.3s,border-color 0.3s,transform 0.3s}
.song-gate::before{content:"";width:15px;height:17px;background:currentColor;text-indent:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18V5l8-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='18' r='3'/%3E%3Ccircle cx='15' cy='16' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18V5l8-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='18' r='3'/%3E%3Ccircle cx='15' cy='16' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.song-gate:hover{border-color:var(--ruby-hot);transform:translate(-50%,-50%) scale(1.09)}
.song-gate__dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--ruby-hot);box-shadow:0 0 10px rgba(229,56,59,0.9);animation:pulse-m 0.9s ease-in-out infinite alternate}
.stats__own{display:block;text-align:center;padding:0 clamp(1.2rem,4vw,3rem) clamp(2rem,4vh,3rem);font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);transition:color 0.3s}
.stats__own:hover{color:var(--ruby-hot)}
.btn.is-pending{opacity:0.55;cursor:default}
.songhero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 1.5rem 3rem}
.songhero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem 0.6rem;margin-top:1.6rem;max-width:min(46rem,100%)}
.songhero__meta span{font-size:0.84rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);border:1px solid rgba(244,239,230,0.16);border-radius:100px;padding:0.34em 0.9em;white-space:nowrap}
.songhero__meta .is-key{color:var(--ruby-hot);border-color:rgba(193,18,31,0.5)}
.songhero__cat{font-size:0.84rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(244,239,230,0.16);border-bottom-color:var(--ruby);border-radius:100px;padding:0.34em 0.9em;white-space:nowrap;transition:border-color 0.25s ease,color 0.25s ease}
.songhero__cat:hover{border-color:var(--ruby-hot);color:var(--ruby-hot)}
.songhero__title{font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,13vw,10.5rem);line-height:0.92;text-transform:uppercase;color:var(--ruby-hot);text-shadow:0 0 110px rgba(229,56,59,0.4)}
.songhero__sub{margin-top:1.1rem;font-size:0.9rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--cream-dim)}
.songhero__play{margin-top:2.4rem}
.songhero__hint{margin-top:3.5rem;font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim)}
.catalogue{position:relative;z-index:2;background:var(--ink);padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3rem);overflow:clip}
.catalogue__head{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.catalogue__list{list-style:none;border-top:1px solid rgba(244,239,230,0.12)}
.catalogue__row a,.catalogue__rowinner{display:grid;grid-template-columns:3rem minmax(0,2fr) minmax(0,3fr) 4rem 6rem;gap:1rem;align-items:baseline;padding:clamp(1rem,2.4vw,1.6rem) 0.4rem;border-bottom:1px solid rgba(244,239,230,0.12);transition:background 0.25s ease,padding-left 0.25s ease}
.catalogue__album{font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--ruby-hot);padding:1.4rem 0.4rem 0.5rem;margin-top:0.4rem;border-bottom:1px solid rgba(229,56,59,0.3)}
.catalogue__list > .catalogue__album:first-child{padding-top:0.2rem}
.catalogue__row a:hover{background:rgba(193,18,31,0.08);padding-left:1rem}
.catalogue__no{font-size:0.84rem;letter-spacing:0.18em;color:var(--cream-dim)}
.catalogue__title{font-family:var(--display);font-size:clamp(1.3rem,3.2vw,2.2rem);line-height:1.05;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalogue__title em{font-style:normal;color:var(--ruby-hot)}
.catalogue__credit{font-size:0.9rem;color:var(--cream-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalogue__len{font-size:0.9rem;letter-spacing:0.1em;color:var(--cream-dim);text-align:right;font-variant-numeric:tabular-nums}
.catalogue__own{font-size:0.84rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ruby-hot);text-align:right;white-space:nowrap}
.catalogue__row:hover .catalogue__own{color:var(--cream)}
.catalogue__row--soon .catalogue__title,.catalogue__row--soon .catalogue__credit{opacity:0.5}
.catalogue__note{margin-top:1.4rem;font-size:0.9rem;color:var(--cream-dim)}
@media (max-width:720px){.catalogue__row a{grid-template-columns:2.2rem minmax(0,1fr) 3.4rem;row-gap:0.25rem}.catalogue__rowinner{grid-template-columns:2.2rem minmax(0,1fr) 3.4rem;row-gap:0.25rem}
.catalogue__credit{grid-column:2;grid-row:2}
.catalogue__own{display:none}
}
.sysid{margin-top:clamp(2rem,4vw,3rem)}
.sysid__title{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.4rem);text-transform:uppercase;margin-bottom:1.6rem}
.sysid__cols{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))}
.sysid__card{border:1px solid rgba(244,239,230,0.12);border-radius:10px;padding:clamp(1rem,2.6vw,1.7rem);background:var(--ink-2)}
.sysid__who{font-size:0.84rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:1rem}
.sysid__sub{color:var(--cream-dim);font-size:0.9rem;line-height:1.6;max-width:60ch;margin-bottom:1.4rem}
.sysid__badges{display:flex;flex-wrap:wrap;gap:0.7rem 1rem;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(244,239,230,0.14)}
.sysid__badge{position:relative;display:flex;align-items:center;gap:0.55rem;text-decoration:none;color:var(--cream);transition:transform 0.2s ease}
.sysid__badge .mbadge{width:2.4em;flex:none;transition:transform 0.2s ease}
.sysid__badge b{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:400;line-height:1.25}
.sysid__badge:hover{transform:translateY(-2px)}
.sysid__badge:hover .mbadge{transform:scale(1.12);filter:drop-shadow(0 0 12px rgba(255,255,255,0.5))}
.sysid__badge:hover b{color:var(--ruby-hot)}
.sysid__tip{position:absolute;bottom:calc(100% + 0.6rem);left:0;width:max(14rem,100%);max-width:20rem;z-index:20;background:rgba(10,8,7,0.97);color:var(--cream-dim);border:1px solid rgba(229,56,59,0.5);border-radius:10px;padding:0.7rem 0.85rem;font-size:0.84rem;letter-spacing:0;text-transform:none;line-height:1.5;box-shadow:0 14px 34px rgba(0,0,0,0.55);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;pointer-events:none}
.sysid__tip em{display:block;margin-top:0.4rem;color:var(--ruby-hot);font-style:normal;letter-spacing:0.1em;text-transform:uppercase;font-size:0.72rem}
.sysid__badge:hover .sysid__tip,.sysid__badge:focus-visible .sysid__tip{opacity:1;visibility:visible;transform:translateY(0)}
.sysid__item{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.45rem 0.3rem;border-bottom:1px dashed rgba(244,239,230,0.1);cursor:pointer;transition:background 0.2s ease}
.sysid__item:last-child{border-bottom:0}
.sysid__item:hover{background:rgba(193,18,31,0.1)}
.sysid__item dd{font-size:0.84rem;color:var(--cream-dim);white-space:nowrap}
.sysid__item code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:0.9rem;letter-spacing:0.04em;overflow-wrap:anywhere;text-align:right}
.sysid__item.is-copied code{color:var(--ruby-hot)}
.sysid__hint{margin-top:0.9rem;font-size:0.84rem;color:var(--cream-dim)}
.command__sticky::after,.hero__sticky::after,.songblock__sticky::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(
46rem circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,240,219,0.09),transparent 62%
);opacity:var(--spot-o,0);mix-blend-mode:screen}
.stat__book{display:inline-block;margin-top:0.9rem;font-size:0.9rem;letter-spacing:0.04em;color:var(--ruby-hot);border-bottom:1px solid var(--ruby)}
.stat__book.is-pending{opacity:0.55}
.songblock{height:300vh;position:relative}
.songblock__line{transition:color 0.3s ease}
.songblock__line.is-now{color:var(--ruby-hot)}
.songblock--short{height:160vh}
.songblock__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.songblock__lyrics{position:absolute;z-index:3;left:clamp(1.2rem,5vw,4rem);right:clamp(1.2rem,5vw,4rem);bottom:clamp(2.5rem,9vh,5rem);max-width:62rem}
.songblock__tag{font-size:0.78rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:1rem}
.songblock__line{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4.6vw,3.8rem);line-height:1.04;text-transform:uppercase;color:var(--cream);will-change:transform,opacity}
.songblock__say{margin-top:1.1rem;max-width:48ch;color:var(--cream);font-size:clamp(1rem,2.4vw,1.22rem);line-height:1.55;text-transform:none;font-family:inherit;font-weight:500}
.songblock__say--dim{margin-top:1rem;font-size:0.95rem;color:var(--cream-dim)}
.songblock__markers--wide{margin-top:1.3rem}
.songbuy{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem;background:radial-gradient(ellipse at 50% 120%,rgba(193,18,31,0.22),transparent 60%),var(--ink)}
.songbuy__title{font-family:var(--display);font-weight:400;font-size:clamp(3rem,12vw,9rem);line-height:0.9;text-transform:uppercase;margin:1rem 0 2.4rem}
.songblock__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.songblock__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0807}
@media (min-width: 720.02px) { .stats__grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.hud__reel { display: revert; }
@media (max-width:560px){.site-head{padding:0.85rem 0.9rem}
.site-head__nav{gap:0.55rem}
.brand{font-size:1.12rem}
.sound-toggle{font-size:0.78rem;letter-spacing:0.16em;padding:0.5em 0.95em;white-space:nowrap}
.head-cta{font-size:0.78rem;letter-spacing:0.16em;padding:0.5em 0.95em;white-space:nowrap}
.hud__reel{display:none}
.command__count{bottom:auto;top:5.2rem;font-size:1rem}
.song-gate{width:2.9rem;height:2.9rem}
}
.mbadge{--badge-c:var(--ruby-hot);position:relative;display:inline-block;width:2.6em;aspect-ratio:1;flex:none}
.mbadge::before{content:"";position:absolute;inset:0;background:var(--badge-c);-webkit-mask:url("../assets/img/seal.svg") center / contain no-repeat;mask:url("../assets/img/seal.svg") center / contain no-repeat;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.55))}
.mbadge img{position:absolute;inset:26%;width:48%;height:48%;object-fit:contain;filter:brightness(0) invert(1)}
.mbadge--lg{width:4.2em}
.verify{padding:clamp(7rem,12vw,9rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6rem);max-width:68rem;margin:0 auto}
.verify__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));margin:2rem 0}
.entity-card{display:flex;align-items:center;gap:0.9rem;text-align:left;border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);color:var(--cream);padding:1rem 1.1rem;cursor:pointer;font-family:var(--body);font-size:0.95rem;transition:border-color 0.25s ease,transform 0.25s ease}
.entity-card:hover{transform:translateY(-2px);border-color:var(--badge-c)}
.entity-card.is-active{border-color:var(--badge-c);box-shadow:0 0 0 1px var(--badge-c),0 12px 30px rgba(0,0,0,0.35)}
.entity-card__name{font-weight:700;display:block}
.entity-card__desc{font-size:0.84rem;color:var(--cream-dim);display:block;margin-top:0.15rem}
.vform{margin-top:1.5rem}
.vform__badgehead{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.vform__badgename{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;letter-spacing:0.04em}
.vform fieldset{border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:clamp(1rem,2.6vw,1.6rem);margin-bottom:1.2rem}
.vform legend{padding:0 0.6em;font-size:0.84rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot)}
.vform__row{display:grid;gap:0.35rem;margin-bottom:0.9rem}
.vform__row:last-child{margin-bottom:0}
.vform label{font-size:0.9rem;color:var(--cream-dim)}
.vform label .req{color:var(--ruby-hot)}
.vform label a{color:var(--ruby-hot);border-bottom:1px solid var(--ruby)}
.vform input:focus,.vform select:focus,.vform textarea:focus{outline:2px solid var(--ruby);outline-offset:1px}
.vform input:invalid:not(:placeholder-shown){border-color:var(--ruby-hot)}
.vform__hint{font-size:0.84rem;color:var(--cream-dim)}
.vform__error{color:var(--ruby-hot);font-size:0.9rem;margin-top:0.8rem;display:none}
.vform.show-errors .vform__error{display:block}
.idcards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));margin-top:2rem}
.idcard{border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:clamp(1rem,2.4vw,1.5rem)}
.idcard h3{font-family:var(--display);font-size:1.25rem;letter-spacing:0.03em;text-transform:uppercase}
.idcard__long{font-size:0.84rem;color:var(--ruby-hot);letter-spacing:0.06em;margin-bottom:0.6rem}
.idcard p{font-size:0.88rem;color:var(--cream-dim)}
.idcard__meta{margin-top:0.8rem;font-size:0.84rem;color:var(--cream-dim)}
.idcard__meta code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--cream)}
.idcard__meta a{color:var(--ruby-hot);border-bottom:1px solid var(--ruby)}
.badge-legend{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin:1.6rem 0}
.badge-legend__item{display:flex;align-items:center;gap:0.6rem;font-size:0.9rem;color:var(--cream-dim)}
.chat{max-width:46rem;margin:0 auto;padding:clamp(6.5rem,11vw,8.5rem) 1.2rem 6rem}
.chat__progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:195;background:rgba(244,239,230,0.08)}
.chat__progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ruby),var(--ruby-hot));transition:width 0.4s ease}
.chat__log{display:flex;flex-direction:column;gap:0.9rem;margin-bottom:1.4rem}
.chat__msg{max-width:85%;padding:0.8em 1.1em;border-radius:14px;font-size:0.95rem;line-height:1.45}
.chat__msg--q{align-self:flex-start;background:var(--ink-2);border:1px solid rgba(244,239,230,0.12);border-bottom-left-radius:4px}
.chat__msg--q .chat__group{display:block;font-size:0.78rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.3rem}
.chat__msg--a{align-self:flex-end;background:var(--ruby);border-bottom-right-radius:4px;color:#fff}
.chat__msg--a .chat__edit{display:inline-block;margin-left:0.6em;font-size:0.84rem;opacity:0.75;border-bottom:1px solid rgba(255,255,255,0.5);cursor:pointer}
.chat__input{display:flex;flex-direction:column;gap:0.7rem}
.chat__chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.chat__chip{border:1px solid rgba(244,239,230,0.25);border-radius:100px;background:none;color:var(--cream);cursor:pointer;padding:0.55em 1.1em;font-family:var(--body);font-size:0.9rem;transition:border-color 0.2s,background 0.2s}
.chat__chip:hover{border-color:var(--ruby-hot)}
.chat__chip.is-picked{background:var(--ruby);border-color:var(--ruby);color:#fff}
.chat__free{display:flex;gap:0.5rem}
.chat__free input,.chat__free textarea{flex:1;background:var(--ink-2);color:var(--cream);border:1px solid rgba(244,239,230,0.2);border-radius:10px;padding:0.75em 0.9em;font-family:var(--body);font-size:1rem}
.chat__free input:focus,.chat__free textarea:focus{outline:2px solid var(--ruby)}
.chat__mic{flex:none;width:2.9rem;border-radius:10px;cursor:pointer;border:1px solid rgba(244,239,230,0.2);background:var(--ink-2);color:var(--cream);font-size:1.1rem}
.chat__mic.is-live{background:var(--ruby);border-color:var(--ruby-hot);animation:loadFlash 0.6s steps(2) infinite}
.chat__actions{display:flex;align-items:center;gap:1rem}
.chat__skip,.chat__back{font-size:0.84rem;color:var(--cream-dim);border-bottom:1px dashed rgba(244,239,230,0.3);cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font-family:var(--body);padding:0}
.chat__hint{font-size:0.84rem;color:var(--cream-dim)}
.chat__review{border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:1.2rem}
.chat__review h3{font-family:var(--display);text-transform:uppercase;margin-bottom:0.8rem}
.chat__review dl{display:grid;grid-template-columns:minmax(9rem,auto) minmax(0,1fr);gap:0.35rem 1rem;font-size:0.9rem}
.chat__review dt{color:var(--cream-dim)}
.chat__review dd{overflow-wrap:anywhere}
.term{--tg:#7ce38b;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.term .chat__msg--q{background:#05070a;border-color:rgba(124,227,139,0.25);color:var(--tg)}
.term .chat__msg--q .chat__group{color:var(--ruby-hot)}
.term .chat__msg--q::before{content:"> ";color:var(--ruby-hot)}
.term .chat__msg--a{background:#101d13;border:1px solid rgba(124,227,139,0.35);color:#d9ffe0}
.term .chat__chip{border-color:rgba(124,227,139,0.35);color:var(--tg);font-family:inherit}
.term .chat__chip.is-picked,.term .chat__chip:hover{border-color:var(--tg)}
.term .chat__chip.is-picked{background:rgba(124,227,139,0.16);color:#d9ffe0}
.term .chat__free input,.term .chat__free textarea{background:#05070a;border-color:rgba(124,227,139,0.3);color:var(--tg);font-family:inherit;caret-color:var(--tg)}
.term .chat__review{background:#05070a;border-color:rgba(124,227,139,0.25);color:var(--tg)}
.manifesto{max-width:46rem;margin:0 auto;padding:clamp(7rem,12vw,9rem) 1.2rem 0}
.manifesto__title{font-family:var(--display);font-size:clamp(2.6rem,9vw,5rem);text-transform:uppercase;line-height:0.95}
.manifesto__title em{font-style:normal;color:var(--ruby-hot)}
.manifesto p{margin-top:1.1rem;color:var(--cream-dim);font-size:1rem;line-height:1.65}
.manifesto p strong{color:var(--cream)}
.manifesto__rule{margin-top:2rem;border:0;border-top:1px dashed rgba(124,227,139,0.35)}
.manifesto__boot{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#7ce38b;font-size:0.9rem;letter-spacing:0.06em;margin-top:1.6rem}
.manifesto__boot::after{content:"";display:inline-block;width:.45em;height:1em;background:currentColor;vertical-align:-0.14em;margin-left:.1em;animation:loadFlash 1s steps(2) infinite}
.panel-fx--photo .command__pitch{position:relative}
.panel-fx--photo .command__pitch::after{content:"";position:absolute;inset:-0.6rem -0.8rem;background:radial-gradient(closest-side,rgba(255,255,255,0.95),transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen;animation:fxFlash 4.6s ease-out infinite}
@keyframes fxFlash{0%,88%,100%{opacity:0}
90%{opacity:0.85}
93%{opacity:0.1}
95%{opacity:0.35}
}
.panel-fx--photo:hover .command__pitch::after{animation-duration:1.4s}
.vf-link{position:relative;display:inline-block;margin-top:0.5rem;padding:0.3em 0.8em;color:var(--cream);white-space:nowrap}
.vf-link i{position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--ruby-hot),var(--ruby-hot)) top left / 12px 2px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) top left / 2px 12px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) top right / 12px 2px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) top right / 2px 12px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) bottom left / 12px 2px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) bottom left / 2px 12px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) bottom right / 12px 2px,linear-gradient(var(--ruby-hot),var(--ruby-hot)) bottom right / 2px 12px;background-repeat:no-repeat;animation:fxFocus 2.6s ease-in-out infinite}
@keyframes fxFocus{0%,100%{transform:scale(1.14);opacity:0.45}
50%{transform:scale(1);opacity:1}
}
.vf-link:hover i{animation-duration:0.9s}
.rec-dot{display:inline-block;width:0.55em;height:0.55em;border-radius:50%;background:var(--ruby-hot);margin-right:0.55em;vertical-align:0.05em;animation:loadFlash 1.1s steps(2) infinite}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:0.95em;margin:0 0.5em 0 0.1em;vertical-align:-0.12em}
.eq i{width:3px;background:var(--ruby-hot);border-radius:1px;animation:fxEq 0.9s ease-in-out infinite alternate}
.eq i:nth-child(1){height:45%;animation-delay:0s}
.eq i:nth-child(2){height:90%;animation-delay:0.12s}
.eq i:nth-child(3){height:60%;animation-delay:0.24s}
.eq i:nth-child(4){height:100%;animation-delay:0.06s}
.eq i:nth-child(5){height:70%;animation-delay:0.18s}
@keyframes fxEq{from{transform:scaleY(0.3)} to{transform:scaleY(1)} }
.panel-fx--sound:hover .eq i{animation-duration:0.35s}
.eq-link{color:var(--cream);white-space:nowrap;background:linear-gradient(90deg,var(--ruby-hot) 0 2px,transparent 2px 6px) repeat-x bottom / 6px 2px;padding-bottom:0.25em;animation:fxTape 1.2s linear infinite}
@keyframes fxTape{from{background-position-x:0} to{background-position-x:6px} }
.live-bug{display:inline-block;background:var(--ruby);color:#fff;font-size:0.66em;letter-spacing:0.22em;font-weight:700;border-radius:4px;padding:0.25em 0.6em;vertical-align:0.15em;animation:loadFlash 0.9s steps(2) infinite;text-decoration:none;cursor:pointer;transition:box-shadow 0.25s}
.live-bug:hover{box-shadow:0 0 16px rgba(229,56,59,0.7)}
.glitch-text{position:relative;display:inline}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.glitch-text::before{color:#29e3ff;transform:translate(-2px,-1px)}
.glitch-text::after{color:var(--ruby-hot);transform:translate(2px,1px)}
.panel-fx--live .glitch-text::before{animation:fxGlitch 3.4s steps(1) infinite}
.panel-fx--live .glitch-text::after{animation:fxGlitch 3.4s steps(1) infinite 0.05s}
@keyframes fxGlitch{0%,87%,94%,100%{opacity:0;clip-path:none}
88%{opacity:0.8;clip-path:inset(10% 0 55% 0)}
90%{opacity:0.8;clip-path:inset(60% 0 15% 0)}
92%{opacity:0.8;clip-path:inset(30% 0 35% 0)}
}
.panel-fx--live:hover .glitch-text::before,.panel-fx--live:hover .glitch-text::after{animation-duration:0.7s}
.live-link{display:inline-block;margin-top:0.55rem;background:var(--ruby);color:#fff;font-weight:700;letter-spacing:0.14em;white-space:nowrap;border-radius:6px;padding:0.45em 1em;box-shadow:0 0 18px rgba(229,56,59,0.55);animation:fxJolt 3.4s linear infinite}
@keyframes fxJolt{0%,86%,96%,100%{transform:translate(0,0)}
88%{transform:translate(-2px,1px)}
90%{transform:translate(2px,-1px)}
92%{transform:translate(-1px,-1px)}
94%{transform:translate(1px,1px)}
}
.live-link:hover{background:var(--ruby-hot)}
@media (prefers-reduced-motion:reduce){.panel-fx--photo .command__pitch::after,.vf-link i,.eq i,.eq-link,.rec-dot,.live-bug,.glitch-text::before,.glitch-text::after,.live-link{animation:none}
}
.net--photo{overflow:clip}
.net--photo .section-title{position:relative}
.net--photo .section-title::after{content:"";position:absolute;inset:-1rem -2rem;background:radial-gradient(closest-side,rgba(255,255,255,0.9),transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen;animation:fxFlash 5s ease-out infinite}
.net--sound .section-title{border-left:4px solid var(--ruby-hot);padding-left:0.4em;animation:fxMeterEdge 1.1s ease-in-out infinite alternate}
@keyframes fxMeterEdge{from{border-color:var(--ruby)} to{border-color:var(--ruby-hot)} }
@media (prefers-reduced-motion:reduce){.net--photo .section-title::after,.net--sound .section-title{animation:none} }
.psy{font-style:normal;cursor:pointer;background:linear-gradient(90deg,var(--ruby-hot),var(--cream),var(--ruby-hot)) 0 100% / 200% 2px no-repeat;padding-bottom:0.06em;animation:psyShimmer 2.8s linear infinite;transition:color 0.25s ease}
.psy::after{content:"?";display:inline-block;font-size:0.45em;vertical-align:super;margin-left:0.25em;width:1.5em;height:1.5em;line-height:1.55em;text-align:center;border:1px solid var(--ruby-hot);border-radius:50%;color:var(--ruby-hot);animation:psyPing 2.8s ease-in-out infinite}
@keyframes psyShimmer{from{background-position-x:200%} to{background-position-x:0%} }
@keyframes psyPing{0%,100%{transform:scale(1);opacity:0.7} 50%{transform:scale(1.25);opacity:1} }
.psy:hover{color:var(--ruby-hot)}
.psycard{position:fixed;z-index:170;right:clamp(0.8rem,3vw,2rem);top:calc(4.2rem + env(safe-area-inset-top));width:min(16.5rem,calc(100vw - 1.6rem));background:rgba(10,8,7,0.96);border:1px solid rgba(229,56,59,0.5);border-radius:14px;padding:0.9rem 1rem;box-shadow:0 18px 50px rgba(0,0,0,0.6),0 0 24px rgba(193,18,31,0.25);transform:translateY(16px);opacity:0;visibility:hidden;transition:transform 0.3s ease,opacity 0.3s ease,visibility 0.3s}
.psycard.is-open{transform:none;opacity:1;visibility:visible}
.psycard__x{position:absolute;top:0.5rem;right:0.7rem;background:none;border:0;color:var(--cream-dim);font-size:1.3rem;cursor:pointer;line-height:1}
.psycard__kicker{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.3rem}
.psycard h4{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.4rem}
.psycard__body{font-size:0.84rem;color:var(--cream-dim);line-height:1.5}
.psycard__quiz{margin-top:0.8rem;border-top:1px dashed rgba(244,239,230,0.18);padding-top:0.8rem}
.psycard__quiz p{font-size:0.9rem;margin-bottom:0.55rem}
.psycard__opts{display:flex;flex-wrap:wrap;gap:0.45rem}
.psycard__opts .chat__chip{font-size:0.84rem;padding:0.45em 0.95em}
.psycard__resp{color:var(--ruby-hot);font-size:0.9rem}
.psycard__foot{margin-top:0.7rem;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,239,230,0.7)}
.sound-toggle:not(.is-on):not(.was-used){position:relative;animation:sndNudge 3.2s ease-in-out infinite}
.sound-toggle:not(.is-on):not(.was-used)::after{content:"";position:absolute;inset:-3px;border:1px solid var(--ruby-hot);border-radius:100px;animation:sndRing 1.8s ease-out infinite;pointer-events:none}
.sound-toggle:not(.is-on):not(.was-used) .sound-toggle__dot{background:var(--ruby-hot);animation:loadFlash 1.2s steps(2) infinite}
@keyframes sndRing{from{transform:scale(1);opacity:0.9} to{transform:scale(1.45);opacity:0} }
@keyframes sndNudge{0%,90%,100%{transform:rotate(0)} 92%{transform:rotate(-2.5deg)} 95%{transform:rotate(2.5deg)} 97%{transform:rotate(-1.5deg)} }
.sound-toggle__tip{position:absolute;top:calc(100% + 0.45rem);left:50%;transform:translateX(-50%);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ruby-hot);white-space:nowrap;opacity:0;pointer-events:none}
.sound-toggle:not(.is-on):not(.was-used){position:relative}
.sound-toggle:not(.is-on):not(.was-used) .sound-toggle__tip{animation:sndTip 3.2s ease-in-out infinite}
@keyframes sndTip{0%,12%,100%{opacity:0;transform:translate(-50%,-3px)} 25%,80%{opacity:1;transform:translate(-50%,0)} }
/* ONE ASK, ONE VOICE. js/volumecall.js raises a "Turn your volume up" card
   in the same corner as the Sound pill, whose own hint pulses "Tap for
   sound" on a loop. Two prompts, one action, one viewport. While the card
   is up the pill's hint stands down; it returns the moment the card goes. */
html.volcall-on .sound-toggle__tip{animation:none !important;opacity:0 !important}

/* ONE DOMINANT JOB OWNS THE FIRST VIEWPORT (HERE Brand Library, rule 1).
   The masthead's page action is a real door on every deep page, but on a
   page that opens with a hero it was a third button competing with the two
   hero doors before the visitor had read the name. It now waits out the
   hero and arrives as the hero leaves. Pages with no hero are unaffected. */
.mh__cta{transition:opacity .32s ease,transform .32s ease}
html.hero-hold .mh__cta{opacity:0;transform:translateY(.7rem);pointer-events:none}
@media (prefers-reduced-motion:reduce){.mh__cta{transition:none}}

@media (prefers-reduced-motion:reduce){.psy,.psy::after,.sound-toggle::after,.sound-toggle,.sound-toggle__tip{animation:none !important}
.sound-toggle:not(.is-on):not(.was-used) .sound-toggle__tip{opacity:1}
}
.command__punch{font-family:var(--display);font-size:clamp(1.3rem,3vw,2rem);letter-spacing:0.1em;text-transform:uppercase;color:var(--ruby-hot);animation:punchPulse 2.4s ease-in-out infinite;display:inline-block}
@keyframes punchPulse{0%,100%{transform:scale(1);text-shadow:none} 50%{transform:scale(1.04);text-shadow:0 0 18px rgba(229,56,59,0.55)} }
@media (prefers-reduced-motion:reduce){.command__punch{animation:none} }
.command__link--mystery{font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:0.06em;text-transform:uppercase;border-bottom-style:dashed;animation:psyShimmer 2.8s linear infinite;background:linear-gradient(90deg,var(--ruby-hot),var(--cream),var(--ruby-hot)) 0 100% / 200% 1px no-repeat}
@media (prefers-reduced-motion:reduce){.command__tag--punch,.command__link--mystery{animation:none} }
.bio{background:var(--ink);position:relative;padding:clamp(3rem,7vh,5rem) clamp(1.2rem,5vw,4rem)}
.bio__inner{max-width:62rem;margin:0 auto}
.bio__name{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,6.5vw,4.6rem);text-transform:uppercase;line-height:0.95;margin-top:0.5rem}
.bio__lede{margin-top:0.7rem;font-family:var(--display);font-size:clamp(1rem,2.2vw,1.4rem);letter-spacing:0.1em;text-transform:uppercase;color:var(--ruby-hot)}
.bio__body{margin-top:0.9rem;color:var(--cream-dim);font-size:0.96rem;line-height:1.75;max-width:62ch}
.bio__body em{color:var(--cream);font-style:italic}
.bio__body .proof{color:var(--cream);text-decoration:none;background-repeat:no-repeat;background-position:0 100%;background-size:100% 1.5px;padding-bottom:2px;transition:color 0.45s ease,background-size 0.45s ease;cursor:pointer}
.bio__body .proof:hover{color:#fff;background-size:100% 2.5px}
@media (prefers-reduced-motion:no-preference){.proof--1{background-image:linear-gradient(90deg,var(--ruby),var(--cream),var(--ruby));background-size:220% 1.5px;animation:proof1 9s linear infinite}
@keyframes proof1{to{background-position:-220% 100%} }
.proof--2{background-image:linear-gradient(90deg,transparent 15%,#d4a017,transparent 85%);background-size:240% 1.5px;animation:proof2 12s linear infinite}
@keyframes proof2{from{background-position:140% 100%} to{background-position:-140% 100%} }
.proof--3{background-image:linear-gradient(90deg,#4a7fb5,#4a7fb5);animation:proof3 7.5s ease-in-out infinite}
@keyframes proof3{0%,100%{text-shadow:none} 50%{text-shadow:0 0 7px rgba(74,127,181,0.4)} }
.proof--4{background-image:linear-gradient(90deg,transparent 12%,#8b5cf6,var(--cream),transparent 88%);background-size:260% 1.5px;animation:proof4 14s linear infinite}
@keyframes proof4{from{background-position:-160% 100%} to{background-position:160% 100%} }
.proof--5{background-image:linear-gradient(90deg,var(--ruby),#2aa8a0,var(--ruby));background-size:220% 1.5px;animation:proof5 16s ease-in-out infinite alternate}
@keyframes proof5{to{background-position:220% 100%} }
.proof--6{background-image:linear-gradient(90deg,rgba(229,56,59,0),rgba(229,56,59,0.16),rgba(229,56,59,0));background-size:240% 100%;padding:0 0.15em 2px;border-radius:3px;animation:proof6 10s linear infinite}
@keyframes proof6{to{background-position:-240% 0} }
}
@media (prefers-reduced-motion:reduce){.bio__body .proof{background-image:linear-gradient(90deg,var(--ruby),var(--ruby))}
}
.bio__grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr));margin-top:1.6rem;align-items:start}
.bio__h{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--ruby-hot);margin:1.1rem 0 0.6rem}
.bio__grid .bio__h:first-child{margin-top:0}
.bio__ledger--stack{flex-direction:column;margin-top:0}
.bio__ledger--stack li{flex:none}
.bio__achv{list-style:none;display:flex;flex-wrap:wrap;gap:0.45rem}
.bio__achv li{font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;border:1px solid var(--ruby);border-radius:100px;padding:0;color:var(--cream);background:rgba(193,18,31,0.12);transition:background 0.2s ease}
.bio__achv li{padding:0.45em 1em}
.bio__achv li:has(a){padding:0}
.bio__achv a{display:block;padding:0.45em 1em;color:var(--cream);text-decoration:none}
.bio__achv li:hover:has(a){background:var(--ruby)}
.bio__achv a:hover{color:var(--cream)}
.bio__stats{border:1px solid rgba(244,239,230,0.14);border-radius:14px;background:var(--ink-2);padding:1.3rem 1.4rem}
.bio__stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.2rem 0.7rem;align-items:center;margin-bottom:0.75rem}
.bio__stat span{font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim);grid-column:1}
.bio__stat em{font-family:var(--display);font-style:normal;font-size:1.05rem;color:var(--ruby-hot);grid-column:2;grid-row:1 / 3;align-self:center}
.bio__stat i{grid-column:1;display:block;height:8px;border-radius:100px;background:rgba(244,239,230,0.1);overflow:hidden}
.bio__stat b{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--ruby),var(--ruby-hot));box-shadow:0 0 10px rgba(229,56,59,0.55);transition:width 1.1s cubic-bezier(0.22,1,0.36,1)}
.bio__stats.is-on .bio__stat b{width:var(--v)}
.bio__stats.is-on .bio__stat:nth-child(2) b{transition-delay:0.05s}
.bio__stats.is-on .bio__stat:nth-child(3) b{transition-delay:0.1s}
.bio__stats.is-on .bio__stat:nth-child(4) b{transition-delay:0.15s}
.bio__stats.is-on .bio__stat:nth-child(5) b{transition-delay:0.2s}
.bio__stats.is-on .bio__stat:nth-child(6) b{transition-delay:0.25s}
.bio__stats.is-on .bio__stat:nth-child(7) b{transition-delay:0.3s}
.bio__stats.is-on .bio__stat:nth-child(8) b{transition-delay:0.35s}
.bio__stats.is-on .bio__stat:nth-child(9) b{transition-delay:0.4s}
@media (prefers-reduced-motion:reduce){.bio__stat b{transition:none} }
.bio__class{margin-top:1.1rem;font-size:0.84rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-dim);line-height:1.9}
.bio__ledger{list-style:none;display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2rem}
.bio__ledger li{border:1px solid rgba(244,239,230,0.14);border-left:3px solid var(--ruby-hot);border-radius:10px;background:var(--ink-2);padding:0.9rem 1.1rem;flex:1 1 15rem}
.bio__ledger b{display:block;font-family:var(--display);font-weight:400;letter-spacing:0.06em;text-transform:uppercase;font-size:1rem}
.bio__ledger span{display:block;margin-top:0.3rem;color:var(--cream-dim);font-size:0.84rem;letter-spacing:0.08em}
.bio__ledger--stack{gap:0.35rem}
.bio__ledger--stack li{padding:0.4rem 0.75rem;border-radius:7px;border-top:0;border-right:0;border-bottom:0;background:none}
.bio__ledger--stack b{font-size:0.84rem}
.bio__ledger--stack span{margin-top:0.1rem;font-size:0.78rem}
.bio__timeline{list-style:none;margin:0;padding:0;border-left:2px solid rgba(229,56,59,0.5)}
.bio__timeline li{position:relative}
.bio__timeline a{display:block;text-decoration:none;color:var(--cream);padding:0.5rem 0.5rem 0.7rem 1.1rem;position:relative;transition:background 0.2s ease,padding-left 0.2s ease;border-radius:0 8px 8px 0}
.bio__timeline a:hover{background:rgba(193,18,31,0.08);padding-left:1.35rem}
.bio__tldot{position:absolute;left:-7px;top:0.85rem;width:11px;height:11px;border-radius:50%;background:var(--ink);border:2px solid var(--ruby-hot);transition:background 0.2s ease,box-shadow 0.2s ease}
.bio__timeline a:hover .bio__tldot{background:var(--ruby-hot);box-shadow:0 0 12px rgba(229,56,59,0.9)}
@keyframes tlFlashWhite{0%,88%,100%{box-shadow:0 0 0 rgba(255,255,255,0);border-color:var(--ruby-hot)}
94%{box-shadow:0 0 14px 3px rgba(255,255,255,0.95);border-color:#fff;background:#fff}
}
.bio__timeline .bio__tldot{animation:tlFlashWhite 5.5s ease-in-out infinite}
.bio__timeline li:nth-child(1) .bio__tldot{animation-delay:0s}
.bio__timeline li:nth-child(2) .bio__tldot{animation-delay:0.28s}
.bio__timeline li:nth-child(3) .bio__tldot{animation-delay:0.56s}
.bio__timeline li:nth-child(4) .bio__tldot{animation-delay:0.84s}
.bio__timeline li:nth-child(5) .bio__tldot{animation-delay:1.12s}
.bio__timeline li:nth-child(6) .bio__tldot{animation-delay:1.4s}
.bio__timeline li:nth-child(7) .bio__tldot{animation-delay:1.68s}
.bio__timeline li:nth-child(8) .bio__tldot{animation-delay:1.96s}
.bio__timeline li:nth-child(9) .bio__tldot{animation-delay:2.24s}
.bio__timeline li:nth-child(10) .bio__tldot{animation-delay:2.52s}
.bio__timeline li:nth-child(11) .bio__tldot{animation-delay:2.8s}
.bio__timeline li:nth-child(12) .bio__tldot{animation-delay:3.08s}
.bio__timeline li:nth-child(13) .bio__tldot{animation-delay:3.36s}
.bio__timeline li:nth-child(14) .bio__tldot{animation-delay:3.64s}
.bio__timeline a:hover .bio__tldot{animation:none}
@media (prefers-reduced-motion:reduce){.bio__timeline .bio__tldot{animation:none} }
.bio__timeline b{display:block;font-family:var(--display);font-weight:400;letter-spacing:0.04em;text-transform:uppercase;font-size:0.9rem;line-height:1.2}
.bio__tlorg{display:block;margin-top:0.15rem;color:var(--cream-dim);font-size:0.78rem;letter-spacing:0.08em}
.bio__tlgo{display:block;margin-top:0.3rem;font-style:normal;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ruby-hot);opacity:0;transition:opacity 0.2s ease}
.bio__timeline a:hover .bio__tlgo,.bio__timeline a:focus-visible .bio__tlgo{opacity:1}
@media (hover:none){.bio__tlgo{opacity:1} }
.command__logo--transparent{background:transparent;padding:0;border-radius:0}
.eu-portals{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;margin-top:1rem;max-width:46rem;pointer-events:auto}
.eu-portal{display:inline-flex;align-items:center;gap:0.55em;text-decoration:none;color:var(--cream);font-family:var(--display);font-weight:400;font-size:clamp(1rem,2.6vw,1.35rem);letter-spacing:0.03em;text-transform:uppercase;text-shadow:0 0 12px rgba(229,56,59,0.55),0 0 26px rgba(229,56,59,0.28);transition:color 0.25s,text-shadow 0.25s,transform 0.25s;animation:euPortalGlow 2.2s ease-in-out infinite}
.eu-portal--safe{flex-direction:row-reverse}
.eu-portal:hover{color:#fff;text-shadow:0 0 20px rgba(229,56,59,0.95),0 0 40px rgba(229,56,59,0.5);transform:scale(1.04)}
.eu-portal__ic{width:clamp(1.7rem,5.5vw,2.4rem);height:clamp(1.7rem,5.5vw,2.4rem);color:var(--ruby-hot);flex:none;filter:drop-shadow(0 0 6px rgba(229,56,59,0.85));animation:euPortalFlash 1.3s steps(1,end) infinite}
.eu-portal--safe .eu-portal__ic{animation-delay:0.65s}
@keyframes euPortalFlash{0%,54%{opacity:1;filter:drop-shadow(0 0 9px rgba(229,56,59,0.95))}
55%,100%{opacity:0.4;filter:drop-shadow(0 0 2px rgba(229,56,59,0.35))}
}
@keyframes euPortalGlow{0%,100%{text-shadow:0 0 12px rgba(229,56,59,0.5),0 0 26px rgba(229,56,59,0.22)}
50%{text-shadow:0 0 18px rgba(229,56,59,0.9),0 0 38px rgba(229,56,59,0.45)}
}
@media (prefers-reduced-motion:reduce){.eu-portal,.eu-portal__ic{animation:none}
}
.eu-ctas{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.9rem;pointer-events:auto}
.eu-ctas a{font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim);border:1px solid rgba(244,239,230,0.22);border-radius:100px;padding:0.45em 1em;transition:color 0.25s,border-color 0.25s,background 0.25s}
.eu-ctas a:hover{color:var(--cream);border-color:var(--ruby);background:rgba(193,18,31,0.18)}
.mbadge-set{display:flex;flex-wrap:wrap;gap:0.55rem 0.7rem;margin-top:1rem;max-width:34rem;pointer-events:auto}
.mbadge-set:empty{display:none}
.mbadge-set .mbadge-chip{display:flex;flex-direction:column;align-items:center;gap:0.35rem;width:4.4rem;padding:0.2rem 0;text-align:center;text-decoration:none;opacity:0;transform:translateY(12px);transition:transform 0.25s ease}
.mbadge-set .mbadge-chip .mbadge{width:2.7em}
.mbadge-set .mbadge-chip small{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-dim);line-height:1.3}
.mbadge-set .mbadge-chip--org{width:7.2rem}
.mbadge-set .mbadge-chip--org .mbadge{width:3.2em}
.mbadge-set .mbadge-chip--org small{font-size:0.72rem}
.command__panel.is-active .mbadge-chip .mbadge{animation:badgeBreathe 6s ease-in-out infinite}
.command__panel.is-active .mbadge-chip:nth-child(2n) .mbadge{animation-delay:1.5s}
.command__panel.is-active .mbadge-chip:nth-child(3n) .mbadge{animation-delay:3s}
.command__panel.is-active .mbadge-chip:nth-child(5n) .mbadge{animation-delay:4.5s}
@keyframes badgeBreathe{0%,88%,100%{transform:scale(1)} 94%{transform:scale(1.14)} }
.mbadge-set .mbadge-chip:hover{transform:translateY(-3px) scale(1.12)}
.mbadge-set .mbadge-chip:hover small{color:var(--cream)}
.command__panel.is-active .mbadge-chip{animation:badgeRise 0.5s ease forwards}
.command__panel.is-active .mbadge-chip .mbadge::before{animation:badgeSealFlash 0.9s ease 1}
.command__panel.is-active .mbadge-chip:nth-child(1){animation-delay:0.05s}
.command__panel.is-active .mbadge-chip:nth-child(2){animation-delay:0.1s}
.command__panel.is-active .mbadge-chip:nth-child(3){animation-delay:0.15s}
.command__panel.is-active .mbadge-chip:nth-child(4){animation-delay:0.2s}
.command__panel.is-active .mbadge-chip:nth-child(5){animation-delay:0.25s}
.command__panel.is-active .mbadge-chip:nth-child(6){animation-delay:0.3s}
.command__panel.is-active .mbadge-chip:nth-child(7){animation-delay:0.35s}
.command__panel.is-active .mbadge-chip:nth-child(8){animation-delay:0.4s}
.command__panel.is-active .mbadge-chip:nth-child(9){animation-delay:0.45s}
.command__panel.is-active .mbadge-chip:nth-child(10){animation-delay:0.5s}
@keyframes badgeRise{to{opacity:1;transform:none} }
@keyframes badgeSealFlash{0%{filter:drop-shadow(0 2px 8px rgba(0,0,0,0.55))} 45%{filter:drop-shadow(0 0 14px rgba(255,255,255,0.75))} 100%{filter:drop-shadow(0 2px 8px rgba(0,0,0,0.55))} }
.mbadge-set{position:relative;overflow:hidden}
.command__panel.is-active .mbadge-set::after{content:"";position:absolute;top:0;bottom:0;left:-12%;width:8%;background:linear-gradient(90deg,transparent,rgba(229,56,59,0.35),transparent);animation:badgeScan 1.2s ease 0.55s 1 forwards}
@keyframes badgeScan{to{left:108%} }
@media (prefers-reduced-motion:reduce){.mbadge-set .mbadge-chip{opacity:1;transform:none;animation:none !important}
.command__panel.is-active .mbadge-set::after{display:none}
}
.bexp{padding:clamp(7rem,12vw,9rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6rem);max-width:62rem;margin:0 auto}
.bexp__hero{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.4rem 0 2rem}
.bexp__hero .mbadge{width:5.4em}
.bexp__hero h1{font-family:var(--display);font-size:clamp(2.2rem,6vw,4rem);text-transform:uppercase;line-height:1}
.bexp__section{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--ruby-hot)}
.bexp__panel{border:1px solid rgba(244,239,230,0.14);border-radius:14px;background:var(--ink-2);padding:1.4rem 1.5rem;margin-bottom:1rem}
.bexp__panel h3{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.6rem}
.bexp__panel p,.bexp__panel li{color:var(--cream-dim);font-size:0.95rem;line-height:1.6}
.bexp__panel ul{list-style:none}
.bexp__panel li{padding-left:1.1rem;position:relative}
.bexp__panel li::before{content:"—";position:absolute;left:0;color:var(--ruby-hot)}
.bexp__attest{display:inline-block;border:1px solid var(--ruby);border-radius:100px;padding:0.4em 1.1em;font-size:0.84rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream)}
.bexp__legend{display:grid;gap:0.9rem;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));margin-top:1.6rem}
.bexp__card{display:flex;align-items:center;gap:0.9rem;border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:0.9rem 1rem;color:var(--cream);transition:border-color 0.25s,transform 0.25s}
.bexp__card:hover{border-color:var(--ruby);transform:translateY(-3px)}
.bexp__card .mbadge{width:2.4em}
.bexp__card b{display:block;font-size:0.88rem}
.bexp__card small{color:var(--cream-dim);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase}
.amenity-set,.amenity-legend{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.9rem}
.amenity-legend{display:grid;gap:0.6rem;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}
.amenity-set:empty,.amenity-legend:empty{display:none}
.amenity{--am-c:#c9c2b6;display:inline-flex;align-items:center;gap:0.55rem;text-decoration:none;border:1px solid rgba(244,239,230,0.16);border-radius:9px;background:rgba(244,239,230,0.03);color:var(--cream);padding:0.45rem 0.7rem 0.45rem 0.5rem;font:inherit;transition:border-color 0.2s,background 0.2s,transform 0.2s}
a.amenity:hover{border-color:color-mix(in srgb,var(--am-c) 70%,transparent);background:rgba(244,239,230,0.06);transform:translateY(-2px)}
.amenity__ico{flex:none;width:1.85em;height:1.85em;border-radius:6px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--am-c) 45%,rgba(244,239,230,0.18));background:color-mix(in srgb,var(--am-c) 12%,transparent)}
.amenity__ico svg{width:66%;height:66%;fill:none;stroke:var(--am-c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.amenity__txt b{font-size:0.84rem;font-weight:600;letter-spacing:0.01em;display:block;line-height:1.1}
.amenity__txt small{display:block;color:var(--cream-dim);font-size:0.78rem;margin-top:0.15rem;letter-spacing:0.02em}
.amenity--lg{padding:0.75rem 0.9rem;border-radius:11px;align-items:flex-start}
.amenity--lg .amenity__ico{width:2.5em;height:2.5em}
.amenity--lg .amenity__txt b{font-size:0.88rem}
.amenity__ico--hero{width:4.4rem;height:4.4rem;border-radius:14px}
.am__hero{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.4rem 0 2rem}
.am__hero h1{font-family:var(--display);font-size:clamp(2.2rem,6vw,4rem);text-transform:uppercase;line-height:1}
.am__note{margin-top:0.8rem;font-size:0.9rem;color:var(--cream-dim);line-height:1.6}
.am__note a{color:var(--ruby-hot)}
.mnet__amlbl{margin:1.1rem 0 0;font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim)}
.psy__ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-0.15em;margin-left:0.35em;color:var(--ruby-hot);animation:psyPing 2.8s ease-in-out infinite}
.psy.has-ic::after{display:none}
.psycard__ichead{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem}
.psycard__ichead .psy__ic{width:1.7em;height:1.7em;margin:0;animation:none}
.psycard__deep{margin-top:0.8rem;display:inline-block;font-size:0.84rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ruby-hot);background:none;border:1px solid var(--ruby);border-radius:100px;padding:0.5em 1.2em;cursor:pointer;transition:background 0.25s,color 0.25s}
.psycard__deep:hover{background:var(--ruby);color:var(--cream)}
.psyoverlay{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;background:rgba(6,5,4,0.94);opacity:0;visibility:hidden;transition:opacity 0.35s ease,visibility 0.35s;padding:1.2rem}
.psyoverlay.is-open{opacity:1;visibility:visible}
.psyoverlay__box{max-width:30rem;width:100%;text-align:center}
.psyoverlay__box .psy__ic{width:3.2em;height:3.2em;margin:0 auto 1rem;display:block;animation:psyPing 2.8s ease-in-out infinite}
.psyoverlay__kicker{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.5rem}
.psyoverlay__q{font-family:var(--display);font-size:clamp(1.3rem,4vw,2rem);text-transform:uppercase;line-height:1.15;margin-bottom:1.2rem}
.psyoverlay__opts{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center}
.psyoverlay__resp{color:var(--cream-dim);font-size:0.98rem;line-height:1.6;margin-bottom:1.4rem}
.psyoverlay__consent{margin-top:1.6rem;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,239,230,0.7)}
html.psy-locked,html.psy-locked body{overflow:hidden}
.pmk{padding:clamp(7rem,12vw,9rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6rem);max-width:68rem;margin:0 auto}
.pmk__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));margin-top:2rem}
.pmk__card{border:1px solid rgba(244,239,230,0.14);border-radius:14px;background:var(--ink-2);padding:1.2rem 1.3rem;transition:border-color 0.25s,transform 0.25s}
.pmk__card:hover{border-color:var(--ruby);transform:translateY(-3px)}
.pmk__card .psy__ic{width:2em;height:2em;margin:0 0 0.7rem;animation:none;display:block}
.pmk__card h3{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:0.03em}
.pmk__card .pmk__id{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ruby-hot)}
.pmk__card p{margin-top:0.5rem;color:var(--cream-dim);font-size:0.9rem;line-height:1.55}
.pmk__gridlead{margin:2.6rem 0 0.2rem;font-size:0.78rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--cream-dim)}
.pmk--split{position:relative}
.pmk__field{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 42% at 8% 6%,rgba(47,107,255,0.13),transparent 65%),radial-gradient(60% 42% at 92% 10%,rgba(56,192,111,0.12),transparent 65%)}
.pmk__t-a{background:linear-gradient(100deg,#9db8ff,#f4efe6 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pmk__t-b{background:linear-gradient(100deg,#f4efe6 30%,#8fe6b4);-webkit-background-clip:text;background-clip:text;color:transparent}
.pmk__card--duo{display:flex;flex-direction:column;gap:0.45rem;color:inherit;text-decoration:none}
.pmk__row{display:flex;align-items:center;gap:0.6rem}
.pmk__row .psy__ic{width:1.5em;height:1.5em;margin:0;animation:none;flex:none}
.pmk__row--a{color:#9db8ff}
.pmk__row--b{color:#8fe6b4}
.pmk__row b{font-family:var(--display);font-weight:400;font-size:1.02rem;text-transform:uppercase;letter-spacing:0.02em;line-height:1.05}
.pmk__row--b{padding-bottom:0.55rem;border-bottom:1px dashed rgba(244,239,230,0.14)}
.pmk__you{font-style:normal;flex:none;margin-left:auto;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:0.3em 0.7em}
.pmk__card--duo p{margin-top:0.15rem}
.pmk__open{margin-top:0.4rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ruby-hot)}
.pmkd__head{display:flex;align-items:center;gap:1.1rem;margin:1rem 0 1.6rem;flex-wrap:wrap}
.pmkd__ics{display:inline-flex;gap:0.5rem;flex:none}
.pmkd__ics .psy__ic{margin:0;animation:none}
.pmkd__h{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,4.6vw,2.7rem);text-transform:uppercase;line-height:1.02}
.pmkd__vs{font-style:normal;color:var(--ruby-hot);padding:0 0.15em}
.pmkd__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))}
.pmkd__panel{position:relative;border-radius:16px;padding:1.5rem 1.4rem;border:1px solid}
.pmkd__panel--a{border-color:rgba(47,107,255,0.4);background:rgba(47,107,255,0.07)}
.pmkd__panel--b{border-color:rgba(56,192,111,0.4);background:rgba(56,192,111,0.07)}
.pmkd__panel h3{font-family:var(--display);font-weight:400;font-size:1.35rem;text-transform:uppercase;margin-bottom:0.5rem}
.pmkd__panel--a h3{color:#9db8ff}
.pmkd__panel--b h3{color:#8fe6b4}
.pmkd__panel p{font-size:0.92rem;line-height:1.6}
.pmkd__dim{color:var(--cream-dim);margin-top:0.5rem}
.pmkd__you{position:absolute;top:0.85rem;right:0.95rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:0.35em 0.8em}
.pmkd__try{margin-top:1rem;border-top:1px dashed rgba(244,239,230,0.2);padding-top:0.85rem;font-size:0.9rem;line-height:1.55}
.pmkd__try b{display:block;font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.35rem}
.pmkd__bar{display:block;margin-top:1rem;border:1px solid rgba(229,56,59,0.4);border-radius:16px;background:rgba(193,18,31,0.07);padding:1.3rem 1.4rem;color:inherit;text-decoration:none;transition:border-color 0.25s,transform 0.25s}
.pmkd__bar:hover{border-color:var(--ruby-hot);transform:translateY(-2px)}
.pmkd__bar span{font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot)}
.pmkd__bar q{display:block;font-family:var(--display);font-size:clamp(1.15rem,3.6vw,1.7rem);text-transform:uppercase;line-height:1.1;margin:0.4rem 0;quotes:"\201C" "\201D"}
.pmkd__bar i{font-style:normal;font-size:0.84rem;color:var(--cream-dim);letter-spacing:0.08em;text-transform:uppercase}:root{--vaunt:#f84c0a;--vaunt-deep:#c93a04}
#work{height:440vh}
#work .command__tag{color:#ffb38f;border:1px solid rgba(248,76,10,0.5);border-radius:100px;padding:0.4em 0.95em;background:rgba(248,76,10,0.1);backdrop-filter:blur(3px)}
#work .command__panel{border-left-color:var(--vaunt)}
#work .command__link{display:inline-block;margin-top:0.5rem;color:#fff !important;text-decoration:none;background:linear-gradient(120deg,var(--vaunt-deep),var(--vaunt));border-radius:100px;padding:0.5em 1.2em;font-weight:700;letter-spacing:0.06em;box-shadow:0 8px 26px rgba(248,76,10,0.45);transition:transform 0.25s,box-shadow 0.25s}
#work .command__link:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(248,76,10,0.65)}
#work .command__count{color:var(--vaunt)}
#work .workvr__tag,#work .workvr__btn--land{background:linear-gradient(120deg,var(--vaunt-deep),var(--vaunt));box-shadow:0 8px 26px rgba(248,76,10,0.5)}
#work .workvr__btn:hover{border-color:var(--vaunt);background:rgba(248,76,10,0.28)}
#work .workvr__btn.is-on{border-color:var(--vaunt);color:#ffb38f}
#work .workvr__btn{--vr-flash:var(--vaunt)}
#work .vr360-spot i{background:var(--vaunt);box-shadow:0 0 12px rgba(248,76,10,0.9)}
#work .vr360-spot i::after{border-color:rgba(248,76,10,0.7)}
#work .vr360-spot span{border-color:rgba(248,76,10,0.55)}
#work .vr360-spot:hover span{background:var(--vaunt);border-color:var(--vaunt)}
.workvr{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity 0.6s ease}
.workvr.is-live{opacity:1;pointer-events:auto}
.workvr__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.workvr__canvas:active{cursor:grabbing}
.workvr__tag{position:absolute;top:calc(4.6rem + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:0.72rem;letter-spacing:0.26em;text-transform:uppercase;color:#fff;white-space:nowrap;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));border-radius:100px;padding:0.5em 1.1em;box-shadow:0 8px 26px rgba(229,56,59,0.5);pointer-events:none}
.workvr__side{position:absolute;right:0.7rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0.55rem;max-width:revert;align-items:revert}
.workvr__btn--top{background:linear-gradient(120deg,#a4161a,#ff2c1f) !important;border:none;color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(255,44,31,0.5);animation:vrTopFlash 1.1s ease-in-out infinite}
@keyframes vrTopFlash{0%,100%{box-shadow:0 0 8px rgba(255,44,31,0.6);filter:brightness(1)}
50%{box-shadow:0 0 24px 4px rgba(255,44,31,0.95);filter:brightness(1.3)}
}
.workvr__btn{--vr-flash:var(--ruby-hot);display:flex;align-items:center;gap:0.45em;justify-content:center;border:1px solid rgba(244,239,230,0.4);border-radius:100px;cursor:pointer;background:rgba(10,8,7,0.65);color:var(--cream);font:inherit;font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;padding:0.65em 1.1em;backdrop-filter:blur(4px);transition:border-color 0.25s,background 0.25s}
.workvr__icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.workvr__btn:hover{border-color:var(--ruby-hot);background:rgba(193,18,31,0.3)}
.workvr__btn.is-on{border-color:var(--ruby-hot);color:var(--ruby-hot)}
.workvr__btn--land{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));color:#fff;border:none;font-weight:700;letter-spacing:0.2em;padding:0.75em 1.25em;box-shadow:0 8px 24px rgba(229,56,59,0.5),inset 0 1px 0 rgba(255,255,255,0.25);animation:vrSkipNudge 2.8s ease-in-out infinite}
.workvr__btn--land::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,0.4) 50%,transparent 68%);transform:translateX(-100%);animation:vrLandSheen 3.4s ease-in-out infinite}
.workvr__icon--jet{width:17px;height:17px;animation:vrLandDip 2.8s ease-in-out infinite}
@keyframes vrSkipNudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
@keyframes vrLandSheen{0%,55%{transform:translateX(-100%)} 90%,100%{transform:translateX(100%)} }
@keyframes vrLandDip{0%,100%{transform:translate(0,-1.5px)} 50%{transform:translate(1px,1px)} }
.vr360-spots{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.vr360-spot{position:absolute;transform:translate(-8px,-50%);pointer-events:auto;display:flex;align-items:center;gap:0.45em;text-decoration:none;color:var(--cream);padding:6px 6px 6px 0;margin:-6px -6px -6px 0}
.vr360-spot i{width:16px;height:16px;border-radius:50%;flex:none;position:relative;background:var(--ruby-hot);box-shadow:0 0 12px rgba(229,56,59,0.9)}
.vr360-spot i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(229,56,59,0.7);animation:vrSpotPing 2s ease-out infinite}
@keyframes vrSpotPing{0%{transform:scale(0.7);opacity:1} 100%{transform:scale(1.7);opacity:0} }
.vr360-spot span{font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;white-space:nowrap;background:rgba(10,8,7,0.75);border:1px solid rgba(229,56,59,0.5);border-radius:100px;padding:0.45em 0.95em;backdrop-filter:blur(4px)}
.vr360-spot:hover span{background:var(--ruby);border-color:var(--ruby-hot)}
.vr360-edge{position:absolute;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;pointer-events:none;background:rgba(10,8,7,0.72);border:2px solid var(--ruby-hot);box-shadow:0 0 12px rgba(229,56,59,0.7)}
.vr360-edge svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#work .vr360-edge{border-color:var(--vaunt);box-shadow:0 0 12px rgba(248,76,10,0.75)}
@media (prefers-reduced-motion:reduce){.vr360-spot i::after{animation:none} }
.soundask{position:fixed;inset:0;z-index:130;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(8,6,5,0.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;animation:soundAskIn 0.45s ease-out both}
.soundask[hidden]{display:none}
@keyframes soundAskIn{from{opacity:0} to{opacity:1} }
.soundask__big{font-family:var(--display);text-transform:uppercase;line-height:0.95;font-size:clamp(3.2rem,13vw,7.5rem);color:var(--cream);animation:soundAskPulse 1.6s ease-in-out infinite}
.soundask__big mark{background:linear-gradient(180deg,#ffd84f,#ffc61a);color:#191204;padding:0.02em 0.16em;border-radius:8px}
@keyframes soundAskPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
.soundask__sub{font-size:0.9rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-dim)}
.soundask__arrow{position:absolute;top:4.6rem;right:clamp(4rem,13vw,11rem);width:62px;height:62px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 0 12px rgba(255,198,26,0.9));animation:soundAskArrow 1.1s ease-in-out infinite}
@keyframes soundAskArrow{0%,100%{transform:translate(-6px,6px)} 50%{transform:translate(6px,-6px)} }
.soundask__no{margin-top:1.6rem;background:none;cursor:pointer;font:inherit;border:1px solid rgba(244,239,230,0.3);border-radius:100px;color:var(--cream-dim);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.65em 1.3em}
.sound-toggle.is-asked{border-color:#ffc61a;color:var(--cream);animation:soundAskTarget 1.2s ease-out infinite}
@keyframes soundAskTarget{0%{box-shadow:0 0 0 0 rgba(255,198,26,0.75)}
100%{box-shadow:0 0 0 16px rgba(255,198,26,0)}
}
.work__runway{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity 0.55s ease}
.work__runway.is-shown{opacity:1}
.work__runway-rail{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1rem}
.work__runway-rail--l{left:clamp(0.7rem,3.4vw,2.4rem)}
.work__runway-rail--r{right:clamp(0.7rem,3.4vw,2.4rem)}
.work__runway-rail b{writing-mode:vertical-rl;text-orientation:mixed;font-size:0.7rem;font-weight:800;letter-spacing:0.52em;text-transform:uppercase;color:rgba(232,200,119,0.95);text-shadow:0 2px 12px rgba(0,0,0,0.85)}
.work__runway-rail svg{width:20px;height:32px;fill:none;stroke:rgba(232,200,119,0.95);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.85));animation:runwayFall 1.2s ease-in-out infinite}
.work__runway-rail--r svg{animation-delay:0.6s}
@keyframes runwayFall{0%,100%{transform:translateY(-4px);opacity:0.55}
50%{transform:translateY(7px);opacity:1}
}
.work__runway-note{position:absolute;left:50%;bottom:clamp(4.6rem,13vh,7.5rem);transform:translateX(-50%);white-space:nowrap;font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream-dim);text-shadow:0 2px 12px rgba(0,0,0,0.85)}
@media (prefers-reduced-motion:reduce){.work__runway-rail svg{animation:none} }
.work__slowhint{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;opacity:0;pointer-events:none;transition:opacity 0.6s ease}
.work__slowhint.is-shown{opacity:1}
.work__slowhint-big{font-family:var(--display);text-transform:uppercase;line-height:0.92;font-size:clamp(1.7rem,7vw,4rem);color:var(--vaunt);text-shadow:0 4px 34px rgba(0,0,0,0.8)}
.work__slowhint.is-shown .work__slowhint-big{animation:slowHintBreathe 2.6s ease-in-out infinite}
@keyframes slowHintBreathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.work__slowhint-phone{width:54px;height:96px;stroke:var(--vaunt);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 16px rgba(248,76,10,0.55))}
.work__slowhint-swipe{animation:slowHintSwipe 1.8s ease-in-out infinite}
@keyframes slowHintSwipe{0%,100%{transform:translateY(-4px)} 50%{transform:translateY(4px)} }
.work__slowhint-tiny{font-size:0.78rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,0.8)}
.command__pitch--icons{display:flex;flex-wrap:wrap;align-items:center;gap:0.7rem}
.wordpill{display:inline-flex;align-items:center;gap:0.6em;flex:none;border-radius:100px;padding:0.45em 1.2em 0.45em 0.45em;text-decoration:none;border:2px solid var(--badge-c,var(--ruby-hot));background:rgba(10,8,7,0.68);color:var(--cream);font-weight:800;font-size:0.84rem;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;backdrop-filter:blur(4px);transition:transform 0.25s;animation:msealFlash 1.6s ease-in-out infinite}
.wordpill:hover{transform:translateY(-2px)}
.wordpill__seal{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--badge-c,var(--ruby-hot));background:rgba(10,8,7,0.7)}
.wordpill__seal img{width:17px;filter:drop-shadow(0 0 6px var(--badge-c,var(--ruby-hot)))}
.wordpill__seal--em{background:#fff}
.wordpill__seal--em img{width:60%;filter:none}
.wordpill--vaunt{--badge-c:var(--vaunt);background:linear-gradient(120deg,var(--vaunt-deep),var(--vaunt));border-color:var(--vaunt);color:#fff}
.wordpill--vaunt .wordpill__seal{border-color:rgba(255,255,255,0.85);background:#fff;overflow:hidden}
.wordpill--vaunt .wordpill__seal img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:none}
@keyframes msealFlash{0%,100%{box-shadow:0 0 8px 0 var(--badge-c,var(--ruby-hot))}
50%{box-shadow:0 0 22px 6px var(--badge-c,var(--ruby-hot))}
}
@media (prefers-reduced-motion:reduce){.wordpill{animation:none} }
@media (prefers-reduced-motion:reduce){.workvr__btn--land,.workvr__btn--land::after,.workvr__icon--jet,.vr360-spot.is-urgent,.vr360-spot.is-urgent span,.vrsign.is-flash,.vrsign.is-flash b,.work__slowhint.is-shown .work__slowhint-big,.work__slowhint-swipe,.mseal,.soundask__big,.soundask__arrow,.sound-toggle.is-asked{animation:none}
}
.npbeak{position:fixed;left:50%;transform:translateX(-50%);z-index:120;bottom:calc(4.6rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:0.2rem;pointer-events:auto;cursor:pointer;text-align:center;animation:npbeakIn 0.4s ease-out both}
@keyframes npbeakIn{from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
.npbeak__words{font-family:var(--display);text-transform:uppercase;letter-spacing:0.14em;font-size:1.05rem;color:var(--vaunt);text-shadow:0 2px 16px rgba(0,0,0,0.85);animation:npbeakPulse 1.2s ease-in-out infinite}
.npbeak__arrow{width:30px;height:30px;stroke:var(--vaunt);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(248,76,10,0.9));animation:npbeakDip 1s ease-in-out infinite}
@keyframes npbeakDip{0%,100%{transform:translateY(-4px)} 50%{transform:translateY(5px)} }
.npbeak__ring{position:absolute;bottom:-3.55rem;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:2px solid var(--vaunt);opacity:0;animation:npbeakRing 1.6s ease-out infinite;pointer-events:none}
.npbeak__ring:nth-child(2){animation-delay:0.5s}
.npbeak__ring:nth-child(3){animation-delay:1s}
@keyframes npbeakRing{0%{transform:scale(0.3);opacity:0.9} 100%{transform:scale(3.6);opacity:0} }
@keyframes npbeakPulse{0%,100%{opacity:0.85} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){.npbeak__words,.npbeak__arrow,.npbeak__ring{animation:none} }
/* the beacon's tab glow, live at last: js/main.js has been asking for
   #appbarNP since the "Turn on sound!" prompt was written and no page had
   ever carried the id. The bar's Music tab carries it now, and since that
   tab is drawn as a transport button rather than an icon, the glow rides
   the button's own glyph instead of an <svg> that is no longer shown. */
.appbar__tab.is-beacon{color:var(--vaunt)}
.appbar__tab.is-beacon::before{filter:drop-shadow(0 0 7px rgba(248,76,10,0.75));animation:npbeakGlow 1.6s ease-in-out infinite}
@keyframes npbeakGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(248,76,10,0.45))}
50%{filter:drop-shadow(0 0 10px rgba(248,76,10,0.95))}
}
@media (prefers-reduced-motion:reduce){.appbar__tab.is-beacon::before{animation:none} }
/* RETIRED HERE: #appbarNPLabel, and the .appbar__tab.is-playing equaliser
   (npBar, and npEq/npArrow further down the sheet). Nothing in the tree ever
   put is-playing on a tab, and no page has ever held an #appbarNPLabel. The
   Music tab is a play/pause button now, so there are no equaliser bars left
   on it to animate; a state class with no picture behind it is worse than
   none. If an animated now-playing tab is wanted again, it belongs with the
   transport rules that live beside .appbar__tab.is-sound. */
.songblock__tag--duo{display:inline-flex;padding:0;overflow:hidden;border-radius:100px;border:1px solid rgba(244,239,230,0.25);line-height:0}
.duotag__half{display:inline-flex;align-items:center;justify-content:center;width:44px;height:30px}
.duotag__half svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.duotag__half--red{background:linear-gradient(120deg,#a4161a,#e5383b)}
.duotag__half--blue{background:linear-gradient(120deg,#1d4ed8,#3b82f6)}
.songquiz{position:relative;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:16vh clamp(1rem,4vw,2.5rem)}
.songquiz__inner{width:min(36rem,100%)}
.dq{margin:2.4rem 0 0.5rem}
.dq__offline{color:var(--cream-dim);font-size:0.9rem}
.dq__card{border:1px solid rgba(244,239,230,0.16);border-radius:18px;background:linear-gradient(180deg,rgba(244,239,230,0.05),rgba(244,239,230,0.015));padding:clamp(1.5rem,4vw,2.6rem);position:relative;overflow:hidden}
.dq__card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.5;background:radial-gradient(70% 60% at 15% 0%,rgba(47,107,255,0.12),transparent 60%),radial-gradient(70% 60% at 85% 100%,rgba(229,56,59,0.14),transparent 60%)}
.dq__card > *{position:relative;z-index:1}
.dq__consent{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:0.9rem}
.dq__h{font-family:var(--display);font-size:clamp(2rem,7vw,3.4rem);text-transform:uppercase;line-height:0.95}
.dq__lead{color:var(--cream-dim);font-size:1rem;line-height:1.6;max-width:52ch;margin:0.8rem 0 1.6rem}
.dq__start{font-family:var(--display)}
.dq__bar{height:3px;border-radius:3px;background:rgba(244,239,230,0.14);overflow:hidden;margin-bottom:0.7rem}
.dq__bar > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2f6bff,var(--ruby-hot));transition:width 0.35s ease}
.dq__count{font-size:0.78rem;letter-spacing:0.24em;color:var(--cream-dim)}
.dq__poles{display:flex;align-items:center;gap:0.7rem;margin:1.1rem 0 0.2rem}
.dq__pole{font-family:var(--display);text-transform:uppercase;font-size:clamp(0.8rem,2.6vw,1.05rem);line-height:1;color:#7fa0ff;letter-spacing:0.02em;flex:1}
.dq__pole--b{color:#6fe0a0;text-align:right}
.dq__vs{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-dim)}
.dq__prompt{font-size:clamp(1.15rem,3.6vw,1.7rem);line-height:1.35;margin:0.9rem 0 1.4rem;color:var(--cream)}
.dq__opts{display:grid;gap:0.6rem}
.dq__opt{text-align:left;border:1px solid rgba(244,239,230,0.18);border-radius:12px;background:rgba(244,239,230,0.03);color:var(--cream);padding:0.85em 1.1em;font:inherit;font-size:0.98rem;cursor:pointer;transition:border-color 0.2s,background 0.2s,transform 0.2s}
.dq__opt:hover{transform:translateX(3px)}
.dq__opt--a:hover,.dq__opt--a.is-on{border-color:#2f6bff;background:rgba(47,107,255,0.14)}
.dq__opt--b:hover,.dq__opt--b.is-on{border-color:#38c06f;background:rgba(56,192,111,0.14)}
.dq__nav{display:flex;align-items:center;justify-content:space-between;margin-top:1.2rem}
.dq__back{background:none;border:none;color:var(--cream-dim);font:inherit;font-size:0.9rem;cursor:pointer;letter-spacing:0.04em}
.dq__back:hover{color:var(--cream)}
.dq__skiphint{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(244,239,230,0.7)}
.dq__reshead{text-align:center;margin-bottom:1.6rem}
.dq__reskick{font-size:0.78rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--ruby-hot)}
.dq__resleadin{font-size:0.84rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream-dim);margin-top:0.6rem}
.dq__resh{font-family:var(--display);font-size:clamp(2.1rem,8vw,4rem);text-transform:uppercase;line-height:0.92;margin-top:0.2rem}
.dq__resh--split{color:var(--cream)}
.dq__ressub{color:var(--cream-dim);font-size:0.92rem;line-height:1.55;max-width:46ch;margin:0.7rem auto 0}
.dq__meter{position:relative;height:8px;border-radius:8px;margin:1.3rem auto 0.4rem;max-width:26rem;background:linear-gradient(90deg,#2f6bff,rgba(244,239,230,0.25) 50%,#38c06f)}
.dq__needle{position:absolute;top:-5px;width:4px;height:18px;border-radius:3px;background:var(--cream);transform:translateX(-50%);box-shadow:0 0 10px rgba(244,239,230,0.7)}
.dq__meterkey{display:flex;justify-content:space-between;max-width:26rem;margin:0 auto;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase}
.dq__meterkey span:first-child{color:#7fa0ff}
.dq__meterkey span:last-child{color:#6fe0a0}
.dq__resgrid{display:grid;gap:0.7rem;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr))}
.dq__res{text-align:left;border:1px solid rgba(47,107,255,0.35);border-radius:13px;background:rgba(47,107,255,0.06);color:var(--cream);padding:0.9rem 0.95rem;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:0.35rem;transition:border-color 0.2s,transform 0.2s,background 0.2s}
.dq__res.is-b{border-color:rgba(56,192,111,0.4);background:rgba(56,192,111,0.07)}
.dq__res:hover{transform:translateY(-3px)}
.dq__resic .psy__ic{width:1.8em;height:1.8em;margin:0;animation:none;display:block;color:#7fa0ff;transition:transform 0.3s ease,color 0.3s ease}
.dq__res.is-b .psy__ic{color:#6fe0a0}
.dq__ic.is-flipped{transform:scaleX(-1)}
.dq__ressay{font-family:var(--display);font-size:0.98rem;text-transform:uppercase;line-height:1.02;letter-spacing:0.01em}
.dq__resmeta{display:flex;align-items:center;gap:0.45rem;margin-top:0.1rem}
.dq__dots{display:inline-flex;gap:3px}
.dq__dots i{width:6px;height:6px;border-radius:50%;background:var(--ruby-hot);display:block}
.dq__mag{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim)}
.dq__flip{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(244,239,230,0.7);margin-top:0.15rem}
.dq__footnote{color:var(--cream-dim);font-size:0.9rem;line-height:1.6;max-width:54ch;margin:1.6rem 0 0}
.dq__actions{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:1.3rem}
@media (prefers-reduced-motion:reduce){.dq__opt,.dq__res,.dq__bar > i,.dq__resic .psy__ic{transition:none} }
.pmk__consent{border:1px solid rgba(229,56,59,0.4);border-radius:14px;background:rgba(193,18,31,0.08);padding:1.2rem 1.4rem;margin-top:2rem}
.pmk__consent h3{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.5rem}
.pmk__consent p{color:var(--cream-dim);font-size:0.9rem;line-height:1.6}
.poll{max-width:52rem;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6rem)}
.poll__note{max-width:46ch;margin:1.4rem auto 0;color:var(--cream-dim);font-size:0.9rem;line-height:1.65;text-align:center}
.poll__module{margin-bottom:clamp(3rem,7vw,5rem)}
.poll__module .songblock__tag{margin-bottom:1.2rem}
.poll__bar{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,3.4vw,2.1rem);text-transform:uppercase;line-height:1.2;margin-bottom:0.9rem;cursor:pointer;color:var(--cream);transition:color 0.3s,opacity 0.3s}
.poll__bar:hover{color:var(--ruby-hot)}
.poll__bar.is-now{color:var(--ruby-hot)}
.poll__bar.is-answered{opacity:0.55}
.poll__bar.is-answered::after{content:"answered";padding-left:1.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='%23e5383b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center/0.85em 0.85em no-repeat;font-family:var(--body);font-size:0.72rem;letter-spacing:0.2em;color:var(--ruby-hot);margin-left:0.7em;vertical-align:middle}
.poll__bar.is-locked{opacity:0.28;cursor:default}
.poll__bar.is-locked:hover{color:var(--cream)}
.poll__bar.is-locked::after{content:"deep mode";font-family:var(--body);font-size:0.72rem;letter-spacing:0.2em;color:var(--cream-dim);margin-left:0.7em;vertical-align:middle}
.poll__ic{width:0.8em;height:0.8em;vertical-align:-0.08em}
.poll__now[hidden]{display:none}
.poll__now{max-width:min(22rem,calc(100vw - 1.6rem))}
.poll__opts{justify-content:center}
.poll__opts .chat__chip{font-size:0.9rem}
.poll__scalekey{margin-top:0.7rem;font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream-dim);text-align:center}
.poll__consent{text-align:left;display:grid;gap:0.7rem;margin-top:1rem}
.poll__consent label{font-size:0.9rem;color:var(--cream-dim);line-height:1.5;cursor:pointer}
.poll__consent input{accent-color:var(--ruby);margin-right:0.5em}
.poll__text{width:100%;margin-top:0.4rem;background:var(--ink-2);color:var(--cream);border:1px solid rgba(244,239,230,0.25);border-radius:10px;font-family:var(--body);font-size:0.95rem;padding:0.7em 0.9em}
.poll__text:focus{outline:none;border-color:var(--ruby)}
.psyoverlay__box--poll{max-width:34rem}
.gal{padding:clamp(4rem,8vw,6rem) clamp(1.2rem,4vw,3rem);max-width:80rem;margin:0 auto;text-align:center}
.gal__sub{margin:1rem auto 0;color:var(--cream-dim);font-size:0.98rem;line-height:1.65;max-width:52ch}
.gal__wall{columns:3 16rem;column-gap:0.9rem;margin-top:2.2rem;text-align:left}
.gal__shot{break-inside:avoid;margin:0 0 0.9rem;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid rgba(244,239,230,0.12);transition:transform 0.3s ease,border-color 0.3s,box-shadow 0.3s}
.gal__shot img{display:block;width:100%;height:auto;transition:transform 0.5s ease}
.gal__shot:hover{transform:translateY(-4px);border-color:var(--ruby);box-shadow:0 16px 40px rgba(0,0,0,0.55),0 0 22px rgba(193,18,31,0.25)}
.gal__shot:hover img{transform:scale(1.04)}
.gal__shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 0.9rem 0.7rem;background:linear-gradient(180deg,transparent,rgba(6,5,4,0.85));font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream-dim)}
.gal__shot figcaption b{color:var(--ruby-hot);margin-right:0.5em}
.gal__light{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(6,5,4,0.95);padding:1.2rem;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;cursor:zoom-out}
.gal__light.is-open{opacity:1;visibility:visible}
.gal__light img{max-width:min(92vw,70rem);max-height:80vh;border-radius:10px}
.gal__light p{text-align:center}
.gal__light b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:0.06em;text-transform:uppercase}
.gal__light span{color:var(--cream-dim);font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase}
.dkt{padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3rem);max-width:74rem;margin:0 auto}
.dkt__hero{padding-top:clamp(7rem,12vw,9rem)}
.dkt__subtitle{font-size:0.84rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--ruby-hot);margin-top:0.8rem}
.dkt__summary{margin-top:1rem;color:var(--cream-dim);font-size:1rem;line-height:1.65;max-width:60ch}
.dkt__jump{margin-top:1.6rem;justify-content:flex-start}
.dkt__note{margin:0.8rem 0 1rem;font-size:0.84rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream-dim)}
.dkt__toolbar{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.4rem}
.dkt__toolbar input,.dkt__toolbar select{background:var(--ink-2);color:var(--cream);border:1px solid rgba(244,239,230,0.2);border-radius:8px;font-family:var(--body);font-size:max(16px,.9rem);padding:0.55em 0.9em;min-width:0}
.dkt__toolbar input{flex:2 1 12rem}
.dkt__toolbar select{flex:1 1 9rem}
.dkt__toolbar input:focus,.dkt__toolbar select:focus{outline:none;border-color:var(--ruby)}
.dkt__group{margin-bottom:1.2rem;border:1px solid rgba(244,239,230,0.1);border-radius:14px;background:rgba(20,16,14,0.55)}
.dkt__group summary{cursor:pointer;list-style:none;padding:0.9rem 1.2rem;font-family:var(--display);font-size:1.1rem;letter-spacing:0.06em;text-transform:uppercase;display:flex;align-items:center;gap:0.8rem}
.dkt__group summary::-webkit-details-marker{display:none}
.dkt__group summary::before{content:"";display:inline-block;width:.5em;height:.62em;background:var(--ruby-hot);clip-path:polygon(0 0,100% 50%,0 100%);transition:transform 0.25s}
.dkt__group[open] summary::before{transform:rotate(90deg)}
.dkt__count{font-family:var(--body);font-size:0.78rem;letter-spacing:0.2em;border:1px solid var(--ruby);border-radius:100px;padding:0.25em 0.8em;color:var(--ruby-hot)}
.dkt__catdesc{padding:0 1.2rem 0.9rem;margin-top:-0.2rem;color:var(--cream-dim);font-size:0.9rem;line-height:1.6;max-width:70ch;border-left:2px solid var(--ruby);margin-left:1.2rem;padding-left:0.9rem}
#dktCatDesc{margin:0 0 1rem;padding:0 0 0 0.9rem}
.dkt__cards{display:grid;gap:0.9rem;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));padding:0 1.2rem 1.2rem}
.dkt__tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.2rem 0 1rem}
.dkt__sorts{display:flex;gap:0.4rem;align-items:center}
.dkt__tab{background:var(--ink-2);color:var(--cream-dim);cursor:pointer;border:1px solid rgba(244,239,230,0.18);border-radius:100px;font-family:var(--body);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.5em 1em;transition:color 0.2s,border-color 0.2s,background 0.2s}
.dkt__tab i{font-style:normal;color:var(--ruby-hot);margin-left:0.35em}
.dkt__tab:hover{color:var(--cream);border-color:var(--ruby)}
.dkt__tab.is-on{background:var(--ruby);border-color:var(--ruby);color:var(--on-ruby)}
.dkt__tab.is-on i{color:var(--on-ruby)}
.dkt__tab.is-parsing{animation:loadFlash 1.2s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.dkt__tab.is-parsing{animation:none} }
.dkt__cards--flat{padding:0;grid-template-columns:repeat(auto-fill,minmax(min(12.5rem,100%),1fr));gap:0.7rem}
.dkt__card--sm{display:block;color:inherit;padding:0.8rem 0.9rem}
.dkt__card--sm h3{font-size:0.9rem;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dkt__card--sm .dkt__badge{font-size:0.72rem;padding:0.25em 0.75em;margin-bottom:0.45rem}
.dkt__card--sm .dkt__meta{font-size:0.72rem;margin-top:0.4rem}
.dkt__srclink{display:inline-block;margin-top:0.45rem;cursor:pointer;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ruby-hot);border-bottom:1px dashed var(--ruby)}
.dkt__srclink:hover{color:var(--cream)}
.dkt > .dkt__cards{padding:0}
.dkt__card{position:relative;overflow:hidden;border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:1rem 1.1rem;transition:transform 0.25s ease,border-color 0.25s,box-shadow 0.25s}
.dkt__card:hover{transform:translateY(-4px);border-color:var(--ruby);box-shadow:0 14px 34px rgba(0,0,0,0.5),0 0 22px rgba(193,18,31,0.25)}
.dkt__card::after{content:"";position:absolute;left:0;right:0;top:-20%;height:12%;background:linear-gradient(180deg,transparent,rgba(229,56,59,0.22),transparent);opacity:0;pointer-events:none}
.dkt__card:hover::after{opacity:1;animation:dktScan 1.1s linear infinite}
@keyframes dktScan{from{top:-20%} to{top:108%} }
@media (prefers-reduced-motion:reduce){.dkt__card:hover::after{animation:none;opacity:0} }
.dkt__badge{display:inline-block;font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot);border:1px solid var(--ruby);border-radius:100px;padding:0.3em 0.9em;margin-bottom:0.55rem}
.dkt__card h3{font-size:0.98rem;line-height:1.35}
.dkt__sub{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);margin-top:0.3rem}
.dkt__meta{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);margin-top:0.35rem}
.dkt__desc{font-size:0.9rem;color:var(--cream-dim);line-height:1.55;margin-top:0.55rem}
.dkt__acts{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.8rem}
.dkt__btn{font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;border-radius:100px;padding:0.5em 1.1em;transition:background 0.25s,color 0.25s,border-color 0.25s}
.dkt__btn--official{border:1px solid var(--ruby);color:var(--cream)}
.dkt__btn--official:hover{background:var(--ruby)}
.dkt__btn--local{border:1px solid rgba(244,239,230,0.3);color:var(--cream-dim)}
.dkt__btn--local:hover{border-color:var(--cream);color:var(--cream)}
.dkt__exp{border:1px solid rgba(244,239,230,0.14);border-radius:12px;background:var(--ink-2);padding:1.1rem 1.2rem}
.dkt__exp h3{font-size:0.92rem;color:var(--ruby-hot);margin-bottom:0.5rem}
.dkt__exp p{font-size:0.9rem;color:var(--cream-dim);line-height:1.6}
.dkt__gloss summary{cursor:pointer;list-style:none}.dkt__gloss summary::-webkit-details-marker{display:none}.dkt__gloss summary h3{display:inline;margin:0}.dkt__gloss details[open] summary h3{display:block;margin-bottom:0.5rem}
.dkt__more{margin-top:0.8rem}
.dkt__timeline{list-style:none;margin:1.4rem 0;border-left:2px solid var(--ruby)}
.dkt__timeline li{padding:0.7rem 0 0.7rem 1.4rem;position:relative;cursor:default}
.dkt__timeline li::before{content:"";position:absolute;left:-7px;top:1.15rem;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--ruby-hot)}
.dkt__timeline b{font-family:var(--display);font-size:1.05rem;letter-spacing:0.06em;color:var(--ruby-hot);display:block}
.dkt__timeline span{color:var(--cream-dim);font-size:0.9rem}
.dkt__rail{position:sticky;top:3rem;z-index:90;background:rgba(10,8,7,0.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(244,239,230,0.1);padding:0.7rem clamp(0.6rem,3vw,2rem) 0.5rem;overflow-x:auto}
.dkt__tl{list-style:none;display:flex;align-items:flex-start;min-width:max-content;margin:0 auto;max-width:74rem}
.dkt__tl li{position:relative;flex:1 0 auto;min-width:5rem;padding:0.7rem 0.7rem 0.15rem;text-align:center;cursor:pointer}
.dkt__tl li::before{content:"";position:absolute;top:1.1rem;left:-50%;width:100%;height:2px;background:rgba(244,239,230,0.18);z-index:0}
.dkt__tl li:first-child::before{display:none}
.dkt__tldot{position:relative;z-index:1;display:block;width:12px;height:12px;margin:0 auto 0.5rem;border-radius:50%;background:var(--ink);border:2px solid var(--ruby);transition:background 0.25s,box-shadow 0.25s}
.dkt__tl b{display:block;font-family:var(--display);font-size:0.84rem;letter-spacing:0.05em;color:var(--ruby-hot);line-height:1.1}
.dkt__tl em{display:block;font-style:normal;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cream-dim);margin-top:0.2rem}
.dkt__tl li:hover .dkt__tldot{background:var(--ruby)}
.dkt__tl li:hover b{color:var(--cream)}
.dkt__tl li.is-parsing .dkt__tldot{background:var(--ruby-hot);box-shadow:0 0 0 4px rgba(229,56,59,0.25),0 0 16px rgba(229,56,59,0.95);animation:tlFlash 0.85s ease-in-out infinite}
.dkt__tl li.is-parsing b{color:var(--cream)}
.dkt__tl li.is-parsing::before,.dkt__tl li.is-parsing + li::before{background:var(--ruby)}
@keyframes tlFlash{0%,100%{transform:scale(1)} 50%{transform:scale(1.55)} }
.dkt__railhint{text-align:center;margin-top:0.4rem;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(244,239,230,0.7);display:none}
/* the rail turns bone in daylight (.dkt__rail{background:var(--ink)}), so this
   hint has to come back the other way or it paints bone on bone */
html[data-theme="light"] .dkt__railhint{color:rgba(26,20,13,0.68)}
@media (prefers-reduced-motion:reduce){.dkt__tl li.is-parsing .dkt__tldot{animation:none} }
@media (min-width: 560.02px) {
  .dkt__rail { top: 3.4rem; }
  .dkt__railhint { display: revert; }
}
.dkt__release{margin-top:1.8rem;padding:1.1rem 1.3rem;border:1px solid rgba(229,56,59,0.4);border-radius:14px;background:rgba(193,18,31,0.08);display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem}
.dkt__release .songhero__play{flex:none}
.dkt__credit{flex:1 1 20rem;color:var(--cream-dim);font-size:0.9rem;line-height:1.6}
.dkt__credit b{color:var(--ruby-hot);letter-spacing:0.08em;text-transform:uppercase;font-size:0.84rem}
.dkt__now{position:fixed;left:clamp(0.8rem,3vw,2rem);bottom:clamp(0.8rem,3vw,2rem);z-index:120;background:rgba(10,8,7,0.94);border:1px solid var(--ruby);border-radius:10px;padding:0.6rem 0.9rem;max-width:min(24rem,calc(100vw - 1.6rem));font-size:0.84rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,0.55),0 0 18px rgba(193,18,31,0.3)}
.dkt__now[hidden]{display:none}
.dkt__now b{color:var(--ruby-hot)}
.dkt__now span{display:block;margin-top:0.25rem;color:var(--cream-dim);font-size:0.78rem}
.dkt__bar{display:block;margin-top:0.4rem;font-family:var(--display);font-style:normal;font-size:0.95rem;letter-spacing:0.05em;line-height:1.25;color:var(--ruby-hot);text-transform:none;animation:dktBarIn 0.3s ease}
@keyframes dktBarIn{from{color:var(--cream);opacity:0.4} to{color:var(--ruby-hot);opacity:1} }
@media (prefers-reduced-motion:reduce){.dkt__bar{animation:none} }
.dkt__group.is-parsing{border-color:var(--ruby);box-shadow:0 0 24px rgba(193,18,31,0.3)}
.dkt__group.is-parsing summary{color:var(--ruby-hot)}
.dkt__group.is-parsing summary::after{content:"PARSING";margin-left:auto;padding-left:1em;background:radial-gradient(circle at .3em 50%,currentColor 0 .22em,transparent .22em) left center no-repeat;font-family:var(--body);font-size:0.78rem;letter-spacing:0.24em;color:var(--ruby-hot);animation:loadFlash 1.2s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.dkt__group.is-parsing summary::after{animation:none} }
.ecohero{padding:clamp(6rem,14vh,10rem) clamp(1.2rem,5vw,4rem) clamp(2rem,6vh,4rem);max-width:62rem}
.ecohero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.8rem,9vw,6.5rem);line-height:0.9;margin:0.4rem 0 1.2rem}
.ecohero__lede,.brandhero__lede{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--cream-dim);max-width:52ch}
.ecoseg{padding:clamp(2.4rem,6vh,4.5rem) clamp(1.2rem,5vw,4rem);border-top:1px solid rgba(244,239,230,0.08)}
.ecoseg__head{max-width:60rem;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.ecoseg__label{font-size:0.84rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:0.6rem}
.ecoseg__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);line-height:0.95}
.ecoseg__blurb{color:var(--cream-dim);max-width:56ch;margin-top:0.8rem}
.ecogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(1rem,2.5vw,1.8rem)}
.ecocard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--ink-2);border:1px solid rgba(244,239,230,0.1);border-radius:14px;overflow:hidden;transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1),border-color 0.35s,box-shadow 0.35s}
.ecocard:hover{transform:translateY(-5px);border-color:rgba(229,56,59,0.6);box-shadow:0 22px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(229,56,59,0.15)}
.ecocard__media{position:relative;aspect-ratio:3 / 2;background:#1a1210 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.ecocard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,0.15) 0%,rgba(10,8,7,0.75) 100%)}
.ecocard__logo{position:relative;z-index:1;max-height:46%;max-width:62%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6))}
.ecocard__mmark{position:relative;z-index:1;font-family:var(--display);font-size:3.2rem;color:var(--cream);opacity:0.85}
.ecocard__text{padding:1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:0.4rem;flex:1}
.ecocard__text h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:0.01em}
.ecocard__text p{color:var(--cream-dim);font-size:0.92rem;line-height:1.45;flex:1}
.ecocard__go{color:var(--ruby-hot);font-size:0.9rem;letter-spacing:0.12em;text-transform:uppercase}
.brandhero{position:relative}
.brandhero__sticky{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden}
.brandhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#140e0c center/cover no-repeat;z-index:0}
.brandhero__sticky .scrim--deep{z-index:1}
.brandhero__inner{position:relative;z-index:2;width:100%;padding:clamp(2rem,8vh,5rem) clamp(1.2rem,5vw,4rem);max-width:66rem}
.brandhero--index .brandhero__inner,.brandpage .brandhero__inner:only-child{padding-top:clamp(6rem,14vh,9rem)}
.kicker--seg{font-size:0.84rem;letter-spacing:0.36em;text-transform:uppercase;color:var(--ruby-hot);margin-bottom:1rem}
.brandhero__logo{max-height:74px;max-width:60%;object-fit:contain;margin-bottom:1rem;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.6))}
.brandhero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,9vw,6rem);line-height:0.9;margin-bottom:0.7rem}
.brandhero__tag{font-size:clamp(1.05rem,2vw,1.45rem);color:var(--cream);max-width:44ch;line-height:1.35}
.brandfacts{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.6rem);margin-top:clamp(1.4rem,3vh,2.2rem)}
.brandfacts dt{font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:0.25rem}
.brandfacts dd{font-family:var(--display);font-weight:400;font-size:1.35rem}
.brandbody{padding:clamp(2.4rem,7vh,5rem) clamp(1.2rem,5vw,4rem) clamp(4rem,10vh,7rem);max-width:62rem}
.brandbody__summary{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.6;color:var(--cream);max-width:60ch;margin-bottom:clamp(1.8rem,5vh,3rem)}
.brandhi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-bottom:clamp(1.8rem,5vh,3rem)}
.brandhi__card{background:var(--ink-2);border:1px solid rgba(244,239,230,0.1);border-radius:12px;padding:1.3rem 1.4rem}
.brandhi__card h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin-bottom:0.5rem;color:var(--ruby-hot)}
.brandhi__card p{color:var(--cream-dim);line-height:1.5;font-size:0.98rem}
.brandlinks{flex-wrap:wrap;gap:0.8rem;margin-bottom:1.6rem}
.brandbody .song-gate{margin-top:0.4rem}
.brandbody__back{margin-top:2rem}
.brandbody__back a{color:var(--cream-dim);text-decoration:none;letter-spacing:0.04em}
.brandbody__back a:hover{color:var(--ruby-hot)}
@media (min-width: 600.02px) {
  .ecocard__media { aspect-ratio: 16 / 9; }
  .brandhero__sticky { min-height: 82vh; }
}
.hirepage .bexp{padding-bottom:clamp(5rem,12vh,8rem)}
.hire__trust{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.4rem}
.hire__pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.42rem 0.85rem;border-radius:999px;border:1px solid rgba(244,239,230,0.16);background:rgba(244,239,230,0.04);font-size:0.84rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-dim)}
.hire__pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ruby-hot);box-shadow:0 0 10px rgba(229,56,59,0.8)}
.hire__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(0.8rem,2vw,1.4rem);margin:2.4rem 0 0}
.hire__stat{border:1px solid rgba(244,239,230,0.1);border-radius:12px;padding:1.1rem 1.2rem;background:var(--ink-2)}
.hire__stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;color:var(--cream)}
.hire__stat small{display:block;margin-top:0.4rem;color:var(--cream-dim);font-size:0.9rem;line-height:1.4}
.hire__pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-top:0.6rem}
.hire__pkg{display:flex;flex-direction:column;gap:0.7rem;border:1px solid rgba(244,239,230,0.12);border-radius:14px;padding:1.5rem 1.5rem 1.6rem;background:var(--ink-2);position:relative}
.hire__pkg--feature{border-color:rgba(229,56,59,0.55);box-shadow:0 0 0 1px rgba(229,56,59,0.15),0 20px 50px rgba(0,0,0,0.4)}
.hire__pkg--feature::after{content:"Most booked";position:absolute;top:-0.75rem;left:1.5rem;background:var(--ruby);color:#fff;font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;padding:0.28rem 0.7rem;border-radius:999px}
.hire__pkg h3{font-family:var(--display);font-weight:400;font-size:1.5rem}
.hire__pkg .hire__price{font-size:0.9rem;color:var(--ruby-hot);letter-spacing:0.06em}
.hire__pkg ul{list-style:none;display:flex;flex-direction:column;gap:0.4rem;flex:1}
.hire__pkg li{padding-left:1.3rem;position:relative;color:var(--cream-dim);font-size:0.92rem;line-height:1.45}
.hire__pkg li::before{content:"";position:absolute;left:0;top:.28em;color:var(--ruby-hot);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;width:.8em;height:.8em}
.hire__pkg .btn{margin-top:0.4rem;text-align:center}
.hire__faq{display:flex;flex-direction:column;gap:0.6rem}
.hire__faq details{border:1px solid rgba(244,239,230,0.1);border-radius:10px;background:var(--ink-2);padding:0 1.2rem}
.hire__faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.hire__faq summary::-webkit-details-marker{display:none}
.hire__faq summary::after{content:"+";color:var(--ruby-hot);font-size:1.3rem;line-height:1;transition:transform 0.25s}
.hire__faq details[open] summary::after{transform:rotate(45deg)}
.hire__faq p{padding:0 0 1.1rem;color:var(--cream-dim);line-height:1.55}
.hire__sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.7rem clamp(1rem,4vw,1.4rem);background:rgba(10,8,7,0.92);backdrop-filter:blur(10px);border-top:1px solid rgba(244,239,230,0.12)}
.hire__sticky span{font-size:0.9rem;color:var(--cream-dim)}
.hire__sticky .btn{padding:0.7rem 1.2rem;white-space:nowrap}
.hirepage main { padding-bottom: 4.5rem; }
@media (min-width: 720.02px) {
  .hire__sticky { display: none; }
  .hirepage main { padding-bottom: 0; }
}
.offer__deal{border:1px solid rgba(229,56,59,0.5);border-radius:16px;background:linear-gradient(160deg,rgba(30,14,14,0.9),var(--ink-2));box-shadow:0 0 0 1px rgba(229,56,59,0.12),0 24px 60px rgba(0,0,0,0.5);padding:clamp(1.6rem,4vw,2.6rem);margin-top:1.6rem}
.offer__price{font-family:var(--display);font-weight:400;line-height:0.95;font-size:clamp(2.6rem,8vw,4.6rem)}
.offer__price span{color:var(--ruby-hot)}
.offer__price small{display:block;font-family:var(--body);font-size:0.9rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);margin-top:0.5rem}
.offer__toggle{display:inline-flex;margin:0 0 1.4rem;padding:0.3rem;border:1px solid rgba(244,239,230,0.16);border-radius:999px;background:rgba(10,8,7,0.65)}
.offer__bill{border:none;cursor:pointer;border-radius:999px;padding:0.55rem 1.2rem;background:transparent;color:var(--cream-dim);font-family:var(--body);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:0.5rem;transition:background 0.25s,color 0.25s,box-shadow 0.25s}
.offer__bill em{font-style:normal;font-size:0.78rem;letter-spacing:0.08em;padding:0.16rem 0.5rem;border-radius:999px;background:rgba(229,56,59,0.18);color:var(--ruby-hot);border:1px solid rgba(229,56,59,0.45);white-space:nowrap}
.offer__bill.is-on{background:var(--ruby);color:#fff;box-shadow:0 6px 22px rgba(229,56,59,0.4)}
.offer__bill.is-on em{background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.4)}
.offer__bill:focus-visible{outline:2px solid var(--ruby-hot);outline-offset:2px}
.offer__week{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.6rem;margin-top:1.3rem}
.offer__week > div{border:1px solid rgba(244,239,230,0.12);border-radius:12px;padding:0.95rem 0.9rem;background:rgba(10,8,7,0.5)}
.offer__week b{display:block;font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--ruby-hot);line-height:1}
.offer__week small{display:block;color:var(--cream-dim);line-height:1.45;margin-top:0.4rem;font-size:0.84rem;letter-spacing:0.04em}
.offer__terms{list-style:none;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:0.6rem}
.offer__terms li{padding-left:1.5rem;position:relative;line-height:1.5}
.offer__terms li::before{content:"";position:absolute;left:0;top:.3em;color:var(--ruby-hot);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;width:.85em;height:.85em}
.offer__terms b{color:var(--cream)}
.offer__spots{display:flex;align-items:center;gap:0.9rem;margin-top:1.6rem;flex-wrap:wrap}
.offer__dots{display:flex;gap:0.55rem}
.offer__dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(244,239,230,0.3)}
.offer__dot--open{border-color:var(--ruby-hot);background:rgba(229,56,59,0.12);box-shadow:0 0 14px rgba(229,56,59,0.55);animation:offerPulse 1.8s ease-in-out infinite}
.offer__dot--taken{border-color:rgba(244,239,230,0.25);background:rgba(244,239,230,0.22);position:relative}
.offer__dot--taken::after{content:"";position:absolute;inset:0;margin:auto;color:var(--ink);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;width:0.72em;height:0.72em}
@keyframes offerPulse{0%,100%{box-shadow:0 0 10px rgba(229,56,59,0.4)} 50%{box-shadow:0 0 20px rgba(229,56,59,0.85)} }
.offer__spotsnum{font-family:var(--display);font-weight:400;font-size:1.5rem}
.offer__spotsnum span{color:var(--ruby-hot)}
.offer__note{color:var(--cream-dim);font-size:0.9rem;letter-spacing:0.06em;margin-top:1.4rem}
.offer__who{display:flex;flex-wrap:wrap;gap:0.55rem;margin-top:0.6rem}
.offer__who span{padding:0.4rem 0.85rem;border-radius:999px;border:1px solid rgba(244,239,230,0.14);font-size:0.84rem;color:var(--cream-dim)}
.lo-offer{position:absolute;left:50%;bottom:clamp(5.5rem,12vh,8rem);z-index:6;transform:translate(-50%,18px);transform-origin:center;display:inline-flex;align-items:center;gap:0.6rem;padding:0.85rem 1.4rem;border-radius:999px;background:rgba(10,8,7,0.72);backdrop-filter:blur(8px);border:1px solid rgba(229,56,59,0.6);box-shadow:0 0 0 1px rgba(229,56,59,0.15),0 16px 40px rgba(0,0,0,0.5);color:var(--cream);text-decoration:none;font-size:0.95rem;opacity:0;pointer-events:none;transition:opacity 0.5s ease,transform 0.5s cubic-bezier(0.2,0.8,0.2,1);white-space:nowrap;max-width:92vw}
.lo-offer b{color:var(--ruby-hot)}
.lo-offer.is-shown{opacity:1;pointer-events:auto;transform:translate(-50%,0);animation:loOfferPop 0.6s cubic-bezier(0.2,0.9,0.2,1),loOfferFlagrant 0.8s ease-in-out 0.6s infinite}
@keyframes loOfferFlagrant{0%,100%{border-color:rgba(229,56,59,0.55);box-shadow:0 0 0 1px rgba(229,56,59,0.15),0 16px 40px rgba(0,0,0,0.5)}
50%{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,0.45),0 0 40px rgba(229,56,59,0.95),0 16px 40px rgba(0,0,0,0.55)}
}
.lo-offer.is-shown b{animation:loOfferTextFlash 0.8s steps(2,end) infinite}
@keyframes loOfferTextFlash{0%,100%{color:var(--ruby-hot);text-shadow:0 0 0 rgba(229,56,59,0)} 50%{color:#fff;text-shadow:0 0 14px rgba(229,56,59,0.95)} }
.lo-offer__spark{width:8px;height:8px;border-radius:50%;background:var(--ruby-hot);box-shadow:0 0 12px rgba(229,56,59,0.9);animation:offerPulse 1.4s ease-in-out infinite}
@keyframes loOfferPop{0%{transform:translate(-50%,22px) scale(0.92)} 60%{transform:translate(-50%,-4px) scale(1.03)} 100%{transform:translate(-50%,0) scale(1)} }
@media (prefers-reduced-motion:reduce){.lo-offer.is-shown{animation:none}
.offer__dot--open{animation:none}
}
@media (max-width:560px){.lo-offer{font-size:0.9rem;padding:0.7rem 1rem;white-space:normal;text-align:center} }
.hud__deg.is-360{color:var(--ruby-hot);animation:deg360Flash 0.62s steps(1,end) infinite}
@keyframes deg360Flash{0%{color:var(--ruby-hot);text-shadow:0 0 26px rgba(229,56,59,0.95);opacity:1}
50%{color:var(--cream);text-shadow:0 0 8px rgba(244,239,230,0.4);opacity:0.5}
100%{color:var(--ruby-hot);text-shadow:0 0 26px rgba(229,56,59,0.95);opacity:1}
}
@media (prefers-reduced-motion:reduce){.hud__deg.is-360{animation:none;color:var(--ruby-hot)} }
.hud__reel{color:#fff;font-weight:700;transform-origin:right center;animation:reelFlash 0.7s steps(1,end) infinite,reelPulse 1.05s ease-in-out infinite;will-change:transform,color}
@keyframes reelFlash{0%{color:#fff;text-shadow:0 0 6px rgba(255,255,255,0.6),0 0 20px rgba(229,56,59,0.75)}
50%{color:var(--ruby-hot);text-shadow:0 0 12px rgba(229,56,59,0.95),0 0 30px rgba(229,56,59,0.85),0 0 46px rgba(229,56,59,0.55)}
100%{color:#fff;text-shadow:0 0 6px rgba(255,255,255,0.6),0 0 20px rgba(229,56,59,0.75)}
}
@keyframes reelPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
.hud__reel .hud__arrow{font-size:1.35em;font-weight:700;animation:reelBounce 0.55s cubic-bezier(0.3,0,0.25,1) infinite}
@keyframes reelBounce{0%,100%{transform:translateY(-5px)}
50%{transform:translateY(7px)}
}
@media (prefers-reduced-motion:reduce){.hud__reel,.hud__reel .hud__arrow{animation:none;color:var(--ruby-hot)}
}
.iprec{display:flex;flex-direction:column;border:1px solid rgba(244,239,230,0.1);border-radius:12px;overflow:hidden}
.iprec__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0.9rem 1.2rem;border-bottom:1px solid rgba(244,239,230,0.07);background:var(--ink-2)}
.iprec__row:last-child{border-bottom:0}
.iprec__k{color:var(--cream);font-size:0.95rem}
.iprec__v{color:var(--cream-dim);font-family:var(--display);letter-spacing:0.06em;font-size:1.05rem;white-space:nowrap}
.iprec__v--live{color:var(--ruby-hot)}
.iprec__group{font-family:var(--display);font-weight:400;font-size:1.4rem;text-transform:uppercase;letter-spacing:0.04em;margin:1.6rem 0 0.7rem;color:var(--ruby-hot)}
.iprec__group:first-of-type{margin-top:0.4rem}
.iprec + .iprec__group{margin-top:1.8rem}
.chat__michint{font-size:0.9rem;color:var(--cream-dim);margin:0.5rem 0 0;transition:color 0.3s}
.chat__michint b{color:var(--cream)}
.chat__michint.is-flash{color:var(--ruby-hot);animation:reelPulse 0.5s ease-in-out 2}
small{font-size:1rem;font-weight:500}
.bexp__card small,.ecocard__text p,.brandhi__card p,.hire__stat small,.hire__pkg li,.hire__faq p,.command__pitch,.offer__terms li,.offer__note,.offer__who span,.iprec__k,.chat__michint,.bexp__panel p,.site-foot__note,.work__answer,.ecoseg__blurb,.hire__faq summary,.brandfacts dt,.songblock__tag,.offer__spotsnum{font-size:1.14rem;font-weight:500;line-height:1.62}
.bio__body,.brandbody__summary,.songhero__sub{font-weight:500}
.bexp__card small,.ecocard__text p,.brandhi__card p,.hire__pkg li{color:var(--cream-dim)}
.has-cursor,.has-cursor *{cursor:none !important}
.has-cursor input,.has-cursor textarea,.has-cursor [contenteditable="true"]{cursor:text !important}
.cur-ring,.cur-dot{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1),margin .25s cubic-bezier(.2,.8,.2,1),background .25s,opacity .3s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transition:opacity .3s}
.cur-hot .cur-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,0.14)}
.cur-down .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
.cur-gone .cur-ring,.cur-gone .cur-dot{opacity:0}
.pt-veil{position:fixed;inset:0;z-index:99998;background:var(--ink);transform:translateY(100%);pointer-events:none}
html.pt-out .pt-veil{transform:translateY(0);transition:transform .48s cubic-bezier(.7,0,.3,1)}
/* NO SCREEN FLASHES (owner, 2026-10-20: "just a smooth transition from screen to screen"). The veil is the colour of where
   it goes (js/tabbar.js): the World by day is white, the World by night its own dark, the house its ink. A hop inside one
   host is a cross-document view transition instead: the browser keeps this page until the next can paint, then fades
   one into the other, so no blank or half-built page is ever shown between them. */
html.pt-to-day .pt-veil{background:#ffffff}
html.pt-to-night .pt-veil{background:#090b0d}
@view-transition{navigation:auto}
/* the World inside the Music page's frame (mnet.html, html.mn-music-frame before any script): the Music page keeps the one bar */
html.mn-music-frame .appbar{display:none!important}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
*{scrollbar-width:thin;scrollbar-color:var(--ruby) transparent}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:linear-gradient(var(--ruby),var(--ruby-hot));border-radius:11px;border:3px solid var(--ink)}::-webkit-scrollbar-thumb:hover{background:var(--ruby-hot)}:focus-visible{outline:2px solid var(--ruby-hot);outline-offset:3px;border-radius:3px}
@media (orientation:landscape) and (max-height:560px){.command__head{left:auto;right:clamp(1.2rem,4vw,3rem);top:clamp(4.8rem,26vh,6.5rem);max-width:42vw;text-align:right}
.command__head .kicker{justify-content:flex-end}
.command__head .section-title{font-size:clamp(1.5rem,11vh,2.6rem)}
.command__head .work__answer{display:none}
.command__panels{right:auto;left:clamp(1.2rem,4vw,3rem);width:min(52vw,44rem);max-width:none;bottom:clamp(2.2rem,10vh,3.6rem);min-height:0}
.command__panel{max-width:100%}
.command__title{font-size:clamp(1.2rem,9vh,1.9rem)}
.command__pitch{font-size:clamp(0.8rem,3.8vh,0.95rem);line-height:1.4}
.antiscroll__title{text-align:right}
.antiscroll__l1{font-size:clamp(1.1rem,9vh,1.9rem)}
.antiscroll__l2{font-size:clamp(1.6rem,15vh,3rem);transform-origin:right center}
.antiscroll__l3{font-size:clamp(1.3rem,12vh,2.4rem)}
.antiabout{gap:0.55rem}
.antiabout__points span{font-size:clamp(0.95rem,6.5vh,1.4rem)}
.antiabout__phone{width:clamp(2.2rem,12vh,3rem);height:clamp(2.6rem,15vh,3.6rem)}
.antiabout__sound{font-size:clamp(0.7rem,3.6vh,0.85rem)}
.antiabout__enter-ic{width:clamp(3rem,18vh,4.2rem);height:clamp(3rem,18vh,4.2rem)}
.antiabout__enter-txt{font-size:clamp(0.95rem,6vh,1.4rem)}
}
@media (max-width:640px){.command__head{top:clamp(3.6rem,8.5vh,4.8rem);max-width:92vw}
.command__head .section-title{font-size:clamp(1.7rem,7.5vw,2.3rem)}
.command__head .work__answer{display:none}
.command__head .kicker{margin-bottom:0.4rem}
.command__panels{bottom:clamp(3.2rem,8vh,4.4rem);min-height:0}
.command__title{font-size:clamp(1.45rem,6.2vw,1.95rem);margin-top:0.35rem}
.command__pitch{font-size:0.92rem;line-height:1.42;margin-top:0.45rem}
.command__meta{gap:0.55rem}
.command__tag{font-size:0.72rem}
.eu-ctas{gap:0.38rem;margin-top:0.6rem}
.eu-ctas a{font-size:0.78rem;padding:0.3em 0.65em}
.mbadge-set{margin-top:0.55rem}
}
.songblock__markers{display:flex;gap:0.75rem;margin-top:1.5rem;flex-wrap:wrap}
.psy-chip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border-radius:50%;background:rgba(229,56,59,0.12);border:1.5px solid rgba(229,56,59,0.5);color:var(--cream);cursor:pointer;position:relative;line-height:0;animation:chipFlash 1.9s ease-in-out infinite;transition:background 0.25s,transform 0.2s}
.psy-chip::after{content:none !important}
.psy-chip .psy__ic{width:1.55em;height:1.55em;margin:0;animation:none}
.psy-chip:hover,.psy-chip:focus-visible{background:rgba(229,56,59,0.3);transform:translateY(-2px)}
.psy-chip:nth-child(2){animation-delay:0.5s}
.psy-chip:nth-child(3){animation-delay:1s}
@keyframes chipFlash{0%,100%{box-shadow:0 0 0 rgba(229,56,59,0);border-color:rgba(229,56,59,0.35)}
50%{box-shadow:0 0 18px rgba(229,56,59,0.6);border-color:var(--ruby-hot)}
}
@media (prefers-reduced-motion:reduce){.psy-chip{animation:none} }
.float-pause{position:fixed;z-index:150;right:clamp(1rem,4vw,2rem);top:38%;bottom:auto;height:3.3rem;padding:0;border:none;border-radius:999px;background:var(--ruby);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--body);font-weight:700;font-size:0.9rem;letter-spacing:0.08em;box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 0 1px rgba(229,56,59,0.4);animation:floatPausePulse 2.6s ease-in-out infinite;transition:background 0.2s,transform 0.2s;width:3.3rem;justify-content:center}
.float-pause[hidden]{display:none}
.float-pause svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
.float-pause:hover{background:var(--ruby-hot);transform:translateY(-2px)}
@keyframes floatPausePulse{0%,100%{box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 0 1px rgba(229,56,59,0.3)}
50%{box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 24px rgba(229,56,59,0.55)}
}
.float-pause__label { display: none; }
@media (min-width: 560.02px) {
  .float-pause { padding: 0 1.1rem 0 0.95rem; width: revert; justify-content: revert; }
  .float-pause__label { display: revert; }
}
@media (prefers-reduced-motion:reduce){.float-pause{animation:none} }
@keyframes floatPausePulseVaunt{0%,100%{box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 0 1px rgba(248,76,10,0.35)}
50%{box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 24px rgba(248,76,10,0.6)}
}
.song-gate{animation:gatePulse 2.6s ease-in-out infinite}
@keyframes gatePulse{0%,100%{border-color:rgba(244,239,230,0.22);box-shadow:0 0 0 rgba(229,56,59,0);color:var(--cream-dim)}
50%{border-color:var(--ruby-hot);box-shadow:0 0 18px rgba(229,56,59,0.45);color:var(--cream)}
}
.float-pause--spin{animation:floatPauseFlash 0.42s steps(2,end) infinite}
.float-pause--spin svg{animation:floatPauseSpin 0.6s linear infinite}
@keyframes floatPauseSpin{from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes floatPauseFlash{0%,100%{background:var(--ruby);box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 0 rgba(229,56,59,0)}
50%{background:var(--ruby-hot);box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 30px rgba(229,56,59,0.95)}
}
@media (prefers-reduced-motion:reduce){.song-gate,.float-pause--spin,.float-pause--spin svg{animation:none}
}
.book-huge{display:inline-flex;align-items:center;gap:0.4em;margin-top:0.9rem;padding:0.7em 1.3em;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));color:#fff !important;text-decoration:none;border:2px solid rgba(255,255,255,0.25);font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;font-size:clamp(1.4rem,4.2vw,2.6rem);letter-spacing:0.02em;box-shadow:0 12px 44px rgba(229,56,59,0.5);animation:bookHugePulse 1.35s ease-in-out infinite;will-change:transform}
.book-huge__arrow{display:inline-block;animation:bookHugeArrow 1s ease-in-out infinite}
.book-huge::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg);animation:bookHugeSweep 1.9s linear infinite;pointer-events:none}
.book-huge:hover{animation-duration:0.7s;transform:scale(1.03)}
@keyframes bookHugePulse{0%,100%{transform:scale(1);box-shadow:0 12px 44px rgba(229,56,59,0.4);border-color:rgba(255,255,255,0.2)}
50%{transform:scale(1.05);box-shadow:0 14px 60px rgba(229,56,59,0.9),0 0 34px rgba(229,56,59,0.7);border-color:#fff}
}
@keyframes bookHugeArrow{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
@keyframes bookHugeSweep{0%{left:-70%} 55%,100%{left:135%} }
#loadout .command__panel{width:100%}
#loadout .command__meta{position:absolute;top:0.35em;right:0;margin:0;justify-content:flex-end}
#loadout .command__title{margin-top:0}
#loadout .book-huge{font-family:inherit;font-weight:700;font-size:0.92rem;letter-spacing:0.14em;padding:0.45em 1em;border-radius:6px;border:none;margin-top:0.55rem;gap:0.35em;background:var(--ruby);box-shadow:0 0 18px rgba(229,56,59,0.55);animation:fxJolt 3.4s linear infinite}
#loadout .book-huge::after{content:none}
#loadout .book-huge__arrow{animation:none}
#loadout .book-huge:hover{background:var(--ruby-hot);transform:none}
#loadout .mbadge-set{margin-top:0.7rem;gap:0.4rem 0.55rem}
#loadout .mbadge-set .mbadge-chip--org{width:4.6rem}
#loadout .mbadge-set .mbadge-chip--org .mbadge{width:2em}
#loadout .mbadge-set .mbadge-chip--org small{font-size:0.72rem}
@media (prefers-reduced-motion:reduce){.book-huge,.book-huge__arrow,.book-huge::after{animation:none}
.lo-offer.is-shown,.lo-offer.is-shown b{animation:none}
}
.hero__sticky,.command__sticky,.loadout__sticky{height:100vh;height:100dvh}
.sitenote{padding:clamp(3.2rem,10vh,5.5rem) 1.4rem}
.sitenote__inner{position:relative;overflow:hidden;max-width:40rem;margin:0 auto;text-align:center;padding:1.8rem 1rem;background:repeating-linear-gradient(90deg,var(--ruby-hot) 0 12px,transparent 12px 26px) left top / 26px 3px repeat-x,repeating-linear-gradient(90deg,var(--ruby-hot) 0 12px,transparent 12px 26px) left bottom / 26px 3px repeat-x;animation:snMarch 0.8s linear infinite}
@keyframes snMarch{to{background-position:26px top,26px bottom} }
.sitenote__inner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 34%,rgba(229,56,59,0.32) 50%,transparent 66%);transform:translateX(-130%)}
.sitenote__inner.is-hit::after{animation:snScan 0.95s ease 1}
@keyframes snScan{to{transform:translateX(130%)} }
.sitenote__mark{position:relative;z-index:1;font-family:var(--body);font-weight:700;font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--cream)}
.sitenote__mark::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--ruby-hot);margin-right:0.55em;vertical-align:.04em;animation:snBlink 1s steps(1,end) infinite}
@keyframes snBlink{50%{opacity:0.15} }
.sitenote__line{position:relative;z-index:1;margin:0.7rem 0 0;font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,5.6vw,1.95rem);line-height:0.98;letter-spacing:0.012em;text-transform:uppercase;background-image:linear-gradient(100deg,var(--cream) 42%,var(--ruby-hot) 50%,var(--cream) 58%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:snShine 3s linear infinite}
@keyframes snShine{to{background-position:-260% 0} }
.sitenote__sub{display:block;margin-top:0.45rem;font-family:var(--body);font-weight:700;font-size:0.72rem;letter-spacing:0.24em;color:var(--ruby-hot);-webkit-text-fill-color:var(--ruby-hot)}
.sitenote__invite{position:relative;z-index:1;margin:0.85rem 0 0;font-family:var(--body);font-weight:700;font-size:0.9rem;color:var(--cream-dim)}
@media (prefers-reduced-motion:reduce){.sitenote__inner,.sitenote__mark::before,.sitenote__line,.sitenote__inner.is-hit::after{animation:none}
.sitenote__line{-webkit-text-fill-color:var(--cream);color:var(--cream);background:none}
}
.sitenote__doors{display:flex;gap:0.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.btn--sm{font-size:0.74rem;letter-spacing:0.18em;padding:0.9em 1.7em}:root{--appbar-h:4.6rem}
body.has-appbar{padding-bottom:calc(var(--appbar-h) + 1.4rem + env(safe-area-inset-bottom))}
.appbar{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 1.6rem);bottom:calc(0.85rem + env(safe-area-inset-bottom));z-index:200;display:flex;align-items:center;gap:0.3rem;padding:0.45rem;border-radius:100px;background:linear-gradient(180deg,rgba(34,28,23,0.82),rgba(16,13,11,0.86));backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);box-shadow:0 18px 50px -12px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,0.14)}
.appbar__tab{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;flex:none;text-decoration:none;color:var(--cream);transition:color 0.2s,transform 0.2s,background 0.25s}
.appbar__tab > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.appbar__tab svg{width:1.5rem;height:1.5rem;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.appbar a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.appbar img{pointer-events:none}
.appbar__tab:active{transform:scale(0.92)}
.appbar__tab:hover{color:#e5383b}
.appbar__tab.is-here,.appbar__tab.is-active{background:var(--metal);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 10px 26px -8px rgba(229,56,59,0.6)}
.appbar__tab[data-appnav="home"].is-here,.appbar__tab[data-appnav="home"].is-active{background:rgba(255,255,255,0.15);color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),0 8px 20px -8px rgba(0,0,0,0.3)}
.appbar__tab--slot{width:auto;min-width:72px;height:54px;border-radius:100px;padding:0 0.95rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:linear-gradient(180deg,rgba(255,255,255,0.11),rgba(255,255,255,0.04));box-shadow:inset 0 1px 0 rgba(255,255,255,0.13)}
.appbar__tab--slot > span{position:static;width:auto;height:auto;clip:auto;clip-path:none;font-size:0.58rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase}
.appbar__tab--slot svg{width:1.2rem;height:1.2rem}
.appbar__tab[data-appnav="spaces"]:hover{color:#45b6ff}
/* the civic tab wears the Equity Uprise lockup, drawn in currentColor so it
   turns with the house coat. Its hover is the mark's own navy, lifted far
   enough off the night coat to be read and left alone in daylight. Neither
   the "we" nor the "spaces" key above was reused: those colours were chosen
   for other brands and there is no markup behind either of them. */
.appbar__tab[data-appnav="uprise"]:hover:not(.is-here):not(.is-active){color:#4a8fd8}
html[data-theme="light"] .appbar__tab[data-appnav="uprise"]:hover:not(.is-here):not(.is-active){color:#012c52}
/* FIVE TABS IN ONE CAPSULE. The bar is width:max-content under a hard
   max-width and its cells are flex:none, so it does not shrink to fit, it
   runs off the edge. Five 54px tabs with their gaps and padding measure
   304px, which clears a 390px phone comfortably and a 320px one not at all.
   The smallest handsets give up six pixels a tab rather than a whole room. */
@media (max-width:359px){.appbar__tab{width:48px}}
/* AN OPEN WING CARRIES FOUR ROOMS NOW. Four slots at their natural
   min-width plus the held tab measure 376px, past the 364px a 390px phone
   allows, and the capsule has neither wrap nor shrink to fall back on. So on
   a phone the open bar stops being max-content and becomes exactly as wide
   as it is allowed to be, and the four rooms divide what is left over after
   the anchor. Wider screens keep the roomier natural sizing. */
@media (max-width:479px){
.appbar--morph{width:calc(100vw - 1.6rem);gap:0.22rem;padding:0.38rem}
.appbar--morph .appbar__tab--slot{flex:1 1 0;min-width:0;padding:0 0.2rem}
.appbar--morph .appbar__tab--slot > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.5rem;letter-spacing:0.04em}
}
.antiabout{bottom:calc(clamp(2rem,7vh,4rem) + var(--appbar-h))}
.finale{padding-bottom:calc(6rem + var(--appbar-h))}
.site-foot{padding-bottom:calc(2.5rem + var(--appbar-h))}
.float-pause{bottom:auto}
.psycard__ichead .psy__ic{transition:transform 0.3s ease}
.psycard__ichead .psy__ic.is-flipped{transform:scaleX(-1)}
.psycard__body--dim{color:var(--cream-dim);font-size:0.92em;margin-top:0.5rem}
.songblock__line.has-marks{text-decoration:underline;text-decoration-color:rgba(229,56,59,0.65);text-decoration-thickness:2px;text-underline-offset:0.24em}
.lyric-marks{display:inline-flex;gap:0.18em;vertical-align:middle;margin-left:0.4em;border-bottom:2px solid rgba(229,56,59,0.65);padding-bottom:0.14em}
.lyric-marks .psy-chip{width:1.9em;height:1.9em;padding:0;border:none;background:none;border-radius:4px;animation:psyPolice 0.66s steps(1,end) infinite}
.lyric-marks .psy-chip:nth-child(2){animation-delay:0.33s}
.lyric-marks .psy-chip:nth-child(3){animation-delay:0.16s}
.lyric-marks .psy-chip:hover{transform:none;background:none}
.lyric-marks .psy-chip .psy__ic{width:100%;height:100%;animation:none}
@keyframes psyPolice{0%,49.9%{color:#2f6bff;transform:scaleX(1);filter:drop-shadow(0 0 5px rgba(47,107,255,0.8))}
50%,100%{color:#ff3535;transform:scaleX(-1);filter:drop-shadow(0 0 5px rgba(255,53,53,0.85))}
}
@media (prefers-reduced-motion:reduce){.lyric-marks .psy-chip{animation:none;color:var(--ruby-hot)} }
html.is-installed .getapp,html.is-installed .getapp-pill{display:none !important}
.getapp-pill{margin-top:1.1rem;border:1px solid rgba(244,239,230,0.3);cursor:pointer;display:inline-flex;align-items:center;gap:0.55em;padding:0.7em 1.4em;border-radius:100px;background:rgba(10,8,7,0.55);backdrop-filter:blur(8px);color:var(--cream);font:inherit;font-size:0.84rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;animation:getappGlow 2.4s ease-in-out infinite;transition:border-color 0.25s,background 0.25s,transform 0.2s}
.getapp-pill:hover{border-color:var(--ruby-hot);background:rgba(193,18,31,0.3);transform:translateY(-2px)}
.getapp-pill svg{width:1.1rem;height:1.1rem;stroke:var(--ruby-hot);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes getappGlow{0%,100%{box-shadow:0 0 0 rgba(229,56,59,0)}
50%{box-shadow:0 0 22px rgba(229,56,59,0.5)}
}
.getapp{padding:clamp(3.5rem,10vh,6rem) clamp(1.2rem,5vw,3.5rem);text-align:center;position:relative;overflow:hidden;background:radial-gradient(90% 120% at 50% 0%,rgba(60,14,14,0.55),transparent 70%)}
.getapp--last{border-top:1px solid rgba(244,239,230,0.1)}
.getapp__inner{max-width:34rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0.7rem}
.getapp__icon{width:64px;height:64px;border-radius:15px;box-shadow:0 12px 34px rgba(0,0,0,0.6),0 0 0 1px rgba(244,239,230,0.14);animation:getappBob 3s ease-in-out infinite}
@keyframes getappBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.getapp__h{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:0.95;font-size:clamp(1.9rem,8vw,3.2rem)}
.getapp__sub{color:var(--cream-dim);font-size:0.95rem;line-height:1.6;max-width:44ch}
.getapp__sub b{color:var(--cream)}
.getapp__btn{margin-top:0.5rem;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.6em;padding:1.05em 2.2em;border-radius:100px;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));color:#fff;font-family:var(--display);font-size:clamp(1rem,3.2vw,1.3rem);letter-spacing:0.06em;text-transform:uppercase;box-shadow:0 14px 44px rgba(229,56,59,0.45);animation:wantBtnPulse 2.2s ease-in-out infinite;transition:transform 0.25s}
.getapp__btn:hover{transform:scale(1.04)}
.getapp__btn svg{width:1.2em;height:1.2em;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.getapp-pill,.getapp__icon,.getapp__btn{animation:none} }
.getapp-coach{position:fixed;inset:0;z-index:400;display:grid;place-items:end center;background:rgba(10,8,7,0.75);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.3s}
.getapp-coach.is-on{opacity:1;pointer-events:auto}
.getapp-coach__card{width:min(30rem,calc(100% - 1.6rem));margin-bottom:calc(1rem + env(safe-area-inset-bottom));border-radius:20px;border:1px solid rgba(244,239,230,0.16);background:var(--ink-2);padding:1.6rem 1.4rem;text-align:center;transform:translateY(20px);transition:transform 0.3s}
.getapp-coach.is-on .getapp-coach__card{transform:translateY(0)}
.getapp-coach__card img{width:56px;height:56px;border-radius:13px;margin-bottom:0.6rem}
.getapp-coach__card b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.35rem;margin-bottom:0.7rem}
.getapp-coach__card p{display:flex;align-items:center;justify-content:center;gap:0.5em;color:var(--cream-dim);font-size:0.92rem;line-height:1.5;margin:0.35rem 0;flex-wrap:wrap}
.getapp-coach__card p b{display:inline;font-family:var(--body);font-size:inherit;text-transform:none;color:var(--cream);margin:0}
.getapp-coach__card p span{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--ruby);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:0.84rem;font-weight:700}
.getapp-coach__card p svg{width:1.25rem;height:1.25rem;stroke:var(--ruby-hot);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.getapp-coach__note{font-size:0.84rem !important;color:var(--cream-dim);margin-top:0.7rem !important}
.getapp-coach__card button{margin-top:1rem;border:none;cursor:pointer;border-radius:100px;padding:0.8em 2.4em;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));color:#fff;font:inherit;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;font-size:0.9rem}
.support-pill{margin-top:0.6rem;display:inline-flex;align-items:center;gap:0.55em;padding:0.7em 1.4em;border-radius:100px;text-decoration:none;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));color:#fff;font-size:0.84rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;box-shadow:0 10px 34px rgba(229,56,59,0.45);animation:wantBtnPulse 2.4s ease-in-out infinite;transition:transform 0.2s}
.support-pill:hover{transform:translateY(-2px) scale(1.02)}
.support-pill svg{width:1.05rem;height:1.05rem;fill:#fff}
@media (prefers-reduced-motion:reduce){.support-pill{animation:none} }
.hero__door{display:inline-block;margin-top:0.7rem;text-decoration:none;color:rgba(244,239,230,0.7);font-size:0.82rem;letter-spacing:0.02em;border-bottom:1px dashed rgba(244,239,230,0.25);padding-bottom:0.1rem;transition:color 0.2s}
.hero__door b{color:var(--cream)}
.hero__door:hover{color:var(--cream)}
.exitov{position:fixed;inset:0;z-index:420;display:grid;place-items:center;background:rgba(10,8,7,0.78);backdrop-filter:blur(6px);animation:exitovIn 0.25s ease-out both}
@keyframes exitovIn{from{opacity:0} to{opacity:1} }
.exitov__card{width:min(26rem,calc(100% - 2rem));text-align:center;border:1px solid rgba(229,56,59,0.5);border-radius:20px;background:linear-gradient(160deg,rgba(30,14,14,0.95),var(--ink-2));box-shadow:0 30px 80px rgba(0,0,0,0.6);padding:2rem 1.6rem 1.8rem}
.exitov__voice{font-size:0.78rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ruby-hot);font-weight:700}
.exitov__card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,6vw,2.1rem);line-height:1;margin:0.6rem 0 0.4rem}
.exitov__sub{color:var(--cream-dim);font-size:0.9rem;line-height:1.55}
.exitov__acts{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
@media (prefers-reduced-motion:reduce){.exitov{animation:none} }
.appbar__tab.has-signal{position:relative}
.appbar__tab.has-signal::after{content:"";position:absolute;top:6px;right:22%;width:7px;height:7px;border-radius:50%;background:var(--ruby-hot);box-shadow:0 0 8px rgba(229,56,59,0.9);animation:offerPulse 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.appbar__tab.has-signal::after{animation:none} }
.work__flypill{position:absolute;left:50%;transform:translateX(-50%);top:clamp(7.5rem,17vh,10rem);z-index:8;opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.work__flypill.is-shown{opacity:1;pointer-events:auto}
.getapp-coach__shot{display:block;position:relative;margin-top:0.7rem;border-radius:12px;overflow:hidden}
.getapp-coach__shot img{display:block;width:100%;height:auto}
.getapp-coach__shot i{position:absolute;left:2%;right:2%;top:47%;bottom:5%;border:3px solid var(--ruby-hot);border-radius:12px;box-shadow:0 0 0 4px rgba(229,56,59,0.25),0 0 18px rgba(229,56,59,0.55);animation:coachRing 1.4s ease-in-out infinite}
@keyframes coachRing{0%,100%{box-shadow:0 0 0 3px rgba(229,56,59,0.2),0 0 12px rgba(229,56,59,0.4)}
50%{box-shadow:0 0 0 6px rgba(229,56,59,0.35),0 0 26px rgba(229,56,59,0.8)}
}
@media (prefers-reduced-motion:reduce){.getapp-coach__shot i{animation:none} }
.app-crumb{position:fixed;top:calc(0.8rem + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:210;padding:0.45em 1.1em;border-radius:100px;text-decoration:none;background:rgba(10,8,7,0.75);backdrop-filter:blur(8px);border:1px solid rgba(229,56,59,0.5);color:var(--cream);font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.app-crumb:hover{background:rgba(193,18,31,0.4)}
.appbar__m{width:1.75rem;height:1.75rem;object-fit:contain;display:block}
/* A CREATOR IN THE MIDDLE. A creator's front page puts that creator in the
   bar's middle cell for the session (js/tabbar.js, the perspective): their
   own avatar, round, or the initial of their name. Never a mark drawn for
   them (AGENTS.md, the logos). */
.appbar__m--creator{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(244,239,230,0.3)}
.appbar__m--initial{display:grid;place-items:center;border-radius:50%;background:rgba(244,239,230,0.14);box-shadow:0 0 0 1px rgba(244,239,230,0.3);font:800 0.82rem/1 var(--ui,system-ui,sans-serif);text-transform:uppercase;color:inherit}
/* the initial is the coin, not a label: the visually-hidden rule for a tab's label spans (above) left a member without a
   photo an empty middle tab (owner, 2026-10-20: no broken or blank tab between screens) */
.appbar__tab>span.appbar__m--initial{position:static;width:1.75rem;height:1.75rem;overflow:visible;clip:auto;clip-path:none;white-space:normal}
.appbar--admin .appbar__tab>span.appbar__m--initial{width:2.6rem;height:2.6rem}
/* THE HM RIDES ON ITS HEIGHT, not on a square. The mark is 1.4:1 and the
   bar already carries a wide icon (the EQ glyph is nearly 2:1), so matching
   the other tabs' height and letting the width follow keeps every tab's
   optical weight equal without squashing a logo into a box it is not. */
.appbar__hm{height:2rem;width:auto;max-width:3.1rem;object-fit:contain;display:block;margin-block:-0.12rem}
/* THE MARK IN THE BAR IS THE SHIPPED APP ICON.
   A hand-drawn approximation of this wrench used to stand here, cut from
   a raster and given a rounded plate this stylesheet invented. It is
   gone. These are Whip Equipped's own files: the black-tile lockup for
   paper, the white-tile lockup for the company's own ground, cropped to
   the icon and nothing else.

   IT TURNS WITH THE COAT. The bar takes the white tile on the cinema
   coat and the black tile on the gallery coat, so the wrench always has
   a plate under it -- including on the accent coin the active tab sits
   on. Width is auto: the tile is 464x512, and forcing it square squashed
   it. */
.appbar__we {
  height: 1.62rem;
  width: auto;
  object-fit: contain;
  display: block;
  margin-block: -0.02rem;
}
html[data-theme="light"] .appbar__we { content: url("../assets/img/we-icon-bar.png"); }

html[data-theme="light"] .appbar__tab[data-appnav="home"] .appbar__m{content:url("../assets/img/m-mark-dark.png")}
/* the creator's own picture or initial is never swapped for the M; the
   house slot of the held wing takes the dark M on the light coat */
html[data-theme="light"] .appbar__tab[data-appnav="home"] .appbar__m--creator,html[data-theme="light"] .appbar__tab[data-appnav="home"] .appbar__m--initial{content:normal}
html[data-theme="light"] .appbar__tab--slot .appbar__m{content:url("../assets/img/m-mark-dark.png")}
/* the fifth tab wore the halo PNG, which needed a bigger box than the M
   coin (baked-in transparent margin) and a dark pill under it on the light
   coat so the white halo did not vanish. It is a drawn cup now and takes
   the ordinary .appbar__tab svg rules like the other three glyphs, so both
   of those rules were left matching nothing and are gone. */
.appbar__tab--we .appbar__m,.appbar__tab[data-appnav="we"] .appbar__m{width:1.9rem;height:1.9rem;border-radius:8px;box-shadow:0 0 12px rgba(255,92,46,0.35),0 0 0 1px rgba(244,239,230,0.18)}
.appbar__tab[data-appnav="we"]:hover,.appbar__tab[data-appnav="we"].is-active{color:#ff5c2e}
.appbar__tab[data-appnav="we"].is-active .appbar__m{box-shadow:0 0 16px rgba(255,92,46,0.65),0 0 0 1px rgba(244,239,230,0.25)}
.dk-ic{font-size:1.3rem;line-height:1.75rem;display:block}
.appbar--morph .appbar__tab{animation:dockIn 0.28s cubic-bezier(0.2,0.9,0.2,1) backwards}
.appbar--morph .appbar__tab:nth-child(2){animation-delay:0.04s}
.appbar--morph .appbar__tab:nth-child(3){animation-delay:0.08s}
.appbar--morph .appbar__tab:nth-child(4){animation-delay:0.12s}
.appbar--morph .appbar__tab:nth-child(5){animation-delay:0.16s}
@keyframes dockIn{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.appbar__tab--wing{color:#e5383b}
@media (prefers-reduced-motion:reduce){.appbar--morph .appbar__tab{animation:none} }
/* the record button: the owner's one addition to the bar. The inner dot is
   filled; the ring takes the tab's own colour like every other glyph. */
.appbar__tab--create .appbar__rec{fill:#e5383b;stroke:none}
.appbar__tab--create.is-here .appbar__rec,.appbar__tab--create.is-active .appbar__rec{fill:#fff}
html[data-theme="light"] .appbar__tab--create .appbar__rec{fill:#c81d25}
.offer-hero{margin:1.6rem 0 0;border-radius:20px;overflow:hidden;border:1px solid rgba(232,200,119,0.35);box-shadow:0 24px 70px rgba(0,0,0,0.5)}
.offer-hero img{display:block;width:100%}
.hire__pill{font:inherit;cursor:pointer}
.ostage{max-width:34rem}
.ostage__card{animation:dockIn 0.35s cubic-bezier(0.2,0.9,0.2,1)}
.ostage__nav{display:flex;align-items:center;gap:1rem;margin-top:0.9rem}
.ostage__dots{display:flex;gap:0.4rem}
.ostage__dots i{width:1.6rem;height:4px;border-radius:4px;background:rgba(244,239,230,0.18)}
.ostage__dots i.is-lit{background:#e5383b}
/* THE LENS. A native <dialog>, so the platform owns the focus trap, the
   inert page behind it, the Escape key and the backdrop. This sheet only
   has to say what the paper looks like once it is open. */
.lens{width:fit-content;margin:auto;max-width:min(94vw,42rem);max-height:88vh;max-height:88dvh;padding:0;border:0;border-radius:16px;
  background:var(--ink-2);color:var(--cream);overflow:visible;
  box-shadow:0 30px 90px rgba(0,0,0,0.7),0 0 0 1px rgba(232,200,119,0.45)}
.lens[open]{animation:dockIn 0.3s cubic-bezier(0.2,0.9,0.2,1)}
.lens::backdrop{background:rgba(5,4,3,0.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lens__body{display:flex;flex-direction:column;max-height:88vh;max-height:88dvh;overflow:hidden;border-radius:16px}
.lens__fig{display:flex;flex-direction:column;min-height:0;margin:0}
.lens__img{display:block;width:100%;max-height:72vh;max-height:72dvh;min-height:0;object-fit:contain;background:#f4efe6}
.lens__cap{display:flex;align-items:baseline;gap:0.9rem;justify-content:space-between;flex-wrap:wrap;
  padding:0.85rem 1.05rem;font:600 0.84rem/1.5 var(--body);color:var(--cream-dim)}
.lens__doc{color:var(--ruby-hot);font-weight:800;white-space:nowrap}
.lens__miss{padding:1.5rem;font:600 0.94rem/1.65 var(--body);color:var(--cream-dim)}
.lens__miss a{color:var(--ruby-hot);font-weight:800;word-break:break-all}
/* the close target is a full 44px even though the cross inside it is small */
.lens__x{position:absolute;top:0.55rem;right:0.55rem;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(244,239,230,0.28);
  background:rgba(10,8,7,0.88);color:#f4efe6;box-shadow:0 6px 20px rgba(0,0,0,0.55)}
.lens__x svg{width:20px;height:20px}
.lens__x:hover,.lens__x:focus-visible{background:var(--ruby);border-color:var(--ruby);color:#fff}
@media (prefers-reduced-motion:reduce){.lens[open]{animation:none}}
/* the label a screen reader needs and a sighted reader does not */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.appbar__tab{position:relative}
.appbar__tab.is-sound svg,.appbar__tab.is-sound .dk-ic{opacity:0.25}
.appbar__tab.is-sound::before{content:"";position:absolute;top:0.72rem;left:50%;transform:translateX(-50%);width:11px;height:13px;color:#e5383b;background:linear-gradient(to right,currentColor 0 4px,transparent 4px 7px,currentColor 7px 11px);filter:drop-shadow(0 0 7px rgba(229,56,59,0.65))}
/* ============================================================
   THE MUSIC TAB IS A TRANSPORT. The pause glyph above was already
   drawn; it had only ever been a status light, something the tab put
   on while a record happened to be playing somewhere. It is a button
   now, and a button that only has one of its two faces is half a
   control, so the resting face is drawn here: a play triangle in the
   same box, at the same optical height, in the tab's own colour.

   Scoped to [data-appnav="music"] and deliberately NOT to .appbar__eq.
   The nine pages under tracks/ and closet/ carry a different Music icon
   with no .appbar__eq class on it at all, and a transport that worked on
   thirty pages and not on nine would be exactly the kind of quiet gap
   the two-variant markup keeps producing.

   The insignia underneath goes: the tab is a button, not a picture with
   a button on it. It is hidden rather than deleted because the markup is
   hand-copied into thirty-nine pages and the root variant's insignia
   turns out to be the Equity Uprise lockup, which now has its own tab.
   Deciding what the Music tab should carry instead is the owner's call,
   and this keeps it one line away.
   ============================================================ */
.appbar__tab[data-appnav="music"] svg{visibility:hidden}
.appbar__tab[data-appnav="music"]:not(.is-sound)::before{content:"";position:absolute;top:0.7rem;left:calc(50% + 1px);transform:translateX(-50%);width:13px;height:14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
/* standing on the room the tab points at, the coin fills with the house
   red, and the pause glyph was painted that same red: it vanished into its
   own background in the one place it matters most, which is the album page
   with the record running. The play triangle rides currentColor and turns
   white with the tab on its own; only the pause glyph, which pins its own
   colour, has to be told. */
.appbar__tab[data-appnav="music"].is-here.is-sound::before,.appbar__tab[data-appnav="music"].is-active.is-sound::before{color:#fff;filter:none}
.dk-peek{position:fixed;left:50%;transform:translateX(-50%);z-index:205;bottom:calc(var(--appbar-h,4.4rem) + env(safe-area-inset-bottom) + 0.9rem);width:min(100% - 1.6rem,26rem)}
.dk-peek__card{border:0;border-radius:22px;background:rgba(20,16,13,0.88);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);padding:1.05rem 1.1rem 1.1rem;box-shadow:0 20px 60px -10px rgba(0,0,0,0.85),inset 0 1px 0 rgba(244,239,230,0.08);animation:dockIn 0.26s cubic-bezier(0.2,0.9,0.2,1)}
.dk-peek__top{display:flex;gap:0.7rem;align-items:flex-start}
.dk-peek__ic{font-size:1.6rem;line-height:1.2}
.dk-peek__top b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem}
.dk-peek__top small{display:block;color:var(--cream-dim);font-size:0.86rem;line-height:1.55;margin-top:0.2rem}
.dk-peek__acts{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.8rem}
.dk-peek__go{font:inherit;font-weight:900;letter-spacing:0.03em;border:0;cursor:pointer;background:linear-gradient(180deg,#e5383b,#e5383b);color:#0a0807;border-radius:100px;padding:0.6em 1.3em;flex:1;min-width:9rem}
.dk-peek__alt{font:inherit;font-weight:700;border:1px solid rgba(244,239,230,0.3);cursor:pointer;background:none;color:var(--cream);border-radius:100px;padding:0.6em 1.1em}
.dk-peek__full{flex:none;align-self:flex-start;color:#e5383b;font-size:0.78rem;font-weight:800;text-decoration:none;letter-spacing:0.06em;text-transform:uppercase}
.dk-w{margin-top:0.7rem}
.dk-w__in{width:100%;box-sizing:border-box;background:rgba(244,239,230,0.06);color:var(--cream);border:1px solid rgba(244,239,230,0.22);border-radius:10px;padding:0.65rem 0.8rem;font:inherit;font-size:0.95rem;margin-top:0.45rem}
.dk-w__in:focus{outline:none;border-color:#e5383b}
.dk-w__out{color:var(--cream-dim);font-size:0.9rem;line-height:1.55;margin-top:0.6rem;min-height:1.2em}
.dk-w__row{display:flex;align-items:baseline;gap:0.5rem;padding:0.5rem 0;font-size:0.92rem;border-top:1px dashed rgba(244,239,230,0.14)}
.dk-w__row:first-child{border-top:0}
.dk-w__row small{color:var(--cream-dim)}
.dk-w__row a{margin-left:auto;color:#ff5c2e;font-weight:800;text-decoration:none}
.antiabout__tabprompt{display:flex;flex-direction:column;align-items:center;gap:0.4rem;margin-top:1.4rem;text-align:center}
.antiabout__tabprompt-txt{font-family:var(--display);text-transform:uppercase;letter-spacing:0.08em;font-size:clamp(1.05rem,3.6vw,1.5rem);line-height:1.25;color:var(--cream)}
.antiabout__tabprompt-txt b{color:var(--ruby-hot)}
.antiabout__tabprompt-txt small{display:block;font-family:var(--body);font-size:0.78rem;letter-spacing:0.18em;color:var(--cream-dim);margin-top:0.35rem}
.antiabout__tabprompt-arrow{width:30px;height:30px;stroke:var(--ruby-hot);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(229,56,59,0.8));animation:npbeakDip 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.antiabout__tabprompt-arrow{animation:none} }
.site-foot{padding-bottom:calc(var(--appbar-h,3.7rem) + env(safe-area-inset-bottom) + 1.2rem)}
.site-foot__links{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.35rem 1.1rem;max-width:44rem;margin-left:auto;margin-right:auto;flex:1 1 100%;width:100%;min-width:0}
.site-foot__links a{font-size:0.78rem !important;letter-spacing:0.06em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wayback{position:fixed;left:clamp(0.8rem,3vw,1.4rem);bottom:calc(var(--appbar-h,3.7rem) + env(safe-area-inset-bottom) + 1rem);z-index:190;width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;text-decoration:none;background:rgba(10,8,7,0.72);backdrop-filter:blur(10px);border:1px solid rgba(244,239,230,0.25);box-shadow:0 8px 26px rgba(0,0,0,0.45);transition:border-color 0.25s,transform 0.2s}
.wayback:hover{border-color:var(--ruby-hot);transform:translateX(-2px)}
.wayback svg{width:1.3rem;height:1.3rem;stroke:var(--cream);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@font-face{font-family:"McCluster M";src:url("../assets/fonts/mccluster/McClusterM-Split.woff") format("woff");font-display:swap}:root{--sig:"Anton",Impact,"Arial Narrow",sans-serif}
.brand__rest,.site-foot__brand{font-family:var(--sig);letter-spacing:0.03em}
@font-face{font-family:"McCluster Micro";src:url("../assets/fonts/mccluster/McClusterShard-Condensed.woff") format("woff");font-display:swap}:root{--micro:var(--body,sans-serif)}
.kicker{font-family:var(--micro);font-weight:800;font-size:0.74rem;letter-spacing:0.3em}
.appbar__tab span{font-family:var(--micro);font-size:0.78rem;letter-spacing:0.08em}
.ta__status,.cr__tag{font-family:var(--micro)}
.mk__k{font-family:var(--micro);font-size:0.78rem;letter-spacing:0.2em}
.clientfloor{padding:clamp(4rem,10vh,7rem) clamp(1.2rem,4vw,3rem);max-width:72rem;margin:0 auto}
.clientfloor__title{font-family:var(--sig);text-transform:uppercase;text-align:center;font-size:clamp(2.6rem,9vw,5rem);line-height:0.98;margin-top:0.5rem}
.clientfloor__sub{text-align:center;color:var(--cream-dim);max-width:46ch;margin:1rem auto 0;line-height:1.65}
.clientfloor__sub strong{color:var(--cream)}
.clientfloor__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));gap:1.1rem;margin-top:2.2rem}
.clientcard{display:block;text-decoration:none;color:var(--cream);border-radius:18px;overflow:hidden;border:1px solid rgba(244,239,230,0.14);background:rgba(20,16,14,0.6);transition:transform 0.3s cubic-bezier(0.2,0.9,0.2,1),border-color 0.3s}
.clientcard:hover{transform:translateY(-6px);border-color:var(--cc,var(--ruby-hot))}
.clientcard__shot{position:relative;display:block;aspect-ratio:8 / 5;overflow:hidden;border-bottom:3px solid var(--cc,var(--ruby-hot))}
.clientcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 0.5s ease}
.clientcard:hover .clientcard__shot img{transform:scale(1.04)}
.clientcard__live{position:absolute;top:0.7rem;right:0.7rem;font-family:var(--micro);font-size:0.78rem;letter-spacing:0.16em;color:#2fbf71;background:rgba(10,8,7,0.8);border:1px solid rgba(47,191,113,0.6);border-radius:100px;padding:0.4em 0.9em}
.clientcard__body{display:block;padding:1.1rem 1.2rem 1.3rem}
.clientcard__body b{font-size:1.08rem}
.clientcard__body small{display:block;color:var(--cream-dim);font-size:0.9rem;line-height:1.55;margin-top:0.35rem}
.clientcard__tag{display:inline-block;margin-top:0.8rem;font-family:var(--micro);font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--cc,var(--ruby-hot));border:1px solid color-mix(in srgb,var(--cc,#e5383b) 55%,transparent);border-radius:100px;padding:0.45em 1em}
.clientfloor__note{text-align:center;color:var(--cream-dim);font-size:0.9rem;margin-top:1rem}
/* THE TAB BAR FLOATING MID-SCREEN ON IPHONE, FIXED HERE.

   This used to clip overflow on BOTH html and body, with a fallback that
   gave body `overflow-x:hidden` on engines without `overflow:clip`.
   That fallback is the bug. iOS Safari before 16 has no `overflow:clip`,
   so it took the hidden branch — and in WebKit a body with a non-visible
   overflow becomes a scroll container that fixed-position descendants get
   positioned against instead of the viewport. js/tabbar.js appends the
   bar to document.body, so on those iPhones `bottom:14px` measured from
   the body box, not the screen: the bar drifted up the page and read as
   "floating in the middle".

   Chromium supports overflow:clip, so it never entered the fallback at
   all — a 12-device headless sweep measured 14px on every profile and
   could not reproduce this, because the broken branch is unreachable
   there. Do not take a green cross-browser run as evidence about a rule
   that only fires on the browser the run does not include.

   html alone is enough to stop horizontal scroll, and clipping on the
   root has never been what created the containing block. body keeps only
   overscroll-behavior, which does not affect positioning. */
html{overflow-x:clip}
html,body{overscroll-behavior-x:none}
@supports not (overflow:clip){html{overflow-x:hidden} }
.mv{display:inline-flex;align-items:center;gap:0.9rem;text-decoration:none;color:inherit;margin-top:1.1rem;max-width:34rem}
.mv__seal{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(10,8,7,0.78);border:2px solid var(--badge-c,#8b5cf6);box-shadow:0 0 14px color-mix(in srgb,var(--badge-c,#8b5cf6) 55%,transparent),inset 0 0 10px rgba(0,0,0,0.5);transition:box-shadow 0.3s}
.mv__seal img{width:54%}
.mv__txt small{display:block;font-size:0.72rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--badge-c,#8b5cf6);font-weight:800}
.mv__txt b{display:block;font-size:0.9rem;line-height:1.5;font-weight:600;color:var(--cream)}
.mv:hover .mv__seal{box-shadow:0 0 24px color-mix(in srgb,var(--badge-c,#8b5cf6) 85%,transparent),inset 0 0 10px rgba(0,0,0,0.5)}
.psmf__play{display:flex;align-items:center;gap:1rem;margin:1.7rem auto 0;cursor:pointer;border:1px solid rgba(229,56,59,0.6);color:var(--cream);font:inherit;border-radius:100px;background:linear-gradient(140deg,rgba(193,18,31,0.4),rgba(20,16,14,0.85));padding:0.7rem 1.9rem 0.7rem 0.7rem;box-shadow:0 16px 48px rgba(0,0,0,0.5);transition:transform 0.2s,box-shadow 0.3s}
.psmf__play:hover{transform:translateY(-2px);box-shadow:0 20px 56px rgba(0,0,0,0.6),0 0 30px rgba(229,56,59,0.3)}
.psmf__play-ic{position:relative;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--ruby),var(--ruby-hot))}
.psmf__play-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(229,56,59,0.55);animation:psmfPulse 1.8s ease-out infinite}
.psmf__play.is-on .psmf__play-ic::after{animation:none;opacity:0}
@keyframes psmfPulse{0%{transform:scale(1);opacity:1} 100%{transform:scale(1.55);opacity:0} }
@media (prefers-reduced-motion:reduce){.psmf__play-ic::after{animation:none} }
.psmf__play-ic svg{width:44%;fill:currentColor}
.psmf__play-tx{text-align:left}
.psmf__play-tx b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.35rem;letter-spacing:0.04em;line-height:1}
.psmf__play-tx small{display:block;color:var(--cream-dim);font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;margin-top:0.3rem}
.psmf__hud{position:fixed;top:calc(0.7rem + env(safe-area-inset-top));right:0.8rem;z-index:150;display:none;align-items:center;gap:0.7rem;border:1px solid rgba(244,239,230,0.16);background:rgba(12,9,8,0.9);backdrop-filter:blur(12px);border-radius:100px;padding:0.4rem 0.95rem 0.4rem 0.45rem;box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.psmf__hud.is-live{display:flex}
.psmf__hud.is-flash{animation:psmfFlash 0.7s}
@keyframes psmfFlash{30%{border-color:var(--ruby-hot);box-shadow:0 0 26px rgba(229,56,59,0.7)} }
.psmf__ring{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;grid-auto-flow:column;align-items:baseline;background:conic-gradient(var(--ruby-hot) calc(var(--p,0) * 1%),rgba(244,239,230,0.14) 0)}
.psmf__ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#14100e}
.psmf__ring b{position:relative;font-size:0.9rem}
.psmf__ring small{position:relative;font-size:0.72rem;color:var(--cream-dim)}
.psmf__hud-mid b{display:block;font-size:0.84rem;letter-spacing:0.08em;text-transform:uppercase}
.psmf__hud-mid small{display:block;color:var(--cream-dim);font-size:0.78rem;margin-top:0.1rem}
.psmf__streak{font-size:0.9rem;font-weight:800;color:#ffb057}
.poll__bar{position:relative}
.poll__bar.is-riding{color:#fff;background:rgba(193,18,31,0.22);border-color:var(--ruby-hot);box-shadow:0 0 24px rgba(229,56,59,0.25)}
.psmf__pop{position:absolute;right:0.6rem;top:-0.6rem;font-style:normal;font-size:0.84rem;font-weight:800;color:#ffd98a;pointer-events:none;animation:psmfPop 1.3s ease-out forwards}
@keyframes psmfPop{0%{opacity:0;transform:translateY(6px)} 20%{opacity:1}
100%{opacity:0;transform:translateY(-18px)} }
.poll__bar.is-riding.is-score::after{content:"TAP · SCORE IT";position:absolute;right:0.7rem;top:50%;transform:translateY(-50%);font-size:0.72rem;font-weight:800;letter-spacing:0.18em;color:#ffd98a;border:1px solid rgba(216,186,124,0.55);border-radius:100px;padding:0.3em 0.8em;background:rgba(10,8,7,0.75);animation:psmfInvite 1.2s ease-in-out infinite alternate}
@keyframes psmfInvite{from{opacity:0.65} to{opacity:1} }
@media (prefers-reduced-motion:reduce){.poll__bar.is-riding.is-score::after{animation:none} }
html{touch-action:pan-x pan-y}
a,button,input,select,textarea,summary,label,[role="button"]{touch-action:manipulation}
@media (pointer:coarse){input,select,textarea{font-size:max(16px,1em)}
}
.door{display:flex;flex-direction:column;gap:0.65rem;width:100%;max-width:430px}
.door__lede{margin:0;color:var(--cream-dim);font-size:0.88rem;line-height:1.55}
.door__in{width:100%;background:rgba(10,8,7,0.75);border:1px solid rgba(244,239,230,0.3);border-radius:12px;color:var(--cream);font:inherit;font-size:max(16px,1rem);padding:0.85em 1em;margin:0}
.door__in::placeholder{color:rgba(244,239,230,0.7)}
.door__in:focus{outline:none;border-color:var(--ruby-hot)}
.door__go{display:block;width:100%;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:800;font-size:0.98rem;letter-spacing:0.05em;text-transform:uppercase;padding:1.05em 1.2em;color:#fff;background:linear-gradient(120deg,var(--ruby),var(--ruby-hot));box-shadow:0 8px 26px rgba(229,56,59,0.35);text-align:center;transition:transform 0.08s,box-shadow 0.2s;-webkit-tap-highlight-color:transparent}
.door__go:active{transform:scale(0.985)}
.door__alt{display:block;width:100%;border:1px solid rgba(244,239,230,0.5);border-radius:12px;cursor:pointer;font:inherit;font-weight:700;font-size:0.92rem;padding:0.95em 1.2em;color:var(--cream);background:rgba(244,239,230,0.07);text-align:center;transition:transform 0.08s,background 0.15s;-webkit-tap-highlight-color:transparent}
.door__alt:active{transform:scale(0.985);background:rgba(244,239,230,0.14)}
.door__or{margin:0.1rem 0;text-align:center;color:rgba(244,239,230,0.7);font-size:0.84rem;letter-spacing:0.2em;text-transform:uppercase}
.door__row{display:flex;gap:0.5rem;flex-wrap:wrap}
.door__row .door__in{flex:1;min-width:170px;width:auto}
.door__row .door__alt{flex:none;width:auto}
.door__msg{margin:0;min-height:1.2em;color:var(--cream);font-size:0.9rem}
.door__fine{margin:0;color:rgba(244,239,230,0.7);font-size:0.84rem;line-height:1.55}
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
img,video{image-rendering:auto}
/* .btn motion, press and hover moved to THE BUTTON SYSTEM at the end of this file */
.btn--ghost{backdrop-filter:blur(6px)}
input,select,textarea{border-radius:12px;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:rgba(229,56,59,0.7);box-shadow:0 0 0 3px rgba(229,56,59,0.18)}
.mp__card{transition:transform 0.28s cubic-bezier(0.22,1,0.36,1),border-color 0.28s,box-shadow 0.28s}
@media (hover:hover){.mp__card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.4)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.mp__card:hover{transform:none}
}
@keyframes mccCardCall{0%,100%{box-shadow:0 0 0 0 rgba(232,200,119,0)}
50%{box-shadow:0 0 24px rgba(232,200,119,0.85);border-color:#e5383b}
}
.card-call{border:1.5px solid rgba(232,200,119,0.55);border-radius:14px;animation:mccCardCall 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.card-call{animation:none;border-color:#e5383b} }
.closer-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));z-index:96;display:flex;align-items:center;gap:0.6rem;max-width:min(92vw,30rem);border:1.5px solid rgba(232,200,119,0.6);border-radius:100px;background:rgba(14,11,9,0.96);padding:0.55rem 0.6rem 0.55rem 1rem;box-shadow:0 12px 40px rgba(0,0,0,0.55),0 0 18px rgba(232,200,119,0.25);animation:mccCardCall 2.2s ease-in-out infinite}
.closer-bar a{color:#e5383b;font-weight:800;font-size:0.9rem;text-decoration:none;line-height:1.35}
.closer-bar button{flex:none;border:0;background:none;color:rgba(244,239,230,0.7);font-size:0.9rem;cursor:pointer;padding:0.3em 0.5em}
@media (prefers-reduced-motion:reduce){.closer-bar{animation:none} }
.street{position:relative;padding:clamp(4rem,10vh,7rem) clamp(1rem,4vw,2rem)}
.street__inner{max-width:34rem;margin:0 auto;text-align:center}
.street__title{font-family:var(--sig);text-transform:uppercase;line-height:0.9;font-size:clamp(3rem,14vw,5rem);margin-top:0.6rem}
.street__sub{color:var(--cream-dim);line-height:1.65;margin-top:0.8rem;font-size:0.95rem}
.street__sub b{color:var(--cream)}
.street__rail{display:grid;gap:0.8rem;margin-top:1.6rem;text-align:left}
.street__card{border:1px solid rgba(244,239,230,0.14);border-radius:16px;background:rgba(18,14,11,0.85);padding:1rem 1.1rem;transition:transform 0.25s cubic-bezier(0.2,0.9,0.2,1),border-color 0.25s}
.street__card:hover{transform:translateY(-2px);border-color:rgba(232,200,119,0.45)}
.street__row{display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap}
.street__row + .street__row{margin-top:0.35rem}
.street__name{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.15rem}
.street__tick{color:#e5383b;font-weight:800;font-size:0.86rem;letter-spacing:0.08em}
.street__px{font-variant-numeric:tabular-nums;color:#00c805;font-size:1.05rem}
.street__chg{font-variant-numeric:tabular-nums;font-weight:800;font-size:0.84rem}
.street__cred{margin-left:auto;font-variant-numeric:tabular-nums;color:#2fbf71;font-weight:800;font-size:0.9rem}
.street__cred small{color:var(--cream-dim);font-weight:400;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase}
.street__acts{display:flex;gap:0.6rem;margin-top:0.8rem}
.street__go,.street__trade{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:0.92rem;border-radius:100px;padding:0.6em 1em;border:1px solid rgba(244,239,230,0.22);color:var(--cream)}
.street__go{background:linear-gradient(180deg,#e5383b,#a4161a);border-color:transparent;color:#fff}
.street__trade{color:#00c805;border-color:rgba(0,200,5,0.45)}
.street__all{margin-top:1.3rem}
.street__all a{color:#e5383b;font-weight:800;text-decoration:none}
.fold__btn{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--cream);font:inherit;font-weight:800;font-size:0.92rem;padding:0.55em 0}
.fold__btn::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.45em;border-right:2px solid var(--cream-dim);border-bottom:2px solid var(--cream-dim);transform:translateY(-0.18em) rotate(45deg);transition:transform .25s ease}
.fold.is-open .fold__btn::after{transform:translateY(0.06em) rotate(-135deg)}
.fold__body{display:none}
.fold.is-open .fold__body{display:block}
.tldr{border:1.5px solid rgba(232,200,119,0.5);border-radius:14px;background:rgba(20,16,12,0.85);padding:1rem 1.1rem;margin:1.2rem 0}
.tldr__k{color:var(--ruby-text);font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:800}
.tldr ul{margin:0.5rem 0 0;padding-left:1.1rem}
.tldr li{color:var(--cream-dim);line-height:1.6;font-size:0.92rem;margin-top:0.25rem}
.tldr li b{color:var(--cream)}
/* The summary box is the first thing a reader meets on the docket page and
   it was the least readable thing on it: a near-black slab painted with a
   literal rgba(20,16,12,0.85), holding text that is tokened and therefore
   flips to ink at seven in the morning. Every word inside it — the whole
   plain-English explanation of the case — went dark on dark. Same slab,
   read the other way round: a wash of ink on paper, gold edge intact. */
html[data-theme="light"] .tldr{background:rgba(26,20,13,0.05);border-color:rgba(106,79,14,0.45)}
.leadsheet{position:fixed;inset:0;z-index:260;display:grid;place-items:end center;background:rgba(5,4,3,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:0 0.6rem calc(0.8rem + env(safe-area-inset-bottom,0px))}
.leadsheet__card{width:min(26rem,100%);border-radius:24px;padding:1.25rem 1.2rem 1.1rem;background:linear-gradient(180deg,rgba(32,26,21,0.96),rgba(14,11,9,0.98));box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 24px 60px -16px rgba(0,0,0,0.9);display:flex;flex-direction:column;gap:0.55rem;font-family:"Manrope",system-ui,sans-serif;animation:dockIn 0.28s cubic-bezier(0.2,0.9,0.2,1)}
.leadsheet__card > b{font-size:1.35rem;font-weight:800;color:var(--cream)}
.leadsheet__card > small{font-size:0.84rem;font-weight:600;color:var(--cream-dim);line-height:1.5;margin-bottom:0.2rem}
.leadsheet__card input,.leadsheet__card select,.leadsheet__card textarea{width:100%;border:0;border-radius:14px;padding:0.8rem 0.95rem;resize:none;background:rgba(255,255,255,0.09);color:var(--cream);font-family:inherit;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
.leadsheet__card select{-webkit-appearance:none;appearance:none}
.leadsheet__go{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;touch-action:manipulation;text-decoration:none;text-align:center;margin-top:0.2rem;padding:0.9rem 1rem;border-radius:100px;background:var(--metal);color:#fff;font-family:inherit;font-weight:800;font-size:0.98rem;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.leadsheet__go:disabled{opacity:0.6}
.leadsheet__no{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;touch-action:manipulation;background:none;color:var(--cream-dim);font-family:inherit;font-weight:700;font-size:0.82rem;padding:0.4rem}
.leadsheet__err{font-size:0.8rem;color:var(--ruby-hot)}
html[data-theme="light"] .leadsheet__card{background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(243,238,229,0.98));box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 24px 60px -16px rgba(26,20,13,0.4)}
html[data-theme="light"] .leadsheet__card input,html[data-theme="light"] .leadsheet__card select,html[data-theme="light"] .leadsheet__card textarea{background:rgba(26,20,13,0.06);color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)}
.freq{position:relative;min-height:100vh;min-height:100svh;background:#0a0807;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.freq__stage{position:absolute;inset:0}
.freq__ch{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s}
.freq__ch.is-on{opacity:1;visibility:visible}
.freq__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06)}
.freq__grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,.42),rgba(10,8,7,.18) 34%,rgba(10,8,7,.88) 82%),radial-gradient(90% 70% at 12% 100%,rgba(193,18,31,.34),transparent 62%)}
.freq__body{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:5rem clamp(1.2rem,6vw,5rem) clamp(12rem,26vh,16rem);padding:5rem clamp(1.2rem,6vw,5rem) clamp(12rem,26svh,16rem);max-width:60rem}
.freq__band{font:800 .68rem/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--ruby-hot);margin:0 0 .8rem}
.freq__band span{color:rgba(244,239,230,.6);margin-left:.6em}
.freq__name{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(4.4rem,18vw,11.5rem);line-height:.84;letter-spacing:.01em;color:#f4efe6;margin:0 0 .9rem;text-shadow:calc(var(--tear,0) * -14px) 0 rgba(229,56,59,.85),calc(var(--tear,0) * 14px) 0 rgba(244,239,230,.55)}
.freq__line{font:500 clamp(.95rem,2.6vw,1.08rem)/1.65 var(--body);color:rgba(244,239,230,.82);max-width:38ch;margin:0}
.freq__enter{display:inline-block;margin-top:1.5rem;background:var(--metal);color:#fff;border-radius:99px;padding:.95rem 1.7rem;font:800 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:0 20px 44px -18px rgba(229,56,59,.85)}
.freq__enter:active{transform:translateY(1px)}
.freq__static{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;mix-blend-mode:screen;pointer-events:none}
.freq__console{position:absolute;left:0;right:0;bottom:0;z-index:6;text-align:center;padding:2.6rem clamp(1rem,4vw,3rem) calc(var(--appbar-h,4.6rem) + env(safe-area-inset-bottom,0px) + 1.7rem);background:linear-gradient(180deg,transparent,rgba(6,5,4,.94) 46%)}
.freq__cred{font:700 .58rem var(--body);letter-spacing:.32em;text-transform:uppercase;color:rgba(244,239,230,.42);margin:0 0 .7rem}
.freq__dial{position:relative;height:52px;max-width:620px;margin:0 auto;cursor:grab;touch-action:none;border-radius:14px;outline-offset:4px}
.freq__dial:active{cursor:grabbing}
.freq__ticks{position:absolute;inset:8px 0;background-image:repeating-linear-gradient(to right,rgba(244,239,230,.3) 0 2px,transparent 2px 22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.freq__ticks::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,239,230,.75),rgba(244,239,230,.75));background-size:2px 100%;background-repeat:no-repeat;background-position:10% 0;box-shadow:none;background-image:linear-gradient(rgba(244,239,230,.75),rgba(244,239,230,.75)),linear-gradient(rgba(244,239,230,.75),rgba(244,239,230,.75)),linear-gradient(rgba(244,239,230,.75),rgba(244,239,230,.75));background-position:10% 0,50% 0,90% 0;background-size:2px 100%,2px 100%,2px 100%}
.freq__needle{position:absolute;top:0;bottom:0;left:calc(10% + var(--dial,0) * 80%);width:3px;transform:translateX(-50%);background:var(--ruby-hot);box-shadow:0 0 16px rgba(229,56,59,.95);border-radius:2px}
.freq__stations{display:flex;justify-content:center;gap:.45rem;margin-top:.75rem}
.freq__stations button{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;touch-action:manipulation;border-radius:99px;padding:.55rem 1.05rem;background:transparent;color:rgba(244,239,230,.72);font:800 .66rem var(--body);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(244,239,230,.26)}
.freq__stations button.is-on{color:#fff;background:var(--metal);box-shadow:none}
.freq__hint{font:600 .6rem var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.4);margin:.8rem 0 0}
@media (max-width:640px){.freq__console{padding-bottom:calc(var(--appbar-h,4.6rem) + env(safe-area-inset-bottom,0px) + 4.2rem)}
}
.freq__iris{position:fixed;z-index:999;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#0a0807;transform:scale(0);pointer-events:none}
.freq__iris.go{transition:transform .5s cubic-bezier(.3,0,.7,.4);transform:scale(220)}
@media (prefers-reduced-motion:reduce){.freq__ch{transition:none}
.freq__static{display:none}
.freq__name{text-shadow:none}
.freq__iris{display:none}
}
.freq__stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),radial-gradient(115% 100% at 50% 46%,transparent 58%,rgba(0,0,0,.5) 100%)}
.freq__name{animation:freqBreath 7s ease-in-out infinite alternate}
@keyframes freqBreath{from{transform:none} to{transform:translateY(-6px)} }
.freq__crt{position:absolute;left:0;right:0;top:50%;height:2px;z-index:7;background:#fff;box-shadow:0 0 24px rgba(255,255,255,.9),0 0 60px rgba(229,56,59,.5);transform:scale(0,1);pointer-events:none;animation:freqCrt .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes freqCrt{0%{transform:scale(0,1);opacity:0}
10%{opacity:1}
42%{transform:scale(1,1);opacity:1}
72%{transform:scale(1,70);opacity:.22}
100%{transform:scale(1,140);opacity:0} }
.freq__osd{position:absolute;top:clamp(1rem,4vh,2.4rem);top:clamp(1rem,4svh,2.4rem);right:clamp(1rem,4vw,2.6rem);z-index:6;pointer-events:none;font:800 clamp(.9rem,2.6vw,1.35rem)/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#f4efe6;opacity:0;text-shadow:0 0 18px rgba(229,56,59,.8),1px 0 0 rgba(229,56,59,.85)}
.freq__osd span{color:var(--ruby-hot);margin-left:.4em}
.freq__osd.show{animation:freqOsd 1.7s steps(1) forwards}
@keyframes freqOsd{0%{opacity:0} 4%{opacity:1} 9%{opacity:.25} 14%{opacity:1}
22%{opacity:.6} 28%{opacity:1} 82%{opacity:1} 100%{opacity:0} }
.freq__stations button i{display:block;font-style:normal;font-weight:800;font-size:.52rem;letter-spacing:.22em;opacity:.55;margin-top:.18rem}
@media (prefers-reduced-motion:reduce){.freq__name{animation:none}
.freq__crt,.freq__osd{display:none}
}
[data-drift]{transform:translate3d(calc(var(--gx,0) * var(--drift,10) * 1px),calc(var(--gy,0) * var(--drift,6) * 1px),0);will-change:transform}
@media (prefers-reduced-motion:reduce){[data-drift]{transform:none} }
.freq__tilt{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;touch-action:manipulation;display:inline-block;margin-top:.6rem;border-radius:99px;padding:.5rem 1rem;background:transparent;color:rgba(244,239,230,.6);font:800 .6rem var(--body);letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(244,239,230,.2)}
.freq__tilt.is-on{color:#fff;background:var(--metal);box-shadow:none}
@media (max-height:760px){.freq__body{padding-bottom:23rem}
}
.intu{position:fixed;left:clamp(.8rem,3vw,1.6rem);bottom:calc(var(--appbar-h,4.6rem) + env(safe-area-inset-bottom,0px) + 1.2rem);z-index:320;max-width:min(21rem,86vw);background:rgba(10,8,7,.96);color:var(--cream);border:1px solid rgba(244,239,230,.18);border-left:3px solid var(--ruby-hot);border-radius:16px;padding:.9rem 2.3rem .9rem 1rem;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.intu.on{opacity:1;transform:none}
.intu p{margin:0 0 .5rem;font:600 .82rem/1.5 var(--body)}
.intu a{display:inline-block;color:#fff;text-decoration:none;font:800 .68rem var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--metal);border-radius:99px;padding:.5rem .95rem}
.intu button{position:absolute;top:.45rem;right:.45rem;-webkit-appearance:none;appearance:none;border:0;background:transparent;color:rgba(244,239,230,.55);font-size:.8rem;cursor:pointer;padding:.35rem;line-height:1}
html[data-theme="light"] .intu{background:rgba(247,243,236,.97);color:#141009;border-color:rgba(20,16,12,.18)}
html[data-theme="light"] .intu button{color:rgba(20,16,12,.55)}
@media (prefers-reduced-motion:reduce){.intu{transition:none} }
.freq__stage a{-webkit-user-drag:none;user-drag:none}
html[data-theme="light"] .brand__mark,html[data-theme="light"] .kicker__mark,html[data-theme="light"] .bio__mark img,html[data-theme="light"] .pw__brand img{content:url("../assets/img/m-mark-dark.png")}

/* THE LICENSING DESK, IN PLACE: the record never has to send you away */
.lcd{position:fixed;inset:0;z-index:420;display:none}
.lcd.on{display:block}
.lcd__scrim{position:absolute;inset:0;background:rgba(6,5,4,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lcd__card{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,34rem);
max-height:92vh;max-height:92svh;overflow:auto;background:#100c0b;color:var(--cream);
border:1px solid rgba(244,239,230,.16);border-bottom:0;border-radius:22px 22px 0 0;
padding:1.5rem clamp(1.1rem,4vw,1.8rem) calc(1.5rem + env(safe-area-inset-bottom,0px));
animation:lcdUp .42s cubic-bezier(.2,.7,.2,1)}
@keyframes lcdUp{from{transform:translate(-50%,4%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.lcd__x{position:absolute;top:.9rem;right:1rem;-webkit-appearance:none;appearance:none;border:0;
background:transparent;color:rgba(244,239,230,.6);cursor:pointer;padding:.4rem;line-height:0}
.lcd__x svg{width:20px;height:20px}
.lcd__k{font:800 .62rem var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--ruby-hot);margin:0}
.lcd__h{font-family:var(--sig);text-transform:uppercase;line-height:.92;
font-size:clamp(1.7rem,6vw,2.4rem);margin:.35rem 0 .5rem}
.lcd__sub{font:500 .85rem/1.6 var(--body);color:var(--cream-dim);margin:0 0 .5rem}
.lcd__l{display:block;font:800 .62rem var(--body);letter-spacing:.18em;text-transform:uppercase;
color:var(--cream-dim);margin:.9rem 0 .3rem}
.lcd input,.lcd select,.lcd textarea{width:100%;border-radius:12px;border:1px solid rgba(244,239,230,.2);
background:rgba(0,0,0,.4);color:var(--cream);font:500 .92rem var(--body);padding:.68rem .8rem}
.lcd textarea{resize:vertical}
.lcd__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 .7rem}
.lcd__checks{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1rem}
.lcd__checks label{display:flex;align-items:center;gap:.45rem;font:600 .8rem var(--body);color:var(--cream-dim)}
.lcd__checks input{width:auto}
.lcd__go{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;width:100%;margin-top:1.2rem;
border-radius:99px;padding:.95rem 1.2rem;background:var(--metal);color:#fff;
font:800 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase}
.lcd__go:disabled{opacity:.6;cursor:default}
.lcd__err{margin:.7rem 0 0;font:600 .8rem var(--body);color:var(--ruby-hot)}
.lcd__err a{color:var(--ruby-hot)}
.lcd__done b{display:block;font-family:var(--sig);text-transform:uppercase;font-size:1.5rem;margin:.6rem 0 .4rem}
.lcd__done small{font:500 .88rem/1.6 var(--body);color:var(--cream-dim)}
html[data-theme="light"] .lcd__card{background:#f7f3ec;border-color:rgba(20,16,12,.18)}
html[data-theme="light"] .lcd input,html[data-theme="light"] .lcd select,html[data-theme="light"] .lcd textarea{
background:rgba(255,255,255,.75);color:#141009;border-color:rgba(20,16,12,.2)}
@media (min-width: 30.001rem) { .lcd__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){.lcd__card{animation:none}}

/* ============================================================
   THE GRAB BAR — the tuner stops whispering.
   A thin strip with 10px lettering is not a pattern interrupt. The
   dial is now a full-width band deep enough to land a thumb in,
   carrying its own instruction in display type with chevrons
   breathing outward in both directions. It calms down once a hand
   has actually used it, so it invites rather than nags.
   ============================================================ */
.freq__dial {
  height:clamp(116px, 19vh, 158px);height: clamp(116px, 19svh, 158px);
  max-width: min(1000px, 94vw);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(244,239,230,.05), rgba(244,239,230,.02));
  box-shadow: inset 0 0 0 2px rgba(229,56,59,.55), 0 0 0 0 rgba(229,56,59,.4);
  animation: grabCall 2.4s ease-in-out infinite;
}
.freq__dial:active { cursor: grabbing; }
@keyframes grabCall {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(229,56,59,.5), 0 0 0 0 rgba(229,56,59,.34); }
  50%      { box-shadow: inset 0 0 0 2px rgba(229,56,59,.95), 0 0 44px 6px rgba(229,56,59,.28); }
}
/* the readout lives in the top strip so the words below stay clean */
.freq__ticks { inset: 14px 0 auto 0; height: 30px; }
.freq__needle { top: 10px; bottom: auto; height: 38px; width: 4px; }

.freq__grab {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - 52px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 3vw, 1.6rem); padding: 0 .5rem;
  pointer-events: none; /* the grab it asks for must reach the dial */
}
.freq__chev { flex: none; color: var(--ruby-hot); display: block; }
.freq__chev svg { width: clamp(34px, 9vw, 58px); height: auto; display: block;
  filter: drop-shadow(0 0 10px rgba(229,56,59,.55)); }
.freq__chev:first-child { animation: chevL 1.5s ease-in-out infinite; }
.freq__chev:last-child  { animation: chevR 1.5s ease-in-out infinite; }
@keyframes chevL { 0%,100% { transform: translateX(0); opacity: .7; }
                   50% { transform: translateX(-9px); opacity: 1; } }
@keyframes chevR { 0%,100% { transform: translateX(0); opacity: .7; }
                   50% { transform: translateX(9px); opacity: 1; } }

.freq__grabtxt {
  font-family: var(--display); text-transform: uppercase; line-height: .95;
  font-size: clamp(1.15rem, 5.4vw, 2.15rem); letter-spacing: .015em;
  color: #f4efe6; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.freq__grabtxt b { display: block; color: var(--ruby-hot);
  font-size: clamp(.95rem, 4.4vw, 1.7rem); }

/* a hand has used it: the invitation steps back, the tuner stays */
.freq.hands-on .freq__dial { animation: none;
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.22); }
.freq.hands-on .freq__grab { opacity: .3; transition: opacity .8s ease; }
.freq.hands-on .freq__chev { animation: none; }

.freq__hint { font-size: .72rem; color: rgba(244,239,230,.6); margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .freq__dial { animation: none; box-shadow: inset 0 0 0 2px rgba(229,56,59,.7); }
  /* the :first-child/:last-child rules above outrank a bare .freq__chev,
     so the stillness has to be written at the same specificity */
  .freq__chev:first-child, .freq__chev:last-child { animation: none; opacity: 1; }
}

/* ============================================================
   THE TAKEOFF CALL — the runway stops muttering.
   "VR ahead · board it slow" was 0.7rem of grey at the bottom of a
   moving frame. The rails now carry a runway designator and the
   call sits centre-bottom at display size, flashing the way a
   hold-short bar does.
   ============================================================ */
.work__runway-note {
  /* clears the floating lead pill that parks bottom-right on a phone */
  bottom: clamp(5.4rem, 16vh, 8.5rem);
  font-size: unset; letter-spacing: unset; text-transform: uppercase;
  color: unset; white-space: nowrap; text-align: center; line-height: 1;
}
.work__runway-note span {
  display: block; font-family: var(--display);
  font-size: clamp(1.9rem, 8.5vw, 3.6rem); color: var(--vaunt, #f84c0a);
  text-shadow: 0 0 26px rgba(248,76,10,.55), 0 4px 30px rgba(0,0,0,.9);
  animation: rwyFlash 1s steps(1) infinite;
}
.work__runway-note b {
  display: block; margin-top: .25em; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 5.6vw, 2.3rem); color: #f4efe6;
  text-shadow: 0 3px 22px rgba(0,0,0,.95);
}
@keyframes rwyFlash { 0%,49% { opacity: 1; } 50%,100% { opacity: .34; } }

/* the edge rails read like runway markings, not a repeated instruction */
.work__runway-rail b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.8rem, 2.6vw, 1.15rem); letter-spacing: .18em;
  color: rgba(244,239,230,.85); writing-mode: vertical-rl;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
/* the centreline: dashes running away down the middle of the frame */
.work__runway::before {
  content: ""; position: absolute; left: 50%; top: 12%; bottom: 26%; width: 6px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg,
    rgba(244,239,230,.5) 0 34px, transparent 34px 74px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  animation: rwyRun 1.1s linear infinite;
}
@keyframes rwyRun { to { background-position-y: 74px; } }

@media (prefers-reduced-motion: reduce) {
  .work__runway-note span { animation: none; opacity: 1; }
  .work__runway::before { animation: none; }
}

/* the monument steps down rather than shove the grab bar off the screen */
.freq__name { font-size: calc(clamp(4.4rem, 18vw, 11.5rem) * var(--fit, 1)); }
.freq__line { font-size: calc(clamp(.95rem, 2.6vw, 1.08rem) * var(--fit, 1)); }
/* the supporting copy and the door ride the same fit */
.freq__band { font-size: calc(.68rem * var(--fit, 1)); }
.freq__enter { transform: scale(var(--fit, 1)); transform-origin: left center; }

/* THE CONSOLE EARNS ITS HEIGHT. The grab bar is worth its size; the
   furniture around it is not, so on a short screen the credit line and
   the padding give way before the monument type does. */
.freq__console { padding-top: 1.6rem; }
@media (max-height: 760px) {
  .freq__cred { display: none; }
  .freq__console { padding-top: 1rem; }
  .freq__stations { margin-top: .55rem; }
  .freq__hint { margin-top: .55rem; }
}

/* ============================================================
   THE GATE — one question, two real answers, and a blurred film
   behind both of them until one is pressed.

   This card was a briefing: three rules and a three-second
   countdown, after which the cabin opened whether or not anybody
   had read a word. A tap anywhere opened it early. So the pane
   was never withholding the film — it was delaying it, which is
   the thing a visitor learns to click past.

   Now the picture itself is blurred, in the canvas (see THE
   GATE'S BLUR, below), and the pane on top of it is only the
   question. Waiting does not answer it, clicking away does not
   answer it, and dragging the smeared cabin does not answer it.
   Allow clears the blur. Cancel keeps it and hands back the
   scroll, and says a reload is how to change your mind.
   ============================================================ */
.vrbrief { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  padding: 1.1rem; opacity: 0; visibility: hidden;
  background: rgba(6,5,4,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .5s ease, visibility .5s; pointer-events: none; }
.vrbrief.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
/* THE BLUR ITSELF, and it has to live here rather than on the canvas.

   The obvious version — filter: blur() on .workvr__canvas — draws black.
   The cabin is a WebGL canvas, and a CSS filter on one forces it down a
   compositing path that reads a drawing buffer already presented and
   cleared: you get the element's geometry filled with nothing. So the pane
   in front does the blurring instead, through backdrop-filter, which is the
   path this card was already using at 6px and is known good here.

   The visitor cannot tell the difference. The picture is smeared, the shape
   of the cabin is all that survives, and it stays that way until Allow. */
.vrbrief--gate { background: radial-gradient(125% 95% at 50% 45%,
    rgba(6,5,4,.42), rgba(6,5,4,.82));
  -webkit-backdrop-filter: blur(32px) saturate(.8) brightness(.85);
  backdrop-filter: blur(32px) saturate(.8) brightness(.85); }
.vrbrief.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* Cancelled. The pane stops being a wall — the screen and the scroll are
   handed straight back — but the card stays where it is with the one thing
   the visitor still needs to read, and the film behind it stays blurred
   until a reload. (the entrance animation fills forwards, so it has to be
   cleared before a transform of ours can land) */
.vrbrief.is-declined { pointer-events: none; }
.vrbrief.is-declined .vrbrief__card { pointer-events: none; animation: none;
  transform: scale(.94); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.vrbrief.is-declined .vrbrief__lede,
.vrbrief.is-declined .vrgate__acts,
.vrbrief.is-declined .vrgate__note { display: none; }

.vrbrief__card { position: relative; width: min(34rem, 94vw); max-height: 100%; overflow: auto;
  -webkit-user-select: none; user-select: none;
  text-align: center; padding: 1.9rem 1.7rem 1.7rem; border-radius: 26px; color: var(--cream);
  background: linear-gradient(180deg, rgba(24,18,16,.96), rgba(9,7,6,.975));
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.16), inset 0 1px 0 rgba(255,255,255,.12),
    0 44px 110px -30px rgba(0,0,0,.98);
  animation: vrBriefIn .6s cubic-bezier(.16,1.03,.3,1) both,
             vrBriefBreathe 2.6s ease-in-out .6s infinite; }
@keyframes vrBriefIn { from { opacity: 0; transform: translateY(20px) scale(.9); }
                       to { opacity: 1; transform: none; } }
/* the pane is dark and still; one slow lit edge keeps the card alive on it
   without another thing blinking at the visitor */
@keyframes vrBriefBreathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(244,239,230,.16), inset 0 1px 0 rgba(255,255,255,.12),
               0 44px 110px -30px rgba(0,0,0,.98); }
  50%      { box-shadow: inset 0 0 0 1px rgba(248,76,10,.5), inset 0 1px 0 rgba(255,255,255,.14),
               0 44px 110px -30px rgba(0,0,0,.98), 0 0 44px -6px rgba(248,76,10,.42); }
}
.vrbrief__logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(244,239,230,.2); }
.vrbrief__k { margin: .75rem 0 .5rem; font: 800 .63rem var(--body); letter-spacing: .28em;
  text-transform: uppercase; color: rgba(244,239,230,.62); }

/* THE LINE THEY ACTUALLY READ. Display face, two stacked lines, the
   second one in the operator's colour: the rule and the invitation, in
   the order the visitor needs them. */
.vrbrief__title { margin: 0 0 .6rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 6.8vw, 2.9rem); line-height: .98; letter-spacing: .012em;
  text-transform: uppercase; color: #fff; }
.vrbrief__title span { display: block; }
.vrbrief__title span + span { color: var(--vaunt); }
.vrbrief__lede { margin: 0 auto 1.15rem; max-width: 29rem;
  font: 500 .95rem/1.45 var(--body); color: var(--cream-dim); transition: opacity .4s ease; }

/* THE TWO ANSWERS. A permission prompt, so it looks like one: the
   affirmative in the operator's colour, the refusal in negative — an
   outline and nothing else — and both of them real. */
.vrgate__acts { margin: 1.35rem auto 0; display: grid; gap: .6rem; }
@media (min-width: 520px) {
  .vrgate__acts { grid-auto-flow: column; justify-content: center; }
}
.vrgate__btn { -webkit-appearance: none; appearance: none; cursor: pointer; border: 0;
  border-radius: 99px; padding: .95rem 1.9rem; font: 800 .8rem var(--body);
  letter-spacing: .16em; text-transform: uppercase;
  transition: transform .18s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.vrgate__btn:active { transform: scale(.97); }
.vrgate__allow { background: var(--metal); color: #fff;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.95); }
.vrgate__deny { background: transparent; color: rgba(244,239,230,.66);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.26); }
.vrgate__deny:hover { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(244,239,230,.52); }
.vrgate__note { margin: .95rem auto 0; max-width: 27rem;
  font: 500 .78rem/1.5 var(--body); color: rgba(244,239,230,.5); }
.vrgate__note b { color: rgba(244,239,230,.78); font-weight: 800; }

/* what Cancel says back */
.vrgate__after { margin: 1.15rem auto 0; padding: 1rem 1.1rem; max-width: 28rem;
  border-radius: 16px; text-align: left; background: rgba(244,239,230,.06);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.12); }
.vrgate__after[hidden] { display: none; }
.vrgate__afterh { margin: 0; font: 800 .68rem var(--body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--vaunt); }
.vrgate__afterp { margin: .5rem 0 0; font: 500 .95rem/1.5 var(--body); color: var(--cream-dim); }
.vrgate__afterp b { color: var(--cream); font-weight: 800; }

/* a short viewport (landscape phones, small laptops) gets the same card
   with the trimmings taken off, rather than a card that runs off the pane */
@media (max-height: 720px) {
  .vrbrief__card { padding: 1.35rem 1.3rem 1.2rem; }
  .vrbrief__logo { width: 42px; height: 42px; }
  .vrbrief__title { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .vrbrief__lede { display: none; }
  .vrgate__acts { margin-top: 1rem; }
  .vrgate__btn { padding: .8rem 1.5rem; font-size: .74rem; }
  .vrgate__note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vrbrief__card { animation: none; }
  .vrgate__btn { transition: none; }
  .vrgate__btn:active { transform: none; }
}

/* the cabin is Vaunt's, so the gate wears Vaunt orange, not house ruby */
#work .vrgate__allow { background: linear-gradient(120deg, var(--vaunt-deep), var(--vaunt)); }

/* THE THUMB LANE. The control rail is ~200px of labelled buttons anchored
   at top:50%, which on a 390px phone put the Motion button dead in the
   middle of the cabin: the one place a thumb naturally lands to drag.
   Tightening the labels pulls its left edge clear of centre, which is the
   whole fix — moving the rail up hits the tag, moving it down hits the hire
   pill and the dock. The cap keeps it clear on any narrow screen, and the
   labels stay, because an unlabelled icon is not an improvement. */
@media (max-width: 560px) {
  .workvr__side { max-width: 40vw; align-items: flex-end; gap: .4rem; }
  .workvr__btn { font-size: .58rem; letter-spacing: .06em; padding: .5em .75em; gap: .35em; }
  .workvr__btn--land { padding: .55em .85em; letter-spacing: .1em; }
  .workvr__icon { width: 13px; height: 13px; }
}

/* ============================================================
   THE URGENT TAG. Most spots in the cabin sit politely and wait
   to be found. The bag is the one thing the scene is actually
   selling, so it flashes on a fast two-step and never stops.
   ============================================================ */
.vr360-spot.is-urgent span { font-weight: 800; letter-spacing: .2em;
  border-width: 2px; animation: vrUrgent .62s steps(2, jump-none) infinite; }
.vr360-spot.is-urgent i { animation: vrUrgentDot .62s steps(2, jump-none) infinite; }
.vr360-spot.is-urgent i::after { animation-duration: 1.1s; }
@keyframes vrUrgent {
  0%, 100% { background: var(--ruby); border-color: #fff; color: #fff;
             box-shadow: 0 0 18px 2px rgba(229,56,59,.85); }
  50%      { background: #fff; border-color: var(--ruby); color: #12100e;
             box-shadow: 0 0 26px 5px rgba(255,255,255,.75); }
}
@keyframes vrUrgentDot {
  0%, 100% { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.95); }
  50%      { background: var(--ruby-hot); box-shadow: 0 0 16px rgba(229,56,59,1); }
}
#work .vr360-spot.is-urgent span { animation-name: vrUrgentV; }
@keyframes vrUrgentV {
  0%, 100% { background: var(--vaunt); border-color: #fff; color: #fff;
             box-shadow: 0 0 18px 2px rgba(248,76,10,.85); }
  50%      { background: #fff; border-color: var(--vaunt); color: #12100e;
             box-shadow: 0 0 26px 5px rgba(255,255,255,.75); }
}

/* ============================================================
   THE EXIT. Land used to bob gently once every three seconds,
   which read as decoration. It is the way out of a sealed room,
   so it now behaves like the sign over one: a hard, fast
   two-step that cannot be mistaken for ambience.
   ============================================================ */
.workvr__btn--land { animation: vrExitFlash .58s steps(2, jump-none) infinite,
  vrExitPump 1.16s ease-in-out infinite; }
@keyframes vrExitFlash {
  0%, 100% { background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff;
             box-shadow: 0 0 12px 2px rgba(229,56,59,.9), inset 0 1px 0 rgba(255,255,255,.25); }
  50%      { background: #fff; color: #12100e;
             box-shadow: 0 0 30px 7px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.6); }
}
@keyframes vrExitPump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.workvr__btn--land::after { animation-duration: 1.6s; }
.workvr__icon--jet { animation-duration: 1.16s; }

/* ============================================================
   THE CABIN SIGN. The seatbelt light going off, announced the
   way a cabin announces it: thrown across the whole screen,
   flashed, and gone. Only shown to a phone that really did hand
   over its motion — it is a statement of fact, not a hint.
   ============================================================ */
.vrsign { position: absolute; inset: 0; z-index: 9; margin: 0;
  display: grid; place-items: center; padding: 1.4rem; text-align: center;
  pointer-events: none; opacity: 0; visibility: hidden; }
.vrsign b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 8.4vw, 4.6rem); line-height: .95;
  letter-spacing: .012em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 32px rgba(0,0,0,.85), 0 6px 40px rgba(0,0,0,.7); }
.vrsign.is-flash { visibility: visible;
  animation: vrSignHold 4.2s ease-out both; }
.vrsign.is-flash b { animation: vrSignBeat .42s steps(2, jump-none) 7,
  vrSignIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vrSignHold { 0% { opacity: 0; } 6%, 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vrSignIn { from { transform: scale(.86); } to { transform: none; } }
@keyframes vrSignBeat {
  0%, 100% { color: #fff; }
  50%      { color: var(--vaunt); }
}
/* while the cabin is talking, everything else stands down */
.workvr.is-announcing .vr360-spots,
.workvr.is-announcing .workvr__side,
.workvr.is-announcing .workvr__tag { opacity: 0; pointer-events: none;
  transition: opacity .45s ease; }
.workvr .vr360-spots, .workvr .workvr__side, .workvr .workvr__tag {
  transition: opacity .5s ease .25s; }

/* ============================================================
   WHILE THE GATE IS UP. The cabin's own furniture stands down —
   there is nothing to press behind a question — and the canvas
   goes pointer-dead, so a drag on the smeared film is simply a
   scroll, which is what "scroll on to continue" needs it to be
   after Cancel. The blur is on the pane; see .vrbrief--gate.
   ============================================================ */
.workvr.is-gated .workvr__canvas { cursor: default; pointer-events: none; }
.workvr.is-gated .vr360-spots,
.workvr.is-gated .workvr__side,
.workvr.is-gated .workvr__tag { opacity: 0; pointer-events: none; }
/* the one engine without backdrop-filter gets the canvas filter after all:
   black is wrong, but so is a clear view of the thing being withheld. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workvr.is-gated .workvr__canvas { filter: blur(30px) brightness(.8); transform: scale(1.12); }
}


/* Stillness, restated here. The blanket reduced-motion rule for the cabin
   sits earlier in this file, so the flashes declared above would simply
   outrank it — the loudest things on the page have to be quieted last. */
@media (prefers-reduced-motion: reduce) {
  .workvr__btn--land, .workvr__btn--land::after, .workvr__icon--jet,
  .vr360-spot.is-urgent span, .vr360-spot.is-urgent i,
  #work .vr360-spot.is-urgent span,
  .vrsign.is-flash, .vrsign.is-flash b { animation: none; }
  /* still said, just not shouted: the sign holds instead of beating */
  .vrsign.is-flash { visibility: visible; opacity: 1; }
  .workvr__btn--land { background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff; }
  .vr360-spot.is-urgent span { background: var(--ruby); border-color: #fff; color: #fff; }
  #work .vr360-spot.is-urgent span { background: var(--vaunt); }
}

/* ============================================================
   THE VOLUME CALL. Apple's Double Click to Pay works because it
   does not describe the button — it draws one against the screen
   edge the real button is behind and animates toward it. This is
   that, for volume: the rocker sits flush in the bezel on the
   side this device actually keeps its keys, at roughly the height
   they sit, and the chevrons run outward into it.
   ============================================================ */
.volcall { position: fixed; z-index: 120; display: flex; align-items: center;
  gap: .5rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1); }
.volcall.is-in { opacity: 1; transform: none; }

/* the two side placements: pinned to the bezel, a third of the way down,
   which is where a thumb finds the rocker on both platforms */
.volcall--left  { left: 0;  top: 27%; flex-direction: row-reverse; transform: translateX(-14px); }
.volcall--right { right: 0; top: 27%; transform: translateX(14px); }
.volcall--top   { top: 0; right: 12%; flex-direction: column-reverse; transform: translateY(-14px); }
/* No hardware to point at, so it points up at the site's own Sound pill and
   sits under it. Bottom-centre is not free: the tuner's grab bar lives there. */
.volcall--none  { right: .9rem; top: calc(3.9rem + env(safe-area-inset-top));
  flex-direction: column; align-items: flex-end; gap: .15rem; transform: translateY(-12px); }
.volcall--none .volcall__chevs { flex-direction: column; }
.volcall--none .volcall__card { align-items: flex-end; text-align: right; }

.volcall__card { display: flex; flex-direction: column; align-items: flex-start;
  gap: .1rem; padding: .7rem .85rem .75rem; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(24,18,16,.95), rgba(10,8,7,.97));
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.15), 0 26px 60px -22px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width:63vw; }
.volcall--left .volcall__card { align-items: flex-end; text-align: right; }
.volcall__spkwrap { display: block; margin-bottom: .15rem; }
.volcall__spk { width: 20px; height: 20px; fill: none; stroke: var(--ruby-hot);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.volcall__big { font: 800 .95rem/1.15 var(--body); letter-spacing: .01em; color: var(--cream); font-size:.86rem; }
.volcall__sub { font: 500 .74rem/1.3 var(--body); color: rgba(244,239,230,.6); font-size:.68rem; }

/* the bezel key itself */
/* Apple draws this big enough to see from arm's length, and so does this:
   a lit key with a halo breathing out of the bezel behind it */
.volcall__edge { display: block; position: relative;
  filter: drop-shadow(0 0 16px rgba(229,56,59,.95)); }
.volcall__edge::before { content: ""; position: absolute; left: -60%; top: -14%;
  width: 220%; height: 128%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229,56,59,.55), transparent 70%);
  animation: volHalo 1.15s ease-in-out infinite; }
.volcall__rocker { display: block; position: relative; width: 17px; height: 70px; }
.volcall--top .volcall__rocker { width: 70px; height: 17px; }
.volcall__key { fill: rgba(244,239,230,.4); }
.volcall__key--up { fill: var(--ruby-hot); animation: volKey 1.15s ease-in-out infinite; }
@keyframes volKey { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes volHalo { 0%, 100% { opacity: .25; transform: scale(.82); }
                     50%      { opacity: .9;  transform: scale(1.06); } }

.volcall__chevs { display: flex; align-items: center; }
.volcall--top .volcall__chevs { flex-direction: column; }
.volcall__chev { width: 18px; height: 18px; fill: none; stroke: var(--ruby-hot);
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; margin: -4px;
  filter: drop-shadow(0 0 7px rgba(229,56,59,.75));
  animation: volChev 1.15s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.volcall--top .volcall__chev { margin: -3px 0; }
@keyframes volChev { 0%, 100% { opacity: .18; } 45% { opacity: 1; } }

/* THE RISE. Taken, and holding: the chevrons stop nagging inward and the
   key goes solid, because the ask has been answered — but the rocker stays
   lit and on screen for the whole fade-up, which is the entire point of
   having pointed at it. The bar under the card fills as the record comes up. */
.volcall.is-playing .volcall__chev { animation: none; opacity: .32; }
.volcall.is-playing .volcall__key--up { animation: none; opacity: 1; }
.volcall.is-playing .volcall__edge::before { animation: volHaloCalm 2.4s ease-in-out infinite; }
@keyframes volHaloCalm { 0%, 100% { opacity: .3; transform: scale(.9); }
                         50%      { opacity: .6; transform: scale(1.02); } }
.volcall.is-playing .volcall__card { position: relative; padding-bottom: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(229,56,59,.45), 0 26px 60px -22px rgba(0,0,0,.95); }
.volcall.is-playing .volcall__spk { stroke: var(--ruby-hot); animation: volSpk 1s ease-in-out infinite; }
@keyframes volSpk { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* the fill: 4.5s, matched to the onset ramp in the engine */
.volcall.is-playing .volcall__card::before { content: ""; position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: .55rem; height: 3px; border-radius: 3px;
  background: var(--ruby-hot); transform-origin: left center;
  animation: volFill 4.5s linear forwards; }
.volcall--left.is-playing .volcall__card::before { transform-origin: right center; }
@keyframes volFill { from { transform: scaleX(.02); } to { transform: scaleX(1); } }

/* phones are narrow: the card gives ground before the pointer does */
@media (min-width: 560.02px) {
  .volcall__card { padding: .8rem 1.05rem .85rem; max-width: revert; }
  .volcall__big { font-size: .95rem; }
  .volcall__sub { font-size: .74rem; }
  .volcall__chev { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .volcall { transition: opacity .2s ease; transform: none; }
  .volcall--none, .volcall--none.is-in { transform: translateX(-50%); }
  .volcall__key--up, .volcall__chev, .volcall__edge::before,
  .volcall.is-playing .volcall__edge::before, .volcall.is-playing .volcall__spk { animation: none; }
  .volcall__chev { opacity: 1; }
  .volcall__edge::before { opacity: .6; }
  /* the fill still reports the rise, it just does not ease */
  .volcall.is-playing .volcall__card::before { animation: volFill 4.5s linear forwards; }
}

/* ============================================================
   THE PROVENANCE MARK. Only ever drawn on a frame that really
   carries a camera signature — see js/provenance.js. It is a
   receipt, not a decoration, so it sits quiet on the image and
   goes somewhere independent when pressed.
   ============================================================ */
.provmark { position: absolute; left: .6rem; bottom: .6rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .4em; text-decoration: none;
  padding: .4em .7em .4em .55em; border-radius: 100px;
  background: rgba(10,8,7,.72); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 .62rem var(--ui, var(--body)); letter-spacing: .14em; text-transform: uppercase;
  opacity: .82; transition: opacity .25s ease, box-shadow .25s ease, background .25s ease; }
.provmark:hover, .provmark:focus-visible { opacity: 1; background: rgba(10,8,7,.9);
  box-shadow: inset 0 0 0 1px var(--ruby-hot); }
.provmark svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ruby-hot);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .provmark { left: .45rem; bottom: .45rem; padding: .35em .55em .35em .45em;
    font-size: .55rem; letter-spacing: .1em; }
  .provmark span { display: none; }   /* the shield alone on a small frame */
  .provmark svg { width: 15px; height: 15px; }
}

/* ============================================================
   THE GATE. Four questions between "book a call" and a
   calendar. It is the highest-value surface on the site, so it
   is built like a room and not like a form: one question a
   screen, big targets, and a bar that shows the end is close.
   ============================================================ */
.gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 1rem; background: rgba(6,5,4,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s ease; }
.gate.is-in { opacity: 1; }
.gate__card { position: relative; width: min(34rem, 96vw); max-height:92vh;max-height: 92svh;
  display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(24,18,16,.98), rgba(10,8,7,.99));
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.16), 0 40px 100px -30px rgba(0,0,0,.95);
  transform: translateY(16px) scale(.98); transition: transform .34s cubic-bezier(.2,.7,.2,1); }
.gate.is-in .gate__card { transform: none; }

.gate__x { position: absolute; right: .7rem; top: .7rem; z-index: 2; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(244,239,230,.1); color: var(--cream); }
.gate__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; }
.gate__x:hover { background: var(--ruby); color: #fff; }

.gate__bar { height: 3px; background: rgba(244,239,230,.12); flex: none; }
.gate__bar i { display: block; height: 100%; width: 0; background: var(--ruby-hot);
  transition: width .4s cubic-bezier(.2,.7,.2,1); }

.gate__body { padding: 1.8rem 1.5rem 1.6rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gate__k { margin: 0 0 .5rem; font: 800 .58rem var(--body); letter-spacing: .26em;
  text-transform: uppercase; color: var(--ruby-hot); }
.gate__body h2 { margin: 0 0 .35rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.15rem); line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase; color: var(--cream); }
.gate__sub { margin: 0 0 1.1rem; font: 500 .88rem/1.5 var(--body); color: var(--cream-dim); }
.gate__sub a { color: var(--ruby-hot); font-weight: 700; }
.gate__lab { margin: 1.1rem 0 .5rem; font: 800 .6rem var(--body); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(244,239,230,.55); }

/* the fork: two big doors, priced in the open */
.gate__picks { display: grid; gap: .7rem; }
.gate__pick { display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 1.05rem 1.1rem 1.1rem; border: 0; border-radius: 16px; color: var(--cream);
  background: rgba(244,239,230,.05); box-shadow: inset 0 0 0 1px rgba(244,239,230,.13);
  transition: background .2s, box-shadow .2s, transform .2s; }
.gate__pick:hover, .gate__pick:focus-visible { background: rgba(229,56,59,.12);
  box-shadow: inset 0 0 0 1px var(--ruby-hot); transform: translateY(-2px); }
.gate__pick b { display: block; font: 800 1rem var(--body); margin-bottom: .2rem; }
.gate__pick small { display: block; font: 500 .82rem/1.45 var(--body); color: var(--cream-dim); }
.gate__tag { display: inline-block; margin-top: .6rem; font: 800 .6rem var(--body);
  letter-spacing: .14em; text-transform: uppercase; font-style: normal;
  padding: .35em .7em; border-radius: 100px; }
.gate__tag--paid { background: var(--ruby); color: #fff; }
.gate__tag--free { background: rgba(244,239,230,.14); color: var(--cream); }

.gate__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.gate__chip { cursor: pointer; border: 0; border-radius: 100px; padding: .6em 1em;
  font: 700 .78rem var(--body); color: var(--cream-dim);
  background: rgba(244,239,230,.06); box-shadow: inset 0 0 0 1px rgba(244,239,230,.13);
  transition: background .18s, color .18s, box-shadow .18s; }
.gate__chip:hover { color: var(--cream); }
.gate__chip.is-on { background: var(--ruby); color: #fff; box-shadow: inset 0 0 0 1px var(--ruby-hot); }

.gate__in { display: block; width: 100%; margin-bottom: .55rem; padding: .8em .9em;
  border: 0; border-radius: 12px; font: 500 .95rem var(--body); color: var(--cream);
  background: rgba(244,239,230,.06); box-shadow: inset 0 0 0 1px rgba(244,239,230,.14); }
.gate__in::placeholder { color: rgba(244,239,230,.4); }
.gate__in:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ruby-hot); }
.gate__in--area { resize: vertical; min-height: 4.5rem; }

.gate__row { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.gate__go { flex: 1; cursor: pointer; border: 0; border-radius: 100px; padding: .95em 1.4em;
  font: 800 .78rem var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 12px 30px -10px rgba(229,56,59,.8); text-align: center; text-decoration: none;
  transition: filter .2s, opacity .2s; }
.gate__go:hover { filter: brightness(1.12); }
.gate__go[disabled] { opacity: .34; cursor: not-allowed; box-shadow: none; }
.gate__go--wide { display: block; width: 100%; margin-top: 1.2rem; }
.gate__back { cursor: pointer; border: 0; border-radius: 100px; padding: .95em 1.2em;
  font: 700 .74rem var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-dim); background: rgba(244,239,230,.07); }
.gate__back:hover { color: var(--cream); }
.gate__back--wide { display: block; width: 100%; margin-top: .5rem; }
.gate__err { margin: .8rem 0 0; font: 600 .8rem/1.45 var(--body); color: #ff6b6e; }
.gate__err a { color: #ff6b6e; }

@media (prefers-reduced-motion: reduce) {
  .gate, .gate__card, .gate__bar i, .gate__pick { transition: none; }
  .gate__card { transform: none; }
}

/* ============================================================
   THE HIRE PAGE. The page that converts, so the prices sit at
   the top and the résumé sits at the bottom. The two priced
   doors and the Teardown product were removed on the owner's
   call, and their rules went with them: a stylesheet that
   still dresses a deleted section is a map of a demolished
   building.
   ============================================================ */
.hire__underline { margin-top: .8rem; text-align: center;
  font: 600 .78rem/1.5 var(--body); letter-spacing: .04em; color: var(--cream-dim); }

/* the three résumé columns are gone: two of them repeated the scan
   captions and the timeline word for word, and the third became the
   fact column beside the portrait (.who__facts, at the end of this
   sheet). Their rules went with them. */

/* The page that converts gets more room than a document page: the offer,
   the résumé and the receipts all want to be scanned side by side rather
   than read in a single narrow column. Scoped to the hire page so no other
   page's measure changes. */
@media (min-width: 1100px) {
  .hirepage .bexp { max-width: 76rem; }
  .hirepage .bexp__legend { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* the role door leads with the offer, not the ask — a recruiter should be
   able to tell in one glance that this branch costs them nothing */
.gate__pick--role { background: linear-gradient(180deg, rgba(229,56,59,.16), rgba(229,56,59,.05));
  box-shadow: inset 0 0 0 1px rgba(229,56,59,.45); }
.gate__tag--fast { background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff; }

/* ============================================================
   THE POCKET. The record, minimised to the corner of every
   other page — film, lyric line, transport. It sits above the
   app bar and never on top of it, and on a phone it spans the
   width because a 90px tile with a lyric in it is unreadable.
   ============================================================ */
:root { --pocket-h: 4.9rem; }
.pocket { position: fixed; z-index: 198; display: grid; align-items: center;
  grid-template-columns: auto minmax(0,1fr) auto auto; gap: .6rem;
  right: clamp(.9rem, 4vw, 2rem);
  bottom: calc(var(--appbar-h, 4.6rem) + 1.1rem + env(safe-area-inset-bottom));
  width: min(21rem, calc(100vw - 2rem)); padding: .5rem .6rem .5rem .5rem;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(24,18,16,.97), rgba(10,8,7,.98));
  box-shadow: inset 0 0 0 1px rgba(244,239,230,.16), 0 26px 60px -22px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2,.7,.2,1); }
.pocket.is-in { opacity: 1; transform: none; }

.pocket__tile { position: relative; display: block; width: 74px; height: 56px;
  border-radius: 11px; overflow: hidden; flex: none; text-decoration: none;
  background: #000; box-shadow: inset 0 0 0 1px rgba(244,239,230,.14); }
.pocket__film { width: 100%; height: 100%; object-fit: cover; display: block; }
.pocket__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.82)); }
.pocket__lyr { position: absolute; left: 4px; right: 4px; bottom: 3px;
  font: 700 .5rem/1.15 var(--body); color: #fff; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.pocket__lyr.is-beat { animation: pocketBeat .5s ease-out; }
@keyframes pocketBeat { from { opacity: .2; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.pocket__body { min-width: 0; }
.pocket__title { display: block; font: 800 .84rem var(--body); color: var(--cream);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pocket__title:hover { color: var(--ruby-hot); }
.pocket__sub { display: block; font: 600 .66rem var(--body); letter-spacing: .06em;
  color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pocket.is-held .pocket__sub { color: var(--ruby-hot); }

.pocket__play, .pocket__x { border: 0; cursor: pointer; background: none; flex: none;
  display: grid; place-items: center; padding: 0; }
.pocket__play { width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  box-shadow: 0 8px 20px -8px rgba(229,56,59,.9); }
.pocket__play svg { width: 15px; height: 15px; fill: #fff; }
.pocket.is-held .pocket__play { animation: pocketNudge 1.5s ease-in-out infinite; }
@keyframes pocketNudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.11); } }
.pocket__x { width: 24px; height: 24px; border-radius: 50%; color: var(--cream-dim); }
.pocket__x:hover { color: var(--cream); background: rgba(244,239,230,.1); }
.pocket__xic { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; }

.pocket__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(244,239,230,.14); }
.pocket__bar b { display: block; height: 100%; width: 0; background: var(--ruby-hot); }
.pocket__audio { display: none; }

/* the page's own action pill parks in this same corner at this same height,
   so when the record is in the pocket the pill steps up over it rather than
   sitting on its controls */
.pocket-on .mh__cta { bottom: calc(var(--appbar-h, 4.6rem) + 1.5rem
  + env(safe-area-inset-bottom) + var(--pocket-h)); }

@media (max-width: 560px) {
  .pocket { left: .6rem; right: .6rem; width: auto; }
  .pocket__tile { width: 64px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .pocket { transition: opacity .2s ease; transform: none; }
  .pocket.is-in { transform: none; }
  .pocket__lyr.is-beat, .pocket.is-held .pocket__play { animation: none; }
}

/* ============================================================
   THE MUSIC EMBLEM. The supplied mark, stripped of its navy so
   it takes the bar's own colour — cream at rest, ruby while a
   record plays. Two things it needs that the other tab icons
   do not: it is DRAWN, not stroked, and it is nearly 2:1, so
   forcing it into the square icon box would shrink it to a
   smudge. It gets its own box at the same optical height.
   ============================================================ */
.appbar__tab .appbar__eq { width: auto; height: 1.42rem;
  fill: currentColor; stroke: none; }
/* npEq and npArrow retired with the rest of the is-playing equaliser; see
   the note where .is-beacon lives. The sizing rule above stays, and now has
   a second and better user: the Equity Uprise tab draws the same lockup. */

/* ============================================================
   THE RATE CARD. Every number the house charges, one grid. The
   deep funnels keep their rooms; the prices live here.
   ============================================================ */
.hire__rates { display: grid; gap: .7rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 680px) { .hire__rates { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 1100px) { .hire__rates { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hire__rate { padding: 1.05rem 1.05rem 1.15rem; border-radius: 16px;
  background: rgba(244,239,230,.04); box-shadow: inset 0 0 0 1px rgba(244,239,230,.12);
  display: flex; flex-direction: column; }
.hire__rate--lead { background: linear-gradient(180deg, rgba(229,56,59,.16), rgba(229,56,59,.05));
  box-shadow: inset 0 0 0 1px rgba(229,56,59,.45); }
.hire__rate-k { margin: 0 0 .45rem; font: 800 .6rem var(--body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream-dim); }
.hire__rate-p { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.hire__rate-p b { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: .95; color: var(--cream); }
.hire__rate-p span { font: 700 .58rem var(--body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cream-dim); }
.hire__rate-b { margin: 0; font: 500 .8rem/1.5 var(--body); color: var(--cream-dim); }
.hire__rate-b a { color: var(--ruby-hot); font-weight: 700; text-decoration: none; }

/* ============================================================
   THE TIMELINE. Where he worked, what he ran, what got signed —
   a ruby rail with the years standing on it, documents attached
   where documents exist.
   ============================================================ */
.hire__tl { list-style: none; margin: 0; padding: 0; position: relative; }
.hire__tl::before { content: ""; position: absolute; left: 4.35rem; top: .4rem; bottom: .4rem;
  width: 2px; background: linear-gradient(180deg, var(--ruby-hot), rgba(229,56,59,.15)); }
.hire__tl li { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0,1fr);
  gap: 1.5rem; padding: 0 0 1.5rem; }
.hire__tl li::before { content: ""; position: absolute; left: 4.05rem; top: .42rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ruby-hot);
  box-shadow: 0 0 10px rgba(229,56,59,.8); }
.hire__tl li > b { font-family: var(--display); font-weight: 400; font-size: .95rem;
  letter-spacing: .04em; color: var(--cream-dim); text-align: right; padding-top: .1rem;
  text-transform: uppercase; }
.hire__tl h3 { margin: 0 0 .3rem; font: 800 1rem/1.3 var(--body); color: var(--cream); }
.hire__tl h3 span { display: inline-block; margin-left: .5em; font: 700 .62rem var(--body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ruby-hot); }
.hire__tl p { margin: 0; font: 500 .86rem/1.6 var(--body); color: var(--cream-dim); max-width: 62ch; }
.hire__tl p b { color: var(--cream); font-weight: 800; }
.hire__tl p a { color: var(--ruby-hot); font-weight: 700; text-decoration: none; }
@media (max-width: 560px) {
  .hire__tl::before { left: .35rem; }
  .hire__tl li { grid-template-columns: minmax(0,1fr); gap: .3rem; padding-left: 1.4rem; }
  .hire__tl li::before { left: .05rem; }
  .hire__tl li > b { text-align: left; }
}

/* the rebuilt rate card: three headed groups, two truthful badges, and a
   transparency line that is itself a positioning move */
.hire__ratenote { margin: 0 0 1.2rem; max-width: 58ch;
  font: 600 .86rem/1.55 var(--body); color: var(--cream-dim); }
.hire__kit { margin: 0 0 2rem; max-width: 58ch; padding: .7em 1em;
  border-left: 3px solid var(--ruby); background: rgba(229,56,59,.06);
  font: 600 .84rem/1.55 var(--body); color: var(--cream-dim); }
.hire__kit b { color: var(--cream); font-weight: 800; }
.hire__rgroup { margin-bottom: 1.6rem; }
.hire__rgroup-h { margin: 0 0 .7rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem); letter-spacing: .03em; text-transform: uppercase;
  color: var(--cream); }
.hire__rgroup-h span { display: inline-block; margin-left: .7em;
  font: 700 .6rem var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ruby-hot); }
.hire__rate { position: relative; }
.hire__rate-badge { position: absolute; top: -.55rem; left: .9rem; margin: 0;
  padding: .3em .8em; border-radius: 100px;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-hot)); color: #fff;
  font: 800 .56rem var(--body); letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(229,56,59,.8); }
.hire__rate-f { margin: .6rem 0 0; padding-top: .55rem;
  border-top: 1px solid rgba(244,239,230,.12);
  font: 600 .74rem/1.5 var(--body); color: var(--cream-dim); }
.hire__rate-f b { color: var(--ruby-hot); }
/* group grids breathe differently: retainers 4-up, swings 3-up, start 1 wide */
.hire__rgroup .hire__rates { grid-template-columns: minmax(0,1fr); }
@media (min-width: 680px) { .hire__rgroup .hire__rates { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 1100px) {
  .hire__rgroup--a .hire__rates { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hire__rgroup--b .hire__rates { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hire__rgroup--c .hire__rates { grid-template-columns: minmax(0,1fr); }
}

/* The screener stood here: a full-bleed door that asked "hiring or booking?"
   before hire.html painted, plus the .modebar switch for changing your mind.
   Both are gone with it. hire.html is one page for one audience now and the
   professional side lives on matthew-mccluster.html, so there is nothing left
   to sort. Removing the CSS matters as much as removing the script: the rule
   was `html.scr-hold body > *:not(.scr) { visibility: hidden }`, which blanks
   the whole page, and leaving that armed behind a class nobody sets any more
   is a trapdoor for whoever comes next. */

/* ============================================================
   THE SHOP — the card turned shoppable. Add buttons on every
   service line; the tray totals the package and discounts it. */
.hire__rate[data-shop] { padding-bottom: 3.4rem; }
.hire__rate.is-picked { border-color: var(--ruby-hot); box-shadow: 0 0 0 1px var(--ruby-hot),
  0 14px 34px -18px rgba(229,56,59,0.65); }
.shop__add { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem;
  padding: 0.62em 1em; border-radius: 100px; border: 1px solid var(--edge);
  background: var(--glass-lo); color: var(--cream); cursor: pointer;
  font: 800 0.66rem var(--body); letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.shop__add:hover { border-color: var(--ruby-hot); }
.shop__add.is-on { background: linear-gradient(120deg, var(--ruby), var(--ruby-hot));
  border-color: transparent; color: #fff; }

.shop { position: fixed; right: 0.6rem; bottom: calc(var(--appbar-h) + 1.2rem); z-index: 210;
  width: calc(100vw - 1.2rem); border-radius: 18px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, #171010, #0d0908);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85), inset 0 1px 0 var(--glass-hi);
  transform: translateY(12px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; }
.shop.is-in { transform: none; opacity: 1; }
.shop__head { display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.95rem 1.1rem; border: 0; background: none; cursor: pointer; color: var(--cream);
  font-family: var(--body); text-align: left; }
.shop__head b { font: 800 0.82rem var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.shop__head span { margin-left: auto; font: 800 0.66rem var(--body); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ruby-hot); white-space: nowrap; }
.shop__chev { width: 1rem; color: var(--cream-dim); transition: transform 0.3s ease; }
.shop:not(.is-open) .shop__chev { transform: rotate(180deg); }
.shop__body { display: none; padding: 0 1.1rem 1.1rem; }
.shop.is-open .shop__body { display: block; }
.shop__body ul { list-style: none; margin: 0 0 0.8rem; padding: 0;
  max-height: 11rem; overflow-y: auto; }
.shop__body li { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0;
  border-bottom: 1px solid var(--glass-lo); font-size: 0.82rem; color: var(--cream-dim); }
.shop__body li b { margin-left: auto; color: var(--cream); font-size: 0.8rem; white-space: nowrap; }
.shop__body li button { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1px solid var(--edge); background: none; color: var(--cream-dim); cursor: pointer;
  display: grid; place-items: center; }
.shop__body li button svg { width: 0.6rem; }
.shop__body li button:hover { border-color: var(--ruby-hot); color: var(--ruby-hot); }
.shop__sum p { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.2rem 0;
  font-size: 0.84rem; color: var(--cream-dim); }
.shop__sum b { margin-left: auto; color: var(--cream); font-size: 1rem; }
.shop__sum s { color: var(--cream-dim); font-size: 0.78rem; }
.shop__save { padding-top: 0.35rem; border-top: 1px solid var(--glass-lo); }
.shop__save b { color: var(--ruby-hot); }
.shop__cta { display: block; width: 100%; margin-top: 0.85rem; text-align: center; }
.shop__clear { display: block; margin: 0.7rem auto 0; border: 0; background: none;
  cursor: pointer; font: 700 0.68rem var(--body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cream-dim); text-decoration: underline;
  text-underline-offset: 3px; }
html.pocket-on .shop { bottom: calc(var(--appbar-h) + var(--pocket-h, 4.4rem) + 1.4rem); }
@media (min-width: 700.02px) { .shop { right: 1rem; width: min(23rem, calc(100vw - 2rem)); } }

/* ============================================================
   THE UNSLOP — the hire page re-set as an editorial rate sheet.
   One idea: hairline rules and tabular prices instead of a wall
   of identical glass cards. Numbered sections, flat doors, terse
   rows. Scoped to .hirepage so no other room changes.
   ============================================================ */

/* the index strip: four figures over rules, not four boxes */
.hirepage .hire__stats { gap: 1.4rem 2.2rem; }
.hirepage .hire__stat { border: 0; border-radius: 0; background: none;
  padding: 1rem 0 0; border-top: 1px solid rgba(244,239,230,.35); }
.hirepage .hire__stat b { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.hirepage .hire__stat small { font-size: .82rem; margin-top: .5rem; }

/* the plain card index, still used by the fellowship and policy rooms.
   The counter that used to number these was overridden to `content: none`
   further down and had not drawn a digit in a long time — counter, marker
   and override are all gone rather than left running for nobody. */
.hirepage .bexp__legend { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 3rem; }
@media (min-width: 720px) { .hirepage .bexp__legend { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.hirepage .bexp__card { border: 0; border-radius: 0;
  background: none; padding: 1rem 0 1.05rem; border-top: 1px solid rgba(244,239,230,.16);
  align-items: baseline; }
.hirepage .bexp__card:hover { transform: none; border-color: rgba(244,239,230,.16); }
.hirepage .bexp__card b { font-size: .98rem; margin-bottom: .15rem; }

/* the kit line: a spec strip, not a callout box */
.hirepage .hire__kit { border: 0; background: none; padding: .1rem 0 0; margin: 0 0 1.8rem;
  max-width: none; font: 700 .68rem var(--body); letter-spacing: .22em;
  text-transform: uppercase; color: var(--cream-dim); }
.hirepage .hire__kit b { color: var(--cream); }

/* THE RATE SHEET. Rows on rules, service left, price right, footnotes
   under. The sheet reads like something printed, because it could be. */
.hirepage .hire__rgroup { margin: 0; border-bottom: 1px solid rgba(244,239,230,.35); }
.hirepage .hire__rgroup-h { display: flex; align-items: baseline; gap: .9rem;
  margin: 0; padding: 2.6rem 0 1rem; counter-increment: rg;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem); }
.hirepage .hire__rgroup-h::before { content: counter(rg, decimal-leading-zero);
  font: 800 .68rem var(--body); letter-spacing: .18em; color: var(--ruby-hot); }
.hirepage .hire__rgroup-h span { margin-left: auto; text-align: right; color: var(--cream-dim); }
.hirepage .bexp { counter-reset: rg; }
.hirepage .hire__rates,
.hirepage .hire__rgroup--a .hire__rates,
.hirepage .hire__rgroup--b .hire__rates,
.hirepage .hire__rgroup--c .hire__rates { display: block; }
.hirepage .hire__rate,
.hirepage .hire__rate[data-shop] { display: grid;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.4rem;
  padding: 1.15rem 0 1.25rem; border: 0; border-radius: 0; background: none;
  box-shadow: none; border-top: 1px solid rgba(244,239,230,.16); }
.hirepage .hire__rate-k { grid-column: 1; margin: 0 0 .3rem;
  font: 800 1.02rem/1.3 var(--body); letter-spacing: 0; text-transform: none;
  color: var(--cream); }
.hirepage .hire__rate-p { grid-column: 2; grid-row: 1 / span 2; margin: 0;
  display: block; text-align: right; }
.hirepage .hire__rate-p b { font-size: 1.45rem; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hirepage .hire__rate-p span { display: block; margin-top: .3rem; }
.hirepage .hire__rate-b { grid-column: 1; margin: 0; max-width: 54ch;
  font-size: .84rem; }
.hirepage .hire__rate-f { grid-column: 1 / -1; margin: .7rem 0 0; padding-top: 0;
  border-top: 0; max-width: 60ch; }
.hirepage .hire__rate-badge { position: static; margin: 0 0 .4rem; padding: 0;
  background: none; box-shadow: none; border-radius: 0; grid-column: 1;
  color: var(--ruby-hot); font: 800 .6rem var(--body); letter-spacing: .28em; }
.hirepage .hire__rate--lead .hire__rate-p b { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.hirepage .hire__rate.is-picked { border-color: rgba(244,239,230,.16);
  box-shadow: inset 3px 0 0 var(--ruby-hot); padding-left: 1.1rem; }

/* the add control: a line on the sheet, not a pill */
.hirepage .shop__add { position: static; grid-column: 2; grid-row: 3;
  justify-self: end; align-self: end; margin-top: .6rem; padding: 0 0 .15em;
  border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--ruby-hot);
  color: var(--ruby-hot); font: 800 .62rem var(--body); letter-spacing: .22em; }
.hirepage .shop__add:hover { color: var(--cream); border-color: var(--cream); }
.hirepage .shop__add.is-on { background: none; color: var(--cream);
  border-color: var(--cream); }

/* the questions, on the same rules */
.hirepage .hire__faq { gap: 0; }
.hirepage .hire__faq details { border: 0; border-radius: 0; background: none;
  padding: 0; border-top: 1px solid rgba(244,239,230,.16); }
.hirepage .hire__faq details:last-child { border-bottom: 1px solid rgba(244,239,230,.16); }
.hirepage .hire__pill { border-radius: 0; background: none; }
.hirepage .hire__pill::before { box-shadow: none; border-radius: 0; }
.hirepage .hire__tl li::before { box-shadow: none; }

/* the tray: a receipt, not an app widget */
.hirepage .shop { border-radius: 3px; background: var(--ink-2);
  border: 1px solid rgba(244,239,230,.25);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.9); }
.hirepage .shop__head b { letter-spacing: .16em; }
.hirepage .shop__body li b, .hirepage .shop__sum b { font-variant-numeric: tabular-nums; }
.hirepage .shop__sum { border-top: 1px dashed rgba(244,239,230,.3); padding-top: .6rem; }
.hirepage .shop__save { border-top: 0; }
.hirepage .shop__cta { border-radius: 3px; }
.hirepage .shop__body li button { border-radius: 0; }

/* ============================================================
   THE CONSTITUTION — round two of the unslop, written after
   three independent critiques. One left axis. Seven type sizes.
   Two micro-caps voices. Two rule weights. Red rationed to the
   CTA, the scarcity, and the hover. Real photographs and real
   paper instead of chrome. Scoped to .hirepage.
   ============================================================ */

/* -- the ladder: nothing on this page sizes itself ad hoc -- */
.hirepage { --t-display: clamp(3rem, 8vw, 5rem); --t-head: clamp(1.6rem, 3.4vw, 2.2rem);
  --t-sub: 1.45rem; --t-body: 1rem; --t-small: .875rem;
  --caps-a: 800 .72rem/1.4 var(--body); --caps-b: 700 .64rem/1.5 var(--body);
  --rule-soft: 1px solid rgba(244,239,230,.16); --rule-hard: 1px solid rgba(244,239,230,.38); }

/* -- caps never set running text again -- */
.hirepage .hire__stand { margin: 1.2rem 0 0; max-width: 52ch;
  font: 500 1.02rem/1.65 var(--body); letter-spacing: 0; text-transform: none;
  color: var(--cream-dim); }
.hirepage .hire__stand b { color: var(--cream); font-weight: 800; }
.hirepage .bexp__card small { font-size: var(--t-small); letter-spacing: 0;
  text-transform: none; line-height: 1.5; }
.hirepage .bexp__card b { font-size: var(--t-body); }
.hirepage .hire__faq p { font-size: .92rem; max-width: 62ch; }
.hirepage .bexp__panel p, .hirepage .hire__how { font-size: .95rem; max-width: 62ch; }

/* -- chapter heads outrank sub-heads: eyebrow + Anton, two get display scale -- */
.hirepage h2.bexp__section { margin: 4.5rem 0 1rem; font-family: var(--display);
  font-weight: 400; font-size: var(--t-head); letter-spacing: .02em;
  color: var(--cream); text-transform: uppercase; }
.hirepage h2.bexp__section::before { content: ""; display: block; width: 2.6rem;
  height: 3px; margin-bottom: .55rem; background: var(--cream); opacity: .35; }
.hirepage h2.bexp__section--big { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.hirepage h2.bexp__section--big::before { height: 3px;
  background: var(--ruby-hot); opacity: 1; margin-left: calc(50% - 50vw);
  width: calc(2.6rem + 50vw - 50%); position: relative; z-index: 1; }
.hirepage h2.bexp__section--big.is-quiet::before { background: var(--cream); opacity: .35; }
.hirepage p.bexp__section { color: var(--cream-dim); }

/* -- THE COVER. The photograph is beside the type, not under it.
      The old treatment stretched the picture to 200% of the viewport
      (inset: -50vw both sides) at half strength so words could sit on
      top: that made the document 2160px wide on a 1440px screen, and
      it wasted the only portrait in the repo. Phone: a band of picture
      on top, the words below it, no overlap and so no scrim. -- */
.hirepage .hire__cover { position: relative; display: grid; gap: 0;
  margin: 0 0 1.6rem calc(50% - 50vw); width: 100vw; max-width: 100vw;
  align-items: stretch; overflow: hidden; }
.hirepage .hire__cover-photo { position: relative; margin: 0; min-width: 0;
  height: 34vh; min-height: 15rem; background: #0a0807; }
.hirepage .hire__cover-photo img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%; }
.hirepage .hire__cover-copy { padding: 2rem clamp(1.2rem, 4vw, 3rem) 1.4rem; min-width: 0; }
/* the display face needs its own leading: the body's 1.55 turns a
   two-line headline into a four-line one with a hole in the middle */
.hirepage .hire__cover h1 { font-size: clamp(2.3rem, 6.6vw, 4.3rem);
  line-height: .93; letter-spacing: .005em; }
.hirepage .hire__cover h1 em { font-style: normal; color: var(--ruby-hot); }
@media (min-width: 860px) {
  .hirepage .hire__cover { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
    align-items: center; }
  .hirepage .hire__cover-photo { order: 2; height: 100%; min-height: 32rem; }
  /* the copy's left edge is the page's left edge, not an arbitrary inset:
     max(0, 50vw - half the container) + the same gutter every other
     section uses, so the headline stacks with the sections beneath it */
  .hirepage .hire__cover-copy { order: 1; padding: 3.2rem 2.4rem 3.2rem
    calc(max(0px, 50vw - 38rem) + clamp(1.2rem, 4vw, 3rem)); }
}
/* the line the page had never said out loud */
.hirepage .hire__open { margin: 1rem 0 0; max-width: 34ch; padding-left: .9rem;
  border-left: 3px solid var(--ruby); font: 800 .96rem/1.5 var(--body);
  color: var(--cream); }

/* -- the CTA: one sentence, three registers, zero gloss -- */
.hirepage .finale__actions { justify-content: flex-start; }
.hirepage .btn--ruby { border-radius: 2px; background: var(--ruby);
  box-shadow: none; text-shadow: none; }
.hirepage .btn--ruby:hover { background: var(--ruby-hot); transform: none; }
.hirepage .hire__underline { text-align: left; }

/* -- the index strip: figures over one hard rule, captions one line deep -- */
.hirepage .hire__stat small { max-width: 24ch; font-size: .82rem; }

/* -- free once, then the fork in display type -- */
.hirepage .hire__freeband { margin: 0 0 .2rem; padding: .8em 0; max-width: none;
  font: var(--caps-b); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-dim); }
.hirepage .hire__freeband b { color: var(--cream); font-weight: 800; }

/* -- how it works: a paragraph, because it is one -- */
.hirepage .hire__how { margin: 0; color: var(--cream-dim); line-height: 1.7; }

/* -- phones stack the row; the rail is a desktop luxury -- */
@media (max-width: 560px) {
  .hirepage .hire__rate { grid-template-columns: minmax(0,1fr); }
  .hirepage .hire__rate[data-shop] { grid-template-columns: minmax(0,1fr); }
  .hirepage .hire__rate-p { grid-column: 1; grid-row: auto; text-align: left; margin: .2rem 0 .3rem; }
  .hirepage .hire__rate-p span { display: inline; margin-left: .5em; }
  .hirepage .shop__add { grid-column: 1; grid-row: auto; justify-self: start; }
  .hirepage .hire__stamp { position: static; display: inline-block; margin: 0 0 .5rem;
    align-self: start; justify-self: start; }
}

/* -- the sheet becomes truly tabular on wide screens -- */
@media (min-width: 980px) {
  .hirepage .hire__rate, .hirepage .hire__rate[data-shop] {
    grid-template-columns: 14rem minmax(0, 46ch) minmax(0,1fr); column-gap: 2rem; }
  .hirepage .hire__rate-k { grid-column: 1; }
  .hirepage .hire__rate-b { grid-column: 2; grid-row: 1; }
  .hirepage .hire__rate-p { grid-column: 3; grid-row: 1; }
  .hirepage .hire__rate-f { grid-column: 2 / -1; }
  .hirepage .shop__add { grid-column: 3; grid-row: 2; }
  .hirepage .hire__rate-badge { grid-column: 1 / -1; }
}

/* -- red is rationed: structure goes cream -- */
.hirepage .hire__rgroup-h::before, .hirepage .hire__rgroup-h span,
.hirepage .hire__rate-badge { color: var(--cream-dim); }
.hirepage .hire__rate-f b { color: var(--cream); }
.hirepage .hire__tl h3 span, .hirepage .hire__tl li > b { color: var(--cream-dim); }

/* -- the flagship breaks the sheet, once -- */
.hirepage .hire__rate--lead { padding-top: 2.2rem; padding-bottom: 2.2rem; }
@media (min-width: 980px) {
  .hirepage .hire__rate--lead { grid-template-rows: auto auto auto; }
  .hirepage .hire__rate--lead .hire__rate-badge { grid-column: 1; grid-row: 1; }
  .hirepage .hire__rate--lead .hire__rate-k { grid-column: 1; grid-row: 2; }
  .hirepage .hire__rate--lead .hire__rate-b { grid-column: 2; grid-row: 1 / span 2; }
  .hirepage .hire__rate--lead .hire__rate-p { grid-column: 3; grid-row: 1 / span 2; }
  .hirepage .hire__rate--lead .hire__rate-f { grid-column: 2 / -1; grid-row: 3; }
  .hirepage .hire__rate--lead .shop__add { grid-row: 3; }
}
.hirepage .hire__rate--lead .hire__rate-p b { font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4rem); }
.hirepage .hire__stamp { position: absolute; right: 0; top: -.85rem; margin: 0;
  transform: rotate(-3deg); padding: .3em .7em; border: 3px solid var(--ruby-hot);
  color: var(--ruby-hot); font: 800 .72rem var(--body); letter-spacing: .22em;
  text-transform: uppercase; z-index: 2; background: var(--ink); }

/* -- one frame tipped into a group: pixels beside the prices -- */
.hirepage .hire__gframe { margin: .2rem 0 1rem; max-width: 21rem; }
.hirepage .hire__gframe img { width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; filter: grayscale(15%) contrast(1.03); }
.hirepage .hire__gframe figcaption { margin-top: .4rem; font: var(--caps-b);
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }
@media (min-width: 980px) {
  .hirepage .hire__rgroup:has(.hire__gframe) { display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 2.4rem; }
  .hirepage .hire__rgroup:has(.hire__gframe) .hire__rgroup-h { grid-column: 1; }
  .hirepage .hire__rgroup:has(.hire__gframe) .hire__rates { grid-column: 1; }
  .hirepage .hire__gframe { grid-column: 2; grid-row: 1 / span 2; align-self: start;
    margin-top: 2.6rem; width: 100%; }
}

/* -- the receipts: the wall itself is set in the dark band at the end of
      this sheet (.rcp). The hand-made tilts that used to sit here are
      gone: a scan of a state proclamation is not a polaroid. -- */
/* the wall is counted, not auto-filled: auto-fill collapsed to a single
   column on a phone and turned five documents into three metres of page */
.hirepage .hire__trust { display: grid; gap: 1.4rem 1rem; margin: 0; padding: 0;
  list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .hirepage .hire__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the four behind the disclosure keep the same cell as the five in front,
   so opening it reveals more paper — not bigger paper */
@media (min-width: 900px) {
  .hirepage .hire__trust { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.hirepage .hire__pill { display: block; padding: 0; border: 0; border-radius: 0;
  background: none; text-align: left; cursor: pointer; }
.hirepage .hire__pill::before { content: none; }

/* -- the timeline: ticks on a rail, room for a year-range, paper tipped in -- */
.hirepage .hire__tl::before { left: .35rem; }
.hirepage .hire__tl li { grid-template-columns: minmax(0,1fr); }
.hirepage .hire__tl li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hirepage .hire__tl li::before { left: 0; width: 10px; height: 2px;
  border-radius: 0; top: .6rem; box-shadow: none; }
@media (min-width: 560.02px) {
  .hirepage .hire__tl::before { left: 6.55rem; }
  .hirepage .hire__tl li { grid-template-columns: 5.6rem minmax(0,1fr); }
  .hirepage .hire__tl li::before { left: 6.25rem; }
}

/* -- the open Q&A -- */
.hirepage .hire__qa { padding: 1.1rem 0 1.2rem; border-top: var(--rule-soft); }
.hirepage .hire__qa:last-child { border-bottom: var(--rule-soft); }
.hirepage .hire__qa h3 { margin: 0 0 .35rem; font: 800 1rem/1.4 var(--body);
  color: var(--cream); }
.hirepage .hire__qa p { margin: 0; font-size: .92rem; line-height: 1.6;
  color: var(--cream-dim); max-width: 62ch; }

/* -- one hover, everywhere: red fills the row -- */
.hirepage .bexp__card:hover { transform: none; background: var(--ruby); }
.hirepage .bexp__card:hover b, .hirepage .bexp__card:hover small { color: #fff; }
.hirepage .hire__rate:not(.hire__rate--lead):hover { background: rgba(193,18,31,.12); }

/* -- the surfaces know about each other now -- */
.gate { z-index: 300; }
html.gate-on .shop { opacity: .15; pointer-events: none; }
.gate__in { font-size: 1rem; }
.gate__lab.is-missing { color: var(--ruby-hot); }
.gate__go[disabled] { pointer-events: none; }
.gate__pack { margin: -.3rem 0 .9rem; padding: .5em .8em; border-left: 2px solid var(--ruby-hot);
  font: 700 .78rem/1.5 var(--body); color: var(--cream-dim); background: rgba(229,56,59,.07); }
.gate__swap { margin: .9rem 0 0; }
.gate__swap button, [data-wrongdoor] { border: 0; padding: 0; background: none; cursor: pointer;
  font: 700 .8rem var(--body); color: var(--cream-dim); text-decoration: underline;
  text-underline-offset: 3px; }
.gate__swap button:hover, [data-wrongdoor]:hover { color: var(--cream); }

/* -- the tray head: two lines, every control on-screen at every width -- */
.hirepage .shop__head { cursor: pointer; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto; row-gap: .2rem; column-gap: .8rem;
  grid-template-areas: "title empty chev" "sum rung rung"; }
.hirepage .shop__head b { grid-area: title; }
.hirepage .shop__headsum { grid-area: sum; font: 800 .8rem var(--body); color: var(--cream);
  font-variant-numeric: tabular-nums; }
.hirepage .shop__head > span:not(.shop__headsum) { grid-area: rung; justify-self: end;
  margin-left: 0; white-space: normal; text-align: right; }
.hirepage .shop__head .shop__clear { grid-area: empty; display: inline; margin: 0; padding: 0 .2em; }
.hirepage .shop__head .shop__chev { grid-area: chev; }
.hirepage .shop__body ul { max-height: 13rem;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent); }
.hirepage .shop__more { color: var(--cream-dim); font-style: normal; }
.hirepage .shop__flatline b { color: var(--cream); }
.shop__undo { position: fixed; right: 1rem; bottom: calc(var(--appbar-h) + 1.2rem);
  z-index: 215; padding: .8em 1.1em; border-radius: 3px; background: var(--ink-2);
  border: 1px solid rgba(244,239,230,.25); font: 600 .84rem var(--body); color: var(--cream-dim); }
.shop__undo button { border: 0; background: none; cursor: pointer; margin-left: .6em;
  font: 800 .84rem var(--body); color: var(--ruby-hot); text-decoration: underline;
  text-underline-offset: 3px; }


/* -- THE ROADSHOW: the trip priced like the sheet above it -- */
.hirepage .hire__roadshow { margin: 0 0 1rem; }
.hirepage .hire__roadshow-lede { margin: 0 0 1.1rem; max-width: 58ch;
  font: 500 .95rem/1.65 var(--body); color: var(--cream-dim); }
.hirepage .hire__roadshow-lede b { color: var(--cream); font-weight: 800; }
.hirepage .hire__roadshow-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.hirepage .hire__roadshow-in { flex: 1 1 16rem; padding: .95em 1em; border-radius: 2px;
  border: 1px solid rgba(244,239,230,.25); background: var(--ink-2); color: var(--cream);
  font: 500 1rem var(--body); }
.hirepage .hire__roadshow-in--date { flex: 0 1 11rem; color-scheme: dark; }
.hirepage .hire__roadshow-in:focus { outline: none; border-color: var(--ruby-hot); }
.hirepage .hire__roadshow-go { flex: 0 0 auto; }
.hirepage .roadshow__out { margin-top: 1.2rem; max-width: 34rem; }
.hirepage .roadshow__k { font: var(--caps-b); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-dim); margin: 0 0 .5rem; }
.hirepage .roadshow__out ul { list-style: none; margin: 0 0 .8rem; padding: 0; }
.hirepage .roadshow__out li { display: flex; align-items: baseline; gap: 1rem;
  padding: .45rem 0; border-top: 1px solid rgba(244,239,230,.16);
  font-size: .86rem; color: var(--cream-dim); }
.hirepage .roadshow__out li b { margin-left: auto; color: var(--cream);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hirepage .roadshow__total { margin: 0 0 .4rem; padding-top: .6rem;
  border-top: 1px dashed rgba(244,239,230,.35); font-size: .95rem; color: var(--cream); }
.hirepage .roadshow__total b { color: var(--ruby-hot); }
.hirepage .roadshow__note { margin: 0; font-size: .78rem; color: var(--cream-dim); }

/* the design lead's last note: no thin targets — Empty and the fold get real pads */
.hirepage .shop__head .shop__clear { padding: .45em .5em; margin: -.45em -.3em -.45em 0; }
.hirepage .shop__head { min-height: 2.6rem; }
.hirepage .hire__rate-p { min-width: 11rem; }

/* the financing line is invisible until the owner has actually enabled BNPL
   (Afterpay in Square, Klarna/Affirm in Stripe) and set data-financing="on"
   on the page's <html> tag — the honesty law, enforced in CSS */
.hirepage .hire__finance { display: none; }
html[data-financing="on"] .hirepage .hire__finance { display: block;
  margin: 0 0 2rem; max-width: 58ch; padding: .7em 1em;
  border-left: 3px solid var(--ruby); background: rgba(229,56,59,.06);
  font: 600 .84rem/1.55 var(--body); color: var(--cream-dim); }
html[data-financing="on"] .hirepage .hire__finance b { color: var(--cream); font-weight: 800; }

/* ============================================================
   THE POLICY PAGE — the two pushes, set like the rate sheet:
   hairline rules, tabular claims, the deck as evidence. Rides
   the .hirepage constitution for type, rules and rationed red. */
.pol { margin: 0 0 1rem; border-bottom: 1px solid rgba(244,239,230,.38); padding-bottom: 2.4rem; }
.pol__k { font: var(--caps-b); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-dim); margin: 0 0 .5rem; }
.pol__h { margin: 0 0 .8rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase; color: var(--cream); }
.pol__lede { margin: 0 0 1.4rem; max-width: 62ch; font: 500 1rem/1.65 var(--body);
  color: var(--cream-dim); }
.pol__lede b { color: var(--cream); font-weight: 800; }
.pol__deck { margin: 0 0 1.6rem; max-width: 46rem; }
.pol__deck video { width: 100%; display: block; background: #000;
  border: 1px solid rgba(244,239,230,.25); }
.pol__deck figcaption { margin-top: .5rem; font: var(--caps-b); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-dim); }
.pol__q { margin: 1.6rem 0 .6rem; font: var(--caps-a); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ruby-hot); }
.pol__qs { margin: 0 0 .4rem; padding-left: 1.2rem; max-width: 62ch; }
.pol__qs li { margin-bottom: .5rem; font: 500 .95rem/1.6 var(--body); color: var(--cream-dim); }
.pol__rows { margin: 0; }
.pol__row { display: grid; grid-template-columns: minmax(0,1fr); column-gap: 2rem;
  padding: .95rem 0 1rem; border-top: 1px solid rgba(244,239,230,.16); row-gap:.3rem; }
.pol__row:last-child { border-bottom: 1px solid rgba(244,239,230,.16); }
.pol__row > b { font: 800 .95rem/1.4 var(--body); color: var(--cream); }
.pol__row > span { font: 500 .88rem/1.6 var(--body); color: var(--cream-dim); max-width: 60ch; }
.pol__row > span b { color: var(--cream); font-weight: 800; }
.pol__src { margin: 1rem 0 0; max-width: 62ch; font: 500 .8rem/1.6 var(--body);
  color: var(--cream-dim); }
@media (min-width: 720.02px) { .pol__row { grid-template-columns: 13rem minmax(0, 1fr); row-gap: revert; } }

/* the memo, reproduced: a document on the page, not a card */
.memo { max-width: 68ch; margin: 0 0 2rem; }
.memo__head { padding: 0 0 1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(244,239,230,.38); }
.memo__head p { margin: .18rem 0; font: 500 .92rem/1.5 var(--body); color: var(--cream-dim); }
.memo__head b { color: var(--cream); font-weight: 800; margin-right: .4em; }
.memo__h { margin: 1.8rem 0 .5rem; font: var(--caps-a); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ruby-hot); }
.memo p { margin: 0 0 .9rem; font: 500 1rem/1.7 var(--body); color: var(--cream-dim); }
.memo__refs { margin: 0 0 1rem; padding-left: 1.1rem; }
.memo__refs li { margin-bottom: .45rem; font: 500 .88rem/1.6 var(--body); color: var(--cream-dim); }
.memo__refs a { color: var(--ruby-hot); font-weight: 700; }
.memo__sig { margin-top: 1.8rem; padding-top: .9rem;
  border-top: 1px solid rgba(244,239,230,.16);
  font: var(--caps-b) !important; letter-spacing: .18em; text-transform: uppercase; }
.pol__quote { margin: 1.2rem 0 1.4rem; padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--ruby); max-width: 58ch;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.2; letter-spacing: .01em; color: var(--cream); }
.pol__quote cite { display: block; margin-top: .6rem; font: var(--caps-b);
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); font-style: normal; }

/* ============================================================
   THE DESIGNER KICKS CHART — one series, one hue, the shape
   carries the story. Grid and axes recessive; the dormant
   stretch is a surface wash, not a second data colour. */
.dkc { margin: 0 0 2rem; }
.dkc__cap { margin: 0 0 .8rem; font: var(--caps-b); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-dim); }
.dkc__cap span { color: rgba(244,239,230,.49); }
/* the caption's quiet half — same weight in the hierarchy, ink side, so it
   does not disappear into the daylight ground */
html[data-theme="light"] .dkc__cap span { color: rgba(26,20,13,.66); }
.dkc__wrap { position: relative; border: 1px solid rgba(244,239,230,.16);
  background: rgba(244,239,230,.02); touch-action: pan-y; }
.dkc__svg { display: block; width: 100%; height: auto; }
.dkc__grid { stroke: rgba(244,239,230,.10); stroke-width: 1; }
.dkc__ytick, .dkc__mo { fill: rgba(244,239,230,.45);
  font: 700 11px "Archivo", sans-serif; letter-spacing: .1em; }
.dkc__mo { text-anchor: middle; }
.dkc__dorm { fill: rgba(244,239,230,.03); }
.dkc__line { fill: none; stroke: #e5383b; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.dkc__cut { stroke: rgba(244,239,230,.55); stroke-width: 1; stroke-dasharray: 3 3; }
.dkc__cutlab { fill: rgba(244,239,230,.7); font: 700 11px "Archivo", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; }
.dkc__peak { fill: #e5383b; stroke: #0a0807; stroke-width: 2; }
.dkc__peaklab { fill: var(--cream); font: 800 12px "Archivo", sans-serif; letter-spacing: .04em; }
.dkc__cross { stroke: rgba(244,239,230,.5); stroke-width: 1; pointer-events: none; }
/* DAYLIGHT ON THE CHART. Every part of this chart that is not the red line
   was drawn in literal cream — SVG takes `fill`, not `color`, so none of it
   rode the token flip the way the rest of the page did. On bone the axis
   went bone-on-bone: the months, the gridlines and the y-ticks all left the
   picture, and the chart read as a red line floating in nothing. Only the
   peak label survived, because it alone asked for var(--cream).
   The same values, inverted, so the axis comes back. */
html[data-theme="light"] .dkc__grid { stroke: rgba(26,20,13,.14); }
html[data-theme="light"] .dkc__ytick,
html[data-theme="light"] .dkc__mo { fill: rgba(26,20,13,.62); }
html[data-theme="light"] .dkc__dorm { fill: rgba(26,20,13,.04); }
html[data-theme="light"] .dkc__cut { stroke: rgba(26,20,13,.5); }
html[data-theme="light"] .dkc__cutlab { fill: rgba(26,20,13,.72); }
html[data-theme="light"] .dkc__cross { stroke: rgba(26,20,13,.45); }
html[data-theme="light"] .dkc__peak { stroke: #f2ede4; }
/* the readout that follows the cursor: --ink-2 flips on its own, but the
   hairline holding its edge is cream, so in daylight the box loses its
   outline and floats. The pixel sweep never saw this one — it appears on
   hover, and a sweep does not hover. */
html[data-theme="light"] .dkc__tip { border-color: rgba(26,20,13,.28); }
.dkc__tip { position: absolute; top: .5rem; pointer-events: none; z-index: 2;
  padding: .4em .7em; background: var(--ink-2); border: 1px solid rgba(244,239,230,.3);
  white-space: nowrap; }
.dkc__tip b { display: block; font: 800 1rem "Archivo", sans-serif; color: var(--cream);
  font-variant-numeric: tabular-nums; }
.dkc__tip span { font: 700 .66rem "Archivo", sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream-dim); }
.dkc__data { margin: 1.4rem 0 0; }
.dkc__data summary { cursor: pointer; font: var(--caps-b); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ruby-hot); }
.dkc__table { width: 100%; max-width: 34rem; margin-top: .9rem; border-collapse: collapse;
  font-variant-numeric: tabular-nums; }
.dkc__table th { text-align: left; padding: .4rem 0; font: var(--caps-b);
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim);
  border-bottom: 1px solid rgba(244,239,230,.38); }
.dkc__table th + th, .dkc__table td + td { text-align: right; }
.dkc__table td { padding: .42rem 0; font: 500 .88rem "Archivo", sans-serif;
  color: var(--cream-dim); border-bottom: 1px solid rgba(244,239,230,.16); }
.dkc__note { margin-top: .6rem; font-size: .78rem; color: var(--cream-dim); }

/* ==========================================================
   THE ECOSYSTEM, DRAWN AS ONE.

   The old page was three identical grids, and every card led to a
   redirect stub that bounced straight back here — so nothing on it
   worked and nothing on it showed a relationship. What a reader
   wants from an ecosystem page is the shape of the thing: what owns
   what, what runs inside what, and what is simply hired.

   So the house draws as a tree. The parent card is wide and carries
   its own divisions inside it, because M Network and the PRIM3
   program are functions of McCluster Corp, not companies beside it.
   The two sibling entities hang off the same spine below. Names and
   catalogue, vendors and affiliates keep the plain grid — they are
   lists, not hierarchies, and pretending otherwise would be a
   diagram lying about the paperwork.
   ========================================================== */

.ecotree{position:relative;padding-left:clamp(0px,2.5vw,2.2rem)}
.ecotree::before{content:"";position:absolute;left:0;top:2.5rem;bottom:2.5rem;width:2px;
  background:linear-gradient(180deg,rgba(229,56,59,0.55),rgba(229,56,59,0.05));border-radius:2px}
@media (max-width:640px){.ecotree{padding-left:0}.ecotree::before{display:none}}

.ecotree__parent{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.8rem);align-items:stretch;margin-bottom:clamp(1rem,2.5vw,1.8rem)}
@media (min-width: 860.02px) { .ecotree__parent { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } }

.ecotree__kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1rem,2.5vw,1.8rem)}

/* the divisions: chips that belong to the card beside them */
.ecodivs{display:flex;flex-direction:column;gap:0.7rem;justify-content:center;
  padding:clamp(1rem,2vw,1.4rem);background:var(--ink-2);border:1px solid rgba(244,239,230,0.1);
  border-radius:14px;border-left:3px solid rgba(229,56,59,0.5)}
.ecodivs__k{font-size:0.76rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--ruby-hot);margin:0}
.ecodiv{display:flex;flex-direction:column;gap:0.15rem;text-align:left;width:100%;cursor:pointer;
  background:rgba(244,239,230,0.03);border:1px solid rgba(244,239,230,0.09);border-radius:10px;
  padding:0.7rem 0.85rem;color:inherit;font:inherit;transition:border-color 0.3s,background 0.3s}
.ecodiv:hover,.ecodiv:focus-visible{border-color:rgba(229,56,59,0.6);background:rgba(229,56,59,0.07)}
.ecodiv b{font-size:1rem}
.ecodiv small{color:var(--cream-dim);font-size:0.88rem;line-height:1.45}

/* cards are buttons now, not links to a page that does not exist */
.ecocard{text-align:left;width:100%;cursor:pointer;font:inherit;padding:0}
.ecocard--root .ecocard__media{aspect-ratio:21 / 9}
.ecocard--root .ecocard__text h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.ecocard__kind{align-self:flex-start;font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ruby-hot);border:1px solid rgba(229,56,59,0.45);border-radius:999px;padding:0.2rem 0.6rem}
.ecocard__go--ext{color:var(--cream-dim)}

/* the popup: everything opens here, nothing navigates away */
body.eco-locked{overflow:hidden}
.ecomodal{position:fixed;inset:0;z-index:340;display:grid;place-items:center;padding:1.2rem}
.ecomodal[hidden]{display:none}
.ecomodal__bg{position:absolute;inset:0;background:rgba(5,4,3,0.88);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.ecomodal__card{position:relative;width:min(94vw,40rem);max-height:88vh;max-height:88dvh;overflow:auto;
  background:var(--ink-2);border:1px solid rgba(232,200,119,0.4);border-radius:18px;
  padding:clamp(1.4rem,4vw,2.4rem);box-shadow:0 24px 80px rgba(0,0,0,0.7);
  animation:dockIn 0.3s cubic-bezier(0.2,0.9,0.2,1)}
.ecomodal__x{position:sticky;top:0;float:right;width:2.1rem;height:2.1rem;border-radius:50%;border:0;
  cursor:pointer;background:rgba(10,8,7,0.85);color:#f4efe6;font-size:1rem;z-index:2}
.ecomodal__body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:0.95;margin:0.2rem 0 0.4rem}
.ecom__kind{font-size:0.74rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--ruby-hot);margin:0}
.ecom__tag{color:var(--cream-dim);margin:0 0 1rem}
.ecom__ext{display:inline-block;background:var(--ruby-hot);color:#fff;font-weight:800;
  text-decoration:none;border-radius:999px;padding:0.7rem 1.3rem;margin:0.2rem 0 0.4rem}
.ecom__extnote{font-size:0.84rem;color:var(--cream-dim);margin:0 0 1rem}
.ecom__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.9rem;
  margin:1.2rem 0;padding:1rem 0;border-top:1px solid rgba(244,239,230,0.1);
  border-bottom:1px solid rgba(244,239,230,0.1)}
.ecom__facts dt{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-dim)}
.ecom__facts dd{margin:0.2rem 0 0;font-weight:700}
.ecom__k{font-size:0.74rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--ruby-hot);margin:0 0 0.6rem}
.ecom__div{border-left:3px solid rgba(229,56,59,0.45);padding-left:0.9rem;margin-bottom:0.9rem}
.ecom__div p{color:var(--cream-dim);margin:0.2rem 0 0}
.ecom__hi{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:0.8rem}
.ecom__hi li{display:flex;flex-direction:column;gap:0.15rem}
.ecom__hi b{font-size:1rem}
.ecom__hi span{color:var(--cream-dim)}
.ecom__links{display:flex;flex-wrap:wrap;gap:0.6rem 1.2rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid rgba(244,239,230,0.1)}
.ecom__link{color:var(--ruby-hot);font-weight:800;text-decoration:none}

/* ============================================================
   THE HIRE PAGE, RE-CUT — Builder One.

   The complaint was that the page read like a dictionary: six
   identical headings over six identical card grids, a portrait
   used as wallpaper at half strength, and nine white rectangles
   at the bottom that hit the eye like a flashbulb. The fix is
   not more copy set smaller. It is four different FORMS taking
   turns down the page, so nothing arrives in the shape of the
   thing before it:

     1  a full-bleed band (the cover, the marks, the receipts)
     2  an editorial two-column (the portrait and the facts)
     3  a rail with a companion frame (the timeline)
     4  one quiet run of pure type (the doors at the end)

   Everything below is scoped to .hirepage and namespaced hire__,
   and every rule token is theme-aware: this page is served in
   daylight as often as it is served at night.
   ============================================================ */

/* -- one hairline, two coats. The sheet above hard-codes cream at
      low alpha for its rules, which is invisible on a cream page in
      daylight; these tokens hold the same weight in both coats and
      every component below uses them. -- */
.hirepage { --b1rule: rgba(244,239,230,.18); --b1rule-hard: rgba(244,239,230,.42); }
html[data-theme="light"] .hirepage { --b1rule: rgba(26,20,13,.18); --b1rule-hard: rgba(26,20,13,.4); }

/* -- three figures, not four, and each one a two-word caption -- */
.hirepage .hire__stats { grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 2.2rem; margin: 2.6rem 0 0; margin-top:2.6rem; }
.hirepage .hire__stat { border-top: 1px solid var(--b1rule-hard); display:revert; align-items:revert; justify-content:revert; gap:revert; }
.hirepage .hire__stat b { font-variant-numeric: tabular-nums; }
.hirepage .hire__stat small { font: 700 .68rem/1.4 var(--body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim); max-width: none; text-align:revert; }
/* a phone reads three stacked figures as a ledger, not as three tiles */
@media (max-width: 599px) {
  .hirepage .hire__stats { grid-template-columns: minmax(0,1fr); gap: 0; }
  .hirepage .hire__stat { display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.2rem; padding: .75rem 0 .8rem; }
  .hirepage .hire__stat b { font-size: 2rem; }
  .hirepage .hire__stat small { margin-top: 0; text-align: right; }
}

/* ---------- REGISTER ONE: WHAT I DO, told in pictures ----------
   Six disciplines, six frames out of the films on this site. The
   title is the whole caption. A sentence under each one would be
   the dictionary again. */
.hirepage .hire__disc { margin: 4.4rem 0 0; }
.hirepage .hire__disc-h { margin: 0 0 1.1rem; font: 800 .72rem var(--body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ruby-hot); }
.hirepage .hire__disc-grid { list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.hirepage .hire__disc-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: #0a0807; }
.hirepage .hire__disc-tile img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(.4) contrast(1.06) brightness(.74);
  transition: filter .35s ease, transform .5s ease; }
.hirepage .hire__disc-tile b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2.8rem .85rem .75rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(.98rem, 2.3vw, 1.45rem); line-height: 1.02; letter-spacing: .015em;
  text-transform: uppercase; color: #f4efe6;
  background: linear-gradient(180deg, transparent, rgba(6,5,4,.9) 62%); }
.hirepage .hire__disc-tile:hover img { filter: grayscale(0) contrast(1.02) brightness(.92);
  transform: scale(1.035); }
.hirepage .hire__disc-tile--lead, .hirepage .hire__disc-tile--tail { grid-column: span 2;
  aspect-ratio: 16 / 9; }
/* the biggest tile on the page carries the least grade: at that size the
   frame is the picture, not a texture behind a word */
.hirepage .hire__disc-tile--lead img { filter: grayscale(.22) contrast(1.04) brightness(.88); }
@media (min-width: 900px) {
  .hirepage .hire__disc-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; }
  .hirepage .hire__disc-tile--lead { grid-column: 1 / span 2; grid-row: 1 / span 2;
    aspect-ratio: auto; }
  .hirepage .hire__disc-tile--tail { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .hirepage .hire__disc-tile img { transition: filter .2s ease; }
  .hirepage .hire__disc-tile:hover img { transform: none; }
}

/* ---------- REGISTER TWO: the portrait and the fact column ----------
   The three résumé columns that used to sit here said the same
   things as the scans and the timeline. What is left is the part
   no document on this page states. */
.hirepage .hire__who { margin: 4.4rem 0 0; display: grid; gap: 1.6rem; align-items: start; }
.hirepage .hire__who-photo { margin: 0; }
.hirepage .hire__who-photo img { display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.18) contrast(1.04); }
/* on a wide screen the picture is the column, not a panel floating in it:
   it runs the full height of the facts standing beside it */
@media (min-width: 900px) {
  .hirepage .hire__who { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem; align-items: stretch; }
  .hirepage .hire__who-photo { height: 100%; }
  .hirepage .hire__who-photo img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
}
.hirepage .hire__who-k { margin: 0 0 .5rem; font: 800 .72rem var(--body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ruby-hot); }
.hirepage .hire__who-h { margin: 0 0 1.2rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: .96; letter-spacing: .015em;
  text-transform: uppercase; color: var(--cream); }
.hirepage .hire__facts { margin: 0; }
.hirepage .hire__facts > div { display: grid; grid-template-columns: minmax(0,1fr);
  gap: .25rem 1.2rem; padding: .68rem 0 .72rem; border-top: 1px solid var(--b1rule); }
.hirepage .hire__facts > div:last-of-type { border-bottom: 1px solid var(--b1rule); }
.hirepage .hire__facts dt { font: 800 .62rem/1.7 var(--body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim); }
.hirepage .hire__facts dd { margin: 0; font: 500 .92rem/1.55 var(--body); color: var(--cream-dim); }
.hirepage .hire__facts dd b { color: var(--cream); font-weight: 800; }
.hirepage .hire__who-more { margin: 1.1rem 0 0; }
.hirepage .hire__who-more a { color: var(--ruby-hot); font: 800 .82rem var(--body); }
@media (min-width: 560.02px) { .hirepage .hire__facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); } }

/* ---------- REGISTER ONE AGAIN, IN THE OTHER COAT: the marks ----------
   The old page claimed "6 brands built and run inside the ecosystem"
   and asked to be believed. Here are the marks, each labelled with
   the relationship it actually is. The plate is cream at fixed value
   in both themes, because four of these five were drawn for paper and
   multiply blending is what makes them sit on it. */
.hirepage .hire__wall { margin: 4.4rem calc(50% - 50vw) 0; width: 100vw; max-width: 100vw;
  background: #f4efe6; color: #0a0807;
  border-top: 1px solid rgba(10,8,7,.16); border-bottom: 1px solid rgba(10,8,7,.16); }
.hirepage .hire__wall-in { max-width: 76rem; margin: 0 auto;
  padding: clamp(2.4rem, 5.5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem); }
.hirepage .hire__wall-k { margin: 0 0 1.5rem; font: 800 .7rem var(--body);
  letter-spacing: .3em; text-transform: uppercase; color: #c1121f; }
.hirepage .hire__wall-row { list-style: none; margin: 0; padding: 0; display: grid;
  gap: 1.7rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
/* one fixed sight-line for the marks, and the marks hung inside it. Five
   logos drawn by five different hands carry five different amounts of
   air in the file; the row is the constant and each height is tuned
   against it, so the wall reads as one row and not as five files. */
.hirepage .hire__mark { display: grid; grid-template-rows: 4.4rem auto auto;
  gap: .5rem; min-width: 0; }
.hirepage .hire__mark img { max-width: 100%; width: auto; object-fit: contain;
  object-position: left center; align-self: center; justify-self: start;
  mix-blend-mode: multiply; }
.hirepage .hire__mark:nth-child(1) img { height: 3.1rem; }
.hirepage .hire__mark:nth-child(2) img { height: 4.4rem; }
.hirepage .hire__mark:nth-child(3) img { height: 2.1rem; }
.hirepage .hire__mark:nth-child(4) img { height: 3.6rem; }
.hirepage .hire__mark:nth-child(5) img { height: 4.4rem; }
.hirepage .hire__mark b { font: 800 .9rem/1.25 var(--body); color: #0a0807; }
.hirepage .hire__mark span { margin-top: -.35rem; font: 700 .62rem/1.45 var(--body);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(10,8,7,.6); }

/* ---------- REGISTER THREE: the rail and its companion ----------
   On a wide screen the right third of a timeline is dead space. It
   carries a still from the films instead — with no caption, because
   a photograph set beside a date gets read as a photograph OF it.
   In 2025 that column holds the actual scans. */
.hirepage .hire__rail { display: block; }
.hirepage .hire__rail-pic { display: none; margin: 0; }
.hirepage .hire__scans { display: grid; grid-auto-flow: column; justify-content: start;
  gap: .5rem; grid-column: 1; margin: .9rem 0 0; }
/* the same grade the receipts band uses: three white rectangles in the
   middle of a dark rail are a flashbulb, not evidence */
.hirepage .hire__scans img { width: 5.2rem; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: top; background: #f4efe6;
  box-shadow: 0 12px 24px -13px rgba(0,0,0,.9);
  filter: grayscale(1) contrast(1.08) brightness(.62) sepia(.16);
  transition: filter .3s ease; }
.hirepage .hire__scans:hover img { filter: none; }
@media (prefers-reduced-motion: reduce) { .hirepage .hire__scans img { transition: none; } }
html[data-theme="light"] .hirepage .hire__scans img {
  filter: grayscale(.85) contrast(1.04) brightness(.94) sepia(.1);
  /* the bone backing plate is what separates a scan from the rail on the dark
     coat; in daylight the plate and the rail are the same bone and the three
     scans dissolve into the page. The plate becomes an edge instead. */
  box-shadow: 0 0 0 1px rgba(26,20,13,.22), 0 10px 22px -14px rgba(26,20,13,.5); }
@media (min-width: 560.02px) { .hirepage .hire__scans { grid-column: 2; } }
@media (min-width: 1024px) {
  .hirepage .hire__rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    column-gap: 2.6rem; align-items: start; }
  .hirepage .hire__rail-pic { display: block; position: sticky; top: 5.5rem;
    height: min(58vh, 30rem); overflow: hidden; }
  .hirepage .hire__rail-pic img { display: block; width: 100%; height: 100%;
    object-fit: cover; filter: grayscale(.35) contrast(1.05) brightness(.82); }
}

/* the 2025 ledger: dates on the left, one line of record each. It was
   a paragraph, and a paragraph is the wrong shape for five filings. */
.hirepage .hire__ledger { margin: .5rem 0 0; }
.hirepage .hire__ledger > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: .2rem .9rem; padding: .42rem 0 .45rem; border-top: 1px solid var(--b1rule); }
.hirepage .hire__ledger > div:last-of-type { border-bottom: 1px solid var(--b1rule); }
.hirepage .hire__ledger dt { font: 800 .68rem/1.7 var(--body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ruby-hot); font-variant-numeric: tabular-nums; }
.hirepage .hire__ledger dd { margin: 0; font: 500 .85rem/1.55 var(--body); color: var(--cream-dim); }

/* ---------- REGISTER ONE, DARK: the receipts ----------
   Measured problem: nine white rectangles on this page read about
   four and a half times brighter than everything around them. The
   band goes dark and the scans are graded down into the palette,
   coming back to full colour under the pointer and at full fidelity
   in the lens. Each one leads with the authority that ISSUED it. */
.hirepage .hire__rcp { margin: 4.4rem calc(50% - 50vw) 0; width: 100vw; max-width: 100vw;
  background: #0a0807; color: #f4efe6; }
.hirepage .hire__rcp-in { max-width: 76rem; margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.2rem, 4vw, 3rem) clamp(2.6rem, 5vw, 3.6rem); }
.hirepage .hire__rcp-k { margin: 0 0 .55rem; font: 700 .64rem var(--body);
  letter-spacing: .22em; text-transform: uppercase; color: rgba(244,239,230,.6); }
.hirepage .hire__rcp-h { margin: 0 0 1.8rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.3rem); line-height: .96; letter-spacing: .015em;
  text-transform: uppercase; color: #f4efe6; }
.hirepage .hire__rcp-h::before { content: ""; display: block; width: 2.6rem; height: 3px;
  margin-bottom: .6rem; background: #e5383b; }
.hirepage .hire__rcp-wall { margin: 0; }
/* contain, not cover: one of the nine is a landscape certificate and a
   cropped certificate looks like a mistake. The plate behind it is part
   of the image box, so the grade dims the paper and the plate together
   instead of leaving a bright card around a dimmed scan. */
.hirepage .hire__rcp .hire__pill img { display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: contain; padding: .3rem; background: #f4efe6; margin-bottom: .6rem;
  box-shadow: 0 18px 32px -18px rgba(0,0,0,.95);
  filter: grayscale(1) contrast(1.1) brightness(.55) sepia(.18);
  transition: filter .3s ease; }
.hirepage .hire__rcp .hire__pill:hover img,
.hirepage .hire__rcp .hire__pill:focus-visible img { filter: none; }
.hirepage .hire__rcp .hire__pill b { display: block; font: 800 .8rem/1.28 var(--body);
  color: #f4efe6; }
.hirepage .hire__rcp .hire__pill span { display: block; margin-top: .2rem;
  font: 700 .62rem/1.4 var(--body); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244,239,230,.58); }
.hirepage .hire__rcp .hire__pill:hover b { color: #e5383b; }
.hirepage .hire__rcp-more { margin-top: 1.9rem; }
.hirepage .hire__rcp-more > summary { cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .7rem; padding: .75em 0;
  font: 800 .68rem var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: #e5383b; }
.hirepage .hire__rcp-more > summary::-webkit-details-marker { display: none; }
.hirepage .hire__rcp-more > summary::after { content: ""; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.hirepage .hire__rcp-more[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.hirepage .hire__rcp-more .hire__trust { margin-top: 1.2rem; }
@media (prefers-reduced-motion: reduce) {
  .hirepage .hire__rcp .hire__pill img,
  .hirepage .hire__rcp-more > summary::after { transition: none; }
}

/* ---------- REGISTER FOUR: one quiet run of type ----------
   Six rooms, six names on six rules. No thumbnails, no blurbs: the
   short version lives in a <template> and opens in the lens. */
.hirepage .hire__rooms-k { margin: 4.4rem 0 1rem; font: 800 .72rem var(--body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ruby-hot); }
.hirepage .hire__rooms { display: grid; grid-template-columns: minmax(0,1fr);
  border-bottom: 1px solid var(--b1rule); }
@media (min-width: 720px) {
  .hirepage .hire__rooms { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 3rem; }
}
.hirepage .hire__room { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.05rem 0 1.1rem; border-top: 1px solid var(--b1rule);
  color: var(--cream); transition: color .2s ease; }
.hirepage .hire__room b { font: 800 1.02rem/1.3 var(--body); }
.hirepage .hire__room-go { width: 1.05rem; height: 1.05rem; flex: none; color: var(--ruby-hot);
  transition: transform .25s ease; }
.hirepage .hire__room:hover { color: var(--ruby-hot); }
.hirepage .hire__room:hover .hire__room-go { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .hirepage .hire__room, .hirepage .hire__room-go { transition: none; }
  .hirepage .hire__room:hover .hire__room-go { transform: none; }
}

/* the preview that opens out of a room. It is a preview: the door to
   the page itself is the last thing in it, and it is the card's own
   href, never a second copy of the address. */
.lens__pop { padding: clamp(1.4rem, 4vw, 2rem); }
.lens__popk { margin: 0 0 .4rem; font: 800 .64rem var(--body); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ruby-hot); }
.lens__poph { margin: 0 0 .75rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1; letter-spacing: .015em;
  text-transform: uppercase; color: var(--cream); }
.lens__pop p { margin: 0 0 1.25rem; font: 500 .95rem/1.65 var(--body); color: var(--cream-dim); }
.lens__popgo { display: inline-block; padding: .85em 1.35em; border-radius: 2px;
  background: var(--ruby); color: #fff; font: 800 .7rem var(--body);
  letter-spacing: .16em; text-transform: uppercase; }
.lens__popgo:hover { background: var(--ruby-hot); }

/* -- daylight: the sheet above draws its rules in cream at low alpha,
      which on a cream page is no rule at all. Same weights, ink. -- */
html[data-theme="light"] .hirepage .hire__stat,
html[data-theme="light"] .hirepage .hire__rgroup,
html[data-theme="light"] .hirepage .hire__rate,
html[data-theme="light"] .hirepage .hire__qa { border-color: var(--b1rule-hard); }
html[data-theme="light"] .hirepage .hire__rate,
html[data-theme="light"] .hirepage .hire__qa { border-color: var(--b1rule); }
html[data-theme="light"] .hirepage .hire__roadshow-in { border-color: var(--b1rule-hard); }
html[data-theme="light"] .hirepage .hire__stamp { background: var(--ink); }

/* -- the sticky switch bar sits over a full-bleed cover, and its own ink
      only reached the container's edges, so the photograph showed through
      the gutter beside it. The bar keeps its measure; its background is
      thrown edge to edge behind it. -- */

/* -- THE COLLISION. The house dock is centred and fixed at the bottom;
      the page's own action pill is fixed in the right corner at very
      nearly the same height, and on a phone the dock is wide enough
      that the two overlap. The pill steps up over the dock instead of
      onto it, and on the narrowest screens it goes full width so it
      never sits on top of live text either. -- */
.hirepage .mh__cta { right: clamp(0.9rem, 4vw, 2rem); left:revert; bottom:calc(var(--appbar-h,4.6rem) + 1.5rem + env(safe-area-inset-bottom)); }
html.pocket-on .hirepage .mh__cta { bottom: calc(var(--appbar-h, 4.6rem) + 1.5rem
  + env(safe-area-inset-bottom) + var(--pocket-h)); }
@media (max-width: 720px) {
  .hirepage .mh__cta { right: .8rem; left: auto;
    bottom: calc(var(--appbar-h, 4.6rem) + env(safe-area-inset-bottom) + 1.9rem); }
  html.pocket-on .hirepage .mh__cta { bottom: calc(var(--appbar-h, 4.6rem)
    + env(safe-area-inset-bottom) + var(--pocket-h, 4.9rem) + 1.9rem); }
}

/* ============================================================
   EQUITY UPRISE — the program page (equity-uprise.html).
   Builder Two, appended; every selector is namespaced eu* and
   scoped under .eupage so nothing here can reach another room.

   Four registers alternate down the page and no two neighbours
   share a form: a full-bleed hero, a rail of dated documents, a
   second full-bleed band, an editorial outcome, a wall led by the
   issuing authority, one quiet line of pure type, a roster, a
   photo strip. The scans are darkened into the palette at rest
   and come back to full colour on hover or focus, because nine
   white rectangles on ink read as a flashbulb, not as evidence.

   Tokens are declared twice so the light theme flips the rules
   and the dim text with it. Type that sits ON a photograph never
   flips: the scrim under it is always dark, so the type over it
   is always cream.
   ============================================================ */

.eupage { --eu-pad: clamp(1.2rem, 4vw, 3rem); --eu-w: 76rem;
  --eu-rule: rgba(244,239,230,.16); --eu-rule-soft: rgba(244,239,230,.09);
  --eu-dim: rgba(244,239,230,.55); --eu-gold: rgba(232,200,119,.34);
  --eu-onimg: #f4efe6;
  /* the page ground as three numbers, so one veil can fade a
     photograph into whichever coat the clock is wearing */
  --eu-ground: 10,8,7;
  /* the receipts treatment: on ink a scan is a flashbulb and gets
     darkened into the palette; on the daylight coat the same scan is
     already quiet and only wants its colour taken out */
  --eu-receipt: grayscale(1) contrast(1.1) brightness(.55) sepia(.18); }
html[data-theme="light"] .eupage { --eu-rule: rgba(26,20,13,.22);
  /* .6 mirrored the dark coat's .55 by symmetry, but ink over bone composites
     lighter than cream over ink does — it landed at 4.37:1 and put the
     "Open the document (PDF)" links just under the floor */
  --eu-rule-soft: rgba(26,20,13,.12); --eu-dim: rgba(26,20,13,.68);
  --eu-gold: rgba(146,112,22,.42); --eu-ground: 242,237,228;
  --eu-receipt: grayscale(1) contrast(1.04) brightness(.99) sepia(.12); }

.eupage main { padding-bottom: calc(var(--appbar-h, 4.6rem) + 4.5rem); }
.eupage a:focus-visible { outline: 2px solid var(--ruby-hot); outline-offset: 3px; }

/* -- the receipts treatment: blended at rest, true on hover/focus -- */
.eupage .euscan { filter: var(--eu-receipt); transition: filter .35s ease; }
.eupage a:hover .euscan, .eupage a:focus-visible .euscan,
.eupage .euside:hover .euscan { filter: none; }
@media (prefers-reduced-motion: reduce) { .eupage .euscan { transition: none; } }

/* -- REGISTER ONE: the hero. Band above the type on a phone, column
      beside it on a desk; the two never overlap in either. -- */
.euhero { display: flex; flex-direction: column; }
.euhero__media { position: relative; height: 34vh; min-height: 210px; }
.euhero__media img { width: 100%; height: 100%; object-fit: cover;
  object-position: 40% 40%; display: block; }
.euhero__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--eu-ground), .28) 0%,
    rgba(var(--eu-ground), .08) 42%, rgb(var(--eu-ground)) 100%); }
.euhero__copy { padding: 1.4rem var(--eu-pad) 0; }
.euhero__k { display: flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--body); font-weight: 800; font-size: .72rem; line-height: 1.4;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ruby-hot); }
/* the mark is drawn in navy and the night coat is nearly black, so it
   rides a cream chip rather than being recoloured: the brand's own
   artwork, unaltered, on a plate that shows up in both coats */
.euhero__mark { width: 1.35rem; height: auto; display: block; box-sizing: content-box;
  padding: .18rem; border-radius: 3px; background: #f4efe6; }
.euhero__h { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 6.4rem); line-height: .86; margin: .75rem 0 0; }
.euhero__h em { font-style: normal; color: var(--ruby-hot); }
.euhero__stand { margin: 1.1rem 0 0; max-width: 40ch; line-height: 1.6;
  font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--cream-dim); }
.euhero__foot { margin: 1.1rem 0 0; padding-top: .85rem; max-width: 52ch;
  border-top: 1px solid var(--eu-gold); font-size: .8rem; line-height: 1.55;
  color: var(--eu-dim); }
.euhero__foot b { color: var(--cream); }

/* ============================================================
   UPRISE WORLD, the band under the Equity Uprise hero.
   The game existed for weeks with no door to it anywhere on the
   site. It goes second, above the numbers: someone who will not
   read a ledger will still walk a planet.
   ============================================================ */
.euworld{padding:clamp(1rem,4vw,2rem) clamp(1rem,4vw,2.4rem) 0}
.euworld__card{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);
  align-items:center;text-decoration:none;color:inherit;position:relative;isolation:isolate;
  border:1px solid rgba(244,239,230,0.16);border-radius:1.15rem;overflow:hidden;
  padding:clamp(1rem,2.6vw,1.6rem);background:rgba(244,239,230,0.045);
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.euworld__card:hover,.euworld__card:focus-visible{border-color:rgba(244,239,230,0.42);
  background:rgba(244,239,230,0.085);transform:translateY(-3px)}
html[data-theme="light"] .euworld__card{border-color:rgba(24,18,14,0.16);background:rgba(24,18,14,0.035)}
html[data-theme="light"] .euworld__card:hover{border-color:rgba(24,18,14,0.4);background:rgba(24,18,14,0.06)}
.euworld__art{display:block;border-radius:0.85rem;overflow:hidden;aspect-ratio:1;
  box-shadow:0 18px 46px -20px rgba(0,0,0,0.9)}
.euworld__art img{width:100%;height:100%;object-fit:cover;display:block}
.euworld__copy{display:flex;flex-direction:column;gap:0.55rem;min-width:0}
.euworld__k{font-size:0.66rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:800;
  color:var(--ruby-hot,#e5383b)}
.euworld__h{font-family:var(--display,inherit);font-size:clamp(1.8rem,4.4vw,2.9rem);
  line-height:0.98;text-transform:uppercase;color:var(--cream)}
/* was color:var(--ink,#181210) — the fallback was the intent, but --ink IS
   defined and flips to bone in daylight, so this painted bone on bone and
   "Walk the record." vanished. --cream is the TEXT token: it flips the
   other way, to ink, and always contrasts with the ground. */
html[data-theme="light"] .euworld__h{color:var(--cream)}
.euworld__p{font-size:clamp(0.9rem,1.5vw,1rem);line-height:1.55;max-width:58ch;
  color:var(--cream-dim,rgba(244,239,230,0.72))}
.euworld__p i{font-style:italic}
.euworld__go{margin-top:0.35rem;align-self:start;display:inline-flex;align-items:center;gap:0.5rem;
  font-weight:800;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:#fff;
  padding:0.8rem 1.3rem;border-radius:100px;
  background:var(--metal,linear-gradient(165deg,#ff5a5c 0%,#e5383b 34%,#b3121b 58%,#ff6a6c 100%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 14px 34px -14px rgba(0,0,0,0.85)}
@media (max-width:46rem){
  .euworld__card{grid-template-columns:minmax(0,1fr)}
  .euworld__art{max-width:13rem}
}
@media (prefers-reduced-motion:reduce){.euworld__card{transition:none}
  .euworld__card:hover{transform:none}}
.euhero__cred { margin: .55rem 0 0; font-size: .64rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--eu-dim); opacity: .75; }
@media (min-width: 900px) {
  .euhero { flex-direction: row-reverse; align-items: stretch;
    min-height: min(82vh, 720px); }
  .euhero__media { flex: 1 1 52%; height: auto; min-height: 0; }
  .euhero__veil { background: linear-gradient(90deg, rgb(var(--eu-ground)) 0%,
    rgba(var(--eu-ground), .55) 26%, rgba(var(--eu-ground), 0) 68%); }
  .euhero__copy { flex: 1 1 48%; display: flex; flex-direction: column;
    justify-content: center; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem)
    clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
}

/* -- the numbers, over one hard rule each -- */
.eustats { max-width: var(--eu-w); margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
  padding: 0 var(--eu-pad); display: grid; gap: 0 clamp(1rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.eustat { padding: .9rem 0 1.4rem; border-top: 1px solid var(--eu-rule); }
.eustat--won { border-top: 3px solid var(--ruby); }
.eustat b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 3.5rem); line-height: .95; color: var(--cream); }
.eustat--won b { color: var(--ruby-hot); }
.eustat small { display: block; margin-top: .45rem; max-width: 24ch;
  font-size: .78rem; line-height: 1.45; color: var(--cream-dim); }

/* -- REGISTER THREE: the Georgia rail, with a companion that sticks
      into the dead right-hand column once there is one -- */
.euseg { max-width: var(--eu-w); margin: clamp(3.5rem, 9vw, 6.5rem) auto 0;
  padding: 0 var(--eu-pad); }
.euseg__place { margin: 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(.88rem, 2.2vw, 1.05rem); color: var(--ruby-hot); }
.euseg__h { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: .95; margin: .3rem 0 0; }
.euseg__lede { margin: .9rem 0 0; max-width: 54ch; line-height: 1.62;
  color: var(--cream-dim); }
.euseg__body { margin-top: clamp(1.8rem, 5vw, 3rem); display: grid;
  gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 1024px) {
  .euseg__body { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    align-items: start; }
  .euseg__side { position: sticky; top: clamp(2rem, 8vh, 5rem); }
}

.eurail { list-style: none; margin: 0; padding: 0 0 0 1.5rem;
  border-left: 1px solid var(--eu-gold); }
.eudoc { position: relative; padding: 0 0 clamp(1.9rem, 4vw, 2.8rem); }
.eudoc:last-child { padding-bottom: 0; }
.eudoc::before { content: ""; position: absolute; left: calc(-1.5rem - 5px); top: .42rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ruby);
  box-shadow: 0 0 0 4px var(--ink); }
.eudoc__date { margin: 0; font-family: var(--body); font-weight: 800; font-size: .72rem;
  line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--ruby-hot); }
.eudoc__auth { margin: .3rem 0 0; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eu-dim); }
.eudoc__t { margin: .5rem 0 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.22rem, 3vw, 1.7rem); line-height: 1.06; }
.eudoc__b { margin: .6rem 0 0; max-width: 58ch; font-size: .97rem; line-height: 1.62;
  color: var(--cream-dim); }
.eudoc__b b { color: var(--cream); }
.eudoc__prov { margin: .65rem 0 0; max-width: 58ch; padding-left: .8rem;
  border-left: 2px solid var(--eu-gold); font-size: .8rem; line-height: 1.55;
  color: var(--eu-dim); }
.eudoc__go { display: inline-block; margin-top: .85rem; font-weight: 800;
  font-size: .82rem; letter-spacing: .04em; color: var(--ruby-hot);
  border-bottom: 1px solid var(--ruby); }
.eudoc__scan { display: block; margin-top: .9rem; max-width: 19rem;
  border: 1px solid var(--eu-gold); background: var(--ink-2); padding: .45rem; }
.eudoc__scan img { display: block; width: 100%; height: auto; }
.eudoc__open { display: block; margin-top: .45rem; font-family: var(--body);
  font-weight: 800; font-size: .64rem; line-height: 1.3; letter-spacing: .18em;
  text-transform: uppercase; color: var(--eu-dim); }
.eudoc__scan:hover .eudoc__open, .eudoc__scan:focus-visible .eudoc__open { color: var(--ruby-hot); }

.euside { margin: 0; border: 1px solid var(--eu-gold); background: var(--ink-2);
  padding: .55rem; }
.euside img { display: block; width: 100%; height: auto; }
.euside figcaption { margin-top: .7rem; padding: 0 .25rem .25rem; font-size: .8rem;
  line-height: 1.55; color: var(--cream-dim); }
.euside figcaption a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }

/* -- REGISTER ONE, second and last: the title sits on the photograph -- */
.euband { position: relative; margin-top: clamp(3.5rem, 9vw, 6.5rem);
  min-height: min(72vh, 640px); display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; }
.euband__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%; }
.euband__veil { position: absolute; inset: 0; background: linear-gradient(180deg,
  rgba(10,8,7,.70) 0%, rgba(10,8,7,.20) 38%, rgba(10,8,7,.92) 100%); }
.euband__type { position: relative; width: 100%; max-width: var(--eu-w);
  margin: 0 auto; padding: clamp(2.2rem, 6vw, 4.2rem) var(--eu-pad) 0; }
.euband__k { margin: 0; font-family: var(--body); font-weight: 800; font-size: .72rem;
  line-height: 1.4; letter-spacing: .42em; text-transform: uppercase; color: var(--ruby-hot); }
.euband__h { margin: .5rem 0 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 5.4rem); line-height: .88;
  color: var(--eu-onimg); }
.euband__h em { font-style: normal; color: var(--ruby-hot); }
.euband__sub { margin: .9rem 0 0; max-width: 46ch; line-height: 1.6;
  font-size: clamp(.94rem, 2.2vw, 1.06rem); color: rgba(244,239,230,.86); }
.euband__cred { position: relative; width: 100%; max-width: var(--eu-w);
  margin: 1.3rem auto 0; padding: 0 var(--eu-pad) 1.4rem; font-size: .64rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(244,239,230,.5); }

/* -- REGISTER TWO: the outcome. One numeral, one account, its sources -- */
.euwin { max-width: var(--eu-w); margin: clamp(2.6rem, 6vw, 4.2rem) auto 0;
  padding: 0 var(--eu-pad); display: grid; gap: clamp(1.3rem, 4vw, 3rem);
  align-items: start; }
@media (min-width: 820px) { .euwin { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); } }
.euwin__num { border-top: 3px solid var(--ruby); padding-top: .7rem; }
.euwin__num b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(4.2rem, 15vw, 8.5rem); line-height: .82; color: var(--ruby-hot); }
.euwin__num span { display: block; margin-top: .35rem; font-family: var(--body);
  font-weight: 800; font-size: .78rem; line-height: 1.3; letter-spacing: .42em;
  text-transform: uppercase; color: var(--cream); }
.euwin__k { margin: 0; font-family: var(--body); font-weight: 800; font-size: .7rem;
  line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--eu-dim); }
.euwin__h { margin: .4rem 0 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: .95; }
.euwin__p { margin: .9rem 0 0; max-width: 60ch; font-size: 1.01rem; line-height: 1.66;
  color: var(--cream-dim); }
.euwin__p b { color: var(--cream); }
.euwin__srck { margin: 1.3rem 0 0; font-family: var(--body); font-weight: 800;
  font-size: .66rem; line-height: 1.3; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ruby-hot); }
.euwin__src { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .42rem; }
.euwin__src a { font-size: .89rem; color: var(--cream); border-bottom: 1px solid var(--eu-gold); }
.euwin__src a:hover { color: var(--ruby-hot); border-bottom-color: var(--ruby); }

/* -- the dated ledger: one line, one date, one thing that happened -- */
.euledger { max-width: var(--eu-w); margin: clamp(2.4rem, 6vw, 3.6rem) auto 0;
  padding: 0 var(--eu-pad); }
.euledger__head { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; align-items: baseline;
  justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--eu-gold); }
.euledger__h { margin: 0; font-family: var(--body); font-weight: 800; font-size: .78rem;
  line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); }
.euledger__go { font-weight: 800; font-size: .8rem; color: var(--ruby-hot); }
.euledger__list { list-style: none; margin: 0; padding: 0; }
.euledger__list li { display: grid; gap: .15rem .9rem; padding: .85rem 0 .85rem .85rem;
  border-left: 2px solid transparent; border-bottom: 1px solid var(--eu-rule-soft); }
.euledger__list li.is-mark { border-left-color: var(--eu-gold); }
.euledger__list li.is-won { border-left-color: var(--ruby); }
@media (min-width: 720px) { .euledger__list li { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.euledger__d { font-family: var(--body); font-weight: 800; font-size: .74rem;
  line-height: 1.55; letter-spacing: .12em; color: var(--cream); }
.euledger__list li.is-won .euledger__d { color: var(--ruby-hot); }
.euledger__x { font-size: .94rem; line-height: 1.6; color: var(--cream-dim); }
.euledger__list li.is-won .euledger__x { color: var(--cream); }

/* -- THE WALL: the issuing authority is the headline, not the paper -- */
.eucites { max-width: var(--eu-w); margin: clamp(3.5rem, 9vw, 6.5rem) auto 0;
  padding: 0 var(--eu-pad); }
.eucites__k { margin: 0; font-family: var(--body); font-weight: 800; font-size: .72rem;
  line-height: 1.4; letter-spacing: .34em; text-transform: uppercase; color: var(--ruby-hot); }
.eucites__h { margin: .35rem 0 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: .92; }
.eucites__lede { margin: .8rem 0 0; max-width: 58ch; line-height: 1.6; color: var(--cream-dim); }
.eucites__wall { margin-top: clamp(1.8rem, 4vw, 2.6rem); display: grid;
  gap: clamp(1.7rem, 4vw, 2.6rem); }
.eucites__fallback { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.eucites__fallback a { color: var(--cream); border-bottom: 1px solid var(--eu-gold); }
.eucite { border-top: 1px solid var(--eu-gold); padding-top: 1rem; }
.eucite__auth { margin: 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.08rem, 2.8vw, 1.45rem); line-height: 1.08;
  color: var(--cream); }
.eucite__count { margin: .28rem 0 0; font-family: var(--body); font-weight: 800;
  font-size: .66rem; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ruby-hot); }
.eucite__docs { margin-top: 1.1rem; display: grid; gap: 1.5rem; }
.eucite__doc { display: grid; gap: .9rem; }
@media (min-width: 720px) { .eucite__doc { grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.4rem; align-items: start; } }
.eucite__scan { display: block; border: 1px solid var(--eu-gold); background: var(--ink-2);
  padding: .4rem; max-width: 19rem; }
.eucite__scan img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: 50% 0; }
.eucite__open { display: block; margin-top: .4rem; font-family: var(--body); font-weight: 800;
  font-size: .6rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase;
  color: var(--eu-dim); }
.eucite__scan:hover .eucite__open, .eucite__scan:focus-visible .eucite__open { color: var(--ruby-hot); }
.eucite__date { margin: 0; font-family: var(--body); font-weight: 800; font-size: .68rem;
  line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--eu-dim); }
.eucite__t { margin: .25rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.35;
  color: var(--cream); }
.eucite__q { margin: .6rem 0 0; padding-left: .9rem; border-left: 2px solid var(--ruby);
  max-width: 62ch; font-size: .94rem; line-height: 1.62; color: var(--cream-dim); }
.eucite__sig { margin: .5rem 0 0; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eu-dim); }
.eucite__prov { margin: .55rem 0 0; padding-left: .9rem; border-left: 2px solid var(--eu-gold);
  max-width: 62ch; font-size: .78rem; line-height: 1.55; color: var(--eu-dim); }

/* -- REGISTER FOUR, once: no image, no card, no rule -- */
.euquiet { max-width: 50rem; margin: clamp(4.5rem, 12vw, 8.5rem) auto;
  padding: 0 var(--eu-pad); text-align: center; }
.euquiet__line { margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 4.2vw, 2.6rem); line-height: 1.18; color: var(--cream); }
.euquiet__by { margin: 1.4rem 0 0; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--eu-dim); }

/* -- the roster: the stage name leads, the legal name is the credit -- */
.eufel { max-width: var(--eu-w); margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: 0 var(--eu-pad); }
.eufel__k { margin: 0; font-family: var(--body); font-weight: 800; font-size: .72rem;
  line-height: 1.4; letter-spacing: .34em; text-transform: uppercase; color: var(--ruby-hot); }
.eufel__h { margin: .35rem 0 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: .92; }
.eufel__prov { margin-top: 1.2rem; max-width: 64ch; padding: 1rem 1.1rem;
  border: 1px solid var(--eu-gold); background: var(--ink-2); }
.eufel__prov:empty { display: none; }
.eufel__provk { margin: 0; font-family: var(--body); font-weight: 800; font-size: .64rem;
  line-height: 1.3; letter-spacing: .26em; text-transform: uppercase; color: var(--ruby-hot); }
.eufel__prov p { margin: .45rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--cream-dim); }
.eufel__q { margin: .65rem 0 0; padding-left: .85rem; border-left: 2px solid var(--ruby);
  font-size: .88rem; line-height: 1.55; color: var(--cream); }
.eufel__note { font-size: .76rem; line-height: 1.5; color: var(--eu-dim); }
.eufel__note a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.eufel__fallback { color: var(--cream-dim); line-height: 1.6; }
.eufel__fallback a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.eufel__grid { margin-top: clamp(1.6rem, 4vw, 2.4rem); display: grid; gap: 1.7rem 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.eufelc { border-top: 1px solid var(--eu-rule); padding-top: .9rem; }
.eufelc__stage { margin: 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.28rem, 3.4vw, 1.65rem); line-height: 1;
  color: var(--cream); }
.eufelc__legal { margin: .32rem 0 0; font-size: .76rem; letter-spacing: .09em;
  color: var(--eu-dim); }
.eufelc__role { margin: .5rem 0 0; font-family: var(--body); font-weight: 800;
  font-size: .66rem; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ruby-hot); }
.eufelc__blurb { margin: .55rem 0 0; font-size: .89rem; line-height: 1.55; color: var(--cream-dim); }
.eufelc__mark { margin: .6rem 0 0; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--eu-dim); }
.eufelc__mark::before { content: ""; display: inline-block; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--ruby); margin-right: .45rem; vertical-align: .08em; }
.eufelc__mark.is-off::before { background: var(--eu-dim); }
.eufelc__note { margin: .5rem 0 0; padding-left: .7rem; border-left: 2px solid var(--eu-gold);
  font-size: .74rem; line-height: 1.5; color: var(--eu-dim); }
.eufelc__go { margin: .6rem 0 0; font-weight: 800; font-size: .78rem; }
.eufelc__go a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }

/* -- the rally strip: five frames, one door -- */
.eustrip { max-width: var(--eu-w); margin: clamp(3.2rem, 8vw, 5rem) auto 0;
  padding: 0 var(--eu-pad); }
.eustrip__head { border-top: 1px solid var(--eu-gold); padding-top: 1rem; }
.eustrip__h { margin: 0; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1; }
.eustrip__sub { margin: .6rem 0 0; max-width: 58ch; font-size: .91rem; line-height: 1.6;
  color: var(--cream-dim); }
.eustrip__reel { margin-top: 1.2rem; display: grid; gap: .55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eustrip__f { display: block; overflow: hidden; background: var(--ink-2); }
.eustrip__f:first-child { grid-column: span 2; }
.eustrip__f img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; filter: grayscale(.55) brightness(.82);
  transition: filter .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.eustrip__f:hover img, .eustrip__f:focus-visible img { filter: none; transform: scale(1.04); }
@media (min-width: 720px) {
  .eustrip__reel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .eustrip__f:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .eustrip__f img { transition: none; }
  .eustrip__f:hover img, .eustrip__f:focus-visible img { transform: none; }
}
.eustrip__go { margin: .9rem 0 0; font-weight: 800; font-size: .82rem; }
.eustrip__go a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }

/* -- the doors, ranked: join first, the rest behind it -- */
.eudoors { max-width: var(--eu-w); margin: clamp(3.5rem, 9vw, 6rem) auto 0;
  padding: 0 var(--eu-pad); }
.eudoors__h { margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--eu-gold);
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.9rem); line-height: 1; }
.eudoors__grid { margin-top: 1.4rem; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.eudoor { display: block; padding: 1rem 1.1rem; border: 1px solid var(--eu-rule);
  background: var(--ink-2); transition: border-color .25s ease, transform .25s ease; }
.eudoor:hover, .eudoor:focus-visible { border-color: var(--ruby); transform: translateY(-2px); }
.eudoor b { display: block; font-size: .95rem; line-height: 1.28; color: var(--cream); }
.eudoor small { display: block; margin-top: .42rem; font-size: .82rem; line-height: 1.5;
  color: var(--cream-dim); }
.eudoor--lead { border-color: var(--ruby); grid-column: 1 / -1; }
@media (min-width: 720px) { .eudoor--lead { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) {
  .eudoor { transition: none; }
  .eudoor:hover, .eudoor:focus-visible { transform: none; }
}
.eudoors__foot { margin: 1.3rem 0 0; max-width: 62ch; font-size: .86rem; line-height: 1.6;
  color: var(--cream-dim); }
.eudoors__foot a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.eudoors__cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* -- the docket timeline ends in the outcome, not in the remand -- */
.dkt__tl li.eu-won em { color: var(--ruby-hot); }
.dkt__tl li.eu-won .dkt__tldot { background: var(--ruby-hot);
  box-shadow: 0 0 0 4px rgba(229,56,59,.22); }

/* ============================================================
   EQUITY UPRISE — the honest note. Builder Two, appended.

   Four rooms in this section make a promise a machine is not
   keeping: the fellowship terminal, the verification form, and
   the two policy pages that belong to the program without ever
   having said so. Each of them now carries one paragraph that
   tells the reader exactly what happens next and who reads it.
   It gets one form, used everywhere, so a visitor learns to
   recognise it: a ruby rule down the left and a faint ruby wash,
   no heavier than the copy it sits beside.
   ============================================================ */
.euhonest { margin: 1.2rem 0 0; padding: .85rem 1.05rem; max-width: 66ch;
  border-left: 3px solid var(--ruby); background: rgba(229,56,59,.06);
  font-size: .9rem; line-height: 1.62; color: var(--cream-dim); }
.euhonest b, .euhonest strong { color: var(--cream); }
.euhonest a { color: var(--ruby-hot); border-bottom: 1px solid var(--ruby); }
.euhonest a:hover { color: var(--cream); }
.chat__review .euhonest { margin-top: 1rem; }

/* ============================================================
   EQUITY UPRISE — the mark that was being overwritten.
   Builder Two, appended; nothing above is edited.

   css/style.css:1968 replaces EVERY .kicker__mark with
   m-mark-dark.png in daylight, through content:url(). That rule
   was written when every kicker in the house carried the one
   McCluster M, and it is right for those. It is wrong here: six
   Equity Uprise pages put the PROGRAM's own logo in that slot,
   and from 07:00 to 19:00 the browser was quietly swapping it
   for somebody else's mark — src, currentSrc and naturalWidth
   all still reporting the right file while the wrong picture
   drew. Opt the program's mark out by name; every other kicker
   in the house keeps the behaviour it has always had.
   ============================================================ */
html[data-theme="light"] .kicker__mark[src$="equity-uprise-logo.webp"] { content: normal; }

/* ============================================================
   THE HOUSE MEASURE AND THE HOUSE SCALE — the fixer, appended.
   Nothing above this line is edited.

   Seven pages were measured at 1440 and answered the question
   "is this one site" numerically: six different H1 sizes from
   64px to 168px, six different left margins — 72, 160, 176,
   224, 320, 371 — and one page, the one that matters most,
   whose headline was not even set in the house display face.
   Two pages disagreed with THEMSELVES: a headline on one
   margin over a body on another.

   So the number gets written down, once, here, and every page
   is bound to it. One column: 1120px, which puts the left edge
   at 160 on a 1440 screen and collapses to a 1.2rem gutter on
   a phone. One display scale, five steps, and every H1 on the
   site takes step one in Anton. A page may still choose how
   LOUD it is — a full-bleed band, a ruby eyebrow, a quiet run
   of type — but it no longer gets to choose its own measure.
   ============================================================ */
:root {
  /* the column, and the pad that protects it on a phone */
  --mcc-shell: 76rem;                          /* 1216px: 1120 + 2x48 pad  */
  --mcc-pad: clamp(1.2rem, 4vw, 3rem);         /* 19.2px phone, 48px desk  */
  --mcc-read: 62ch;                            /* running-text measure     */
  /* the display scale: 96 / 72 / 56 / 40 / 28 at 1440 */
  --t-1: clamp(2.6rem, 8vw, 6rem);
  --t-2: clamp(2.1rem, 6vw, 4.5rem);
  --t-3: clamp(1.7rem, 4.6vw, 3.5rem);
  --t-4: clamp(1.4rem, 3.4vw, 2.5rem);
  --t-5: clamp(1.15rem, 2.4vw, 1.75rem);
  /* the one label register the whole site shares */
  --t-label: 800 .7rem/1.4 var(--body);
  /* ruby that can carry text on BOTH coats. --ruby-hot is 3.63:1 on the
     daylight ground, which is under the 4.5:1 floor for anything below
     24px; this token is the same red taken down until it clears. The
     display red is untouched, because large type is not the problem.
     #e5383b was 4.37:1 on the #151312 cards; #e63e41 is the same red
     lifted just past 4.5:1 on every dark card the site uses. */
  --ruby-text: #e63e41;
  /* ruby that carries WHITE text: the same red taken down until white on it
     clears 4.5:1 (white on #e5383b is 4.23:1). Daylight's ruby already does. */
  --ruby-fill: #e32a2e;
}
html[data-theme="light"] { --ruby-text: #a4101a; --ruby-fill: #c1121f; }

/* -- ONE COLUMN, every page. -- */
.bexp, .dkt, .verify, .manifesto, .chat, .felfigs {
  max-width: var(--mcc-shell); margin-left: auto; margin-right: auto;
  padding-left: var(--mcc-pad); padding-right: var(--mcc-pad); }
.eupage { --eu-w: var(--mcc-shell); --eu-pad: var(--mcc-pad); }
.hirepage .bexp { max-width: var(--mcc-shell); }

/* -- ONE H1, every page: the house display face at step one. -- */
.hirepage .hire__cover h1,
.eupage .euhero__h,
.dkt__hero h1.songhero__title,
.verify h1.section-title,
.manifesto__title,
.bexp__hero .hire__cover-copy h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--t-1); line-height: .92; letter-spacing: .012em; }
/* the emphasis inside a headline is CARRIED IN COLOUR, never in a slant.
   css/style.css declares exactly one Anton face and no italic, so <em> at
   64px was asking the browser to shear the glyphs — a synthesised oblique
   with broken counters, visible at headline size on both policy pages. */
.hirepage .hire__cover h1 em,
.eupage .euhero__h em,
.dkt__hero h1.songhero__title em,
.verify h1.section-title em,
.manifesto__title em,
.bexp__hero .hire__cover-copy h1 em {
  font-style: normal; font-synthesis: none; color: var(--ruby-hot); }
.dkt__hero h1.songhero__title { color: var(--cream); text-shadow: none; }
.verify h1.section-title { color: var(--cream); }

/* -- the pages whose H1 is not their own hero still take the scale -- */
.dkt .section-title { font-size: var(--t-3) !important; }

/* ============================================================
   THE LIGHT COAT'S RUBY TEXT. The token was declared once on
   :root and never remapped for daylight, so five newly-styled
   surfaces (and a long tail of older ones) rendered small ruby
   type at 3.63:1 on cream. The surfaces named in the audit take
   the coat-aware token; the display red stays where it is.
   ============================================================ */
.hirepage .hire__rooms-k,
.eupage .eudoc__date,
.eupage .euledger__d,
.pol__q,
.memo__h,
.dkt__subtitle { color: var(--ruby-text); }

/* ============================================================
   HIRE — the services room, which was never measured.
   Five h2s at an identical 35.2px and six h3s at an identical
   30.4px made an eleven-rung ladder down a 15,680px page: the
   exact artefact the owner rejected three times. Each of the
   five now gets its own register.
   ============================================================ */

/* register: the small ruby eyebrow */
.hirepage h2.bexp__section--eyebrow { margin: 4.4rem 0 1rem;
  font-family: var(--body); font-weight: 800; font-size: .72rem; line-height: 1.4;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ruby-hot); }

/* register: the title set ON a full-bleed frame */
.hirepage .hire__bandh { position: relative; margin: 5rem calc(50% - 50vw) 3rem;
  width: 100vw; max-width: 100vw; min-height: min(46vh, 26rem);
  display: flex; align-items: flex-end; overflow: hidden; }
.hirepage .hire__bandh img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; }
.hirepage .hire__bandh-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,7,.15) 0%, rgba(10,8,7,.62) 62%, rgba(10,8,7,.92) 100%); }
.hirepage .hire__bandh-type { position: relative; width: 100%; max-width: var(--mcc-shell);
  margin: 0 auto; padding: 0 var(--mcc-pad) clamp(1.4rem, 4vw, 2.6rem); }
.hirepage .hire__bandh-k { margin: 0 0 .5rem; font: var(--t-label);
  letter-spacing: .3em; text-transform: uppercase; color: #e5383b; }
.hirepage .hire__bandh-h { margin: 0; font-family: var(--display); font-weight: 400;
  font-size: var(--t-2); line-height: .92; text-transform: uppercase; color: #f4efe6; }

/* register: the quiet run of type, once */
.hirepage .hire__quiet { margin: 5rem 0 0; }
.hirepage .hire__quiet-h { margin: 0 0 .9rem; font-family: var(--display); font-weight: 400;
  font-size: var(--t-4); line-height: 1; text-transform: uppercase; color: var(--cream); }
.hirepage .hire__quiet .hire__how { max-width: var(--mcc-read);
  font-size: 1.05rem; line-height: 1.75; color: var(--cream-dim); }

/* the rate-card group headings are a LEVEL DOWN from the section headings,
   and they were not reading as one. Three weights for three kinds of room. */
.hirepage .hire__rgroup-h { font-size: 1.05rem; letter-spacing: .05em;
  padding-left: .75rem; border-left: 3px solid var(--b1rule-hard); }
.hirepage .hire__rgroup--a .hire__rgroup-h { font-size: var(--t-5);
  border-left-color: var(--ruby); }
.hirepage .hire__rgroup--c .hire__rgroup-h { font-size: .96rem;
  border-left-color: var(--ruby-hot); }

/* ============================================================
   HIRE — the wall of marks. Five logos dropped into one 70px
   box at intrinsic scale gave a 2.10x height spread and a 2.01x
   optical-area spread, with the house's own M the SMALLEST mark
   on its own wall. They are normalised on AREA, not on box
   height, at roughly 3400px each, and graded mono at rest in
   the idiom this site already owns for paper.
   ============================================================ */
.hirepage .hire__mark img { filter: grayscale(1) contrast(1.06) brightness(.62);
  transition: filter .3s ease; }
.hirepage .hire__mark:hover img,
.hirepage .hire__mark:focus-within img { filter: none; }
.hirepage .hire__mark:nth-child(1) img,
.hirepage .hire__mark:nth-child(2) img,
.hirepage .hire__mark:nth-child(4) img,
.hirepage .hire__mark:nth-child(5) img { height: 3.65rem; }   /* 58.4px square: 3410px */
.hirepage .hire__mark:nth-child(3) img { height: 2.16rem; }   /* 34.6 x 99: 3425px      */
@media (prefers-reduced-motion: reduce) {
  .hirepage .hire__mark img { transition: none; }
}

/* -- the band the marks hang on. It was #f4efe6 in BOTH coats against a
      daylight body of #f2ede4 — a delta of 2/255 per channel, so the one
      full-bleed cream register on the page was invisible to half its
      visitors. The plate stays paper, because four of these five marks
      were drawn for paper and multiply is what seats them on it; in
      daylight it goes to a deeper manila that is unmistakably a card laid
      on the page rather than the page itself. -- */
html[data-theme="light"] .hirepage .hire__wall { background: #e7ddc8;
  border-top-color: rgba(10,8,7,.26); border-bottom-color: rgba(10,8,7,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

/* ============================================================
   HIRE — the receipts wall, three measured details.
   ============================================================ */
/* 9.92px letterspaced caps under the page's evidence */
.hirepage .hire__rcp .hire__pill span { font-size: .7rem; letter-spacing: .1em; }
/* one tile letterboxed hard against its own plate edge; the mount is
   widened so a scan's own dark margin reads as a mount, not as a fault */
.hirepage .hire__rcp .hire__pill img { padding: .55rem; }
/* the caption and its sub-caption share a baseline across the row even
   when one authority wraps to two lines */
/* (the row-alignment fix lives on the caption below: the content is
   inside the <a>, not the <li>, so a grid on the <li> aligns nothing) */

/* the studio360 frame measured 64.8 mean luminance against a grid
   averaging 33 — it punched a hole in the wall and it is also where the
   cream title had its weakest ground */
.hirepage .hire__disc-tile:nth-child(2) img { filter: grayscale(.35) contrast(1.06) brightness(.58); }
.hirepage .hire__disc-tile:nth-child(2):hover img { filter: grayscale(0) contrast(1.02) brightness(.86); }

/* ============================================================
   HIRE — "Where else to look". Six ideas had been reduced to
   six identical 536x57 link rows, which is the slop-tell the
   brief names first. Two of them carry a number the record can
   settle and a frame that exists in this repo; they lead. The
   other four are a list, and look like one.
   ============================================================ */
.hirepage .hire__leads { display: grid; grid-template-columns: minmax(0,1fr);
  gap: clamp(.8rem, 2vw, 1.4rem); margin: 1.2rem 0 2.4rem; }
@media (min-width: 720px) { .hirepage .hire__leads { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.hirepage .hire__lead { position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border: 1px solid var(--b1rule); color: var(--cream); }
.hirepage .hire__lead img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(.85) contrast(1.05) brightness(.5);
  transition: filter .3s ease, transform .4s ease; }
.hirepage .hire__lead:hover img, .hirepage .hire__lead:focus-visible img {
  filter: grayscale(0) contrast(1.02) brightness(.72); transform: scale(1.03); }
.hirepage .hire__lead-plate { position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: clamp(1rem, 3vw, 1.6rem);
  background: linear-gradient(180deg, rgba(10,8,7,0), rgba(10,8,7,.86) 46%, rgba(10,8,7,.95)); }
.hirepage .hire__lead-n { display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-3); line-height: .92; color: #f4efe6; font-variant-numeric: tabular-nums; }
.hirepage .hire__lead-u { display: block; margin-top: .2rem; font: 700 .68rem/1.45 var(--body);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,230,.66); }
.hirepage .hire__lead-t { display: flex; align-items: center; gap: .5rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(244,239,230,.24);
  font: 800 1rem/1.3 var(--body); color: #f4efe6; }
.hirepage .hire__lead-t .hire__room-go { margin-left: auto; }
.hirepage .hire__room-w { margin-left: auto; margin-right: .9rem;
  font: 600 .74rem/1.4 var(--body); letter-spacing: .08em; color: var(--cream-dim);
  text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .hirepage .hire__lead img { transition: none; }
  .hirepage .hire__lead:hover img { transform: none; }
}

/* ============================================================
   THE HEADLINE NUMBERS AND THE DOCK. Both hire and equity-uprise
   put their figure strip at y 700-844 on a 390x844 phone, which
   is exactly where the fixed dock (762-830) and the action pill
   (702-740) live. The brief's hazard reads "never cover live
   text"; the numbers ARE the text. The strip is pushed clear of
   the first screen so nothing of it is under the chrome at rest.
   ============================================================ */
@media (max-width: 599px) {
  .hirepage .hire__stats { margin-top: 4.6rem; }
  .eupage .eustats { margin-top: 4.6rem; }
}

/* ============================================================
   EQUITY UPRISE — the measured details.
   ============================================================ */
/* -- source order and visual order disagreed: tabbing the Georgia block
      threw a keyboard user 761px back up the page, because the sticky
      companion is painted right but was written last. It is written FIRST
      now and held in the right-hand column by order, so the eye and the
      Tab key finally agree. -- */
.eupage .euseg__body > .eurail { order: 1; }
.eupage .euseg__body > .euseg__side { order: 2; }

/* -- cover on a portrait document crops away the letterhead, which is the
      identifying part, so three of the six citations rendered as three
      indistinguishable grey rectangles. hire chose contain precisely so
      the document reads; the same asset gets the same decision here. -- */
.eupage .eucite__scan .euscan,
.eupage .eufel__provscan .euscan { object-fit: contain !important;
  background: #f4efe6; padding: .4rem; }

/* -- one note under the authority, not the same 310 characters printed
      three times 250px apart -- */
.eupage .eucite__prov--group { margin: 1.1rem 0 0; padding-left: .9rem;
  border-left: 2px solid var(--eu-gold); font-size: .78rem; line-height: 1.6;
  color: var(--eu-dim); }

/* -- the fact five of nine cards shared, said once, under the grid -- */
.eupage .eufel__rule { margin: 1.4rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--eu-gold); max-width: var(--mcc-read);
  font-size: .82rem; line-height: 1.6; color: var(--eu-dim); }

/* -- the document-of-record card ran 160 to 785 on a 1120 column and left
      39% of its own band empty. The document it is about goes in it. -- */
.eupage .eufel__prov { display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
@media (min-width: 860px) {
  .eupage .eufel__prov { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
}
.eupage .eufel__provscan { display: block; border: 1px solid var(--eu-gold);
  background: var(--ink-2); padding: .5rem; }
.eupage .eufel__provscan img { display: block; width: 100%; height: auto; }
.eupage .eufel__provscan span { display: block; margin-top: .5rem;
  font: 700 .62rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ruby-text); }

/* -- Ways in: three tiers, not eight peers with a 75%-void orphan row -- */
.eupage .eudoors__grid { grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) {
  .eupage .eudoors__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eupage .eudoor--lead { grid-column: 1 / -1; }
}
.eupage .eudoor--lead { padding: clamp(1.3rem, 3.5vw, 2rem); }
.eupage .eudoor--lead b { font-size: var(--t-5); font-family: var(--display);
  font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.eupage .eudoor--lead small { font-size: .92rem; max-width: 52ch; }
.eupage .eudoors__list { list-style: none; margin: 1.2rem 0 0; padding: 0;
  border-top: 1px solid var(--eu-rule); }
.eupage .eudoors__list li { border-bottom: 1px solid var(--eu-rule); }
.eupage .eudoors__list a { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem .9rem; padding: .95rem 0; color: var(--cream); }
.eupage .eudoors__list b { font: 800 .98rem/1.35 var(--body); }
.eupage .eudoors__list span { font-size: .84rem; line-height: 1.5; color: var(--cream-dim); }
.eupage .eudoors__list a:hover, .eupage .eudoors__list a:focus-visible { color: var(--ruby-hot); }

/* -- the mission statement: 24 words of a condensed poster face, centred
      over four lines, is a wall, not a quiet moment. Set as reading type,
      which is what a sentence you want read should be. -- */
.eupage .euquiet__line { font-family: var(--body); font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.5; letter-spacing: 0;
  text-transform: none; text-align: left; max-width: 46ch; }
.eupage .euquiet__by { text-align: left; }

/* -- nothing in the hero shared a left edge: the chip sat on the margin
      and the eyebrow TEXT began 38px inside the H1. The chip hangs. -- */
@media (min-width: 900px) {
  .eupage .euhero__k { position: relative; padding-left: 0; }
  .eupage .euhero__mark { position: absolute; left: -2.1rem; top: .05rem; }
}

/* ============================================================
   DOCKET 516 — the numbers come out of the slab, and the rail
   stops slicing the cards it scrolls to.
   ============================================================ */
.dkt__figs { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; display: grid;
  gap: .9rem clamp(1rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.dkt__figs li { padding: .8rem 0 0; border-top: 1px solid var(--edge); }
.dkt__figs li.is-won { border-top: 3px solid var(--ruby); }
.dkt__figs b { display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-3); line-height: .95; color: var(--cream);
  font-variant-numeric: tabular-nums; }
.dkt__figs li.is-won b { color: var(--ruby-hot); }
.dkt__figs span { display: block; margin-top: .4rem; max-width: 24ch;
  font-size: .78rem; line-height: 1.45; color: var(--cream-dim); }

/* the rail is a bar, not a fault: fully opaque, and every card it can jump
   to reserves the rail's own height above itself */
.dkt__rail { background: var(--ink); }
html[data-theme="light"] .dkt__rail { background: var(--ink); }
.dkt__card, .dkt__exp, #library, .dkt h2.section-title { scroll-margin-top: 9.5rem; }
.dkt__railhint { text-transform: none; letter-spacing: .01em; font-size: .78rem; }

/* ============================================================
   VERIFY — the lede and the badge plates.
   ============================================================ */
/* 303 characters at 14.4px, uppercase, 5.04px of tracking, wrapping to
   five lines. Letterspaced caps are a device for a label of two to five
   words. This is a paragraph, so it is set as one. */
.verify .verify__lede { margin: 1.1rem 0 0; max-width: var(--mcc-read);
  font-family: var(--body); font-weight: 500; font-size: 1.06rem; line-height: 1.65;
  letter-spacing: normal; text-transform: none; text-align: left; color: var(--cream-dim); }
.verify .verify__lede a { color: var(--ruby-text); border-bottom: 1px solid var(--ruby);
  text-transform: none; letter-spacing: normal; }

/* the six entity plates were ruby, amber, violet, green, blue and teal.
   Four of those hues exist nowhere in this house and one of them is a
   stock framework swatch. One plate for all six; the one you pick turns
   ruby. A type is told apart by its name. */
.verify .entity-card { --badge-c: var(--cream); }
.verify .entity-card:hover,
.verify .entity-card:focus-visible,
.verify .entity-card.is-active { --badge-c: var(--ruby-hot); }
.verify .vform__badgehead .mbadge { --badge-c: var(--ruby-hot); }

/* the dock is fixed over the last 90px of the viewport, so the page ends
   above it rather than under it */
.verify { padding-bottom: calc(var(--appbar-h, 4.6rem) + 4.5rem); }
.verify .verify__grid { margin-top: 2rem; }

/* ============================================================
   FELLOWSHIP — a band, three figures, and a terminal that is
   not lit in a colour this house does not own.
   ============================================================ */
.felband { position: relative; margin: 0 0 0; width: 100%; min-height: min(58vh, 30rem);
  display: flex; align-items: flex-end; overflow: hidden; }
.felband__img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; }
.felband__veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,7,.42) 0%, rgba(10,8,7,.55) 45%, rgb(10,8,7) 100%); }
html[data-theme="light"] .felband__veil {
  background: linear-gradient(180deg, rgba(10,8,7,.5) 0%, rgba(10,8,7,.62) 45%, rgba(242,237,228,.96) 100%); }
.felband__type { position: relative; width: 100%; max-width: var(--mcc-shell);
  margin: 0 auto; padding: 0 var(--mcc-pad) clamp(1.4rem, 4vw, 2.4rem); }
.felband__type .kicker { color: #e5383b; }
.felband__type .manifesto__title { color: #f4efe6; }
.felfigs { list-style: none; margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; display: grid;
  gap: .9rem clamp(1rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); }
.felfigs li { padding: .8rem 0 0; border-top: 1px solid var(--edge); }
.felfigs li:first-child { border-top: 3px solid var(--ruby); }
.felfigs b { display: block; font-family: var(--display); font-weight: 400;
  font-size: var(--t-3); line-height: .95; color: var(--cream); }
.felfigs li:first-child b { color: var(--ruby-hot); }
.felfigs span { display: block; margin-top: .4rem; max-width: 22ch;
  font-size: .78rem; line-height: 1.45; color: var(--cream-dim); }
.manifesto { padding-top: clamp(1.8rem, 4vw, 2.8rem); }
.manifesto p { max-width: var(--mcc-read); }
.felmore { margin-top: 1.2rem; max-width: var(--mcc-read);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.felmore > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: .7rem; padding: .9em 0;
  font: var(--t-label); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ruby-text); }
.felmore > summary::-webkit-details-marker { display: none; }
.felmore > summary::after { content: ""; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.felmore[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.felmore p:last-child { margin-bottom: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .felmore > summary::after { transition: none; } }

/* the hacker-green terminal is a cliche on a civic-record site and
   rgb(124,227,139) is not ink, ruby, cream or gold. Cream carries the
   prompt; ruby carries the counter, which this page already did. */
.term { --tg: var(--cream); }
.term .chat__msg--q { background: var(--ink-2); border-color: var(--edge); color: var(--cream); }
.term .chat__msg--a { background: rgba(229,56,59,.08); border-color: rgba(229,56,59,.3);
  color: var(--cream); }
.term .chat__chip { border-color: var(--edge); color: var(--cream); }
.term .chat__chip.is-picked, .term .chat__chip:hover { border-color: var(--ruby-hot); }
.term .chat__chip.is-picked { background: rgba(229,56,59,.14); color: var(--cream); }
.term .chat__free input, .term .chat__free textarea { background: var(--ink-2);
  border-color: var(--edge); color: var(--cream); caret-color: var(--ruby-hot); }
.term .chat__review { background: var(--ink-2); border-color: var(--edge); color: var(--cream); }
.manifesto__rule { border-top-color: var(--eu-gold, rgba(232,200,119,.34)); }
.manifesto__boot { color: var(--ruby-text); }

/* one left edge, one right edge: a stack that only ever shows one bubble
   at a time read as four accidental widths from one margin */
.chat__log, .chat__input { max-width: 46rem; }
.chat__msg--q, .chat__msg--a { align-self: stretch; }

/* ============================================================
   POLICY + MEMO — bound to the shell above; only the hero
   needed saying, and the faux-italic is handled with the scale.
   ============================================================ */
.bexp__hero { align-items: flex-start; }
.bexp__hero .hire__cover-copy { padding-left: 0; padding-right: 0; }

/* ============================================================
   THE PILL THAT DUPLICATED THE PAGE'S OWN BUTTON. At the foot
   of equity-uprise the ruby "JOIN THE FELLOWSHIP, FREE" button
   and the fixed ruby "Join the Fellowship" pill were on screen
   together, 100px apart, same colour, same shape, near-identical
   words; hire did the same with "BOOK A CALL WITH ME". Two
   identical ruby affordances stacked read as a duplicated
   element, not as a choice. The pill stands down while the
   page's own action is on screen, and comes back when it goes.
   ============================================================ */
.mh__cta { transition: opacity .28s ease, transform .28s ease; }
.mh__cta.is-echo { opacity: 0; transform: translateY(.5rem); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .mh__cta { transition: none; }
}

/* -- the last page that misaligned against ITSELF. equity-uprise's H1 sat on
      72 while its own body sat on 160: an 88px break between the headline and
      every sentence under it, on the page that otherwise understood the brief
      best. The hero type column is a full-bleed flex child, so it cannot
      inherit the shell; it computes the same left edge instead. -- */
@media (min-width: 900px) {
  .eupage .euhero__copy {
    padding-left: calc(max(0px, (100vw - var(--mcc-shell)) / 2) + var(--mcc-pad)); }
}

/* -- .mbadge declares --badge-c on ITSELF, so a value set on the card never
      reaches it: a property declared on an element beats one inherited into
      it. The seal is addressed directly. -- */
.verify .entity-card .mbadge { --badge-c: var(--cream); }
.verify .entity-card:hover .mbadge,
.verify .entity-card:focus-visible .mbadge,
.verify .entity-card.is-active .mbadge { --badge-c: var(--ruby-hot); }

/* -- the terminal's question bubble ran to 85% of a column that only ever
      holds one bubble at 1440, so a single left margin produced four
      different right edges and read as an accident. The question takes the
      full measure; the answer stays a shrink-wrapped reply, which is a
      distinction rather than a leftover. -- */
.term .chat__msg--q { max-width: 100%; }

/* -- equity-uprise on a phone: the hero band grows and the numbers get the
      screen after it, rather than half a screen with the dock through the
      labels under "5-3" and "325". The pill also stands down while the hero
      is on screen, so the first thing a phone visitor sees is the picture
      and the headline, and the second thing is the record in figures. -- */
@media (max-width: 599px) {
  .eupage .euhero__media { height: 42vh; min-height: 250px; }
  .eupage .eustats { margin-top: 7.5rem; }
}

/* -- the editorial label the equity-uprise page already carried -- */
.hirepage .hire__who-cred { margin: .55rem 0 0; font: 700 .62rem var(--body);
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); opacity: .75; }

/* -- a 1px border turning ruby is a colour-only focus signal on a form
      field. The ring the rest of the site paints comes with it. -- */
.hirepage .hire__roadshow-in:focus-visible { outline: 2px solid var(--ruby-hot);
  outline-offset: 2px; }

/* -- INTRINSIC SIZE, DECLARED, WITHOUT SURRENDERING THE LAYOUT.
      The nine scans now carry width/height so the grid is reserved before
      they load. Presentational size hints land BELOW author styles in the
      cascade, so the author `width:100%` wins — but there was no author
      `height`, so the hint's height (2210px on the Georgia proclamation)
      beat `aspect-ratio` and stretched the tiles to the full height of the
      source files. `height:auto` hands the box back to the ratio. -- */
.hirepage .hire__rcp .hire__pill img,
.hirepage .hire__scans img { height: auto; }

/* -- the caption/sub-caption baseline across a five-across row: one
      authority wraps to two lines and the row must not step. The name
      reserves two lines whether it needs them or not. -- */
.hirepage .hire__rcp .hire__pill b { min-height: 2.56em; }

/* -- the masthead pill. Checker Two measured 1.17:1 by reading
      backgroundColor on an element that is painted with a background-IMAGE,
      so the number is wrong — the pill is ruby in both coats and the real
      figure is 4.36:1, which is still a hair under the 4.5 floor for white
      at 11.5px. The gradient is deepened into the house's own darker ruby
      and clears it properly. -- */
/* js/masthead.js injects its own \3c style> at runtime, which lands after this
   sheet and wins on equal specificity, so this one declaration has to shout.
   It is the site's primary action on every page; the colours are the house's
   own ruby and ruby-dark and nothing else about the pill changes. */
.mh__cta { background-image: linear-gradient(165deg, #e5383b 0%, #c1121f 46%, #a4101a 100%) !important; }


/* ============================================================
   EQUITY UPRISE — the measured register. Appended; nothing
   above this line is edited.

   The campaign numbers needed the .eustats treatment (the page
   already teaches the reader that a big display figure over a
   hairline is a hard number) but they also needed a heading and
   a provenance note, which .eustats has no slot for and should
   not grow one — it is a bare grid by design. So the row keeps
   its own styling and a wrapper carries the page measure, the
   gutter and the two pieces of prose around it.
   ============================================================ */
.eumeas { max-width: var(--eu-w); margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  padding: 0 var(--eu-pad); }
.eumeas .eustats { max-width: none; margin: .9rem 0 0; padding: 0; }
.eumeas .euhonest { margin-top: .3rem; }

/* -- The three funding lanes are peers: three across on a desk, not a
      two-up grid with an orphan. The house rule above forces every
      .eudoors__grid on this page to two columns, which is right for
      "Ways in" (it has a lead tile) and wrong here. -- */
.eupage .eudoors__grid.eulanes { grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) {
  .eupage .eudoors__grid.eulanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eulanes .eudoor { padding: 1.15rem 1.25rem; }
.eulanes .eudoor b { font-family: var(--display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem); line-height: 1.1; }
.eulanes .eudoor small { margin-top: .55rem; }


/* ============================================================
   MCCLUSTER POLISH SYSTEM
   Shared interaction language extracted from Human Uprise.
   It intentionally styles semantic controls/surfaces without flattening
   art-directed rooms into one visual template.
   ============================================================ */
:root {
  --mcc-surface: #141110;
  --mcc-surface-2: #1c1816;
  --mcc-rule: rgba(244,239,230,.10);
  --mcc-rule-strong: rgba(244,239,230,.16);
  --mcc-dim: #ada296;
  --mcc-hot: #ff4d3d;
  --mcc-gold: #e8c877;
  --mcc-ease: cubic-bezier(.22,1,.36,1);
  --mcc-spring: cubic-bezier(.34,1.56,.64,1);
  --mcc-radius: 18px;
  --mcc-pill: 999px;
  --mcc-focus: 0 0 0 3px rgba(255,77,61,.20);
}

/* Inputs should feel responsive everywhere without overriding page geometry. */
:where(input, textarea, select, button, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--ruby-hot);
  outline-offset: 2px;
  transition: outline-color .2s var(--mcc-ease), box-shadow .25s var(--mcc-ease);
  box-shadow: var(--mcc-focus);
}
:where(button, [role="button"], .button, .btn):not(:disabled) {
  transition-property: transform, filter, background-color, color, border-color, box-shadow, opacity;
  transition-duration: .22s;
  transition-timing-function: var(--mcc-ease);
}
:where(button, [role="button"], .button, .btn):not(:disabled):active {
  transform: scale(.97);
}
:where(button, input, textarea, select, a):focus-visible {
  outline-color: var(--ruby-hot);
}

/* Dialogs and popovers enter like the network instead of snapping onscreen. */
:where(dialog[open]) {
  animation: mcc-dialog-in .38s var(--mcc-spring) both;
}
:where(dialog)::backdrop {
  background: rgba(4,3,3,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:where(dialog[open])::backdrop {
  animation: mcc-backdrop-in .28s ease both;
}

/* Opt-in primitives for new and migrated surfaces. */
.mcc-surface {
  background: var(--mcc-surface);
  border-radius: var(--mcc-radius);
  box-shadow: inset 0 0 0 1px var(--mcc-rule);
}
.mcc-glass {
  background: linear-gradient(180deg,rgba(10,8,7,.94),rgba(10,8,7,.80));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.mcc-pill { border-radius: var(--mcc-pill); }
.mcc-lift {
  transition: transform .25s var(--mcc-ease), box-shadow .3s var(--mcc-ease);
}
.mcc-pop { animation: mcc-pop .5s var(--mcc-spring); }
.mcc-rise { animation: mcc-rise .55s var(--mcc-ease) both; }
.mcc-badge-in { animation: mcc-badge-in .45s var(--mcc-spring) both; }
.mcc-shimmer {
  background: linear-gradient(90deg,#1d1816 0%,#2a2421 40%,#1d1816 80%);
  background-size:240% 100%;
  animation:mcc-shimmer 1.4s linear infinite;
}
@media (hover:hover) {
  .mcc-lift:hover { transform:translateY(-2px); box-shadow:0 18px 44px -38px rgba(244,239,230,.35); }
}

@keyframes mcc-rise {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}
@keyframes mcc-pop {
  0%,100% { transform:scale(1); }
  35% { transform:scale(1.28) rotate(-6deg); }
  70% { transform:scale(.94); }
}
@keyframes mcc-badge-in {
  from { opacity:0; transform:scale(.45) rotate(-12deg); }
  to { opacity:1; transform:none; }
}
@keyframes mcc-dialog-in {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to { opacity:1; transform:none; }
}
@keyframes mcc-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes mcc-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }

@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], .button, .btn, input, textarea, select, dialog),
  .mcc-lift, .mcc-pop, .mcc-rise, .mcc-badge-in, .mcc-shimmer {
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  :where(button, [role="button"], .button, .btn):active { transform:none !important; }
}


/* ============================================================
   THE BUTTON SYSTEM — one hierarchy, one motion language
   (owner, 2026-10-15: "These buttons look like shit. There's no
   animations." This is the answer, inside the flat house system:
   the same ruby, cream, ink and type, refined, never re-skinned.)

   Hierarchy, on the house .btn:
     .btn--primary / .btn--ruby   the one thing to press (ruby fill)
     .btn--secondary / .btn--ghost  an outline on glass
     .btn--tertiary / .btn--quiet  text weight only, no box
     .btn--danger                  destructive: outline, fills on hover
     .btn--icon                    a 44px round control (needs aria-label)
   Sizes: .btn--sm 44px · default 52px · .btn--lg 60px. Every size
   keeps a 44px touch target. .btn--block fills its row.
   States: :hover (pointer devices only), :active press, :focus-visible
   ring, :disabled / [aria-disabled="true"], .is-loading /
   [aria-busy="true"] (a spinner; the label stays for screen readers),
   .btn--shine (a slow light sweep, for the ONE primary CTA on a page).

   The same hover / press / focus / disabled grammar is lent to the
   page-level button classes that already exist (Human Uprise, Action
   Network, the account door, the Control room, the music transport), so
   they behave as one family without renaming anything in their markup.

   Motion: transform and opacity only, 150-250ms, ease-out. Everything
   here stands still under prefers-reduced-motion.
   ============================================================ */
:root {
  --mcc-dur-press: 120ms;
  --mcc-dur-1: 150ms;
  --mcc-dur-2: 200ms;
  --mcc-dur-3: 250ms;
  --mcc-ease-out: cubic-bezier(.22,1,.36,1);
  --mcc-ease-press: cubic-bezier(.3,.7,.4,1);
  --mcc-press: .97;
  --mcc-lift: -2px;
  /* the focus ring: gold on the night coat (12:1 on ink), ruby in daylight */
  --mcc-ring: #e8c877;
  --mcc-ring-gap: 3px;
  /* the action fill. --ruby-hot alone carries white type at 4.2:1, under
     AA for a 16px label, so the fill leans toward --ruby and every stop
     clears 4.5:1 against the label. Same hue, a deeper press. */
  --mcc-action: linear-gradient(180deg,#e0263a 0%,var(--ruby,#c1121f) 100%);
  --mcc-action-ink: #fff;
  --mcc-action-glow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 28px -10px rgba(193,18,31,.7);
  --mcc-action-glow-hi: 0 1px 0 rgba(255,255,255,.2) inset, 0 16px 40px -12px rgba(229,56,59,.8);
}
html[data-theme="light"] { --mcc-ring: #a30d18; }

/* ---------- the house button ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; will-change: auto;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition:
    transform var(--mcc-dur-2) var(--mcc-ease-out),
    box-shadow var(--mcc-dur-3) var(--mcc-ease-out),
    background-color var(--mcc-dur-2) var(--mcc-ease-out),
    border-color var(--mcc-dur-2) var(--mcc-ease-out),
    color var(--mcc-dur-2) var(--mcc-ease-out),
    opacity var(--mcc-dur-2) var(--mcc-ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--sm { min-height: 44px; }
.btn--lg { min-height: 60px; font-size: 1rem; padding: 1.2em 2.8em; }
.btn--block { display: flex; width: 100%; }

.btn--ruby, .btn--primary {
  background: var(--mcc-action); color: var(--mcc-action-ink);
  border-color: transparent; box-shadow: var(--mcc-action-glow);
}
.btn--ghost, .btn--secondary {
  border: 1px solid rgba(244,239,230,.5); background: rgba(244,239,230,.06); color: var(--cream);
}
html[data-theme="light"] .btn--secondary { border-color: rgba(26,20,13,.42); background: rgba(26,20,13,.05); }
.btn--tertiary, .btn--quiet {
  background: transparent; border-color: transparent; box-shadow: none;
  padding-inline: 1.1em; color: var(--cream);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .35em;
}
.btn--danger { border: 1px solid rgba(229,56,59,.7); background: transparent; color: #ff8f95; }
html[data-theme="light"] .btn--danger { color: #a30d18; border-color: rgba(163,13,24,.6); }
.btn--icon {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; letter-spacing: 0;
}
.btn--icon.btn--lg { width: 56px; height: 56px; }

/* press: a fast, physical give */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(var(--mcc-press));
  transition-duration: var(--mcc-dur-press);
  transition-timing-function: var(--mcc-ease-press);
}

/* hover: only where a pointer can hover, so a tap never leaves a lift behind */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(var(--mcc-lift)); }
  .btn--ruby:hover, .btn--primary:hover { box-shadow: var(--mcc-action-glow-hi); }
  .btn--ghost:hover, .btn--secondary:hover { border-color: var(--cream); background: rgba(244,239,230,.14); }
  html[data-theme="light"] .btn--secondary:hover { background: rgba(26,20,13,.1); }
  .btn--tertiary:hover, .btn--quiet:hover { transform: none; text-decoration-color: currentColor; }
  .btn--danger:hover { background: #c1121f; border-color: #c1121f; color: #fff; }
}

/* disabled: legible, still, and plainly not a target */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: saturate(.55);
}

/* loading: a spinner over a hushed label; the label is still read out */
.btn.is-loading, .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; cursor: progress; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: mcc-spin .7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after,
.btn--secondary[aria-busy="true"]::after, .btn--ghost[aria-busy="true"]::after {
  border-color: rgba(244,239,230,.3); border-top-color: var(--cream);
}

/* the shine: one slow sweep of light every few seconds, for the page's
   single primary CTA. A light, not a material: no chrome, no glass skin. */
.btn--shine::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform: translateX(-120%);
  animation: mcc-shine 5.5s var(--mcc-ease-out) 1.2s infinite;
  pointer-events: none;
}

/* ---------- one focus ring for every control ----------
   Keyboard focus only (:focus-visible), offset so it never sits on a
   fill, gold on the night coat and ruby in daylight. Page sheets that
   draw their own visible ring keep it. */
:where(a, button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--mcc-ring);
  outline-offset: var(--mcc-ring-gap);
}
.btn:focus-visible { outline: 2px solid var(--mcc-ring); outline-offset: var(--mcc-ring-gap); }

/* ---------- the family: existing page buttons, same grammar ----------
   No markup changes: these are the classes the pages already render.
   Primary = a fill you press; secondary = an outline or tint. */
:where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .ac__prov, .creator-btn, .eui-btn, .we-cta, .getapp__btn, .head-cta, .mh__cta, .vrgate__btn) {
  touch-action: manipulation;
  transition:
    transform var(--mcc-dur-2) var(--mcc-ease-out),
    box-shadow var(--mcc-dur-3) var(--mcc-ease-out),
    background-color var(--mcc-dur-2) var(--mcc-ease-out),
    border-color var(--mcc-dur-2) var(--mcc-ease-out),
    color var(--mcc-dur-2) var(--mcc-ease-out),
    filter var(--mcc-dur-2) var(--mcc-ease-out),
    opacity var(--mcc-dur-2) var(--mcc-ease-out);
}
:where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .ac__prov, .creator-btn, .eui-btn, .we-cta, .getapp__btn, .head-cta, .mh__cta, .vrgate__btn):active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(var(--mcc-press));
  transition-duration: var(--mcc-dur-press);
}
@media (hover: hover) and (pointer: fine) {
  :where(.an-btn, .ac__btn, .ac__ghost, .ac__prov, .creator-btn, .eui-btn, .we-cta, .getapp__btn, .head-cta, .mh__cta, .vrgate__btn):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(var(--mcc-lift));
  }
  :where(.an-btn--hot, .an-btn--gold, .ac__btn, .cr-btn--primary):hover:not(:disabled) { filter: brightness(1.07); }
}
:where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .creator-btn, .eui-btn, .we-cta):is(.is-loading, [aria-busy="true"]) {
  position: relative; color: transparent !important; pointer-events: none;
}
:where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .creator-btn, .eui-btn, .we-cta):is(.is-loading, [aria-busy="true"])::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: mcc-spin .7s linear infinite;
}
/* the account door's Sign in carried white on --ruby-hot (4.2:1): the action fill clears AA */
/* :root lifts it over account.html's own sheet, which loads after this one */
:root .ac__btn { background: var(--mcc-action); color: var(--mcc-action-ink); }

/* ---------- the bottom app bar ----------
   The bar never leaves (owner, addendum 6), so it is the most-seen
   control on the property. The held tab settles in with a little spring
   on arrival; hover lifts only on pointer devices; press gives. */
.appbar__tab {
  transition:
    transform var(--mcc-dur-2) var(--mcc-ease-out),
    color var(--mcc-dur-2) var(--mcc-ease-out),
    background-color var(--mcc-dur-3) var(--mcc-ease-out),
    box-shadow var(--mcc-dur-3) var(--mcc-ease-out);
}
.appbar__tab:active { transform: scale(.9); transition-duration: var(--mcc-dur-press); }
.appbar__tab.is-here, .appbar__tab.is-active { animation: mcc-tab-settle .42s var(--mcc-spring) both; }
.appbar__tab:focus-visible { outline: 2px solid var(--mcc-ring); outline-offset: 2px; }
.appbar { animation: mcc-bar-in .45s var(--mcc-ease-out) both; }
@media (hover: hover) and (pointer: fine) {
  .appbar__tab:hover { transform: translateY(-2px); }
}

/* ---------- the music transport ---------- */
.music-mini__play, .music-now__play, .music-inline-play {
  transition: transform var(--mcc-dur-2) var(--mcc-ease-out), background-color var(--mcc-dur-2) var(--mcc-ease-out), box-shadow var(--mcc-dur-3) var(--mcc-ease-out);
}
.music-mini__play { width: 44px; height: 44px; }
.music-mini__play:active, .music-now__play:active, .music-inline-play:active { transform: scale(.92); }
.music-inline-play:active { transform: translateY(-50%) scale(.92); }
/* a 30px circle in a track row, with a 44px reach */
.music-inline-play::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .music-mini__play:hover, .music-now__play:hover { transform: scale(1.06); box-shadow: 0 8px 22px -8px rgba(244,239,230,.45); }
}

/* ---------- cards: a lift that says "this opens" ---------- */
@media (hover: hover) and (pointer: fine) {
  :where(.an-bounty, .an-lane, .an-intake-choice) {
    transition: transform var(--mcc-dur-3) var(--mcc-ease-out), box-shadow var(--mcc-dur-3) var(--mcc-ease-out);
  }
  :where(.an-bounty, .an-lane, .an-intake-choice):hover { transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.9); }
}

@keyframes mcc-spin { to { transform: rotate(360deg); } }
@keyframes mcc-shine {
  0% { transform: translateX(-120%); }
  28%, 100% { transform: translateX(120%); }
}
@keyframes mcc-tab-settle {
  0% { transform: scale(.82); }
  100% { transform: none; }
}
@keyframes mcc-bar-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after, .appbar, .appbar__tab,
  .music-mini__play, .music-now__play, .music-inline-play,
  :where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .ac__prov, .creator-btn, .eui-btn, .we-cta, .getapp__btn, .head-cta, .mh__cta, .vrgate__btn, .an-bounty, .an-lane, .an-intake-choice) {
    animation: none !important; transition: none !important;
  }
  .btn:hover, .btn:active, .appbar__tab:hover, .appbar__tab:active,
  .music-mini__play:hover, .music-mini__play:active, .music-now__play:hover, .music-now__play:active,
  :where(.an-btn, .cr-btn, .ac__btn, .ac__ghost, .ac__prov, .creator-btn, .eui-btn, .we-cta, .getapp__btn, .head-cta, .mh__cta, .vrgate__btn, .an-bounty, .an-lane, .an-intake-choice):is(:hover, :active) {
    transform: none !important;
  }
  .music-inline-play:active { transform: translateY(-50%) !important; }
  .btn--shine::before { display: none; }
  /* a spinner that cannot spin still says "working" */
  .btn.is-loading::after, .btn[aria-busy="true"]::after { border-top-color: rgba(255,255,255,.35); border-right-color: #fff; }
}

/* THE OWNER'S FIVE TABS (js/tabbar.js, admin first): Play, Home, the M, Analytics, Globe on a charcoal capsule.
   Labelled tabs show their word; the current tab is red with a rule under it. The M is the supplied artwork, scaled. */
.appbar--admin{width:calc(100vw - 1.6rem);max-width:34rem;justify-content:space-between;gap:0.2rem;padding:0.35rem 0.5rem;border-radius:26px;background:linear-gradient(180deg,rgba(28,28,30,0.94),rgba(16,16,18,0.96));box-shadow:0 18px 50px -12px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,0.08),0 0 0 1px rgba(255,255,255,0.06)}
.appbar--admin .appbar__tab{flex:1 1 0;min-width:0;width:auto;height:58px;border-radius:16px;gap:2px;align-content:center;color:#f2f2f3}
.appbar--admin .appbar__tab > span:not(.appbar__sr){position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;font:600 0.72rem/1 var(--ui,system-ui,sans-serif);letter-spacing:0;text-transform:none}
.appbar--admin .appbar__tab svg{width:1.6rem;height:1.6rem}
.appbar--admin .appbar__tab--icon svg{width:1.75rem;height:1.75rem}
.appbar--admin .appbar__m{width:2.6rem;height:2.6rem}
.appbar--admin .appbar__tab.is-here,.appbar--admin .appbar__tab.is-active{background:transparent;box-shadow:none;color:#ff2b3c}
.appbar--admin .appbar__tab.is-here::after{content:"";position:absolute;left:28%;right:28%;bottom:-0.35rem;height:3px;border-radius:3px;background:#ff2b3c}
.appbar--admin .appbar__tab:focus-visible{outline:2px solid #fff;outline-offset:-2px}