/* ═══════════════════════════════════════════════════════════════
   MIDNIGHT MARKET — "Velvet Utility"
   Framework-free. No build step. No dependencies.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  /* Surfaces */
  --mm-night:        #0B0910;
  --mm-night-raised: #17131D;
  --mm-plum:         #211929;
  --mm-bone:         #F5F2EE;
  --mm-white:        #FFFFFF;

  /* Text */
  --mm-text-dark:  #F7F4F9;
  --mm-muted-dark: #AAA3B3;
  --mm-text-light: #17131D;
  --mm-muted-light:#625C68;

  /* Lines */
  --mm-line-dark:  #342C3D;
  --mm-line-light: #DED8E2;

  /* Accent — interface only. These are tuned for text and focus contrast on
     #0B0910 / #F5F2EE and must not be replaced by the brand purple below. */
  --mm-accent-dark:  #A487FF;
  --mm-accent-light: #6541CF;

  /* Official logo purple (brand guide §1). Brand-level rules and marks only.
     #784EBF on #0B0910 is ~4.0:1 — fine for large/graphic elements, NOT
     sufficient for small text or focus rings, which keep the accents above. */
  --mm-brand-purple: #784EBF;

  /* Error */
  --mm-error-light: #B93838;
  --mm-error-dark:  #FF8585;

  /* Spacing — 4px base */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px;  --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Layout */
  --mm-max: 1240px;
  --mm-gutter: 24px;
  --mm-pad: 20px;

  /* Type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --radius-btn: 6px;
  --radius-card: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
.js:not(.reduce-motion) html,
html:has(body){ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--mm-bone);
  color:var(--mm-text-light);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.06; }
a{ color:inherit; }
button{ font:inherit; }

/* Scroll targets clear the fixed header */
[id]{ scroll-margin-top:96px; }

/* ── Focus (WCAG 2.2 — visible, ≥3:1) ───────────────────────── */
:focus-visible{
  outline:3px solid var(--mm-accent-light);
  outline-offset:3px;
  border-radius:2px;
}
.section--dark :focus-visible,
.hero :focus-visible,
.site-head :focus-visible,
.site-foot :focus-visible,
.mobile-menu :focus-visible,
.sticky-cta:focus-visible{
  outline-color:var(--mm-accent-dark);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--mm-night); color:var(--mm-text-dark);
  padding:var(--sp-3) var(--sp-5);
  text-decoration:none; font-weight:600;
}
.skip-link:focus{ left:var(--sp-2); top:var(--sp-2); }

/* ── Layout ─────────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--mm-max);
  margin-inline:auto;
  padding-inline:var(--mm-pad);
}
@media (min-width:768px){
  .shell{ padding-inline:var(--mm-gutter); }
}
.shell--narrow{ max-width:840px; }

.section{ padding-block:var(--sp-9); }
@media (min-width:768px){ .section{ padding-block:var(--sp-10); } }

.section--light{ background:var(--mm-bone); color:var(--mm-text-light); }
.section--bone { background:var(--mm-white); color:var(--mm-text-light); }
.section--dark {
  background:var(--mm-night);
  color:var(--mm-text-dark);
}

.section__head{ margin-bottom:var(--sp-7); }
@media (min-width:768px){ .section__head{ margin-bottom:var(--sp-8); } }

/* ── Type ───────────────────────────────────────────────────── */
.mono{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--mm-accent-light);
  margin-bottom:var(--sp-5);
}
.eyebrow--onDark{ color:var(--mm-accent-dark); }

/* The hero is the only maximum-impact headline; section heads step down so the
   page stops shouting at one volume the whole way through. */
.h2{
  font-size:clamp(2.05rem, 4vw, 4.15rem);
  letter-spacing:-.035em;
  line-height:1.04;
}
@media (max-width:559px){
  .h2{ font-size:clamp(2rem, 9vw, 2.75rem); }
}
.h2--tight{ font-size:clamp(1.9rem, 3.4vw, 3.25rem); }
.h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); letter-spacing:-.02em; }

.lede{
  margin-top:var(--sp-5);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--mm-muted-light);
  max-width:62ch;
}
.section--dark .lede,
.hero .lede{ color:var(--mm-muted-dark); }
@media (min-width:768px){ .lede{ font-size:1.1875rem; } }

.footnote{
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--mm-line-light);
  font-size:.875rem;
  line-height:1.6;
  color:var(--mm-muted-light);
  max-width:78ch;
}

/* ── Buttons (≥52px, 6px radius, ≥44px touch) ───────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:52px;
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--radius-btn);
  border:1px solid var(--mm-night);
  background:var(--mm-night);
  color:var(--mm-text-dark);
  font-weight:700;
  font-size:.9375rem;
  line-height:1.2;
  letter-spacing:-.01em;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ background:var(--mm-accent-light); border-color:var(--mm-accent-light); color:var(--mm-white); }

.btn--sm{ min-height:44px; padding:var(--sp-2) var(--sp-5); font-size:.875rem; }
.btn--full{ width:100%; }

.btn--ghost{
  background:transparent;
  border-color:var(--mm-line-dark);
  color:var(--mm-text-dark);
}
.btn--ghost:hover{
  background:transparent;
  border-color:var(--mm-accent-dark);
  color:var(--mm-accent-dark);
}

/* On dark surfaces the solid button inverts so it stays visible. The mobile
   menu sits on --mm-night too, so it needs the same treatment — without it the
   CTA renders near-black on near-black and reads as plain text. */
.section--dark .btn:not(.btn--ghost),
.hero .btn:not(.btn--ghost),
.mobile-menu .btn:not(.btn--ghost){
  background:var(--mm-accent-dark);
  border-color:var(--mm-accent-dark);
  color:var(--mm-night);
}
.section--dark .btn:not(.btn--ghost):hover,
.hero .btn:not(.btn--ghost):hover,
.mobile-menu .btn:not(.btn--ghost):hover{
  background:var(--mm-white);
  border-color:var(--mm-white);
  color:var(--mm-night);
}

/* ═══════════ HEADER ═══════════ */
.site-head{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-head.is-stuck{
  background:rgba(11,9,16,.94);
  border-bottom-color:var(--mm-line-dark);
  backdrop-filter:blur(12px);
}
.site-head__inner{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding-block:var(--sp-3);
}
/* ── Shrinking brand link ───────────────────────────────────────────────
   One real, always-clickable home link that travels from the hero into the
   header as you scroll. position:fixed for its whole life so it never jumps
   between layout modes.

   HOW THE MOTION IS SPLIT — this matters:
   - VERTICAL travel is driven by script.js, which sets `top` every scroll
     frame to `max(headerTop, heroTop - scrollY)`. That makes the logo ride
     up with the page exactly as an in-flow element would, then stop dead at
     the header. A CSS transition on `top` CANNOT do this: it would pin the
     logo at a fixed viewport offset while the hero copy scrolled up
     underneath it, which is precisely the overlap bug this replaced.
   - SIZE is a plain CSS transition toggled by the `.brand-small` class.
   - HORIZONTAL position never changes: the shell's content edge is the same
     x for the hero copy and the header row.

   `.site-head__brand-slot` is an invisible same-width placeholder in the
   header's flex flow, so taking the link out of flow doesn't shift the
   nav/CTA left to fill the gap. `.hero__brand-slot` does the same job in the
   hero and is what JS measures to find `heroTop`. */
/* The PARKED vertical position is not a token here: script.js derives it from
   the real header-bar height and the mark's real aspect ratio so the mark is
   optically centred in the bar at any breakpoint. Hard-coding it produced a
   mark that hung below the bar onto the hero copy. */
:root{
  --brand-hero-top: 112px;
  --brand-hero-w: 160px;
  --brand-header-w: 36px;
  --shell-edge: 20px;        /* left offset of shell content, replicated below */
}
@media (min-width:560px){ :root{ --brand-hero-w:172px; } }
@media (min-width:768px){ :root{ --shell-edge:24px; } }
@media (min-width:900px){
  :root{ --brand-hero-w:184px; --brand-header-w:40px; }
}

.site-head__brand-slot{
  display:inline-block;
  width:var(--brand-header-w);
  height:1px;
  flex:0 0 auto;
}

.site-head__brand{
  position:fixed;
  z-index:101;
  display:block;
  /* `left` is IDENTICAL in the hero and header states — the shell's content
     edge is the same for the hero copy and the header row — so it never
     needs to animate and is declared once here.
     100% (not 100vw): for a position:fixed element this resolves against the
     real layout viewport, excluding the scrollbar gutter 100vw wrongly
     counts, which was throwing the alignment off by ~7px. */
  left:calc((100% - min(100%, var(--mm-max))) / 2 + var(--shell-edge));
  /* `top` is driven imperatively by script.js on every scroll frame so the
     logo rides up WITH the page, exactly like an in-flow element, and can
     never be overtaken by the hero copy scrolling underneath it. It is
     deliberately NOT transitioned: a transition would lag a frame behind
     every scroll tick. The value below is only the pre-scroll default. */
  top:var(--brand-hero-top);
  /* Height is declared explicitly per state rather than left to the images.
     The lockup (836:623) and the mark (368:415) have OPPOSITE orientations,
     so letting whichever image is in flow define the box makes the other one
     overflow it — at 40px wide the mark is 45px tall and was spilling 15px
     below the header bar onto the headline. */
  width:var(--brand-hero-w);
  height:calc(var(--brand-hero-w) * 623 / 836);
  min-height:0;
  transition:width .3s var(--ease), height .3s var(--ease);
}
/* Compact state changes SIZE only. Vertical travel is JS-driven (above) and
   horizontal position is constant, so neither is repeated here. */
.site-head.brand-small .site-head__brand{
  width:var(--brand-header-w);
  height:calc(var(--brand-header-w) * 415.148 / 368.396);
}

/* Both marks fill the link box and letterbox inside it, so neither can
   overflow while the box animates between the two aspect ratios. */
.brand-anim__full, .brand-anim__mark{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  transition:opacity .3s var(--ease);
}
.brand-anim__mark{ opacity:0; }
/* Crossfade runs concurrently with the size change, so the full lockup is
   already fading out while it passes below its 160px static minimum — it is
   never legible at a sub-minimum size, only in transit. */
.site-head.brand-small .brand-anim__full{ opacity:0; }
.site-head.brand-small .brand-anim__mark{ opacity:1; }

/* No JS: the animation script never runs, so fall straight to the compact,
   always-on mark — the pre-existing, fully static, no-JS-safe design. */
html:not(.js) .site-head__brand{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  width:auto;
  /* Must clear the hero-sized height from the animated rule, or the static
     header link keeps a 137px-tall box. */
  height:auto;
}
html:not(.js) .brand-anim__full{ display:none; }
html:not(.js) .brand-anim__mark{ position:static; opacity:1; width:auto; height:36px; }
@media (min-width:900px){
  html:not(.js) .brand-anim__mark{ height:40px; }
}

.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; gap:var(--sp-6); }
.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;            /* touch target */
  text-decoration:none;
  font-size:.9375rem;
  font-weight:600;
  color:var(--mm-text-dark);
  opacity:.82;
  transition:opacity .2s var(--ease);
}
.site-nav a:hover{ opacity:1; }

.site-head__cta{
  background:transparent;
  border-color:rgba(247,244,249,.34);
  color:var(--mm-text-dark);
}
.site-head__cta:hover{
  background:var(--mm-accent-dark);
  border-color:var(--mm-accent-dark);
  color:var(--mm-night);
}

.menu-btn{
  display:none;
  align-items:center;
  gap:var(--sp-2);
  margin-left:auto;
  min-height:44px;
  min-width:44px;
  padding:var(--sp-2);
  background:none;
  border:0;
  color:var(--mm-text-dark);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.menu-btn__bars{ display:block; width:22px; }
.menu-btn__bars i{
  display:block; height:2px; background:currentColor; border-radius:1px;
}
.menu-btn__bars i + i{ margin-top:6px; }

/* ═══════════ MOBILE MENU ═══════════ */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--mm-night);
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-8) var(--mm-pad);
}
.mobile-menu[hidden]{ display:none; }

/* Full lockup at exactly the 160px brand minimum, centred, with more than the
   required 9.2% (≈15px) of clear space on every side. Extra top padding on the
   panel keeps it clear of the fixed header, which sits above this overlay. */
.mobile-menu{ padding-top:calc(var(--sp-10) + var(--sp-2)); }
.mobile-menu__logo{
  display:block;
  width:160px;
  max-inline-size:100%;
  height:auto;
  margin:0 auto var(--sp-6);
}
.mobile-menu ul{ display:flex; flex-direction:column; gap:var(--sp-2); text-align:center; }
.mobile-menu a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px;
  color:var(--mm-text-dark);
  text-decoration:none;
  font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
}
/* Button-scale type, not nav-link scale — the .mobile-menu a rule above would
   otherwise blow this up to 1.5rem and wrap it onto two lines. */
.mobile-menu a.mobile-menu__cta{
  margin-top:var(--sp-6);
  width:100%;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:-.01em;
}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  background:var(--mm-night);
  color:var(--mm-text-dark);
  /* Mobile-first: tighter than before so the hero lockup does not push the
     primary CTA below the fold at 390×844. Desktop reclaims the space at 900px. */
  padding-block:calc(var(--sp-9) + var(--sp-4)) var(--sp-8);
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-7);
  align-items:center;
}
@media (min-width:900px){
  /* Trimmed so the primary CTA clears the fold on a 900px-tall desktop while
     keeping the lockup comfortably clear of the fixed header. */
  .hero{ padding-block:calc(var(--sp-9) + var(--sp-4)) var(--sp-9); }
  .hero__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--sp-8);
  }
}

.hero__title{
  font-size:clamp(3.25rem, 6.8vw, 6.5rem);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:800;
  margin-bottom:var(--sp-5);
  text-wrap:balance;
}
@media (max-width:559px){
  .hero__title{ font-size:clamp(2.65rem, 12vw, 3.75rem); }
}
.hero__body{
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--mm-muted-dark);
  max-width:54ch;
}
@media (min-width:768px){ .hero__body{ font-size:1.1875rem; } }

.hero__proof{
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--mm-line-dark);
  font-size:.9375rem;
  color:var(--mm-text-dark);
  max-width:52ch;
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  margin-top:var(--sp-6);
}
@media (min-width:900px){
  .hero__actions{ margin-top:var(--sp-7); }
}
@media (max-width:559px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
}

.hero__media{ margin:0; position:relative; }
.hero__media img{
  width:100%;
  border-radius:var(--radius-card);
  border:1px solid var(--mm-line-dark);
  object-fit:cover;
  aspect-ratio:3/4;
}
/* ── Hero brand lockup ──────────────────────────────────────────────
   Full approved lockup on the solid night field. Never below the 160px
   brand minimum (guide §5); clear space always exceeds the required 9.2%
   of displayed width (14.7px at 160px, 16.9px at 184px). */
/* Reserves the exact box the old static lockup occupied, so hero spacing
   (lockup→eyebrow 20px, eyebrow→headline 24px, and the tuned viewport-fit at
   390×844 / 1440×900) is unchanged. The real, visible lockup is the fixed
   .site-head__brand link, CSS-positioned to overlap this box at scroll 0. */
.hero__brand-slot{
  width:var(--brand-hero-w);
  aspect-ratio:836/623;
  margin:0 0 20px;
}

/* No JS: nothing will visually occupy this slot (the link falls back to its
   compact, static header position instead) — collapse it rather than leave a
   184×137px gap of dead space above the eyebrow. */
html:not(.js) .hero__brand-slot{ display:none; }

/* ═══════════ PROOF STRIP ═══════════ */
.proof{
  background:var(--mm-night-raised);
  color:var(--mm-text-dark);
  border-top:1px solid var(--mm-line-dark);
  border-bottom:1px solid var(--mm-line-dark);
  padding-block:var(--sp-7);
}
.proof__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
}
@media (min-width:768px){
  .proof__grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-7); }
}
.proof__value{
  font-size:clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
}
.proof__label{
  margin-top:var(--sp-2);
  color:var(--mm-muted-dark);
}

/* ═══════════ CARDS ═══════════ */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:600px){ .cards--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .cards--3{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }

.card{
  background:var(--mm-white);
  border:1px solid var(--mm-line-light);
  border-radius:var(--radius-card);
  padding:var(--sp-6);
}
.section--bone .card{ background:var(--mm-bone); }
.card__kicker{ color:var(--mm-accent-light); margin-bottom:var(--sp-3); }
.card__title{
  font-size:1.25rem;
  margin-bottom:var(--sp-3);
  letter-spacing:-.02em;
}
.card p{ color:var(--mm-muted-light); font-size:.9375rem; }

/* ═══════════ STEPS ═══════════ */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }

.step{
  border-top:2px solid var(--mm-accent-light);
  padding-top:var(--sp-5);
}
.step__num{ color:var(--mm-muted-light); margin-bottom:var(--sp-3); }
.step__title{ font-size:1.375rem; margin-bottom:var(--sp-3); letter-spacing:-.025em; }
.step p{ color:var(--mm-muted-light); font-size:.9375rem; }

/* ── Editorial band (image ~7 cols / text ~5 cols on desktop) ──────────
   Replaces the small floating card that used to sit in a large white field.
   DOM order is text-then-image; CSS puts the image left on wide screens.
   The photo is nearly square (1200×1137), so it is cropped gently and biased
   upward — a hard wide crop cuts the kiosk's branded header off the top. */
.ed-band{
  margin-top:var(--sp-8);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  align-items:center;
}
@media (min-width:900px){
  .ed-band{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--sp-7);
    margin-top:var(--sp-9);
  }
  .ed-band__media{ grid-column:1; grid-row:1; }
  .ed-band__text { grid-column:2; grid-row:1; }
}
.ed-band__text  { min-width:0; }
.ed-band__text .h3{ margin-bottom:var(--sp-3); text-wrap:balance; }
.ed-band__text p:last-child{ color:var(--mm-muted-light); font-size:.9375rem; }
.ed-band__media{ margin:0; min-width:0; }
.ed-band__media img{
  width:100%;
  border-radius:var(--radius-card);
  border:1px solid var(--mm-line-light);
  object-fit:cover;
  object-position:50% 38%;
  aspect-ratio:4/3;
}

/* ═══════════ PHYSICAL FIT ═══════════ */
.fit__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-7);
  align-items:center;
}
@media (min-width:900px){
  .fit__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-8); }
}

.specs{ margin:var(--sp-7) 0 0; border-top:1px solid var(--mm-line-light); }
.spec{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-1);
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--mm-line-light);
}
@media (min-width:560px){
  .spec{ grid-template-columns:150px 1fr; gap:var(--sp-5); align-items:baseline; }
}
.spec dt{ color:var(--mm-accent-light); }
.spec dd{ margin:0; font-size:.9375rem; color:var(--mm-text-light); }

.fit__media{ margin:0; display:flex; justify-content:center; }
.fit__media img{
  width:100%;
  max-width:340px;
  height:auto;
  mix-blend-mode:multiply;
}

/* ═══════════ OPERATIONS / COMPLIANCE ═══════════ */
.ops-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--mm-line-dark);
}
@media (min-width:600px){ .ops-list{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-7); } }
@media (min-width:900px){ .ops-list{ grid-template-columns:repeat(3,1fr); } }
.ops-list li{
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--mm-line-dark);
  color:var(--mm-text-dark);
  font-size:.9375rem;
}

.compliance{
  margin-top:var(--sp-9);
  padding-top:var(--sp-7);
  border-top:1px solid var(--mm-line-dark);
}

/* ═══════════ FAQ ═══════════ */
.faq-list{ border-top:1px solid var(--mm-line-light); }
.faq{ border-bottom:1px solid var(--mm-line-light); }
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  min-height:56px;
  padding-block:var(--sp-5);
  cursor:pointer;
  list-style:none;
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.35;
}
@media (min-width:768px){ .faq summary{ font-size:1.1875rem; } }
.faq summary::-webkit-details-marker{ display:none; }
/* A 12px square rotated 45° occupies ~17px of bounding box, i.e. ~2.5px beyond
   each edge. Without the end margin that overhang pushes the summary's scroll
   width past its content box and clips the chevron at narrow widths. */
.faq summary::after{
  content:"";
  flex:0 0 auto;
  width:12px; height:12px;
  margin-inline-end:4px;
  margin-block-start:-4px;
  border-right:2px solid var(--mm-accent-light);
  border-bottom:2px solid var(--mm-accent-light);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.faq[open] summary::after{ transform:rotate(225deg); margin-block-start:4px; }
.faq__body{ padding-bottom:var(--sp-5); }
.faq__body p{ color:var(--mm-muted-light); max-width:72ch; }

/* ═══════════ CONSULTATION + FORM ═══════════ */
.consult__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  align-items:start;
}
@media (min-width:900px){
  .consult__grid{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--sp-9); }
}
.consult__fallback{
  margin-top:var(--sp-6);
  font-size:.9375rem;
  color:var(--mm-muted-dark);
}
.consult__fallback a{
  color:var(--mm-accent-dark);
  overflow-wrap:anywhere;      /* long address may wrap on narrow screens */
}

/* Footer contact — email and phone wrap naturally rather than forcing width */
.site-foot__contact a{ overflow-wrap:anywhere; }

/* Second heading inside the same footer column needs its own top space */
.site-foot__h--stacked{ margin-top:var(--sp-5); }

.consult__form{
  background:var(--mm-night-raised);
  border:1px solid var(--mm-line-dark);
  border-radius:var(--radius-card);
  padding:var(--sp-6);
}
@media (min-width:768px){ .consult__form{ padding:var(--sp-7); } }

.field{ display:grid; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.field label{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mm-muted-dark);
}
.field .req{ color:var(--mm-accent-dark); }
.field .opt{ text-transform:none; letter-spacing:0; opacity:.7; }

.field input,
.field select{
  width:100%;
  min-height:52px;
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-sans);
  font-size:1rem;
  color:var(--mm-text-dark);
  background:var(--mm-night);
  border:1px solid var(--mm-line-dark);
  border-radius:var(--radius-btn);
  transition:border-color .2s var(--ease);
}
.field input:hover,
.field select:hover{ border-color:var(--mm-muted-dark); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-color:var(--mm-error-dark); }

.field__err{
  color:var(--mm-error-dark);
  font-size:.8125rem;
  line-height:1.45;
}
.field__err[hidden]{ display:none; }

.form-error-summary{
  margin-bottom:var(--sp-5);
  padding:var(--sp-4);
  border:1px solid var(--mm-error-dark);
  border-radius:var(--radius-btn);
  color:var(--mm-error-dark);
  font-size:.9375rem;
}
.form-error-summary[hidden]{ display:none; }
.form-error-summary ul{ margin-top:var(--sp-2); list-style:disc; padding-left:var(--sp-5); }
.form-error-summary a{
  color:inherit;
  display:inline-flex;
  align-items:center;
  min-height:44px;           /* touch target */
}

.form-note{
  margin-top:var(--sp-4);
  font-size:.8125rem;
  color:var(--mm-muted-dark);
  line-height:1.55;
}
.form-note a{ color:var(--mm-accent-dark); }

/* Honeypot — visually gone, still reachable by bots, never by AT users */
.hp-field{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.form-success{
  background:var(--mm-night-raised);
  border:1px solid var(--mm-accent-dark);
  border-radius:var(--radius-card);
  padding:var(--sp-7);
}
.form-success[hidden]{ display:none; }
.form-success p{ margin-top:var(--sp-3); color:var(--mm-muted-dark); }

/* ═══════════ FOOTER ═══════════ */
.site-foot{
  background:var(--mm-night);
  color:var(--mm-text-dark);
  padding-top:var(--sp-9);
}
.site-foot__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-7);
  padding-bottom:var(--sp-8);
}
@media (min-width:768px){
  .site-foot__inner{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--sp-8); }
}
/* Footer carries the full lockup. Clear space = 9.2% of displayed width
   (brand guide §4). No filter — the transparent-light file is already the
   correct variant for a dark background. */
.site-foot__logo{
  width:180px;
  max-inline-size:100%;
  height:auto;
  margin-bottom:calc(180px * 0.092);
}
@media (min-width:768px){
  .site-foot__logo{ width:200px; margin-bottom:calc(200px * 0.092); }
}
.site-foot__brand .mono{ margin-top:var(--sp-4); color:var(--mm-muted-dark); }

.site-foot__nav{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
}
@media (min-width:560px){ .site-foot__nav{ grid-template-columns:repeat(3,1fr); } }
.site-foot__h{
  color:var(--mm-accent-dark);
  margin-bottom:var(--sp-3);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.14em;
}
.site-foot__nav ul{ display:flex; flex-direction:column; }
.site-foot__nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;            /* touch target */
  color:var(--mm-muted-dark);
  text-decoration:none;
  font-size:.9375rem;
  transition:color .2s var(--ease);
}
.site-foot__nav a:hover{ color:var(--mm-text-dark); }

.site-foot__bar{
  border-top:1px solid var(--mm-line-dark);
  padding-block:var(--sp-5) var(--sp-6);
}
.site-foot__bar .mono{ color:var(--mm-muted-dark); font-size:.625rem; }

/* ═══════════ STICKY MOBILE CTA ═══════════ */
.sticky-cta{
  position:fixed;
  left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3);
  z-index:90;
  display:none;
  align-items:center; justify-content:center;
  min-height:52px;
  padding:var(--sp-3) var(--sp-5);
  background:var(--mm-accent-light);
  color:var(--mm-white);
  border-radius:var(--radius-btn);
  font-weight:700;
  font-size:.9375rem;
  text-decoration:none;
  text-align:center;
  box-shadow:0 10px 30px -12px rgba(11,9,16,.7);
  transform:translateY(150%);
  transition:transform .3s var(--ease);
}
.sticky-cta.is-visible{ transform:none; }

@media (max-width:899px){
  .site-nav, .site-head__cta{ display:none; }
  .menu-btn{ display:inline-flex; }
  .sticky-cta{ display:inline-flex; }

  /* ── No-JS fallback ──────────────────────────────────────────
     The mobile menu panel can only be opened by JavaScript, so with
     JS off the toggle is hidden and the header CTA is shown in its
     place. No navigation is lost: every destination in the mobile
     menu also appears in the footer, which is always present. */
  html:not(.js) .menu-btn{ display:none; }
  html:not(.js) .site-head__cta{ display:inline-flex; margin-left:auto; }
  /* Keep the sticky bar from covering the footer / form controls */
  body.sticky-active .site-foot__bar{ padding-bottom:var(--sp-9); }
}

/* ═══════════ REVEAL (JS only — content is visible without JS) ═══ */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .sticky-cta{ transition:none; }
}

/* ═══════════ VENUE BENEFITS — editorial, not cards ═══════════
   Three columns separated by rules rather than three floating boxes, so this
   section reads differently from the assortment cards further down. */
.benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--mm-line-light);
}
@media (min-width:900px){
  .benefits{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-7);
    border-top:0;
  }
}
.benefit{
  min-width:0;
  padding-block:var(--sp-5);
  border-bottom:1px solid var(--mm-line-light);
}
@media (min-width:900px){
  .benefit{
    padding-block:var(--sp-5) 0;
    border-bottom:0;
    border-top:2px solid var(--mm-brand-purple);
  }
}
.benefit__n{ color:var(--mm-muted-light); margin-bottom:var(--sp-3); }
.benefit__title{
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  letter-spacing:-.02em;
  margin-bottom:var(--sp-3);
}
.benefit__body{ color:var(--mm-muted-light); font-size:.9375rem; }

/* ═══════════ OPERATIONS — one restrained brand device ═══════════ */
.compliance{
  border-top:0;
  border-left:2px solid var(--mm-brand-purple);
  padding-left:var(--sp-5);
  padding-top:0;
}
@media (min-width:768px){
  .compliance{ padding-left:var(--sp-6); }
}

/* ═══════════ WHAT HAPPENS NEXT ═══════════ */
.whatnext{
  margin-top:var(--sp-7);
  border-top:1px solid var(--mm-line-dark);
}
.whatnext li{
  display:flex;
  gap:var(--sp-4);
  align-items:baseline;
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--mm-line-dark);
  color:var(--mm-text-dark);
  font-size:.9375rem;
}
.whatnext__n{ color:var(--mm-accent-dark); flex:0 0 auto; }
.whatnext li > span:last-child{ min-width:0; }

/* ═══════════ OPTIONAL FORM FIELDS ═══════════ */
.optional-fields{
  border:1px solid var(--mm-line-dark);
  border-radius:var(--radius-btn);
  margin-bottom:var(--sp-5);
}
.optional-fields summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  min-height:52px;
  padding:var(--sp-3) var(--sp-4);
  cursor:pointer;
  list-style:none;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mm-muted-dark);
}
.optional-fields summary::-webkit-details-marker{ display:none; }
.optional-fields summary > span{ min-width:0; }
.optional-fields summary::after{
  content:"";
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid var(--mm-accent-dark);
  border-bottom:2px solid var(--mm-accent-dark);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.optional-fields[open] summary::after{ transform:rotate(225deg); }
.optional-fields__body{
  padding:var(--sp-2) var(--sp-4) var(--sp-1);
  border-top:1px solid var(--mm-line-dark);
}

/* ═══════════ OVERFLOW HARDENING ═══════════
   Root-cause protection rather than relying on overflow-x:hidden. Grid and
   flex children default to min-width:auto, which refuses to shrink below
   min-content and is the usual source of horizontal overflow on narrow
   screens. Everything below is defensive; none of it changes desktop layout. */
.hero__copy, .hero__media,
.consult__copy, .consult__form,
.fit__copy, .fit__media,
.card, .step, .benefit, .proof__item,
.ed-band__text, .ed-band__media,
.site-foot__brand, .site-foot__nav, .site-foot__nav div,
.faq summary > span,
.whatnext li > span{
  min-width:0;
}

.shell{ box-sizing:border-box; }

img, svg, video,
input, select, textarea, button,
.card, .step, .benefit,
details, .mobile-menu, .consult__form{
  max-inline-size:100%;
}

/* Long addresses and URLs must not set an unbreakable min-content width */
a[href^="mailto:"], .consult__fallback, .form-note, .site-foot__nav a{
  overflow-wrap:anywhere;
}

/* Button labels wrap instead of forcing an oversized min-content width */
.btn{ white-space:normal; }

/* ═══════════ PRINT ═══════════ */
@media print{
  .site-head,.mobile-menu,.sticky-cta{ display:none !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; color:#000; }
}