/* ==========================================================================
   FORMULA SPEED — Wind Tunnel design system
   Palette is the CFD false-colour pressure scale. Racing red is peak pressure.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Ground — the tunnel interior */
  --void:      #04060A;
  --tunnel:    #080C12;
  --plenum:    #0D131B;
  --panel:     #121A24;
  --panel-hi:  #18222E;

  /* Pressure scale: low (suction) -> high (stagnation) */
  --p1: #123A96;   /* deep suction   */
  --p2: #0B7ACC;
  --p3: #00BBC6;   /* cyan           */
  --p4: #7FD23C;
  --p5: #FFC51B;
  --p6: #FF6A00;
  --p7: #E10600;   /* stagnation = brand red */

  /* Foreground, tinted from the ground hue — never neutral grey */
  --chalk:  #EBF1F7;
  --mist:   #A9BCD0;
  --vapour: #7286A0;
  --rule:   rgba(150, 180, 214, 0.16);
  --rule-2: rgba(150, 180, 214, 0.30);

  /* Type */
  --ff-display: 'Archivo', 'Archivo Expanded', sans-serif;
  --ff-body:    'Archivo', sans-serif;
  --ff-mono:    'Martian Mono', ui-monospace, monospace;

  /* Motion — signature easing carries 80% of the system */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);   /* expo out, the house curve */
  --e-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --e-soft:  cubic-bezier(0.40, 0, 0.20, 1);
  --t-quick: 140ms;
  --t-base:  320ms;
  --t-slow:  720ms;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --bay: clamp(4.5rem, 11vw, 10rem);
  --max: 1680px;
  --col: 1140px;

  --nav-h: 76px;

  /* 2/2 twill: four 8px cells, alternating hatch direction, each line laid
     down twice — a dark pass offset by a fraction of a pixel, then a light
     pass on top. That offset is the whole trick; without it the weave is a
     flat crosshatch instead of fibre catching the light. */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke-width='1.1'%3E%3Cg stroke='%23000' opacity='.42' transform='translate(.85 .85)'%3E%3Cpath d='M0 4 4 0M0 8 8 0M4 8 8 4M8 12 12 8M8 16 16 8M12 16 16 12M8 0 16 8M8 4 12 8M12 0 16 4M0 8 8 16M0 12 4 16M4 8 8 12'/%3E%3C/g%3E%3Cg stroke='%23fff' opacity='.10'%3E%3Cpath d='M0 4 4 0M0 8 8 0M4 8 8 4M8 12 12 8M8 16 16 8M12 16 16 12M8 0 16 8M8 4 12 8M12 0 16 4M0 8 8 16M0 12 4 16M4 8 8 12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* Distance from the pressure rule to the heading under it. Shared, because
     a head that forgets it leaves the two touching at 0px. */
  --sh-gap: 1.1rem;
}

@media (max-width: 860px) { :root { --nav-h: 62px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The ground is a material, not a colour. A 2/2 carbon twill tile — the same
   weave the real bodywork is laid up in — sits under the whole document. It
   rides on <body>, not on a fixed pseudo-element, so it scrolls with the page
   the way a surface does; a fixed weave reads as a screen door over the type.
   Kept near the threshold of visibility: felt at arm's length, read at 40cm. */
body {
  font-family: var(--ff-body);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  background-color: var(--void);
  background-image: var(--weave);
  background-size: 16px 16px;
  color: var(--chalk);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--p7); color: #fff; }

/* Tunnel haze — ambient motion layer, always present, never distracting */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 38% at 10% 6%,   rgba(11, 122, 204, 0.16), transparent 70%),
    radial-gradient(44% 34% at 88% 30%,  rgba(0, 176, 185, 0.07),  transparent 72%),
    radial-gradient(52% 46% at 92% 84%,  rgba(225, 6, 0, 0.13),    transparent 70%),
    radial-gradient(70% 50% at 50% 50%,  rgba(120, 160, 210, 0.04), transparent 76%);
  animation: haze 26s var(--e-soft) infinite alternate;
}
@keyframes haze {
  from { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: .85; }
  to   { transform: translate3d( 2%,  1.5%, 0) scale(1.08); opacity: 1;  }
}

/* Fine grain, keeps the dark ground from banding */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 2; }

/* ---------- Layout ---------- */
.wrap  { width: min(100% - var(--gut) * 2, var(--col)); margin-inline: auto; }
.wrap-w{ width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }
.bay   { padding-block: var(--bay); }

/* ---------- Type scale ---------- */
.d1, .d2, .d3, h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Leading has to travel with the size, not be fixed per class: these same
   headings clamp down to ~35px on a phone, where 0.92 makes the lines touch.
   The formula gives ~0.92 at 96px and ~1.14 at 35px, on one curve. */
.d1, .d2, h1, h2 { line-height: calc(0.787em + 0.775rem); }
.d3 { line-height: calc(0.80em + 0.55rem); }
h3 { line-height: 1.16; letter-spacing: -0.025em; }
h4 { line-height: 1.26; letter-spacing: -0.015em; }

.d1 { font-size: clamp(2.9rem, 8.4vw, 6rem); }
.d2 { font-size: clamp(2.2rem, 5.6vw, 4rem); }
.d3 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-variation-settings: 'wdth' 108, 'wght' 750; }

.lede {
  font-size: clamp(1.05rem, 1.65vw, 1.3rem);
  line-height: 1.55;
  color: var(--mist);
  max-width: min(62ch, 100%);
}

p { max-width: min(70ch, 100%); }
.prose p + p { margin-top: 1.1em; }
.prose strong { font-variation-settings: 'wght' 700; color: var(--chalk); }

/* Measurement type — mono earns its place only on real data */
.meas {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-variation-settings: 'wght' 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vapour);
  font-feature-settings: 'tnum' 1;
}
.meas b { color: var(--p3); font-variation-settings: 'wght' 700; }

/* ---------- Pressure rule: the system's signature divider ---------- */
.prule {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg,
    var(--p1) 0%, var(--p2) 17%, var(--p3) 34%,
    var(--p4) 51%, var(--p5) 68%, var(--p6) 84%, var(--p7) 100%);
  opacity: .9;
  transform-origin: left;
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--p7);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.02em 1.7em;
  background: var(--bg);
  color: #fff;
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 106, 'wght' 750;
  font-size: .92rem;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 15px) 100%, 0 100%);
  overflow: hidden;
  transition: transform var(--t-quick) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
  box-shadow: 0 10px 28px -12px rgba(225, 6, 0, .75);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform 620ms var(--e-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(225,6,0,.9); }
.btn:hover::after { transform: translateX(120%) skewX(-18deg); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-ghost {
  --bg: transparent;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--p3), 0 14px 30px -18px rgba(0,187,198,.6); }

.btn .arw { transition: transform var(--t-base) var(--e-out); }
.btn:hover .arw { transform: translateX(4px); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--p3);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t-base) var(--e-soft),
              border-color var(--t-base) var(--e-soft);
  border-bottom: 1px solid transparent;
}
/* At the top of the page the header has no plate of its own — the hero runs
   under it. This is the only thing standing between the links and whatever the
   photograph is doing: a short gradient that reads as the image's own falloff,
   not as a bar. It retires once .is-stuck paints a real surface. */
.nav::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: calc(var(--nav-h) * 2);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,10,.72) 0%, rgba(4,6,10,.34) 52%, rgba(4,6,10,0) 100%);
  transition: opacity var(--t-base) var(--e-soft);
}
.nav.is-stuck::before { opacity: 0; }
.nav.is-stuck {
  background: rgba(8, 12, 18, .82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--rule);
}
.nav-in {
  width: min(100% - var(--gut) * 2, var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}

.mark {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 118, 'wght' 850;
  font-size: 1.04rem;
  letter-spacing: -0.045em;
  line-height: 1;
  display: flex; align-items: center; gap: .55em;
  flex-shrink: 0;
}
.mark svg { width: 26px; height: 26px; flex-shrink: 0; }
.mark i { font-style: normal; color: var(--p7); }

.nav-links { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.8rem); margin-left: auto; }
.nav-links > * { flex-shrink: 0; }

.nlink {
  position: relative;
  font-size: .845rem;
  font-variation-settings: 'wght' 520;
  color: var(--mist);
  padding-block: .5rem;
  transition: color var(--t-quick) var(--e-out);
  white-space: nowrap;
}
.nlink::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--p7);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--e-out);
}
.nlink:hover, .nlink[aria-current] { color: var(--chalk); }
.nlink:hover::after, .nlink[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* Dropdown */
.has-sub { position: relative; }
.sub {
  position: absolute; top: calc(100% + .55rem); left: -1rem;
  min-width: 268px;
  background: rgba(13, 19, 27, .96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--rule);
  padding: .5rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              visibility var(--t-base);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.92);
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a {
  display: block; padding: .62rem .8rem;
  font-size: .85rem; color: var(--mist);
  border-left: 1px solid transparent;
  transition: color var(--t-quick) var(--e-out),
              background var(--t-quick) var(--e-out),
              border-color var(--t-quick) var(--e-out);
}
.sub a:hover { color: var(--chalk); background: rgba(150,180,214,.06); border-left-color: var(--p7); }
.sub a small { display: block; font-size: .72rem; color: var(--vapour); margin-top: .12rem; }

.burger { display: none; width: 42px; height: 42px; background: none; border: 1px solid var(--rule-2); cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--chalk); margin: 4px auto; transition: transform var(--t-base) var(--e-out), opacity var(--t-quick); }
.nav.is-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { opacity: 0; }
.nav.is-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* The full bar needs about 1160px since Componenti joined it (seven items
   plus the quote button); below that it overflowed by up to 55px. The menu
   collapses at 1180px, which leaves air after the logo at every width the
   full bar is shown. */
@media (max-width: 1180px) {
  .burger { display: block; margin-left: auto; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0; margin: 0;
    background: rgba(8, 12, 18, .985);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule);
    padding: var(--gut);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 460ms var(--e-out);
  }
  .nav.is-open .nav-links { clip-path: inset(0 0 0 0); }
  .nlink { font-size: 1.05rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 .5rem .8rem; }
  .nav-links .btn { margin-top: 1rem; justify-content: center; }
}

/* ---------- Hero: the scroll-scrubbed tunnel run ---------- */
.hero { position: relative; height: 560vh; }
@media (max-width: 860px) { .hero { height: 460vh; } }

.hero-stick {
  position: sticky; top: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
#tunnel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Scrim. The copy always sits bottom-left, so that corner is guaranteed dark
   whatever the footage is doing behind it. */
.hero-stick::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(4,6,10,.82) 0%, transparent 24%, transparent 40%,
                            rgba(4,6,10,.80) 72%, rgba(4,6,10,.97) 100%),
    linear-gradient(100deg, rgba(4,6,10,.94) 0%, rgba(4,6,10,.62) 34%,
                            rgba(4,6,10,.14) 62%, transparent 82%),
    radial-gradient(120% 90% at 50% 46%, transparent 26%, rgba(4,6,10,.55) 100%);
  pointer-events: none;
}
#flow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; opacity: .62; }

/* Full-bleed, gutter only: the copy's left edge lines up with the scroll cue
   and the telemetry, not with the centred content container. */
.hero-copy {
  position: relative; z-index: 4;
  width: 100%;
  padding-inline: var(--gut);
  display: grid;
  align-content: center;
  height: 100%;
  padding-top: var(--nav-h);
}
/* Every stage occupies the same grid cell so they cross-fade in place
   and stay vertically centred without leaving the flow. */
.hero-stage { grid-area: 1 / 1; align-self: center; }
.hero-stage[data-stage] {
  opacity: 0;
  transform: translate3d(-34px, 0, 0);
  filter: blur(14px);
  transition: opacity 620ms var(--e-out), transform 760ms var(--e-out), filter 620ms var(--e-out);
  pointer-events: none;
}
.hero-stage.on { opacity: 1; transform: none; filter: blur(0); pointer-events: auto; }
.hero-stage .d1 { max-width: min(16ch, 100%); }
.hero-stage .lede { margin-top: 1.1rem; max-width: min(44ch, 100%); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* Telemetry HUD — real values driven by scroll */
.hud {
  position: absolute; z-index: 5;
  right: var(--gut); bottom: clamp(1.4rem, 5vh, 3rem);
  display: grid; gap: .5rem; justify-items: end;
  font-family: var(--ff-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vapour);
  font-feature-settings: 'tnum' 1;
}
.hud-row { display: flex; align-items: center; gap: .6rem; }
.hud-row b { color: var(--chalk); font-variation-settings: 'wght' 700; min-width: 5.4ch; text-align: right; }
.hud-bar { width: clamp(90px, 16vw, 190px); height: 3px; background: rgba(150,180,214,.18); overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--p3), var(--p5), var(--p7)); }

.scroll-hint {
  position: absolute; z-index: 5;
  left: var(--gut); bottom: clamp(1.4rem, 5vh, 3rem);
  display: flex; align-items: center; gap: .7rem;
}
.scroll-hint span { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vapour); }
.scroll-hint i { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, var(--p3), transparent); animation: drop 2.1s var(--e-soft) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Tunnel spool-up loader */
.spool {
  position: fixed; inset: 0; z-index: 90;
  background: var(--void);
  display: grid; place-content: center; gap: 1.1rem; justify-items: center;
  transition: opacity 620ms var(--e-out), visibility 620ms;
}
.spool.off { opacity: 0; visibility: hidden; }
.spool-bar { width: min(58vw, 300px); height: 2px; background: rgba(150,180,214,.16); overflow: hidden; }
.spool-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--p1), var(--p3), var(--p5), var(--p7)); transition: transform 200ms linear; }

/* ---------- Reveal: everything enters along the flow axis ---------- */
[data-rise] {
  opacity: 0;
  transform: translate3d(-26px, 0, 0);
  filter: blur(10px);
}
.rise-on {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 640ms var(--e-out), transform 820ms var(--e-out), filter 640ms var(--e-out);
}
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; filter: none; }
  .hero-stage[data-stage] { opacity: 1; transform: none; filter: none; }
  body::before { animation: none; }
}

/* ---------- Section head ---------- */
.shead { display: grid; gap: var(--sh-gap); margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.shead .prule { width: 88px; }

/* ---------- Segment / model plates ---------- */
.plates { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 900px) { .plates.c3 { grid-template-columns: repeat(3, 1fr); } .plates.c4 { grid-template-columns: repeat(4, 1fr); } .plates.c2 { grid-template-columns: repeat(2, 1fr); } }

.plate {
  position: relative;
  background: var(--tunnel);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid; gap: .85rem; align-content: start;
  min-height: 250px;
  overflow: hidden;
  transition: background var(--t-base) var(--e-out);
}
.plate::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent, var(--p3));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 520ms var(--e-out);
}
.plate:hover { background: var(--plenum); }
.plate:hover::before { transform: scaleY(1); transform-origin: top; }
.plate h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.plate p { color: var(--mist); font-size: .95rem; }
.plate .go { margin-top: auto; display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; font-variation-settings: 'wght' 650; color: var(--chalk); }
.plate .go .arw { transition: transform var(--t-base) var(--e-out); }
.plate:hover .go .arw { transform: translateX(5px); }
.plate .idx { font-family: var(--ff-mono); font-size: .62rem; color: var(--vapour); letter-spacing: .1em; }

/* ---------- Split feature ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } .split.rev > *:first-child { order: 2; } }

.frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tunnel);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.frame img, .frame canvas { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .7rem .9rem;
  background: linear-gradient(0deg, rgba(4,6,10,.92), transparent);
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mist);
}

/* ---------- Ticker ---------- */
.ticker { border-block: 1px solid var(--rule); overflow: hidden; padding-block: .95rem; }
.ticker-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 112, 'wght' 780;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(235, 241, 247, .42);
  white-space: nowrap;
  transition: color var(--t-base) var(--e-out);
}
.ticker-track span.hot { color: var(--p7); -webkit-text-stroke: 0; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Stat readouts (real measured quantities only) ---------- */
.reads { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .reads { grid-template-columns: repeat(3, 1fr); } }
.read { background: var(--tunnel); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .45rem; }
.read b {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 116, 'wght' 850;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: .9; letter-spacing: -0.045em;
  font-feature-settings: 'tnum' 1;
  color: var(--chalk);
}
.read span { font-size: .9rem; color: var(--mist); }

/* ---------- Placeholder for client-owned data ---------- */
.todo {
  border: 1px dashed var(--p5);
  background: rgba(255, 197, 27, .05);
  padding: 1rem 1.15rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--p5);
}
.todo b { color: var(--p5); font-variation-settings: 'wght' 700; }

/* ---------- CTA band ---------- */
.band { position: relative; overflow: hidden; background: var(--plenum); border-block: 1px solid var(--rule); }
.band-in { display: grid; gap: 1.6rem; justify-items: start; padding-block: clamp(3.4rem, 8vw, 6.5rem); }

/* ---------- Footer ---------- */
.foot { background: var(--tunnel); border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot-grid { display: grid; gap: 2.4rem; }
@media (min-width: 880px) { .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } }
.foot h4 { font-size: .78rem; font-variation-settings: 'wdth' 106, 'wght' 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vapour); margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.foot a { font-size: .875rem; color: var(--mist); transition: color var(--t-quick) var(--e-out); }
.foot a:hover { color: var(--p7); }
.foot-base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---------- Page hero (interior pages) ---------- */
/* The crumb strip used to carry the header clearance for every interior page.
   With it gone the hero carries its own, and the hero's photograph now runs up
   under the transparent header rather than starting beneath it. */
.phero { position: relative; padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.phero .d1 { max-width: 17ch; }
.phero .lede { margin-top: 1.4rem; }
.phero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
#pflow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .4; pointer-events: none; }

/* Page hero, dropped to the floor of the first screen.
   Same reading position as the home run: the headline sits bottom-left, hard
   against the gutter, so a visitor arriving from the nav finds the type where
   they left it instead of floating mid-screen.
   min-height, never height — copy that outgrows the first screen pushes the
   section taller instead of being cut off by the overflow:hidden above it.
   dvh, not vh, so the mobile browser's own chrome never eats the last line. */
.phero.low {
  display: grid;
  align-content: end;
  min-height: 88dvh;
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(2.4rem, 5.5vh, 4rem);
}
/* The cap is in rem, never ch: ch resolves against the display face, so it
   shrinks with the headline and the box stops being predictable. 56rem is the
   17ch cap measured at the 6rem ceiling, kept fixed — wide enough to hold the
   longest token in these headlines ("allenamento.") on one line, and narrow
   enough that none of them runs past three lines and floats the block back up
   into the middle of the screen. */
.phero.low .d1 {
  max-width: min(56rem, 100%);
  overflow-wrap: break-word;
  text-wrap: balance;
  text-wrap: pretty;
}
.phero.low .lede { max-width: min(54ch, 100%); }
@media (max-width: 860px) {
  .phero.low { min-height: 82dvh; }
  .phero.low .lede { max-width: 100%; }
}

/* ---------- Custom cursor (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cur { position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity var(--t-base) var(--e-out); }
  .cur.live { opacity: 1; }
  .cur i { position: absolute; background: var(--chalk); transition: transform var(--t-base) var(--e-out), background var(--t-base) var(--e-out); }
  .cur .h { width: 16px; height: 1px; transform: translate(-50%, -50%) scaleX(1); }
  .cur .v { width: 1px; height: 16px; transform: translate(-50%, -50%) scaleY(1); }
  .cur.hot .h { transform: translate(-50%, -50%) scaleX(1.65); background: var(--p7); }
  .cur.hot .v { transform: translate(-50%, -50%) scaleY(1.65); background: var(--p7); }
}

/* ---------- Utility ---------- */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; z-index: 100; padding: 1rem; background: var(--p7); color: #fff; }
.skip:focus { left: var(--gut); top: .5rem; }
.stack { display: grid; gap: 1.1rem; }
.stack-lg { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
.mt-lg { margin-top: clamp(2.4rem, 5vw, 4rem); }
.accent-1 { --accent: var(--p2); } .accent-2 { --accent: var(--p3); }
.accent-3 { --accent: var(--p5); } .accent-4 { --accent: var(--p7); }