/* ==========================================================================
   Peak Performance — page-specific styles.

   The page reuses the shared section patterns (hero, pain points, outcomes,
   sessions, banners, accordions, booking); only the deltas live here.
   ========================================================================== */

/* ------------------------------------------------------------ hero badge -- */

.hero__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-text-light);
  border: 1px solid rgba(247, 245, 242, 0.4);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

.hero__copy { max-width: 660px; }
.hero__lede { max-width: 540px; }

/* --------------------------------------------------------- eight capacities -- */

/* Eight cards read better in four columns than the academic page's three. */
.outcome-grid--four { grid-template-columns: repeat(4, 1fr); }

.outcome-grid--four .outcome { padding: 22px; }
.outcome-grid--four .outcome__title { font-size: 17px; }

/* ------------------------------------------------------------ banner crops -- */

.path-banner__img--45 { object-position: center 45%; }

/* Full colour, unlike the academic page's grayscale celebration crop. */
.celebration__img--center { object-position: center 30%; }

/* ---------------------------------------------------------- founder note -- */

.founder__quote {
  font-size: 16px;
  line-height: 1.75;
  color: var(--green-text);
  text-wrap: pretty;
}

.founder__sign { color: var(--gold); }


/* --------------------------------------------------------- key benefits -- */

/* Sits between the dark capacities band and the sage sessions band, so it
   stays on the page's cream ground and lets the section breathe. */
.benefits {
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.benefits__head { max-width: 680px; margin-inline: auto; }

.benefits__intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Forest disc with a gold glyph — the same inversion as .week-step__num. */
.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--forest);
  color: var(--gold);
}

.benefit__icon svg { width: 22px; height: 22px; }

.benefit__title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}

.benefit__desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------- responsive (page) -- */

@media (max-width: 768px) {
  .outcome-grid--four,
  .benefit-grid { grid-template-columns: 1fr; }

  .benefits { padding-block: 56px; gap: 28px; }
  .benefit-grid { gap: 32px; }

  /* Single column reads better centred than left-aligned. */
  .benefit {
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .outcome-grid--four,
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Portrait source in a landscape tile: bias the crop toward the raised arms. */
.week__photo--sm-upper { object-position: center 62%; }