:root {
  --space-1: .25rem; --space-1h: .375rem; --space-2: .5rem; --space-2h: .625rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --radius-s: .5rem; --radius-m: .75rem; --radius-l: 1rem; --radius-pill: 99px;
  
  --text-xs: .625rem; --text-s: .6875rem; --text-m: .75rem; --text-l: .875rem; --text-xl: clamp(1rem, .9rem + .45vw, 1.25rem);
  
  --text-2xl: clamp(1rem, .5rem + 1.05vw, 1.4rem); --text-display: clamp(1.5rem, .75rem + 2.25vw, 2.625rem);
  --tap: 2.75rem; --tap-s: 2.25rem;
  --pad: clamp(1rem, 2.4vw, 2.5rem);
}
/* site.css — Opt-in static-site primitives. Responsibility: sections, actions, cards and empty/filter patterns. Layer: UI; kit scales only. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + var(--space-4))}
body{margin:0;background:var(--c-canvas);color:var(--c-text);font:var(--text-xl)/1.6 var(--font-site)}
h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty;max-width:var(--reading)}
a{color:var(--c-link)}svg{display:block;max-width:100%}button{font:inherit}
:focus-visible{outline:2px solid var(--c-attention-text);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:calc(var(--space-7) * 24 + var(--pad) * 2);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-100vw;top:var(--space-2);z-index:var(--z-skip);padding:var(--space-3);background:var(--c-surface)}
.skip:focus{left:var(--space-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2h);min-height:var(--tap);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);font:inherit;font-weight:700;font-size:var(--text-xl);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform var(--motion-settle) var(--ease-enter),background-color var(--motion-settle),box-shadow var(--motion-settle)}
.btn-primary{background:var(--c-primary-strong);color:var(--c-on-primary);box-shadow:var(--lift-5) var(--c-shadow-warm)}
.btn-light{background:var(--c-site-light);color:var(--c-site-dark)}
.btn-sm{min-height:var(--tap);padding:var(--space-2h) var(--space-4);font-size:var(--text-l)}
.sec{padding:clamp(calc(var(--space-7) + var(--space-6)),10vw,calc(var(--space-7) * 3)) 0}
.sec-head{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--reading);margin-bottom:clamp(var(--space-7),5vw,calc(var(--space-7) + var(--space-4)))}
.band{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--motion-settle) var(--ease-enter),box-shadow var(--motion-settle)}
.empty{display:flex;text-align:center;padding:var(--space-7) var(--space-5);border-radius:var(--radius-l);background:var(--c-surface);border:1px dashed var(--c-border);flex-direction:column;align-items:center;gap:var(--space-4)}
.filters{display:flex;gap:var(--space-2);max-width:100%;overflow-x:auto;padding-block:var(--space-2)}
.filters button{min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);border:1.5px solid var(--c-border);background:var(--c-surface);font:inherit;color:var(--c-text);cursor:pointer;transition:background-color var(--motion-settle),border-color var(--motion-settle)}
.site-field{font:inherit;min-height:var(--tap);padding:var(--space-3);color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-s)}

/* common — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.nav{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--c-canvas) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(var(--space-3));backdrop-filter:saturate(1.4) blur(var(--space-3));border-bottom:1px solid color-mix(in srgb,var(--c-border) 70%,transparent)}.nav-row{display:flex;align-items:center;gap:var(--space-5);min-height:var(--bar-h)}.logo{display:inline-flex;align-items:center;gap:var(--space-2h);color:var(--c-text);text-decoration:none;font-weight:800;font-size:var(--text-xl);letter-spacing:-.01em;white-space:nowrap;min-height:var(--space-7)}
@media (hover: hover) {.logo:hover{color:var(--c-text)}}
.nav-links{display:flex;gap:var(--space-1);margin-left:auto;align-items:center}
.nav-links a{color:var(--c-text);text-decoration:none;font-size:var(--text-l);font-weight:600;padding:0 var(--space-3);min-height:var(--space-7);display:inline-flex;align-items:center;border-radius:var(--radius-pill);position:relative}
.nav-links a::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-2);height:2px;background:var(--c-primary-strong);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-settle) var(--ease-enter)}
.nav-links a[aria-current]::after{transform:scaleX(1)}
@media (hover: hover) {
.nav-links a:hover::after{transform:scaleX(1)}}
.nav-links .btn{margin-left:var(--space-2)}
.nav-links .btn::after{display:none}
.nav-links a.btn-primary,.nav-links a.btn-primary:focus-visible,.nav-links a.btn-primary[aria-current]{color:var(--c-on-primary)}
@media (hover: hover) {
.nav-links a.btn-primary:hover{color:var(--c-on-primary)}}
@media (hover: hover) {
.btn-primary:hover{background:var(--c-primary-shadow);color:var(--c-on-primary);transform:translateY(calc(var(--space-1) * -1))}}
@media (hover: hover) {
.btn-light:hover{background:var(--c-surface);color:var(--c-text);transform:translateY(calc(var(--space-1) * -1))}}
.arr{display:inline-block;transition:transform var(--motion-settle) var(--ease-enter)}
@media (hover: hover) {
a:hover .arr,button:hover .arr{transform:translateX(var(--space-1))}}
.kick{display:inline-flex;align-items:center;gap:var(--space-2h);font-size:var(--text-l);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent-text)}
.kick::before{content:"";width:var(--space-5);height:2px;background:currentColor;border-radius:var(--radius-l)}
.on-night .kick{color:var(--c-attention-border)}
.h2{font-size:var(--text-site-heading);line-height:1.06;letter-spacing:-.03em;font-weight:800}
.lead{font-size:var(--text-xl);line-height:1.55;color:var(--c-text-soft);max-width:62ch}
.on-night .lead{color:var(--c-on-night)}
.on-night{background:var(--c-night);color:var(--c-on-night)}
.on-night a:not(.btn){color:var(--c-attention-border)}
@media (hover: hover) {.on-night a:not(.btn):hover{color:var(--c-on-night)}}
.draw{stroke-dasharray:1;stroke-dashoffset:0}

.missing-card{max-width:var(--reading);display:flex;flex-direction:column;align-items:start;gap:var(--space-5);margin-inline:auto;padding:var(--space-7);border:1px solid var(--c-border);border-radius:var(--radius-l);background:var(--c-surface)}

@media (hover: hover) {
a:hover{color:var(--c-text)}}
a:focus-visible{color:var(--c-text)}
.nav-links a:focus-visible::after{transform:scaleX(1)}
a:focus-visible .arr,button:focus-visible .arr{transform:translateX(var(--space-1))}
.btn-primary:focus-visible{background:var(--c-primary-shadow);color:var(--c-on-primary)}

/* motion — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.twk{animation:twk var(--loop-site-twinkle) ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.15}50%{opacity:.9}}
.spark-pulse{transform-box:fill-box;transform-origin:center;animation:pulse var(--loop-site-pulse) ease-out infinite}
.spark-pulse.p2{animation-delay:var(--delay-site-pulse)}
@keyframes pulse{from{transform:scale(.6);opacity:.7}to{transform:scale(2.6);opacity:0}}
.bob{animation:bob var(--loop-site-art) ease-in-out infinite;transform-box:fill-box}
.bob.b2{animation-delay:var(--delay-site-bob-middle)}
.bob.b3{animation-delay:var(--delay-site-bob-outer)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--space-1h) * -1))}}
.say1{animation:say var(--loop-site-speech) ease-in-out infinite;transform-box:fill-box}
@keyframes say{0%,8%{opacity:0;transform:translateY(var(--space-1h))}16%,70%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(calc(var(--space-1) * -1))}}
.fly{animation:fly var(--loop-site-flight) var(--ease-enter) infinite;transform-box:fill-box}
@keyframes fly{0%{transform:translateX(calc(var(--space-5) * -1));opacity:0}14%,100%{transform:none;opacity:1}}
.ring{transform-box:view-box;transform-origin:18.75rem 18.75rem}
.r1{animation:spin var(--loop-site-orbit) linear infinite}
.r2{animation:spin var(--loop-site-orbit-middle) linear infinite reverse}
.r3{animation:spin var(--loop-site-orbit-outer) linear infinite}
.up{transform-box:fill-box;transform-origin:center}
.r1 .up{animation:spin var(--loop-site-orbit) linear infinite reverse}
.r2 .up{animation:spin var(--loop-site-orbit-middle) linear infinite}
.r3 .up{animation:spin var(--loop-site-orbit-outer) linear infinite reverse}
.badge circle.b{fill:var(--c-surface);stroke:var(--c-border);stroke-width:1.5;filter:drop-shadow(0 var(--space-1h) var(--space-2h) var(--c-shadow-warm-strong))}
.trail{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
@keyframes rip{0%{transform:scale(.12);opacity:.9}100%{transform:scale(1);opacity:0}}
.globe-spin{animation:sway var(--loop-site-globe) ease-in-out infinite alternate}
@keyframes sway{from{transform:translateX(calc(var(--space-5) * -1))}to{transform:translateX(var(--space-5))}}
.trail{animation:pen var(--motion-site-trail) var(--ease-enter) both}
/* Animations never own the resting opacity: a failed observer leaves readable content. */
@keyframes reveal-opacity{from{opacity:0}to{opacity:1}}
@keyframes reveal-rise{from{transform:translateY(var(--space-6))}to{transform:none}}
.rv.in{animation:reveal-opacity var(--motion-site-reveal) var(--ease-enter) var(--delay-site-reveal) backwards,reveal-rise var(--motion-site-rise) var(--ease-enter) var(--delay-site-reveal) backwards}
.rv.d1{--delay-site-reveal:var(--delay-site-reveal-one)}
.rv.d2{--delay-site-reveal:var(--delay-site-reveal-two)}
.rv.d3{--delay-site-reveal:var(--delay-site-reveal-three)}
.rv.in .draw{animation:pen var(--motion-site-draw) var(--ease-enter) var(--motion-site-draw-delay) backwards}

/* hero — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:var(--space-7);min-height:min(calc(100svh - var(--bar-h)),calc(var(--space-7) * 17));padding-top:calc(var(--space-2) + var(--space-7));padding-bottom:calc(var(--space-5) + var(--space-7))}
.hero{position:relative;overflow:hidden;background:
  radial-gradient(circle at 78% 42%,color-mix(in srgb,var(--c-attention-bg) 70%,transparent) 0,transparent 42%),
  radial-gradient(circle,color-mix(in srgb,var(--c-border) 85%,transparent) 1.2px,transparent 1.6px) 0 0/var(--space-5) var(--space-5),var(--c-canvas)}

.hero-text{display:flex;flex-direction:column;gap:var(--space-6)}
.hero-vision{display:flex;flex-direction:column;gap:var(--space-3);max-width:31em;padding-left:var(--space-4);border-left:var(--space-1) solid var(--c-attention-border)}
.hero-vision .lbl{display:inline-flex;align-items:center;gap:var(--space-2h);font-size:var(--text-l);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent-text)}
.hero-vision p{font-size:var(--text-2xl);line-height:1.38;letter-spacing:-.01em;font-weight:700;color:var(--c-text)}
.hero-vision em{font-style:normal;color:var(--c-primary-strong)}
.hero-headline{font-size:var(--text-site-hero);line-height:.98;letter-spacing:-.045em;font-weight:800}
/* All six grid items contribute their wrapped height, including before script runs. */
.hero-headline{display:grid;min-width:0;text-wrap:balance}
.hero-line{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity var(--motion-fade) var(--ease-enter),visibility var(--motion-site-none) var(--motion-fade)}
.hero-line.is-current{visibility:visible;opacity:1;transition-delay:var(--motion-site-none)}
.hero-headline[data-rotating] .is-current .circ path{animation:pen var(--motion-site-ring) var(--ease-enter) var(--motion-fade) both}
.circ{position:relative;display:inline-block;white-space:nowrap;color:var(--c-primary-strong)}
.circ svg{position:absolute;left:-4%;top:-12%;width:108%;height:128%;overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:var(--c-primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero .lead{font-size:var(--text-xl);color:var(--c-text-soft);max-width:34em}
.hero-art{position:relative;width:100%;max-width:calc(var(--space-7) * 12);justify-self:center;aspect-ratio:1}
.hero-art svg{width:100%;height:100%;overflow:visible}
.hero-cap{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:var(--text-l);font-weight:700;color:var(--c-text-soft);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-pill);padding:var(--space-1h) var(--space-4);white-space:nowrap}

/* story — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.story .sec-head{margin-bottom:var(--space-6)}
.scenes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(calc(var(--space-2) + var(--space-7)),8vw,calc(var(--space-7) * 2))}
.scene{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(var(--space-6),5vw,calc(var(--space-5) + var(--space-7)));align-items:center}
.scene:nth-child(even) .scene-art{order:2}
.scene-art{border-radius:var(--radius-l);background:var(--c-attention-wash);border:1px solid var(--c-border);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--lift-5) var(--c-shadow-warm)}
.scene-art svg{width:100%;height:100%}
.scene-text{display:flex;flex-direction:column;gap:var(--space-4);max-width:34em}
.scene-n{display:inline-flex;align-items:center;gap:var(--space-2h);font-size:var(--text-l);font-weight:800;letter-spacing:.06em;color:var(--c-primary-strong)}
.scene-n i{display:inline-block;width:var(--space-5);height:2px;background:currentColor;border-radius:var(--radius-l)}
.scene .big{font-size:var(--text-display);line-height:1.25;letter-spacing:-.02em;font-weight:800;color:var(--c-text)}
.scene .big.q{font-size:var(--text-display);line-height:1.18}
.scene-text p:not(.big){color:var(--c-text-soft);font-size:var(--text-xl)}
.scene .end{font-size:var(--text-2xl)!important;line-height:1.4;font-weight:700;color:var(--c-text)!important;padding-top:var(--space-4);border-top:1px solid var(--c-border)}
.scene .end a{color:var(--c-primary-strong);text-decoration-thickness:var(--space-1);text-underline-offset:var(--space-1);white-space:nowrap}
@media (hover: hover) {
.scene .end a:hover{color:var(--c-text)}}

/* Flex items share one measure; prose wrapping must not shorten a scene headline. */
.scene-text{min-width:0;width:100%;max-width:var(--reading)}
.scene-text p{width:100%;max-width:none;text-wrap:wrap}
/* The new filled trail keeps its taper while the reveal climbs to the spark. */
@keyframes route-draw{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes mark-appear{from{opacity:0}to{opacity:1}}
.scene-art.rv.in .scene-mark .logo-mountain{animation:mark-appear var(--motion-fade) var(--ease-enter) both}
.scene-art.rv.in .scene-mark .logo-trail{animation:route-draw var(--motion-site-draw) var(--ease-enter) var(--motion-site-draw-delay) both}
.scene-art.rv.in .scene-mark .logo-spark,.scene-art.rv.in .scene-mark .mark-glow{animation:mark-appear var(--motion-fade) var(--ease-enter) var(--motion-site-spark-delay) both}

/* belief — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media (hover: hover) {
.panel:hover{transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--lift-5) var(--c-shadow-warm)}}
.panel .art{aspect-ratio:16/10;background:var(--c-attention-wash);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:center}
.panel .art svg{width:100%;height:100%}
.panel .body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.panel .n{font-size:var(--text-l);font-weight:800;color:var(--c-primary-strong);letter-spacing:.06em}
.panel h3{font-size:var(--text-display);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.panel p{color:var(--c-text-soft)}

/* reach — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.reach{position:relative;overflow:hidden}
.reach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-6),5vw,calc(var(--space-5) + var(--space-7)));align-items:center}
.ripples{position:relative;max-width:calc(var(--space-7) * 11);width:100%;aspect-ratio:1;justify-self:center}
.ripples svg{width:100%;height:100%;overflow:visible}
.rip{transform-box:view-box;transform-origin:16.25rem 16.25rem;animation:rip var(--loop-site-ripple) var(--ease-site-ripple) infinite;opacity:0}
.rip.k2{animation-delay:var(--delay-site-ripple-two)}
.rip.k3{animation-delay:var(--delay-site-ripple-three)}
.rip.k4{animation-delay:var(--delay-site-ripple-four)}
.commit{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-4)}
.commit li{display:grid;grid-template-columns:var(--space-7) minmax(0,1fr);gap:var(--space-1) var(--space-4);padding:var(--space-5) var(--space-5);border-radius:var(--radius-l);background:var(--c-night-raised)}
.commit .ci{grid-row:span 2;width:var(--space-7);height:var(--space-7);border-radius:var(--radius-l);background:var(--c-night);color:var(--c-attention-border);display:flex;align-items:center;justify-content:center}
.commit b{font-size:var(--text-xl);color:var(--c-on-night)}
.commit span{color:var(--c-site-night-muted);font-size:var(--text-xl)}

/* beyond — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.beyond .sec-head{max-width:calc(var(--space-7) * 19);gap:var(--space-4)}
.h2b{font-size:var(--text-display);line-height:1.12;letter-spacing:-.025em;font-weight:800;color:var(--c-text-soft)}
.h2b em{font-style:normal;color:var(--c-primary-strong)}
.beyond-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-6),5vw,calc(var(--space-5) + var(--space-7)));align-items:start}
.wheel{position:sticky;top:calc(var(--bar-h) + var(--space-6))}
.wheel svg{width:100%;height:auto;max-width:calc(var(--space-7) * 11);margin:0 auto;overflow:visible}
.wd{cursor:pointer}
.wd .wp{stroke:var(--c-surface);stroke-width:4;transition:stroke var(--motion-site-outline)}
.wd.act .wp{stroke:var(--c-text);stroke-width:3}
.wd text{font-weight:800;font-size:var(--text-xl);fill:var(--c-text)}
.wheel-cap{text-align:center;font-size:var(--text-l);color:var(--c-text-soft);margin-top:var(--space-3)}
.areas{display:flex;flex-direction:column;gap:var(--space-4)}
.area{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-l);padding:var(--space-6);display:grid;grid-template-columns:calc(var(--space-4) + var(--space-7)) minmax(0,1fr);gap:var(--space-2) var(--space-4);transition:border-color var(--motion-site-outline),box-shadow var(--motion-site-outline)}
.area.act{border-color:var(--c-text-soft);box-shadow:var(--lift-5) var(--c-shadow-warm)}
.area .ic{grid-row:span 2;width:calc(var(--space-4) + var(--space-7));height:calc(var(--space-4) + var(--space-7));border-radius:var(--radius-l);display:flex;align-items:center;justify-content:center}
.area h3{font-size:var(--text-display);line-height:1.2;letter-spacing:-.02em;font-weight:800;align-self:center}
.area p{color:var(--c-text-soft);grid-column:2}
.ic-1{background:var(--c-rule-grid);color:var(--c-info)}
.ic-2{background:var(--c-attention-bg);color:var(--c-attention-text)}
.ic-3{background:var(--c-accent-bg);color:var(--c-accent-text)}
.ic-4{background:var(--c-player-review-tint);color:var(--c-player-review-fill)}
.ic-5{background:var(--c-site-primary-tint);color:var(--c-primary-strong)}
.beyond-close{margin-top:clamp(calc(var(--space-2) + var(--space-7)),7vw,calc(var(--space-7) * 2));padding-top:clamp(var(--space-6),5vw,calc(var(--space-4) + var(--space-7)));border-top:1px solid var(--c-border);text-align:center}
.beyond-close .h2{max-width:18ch;margin:0 auto}
.beyond-close .h2 em{font-style:normal;color:var(--c-primary-strong)}

.wd:focus-visible .wp{stroke:var(--c-text);stroke-width:4;stroke-dasharray:6 3}

/* mission — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.vm{position:relative;overflow:hidden;padding-bottom:0}
.vm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-6),5vw,calc(var(--space-6) + var(--space-7)));position:relative;z-index:var(--z-raised)}
.vm-card{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6);border-top:2px solid var(--c-night-raised)}
.vm-card .lbl{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-l);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-attention-border)}
.vm-card .lbl i{width:var(--space-6);height:var(--space-6);border-radius:var(--radius-l);display:inline-flex;align-items:center;justify-content:center;background:var(--c-night-raised);font-style:normal}
.vm-card .stmt{font-size:var(--text-display);line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--c-on-night)}
.vm-card .stmt em{font-style:normal;color:var(--c-attention-border)}
.vm-card p.more{color:var(--c-site-night-muted);font-size:var(--text-xl);max-width:46ch}
.vm-intro{max-width:calc(var(--space-7) * 17);margin-bottom:calc(var(--space-2) + var(--space-7));display:flex;flex-direction:column;gap:var(--space-4)}
.vm-intro .h2{color:var(--c-on-night)}
.horizon{position:relative;height:clamp(calc(var(--space-7) * 4),24vw,calc(var(--space-7) * 7));margin-top:clamp(calc(var(--space-2) + var(--space-7)),7vw,calc(var(--space-7) * 2))}
.horizon svg{position:absolute;inset:0;width:100%;height:100%}
.px{will-change:transform}

/* join — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.teaser{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-6);align-items:center;background:var(--c-primary-strong);color:var(--c-on-primary);border-radius:var(--radius-l);padding:clamp(var(--space-6),5vw,calc(var(--space-5) + var(--space-7)));position:relative;overflow:hidden}
.teaser .h2{color:var(--c-on-primary)}
.teaser p{font-size:var(--text-xl);max-width:40ch}
.teaser .kick{color:var(--c-on-primary)}
.teaser-art{width:100%;max-width:calc(var(--space-7) * 8);height:auto;justify-self:center;pointer-events:none}
.teaser-acts{display:flex;padding-top:var(--space-2)}

/* contact — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:end}
.mail{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--c-text);border-bottom:var(--space-1) solid var(--c-primary);padding:var(--space-1h) 0;min-height:var(--space-7);word-break:break-all;transition:color var(--motion-settle)}
@media (hover: hover) {
.mail:hover{color:var(--c-primary-strong)}}
.contact .who{display:grid;gap:var(--space-4);font-size:var(--text-xl);color:var(--c-text-soft)}
.contact .who div{padding:var(--space-4) var(--space-4);border-radius:var(--radius-l);background:var(--c-surface);border:1px solid var(--c-border)}
.contact .who b{color:var(--c-text);display:block}

/* footer — Centred company sign-off. Responsibility: footer rhythm and hierarchy. Layer: UI; shared primitives and tokens. */
.ftr{background:var(--c-night);color:var(--c-on-night);padding:calc(var(--space-7) + var(--space-4)) 0 var(--space-7);text-align:center}
.ftr-top{display:flex;flex-direction:column;align-items:center;padding-bottom:var(--space-6);border-bottom:1px solid var(--c-night-raised)}
.ftr-mark{width:var(--space-7);height:var(--space-7);margin-bottom:var(--space-3)}
.ftr a{color:var(--c-on-night);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center}
.ftr-name{font-size:var(--text-2xl);font-weight:800}
.ftr-line{color:var(--c-attention-border);margin-top:var(--space-1)}
.ftr-vision{max-width:var(--reading);color:var(--c-site-night-muted);margin-top:var(--space-5)}
.ftr-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2) var(--space-6);list-style:none;margin:var(--space-6) 0 0;padding:0}
.ftr-bot{padding-top:var(--space-5);font-size:var(--text-l);color:var(--c-site-night-muted)}
@media (hover: hover) {
.ftr a:hover{color:var(--c-attention-border);text-decoration:underline}}

/* careers — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.c-hero{position:relative;overflow:hidden;padding:clamp(calc(var(--space-5) + var(--space-7)),9vw,calc(var(--space-7) * 3)) 0 clamp(calc(var(--space-4) + var(--space-7)),8vw,calc(var(--space-7) * 2))}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-7);align-items:center}
.crumb{font-size:var(--text-l);color:var(--c-site-night-muted)}
.crumb a{min-height:var(--space-7);display:inline-flex;align-items:center}
.c-hero h1{font-size:var(--text-site-careers);line-height:1;letter-spacing:-.04em;font-weight:800;color:var(--c-on-night)}
.c-hero h1 em{font-style:normal;color:var(--c-attention-border)}
.c-hero .text{display:flex;flex-direction:column;gap:var(--space-5)}
.c-art svg{width:100%;max-width:calc(var(--space-7) * 9);margin:0 auto;height:auto;overflow:visible}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.why li{list-style:none;padding:var(--space-6);border-radius:var(--radius-l);background:var(--c-surface);border:1px solid var(--c-border);display:flex;flex-direction:column;gap:var(--space-3)}
.why ul{margin:0;padding:0}
.why .wi{width:calc(var(--space-2) + var(--space-7));height:calc(var(--space-2) + var(--space-7));border-radius:var(--radius-l);display:flex;align-items:center;justify-content:center;background:var(--c-attention-wash);color:var(--c-primary-strong)}
.why h3{font-size:var(--text-2xl);letter-spacing:-.015em;font-weight:800;line-height:1.2}
.why p{color:var(--c-text-soft)}

/* positions — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.pos-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-4) var(--space-6);margin-bottom:var(--space-6)}
@media (hover: hover) {
.filters button:hover{border-color:var(--c-text)}}
.filters button[aria-pressed="true"]{background:var(--c-text);color:var(--c-canvas);border-color:var(--c-text)}
.count{font-size:var(--text-l);color:var(--c-text-soft);margin:var(--space-4) 0 var(--space-4)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4) var(--space-6);align-items:center;padding:var(--space-5) var(--space-6);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-l);transition:border-color var(--motion-settle),box-shadow var(--motion-settle)}
@media (hover: hover) {
.row:hover{border-color:var(--c-text-soft);box-shadow:var(--lift-5) var(--c-shadow-warm)}}
.row[hidden]{display:none}
.row h3{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.015em;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1h) var(--space-3)}
.row .meta{display:flex;flex-wrap:wrap;gap:var(--space-1h) var(--space-2);margin:var(--space-2) 0 var(--space-2h)}
.row .meta span{font-size:var(--text-l);font-weight:700;padding:var(--space-1) var(--space-2h);border-radius:var(--radius-pill);background:var(--c-surface-sunk);color:var(--c-text-soft)}
.row .meta .team{background:var(--c-accent-bg);color:var(--c-accent-text)}
.row p{color:var(--c-text-soft);max-width:70ch}
.row .ap{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1h);text-align:right}
.row .ap small{font-size:var(--text-l);color:var(--c-text-soft)}
.empty svg{width:calc(var(--space-7) * 3);height:calc(var(--space-7) * 2)}
.empty h3{font-size:var(--text-display);letter-spacing:-.02em;font-weight:800}
.empty p{color:var(--c-text-soft);max-width:52ch}

/* hire — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);position:relative}
.steps li{position:relative;z-index:var(--z-raised);display:flex;flex-direction:column;gap:var(--space-3);padding-top:calc(var(--space-5) + var(--space-7))}
.steps .num{position:absolute;top:0;left:0;width:calc(var(--space-1) + var(--space-7));height:calc(var(--space-1) + var(--space-7));border-radius:var(--radius-l);background:var(--c-primary-strong);color:var(--c-on-primary);font-weight:800;font-size:var(--text-2xl);display:flex;align-items:center;justify-content:center;box-shadow:var(--lift-5) var(--c-shadow-warm)}
.steps::before{content:"";position:absolute;left:var(--space-5);right:var(--space-5);top:var(--space-5);height:2px;z-index:var(--z-raised);background:var(--c-border)}
.steps h3{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.015em}
.steps p{color:var(--c-text-soft)}

/* responsiveBoard — Approved company geometry. Responsibility: this section only. Layer: UI; shared primitives and tokens. */
@media (max-width:37.5rem){.wd text{font-size:var(--text-2xl)}}
@media (max-width:64rem){
  .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trio>:last-child{grid-column:span 2}
}
@media (max-width:64rem){
  .hero-grid,.c-hero-grid,.vm-grid,.beyond-grid,.reach-grid,.teaser,.contact,.scene{grid-template-columns:minmax(0,1fr)}
  .scene:nth-child(even) .scene-art{order:0}
  .hero-grid{min-height:0;padding-top:var(--space-6);gap:var(--space-5)}
  .hero-art{max-width:calc(var(--space-7) * 10)}
  .wheel{position:relative;top:0}
  .wheel svg{max-width:calc(var(--space-7) * 9)}
  .why,.steps{grid-template-columns:minmax(0,1fr)}
  .steps li{padding-top:0;padding-left:calc(var(--space-5) + var(--space-7));min-height:calc(var(--space-1) + var(--space-7))}
  .steps::before{left:var(--space-5);right:auto;top:var(--space-5);bottom:var(--space-5);width:2px;height:auto}
  .c-art{order:-1}.c-art svg{max-width:calc(var(--space-7) * 6)}
}
@media (max-width:37.5rem){

  body{font-size:var(--text-xl)}
  .trio{grid-template-columns:minmax(0,1fr)}
  .trio>:last-child{grid-column:auto}
  .hero-headline{font-size:var(--text-site-hero-phone)}
  .hero-vision{padding-left:var(--space-4)}
  .scene-text p:not(.big){font-size:var(--text-xl)}
  .area{grid-template-columns:calc(var(--space-1) + var(--space-7)) minmax(0,1fr);padding:var(--space-5);gap:var(--space-1h) var(--space-4)}
  .area .ic{width:calc(var(--space-1) + var(--space-7));height:calc(var(--space-1) + var(--space-7));border-radius:var(--radius-l);grid-row:span 1}
  .area p{grid-column:1 / -1}
  .area h3{font-size:var(--text-2xl)}
  .row{grid-template-columns:minmax(0,1fr);padding:var(--space-5)}
  .row .ap{align-items:flex-start;text-align:left}
  .row .ap .btn{width:100%}
  .teaser-art{max-width:calc(var(--space-7) * 5);order:-1;justify-self:start}
  .logo span.lt{display:none}
  .hero-cap{font-size:var(--text-l)}
}

/* Responsibility: company page adaptations and accessible static fallbacks. Layer: UI; shared primitives only. */
.nav-links a.btn-primary{color:var(--button-primary-text)}
.logo svg{flex:none}
.crumb{color:var(--c-on-night)}
.ftr #mark,.on-night #mark{color:var(--c-on-night)}
.btn-light{background:var(--c-site-light);color:var(--c-site-dark)}
.hero-grid{min-height:clamp(calc(var(--space-7) * 12),85dvh,calc(var(--space-7) * 17))}
.hero-art{max-width:clamp(calc(var(--space-7) * 6),45vw,calc(var(--space-7) * 12))}
.scene-text p,.panel p{max-width:var(--reading)}
.mail{overflow-wrap:anywhere;max-width:100%;white-space:normal}
.trio,.why,.steps{padding-inline:0}
.why{list-style:none}.empty p{max-width:var(--reading)}
.steps li,.steps::before,.vm-grid{z-index:var(--z-raised)}
.empty svg{width:clamp(calc(var(--space-6) + var(--space-7)),15vw,calc(var(--space-7) * 3))}
.row[hidden]{display:none}.hero-cap{white-space:normal;text-align:center;max-width:90%;width:max-content}
.on-night .kick,.on-night .lbl,.on-night a:not(.btn){color:var(--c-attention-border)}
@media (hover: hover) {.btn-light:hover{background:var(--c-site-light);color:var(--c-site-dark)}}
@media(max-width:64rem){.nav-row{flex-wrap:wrap;padding-block:var(--space-3);gap:var(--space-2)}.nav-links{margin:0;flex-wrap:wrap}.nav-links a{padding-inline:var(--space-2)}.hero-grid{min-height:0}.hero-art{max-width:clamp(calc(var(--space-7) * 5),75vw,calc(var(--space-7) * 10))}}
@media(max-width:37.5rem){.hero-headline{font-size:var(--text-site-hero-phone)}.hero-grid{padding-bottom:var(--space-7)}.logo{font-size:var(--text-xl)}.nav-links .btn{margin:0}.nav-links{gap:0}.nav-links a{font-size:var(--text-l)}.scene-text .big{overflow-wrap:anywhere}.vm-card em{white-space:normal!important}.teaser{padding:var(--space-5)}.mail{font-size:var(--text-xl)}}

.menu-toggle{margin-left:auto}
@media(min-width:64rem){.menu-toggle{display:none}}
@media(max-width:64rem){.nav[data-enhanced] .nav-links{display:none;width:100%}.nav[data-menu-open="true"] .nav-links{display:flex}.nav[data-enhanced] .nav-row{justify-content:space-between}}
.on-night :focus-visible,.ftr :focus-visible{outline-color:var(--c-attention-border)}
