html, body { background: #0B0B0D; color: #F2EFE8; }

:root {
  color-scheme: dark;
  --bg: #0B0B0D;
  --surface: #141416;
  --gold: #D4AF37;
  --red: #D92B2B;
  --ink: #F2EFE8;
  --muted: #B5B1A8;
  --line: rgb(255 255 255 / .14);
  --display: Anton, Impact, 'Arial Narrow', sans-serif;
  --body: Manrope, Arial, sans-serif;
  --gutter: clamp(24px, 5.55vw, 80px);
  --snap: linear(0, .24 9%, .59 20%, .87 33%, 1.04 48%, 1.065 61%, 1.025 79%, 1);
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; aspect-ratio: auto; object-fit: cover; }
.media-frame { overflow: hidden; }
button svg, a svg { flex-shrink: 0; }
svg { width: 24px; height: 24px; }
p, figure, h1, h2, h3 { margin: 0; }
button { border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
html { scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
section { scroll-margin-top: 30px; }
.wrap { width: min(100%, 1600px); padding-inline: var(--gutter); margin-inline: auto; }
.section { padding-block: clamp(80px, 8.8vw, 126px); }
.gold { color: var(--gold); }
.eyebrow { font-size: 10px; line-height: 1.7; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.red-line { display: inline-block; width: 27px; height: 2px; background: var(--red); vertical-align: middle; margin-right: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; background: var(--gold); color: var(--bg); padding: 12px; translate: 0 -200%; &:focus { translate: 0; } }
.button { min-height: 52px; padding: 17px 23px; display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; font-size: 11px; line-height: 1.5; font-weight: 800; letter-spacing: .04em; text-align: left; border: 1px solid transparent;
  & > span { font-size: 20px; line-height: .8; }
  &:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    transition: translate 360ms var(--snap), scale 360ms var(--snap);
    &:hover { translate: 0 -2px; }
    &:active { scale: .98; translate: 0; }
  }
}
.button-gold { background: var(--gold); color: var(--bg); }
.button-outline { background: transparent; border-color: rgb(255 255 255 / .35); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px 0; background: none; border-bottom: 1px solid rgb(212 175 55 / .4); font-size: 11px; font-weight: 700; text-align: left;
  & span { color: var(--gold); font-size: 19px; }
  &:hover { color: var(--gold); }
}
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; font-size: 13px; font-weight: 800; letter-spacing: .045em;
  & small { display: block; font-size: 8px; margin-top: 5px; letter-spacing: .19em; font-weight: 500; color: var(--muted); }
}
.brand-mark { width: 35px; height: 39px; color: var(--gold); }
.desktop-nav { display: flex; gap: clamp(20px, 2.7vw, 39px); & a { font-size: 11px; font-weight: 600; color: #CBC8C1; padding-block: 14px; &:hover { color: var(--gold); } } }
.header-cta { font-size: 10px; padding: 13px 18px; min-height: 44px; }
.menu-toggle { display: none; align-items: center; gap: 12px; background: transparent; min-height: 48px; & svg { stroke: currentColor; stroke-width: 1.5; fill: none; } }
.mobile-nav { position: absolute; top: calc(100% - 1px); inset-inline: 0; background: #111113; border-bottom: 1px solid var(--gold); padding: 15px var(--gutter) 25px; & a { min-height: 60px; display: flex; align-items: center; justify-content: space-between; font-size: 19px; border-bottom: 1px solid var(--line); & span { font-size: 10px; color: var(--gold); } } }

/* The photograph moves inside a static mask; clipping itself never animates. */
.hero { position: relative; min-height: 850px; min-height: max(850px, 100svh); isolation: isolate; display: flex; flex-direction: column; justify-content: center; overflow: clip; view-timeline: --hero; }
.hero-media { position: absolute; inset: 0; z-index: -3;
  & img { width: 100%; height: 110%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 15%; filter: grayscale(.7) contrast(1.08) brightness(.72); }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: scroll()) and (animation-range: 0px 100px)) {
      & img { animation: hero-depth linear both; animation-timeline: scroll(root); animation-range: 0px 100svh; }
    }
  }
}
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, #0B0B0D 15%, rgba(11,11,13,0.45) 100%), linear-gradient(90deg, rgb(11 11 13 / .92), rgb(11 11 13 / .68) 30%, transparent 75%); }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .27; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgb(255 255 255 / .1) 0); background-size: 25% 100%; pointer-events: none; }
.hero::after { content: ''; position: absolute; top: 23%; right: -60px; height: 370px; width: 80px; background: linear-gradient(180deg, rgb(217 43 43 / .55), transparent); rotate: 18deg; z-index: -1; }
.hero-content { padding-top: 139px; padding-bottom: 150px; }
.hero-channels { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px;
  & a { display: grid; align-content: center; min-height: 44px; font-size: 9px; color: #D5CDBB; line-height: 1.8; & span { font-size: 8px; color: var(--muted); } &:hover { color: var(--gold); } }
}
.hero-intro { color: #D1CCC1; margin-bottom: 28px; }
.label-divider { color: #6D6861; padding-inline: 12px; }
h1 { font-family: var(--display); font-weight: 400; letter-spacing: -.012em; line-height: 1.01; max-width: 940px; }
.hero-name { display: block; font-family: var(--body); font-size: clamp(16px, 1.65vw, 24px); font-weight: 500; letter-spacing: .2em; margin-bottom: 15px; }
.headline-line { display: block; font-size: clamp(90px, 9.7vw, 144px); }
.full-stop { color: var(--red); }
.hero-description { font-size: 14px; line-height: 1.9; margin-top: 23px; font-weight: 600; & > span { color: var(--muted); font-weight: 400; } }
.hero-role { color: #ADA99E; font-size: 10px; margin-top: 12px; letter-spacing: .02em; }
sup { font-size: 9px; color: var(--gold); }
.hero-actions { display: flex; align-items: center; gap: 31px; margin-top: 27px; }
.watch-link { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; &:hover { color: var(--gold); } }
.play-icon { border: 1px solid rgb(255 255 255 / .45); border-radius: 50%; width: 44px; height: 44px; display: grid; place-content: center; & svg { width: 14px; height: 14px; fill: currentColor; } }
.external-arrow { color: var(--muted); }
.hero-photo-label { position: absolute; right: var(--gutter); bottom: 206px; display: flex; gap: 15px; align-items: center; font-size: 8px; letter-spacing: .13em; color: #E3DED5; & small { display: block; margin-top: 7px; color: #AAA79F; letter-spacing: .03em; font-size: 9px; } }
.crosshair { font-size: 38px; color: var(--gold); font-weight: 400; }
.hero-bottom { position: absolute; bottom: 35px; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 35px; padding-top: 24px; border-top: 1px solid var(--line); width: 71%;
  & > div + div { border-left: 1px solid var(--line); padding-left: 35px; }
  & strong { font-family: var(--display); font-size: 45px; font-weight: 400; letter-spacing: .01em; & span { font-family: var(--body); color: var(--gold); font-size: 10px; font-weight: 600; vertical-align: middle; letter-spacing: 0; } }
  & p { color: var(--muted); font-size: 9px; margin-top: 4px; }
  & sup { vertical-align: top; font-family: var(--body); }
}
.scroll-cue { display: flex; align-items: center; gap: 24px; margin-top: 25px; & span { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } & svg { stroke: var(--gold); stroke-width: 1.2; fill: none; height: 33px; } }
.hero-side-note { position: absolute; right: 19px; top: 42%; writing-mode: vertical-rl; letter-spacing: .23em; font-size: 8px; color: #96928B; }
.hero-intro, .hero-name, .headline-line, .hero-description, .hero-role, .hero-actions {
  @media (prefers-reduced-motion: no-preference) { animation: intro 700ms cubic-bezier(.2,.7,.2,1) both; }
}
.hero-name { animation-delay: 80ms; }
.headline-line { animation-delay: 160ms; & + .headline-line { animation-delay: 240ms; } }
.hero-description { animation-delay: 320ms; }
.hero-role { animation-delay: 370ms; }
.hero-actions { animation-delay: 420ms; }
.manifesto-strip { display: flex; justify-content: space-evenly; align-items: center; gap: 24px; padding: 21px var(--gutter); background: var(--gold); color: #15130C; font-family: var(--display); font-size: clamp(15px, 1.65vw, 24px); letter-spacing: .05em; & i { font-style: normal; font-size: 20px; } }
.section-index { display: flex; justify-content: space-between; align-items: center; gap: 30px; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 56px; & > :first-child { color: var(--gold); } }
.philosophy-layout { display: grid; grid-template-columns: 1fr 1.04fr; align-items: center; gap: clamp(35px, 7.2vw, 104px); }
.master-photo { position: relative; padding-bottom: 70px; }
.photo-wipe { position: relative; overflow: clip; clip-path: polygon(0 0, 88% 0, 100% 11%, 100% 100%, 0 100%); background: var(--surface); height: 535px;
  aspect-ratio: 4 / 5;
  & img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.1); }
}
.wipe-panel { position: absolute; inset: -2px -40%; background: var(--bg); pointer-events: none; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); translate: 120% 0; }
.master-photo figcaption { display: flex; align-items: center; gap: 10px; margin-top: 17px; font-size: 9px; color: var(--muted); & a { margin-left: auto; color: var(--gold); padding: 10px; } }
.small-cross { color: var(--gold); font-size: 20px; }
.photo-tag { background: var(--gold); color: var(--bg); padding: 23px 25px; position: absolute; right: -24px; bottom: 15px; width: 205px; & > span { font-size: 8px; font-weight: 700; letter-spacing: .2em; } & strong { display: block; font: 28px var(--display); margin-top: 5px; } }
h2 { font-family: var(--display); font-size: clamp(43px, 4.8vw, 70px); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
.philosophy-copy { & h2 { font-size: clamp(36px, 3.7vw, 54px); margin-block: 19px 25px; } & > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; color: var(--muted); margin-top: 16px; } & .text-link { margin-top: 19px; } }
.discipline-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-block: 1px solid var(--line); margin-top: 29px; padding-block: 22px;
  & strong { font-family: var(--display); font-size: 38px; font-weight: 400; color: var(--gold); & span { font: 8px var(--body); letter-spacing: .04em; margin-left: 6px; } }
  & div > span { display: block; font-size: 11px; line-height: 1.9; color: var(--muted); margin-top: 7px; }
}
.philosophy-copy > p.small-copy { font-size: 12px; }
.records { background: #101012; border-block: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 45px; }
.heading-aside { width: 260px; margin-bottom: 5px; & p { font-size: 13px; line-height: 1.9; color: var(--muted); } & > .eyebrow { display: block; font-size: 8px; margin-top: 18px; } }
.record-toolbar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.filters { display: flex; gap: 25px; & button { min-height: 48px; padding: 16px 0; background: none; color: var(--muted); font-size: 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; & > span { font-size: 8px; color: #AAA69F; margin-left: 5px; } &[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); } &:hover { color: var(--ink); } } }
.ledger-caption { font-size: 8px; color: #99948A; letter-spacing: .15em; }
.record-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 18px; view-transition-name: record-ledger; }
.record-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: 16 / 10;
  & img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(.65) contrast(1.08) brightness(.55); }
}
.record-card { position: relative; overflow: clip; min-height: 375px; background: #19191B; border: 1px solid var(--line);
  & > img { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.6); }
  & h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .015em; margin-block: 6px 12px; }
  & p { font-size: 13px; line-height: 1.8; color: #C7C2B7; max-width: 390px; }
  & .text-link { margin-top: 14px; font-size: 11px; min-height: 44px; }
}
.record-content { position: relative; min-height: inherit; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 32px; }
.card-topline { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--muted); gap: 20px; position: relative; z-index: 1; }
.record-tag { font-size: 7px; letter-spacing: .14em; padding: 8px 9px; border: 1px solid rgb(255 255 255 / .3); color: var(--ink); }
.record-number { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 6.8vw, 100px); line-height: 1; color: var(--gold); letter-spacing: -.01em; & > span { display: inline-block; font: 8px var(--body); letter-spacing: .1em; margin-left: 13px; color: #D1C8AD; } & sup { vertical-align: top; } }
.record-knuckles { grid-row: span 2; min-height: 808px; & .record-media img { object-position: 78% center; } }
.record-card:has(.record-media) .record-content { height: 100%; background: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .3) 27%, #101011 100%); }
.record-endurance { min-height: 395px; background: linear-gradient(135deg, #29261A, #171713); & .record-media img { object-position: 58% 35%; } }
.endurance-lines { position: absolute; top: 94px; right: -75px; width: 320px; height: 95px; background: repeating-linear-gradient(90deg, transparent 0 14px, rgb(212 175 55 / .2) 14px 15px); rotate: -35deg; mask-image: linear-gradient(0deg, transparent, black 90%); }
.record-power { min-height: 395px; & .record-bottom { margin-top: 55px; } & .record-number { font-size: 76px; } }
.iron-art { position: absolute; right: 30px; top: 67px; display: flex; gap: 14px; rotate: 28deg; & i { height: 90px; width: 4px; background: linear-gradient(90deg, #74716A, #252524); clip-path: polygon(0 0,100% 0,100% 44%,0 49%,100% 53%,100% 100%,0 100%,0 54%,100% 49%,0 44%); } }
.record-precision { background: #191817; min-height: 370px; & h3 { font-size: 30px; margin-top: 12px; } & .record-bottom { margin-top: 58px; position: relative; } & .eyebrow { font-size: 8px; } }
.precision-art { width: 200px; height: 120px; position: absolute; right: 8px; top: 61px; fill: none; stroke: rgb(212 175 55 / .3); stroke-width: .8; }
.record-footnote { font-size: 9px; color: #A7A299; line-height: 1.8; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 15px; & a { color: #D3C8A6; &:hover { color: var(--gold); } } }
.record-grid[data-filtered="true"] { & .record-card { min-height: 450px; grid-row: auto; } }
.precision-note { border: 1px solid var(--line); padding: 22px 28px; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 25px; & p { font-size: 12px; color: var(--muted); margin-top: 9px; line-height: 1.8; } }
.reel-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; margin-top: 40px; padding: 32px; border: 1px solid var(--line); background: #171718; scroll-margin-top: 30px; }
.reel-copy { min-width: 0;
  & .eyebrow { font-size: 8px; }
  & h3 { font: 400 clamp(32px, 3.2vw, 46px)/1.12 var(--display); margin-top: 20px; }
  & > p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 20px; }
  & > p.reel-context { font-size: 11px; }
}
.reel-player { width: 100%; min-width: 0;
  & video { display: block; width: 100%; height: auto; aspect-ratio: 30 / 23; object-fit: contain; background: #000; border: 1px solid var(--line); }
  & figcaption { margin-top: 14px; font-size: 10px; color: var(--muted); line-height: 1.8; }
}
.reel-feature--portrait .reel-player { max-width: 320px; justify-self: center; & video { aspect-ratio: 9 / 16; } }
.video-source-links { display: flex; flex-wrap: wrap; gap: 8px 23px; margin-top: 20px; & .text-link { font-size: 10px; gap: 15px; } }
.academy-gallery-shell { margin-bottom: 50px; &:focus-within { outline: 2px solid var(--gold); outline-offset: 6px; } }
.academy-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; &:focus-visible { outline: none; } }
.academy-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); overflow: hidden;
  & figcaption { padding: 24px; }
  & .eyebrow { font-size: 8px; }
  & h3 { font: 26px/1.2 var(--display); font-weight: 400; margin-top: 14px; }
  & p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 12px; }
}
.academy-media { position: relative; width: 100%; aspect-ratio: 4 / 3;
  & img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
}
.record-media img, .academy-media img {
  @media (prefers-reduced-motion: no-preference) { transition: scale 550ms var(--snap); }
}
.record-card:hover .record-media img, .academy-card:hover .academy-media img {
  @media (prefers-reduced-motion: no-preference) { scale: 1.05; }
}
.academies { & .section-heading { margin-bottom: 55px; } }
.academy-intro { width: 330px; & p { font-size: 13px; margin-top: 15px; } }
.certification { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; color: var(--gold); & svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1; } }
.training-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; }
.programme-list { border-top: 1px solid var(--line); }
.programme { display: flex; align-items: center; gap: 23px; width: 100%; padding: 29px 22px; min-height: 109px; text-align: left; border-bottom: 1px solid var(--line); background: transparent;
  & .programme-index { color: #9A958C; font-size: 9px; align-self: start; padding-top: 5px; }
  & strong { display: block; font-size: 15px; font-weight: 600; }
  & small { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }
  & .programme-arrow { margin-left: auto; font-size: 25px; color: #ABA69A; }
  &[aria-pressed="true"] { background: #1E1C15; border-left: 2px solid var(--gold); padding-left: 20px; & strong, & .programme-arrow, & .programme-index { color: var(--gold); } }
  &:hover { background: #191916; }
  @media (prefers-reduced-motion: no-preference) { & .programme-arrow { transition: translate 360ms var(--snap); } &:hover .programme-arrow { translate: 3px -3px; } }
}
.programme-detail { background: #171718; padding: 30px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: start; & > .eyebrow { font-size: 9px; } & h3 { font-family: var(--display); font-weight: 400; font-size: 33px; line-height: 1.15; margin-bottom: 15px; } & > p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 400px; } & .button { margin-top: auto; width: 100%; font-size: 11px; } }
.training-emblem { position: relative; height: 167px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 8px 0 18px; & > svg { position: absolute; width: 155px; height: 155px; fill: none; stroke: rgb(212 175 55 / .32); stroke-width: 1; } & > span { font: 48px var(--display); color: var(--gold); letter-spacing: .08em; } & > small { position: absolute; bottom: 0; font-size: 6px; letter-spacing: .15em; color: var(--muted); background: #171718; padding: 4px; } }
.programme-meta { margin: 21px 0 24px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 8px; font-weight: 700; color: #C1BBAE; letter-spacing: .045em; & > span { border: 1px solid var(--line); padding: 8px; } }
.locations { margin-top: 65px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 25px; & > div > p:last-child { font-size: 9px; color: var(--muted); margin-top: 6px; } & .eyebrow { font-size: 8px; } & ul { display: flex; flex-wrap: wrap; gap: 20px 35px; list-style: none; margin: 0; padding: 0; & li { font-size: 13px; } & small { display: block; color: var(--gold); font-size: 7px; margin-bottom: 7px; } } }
.location-note { color: #A19B90; font-size: 9px; margin-top: 20px; text-align: right; }
.contact { position: relative; background: #141413; border-block: 1px solid var(--line); overflow: clip; &::before { content: ''; width: 370px; height: 100%; background: rgb(212 175 55 / .035); position: absolute; right: 8%; top: 0; clip-path: polygon(70% 0,100% 0,30% 100%,0 100%); pointer-events: none; } & .eyebrow { color: var(--muted); } }
.contact-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: end; margin-top: 24px; & h2 { font-size: clamp(60px, 7.4vw, 106px); line-height: 1.03; } }
.contact-action { position: relative; max-width: 345px; padding-bottom: 8px; & p { font-size: 13px; line-height: 1.9; color: var(--muted); margin-block: 20px 27px; } & .button { width: 100%; } & > .eyebrow { display: block; font-size: 7px; margin-top: 21px; letter-spacing: .1em; } }
.contact-symbol { color: var(--gold); font: 90px var(--body); line-height: 1; }
.site-footer { padding-block: 48px 24px; }
.official-channels { border-top: 1px solid var(--line); padding-block: 26px; display: flex; justify-content: space-between; align-items: center; gap: 22px;
  & h2 { font: 22px/1.2 var(--display); font-weight: 400; }
  & > div > p { font-size: 10px; color: var(--muted); margin-top: 9px; }
  & nav { display: flex; flex-wrap: wrap; gap: 18px 30px; }
  & a { display: grid; align-content: center; min-height: 48px; font-size: 11px; color: var(--ink); line-height: 1.8; & small { font-size: 9px; color: var(--muted); } &:hover { color: var(--gold); } }
}
.inner-page .site-header { position: relative; }
.page-breadcrumb { padding-top: 36px; font-size: 10px; color: var(--muted); display: flex; gap: 12px; & a { color: var(--gold); } }
.inner-page main > .section { padding-top: 50px; }
.inner-page h1 { font-size: clamp(48px, 6vw, 86px); line-height: 1.08; }
.inner-page .philosophy-copy h1 { font-size: clamp(38px, 3.7vw, 56px); margin-block: 19px 25px; }
.inner-page .contact h1 { font-size: clamp(60px, 7.4vw, 106px); line-height: 1.03; }
.desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--gold); }
.footer-page-nav { display: flex; flex-wrap: wrap; gap: 15px 30px; padding-bottom: 24px; & a { font-size: 11px; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); &:hover, &[aria-current="page"] { color: var(--gold); } } }
.training-story { border-top: 1px solid var(--line); & .media-frame { aspect-ratio: 16 / 9; } & img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } & > p { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.8; } }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-bottom: 40px; & > p { color: var(--muted); font-size: 10px; } }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 8px; color: #ABA59A; & > :nth-child(2) { letter-spacing: .16em; } }
.credit-toggle { background: transparent; color: var(--muted); font-size: 9px; min-height: 44px; padding: 12px 0; & > span { margin-left: 12px; color: var(--gold); } &:hover { color: var(--gold); } }
.source-notes { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 25px; font-size: 10px; line-height: 1.9; color: var(--muted); & h3 { color: var(--ink); font-size: 14px; margin-bottom: 14px; } & p { margin-bottom: 12px; max-width: 1000px; } & a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } }

dialog { margin: auto; width: min(640px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; padding: 42px; border: 1px solid rgb(212 175 55 / .45); background: #151516; color: var(--ink); box-shadow: 0 30px 100px rgb(0 0 0 / .5); opacity: 0; transition-property: opacity, translate, display, overlay; transition-duration: 220ms; transition-timing-function: ease-out; transition-behavior: allow-discrete;
  & h2 { font-size: 50px; margin-top: 16px; }
  & p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 17px; }
  & p.form-note { font-size: 11px; padding-left: 11px; border-left: 2px solid var(--gold); }
  &::backdrop { background: rgb(0 0 0 / .82); opacity: 0; transition-property: opacity, display, overlay; transition-duration: 220ms; transition-behavior: allow-discrete; }
  @media (prefers-reduced-motion: no-preference) { translate: 0 15px; }
  @media (prefers-reduced-motion: reduce) { transition-duration: 120ms; &::backdrop { transition-duration: 120ms; } }
}
dialog[open]:where(:not([data-closing])) { opacity: 1;
  &::backdrop { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) { translate: 0; }
}
@starting-style {
  dialog[open]:where(:not([data-closing])) { opacity: 0; &::backdrop { opacity: 0; } @media (prefers-reduced-motion: no-preference) { translate: 0 15px; } }
}
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-content: center; width: 44px; height: 44px; background: #232324; border: 1px solid var(--line); & svg { stroke: var(--ink); stroke-width: 1.5; fill: none; } &:hover { background: var(--gold); & svg { stroke: var(--bg); } } }
#inquiry-form { margin-top: 25px; display: grid; gap: 18px; & label { display: grid; gap: 9px; font-size: 12px; font-weight: 600; } & input, & select, & textarea { border: 1px solid #484640; border-radius: 0; color: var(--ink); background: #1D1D1E; min-height: 46px; padding: 12px; width: 100%; font-size: 14px; } & textarea { resize: vertical; min-height: 95px; } & input::placeholder, & textarea::placeholder { color: #ADA79C; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-submit { width: 100%; margin-top: 4px; }
#inquiry-summary { font: 11px/1.9 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); padding: 20px; background: var(--bg); margin-block: 24px; max-height: 250px; overflow-y: auto; }
.review-actions { display: flex; flex-wrap: wrap; gap: 15px; }
.noscript-message { background: #29251A; color: var(--ink); padding: 20px var(--gutter); font-size: 12px; }

/* All visible motion interpolates only opacity and individual transforms. */
@keyframes intro { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0; } }
@keyframes hero-depth { to { translate: 0 70px; } }
@keyframes enter { from { opacity: .2; translate: 0 32px; } to { opacity: 1; translate: 0; } }
@keyframes wipe { from { translate: 0; } to { translate: 120% 0; } }
@keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ledger-drift { from { translate: -12px 0; } to { translate: 12px 0; } }
.reveal {
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 28%;
    }
  }
}
.photo-wipe .wipe-panel {
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) { animation: wipe linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  }
}
.record-bottom {
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
.record-card:nth-child(even) .record-bottom { animation-range: entry 5% entry 40%; }
.record-grid.is-filtering .record-bottom { animation: none; }
.hero-stats {
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) { animation: ledger-drift linear both; animation-timeline: --hero; animation-range: cover 0% cover 100%; }
  }
}
.reading-progress {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 50; background: var(--gold); transform-origin: left; animation: progress linear both; animation-timeline: scroll(root); }
  }
}
::view-transition-group(record-ledger) { animation: none; }
::view-transition-old(record-ledger), ::view-transition-new(record-ledger) { height: 100%; object-fit: none; object-position: top left; animation-duration: 180ms; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(record-ledger), ::view-transition-new(record-ledger) { animation: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (min-width: 1600px) { .hero-content { padding-top: 180px; } }
@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }
  .header-cta { display: none; }
  .hero-stats { width: 77%; gap: 22px; & > div + div { padding-left: 22px; } }
  .hero-photo-label { right: 50px; }
  .scroll-cue { gap: 12px; & span { max-width: 75px; line-height: 1.9; } }
  .philosophy-layout { gap: 40px; }
  .photo-wipe { height: 490px; }
  .training-layout { gap: 22px; }
  .programme { padding-inline: 15px; gap: 15px; & strong { font-size: 12px; } &[aria-pressed="true"] { padding-left: 13px; } }
  .programme-detail { padding: 25px; }
  .locations ul { gap: 22px; }
}
@media (max-width: 800px) {
  .reel-feature { gap: 24px; padding: 26px; }
  .site-header { height: 84px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; font-size: 10px; }
  .hero { min-height: 930px; min-height: max(930px, 100svh); }
  .hero-content { padding-top: 177px; padding-bottom: 200px; }
  .hero-media { inset: 0; & img { object-position: 60% 20%; } }
  .hero-intro { font-size: 8px; }
  .hero-photo-label { display: none; }
  .hero-side-note { right: 12px; }
  .headline-line { font-size: clamp(82px, 13.9vw, 112px); }
  .hero-description { font-size: 12px; }
  .hero-stats { width: 100%; & strong { font-size: 38px; } & p { font-size: 8px; } }
  .scroll-cue { display: none; }
  .hero-bottom { bottom: 30px; }
  .manifesto-strip { gap: 15px; font-size: 17px; & i { font-size: 12px; } }
  .section-index { margin-bottom: 38px; font-size: 8px; & > :last-child { font-size: 7px; letter-spacing: .08em; } }
  .philosophy-layout { grid-template-columns: 1fr; gap: 35px; }
  .master-photo { max-width: 650px; }
  .photo-wipe { height: 440px; & img { object-position: 100% center; } }
  .photo-tag { right: 15px; }
  .philosophy-copy { max-width: 620px; & h2 { font-size: clamp(40px, 7vw, 56px); } & > p:not(.eyebrow) { font-size: 13px; } }
  .discipline-facts div > span { font-size: 11px; }
  .section-heading { gap: 25px; & h2 { font-size: 52px; } }
  .heading-aside { width: 200px; & p { font-size: 11px; } & .eyebrow { font-size: 7px; } }
  .ledger-caption { display: none; }
  .record-content { padding: 23px; }
  .record-grid { gap: 14px; grid-template-columns: 1fr 1fr; }
  .record-number { font-size: 75px; & > span { display: block; margin: 10px 0 14px; font-size: 7px; } }
  .record-card h3 { font-size: 22px; }
  .record-knuckles, .record-endurance { min-height: 455px; }
  .record-knuckles { min-height: 868px; }
  .record-precision h3 { font-size: 25px; }
  .record-card .text-link { gap: 12px; }
  .academy-intro { width: 210px; }
  .training-layout { grid-template-columns: 1fr; gap: 24px; }
  .programme { padding: 22px; min-height: 95px; & strong { font-size: 15px; } &[aria-pressed="true"] { padding-left: 20px; } }
  .programme-detail { padding: 30px; min-height: 550px; }
  .locations { flex-direction: column; align-items: start; gap: 30px; & ul { gap: 30px; } }
  .location-note { text-align: left; line-height: 1.9; }
  .contact-layout { gap: 35px; & h2 { font-size: 70px; } }
  .contact-action p { font-size: 11px; }
  .contact-symbol { font-size: 60px; }
  .contact-action .button { font-size: 9px; padding-inline: 15px; }
  .contact-action > .eyebrow { font-size: 6px; }
  .footer-top > p { display: none; }
  .academy-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 76%); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 16px; & > figure { scroll-snap-align: start; } }
  .official-channels { align-items: start; flex-direction: column; }
}
@media (max-width: 540px) {
  .reel-feature { grid-template-columns: minmax(0, 1fr); padding: 22px; margin-top: 28px; }
  .reel-copy h3 { font-size: 35px; }
  .brand { font-size: 11px; gap: 10px; & small { font-size: 6px; } }
  .brand-mark { width: 29px; height: 33px; }
  .hero { min-height: 900px; min-height: max(900px, 100svh); justify-content: start; }
  .hero-content { padding-top: 190px; padding-bottom: 180px; }
  .hero-media { inset: 0; & img { object-position: 60% center; filter: grayscale(.65) contrast(1.1) brightness(.68); } }
  .hero-scrim { background: linear-gradient(to top, #0B0B0D 15%, rgba(11,11,13,0.45) 100%), linear-gradient(90deg, rgb(11 11 13 / .6), transparent); }
  .hero-intro { font-size: 7px; letter-spacing: .1em; margin-bottom: 24px; & .red-line { width: 18px; margin-right: 7px; } }
  .label-divider { padding-inline: 6px; }
  .hero-name { font-size: 13px; letter-spacing: .18em; margin-bottom: 12px; }
  .headline-line { font-size: clamp(63px, 17.85vw, 96px); line-height: 1.04; }
  .hero-description { font-size: 10px; margin-top: 23px; line-height: 2; }
  .hero-role { font-size: 8px; }
  .hero-actions { gap: 18px; margin-top: 24px; flex-wrap: wrap; & .button { min-height: 49px; font-size: 9px; padding: 16px; gap: 20px; } }
  .hero-channels { gap: 8px 17px; margin-top: 15px; & a { font-size: 8px; & span { font-size: 7px; } } }
  .watch-link { font-size: 8px; gap: 8px; }
  .play-icon { width: 34px; height: 34px; & svg { width: 11px; height: 11px; } }
  .external-arrow { display: none; }
  .hero-side-note { top: 135px; font-size: 6px; }
  .hero-bottom { bottom: 27px; }
  .hero-stats { gap: 13px; & > div + div { padding-left: 13px; } & strong { font-size: 32px; & span { display: block; font-size: 7px; margin-block: 4px 7px; } } & p { font-size: 7px; line-height: 1.7; max-width: 90px; } }
  .manifesto-strip { padding: 18px 20px; gap: 15px; justify-content: space-between; font-size: 13px; & span:last-child, & i:nth-last-child(2) { display: none; } }
  .section-index { margin-bottom: 32px; font-size: 7px; letter-spacing: .1em; & > :last-child { display: none; } }
  .philosophy-layout { gap: 24px; }
  .photo-wipe { height: 345px; & img { object-position: 100% center; } }
  .master-photo figcaption { font-size: 7px; }
  .photo-tag { bottom: 0; padding: 18px; width: 175px; & strong { font-size: 25px; } }
  .philosophy-copy h2 { font-size: clamp(33px, 9.1vw, 46px); }
  .philosophy-copy > p:not(.eyebrow) { font-size: 14px; }
  .philosophy-copy .eyebrow { font-size: 8px; }
  .discipline-facts { gap: 18px; & div > span { font-size: 9px; } }
  .section-heading { display: block; margin-bottom: 27px; & h2 { font-size: 52px; } }
  .heading-aside { width: 100%; margin-top: 23px; & .eyebrow { margin-top: 10px; } }
  .filters { gap: 16px; width: 100%; justify-content: space-between; & button { font-size: 10px; & > span { font-size: 7px; margin-left: 2px; } } }
  .record-grid { grid-template-columns: 1fr; gap: 16px; }
  .record-content { padding: 26px; }
  .record-knuckles, .record-endurance { min-height: 450px; grid-row: auto; }
  .record-power, .record-precision { min-height: 395px; }
  .record-number { font-size: 88px; & > span { display: inline-block; margin: 0 0 0 12px; font-size: 7px; } }
  .record-card h3 { font-size: 25px; }
  .record-card p { font-size: 13px; }
  .record-precision h3 { font-size: 32px; }
  .record-grid[data-filtered="true"] .record-card { min-height: 430px; }
  .precision-note { padding: 22px; flex-direction: column; align-items: start; gap: 10px; }
  .academy-card h3 { font-size: 25px; }
  .official-channels nav { gap: 12px 24px; }
  .official-channels h2 { font-size: 25px; }
  .inner-page .philosophy-copy h1 { font-size: clamp(33px, 9.1vw, 46px); }
  .inner-page .contact h1 { font-size: clamp(59px, 17vw, 84px); }
  .record-footnote { font-size: 8px; }
  .academies .section-heading h2 { font-size: clamp(39px, 11.5vw, 55px); }
  .academy-intro { margin-top: 28px; }
  .programme { padding: 23px 15px; gap: 17px; & strong { font-size: 13px; } & small { font-size: 10px; } &[aria-pressed="true"] { padding-left: 13px; } }
  .programme-detail { min-height: 565px; padding: 25px; & h3 { font-size: 31px; } }
  .programme-meta { font-size: 7px; gap: 7px; }
  .locations { margin-top: 43px; & ul { gap: 22px; & li { font-size: 12px; } } }
  .contact-layout { grid-template-columns: 1fr; gap: 25px; & h2 { font-size: clamp(59px, 17vw, 84px); } }
  .contact > .wrap > .eyebrow { font-size: 8px; }
  .contact-symbol { display: none; }
  .contact-action { max-width: 100%; & p { font-size: 12px; max-width: 300px; } & .button { padding: 17px 22px; font-size: 11px; } & > .eyebrow { font-size: 7px; } }
  .site-footer { padding-block: 35px 20px; }
  .footer-top { align-items: center; gap: 10px; padding-bottom: 28px; & .text-link { font-size: 8px; gap: 12px; } }
  .footer-bottom { flex-wrap: wrap; gap: 12px; & > :nth-child(2) { display: none; } }
  dialog { padding: 30px 23px; max-height: 92dvh; & h2 { font-size: 44px; } & .eyebrow { font-size: 8px; } }
  .dialog-close { top: 10px; right: 10px; }
  .form-row { grid-template-columns: 1fr; gap: 18px; }
  #inquiry-form input, #inquiry-form select, #inquiry-form textarea { font-size: 16px; }
  .review-actions .button { flex: 1; }
}
@media (min-width: 801px) and (max-height: 760px) { .hero { min-height: 780px; } .hero-content { padding-top: 145px; padding-bottom: 185px; } .headline-line { font-size: 112px; } .hero-intro { margin-bottom: 20px; } }