/* =============================================================
   DOWNUNDER DYNAMICS — DESIGN SYSTEM

   Direction: flight instrumentation, not action-sports poster.
   The reference is an aircraft panel at altitude — deep blue-black
   atmosphere, brand purple as the primary accent, light blue for
   data and airflow, green reserved for confirmations. Hairline
   rules, monospaced readouts, wide confident display type.

   Rebrand by editing :root and little else.
   ============================================================= */
:root {
  --void: #070B14;         /* page background — deep blue-black */
  --panel: #0E1526;        /* raised surfaces */
  --panel-2: #16203A;      /* hover / nested surfaces */
  --hairline: #22304E;     /* rules and borders */
  --hairline-lit: #34486E;
  --paper: #EDF1F8;        /* primary text */
  --haze: #94A4C2;         /* secondary text */
  --haze-dim: #66748F;     /* tertiary / captions */
  --violet: #8B5CF6;       /* primary accent — DD purple */
  --violet-hot: #A78BFA;
  --sky: #38BDF8;          /* light blue — data and secondary */
  --green: #34D399;        /* green hints — confirmations, checks */
  --danger: #F0674F;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 68px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--violet); text-decoration-color: rgba(139,92,246,.35); text-underline-offset: 3px; }
a:hover { color: var(--violet-hot); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
button { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- Type scale ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(44px, 7.5vw, 92px); }
h2 { font-size: clamp(30px, 4.2vw, 48px); }
h3 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.005em; }
h4 { font-size: 19px; }
p { margin: 0 0 1.1em; }
.lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: var(--haze); max-width: 62ch; }

/* Instrument label — the recurring structural device. */
.readout {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--haze-dim);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.readout::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--violet);
  flex: none;
}
.readout-plain::before { display: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(44px, 6vw, 76px) 0; }
.section-line { border-top: 1px solid var(--hairline); }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: var(--violet); color: #000; padding: 12px 18px; z-index: 200; font-weight: 600; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(7,11,20,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper); }
/* The mark is 1.21:1, not square — fix the height and let the width
   follow, or it squashes. Height matches the wordmark's cap height. */
.brand-mark { height: 30px; width: auto; display: block; flex: none; }
.brand-text { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 17px; letter-spacing: .01em; line-height: 1; }
.brand-text small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; color: var(--haze-dim); font-weight: 400; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--haze); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 9px 13px; border-radius: var(--radius); transition: color .2s, background .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); background: var(--panel-2); }
.header-cta { display: flex; align-items: center; gap: 10px; }

.menu-btn { display: none; background: none; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 9px; cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .nav, .header-cta .btn { display: none; }
  .menu-btn { display: block; }
}
.mobile-nav { display: none; border-bottom: 1px solid var(--hairline); background: var(--panel); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: 15px var(--gutter); color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.mobile-nav .btn { margin: 18px var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--violet); color: #0B0713; }
.btn-primary:hover { background: var(--violet-hot); color: #0B0713; }
.btn-ghost { border-color: var(--hairline-lit); color: var(--paper); }
.btn-ghost:hover { border-color: var(--haze); background: var(--panel-2); color: var(--paper); }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 11vw, 132px) 0 0; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 82% 4%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(90% 55% at 8% 100%, rgba(139,92,246,.14), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero h1 { max-width: 15ch; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--violet); }
.hero .lede { margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Signature element: the instrument strip.
   Real credentials rendered as panel readouts. */
.instrument {
  margin-top: clamp(48px, 7vw, 84px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.instrument::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  opacity: .5;
}
.instrument div { padding: 22px 0 24px; border-left: 1px solid var(--hairline); padding-left: 20px; }
.instrument div:first-child { border-left: 0; padding-left: 0; }
.instrument dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--haze-dim); margin-bottom: 8px; }
.instrument dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: clamp(19px, 2.4vw, 27px); line-height: 1; }
/* The lead readout. Tunnel hours is the one number the competition
   cannot answer, so it is sized and coloured to be read first rather
   than sitting as one of four equal tiles. */
.instrument div.lead dt { color: var(--violet); }
.instrument div.lead dd { font-size: clamp(26px, 3.4vw, 40px); color: var(--violet); }

@media (max-width: 720px) {
  .instrument { grid-template-columns: repeat(2, 1fr); }
  .instrument div:nth-child(3) { border-left: 0; padding-left: 0; }
  .instrument div:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

/* A "from" price hides which coach you actually get. The note spells
   out both rates so nobody books expecting one and is billed the other. */
.offer-price-note { display: block; margin-top: 4px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--haze-dim); }

/* Altitude tick rule — section divider drawn from the subject's world. */
.ticks { height: 22px; display: flex; align-items: stretch; gap: 7px; opacity: .32; margin-bottom: 22px; }
.ticks span { width: 1px; background: var(--haze-dim); }
.ticks span:nth-child(5n+1) { background: var(--violet); }

/* ---------- Section heads ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p.lede { margin: 12px 0 0; }
.link-more { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.link-more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

/* ---------- Offer cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.offer {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}
.offer:hover { border-color: var(--hairline-lit); background: var(--panel-2); transform: translateY(-3px); }
.offer-format { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.offer h3 { margin: 0; }
.offer-summary { color: var(--haze); margin: 0; font-size: 15.5px; }
.offer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.offer li { display: flex; gap: 10px; align-items: flex-start; color: var(--paper); }
.offer li svg { width: 15px; height: 15px; color: var(--green); flex: none; margin-top: 4px; }
.offer-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hairline); display: grid; gap: 12px; }
.offer-best { font-size: 13.5px; color: var(--haze-dim); margin: 0; }
.offer-price { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--haze); }

/* ---------- Approach / numbered steps ---------- */
.steps { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.steps > div { background: var(--void); padding: 30px 28px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.step-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--violet); padding-top: 6px; }
.steps h3 { margin: 0 0 8px; }
.steps p { margin: 0; color: var(--haze); }
@media (max-width: 640px) { .steps > div { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Camps ---------- */
.camp { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px; display: grid; gap: 14px; }
.camp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.camp h3 { margin: 0; }
.camp-when { font-family: var(--font-mono); font-size: 13px; color: var(--violet); letter-spacing: .04em; }
.camp-where { color: var(--haze); font-size: 15px; margin: 0; }
/* Counted, not claimed — filled in by app.js from the booking API. */
.camp-left { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); margin: 6px 0 0; }

.status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; border: 1px solid; }
.status-open { color: var(--green); border-color: rgba(52,211,153,.4); }
.status-waitlist { color: var(--sky); border-color: rgba(56,189,248,.4); }
.status-full { color: var(--haze-dim); border-color: var(--hairline-lit); }

.empty-state { border: 1px dashed var(--hairline-lit); border-radius: var(--radius); padding: clamp(36px, 6vw, 64px); text-align: center; }
.empty-state h3 { margin-bottom: 12px; }
.empty-state p { color: var(--haze); max-width: 52ch; margin-inline: auto; }

/* ---------- Partners ---------- */
.partner { border-top: 1px solid var(--hairline); padding: 26px 0; display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 28px; align-items: start; }
.partner h3 { margin: 0 0 6px; font-size: 21px; }
.partner p { margin: 0; color: var(--haze); font-size: 15.5px; }
.partner-code { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--violet); border: 1px dashed rgba(139,92,246,.4); padding: 7px 12px; border-radius: var(--radius); }
@media (max-width: 720px) { .partner { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Article ---------- */
.article-layout { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 940px) { .article-layout { grid-template-columns: 1fr 260px; align-items: start; } }
.article-body { max-width: 68ch; }
.article-body h2 { margin-top: 1.8em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p, .article-body li { color: var(--haze); }
.article-body strong { color: var(--paper); }
.toc { position: sticky; top: calc(var(--header-h) + 24px); border-left: 1px solid var(--hairline); padding-left: 18px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toc a { color: var(--haze-dim); text-decoration: none; font-size: 14px; transition: color .2s; }
.toc a:hover, .toc a.is-current { color: var(--violet); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: clamp(28px, 5vw, 56px); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--haze-dim); }
.field input, .field textarea, .field select {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--paper); padding: 13px 14px; font: inherit; font-size: 15px; width: 100%;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--violet); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.contact-direct { display: grid; gap: 18px; }
.contact-direct a { color: var(--paper); text-decoration: none; font-size: 19px; font-family: var(--font-display); font-weight: 600; font-stretch: 112%; }
.contact-direct a:hover { color: var(--violet); }
.form-note { font-size: 13.5px; color: var(--haze-dim); margin: 10px 0 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: clamp(44px, 6vw, 72px) 0 34px; margin-top: clamp(56px, 8vw, 100px); }
.footer-top { display: grid; gap: 34px; margin-bottom: 40px; }
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-top h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--haze-dim); font-weight: 400; margin: 0 0 14px; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-list a { color: var(--haze); text-decoration: none; font-size: 15px; }
.footer-list a:hover { color: var(--paper); }
.footer-blurb { color: var(--haze); font-size: 15px; max-width: 42ch; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 38px; height: 38px; border: 1px solid var(--hairline); border-radius: var(--radius); display: grid; place-items: center; color: var(--haze); transition: color .2s, border-color .2s; }
.socials a:hover { color: var(--violet); border-color: var(--hairline-lit); }
.socials svg { width: 17px; height: 17px; }
.footer-base { border-top: 1px solid var(--hairline); padding-top: 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--haze-dim); }
.footer-base a { color: var(--haze-dim); text-decoration: none; }
.footer-base a:hover { color: var(--haze); }

/* ---------- Motion ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .16s ease both; }
  ::view-transition-new(root) { animation: vt-in .26s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(7px); } }
}
.site-header { view-transition-name: site-header; }
.reveal-on .reveal { opacity: 0; transform: translateY(16px); }
.reveal-on .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease) var(--d, 0ms), transform .55s var(--ease) var(--d, 0ms);
}

/* =============================================================
   HERO MEDIA
   ============================================================= */
.hero-media { padding-top: clamp(72px, 13vw, 150px); padding-bottom: clamp(24px, 4vw, 48px); }
/* The poster sits underneath as the ground truth: it shows while the
   player loads and stays visible if autoplay is blocked (iOS low-power
   mode, data saver), so the hero is never a black box. */
.hero-video {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background: #070B14 url("/assets/media/hero-poster.jpg") center/cover no-repeat;
}
/* A 16:9 iframe cannot object-fit, so it is oversized to cover the
   viewport and centred — whichever of width/height is binding wins. */
/* Held back for a beat. YouTube flashes its own logo and buttons for
   roughly a second while the player boots, and no embed parameter
   suppresses that any more — so the poster underneath covers it and the
   film fades in once the branding has gone. */
@keyframes heroFilmIn { to { opacity: 1; } }
.hero-embed {
  opacity: 0; animation: heroFilmIn .9s ease 1.8s forwards;
  position: absolute; top: 50%; left: 50%;
  /* Oversized on purpose. YouTube draws its title and "Watch on
     YouTube" chrome at the edges of the player and ignores
     modestbranding now, so the frame is blown up past the container
     and centred — the chrome lands outside the visible hero while the
     picture still covers it. */
  transform: translate(-50%, -50%) scale(1.35);
  width: 100vw; height: 56.25vw;          /* 16:9 from the width  */
  min-width: 177.78vh; min-height: 100vh; /* 16:9 from the height */
  border: 0; pointer-events: none;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,11,20,.95) 0%, rgba(7,11,20,.86) 42%, rgba(7,11,20,.45) 100%),
    linear-gradient(to top, var(--void) 2%, transparent 42%);
}
.hero-media .hero-inner { position: relative; z-index: 1; }
.hero-media::before { z-index: 1; }
@media (max-width: 760px) {
  .hero-scrim { background: linear-gradient(to top, var(--void) 6%, rgba(7,11,20,.78) 46%, rgba(7,11,20,.62) 100%); }
}

/* =============================================================
   PHOTO STRIP
   ============================================================= */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.photo-strip figure { margin: 0; overflow: hidden; background: var(--panel); aspect-ratio: 16/10; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); filter: saturate(.92); }
.photo-strip figure:hover img { transform: scale(1.05); }
@media (max-width: 700px) {
  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip figure:last-child { display: none; }
}

.photo-band { margin: 0; }
.photo-band img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  aspect-ratio: 16/9; object-fit: cover; filter: saturate(.92);
}
.photo-band figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--haze-dim); margin-top: 12px;
}

/* =============================================================
   GALLERY  — masonry columns, so nothing gets cropped
   ============================================================= */
.gallery { columns: 3; column-gap: 14px; }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }
.gallery-item {
  break-inside: avoid; margin: 0 0 14px; display: block;
}
.gallery-item img {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--radius) - 6px);
  background: var(--panel); filter: saturate(.94);
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.gallery-item:hover img { transform: scale(1.02); filter: saturate(1); }
.gallery-item figcaption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--haze-dim); margin-top: 8px;
}

/* =============================================================
   COACHES
   ============================================================= */
.coach {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel); padding: clamp(24px, 3.4vw, 38px);
  display: grid; gap: 18px; margin-bottom: 20px;
}
.coach-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.coach-head h2 { margin: 0; }
.coach-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin: 0 0 8px; }
.coach-rate {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  color: var(--paper); border: 1px solid var(--hairline-lit); border-radius: 100px;
  padding: 8px 15px; white-space: nowrap;
}
.coach-bio { color: var(--haze); margin: 0; max-width: 70ch; }
.coach-stats { display: grid; gap: 18px; margin: 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
@media (min-width: 760px) { .coach-stats { grid-template-columns: repeat(3, 1fr); } }
.coach-stats dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--haze-dim); margin-bottom: 6px; }
.coach-stats dd { margin: 0; font-size: 15px; }
.coach-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.coach-body { display: grid; gap: 18px; align-content: start; }
/* Cutout portraits: transparent PNGs exported to webp, so they must
   NOT be cropped to a fixed box — object-fit:cover would slice the
   figure. Natural aspect, standing on a soft base so the cutout reads
   as deliberate rather than floating. */
.coach-photo {
  width: 100%; height: auto; display: block;
  border-radius: calc(var(--radius) - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 65%);
  filter: saturate(.97);
}
@media (max-width: 859px) { .coach-photo { max-width: 260px; } }
@media (min-width: 860px) {
  .coach-has-photo { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .coach-photo { position: sticky; top: 24px; }
}

/* =============================================================
   FULL-HEIGHT HERO
   ============================================================= */
.hero-media {
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  padding-top: clamp(64px, 10vw, 120px);
  padding-bottom: clamp(36px, 6vw, 72px);
}
.hero-media .hero-inner { width: 100%; }


/* =============================================================
   SCROLL-SCRUBBED FILM
   A tall section; the sticky canvas inside plays through a frame
   sequence as you scroll past it.
   ============================================================= */

}

/* Booking terms — shown above the camp list so the rules are
   visible before anyone commits money. */
.terms-note { border: 1px solid var(--hairline); border-left: 2px solid var(--violet); border-radius: var(--radius); padding: 24px 26px; background: var(--panel); }
.terms-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.terms-note li { color: var(--haze); font-size: 15.5px; }
.terms-note strong { color: var(--paper); }

/* =============================================================
   BOOKING — calendar grid with a cart
   ============================================================= */
.booking { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 1020px) { .booking { grid-template-columns: minmax(0,1fr) 380px; } }

.bk-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.bk-nav h2 { margin: 0; font-size: clamp(17px, 2vw, 22px); }
.nav-btn { background: transparent; border: 1px solid var(--hairline); color: var(--paper);
  border-radius: var(--radius); width: 36px; height: 36px; cursor: pointer; font-size: 17px; line-height: 1; }
.nav-btn:hover { border-color: var(--hairline-lit); background: var(--panel-2); }

.bkg { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.bkg-head, .bkg-body { display: grid; grid-template-columns: 54px repeat(7, 1fr); }
.bkg-head { border-bottom: 1px solid var(--hairline); }
.bkg-body { max-height: 60vh; overflow-y: auto; }
.bkg-day { padding: 9px 4px; text-align: center; border-left: 1px solid var(--hairline); }
.bkg-day.today .bkg-num { color: var(--violet); }
.bkg-dow { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--haze-dim); }
.bkg-num { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 16px; }
.bkg-axis { background: var(--panel); }
.bkg-time { height: 30px; font-family: var(--font-mono); font-size: 9px; color: var(--haze-dim);
  padding-right: 6px; text-align: right; border-top: 1px solid var(--hairline); }
.bkg-time.half { border-top-style: dotted; }
.bkg-col { position: relative; border-left: 1px solid var(--hairline); }
.bkg-cell { height: 30px; border-top: 1px solid var(--hairline); }
.bkg-cell.half { border-top-style: dotted; }

.bkg-slot {
  position: absolute; left: 2px; right: 2px; display: grid; gap: 1px; align-content: center;
  padding: 3px 6px; cursor: pointer; text-align: left; overflow: hidden; z-index: 2;
  border: 1px solid rgba(139,92,246,.5); background: rgba(139,92,246,.16);
  border-radius: var(--radius); color: var(--paper); font: inherit;
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}
.bkg-slot:hover { background: rgba(139,92,246,.3); transform: translateY(-1px); }
.bkg-slot.is-picked { border-color: var(--green); background: rgba(52,211,153,.2); }
.bkg-slot.is-full { border-color: var(--hairline); background: var(--panel-2); color: var(--haze-dim); cursor: default; }
.bkg-slot.is-full:hover { transform: none; background: var(--panel-2); }
.s-time { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.s-meta { font-family: var(--font-mono); font-size: 9px; color: var(--haze); letter-spacing: .04em; }

.bk-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--haze-dim); margin-top: 14px; }

.bk-side { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px); position: sticky; top: calc(var(--header-h) + 20px); }
.cart-list { display: grid; gap: 2px; margin-bottom: 20px; }
.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.cart-row strong { display: block; font-size: 15px; }
.cart-row span { font-family: var(--font-mono); font-size: 11px; color: var(--haze); }
.cart-right { display: flex; align-items: center; gap: 10px; }
.cart-right > span { color: var(--paper); font-size: 14px; }
.cart-x { background: transparent; border: 1px solid var(--hairline); color: var(--haze-dim);
  width: 26px; height: 26px; border-radius: var(--radius); cursor: pointer; font-size: 15px; line-height: 1; }
.cart-x:hover { color: var(--danger); border-color: var(--danger); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 16px 0 20px; border-top: 1px solid var(--hairline-lit); margin-bottom: 8px; }
.cart-total span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--haze-dim); }
.cart-total strong { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 30px; }

.bk-chunks { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; }
.bk-chunk { flex: 1 1 100px; display: grid; gap: 3px; padding: 14px 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--haze); text-align: center; transition: border-color .2s, background .2s, color .2s; }
.bk-chunk strong { font-family: var(--font-display); font-size: 17px; color: var(--paper); font-stretch: 112%; }
.bk-chunk span { font-family: var(--font-mono); font-size: 11px; }
.bk-chunk:hover { border-color: var(--violet); background: rgba(139,92,246,.12); color: var(--paper); }

.bk-empty { color: var(--haze); }
.bk-msg { display: none; padding: 11px 13px; border-radius: var(--radius); font-size: 14px; margin-bottom: 14px; }
.bk-msg.on { display: block; }
.bk-msg.err { background: rgba(240,103,79,.12); border: 1px solid rgba(240,103,79,.4); color: #FFC4B8; }
.bk-msg.ok { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); color: #B6F0DA; }

.sheet { position: fixed; inset: 0; background: rgba(7,11,20,.74); backdrop-filter: blur(4px);
  z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.sheet.on { display: flex; }
.sheet-inner { background: var(--panel); border: 1px solid var(--hairline-lit); border-radius: var(--radius);
  width: min(460px, 100%); padding: clamp(22px, 3vw, 32px); }
.sheet-inner h3 { margin: 0 0 6px; }

/* partner logos ---------------------------------------------- */
.partner-logo {
  max-width: 160px; max-height: 52px; width: auto; height: auto;
  display: block; margin-bottom: 16px; opacity: .85;
  transition: opacity .4s var(--ease);
}
.partner:hover .partner-logo { opacity: 1; }

/* =============================================================
   FILMS
   ============================================================= */
.films { display: grid; gap: 28px; }
@media (min-width: 860px) { .films { grid-template-columns: 1fr 1fr; gap: 32px; } }
.film {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; display: grid; align-content: start;
}
.film-video {
  width: 100%; aspect-ratio: 16/9; display: block;
  background: #000; border-bottom: 1px solid var(--hairline);
}
/* YouTube embed sits in the same slot as a self-hosted video. */
.film-embed { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-bottom: 1px solid var(--hairline); }
.film-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.film-meta { padding: clamp(20px, 2.6vw, 28px); display: grid; gap: 10px; }
.film-meta h3 { margin: 0; }
.film-meta p { margin: 0; color: var(--haze); }
.film-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--haze-dim);
}

/* =============================================================
   MILESTONES — the career strip on About
   ============================================================= */
.milestones { display: grid; gap: 28px; }
.milestone {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
  display: grid; align-items: stretch;
}
@media (min-width: 800px) {
  .milestone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .milestone-flip .milestone-img { order: 2; }
}
.milestone-img {
  width: 100%; height: 100%; min-height: 240px; display: block;
  object-fit: cover; filter: saturate(.92);
  transition: transform .8s var(--ease);
}
.milestone:hover .milestone-img { transform: scale(1.03); }
.milestone-text {
  padding: clamp(24px, 3.2vw, 40px);
  display: grid; gap: 12px; align-content: center;
}
.milestone-text h3 { margin: 0; }
.milestone-text p { margin: 0; color: var(--haze); }
.milestone-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--violet); margin: 0;
}

.page-updated {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--haze-dim); margin: 18px 0 0;
}

/* =============================================================
   THE RECORD — firsts, records, competition, recognition
   ============================================================= */
.record { display: grid; gap: 34px; }
.record-group {
  display: grid; gap: 16px;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .record-group { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .record-label { position: sticky; top: 24px; }
}
.record-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--violet); margin: 0;
}
.record-items { display: grid; gap: 20px; }
@media (min-width: 700px) { .record-items { grid-template-columns: 1fr 1fr; gap: 24px; } }
.record-item h3 { margin: 0 0 8px; font-size: 18px; }
.record-item p { margin: 0; color: var(--haze); font-size: 15px; }

/* Empty booking week: say so, and point at the next one that isn't. */
.bk-empty-week { margin-top: 18px; text-align: center; }
.bk-jump {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--violet); font: inherit; text-decoration: underline;
  text-underline-offset: 3px;
}
.bk-jump:hover { color: var(--paper); }

/* =============================================================
   AIRFLOW LAB — embedded as an iframe, not inlined. The app sets
   overflow:hidden on body and its own CSS reset; inlining it would
   fight the site's layout and its user-select rules.
   ============================================================= */
.lab {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; background: #070b10;
}
.lab-frame {
  display: block; width: 100%; border: 0;
  height: clamp(560px, 74vh, 860px);
}
.lab-note {
  margin: 14px 0 0; font-size: 14px; color: var(--haze-dim);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* If motion is reduced, do not animate — just show the poster and let
   the film appear without a fade. */
@media (prefers-reduced-motion: reduce) {
  .hero-embed { animation: none; opacity: 1; }
}

/* =============================================================
   ONLINE COACHING — fixed products, no calendar
   ============================================================= */
.online-grid { display: grid; gap: 20px; }
@media (min-width: 780px)  { .online-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .online-grid { grid-template-columns: repeat(3, 1fr); } }
.online-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel); padding: clamp(22px, 2.8vw, 30px);
  display: grid; gap: 12px; align-content: start;
}
.online-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.online-head h3 { margin: 0; font-size: 20px; }
.online-price {
  font-family: var(--font-mono); font-size: 15px; color: var(--paper);
  white-space: nowrap;
}
.online-when {
  margin: 0; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--haze-dim);
}
.online-sum { margin: 0; color: var(--haze); font-size: 15px; }
.online-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.online-list li { display: flex; gap: 9px; color: var(--haze); }
.online-list li::before { content: "—"; color: var(--violet); flex: none; }
.online-card .btn { justify-self: start; margin-top: 4px; }

/* ================================================================
   HOME REBUILD (/preview/)
   Devices deliberately absent: the four-up instrument panel under the
   hero, the small-caps label above every section, and 01/02/03 numbered
   blocks. Those were the shapes shared with the competition. What is
   here instead is a reading order — statement, evidence, consequence —
   sized so the page says which service matters without four identical
   cards asking the reader to work it out.
   ================================================================ */

/* Numbers said in a sentence rather than displayed in a panel. */
.hero-credential {
  margin: 22px 0 0; max-width: 58ch; font-size: clamp(15px, 1.5vw, 17px);
  color: var(--haze); border-left: 2px solid var(--violet); padding-left: 16px;
}
.hero-credential strong { color: var(--paper); font-weight: 600; }

/* Section openings. No eyebrow — the sentence does the work. */
.argument-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 46px); }
.argument-head h2 { margin: 0 0 14px; }
.argument-head .lede { margin: 0; }

.argument { max-width: 66ch; }
.argument h2 { margin: 0 0 20px; }
.argument p { color: var(--haze); margin: 0 0 16px; font-size: clamp(15.5px, 1.6vw, 17.5px); }
.argument-kick {
  color: var(--paper) !important; border-top: 1px solid var(--hairline);
  padding-top: 16px; margin-top: 22px !important;
}

.lab-wide { margin-top: 8px; }

/* Services as ranked lanes. Weight carries the ranking. */
.lanes { display: grid; gap: 16px; }
.lane {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
.lane-body h3 { margin: 0 0 10px; }
.lane-body p { margin: 0; color: var(--haze); }
.lane-note { margin-top: 10px !important; font-size: 14px; color: var(--haze-dim) !important; }
.lane-side { display: grid; gap: 10px; justify-items: start; min-width: 190px; }
.lane-price { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--paper); letter-spacing: .04em; }
.lane-sub { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--haze-dim); letter-spacing: .04em; }

.lane-lg { border-color: var(--hairline-lit); }
.lane-lg h3 { font-size: clamp(24px, 3vw, 34px); }
.lane-lg .lane-body p { font-size: clamp(16px, 1.7vw, 18px); }
.lane-md h3 { font-size: clamp(20px, 2.2vw, 26px); }
.lane-sm { background: transparent; padding: clamp(16px, 2vw, 22px); }
.lane-sm h3 { font-size: 19px; }
.lane-sm .lane-body p { font-size: 14.5px; }

.lanes-more { margin: 22px 0 0; }

/* Evenly-weighted supporting points. Prose, not a numbered list. */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 40px); }
.pillars h3 { margin: 0 0 10px; font-size: clamp(17px, 1.8vw, 20px); }
.pillars p { margin: 0; color: var(--haze); font-size: 15px; }

@media (max-width: 820px) {
  .lane { grid-template-columns: 1fr; }
  .lane-side { justify-items: stretch; min-width: 0; }
  .pillars { grid-template-columns: 1fr; }
}

/* ================================================================
   HOW I COACH
   A reading page, not a product page. No cards, no grid, no panels —
   the layout's only job is to let a long argument be read, and to give
   each idea's sharp line room to land before the explanation arrives.
   ================================================================ */
.method-open { max-width: 64ch; }
.method-open h1 { margin: 0 0 20px; }
.method-open .lede { margin: 0 0 16px; }

.method-pull {
  margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hairline);
  font-size: clamp(16px, 1.8vw, 19px); color: var(--paper); font-style: normal;
}

.tenets { display: grid; gap: clamp(50px, 7vw, 90px); max-width: 74ch; }

.tenet h2 {
  margin: 0 0 18px; font-size: clamp(23px, 3vw, 34px); line-height: 1.15;
}
/* The line that does the work. Said first, at size, before any
   explanation — most readers will only take this away and that is fine. */
.tenet-line {
  margin: 0 0 20px; padding-left: 18px; border-left: 2px solid var(--violet);
  font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--paper);
}
/* Measured, not guessed: the CSS ch unit is the width of a zero, which
   is wider than an average letter, so the 74ch container was putting 87
   real characters on a line. Comfortable reading is 60-75. */
.tenet-body { max-width: 62ch; }
.tenet-body p {
  margin: 0 0 14px; color: var(--haze);
  font-size: clamp(15.5px, 1.6vw, 17px); line-height: 1.7;
}
.tenet-body p:last-child { margin-bottom: 0; }
.tenet-body strong { color: var(--paper); }

.method-close { max-width: 62ch; }
.method-close h2 { margin: 0 0 18px; }
.method-close p { color: var(--haze); margin: 0 0 14px; font-size: clamp(15.5px, 1.6vw, 17.5px); }

/* A line of the coaching philosophy, dropped into a page that is already
   on that subject. Sized to interrupt — it should read as someone
   speaking, not as body copy that happens to be indented. */
.pull { margin: 0; max-width: 46ch; }
.pull blockquote {
  margin: 0; padding-left: clamp(18px, 2.5vw, 26px);
  border-left: 2px solid var(--violet);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.8vw, 30px); line-height: 1.3; color: var(--paper);
}
.pull figcaption {
  margin-top: 14px; padding-left: clamp(18px, 2.5vw, 26px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--haze-dim);
}
.pull figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline-lit); }
.pull figcaption a:hover { color: var(--violet); border-color: var(--violet); }