/* ==========================================================================
   Thriving Sons — reusable components
   .eyebrow  .btn (+ --primary / --secondary)  .photo-frame  .hero
   Components take their values from tokens.css and contain no page-specific
   styling, so they can be reused in later sections.
   ========================================================================== */

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  font-size: var(--ts-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--ts-slate);
}

/* Short gold rule — the one decorative accent in the hero */
.eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2px;
  background: var(--ts-gold);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;           /* 52px touch target */
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--ts-radius);
  font-family: var(--ts-font-body);
  font-size: var(--ts-text-button);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--ts-charcoal);
  border-color: var(--ts-charcoal);
  color: var(--ts-white);
}

.btn--primary:hover {
  background: var(--ts-slate-deep);
  border-color: var(--ts-slate-deep);
}

.btn--secondary {
  background: transparent;
  border-color: var(--ts-charcoal);
  color: var(--ts-charcoal);
}

.btn--secondary:hover {
  background: var(--ts-charcoal);
  color: var(--ts-white);
}

/* --- Photo frame --------------------------------------------------------
   Holds a real photograph (<img>) or, until one is supplied, a clearly
   labelled placeholder. --focus controls the crop on narrow screens so the
   subject stays in frame.                                                   */
.photo-frame {
  --focus: 50% 40%;
  position: relative;
  overflow: hidden;
  border-radius: var(--ts-radius);
  background: var(--ts-cream-deep);
}

.photo-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
}

.photo-frame--placeholder {
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(160deg, var(--ts-slate) 0%, var(--ts-slate-deep) 100%);
  color: var(--ts-white);
}

.photo-frame__label {
  width: 100%;
  padding: var(--ts-space-3);
  background: rgba(38, 42, 47, 0.82);
  font-size: 0.875rem;
  line-height: 1.5;
}

.photo-frame__label strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: var(--ts-space-4) var(--ts-space-6);
}

.hero__grid {
  display: grid;
  gap: var(--ts-space-5);
  align-items: center;
}

.hero__content {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
}

.hero__title {
  margin-top: var(--ts-space-1);
  font-family: var(--ts-font-display);
  font-size: var(--ts-text-display);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: var(--ts-title-leading);
  letter-spacing: var(--ts-title-tracking);
  text-wrap: balance;
  color: var(--ts-charcoal);
}

/* Each sentence sits on its own line when there is room */
.hero__title-line {
  display: block;
}

.hero__lead {
  max-width: 34rem;
  font-size: var(--ts-text-lead);
  line-height: 1.55;
  color: var(--ts-charcoal-soft);
}

.hero__actions {
  display: grid;
  gap: var(--ts-space-2);
  width: 100%;
  margin-top: var(--ts-space-2);
}

.hero__media {
  min-width: 0;
}

.hero__photo {
  aspect-ratio: 4 / 3;
  --focus: 50% 35%;
}

/* Tablet and up: buttons sit side by side */
@media (min-width: 40rem) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  .hero__photo {
    aspect-ratio: 16 / 10;
  }
}

/* Desktop: text left, portrait photo right */
@media (min-width: 64rem) {
  .hero {
    padding-block: var(--ts-space-5) 6.5rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .hero__title {
    font-size: var(--ts-text-display-lg);
  }

  .hero__photo {
    aspect-ratio: 4 / 5;
    --focus: 50% 30%;
  }

  /* Thin gold keyline offset behind the photo — restrained accent */
  .hero__media {
    position: relative;
    isolation: isolate;
  }

  .hero__media::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    z-index: -1;
    border: 1px solid var(--ts-gold);
    border-radius: var(--ts-radius);
  }
}

/* --- Purpose section (Homepage Section 02) -----------------------------------
   Wide screens (80rem+): headline left, copy right. Below that: one left-aligned column.
   Text only: no photograph, button or imagery.                                */
.purpose {
  padding-bottom: var(--ts-space-6);
}

.purpose__inner {
  display: grid;
  gap: var(--ts-space-4);
  padding-top: var(--ts-space-5);
  border-top: 1px solid var(--ts-cream-deep);
}

.purpose__heading {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
  align-content: start;
}

.purpose__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.purpose__title-line {
  display: block;
}

.purpose__body {
  display: grid;
  gap: var(--ts-space-3);
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

.purpose__lead {
  font-family: var(--ts-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ts-charcoal);
  text-wrap: balance;
}

/* Mobile only: tighter rhythm from headline to lead to first paragraph.
   Gaps between the remaining paragraphs are unchanged. */
@media (max-width: 39.999rem) {
  .purpose__inner {
    gap: var(--ts-space-3);
  }

  .purpose__lead + p {
    margin-top: -0.5rem;
  }
}

@media (min-width: 80rem) {
  .purpose {
    padding-bottom: 8rem;
  }

  .purpose__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 5vw, 5rem);
    padding-top: var(--ts-space-6);
  }
}

/* --- Pathways section (Homepage Section 03) -----------------------------------
   Two equal cards: side by side from 56rem, stacked (Families first) below.
   Photo, type and spacing are identical on both so neither outranks the other. */
.pathways {
  padding-bottom: var(--ts-space-6);
}

.pathways__inner {
  display: grid;
  gap: var(--ts-space-5);
  padding-top: var(--ts-space-5);
  border-top: 1px solid var(--ts-cream-deep);
}

.pathways__heading {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
}

.pathways__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.pathways__title-line {
  display: block;
}

.pathways__intro {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

.pathways__cards {
  display: grid;
  gap: var(--ts-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pathway-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ts-white);
  border: 1px solid var(--ts-cream-deep);
  border-radius: var(--ts-radius);
}

.pathway-card__photo {
  aspect-ratio: 3 / 2;
  border-radius: 0;
  --focus: 50% 35%;
}

.pathway-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
}

.pathway-card__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ts-charcoal);
}

.pathway-card__text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ts-charcoal-soft);
}

/* CTA sits at the foot of each card so both buttons align */
.pathway-card__cta {
  width: 100%;
  margin-top: auto;
}

@media (min-width: 40rem) {
  .pathway-card__photo {
    aspect-ratio: 16 / 9;
  }

  .pathway-card__content {
    padding: var(--ts-space-4);
  }

  .pathway-card__cta {
    width: auto;
  }
}

@media (min-width: 56rem) {
  .pathway-card__photo {
    aspect-ratio: 3 / 2;
  }

  .pathways {
    padding-bottom: 8rem;
  }

  .pathways__inner {
    gap: var(--ts-space-6);
    padding-top: var(--ts-space-6);
  }

  .pathways__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ts-space-4);
  }
}

/* --- Philosophy section (Homepage Section 04: Boy–Warrior–King) ----------------
   Deep charcoal band. Words and layout only: no imagery or ornament.
   Mobile: one column. 48rem+: each archetype is an editorial row (headline left,
   copy right). 72rem+: three columns read left to right along one shared line,
   with copy aligned across columns, so Boy, Warrior and King read as qualities
   of one journey rather than three separate cards.                              */
.philosophy {
  padding-block: var(--ts-space-6);
  background: var(--ts-charcoal);
  color: var(--ts-cream);
}

.philosophy .eyebrow {
  color: var(--ts-gold-soft);
}

.philosophy .eyebrow::before {
  background: var(--ts-gold-soft);
}

.philosophy__intro {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
}

.philosophy__title {
  font-family: var(--ts-font-display);
  font-size: clamp(3rem, 14vw, 3.75rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ts-cream);
}

/* Mobile: each word on its own line so the heading stays large */
.philosophy__word {
  display: block;
}

.philosophy__sub {
  margin-top: var(--ts-space-2);
  max-width: 24ch;
  font-family: var(--ts-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ts-cream);
}

.philosophy__lede {
  display: grid;
  gap: var(--ts-space-2);
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-cream-muted);
}

/* Archetypes */
.philosophy__journey {
  display: grid;
  margin: var(--ts-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.archetype {
  display: grid;
  gap: var(--ts-space-2);
  padding-block: var(--ts-space-4);
  border-top: 1px solid rgba(245, 239, 227, 0.18);
}

.archetype__label {
  font-size: var(--ts-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ts-gold-soft);
}

.archetype__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ts-cream);
}

.archetype__body {
  display: grid;
  gap: var(--ts-space-2);
  align-content: start;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ts-cream-muted);
}

/* King's closing line: set apart with a short gold rule */
.archetype__closing {
  margin-top: var(--ts-space-1);
  padding-top: var(--ts-space-2);
  border-top: 2px solid var(--ts-gold-soft);
  max-width: 28rem;
  font-family: var(--ts-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ts-cream);
}

.philosophy__closing {
  max-width: 40rem;
  margin-top: var(--ts-space-4);
  padding-top: var(--ts-space-4);
  border-top: 1px solid rgba(245, 239, 227, 0.18);
  font-family: var(--ts-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--ts-cream);
}

/* Tablet: editorial rows */
@media (min-width: 40rem) {
  .philosophy__title {
    font-size: clamp(3rem, 7.4vw, 5.5rem);
    white-space: nowrap;
  }

  .philosophy__word {
    display: inline;
  }
}

@media (min-width: 48rem) {
  .philosophy {
    padding-block: 6rem;
  }

  .philosophy__intro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .philosophy__intro > .eyebrow,
  .philosophy__intro > .philosophy__title {
    grid-column: 1 / -1;
  }

  .philosophy__sub {
    margin-top: var(--ts-space-3);
    max-width: 18ch;
  }

  .philosophy__lede {
    margin-top: var(--ts-space-3);
  }

  .archetype {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-areas:
      "label body"
      "title body";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--ts-space-1);
    padding-block: var(--ts-space-5);
  }

  .archetype__label { grid-area: label; }
  .archetype__title { grid-area: title; }
  .archetype__body  { grid-area: body; padding-top: 0.15rem; }

  .philosophy__closing {
    margin-top: var(--ts-space-5);
    padding-top: var(--ts-space-5);
  }
}

/* Desktop: three columns along one shared line */
@media (min-width: 72rem) {
  .philosophy {
    padding-block: 7rem;
  }

  .philosophy__journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2.5rem, 4vw, 4rem);
    margin-top: 5rem;
  }

  .archetype {
    grid-row: span 3;
    grid-template-columns: none;
    grid-template-areas: none;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding-block: var(--ts-space-4) 0;
    position: relative;
  }

  .archetype__label,
  .archetype__title,
  .archetype__body {
    grid-area: auto;
  }

  .archetype__label {
    margin-bottom: var(--ts-space-2);
  }

  .archetype__title {
    margin-bottom: var(--ts-space-3);
  }

  /* Short gold marker where each quality begins on the shared line */
  .archetype::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--ts-gold-soft);
  }

  .philosophy__closing {
    margin-top: 5rem;
    padding-top: var(--ts-space-5);
    max-width: 44rem;
  }
}

/* --- Mentoring in Action (Homepage Section 05) ---------------------------------
   Cream. One photograph for the whole section, three principles beside it.
   Mobile: short image, then principles with tight rhythm.
   48rem+: wide image banner, principles as editorial rows (as Section 04).
   72rem+: image stays in view on the left while the three principles are read
   on the right, so the image never costs extra scrolling.                       */
.mentoring {
  padding-block: var(--ts-space-6);
}

.mentoring__intro {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
}

.mentoring__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ts-charcoal);
}

.mentoring__title-line {
  display: block;
}

.mentoring__lede {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

.mentoring__layout {
  display: grid;
  gap: var(--ts-space-4);
  margin-top: var(--ts-space-4);
}

.mentoring__photo {
  aspect-ratio: 16 / 10;
  --focus: 50% 35%;
}

.principles {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.principle {
  display: grid;
  gap: var(--ts-space-1);
  padding-block: var(--ts-space-3);
  border-top: 1px solid rgba(38, 42, 47, 0.16);
}

.principle:first-child {
  border-top: 0;
  padding-top: 0;
}

.principle__label {
  font-size: var(--ts-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ts-slate);
}

.principle__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.principle__body {
  display: grid;
  gap: var(--ts-space-2);
  align-content: start;
  max-width: 36rem;
  margin-top: var(--ts-space-1);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

@media (min-width: 48rem) {
  .mentoring {
    padding-block: 6rem;
  }

  .mentoring__layout {
    gap: var(--ts-space-5);
    margin-top: var(--ts-space-5);
  }

  .mentoring__photo {
    aspect-ratio: 2 / 1;
  }

  .principle {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-areas:
      "label body"
      "title body";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: var(--ts-space-1);
    padding-block: var(--ts-space-4);
  }

  .principle:first-child {
    padding-top: 0;
  }

  .principle__label { grid-area: label; }
  .principle__title { grid-area: title; }
  .principle__body  { grid-area: body; margin-top: 0; padding-top: 0.15rem; }
}

@media (min-width: 64rem) {
  /* Desktop: the three words share one line to save height */
  .mentoring__title {
    white-space: nowrap;
  }

  .mentoring__title-line {
    display: inline;
  }
}

@media (min-width: 72rem) {
  .mentoring {
    padding-block: 7rem;
  }

  .mentoring__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
    margin-top: 4rem;
  }

  .mentoring__media {
    position: sticky;
    top: var(--ts-space-4);
  }

  .mentoring__photo {
    aspect-ratio: 4 / 5;
    --focus: 50% 30%;
  }

  .principle {
    display: grid;
    grid-template-columns: none;
    grid-template-areas: none;
    grid-template-rows: none;
    row-gap: var(--ts-space-1);
    padding-block: var(--ts-space-5);
    position: relative;
  }

  .principle:first-child {
    padding-top: 0;
  }

  .principle__label,
  .principle__title,
  .principle__body {
    grid-area: auto;
  }

  .principle__body {
    margin-top: var(--ts-space-1);
  }

  .principle:last-child {
    padding-bottom: 0;
  }

  /* Short gold marker where each principle begins on the shared line */
  .principle:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--ts-gold);
  }
}

/* --- Text link (understated link with arrow) ------------------------------------ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ts-charcoal);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-color: var(--ts-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: color 0.15s ease;
}

.text-link:hover {
  color: var(--ts-slate);
}

.text-link__arrow {
  flex: none;
  transition: transform 0.15s ease;
}

.text-link:hover .text-link__arrow {
  transform: translateX(3px);
}

/* --- Trust & Child Safety (Homepage Section 06) ----------------------------------
   Compact. Headline left, copy and link right from 80rem; one column below.      */
.trust {
  padding-bottom: var(--ts-space-6);
}

.trust__inner {
  display: grid;
  gap: var(--ts-space-3);
  padding-top: var(--ts-space-5);
  border-top: 1px solid var(--ts-cream-deep);
}

.trust__heading {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
  align-content: start;
}

.trust__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ts-charcoal);
}

.trust__title-line {
  display: block;
}

.trust__body {
  display: grid;
  gap: var(--ts-space-2);
  justify-items: start;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

.trust__body .text-link {
  margin-top: var(--ts-space-1);
}

@media (min-width: 80rem) {
  .trust {
    padding-bottom: 6rem;
  }

  .trust__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 5vw, 5rem);
    padding-top: var(--ts-space-6);
  }
}

/* --- Cream button (for use on charcoal) ----------------------------------------- */
.btn--cream {
  background: var(--ts-cream);
  border-color: var(--ts-cream);
  color: var(--ts-charcoal);
}

.btn--cream:hover {
  background: var(--ts-white);
  border-color: var(--ts-white);
}

/* --- Final call to action (Homepage Section 07) ----------------------------------
   Deep charcoal. A short invitation and two equal pathway cards.
   Mobile: stacked, Families first. 56rem+: side by side.                          */
.final-cta {
  padding-block: var(--ts-space-6);
  background: var(--ts-charcoal);
  color: var(--ts-cream);
}

/* The default slate focus ring is too faint on charcoal */
.final-cta :focus-visible {
  outline-color: var(--ts-gold-soft);
}

.final-cta .eyebrow {
  color: var(--ts-gold-soft);
}

.final-cta .eyebrow::before {
  background: var(--ts-gold-soft);
}

.final-cta__intro {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
}

.final-cta__title {
  max-width: 20ch;
  font-family: var(--ts-font-display);
  font-size: clamp(2.25rem, 1.3rem + 4.3vw, 4.5rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-cream);
}

.final-cta__lede {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-cream-muted);
}

.final-cta__cards {
  display: grid;
  gap: var(--ts-space-3);
  margin: var(--ts-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  background: rgba(245, 239, 227, 0.05);
  border: 1px solid rgba(245, 239, 227, 0.18);
  border-radius: var(--ts-radius);
}

.cta-card__label {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  font-size: var(--ts-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--ts-gold-soft);
}

.cta-card__label::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--ts-gold-soft);
}

.cta-card__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ts-cream);
}

.cta-card__text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ts-cream-muted);
}

/* Buttons sit at the foot of each card so the two align */
.cta-card__cta {
  width: 100%;
  margin-top: auto;
}

@media (min-width: 40rem) {
  .cta-card {
    padding: var(--ts-space-4);
  }

  .cta-card__cta {
    width: auto;
  }
}

@media (min-width: 48rem) {
  .final-cta {
    padding-block: 6rem;
  }
}

@media (min-width: 56rem) {
  .final-cta__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ts-space-4);
    margin-top: var(--ts-space-6);
  }
}

@media (min-width: 72rem) {
  .final-cta {
    padding-block: 7rem;
  }
}

/* ==========================================================================
   Homepage v2 (Preview B approved): compact Boy–Warrior–King, compact Mentoring
   in Action, and the combined Pathways + Final CTA section.
   ========================================================================== */



/* --- Link on charcoal --------------------------------------------------------- */
.text-link--light {
  color: var(--ts-cream);
  text-decoration-color: var(--ts-gold-soft);
}
.text-link--light:hover { color: var(--ts-gold-soft); }
.text-link--light:focus-visible,
.philosophy :focus-visible { outline-color: var(--ts-gold-soft); }

/* --- Compact Boy–Warrior–King ------------------------------------------------- */
.phil-c__list {
  display: grid;
  margin: var(--ts-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.phil-c__item {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-block: var(--ts-space-3);
  border-top: 1px solid rgba(245, 239, 227, 0.18);
}

.phil-c__link { margin-top: var(--ts-space-2); }

.philosophy--compact { padding-block: var(--ts-space-5); }

@media (min-width: 48rem) {
  .philosophy--compact { padding-block: 6rem; }
}

@media (min-width: 64rem) {
  .phil-c__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ts-space-5);
    margin-top: var(--ts-space-5);
  }
  .phil-c__item { padding-top: var(--ts-space-4); padding-bottom: 0; }
  .phil-c__link { margin-top: var(--ts-space-5); }
}

/* --- Compact Mentoring in Action ---------------------------------------------- */
.mentoring--compact { padding-block: var(--ts-space-5); }

.mentoring-c__layout {
  display: grid;
  gap: var(--ts-space-3);
  grid-template-areas: "intro" "media" "link";
}
.mentoring-c__intro { grid-area: intro; }
.mentoring-c__media { grid-area: media; }
.mentoring-c__link  { grid-area: link; }
.mentoring-c__photo { aspect-ratio: 3 / 2; --focus: 50% 35%; }

@media (min-width: 48rem) {
  .mentoring--compact { padding-block: 6rem; }
}

@media (min-width: 64rem) {
  .mentoring-c__layout {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "intro media" "link media";
    column-gap: clamp(3rem, 6vw, 6rem);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .mentoring-c__link { align-self: start; }
  .mentoring-c__photo { aspect-ratio: 4 / 5; }
}

/* --- Simplified closing invitation (A) / combined pathways + CTA (B) ------------ */
.final-cta--compact { padding-block: var(--ts-space-5); }
.final-cta--compact .final-cta__cards { margin-top: var(--ts-space-4); }
.final-cta--compact .cta-card { gap: var(--ts-space-2); }

@media (min-width: 48rem) {
  .final-cta--compact { padding-block: 6rem; }
}
@media (min-width: 56rem) {
  .final-cta--compact .final-cta__cards { margin-top: var(--ts-space-5); }
}

.cta-card__actions {
  display: grid;
  gap: var(--ts-space-1);
  justify-items: start;
  width: 100%;
  margin-top: auto;
  padding-top: var(--ts-space-1);
}
.cta-card__actions .cta-card__cta { margin-top: 0; }
@media (min-width: 40rem) {
  .cta-card__actions { grid-auto-flow: row; }
}

/* Compact Mentoring: keep the three words stacked beside the photo on desktop */
@media (min-width: 64rem) {
  .mentoring-c__intro .mentoring__title { white-space: normal; }
  .mentoring-c__intro .mentoring__title-line { display: block; }
}

/* Final CTA hierarchy: strong primary button, quieter secondary link */
.cta-card__actions { gap: 0.25rem; }
.cta-card__actions .btn {
  min-height: 3.5rem;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(245, 239, 227, 0.9);
}
.cta-card__actions .text-link {
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ts-cream-muted);
}
.cta-card__actions .text-link:hover { color: var(--ts-gold-soft); }
@media (max-width: 39.999rem) {
  .final-cta--compact .cta-card { padding: var(--ts-space-3) 1.25rem; }
  .final-cta--compact .final-cta__cards { margin-top: var(--ts-space-3); }
}

/* --- Editorial divider: Mentoring in Action to Child Safety, and Hero to Purpose (cream to cream) --
   The Child Safety content already sits under a hairline inside the container. It is
   now a visible warm line with a short gold accent (echoing the eyebrow rules), and the
   space above and below is equal, so it reads as a deliberate break, not a border.
   Spacing above is trimmed to match below, so the page gets shorter, not taller.     */
.mentoring--compact { padding-bottom: var(--ts-space-5); }

.trust__inner,
.purpose__inner {
  position: relative;
  border-top-color: rgba(176, 141, 62, 0.38);
}

.trust__inner::before,
.purpose__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--ts-gold);
}

/* The same divider also separates Hero from Our Purpose (both cream). The hero's
   bottom space equals the space below the line, so the line sits centred. */
.hero { padding-bottom: var(--ts-space-5); }

@media (min-width: 64rem) {
  .hero { padding-bottom: var(--ts-space-5); }
}

@media (min-width: 80rem) {
  .mentoring--compact { padding-bottom: var(--ts-space-6); }
  .hero { padding-bottom: var(--ts-space-6); }
}