/* ================================================================
   index.css — HOME-PAGE-ONLY overrides
   Linked AFTER styles.css. All rules scoped to home-specific
   classes; no redefinition of global tokens or shared components.
   ================================================================ */

/* ── 1. Home hero · tighten rhythm + CTA hierarchy ───────────── */

/* Bump the KEYNOTE SPEAKER eyebrow so it reads with the brand in the
   upper-left as a proper pair, not a whispered tag. */
.home-hero .eyebrow--mono {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}

/* Subtle: dial back the secondary button so the primary leads */
.home-hero__actions .btn--ghost-light {
  background: transparent;
  border-color: rgba(20, 20, 19, 0.22);
  color: var(--ink);
}
.home-hero__actions .btn--ghost-light:hover {
  border-color: var(--oxblood);
  color: var(--oxblood);
}

/* Pull the "Read the Athletic Story" line closer — it's a tertiary
   path, not a peer of the body. */
.home-hero__subtle {
  margin-top: 0.25rem;
}

/* Credential strip · sits above the lead paragraph. Editorial mono
   line that plants the "world-class competitor" credential before the
   pitch, without a heading or badge. */
.home-hero__creds {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.home-hero__creds span {
  color: var(--oxblood);
  padding: 0 0.35em;
}

/* Caption is decorative; let it breathe but don't compete with the
   mark. On desktop where figure is absolute, nudge inward so it
   never clips the page-edge gutter. */
@media (min-width: 900px) {
  .home-hero__caption {
    right: clamp(0.75rem, 2vw, 1.5rem);
    opacity: 0.85;
  }
}

/* ── 2. Opener · drop the section-number column on mobile, give the
   manifesto more air. The §-number rail is editorial only at width. */
@media (max-width: 799px) {
  .opener-section__meta {
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }
  .opener-section__num {
    font-size: 1.125rem;
  }
}

/* ── 3. Stats bar · editorial typeset, not a tidy 4-up of small labels.
   Memory rule: for 3+ comparable items, stacked mono-numeral +
   Fraunces-title rows w/ hairlines beats a card grid.
   But here the stats serve as a horizontal rhythm break — we lift the
   numeral size dramatically and tighten the label hierarchy.        */
.stats-bar {
  /* Inherit dark bg from base. Remove the heavy gradient underline —
     hairlines do the work. */
  background: var(--ink);
}
.stats-bar::after {
  display: none;
}
.stats-bar__grid {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  gap: 0;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.stats-bar .stat {
  text-align: left;
  position: relative;
  padding: 0 0 0 clamp(1rem, 2vw, 1.75rem);
}
.stats-bar .stat + .stat {
  border-left: 1px solid rgba(234, 227, 212, 0.14);
}
.stats-bar .stat:first-child {
  padding-left: 0;
}
.stats-bar .stat__value {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone-on-ink, #eae3d4);
  display: block;
}
.stats-bar .stat__label {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 227, 212, 0.55);
  max-width: 16ch;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(2rem, 5vw, 2.5rem);
  }
  .stats-bar .stat {
    padding-left: clamp(0.875rem, 2vw, 1.25rem);
  }
  .stats-bar .stat:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .stats-bar .stat:nth-child(odd) + .stat {
    border-left: 1px solid rgba(234, 227, 212, 0.14);
  }
}

/* ── 4. Reel section · give the empty video band an editorial caption.
   Empty media without a label feels like a placeholder. A mono
   eyebrow inside the lower-left + hairline crop reads as a magazine
   feature opener. */
.reel-bg-section {
  min-height: clamp(360px, 52vh, 540px);
}
.reel-bg-section__caption {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: auto;
}
.reel-bg-section__caption-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 227, 212, 0.7);
  display: block;
  margin-bottom: 0.5rem;
}
.reel-bg-section__caption-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--bone-on-ink, #eae3d4);
  margin: 0;
  max-width: 22ch;
  letter-spacing: -0.01em;
}
.reel-bg-section__caption-meta {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 227, 212, 0.55);
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 0.35rem;
}
@media (max-width: 720px) {
  .reel-bg-section__caption {
    flex-direction: column;
    align-items: flex-start;
  }
  .reel-bg-section__caption-meta {
    align-self: flex-start;
  }
}
/* Stack the section as a flex column so the caption sits at the bottom */
.reel-bg-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ── 5. Credibility · keep typeset client list, lift the heading.
   Match the editorial restraint: smaller eyebrow + tighter h2. */
.home-credibility h2 {
  max-width: 18ch;
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 clamp(2.5rem, 5vw, 3.5rem);
}

/* Tighten the client list — fewer cells per row at wide widths
   produces a more authoritative typeset block than the current
   180-px-minmax sprawl. */
.home-credibility .client-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.home-credibility .client-list li {
  font-style: italic;
}

/* ── 6. Keynote topics · convert the 3-up dark card grid to the
   editorial chapter-spread pattern (per user memory). Mono numerals,
   Fraunces titles, hairline rows. */
.keynote-section .keynote-split {
  max-width: none;
}
.keynote-section .keynote-split__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(234, 227, 212, 0.14);
  max-width: 760px;
}
.keynote-section .keynote-split__cards .card--dark {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(234, 227, 212, 0.14);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  display: grid;
  grid-template-columns: 4ch 1fr;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: baseline;
  counter-increment: keynote;
  position: relative;
}
.keynote-section .keynote-split__cards {
  counter-reset: keynote;
}
.keynote-section .keynote-split__cards .card--dark::before {
  content: counter(keynote, decimal-leading-zero);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  letter-spacing: 0.14em;
  color: var(--oxblood);
  align-self: start;
  padding-top: 0.6rem;
}
.keynote-section .keynote-split__cards .card--dark h3 {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  color: var(--bone-on-ink, #eae3d4);
}
.keynote-section .keynote-split__cards .card--dark p {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(234, 227, 212, 0.72);
  max-width: 48ch;
  margin: 0;
}
.keynote-section .keynote-split__cards .card--dark .badge--dark,
.keynote-section .keynote-split__cards .card--dark h3,
.keynote-section .keynote-split__cards .card--dark p {
  grid-column: 2;
}
.keynote-section .keynote-split__cards .card--dark .badge--dark {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem;
}
.keynote-section .keynote-split__cards .card--dark:hover {
  transform: none;
  box-shadow: none;
}
.keynote-section .keynote-split__cards .card--dark:hover h3 {
  color: var(--bone-on-ink, #eae3d4);
}
.keynote-section .section__actions {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ── 7. Framework split (warm) · pull-quote card → editorial pull-quote.
   The base `.pull-quote-card` is a bordered surface — too card-y for
   the editorial spread. Strip to typeset. */
.section--warm .pull-quote-card {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--oxblood);
  border-radius: 0;
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 2.5vw, 2rem);
}
.section--warm .pull-quote-card blockquote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
}
.section--warm .pull-quote-card cite {
  margin-top: 1.25rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ── 8. Closing spread · tighten the contact line so the typographic
   mark dominates. Subtle: lower the contact opacity until hover. */
.closing-spread__contact {
  opacity: 0.85;
}
.closing-spread__contact a {
  transition: opacity 200ms ease, color 200ms ease;
}

/* ── 9. Section rhythm tweaks · slight breath between credibility +
   testimonials so they don't merge visually. */
.home-credibility {
  padding-bottom: clamp(3rem, 5vw, 4rem);
}
.home-credibility + .testimonials-section {
  padding-top: clamp(3rem, 6vw, 5rem);
}

/* ── 10. Hero figure on small screens · when the image stacks below
   the title (≤899px), bleed it edge-to-edge instead of capping at
   320–460px and centering. */
@media (max-width: 899px) {
  .home-hero__figure {
    justify-self: stretch;
    margin-inline: calc(var(--gutter) * -1);
  }
  .home-hero__figure img {
    max-width: none;
    width: 100%;
  }
  .home-hero__caption {
    padding-inline: var(--gutter);
  }

  /* Keynote section · when the bg image stacks below the text on
     small screens, drop the gradient fades (read as blur) and let
     the image render clean. Also bleed flush to viewport edges. */
  .keynote-section__bg {
    margin-inline: calc(var(--gutter) * -1);
    width: auto;
  }
  .keynote-section__bg-fade {
    display: none;
  }
}

/* ── 11. Home story preview · editorial DIPTYCH with a fractured seam.
   Two chapters (Peak / Pivot) share one composition — a 3-row × 2-col
   grid (paired display words, edge-to-edge portraits, paired prose).
   A vertical oxblood seam is absolutely positioned dead-center and
   spans all three rows: it carries an "MMXV" year mark, an ECG-derived
   glyph, and the word "Cor." set vertically. The seam IS the pivot
   moment made spatial — the fracture, made visible. On mobile the
   grid collapses to a single column and the seam becomes a horizontal
   band placed between the two chapter blocks. */
.home-story {
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.home-story__wrap {
  max-width: 88rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Header · eyebrow paired with an editorial section-mark so the page
   reads as a spread ("§ a diptych in two acts"). */
.home-story__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(20, 20, 19, 0.12);
}
.home-story__eyebrow {
  display: block;
  margin: 0;
}
.home-story__section-mark {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
  font-style: italic;
}

/* The spread · a 3-row × 2-column grid. Rows: words, images, prose.
   Cols: peak (left), pivot (right). A vertical seam is absolutely
   positioned dead-center and spans all three rows. */
.home-story__spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;                  /* zero gutter — images meet at the seam */
  row-gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Rows are two-column strips within the spread grid */
.home-story__row {
  display: contents;              /* rows are structural only; cells project into the spread grid */
}
.home-story__col {
  padding-inline: clamp(1rem, 2.5vw, 2.25rem);
  min-width: 0;
}
.home-story__col--peak {
  padding-left: 0;
  padding-right: clamp(1.5rem, 3.25vw, 3rem);
  text-align: left;
}
.home-story__col--pivot {
  padding-right: 0;
  padding-left: clamp(1.5rem, 3.25vw, 3rem);
  text-align: left;
}

/* Row 1 · giant paired words share a visual baseline across the seam.
   Words hug the seam so the two chapters read as facing-page display type. */
.home-story__row--words .home-story__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
}
.home-story__row--words .home-story__col--peak {
  align-items: flex-end;          /* Peak pushes toward the seam */
  text-align: right;
}
.home-story__row--words .home-story__col--pivot {
  align-items: flex-start;        /* Pivot pushes away from the seam (into its half) */
}

.home-story__index {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: clamp(0.6rem, 1vw, 0.9rem);
  display: inline-block;
  position: relative;
  padding-left: 1.75rem;
}
.home-story__index::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: var(--stone);
  opacity: 0.6;
}
.home-story__index--pivot {
  color: var(--oxblood);
}
.home-story__index--pivot::before {
  background: var(--oxblood);
  opacity: 0.85;
}

/* The word · display-scale italic serif. Anchor of the composition. */
.home-story__word {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 10.5vw, 9.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0;
}
.home-story__word--pivot {
  color: var(--oxblood);
}
.home-story__dot {
  color: var(--oxblood);
  font-style: normal;
}
.home-story__word--pivot .home-story__dot {
  color: var(--ink);
}

.home-story__era {
  display: inline-block;
  margin-top: clamp(0.6rem, 1vw, 0.9rem);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
}
.home-story__era--pivot {
  color: var(--oxblood);
}

/* Row 2 · diptych images meet edge-to-edge at the seam. Both frames
   share the same aspect so the composition reads as one continuous image
   sliced down the middle by the pivot line. */
.home-story__row--images .home-story__col {
  padding: 0;                     /* frames touch the seam */
}
.home-story__frame {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(20, 20, 19, 0.06);
}
.home-story__frame img,
.home-story__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(.16,.84,.44,1);
}
/* Video is landscape 16:9 in a portrait 4:5 frame — the subject sits
   center-right in the source, so shift the crop right to keep him in view. */
.home-story__frame video {
  object-position: 70% center;
}
/* Peak image: nudge the subject slightly to the right within the frame
   so more of the source's left side breathes. */
.home-story__frame--peak img {
  object-position: 35% center;
}
.home-story__frame:hover img,
.home-story__frame:hover video {
  transform: scale(1.02);
}
/* Subtle color separation: peak stays warm, pivot has a faint oxblood tint
   at the seam edge to visually cool/warn — a low-key mood shift. */
.home-story__frame--pivot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(110, 22, 20, 0.14) 0%,
              rgba(110, 22, 20, 0.04) 22%,
              rgba(110, 22, 20, 0) 55%);
  pointer-events: none;
  z-index: 1;
}
.home-story__frame--peak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg,
              rgba(20, 20, 19, 0.10) 0%,
              rgba(20, 20, 19, 0) 40%);
  pointer-events: none;
  z-index: 1;
}

/* Row 3 · prose columns align beneath their images. */
.home-story__row--prose .home-story__col {
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}
.home-story__caption {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.44;
  color: var(--ink);
  margin: 0;
  max-width: 38ch;
}
.home-story__row--prose .home-story__col--peak .home-story__caption {
  margin-left: auto;              /* right-align caption block toward the seam */
  text-align: left;
}
.home-story__caption em {
  font-style: italic;
  color: var(--oxblood);
}

/* Highlight marks · small mono chips pulled from the copy itself
   (the record time, count of Kona podiums, championship year).
   Reinforces the credentials without inventing new claims. */
.home-story__marks {
  list-style: none;
  padding: 0;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(20, 20, 19, 0.12);
  border-block: 1px solid rgba(20, 20, 19, 0.12);
  max-width: 26rem;
  margin-left: auto;
}
.home-story__marks li {
  background: var(--bg-warm);
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.home-story__marks strong {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
}
.home-story__marks span {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.2;
}

.home-story__cta {
  display: inline-block;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 4px;
  transition: color 200ms ease, letter-spacing 200ms ease;
}
.home-story__cta:hover {
  color: var(--oxblood);
  letter-spacing: 0.22em;
}

/* THE SEAM · a vertical oxblood divide dead-center of the spread,
   spanning all three rows. The fracture, made visible. Contains the
   MMXV mark, a sharp ECG-derived glyph, and "Cor." set vertically. */
.home-story__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--oxblood);
  color: var(--oxblood);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
/* Small oxblood square caps at the top and bottom of the seam */
.home-story__seam-cap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: var(--oxblood);
}
.home-story__seam-cap--top { top: -3px; }
.home-story__seam-cap--bot { bottom: -3px; }

.home-story__seam-year,
.home-story__seam-word {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--ff-mono);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--bg-warm);
  padding: 0.85rem 0.35rem;
  transform: rotate(180deg);      /* read top-to-bottom */
}
.home-story__seam-year {
  font-size: 0.72rem;
  color: var(--oxblood);
}
.home-story__seam-word {
  font-size: 0.72rem;
  color: var(--ink);
  font-style: italic;
  font-family: var(--ff-display);
  letter-spacing: 0.2em;
  padding: 0.65rem 0.35rem;
}
.home-story__seam-glyph {
  width: 26px;
  height: 78px;
  background: var(--bg-warm);
  padding: 0.35rem 0;
  color: var(--oxblood);
  display: block;
  margin-block: 0.35rem;
}

/* ── Mobile · collapse the spread to a stacked flow. The vertical seam
   becomes a horizontal red band that still visually marks the pivot. */
@media (max-width: 860px) {
  .home-story__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .home-story__spread {
    grid-template-columns: 1fr;
    row-gap: clamp(1.25rem, 3vw, 2rem);
  }
  .home-story__col--peak,
  .home-story__col--pivot {
    padding-inline: 0;
    text-align: left;
  }
  .home-story__row--words .home-story__col--peak,
  .home-story__row--words .home-story__col--pivot {
    align-items: flex-start;
    text-align: left;
  }
  .home-story__word {
    font-size: clamp(3.75rem, 18vw, 5.75rem);
  }
  .home-story__row--prose .home-story__col--peak .home-story__caption {
    margin-left: 0;
  }
  .home-story__marks {
    margin-left: 0;
    max-width: none;
  }

  /* Mobile flow · re-order grid items so each chapter stays together
     (word → prose → image), with the seam band between them.
     Peak block: order 1–3 · Seam: 4 · Pivot block: 5–7. */
  .home-story__row--words .home-story__col--peak    { order: 1; }
  .home-story__row--prose .home-story__col--peak    { order: 2; }
  .home-story__frame--peak                          { order: 3; }
  .home-story__row--words .home-story__col--pivot   { order: 5; }
  .home-story__row--prose .home-story__col--pivot   { order: 6; }
  .home-story__frame--pivot                         { order: 7; }

  /* The seam · turn into a horizontal band placed between chapters */
  .home-story__seam {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    background: transparent;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding-block: clamp(1rem, 3vw, 1.75rem);
    order: 4;                     /* sits between peak (1–3) and pivot (5–7) */
  }
  .home-story__seam::before,
  .home-story__seam::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--oxblood);
    opacity: 0.85;
  }
  .home-story__seam-cap { display: none; }
  .home-story__seam-year,
  .home-story__seam-word {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0;
    background: transparent;
  }
  .home-story__seam-glyph {
    width: 48px;
    height: 20px;
    padding: 0;
    background: transparent;
    transform: rotate(90deg);
  }

  /* Because the spread grid is single-column now, the absolute seam is
     awkward; hide the desktop-only seam decorations that don't translate. */
  .home-story__frame--peak::after,
  .home-story__frame--pivot::before {
    display: none;
  }
}

/* ================================================================
   2026-07 client copy revisions — additive rules only.
   All classes below were introduced with the Copy (5) rewrite.
   ================================================================ */

/* ── Hero sub-paragraph beneath the lead */
.home-hero__sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: var(--stone);
  margin: 0.9rem 0 1.4rem;
  max-width: 44ch;
}

/* ── Opener / Why Built Forward · chapter opener spread */
.opener-section__chapter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--whisper);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.opener-section__mark {
  font-family: var(--ff-mono);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--oxblood);
  line-height: 1;
}
.opener-statement__lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 24ch;
}
.opener-statement__lede + .opener-statement__lede {
  margin-top: 0.2em;
}
.opener-statement__lede--indent {
  padding-left: clamp(1rem, 5vw, 3.5rem);
}
.opener-statement__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--whisper);
  max-width: none;
}
.opener-statement__body p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--stone);
  margin: 0 0 0.4em;
  break-inside: avoid;
}
.opener-statement__body p:last-child {
  margin-bottom: 0;
}
.opener-statement__body strong {
  color: var(--ink);
  font-weight: 500;
}
@media (min-width: 800px) {
  .opener-statement__body {
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    column-rule: 1px solid var(--whisper);
  }
}
.opener-statement__foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  justify-content: flex-end;
}
.opener-statement__link {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  border-bottom: 1px solid rgba(122, 30, 40, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.opener-statement__link:hover {
  border-bottom-color: var(--oxblood);
}
@media (max-width: 560px) {
  .opener-statement__foot {
    justify-content: flex-start;
  }
}

/* ── Credibility bar (replaces 4 numeric stats with 6 text creds) */
.stats-bar--creds .stats-bar__grid--creds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: clamp(1.25rem, 2.5vw, 2rem);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.stats-bar--creds .cred {
  text-align: left;
  padding: 0 0 0 clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
.stats-bar--creds .cred + .cred {
  border-left: 1px solid rgba(234, 227, 212, 0.14);
}
.stats-bar--creds .cred:nth-child(3n + 1) {
  border-left: 0;
  padding-left: 0;
}
.cred__label {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  color: var(--bone-on-ink, #eae3d4);
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .stats-bar--creds .stats-bar__grid--creds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-bar--creds .cred:nth-child(3n + 1) {
    padding-left: clamp(0.875rem, 2vw, 1.25rem);
    border-left: 1px solid rgba(234, 227, 212, 0.14);
  }
  .stats-bar--creds .cred:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── Home-credibility subline (below the shared .logo-strip) */
.home-credibility__sub {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--stone);
  max-width: 62ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

/* ── Testimonials — pair variant (featured + 1 side) */
.testimonials-grid--pair {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}

/* ── Signature keynote (single flagship replaces 3-card grid) */
.keynote-section--single .signature-keynote__body {
  max-width: 640px;
}
.signature-keynote__intro {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--bone-on-ink, #eae3d4);
  margin: 0 0 1.25rem;
}
.signature-keynote__intro strong {
  font-weight: 500;
}
.signature-keynote__outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.signature-keynote__outcomes li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(234, 227, 212, 0.86);
  padding-left: 1.5rem;
  position: relative;
}
.signature-keynote__outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--oxblood);
}

/* ── Final CTA (above the Built/Forward closing-spread) */
.final-cta {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--bone, #f5f1e8);
  border-top: 1px solid var(--whisper);
}
.final-cta__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.final-cta__eyebrow {
  margin-bottom: 1.25rem;
}
.final-cta__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 24ch;
  margin-inline: auto;
}
.final-cta__body {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--stone);
  margin: 0 0 2rem;
}
.final-cta__body strong {
  color: var(--ink);
  font-weight: 500;
}
.final-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.final-cta__note {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.75;
  margin: 0;
}

/* ── Home testimonials: color the curly quote marks in oxblood ── */
.testimonials-section .qm {
  color: var(--oxblood);
  font-weight: 500;
  font-style: normal;
}

/* ── Opener statement: center the whole "Adversity creates the opportunity"
   block instead of the editorial left-aligned + right-linked treatment. ── */
.opener-statement {
  text-align: center;
}
.opener-statement__lede {
  margin-left: auto;
  margin-right: auto;
}
.opener-statement__lede--indent {
  padding-left: 0;
}
.opener-statement__body {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  /* Body prose reads more naturally left-aligned inside centered columns */
  text-align: left;
}
/* Override the 22ch max-width that .opener-statement p sets globally in
   styles.css — body paragraphs need full container width to read as prose. */
.opener-statement__body p {
  max-width: none;
}
.opener-statement__foot {
  justify-content: center;
}
@media (max-width: 560px) {
  .opener-statement__foot {
    justify-content: center;
  }
}

/* ── Home story diptych: YouTube iframe covers the 4:5 pivot frame,
   scaled by height and centered — mimics object-fit: cover + object-position: center. ── */
.home-story__frame iframe {
  position: absolute;
  /* Oversize the iframe vertically and shift it up so YouTube's title bar,
     channel avatar, and any overlay UI at the top edge are cropped off
     above the frame. Width scales in proportion to keep 16:9 fit. */
  top: -12%;
  left: 50%;
  height: 124%;
  /* 4:5 frame + 16:9 source, scaled 1.24× taller → width = 100% * (20/9) * 1.24 */
  width: calc(100% * 20 / 9 * 1.24);
  transform: translateX(-50%);
  border: 0;
  display: block;
  pointer-events: none; /* atmospheric — no interaction with hidden iframe area */
}
.home-story__frame-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  text-decoration: none;
}