/* ==========================================================================
   APEX COACHING - Apex 2.0 landing page
   Design system: strict black & white monochrome - conversion elements are
   white-on-dark (buttons, highlight strokes), black-on-light in the light section.
   One family (Archivo variable) pushed hard: 900 tight display, wide eyebrows.
   ========================================================================== */

:root {
  --bg:        #0c0c0d;
  --bg-2:      #121214;
  --bg-3:      #1a1a1d;
  --ink:       #f2f2f0;
  --ink-dim:   rgba(242, 242, 240, .62);
  --ink-faint: rgba(242, 242, 240, .38);      /* decorative only (marquee, ghost numerals) */
  --ink-faint-text: rgba(242, 242, 240, .55); /* faint but AA-readable text */
  --line:      rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .07);
  /* Strict monochrome brand: "conversion colour" is white on dark, black on light */
  --accent:      #f2f2f0; /* backgrounds: buttons, highlight strokes */
  --accent-text: rgba(242, 242, 240, .62); /* eyebrows / numerals on dark */
  --accent-hi:   #ffffff;
  --accent-deep: #d9d9d6; /* button hover - slightly dimmed white */
  --light-bg:  #f2f2f0;
  --light-ink: #0c0c0d;
  --light-dim: rgba(12, 12, 13, .64);
  --light-line: rgba(12, 12, 13, .14);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --container: 76rem;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(5.5rem, 11vw, 10rem);
  --nav-h: 4.5rem;
  --announce-h: 2.25rem;

  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* Anchor targets stop clear of the fixed nav */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.25rem);
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--bg); }

/* Film grain over everything, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: 52rem; }

.section { padding-block: var(--section-pad); position: relative; }

.section--tint { background: var(--bg-2); }

.section--light {
  background: var(--light-bg);
  color: var(--light-ink);
}

/* ---------- Type ---------- */
.eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: .38em;
  color: var(--accent-text);
  margin-bottom: 1.35rem;
}

.eyebrow--light { color: rgba(242, 242, 240, .85); }
.eyebrow--accent { color: var(--light-dim); }

.display {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .95;
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.section--light .display { color: var(--light-ink); }

.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 36em;
  margin-bottom: 1.25rem;
}

.section--light .lead { color: var(--light-ink); }

.lead--measure { max-width: 44em; }

.body-text {
  color: var(--ink-dim);
  max-width: 38em;
  margin-bottom: 1.5rem;
}

/* White marker stroke behind key words, black knockout text */
.hl {
  background: linear-gradient(104deg,
    transparent .6%,
    var(--accent) 2.2%,
    var(--accent) 97.6%,
    transparent 99.2%);
  color: var(--bg);
  padding: .04em .16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.text-link {
  display: inline-block;
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: .2em;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.text-link:hover { color: var(--accent-hi); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 800;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease),
              color .25s var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, .12);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, .35);
  color: var(--ink);
  background: rgba(255, 255, 255, 0);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-2px);
}

.btn--sm { padding: .8rem 1.3rem; font-size: .8rem; }
.btn--lg { padding: 1.2rem 2.3rem; font-size: 1rem; }
.btn--xl { padding: 1.4rem 3rem; font-size: 1.05rem; }

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 120;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .8rem 1.2rem;
  transform: translateY(-250%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Announcement bar ---------- */
.announce {
  position: relative;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.announce a {
  color: var(--ink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: 1rem;
}

.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* On desktop only the first copy shows, centered; the short static line is hidden */
.announce__track > span + span { display: none; }
.announce__static { display: none; }

@media (max-width: 47.9em) {
  /* Narrow screens: ticker-scroll the announcement instead of clipping it */
  .announce { justify-content: flex-start; }

  .announce a { padding-inline: 0; }

  .announce__track {
    display: flex;
    width: max-content;
    animation: marquee 18s linear infinite;
  }

  /* WCAG 2.2.2: let hover/focus pause the moving deadline */
  .announce a:hover .announce__track,
  .announce a:focus-visible .announce__track { animation-play-state: paused; }

  .announce__track > span + span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none !important; }

  /* No ticker under reduced motion: swap to the short static line that fits */
  @media (max-width: 47.9em) {
    .announce { justify-content: center; }
    .announce__track { display: none; }
    .announce__static { display: inline; }
  }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: var(--announce-h);
  left: 0; right: 0;
  z-index: 50;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease), top .35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  top: 0;
  background: rgba(12, 12, 13, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
}

.nav__mark {
  height: 1.6rem;
  width: auto;
}

.nav__wordmark {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav__wordmark em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: .35em;
}

.nav__links {
  display: flex;
  gap: 1.9rem;
}

.nav__links a {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  opacity: .85;
  position: relative;
  padding-block: .3rem;
  transition: opacity .2s;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.nav__burger {
  display: none;
  background: none;
  border: 0;
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  cursor: pointer;
}

.nav__burger span {
  position: absolute;
  left: .35rem;
  right: .35rem;
  height: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .3s;
}

.nav__burger span:nth-child(1) { top: .85rem; }
.nav__burger span:nth-child(2) { top: 1.45rem; }

.nav__burger.open span:nth-child(1) { top: 1.15rem; transform: rotate(45deg); }
.nav__burger.open span:nth-child(2) { top: 1.15rem; transform: rotate(-45deg); }

/* Mobile menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(12, 12, 13, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open (so links are focusable immediately)
     and only after the fade on close */
  transition: opacity .35s var(--ease), visibility 0s .35s;
}

.mmenu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease), visibility 0s 0s;
}

.mmenu nav {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: center;
}

.mmenu nav > a:not(.btn) {
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.mmenu nav > a:not(.btn):hover { color: var(--accent-hi); }

.mmenu .btn { margin-top: 1.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media,
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media video { background: var(--bg); }

/* Ken Burns drift for the poster-image fallback */
.hero__media img.kenburns {
  animation: kenburns 26s var(--ease) infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, 1.5%); }
}

/* Dual scrim: dark band up top for nav, heavy melt into page bg at the bottom */
/* Three layers, tuned against the actual footage (headline zone measures
   69-132 luminance across the clip):
   1. a flat darken so the moving video never overpowers the page
   2. a dark band at the top so the nav stays readable
   3. a stronger band at the bottom where the headline and buttons sit */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none; /* never block taps on the video (iOS native play button) */
  background:
    linear-gradient(0deg, rgba(12, 12, 13, .4), rgba(12, 12, 13, .4)),
    linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(0deg, var(--bg) 0%, rgba(12, 12, 13, .88) 28%,
                          rgba(12, 12, 13, .5) 52%, rgba(12, 12, 13, 0) 76%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(5rem, 11vh, 8.5rem);
  padding-top: 9rem;
}

.hero__title {
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: -.018em;
  line-height: .93;
  font-size: clamp(2.6rem, 7.4vw, 6.1rem);
  max-width: 13em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
  animation: heroRise 1s var(--ease) both .15s;
}

.hero__sub {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: rgba(242, 242, 240, .88);
  max-width: 34em;
  margin-bottom: 2.2rem;
  animation: heroRise 1s var(--ease) both .3s;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: heroRise 1s var(--ease) both .45s;
}

.hero .eyebrow { animation: heroRise 1s var(--ease) both .05s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  position: absolute;
  bottom: 2.2rem;
  right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 2;
  width: 2rem;      /* real hit area; the 1px line sits centered inside */
  height: 4.5rem;
  overflow: hidden;
}

.hero__scroll span {
  position: absolute;
  left: calc(50% - .5px);
  top: -50%;
  width: 1px;
  height: 50%;
  background: rgba(242, 242, 240, .7);
  animation: scrollLine 2.2s var(--ease) infinite;
}

@keyframes scrollLine {
  0%   { top: -50%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ---------- Stats ---------- */
.stats {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: clamp(2rem, 4vw, 3.2rem) 1rem;
  text-align: center;
  border-left: 1px solid var(--line-soft);
}

.stat:first-child { border-left: 0; }

.stat__num {
  display: block;
  font-weight: 900;
  font-stretch: 88%;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .55rem;
}

.stat__label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-dim);
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1.1rem;
  background: var(--bg);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track span {
  white-space: nowrap;
  font-weight: 800;
  font-stretch: 88%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-faint);
  padding-right: .5rem;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Split layouts ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* Reversed split: media left, text right on desktop */
.split--rev .split__media { order: 1; }
.split--rev .split__text { order: 2; }

/* ---------- Photo cards ---------- */
.photo-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}

/* Photos run in full colour - the monochrome is the design system around
   them, and the people are the bit that should pop. */
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}

.photo-card:hover img { transform: scale(1.08); }

.photo-card--tall img { aspect-ratio: 3 / 4; }
.photo-card--portrait img { aspect-ratio: 4 / 5; }

/* No scrim behind the caption now, so it carries its own legibility */
.photo-card__tag {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .7);
}

/* ---------- Cards (three pillars) ---------- */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 2.5rem;
}

.card {
  background: var(--bg-2);
  padding: clamp(1.8rem, 3vw, 2.8rem);
  transition: background .35s var(--ease);
}

.card:hover { background: var(--bg-3); }

.card__num {
  display: block;
  font-weight: 900;
  font-size: .85rem;
  letter-spacing: .3em;
  color: var(--accent-text);
  margin-bottom: 3.2rem;
}

.card h3 {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: -.005em;
  line-height: 1.1;
  margin-bottom: .9rem;
}

.card p { color: var(--ink-dim); font-size: .98rem; }

/* ---------- Steps ---------- */
/* Full-width image band breaking up a text-only section */
.band {
  margin-top: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}

.band img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

@media (max-width: 47.9em) {
  .band img { aspect-ratio: 3 / 2; }
}

.steps {
  list-style: none;
  margin-top: 3rem;
  border-top: 1px solid var(--line-soft);
}

.step {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}

.step__num {
  font-weight: 900;
  font-stretch: 82%;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 242, 240, .3);
}

.step h3 {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: .45rem;
}

.step p { color: var(--ink-dim); max-width: 44em; }

.section__cta { margin-top: 3rem; }

/* ---------- Results bento (light section) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
  margin-top: 3rem;
}

.bcard {
  grid-column: span 4;
  border: 1px solid var(--light-line);
  background: #fff;
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 13rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.bcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(12, 12, 13, .09);
}

.bcard--wide { grid-column: span 8; }

.bcard__name {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .95rem;
  color: var(--light-ink);
  margin-bottom: .5rem;
}

.bcard p { color: var(--light-dim); font-size: .98rem; line-height: 1.55; }

.bcard__big {
  font-weight: 900;
  font-stretch: 82%;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--light-ink);
  margin-bottom: auto;
}

.bcard__big em {
  font-style: normal;
  font-size: .38em;
  letter-spacing: 0;
}

.bcard--num { justify-content: space-between; }

/* Individual Google review cards: stars top, quote, attribution pinned to the bottom */
.bcard--review {
  justify-content: flex-start;
  gap: .85rem;
}

.bcard__stars-dark {
  color: var(--light-ink);
  font-size: .85rem;
  letter-spacing: .22em;
}

.bcard--review .bcard__name {
  margin-top: auto;
  margin-bottom: 0;
}

.bcard__name em {
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: 0;
  color: var(--light-dim);
  margin-left: .4em;
}

.bcard--accent {
  background: var(--light-ink);
}

.bcard--accent .bcard__name { color: var(--ink); }
.bcard--accent p { color: rgba(242, 242, 240, .72); }

.bcard--link {
  background: var(--light-ink);
  justify-content: space-between;
  cursor: pointer;
}

.bcard--link .bcard__name { color: #fff; }

.bcard__stars {
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: .18em;
}

.bcard--link:hover { background: #2b2c33; }

/* ---------- Challenge ---------- */
.ticks {
  list-style: none;
  margin-bottom: 1.6rem;
}

.ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7rem;
  color: var(--ink);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: .85em;
  height: .5em;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.intake {
  border-left: 3px solid var(--ink);
  background: var(--bg-2);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.8rem;
  max-width: 34em;
}

.intake p { color: var(--ink); font-size: .98rem; }

.cta-note {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--ink-dim);
}

/* Visible content slots awaiting Dan's copy/photos */
.placeholder {
  border: 1px dashed var(--line);
  padding: 1.1rem 1.3rem;
  color: var(--ink-faint-text);
  font-style: italic;
  font-size: .95rem;
  max-width: 38em;
  margin-bottom: 1.5rem;
}

.placeholder--center {
  margin-inline: auto;
  margin-top: 2rem;
  text-align: center;
}

/* ---------- Founder ---------- */
.founder {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.founder__sig {
  margin-top: 1.4rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}

.founder__sig span {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--ink-dim);
  margin-top: .15rem;
}

/* ---------- FAQ ---------- */
.faqs {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-soft);
}

.faq {
  border-bottom: 1px solid var(--line-soft);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  transition: color .25s;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--accent-hi); }

.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .3s var(--ease);
}

.faq__icon::before {
  left: 0; right: 0; top: calc(50% - 1px);
  height: 2px;
}

.faq__icon::after {
  top: 0; bottom: 0; left: calc(50% - 1px);
  width: 2px;
}

.faq[open] .faq__icon::after { transform: scaleY(0); }

.faq__body {
  padding-bottom: 1.6rem;
  color: var(--ink-dim);
  max-width: 46em;
}

/* ---------- Finale ---------- */
.finale {
  padding-block: var(--section-pad);
  background:
    linear-gradient(0deg, rgba(12, 12, 13, .88), rgba(12, 12, 13, .88)),
    url("../assets/img/apply-bg.jpg") center / cover no-repeat;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.finale__title {
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: -.018em;
  line-height: .95;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
  max-width: 14em;
  margin-inline: auto;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}

.finale .lead { margin-inline: auto; }

.finale__ctas {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.finale__note {
  margin-top: 2.2rem;
  font-size: .92rem;
  color: var(--ink-dim);
}

.finale__note a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.finale__note a:hover { color: var(--accent-hi); }

/* ---------- Footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}

.footer__mark {
  height: 2.1rem;
  width: auto;
  margin-bottom: 1.1rem;
}

.footer__brand p {
  color: var(--ink-dim);
  font-size: .95rem;
  max-width: 20em;
}

.footer__col h3 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-faint-text);
  margin-bottom: 1.1rem;
}

.footer__col a,
.footer__col address {
  display: block;
  font-style: normal;
  color: var(--ink-dim);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: .4rem;
  transition: color .2s;
}

.footer__col a:hover { color: var(--ink); }

.footer__legal {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__legal p {
  font-size: .8rem;
  color: var(--ink-faint-text);
}

.footer__legal-cta {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-dim);
}

.footer__legal-cta:hover { color: var(--accent-hi); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: .8rem var(--pad-x);
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  background: rgba(12, 12, 13, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%);
  visibility: hidden; /* keep the off-screen link out of the tab order */
  transition: transform .4s var(--ease), visibility 0s .4s;
  display: none;
}

.sticky-cta.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .4s var(--ease), visibility 0s 0s;
}

/* Never float above the open full-screen menu */
body.menu-open .sticky-cta {
  transform: translateY(110%);
  visibility: hidden;
}

.sticky-cta .btn { width: 100%; }

/* ---------- Scroll reveals ----------
   Hidden ONLY when JS has confirmed it is running (html.js added as the
   script's first statement) - so a script failure or JS-off visit degrades
   to a fully visible page instead of a blank one. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease) var(--d, 0s),
              transform .8s var(--ease) var(--d, 0s);
}

.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 63.9em) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  /* nav CTA stays visible on tablets - the sticky bar only exists below 48em */

  .split,
  .founder {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .split--rev .split__media { order: 1; }
  .split--rev .split__text { order: 2; }

  .cards3 { grid-template-columns: 1fr; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(1),
  .stat:nth-child(2) { border-bottom: 1px solid var(--line-soft); }

  .bcard,
  .bcard--wide { grid-column: span 6; }
}

@media (max-width: 47.9em) {
  .announce a { font-size: .58rem; letter-spacing: .14em; }

  .nav__cta-wrap .btn { display: none; } /* sticky bar takes over below 48em */

  .hero__ctas .btn { width: 100%; }

  .step { grid-template-columns: 4rem 1fr; gap: 1rem; }

  .bcard,
  .bcard--wide { grid-column: span 12; min-height: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .sticky-cta { display: block; }

  .footer { padding-bottom: 5.5rem; } /* room for sticky bar */

  .hero__scroll { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__media img.kenburns,
  .marquee__track,
  .hero__scroll span {
    animation: none;
  }

  .hero .eyebrow,
  .hero__title,
  .hero__sub,
  .hero__ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .photo-card img,
  .bcard,
  .btn { transition: none; }
}

/* ==========================================================================
   THANK YOU PAGE (thankyou.html)
   Post-application confirmation. Shares the site's tokens and components;
   these are the page-specific pieces only.
   ========================================================================== */

/* Minimal header - no nav links, no exits from a post-conversion page */
.ty-nav {
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1.4rem;
}

.ty-nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: .8rem;
}

.ty-nav__mark { height: 1.7rem; width: auto; }

.ty-nav__wordmark {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ty-nav__wordmark em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: .35em;
}

/* Confirmation block */
.ty-hero {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
}

.ty-tick {
  width: 3.4rem;
  height: 3.4rem;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.ty-tick::after {
  content: "";
  width: 1.3rem;
  height: .7rem;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg) translate(2px, -2px);
}

/* Hero splits in two on desktop: confirmation text left, Dan's welcome video
   right. Below 60em it stacks, video first, so the reassurance is the first
   thing on a phone. */
.ty-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.ty-hero__text { min-width: 0; }

/* Dan's welcome video - portrait, capped so a 9:16 frame can't dominate
   the screen on a large monitor. */
.ty-welcome {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}

.ty-welcome__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

.ty-welcome__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder state - dashed so it reads as deliberately unfinished rather
   than as a broken embed. Delete .ty-welcome__ph rules once the video is in. */
.ty-welcome__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-2);
  border: 1px dashed rgba(255, 255, 255, .28);
}

.ty-welcome__ph-icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  position: relative;
}

.ty-welcome__ph-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent rgba(255, 255, 255, .55);
}

.ty-welcome__ph-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--ink-faint-text);
}

.ty-welcome__ph-note {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-dim);
}

.ty-welcome figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-faint-text);
  text-align: center;
}

@media (max-width: 60em) {
  .ty-hero__grid { grid-template-columns: 1fr; }
  .ty-welcome { order: -1; max-width: 15rem; }
}

.ty-hero__title {
  font-weight: 900;
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: -.018em;
  line-height: .95;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

/* The reassurance strip: timing promise, who calls, what it is */
.ty-promise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 2.5rem;
}

.ty-promise__item {
  background: var(--bg-2);
  padding: 1.5rem 1.4rem;
}

.ty-promise__k {
  display: block;
  font-weight: 900;
  font-stretch: 88%;
  font-size: 1.45rem;
  line-height: 1.1;
  margin-bottom: .4rem;
}

.ty-promise__v {
  display: block;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

/* "Expect a call" callout */
.ty-callout {
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  gap: 1.6rem;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.ty-callout__text { flex: 1 1 16rem; }

.ty-callout h3 {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

.ty-callout p { color: var(--ink-dim); font-size: .95rem; }

.ty-callout__num {
  font-weight: 900;
  font-stretch: 88%;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.01em;
  white-space: nowrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .15em;
}

.ty-callout__num:hover { color: var(--ink); opacity: .8; }

/* Testimonial placeholder cards (light section) */
.ty-tgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 2.5rem;
}

.ty-tcard {
  border: 1px dashed rgba(12, 12, 13, .3);
  background: rgba(255, 255, 255, .55);
  padding: 1.6rem;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ty-tcard p {
  font-style: italic;
  color: var(--light-dim);
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.ty-tcard span {
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  color: rgba(12, 12, 13, .45);
}

/* Google review strip on the light section */
.ty-google {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border: 1px solid var(--light-line);
  background: #fff;
  padding: 1.5rem 1.7rem;
  margin-top: 1.1rem;
}

.ty-google__score {
  font-weight: 900;
  font-stretch: 82%;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -.02em;
}

.ty-google__meta { flex: 1 1 14rem; }

.ty-google__stars { letter-spacing: .2em; font-size: 1rem; }

.ty-google__meta p { color: var(--light-dim); font-size: .92rem; margin-top: .2rem; }

/* Note from Dan */
.ty-note {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.ty-note__sig {
  margin-top: 1.2rem;
  font-weight: 700;
  font-size: .95rem;
}

.ty-note__sig span {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--ink-dim);
  margin-top: .15rem;
}

@media (max-width: 63.9em) {
  .ty-promise { grid-template-columns: 1fr; }
  .ty-note { grid-template-columns: 1fr; }
  .ty-note__media { max-width: 14rem; }
}

@media (max-width: 63.9em) {
  .ty-callout { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}

@media (max-width: 47.9em) {
  .ty-tgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   APPLICATION POPUP
   Hosts the GymOS form page in an iframe so applying never leaves the page.
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s .3s;
}

.modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s 0s;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 13, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(38rem, 100%);
  height: min(46rem, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: translateY(14px);
  transition: transform .35s var(--ease);
}

.modal.open .modal__panel { transform: translateY(0); }

.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.1rem .95rem 1.4rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.modal__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 900;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
}

.modal__title em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: .3em;
}

.modal__mark { height: 1.3rem; width: auto; }

.modal__close {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

.modal__close:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .4);
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 2px;
  margin-left: -.5rem;
  margin-top: -1px;
  background: var(--ink);
}

.modal__close::before { transform: rotate(45deg); }
.modal__close::after  { transform: rotate(-45deg); }

.modal__frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg);
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--ink-faint-text);
  flex-shrink: 0;
}

.modal__foot a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.modal__foot a:hover { border-bottom-color: var(--ink); }

/* Full-bleed on phones - the form needs every pixel */
@media (max-width: 47.9em) {
  .modal { padding: 0; }

  .modal__panel {
    width: 100%;
    height: 100%;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__panel { transition: none; }
  .modal__panel { transform: none; }
}

/* Light variant - used when the embedded form is GymOS's own (white) page, so
   the whole panel reads as a deliberate light card rather than a mismatch. */
.modal--light .modal__panel {
  background: var(--light-bg);
  border-color: var(--light-line);
}

.modal--light .modal__bar { border-bottom-color: var(--light-line); }
.modal--light .modal__title { color: var(--light-ink); }
.modal--light .modal__title em { color: var(--light-dim); }
.modal--light .modal__mark { filter: invert(1); } /* white logo -> black */
.modal--light .modal__close { border-color: var(--light-line); }

.modal--light .modal__close::before,
.modal--light .modal__close::after { background: var(--light-ink); }

.modal--light .modal__close:hover {
  background: rgba(12, 12, 13, .06);
  border-color: rgba(12, 12, 13, .4);
}

.modal--light .modal__frame { background: #fff; }

.modal--light .modal__foot {
  border-top-color: var(--light-line);
  color: var(--light-dim);
}

.modal--light .modal__foot a {
  color: var(--light-ink);
  border-bottom-color: var(--light-line);
}

.modal--light .modal__foot a:hover { border-bottom-color: var(--light-ink); }

/* ---------- Member video testimonials (YouTube) ---------- */
/* Amina's was filmed professionally in landscape, so it gets a wide 16:9 slot
   of its own above the reels rather than being cropped into the portrait grid.
   Slightly narrower than the reel row below it so it reads as the lead film
   with the reels as supporting voices, not as one big banner. */
/* margin-inline:auto centres the block in the container. It only has an effect
   when there's spare room, so narrow screens are untouched - the block just
   fills the width and the reels below stack as normal. */
.vid-feature {
  max-width: 52rem;
  margin: 2.5rem auto 0;
}

.vid-feature__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--light-line);
}

.vid-feature__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vid-feature figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--light-dim);
  text-align: center;
}

/* auto-fit means any number of videos lays out sensibly - add or remove a
   <figure> and the grid reflows on its own, no CSS change needed */
.vids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem;
  max-width: 62rem;
  margin: 2.5rem auto 0;
}

.vid__frame {
  position: relative;
  aspect-ratio: 9 / 16;   /* Instagram reel / YouTube Shorts */
  overflow: hidden;
  background: #000;
  border: 1px solid var(--light-line);
}

.vid__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vid figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--light-dim);
  text-align: center;
}

/* Stack to one column on phones - three 9:16 frames side by side get too
   narrow to see faces below about 40em */
@media (max-width: 40em) {
  .vids { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; }
}