/* ============================================================
   KITSUNE GLOBAL SOLUTIONS — Design System v2 "Instrumentation"
   Tokens → Base → Primitives → Components → Motion → A11y
   Vanilla CSS. No build step. No framework.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#0A0B0D; --bg-raise:#0F1114; --bg-sink:#070809;
  --line:rgba(233,231,228,.10); --line-strong:rgba(233,231,228,.22);
  --ink:#E9E7E4; --ink-dim:#9AA0A8; --ink-mute:#6E747C;
  --sig:#D97A34; --sig-hi:#F09248; --sig-dim:rgba(217,122,52,.16);

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --t-display:clamp(2.5rem,6.8vw,6.25rem);
  --t-h2:clamp(1.85rem,3.7vw,3.25rem);
  --t-h3:clamp(1.15rem,1.85vw,1.65rem);
  --t-body:clamp(1rem,.42vw + .92rem,1.1rem);
  --t-label:.6875rem;

  --gut:clamp(1.25rem,3.4vw,3.25rem);
  --bay:clamp(4.5rem,10vw,9.5rem);
  --measure:68ch;

  /* Penner easing equations — published mathematics, freely reusable */
  --e-out-cubic:cubic-bezier(.215,.610,.355,1);
  --e-in-out-cubic:cubic-bezier(.645,.045,.355,1);
  --e-out-quart:cubic-bezier(.165,.840,.440,1);
  --e-out-expo:cubic-bezier(.190,1,.220,1);
  --e-ui:cubic-bezier(.4,0,.1,1);
  --d-1:.2s; --d-2:.3s; --d-3:.5s; --d-4:.8s;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--display); font-size:var(--t-body); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,table,fieldset{margin:0}
ul{list-style:none; padding:0}
fieldset{border:0; padding:0}

/* ambient field — CSS only, replaces the WebGL starfield */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(217,122,52,.09), transparent 58%),
    radial-gradient(90% 70% at 8% 108%, rgba(72,96,128,.10), transparent 60%);
}
body::after{ /* grain, ~1.1kb inline, zero requests */
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
#page{position:relative; z-index:2}

/* ---------- 3. PRIMITIVES ---------- */
.shell{width:min(100% - (var(--gut) * 2), 1560px); margin-inline:auto}
.bay{padding-block:var(--bay); scroll-margin-top:6rem}
.bay--tight{padding-block:calc(var(--bay) * .6)}
.bay--edge{border-top:1px solid var(--line)}

.label{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  display:flex; align-items:center; gap:.75rem;
}
.label::before{content:''; width:1.75rem; height:1px; background:var(--sig); flex:none}
.label--plain::before{display:none}

.display{font-size:var(--t-display); font-weight:700; line-height:.95; letter-spacing:-.03em; text-transform:uppercase}
.h2{font-size:var(--t-h2); font-weight:700; line-height:1.05; letter-spacing:-.022em; text-transform:uppercase}
.h3{font-size:var(--t-h3); font-weight:600; line-height:1.16; letter-spacing:-.01em; text-transform:uppercase}
.h4{font-size:1.05rem; font-weight:600; letter-spacing:-.005em; text-transform:uppercase; line-height:1.25}

.prose{color:var(--ink-dim); max-width:var(--measure)}
.prose + .prose{margin-top:1.15em}
.prose--wide{max-width:80ch}
.lede{font-size:clamp(1.08rem,1vw + .88rem,1.38rem); line-height:1.5; color:var(--ink); max-width:56ch}

.bayhead{display:grid; gap:1.5rem; padding-bottom:2.75rem}
@media(min-width:900px){.bayhead{grid-template-columns:14rem minmax(0,1fr); gap:var(--gut); align-items:start}}
.bayhead__idx{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); padding-top:.55rem}
.bayhead__idx b{color:var(--sig); font-weight:500}

.duo{display:grid; gap:2.5rem}
@media(min-width:1000px){.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(var(--gut) * 1.6)}}

.claim{border-left:2px solid var(--sig); padding-left:1.5rem; margin-top:2rem}
.claim p{color:var(--ink); font-size:clamp(1.02rem,.6vw + .9rem,1.24rem); line-height:1.48}

.note{
  margin-top:1.25rem; padding:1rem 1.25rem; background:var(--bg-raise);
  border-left:2px solid var(--line-strong);
  font-size:.85rem; line-height:1.6; color:var(--ink-mute); max-width:var(--measure);
}
.note b{color:var(--ink-dim); font-weight:500}
.note a{color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px}
.note a:hover{color:var(--sig)}

.slot{display:inline-block; padding:.1rem .5rem; border:1px dashed var(--sig); color:var(--sig);
  font-family:var(--mono); font-size:.78em; letter-spacing:.08em; border-radius:2px; background:var(--sig-dim)}

/* ---------- 4. HEADER / NAV ---------- */
.masthead{position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid transparent;
  transition:background var(--d-2) var(--e-ui), border-color var(--d-2) var(--e-ui)}
.masthead.is-stuck{background:rgba(10,11,13,.82); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line)}
.masthead__in{display:flex; align-items:center; justify-content:space-between; gap:var(--gut); height:5.25rem}
.brand{display:flex; align-items:center; gap:.85rem; flex:none}
.brand img{width:auto; height:2.4rem; filter:brightness(0) invert(1); opacity:.94}
.brand__wm{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); display:none}
@media(min-width:1180px){.brand__wm{display:block}}

.nav{display:none; gap:.2rem; align-items:center}
@media(min-width:1000px){.nav{display:flex}}
.nav a{position:relative; font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); padding:.7rem .9rem; transition:color var(--d-1) var(--e-ui)}
.nav a::after{content:''; position:absolute; left:.9rem; right:.9rem; bottom:.45rem; height:1px;
  background:var(--sig); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--d-2) var(--e-out-quart)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--ink)}

.cta{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:var(--ink); padding:.85rem 1.4rem; border-radius:2px; flex:none;
  display:inline-flex; align-items:center; gap:.6rem; border:0; cursor:pointer;
  transition:background var(--d-1) var(--e-ui), color var(--d-1) var(--e-ui), transform var(--d-1) var(--e-ui)}
.cta:hover{background:var(--sig); color:#0A0B0D; transform:translateY(-1px)}
.cta--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong)}
.cta--ghost:hover{background:var(--ink); color:var(--bg); box-shadow:inset 0 0 0 1px var(--ink)}
/* header CTA crowds the burger on small screens */
@media(max-width:620px){.masthead__in > .cta{display:none}}

/* mobile nav */
.burger{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.6rem}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block; width:22px; height:1.5px; background:var(--ink); transition:transform var(--d-2) var(--e-ui), opacity var(--d-1) var(--e-ui)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{position:fixed; inset:5.25rem 0 auto 0; z-index:55; background:var(--bg-sink);
  border-bottom:1px solid var(--line); padding:1.5rem var(--gut) 2.5rem;
  display:grid; gap:.25rem;
  opacity:0; visibility:hidden; transform:translateY(-1rem);
  transition:transform var(--d-3) var(--e-out-expo), opacity var(--d-2) var(--e-ui),
             visibility 0s linear var(--d-3)}
.drawer.is-open{opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s}
@media(min-width:1000px){.drawer{display:none}}
.drawer a{font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); padding:.85rem 0; border-bottom:1px solid var(--line)}
.drawer a:hover,.drawer a[aria-current=page]{color:var(--sig)}

/* ---------- 5. HERO + METADATA STRIP + ROLLER ---------- */
.hero{padding-top:10.5rem; padding-bottom:3rem}
.hero__grid{display:grid; gap:2.5rem}
@media(min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1fr) 20rem; align-items:end; gap:var(--gut)}}
.hero__motto{margin-top:1.6rem}
.hero__motto .ln{display:block; overflow:hidden}
.hero__motto .ln > span{display:block; will-change:transform}
.hero__sub{margin-top:1.9rem; color:var(--ink-dim)}
.hero__acts{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem; align-items:center}

.strip{margin-top:3.25rem; padding-top:1.25rem; border-top:1px solid var(--line-strong);
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 2.25rem;
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute)}
.strip__item{display:flex; align-items:baseline; gap:.6rem}
.strip__v{color:var(--ink); font-variant-numeric:tabular-nums}
.strip__v.is-sig{color:var(--sig)}

.roller{--roller-scale:1;
  --roller-column-height:calc(1rem * var(--roller-scale));
  --roller-digit-width:calc(.62rem * var(--roller-scale));
  display:inline-flex; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:calc(.85rem * var(--roller-scale)); color:var(--sig)}
.roller__col{width:var(--roller-digit-width); height:var(--roller-column-height); overflow:hidden}
.roller__strip{display:flex; flex-direction:column;
  transform:translateY(calc(-1 * var(--d,0) * var(--roller-column-height)));
  transition:transform var(--d-3) var(--e-in-out-cubic)}
.roller__strip > span{height:var(--roller-column-height); line-height:var(--roller-column-height)}

/* ---------- 6. LEDGER ---------- */
.ledger{border-top:1px solid var(--line-strong)}
.ledger__row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line)}
.ledger__k{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute)}
.ledger__v{font-family:var(--mono); font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.ledger__v.is-sig{color:var(--sig)}
.ledger a.ledger__v:hover{color:var(--sig-hi); text-decoration:underline; text-underline-offset:3px}

/* ---------- 7. CAPABILITY ROWS ---------- */
.cap{display:grid; gap:1.75rem; padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--line)}
@media(min-width:1000px){
  .cap{grid-template-columns:5rem minmax(0,26rem) minmax(0,1fr); gap:var(--gut); align-items:start}
  .cap--flip .cap__fig{order:3}
}
.cap__no{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; color:var(--sig); padding-top:.4rem}
.cap__fig{position:relative; overflow:hidden; background:var(--bg-raise)}
/* height:auto is load-bearing — without it the width/height attributes on the
   <img> apply as presentational hints and beat the aspect-ratio below. */
.cap__fig img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.82); transform:scale(1.02);
  transition:transform var(--d-4) var(--e-out-quart), filter var(--d-4) var(--e-out-quart)}
.cap:hover .cap__fig img{transform:scale(1.055); filter:grayscale(.35) contrast(1.04) brightness(.94)}
.cap__fig::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(10,11,13,.55)); mix-blend-mode:multiply}
.cap__title{margin-bottom:1.1rem}
.cap__meta{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.6rem}
.chip{font-family:var(--mono); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-dim); padding:.4rem .6rem; box-shadow:inset 0 0 0 1px var(--line); border-radius:2px}

/* ---------- 8. PILLARS / PROGRAM GRID ---------- */
.pillars{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:3rem}
@media(min-width:760px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.pillars--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pillar{background:var(--bg); padding:2.15rem 1.85rem; transition:background var(--d-2) var(--e-ui)}
.pillar:hover{background:var(--bg-raise)}
.pillar__no{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; color:var(--sig); margin-bottom:1.1rem}
.pillar h3,.pillar h4{margin-bottom:.85rem}
.pillar p{color:var(--ink-dim); font-size:.95rem; max-width:none}

/* ---------- 9. ACCORDION (EISOA) ---------- */
.layers{border-top:1px solid var(--line-strong); margin-top:3rem}
.layer{border-bottom:1px solid var(--line)}
.layer__hd{display:grid; grid-template-columns:3.5rem minmax(0,1fr) auto; gap:1rem; align-items:center;
  padding:1.5rem 0; width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left;
  cursor:pointer; transition:color var(--d-1) var(--e-ui)}
.layer__hd:hover{color:var(--sig)}
.layer__no{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em; color:var(--ink-mute);
  transition:color var(--d-1) var(--e-ui)}
.layer__hd:hover .layer__no{color:var(--sig)}
.layer__nm{font-size:clamp(1.05rem,1.4vw,1.5rem); font-weight:600; letter-spacing:-.01em; text-transform:uppercase}
.layer__st{font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.layer__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-3) var(--e-out-quart)}
.layer.is-open .layer__panel{grid-template-rows:1fr}
.layer__inner{overflow:hidden}
.layer__pad{padding:0 0 2.25rem; display:grid; gap:1.5rem}
@media(min-width:1000px){.layer__pad{grid-template-columns:3.5rem minmax(0,1fr); gap:1rem}
  .layer__pad > *{grid-column:2}}
.tickets{display:grid; gap:.7rem; margin-top:.4rem}
.ticket{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.85rem; align-items:start;
  color:var(--ink-dim); max-width:var(--measure)}
.ticket::before{content:''; width:.4rem; height:.4rem; margin-top:.62em; flex:none;
  background:var(--sig); transform:rotate(45deg)}

/* ---------- 10. SPEC TABLE ---------- */
.spec{width:100%; border-collapse:collapse; border-top:1px solid var(--line-strong); margin-top:1rem}
.spec th,.spec td{text-align:left; padding:.9rem 1rem .9rem 0; border-bottom:1px solid var(--line); vertical-align:top}
.spec th{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; width:16rem}
.spec td{font-family:var(--mono); font-size:.88rem; color:var(--ink); line-height:1.55}
.spec td em{font-style:normal; color:var(--sig)}
.spec caption{text-align:left; margin-bottom:1rem}

/* ---------- 11. PULL QUOTE ---------- */
.quote{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:clamp(3rem,7vw,6rem)}
.quote blockquote{font-size:clamp(1.3rem,2.6vw,2.35rem); font-weight:600; line-height:1.24;
  letter-spacing:-.018em; color:var(--ink); max-width:26ch; margin:0}
.quote blockquote::before{content:'\201C'; color:var(--sig)}
.quote blockquote::after{content:'\201D'; color:var(--sig)}
.quote figcaption{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:2rem}

/* ---------- 12. FORMS ---------- */
.form{display:grid; gap:1.35rem; max-width:38rem}
.form__row{display:grid; gap:1.35rem}
@media(min-width:640px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid; gap:.5rem}
.field > label{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute)}
.field > label .req{color:var(--sig)}
.field input,.field select,.field textarea{
  font-family:var(--display); font-size:.98rem; color:var(--ink); background:var(--bg-raise);
  border:0; box-shadow:inset 0 0 0 1px var(--line-strong); border-radius:2px;
  padding:.85rem 1rem; width:100%;
  transition:box-shadow var(--d-1) var(--e-ui), background var(--d-1) var(--e-ui);
}
.field textarea{resize:vertical; min-height:8rem; line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{box-shadow:inset 0 0 0 1px var(--ink-mute)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--bg); box-shadow:inset 0 0 0 1px var(--sig), 0 0 0 3px var(--sig-dim)}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E747C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center}
.field--check{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.75rem}
.field--check input{width:1.05rem; height:1.05rem; accent-color:var(--sig); padding:0}
.field--check label{text-transform:none; letter-spacing:.02em; font-family:var(--display); font-size:.92rem; color:var(--ink-dim)}
.form__hp{position:absolute; left:-9999px}
.form__note{font-family:var(--mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-mute)}

/* ---------- 13. CONTACT / FOOTER ---------- */
.contact{background:var(--bg-sink); border-block:1px solid var(--line)}
.foot{background:var(--bg-sink); border-top:1px solid var(--line); padding-block:5rem 2.5rem}
.foot__grid{display:grid; gap:2.5rem}
@media(min-width:900px){.foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--gut)}}
.foot__wm{font-size:clamp(2rem,4.4vw,3.9rem); font-weight:800; letter-spacing:-.035em;
  text-transform:uppercase; line-height:.92; color:var(--ink)}
.foot h4{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; margin-bottom:.9rem}
.foot p,.foot a{color:var(--ink-dim); font-size:.95rem; line-height:1.6}
.foot a:hover{color:var(--sig)}
.foot__links{display:grid; gap:.45rem}
.foot__legal{margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); line-height:1.9; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem}
.foot__legal b{color:var(--ink-dim); font-weight:400}
.disclaimer{margin-top:1.5rem; font-size:.72rem; line-height:1.7; color:var(--ink-mute);
  max-width:82ch; font-family:var(--mono); letter-spacing:.02em}

/* ---------- 14. MOTION SWITCH ---------- */
.motion-switch{display:inline-flex; align-items:center; gap:.6rem; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); padding:.5rem 0; transition:color var(--d-1) var(--e-ui)}
.motion-switch:hover{color:var(--ink-dim)}
.motion-switch__track{width:2.1rem; height:1.05rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-strong);
  display:block; position:relative; transition:background var(--d-2) var(--e-ui)}
.motion-switch[aria-checked=true] .motion-switch__track{background:var(--sig-dim)}
.motion-switch__thumb{position:absolute; top:.2rem; left:.2rem; width:.65rem; height:.65rem; border-radius:999px;
  background:var(--ink-mute); transition:transform var(--d-2) var(--e-out-quart), background var(--d-2) var(--e-ui)}
.motion-switch[aria-checked=true] .motion-switch__thumb{transform:translateX(1.05rem); background:var(--sig)}

/* ---------- 15. REVEAL ---------- */
[data-rv]{opacity:0; transform:translate3d(0,20px,0)}
[data-rv].is-in{opacity:1; transform:none;
  transition:opacity var(--d-4) var(--e-out-cubic) var(--rv-d,0ms), transform var(--d-4) var(--e-out-cubic) var(--rv-d,0ms)}

/* ---------- 16. A11Y ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--sig); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--sig); color:#0A0B0D;
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.16em; text-transform:uppercase}
.skip:focus{left:1rem; top:1rem}
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Ship BOTH the media query and the JS toggle. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-rv]{opacity:1 !important; transform:none !important}
  .hero__motto .ln > span{transform:none !important}
}
html[data-motion=off] *{animation:none !important; transition:none !important}
html[data-motion=off] [data-rv]{opacity:1 !important; transform:none !important}
html[data-motion=off] .hero__motto .ln > span{transform:none !important}