/* K2 Athletics - assets/style.css?v=7 (first pass 2026-09-18)
   Palette: white ground, true-black bands, one brand red (#9C2019).
   Type: Archivo Variable display (matches the barbell wordmark), Rubik 400 body.
   Motion tier 1 as of edit round 2 (2026-09-19): the progression ladder builds on
   scroll, at Levi's explicit request. Nothing else moves. */

@font-face {
  font-family: "Archivo Variable";
  src: url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --panel: #f5f4f2;
  --ink: #161616;
  --black: #0b0b0b;
  --black-2: #151515;
  --red: #9c2019;
  --muted: #44423f;
  --muted-on-dark: #c9c6c2;
  --hairline: #e2dfd9;
  --hairline-dark: #2c2c2c;
  --radius: 14px;
  --wrap: 1120px;
  --display: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: "Rubik", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-feature-settings: "liga" 1, "kern" 1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.015em; }

p { max-width: 62ch; }
p + p { margin-top: 1em; }

a { color: var(--ink); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--red); } }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--black);
  color: #fff;
  padding: 0.7rem 1.2rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
@media (hover: hover) { .btn:hover { background: var(--red); border-color: var(--red); color: #fff; } }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
@media (hover: hover) { .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }
.btn--on-dark { background: #fff; border-color: #fff; color: var(--ink); }
@media (hover: hover) { .btn--on-dark:hover { background: var(--red); border-color: var(--red); color: #fff; } }

/* ---------- header ---------- */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  overflow-anchor: none;
  transition: box-shadow 0.25s ease;
}
.site-header.shrunk { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1); }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 110px;
  transition: min-height 0.25s ease;
}
.site-header.shrunk .wrap { min-height: 88px; }
.site-header .logo { flex: 0 0 auto; display: block; }
/* Round 4: 25% bigger again in BOTH states, so 95 and 72 (was 76 and 58, and the
   first pass was 52). The bar grows with it or the mark has nowhere to sit. */
.site-header .logo img { width: 95px; height: 95px; border-radius: 50%; transition: width 0.25s ease, height 0.25s ease; }
.site-header.shrunk .logo img { width: 72px; height: 72px; }
@media (max-width: 560px) {
  .site-header .wrap { min-height: 94px; }
  .site-header.shrunk .wrap { min-height: 78px; }
  .site-header .logo img { width: 80px; height: 80px; }
  .site-header.shrunk .logo img { width: 65px; height: 65px; }
}
.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
}
.main-nav a, .nav-menu-btn {
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
@media (hover: hover) { .main-nav a:hover { color: var(--red); } }
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--red);
  color: var(--ink);
  font-weight: 700;
}
.header-cta { flex: 0 0 auto; margin-left: 1rem; }
.header-cta .btn { padding: 0.75rem 1.4rem; font-size: 0.95rem; }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 1060px) {
  /* Without JS the nav stays in-flow: header wraps and the full link list
     renders as a stacked column. With JS it collapses behind the toggle. */
  .site-header .wrap { flex-wrap: wrap; }
  .main-nav { flex-basis: 100%; margin-left: 0; }
  .js .nav-toggle { display: block; }
  .js .header-cta { display: none; }
  .js .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    flex-basis: auto;
    display: none;
  }
  .js .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }
  .js .main-nav ul { padding: 0.5rem 22px 1rem; }
  .main-nav li { border-top: 1px solid var(--hairline); }
  .main-nav li:first-child { border-top: 0; }
  .main-nav a { display: block; padding: 0.85rem 0; font-size: 1.05rem; }
  .main-nav a[aria-current="page"] { border-bottom-color: transparent; color: var(--red); }
  .main-nav .nav-cta { margin-top: 0.75rem; }
  .main-nav .nav-cta .btn { display: block; text-align: center; color: #fff; }
  .main-nav .nav-cta .btn:hover { color: #fff; }
}
@media (min-width: 1061px) {
  .main-nav .nav-cta { display: none; }
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  background: var(--black);
  overflow: hidden;
}
.hero picture { display: block; }
.hero picture img {
  display: block;
  width: 100%;
  height: auto;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2rem 22px;
  background: radial-gradient(ellipse 60% 60% at 50% 52%, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.28) 70%, rgba(0, 0, 0, 0.12));
}
.hero__sub {
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  max-width: 48ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
/* the break puts "athletes" on the first line so it runs longer than the second */
.brk { display: none; }
@media (min-width: 620px) { .brk { display: inline; } }
.hero__logo {
  width: clamp(110px, 16vw, 170px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}
.hero h1 {
  color: #fff;
  font-size: clamp(1.55rem, 5.2vw, 2.9rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  max-width: 100%;
}

/* ---------- inner page hero ---------- */
.page-hero {
  background: var(--black);
  color: #fff;
  padding-block: clamp(2.8rem, 6vw, 4.5rem);
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.page-hero h1 { color: #fff; }
.page-hero .lead {
  color: var(--muted-on-dark);
  margin-top: 1.1rem;
  font-size: 1.12rem;
}
.page-hero img {
  border-radius: var(--radius);
  max-height: 420px;
  width: auto;
  justify-self: end;
}
@media (max-width: 760px) {
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero img { justify-self: start; max-height: 340px; }
}

/* ---------- intro band with proof strip ---------- */
.band {
  background: var(--black);
  color: #fff;
  text-align: center;
}
/* Round 4: Levi wanted the gap between the hero and this heading closed up. */
.hero + .band.section { padding-top: clamp(2rem, 4vw, 3.2rem); }
/* Round 3: Levi found this band heavy. Back to the first pass's lighter setting
   rather than the round-2 display weight, and the proof row carries logos now. */
.band h2 {
  color: #fff;
  max-width: 38ch;
  margin-inline: auto;
  font-weight: 700;
  font-size: clamp(1.65rem, 3.1vw, 2.2rem);
  letter-spacing: -0.015em;
}
.band .band__intro {
  color: var(--muted-on-dark);
  max-width: 64ch;
  margin: 1.2rem auto 0;
}
/* .band centres its TEXT, but a <p> still inherits max-width:62ch as a
   left-aligned block, so an inline-block button inside it centres within
   that block rather than within the band. That is why "Get in touch" sat
   off to the left. Every paragraph in a band gets auto side margins. */
.band p { margin-inline: auto; }
.proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
  margin-top: 2.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  padding-bottom: 2.2rem;
}
.proof li {
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  max-width: 24ch;
}
.proof li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}
.proof__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 96px;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.proof__mark img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Mount Academy has no usable logo in the harvest, so its tile is set in type
   until Kyle sends the real mark. Swap the span for an img and it is done. */
.proof__mark--type {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

/* ---------- ladder diagram ---------- */
.ladder { margin-top: 2.5rem; }
.ladder svg { display: block; width: 100%; height: auto; }
.ladder--mobile { display: none; }
@media (max-width: 700px) {
  .ladder--desktop { display: none; }
  .ladder--mobile { display: block; }
}
.ladder-note {
  text-align: center;
  margin-top: 2rem;
}

/* ---------- split (photo + content) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split > figure > img,
.split > img {
  border-radius: var(--radius);
}
.split--text-first > figure { order: 2; }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split--text-first > figure { order: 0; }
}

/* ---------- numbered audience rows ---------- */
.rows { list-style: none; margin-top: 1.8rem; }
.rows li { border-top: 1px solid var(--hairline); }
/* Round 4: the whole row is a link to its programme page. Same layout as before,
   the <a> just took the grid over from the <li>. */
.rows__link {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.4rem 1rem;
  padding: 1.15rem 0.7rem;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: background-color 150ms ease;
}
/* No arrow glyph: an ::after in column 2 fought the text for the track width and
   squeezed the copy to about 90px. The hover tint is the affordance instead, and
   Levi asked for the format to stay exactly as it was. */
@media (hover: hover) {
  .rows__link:hover { background: var(--panel); color: inherit; }
  .rows__link:hover h3 { color: var(--red); }
}
.rows__link:focus-visible { background: var(--panel); }
.rows .rows__num {
  font-weight: 700;
  color: var(--red);
  font-size: 1.05rem;
}
.rows h3 { margin-bottom: 0.2rem; }
.rows p { color: var(--muted); font-size: 0.98rem; }
.split .btn { margin-top: 1.8rem; }

/* ---------- big line band ---------- */
/* ---------- Practice what you preach ----------
   This is the house fixed-reveal, lifted straight off The Kettle Black
   (`Clients/The Kettle Black/site/style.css`, ".fixed-reveal", Shelf C #2a):
   background-attachment: fixed, content scrolling over it, ZERO JavaScript.
   The browser does the work, which is why it is smooth. The round 9 version
   translated the image from JS on every scroll event and juddered badly.
   Both of Kettle Black's guards come with it, and both matter:
     - iOS Safari does not honour background-attachment: fixed, so the
       -webkit-touch-callout @supports test drops it back to scroll.
     - under 768px it falls back to scroll as well, because a fixed
       background on a phone is a fight not worth having.

   PATHS MUST BE ROOT-RELATIVE. `--img` is declared in the HTML but CONSUMED
   here, and a url() inside a custom property resolves against the stylesheet,
   not the page. `url('assets/images/x.webp')` became `/assets/assets/images/x.webp`
   and 404'd silently behind the black background colour. Kettle Black writes
   `/assets/images/...` with the leading slash for exactly this reason. */
.bigline {
  position: relative;
  background-color: var(--black);
  background-image: var(--img);
  background-attachment: fixed;
  background-size: cover;
  background-position: center 38%;
  padding: 26vh 22px;
}
/* the scrim keeps the line readable over whatever part of the photo shows */
.bigline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.bigline p {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 18ch;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65);
}
@supports (-webkit-touch-callout: none) {
  .bigline { background-attachment: scroll; }
}
@media (max-width: 768px) {
  .bigline {
    background-attachment: scroll;
    background-image: var(--img-small, var(--img));
    padding: 16vh 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bigline { background-attachment: scroll; }
}


/* ---------- coach section ---------- */
.coach img {
  border-radius: var(--radius);
  max-width: 420px;
}

/* ---------- testimonials ---------- */
.testimonials { background: var(--panel); }
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 2.2rem;
  align-items: start;
}
@media (max-width: 760px) { .review-grid { grid-template-columns: 1fr; } }
.review {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.review__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.review__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.review__name { font-weight: 700; line-height: 1.3; }
.review__sub { font-size: 0.9rem; color: var(--muted); }
.review blockquote { font-size: 1rem; color: var(--ink); }

/* ---------- faq ---------- */
.faq { margin-top: 2rem; max-width: 62ch; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1rem 2.6rem 1rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.1rem; margin: 0; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.faq-a { padding: 0 2.6rem 1.2rem 0; }
.faq-a p { color: var(--muted); }

/* ---------- programme sections ---------- */
.programme { border-top: 1px solid var(--hairline); }
.programme:first-of-type { border-top: 0; }

/* ---------- forms ---------- */
.form-block { background: var(--panel); }
form.netlify {
  display: grid;
  gap: 1.1rem;
  max-width: 560px;
  margin-top: 1.8rem;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid #cfccc5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.honeypot { position: absolute; left: -9999px; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin-top: 1.6rem; }
.contact-list li { padding: 0.9rem 0; border-top: 1px solid var(--hairline); }
.contact-list .contact-list__label { font-weight: 700; display: block; font-size: 0.95rem; }
.contact-list a { word-break: break-word; display: inline-block; padding-block: 0.5rem; margin-block: -0.5rem 0; }
.social-row { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }

/* ---------- placeholder panel ---------- */
.placeholder {
  border: 2px dashed var(--red);
  border-radius: var(--radius);
  padding: 1.8rem;
  background: #fff;
}
.placeholder__tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  margin-bottom: 1rem;
}

/* ---------- blog ---------- */
/* Round 8: the listing is RIW's, not a boxed card. Each post is a 3px top rule with the
   label, title, blurb and a ghost button under it, capped at the same 720px measure the
   post body uses. RIW spec: .post-card{border-top:3px solid var(--ink);padding-top:24px;
   padding-bottom:28px;max-width:720px} and .post-card h2{margin:10px 0 12px}. */
.post-card {
  display: block;
  border-top: 3px solid var(--ink);
  padding: 24px 0 28px;
  max-width: 720px;
  background: none;
}
.post-card h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--ink); margin: 10px 0 12px; }
.post-card h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .post-card h2 a:hover { color: var(--red); } }
.post-card p { color: var(--muted); max-width: none; }
.post-card__cta { margin-top: 1.5rem; }

/* Long-form post typography (edit rounds 6 and 7).
   Round 6 fixed the real defect: the post was styled with inline margins and the base h2 is a
   SECTION heading at up to 2.5rem, so six of them stacked read as a list of section titles.
   Round 7 puts it on the same pattern as the Red Isle Web blog (Levi's ask): a small meta label
   with the date above the title, one thick rule under the title, and a reading column with RIW's
   own spacing (720px measure, h2 40px above and 14px below, paragraphs 18px apart).
   The per-heading hairlines added in round 6 came back OUT, because RIW uses one rule per post. */

/* the post page runs in a narrower, centred wrap, so the title and the body share
   one left edge and there is no dead column on the right at desktop width */
.page-hero--post .wrap,
.section--post .wrap { max-width: 44rem; }

/* meta label above the title, RIW's .m-label ported onto K2's dark hero */
.post-meta {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted-on-dark);
  margin-bottom: 0.7rem;
}
.post-meta a { color: inherit; text-decoration: none; }
@media (hover: hover) { .post-meta a:hover { color: #fff; text-decoration: underline; } }

/* the one thick rule, RIW's .rule, in white because K2's poster is black */
.post-rule {
  border: 0;
  border-top: 3px solid #fff;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

article.post { max-width: 720px; }
article.post h1 { margin-bottom: 1rem; }

/* the lead sits up a size and in full ink, so the answer reads first */
article.post > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.62;
  color: var(--ink);
}
article.post p { max-width: none; color: var(--muted); margin-bottom: 18px; }

/* RIW spacing: 40px above a heading, 14px below, and no rule per section */
article.post h2 {
  font-size: clamp(1.28rem, 2.2vw, 1.55rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 40px 0 14px;
}

/* closing line reads as a card, not another paragraph */
article.post .post-end {
  margin-top: 2.6rem;
  margin-bottom: 0;
  padding: 1.4rem 1.5rem;
  background: var(--panel);
  border-radius: var(--radius);
  color: var(--ink);
}
article.post .post-end a { font-weight: 700; color: var(--red); }

/* article title block: narrower and a size down from a landing-page h1 */
.page-hero--post .wrap { display: block; }
.page-hero--post h1 { font-size: clamp(1.95rem, 4vw, 2.7rem); }

/* RIW's poster ends AT the rule, so the band keeps a small bottom padding and the
   body starts 40px under it, instead of the landing-page section rhythm */
.page-hero--post,
.page-hero--blog { padding-bottom: clamp(1.7rem, 2.6vw, 2.2rem); }
.section--post { padding-top: 40px; }
.page-hero--blog + .section { padding-top: 40px; }

/* blog index: same rule under the lede, and a date label on each card */
.page-hero--blog .wrap { display: block; }
.post-card .post-card__meta {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--black);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}
.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.site-footer .wordmark {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}
.site-footer .wordmark img {
  width: clamp(190px, 22vw, 290px);
  height: auto;
}
@media (hover: hover) { .site-footer .wordmark:hover { color: var(--muted-on-dark); } }
.site-footer h2 {
  font-size: 0.95rem;
  color: var(--muted-on-dark);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.15rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer li a { display: inline-block; padding-block: 0.55rem; }
@media (hover: hover) { .site-footer a:hover { color: var(--muted-on-dark); } }
.site-footer .footer-note {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.9rem;
  color: var(--muted-on-dark);
}
.site-footer .footer-note a { color: var(--muted-on-dark); text-decoration: underline; display: inline-block; padding-block: 0.7rem; }
.site-footer .footer-note { align-items: center; }
@media (max-width: 760px) {
  .site-footer .footer-top { grid-template-columns: 1fr; }
}

/* ---------- mobile call bar ---------- */
.call-bar {
  display: none;
}
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .call-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    background: var(--black);
    border-top: 1px solid var(--hairline-dark);
  }
  .call-bar a {
    display: grid;
    place-items: center;
    min-height: 56px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
  }
  .call-bar a:hover { color: #fff; background: var(--black-2); }
  .call-bar a.call-bar__book { background: var(--red); }
  .call-bar a.call-bar__book:hover { background: #b0251d; }
}

/* ---------- utility pages ---------- */
.utility { text-align: center; }
.utility p { margin-inline: auto; }
.utility .btn { margin-top: 1.8rem; }

/* ==========================================================================
   EDIT ROUND 2 (2026-09-19)
   Programs dropdown, wordmark hero, the progression ladder build-in,
   the Who we train cards, the four pillars, and the Google review collage.
   ========================================================================== */

/* ---------- nav: Programs dropdown ---------- */
.nav-has-menu { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.nav-menu-link { border-bottom: 2px solid transparent; }
.nav-menu-btn {
  background: none;
  border: 0;
  padding: 0.35rem 0.25rem;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}
.nav-menu-btn .nav-caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
@media (hover: hover) { .nav-menu-btn:hover { color: var(--red); } }
.nav-has-menu.is-current > .nav-menu-link { border-bottom-color: var(--red); font-weight: 700; }
.main-nav .nav-menu { list-style: none; }

@media (min-width: 1061px) {
  /* .main-nav ul already sets display:flex, and it outranks a bare .nav-menu,
     so every rule that fights it has to be scoped to .main-nav too. */
  .main-nav .nav-menu {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: -0.8rem;
    min-width: 236px;
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.13);
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 130;
  }
  /* Closed only when JS is there to open it again. Without JS the four links
     render in place and stay reachable. */
  .js .main-nav .nav-menu { display: none; }
  .js .main-nav .nav-has-menu.open .nav-menu { display: flex; }
  /* The gap between the label and the card used to be a dead zone that closed the
     menu as soon as the pointer crossed it. This bridges it. */
  .main-nav .nav-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.95rem;
    height: 0.95rem;
  }
  .nav-has-menu.open .nav-menu-btn .nav-caret { transform: translateY(2px) rotate(225deg); }
  .main-nav .nav-menu li { width: 100%; border-top: 0; }
  .main-nav .nav-menu a {
    display: block;
    padding: 0.78rem 0.9rem;
    border-radius: 8px;
    border-bottom: 0;
    font-weight: 500;
  }
  @media (hover: hover) { .main-nav .nav-menu a:hover { background: var(--panel); color: var(--red); } }
  .main-nav .nav-menu a[aria-current="page"] { color: var(--red); font-weight: 700; background: var(--panel); }
}

@media (max-width: 1060px) {
  /* Stacked nav: the program links sit indented under a plain heading rather
     than behind a second tap. */
  /* Stacked nav: the label is a plain link to the programs page and the caret is
     hidden, because the four links are already listed underneath. */
  .nav-has-menu { display: block; }
  .nav-menu-link { display: block; padding: 0.85rem 0; font-size: 1.05rem; }
  .nav-menu-btn { display: none; }
  .main-nav .nav-menu,
  .js .main-nav .nav-menu { display: block; padding: 0 0 0.6rem 0; }
  .main-nav .nav-menu li { border-top: 0; }
  .main-nav .nav-menu a { padding: 0.6rem 0 0.6rem 1.1rem; font-size: 1rem; color: var(--muted); }
  .main-nav .nav-menu a[aria-current="page"] { color: var(--red); font-weight: 700; }
}

/* ---------- hero (round 3) ---------- */
/* Round mark again, a shade larger than the first pass. The overlay is pushed down
   the frame so the athletes' heads and torsos are not sitting behind the type. */
/* Round 4: the hero mark is the OPEN version, white ring and wording on
   transparent. The source file is a black SQUARE, which is why the old one had a
   black disc once border-radius clipped it. No radius needed here. */
.hero__logo { width: clamp(140px, 15vw, 200px); height: auto; }
.hero h1 {
  font-size: clamp(1.55rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hero__sub { font-size: clamp(1rem, 2.2vw, 1.2rem); }
.hero__overlay {
  gap: 1.15rem;
  align-content: end;
  padding-bottom: clamp(2.2rem, 6vh, 4.5rem);
  /* Scrim weighted to the lower half, where the type now sits, so the athletes
     read clearly through the top two thirds of the frame. */
  background:
    radial-gradient(ellipse 70% 52% at 50% 74%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 72%, rgba(0, 0, 0, 0.05)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 32%);
}
@media (max-width: 760px) {
  .hero__overlay { align-content: center; padding-bottom: 2rem; }
}

/* ---------- ladder: builds itself as you scroll to it ---------- */
.ladder .lstep__bar { transform-box: fill-box; transform-origin: 50% 100%; }
.js .ladder .lstep__bar { transform: scaleY(0); }
.js .ladder .lstep__label { opacity: 0; }
.js .ladder.is-in .lstep__bar {
  transform: scaleY(1);
  transition: transform 820ms cubic-bezier(0.22, 0.8, 0.28, 1);
  transition-delay: calc(240ms + var(--i) * 620ms);
}
.js .ladder.is-in .lstep__label {
  opacity: 1;
  transition: opacity 460ms ease;
  transition-delay: calc(240ms + var(--i) * 620ms + 460ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .ladder .lstep__bar { transform: none; }
  .js .ladder .lstep__label { opacity: 1; }
  .js .ladder .lstep__bar,
  .js .ladder .lstep__label { transition: none; }
}

/* ---------- Who we train ---------- */
/* Round 3: reverted to the first pass's photo-beside-numbered-list. The card grid
   and its banner below are unused and kept only so nothing else breaks. */
.audience-banner {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.8rem;
}
.audience-banner img { width: 100%; height: auto; display: block; }
.audience {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  margin-top: 1.6rem;
}
@media (max-width: 760px) { .audience { grid-template-columns: 1fr; } }
.audience li { display: flex; }
.audience__card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  padding: 1.5rem 1.6rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
@media (hover: hover) {
  .audience__card:hover {
    border-color: var(--ink);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    color: var(--ink);
  }
  .audience__card:hover .audience__go { color: var(--red); }
}
.audience__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--red);
}
.audience__card h3 { margin: 0; }
.audience__card p { color: var(--muted); font-size: 0.99rem; max-width: 40ch; margin: 0; }
.audience__go {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.audience__go::after { content: " \2192"; }

/* ---------- four pillars ---------- */
.pillars-band { background: var(--panel); }
.pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
  margin-top: 2.2rem;
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillars li {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
}
.pillars h3 { margin-bottom: 0.35rem; }
.pillars .pillar__lead { color: var(--ink); font-weight: 500; font-size: 0.99rem; }
.pillars ul { list-style: none; margin-top: 0.9rem; }
.pillars ul li {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.3rem 0 0.3rem 1.05rem;
  position: relative;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pillars ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.pillars-close {
  margin: 2.4rem auto 0;
  text-align: center;
  max-width: 46ch;
}
.pillars-close strong { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; }

/* ---------- Google review collage ---------- */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  margin-bottom: 0.4rem;
}
.reviews-score {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  color: var(--muted);
  text-decoration: none;
}
.reviews-score b { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
@media (hover: hover) { .reviews-score:hover { color: var(--red); } }
.stars { display: inline-flex; gap: 1px; color: #e7a501; letter-spacing: 1px; line-height: 1; }
.review-collage {
  columns: 3;
  column-gap: 1.2rem;
  margin-top: 2rem;
}
@media (max-width: 980px) { .review-collage { columns: 2; } }
@media (max-width: 620px) { .review-collage { columns: 1; } }
.review-collage .review {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1.2rem;
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
@media (hover: hover) {
  .review-collage .review:hover {
    border-color: #c9c5bd;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
    color: var(--ink);
  }
}
.review__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.review__stars { color: #e7a501; letter-spacing: 1px; line-height: 1; font-size: 0.95rem; }
.review__source {
  font-size: 0.82rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.reviews-score__src { display: inline-flex; align-items: center; gap: 0.35rem; }
/* House Google mark, same inline SVG as the Tacos el Chino and redisleweb.ca cards. */
.g-mark { width: 15px; height: 15px; flex-shrink: 0; }
.reviews-score .g-mark { width: 16px; height: 16px; }
.review-collage blockquote { margin-top: 0.9rem; font-size: 0.99rem; line-height: 1.6; }
.review-collage blockquote p + p { margin-top: 0.7rem; }
.reviews-foot { margin-top: 0.6rem; text-align: center; }
.reviews-foot a { font-family: var(--display); font-weight: 700; font-size: 0.96rem; }

/* ---------- pull quote (one athlete voice, not a review card) ---------- */
/* Deliberately NOT styled as a review card: a lone review card looks broken
   (2026-07-09 rule), so the one athlete testimonial on sport-performance reads
   as a quote band instead. */
.pullquote { background: var(--black); color: #fff; }
.pullquote figure { max-width: 46ch; margin-inline: auto; text-align: center; }
.pullquote blockquote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
}
.pullquote blockquote::before { content: "\201C"; }
.pullquote blockquote::after { content: "\201D"; }
.pullquote figcaption {
  margin-top: 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.pullquote figcaption span {
  display: block;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--muted-on-dark);
  margin-top: 0.2rem;
}

/* ==========================================================================
   ROUND 3 (2026-09-19): programs page, and the scroll reveals Levi asked for.
   ========================================================================== */

/* ---------- programs index ---------- */
.page-hero--plain .wrap { display: block; }
.page-hero--plain .lead { max-width: 58ch; }
.prog-list { display: grid; gap: clamp(2.2rem, 4vw, 3.4rem); }
.prog-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .prog-card { grid-template-columns: 1fr; } }
.prog-card__shot { display: block; border-radius: var(--radius); overflow: hidden; }
.prog-card__shot img { width: 100%; height: auto; display: block; }
.prog-card__body h2 { margin-bottom: 0.8rem; }
.prog-card__body h2 a { text-decoration: none; }

/* ---------- the whole programme block is one click target ----------
   ONE real link per card, on the heading, stretched over the card with an
   ::after. The photo is a plain div and the ghost button is a <span>, so a
   keyboard user tabs once per programme instead of three times to the same
   page. Hovering anywhere on the card lights the button, and that is ALL it
   does: round 10 also scaled the card, zoomed the photo and dropped a shadow,
   and Levi's verdict was "choppy and weird". Scaling a tall card full of text
   and a photo makes every glyph resample. The button is the affordance. */
.prog-card {
  position: relative;
  border-radius: var(--radius);
}
.prog-card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.prog-card .btn--ghost {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
@media (hover: hover) {
  .prog-card:hover .btn--ghost,
  .prog-card:focus-within .btn--ghost {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .prog-card:hover h2 a { color: var(--red); }
}
.prog-card:focus-within .btn--ghost {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.prog-card__stretch:focus-visible::after {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .prog-card .btn--ghost { transition: none; }
}
.prog-card__body > p { color: var(--muted); }
.prog-card__body ul { list-style: none; margin: 1.2rem 0 1.6rem; }
.prog-card__body ul li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.1rem;
  color: var(--ink);
  font-size: 0.99rem;
}
.prog-card__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

/* ---------- scroll reveals ---------- */
/* Sections rise into place once, the first time they come into view. Only added
   because Levi asked for it; everything still renders without JS, and reduced
   motion switches it off. */
.js .reveal {
  opacity: 0;
  /* the distance is a VARIABLE, not a competing rule. `.js .prog-card.reveal`
     used to redeclare `transform: translateY(48px)` at the same specificity as
     `.js .reveal.is-in { transform: none }` and, being later in the file, it won
     on source order. The cards faded in while sitting perfectly still, which is
     exactly the "not sliding in like an actual animation" complaint. Anything
     that wants a different distance sets --rise and nothing else. */
  transform: translateY(var(--rise, 44px));
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  /* 44px over 760ms reads as travel. 26px over 620ms read as a fade, which is
     what "they're not sliding in like an actual animation" was describing. The
     opacity is deliberately quicker than the movement so the element is visible
     while it is still moving, rather than appearing already parked. */
  transition: opacity 520ms ease, transform 760ms cubic-bezier(0.22, 0.9, 0.24, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ================= edit round 9 =================
   Four changes, all Levi's: the band reads in two lines each, the gap into the
   progression section is tighter, reveals fire later, the programs cards come up
   one at a time, and the "Practice what you preach" image pins while the line moves. */

/* the partner strip sits at the bottom of the black band, so the air between it
   and "Built as a progression" was the band's padding PLUS the next section's */
.band.section { padding-bottom: clamp(2.4rem, 4.5vw, 3.4rem); }
.band.section + .section { padding-top: clamp(2.6rem, 5vw, 4rem); }

/* stagger, used by the programs cards */
.js .reveal.is-in { transition-delay: var(--d, 0ms); }

/* programs page: each card slides up from further down, one after another */
.js .prog-card.reveal { --rise: 60px; }

/* ================= edit round 13 =================
   Mobile navigation, image order and the phone-specific layout fixes from
   Levi's live-site review. */

.contact-hero { text-align: center; }
.contact-hero .lead { margin-inline: auto; }
.contact-hero .btn { margin-top: 1.6rem; }
.pillars-rows { max-width: 820px; }
.pillars-rows .rows__link { cursor: default; }

@media (max-width: 1060px) {
  html.nav-open { overflow: hidden; }
  .site-header .logo,
  .nav-toggle { position: relative; z-index: 222; }
  .nav-open .site-header .logo {
    position: fixed;
    top: 7px;
    left: 22px;
  }
  .nav-open .nav-toggle {
    position: fixed;
    top: 23px;
    right: 22px;
  }
  .nav-toggle {
    display: block;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
  }
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    position: absolute;
    left: 8px;
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: var(--ink);
    transition: transform 180ms ease, top 180ms ease, box-shadow 180ms ease;
  }
  .nav-toggle::before {
    top: 13px;
    box-shadow: 0 9px 0 var(--ink), 0 18px 0 var(--ink);
  }
  .nav-toggle::after { display: none; }
  .nav-toggle[aria-expanded="true"]::before {
    top: 22px;
    box-shadow: none;
    transform: rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"]::after {
    display: block;
    top: 22px;
    transform: rotate(-45deg);
  }
  .js .main-nav.open {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: block;
    overflow-y: auto;
    background: var(--white);
    border: 0;
    box-shadow: none;
  }
  .js .main-nav.open > ul {
    min-height: 100dvh;
    justify-content: center;
    padding: 7rem 22px 5.5rem;
  }
  .main-nav li { border-top: 0; }
  .main-nav > ul > li > a {
    padding: 0.62rem 0;
    text-align: center;
    font-size: clamp(1.55rem, 6vw, 2.1rem);
    font-weight: 700;
  }
  .main-nav .nav-has-menu { text-align: center; }
  .main-nav .nav-menu,
  .js .main-nav .nav-menu { display: none; }
  .main-nav .nav-cta { margin-top: 1rem; }
  .main-nav .nav-cta .btn { font-size: 1rem; padding: 1rem 1.5rem; }
}

@media (max-width: 860px) {
  .prog-card__body { order: 1; }
  .prog-card__shot { order: 2; }
}

@media (max-width: 760px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .hero__overlay {
    align-content: center;
    gap: 0.8rem;
    padding: 7rem 18px 1rem;
  }
  .hero__logo { width: clamp(125px, 36vw, 150px); }
  .bigline { background-position: center bottom; }
  .coach,
  .coach > div { min-width: 0; }
  .coach h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 10vw, 2.5rem);
    text-wrap: wrap;
  }
}