/* HitVault — committed single-theme dark. Every colour painted explicitly. */
@font-face{font-family:"Archivo Black";src:url("/fonts/archivo-black-latin.4eca2abd.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-latin.1f21c6ea.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin.2c32b9b3.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo Black";src:url("/fonts/archivo-black-latin-ext.372c9e5a.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url("/fonts/hanken-grotesk-latin-ext.a1376a56.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin-ext.9c38cb2d.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --vault:#0A0A0B;
  --band:#0E0D10;
  --panel:#141316;
  --sunk:#08080A;
  --line:#2C2721;
  --line-soft:#1F1C1A;
  --gold:#E8B84B;
  --gold-lift:#F2CE7A;
  --gold-dim:#8A6A22;
  --chrome:#D6DAE0;
  --text:#EFEBE2;
  --muted:#A8A296;
  --faint:#8A8478;
  --ink:#0A0A0B;
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --wrap:1140px;
  --pad:22px;
  --section:clamp(3rem,8vw,6rem);
  --r:8px;
  --r-sm:3px;
  --t-xs:11px;
  --t-sm:12.5px;
  --t-base:14px;
  --t-md:15.5px;
  --t-body:16.5px;
  --t-lg:17.5px;
  --t-xl:19px;
  --t-2xl:23px;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:20px;
  --s-5:26px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--vault);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em;font-family:var(--display);font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold-dim);text-underline-offset:4px}
a:hover{color:var(--gold);text-decoration-color:var(--gold)}
/* Anything that is already a button, a brand or a nav row carries its own affordance. */
.skip,.brand,.lang,.social,.btn,.navlinks a{text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}
/* Two fast taps on a control are two presses, not a zoom gesture. Without this the browser
   waits to see if a double-tap is coming, then zooms and pans to frame what was tapped, which
   reads as the page scrolling itself. Pinch zoom is untouched, so nothing is taken away. */
button,summary,.btn,.lang,.social,.brand{touch-action:manipulation}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);font-weight:700;padding:12px 18px;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* ---------- sticky topbar ---------- */
.topbar{position:sticky;top:0;z-index:100;background:var(--sunk);border-bottom:1px solid var(--line)}
.nav{
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  max-width:var(--wrap);margin:0 auto;padding:10px var(--pad);
}
.brand{display:flex;align-items:center;gap:var(--s-3);min-height:44px;color:var(--text)}
.mark{width:38px;height:38px;flex:none}
.wordmark{font-family:var(--display);font-size:var(--t-xl);letter-spacing:-.02em}
.wm-hit{color:var(--chrome)}
.wm-vault{color:var(--gold)}
.navlinks{display:flex;gap:var(--s-4);margin-left:auto;order:1}
.navlinks a{color:var(--muted);font-size:var(--t-base)}
.navlinks a:hover{color:var(--gold)}
.navlinks a[aria-current]{color:var(--gold)}
.navend{display:flex;align-items:center;gap:var(--s-3);order:2}
.menu-btn{
  display:none;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.menu-btn:hover{border-color:var(--gold-dim);color:var(--gold)}
.menu-btn[aria-expanded="true"]{border-color:var(--gold-dim);color:var(--gold)}
.lang{
  border:1px solid var(--line);border-radius:var(--r);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease;
}
.lang:hover{border-color:var(--gold-dim)}
.social{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);transition:color .15s ease;
}
.social:hover{color:var(--gold)}
.social-icon{width:20px;height:20px;display:block}
.socials{display:flex}
.socials-menu{display:none}
.flag{
  width:22px;height:auto;display:block;border-radius:var(--r-sm);
  box-shadow:0 0 0 1px rgba(239,235,226,.16);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 24px;border-radius:var(--r);
  font-family:var(--body);font-size:var(--t-md);font-weight:700;line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px;padding:10px 16px;font-size:var(--t-base)}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:var(--gold-lift);color:var(--ink)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold-dim);color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(100% 120% at 4% 0%, #16120D 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='54'%3E%3Cpath d='M15 1 H46 L61 27 L46 53 H15 L0 27 Z' fill='none' stroke='%232A2318' stroke-width='1'/%3E%3C/svg%3E"),
    var(--vault);
  background-repeat:no-repeat,repeat,no-repeat;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(22px,4vw,54px);align-items:center;
  padding-top:clamp(40px,7vw,84px);
  padding-bottom:clamp(40px,7vw,84px);
}
.hero-copy{align-self:center;position:relative;z-index:1}
.hero h1{font-size:clamp(36px,6.4vw,68px);line-height:.95;letter-spacing:-.035em;margin-bottom:22px}
.hl-kicker,.hl-lead,.hl-main{display:block}
.hl-kicker{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);line-height:1.4;margin-bottom:14px}
.hl-lead{color:var(--muted)}
.hl-main{color:var(--text)}
.lede{color:var(--muted);font-size:var(--t-lg);max-width:46ch}
.hero .lede{margin-bottom:26px}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-img{align-self:center}
/* The source JPEG carries a bright 1px column on its left and right edges; the mask
   dissolves all four sides so those never read as white lines against the dark page. */
.hero-img img{
  width:100%;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-composite:intersect;
}
/* The film is the opening shot of a lit stage, sized so its floor line lands on the machine's
   feet (95.8% down the PNG) and its own outlined cabinet hides behind the real one. --k is the
   stage width as a multiple of the machine image; 34.5% is the film's floor height (69% of a
   4:3 frame) expressed against the image's 2:3 height. Screen blending drops the film's black,
   so it only ever adds light and never shows a box edge against the hex ground. The blend sits
   on the container, not the video: the mask isolates the container, and a blend inside it
   would only mix with an empty layer. */
.hero-img{position:relative;--k:1.7}
.hero-img img{position:relative}
.hero-film{
  position:absolute;left:50%;top:calc(95.8% - 34.5% * var(--k));
  width:calc(100% * var(--k));aspect-ratio:4/3;transform:translateX(-50%);
  pointer-events:none;mix-blend-mode:screen;
  /* Without JavaScript, or with reduced motion, this pool of light is all there is. */
  background:radial-gradient(38% 9% at 50% 69%,rgba(232,184,75,.2),transparent 70%);
  /* Straight fades, not a radial one: the spotlight comes in from the top-left corner. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);
  mask-composite:intersect;
}
.hero-film video{
  width:100%;height:100%;display:block;object-fit:cover;
  opacity:0;transition:opacity .4s ease-out;
}
.hero-film.is-playing video{opacity:1}
/* One pass of gold across the cabinet as the film's light comes up. Masked to the machine's
   own alpha so it never touches the transparent margin around it. */
.hero-sheen{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:var(--machine) center/100% 100% no-repeat;
  mask:var(--machine) center/100% 100% no-repeat;
}
.hero-sheen::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;
  background:linear-gradient(100deg,transparent 0,rgba(242,206,122,.42) 50%,transparent 100%);
  transform:translateX(-120%) skewX(-14deg);
}
.hero-img.is-lit .hero-sheen::before{animation:hero-sheen 1.6s cubic-bezier(.45,0,.2,1) both}
@keyframes hero-sheen{
  from{transform:translateX(-120%) skewX(-14deg)}
  to{transform:translateX(290%) skewX(-14deg)}
}

/* ---------- reveals ---------- */
/* app.js sets .can-reveal only when it can also take the class off again, so nothing is ever
   left hidden without JavaScript, IntersectionObserver or with reduced motion. */
.can-reveal [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
}
.can-reveal [data-reveal].is-in{opacity:1;transform:none}
@media print{.can-reveal [data-reveal]{opacity:1;transform:none}}

/* ---------- bands ---------- */
.band{padding:var(--section) 0;border-top:1px solid var(--line-soft)}
.band-inside,.band-locations{background:var(--band)}
.band h2{font-size:clamp(27px,4vw,40px);line-height:1.06;margin-bottom:16px}
.band .lede{margin-bottom:8px;max-width:62ch}
h3.sub{font-size:var(--t-xl);margin:46px 0 8px}
.sub-note{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.04em;color:var(--faint)}

.inside-head{max-width:64ch}
.group-note{color:var(--muted);max-width:64ch;margin-top:6px}
/* ---------- boosters ---------- */
.boosters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:26px}
.booster{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px 16px;
}
.booster-art{
  background:none;border-radius:var(--r-sm);margin-bottom:14px;
  /* Square well: the pack art ships at mixed ratios, and contain keeps every pack whole. */
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.booster-art{border:1px solid transparent;padding:0;cursor:zoom-in;width:100%;transition:border-color .15s ease}
.booster-art:hover{border-color:var(--gold-dim)}
.booster-art img{width:100%;height:100%;object-fit:contain}
/* app.js writes --rx/--ry from the pointer; the transition smooths it into a lean, not a jitter. */
@media (hover:hover) and (pointer:fine){
  .booster-art img{
    transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--lift,1));
    transition:transform .25s ease-out;
  }
  .booster-art:hover img{--lift:1.04}
}

/* ---------- lightbox ---------- */
.lightbox{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:0;max-width:min(560px,92vw);max-height:92vh;overflow:visible;color:var(--text);
}
.lightbox::backdrop{background:rgba(6,6,8,.82)}
.lightbox img{width:100%;height:auto;border-radius:var(--r)}
.lightbox-close{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;border-radius:var(--r);
  background:var(--gold);color:var(--ink);border:none;cursor:pointer;
  font-size:var(--t-xl);line-height:1;
}

.booster-code{font-family:var(--mono);font-size:var(--t-sm);color:var(--text);letter-spacing:.04em;margin-bottom:5px}
.booster h3{font-family:var(--display);font-size:var(--t-md);line-height:1.2;margin-bottom:12px}
.booster-specs{margin:auto 0 0;display:grid;gap:var(--s-1);font-size:var(--t-sm)}
.booster-specs > div{display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline}
.booster-specs dt{color:var(--faint);font-size:var(--t-xs)}
.booster-specs dd{
  margin:0;color:var(--muted);font-family:var(--mono);
  font-variant-numeric:tabular-nums;text-align:right;
}
.pill{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-dim);border-radius:var(--r-sm);padding:2px 6px;margin-left:6px;
  white-space:nowrap;
}
.tbd{color:var(--faint);font-style:italic}

/* ---------- mystery products ---------- */
.mystery-block{margin-top:40px}
.mystery-block > h3{font-size:var(--t-xl);margin-bottom:9px}
.mystery-block > p{color:var(--muted);font-size:var(--t-body);max-width:64ch}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:28px;align-items:start}
.product{border-top:1px solid var(--line);padding-top:22px;min-width:0}
.product > h4{font-size:var(--t-lg);margin-bottom:6px}
.product-tag{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.product > p:not(.product-tag){color:var(--muted);font-size:var(--t-body);max-width:52ch}
.product-contents{
  width:min(430px,100%);margin-top:28px;padding:18px 20px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-4);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:var(--t-sm);color:var(--text);
}
.product-contents li{display:flex;align-items:center;gap:var(--s-2);min-height:36px}
.product-contents li::before{content:"";width:5px;height:5px;background:var(--gold-dim);flex:none}

/* The page's one authored motion moment: two boosters materialise inside the Double booster box.
   Everything stays rendered the whole time and the state is a class, because <details> does
   not render its closed content and a transition has no start value to interpolate from.
   Static markup ships the OPEN state, so with JavaScript off the pack is simply a framed
   illustration of its own contents and the toggle never appears. */
.opener{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.opener-pack{
  width:min(430px,100%);
  display:grid;grid-template-rows:auto 1fr;gap:var(--s-3);
  position:relative;padding:18px 20px 62px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.opener-name{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:center;
}
/* The question mark and the boosters share one cell, so they swap in place. */
.opener-stage{display:grid;place-items:center;min-height:182px}
.opener-stage > *{grid-area:1/1}
.opener-q{
  font-family:var(--display);font-size:clamp(58px,8vw,82px);line-height:1;
  letter-spacing:-.03em;color:var(--faint);
  opacity:0;transform:scale(.88);
  transition:opacity .16s ease-out,transform .16s ease-out;
}
.opener.is-shut .opener-q{opacity:1;transform:none;transition-delay:.16s}

.opener-packs{display:flex;gap:var(--s-4);align-items:flex-end;justify-content:center}
.opener-slot{
  width:118px;
  transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s cubic-bezier(.22,1,.36,1);
}
/* They fan apart from the middle of the pack rather than fading in on the spot, and the
   second trails the first so they read as arriving one after the other. */
.opener.is-shut .opener-slot{opacity:0}
.opener.is-shut .opener-slot:first-child{transform:translate(16px,18px) scale(.78) rotate(-5deg)}
.opener.is-shut .opener-slot:last-child{transform:translate(-16px,18px) scale(.78) rotate(5deg)}
/* Arriving, the second trails the first. Leaving, they go in the reverse order. */
.opener-slot:last-child{transition-delay:.07s}
.opener.is-shut .opener-slot:last-child{transition-delay:0s}
.opener.is-shut .opener-slot:first-child{transition-delay:.07s}
/* A square well, like the grid below: op17 ships 690x720 while the rest are square, and a
   freshly swapped image has no height until it loads. Reserving the box keeps both slots the
   same size no matter which pair came out, and stops the art jumping as it arrives. */
.opener-slot img{
  width:100%;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--r-sm);background:var(--sunk);
}
.opener-code{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;color:var(--text);margin-top:9px;text-align:center}

/* The whole pack is the target, not just the strip at the bottom. The button sits over the
   pack and carries its label in a bar along the foot, so the focus ring frames the pack. */
.opener-toggle{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;
  background:none;border:none;padding:0;cursor:pointer;
}
.opener-bar{
  width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);
  transition:color .2s ease-out,background-color .2s ease-out;
}
.opener-toggle:hover .opener-bar{color:var(--gold);background:var(--sunk)}
.opener-pack:has(.opener-toggle:hover){border-color:var(--gold-dim)}
.opener:not(.is-shut) .opener-cue-shut{display:none}
.opener.is-shut .opener-cue-open{display:none}

.opener-note{color:var(--muted);font-size:var(--t-sm);max-width:62ch}



/* ---------- locations ---------- */
.machines{margin-top:34px;border-top:1px solid var(--line)}
.machine{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-1) var(--s-5);align-items:baseline;
  /* Symmetric inset: the map link is justified to the end of the row, and with no padding
     on the right it sat flush against the rule. */
  padding:20px 16px;
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top:86px;
}
.machine h3{grid-column:1;grid-row:1;font-size:var(--t-xl)}
.machine-spot{grid-column:1;grid-row:2;color:var(--muted);font-size:var(--t-md)}
/* The brand pills wrap as one unit, so a machine's brands never split across lines. */
.pills{white-space:nowrap}
.machine-map{
  grid-column:2;grid-row:1/-1;align-self:center;justify-self:end;
  font-size:var(--t-base);white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;
}

/* ---------- faq ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:var(--display);font-size:var(--t-body);color:var(--text);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:var(--t-xl);color:var(--faint);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--gold)}
.faq p{color:var(--muted);font-size:var(--t-body);max-width:70ch;padding:0 0 21px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--sunk);padding:48px 0 60px}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-family:var(--mono);font-size:var(--t-sm);color:var(--muted);align-items:center}
.foot-legal strong{color:var(--text);font-weight:600}
.foot-legal a{min-height:44px;display:inline-flex;align-items:center}
.foot-rights{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);margin-top:20px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:40px}
  .hero-copy{padding-bottom:36px}
  .hero-img{max-width:min(420px,100%);--k:1.3}
  .menu-btn{display:inline-flex}
  .navend{margin-left:auto;order:1}
  .navlinks{
    order:3;width:100%;margin:0;display:none;
    flex-direction:column;gap:0;border-top:1px solid var(--line);
  }
  .navlinks.is-open{display:flex}
  .navlinks a{min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--line-soft)}
  .navlinks a:last-child{border-bottom:none}
}
@media (max-width:1000px){
  .boosters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .products{grid-template-columns:1fr}
  .boosters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opener-slot{width:min(118px,40%)}
  .machine{grid-template-columns:1fr;gap:var(--s-1)}
  .machine h3,.machine-spot,.machine-map{grid-column:1;grid-row:auto}
  .machine-map{justify-self:start}
}
@media (max-width:560px){
  :root{--pad:18px}
  .nav{gap:var(--s-3)}
  .btnrow .btn{width:100%}
  .foot-legal{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .navend .socials{display:none}
  .navlinks .socials-menu{display:flex;margin-left:-11px}
  .navlinks .socials-menu a{border-bottom:none;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* sticky topbar clearance for in-page anchors */
section[id]{scroll-margin-top:76px}

/* ---------- 404 ---------- */
.nf{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px var(--pad);
  background:
    radial-gradient(85% 85% at 50% 14%, #16120D 0%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='54'%3E%3Cpath d='M15 1 H46 L61 27 L46 53 H15 L0 27 Z' fill='none' stroke='%23231E15' stroke-width='1'/%3E%3C/svg%3E"),
    var(--vault);
}
.nf .brand{margin-bottom:36px}
.nf .mark{width:46px;height:46px}
.nf .wordmark{font-size:var(--t-2xl)}
.nf-links{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:22px}
.nf-links a{min-height:44px;display:inline-flex;align-items:center;font-size:var(--t-base)}
.nf-code{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.32em;color:var(--gold);margin-bottom:16px}
.nf h1{font-size:clamp(34px,6vw,62px);line-height:1;letter-spacing:-.035em;margin-bottom:16px}
.nf-lead{color:var(--muted);font-size:var(--t-lg);max-width:44ch;margin-bottom:30px}
.nf-en{color:var(--faint);font-size:var(--t-base);margin-top:30px}

/* ---------- terms ---------- */
.terms{max-width:760px;padding-top:40px;padding-bottom:var(--section)}
.terms-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:40px}
.terms .mark{width:38px;height:38px}
.terms h1{font-size:clamp(28px,5vw,44px);line-height:1.08;letter-spacing:-.03em;margin-bottom:12px}
.terms-updated{font-family:var(--mono);font-size:var(--t-sm);color:var(--faint);margin-bottom:28px}
.terms-section{border-top:1px solid var(--line-soft);padding-top:26px;margin-top:30px}
.terms-section h2{font-size:var(--t-xl);margin-bottom:14px}
.terms-section h2 .terms-num{color:var(--gold)}
.terms-clauses{display:grid;gap:14px}
.terms-clauses > li{display:grid;grid-template-columns:3.2em 1fr;gap:var(--s-2);color:var(--muted)}
.terms-clauses .terms-num{font-family:var(--mono);font-size:var(--t-sm);color:var(--faint);padding-top:.25em}
.terms-clauses ul{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.terms-clauses ul li{position:relative;padding-left:1.1em}
.terms-clauses ul li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;background:var(--gold-dim)}
.terms-contact{display:grid;gap:var(--s-1);color:var(--muted)}
.terms-contact strong{color:var(--text);font-weight:600}
.terms-contact a{display:inline-flex;align-items:center;min-height:44px}
.terms-back{margin-top:48px}

/* ---------- location pages ---------- */
.loc{max-width:760px;padding-top:32px;padding-bottom:var(--section)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);font-family:var(--mono);font-size:var(--t-sm);color:var(--faint);margin-bottom:32px}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{color:var(--text)}
.loc h1{font-size:clamp(30px,5.4vw,52px);line-height:1;letter-spacing:-.03em;margin-bottom:18px}
.loc .lede{margin-bottom:26px}
.loc-facts{display:grid;gap:var(--s-3);border-top:1px solid var(--line);padding-top:20px;margin-bottom:24px}
.loc-facts div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:var(--s-3)}
.loc-facts dt{font-family:var(--mono);font-size:var(--t-sm);color:var(--faint);padding-top:.2em}
.loc-section{border-top:1px solid var(--line-soft);padding-top:26px;margin-top:40px;display:grid;gap:var(--s-3);color:var(--muted)}
.loc-section h2{font-size:var(--t-xl);color:var(--text)}
.loc-stock{display:grid;gap:var(--s-2)}
.loc-stock strong{color:var(--text);font-weight:600}
.loc-others{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.loc-others a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:560px){.loc-facts div{grid-template-columns:1fr;gap:var(--s-1)}}