/* =====================================================================================================
   Skull Crusher Training — base layer.
   Tokens, fonts, reset, type scale, layout, shared components and the global systems (nav, phone menu,
   progress line, background field, grain, cursor, intro curtain, stages, loops, reveals).
   Everything here sits in cascade layers, so the unlayered section files in css/sections/ always win
   without specificity fights. Reduced-motion overrides use !important inside a layer, which beats
   every unlayered rule.
   ===================================================================================================== */
@layer reset, base, components, systems, utilities;

/* ---------------------------------------------------------------- fonts (latin + latin-ext subsets) */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
  a { color: inherit; text-decoration: none; }
  fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ---------------------------------------------------------------- tokens + document */
@layer base {
  :root {
    /* colour (DESIGN-SPEC tokens) */
    --void: #050505;
    --ink: #0b0b0c;
    --ink-2: #141416;
    --line: rgba(237, 232, 223, .10);
    --line-2: rgba(237, 232, 223, .20);
    --bone: #EDE8DF;
    --mute: #A9A49B;
    --blood: #D91C1C;
    --blood-deep: #b31414;
    --blood-hot: #FF3B30;
    --gold: #C9A55A;
    --white: #ffffff;
    --radius: 2px;

    /* type */
    --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
    --f-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-h1: clamp(56px, 14vw, 176px);
    --fs-h2: clamp(44px, min(8vw, 13svh), 116px);   /* the hero h1 is min(9.2vw, 15svh) on landscape: h2 stays ~15% below it */
    --fs-h3: clamp(24px, 3.2vw, 36px);
    --fs-h3-lg: clamp(28px, 4.4vw, 56px);
    --fs-lead: clamp(19px, 0.35vw + 17.6px, 21px);
    --fs-body: clamp(16px, 0.2vw + 15.2px, 17px);
    --fs-small: 14px;
    --fs-label: clamp(12px, 0.12vw + 11.6px, 13px);
    --lh-display: 1.14;         /* Anton accented caps reach 1.10em: anything tighter makes Š Ć Č Ž touch the line above */
    --fs-acc: clamp(21px, 1.1vw + 14px, 32px);   /* accordion triggers (system education, FAQ) */
    --bone-dim: #D9D4CB;        /* long reading text inside plates (accordion answers), 13:1 on --ink */
    --lh-body: 1.6;
    --measure: 62ch;

    /* layout */
    --gutter: clamp(16px, 4.2vw, 56px);
    --maxw: 1320px;
    --nav-h: 64px;
    --gap: clamp(16px, 2vw, 28px);
    --section-pad: clamp(88px, min(12vw, 14vh), 176px);   /* short laptops (1280x800) do not get half-empty screens */
    --safe-l: max(var(--gutter), env(safe-area-inset-left));
    --safe-r: max(var(--gutter), env(safe-area-inset-right));

    /* motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.7, 0, .2, 1);
    --dur: .45s;

    /* stacking */
    --z-bg: 0;
    --z-content: 1;
    --z-nav: 50;
    --z-menu: 60;
    --z-grain: 70;
    --z-cursor: 80;
    --z-intro: 90;
    --z-skip: 100;

    color-scheme: dark;
  }
  @media (min-width: 768px) { :root { --nav-h: 76px; } }
  @media (orientation: landscape) and (min-width: 900px) { :root { --fs-h2: clamp(44px, min(9.47vw - 21.2px, 8vw, 13svh), 116px); } }
  /* short landscape phones: display type follows the height so a heading never fills the whole screen (h1 > h2 > h3 kept) */
  @media (orientation: landscape) and (max-height: 520px) {
    :root { --fs-h1: clamp(52px, 19svh, 92px); --fs-h2: clamp(34px, 10.5svh, 56px); --fs-h3: clamp(22px, 6svh, 30px); --fs-h3-lg: clamp(26px, 8svh, 40px); --nav-h: 60px; --section-pad: clamp(64px, 18svh, 96px); }
  }

  html { background: var(--void); }
  html.is-locked { overflow: hidden; }
  body {
    min-height: 100svh;
    background: var(--void);
    color: var(--bone);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  main, footer { position: relative; z-index: var(--z-content); }
  /* focus moves, caret scrolling and hash jumps all keep the target clear of the fixed nav */
  html { scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 16px); }
  #main { outline: none; }

  /* headings: Anton, uppercase via CSS, hierarchy h1 > h2 > h3 > body at every width */
  h1, h2, h3, .h1, .h2, .h3, .display {
    font-family: var(--f-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .005em;
    overflow-wrap: normal;
    hyphens: manual;
    text-wrap: balance;
  }
  h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
  h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
  h3, .h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: .01em; }
  .h3--lg { font-size: var(--fs-h3-lg); line-height: var(--lh-display); }
  h1 em, h2 em, h3 em { font-style: normal; }
  .hot { color: var(--blood-hot); font-style: normal; }
  .dot { color: var(--blood); }
  p { max-width: var(--measure); }
  strong, b { font-weight: 600; }
  .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--bone); }
  .mute { color: var(--mute); }
  .small { font-size: var(--fs-small); }

  ::selection { background: var(--blood); color: var(--white); }

  /* focus: bone ring, visible on red buttons and on dark plates */
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; border-radius: var(--radius); }

  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; left: 12px; top: 12px; z-index: var(--z-skip);
    padding: 14px 18px; background: var(--bone); color: var(--void);
    font-weight: 600; border-radius: var(--radius);
    transform: translateY(-180%); transition: transform .2s var(--ease-out);
  }
  .skip-link:focus, .skip-link:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------- layout + shared components */
@layer components {
  /* container: 16px gutter on phones, safe areas on landscape phones */
  .wrap {
    width: 100%;
    max-width: calc(var(--maxw) + var(--safe-l) + var(--safe-r));
    margin-inline: auto;
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }

  /* section rhythm: every [data-section] clips its own decorative bleed sideways */
  [data-section] { overflow-x: clip; }
  .section { position: relative; isolation: isolate; padding-block: var(--section-pad); }
  main > .section + .section { border-top: 1px solid var(--line); }
  .label + :is(h1, h2, h3, .h1, .h2, .h3) { margin-top: clamp(12px, 1.4vw, 20px); }
  .section-head { display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start; margin-bottom: clamp(36px, 5vw, 72px); }
  .section-head > :is(h2, .h2) { margin-top: 2px; }
  .section-cta { margin-top: clamp(40px, 6vw, 88px); }

  .split { display: grid; gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 88px); align-items: start; }
  @media (min-width: 1024px) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .split > .section-head { margin-bottom: 0; }
  }
  .split + .split, .split + .grid, .grid + .split, .split + .media, .grid + .grid { margin-top: clamp(40px, 6vw, 96px); }

  .grid { display: grid; gap: var(--gap); }
  @media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .stack > * + * { margin-top: var(--stack, 16px); }

  /* label: JetBrains Mono, uppercase, the red square marker from the original */
  .label {
    display: flex; align-items: flex-start; gap: .75em; width: fit-content; max-width: 100%;
    font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.45;
    letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  }
  .nw { white-space: nowrap; }   /* names and "item ·" chunks that must not break inside */
  .label::before { content: ""; flex: 0 0 auto; width: .62em; height: .62em; margin-top: .4em; background: var(--blood); }
  .label--plain::before { content: none; }
  .label--gold { color: var(--gold); }
  .label--mute { color: var(--mute); }
  .label--hot { color: var(--blood-hot); }

  /* buttons: blood fill, white text (5.1:1), 52px tall */
  .btn {
    --btn-bg: var(--ink-2); --btn-fg: var(--bone); --btn-line: var(--line-2);
    display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 52px; padding: 14px 20px 14px 22px;
    background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line); border-radius: var(--radius);
    font: 600 15px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; text-align: left;
    transition: background-color .25s, color .25s, border-color .25s;
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
  }
  .btn > span[aria-hidden] { font-size: 1.15em; line-height: 1; }
  .btn--primary { --btn-bg: var(--blood); --btn-fg: var(--white); --btn-line: transparent; }
  .btn--ghost { --btn-bg: transparent; }
  .btn--sm { min-height: 44px; padding: 10px 14px; gap: 14px; font-size: 13px; white-space: nowrap; }
  .btn--block { width: 100%; }
  /* lg: the end-of-section program CTAs (full width on phones, one size everywhere) */
  .btn--lg { min-height: 60px; padding: 14px 22px 14px 24px; gap: 32px; }
  @media (max-width: 639px) {
    .btn--lg { width: 100%; gap: 16px; padding-inline: 18px 16px; font-size: 14px; letter-spacing: .03em; }
  }
  @media (min-width: 1024px) { .btn--lg { min-height: 68px; padding-inline: 32px 28px; gap: 48px; font-size: 16px; } }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { --btn-bg: #1d1d20; --btn-line: rgba(237, 232, 223, .32); }
    .btn--primary:hover { --btn-bg: var(--blood-deep); --btn-line: transparent; }
  }
  .btn:active { --btn-bg: #101012; }
  .btn--primary:active { --btn-bg: #9e1111; }

  .line-link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding-top: 10px; margin-top: auto;
    border-top: 1px solid var(--line-2); font-weight: 600;
    transition: color .25s;
  }
  .line-link > span[aria-hidden] { color: var(--blood-hot); font-size: 1.15em; }
  @media (hover: hover) and (pointer: fine) { .line-link:hover { color: var(--white); } }

  /* plates: every block of reading text sits on one (solid, never over moving imagery) */
  .plate {
    background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(20px, 2.6vw, 36px);
  }
  .plate.lead { padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px); width: fit-content; }
  .plate--raised { background: var(--ink-2); }
  /* hint: a short touch hint ("Prevuci") in label type with a nudging arrow; one style for every swipe target */
  .hint {
    display: inline-flex; align-items: center; gap: .7em; margin: 0; max-width: none;
    font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap;
  }
  .hint__arrow { display: inline-block; color: var(--blood-hot); }
  html[data-motion="full"] .hint__arrow { animation: sc-nudge 1.6s var(--ease-in-out) infinite; }
  html[data-motion="full"] .hint__arrow--back { animation-name: sc-nudge-back; }
  @keyframes sc-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  @keyframes sc-nudge-back { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

  /* plate mark: the one accent for section intros and feature plates, a short blood bar over the top edge.
     (Active/open states use a blood bar on the left edge instead: phases, extras, accordion items.) */
  .plate--mark { position: relative; }
  .plate--mark::before {
    content: ""; position: absolute; left: -1px; top: -1px; width: clamp(56px, 18%, 150px); height: 3px;
    background: var(--blood); pointer-events: none;
  }

  .card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  }
  .card__media { border-radius: 0; }
  .card__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 32px); flex: 1; }
  .card__body > p:not(.label) { color: var(--bone); }

  .tag {
    position: absolute; z-index: 2; top: 12px; left: 12px; padding: 7px 10px;
    background: var(--ink); color: var(--bone); border-radius: var(--radius);
    font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
  }
  .price { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--gold); white-space: nowrap; }
  .num { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; color: var(--blood-hot); }
  .outline-display {
    font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .8;
    color: transparent; -webkit-text-stroke: 1px rgba(237, 232, 223, .14); pointer-events: none; -webkit-user-select: none; user-select: none;
  }
  /* bleed-text: giant decorative type behind a section (aria-hidden in the markup) */
  .bleed-text { position: absolute; z-index: -1; top: clamp(24px, 5vw, 72px); right: -.03em; margin: 0; max-width: none; font-size: clamp(170px, 36vw, 560px); white-space: nowrap; }

  /* media: aspect-ratio box with object-fit cover; --ar and --pos come from the asset manifest */
  .media { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background: var(--ink-2); border-radius: var(--radius); }
  .media > img, .media > picture, .media > video, .media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .media img, .media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

  /* bleed: absolute full-size layer for background media inside an isolated section */
  .bleed { position: absolute; inset: 0; overflow: hidden; }
  .section > .bleed, .cover > .bleed { z-index: -1; }
  .bleed > img:not(.subject), .bleed > video, .bleed > picture, .bleed > picture > img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  }
  .shade { pointer-events: none; }

  /* scene: a framed block with its own background layer (.bleed) and copy on a plate above it */
  .scene {
    position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
    min-height: clamp(420px, 56vw, 640px); padding: clamp(16px, 3.6vw, 48px); border-radius: var(--radius);
    background: var(--ink);
  }
  .scene > .bleed { z-index: -1; }
  .scene > .plate { position: relative; }

  /* stage-box: a sized host for a 3D stage or its poster (square unless --ar says otherwise) */
  .stage-box { position: relative; width: 100%; aspect-ratio: var(--ar, 1 / 1); }
  .shade--section { background: linear-gradient(180deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 40%, rgba(5, 5, 5, .7) 75%, var(--void) 100%); }

  /* cover: a full-viewport block with background media and copy anchored low (hero pattern) */
  .cover { position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(640px, 100svh); }
  @media (orientation: landscape) and (max-height: 560px) { .cover { min-height: 100svh; } }
  .cover .lead { max-width: 36ch; }
  .cover__foot { position: absolute; z-index: 1; right: var(--safe-r); bottom: clamp(16px, 3svh, 28px); margin: 0; }
  @media (orientation: portrait) and (max-width: 767px) { .cover__foot { bottom: auto; top: calc(var(--nav-h) + env(safe-area-inset-top) + 12px); } }
  .cover__content { position: relative; padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 32px); padding-bottom: clamp(36px, 8svh, 96px); }
  @media (orientation: landscape) and (max-height: 520px) { .cover__content { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 20px; } }
  .shade--cover {
    background:
      linear-gradient(0deg, var(--void) 0%, rgba(5, 5, 5, .96) 34%, rgba(5, 5, 5, .7) 52%, rgba(5, 5, 5, 0) 74%),
      linear-gradient(180deg, rgba(5, 5, 5, .7) 0%, rgba(5, 5, 5, 0) 22%);
  }
  @media (min-width: 1024px) and (orientation: landscape) {
    .shade--cover {
      background:
        linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .72) 34%, rgba(5, 5, 5, 0) 62%),
        linear-gradient(0deg, var(--void) 0%, rgba(5, 5, 5, 0) 30%),
        linear-gradient(180deg, rgba(5, 5, 5, .6) 0%, rgba(5, 5, 5, 0) 20%);
    }
  }
  /* subject: a cutout standing in the cover (centred upper part on phones, right of centre on desktop) */
  .subject {
    position: absolute; left: 50%; top: calc(var(--nav-h) + env(safe-area-inset-top)); bottom: auto;
    height: 56%; width: auto; max-width: none; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  @media (orientation: landscape) {
    .subject { top: auto; bottom: 0; height: 94%; left: auto; right: 4vw; transform: none; }
  }

  /* accordion (native details as the base; builders may enhance with height animation) */
  .acc { display: grid; }
  .acc__item { border-top: 1px solid var(--line-2); }
  .acc__item:last-child { border-bottom: 1px solid var(--line-2); }
  .acc.plate > .acc__item:first-child { border-top: 0; }
  .acc.plate > .acc__item:last-child { border-bottom: 0; }
  .acc__item > summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: 60px; padding: 14px 0; font-weight: 600; font-size: clamp(17px, .5vw + 15px, 20px); line-height: 1.35;
  }
  .acc__item > summary::-webkit-details-marker { display: none; }
  .acc__item > summary::after {
    content: ""; flex: 0 0 14px; width: 14px; height: 14px;
    background: linear-gradient(var(--blood-hot), var(--blood-hot)) center / 100% 2px no-repeat,
                linear-gradient(var(--blood-hot), var(--blood-hot)) center / 2px 100% no-repeat;
    transition: transform .3s var(--ease-out);
  }
  .acc__item[open] > summary::after { transform: rotate(45deg); }
  .acc__body { padding: 0 0 22px; color: var(--mute); }
  @media (hover: hover) and (pointer: fine) { .acc__item > summary:hover { color: var(--white); } }

  .steps { display: grid; gap: 14px; margin: 0; padding-left: 1.3em; }
  .steps > li { max-width: var(--measure); }
  .steps > li::marker { font-family: var(--f-mono); color: var(--blood-hot); }

  /* form controls: 16px+ type (no iOS zoom), 48px+ tall */
  .form { display: grid; gap: 22px; }
  .seg { display: grid; gap: 10px; container-type: inline-size; }
  .seg__legend, .field__label {
    font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
  }
  .seg__legend { margin-bottom: 10px; }
  .seg__opts { display: grid; gap: 8px; }
  /* three across only when the control itself has room (the form column is narrow on tablets in landscape) */
  @container (min-width: 420px) { .seg__opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .seg__opt { position: relative; display: flex; cursor: pointer; }
  .seg__opt > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .seg__opt > span {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 14px;
    border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--void);
    font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; transition: background-color .25s, border-color .25s, color .25s;
  }
  .seg__opt > input:checked + span { background: var(--blood); border-color: transparent; color: var(--white); }
  .seg__opt > input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 2px; }
  .field { display: grid; gap: 8px; }
  .field__label { display: flex; align-items: flex-end; min-height: 44px; padding-bottom: 2px; }
  .field__input {
    width: 100%; min-height: 54px; padding: 13px 16px; font-size: 17px; line-height: 1.4;
    color: var(--bone); background: var(--void); border: 1px solid var(--line-2); border-radius: var(--radius);
    -webkit-appearance: none; appearance: none;
  }
  .field__input::placeholder { color: #7f7a71; opacity: 1; }
  .field__input:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; border-color: var(--bone); }
  .field__input[aria-invalid="true"] { border-color: var(--blood-hot); }
  .field__error { min-height: 0; color: #ff8a80; font-size: var(--fs-small); }
  .field__error:empty { display: none; }
  .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; line-height: 1.5; text-wrap: pretty; }
  .check > input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blood); cursor: pointer; }
  .form__note { font-size: var(--fs-small); color: var(--mute); }
  .form__status:empty { display: none; }

  /* brand lockup ("MB." + SKULL CRUSHER / TRAINING) */
  .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; flex: 0 0 auto; }
  .brand__mark { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .01em; }
  .brand__mark > span { color: var(--blood); }
  .brand__name { font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.25; letter-spacing: .1em; }
  @media (max-width: 479px) { .nav .brand__name { display: none; } }   /* phones: monogram + CTA + menu button */

  .footer { border-top: 1px solid var(--line); background: var(--void); }
  .footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding-block: 20px calc(20px + env(safe-area-inset-bottom)); }
  .footer__link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
  @media (hover: hover) and (pointer: fine) { .footer__link:hover { color: var(--blood-hot); } }

  /* film strip base: native horizontal scroll + snap (drag/inertia added by the section) */
  .strip { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: clamp(48px, 7vw, 112px); }
  .strip::-webkit-scrollbar { display: none; }
  .strip__track { display: flex; gap: 12px; width: max-content; padding-inline: var(--safe-l) var(--safe-r); }
  .strip__frame { flex: 0 0 auto; width: clamp(220px, 72vw, 380px); scroll-snap-align: center; }
  @media (min-width: 1024px) { .strip__frame { scroll-snap-align: start; } }
}

/* ---------------------------------------------------------------- global systems */
@layer systems {
  /* nav: transparent over the hero, ink plate + hairline after 80px (.is-scrolled from nav.js) */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid transparent;
    transition: background-color .3s, border-color .3s, transform .3s var(--ease-out);
  }
  /* very short viewport with a text field focused (on-screen keyboard): the field gets the whole height */
  @media (max-height: 420px) {
    html:has(#waitlist input:is([type="email"], [type="text"]):focus) { scroll-padding-top: 16px; }
    html:has(#waitlist input:is([type="email"], [type="text"]):focus) .nav { transform: translateY(-100%); }
  }
  .nav.is-scrolled, .no-js .nav { background: var(--ink); border-bottom-color: var(--line); }
  .nav__bar { display: flex; align-items: center; gap: 10px; height: var(--nav-h); }
  .nav__links { display: none; margin-left: auto; gap: 4px; }
  .nav__links > a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    font-size: 14px; font-weight: 500; color: var(--bone); transition: color .2s;
  }
  .nav__links > a[aria-current="true"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--blood); }
  @media (hover: hover) and (pointer: fine) { .nav__links > a:hover { color: var(--blood-hot); } }
  .nav__cta { margin-left: auto; }
  .nav__menu-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; }
  .nav__burger { display: grid; gap: 7px; width: 22px; }
  .nav__burger > i { display: block; height: 2px; background: var(--bone); }
  .nav__burger > i:last-child { width: 14px; justify-self: end; }
  @media (min-width: 768px) {
    .nav__links { display: flex; }
    .nav__cta { margin-left: 8px; }
    .nav__menu-btn { display: none; }
  }
  .no-js .nav__menu-btn { display: none; }
  .nav__progress { position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none; }
  .nav__progress-bar { display: block; height: 100%; background: var(--blood); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }

  /* phone menu: full-screen overlay, big Anton links, focus-trapped (nav.js) */
  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: flex; flex-direction: column;
    background: var(--void); overflow-y: auto; overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top); padding-bottom: calc(28px + env(safe-area-inset-bottom));
    opacity: 0; transition: opacity .3s var(--ease-out);
  }
  .menu.is-open { opacity: 1; }
  .menu__bar { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex: 0 0 auto; border-bottom: 1px solid var(--line); }
  .menu__close { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; }
  .menu__x { position: relative; width: 22px; height: 22px; }
  .menu__x::before, .menu__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--bone); }
  .menu__x::before { transform: rotate(45deg); }
  .menu__x::after { transform: rotate(-45deg); }
  .menu__links { display: flex; flex-direction: column; justify-content: center; flex: 1; padding-block: 32px; }
  @media (orientation: landscape) and (max-height: 520px) { .menu__links { padding-block: 10px; } .menu__links > a { min-height: 48px; } }
  .menu__links > a {
    display: flex; align-items: center; min-height: 64px; padding: .22em 0 .02em; border-bottom: 1px solid var(--line);
    font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, min(13vw, 17svh), 84px); line-height: var(--lh-display); text-transform: uppercase;
    transform: translateY(14px); opacity: 0; transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), color .2s;
  }
  .menu.is-open .menu__links > a { transform: none; opacity: 1; }
  .menu.is-open .menu__links > a:nth-child(2) { transition-delay: .05s; }
  .menu.is-open .menu__links > a:nth-child(3) { transition-delay: .1s; color: var(--blood-hot); }
  @media (min-width: 768px) { .menu { display: none !important; } }

  /* background field: fixed behind everything; static gradient is the fallback (and shows until the canvas is live) */
  .bg {
    position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none;
    background:
      radial-gradient(90% 55% at 50% 108%, rgba(217, 28, 28, .17), rgba(217, 28, 28, 0) 62%),
      radial-gradient(60% 45% at 12% 18%, rgba(169, 164, 155, .07), rgba(169, 164, 155, 0) 70%),
      radial-gradient(55% 40% at 88% 40%, rgba(169, 164, 155, .05), rgba(169, 164, 155, 0) 70%),
      var(--void);
  }
  .bg__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; opacity: 0; transition: opacity 1.2s var(--ease-out); }
  html.bg-live .bg__canvas { opacity: 1; }
  .no-gl .bg__canvas, [data-motion="reduced"] .bg__canvas { display: none; }
  .bg__vignette { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .6) 100%); }

  /* grain: SVG noise, very low opacity, above content but never interactive */
  .grain {
    position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }
  html[data-pointer="fine"][data-motion="full"] .grain { inset: -90px; animation: sc-grain 1s steps(6) infinite; }
  @keyframes sc-grain {
    0% { transform: translate(0, 0); } 17% { transform: translate(-40px, 22px); } 33% { transform: translate(28px, -36px); }
    50% { transform: translate(-18px, 46px); } 67% { transform: translate(44px, 12px); } 83% { transform: translate(-30px, -24px); } 100% { transform: translate(0, 0); }
  }

  /* cursor (pointer:fine only, created by cursor.js): dot + lagging ring; native cursor kept over form fields */
  .cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; display: none; }
  html.has-cursor .cursor { display: block; }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select, [contenteditable]) { cursor: auto !important; }
  html.has-cursor input:not([type="radio"]):not([type="checkbox"]):is([type="email"], [type="text"], [type="search"]), html.has-cursor textarea { cursor: text !important; }
  .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--blood-hot); }
  .cursor__ring {
    display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1px solid rgba(237, 232, 223, .55);
    transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background-color .3s, border-color .3s, opacity .3s;
  }
  .cursor__label { font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); opacity: 0; transition: opacity .2s; }
  .cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(217, 28, 28, .14); border-color: var(--blood); }
  .cursor.is-label .cursor__ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: rgba(217, 28, 28, .85); border-color: transparent; }
  .cursor.is-label .cursor__label { opacity: 1; }
  .cursor.is-label .cursor__dot { opacity: 0; }                                                   /* the label reads whole */
  .cursor.is-down .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .cursor.is-label.is-down .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; }   /* the label stays inside its disc */
  .cursor.is-hidden .cursor__dot, .cursor.is-hidden .cursor__ring { opacity: 0; }
  .cursor.is-spot .cursor__ring { opacity: 0; }                                                     /* spotlight areas: the light is the ring, the dot keeps the pointer findable */
  [data-magnetic] { translate: var(--mx, 0px) var(--my, 0px); }

  /* intro curtain: pure CSS timeline (<= 1.15 s), only when the head script set .intro-on */
  .intro { display: none; }
  html.intro-on .intro {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: var(--z-intro);
    background: #000; overflow: hidden;
    animation: sc-intro-lift .42s var(--ease-in-out) .74s both;
  }
  /* the curtain's light hangs where the hero's filmed lamp hangs (same fractions of the content frame as hero.css) */
  .intro { --intro-lamp: .5; --intro-frame: min(100%, calc(var(--maxw) + var(--safe-l) + var(--safe-r))); }
  @media (orientation: landscape) { .intro { --intro-lamp: .68; } }
  @media (orientation: landscape) and (max-aspect-ratio: 3/2) { .intro { --intro-lamp: .7; } }
  @media (orientation: landscape) and (max-height: 520px) { .intro { --intro-lamp: .78; } }
  .intro__light {
    position: absolute; top: -12%; width: 150vmax; height: 120vh; transform: translateX(-50%);
    left: var(--intro-light-x, calc((100% - var(--intro-frame)) / 2 + var(--intro-lamp) * var(--intro-frame)));
    background: radial-gradient(28% 62% at 50% 0%, rgba(237, 232, 223, .34), rgba(237, 232, 223, .08) 46%, rgba(237, 232, 223, 0) 72%);
    opacity: 0; animation: sc-intro-snap .5s linear .1s both;
  }
  .intro__mark {
    position: relative; font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 22vmin, 180px); line-height: 1; color: var(--bone);
    opacity: 0; animation: sc-intro-mark .4s var(--ease-out) .3s both;
  }
  .intro__mark > span { color: var(--blood); }
  @keyframes sc-intro-snap { 0% { opacity: 0; } 30% { opacity: 1; } 38% { opacity: .35; } 46% { opacity: 1; } 100% { opacity: 1; } }
  @keyframes sc-intro-mark { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes sc-intro-lift { from { transform: translateY(0); visibility: visible; } to { transform: translateY(-101%); visibility: hidden; } }

  /* 3D stage hosts: the shared canvas is appended into the active host by stage.js.
     A host that is also .bleed keeps .bleed's absolute full-size box (this layer would otherwise beat it). */
  [data-stage]:not(.bleed) { position: relative; }
  [data-stage] > .stage-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out); }
  [data-stage].is-live > .stage-canvas { opacity: 1; }
  [data-stage] > .stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s var(--ease-out); -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
  [data-stage].is-live > .stage-poster { opacity: 0; pointer-events: none; }

  /* loop videos (loopvideo.js): poster first, video fades in only after a frame is presented */
  [data-loop] { overflow: hidden; }
  [data-loop]:not(.bleed) { position: relative; }
  [data-loop] > picture, [data-loop] > picture > img, [data-loop] > .loop__poster, [data-loop] > .loop__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  }
  [data-loop] > .loop__video { opacity: 0; transition: opacity .6s var(--ease-out); }
  [data-loop].is-playing > .loop__video { opacity: 1; }

  /* reveal (reveal.js): SplitText lines are masked; nothing is hidden by CSS, so no-JS shows everything */
  .split-line { will-change: transform; }
  /* extend each line mask upward so accents above the caps (up to 1.10em) are never clipped; layout is unchanged */
  .split-line-mask { padding-top: .24em; margin-top: -.24em; }
  [data-reveal] { backface-visibility: hidden; }
}

/* ---------------------------------------------------------------- reduced motion + fallbacks */
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  }
  [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  [data-motion="reduced"] .grain { animation: none !important; inset: 0 !important; }
  .no-js .cursor, .no-js .intro { display: none !important; }
  .is-hidden-visually { opacity: 0 !important; }
}