/* PowerVolleyball: a sports-federation-grade site. Navy colour fields and amber calls to action from the logo,
   condensed uppercase headlines, white cards on a cool grey canvas, and the channel's own videos up front. */
:root {
  --navy: oklch(0.354 0.077 239.2);
  --navy-2: oklch(0.41 0.085 239.5);
  --navy-deep: oklch(0.235 0.05 240);
  --night: oklch(0.175 0.03 240);
  --amber: oklch(0.802 0.159 73.3);
  --amber-hi: oklch(0.85 0.14 78);
  --amber-ink: oklch(0.53 0.12 65);

  --canvas: oklch(0.962 0.006 240);
  --paper: oklch(0.995 0.002 240);
  --ink: oklch(0.22 0.04 240);
  --ink-2: oklch(0.42 0.03 240);
  --ink-3: oklch(0.5 0.025 240);
  --line: oklch(0.9 0.01 240);
  --line-2: oklch(0.83 0.014 240);
  --on-dark: oklch(0.975 0.006 240);
  --on-dark-2: oklch(0.83 0.03 240);
  --on-dark-line: oklch(0.975 0.006 240 / 0.18);
  --shade: oklch(0.2 0.03 240 / 0.08);
  --lift: 0 1px 2px oklch(0.2 0.03 240 / 0.06), 0 12px 32px -16px oklch(0.2 0.03 240 / 0.28);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --scripts: "Noto Sans JP", "Noto Sans Thai", "Noto Sans Devanagari", var(--sans);

  --max: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --head: 72px;
  --radius: 12px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p, h1, h2, h3, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--amber); }
.icon { width: 16px; height: 16px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 10px 14px; border-radius: 8px; background: var(--amber); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* The display voice: condensed, heavy, uppercase. */
.display, .hero h1, .p-hero h1, .sec-title, .decade-title, .poster-title, .rank, .prof h3, .pl h3, .contact h2, .work h2 {
  font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 0.9;
}

/* Colour fields */
.dark { color: var(--on-dark); }
.navy { background: var(--navy); }
.navy-deep { background: var(--navy-deep); }
.night { background: var(--night); }
.canvas { background: var(--canvas); }
.amber { background: var(--amber); color: var(--navy-deep); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: 750 15px/1 var(--sans); font-stretch: 88%; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-amber { background: var(--amber); color: var(--navy-deep); }
.btn-amber:hover { background: var(--amber-hi); }
.btn-navy { background: var(--navy); color: var(--on-dark); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-line { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { background: oklch(1 0 0 / 0.08); }
.amber .btn-line:hover, .paper .btn-line:hover { background: oklch(0.2 0.03 240 / 0.06); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-stretch: 88%; font-size: 14.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--navy); text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--amber); }
.dark .more { color: var(--amber); }
.amber .more { color: var(--navy-deep); }
.amber .more:hover { text-decoration-color: var(--navy-deep); }

/* Utility bar + header. The partners sit on the left as their own logos (labels from 761px; on phones the logos stand
   alone, still named for screen readers) and link to their sections; the channel's links sit on the right (icons only
   below 1100px). */
.utility { background: var(--navy-deep); color: var(--on-dark-2); font-size: 13px; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.utility ul, .utility li { display: flex; align-items: center; }
.utility a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; text-decoration: none; color: var(--on-dark-2); white-space: nowrap; transition: color 0.2s var(--ease); }
.utility a:hover { color: var(--on-dark); }
.utility :focus-visible { outline-color: var(--amber); outline-offset: -2px; }
.utility .icon { width: 15px; height: 15px; }
.util-partners li + li::before { content: ""; width: 1px; height: 16px; margin-inline: 16px; background: var(--on-dark-line); }
.util-partners a { justify-content: center; min-width: 28px; }
.util-partners img { width: auto; height: 20px; opacity: 0.88; transition: opacity 0.2s var(--ease); }
.util-partners a:hover img { opacity: 1; }
.util-partners .logo-fivb { height: 14px; }
.util-partners .logo-cev { height: 22px; }
.util-links { gap: 20px; }
@media (max-width: 1099px) {
  .utility .util-mc { display: none; }
  .util-links { gap: 0; margin-right: -10px; }
  .util-links a { justify-content: center; width: 40px; }
  .util-links .icon { width: 17px; height: 17px; }
  .util-links .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 760px) {
  .util-partners li + li::before { margin-inline: 14px; height: 14px; }
  .util-partners .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.site-head { position: sticky; top: 0; z-index: 40; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--navy); }
.brand img { width: 40px; height: 40px; }
.brand span { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav a { position: relative; padding-block: 25px; text-decoration: none; font-weight: 750; font-stretch: 85%; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); transition: color 0.2s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover { color: var(--navy); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.head-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--navy); cursor: pointer; }
.menu-btn:hover { background: var(--canvas); }
.menu-btn svg { width: 24px; height: 24px; }
@media (max-width: 1040px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: var(--head); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter) 16px; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 32px -24px oklch(0.2 0.03 240 / 0.3); }
  .nav.open { display: flex; }
  .nav a { padding-block: 16px; font-size: 20px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--navy); }
}
@media (max-width: 440px) { .brand span { display: none; } }

/* Section scaffolding */
.section { padding-block: clamp(72px, 9vw, 120px); }
.slim { padding-block: clamp(56px, 6vw, 88px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.sec-head > :first-child { flex: 1 1 30rem; min-width: 0; }
.sec-title { font-size: clamp(44px, 6vw, 84px); }
.sec-head p { margin-top: 16px; max-width: 56ch; font-size: 18px; color: var(--ink-2); }
.dark .sec-head p { color: var(--on-dark-2); }
.amber .sec-head p { color: oklch(0.3 0.06 240); }

/* Video pieces */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--canvas); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.thumb::after, .screen::after, .portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--shade); pointer-events: none; }
a:hover .thumb img { transform: scale(1.04); }
.meta { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dark .meta { color: var(--on-dark-2); }

.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--night); box-shadow: 0 30px 60px -30px oklch(0.1 0.03 240 / 0.7); }
.screen img, .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Wistia film: the blurred swatch holds the frame until site.js loads the player near the viewport. */
.screen wistia-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
wistia-player[media-id='s3km14hcba']:not(:defined) { background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/s3km14hcba/swatch'); filter: blur(5px); }
.film { margin-bottom: clamp(40px, 5vw, 64px); }
.poster { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--on-dark); text-align: left; cursor: pointer; }
.poster img { transition: transform 0.8s var(--ease); }
.poster:hover img { transform: scale(1.025); }
.poster:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; border-radius: var(--radius); }
.poster-scrim { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.16 0.04 240 / 0.92) 0%, oklch(0.16 0.04 240 / 0.55) 32%, oklch(0.16 0.04 240 / 0) 62%); }
.poster-text { position: absolute; left: clamp(18px, 2.6vw, 32px); right: clamp(96px, 12vw, 150px); bottom: clamp(18px, 2.6vw, 30px); display: grid; gap: 10px; justify-items: start; }
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 5px; border-radius: 999px; background: var(--amber); color: var(--navy-deep); font-size: 12.5px; font-weight: 800; font-stretch: 85%; letter-spacing: 0.05em; text-transform: uppercase; }
.poster-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: clamp(26px, 3.2vw, 46px); text-wrap: balance; }
.poster-meta { font-size: 14.5px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.play-btn { position: absolute; right: clamp(18px, 2.6vw, 32px); bottom: clamp(18px, 2.6vw, 30px); display: grid; place-items: center; width: clamp(60px, 6.4vw, 84px); aspect-ratio: 1; border-radius: 50%; background: var(--amber); color: var(--navy-deep); box-shadow: 0 10px 30px -10px oklch(0.1 0.03 240 / 0.8); transition: transform 0.35s var(--ease), background-color 0.2s var(--ease); }
.play-btn svg { width: 38%; height: 38%; margin-left: 6%; }
.poster:hover .play-btn { transform: scale(1.08); background: var(--amber-hi); }

/* Home hero: a night arena seen from net height. Back to front: the arena, the headline, the net (its tape carries the
   channel's credentials), the ball, then the newest video. site.js moves the layers at different depths by setting
   --px and --py (pointer, -0.5 to 0.5) and --sy (scroll through the hero, 0 to 1). The net tile is 14 mesh cells wide. */
.hero { --cell: clamp(40px, 5vw, 72px); --px: 0; --py: 0; --sy: 0; position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-top: clamp(96px, 10.4vw, 160px); }
.hero-scene { position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(560px, 72vw, 100%); overflow: hidden; }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, oklch(0.175 0.03 240 / 0) 28%, oklch(0.175 0.03 240 / 0.62) 50%, oklch(0.175 0.03 240 / 0.88) 74%, var(--night) 100%); }
.hero-arena { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -10px + var(--sy) * 120px), 0) scale(1.06); }

/* The headline is sized to the measure so it ends on the same edge as the columns below: the line sets at 8.94em
   (VOLLEYBALL alone at 5.17em), with a little room so it never wraps early. */
.hero-title { position: relative; container-type: inline-size; }
.hero h1 { position: relative; z-index: 1; font-size: clamp(48px, 9.6vw, 140px); font-size: 11.1cqi; line-height: 0.84; margin-left: -0.02em; transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 4px + var(--sy) * 50px), 0); }
@media (max-width: 640px) { .hero h1 { font-size: 17.5vw; font-size: 19.2cqi; } }
.hero h1 span { color: var(--amber); }

.hero-net {
  position: absolute; z-index: 2; top: calc(var(--cell) * -0.9); bottom: calc(var(--cell) * -2.6);
  left: 50%; width: calc(100vw + 96px); margin-left: calc(-50vw - 48px); pointer-events: none;
  background: url(assets/hero/net.webp) 0 0 / auto calc(var(--cell) * 7.737) repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, var(--night) calc(100% - var(--cell) * 2.4), transparent);
  mask-image: linear-gradient(to bottom, var(--night) calc(100% - var(--cell) * 2.4), transparent);
  transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 8px), 0);
}
/* Printed along the net's top tape, like a competition net. The tape's creases swing its lightness from about L 0.63
   to 0.92 right where the lettering sits, so a soft wash in the tape's own lit tone flattens that band before the ink
   multiplies onto it: the ink still picks up the fabric's grain but stays readable in the folds. */
.tape {
  position: absolute; left: 0; right: 0; top: calc(var(--cell) * 0.05); height: calc(var(--cell) * 0.656);
  display: flex; align-items: center; overflow: hidden; pointer-events: auto;
  background: linear-gradient(to bottom, oklch(0.955 0.022 68 / 0) 6%, oklch(0.955 0.022 68 / 0.65) 24% 70%, oklch(0.955 0.022 68 / 0) 88%);
  color: var(--navy-deep); font-size: max(14px, calc(var(--cell) * 0.29)); font-weight: 800; font-stretch: 72%;
  letter-spacing: 0.07em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.tape-run { display: flex; flex: none; mix-blend-mode: multiply; animation: tape 70s linear infinite; }
.tape ul, .tape li { display: flex; flex: none; align-items: center; }
.tape li::after { content: ""; width: 0.36em; height: 0.36em; margin-inline: 1.1em; border-radius: 50%; background: var(--amber); }
/* The tape is its own pause control, with nothing extra drawn on the net: a mouse resting on it holds the ticker, a
   click or tap holds it until the next one, and keyboard focus outlines the tape. The button sits over the visible tape. */
.tape-toggle { position: absolute; z-index: 1; left: 48px; right: 48px; top: calc(var(--cell) * 0.05); height: calc(var(--cell) * 0.656); padding: 0; border: 0; background: none; cursor: default; pointer-events: auto; }
.tape-toggle:focus-visible { outline: 2px solid var(--navy-deep); outline-offset: -3px; border-radius: 3px; }
.tape.paused .tape-run { animation-play-state: paused; }
@media (hover: hover) { .tape-toggle:hover + .tape .tape-run { animation-play-state: paused; } }
@keyframes tape { to { transform: translateX(-50%); } }

.hero-ball {
  --size: clamp(68px, 9.6vw, 150px);
  position: absolute; z-index: 3; right: clamp(56px, 12vw, 200px); top: calc(var(--cell) * -0.9 - var(--size) * 0.53);
  width: var(--size); pointer-events: none;
  filter: drop-shadow(0 22px 26px oklch(0.12 0.03 240 / 0.6)) brightness(0.93) saturate(0.95);
  transform: translate3d(calc(var(--px) * 36px), calc(var(--py) * 24px - var(--sy) * 180px), 0) rotate(calc(var(--px) * 24deg + var(--sy) * 200deg));
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-net { animation: hero-net 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
  .hero-ball { animation: hero-ball 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
}
@keyframes hero-rise { from { translate: 0 0.3em; opacity: 0; } }
@keyframes hero-net { from { translate: 0 calc(var(--cell) * -0.8); opacity: 0; } }
@keyframes hero-ball { from { translate: 30vw -26vh; rotate: -280deg; opacity: 0; } 25% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
  .tape { overflow-x: auto; scrollbar-width: none; }
  .tape ul[aria-hidden="true"] { display: none; }
  .tape-toggle { display: none; }
}

.hero-grid { --hero-gap: clamp(32px, 4vw, 56px); position: relative; z-index: 3; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px var(--hero-gap); margin-top: clamp(32px, 2.8vw, 40px); align-items: start; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.feature-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.feature-cap .summary { flex: 1 1 28rem; max-width: 70ch; font-size: 15.5px; color: var(--on-dark-2); }
@media (max-width: 640px) { .feature-cap .summary { display: none; } }
.hero-side { display: grid; gap: 24px; align-content: start; }
.hero-side .lead { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.5; color: var(--on-dark); }
.creds { display: grid; gap: 10px; }
.creds div { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: oklch(0.2 0.035 240 / 0.82); box-shadow: inset 0 0 0 1px var(--on-dark-line); font-size: 14.5px; line-height: 1.35; color: var(--on-dark-2); }
.creds dt { display: flex; align-items: center; justify-content: center; }
.creds dt img { width: auto; height: 24px; }
.creds dt .logo-cev { height: 34px; }
.creds dt .logo-mizuno { height: 36px; }
.creds dd { text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Beside the video the column spans the frame (8/12 of the row, at 16:9): the lead starts on its top edge, the
   actions stay with the lead, and the credentials settle onto its bottom edge. A longer column simply runs on. */
@media (min-width: 1001px) {
  .hero-side { grid-template-rows: auto auto 1fr; min-height: calc((100cqi - var(--hero-gap)) * 0.375); }
  .hero-side .lead { text-box: trim-start cap alphabetic; }
  .hero-side .creds { align-self: end; }
}
@media (min-width: 720px) and (max-width: 1000px) {
  .hero-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lead creds" "actions creds"; column-gap: clamp(32px, 4vw, 56px); }
  .hero-side .lead { grid-area: lead; }
  .hero-side .creds { grid-area: creds; align-self: start; }
  .hero-side .actions { grid-area: actions; }
}
.hero-src { position: relative; margin-top: clamp(32px, 4vw, 48px); padding-bottom: 20px; font-size: 12.5px; color: var(--on-dark-2); }
.hero-src a { color: var(--on-dark); }

/* Cards (latest videos, season) */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1040px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--paper); text-decoration: none; box-shadow: 0 1px 2px oklch(0.2 0.03 240 / 0.06); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.card-body { display: grid; gap: 10px; align-content: space-between; flex: 1; padding: 16px 18px 18px; }
.card .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.card .ctx { font-size: 14.5px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transform: none; } }
/* On phones the latest uploads read as a list, each thumbnail beside its title. */
@media (max-width: 560px) {
  .cards { gap: 12px; }
  .cards .card { flex-direction: row; }
  .cards .thumb { flex: none; width: 44%; align-self: start; }
  .cards .card-body { gap: 6px; align-content: start; padding: 10px 12px; }
  .cards .card .t { font-size: 15px; }
}

/* Most watched */
.chart { counter-reset: r; }
.chart li { border-top: 1px solid var(--line); }
.chart li:last-child { border-bottom: 1px solid var(--line); }
.chart a { display: grid; grid-template-columns: 3.5rem 10rem minmax(0, 1fr) minmax(7rem, 18rem) 5.5rem; gap: 24px; align-items: center; padding-block: 14px; text-decoration: none; }
.rank { font-size: 52px; line-height: 0.8; color: var(--navy); font-variant-numeric: tabular-nums; }
.chart li:first-child .rank { color: var(--amber-ink); }
.chart .thumb { border-radius: 8px; }
.chart .t { font-weight: 700; font-size: 17.5px; line-height: 1.3; }
.chart a:hover .t { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.chart .y { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .y .vm { display: none; }
.bar { height: 10px; overflow: hidden; border-radius: 99px; background: var(--canvas); }
.canvas .bar { background: var(--line); }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--navy); transform-origin: left center; transform: scaleX(var(--v)); transition: transform 1.2s var(--ease); }
.chart li:first-child .bar i { background: var(--amber); }
.js .chart:not(.in) .bar i { transform: scaleX(0); }
.chart li:nth-child(2) .bar i { transition-delay: 0.05s; } .chart li:nth-child(3) .bar i { transition-delay: 0.1s; } .chart li:nth-child(4) .bar i { transition-delay: 0.15s; }
.chart li:nth-child(5) .bar i { transition-delay: 0.2s; }
.views { text-align: right; font-size: 30px; font-weight: 800; font-stretch: 72%; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .chart a { grid-template-columns: 2.25rem 7rem minmax(0, 1fr); gap: 14px; }
  .rank { font-size: 36px; }
  .chart .t { font-size: 15.5px; }
  .bar, .views { display: none; }
  .chart .y .vm { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }

/* Playlists rail */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 340px); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--on-dark-line) transparent;
}
.pl { position: relative; display: block; overflow: hidden; border-radius: var(--radius); scroll-snap-align: start; text-decoration: none; color: var(--on-dark); }
.pl .thumb { aspect-ratio: 4 / 3; }
.pl .thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, oklch(0.16 0.04 240 / 0.9), oklch(0.16 0.04 240 / 0) 58%); }
.pl-text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 6px; }
.pl h3 { font-size: clamp(28px, 2.6vw, 36px); }
.pl .meta { color: var(--on-dark-2); }
.rail-ctrl { display: flex; gap: 8px; }
.rail-ctrl button { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.08); color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--on-dark-line); cursor: pointer; transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease); }
.rail-ctrl button:hover:not(:disabled) { background: var(--amber); color: var(--navy-deep); box-shadow: none; }
.rail-ctrl button:disabled { opacity: 0.3; cursor: default; }
.rail-ctrl svg { width: 18px; height: 18px; }
@media (hover: none) { .rail-ctrl { display: none; } }

/* Languages: a slim amber band, the four words in a 2×2 grid beside the heading. */
.tongues .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .tongues .wrap { grid-template-columns: minmax(0, 1fr); } }
.tongues .sec-title { font-size: clamp(36px, 4.2vw, 60px); color: var(--navy-deep); }
.tongues .wrap > div p { margin-top: 14px; max-width: 36ch; font-size: 18px; color: oklch(0.3 0.06 240); }
.tongue-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); }
.tongue-list a { display: grid; gap: 2px; padding-block: 12px 14px; border-top: 2px solid var(--navy-deep); text-decoration: none; }
.word { font: 700 clamp(26px, 3.6vw, 52px)/1.2 var(--scripts); color: var(--navy-deep); transition: transform 0.4s var(--ease); }
.word[lang="tr"] { font-family: var(--sans); font-weight: 800; font-stretch: 72%; text-transform: uppercase; line-height: 1.2; }
.tongue-list a:hover .word { transform: translateX(6px); }
.tongue-list .n { font-size: 14.5px; line-height: 1.35; color: oklch(0.3 0.06 240); }
@media (prefers-reduced-motion: reduce) { .word { transition: none; } }

/* Ten years, on paper. The lockup's zero is the hero's ball: the title is set in em, so the numeral (its cap height
   matching the two lines beside it) and the words scale as one, and both are trimmed to cap height and baseline so they
   sit on one line. The lockup sets 11em wide: beside the copy it takes 5.3cqi (about 58% of the row), and alone in a
   phone-width column 8.6cqi keeps it on one line. The honours
   board below is ruled like the languages list. */
.decade-head { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.decade-title { display: flex; align-items: flex-end; gap: 0.22em; font-size: min(5.3cqi, 68px); color: var(--navy-deep); }
.decade-ten, .decade-words { display: block; text-box: trim-both cap alphabetic; }
.decade-ten { font-size: 2.25em; line-height: 1; color: var(--navy); white-space: nowrap; }
.decade-ten img { display: inline-block; width: auto; height: 0.72em; height: 1cap; margin-left: 0.03em; filter: drop-shadow(0 0.04em 0.05em oklch(0.2 0.03 240 / 0.28)); }
.decade-copy { display: grid; gap: 18px; justify-items: start; max-width: 48ch; }
.decade-copy .lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) { .decade-head { grid-template-columns: minmax(0, 1fr); } .decade-title { font-size: min(8.6cqi, 68px); } }

.honours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.5vw, 48px) clamp(24px, 3vw, 40px); }
.honours div { display: grid; align-content: start; gap: 8px; padding-top: 18px; border-top: 2px solid var(--navy); }
.honours .fig { order: -1; font-size: clamp(52px, 5.4vw, 76px); font-weight: 800; font-stretch: 72%; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums; }
.honours div:first-child .fig { color: var(--amber-ink); }
.honours dt { margin-top: 6px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; color: var(--navy-deep); }
.honours dd:not(.fig) { max-width: 36ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 860px) { .honours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: one ruled list, the figures in their own column so the statements line up. */
@media (max-width: 560px) {
  .honours { grid-template-columns: max-content minmax(0, 1fr); gap: 0; }
  .honours div { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto 1fr; gap: 4px 16px; padding-block: 16px; border-top-width: 1px; border-top-color: var(--line-2); }
  .honours div:first-child { border-top: 2px solid var(--navy); }
  .honours .fig { grid-row: span 2; font-size: 40px; }
  .honours dt { margin-top: 0; }
  .honours dd:not(.fig) { font-size: 15px; }
}

/* CEV figures, on the partners page's navy proof card */
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 30rem; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--navy); }
.live-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.live-stats dd { font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; font-stretch: 72%; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums; }
.live-stats dt { font-size: 12.5px; font-weight: 750; letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; color: var(--ink-2); }

/* FIVB and CEV */
.orgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .orgs { grid-template-columns: minmax(0, 1fr); } }
.org { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--navy); }
.org-logo { display: flex; align-items: center; height: clamp(72px, 7.4vw, 96px); margin-bottom: 8px; }
.org-logo img { width: auto; height: 100%; }
.org-logo .logo-fivb { height: 82%; }
.org .role { justify-self: start; color: var(--navy-deep); }
.org h3 { margin-top: 4px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.org p { max-width: 52ch; line-height: 1.6; color: var(--on-dark-2); }
.org blockquote { padding-top: 6px; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.org figcaption { margin-top: 6px; font-size: 14px; color: var(--on-dark-2); }
.org-logo .logo-mizuno { height: 78%; }
/* Sponsor card: copy beside the campaign's reels, full width under the governing bodies */
.org-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; }
.org-copy { display: grid; gap: 16px; align-content: start; }
.org-reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.org-reels a { display: grid; gap: 10px; text-decoration: none; color: var(--on-dark); }
.org-reels .thumb { aspect-ratio: 9 / 16; border-radius: 10px; background: var(--navy-deep); }
.org-reels .cap { font-size: 14px; font-weight: 700; line-height: 1.3; }
@media (max-width: 960px) { .org-wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .org-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: -24px; padding: 0 24px 8px; scroll-padding-inline: 24px; scrollbar-width: none; }
  .org-reels li { scroll-snap-align: start; }
}

/* Masterclass, on night */
.mc-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 clamp(28px, 3.5vw, 44px); }
.mc-facts span { padding: 8px 14px; border-radius: 999px; background: oklch(1 0 0 / 0.08); font-size: 14.5px; color: var(--on-dark-2); }
.mc-facts b { color: var(--on-dark); font-weight: 750; }
.profs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1040px) { .profs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .profs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.prof { position: relative; overflow: hidden; border-radius: var(--radius); }
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: inherit; background: oklch(0.12 0.01 240); }
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.prof:hover .portrait img { transform: scale(1.04); }
.prof-text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 48px 16px 16px; background: linear-gradient(to top, oklch(0.12 0.02 240 / 0.95), oklch(0.12 0.02 240 / 0)); }
.prof h3 { font-size: clamp(24px, 2.2vw, 30px); }
.prof p { font-size: 13.5px; line-height: 1.35; color: var(--on-dark-2); }
.prof p b { color: var(--amber); font-weight: 700; }
/* The lead professor takes a 2×2 block, so the grid closes evenly: six more at five columns, five at three (the seventh
   steps out) and, on phones, where the lead is one tile like the rest, three rows of two. */
.prof-lead { grid-column: span 2; grid-row: span 2; }
.prof-lead .portrait { height: 100%; aspect-ratio: auto; }
.prof-lead .portrait img { position: absolute; inset: 0; }
.prof-lead .prof-text { gap: 8px; padding: 120px clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px); }
.prof-lead h3 { font-size: clamp(40px, 4.6vw, 68px); }
.prof-lead p { font-size: 15.5px; }
@media (max-width: 1040px) { .profs > li:nth-child(7) { display: none; } }
@media (max-width: 620px) {
  .prof-lead { grid-column: auto; grid-row: auto; }
  .prof-lead .portrait { height: auto; aspect-ratio: 4 / 5; }
  .prof-lead .prof-text { gap: 4px; padding: 48px 16px 16px; }
  .prof-lead h3 { font-size: 24px; }
  .prof-lead p { font-size: 13.5px; }
}
.mc-more { margin-top: clamp(20px, 2.4vw, 28px); max-width: 100ch; font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
.mc-more b { color: var(--on-dark); font-weight: 700; }

/* About, on paper: who runs the channel. Title beside the statement, then the milestones on a navy rule with amber
   dots like the net tape's, then the team set in type (a 4:5 portrait slots in above each name when photos arrive). */
.about-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .about-head { grid-template-columns: minmax(0, 1fr); } }
.about-head .sec-title { text-box: trim-both cap alphabetic; }
.about-copy { display: grid; gap: 14px; max-width: 58ch; }
.about-copy .lead { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; color: var(--ink); text-box: trim-start cap alphabetic; }
.about-copy p { color: var(--ink-2); }
.milestones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); border-top: 2px solid var(--navy); }
.milestones li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 24px; }
.milestones li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--paper); }
.milestones .yr { font-size: clamp(40px, 4.2vw, 60px); font-weight: 800; font-stretch: 72%; line-height: 0.9; color: var(--navy); font-variant-numeric: tabular-nums; }
.milestones h3 { margin-top: 8px; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy-deep); }
.milestones p { max-width: 38ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 720px) {
  .milestones { grid-auto-flow: row; gap: 24px; border-top: 0; border-left: 2px solid var(--navy); padding-left: 22px; }
  .milestones li { grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 14px; padding-top: 0; }
  .milestones li::before { left: -29px; top: 7px; }
  .milestones .yr { grid-row: span 2; font-size: 34px; }
  .milestones h3 { margin-top: 0; font-size: 17px; }
}
.team-h { margin: clamp(40px, 5vw, 64px) 0 16px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); }
.team .crew { grid-column: 1 / -1; }
@media (max-width: 720px) { .team { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.team li { padding-top: 16px; border-top: 1px solid var(--line-2); }
.team .portrait { margin-bottom: 14px; border-radius: var(--radius); background: var(--line); }
.team h4 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; font-stretch: 72%; line-height: 0.95; text-transform: uppercase; color: var(--navy-deep); }
.team p { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.team .crew p { margin-top: 0; max-width: 60ch; font-size: 16px; line-height: 1.5; }

/* Home: work with us */
.work { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 900px) { .work { grid-template-columns: minmax(0, 1fr); } }
.work h2 { font-size: clamp(48px, 6.4vw, 92px); }
.work .lead { margin-top: 20px; max-width: 44ch; font-size: 19px; color: oklch(0.3 0.06 240); }
.work .actions { margin-top: 28px; }
.mail-line { margin-top: 16px; font-size: 15px; color: oklch(0.3 0.06 240); }
.mail-line a { color: var(--navy-deep); font-weight: 700; }
.ways-mini { display: grid; gap: 10px; }
.ways-mini li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 18px 20px; border-radius: var(--radius); background: oklch(1 0 0 / 0.42); }
.ways-mini .k { grid-row: span 2; font-size: 30px; font-weight: 800; font-stretch: 72%; line-height: 1; color: var(--navy); }
.ways-mini h3 { font-size: 20px; letter-spacing: -0.015em; color: var(--navy-deep); }
.ways-mini p { color: oklch(0.3 0.06 240); }

/* Partners page */
.p-hero { padding-block: clamp(48px, 6vw, 88px); }
.p-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .p-hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.p-hero h1 { font-size: clamp(54px, 7.4vw, 112px); line-height: 0.86; }
.p-hero h1 span { color: var(--amber); }
.p-hero .lead { margin-top: 24px; max-width: 54ch; font-size: clamp(18px, 1.45vw, 20px); color: var(--on-dark-2); }
.p-hero .actions { margin-top: 32px; }
.partner-of { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--on-dark-line); font-size: 13px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-2); }
.partner-of img { width: auto; }
.partner-of .logo-fivb { height: 28px; }
.partner-of .logo-cev { height: 40px; }
.partner-of .logo-mizuno { height: 36px; }
.partner-of .sponsor-of { padding-left: 22px; border-left: 1px solid var(--on-dark-line); }
.glance { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius); background: var(--navy-deep); }
.glance h2 { padding-bottom: 14px; font-size: 15px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.glance div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid var(--on-dark-line); }
.glance dt { font-size: 15px; color: var(--on-dark-2); }
.glance dd { font-size: 30px; font-weight: 800; font-stretch: 72%; text-transform: uppercase; text-align: right; font-variant-numeric: tabular-nums; }
.glance .source { margin-top: 12px; font-size: 12.5px; color: var(--on-dark-2); }
.glance .source a { color: var(--on-dark); }

.season { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.season > li:first-child { grid-column: span 2; grid-row: span 2; }
.season > li:first-child .t { font-size: clamp(22px, 2.2vw, 30px); -webkit-line-clamp: 2; }
.season > li:first-child .ctx { font-size: 17px; }
@media (max-width: 900px) { .season { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On phones the final stays a full card and the other five read as a list, like the latest uploads on the home page. */
@media (max-width: 560px) {
  .season { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .season > li:first-child { grid-column: auto; grid-row: auto; }
  .season > li + li .card { flex-direction: row; }
  .season > li + li .thumb { flex: none; width: 44%; align-self: start; }
  .season > li + li .card-body { gap: 6px; align-content: start; padding: 10px 12px; }
  .season > li + li .t { font-size: 15px; }
  .season > li + li .ctx { font-size: 13.5px; line-height: 1.4; }
}
.footnote { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }

/* Mizuno Challenge reels */
.reels { grid-auto-columns: clamp(176px, 18vw, 248px); }
.reel { display: grid; gap: 14px; align-content: start; scroll-snap-align: start; text-decoration: none; color: var(--on-dark); }
.reel .thumb { aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--navy); }
.reel-text { display: grid; gap: 6px; }
.reel .kind { font-size: 12.5px; font-weight: 800; font-stretch: 85%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.reel .t { font-size: 16.5px; font-weight: 700; line-height: 1.3; }

.ways { display: grid; gap: 20px; }
.ways > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 5vw, 80px); padding: clamp(24px, 3.5vw, 48px); border-radius: var(--radius); background: var(--canvas); }
@media (max-width: 900px) { .ways > li { grid-template-columns: minmax(0, 1fr); } }
.ways h3 { font-size: clamp(36px, 4vw, 56px); font-stretch: 72%; text-transform: uppercase; line-height: 0.9; color: var(--navy); }
.ways .copy p { margin-top: 16px; max-width: 46ch; color: var(--ink-2); }
.proof { display: grid; gap: 16px; align-content: start; }
.proof-quote { padding: clamp(20px, 2.5vw, 28px); border-radius: 10px; background: var(--navy); color: var(--on-dark); }
.proof-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.proof-head img { width: 44px; height: 44px; }
.proof-quote blockquote { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.proof-quote p { margin-top: 12px; font-size: 15px; color: var(--on-dark-2); }
.proof-quote .more { margin-top: 14px; color: var(--amber); }
/* The CEV figures from the home page's full matches, reset for the navy card */
.proof-quote .live-stats { max-width: none; margin-top: 20px; border-top-color: var(--on-dark-line); }
.proof-quote .live-stats dd { font-size: clamp(28px, 3vw, 44px); color: var(--on-dark); }
.proof-quote .live-stats dt { color: var(--on-dark-2); }
.proof-quote .stats-src { font-size: 13px; }
.ways .copy .more { margin-top: 20px; }
.proof-video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; text-decoration: none; }
.proof-video .thumb { border-radius: 10px; }
.proof-video b { display: block; font-size: clamp(48px, 5vw, 72px); font-weight: 800; font-stretch: 72%; line-height: 0.85; color: var(--navy); }
.proof-video span span { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 520px) { .proof-video { grid-template-columns: minmax(0, 1fr); } }
.proof-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.proof-faces .portrait { border-radius: 10px; }
.proof-faces p { margin-top: 8px; font-size: 13.5px; line-height: 1.3; font-weight: 700; }

/* Contact, on amber */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact .wrap { grid-template-columns: minmax(0, 1fr); } }
.contact h2 { font-size: clamp(64px, 9vw, 132px); line-height: 0.84; color: var(--navy-deep); }
.contact .lead { margin-top: 20px; max-width: 40ch; font-size: 19px; color: oklch(0.3 0.06 240); }
.include-title { margin-top: 32px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-deep); }
.include { margin-top: 10px; }
.include li { padding-block: 11px; border-top: 1px solid oklch(0.235 0.05 240 / 0.25); font-size: 16px; color: oklch(0.3 0.06 240); }
.include b { color: var(--navy-deep); font-weight: 700; }
.mailbox { container-type: inline-size; display: grid; gap: 20px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--navy-deep); color: var(--on-dark); }
/* The address is about 15.6em wide at this weight and width, so sizing it to the box keeps it on one line. */
.addr { font-size: clamp(26px, 3.4vw, 46px); font-size: min(46px, 6.2cqi); font-weight: 800; font-stretch: 80%; line-height: 1.05; overflow-wrap: anywhere; user-select: all; }
.copy-note { min-height: 1.4em; font-size: 14.5px; color: var(--on-dark-2); }
.kit { padding-top: 18px; border-top: 1px solid var(--on-dark-line); font-size: 15.5px; color: var(--on-dark-2); }
.kit b { display: block; color: var(--on-dark); font-weight: 700; }
.mailbox .btn-line:hover { background: oklch(1 0 0 / 0.08); }

/* Footer */
.site-foot { padding-block: 64px 32px; background: var(--night); color: var(--on-dark-2); font-size: 15px; }
/* The last column (Work with us) is sized to its content, so the email address stays on one line. */
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) auto; gap: 32px; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :last-child { grid-column: 1 / -1; } }
.site-foot .brand { margin-bottom: 16px; color: var(--on-dark); }
.logo-mono { width: 40px; height: 40px; flex: none; opacity: 0.92; }
.foot-grid > :first-child p { max-width: 34ch; }
.foot-grid h2 { margin-bottom: 14px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.foot-grid li + li { margin-top: 9px; }
.foot-grid a { text-decoration: none; overflow-wrap: anywhere; }
.foot-grid a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--amber); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--on-dark-line); font-size: 13.5px; }