/* ==========================================================================
   PHENOM BRAZILIAN JIU-JITSU — Irvine, CA
   Design system: AGGRESSIVE ATHLETIC.
   Display: Anton (ultra-condensed, caps). Body/UI: Archivo (variable width).
   Palette unchanged: #161616 #1a1a1a #eceef3 #ffffff + antique brass accent.
   Motion: fast, kinetic, hard clip-path cuts.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Palette — unchanged */
  --ink:        #161616;
  --ink-2:      #1a1a1a;
  --ink-3:      #202020;
  --ink-4:      #2a2a2a;
  --bone:       #eceef3;
  --white:      #ffffff;

  /* Single accent — SILVER (replaced the antique brass).
     Variable names kept as --brass* so every rule downstream is unchanged;
     only the values moved. Light sections override these further down. */
  --brass:      #a8b0bb;  /* mid silver — 7:1 on #161616 */
  --brass-lo:   #767e8a;  /* steel, for quieter rules */
  --brass-hi:   #d5dae1;  /* bright silver highlight */

  /* Text colour for anything sitting ON an accent fill. Light bands darken the
     accent to steel, so this must flip to white there or the label goes
     illegible (ink on steel is only 2.4:1). Always use this, never --ink. */
  --on-accent:  var(--ink);

  /* Card surface. On dark bands the card is DARKER than the band so it reads as
     a recess rather than a raised grey panel; the border at 40% bone does the
     edge definition (3.46:1 against the fill, 3.24:1 against the band). */
  --card-bg:    linear-gradient(180deg, #131313 0%, #0b0b0b 100%);
  --card-bg-h:  linear-gradient(180deg, #1b1b1b 0%, #121212 100%);
  --card-bd:    rgba(236, 238, 243, 0.40);

  /* Form fields. Values chosen so the border clears 3:1 against BOTH the field
     fill and the band behind it (WCAG 1.4.11 non-text contrast). */
  --field-bg:   #262626;                    /* 1.20:1 vs band — reads as a well */
  --field-bg-f: #2e2e2e;                    /* focused */
  --field-bd:   rgba(236, 238, 243, 0.45);  /* 3.38:1 vs fill, 4.04:1 vs band */

  /* Semantic */
  --bg:          var(--ink);
  --bg-alt:      var(--ink-2);
  --fg:          var(--bone);
  --fg-quiet:    rgba(236, 238, 243, 0.60);
  /* Decoration only — see the note by .scrollcue. Anything carrying
     information must use --fg-quiet, which clears 4.5:1 on every band. */
  --fg-faint:    rgba(236, 238, 243, 0.36);
  --rule:        rgba(236, 238, 243, 0.12);
  --rule-strong: rgba(236, 238, 243, 0.30);

  /* Type */
  --display: "Anton", "Archivo Narrow", "Arial Narrow", Impact, sans-serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale — heavy and tight, dialed back one notch */
  --t-mega:  clamp(2.9rem, 10.5vw, 9.5rem);
  --t-h1:    clamp(2.4rem, 7vw, 6rem);
  --t-h2:    clamp(2.1rem, 5.2vw, 4.4rem);
  --t-h3:    clamp(1.45rem, 2.5vw, 2.15rem);
  --t-h4:    clamp(1.15rem, 1.6vw, 1.42rem);
  --t-lead:  clamp(1.04rem, 1.3vw, 1.26rem);
  --t-body:  clamp(0.96rem, 1.02vw, 1.03rem);
  --t-small: 0.83rem;
  --t-micro: 0.69rem;

  /* Space */
  --gut:     clamp(1.15rem, 4.5vw, 4rem);
  --sec-y:   clamp(4.5rem, 10vh, 9rem);
  --sec-y-s: clamp(3rem, 6.5vh, 5.5rem);
  --maxw:    1600px;
  --readw:   62ch;

  /* Motion — fast and kinetic */
  --ease:      cubic-bezier(0.3, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hard: cubic-bezier(0.85, 0, 0.15, 1);
  --slow:      0.42s;
  --med:       0.26s;
  --quick:     0.14s;
}

/* ---------------------------------------------------------- 2. RESET / BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--brass); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brass); color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.skip:focus { left: 1rem; top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------- 3. FILM GRAIN / TEXTURE */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- 4. TYPOGRAPHY */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 0.94; letter-spacing: -0.005em; }

h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-h4);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Outline treatment — replaces the old italic accent.
   One word per headline gets knocked out to a stroked outline. */
.ital, em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--brass);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) {
  .ital, em { color: var(--brass); }
}
h3 .ital, .rev .ital { -webkit-text-stroke-width: 1px; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--fg-quiet);
  max-width: 54ch;
}

.prose { max-width: var(--readw); }
.prose p + p { margin-top: 1.3em; }
.prose p { color: var(--fg-quiet); }
.prose strong { color: var(--fg); font-weight: 700; }

/* Eyebrow / kicker — now heavy and tight */
.kicker {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex; align-items: center; gap: 0.85rem;
}
.kicker::after {
  content: ""; flex: 1; height: 2px;
  background: var(--brass);
  max-width: 3.5rem;
}
.kicker--plain::after { display: none; }

/* Editorial section number — oversized athletic numeral */
.secnum {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--brass);
  line-height: 1;
  display: inline-block;
}

/* ------------------------------------------------------------- 5. LAYOUT */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 1120px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: var(--sec-y-s); }
.section--ruled { border-top: 2px solid var(--rule-strong); }

/* ---------------------------------------------------------------------------
   DARK BAND ATMOSPHERE
   The same treatment the home hero panel uses, applied to every black band on
   every page: grid hairlines, a silver bloom, and a diagonal near-black ramp.
   Done entirely with stacked background layers rather than pseudo-elements, so
   there is nothing extra in the DOM and no stacking-context risk.
   Excludes .cta (its own photograph sits behind it) and photo-backed heroes.
   --------------------------------------------------------------------------- */
.section:not(.section--alt):not(.cta),
.phero:not(.phero--media) {
  background:
    repeating-linear-gradient(90deg,
      rgba(236, 238, 243, 0.032) 0 1px, transparent 1px 8.5vw),
    radial-gradient(120% 85% at 12% 6%, rgba(168, 176, 187, 0.075), transparent 56%),
    linear-gradient(160deg, #1e1e1e 0%, var(--ink) 46%, #101010 100%);
}
/* Alternate the bloom corner so consecutive black bands don't look identical */
.section:not(.section--alt):not(.cta):nth-of-type(even) {
  background:
    repeating-linear-gradient(90deg,
      rgba(236, 238, 243, 0.032) 0 1px, transparent 1px 8.5vw),
    radial-gradient(120% 85% at 88% 10%, rgba(168, 176, 187, 0.075), transparent 56%),
    linear-gradient(200deg, #1e1e1e 0%, var(--ink) 46%, #101010 100%);
}

/* ---------------------------------------------------------------------------
   LIGHT SECTION — the white band in the black / white / black / white rhythm.
   Works by re-declaring the theme custom properties at section scope, so every
   descendant component inverts automatically instead of needing its own rule.
   --------------------------------------------------------------------------- */
.section--alt {
  --fg:          var(--ink);
  --fg-quiet:    rgba(22, 22, 22, 0.68);
  --fg-faint:    rgba(22, 22, 22, 0.46);
  --rule:        rgba(22, 22, 22, 0.14);
  --rule-strong: rgba(22, 22, 22, 0.34);
  --bg-alt:      var(--white);   /* cards sit white on the bone ground */
  /* Accent darkens to steel so it stays legible on a light ground */
  --brass:       #4f555e;
  --brass-lo:    #3a3f47;
  --brass-hi:    #2b2f35;
  /* …and anything sitting on that steel fill must go white, not ink */
  --on-accent:   var(--white);
  --field-bg:    var(--white);
  --field-bg-f:  var(--white);
  --field-bd:    rgba(22, 22, 22, 0.50);    /* 3.85:1 vs fill, 3.31:1 vs band */
  /* Cards go white-on-bone here — the raised reading is correct on a light band */
  --card-bg:     var(--white);
  --card-bg-h:   var(--white);
  --card-bd:     rgba(22, 22, 22, 0.50);   /* 3.85:1 vs white card */

  background: var(--bone);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.section--alt ::selection { background: var(--ink); color: var(--bone); }

/* Component fixes that can't come from tokens alone */
.section--alt .prog__media::after {
  background: linear-gradient(to top, rgba(255,255,255,0.96), transparent 58%);
}
.section--alt .prog:hover,
.section--alt .tile:hover,
.section--alt .rev:hover,
.section--alt .stats > div:hover { background: var(--white); }
.section--alt .btn--solid::before { background: var(--ink); }
.section--alt .btn--solid:hover { color: var(--white); border-color: var(--ink); }
.section--alt .btn:hover,
.section--alt .btn:focus-visible { color: var(--white); }
.section--alt .faq__i.is-open { background: rgba(22, 22, 22, 0.035); }
.section--alt .sched tbody tr:hover { background: rgba(22, 22, 22, 0.035); }
.section--alt .field select option { background: var(--white); color: var(--ink); }
.section--alt .ital { -webkit-text-stroke-color: var(--brass); }
@supports not (-webkit-text-stroke: 1px black) {
  .section--alt .ital { color: var(--brass); }
}
/* Map is designed inverted for dark grounds — undo that on white */
.section--alt .map iframe { filter: grayscale(1) contrast(1.05); }
.section--alt .map:hover iframe { filter: grayscale(0.2) contrast(1); }
/* Photography can carry a little more light here */
.section--alt .fig img,
.section--alt .gal__i img { filter: saturate(0.6) contrast(1.1) brightness(1); }
/* Grain overlay would muddy a white panel */
.section--alt { isolation: isolate; }

.sechead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2.25rem, 4.5vw, 4rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule);
}
.sechead__num {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.8;
  color: var(--brass);
}
.sechead__body { max-width: 48ch; }
.sechead__body h2 { margin-bottom: 1.15rem; }
@media (max-width: 640px) {
  .sechead { grid-template-columns: 1fr; gap: 0.6rem; }
}

.grid { display: grid; gap: clamp(1.15rem, 2.2vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.split--offset { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 900px) {
  .split, .split--offset { grid-template-columns: 1fr; gap: 2.25rem; }
}

.rule { height: 2px; background: var(--rule-strong); border: 0; }

/* ------------------------------------------------------------ 6. BUTTONS */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 2rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--rule-strong);
  color: var(--fg);
  overflow: hidden;
  transition: color var(--med) var(--ease-hard), border-color var(--med) var(--ease);
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brass);
  transform: translateX(-101%);
  transition: transform var(--med) var(--ease-hard);
  z-index: -1;
}
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--brass); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn__arw { transition: transform var(--med) var(--ease-hard); }
.btn:hover .btn__arw { transform: translate(5px, -5px); }

.btn--solid { background: var(--brass); border-color: var(--brass); color: var(--on-accent); }
.btn--solid::before { background: var(--bone); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--ink); border-color: var(--bone); }

.btn--ghost { border-color: var(--rule); }
.btn--sm { padding: 0.75rem 1.35rem; font-size: var(--t-micro); }

/* Primary action lifted off the page — the drop shadow and the hover rise are
   what carry the weight now that it no longer sits inside a panel. */
.btn--pop {
  padding: 1.2rem 2.3rem;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  transition: transform var(--quick) var(--ease-hard),
              box-shadow var(--quick) var(--ease-hard),
              color var(--med) var(--ease-hard),
              border-color var(--med) var(--ease-hard);
}
.btn--pop:hover, .btn--pop:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.62);
}
@media (prefers-reduced-motion: reduce) {
  .btn--pop, .btn--pop:hover, .btn--pop:focus-visible { transform: none; }
}

/* Text link with hard wipe underline */
.tlink {
  position: relative;
  display: inline-block;
  font-size: var(--t-small);
  font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 0.3rem;
}
.tlink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------- 7. HEADER */
.hdr {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease),
              backdrop-filter var(--med) var(--ease), padding var(--med) var(--ease);
  border-bottom: 2px solid transparent;
  padding-block: 1rem;
  isolation: isolate;
}
/* Scrim: guarantees the nav is readable over hero photography before the
   header goes solid on scroll. Fades out once .is-stuck takes over. */
.hdr::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(22, 22, 22, 0.94) 0%,
    rgba(22, 22, 22, 0.78) 55%,
    rgba(22, 22, 22, 0) 100%);
  transition: opacity var(--med) var(--ease);
}
.hdr.is-stuck::before { opacity: 0; }
.hdr.is-stuck {
  background: rgba(22, 22, 22, 0.96);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--brass);
  padding-block: 0.55rem;
}
.hdr__in {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.75rem;
}
/* Logo only — no wordmark. Sized up and lifted off the photography
   with a soft shadow ring so the crest stays readable over any hero. */
.hdr__brand { display: flex; align-items: center; flex-shrink: 0; line-height: 0; }
.hdr__brand img {
  width: clamp(54px, 5vw, 72px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 22px rgba(0, 0, 0, 0.5));
  transition: transform var(--med) var(--ease-hard), width var(--med) var(--ease);
}
.hdr__brand:hover img { transform: rotate(-8deg) scale(1.06); }
.hdr.is-stuck .hdr__brand img { width: clamp(44px, 3.6vw, 52px); }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.9rem); }
.nav__a {
  position: relative;
  font-size: 0.82rem; font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* Near-full opacity, not the muted body grey — this sits over photography */
  color: rgba(236, 238, 243, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  padding-block: 0.4rem;
  transition: color var(--quick) var(--ease);
  white-space: nowrap;
}
.hdr.is-stuck .nav__a { text-shadow: none; }
.nav__a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
.nav__a:hover, .nav__a:focus-visible { color: var(--white); }
/* Current page is silver + permanently underlined so location is obvious */
.nav__a[aria-current="page"] { color: var(--brass-hi); }
.nav__a:hover::after, .nav__a:focus-visible::after, .nav__a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   DESKTOP DROPDOWN
   The outer .nav__drop is a transparent hover bridge — it starts flush at
   top:100% and carries the gap as padding, so moving the pointer from the nav
   link down to the panel never crosses dead space and closes the menu. The
   visible panel is the inner <ul>.
   --------------------------------------------------------------------------- */
.nav__item { position: relative; }
/* Caret on the parent link, flipped while the menu is open */
.nav__item > .nav__a {
  padding-right: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none' stroke='%23a8b0bb' stroke-width='1.8'%3E%3Cpath d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  transition: color var(--quick) var(--ease), background-position var(--quick) var(--ease);
}
.nav__item:hover > .nav__a,
.nav__item:focus-within > .nav__a { background-position: right 55%; }

.nav__drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 268px;
  padding-top: 0.85rem;            /* the bridge */
  background: none; border: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--quick) var(--ease), visibility var(--med);
}
.nav__drop > ul {
  position: relative;
  background: var(--ink-2);
  border: 2px solid var(--rule-strong);
  border-top: 3px solid var(--brass);
  padding: 0.3rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--med) var(--ease-hard);
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav__item:hover .nav__drop > ul,
.nav__item:focus-within .nav__drop > ul { clip-path: inset(0 0 0 0); }

.nav__drop a,
.nav__drop button {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 1rem;
  min-height: 44px;
  font-size: 0.78rem; font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg);
  transition: color var(--quick) var(--ease), background var(--quick) var(--ease),
              padding-left var(--quick) var(--ease-hard);
}
/* Auto-numbered so the three programs read as a set */
.nav__drop > ul > li { counter-increment: navdrop; }
.nav__drop > ul { counter-reset: navdrop; }
.nav__drop > ul > li:not(:last-child) a::before {
  content: "0" counter(navdrop);
  font-family: var(--display); font-size: 0.85rem;
  color: var(--brass);
  transition: color var(--quick) var(--ease);
}
.nav__drop a:hover, .nav__drop a:focus-visible,
.nav__drop button:hover, .nav__drop button:focus-visible {
  color: var(--on-accent); background: var(--brass); padding-left: 1.3rem;
}
.nav__drop a:hover::before, .nav__drop a:focus-visible::before { color: var(--on-accent); }
/* Book Free Trial is an action, not a destination — separate it */
.nav__drop > ul > li:last-child { margin-top: 0.3rem; border-top: 2px solid var(--rule); }
.nav__drop > ul > li:last-child a,
.nav__drop > ul > li:last-child button { color: var(--brass); }
.nav__drop > ul > li:last-child a:hover,
.nav__drop > ul > li:last-child button:hover { color: var(--on-accent); }

.hdr__aside { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.hdr__tel {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em;
  color: rgba(236, 238, 243, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: color var(--quick) var(--ease);
  white-space: nowrap;
}
.hdr.is-stuck .hdr__tel { text-shadow: none; }
.hdr__tel:hover { color: var(--brass-hi); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative; z-index: 810;
  flex-shrink: 0;
}
.burger span {
  position: absolute; left: 10px; width: 24px; height: 3px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: transform var(--med) var(--ease-hard), opacity var(--quick) var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Switch to the drawer before the six nav items start crowding the logo,
   the phone number and the CTA button. */
@media (max-width: 1260px) {
  .nav, .hdr__tel { display: none; }
  .burger { display: block; }
}
@media (max-width: 520px) {
  .hdr__aside .btn { display: none; }
}

/* Mobile drawer — hard diagonal wipe */
.mnav {
  position: fixed; inset: 0; z-index: 805;
  /* Three explicit rows — back button, links, footer. The links were centred in
     a flex column before, which let a tall list slide underneath an absolutely
     positioned back button. Giving the button its own row makes overlap
     structurally impossible at any viewport height. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(1rem, 3vh, 2rem);
  padding: 1.35rem var(--gut) 2.25rem;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.42s var(--ease-hard);
  overflow-y: auto;
  /* Same atmosphere as the dark bands: grid hairlines, bloom, diagonal ramp */
  background:
    repeating-linear-gradient(90deg,
      rgba(236, 238, 243, 0.032) 0 1px, transparent 1px 22vw),
    radial-gradient(120% 70% at 88% 4%, rgba(168, 176, 187, 0.10), transparent 58%),
    linear-gradient(165deg, #1e1e1e 0%, var(--ink) 44%, #0e0e0e 100%);
}
body.nav-open .mnav { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ---------------------------------------------------------------------------
   MOBILE NAV BACKGROUND ELEMENTS  (decorative, aria-hidden, non-interactive)
   Crest watermark, ghost wordmark, vertical edge label and a corner glow —
   the drawer's own version of the hero panel treatment.
   --------------------------------------------------------------------------- */
.mnav__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Reuses the existing logo file — no new asset weight */
.mnav__crest {
  position: absolute;
  right: -14%; top: 8%;
  width: min(72vw, 30rem);
  height: auto;
  opacity: 0.055;
  filter: grayscale(1) contrast(1.2);
  transform: rotate(-8deg);
}
.mnav__ghost {
  position: absolute;
  left: -0.06em; bottom: -0.28em;
  font-family: var(--display);
  font-size: clamp(6rem, 34vw, 16rem);
  line-height: 0.75;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: rgba(236, 238, 243, 0.028);
  -webkit-text-stroke: 2px rgba(168, 176, 187, 0.085);
}
@supports not (-webkit-text-stroke: 1px black) {
  .mnav__ghost { color: rgba(168, 176, 187, 0.07); }
}
.mnav__vert {
  position: absolute;
  right: 0.4rem; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(168, 176, 187, 0.34);
  white-space: nowrap;
}
.mnav__glow {
  position: absolute;
  left: -25%; bottom: -30%;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 176, 187, 0.13), transparent 66%);
  filter: blur(14px);
}
/* Back button — first grid row, top-left where the logo would be. In flow, so
   the link list can never slide under it. */
.mnav__back {
  position: relative; z-index: 2;
  grid-row: 1;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 48px;                 /* comfortable tap target */
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  border: 2px solid var(--rule-strong);
  color: var(--fg);
  font-size: 0.76rem; font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease),
              border-color var(--quick) var(--ease);
}
.mnav__back svg {
  width: 17px; height: 17px; flex-shrink: 0;
  transition: transform var(--quick) var(--ease-hard);
}
.mnav__back:hover, .mnav__back:focus-visible {
  background: var(--brass); color: var(--on-accent); border-color: var(--brass);
}
.mnav__back:hover svg, .mnav__back:focus-visible svg { transform: translateX(-4px); }
/* Reveal it with the same stagger as the links */
.mnav__back { opacity: 0; transform: translateX(-14px); transition-property: opacity, transform, background, color, border-color; }
body.nav-open .mnav__back { opacity: 1; transform: none; transition-delay: 0.08s; }

/* Content above the decoration; links centred within their own row */
.mnav__list, .mnav__foot { position: relative; z-index: 1; }
.mnav__list { grid-row: 2; align-self: center; width: 100%; }
.mnav__foot { grid-row: 3; margin-top: 0; }
/* Tight viewports: drop the crest and vertical label so nothing crowds the links */
@media (max-height: 620px) {
  .mnav__crest, .mnav__vert { display: none; }
}
.mnav__list { display: flex; flex-direction: column; gap: 0; }
.mnav__list > li {
  opacity: 0; transform: translateX(-24px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease-hard);
  border-bottom: 2px solid var(--rule);
}
body.nav-open .mnav__list > li { opacity: 1; transform: none; }
body.nav-open .mnav__list > li:nth-child(1) { transition-delay: 0.10s; }
body.nav-open .mnav__list > li:nth-child(2) { transition-delay: 0.14s; }
body.nav-open .mnav__list > li:nth-child(3) { transition-delay: 0.18s; }
body.nav-open .mnav__list > li:nth-child(4) { transition-delay: 0.22s; }
body.nav-open .mnav__list > li:nth-child(5) { transition-delay: 0.26s; }
body.nav-open .mnav__list > li:nth-child(6) { transition-delay: 0.30s; }
body.nav-open .mnav__list > li:nth-child(7) { transition-delay: 0.34s; }
body.nav-open .mnav__list > li:nth-child(8) { transition-delay: 0.38s; }
.mnav__a {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--display); font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.95;
  padding-block: 0.55rem;
  transition: color var(--quick) var(--ease), padding-left var(--med) var(--ease-hard);
}
.mnav__a:hover { color: var(--brass); padding-left: 0.75rem; }
.mnav__a i {
  font-family: var(--sans); font-style: normal; font-weight: 800;
  font-size: 0.6rem; letter-spacing: 0.16em; color: var(--brass);
}
/* Classes group: label links to the hub, chevron button expands the programs.
   Collapsed by default, which also keeps the drawer list short. */
.mnav__row { display: flex; align-items: center; gap: 0.75rem; }
.mnav__row .mnav__a { flex: 1 1 auto; }
.mnav__toggle {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 2px solid var(--rule-strong);
  color: var(--fg);
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease),
              border-color var(--quick) var(--ease);
}
.mnav__toggle svg {
  width: 20px; height: 20px;
  transition: transform var(--med) var(--ease-hard);
}
.mnav__toggle:hover, .mnav__toggle:focus-visible {
  background: var(--brass); color: var(--on-accent); border-color: var(--brass);
}
.mnav__item.is-open .mnav__toggle { background: var(--brass); color: var(--on-accent); border-color: var(--brass); }
.mnav__item.is-open .mnav__toggle svg { transform: rotate(180deg); }

/* Height animation via grid-template-rows — works without a fixed max-height */
.mnav__subwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--med) var(--ease-hard);
}
.mnav__item.is-open .mnav__subwrap { grid-template-rows: 1fr; }
.mnav__subwrap > .mnav__sub { overflow: hidden; }

/* Programs sub-menu: numbered rows on a silver rail rather than small grey
   text. Each row clears the 44px tap-target minimum — the old 0.8rem links
   were roughly 19px tall. */
.mnav__sub {
  display: flex; flex-direction: column;
  margin: 0.2rem 0 1rem 0.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--brass-lo);
  counter-reset: msub;
}
.mnav__sub a {
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 46px;
  padding: 0.5rem 0.4rem 0.5rem 0;
  font-size: 0.92rem; font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 2px solid var(--rule);
  transition: color var(--quick) var(--ease), padding-left var(--quick) var(--ease-hard);
}
.mnav__sub a:last-child { border-bottom: 0; }
.mnav__sub a::before {
  counter-increment: msub;
  content: "0" counter(msub);
  font-family: var(--display); font-size: 0.95rem;
  color: var(--brass);
  flex-shrink: 0;
}
.mnav__sub a::after {
  content: "";
  width: 16px; height: 2px; margin-left: auto;
  background: var(--brass);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--quick) var(--ease-hard);
}
.mnav__sub a:hover, .mnav__sub a:focus-visible { color: var(--brass); padding-left: 0.4rem; }
.mnav__sub a:hover::after, .mnav__sub a:focus-visible::after { transform: scaleX(1); }
.mnav__foot { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* ---------------------------------------------------------------------------
   MOBILE ACTION BAR
   Fixed to the bottom of the viewport below 900px so Call and Book sit in the
   thumb zone on every page — no menu tap required. Uses env(safe-area-inset)
   so it clears the iPhone home indicator, and the body gets matching bottom
   padding so the footer can still be scrolled clear of it.
   --------------------------------------------------------------------------- */
.mbar { display: none; }

@media (max-width: 900px) {
  .mbar {
    display: grid;
    grid-template-columns: auto 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 790;
    background: rgba(22, 22, 22, 0.97);
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 3px solid var(--brass);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mbar__a {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 60px;                      /* comfortable tap target */
    padding: 0.85rem 1.1rem;
    font-size: 0.82rem; font-weight: 800;
    font-variation-settings: "wdth" 90;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--bone);
    transition: background var(--quick) var(--ease), color var(--quick) var(--ease);
  }
  .mbar__a svg { width: 19px; height: 19px; flex-shrink: 0; }
  /* Call: quieter, icon-led, sized to its content */
  .mbar__a:not(.mbar__a--go) {
    border-right: 2px solid var(--rule);
    padding-inline: clamp(1.1rem, 5vw, 1.75rem);
  }
  .mbar__a:not(.mbar__a--go):active { background: var(--ink-3); }
  /* Book: the primary action, filled accent, takes the remaining width */
  .mbar__a--go {
    background: var(--brass);
    color: var(--on-accent);
  }
  .mbar__a--go:active { background: var(--brass-hi); }
  .mbar__a--go svg { transition: transform var(--quick) var(--ease-hard); }
  .mbar__a--go:active svg { transform: translate(3px, -3px); }

  /* Keep the bar from covering the end of the page */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* …and out of the way while the full-screen menu is open */
  body.nav-open .mbar { display: none; }
}

/* ------------------------------------------------------------- 8. HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

@keyframes kenburns {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.24) translate3d(-2%, -2.5%, 0); }
}

.hero__in {
  position: relative;
  width: 100%;
  /* Extra top padding guarantees hero copy never tucks under the fixed
     header on short or landscape-phone viewports. */
  padding-top: clamp(7.5rem, 15vh, 9rem);
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
}
.hero h1 {
  font-size: var(--t-mega);
  line-height: 0.8;
  letter-spacing: -0.025em;
  max-width: 17ch;
  margin-left: -0.035em; /* optical alignment for condensed caps */
}
.hero h1 .ital { -webkit-text-stroke-width: 2.5px; }
.hero__sub {
  margin-top: clamp(1.4rem, 2.5vw, 2.1rem);
  max-width: 48ch;
  font-size: var(--t-lead);
  color: rgba(236, 238, 243, 0.74);
  line-height: 1.6;
  border-left: 3px solid var(--brass);
  padding-left: 1.25rem;
}
.hero__cta { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Hero meta strip */
.hero__meta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--rule-strong);
  display: flex; flex-wrap: wrap; gap: 1.35rem clamp(1.75rem, 4.5vw, 4rem);
}
.hero__meta div { display: flex; flex-direction: column; gap: 0.35rem; }
.hero__meta dt, .hero__meta b {
  font-size: var(--t-micro); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}
.hero__meta dd, .hero__meta span {
  font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.002em; line-height: 0.95;
}

/* ---------------------------------------------------------------------------
   TYPE HERO (home page)

   The headline IS the composition. Three lines at wildly different scales
   create a jagged descending rhythm: a quiet "Welcome to", then PHENOM at
   display scale filled with a photograph of the academy wall, then JIU JITSU.
   as an outline knockout. Under it a staggered three-image band, with the copy
   card overlapping it from the left so the two layers interlock rather than
   stack.

   The fill photograph (images/hero-typefill.jpg) is pre-processed to a bright
   silver duotone with the black point lifted to 0.66, so every pixel inside
   the letterforms clears 4.5:1 against the near-black background — measured
   minimum 5.03:1. A raw photo would have left dark passages where the letters
   simply vanished.
   --------------------------------------------------------------------------- */
.hero--type {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: var(--ink);
}
.hero--type .hero__in {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(6.75rem, 13vh, 8.25rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* Decorative blooms — the only soft shapes in an otherwise hard layout */
.hero__atmos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero__bloom {
  position: absolute;
  width: min(70vw, 46rem); aspect-ratio: 1; border-radius: 50%;
  left: -12%; top: -18%;
  background: radial-gradient(circle, rgba(168, 176, 187, 0.16), transparent 62%);
  filter: blur(30px);
  animation: bloomdrift 14s var(--ease) infinite alternate;
}
.hero__bloom--b {
  left: auto; right: -16%; top: auto; bottom: -22%;
  width: min(80vw, 54rem);
  background: radial-gradient(circle, rgba(168, 176, 187, 0.11), transparent 65%);
  animation-duration: 19s; animation-direction: alternate-reverse;
}
@keyframes bloomdrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* Top meta strip. The base .hero__meta is a bottom strip on the Muay Thai
   page, so this flips it to a top strip without touching that page. */
.hero--type .hero__meta {
  position: relative;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: clamp(0.9rem, 1.8vw, 1.35rem);
  border-top: 0;
  border-bottom: 2px solid var(--rule-strong);
  align-items: center;
  justify-content: space-between;
}
.hero__meta-r {
  font-size: var(--t-micro); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-quiet);
  margin: 0;
}
@media (max-width: 700px) { .hero__meta-r { display: none; } }

/* ---- The headline ---- */
.hero--type h1 {
  position: relative;
  margin: clamp(1rem, 2.4vw, 2.25rem) 0 0;
  max-width: none;
  letter-spacing: -0.03em;
  /* 0.78 was tighter than Anton's ink height at display scale, so JIU JITSU.
     rode up into PHENOM's baseline. 0.86 plus the explicit gap below keeps the
     stack tight without letting the lines touch. */
  line-height: 0.86;
}
.hero__ln { display: block; }

.hero__ln--a {
  font-family: var(--sans);
  font-size: clamp(0.78rem, 1.4vw, 1.05rem);
  font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--brass);
  margin-bottom: clamp(0.6rem, 1.3vw, 1rem);
}
.hero__ln--b { font-size: clamp(3.2rem, 14.5vw, 13rem); white-space: nowrap; }
.hero__ln--c {
  font-size: clamp(2.2rem, 9.2vw, 8.5rem);
  white-space: nowrap;
  margin-top: clamp(0.2rem, 0.7vw, 0.65rem);
  margin-left: clamp(0.5rem, 7vw, 7rem);   /* the indent that makes it jagged */
}
.hero--type h1 .ital { -webkit-text-stroke-width: clamp(2px, 0.35vw, 4px); }

/* Photograph inside the letterforms. Applied only where the browser supports
   it, so the default stays a solid, readable fill. */
.hero__fill { color: var(--fg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__fill {
    background-image: url("../images/hero-typefill.jpg");
    background-size: cover;
    background-position: 50% 42%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---- Head: type column beside the photo collage ----
   The right third used to carry a rating / bullets / phone stack, which boxed
   the copy into a floating card over the photographs. The photographs now own
   that column outright, so the headline, the lede and the primary button read
   as one uninterrupted column down the left.
   ---------------------------------------------------------------------- */
.hero__head { position: relative; }

@media (min-width: 1000px) {
  .hero__head {
    display: grid;
    /* The collage column is capped in rem, so past ~1600px it stops growing and
       the type column absorbs the remainder — which is what keeps the channel
       between headline and photographs even at every width. */
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 38vw, 38rem);
    gap: clamp(1.75rem, 3.6vw, 3.75rem);
    align-items: stretch;
    /* Past ~1200px the type hits its rem ceiling and stops growing, so slack
       opens up inside the rule above. This inset splits that slack evenly
       between the two ends, centring the whole block under that rule instead
       of pinning it left and letting the hole fall in the middle. */
    padding-inline: clamp(0px, calc(16.25vw - 195px), 4rem);
  }
  /* Sizing the display type against its own column rather than the viewport is
     what keeps PHENOM from running under the photographs at awkward widths. */
  .hero__type { container-type: inline-size; }
  .hero__ln--b { font-size: min(12.5rem, 13.2vw); }
  .hero__ln--c { font-size: min(8rem, 8.4vw); }
}
@supports (container-type: inline-size) {
  @media (min-width: 1000px) {
    .hero__ln--b { font-size: min(12.5rem, 30cqi); }
    .hero__ln--c { font-size: min(8rem, 19cqi); }
  }
}

/* Lede and buttons, now free-standing under the headline */
.hero--type .hero__sub {
  margin-top: clamp(1.35rem, 2.5vw, 2rem);
  max-width: 46ch;
}
.hero--type .hero__cta { margin-top: clamp(1.5rem, 2.8vw, 2.35rem); }

/* ---- The collage ----
   A wide adult frame across the top, level with the headline, and the two
   programme frames beneath it. Muay Thai rides a little low so the block ends
   on a ragged edge instead of a ruled one. */
.hero__collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.45rem, 1.1vw, 0.9rem);
}
@media (min-width: 1000px) {
  .hero__collage {
    grid-template-rows: minmax(0, 1.16fr) minmax(0, 0.84fr);
    /* Matches the h1's own top margin so the adult frame starts level with
       WELCOME TO rather than floating above it */
    margin-top: clamp(1rem, 2.4vw, 2.25rem);
    min-height: clamp(18rem, 38vh, 26rem);
  }
  /* Taking the images out of flow stops their intrinsic heights from setting
     the row: the collage then matches the type column and the hero still
     clears the fold on a laptop. */
  .hero__collage .hero__f img { position: absolute; inset: 0; }
  .hero__f--lead { grid-column: 1 / -1;  grid-row: 1; }
  .hero__f--kids { grid-column: 1 / 7;   grid-row: 2; }
  .hero__f--mt   { grid-column: 7 / -1;  grid-row: 2; }
  /* Offset, not margin, so the drop hangs past the grid instead of shortening
     the frame — and not transform, which the reveal animation owns. */
  .hero__f--mt { top: clamp(0.5rem, 1.4vw, 1.25rem); }
}
@media (max-width: 999px) {
  .hero__collage { margin-top: clamp(1.6rem, 3.5vw, 2.5rem); }
  .hero__f--lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .hero__f--kids { grid-column: 1 / 7;  aspect-ratio: 4 / 3; }
  .hero__f--mt   { grid-column: 7 / -1; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .hero__f--lead { aspect-ratio: 3 / 2; }
  .hero__f--kids, .hero__f--mt { aspect-ratio: 1 / 1; }
}

.hero__f {
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--ink-2);
}
.hero__f img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
/* Each source frames its subject differently — nudge the crops rather than
   letting object-fit centre-cut heads and feet. */
.hero__f--lead img { object-position: 50% 40%; }
.hero__f--kids img { object-position: 50% 46%; }
.hero__f--mt img   { object-position: 58% 50%; }
.hero__f:hover img { transform: scale(1.045); }

.hero__f figcaption {
  position: absolute; left: 0; top: 0;
  padding: 0.5rem 0.8rem;
  background: var(--ink);
  color: var(--brass);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* The cue sits out in the gutter so it never lands on the collage */
.hero--type .scrollcue { right: 0; }
@media (max-width: 900px) { .hero--type /* The only legitimate --fg-faint user: aria-hidden decoration, no information */
.scrollcue { display: none; } }
@media (max-width: 560px) {
  .hero__ln--b, .hero__ln--c { white-space: normal; }
  .hero__ln--c { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__f img, .hero__f:hover img { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bloom { animation: none; }
}

/* Knocked-out and photo-filled type both need a solid fill on paper */
@media print {
  .hero__fill {
    background-image: none;
    color: #000;
    -webkit-text-fill-color: #000;
  }
  .hero__atmos, .hero__f figcaption { display: none; }
}

/* Just enough gradient at the edges to seat the photo against the black */

/* Bottom rail replaces the old inline meta strip */
.hero__rail {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--brass);
}
.hero__rail > div {
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: background var(--quick) var(--ease);
}
.hero__rail > div:first-child { border-left: 0; }
.hero__rail > div:hover { background: var(--ink-2); }
.hero__rail dt {
  font-size: var(--t-micro); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}
.hero__rail dd {
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.45rem);
  text-transform: uppercase; line-height: 0.95; letter-spacing: 0.002em;
}

@media (max-width: 1000px) {

  /* Photo leads on narrow screens; DOM order keeps the H1 first for crawlers */

}
@media (max-width: 760px) {
  .hero__rail { grid-template-columns: 1fr 1fr; }
  .hero__rail > div:nth-child(3) { border-left: 0; }
  .hero__rail > div:nth-child(n+3) { border-top: 2px solid var(--rule); }
}
/* Cue now lives inside the photo panel, so it needs its own offsets */

/* Scroll cue */
.scrollcue {
  position: absolute; right: var(--gut); bottom: clamp(2rem, 5vh, 3.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
  writing-mode: vertical-rl;
}
.scrollcue::after {
  content: ""; width: 2px; height: 52px;
  background: var(--brass);
  animation: cue 1.3s var(--ease-hard) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; transform-origin: top; }
  50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}
@media (max-width: 900px) { .scrollcue { display: none; } }

/* Page hero (interior) */
.phero {
  position: relative;
  padding-top: clamp(8.5rem, 17vh, 13rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero--media { padding-top: clamp(10.5rem, 24vh, 16rem); padding-bottom: clamp(4.5rem, 11vh, 8rem); }
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.35) brightness(0.5) contrast(1.2);
  transform: scale(1.05);
  animation: kenburns 24s var(--ease) infinite alternate;
}
.phero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(22,22,22,0.85) 45%, rgba(22,22,22,0.6) 100%);
}
.phero h1 { max-width: 21ch; margin-top: 1.1rem; margin-left: -0.03em; }
.phero .lead { margin-top: 1.5rem; border-left: 3px solid var(--brass); padding-left: 1.15rem; }

/* ---------------------------------------------------------------------------
   MUAY THAI PAGE HERO
   Full-bleed ring photograph with a fight-poster stack: crumbs, kicker, three
   stacked lines, lead, actions — then a four-cell credentials rail flush to the
   bottom edge. The rail answers "who teaches this and at what level" before you
   scroll, which the previous version left to the body copy.
   --------------------------------------------------------------------------- */
.phero--mt {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;                  /* the rail sits flush */
  overflow: hidden;
}
.phero--mt .phero__in { padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.phero--mt h1 {
  font-size: clamp(2.9rem, 9vw, 8rem);
  line-height: 0.82;
  max-width: none;
  margin-left: -0.03em;
}
.phero--mt .lead { max-width: 52ch; }

/* Heavier gradient from the left so the stack sits on darkness regardless of
   where the fighter lands in the crop */
.phero--mt .phero__media::after {
  background:
    linear-gradient(to right, rgba(22,22,22,0.94) 0%, rgba(22,22,22,0.72) 42%, rgba(22,22,22,0.42) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(22,22,22,0.55) 38%, transparent 75%);
}
.phero--mt .phero__media img { object-position: center 30%; }

/* Oversized ghost word down the right edge */
.phero__ghost {
  position: absolute;
  right: -0.06em; top: 46%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.75;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(168, 176, 187, 0.11);
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .phero__ghost { color: rgba(168, 176, 187, 0.08); }
}
@media (max-width: 900px) { .phero__ghost { display: none; } }

/* Credentials rail, flush to the bottom of the hero */
.phero__rail {
  position: relative;
  z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--brass);
  background: rgba(22, 22, 22, 0.72);
  backdrop-filter: blur(6px);
}
.phero__rail > div {
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2.2vw, 1.9rem);
  border-left: 2px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.phero__rail > div:first-child { border-left: 0; padding-left: var(--gut); }
.phero__rail > div:last-child { padding-right: var(--gut); }
.phero__rail dt {
  font-size: var(--t-micro); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}
.phero__rail dd {
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.4rem);
  text-transform: uppercase; line-height: 0.98; letter-spacing: 0.002em;
}
@media (max-width: 760px) {
  .phero--mt { min-height: auto; }
  .phero__rail { grid-template-columns: 1fr 1fr; }
  .phero__rail > div:nth-child(3) { border-left: 0; padding-left: var(--gut); }
  .phero__rail > div:nth-child(n+3) { border-top: 2px solid var(--rule); }
  .phero__rail > div:nth-child(2) { padding-right: var(--gut); }
}

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-quiet);
  margin-bottom: 0.6rem;
}
.crumbs a { transition: color var(--quick) var(--ease); }
.crumbs a:hover { color: var(--brass); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.55rem; color: var(--brass); }
.crumbs li { display: flex; align-items: center; }

/* ------------------------------------------------- 9. EDITORIAL COMPONENTS */
/* Big statement type */
.statement {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  font-weight: 400; text-transform: uppercase;
  line-height: 0.88; letter-spacing: -0.018em;
  max-width: 24ch;
  text-wrap: balance;
}
.statement .ital { -webkit-text-stroke-width: 2px; }

/* ---------------------------------------------------------------------------
   OPENER — section opener (home, section 01)
   Header row (heading left / lead right) over a ruled baseline, then a
   full-bleed band image, then a black three-column slab pulled up over it.
   --------------------------------------------------------------------------- */
.opener { padding-bottom: clamp(3.5rem, 7vh, 6rem); }

/* Header: single left-aligned stack — kicker, oversized heading, then the lead
   set beneath behind a silver rule. Stacking rather than columns means no dead
   space can open up between the label and the copy at any viewport width. */
.opener__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.opener__head .kicker { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.opener__head h2 {
  font-size: clamp(2.4rem, 5.8vw, 5.2rem);
  max-width: 30ch;
  margin-left: -0.025em;   /* optical alignment for condensed caps */
}
.opener__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg-quiet);
  max-width: 56ch;
}

/* Full-bleed band image — sits outside .wrap so it runs edge to edge */
.opener__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  border-top: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
.opener__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-hard);
}
.opener__media:hover img { transform: scale(1.06); }
.opener__stamp {
  position: absolute; right: 0; top: 0;
  background: var(--ink); color: var(--bone);
  padding: 0.6rem 1.1rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
@media (max-width: 760px) { .opener__media { aspect-ratio: 4 / 3; } }

/* Black slab holding the three columns, pulled up over the image.
   It is dark inside a light band, so it re-declares the theme tokens —
   otherwise the body copy would inherit dark-on-dark. */
.opener__slab {
  --fg:          var(--bone);
  --fg-quiet:    rgba(236, 238, 243, 0.64);
  --fg-faint:    rgba(236, 238, 243, 0.42);
  --rule:        rgba(236, 238, 243, 0.16);
  --rule-strong: rgba(236, 238, 243, 0.32);
  /* All three accent steps must be re-declared, not just --brass: this slab is
     inside a .section--alt, where --brass-hi/-lo are the dark values meant for
     a light ground (#2b2f35 / #3a3f47). Left inherited they would be
     near-black on a near-black slab. */
  --brass:       #a8b0bb;
  --brass-hi:    #d5dae1;
  --brass-lo:    #767e8a;

  position: relative;
  z-index: 2;
  color: var(--bone);
  background: var(--ink);
  border-left: 5px solid var(--brass);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(-5rem, -6vw, -2.5rem);
  margin-right: clamp(0rem, 7vw, 7rem);
}
.opener__slab .ital { -webkit-text-stroke-color: #a8b0bb; }
@supports not (-webkit-text-stroke: 1px black) {
  .opener__slab .ital { color: #a8b0bb; }
}

/* Column hover.
   Previously each column had `padding-inline` with the first and last zeroed on
   their outer edge, and no block padding at all. The hover tint therefore had a
   different shape in every column — flush to the brass border in the first,
   inset on both sides in the middle — and hugged the text block with no
   breathing room. One padding value for all three fixes the shape; the row is
   pulled back by the same amount so the text still aligns with the slab edges. */
.opener__cols {
  --cp: clamp(0.9rem, 1.7vw, 1.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: calc(var(--cp) * -1);
}
.opener__col {
  position: relative;
  padding: var(--cp);
  border-left: 2px solid var(--rule);
  transition: background var(--quick) var(--ease);
}
.opener__col:first-child { border-left: 0; }

/* The old 0.045 tint lifted the slab from 22 to 32 — invisible against the
   band's own gradient. 0.09 plus a brass bar that wipes in from the left, the
   same hover language as .switch__row and .bookpick elsewhere. */
.opener__col::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
/* :focus-within matters — the third column holds the "Read the full story"
   link, so keyboard users got no feedback at all before. */
.opener__col:hover,
.opener__col:focus-within { background: rgba(236, 238, 243, 0.09); }
.opener__col:hover::before,
.opener__col:focus-within::before { transform: scaleX(1); }
.opener__col:hover > b,
.opener__col:focus-within > b { color: var(--brass-hi); }
.opener__col > b {
  display: block;
  transition: color var(--quick) var(--ease);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 1;
  color: var(--brass);
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--rule);
}
.opener__col p { color: var(--fg-quiet); font-size: 0.94rem; }
@media (max-width: 880px) {
  .opener__cols { grid-template-columns: 1fr; }
  /* Stacked: the divider moves to the top edge. Padding stays uniform so the
     hover highlight keeps the same shape it has in the three-column layout. */
  .opener__col { border-left: 0; border-top: 2px solid var(--rule); }
  .opener__col:first-child { border-top: 0; }
}

/* Figure */
.fig { position: relative; overflow: hidden; }
.fig img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55) contrast(1.14) brightness(0.94);
  transition: transform var(--slow) var(--ease-hard), filter var(--med) var(--ease);
}
.fig:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.1) brightness(1); }
.fig figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-small); font-weight: 600; color: var(--fg-quiet);
  letter-spacing: 0.02em;
}
.fig--tall  { aspect-ratio: 3 / 4; }
.fig--port  { aspect-ratio: 4 / 5; }
.fig--sq    { aspect-ratio: 1 / 1; }
.fig--wide  { aspect-ratio: 16 / 10; }
.fig--cine  { aspect-ratio: 21 / 9; }

/* ---------------------------------------------------------------------------
   PROGRAMS — full-width numbered rows (home, section 02)
   Replaces the three-up card grid. Each program is a horizontal row: oversized
   index numeral, copy block, and a photo panel that alternates side. Rows are
   divided by hard rules and behave as one large link target.
   (The .prog card styles below are still used by the Classes hub page.)
   --------------------------------------------------------------------------- */
.progs { position: relative; }
.progs__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.progs__head .kicker { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.progs__head h2 { font-size: clamp(2.4rem, 5.8vw, 5.2rem); margin-left: -0.025em; }
.progs__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: var(--t-lead); line-height: 1.6;
  color: var(--fg-quiet); max-width: 60ch;
}

.progs__rows { border-top: 2px solid var(--rule); }

.prow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr) minmax(200px, 30%);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-bottom: 2px solid var(--rule);
  isolation: isolate;
  transition: padding-left var(--med) var(--ease-hard);
}
/* Silver bar wipes in from the left edge on hover */
.prow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--brass);
  transition: width var(--med) var(--ease-hard);
  z-index: 1;
}
.prow:hover, .prow:focus-visible { padding-left: 1.75rem; }
.prow:hover::before, .prow:focus-visible::before { width: 6px; }

/* Every other row mirrors: photo first, numeral last */
.prow--flip { grid-template-columns: minmax(200px, 30%) minmax(0, 1fr) minmax(3.5rem, auto); }
.prow--flip .prow__shot { order: -1; }
.prow--flip .prow__num { order: 1; text-align: right; }

.prow__num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--brass);
  transition: color var(--med) var(--ease);
}
@supports not (-webkit-text-stroke: 1px black) {
  .prow__num { color: var(--brass); }
}
/* Numeral fills in on hover — the row's main state change */
.prow:hover .prow__num { color: var(--brass); }

.prow__title {
  font-size: clamp(1.65rem, 3.6vw, 3.1rem);
  line-height: 0.9;
  margin-bottom: 0.55rem;
  transition: transform var(--med) var(--ease-hard);
}
.prow:hover .prow__title { transform: translateX(6px); }
.prow__meta {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.prow__copy { color: var(--fg-quiet); font-size: 0.97rem; max-width: 52ch; margin-bottom: 1.1rem; }
.prow__go {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass);
}
.prow__arw { transition: transform var(--med) var(--ease-hard); }
.prow:hover .prow__arw { transform: translateX(8px); }

.prow__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
}
.prow__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.5) contrast(1.12) brightness(0.94);
  transform: scale(1.02);
  transition: transform var(--slow) var(--ease-hard), filter var(--med) var(--ease);
}
.prow:hover .prow__shot img { transform: scale(1.08); filter: saturate(1) contrast(1.08) brightness(1); }

@media (max-width: 900px) {
  .prow,
  .prow--flip {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num shot" "body body";
    align-items: start;
    gap: 1.1rem clamp(1rem, 3vw, 1.75rem);
  }
  .prow__num { grid-area: num; order: 0; text-align: left; }
  .prow__shot { grid-area: shot; aspect-ratio: 16 / 10; }
  .prow--flip .prow__shot { order: 0; }
  .prow--flip .prow__num { order: 0; text-align: left; }
  .prow__body { grid-area: body; }
}

/* Program cards — hard edged, silver rail on hover (Classes hub page) */
.prog {
  position: relative;
  display: block;
  background: var(--card-bg);
  border: 2px solid var(--card-bd);
  overflow: hidden;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease-hard),
              background var(--med) var(--ease);
}
.prog::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brass); z-index: 3;
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--med) var(--ease-hard);
}
.prog:hover { border-color: var(--brass); background: var(--card-bg-h); transform: translateY(-6px); }
.prog:hover::before { transform: scaleY(1); }
.prog__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.prog__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.3) brightness(0.68) contrast(1.2);
  transition: transform var(--slow) var(--ease-hard), filter var(--med) var(--ease);
}
.prog:hover .prog__media img { transform: scale(1.08); filter: saturate(0.85) brightness(0.86) contrast(1.12); }
.prog__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,26,26,0.96), transparent 58%);
}
.prog__num {
  position: absolute; top: 1rem; left: 1.2rem; z-index: 2;
  font-family: var(--display); font-size: 2.4rem; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px var(--brass);
}
.prog__ages {
  position: absolute; top: 1.15rem; right: 1.2rem; z-index: 2;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-accent); background: var(--brass);
  padding: 0.35rem 0.7rem;
}
.prog__body { padding: clamp(1.4rem, 2.4vw, 2.15rem); }
.prog__body h3 { margin-bottom: 0.6rem; }
.prog__body p { color: var(--fg-quiet); font-size: 0.95rem; margin-bottom: 1.5rem; }
.prog__go {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass);
}
.prog__go svg { transition: transform var(--med) var(--ease-hard); }
.prog:hover .prog__go svg { transform: translateX(7px); }

/* Numbered value list — hard slide + brass flood */
.vlist { display: grid; gap: 0; }
.vitem {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0 clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-top: 2px solid var(--rule);
  transition: padding-left var(--med) var(--ease-hard);
}
.vitem::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--brass);
  transition: width var(--med) var(--ease-hard);
}
.vitem:last-child { border-bottom: 2px solid var(--rule); }
.vitem:hover { padding-left: 1.5rem; }
.vitem:hover::before { width: 5px; }
.vitem .secnum { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 0.8; }
.vitem h3 { margin-bottom: 0.55rem; }
.vitem p { color: var(--fg-quiet); max-width: 58ch; }
@media (max-width: 560px) { .vitem { grid-template-columns: 1fr; gap: 0.6rem; } }

/* Feature tiles */
.tile {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2.15rem);
  border: 2px solid var(--card-bd);
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease-hard),
              background var(--med) var(--ease);
}
.tile::after {
  content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
.tile:hover { border-color: var(--brass); transform: translateY(-6px); background: var(--card-bg-h); }
.tile:hover::after { transform: scaleX(1); }
.tile .secnum { display: block; margin-bottom: 0.9rem; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.tile h3 { font-size: var(--t-h4); font-family: var(--display); text-transform: uppercase; margin-bottom: 0.65rem; letter-spacing: 0; }
.tile p { color: var(--fg-quiet); font-size: 0.94rem; }

/* Checklist */
.checks { display: grid; gap: 0.85rem; }
.checks li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  align-items: baseline;
  color: var(--fg-quiet);
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--rule);
}
.checks li::before {
  content: "/"; color: var(--brass); font-weight: 800; font-size: 0.95rem;
}
.checks strong { color: var(--fg); font-weight: 700; }
.checks--2 { grid-template-columns: 1fr 1fr; gap: 0.85rem clamp(1.5rem, 3.5vw, 3rem); }
@media (max-width: 720px) { .checks--2 { grid-template-columns: 1fr; } }

/* Stat band — huge condensed numerals */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
}
.stats > div {
  padding: clamp(1.6rem, 3.2vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--rule);
  transition: background var(--med) var(--ease);
}
.stats > div:first-child { border-left: 0; }
.stats > div:hover { background: var(--ink-2); }
.stats b {
  display: block;
  font-family: var(--display); font-size: clamp(2.9rem, 6.5vw, 5.5rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 0.82;
  color: var(--brass);
  margin-bottom: 0.6rem;
}
.stats span {
  font-size: var(--t-micro); font-weight: 800;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-quiet);
}
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 2px solid var(--rule); }
}

/* Pull quote */
.pull {
  position: relative;
  padding: clamp(2.75rem, 6vw, 5.5rem) 0;
  text-align: center;
}
.pull blockquote {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.6vw, 4.2rem);
  font-weight: 400; font-style: normal; text-transform: uppercase;
  line-height: 0.88; letter-spacing: -0.02em;
  max-width: 26ch; margin-inline: auto;
  text-wrap: balance;
}
.pull blockquote .ital { -webkit-text-stroke-width: 2.5px; }
.pull cite {
  display: block; margin-top: 1.75rem;
  font-family: var(--sans); font-style: normal; font-weight: 800;
  font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass);
}

/* Marquee ticker — faster, heavier, brass band */
.ticker {
  overflow: hidden;
  border-top: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  padding-block: 0.9rem;
  background: var(--bg-alt);
}
.ticker__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: slide 55s linear infinite;
}
.ticker span {
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em;
  color: var(--fg); white-space: nowrap;
}
.ticker i { color: var(--brass); font-style: normal; font-size: 0.62rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- 10. REVIEWS RAIL */
.revs { position: relative; }
.revs__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--rule);
}
.revs__rating { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.revs__stars { display: flex; gap: 0.2rem; }
.revs__stars svg { width: 17px; height: 17px; fill: var(--brass); }
.revs__score {
  font-family: var(--display); font-size: 2.2rem; font-weight: 400; line-height: 0.85;
}
.revs__src {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-quiet);
}

.revs__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.revs__viewport::-webkit-scrollbar { display: none; }
.revs__viewport.is-drag { cursor: grabbing; }
.revs__track {
  display: flex; gap: clamp(0.85rem, 1.5vw, 1.5rem);
  width: max-content;
  padding-inline: 2px;
}
.rev {
  flex: 0 0 clamp(268px, 30vw, 385px);
  background: var(--card-bg);
  border: 2px solid var(--card-bd);
  border-left: 4px solid var(--brass-lo);
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease);
  user-select: none;
}
.rev:hover { border-color: var(--card-bd); border-left-color: var(--brass); background: var(--card-bg-h); }
.rev__top { display: flex; align-items: center; gap: 0.85rem; }
.rev__ini {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brass);
  color: var(--on-accent);
  font-family: var(--display); font-size: 1.3rem; line-height: 1;
}
.rev__who { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.rev__name {
  font-family: var(--display); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 1;
}
.rev__when {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-quiet);
}
.rev__stars { display: flex; gap: 0.16rem; }
.rev__stars svg { width: 13px; height: 13px; fill: var(--brass); }
.rev p {
  font-size: 0.94rem; line-height: 1.65; color: var(--fg-quiet);
  font-style: normal;
}
.rev__badge {
  margin-top: auto;
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-quiet);
  display: flex; align-items: center; gap: 0.5rem;
}
.rev__badge svg { width: 12px; height: 12px; }

.revs__ctrl {
  display: flex; gap: 0.5rem; margin-top: clamp(1.35rem, 2.5vw, 2rem);
  align-items: center;
}
.revs__btn {
  width: 48px; height: 48px;
  border: 2px solid var(--rule-strong);
  display: grid; place-items: center;
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease),
              border-color var(--quick) var(--ease), transform var(--quick) var(--ease-hard);
}
.revs__btn:hover { background: var(--brass); color: var(--on-accent); border-color: var(--brass); transform: translateY(-2px); }
.revs__btn svg { width: 16px; height: 16px; }
.revs__hint {
  margin-left: 0.6rem;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-quiet);
}

/* -------------------------------------------------------- 11. LOCATION MAP */
/* ---------------------------------------------------------------------------
   FIND US — full-bleed map strip with an overlaid address card, closed by a
   three-cell contact bar. Background tone comes from the section--alt modifier
   so the band still participates in the black / white alternation.
   Appears on nine pages (everything except Contact, which has its own layout).
   --------------------------------------------------------------------------- */
.loc { position: relative; }

.loc__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.loc__head .kicker { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.loc__head h2 { font-size: clamp(2.4rem, 5.8vw, 5.2rem); margin-left: -0.025em; max-width: 26ch; }
.loc__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: var(--t-lead); line-height: 1.6;
  color: var(--fg-quiet); max-width: 62ch;
}

/* Map runs edge to edge — it sits outside .wrap */
.loc__map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 7;
  border-top: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  overflow: hidden;
  background: var(--ink-3);
}
.loc__map iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.9) brightness(0.95);
  transition: filter var(--slow) var(--ease);
}
.loc__map:hover iframe { filter: grayscale(0.3) invert(0.88) contrast(0.92) brightness(1); }
/* Light band: the map should not be inverted on white */
.section--alt .loc__map iframe { filter: grayscale(1) contrast(1.05); }
.section--alt .loc__map:hover iframe { filter: grayscale(0.2) contrast(1); }

/* Address card floating over the map (desktop only — it would cover the pin
   on narrow screens, and the bar beneath already carries the same details) */
.loc__card {
  position: absolute;
  left: var(--gut); top: 50%; transform: translateY(-50%);
  z-index: 2;
  max-width: 24rem;
  background: var(--ink);
  color: var(--bone);
  border-left: 5px solid #a8b0bb;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.loc__card b {
  display: block;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #a8b0bb; margin-bottom: 0.75rem;
}
.loc__card address {
  font-style: normal;
  font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.75rem);
  text-transform: uppercase; line-height: 1.05; letter-spacing: 0.005em;
  margin-bottom: 1.1rem;
}
.loc__card .tlink { color: #a8b0bb; }
@media (max-width: 1000px) {
  .loc__card { display: none; }
  .loc__map { aspect-ratio: 4 / 3; }
}

/* Three-cell contact bar */
.loc__bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 2px solid var(--rule);
}
.loc__cell {
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.15rem, 2.2vw, 1.9rem);
  border-left: 2px solid var(--rule);
  transition: background var(--quick) var(--ease);
}
.loc__cell:first-child { border-left: 0; padding-left: 0; }
.loc__cell:last-child { padding-right: 0; }
.loc__cell:hover { background: rgba(128, 128, 128, 0.06); }
.loc__cell b {
  display: block;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--rule);
}
.loc__cell address {
  font-style: normal;
  font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  text-transform: uppercase; line-height: 1.1; letter-spacing: 0.005em;
  margin-bottom: 1rem;
}
.loc__cell address a { transition: color var(--quick) var(--ease); }
.loc__cell address a:hover { color: var(--brass); }
@media (max-width: 860px) {
  .loc__bar { grid-template-columns: 1fr; }
  .loc__cell {
    border-left: 0; padding-inline: 0;
    border-top: 2px solid var(--rule);
  }
  .loc__cell:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------------------
   SWITCHBOARD — contact channels as full-width rows (Contact page, section 01)
   Replaces the info-left / form-right split. Each channel is one large link
   row: index, label, the value itself at display scale, and a note. The form
   is now its own section beneath rather than a squeezed right column.
   --------------------------------------------------------------------------- */
.ct { position: relative; }
.switch__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.switch__head .kicker { margin-bottom: clamp(1rem, 2.2vw, 1.75rem); }
.switch__head h2 { font-size: clamp(2.4rem, 5.8vw, 5.2rem); margin-left: -0.025em; }
.switch__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: var(--t-lead); line-height: 1.6;
  color: var(--fg-quiet); max-width: 62ch;
}

/* Two-column grid of channel cards. Hard 2×2 box: the container carries the
   top and left rules, each cell the bottom and right, so the lines never
   double up. */
.switch__rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid var(--card-bd);
  border-left: 2px solid var(--card-bd);
}

.switch__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card-bg);
  border-right: 2px solid var(--card-bd);
  border-bottom: 2px solid var(--card-bd);
  transition: background var(--med) var(--ease), transform var(--med) var(--ease-hard);
}
/* Silver bar wipes across the top of the card */
.switch__row::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
.switch__row:hover, .switch__row:focus-visible {
  background: var(--card-bg-h);
  transform: translateY(-4px);
}
.switch__row:hover::before, .switch__row:focus-visible::before { transform: scaleX(1); }

.switch__num {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--brass);
  transition: color var(--med) var(--ease);
}
@supports not (-webkit-text-stroke: 1px black) {
  .switch__num { color: var(--brass); }
}
.switch__row:hover .switch__num { color: var(--brass); }

.switch__label {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--rule);
}
/* The value is the hero of the card — the thing you actually came for */
.switch__value {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  text-transform: uppercase; line-height: 1.02; letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  transition: transform var(--med) var(--ease-hard);
}
.switch__row:hover .switch__value { transform: translateX(5px); }
.switch__note { font-size: 0.85rem; color: var(--fg-quiet); line-height: 1.5; }
.switch__arw {
  color: var(--brass);
  margin-top: auto;
  padding-top: 0.6rem;
  transition: transform var(--med) var(--ease-hard);
}
.switch__row:hover .switch__arw { transform: translateX(10px); }

@media (max-width: 700px) {
  .switch__rows { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   SEND A MESSAGE — two columns (Contact page, section 02)
   Left: portrait plus a "what happens next" panel that answers the unspoken
   question before the form asks anything. Right: the form itself.
   --------------------------------------------------------------------------- */

/* Uses --bg-alt so it reads as a raised panel on either band tone */

/* Form column gets a rule down its left edge to bind the two halves */

@media (max-width: 900px) {

  /* Portrait would eat the fold on a phone — the panel carries the message */

}

/* ---------------------------------------------------------------------------
   CONTACT — business details beside the form
   Two columns in one row instead of two stacked sections. The details lead
   because calling or texting is the faster route for most people; the form is
   there for anyone who would rather write.
   --------------------------------------------------------------------------- */
.ct__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
}
@media (min-width: 960px) {
  .ct__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
}
.ct__col { min-width: 0; }

.ct__sub {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: var(--brass);
  padding-bottom: 0.85rem;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 2px solid var(--rule-strong);
}
.ct__intro {
  margin: -0.35rem 0 clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: 0.95rem; line-height: 1.6; color: var(--fg-quiet);
  max-width: 46ch;
}

/* In a half-width column the detail cards stack instead of pairing up */
.ct__col .switch__rows { grid-template-columns: 1fr; }

/* Vertical rule between the columns, becoming a horizontal one when stacked */
@media (min-width: 960px) {
  .ct__form { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 2px solid var(--rule-strong); }
}
@media (max-width: 959px) {
  .ct__form { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 2px solid var(--rule-strong); }
}

.ct__next {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--card-bg);
  border: 2px solid var(--card-bd);
  border-left: 5px solid var(--brass);
  font-size: 0.9rem; line-height: 1.6; color: var(--fg-quiet);
}
.ct__next b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  text-transform: uppercase; line-height: 1; letter-spacing: 0.005em;
  color: var(--brass);
  margin-bottom: 0.6rem;
}
.ct__next a { color: var(--brass); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ct__next a:hover { color: var(--fg); }

/* Buttons above the note, stacked, since the column is narrow */
.ct__col .switch__foot { flex-direction: column; align-items: flex-start; }

.switch__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.switch__hours {
  font-size: 0.85rem; color: var(--fg-quiet);
  max-width: 40ch; line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   GRADIENT CURSOR
   A soft bloom that trails the pointer, in two layers — one per band theme,
   cross-faded by `.is-light` (set from JS by hit-testing what is actually
   under the pointer).

   THREE THINGS HERE ARE FRAGILE — read before editing.

   1. The bloom layers' `transform` belongs to JS. Nothing in CSS may touch it,
      and in particular never add the individual `rotate`, `scale` or
      `translate` properties: per CSS Transforms 2 those are applied BEFORE the
      `transform` property, so the matrix becomes e.g. rotate x transform and
      the *translation* gets rotated too — the layer orbits the top-left corner
      instead of sitting under the pointer. (This was a real bug here, back when
      a spinning ring shared an element with its position.) Size changes use
      width/height/margin for exactly this reason.

   2. `.cur` is `display: contents`, so it generates no box.
      Any element that creates a stacking context also forms an isolated group
      (CSS Compositing 1 §5.1). A wrapper with `position: fixed; z-index: n`
      would therefore isolate the bloom, and its blend mode would apply against
      the wrapper's own transparent backdrop — i.e. do nothing, leaving a flat
      grey haze on the light bands. `display: contents` removes the wrapper from
      the box tree so the bloom blends with the page. Position and z-index
      therefore live on the children.

   3. z-index 970 sits above the modal (960) so the accent is never buried.
      At 700 it vanished behind the sticky header (800), the grain overlay
      (900), the lightbox (950) and the whole modal. Only the skip link (999)
      belongs above it.

   The native cursor stays visible throughout — replacing it breaks anyone
   relying on OS pointer settings and leaves nothing if the JS fails.
   --------------------------------------------------------------------------- */
.cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cur { display: contents; }
}

/* One gradient cannot serve both bands: `screen` with a silver gradient lifts
   the dark bands but is a no-op on white, and `multiply` with an ink gradient
   does the reverse. So each band gets its own layer and they swap. Only ever
   one is visible, and both share a transform. */
.cur__glow {
  position: fixed; top: 0; left: 0;
  z-index: 970;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
  width: 24rem; height: 24rem;
  margin: -12rem 0 0 -12rem;
  filter: blur(22px);
  transition: opacity 0.35s var(--ease), width 0.4s var(--ease),
              height 0.4s var(--ease), margin 0.4s var(--ease);
}
/* Dark bands — silver, lightening: takes the ink ground from 22 up to ~65 */
.cur__glow--d {
  background: radial-gradient(circle,
              rgba(213, 218, 225, 0.22) 0%,
              rgba(168, 176, 187, 0.13) 38%,
              rgba(118, 126, 138, 0.06) 60%,
              transparent 72%);
  mix-blend-mode: screen;
}
/* Light bands — ink, darkening: takes the bone ground from 237 down to ~200,
   so the bloom is as present here as the silver one is on black. */
.cur__glow--l {
  background: radial-gradient(circle,
              rgba(22, 22, 22, 0.17) 0%,
              rgba(79, 85, 94, 0.11) 38%,
              rgba(79, 85, 94, 0.05) 60%,
              transparent 72%);
  mix-blend-mode: multiply;
}
.cur.is-on .cur__glow--d { opacity: 1; }
.cur.is-on.is-light .cur__glow--d { opacity: 0; }
.cur.is-on.is-light .cur__glow--l { opacity: 1; }

/* Over anything clickable the bloom tightens, so it still reacts to what it
   is on. This is the only state change left. */
.cur.is-hot .cur__glow { width: 15rem; height: 15rem; margin: -7.5rem 0 0 -7.5rem; }

/* prefers-reduced-motion is handled in main.js, which drops the trailing lerp
   so the bloom tracks the pointer 1:1. Nothing here animates on its own. */
@media print { .cur { display: none !important; } }

/* ---------------------------------------------------------------------------
   HONEYPOT
   Moved off-screen rather than `display: none`, because scripted submitters
   routinely skip hidden inputs — an off-screen field still looks real to them.
   `clip-path` plus 1px sizing keeps it out of the layout, and the markup adds
   aria-hidden and tabindex="-1" so no keyboard or screen-reader user can ever
   land in it. Never remove all three: one alone is not enough.
   --------------------------------------------------------------------------- */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   BOOKING STEP PAGE (book.html)
   Post-modal step 2. The banner has one job: make it unmistakable that the
   visitor is not finished. Glow and gradient accents are heavier here than
   anywhere else on the site — this page is a moment, not a section.
   --------------------------------------------------------------------------- */
.book { padding-bottom: clamp(4rem, 9vh, 7rem); }

.booktop {
  position: relative;
  overflow: hidden;
  padding: clamp(8rem, 17vh, 12rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  border-bottom: 3px solid var(--brass);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(168, 176, 187, 0.16), transparent 60%),
    linear-gradient(175deg, #1f1f1f 0%, var(--ink) 46%, #0d0d0d 100%);
}
/* Slow drifting bloom behind the alert */
.booktop__glow {
  position: absolute; left: 50%; top: -30%;
  width: min(120vw, 70rem); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 218, 225, 0.14), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
  animation: bookglow 9s var(--ease) infinite alternate;
}
@keyframes bookglow {
  from { opacity: 0.65; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.1); }
}

/* Two-step progress */
.bookstep {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.bookstep__i {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1.15rem;
  border: 2px solid rgba(236, 238, 243, 0.40);
  background: rgba(0, 0, 0, 0.25);
}
.bookstep__n {
  font-family: var(--display); font-size: 1.1rem; line-height: 1;
  color: var(--brass);
}
.bookstep__t {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.bookstep__t em {
  font-style: normal; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--fg-quiet);
}
.bookstep__i.is-done { border-color: rgba(236, 238, 243, 0.40); }
.bookstep__i.is-done .bookstep__n { color: var(--brass); }
.bookstep__i.is-done .bookstep__n::after { content: "\2009\2713"; }
/* Current step glows so the eye lands on it */
.bookstep__i.is-now {
  border-color: var(--brass);
  background: rgba(168, 176, 187, 0.10);
  box-shadow: 0 0 0 1px rgba(168,176,187,0.25), 0 0 26px rgba(168, 176, 187, 0.22);
}
.bookstep__i.is-now .bookstep__t em { color: var(--brass-hi); }

/* The alert itself */
/* The banner was one narrow column stranded against a wide empty right side.
   Two columns: warning on the left, a summary card on the right that repeats
   the "nothing is reserved" point in a second voice. */
.booktop__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 980px) {
  .booktop__grid { grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr); }
}

.bookalert { position: relative; }
.bookalert__p { max-width: 46ch; }
.bookalert__tag {
  display: inline-block;
  background: var(--brass); color: var(--on-accent);
  padding: 0.4rem 0.85rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(168, 176, 187, 0.35);
}
.bookalert h1 {
  margin: clamp(1rem, 2vw, 1.5rem) 0 1rem;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  margin-left: -0.03em;
}
.bookalert h1 .ital { -webkit-text-stroke-width: 2.5px; }
.bookalert__p {
  font-size: var(--t-lead); line-height: 1.6; color: var(--fg-quiet);
  margin-top: 0;
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
}
.bookalert__p strong { color: var(--fg); font-weight: 700; }
.bookalert__jump {
  display: inline-flex; align-items: center; gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.15rem 2rem;
  background: var(--brass); color: var(--on-accent);
  border: 3px solid var(--brass);
  font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  text-transform: uppercase; letter-spacing: -0.005em; line-height: 1;
  box-shadow: 0 0 40px rgba(168, 176, 187, 0.28);
  transition: background var(--med) var(--ease-hard), color var(--med) var(--ease),
              box-shadow var(--med) var(--ease), transform var(--med) var(--ease-hard);
}
.bookalert__jump:hover {
  background: var(--ink); color: var(--brass);
  box-shadow: 0 0 56px rgba(168, 176, 187, 0.45);
  transform: translateY(-2px);
}
.bookalert__jump svg { transition: transform var(--med) var(--ease-hard); }
.bookalert__jump:hover svg { transform: translateX(10px); }

/* Summary card — a receipt for what we have, and a blank where the time goes */
.bookcard {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background:
    linear-gradient(160deg, rgba(168, 176, 187, 0.10), rgba(0, 0, 0, 0.42) 55%),
    #131313;
  border: 1px solid rgba(236, 238, 243, 0.40);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.55);
}
/* Brass hairline down the leading edge + a soft corner bloom */
.bookcard::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 40%, transparent);
}
.bookcard__glow {
  position: absolute; right: -18%; top: -28%;
  width: 65%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 176, 187, 0.20), transparent 65%);
  filter: blur(24px); pointer-events: none;
}
.bookcard__kick {
  position: relative;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-hi);
}
.bookcard__list { position: relative; margin: 0; }
.bookcard__row {
  display: grid; gap: 0.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(236, 238, 243, 0.14);
}
@media (min-width: 460px) {
  .bookcard__row { grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
}
.bookcard__row dt {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-quiet);
}
.bookcard__row dd {
  margin: 0;
  font-size: 0.95rem; line-height: 1.45; font-weight: 600; color: var(--fg);
}
/* The one row that is still empty — styled so the eye cannot skip it */
.bookcard__row--miss {
  margin-top: 0.35rem;
  padding: 0.9rem clamp(0.75rem, 1.4vw, 1rem);
  border-top: 0;
  background: rgba(168, 176, 187, 0.12);
  /* 0.75 alpha keeps the outline at 3.97:1 against its own fill (WCAG 1.4.11) */
  box-shadow: inset 0 0 0 1px rgba(168, 176, 187, 0.75);
}
.bookcard__row--miss dd { display: flex; align-items: center; gap: 0.55rem; color: var(--brass-hi); }
/* Hollow ring: an empty slot, not an error */
.bookcard__x {
  flex: none; width: 0.85rem; height: 0.85rem;
  border: 2px solid var(--brass-hi); border-radius: 50%;
  animation: bookpulse 1.8s var(--ease) infinite;
}
@keyframes bookpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 218, 225, 0.45); }
  60%      { box-shadow: 0 0 0 6px rgba(213, 218, 225, 0); }
}
.bookcard__foot {
  position: relative;
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  font-size: 0.85rem; line-height: 1.55; color: var(--fg-quiet);
}

/* ---- Hub: pick a program ------------------------------------------------ */
/* The 1px gaps show this background through as hairline dividers. These
   separate interactive rows, so they need 3:1 against the card fill — 0.40
   alpha gives 3.48:1, where --rule-strong (0.30) would only reach 2.49:1. */
.bookpicks { display: grid; gap: 1px; background: rgba(236, 238, 243, 0.40); }

.bookpick {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.1rem, 2.4vw, 1.9rem);
  background: #131313;
  color: var(--fg);
  min-height: 60px;
  transition: background var(--med) var(--ease-hard), color var(--med) var(--ease);
}
/* Brass edge wipes in from the left on hover */
.bookpick::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brass);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--med) var(--ease-hard);
}
.bookpick:hover, .bookpick:focus-visible { background: #1c1d1f; }
.bookpick:hover::before, .bookpick:focus-visible::before { transform: scaleY(1); }

.bookpick__n {
  font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 0.8; color: var(--brass-lo);
  transition: color var(--med) var(--ease);
}
.bookpick:hover .bookpick__n { color: var(--brass-hi); }

.bookpick__body { display: grid; gap: 0.3rem; }
.bookpick__age {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
}
.bookpick__name {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: -0.005em;
}
.bookpick__line { font-size: 0.92rem; line-height: 1.5; color: var(--fg-quiet); max-width: 52ch; }

.bookpick__go { color: var(--brass); transition: transform var(--med) var(--ease-hard); }
.bookpick:hover .bookpick__go { transform: translateX(8px); }
@media (max-width: 560px) {
  .bookpick { grid-template-columns: auto 1fr; }
  .bookpick__go { grid-column: 2; justify-self: end; }
}

/* ---- Back to the program chooser ----------------------------------------
   Sits directly above the calendar, so "wrong program?" is answered before
   the visitor scrolls into the booking widget rather than after it.
   ------------------------------------------------------------------------ */
.bookback {
  display: inline-flex; align-items: center; gap: clamp(0.85rem, 1.8vw, 1.35rem);
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  padding: 0.9rem clamp(1rem, 2vw, 1.4rem);
  border: 2px solid rgba(236, 238, 243, 0.40);
  color: var(--fg);
  min-height: 56px;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease-hard),
              color var(--med) var(--ease);
}
.bookback:hover, .bookback:focus-visible {
  border-color: var(--brass); background: rgba(168, 176, 187, 0.10);
}
.bookback__arw {
  display: flex; color: var(--brass);
  transition: transform var(--med) var(--ease-hard);
}
.bookback:hover .bookback__arw { transform: translateX(-8px); }
.bookback__t { display: grid; gap: 0.15rem; }
.bookback__k {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}
.bookback__l { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 460px) {
  .bookback { width: 100%; }
  .bookback__arw svg { width: 28px; }
}

/* Calendar frame — gradient border via a padded wrapper */
.bookframe {
  position: relative;
  padding: 3px;
  background: linear-gradient(150deg, var(--brass), rgba(168,176,187,0.15) 45%, var(--brass-lo));
  box-shadow: 0 0 60px rgba(168, 176, 187, 0.14);
}
.bookframe__glow {
  position: absolute; inset: -1px;
  background: linear-gradient(150deg, var(--brass-hi), transparent 55%);
  opacity: 0.35; pointer-events: none;
}
.bookpanel {
  position: relative;
  background: #0f0f0f;
  padding: clamp(0.9rem, 2vw, 1.5rem);
}
.bookpanel[hidden] { display: none; }
.bookpanel__label {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 0.9rem; margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--rule);
}
/* The widget injects its own height; this is the pre-load floor */
.bookpanel iframe {
  width: 100%; min-height: 760px; border: 0; overflow: hidden;
  background: #0f0f0f;
}
@media (max-width: 700px) { .bookpanel iframe { min-height: 900px; } }

.book__help {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.9rem; color: var(--fg-quiet);
}
.book__help a { color: var(--brass); font-weight: 700; }
.book__help a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   CITY PAGES (programmatic location pages) + the service-area hub
   --------------------------------------------------------------------------- */
/* Neighbourhood chips — unique content per city, so give them presence */
.hoods {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hoods li {
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--rule-strong);
  font-size: 0.85rem; font-weight: 800;
  font-variation-settings: "wdth" 90;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg);
  transition: border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.hoods li:hover { border-color: var(--brass); color: var(--brass); }

.hoods__more {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.85rem);
  border-top: 2px solid var(--rule);
}
.hoods__links {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.75rem;
  margin-top: 1rem;
}

/* Service-area hub cards on locations.html */
.areas { position: relative; }
.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--card-bd);
  border-left: 2px solid var(--card-bd);
}
.areacard {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  background: var(--card-bg);
  border-right: 2px solid var(--card-bd);
  border-bottom: 2px solid var(--card-bd);
  transition: background var(--med) var(--ease), transform var(--med) var(--ease-hard);
}
.areacard::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease-hard);
}
.areacard:hover { background: var(--card-bg-h); transform: translateY(-4px); }
.areacard:hover::before { transform: scaleX(1); }
.areacard b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  text-transform: uppercase; line-height: 1; letter-spacing: 0.005em;
}
.areacard__meta {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass);
}
.areacard__go {
  margin-top: auto; padding-top: 0.9rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-quiet);
}
.areacard:hover .areacard__go { color: var(--brass); }
@media (max-width: 900px) { .areas__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .areas__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   LOCATION DOSSIER (Locations page)
   Replaces the map-beside-address split. Reads top to bottom: city name at
   display scale, a four-column spec table, then the map as a full-bleed strip
   closing the band — so the map is the last thing rather than a side column.
   --------------------------------------------------------------------------- */
.dossier { padding-bottom: 0; }

.dossier__top {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 0;
}
.dossier__top .kicker { margin-bottom: clamp(0.75rem, 1.6vw, 1.15rem); }
.dossier__city {
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 0.8;
  letter-spacing: -0.035em;
  margin-left: -0.035em;
}
.dossier__lead {
  margin-top: clamp(1.25rem, 2.5vw, 1.85rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: var(--t-lead); line-height: 1.6;
  color: var(--fg-quiet); max-width: 60ch;
}

/* Four-column spec table */
.dossier__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--rule-strong);
}
.dossier__specs > div {
  padding: clamp(1.35rem, 2.6vw, 2rem) clamp(1.15rem, 2.2vw, 1.85rem);
  border-left: 2px solid var(--rule);
  transition: background var(--quick) var(--ease);
}
.dossier__specs > div:first-child { border-left: 0; padding-left: 0; }
.dossier__specs > div:last-child { padding-right: 0; }
.dossier__specs > div:hover { background: rgba(128, 128, 128, 0.06); }
.dossier__specs dt {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--rule);
}
.dossier__specs dd {
  font-size: 0.95rem; line-height: 1.6;
  color: var(--fg-quiet);
}
.dossier__specs dd + dd { margin-top: 0.85rem; }
.dossier__specs address {
  font-style: normal;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  text-transform: uppercase; line-height: 1.1; letter-spacing: 0.005em;
  color: var(--fg);
}
.dossier__specs a { transition: color var(--quick) var(--ease); }
.dossier__specs dd > a:hover { color: var(--brass); }
@media (max-width: 980px) {
  .dossier__specs { grid-template-columns: 1fr 1fr; }
  .dossier__specs > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .dossier__specs > div:nth-child(n+3) { border-top: 2px solid var(--rule); }
}
@media (max-width: 560px) {
  .dossier__specs { grid-template-columns: 1fr; }
  .dossier__specs > div {
    border-left: 0; padding-inline: 0;
    border-top: 2px solid var(--rule);
  }
  .dossier__specs > div:first-child { border-top: 0; }
}

/* Map closes the band, edge to edge */
.dossier__map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 6;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  border-top: 3px solid var(--brass);
  overflow: hidden;
  background: var(--ink-3);
}
.dossier__map iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.9) brightness(0.95);
  transition: filter var(--slow) var(--ease);
}
.dossier__map:hover iframe { filter: grayscale(0.3) invert(0.88) contrast(0.92) brightness(1); }
.section--alt .dossier__map iframe { filter: grayscale(1) contrast(1.05); }
.section--alt .dossier__map:hover iframe { filter: grayscale(0.2) contrast(1); }
.dossier__pin {
  position: absolute; left: 0; bottom: 0;
  background: var(--brass); color: var(--on-accent);
  padding: 0.6rem 1.15rem;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 760px) { .dossier__map { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------- 12. CTA */
.cta { position: relative; overflow: hidden; isolation: isolate; border-top: 3px solid var(--brass); }
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.25) brightness(0.34) contrast(1.25);
}
.cta__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22,22,22,0.97) 10%, rgba(22,22,22,0.74) 55%, rgba(22,22,22,0.92) 100%);
}
/* Light variant — lets the CTA take its turn in the alternation.
   The photo is brightened and the overlay flipped to near-solid bone, so the
   copy keeps full contrast instead of fighting the image. */
.cta.section--alt .cta__media img { filter: saturate(0.22) brightness(1.28) contrast(0.92); }
.cta.section--alt .cta__media::after {
  background: linear-gradient(105deg, rgba(236,238,243,0.975) 10%, rgba(236,238,243,0.82) 55%, rgba(236,238,243,0.955) 100%);
}

/* Conversion band — centre-aligned. This is the only centred block on the
   site, which is what makes it read as a stop rather than another section. */
.cta__in {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.cta__kick { justify-content: center; }
.cta h2 {
  margin-block: 1.2rem 1.4rem;
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: -0.03em;
}
.cta .lead { max-width: 52ch; margin-inline: auto; }

/* Three-step path */
.cta__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 3px solid var(--brass);
  border-bottom: 3px solid var(--brass);
  counter-reset: step;
}
.cta__steps > li {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.15rem, 2.4vw, 2rem);
  border-left: 2px solid var(--rule);
  text-align: left;
  transition: background var(--quick) var(--ease);
}
.cta__steps > li:first-child { border-left: 0; }
.cta__steps > li:hover { background: rgba(236, 238, 243, 0.035); }
.cta__steps b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--brass);
  margin-bottom: 0.9rem;
}
@supports not (-webkit-text-stroke: 1px black) {
  .cta__steps b { color: var(--brass); }
}
.cta__steps > li:hover b { color: var(--brass); }
.cta__steps h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  margin-bottom: 0.6rem;
}
.cta__steps p { color: var(--fg-quiet); font-size: 0.93rem; }
@media (max-width: 820px) {
  .cta__steps { grid-template-columns: 1fr; }
  .cta__steps > li { border-left: 0; border-top: 2px solid var(--rule); }
  .cta__steps > li:first-child { border-top: 0; }
}

/* One full-width action bar — the whole strip is the click target */
.cta__bar {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.35rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--brass);
  color: var(--on-accent);
  border: 3px solid var(--brass);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--med) var(--ease-hard), border-color var(--med) var(--ease);
}
.cta__bar::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform var(--med) var(--ease-hard);
}
.cta__bar:hover, .cta__bar:focus-visible { color: var(--brass); border-color: var(--brass); }

/* Light band: a steel bar on bone is muddy and the label was only 2.4:1.
   Go black-on-bone instead — strongest possible contrast at 15.6:1. */
.section--alt .cta__bar {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.section--alt .cta__bar::before { background: var(--white); }
.section--alt .cta__bar:hover,
.section--alt .cta__bar:focus-visible { color: var(--ink); border-color: var(--ink); }
.cta__bar:hover::before, .cta__bar:focus-visible::before { transform: translateX(0); }
.cta__barlabel {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  text-transform: uppercase; line-height: 1; letter-spacing: -0.01em;
}
.cta__bararw { flex-shrink: 0; transition: transform var(--med) var(--ease-hard); }
.cta__bar:hover .cta__bararw { transform: translateX(12px); }
@media (max-width: 560px) {
  .cta__bar { flex-direction: column; gap: 0.9rem; }
}

.cta__alt {
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  text-align: center;
  font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-quiet);
}
.cta__alt a { color: var(--brass); }
.cta__alt a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cta__alt i { font-style: normal; color: var(--brass); font-size: 0.55rem; margin-inline: 0.6rem; }

/* ------------------------------------------------------------- 13. FORMS */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);            /* full strength — these were too faint to read */
}
.field label .req { color: var(--brass); }

/* Filled surfaces with a real border. An underline-only field is invisible on
   a black band, which is what this replaced. */
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 2px solid var(--field-bd);
  color: var(--fg);
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  padding: 0.9rem 1.05rem;
  border-radius: 0;
  transition: border-color var(--quick) var(--ease-hard),
              background var(--quick) var(--ease),
              box-shadow var(--quick) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.65; }

/* Native select arrow is unstyleable, so draw our own */
.field select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23a8b0bb' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
}
.section--alt .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%234f555e' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
}
.field select option { background: var(--field-bg); color: var(--fg); }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brass-lo); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--field-bg-f);
  box-shadow: 0 0 0 3px rgba(168, 176, 187, 0.22);
}
.section--alt .field input:focus,
.section--alt .field select:focus,
.section--alt .field textarea:focus { box-shadow: 0 0 0 3px rgba(79, 85, 94, 0.20); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-quiet); }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  align-items: start;
  padding: clamp(0.9rem, 1.8vw, 1.15rem);
  background: var(--field-bg);
  border: 2px solid var(--field-bd);
}
.consent input[type="checkbox"] {
  appearance: none;
  width: 22px; height: 22px; margin-top: 0.1rem;
  background: var(--bg);
  border: 2px solid var(--field-bd);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: border-color var(--quick) var(--ease), background var(--quick) var(--ease);
}
.consent input[type="checkbox"]::after {
  content: ""; width: 10px; height: 10px; background: var(--brass);
  transform: scale(0); transition: transform var(--quick) var(--ease-hard);
}
.consent input[type="checkbox"]:hover { border-color: var(--brass-lo); }
.consent input[type="checkbox"]:checked { border-color: var(--brass); }
.consent input[type="checkbox"]:checked::after { transform: scale(1); }
.consent span { font-size: 0.8rem; line-height: 1.6; color: var(--fg-quiet); }
.consent a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }

/* Submit sits on its own rule so it reads as the end of the form */
.form > div:last-child {
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
  border-top: 2px solid var(--rule);
}
.form [type="submit"] { width: 100%; justify-content: center; padding-block: 1.2rem; }
.form__note { font-size: 0.8rem; color: var(--fg-quiet); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   ENQUIRY MODAL
   Same language as the rest of the site: hard edges, silver top rule, Anton
   heading with an outlined word, ghost wordmark, dark recessed card surface.
   Opened by [data-open-enquiry], closed by the X, the backdrop or Escape.
   --------------------------------------------------------------------------- */
.mdl {
  position: fixed; inset: 0; z-index: 960;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility var(--med);
  overflow-y: auto;
}
.mdl.is-open { opacity: 1; visibility: visible; }

.mdl__panel {
  position: relative;
  width: 100%;
  max-width: 46rem;
  max-height: calc(100dvh - clamp(2rem, 8vw, 5rem));
  overflow-y: auto;
  /* Force the dark theme regardless of which band the trigger sat in */
  --fg:          var(--bone);
  --fg-quiet:    rgba(236, 238, 243, 0.64);
  --fg-faint:    rgba(236, 238, 243, 0.42);
  --rule:        rgba(236, 238, 243, 0.14);
  --rule-strong: rgba(236, 238, 243, 0.32);
  --brass:       #a8b0bb;
  --on-accent:   var(--ink);
  --field-bg:    #262626;
  --field-bg-f:  #2e2e2e;
  --field-bd:    rgba(236, 238, 243, 0.45);
  color: var(--bone);
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(168, 176, 187, 0.10), transparent 55%),
    linear-gradient(170deg, #1a1a1a 0%, #121212 60%, #0c0c0c 100%);
  border: 2px solid var(--rule-strong);
  border-top: 4px solid var(--brass);
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  /* Fast, hard entrance — matches the site's motion, no bounce */
  transform: translateY(18px);
  transition: transform 0.3s var(--ease-hard);
}
.mdl.is-open .mdl__panel { transform: none; }

.mdl__x {
  position: absolute; top: 0; right: 0;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--bone);
  border-left: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease);
}
.mdl__x svg { width: 17px; height: 17px; }
.mdl__x:hover { background: var(--brass); color: var(--ink); }

.mdl__head {
  position: relative;
  overflow: hidden;
  padding-right: 3.5rem;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 2px solid var(--rule);
}
.mdl__ghost {
  position: absolute; right: -0.05em; bottom: -0.34em;
  font-family: var(--display);
  font-size: clamp(4rem, 11vw, 7rem);
  line-height: 0.75; text-transform: uppercase; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(168, 176, 187, 0.10);
  pointer-events: none;
}
.mdl__head h2 {
  position: relative;
  margin: clamp(0.75rem, 1.6vw, 1.1rem) 0 0.7rem;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  margin-left: -0.02em;
}
.mdl__sub { position: relative; font-size: 0.92rem; color: var(--fg-quiet); max-width: 44ch; }

.mdl__form { position: relative; }

@media (max-width: 560px) {
  .mdl { padding: 0; place-items: stretch; }
  .mdl__panel {
    max-width: none; max-height: none; min-height: 100dvh;
    border: 0; border-top: 4px solid var(--brass);
    padding-top: 3.5rem;
  }
  .mdl__ghost { display: none; }
}

/* Trigger inside the CTA band inherits the surrounding link styling */
.cta__alt-btn {
  color: var(--brass);
  font: inherit;
  text-transform: inherit; letter-spacing: inherit;
  cursor: pointer;
}
.cta__alt-btn:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- 14. GALLERY */
.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1vw, 0.95rem);
}

/* ---------------------------------------------------------------------------
   MASONRY GALLERY (gallery.html)
   True masonry via CSS multi-column: photographs flow down each column at
   their own height, so nothing is cropped to fit a grid cell and portrait
   shots finally read as portraits. No JS, no row-span arithmetic.

   Deliberately a separate container class from `.gal`, which is still the
   12-column mosaic used by the homepage "Inside the room" strip — the two must
   not share a layout. Tile styling (`.gal__i`, `.gal__cap`) IS shared.

   Note the trade-off: multicol reading order is column-by-column, not
   left-to-right. For a gallery of equal, unordered photographs that is fine,
   and DOM order (which assistive tech follows) is unchanged.
   --------------------------------------------------------------------------- */
.mas {
  --masgap: clamp(0.5rem, 1vw, 0.95rem);
  columns: 4;
  column-gap: var(--masgap);
}
@media (max-width: 1180px) { .mas { columns: 3; } }
@media (max-width: 760px)  { .mas { columns: 2; } }
@media (max-width: 420px)  { .mas { columns: 1; } }

.mas__i {
  display: block;
  margin-bottom: var(--masgap);
  /* Both properties: the unprefixed one is ignored by older WebKit */
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
}
/* `.gal__i img` is height:100% + object-fit:cover for the fixed-ratio mosaic.
   Masonry needs the opposite — the image's own height is what drives the
   layout, so no cropping and no aspect-ratio box. */
.mas__i img { height: auto; object-fit: fill; }
.gal__i { position: relative; overflow: hidden; background: var(--ink-3); }
.gal__i img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.45) contrast(1.18) brightness(0.86);
  transition: transform var(--slow) var(--ease-hard), filter var(--med) var(--ease);
}
.gal__i:hover img { transform: scale(1.07); filter: saturate(1) contrast(1.1) brightness(1); }
.gal__i::after {
  content: ""; position: absolute; inset: 0;
  border: 0 solid var(--brass);
  background: linear-gradient(to top, rgba(22,22,22,0.6), transparent 52%);
  opacity: 0; transition: opacity var(--med) var(--ease), border-width var(--quick) var(--ease-hard);
}
.gal__i:hover::after { opacity: 1; border-width: 3px; }
.gal__cap {
  position: absolute; left: 1rem; bottom: 0.9rem; z-index: 2;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease-hard);
}
.gal__i:hover .gal__cap { opacity: 1; transform: none; }

/* Span + ratio utilities for the .gal mosaic. Only the four the homepage strip
   actually uses are kept; the rest went with the gallery's masonry rewrite. */
.s4 { grid-column: span 4; }
.s8 { grid-column: span 8; }
.ar-45 { aspect-ratio: 4/5; }
.ar-32 { aspect-ratio: 3/2; }

@media (max-width: 900px) {
  .gal { grid-template-columns: repeat(6, 1fr); }
  .s4 { grid-column: span 3; }
  .s8 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
  .s4 { grid-column: span 1; }
  .s8 { grid-column: span 2; }
}

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility var(--med);
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  transform: scale(0.97); opacity: 0;
  transition: transform var(--med) var(--ease-out), opacity var(--quick) var(--ease);
}
.lb.is-open img { transform: scale(1); opacity: 1; }
.lb__cap {
  position: absolute; bottom: clamp(1rem, 3vw, 2.5rem); left: 50%; transform: translateX(-50%);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-quiet); text-align: center; padding-inline: 1rem;
}
.lb__x, .lb__nav {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 2px solid var(--rule-strong);
  color: var(--bone);
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease),
              border-color var(--quick) var(--ease);
}
.lb__x:hover, .lb__nav:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__nav--p { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__nav--n { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ 15. FOOTER */
.ftr {
  /* Quieter version of the dark-band atmosphere */
  background:
    radial-gradient(110% 90% at 85% 0%, rgba(168, 176, 187, 0.055), transparent 58%),
    linear-gradient(170deg, #202020 0%, var(--ink-2) 55%, #121212 100%);
  border-top: 3px solid var(--brass);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}
.ftr__top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: clamp(2rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(2.75rem, 4.5vw, 4rem);
}
@media (max-width: 1040px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ftr__top { grid-template-columns: 1fr; } }

.ftr__brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.25rem; }
.ftr__brand img { width: 50px; height: 50px; }
.ftr__brand-txt {
  font-family: var(--display); font-size: 1.5rem; font-weight: 400;
  text-transform: uppercase; line-height: 0.9;
}
.ftr__brand-txt span {
  display: block; font-family: var(--sans); font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); margin-top: 0.3rem;
}
.ftr p { color: var(--fg-quiet); font-size: 0.9rem; max-width: 34ch; }

.ftr h3 {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--rule);
}
.ftr__links { display: grid; gap: 0.7rem; }
.ftr__links a,
.ftr__links button {
  text-align: left;
  font-size: 0.88rem; font-weight: 600; color: var(--fg-quiet);
  transition: color var(--quick) var(--ease), padding-left var(--quick) var(--ease-hard);
}
.ftr__links a:hover,
.ftr__links button:hover { color: var(--brass); padding-left: 0.5rem; }

.ftr address { font-style: normal; font-size: 0.88rem; font-weight: 500; color: var(--fg-quiet); line-height: 1.7; }
.ftr address a:hover { color: var(--brass); }
.ftr__addr + .ftr__addr { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid var(--rule); }
.ftr__addr b {
  display: block; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-quiet); margin-bottom: 0.35rem;
}

/* Social */
.social { margin-top: 1.6rem; }
.social__label {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-quiet); margin-bottom: 0.8rem;
}
.social__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social__a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1rem;
  border: 2px solid var(--rule);
  font-size: 0.73rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-quiet);
  transition: color var(--quick) var(--ease), border-color var(--quick) var(--ease),
              background var(--quick) var(--ease-hard), transform var(--quick) var(--ease-hard);
}
.social__a svg { width: 17px; height: 17px; fill: currentColor; transition: transform var(--quick) var(--ease-hard); }
.social__a:hover {
  color: var(--ink); background: var(--brass); border-color: var(--brass);
  transform: translateY(-3px);
}
.social__a:hover svg { transform: scale(1.15); }

/* Newsletter */
.nl { display: flex; gap: 0; margin-top: 1rem; max-width: 340px; }
.nl input {
  flex: 1; min-width: 0;
  background: transparent; border: 2px solid var(--rule-strong); border-right: 0;
  color: var(--fg); padding: 0.8rem 0.95rem;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  border-radius: 0;
}
.nl input:focus { outline: none; border-color: var(--brass); }
.nl button {
  padding: 0.8rem 1.1rem;
  border: 2px solid var(--rule-strong);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--quick) var(--ease-hard), color var(--quick) var(--ease),
              border-color var(--quick) var(--ease);
}
.nl button:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }

.ftr__bot {
  border-top: 2px solid var(--rule);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: 0.76rem; font-weight: 600; color: var(--fg-quiet);
}
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ftr__bot a {
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  transition: color var(--quick) var(--ease);
}
.ftr__bot a:hover { color: var(--brass); }

/* ------------------------------------------------- 16. SCROLL REVEAL / MOTION */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--med) var(--ease), transform 0.38s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.955); }

/* Line-by-line hero reveal — hard clip wipe */
.rvl { display: block; overflow: hidden; }
.rvl > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.55s var(--ease-hard);
  transition-delay: var(--d, 0s);
}
.is-loaded .rvl > span { transform: none; }

/* Progress bar */
.prog-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 850;
  background: var(--brass);
  width: 0;
  transition: width 0.06s linear;
}

/* --------------------------------------------------- 17. UTILITY / MISC */
.mb0 { margin-bottom: 0; }
.mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mt3 { margin-top: 3rem; }
.center { text-align: center; }
.brass { color: var(--brass); }
.quiet { color: var(--fg-quiet); }
.stack { display: grid; gap: 1.5rem; }
.stack--sm { gap: 0.9rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 2px solid var(--rule); padding: 0.4rem 0.75rem; color: var(--fg-quiet);
  transition: border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.tag:hover { border-color: var(--brass); color: var(--brass); }

/* ---------------------------------------------------------------------------
   FAQ — two columns. Heading sticks on the left while the accordion scrolls on
   the right. Replaces the stacked version, where a section head with its own
   bottom rule sat above the accordion's top rule and left a dead band between
   the two, and a three-line Anton heading collided with the section numeral.
   --------------------------------------------------------------------------- */
.faqs { position: relative; }
.faqs__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faqs__head { position: sticky; top: 7.5rem; }
.faqs__head .kicker { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.faqs__head h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 0.92;               /* multi-line Anton needs a touch more air */
  max-width: 18ch;
  margin-left: -0.02em;
}
.faqs__note {
  margin-top: clamp(1.25rem, 2.4vw, 1.85rem);
  padding-left: clamp(1rem, 1.6vw, 1.35rem);
  border-left: 3px solid var(--brass);
  font-size: 0.92rem; line-height: 1.6; color: var(--fg-quiet);
  max-width: 34ch;
}
.faqs__note a { color: var(--brass); font-weight: 700; }
.faqs__note a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .faqs__grid { grid-template-columns: 1fr; gap: 2rem; }
  .faqs__head { position: static; }
  .faqs__head h2 { max-width: none; }
}

/* FAQ accordion */
.faq { border-top: 2px solid var(--rule); }
.faq__i { border-bottom: 2px solid var(--rule); transition: background var(--med) var(--ease); }
.faq__i.is-open { background: rgba(236,238,243,0.022); }
.section--alt .faq__i.is-open { background: rgba(22,22,22,0.035); }
.faq__q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(0.5rem, 1.2vw, 1rem);
  font-family: var(--display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.1;
  transition: color var(--quick) var(--ease), padding-left var(--med) var(--ease-hard),
              background var(--quick) var(--ease);
}
.faq__q > span:first-child { max-width: 46ch; }
.faq__q:hover { color: var(--brass); padding-left: 1.35rem; }
.faq__i.is-open .faq__q { color: var(--brass); }
.faq__ic {
  flex-shrink: 0; width: 16px; height: 16px; position: relative; margin-top: 0.2rem;
}
.faq__ic::before, .faq__ic::after {
  content: ""; position: absolute; background: var(--brass);
  transition: transform var(--quick) var(--ease-hard);
}
.faq__ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__ic::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__i.is-open .faq__ic::after { transform: scaleY(0); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--med) var(--ease-hard);
}
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--fg-quiet);
  max-width: 62ch;
  padding: 0 clamp(0.5rem, 1.2vw, 1rem) 1.6rem 1.15rem;
  border-left: 3px solid var(--brass);
  margin-left: clamp(0.5rem, 1.2vw, 1rem);
}

/* Schedule / comparison table */
.sched { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sched th, .sched td {
  text-align: left; padding: 1rem 1rem;
  border-bottom: 2px solid var(--rule);
}
.sched th {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-accent);
  background: var(--brass);
}
.sched td:first-child { color: var(--fg); font-weight: 700; }
.sched td { color: var(--fg-quiet); }
.sched tbody tr { transition: background var(--quick) var(--ease); }
.sched tbody tr:hover { background: rgba(236,238,243,0.03); }
.tblwrap { overflow-x: auto; }

/* Legal / policy body — quieter headings, this is not a poster */
.legal { max-width: 74ch; }
.legal h2 {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: var(--t-h4); letter-spacing: 0.06em; line-height: 1.3;
  margin-top: 3rem; margin-bottom: 1rem;
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--rule);
}
.legal h3 {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: 0.92rem; letter-spacing: 0.08em; color: var(--brass);
  margin-top: 1.85rem; margin-bottom: 0.6rem;
}
.legal p, .legal li { color: var(--fg-quiet); }
.legal p + p { margin-top: 1.1em; }
.legal ul { margin: 1.1rem 0; display: grid; gap: 0.65rem; }
.legal ul li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; }
.legal ul li::before { content: "/"; color: var(--brass); font-weight: 800; }
.legal a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-quiet); padding-bottom: 1.75rem; border-bottom: 2px solid var(--brass);
}

/* ------------------------------------------- 18. REDUCED MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
 .phero__media img { animation: none; transform: scale(1.02); }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rvl > span { transform: none !important; }
  .ticker__track { animation: none; }
  .mnav { transition: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .hdr, .mnav, .revs, .map, .cta, .scrollcue, body::after { display: none !important; }
}