/* ==========================================================================
   Coached by Connor — stylesheet
   Compiled from the Claude Design project "Coached by Connor" design system.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */

:root {
  /* palette */
  --ink-950: #0b0e12;
  --ink-900: #12161b;
  --ink-800: #1c2126;
  --ink-700: #2a2f35;
  --ink-600: #454b52;
  --ink-400: #6f7680;
  --navy-900: #0e1a28;
  --navy-700: #1c3450;
  --navy-500: #2e4e70;
  --navy-300: #5c7fa3;
  --navy-100: #dbe4ee;
  --clay-600: #a15a34;
  --clay-500: #b5714a;
  --clay-100: #f2e1d4;
  --paper-000: #faf8f4;
  --paper-100: #f2efe8;
  --paper-200: #e8e3d9;
  --stone-600: #6b6d6e;
  --stone-400: #a8a9a8;
  --stone-200: #d8d7d3;
  --white: #ffffff;
  --success-600: #3f6b4a;
  --success-100: #e2ede3;

  /* surfaces ("premium" tone from the design) */
  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-sunken: #eef2f5;
  --surface-inverse: #0e1a28;
  --surface-accent: var(--navy-700);

  /* text */
  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-muted: var(--stone-600);
  --text-on-dark: var(--paper-000);
  --text-on-dark-muted: var(--stone-400);
  --text-accent: #1c3450;

  /* borders */
  --border-subtle: var(--stone-200);
  --border-default: var(--ink-800);
  --border-on-dark: rgba(250, 248, 244, 0.18);
  --focus-ring: var(--navy-500);

  /* type */
  --font-display: 'Manrope', -apple-system, sans-serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --text-display-xl: 700 4.5rem/1.02 var(--font-display);
  --text-display-l: 700 3rem/1.05 var(--font-display);
  --text-display-m: 700 2.25rem/1.1 var(--font-display);
  --text-h1: 700 2.75rem/1.1 var(--font-display);
  --text-h2: 700 2rem/1.15 var(--font-display);
  --text-h3: 600 1.5rem/1.25 var(--font-display);
  --text-h4: 600 1.125rem/1.3 var(--font-display);
  --text-body-l: 400 1.25rem/1.5 var(--font-body);
  --text-body: 400 1.0625rem/1.6 var(--font-body);
  --text-body-s: 400 0.9375rem/1.55 var(--font-body);
  --text-caption: 500 0.8125rem/1.4 var(--font-body);
  --text-eyebrow: 600 0.8125rem/1.2 var(--font-body);
  --tracking-eyebrow: 0.12em;
  --tracking-tight: -0.01em;

  /* spacing / radii / shadows / motion */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 14, 18, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 14, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(11, 14, 18, 0.12);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}

/* ---- Base ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--surface-page);
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: var(--text-accent);
}

a:hover {
  color: var(--navy-500);
}

/* ---- Shared layout ------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

.eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  font: 600 16px/1 var(--font-display);
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  cursor: pointer;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.btn--sm {
  font-size: 15px;
  padding: 11px 24px;
}

.btn--dark {
  color: var(--white);
  background: var(--surface-inverse);
}

.btn--dark:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
  background: var(--white);
  color: var(--surface-inverse);
  border-color: var(--navy-700);
}

.btn--light {
  color: var(--surface-inverse);
  background: var(--white);
}

.btn--light:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
  background: var(--surface-inverse);
  color: var(--white);
  border-color: var(--white);
}

.time-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: var(--text-body-s);
  color: var(--text-muted);
}

.pull-quote {
  font: italic 400 15px/1.4 var(--font-body);
  color: var(--navy-700);
  margin: 16px 0 0;
}

.pull-quote--on-dark {
  color: var(--text-on-dark-muted);
  margin: 24px 0 0;
}

/* ---- Header -------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-header .logo img {
  display: block;
  height: 53px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-pill {
  font: var(--text-body-s);
  color: var(--text-primary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.nav-pill:hover {
  color: var(--text-accent);
  background: var(--surface-sunken);
}

.nav-pill--active {
  color: var(--text-accent);
}

.nav-pill--active:hover {
  color: var(--navy-500);
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 88px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero .eyebrow {
  color: var(--text-accent);
  margin-bottom: 16px;
}

.hero h1 {
  font: var(--text-display-l);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
}

.hero .lede {
  font: var(--text-body-l);
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 0 32px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-cta .time-note {
  justify-content: flex-start;
}

.hero-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Philosophy band ------------------------------------------------------ */

.philosophy {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding: 88px 48px;
}

.philosophy .inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.philosophy .eyebrow {
  color: var(--stone-400);
  margin-bottom: 20px;
}

.philosophy h2 {
  font: var(--text-display-m);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
}

.philosophy p {
  font: var(--text-body-l);
  color: var(--text-on-dark-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Offer / programs ------------------------------------------------------ */

.programs {
  background: var(--surface-page);
  color: var(--text-primary);
  padding: 96px 48px;
}

.programs .intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.programs .intro .eyebrow {
  color: var(--stone-400);
  margin-bottom: 16px;
}

.programs .intro h2 {
  font: var(--text-display-m);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 20px;
}

.programs .intro p {
  font: var(--text-body-l);
  color: var(--text-secondary);
  margin: 0;
}

.cards-grid {
  max-width: 1100px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card {
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-head .num {
  font: var(--text-h3);
  font-family: var(--font-display);
  color: var(--navy-700);
}

.card h3 {
  font: var(--text-h4);
  color: var(--text-primary);
  margin: 0 0 10px;
}

.card p {
  font: var(--text-body-s);
  color: var(--text-secondary);
  margin: 0;
}

.section-cta {
  text-align: center;
  margin-top: 56px;
}

/* ---- Testimonials ---------------------------------------------------------- */

.testimonials {
  background: var(--surface-sunken);
  padding: 96px 48px;
}

.testimonials .inner {
  max-width: 1300px;
  margin: 0 auto;
}

.testimonials h2 {
  font: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 12px;
  text-align: center;
}

.testimonials .sub {
  font: var(--text-body-l);
  color: var(--text-secondary);
  margin: 0 0 32px;
  text-align: center;
}

.t-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 380px;
  align-items: start;
}

.t-grid--compact {
  grid-template-columns: repeat(3, 1fr);
}

@keyframes testimonial-swipe {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonial-swipe {
  animation: testimonial-swipe 0.45s ease-out;
}

.t-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
}

.t-card .photo-col {
  flex-shrink: 0;
  width: clamp(160px, 22vw, 260px);
}

.t-card .t-name {
  font: 600 14px/1.2 var(--font-display);
  text-align: center;
  margin-bottom: 10px;
}

.t-photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  width: 100%;
  height: clamp(160px, 22vw, 260px);
  background: var(--navy-100);
}

.t-photo img {
  position: absolute;
  max-width: none;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.t-card .quote-col {
  min-width: 0;
  margin-top: calc(1.2em + 10px);
  min-height: clamp(160px, 22vw, 260px);
  display: flex;
  align-items: center;
}

.t-card .quote-col p,
.t-card--compact p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.t-card--compact {
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.t-card--compact .t-name {
  font: 600 15px/1.2 var(--font-display);
  text-align: left;
  margin-bottom: 12px;
}

.t-card--compact p {
  line-height: 1.5;
}

.t-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 88px;
}

.t-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--stone-200);
}

.t-dot--active {
  background: var(--text-accent);
}

.t-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.car-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  cursor: pointer;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.car-btn:hover {
  transform: scale(1.12);
  box-shadow: var(--shadow-md);
  border-color: var(--text-accent);
}

/* ---- How it works ----------------------------------------------------------- */

.how {
  background: var(--surface-inverse);
  padding: 64px 48px;
}

.how .inner {
  max-width: 1000px;
  margin: 0 auto;
}

.how h2 {
  font: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 10px;
  text-align: center;
  color: var(--text-on-dark);
}

.how .sub {
  font: var(--text-body-l);
  color: var(--text-on-dark-muted);
  margin: 0 0 40px;
  text-align: center;
}

.steps {
  position: relative;
}

.steps .spine {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-on-dark);
}

.step-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-bottom: 32px;
}

.step-row:last-child {
  margin-bottom: 0;
}

@keyframes dot-pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 228, 238, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(219, 228, 238, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(219, 228, 238, 0);
  }
}

.step-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-100);
  transform: translate(-50%, -50%);
  animation: dot-pulse-glow 2s ease-out infinite;
}

.step-cell--left {
  grid-column: 1;
  padding-right: 48px;
}

.step-cell--right {
  grid-column: 2;
  padding-left: 48px;
}

.step-card {
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.step-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.step-head .eyebrow {
  color: var(--navy-100);
}

.step-card h3 {
  font: var(--text-h3);
  margin: 0 0 12px;
  color: var(--text-on-dark);
}

.step-card p {
  font: var(--text-body-s);
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* ---- FAQ ---------------------------------------------------------------------- */

.faq {
  max-width: 840px;
  margin: 0 auto;
  padding: 96px 48px;
}

.faq .faq-cta {
  text-align: center;
  margin-bottom: 40px;
}

.faq h2 {
  font: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 32px;
  text-align: center;
}

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

.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.faq-item.open {
  background: var(--surface-sunken);
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 22px 28px;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}

.faq-q:hover {
  background: var(--surface-sunken);
}

.faq-q h3 {
  font: var(--text-h4);
  margin: 0;
}

.faq-q .chev {
  display: flex;
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.faq-item.open .faq-q .chev {
  transform: rotate(180deg);
}

.faq-a {
  display: none;
  font: var(--text-body-s);
  color: var(--text-secondary);
  margin: 0;
  padding: 0 28px 24px;
}

.faq-item.open .faq-a {
  display: block;
}

/* ---- Contact CTA ----------------------------------------------------------------- */

.contact-cta {
  max-width: 1200px;
  margin: 0 auto 96px;
  padding: 0 48px;
}

.contact-cta .panel {
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
  padding: 72px 48px;
  text-align: center;
}

.contact-cta h2 {
  font: var(--text-display-m);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 20px;
}

.contact-cta .sub {
  font: var(--text-body-l);
  color: var(--text-secondary);
  margin: 0 0 32px;
}

.contact-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-inverse);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.email-wrap {
  position: relative;
}

.email-pop {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  white-space: nowrap;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.email-pop.open {
  display: flex;
}

.email-pop span {
  font: var(--text-body-s);
  color: var(--text-primary);
}

.copy-btn {
  font: 600 13px/1 var(--font-display);
  color: var(--white);
  background: var(--surface-inverse);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  cursor: pointer;
}

/* ---- Footer ------------------------------------------------------------------------ */

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding: 64px 48px 40px;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}

.footer-grid .brand img {
  display: block;
  height: 62px;
  width: auto;
  margin-bottom: 12px;
}

.footer-grid .tagline {
  font: var(--text-body-s);
  color: var(--text-on-dark-muted);
  margin: 0;
}

.footer-grid h4 {
  font: var(--text-h4);
  margin: 0 0 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-links a,
.footer-links button {
  font: var(--text-body-s);
  color: var(--text-on-dark-muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.footer-email {
  position: relative;
}

.footer-email .email-pop {
  bottom: 100%;
  left: 0;
  transform: none;
  margin-bottom: 8px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 24px;
}

.footer-bottom span {
  font: var(--text-caption);
  color: var(--text-on-dark-muted);
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-collage {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 48px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collage-frame {
  width: 26%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--navy-100);
  position: relative;
}

.collage-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage-frame--left {
  transform: rotate(-6deg) translateX(18px);
  z-index: 1;
}

.collage-frame--left img {
  transform: scale(1.3) translate(-8%, -10%);
}

.collage-frame--mid {
  z-index: 2;
}

.collage-frame--right {
  transform: rotate(5deg) translateX(-18px);
  z-index: 1;
}

.about-story {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 48px 80px;
}

.about-story h1 {
  font: var(--text-display-m);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 20px;
}

.about-story .credential {
  font: italic 400 17px/1.4 var(--font-body);
  color: var(--text-accent);
  margin: 0 0 20px;
}

.about-story .lede {
  font: var(--text-body-l);
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.about-story .body-copy {
  font: var(--text-body-l);
  color: var(--text-secondary);
}

.about-story .body-copy p {
  margin: 0 0 20px;
}

.about-story .body-copy p:last-child {
  margin: 0;
}

.about-story .story-cta {
  text-align: center;
  margin-top: 32px;
}

.about-story .story-cta .time-note {
  font-style: italic;
  margin-top: 12px;
}

/* Who I help */

.who {
  background: var(--surface-inverse);
  padding: 96px 48px;
}

.who h2 {
  font: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 56px;
  text-align: center;
  color: var(--text-on-dark);
}

.who-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.who-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard);
}

.who-card:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-4px);
}

.who-card h3 {
  font: var(--text-h3);
  margin: 0 0 12px;
  color: var(--text-on-dark);
}

.who-card p {
  font: var(--text-body-s);
  color: var(--text-on-dark-muted);
  margin: 0;
}

.who .outro {
  text-align: center;
  margin-top: 56px;
}

.who .outro .prompt {
  font: var(--text-h3);
  color: var(--text-on-dark);
  margin: 0 0 24px;
}

/* Coaching ethos */

.ethos {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 48px 0;
}

.ethos h2 {
  font: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 56px;
  text-align: center;
}

.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.principle-card {
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.principle-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.principle-card h3 {
  font: var(--text-h4);
  color: var(--text-on-dark);
  margin: 0;
}

.principle-card p {
  font: var(--text-body-s);
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* About final CTA */

.about-cta {
  width: 100%;
  padding: 64px 48px;
  background: #ffffff;
  display: flex;
  justify-content: center;
}

.about-cta .panel {
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 48px;
  text-align: center;
  background: #0e1a28;
  border-radius: var(--radius-xl);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.about-cta .panel:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
}

.about-cta h2 {
  font: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 24px;
  color: var(--text-on-dark);
  white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  :root {
    --text-display-l: 700 2.5rem/1.08 var(--font-display);
    --text-display-m: 700 2rem/1.12 var(--font-display);
    --text-h1: 700 2.25rem/1.12 var(--font-display);
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 64px;
  }

  .hero-media {
    max-width: 480px;
  }

  .cards-grid,
  .who-grid {
    grid-template-columns: 1fr;
  }

  .t-grid,
  .t-grid--compact {
    grid-template-columns: 1fr;
    min-height: 0;
  }

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-cta h2 {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  :root {
    --text-display-l: 700 2.125rem/1.1 var(--font-display);
    --text-display-m: 700 1.75rem/1.15 var(--font-display);
    --text-h1: 700 1.875rem/1.15 var(--font-display);
    --text-h2: 700 1.625rem/1.2 var(--font-display);
    --text-body-l: 400 1.125rem/1.5 var(--font-body);
  }

  .container,
  .site-header,
  .hero,
  .philosophy,
  .programs,
  .testimonials,
  .how,
  .faq,
  .contact-cta,
  .site-footer,
  .about-collage,
  .about-story,
  .who,
  .ethos,
  .about-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .site-header {
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .site-header .logo img {
    height: 44px;
  }

  .steps .spine {
    left: 6px;
  }

  .step-dot {
    left: 6px;
  }

  .step-row {
    grid-template-columns: 1fr;
  }

  .step-cell--left,
  .step-cell--right {
    grid-column: 1;
    padding: 0 0 0 32px;
  }

  .t-card {
    flex-direction: column;
    align-items: stretch;
  }

  .t-card .photo-col {
    width: 100%;
  }

  .t-photo {
    height: min(72vw, 340px);
  }

  .t-card .quote-col {
    margin-top: 0;
    min-height: 0;
  }

  .t-dots {
    margin-top: 40px;
  }

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

  .about-collage {
    flex-wrap: wrap;
    gap: 16px;
  }

  .collage-frame {
    width: 44%;
  }

  .collage-frame--left,
  .collage-frame--right {
    transform: none;
  }

  .contact-cta .panel,
  .about-cta .panel {
    padding: 48px 24px;
  }
}