/* ==========================================================================
   AURORA ACADEMY — Design System v2
   Purpose. Growth. Excellence.
   Navy #012149 · Gold #C9A227

   Design intent: "aurora" = first light. The page is built from layers —
   photography, a dawn bloom, film grain, hairline rules and offset frames —
   so that nothing reads as a flat coloured rectangle.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Navy family */
  --navy:        #012149;
  --navy-deep:   #010e22;
  --navy-black:  #01081a;
  --navy-lift:   #0a2b5e;
  --navy-soft:   #12315c;

  /* Gold family */
  --gold:        #c9a227;
  --gold-deep:   #a8801a;
  --gold-light:  #e4c266;
  --gold-pale:   #f4ead2;

  /* Dawn accents — used only in glows, never as flat fills */
  --dawn-ember:  #e08a3c;
  --dawn-rose:   #c2607a;

  /* Paper */
  --ivory:       #fcfbf8;
  --ivory-warm:  #f6f2ea;
  --ivory-deep:  #efe9dc;
  --white:       #ffffff;

  /* Ink */
  --ink:         #0e1c33;
  --ink-soft:    #46546e;
  --ink-muted:   #77839a;
  --line:        #e5e1d7;
  --line-strong: #d5cec0;

  /* On navy */
  --on-navy:      #eff3fa;
  --on-navy-soft: #a9bad6;
  --on-navy-mute: #7387a8;
  --line-navy:    rgba(201,162,39,.22);
  --line-navy-fa: rgba(255,255,255,.10);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --wrap:      1240px;
  --wrap-slim: 780px;
  --gutter:    clamp(20px, 5vw, 56px);
  --sec-y:     clamp(72px, 10vw, 150px);

  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 16px;

  --sh-sm: 0 2px 12px rgba(1,33,73,.07);
  --sh-md: 0 18px 48px rgba(1,33,73,.12);
  --sh-lg: 0 40px 100px rgba(1,33,73,.20);
  --sh-xl: 0 60px 140px rgba(1,14,34,.34);

  --ease:     cubic-bezier(.22,.7,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Height of the marquee strip. The hero subtracts this so that the strip
     lands inside the first screenful instead of below the fold. */
  --ticker-h: 70px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -100px;
  z-index: 300; padding: 12px 20px;
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- Texture: film grain -------------------------------------------------- *
 * A single tiny SVG turbulence, reused everywhere. This is what stops large
 * dark areas from banding into flat plastic.
 * -------------------------------------------------------------------------- */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;                 /* above scrims/blooms, below content */
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4vw, 3.55rem); font-weight: 300; letter-spacing: -.018em; line-height: 1.14; }
/* Sized so the longest headings settle on two lines inside a split column
   (~520px) rather than running to three. */
h2 { font-size: clamp(1.85rem, 3.3vw, 2.95rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.3vw, 1.95rem); }
h4 { font-size: 1.16rem; letter-spacing: 0; }

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-deep);
}
/* Any dark-ground heading takes the LIGHT gold. The hero was falling through to
   --gold-deep, i.e. dark gold on dark navy, which is why "distinction" was hard
   to read (measured 3.29:1 before, 8.0:1 after). */
.band-navy h1 em, .band-navy h2 em, .on-dark em,
.hero h1 em, .page-hero h1 em, .cta-band h2 em { color: var(--gold-light); }

p + p { margin-top: 1.15em; }

.lead {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.64;
  color: var(--ink-soft);
  font-weight: 300;
}
.band-navy .lead, .on-dark .lead { color: var(--on-navy-soft); }

/* Eyebrow — small caps label with a drawn gold tick */
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-body);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.3rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px; flex: none;
  background: currentColor;
  opacity: .85;
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow--center { justify-content: center; }

.tagline {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.band-navy .tagline, .on-dark .tagline { color: var(--gold-light); }

.rule {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(201,162,39,0));
  border: 0; margin: 1.7rem 0;
}
.rule--center { margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, rgba(201,162,39,0), var(--gold), rgba(201,162,39,0)); width: 110px; }
.rule--light { background: linear-gradient(90deg, var(--gold-light), rgba(228,194,102,0)); }

.gold { color: var(--gold-deep); }
.band-navy .gold, .on-dark .gold { color: var(--gold-light); }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-slim { max-width: var(--wrap-slim); }

.section { padding-block: var(--sec-y); position: relative; }

.band-white { background: var(--white); }
.band-ivory { background: var(--ivory-warm); }

/* Navy band — layered, never flat: base navy + dawn bloom + grain */
.band-navy {
  position: relative;
  isolation: isolate;
  background: var(--navy-deep);
  color: var(--on-navy-soft);
  overflow: hidden;
}
.band-navy > .wrap { position: relative; z-index: 4; }
.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4 { color: var(--on-navy); }

/* Dawn bloom + hairline column grid, layered in one pseudo-element so that
   ::after stays free for .grain */
.band-navy::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(60% 70% at 18% -8%, rgba(201,162,39,.22), transparent 62%),
    radial-gradient(48% 58% at 82% 6%, rgba(224,138,60,.15), transparent 66%),
    radial-gradient(80% 70% at 50% 108%, rgba(10,43,94,.9), transparent 72%);
  background-size: calc(100% / 6) 100%, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 86px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head--wide { max-width: 940px; }

/* Grids */
.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 10px 30px rgba(201,162,39,.26);
}
.btn--gold:hover {
  background: var(--gold-light);
  box-shadow: 0 18px 44px rgba(201,162,39,.36);
}
/* Sheen sweep */
.btn--gold::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease-out);
}
.btn--gold:hover::after { left: 130%; }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

.btn--ghost-light {
  background: rgba(255,255,255,.04);
  color: var(--on-navy);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(201,162,39,.08);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.btn-row--center { justify-content: center; }

/* Arrow link with a rule that draws on hover */
.link-arrow {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: .5rem;
}
.link-arrow::after {
  content: "→";
  font-size: .95rem; letter-spacing: 0;
  transition: transform .4s var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(6px); }
.link-arrow::before {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.link-arrow:hover::before { transform: scaleX(1); }
.band-navy .link-arrow, .on-dark .link-arrow { color: var(--gold-light); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 8px;
}
.site-header.is-stuck {
  background: rgba(1,14,34,.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-navy);
  box-shadow: 0 10px 40px rgba(1,8,26,.30);
  padding-block: 0;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 146px;
  transition: min-height .45s var(--ease);
}
.site-header.is-stuck .nav { min-height: 100px; }

/* Brand = the real logo lockup. The wordmark lives inside the artwork,
   so no text is set alongside it. */
/* flex: 0 0 auto — the nav grew to eight items, and without this the brand is
   treated as shrinkable by the flex row, which squeezes the logo narrower than
   its aspect ratio and crushes the "AURORA ACADEMY" wordmark. */
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The lockup is a square stack (mark over wordmark), so it needs real height
   to keep "AURORA ACADEMY" legible. */
.brand__logo {
  flex: 0 0 auto;
  height: clamp(82px, 8.4vw, 124px);
  width: auto;
  object-fit: contain;
  transition: height .45s var(--ease), transform .6s var(--ease-out);
}
.site-header.is-stuck .brand__logo { height: clamp(64px, 5.4vw, 82px); }
.brand:hover .brand__logo { transform: scale(1.03); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); }
.nav-links a {
  position: relative;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;          /* "Image Consulting" must not break in two */
  color: var(--on-navy-soft);
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav-links a:hover { color: var(--on-navy); }
.nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold-light);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Header CTA is deliberately smaller than the in-page buttons */
.nav-cta .btn {
  padding: .72rem 1.25rem;
  font-size: .66rem;
  letter-spacing: .13em;
  white-space: nowrap;
}
.nav-mobile-cta { display: none; }

.nav-toggle {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(255,255,255,.24);
  border-radius: 2px; cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 50%; height: 1.5px; width: 20px;
  background: var(--on-navy);
  transform: translateX(-50%);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease);
}
.nav-toggle span { top: 50%; transform: translate(-50%,-50%); }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after  { top:  6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, calc(100svh - var(--ticker-h)), 940px);
  display: flex; align-items: flex-end;
  padding-top: 205px;
  padding-bottom: clamp(48px, 6vw, 84px);
  background: var(--navy-black);
  overflow: hidden;
}

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 46%;  /* pinned right: the subject is composited into the right of the canvas, the left is clean ground for the headline */
  z-index: 0;
  animation: heroDrift 26s var(--ease) infinite alternate;
}
/* Gentler than it was. At 1.06–1.14 the drift cropped so far into the frame that
   the desk, the laptop and the room all fell outside it and only a shoulder was
   left — the scene has to survive the movement. */
@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.07) translate3d(-1%, -.9%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; transform: scale(1.04); }
}

/* Photograph-free hero — the dawn itself carries the page.
   Used where a portrait would be the wrong subject. */
.hero--plain { background: var(--navy-deep); }
.hero--plain::before {
  background:
    radial-gradient(58% 52% at 12% 104%, rgba(201,162,39,.34), transparent 66%),
    radial-gradient(46% 44% at 84% -6%, rgba(224,138,60,.20), transparent 68%),
    radial-gradient(40% 40% at 62% 40%, rgba(194,96,122,.10), transparent 70%),
    linear-gradient(180deg, rgba(1,8,26,.66) 0%, transparent 34%, transparent 64%, rgba(1,8,26,.60) 100%);
}
/* A faint horizon line — the "new dawn" made literal */
.hero--plain .wrap::before {
  content: "";
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: -18px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(201,162,39,.08) 62%, transparent);
  opacity: .5;
}

/* Bordered panel — stands in for a photograph in a split row */
.panel {
  position: relative;
  padding: clamp(30px, 3.6vw, 52px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--sh-sm);
}
.band-white .panel { background: var(--ivory-warm); }
.panel::before {
  content: "";
  position: absolute; inset: 20px -20px -20px 20px;
  border: 1px solid var(--gold);
  opacity: .34;
  z-index: -1;
  border-radius: 2px;
}
.panel__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem 1.4rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.panel__row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel__row:first-child { padding-top: 0; }
.panel__num {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 300; line-height: 1;
  color: var(--gold-deep);
}
.panel__row h4 { margin-bottom: .3rem; }
.panel__row p { font-size: .95rem; }

/* Scrim + dawn bloom in one layer, so ::after stays free for .grain.
   Bloom sits first in the list, i.e. on top of the scrim. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 8% 92%, rgba(201,162,39,.28), transparent 64%),
    radial-gradient(38% 34% at 30% 8%, rgba(224,138,60,.14), transparent 68%),
    /* Darker across the left ~65%, where the headline and lead sit — the gold
       italic in particular was failing against the bright window behind it. */
    /* Eased back from .96/.92 — at full strength the photograph behind the copy
       was a black rectangle and the online-session scene was invisible. Still
       dark enough under the headline and the gold italic to hold contrast. */
    linear-gradient(100deg, rgba(1,8,26,.90) 0%, rgba(1,10,28,.84) 34%, rgba(1,16,40,.58) 62%, rgba(1,21,52,.20) 100%),
    linear-gradient(180deg, rgba(1,8,26,.66) 0%, transparent 26%, transparent 58%, rgba(1,8,26,.70) 100%);
}

.hero > .wrap { position: relative; z-index: 4; width: 100%; }
/* Wide enough that the headline settles on two lines rather than three */
.hero__inner { max-width: 940px; }

.hero h1 { color: var(--on-navy); margin-bottom: 1.6rem; }
.hero .lead { color: var(--on-navy-soft); max-width: 600px; }

/* Pillar strip along the bottom of the hero */
.hero__pillars {
  display: flex; flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(42px, 5vw, 68px);
  border-top: 1px solid var(--line-navy-fa);
}
.hero__pillars li {
  position: relative;
  padding: 1.15rem clamp(18px, 2.4vw, 34px) 0 0;
  margin-right: clamp(18px, 2.4vw, 34px);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--on-navy-soft);   /* was --on-navy-mute: measured 4.23:1, under the 4.5 minimum */
}
.hero__pillars li::before {
  content: "";
  position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: var(--gold);
  transition: width .9s var(--ease-out);
}
.hero__pillars li:hover { color: var(--gold-light); }
.hero__pillars li:hover::before { width: 100%; }

/* Scroll cue */
.hero__cue {
  position: absolute; z-index: 4;
  right: var(--gutter); bottom: clamp(48px, 6vw, 84px);
  display: flex; align-items: center; gap: .7rem;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--on-navy-mute);
  writing-mode: vertical-rl;
}
.hero__cue::after {
  content: ""; width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
@media (max-width: 900px) { .hero__cue { display: none; } }

/* --- Page hero (inner pages) ---------------------------------------------- *
 * Shorter than the home hero, same layering so the pages feel of a piece.
 * -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(360px, 56vh, 580px);
  padding-top: 220px;
  padding-bottom: clamp(48px, 6vw, 82px);
  background: var(--navy-black);
  overflow: hidden;
}
.page-hero__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 32%;
  transform: scale(1.04);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(48% 46% at 6% 96%, rgba(201,162,39,.26), transparent 66%),
    linear-gradient(100deg, rgba(1,8,26,.95) 0%, rgba(1,14,34,.88) 38%, rgba(1,21,52,.46) 68%, rgba(1,21,52,.18) 100%),
    linear-gradient(180deg, rgba(1,8,26,.78) 0%, transparent 30%, transparent 58%, rgba(1,8,26,.68) 100%);
}
.page-hero > .wrap { position: relative; z-index: 4; width: 100%; }
.page-hero__inner { max-width: 860px; }
.page-hero h1 { color: var(--on-navy); margin-bottom: 1.1rem; }
.page-hero .lead { color: var(--on-navy-soft); max-width: 660px; }

/* No-photograph variant — navy, bloom and grain only */
.page-hero--plain { min-height: clamp(300px, 44vh, 460px); background: var(--navy-deep); }
.page-hero--plain::before {
  background:
    radial-gradient(54% 60% at 12% 110%, rgba(201,162,39,.24), transparent 66%),
    radial-gradient(44% 50% at 86% -10%, rgba(224,138,60,.15), transparent 68%);
}

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-bottom: 1.5rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-navy-mute);
}
.breadcrumb a { color: var(--gold-light); transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span[aria-hidden] { opacity: .5; }

/* --- Steps — numbered process rail ---------------------------------------- */
/* Two steps per row. Stacked one-per-row they ran the depth of a screen with
   the right half empty, and a four-step process is easier to take in as a
   two-by-two. Three-step sections (contact.html) keep the single column, where
   an odd row would leave a hole. */
.steps { counter-reset: step; display: grid; gap: 0 clamp(30px, 4.5vw, 80px); }
.steps:has(> .step:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.2vw, 32px);
  padding: clamp(24px, 2.8vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}
/* In a two-column run the top rule belongs on the first item of each row. */
.steps .step:first-child,
.steps:has(> .step:nth-child(4):last-child) > .step:nth-child(2) { border-top: 1px solid var(--line); }
@media (max-width: 800px) {
  .steps:has(> .step:nth-child(4):last-child) { grid-template-columns: 1fr; }
  .steps:has(> .step:nth-child(4):last-child) > .step:nth-child(2) { border-top: 0; }
}
.step__num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  color: var(--gold-deep);
  line-height: 1;
  min-width: 2.6ch;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: .6rem; }

/* --- Programme / price cards ---------------------------------------------- */
.programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.programme {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.programme:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--gold); }
.programme--feature { border-color: var(--gold); box-shadow: var(--sh-sm); }
.programme__flag {
  position: absolute; top: -1px; right: clamp(20px, 3vw, 32px);
  padding: .38rem .8rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.programme h3 { margin-bottom: .5rem; }
.programme__meta {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.2rem;
}
.programme__price {
  font-family: var(--font-display);
  font-size: 2.5rem; font-weight: 300; line-height: 1;
  color: var(--navy);
  margin-bottom: 1.2rem;
}
.programme__price small { font-family: var(--font-body); font-size: .78rem; color: var(--ink-muted); letter-spacing: .1em; }
.programme p { font-size: .98rem; }
.programme .btn, .programme .link-arrow { margin-top: auto; padding-top: 1.6rem; }

.note {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--gold-pale);
  border-left: 2px solid var(--gold);
  font-size: .95rem;
  color: var(--ink);
}

/* --- Feature list (two-column bullets with gold rule) --------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 44px); }
/* Four features are two even rows of two. auto-fit was fitting three across and
   dropping the fourth into a row of its own beside a dead cell. Sections with
   three features keep their three-across row, which already fills. */
.features:has(> .feature:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .features:has(> .feature:nth-child(4):last-child) { grid-template-columns: 1fr; }
}
.feature { padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Feature cards carrying a photograph. The picture sits above the hairline so
   the card still reads as part of the ruled system rather than as a tile. */
.features--media .feature { padding-top: 0; border-top: 0; }
.features--media .feature img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  transition: transform .7s var(--ease-out);
}
.features--media .feature:hover img { transform: translateY(-5px); }
.features--media .feature h4 {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.band-navy .features--media .feature h4 { border-top-color: var(--line-navy); }
.band-navy .feature { border-top-color: var(--line-navy); }
.feature h4 { margin-bottom: .6rem; }
.feature p { font-size: .97rem; }

/* --- Contact detail ------------------------------------------------------- */
.contact-list { display: grid; gap: 1.6rem; margin-top: 1.8rem; }
.contact-item { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.contact-item span {
  display: block;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: .45rem;
}
.contact-item a:hover { color: var(--gold-deep); }

/* --- Marquee ticker ------------------------------------------------------- */
.ticker {
  position: relative;
  height: var(--ticker-h);          /* fixed, so the hero can subtract it */
  display: flex; align-items: center;
  background: var(--navy);
  border-block: 1px solid var(--line-navy);
  overflow: hidden;
}
.ticker__track {
  display: flex; align-items: center; width: max-content;
  animation: tickerRun 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }
@keyframes tickerRun { to { transform: translateX(-50%); } }
.ticker span {
  display: inline-flex; align-items: center; gap: 2.6rem;
  padding-right: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.22rem; font-style: italic; font-weight: 300;
  color: var(--on-navy-soft);
  white-space: nowrap;
}
.ticker span::after {
  content: "◆";
  font-size: .5rem; font-style: normal;
  color: var(--gold);
}

/* --- Split rows (image + text) -------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

/* Media block: photo with an offset gold hairline frame behind it */
.split__media {
  position: relative;
  isolation: isolate;
}
.split__media img {
  position: relative; z-index: 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: var(--sh-lg);
  transition: transform .9s var(--ease-out);
}
.split__media--wide img { aspect-ratio: 5 / 4; }
.split__media--tall img { aspect-ratio: 3 / 4.2; }
.split__media:hover img { transform: translateY(-6px); }

.split__media::before {
  content: "";
  position: absolute; z-index: 1;
  inset: 26px -26px -26px 26px;
  border: 1px solid var(--gold);
  opacity: .42;
  border-radius: 2px;
  transition: inset .7s var(--ease-out), opacity .7s var(--ease);
}
.split--reverse .split__media::before { inset: 26px 26px -26px -26px; }
.split__media:hover::before { inset: 34px -34px -34px 34px; opacity: .7; }
.split--reverse .split__media:hover::before { inset: 34px 34px -34px -34px; }

/* Floating caption card that overlaps the photo corner */
.media-card {
  position: absolute; z-index: 3;
  right: -18px; bottom: 34px;
  width: min(272px, 74%);
  padding: 1.5rem 1.6rem;
  background: rgba(1,14,34,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-navy);
  border-radius: 2px;
  box-shadow: var(--sh-xl);
}
.split--reverse .media-card { right: auto; left: -18px; }
.media-card__num {
  font-family: var(--font-display);
  font-size: 2.5rem; font-weight: 300; line-height: 1;
  color: var(--gold-light);
}
.media-card p {
  margin-top: .5rem;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-navy-soft);
  line-height: 1.6;
}

/* --- Pillars — numbered editorial rows, no photography required ----------- */
.pillars { border-top: 1px solid var(--line); }

.pillar {
  position: relative;
  /* The title column was 1fr, which on a wide screen left a canyon of empty
     paper between "Coaching & Mentorship" and its description and made each row
     feel unfinished. Capping it keeps the pair reading as one unit. */
  grid-template-columns: auto minmax(190px, .72fr) minmax(0, 1.5fr) auto;
  display: grid;
  gap: clamp(18px, 2.6vw, 44px);
  align-items: start;
  padding-inline: clamp(0px, 1.4vw, 22px);
  padding-block: clamp(30px, 3.6vw, 48px);
  border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease);
}
/* A warm tint on hover so the rows read as the links they are. */
.pillar:hover { background-color: rgba(201,162,39,.045); }
.pillar::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__num {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight: 300;
  color: var(--gold-deep);
  padding-top: .45rem;
  min-width: 2.4ch;
  transition: color .4s var(--ease), transform .6s var(--ease-out);
}
.pillar:hover .pillar__num { transform: translateY(-4px); }

.pillar h3 {
  transition: transform .6s var(--ease-out), color .4s var(--ease);
}
.pillar:hover h3 { transform: translateX(6px); color: var(--gold-deep); }

.pillar__body p { font-size: 1.02rem; }
.pillar__go { padding-top: .5rem; }

@media (max-width: 900px) {
  .pillar { grid-template-columns: auto 1fr; gap: 14px 20px; }
  .pillar__body { grid-column: 1 / -1; }
  .pillar__go   { grid-column: 1 / -1; }
}

/* --- Principles — oversized display words --------------------------------- */
.principle {
  position: relative;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-navy);
}
.principle__word {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.3vw, 2.95rem);   /* matches h2 */
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
  background: linear-gradient(140deg, var(--gold-light) 8%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.principle p { color: var(--on-navy-soft); font-size: 1.02rem; }

/* --- Values — hairline grid ----------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.value {
  position: relative;
  padding: clamp(28px, 3.2vw, 46px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease), transform .5s var(--ease-out);
}
.value:hover { background: var(--white); transform: translateY(-3px); }
.value__num {
  display: block;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .26em;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.value h4 { margin-bottom: .7rem; }
.value p { font-size: .97rem; }

/* --- Lists ---------------------------------------------------------------- */
.ticks { display: grid; gap: .7rem 2rem; margin-top: 1.6rem; }
.ticks--2 { grid-template-columns: repeat(2, 1fr); }
.ticks--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .ticks--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ticks--3 { grid-template-columns: 1fr; } }
.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .99rem;
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* --- Quote / promise ------------------------------------------------------ */
.quote {
  text-align: center;
  position: relative;
  max-width: 1040px;      /* wide enough for the quote to sit on two lines */
  margin-inline: auto;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 7rem; line-height: .5;
  color: var(--gold);
  opacity: .34;
  margin-bottom: 1.6rem;
}
/* An opened quotation has to be closed. */
.quote__mark--close {
  margin-bottom: 0;
  margin-top: 2.4rem;
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  font-weight: 300; font-style: italic;
  line-height: 1.34;
  color: var(--on-navy);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* One row, the sentences' own full stops doing the separating. */
.stack-lines {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: .5rem 1.5rem;
  margin-top: 2.4rem;
}
.stack-lines span {
  font-size: .76rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-light);
}

/* --- Founder collage ------------------------------------------------------ */
.founder-media { position: relative; padding-bottom: 68px; padding-right: 54px; }
.founder-media__main img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 2px;
  box-shadow: var(--sh-lg);
}
.founder-media__inset {
  position: absolute; right: 0; bottom: 0;
  width: 52%;
  border: 6px solid var(--white);
  border-radius: 2px;
  box-shadow: var(--sh-md);
  transition: transform .8s var(--ease-out);
}
.founder-media__inset img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%;
}
.founder-media:hover .founder-media__inset { transform: translate(-8px, -8px); }
.founder-media::before {
  content: "";
  position: absolute; left: -30px; top: -30px;
  width: 46%; aspect-ratio: 1;
  border: 1px solid var(--gold);
  opacity: .4;
  z-index: -1;
}
@media (max-width: 640px) {
  .founder-media { padding-bottom: 44px; padding-right: 0; }
  .founder-media__inset { width: 46%; right: -6px; }
}

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(90px, 12vw, 168px);
  text-align: center;
  background: var(--navy-black);
  color: var(--on-navy-soft);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(52% 62% at 50% 118%, rgba(201,162,39,.34), transparent 66%),
    radial-gradient(40% 48% at 14% -8%, rgba(224,138,60,.16), transparent 68%),
    radial-gradient(40% 48% at 88% 6%, rgba(194,96,122,.11), transparent 70%);
}
.cta-band > .wrap { position: relative; z-index: 2; max-width: 880px; }
.cta-band h2 { color: var(--on-navy); margin-bottom: 1.3rem; }
.cta-band p { color: var(--on-navy-soft); font-size: 1.1rem; font-weight: 300; }
.cta-band .eyebrow { justify-content: center; }
.cta-band .eyebrow::before { display: none; }

/* --- Forms ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 1.3rem; }
.field > span {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .6rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.14);
}
.field textarea { min-height: 150px; resize: vertical; }
.form-status {
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: var(--gold-pale);
  border-left: 2px solid var(--gold);
  font-size: .95rem;
  color: var(--ink);
}
.form-status--error { background: #fbeceb; border-left-color: #b3382c; }

/* Honeypot — off-screen for people, still fillable by bots */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

button[disabled] { opacity: .6; cursor: progress; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--navy-black);
  color: var(--on-navy-mute);
  padding-top: clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: auto -10% -40% -10%; height: 70%;
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 100%, rgba(201,162,39,.14), transparent 68%);
}
.site-footer > .wrap { position: relative; z-index: 2; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(44px, 5vw, 70px);
}
.footer-brand p { font-size: .95rem; max-width: 340px; margin-bottom: 1.2rem; }

.site-footer h4 {
  color: var(--on-navy);
  font-family: var(--font-body);
  font-size: .69rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.footer-links { display: flex; flex-direction: column; gap: .8rem; }
.footer-links a, .footer-links li { font-size: .95rem; }
.footer-links a { transition: color .3s var(--ease); }
.footer-links a:hover { color: var(--gold-light); }

.socials { display: flex; gap: 12px; margin-top: 1.8rem; }
.socials a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-navy-fa);
  border-radius: 50%;
  transition: border-color .35s var(--ease), background-color .35s var(--ease),
              transform .45s var(--ease-out);
}
.socials svg { width: 17px; height: 17px; fill: var(--on-navy-soft); transition: fill .35s var(--ease); }
.socials a:hover { border-color: var(--gold); background: rgba(201,162,39,.12); transform: translateY(-3px); }
.socials a:hover svg { fill: var(--gold-light); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: space-between;
  padding-block: 1.8rem;
  border-top: 1px solid var(--line-navy-fa);
  font-size: .84rem;
}
.footer-bottom__brand { display: flex; align-items: center; gap: 16px; }
.footer-bottom__logo { height: 58px; width: auto; flex: none; }

.credit { color: var(--on-navy-mute); }
.credit a {
  color: var(--on-navy-soft);
  border-bottom: 1px solid var(--line-navy);
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.credit a:hover { color: var(--gold-light); border-color: var(--gold); }

/* --- Reveal on scroll ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Utilities ------------------------------------------------------------ */
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.4rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
}

/* The primary nav collapses to the drawer earlier than the page layout does.
   With eight items — "Image Consulting" and "The Purpose Queen" among them —
   the horizontal bar runs out of room well before the splits and grids need to
   stack, so the nav gets its own, wider breakpoint. */
@media (max-width: 1120px) {
  .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 88px 40px 40px;
    background: rgba(1,8,26,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-left: 1px solid var(--line-navy);
    box-shadow: -30px 0 80px rgba(1,8,26,.5);
    transform: translateX(100%);
    transition: transform .55s var(--ease-out);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding-block: 15px;
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 400;
    letter-spacing: 0;
    color: var(--on-navy);
    border-bottom: 1px solid var(--line-navy-fa);
  }
  .nav-links a::after { display: none; }
  .nav-mobile-cta { display: block; margin-top: 26px; }
  .nav-mobile-cta a { border: 0; padding: 0; }
  .nav-mobile-cta .btn { width: 100%; font-family: var(--font-body); font-size: .74rem; }
}

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: clamp(52px, 9vw, 76px); }
  .split--reverse .split__media { order: 0; }
  .split__media::before,
  .split--reverse .split__media::before { inset: 18px -18px -18px 18px; }
  .media-card { right: 0; }
  .split--reverse .media-card { left: 0; right: auto; }

  .grid--3 { grid-template-columns: 1fr; }
  .principle { padding-top: 1.6rem; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .values { grid-template-columns: 1fr; }
  .ticks--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Stacked hero.
     A 3:2 group photograph cannot survive a full-bleed crop into a phone-shaped
     box — covering a 393x1100 hero with a 1.5-ratio image leaves about a quarter
     of its width visible, which turned a boardroom of three people into one
     woman and no room. No object-position fixes that; the geometry is the
     problem. So on phones the photograph steps out of the background and becomes
     a band of its own beneath the copy, at its native 3:2 — nothing cropped. */
  .hero {
    display: flex; flex-direction: column;
    min-height: 0;
    padding-top: 148px;
    padding-bottom: 0;
    background: var(--navy-deep);
  }
  .hero > .wrap {
    order: 1;
    padding-bottom: clamp(30px, 7vw, 48px);
    /* The dawn bloom normally lives on .hero::before, over the photograph. With
       the two separated it moves behind the copy, where it belongs. */
    background:
      radial-gradient(60% 46% at 4% 98%, rgba(201,162,39,.26), transparent 66%),
      radial-gradient(48% 34% at 92% 2%, rgba(224,138,60,.16), transparent 68%);
  }
  .hero__media {
    order: 2;
    position: relative; inset: auto;
    width: 100%; height: auto;
    aspect-ratio: 3 / 2;
    /* The canvas is 2:1 with the scene composited into its right-hand side, so
       a 3:2 band anchored right keeps the whole scene and trims only backdrop. */
    object-position: 100% 50%;
    animation: none;
    transform: none;
  }
  /* That wash exists only to keep text legible over the photograph. Once the
     text is on solid navy it would just grey the picture out. */
  .hero::before { display: none; }
  .page-hero { padding-top: 152px; }
  .btn { width: 100%; }
  .btn-row { gap: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* The logo is the brand on a small screen — it must stay readable.
     A leftover `.brand img { width:40px; height:40px }` from the old
     icon-plus-text header was squashing it to a 40px thumbnail here and
     overriding the sizing above. */
  .brand__logo { height: 76px; }
  .site-header.is-stuck .brand__logo { height: 58px; }
  .nav { min-height: 104px; }
  .site-header.is-stuck .nav { min-height: 78px; }
}

/* ==========================================================================
   THE PURPOSE QUEEN
   A specialist platform inside Aurora Academy, so it inherits the whole design
   system above — navy, gold, Cormorant, the bands, the grain. What it adds is a
   slightly more editorial register: wider letter-spacing, hairline frames and
   set-piece typography, so the page reads as a considered essay rather than a
   services page. Deliberately no religious ornament — the faith position is
   carried by the words, per the brand brief.
   ========================================================================== */

/* Scripture. Set as a framed set-piece rather than a pull-quote so it reads as
   a foundation stone, which is the whole point of Psalm 127:1 here. */
.pq-anchor {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 62px) clamp(24px, 5vw, 64px);
  border: 1px solid var(--line-navy);
  text-align: center;
}
/* Gold corner ticks — a frame that is implied rather than drawn. */
.pq-anchor::before,
.pq-anchor::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--gold);
  opacity: .8;
}
.pq-anchor::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.pq-anchor::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.pq-anchor blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.42;
  color: var(--on-navy);
  margin: 0;
}
.pq-anchor cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: .72rem; font-style: normal; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-light);
}

/* "God builds. We steward." — the platform's shortest statement, so it is
   allowed to sit alone at display size. */
.pq-seal {
  margin-top: clamp(26px, 3.4vw, 44px);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: .01em;
}
.pq-seal em { font-style: italic; color: var(--gold-light); }
.band-white .pq-seal em, .band-ivory .pq-seal em { color: var(--gold-deep); }

/* The four "does not replace" lines. Two columns of a single sentence each,
   split on the verb so the negation and the correction line up down the page. */
.pq-creed {
  display: grid;
  gap: 0;
  max-width: 640px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--line);
}
.band-navy .pq-creed, .pq-creed--light { border-top-color: var(--line-navy); }
.pq-creed li {
  display: flex; flex-wrap: wrap; gap: .1rem .6rem;
  padding: .82rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
  list-style: none;
}
.band-navy .pq-creed li, .pq-creed--light li { border-bottom-color: var(--line-navy); }
.pq-creed strong {
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  min-width: 8.5rem;
}
.band-navy .pq-creed strong, .pq-creed--light strong { color: var(--gold-light); }
.pq-creed span { color: var(--ink-soft); }
.band-navy .pq-creed span, .pq-creed--light span { color: var(--on-navy-soft); }

/* The six pillars. Bordered cards on navy with a lettered index — closer to a
   contents page than to a feature grid. */
/* Explicitly three across, not auto-fit: six pillars must read as two even rows
   of three. auto-fit gave four then two, leaving a dead cell in the corner. */
.pq-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-navy);
  border: 1px solid var(--line-navy);
}
@media (max-width: 940px) { .pq-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pq-pillars { grid-template-columns: 1fr; } }
.pq-pillar {
  position: relative;
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 2.6vw, 38px);
  background: var(--navy-deep);
  transition: background .5s var(--ease);
}
.pq-pillar:hover { background: var(--navy-lift); }
.pq-pillar__idx {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .3em;
  color: var(--gold);
  display: block;
  margin-bottom: 1.5rem;
}
.pq-pillar h3 {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-navy);
  margin-bottom: .9rem;
}
.pq-pillar p { color: var(--on-navy-soft); font-size: .93rem; margin: 0; }

/* The seven-stage journey. A single ruled spine with the stage name set in the
   display face — reads as a route, not a checklist. */
/* Two stages per row. In one column the seven stages ran the depth of a whole
   screen with the right half empty; paired up they read as a route with a pace
   to it. Seven is odd, so the last stage — Impact — takes the full width, which
   is the right emphasis for the stage everything else builds towards. */
.pq-journey {
  counter-reset: stage;
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(30px, 4.5vw, 80px);
}
.pq-stage {
  display: grid;
  grid-template-columns: clamp(40px, 4.5vw, 64px) 1fr;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.pq-stage:last-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
@media (max-width: 940px) {
  .pq-journey { grid-template-columns: 1fr; }
  .pq-stage:last-child { grid-column: auto; }
}
.pq-stage__no {
  counter-increment: stage;
  font-family: var(--font-body);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .24em;
  color: var(--gold-deep);
}
.pq-stage__no::before { content: "0" counter(stage); }
.pq-stage h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 400;
  margin-bottom: .5rem;
}
.pq-stage p { margin: 0; max-width: 62ch; }

/* Experience cards. These titles are long — "Kingdom Entrepreneurship",
   "Kingdom Business Masterclasses" — and at the inherited h3 size they wrapped
   onto two lines and ran under the FLAGSHIP tab. Smaller and tighter so each
   title holds one line, with room above it for the tab. */
#experiences .programme h3 {
  font-size: clamp(1.2rem, 1.45vw, 1.42rem);
  line-height: 1.2;
  text-wrap: balance;
}
/* Same for the kicker beneath it — "Development experience" at .2em tracking
   wrapped as well, and a two-word label on two lines looks like a mistake. */
#experiences .programme__meta {
  font-size: .7rem;
  letter-spacing: .13em;
  white-space: nowrap;
}
#experiences .programme { padding-top: clamp(34px, 3.6vw, 48px); }

/* Five cards on a three-across grid left a dead cell in the corner. A six-column
   track lets the first three span two each and the last two span three each, so
   both rows run the full width. */
#experiences .programmes { grid-template-columns: repeat(6, 1fr); }
#experiences .programme { grid-column: span 2; }
#experiences .programme:nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 940px) {
  #experiences .programmes { grid-template-columns: 1fr 1fr; }
  #experiences .programme,
  #experiences .programme:nth-last-child(-n+2) { grid-column: auto; }
}
@media (max-width: 640px) {
  #experiences .programmes { grid-template-columns: 1fr; }
}

/* --- Client reviews -------------------------------------------------------- */
/* Only reviews Deirdre has approved ever reach this markup — see
   reviews-feed.php. Nothing here is styling for unmoderated content. */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.review {
  padding: clamp(28px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.band-white .review { background: var(--ivory); }
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gold); }
.review p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 1.1rem 0 1.6rem;
}
.review__stars { display: flex; gap: .18rem; font-size: .95rem; color: var(--gold); }
.review__stars .is-off { color: var(--line-strong); }
.review footer { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.review footer strong {
  display: block;
  font-size: .95rem; font-weight: 600;
  color: var(--ink);
}
.review footer span {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: .3rem;
}
/* Single review shown on its own (the moderation confirmation page). */
.review--static { max-width: 640px; }

/* Star rating input. The row is reversed so that ~ can reach the stars that
   come before the checked one — CSS has no previous-sibling selector. */
.rating legend {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .6rem;
}
.rating { border: 0; }
.rating__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.rating__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__stars label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
  transition: color .2s var(--ease), transform .2s var(--ease-out);
}
.rating__stars label:hover { transform: translateY(-2px); }
.rating__stars input:checked ~ label,
.rating__stars label:hover,
.rating__stars label:hover ~ label { color: var(--gold); }
.rating__stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Coaching programme blocks --------------------------------------------
   Six programmes, each with a ten-point focus list. As cards side by side that
   is a wall of bullets, so each becomes a full-width ruled block: the money —
   sessions, fee, enquiry link — pinned in a narrow left column that can be
   scanned straight down the page, the detail set beside it.
   -------------------------------------------------------------------------- */
.progs { border-top: 1px solid var(--line-strong); }
.prog {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(20px, 4vw, 72px);
  padding-block: clamp(34px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.prog__head h3 { margin-bottom: .55rem; }
.prog__meta {
  font-size: .64rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.prog__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 300; line-height: 1;
  color: var(--gold-deep);
  margin: 1rem 0 1.2rem;
}
.prog__label {
  font-family: var(--font-body);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.6rem 0 .9rem;
}
.prog__label--light { color: var(--gold-light); }
/* Two columns of five rather than one column of ten — a ten-item list reads as
   a specification, two fives read as a summary. */
.prog__focus {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .3rem 2rem;
  font-size: .93rem;
}
.prog__focus li { position: relative; padding-left: 1.1rem; }
.prog__focus li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}
.prog__for { margin-top: 1.3rem; font-size: .95rem; }
.prog__for strong { color: var(--ink); }

/* Aurora 360° — the flagship, assembled from all six, so it sits apart. */
.a360 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 84px);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--line-navy);
}
.a360__price {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 300; line-height: 1;
  color: var(--gold-light);
}
.a360__meta {
  font-size: .66rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-navy-mute);
  margin: .7rem 0 1.4rem;
}
.a360__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 46px); }

@media (max-width: 860px) {
  .prog { grid-template-columns: 1fr; gap: 1.6rem; }
  .a360 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .prog__focus, .a360__cols { grid-template-columns: 1fr; }
}

/* --- Coaching programme row ----------------------------------------------- */
/* Four programmes, four across. Inside the 1240px wrap the cards' 280px minimum
   only ever fitted three, dropping the fourth onto a row of its own, so this one
   row steps outside the container and runs to the width of the screen. */
#programmes .programmes {
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 2 * var(--gutter));
  max-width: 1520px;
}
#programmes .programme { padding: clamp(24px, 2.1vw, 34px); }
/* Four to a row leaves a narrow card, and the kicker at full tracking wrapped
   onto two lines. Tightened, and held to one line. */
#programmes .programme__meta {
  font-size: .62rem;
  letter-spacing: .12em;
  white-space: nowrap;
}
#programmes .programme__price { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
@media (max-width: 1180px) { #programmes .programmes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { #programmes .programmes { grid-template-columns: 1fr; } }

/* Closing manifesto — one line per breath. */
.pq-manifest { list-style: none; margin: 0; padding: 0; }
.pq-manifest li {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-navy);
}
.pq-manifest li + li { margin-top: .1rem; }
.pq-manifest li em { font-style: italic; color: var(--gold-light); }

@media (max-width: 640px) {
  .pq-creed strong { min-width: 100%; }
  .pq-stage { grid-template-columns: 1fr; gap: .35rem; }
}


/* --- Booking widget --------------------------------------------------------
   The scheduling calendar is a third-party iframe, so it cannot inherit the
   type scale. It gets a framed well of its own instead, which reads as a
   deliberate panel rather than an iframe dropped into the page.
   -------------------------------------------------------------------------- */
.booking-embed {
  min-height: 620px;
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(6px, 1vw, 14px);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.booking-embed iframe { border-radius: 2px; }
/* The widget reports its own height; let it, rather than trapping it. */
.booking-embed > * { width: 100% !important; }

.booking-fallback {
  max-width: 680px;
  margin: clamp(24px, 3vw, 40px) auto 0;
  text-align: center;
}
.booking-fallback h3 { margin-bottom: .8rem; }
.booking-fallback .btn-row { justify-content: center; margin-top: 1.6rem; }

@media (max-width: 700px) {
  .booking-embed { min-height: 560px; padding: 0; border: 0; background: none; }
}

/* --- Currency switch ------------------------------------------------------
   Every fee is written into the page twice, once per currency. The stylesheet
   shows whichever matches body[data-currency], so the switch only ever changes
   one attribute and never needs to know what a price is — and both figures stay
   in the markup for search engines and for print.
   -------------------------------------------------------------------------- */
body[data-currency="zar"] .cur--usd,
body[data-currency="usd"] .cur--zar { display: none; }

.currency-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 1.2rem;
  margin-bottom: clamp(30px, 3.6vw, 48px);
}
/* An author display rule outranks the browser's own [hidden] styling, so
   without this the switch shows even with the attribute set — and a visitor
   with JavaScript off would get a control that does nothing. */
.currency-bar[hidden] { display: none; }
.currency-bar--center { justify-content: center; }
.currency-bar__label {
  font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
}
.band-navy .currency-bar__label { color: var(--on-navy-mute); }

.currency-switch {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.currency-switch__btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .58rem 1.25rem;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.currency-switch__sub {
  font-size: .54rem; font-weight: 500;
  letter-spacing: .14em;
  opacity: .8;
}
.currency-switch__btn:hover { color: var(--ink); }
.currency-switch__btn[aria-pressed="true"] { background: var(--navy); color: var(--gold-light); }
.currency-switch__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.band-navy .currency-switch { background: rgba(255,255,255,.05); border-color: var(--line-navy); }
.band-navy .currency-switch__btn { color: var(--on-navy-soft); }
.band-navy .currency-switch__btn:hover { color: var(--on-navy); }
.band-navy .currency-switch__btn[aria-pressed="true"] { background: var(--gold); color: var(--navy-deep); }

/* --- Programme investment (left column of a .prog block) ------------------- */
.prog__invest { margin: 1.2rem 0 1.5rem; }
.prog__invest-label {
  display: block;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
}
.prog__invest .prog__price { margin: .5rem 0 .3rem; }
.prog__invest-note { font-size: .78rem; color: var(--ink-muted); }
/* The label carries the programme name, so it is long for a 260px column —
   full width, tightened tracking, and it wraps rather than overflowing. */
.prog__cta {
  width: 100%;
  padding-inline: 1rem;
  font-size: .69rem; letter-spacing: .12em;
  text-align: center;
}

/* --- Tiered programme pages ------------------------------------------------
   Where a discipline is sold at three depths rather than as one programme.
   The signature tier is marked rather than enlarged: same block, a gold flag
   and a gold rule, so the page still reads as one family.
   -------------------------------------------------------------------------- */
.prog__flag {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .3rem .6rem;
  font-size: .56rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--gold);
  border-radius: 2px;
}
.prog--signature { border-bottom-color: var(--gold); }

/* The closing line of each programme — the sentence that does the selling. */
.prog__line {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 300; line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
.prog__line em { font-style: italic; color: var(--gold-deep); }

/* The three-across comparison, after the detail has been read. */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  display: block;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line-navy);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out);
}
.tier:hover { border-color: var(--gold); background: rgba(201,162,39,.07); transform: translateY(-4px); }
.tier:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tier h3 { color: var(--on-navy); margin-bottom: .5rem; }
.tier__meta {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-navy-mute);
}
.tier__price {
  margin: 1rem 0 .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 300; line-height: 1;
  color: var(--gold-light);
}
.tier__for { font-size: .93rem; color: var(--on-navy-soft); }
.tier--signature { border-color: var(--gold); background: rgba(201,162,39,.06); }

/* --- Enrolment flow --------------------------------------------------------
   Five steps on one page. The rail across the top is the only thing that tells
   someone how much is left, so it stays legible at every width: numbered dots
   on a hairline, labels dropping away on the narrowest screens rather than
   wrapping into a block.
   -------------------------------------------------------------------------- */
.enrol-steps {
  counter-reset: enrol;
  list-style: none; margin: 0 0 clamp(40px, 5vw, 68px); padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.enrol-steps li {
  counter-increment: enrol;
  position: relative;
  padding-top: 2.4rem;
  text-align: center;
  font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* The connecting rule, drawn behind the dots. */
.enrol-steps li::before {
  content: "";
  position: absolute; top: .72rem; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.enrol-steps li:first-child::before { left: 50%; }
.enrol-steps li:last-child::before  { right: 50%; }
.enrol-steps li::after {
  content: counter(enrol);
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  font-size: .62rem; letter-spacing: 0;
  color: var(--ink-muted);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.enrol-steps .is-done::after {
  content: "\2713";
  background: var(--gold); border-color: var(--gold); color: var(--navy-deep);
}
.enrol-steps .is-current::after {
  background: var(--navy); border-color: var(--navy); color: var(--gold-light);
}
.enrol-steps .is-current { color: var(--ink); }
@media (max-width: 620px) {
  .enrol-steps li span { display: none; }
  .enrol-steps li { padding-top: 1.9rem; }
}

/* Programme cards. Auto-fit rather than a fixed count, so the row reflows
   without a breakpoint for every screen size. */
.enrol-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.enrol-loading { color: var(--ink-muted); }
.enrol-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
}
.enrol-card:hover { border-color: var(--gold); box-shadow: var(--sh-md); transform: translateY(-4px); }
.enrol-card h3 { margin-bottom: .5rem; }
.enrol-card__meta {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.enrol-card__for { margin-top: .9rem; font-size: .92rem; color: var(--gold-deep); }
.enrol-card__summary { margin-top: .7rem; font-size: .95rem; }
.enrol-card__label {
  font-family: var(--font-body);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.4rem 0 .7rem;
}
.enrol-card__gains { display: grid; gap: .35rem; font-size: .92rem; }
.enrol-card__gains li { position: relative; padding-left: 1.1rem; list-style: none; }
.enrol-card__gains li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.enrol-card__foot {
  margin-top: auto; padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.enrol-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 300; line-height: 1;
  color: var(--gold-deep);
}

.enrol-unsure { margin-top: clamp(34px, 4vw, 56px); }
.enrol-unsure h3 { margin-bottom: .6rem; }

/* Steps 2–4 are a form beside a column of context. A form alone on a wide
   screen strands half the page in white; the aside carries the running summary
   and the answers to the questions people ask at exactly that moment, so the
   space does work rather than just sitting there. */
.enrol-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.enrol-main { min-width: 0; }
.enrol-aside {
  position: sticky; top: 104px;
  display: grid; gap: clamp(16px, 1.8vw, 24px);
  min-width: 0;
}
@media (max-width: 980px) {
  .enrol-layout { grid-template-columns: 1fr; }
  /* Stacked, the summary belongs above the form it describes. */
  .enrol-aside { position: static; order: -1; }
}

/* The running summary, so nobody has to remember what they picked. */
.enrol-summary__inner {
  display: grid; gap: .35rem;
  padding: 1.2rem 1.4rem;
  background: var(--ivory-warm);
  border-left: 2px solid var(--gold);
}
.enrol-summary__label {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
}
.enrol-summary__inner strong {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.2;
}
.enrol-summary__meta { font-size: .82rem; color: var(--ink-muted); }
.enrol-summary__price {
  margin-top: .4rem;
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  color: var(--gold-deep);
}

.enrol-aside__note {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
}
.enrol-aside__note--quiet { border: 0; padding-inline: 0; }
.enrol-aside__note h4 {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .9rem;
}
.enrol-aside__note p { font-size: .88rem; }
.enrol-aside__list, .enrol-aside__ticks { display: grid; gap: .6rem; font-size: .88rem; }
.enrol-aside__list { counter-reset: aside; list-style: none; }
.enrol-aside__list li { position: relative; padding-left: 1.7rem; counter-increment: aside; }
.enrol-aside__list li::before {
  content: counter(aside);
  position: absolute; left: 0; top: .05em;
  width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ivory-deep);
  font-size: .62rem; font-weight: 600;
  color: var(--gold-deep);
}
.enrol-aside__ticks { list-style: none; }
.enrol-aside__ticks li { position: relative; padding-left: 1.2rem; }
.enrol-aside__ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

.enrol-form { max-width: 100%; }
.enrol-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 620px) { .enrol-form__row { grid-template-columns: 1fr; } }
.field > span b { color: var(--gold-deep); }
.field__hint { display: block; margin-top: .5rem; font-size: .78rem; color: var(--ink-muted); }

/* Banking details. Rendered from the server's response — never in the markup —
   and set as a bordered plate so it reads as a document to copy from. */
.enrol-bank {
  border: 1px solid var(--line-strong);
  background: var(--white);
}
.enrol-bank__head {
  padding: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  background: var(--ivory-warm);
}
.enrol-bank__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 300; line-height: 1;
  color: var(--gold-deep);
  margin-top: .8rem;
}
.enrol-bank__ref { margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
.enrol-bank__ref strong { color: var(--ink); letter-spacing: .06em; }
.enrol-bank__grid { padding: clamp(8px, 1vw, 14px) clamp(20px, 2.4vw, 30px); }
.enrol-bank__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.4rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line);
}
.enrol-bank__row:last-child { border-bottom: 0; }
.enrol-bank__row dt {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
  align-self: center;
}
.enrol-bank__row dd { font-size: 1.05rem; color: var(--ink); }
.enrol-bank__value {
  position: relative;
  cursor: pointer;
  border-bottom: 1px dashed var(--line-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.enrol-bank__value:hover { border-bottom-color: var(--gold); }
.enrol-bank__value.is-copied::after {
  content: "Copied";
  position: absolute; right: 0; top: -1.5rem;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-deep); background: var(--gold);
  padding: .2rem .5rem; border-radius: 2px;
  white-space: nowrap;
}
.enrol-bank__note {
  padding: 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px);
  font-size: .88rem; color: var(--ink-soft);
}

.enrol-done { max-width: 760px; }
.enrol-done .eyebrow { margin-bottom: 1rem; }
.enrol-receipt { margin: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.enrol-receipt .enrol-bank__row { border-bottom: 1px solid var(--line); }
.enrol-next {
  padding: 1.2rem 1.4rem;
  background: var(--gold-pale);
  border-left: 2px solid var(--gold);
  font-size: .92rem;
}

/* --- The Purpose Queen — Kingdom voice ------------------------------------
   Four places where the page turns from describing itself to addressing the
   reader directly. Each is set apart from the body copy around it, but none
   shouts: the weight comes from the line breaking early and the italic, not
   from size.
   -------------------------------------------------------------------------- */
.pq-surrender {
  max-width: 720px;
  margin: clamp(26px, 3.4vw, 44px) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 300; line-height: 1.5;
  color: var(--on-navy-soft);
  text-wrap: balance;
}
.pq-surrender em { color: var(--gold-light); font-style: italic; }

.pq-prayer {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
}
.pq-prayer em { color: var(--gold-deep); font-style: italic; }

/* The free entry point, set as a bordered island so it reads as an offer
   rather than another paragraph of the section it closes. */
.pq-reset {
  max-width: 760px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding: clamp(28px, 3.4vw, 46px);
  text-align: center;
  border: 1px solid var(--line-strong);
  background: var(--white);
}
.pq-reset .eyebrow { justify-content: center; margin-bottom: 1rem; }
.pq-reset .eyebrow::before { display: none; }
.pq-reset h3 { margin-bottom: .8rem; }
.pq-reset__line {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 300;
  color: var(--ink-soft);
}
.pq-reset__line em { color: var(--gold-deep); font-style: italic; }
.pq-reset .btn-row { margin-top: 1.8rem; }

/* The closing declaration, above the shared footer strip. */
.pq-embassy {
  max-width: 880px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  padding-bottom: clamp(24px, 2.6vw, 36px);
  border-bottom: 1px solid var(--line-navy-fa);
  text-align: center;
  font-size: .95rem; font-weight: 300; line-height: 1.7;
  color: var(--on-navy-soft);
  text-wrap: balance;
}
.pq-embassy strong { color: var(--on-navy); font-weight: 500; }
.pq-embassy em { color: var(--gold-light); font-style: italic; }

/* --- Fine print ------------------------------------------------------------
   Programme terms, set after the closing call to action. Deliberately quiet —
   this is the small print behind the fees, not another pitch — so it takes a
   shallower band and body copy a size down.
   -------------------------------------------------------------------------- */
.section--fine { padding-block: clamp(44px, 5vw, 76px); }
.fineprint { max-width: var(--wrap-slim); }
.fineprint .eyebrow { margin-bottom: 1.4rem; }
.fineprint p { font-size: .92rem; color: var(--ink-soft); }
.fineprint p + p { margin-top: .75rem; }

/* --- Coaching hero additions ---------------------------------------------- */
.page-hero__note {
  max-width: 640px;
  margin-top: 1.1rem;
  font-size: 1rem; font-weight: 300;
  color: var(--on-navy-soft);
}
.page-hero .btn-row { margin-top: 2rem; }
.stack-lines--left { justify-content: flex-start; margin-top: 2rem; }

/* Printed, the switch is meaningless — show both currencies instead. */
@media print {
  .currency-bar { display: none !important; }
  body[data-currency="zar"] .cur--usd,
  body[data-currency="usd"] .cur--zar { display: inline !important; }
  .cur--usd::before { content: " / "; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .hero__cue, .ticker, .socials, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .band-navy, .cta-band, .site-footer { background: #fff !important; color: #000 !important; }
  .band-navy::before, .band-navy::after, .cta-band::before, .site-footer::before { display: none !important; }
  .band-navy h1, .band-navy h2, .cta-band h2, .quote p { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { min-height: 0; padding: 0; }
  .hero__media { display: none; }
  .hero::before, .hero::after { display: none; }
  .hero h1, .hero .lead { color: #000 !important; }
}