/* ============================================================
   The Queen — page-specific layout
   POV: a museum of queens. Merlin's white/violet/teal system,
   flat everywhere except the mark, with one gallery of paired
   ancient-and-modern photography running through it like a spine.
   ============================================================ */

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-block: var(--s-3);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-scrolled {
  background: rgba(251, 250, 254, 0.88);
  backdrop-filter: blur(10px);
  padding-block: var(--s-2);
  box-shadow: 0 1px 0 rgba(12,53,42, 0.08);
}
.header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.brand { display: flex; align-items: center; gap: .65rem; min-height: 44px; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-word { font-family: var(--loud); font-size: .95rem; letter-spacing: .04em; }
.brand-word small { display: block; font-family: var(--body); font-weight: 700; font-size: .62rem; letter-spacing: .2em; color: var(--gray); text-transform: uppercase; margin-top: 1px; }
.header nav { display: flex; align-items: center; gap: var(--s-4); }
/* :not(.btn) — otherwise this out-specifies .btn--ink and paints
   the CTA label ink-on-ink (invisible) */
.header nav a:not(.btn) { font-size: var(--fs-0); font-weight: 600; color: var(--ink); opacity: .75; transition: opacity var(--dur) var(--ease); }
.header nav a:not(.btn):hover { opacity: 1; }
.header nav .btn { min-height: 44px; padding: .7em 1.6em; }
@media (max-width: 860px) { .header nav a:not(.btn) { display: none; } }
@media (max-width: 560px) {
  /* brand + CTA need 366px but only ~335px exists at 375vw: slim both */
  .header .container { gap: var(--s-2); }
  .brand-word { font-size: .82rem; }
  .brand-word small { font-size: .5rem; }
  .brand-mark { width: 32px; height: 32px; }
  .header nav .btn { padding: .6em 1em; font-size: .82rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(6rem, 12vw, 9rem);
  padding-bottom: var(--s-6);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, rgba(11,110,69,.10), transparent 60%),
    radial-gradient(ellipse 55% 45% at 10% 95%, rgba(47,158,120,.10), transparent 60%);
}
/* rotating five-thrones dial — the instrument now lives IN FLOW as the
   hero's left column (dial on top, CTAs directly beneath it).
   Two groups spin at different speeds/directions (90s / 150s) so the
   dial reads as a slow astronomical instrument, not a spinner. */
.hero__dial {
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.hero__rings {
  position: relative;
  width: min(560px, 100%); aspect-ratio: 1;
  pointer-events: none;
}
.hero__rings svg { width: 100%; height: 100%; display: block; }
.hero__rings g { transform-origin: 50% 50%; transform-box: view-box; }
.rings__slow { animation: q-rot 90s linear infinite; }
.rings__counter { animation: q-rot-rev 150s linear infinite; }
@keyframes q-rot { to { transform: rotate(360deg); } }
@keyframes q-rot-rev { to { transform: rotate(-360deg); } }
.rings__node { fill: var(--paper); stroke: rgba(11,110,69,.40); }
.rings__num {
  fill: var(--purple-ink);
  font-family: var(--mono); font-size: 19px; font-weight: 600;
}
/* the dial's still center — real (non-decorative) copy, so it lives
   outside the aria-hidden svg rather than baked into it */
.hero__rings-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3em;
  text-align: center;
  pointer-events: none;
}
.hero__rings-center__label { font-size: clamp(1rem, 2.6vw, 1.15rem); letter-spacing: .16em; font-weight: 700; }
.hero__rings-center__word {
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  color: var(--purple-ink);
}
@media (prefers-reduced-motion: reduce) {
  .rings__slow, .rings__counter { animation: none; }
}

.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: center; }
.hero__eyebrow { display: flex; align-items: center; justify-content: center; gap: .6em; margin-bottom: var(--s-5); }
.hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hero p.lede { font-size: var(--fs-2); color: var(--gray); line-height: 1.55; }
.hero__lede { max-width: 62ch; margin: var(--s-6) auto 0; text-align: center; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.hero__plate { position: relative; }
.hero__plate .frame { aspect-ratio: 707/1000; }
.hero__plate .plate { position: static; margin-top: var(--s-2); }
.hero__crest {
  position: absolute; top: -22px; right: -22px;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.25;
  letter-spacing: .04em; padding: .4rem; box-shadow: 0 8px 24px rgba(12,53,42,.25);
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-5); justify-items: center; }
  /* stacked order: green plate first, then dial + CTAs, then the lede */
  .hero__plate { order: -1; max-width: 380px; }
  .hero__rings { width: min(420px, 88vw); }
}

/* (proof strip removed 2026-07-23 per user request) */

/* ---------- shared section heads ---------- */
.head { max-width: 62ch; margin-bottom: var(--s-5); }
.head--center { margin-inline: auto; text-align: center; }
.head .eyebrow { margin-bottom: var(--s-2); }
.head h2 { font-size: var(--fs-giant); }
.head p { color: var(--gray); font-size: var(--fs-2); margin-top: var(--s-2); line-height: 1.55; }

/* ---------- film (video placeholder — replaces the old problem section) ---------- */
.film { background: var(--ink); }
/* override the generic .head 62ch cap: at this h2's large font-size, ch
   resolves against the small parent font and starves the line — give it
   room in px instead so "Manifest your higher self" sets on one line */
.film__head { max-width: 900px; }
.film__head h2 {
  color: #fff;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .film__head h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); white-space: normal; }
}
.film__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  max-width: 1080px; margin-inline: auto;
}
.film__frame > video, .film__frame > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}
.film__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(47,158,120,.22), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%);
}
.film__title {
  color: #fff;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  letter-spacing: .03em;
  text-align: center;
  padding-inline: var(--s-3);
  text-shadow: 0 2px 24px rgba(6,32,24,.5);
}
.film__play {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  backdrop-filter: blur(4px);
}
.film__play svg { width: 34px; height: 34px; margin-left: 4px; }
.film__label {
  font-family: var(--mono); font-size: var(--fs-0);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width: 760px) {
  .film__play { width: 64px; height: 64px; }
  .film__play svg { width: 26px; height: 26px; }
}

/* ============================================================
   THE FIVE THRONES — museum-plate gallery (signature motif)
   ============================================================ */
.gallery { background: var(--paper); }
.gallery .head { max-width: 70ch; }
.chapter { padding-block: var(--s-7); border-top: var(--line-thin); }
.chapter:first-of-type { border-top: none; padding-top: var(--s-4); }
.chapter__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.chapter__numeral { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; color: var(--violet-bg); -webkit-text-stroke: 1.5px var(--purple-ink); }
.chapter__title-wrap .eyebrow { color: var(--purple-ink); }
.chapter__title { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: var(--fs-giant); color: var(--ink); }
.chapter__intro { max-width: 60ch; color: var(--gray); font-size: var(--fs-1); line-height: 1.6; margin-bottom: var(--s-5); }

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.plates--3 { grid-template-columns: repeat(3, 1fr); }
.plates--4 { grid-template-columns: repeat(4, 1fr); }
.plate-pair .frame { aspect-ratio: 3/4; margin-bottom: 0; }
.plate-pair .frame img { transition: transform var(--dur-slow) var(--ease); }
.plate-pair:hover .frame img { transform: scale(1.04); }
/* Hatshepsut is a tall kneeling statue — bias the crop up so the head/headdress isn't cut off */
.plate-pair .frame img[src*="hatshepsut.jpg"] { object-position: 50% 8%; }

.chapter__quote {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--line-thin);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-3);
  max-width: 50ch; color: var(--ink); line-height: 1.4;
}
.chapter__quote cite { display: block; margin-top: var(--s-2); font-family: var(--body); font-style: normal; font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }

.chapter__callout {
  margin-top: var(--s-4); background: var(--rose-bg); color: var(--rose-ink);
  border-radius: var(--r); padding: var(--s-3) var(--s-4); font-size: var(--fs-1); line-height: 1.6; max-width: 60ch;
}
.chapter__callout strong { font-weight: 700; }

/* Queen chapter gets extra emphasis */
.chapter--queen .chapter__numeral { color: var(--violet-bg); -webkit-text-stroke: 1.5px var(--purple); }
.chapter--queen .plates { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .plates--3, .plates--4, .chapter--queen .plates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* include bare .plates: auto-fit minmax can mis-size under the
     mobile-Chrome overflow/zoom pass, so pin every variant to 1fr */
  .plates, .plates--2, .plates--3, .plates--4, .chapter--queen .plates { grid-template-columns: 1fr; }
}
.plate-pair { min-width: 0; }

/* ---------- where are you now (stage picker) ---------- */
.stages { background: var(--violet-bg); }
.stage-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); }
.stage-card {
  background: var(--paper); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stage-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(12,53,42,.14); }
.stage-card .frame { aspect-ratio: 3/4; border-radius: 0; }
.stage-card__body { padding: var(--s-3); flex: 1; display: flex; flex-direction: column; }
.stage-card__num { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--purple-ink); letter-spacing: .08em; }
.stage-card__role { font-family: var(--display); font-weight: 600; font-size: var(--fs-1); margin: .3em 0 .5em; }
.stage-card__line { font-size: .82rem; color: var(--gray); line-height: 1.5; flex: 1; }
.stage-cards + .center-cta, .stages .carousel + .center-cta { margin-top: var(--s-5); text-align: center; }
@media (max-width: 980px) { .stage-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .stage-cards { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   SHARED CAROUSEL COMPONENT
   Wrap any existing grid row (e.g. .stage-cards, .plates) to turn it
   into a horizontal, arrow-navigable, scroll-snap carousel WITHOUT
   touching that row's own grid rules — this block simply comes later
   in the cascade and wins on the shared classes when `.carousel__track`
   is added alongside the row's existing class.

   Markup contract:
   <div class="carousel" data-carousel>
     <button class="carousel__btn carousel__btn--prev" data-carousel-prev aria-label="Previous">…svg…</button>
     <button class="carousel__btn carousel__btn--next" data-carousel-next aria-label="Next">…svg…</button>
     <div class="EXISTING-ROW-CLASS carousel__track" data-carousel-track>
       …unchanged item markup…
     </div>
   </div>
   JS auto-inits every [data-carousel] found on the page — see main.js.
   ============================================================ */
.carousel { position: relative; }
.carousel__track {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 auto; scroll-snap-align: start; }
.carousel__track > .stage-card { width: min(280px, 78vw); }
.carousel__track > .plate-pair { width: min(260px, 72vw); }
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid rgba(12,53,42,.14);
  box-shadow: 0 10px 24px rgba(12,53,42,.16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; color: var(--ink); padding: 0;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel__btn:hover { background: var(--mint-bg); }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__btn--prev { left: -23px; }
.carousel__btn--next { right: -23px; }
.carousel__btn.is-disabled { opacity: .3; pointer-events: none; }
.chapter--queen .carousel__btn--prev, .chapter--queen .carousel__btn--next { top: 50%; }
@media (max-width: 760px) {
  .carousel__btn { width: 44px; height: 44px; }
  .carousel__btn--prev { left: 2px; }
  .carousel__btn--next { right: 2px; }
  .carousel__btn svg { width: 16px; height: 16px; }
}

/* ---------- the path ---------- */
.path__list { display: flex; flex-direction: column; }
.path__step { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--s-4); align-items: center; padding-block: var(--s-4); border-top: var(--line-thin); }
.path__step:last-child { border-bottom: var(--line-thin); }
.path__step-num { font-family: var(--loud); font-size: var(--fs-4); color: var(--violet-bg); -webkit-text-stroke: 1px var(--purple-ink); }
.path__step h3 { font-family: var(--display); font-size: var(--fs-3); margin-bottom: .3em; }
.path__step p { color: var(--gray); max-width: 56ch; }
.path__step-tag { font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .5em 1em; border-radius: 999px; background: var(--sky-bg); color: var(--sky-ink); white-space: nowrap; }
@media (max-width: 700px) {
  .path__step { grid-template-columns: 1fr; gap: var(--s-1); }
  .path__step-tag { justify-self: start; }
}

/* ---------- how it works (channels) ---------- */
.channels { background: var(--ink); color: #fff; }
.channels .eyebrow { color: #99f6e4; }
.channels .head p { color: rgba(255,255,255,.68); }
.channels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.channel { position: relative; min-height: 460px; display: flex; align-items: flex-end; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.14); border-radius: var(--r); overflow: hidden; }
.channel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-slow) var(--ease); }
.channel:hover .channel__img { transform: scale(1.04); }
.channel__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,8,28,.05) 0%, rgba(10,8,28,.35) 45%, rgba(10,8,28,.94) 100%); }
.channel__body { position: relative; z-index: 2; padding: var(--s-3); }
.channel__pct { font-family: var(--loud); font-size: var(--fs-3); color: #5eead4; }
.channel h3 { font-family: var(--display); font-size: var(--fs-2); margin: .3em 0 .4em; color: #fff; }
.channel p { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.55; }
.channels__cadence { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); text-align: center; border-top: 1.5px solid rgba(255,255,255,.14); padding-top: var(--s-4); }
.cadence-stat strong { display: block; font-family: var(--loud); font-size: var(--fs-3); color: #fff; }
.cadence-stat span { font-size: var(--fs-0); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 860px) { .channels__grid { grid-template-columns: 1fr; } .channels__cadence { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }

/* ---------- who this is for ---------- */
.forwho__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.principles { display: flex; flex-direction: column; gap: var(--s-3); }
.principle { display: flex; gap: var(--s-2); align-items: flex-start; }
.principle__icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--mint-bg); color: var(--mint-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.principle h4 { font-family: var(--display); font-size: var(--fs-1); margin-bottom: .2em; }
.principle p { color: var(--gray); font-size: .9rem; line-height: 1.55; }
/* principles as an arrow-nav carousel: the compound selector out-specifies
   .principles' own column layout regardless of cascade order, and each
   principle becomes a fixed-width card (icon above text) so the track
   steps cleanly one card at a time. */
/* the carousel lives in a 1fr grid column — grid items default to
   min-width:auto, which lets the column grow to the track's intrinsic
   width (all 5 cards side by side) and blow out the page. min-width:0
   restores the 1fr constraint so the track actually overflows+scrolls. */
.forwho__grid > * { min-width: 0; }
.principles.carousel__track { flex-direction: row; gap: var(--s-3); }
.carousel__track > .principle {
  flex-direction: column;
  width: min(300px, 74vw);
  padding: var(--s-3);
  border: 1.5px solid rgba(12,53,42,.10);
  border-radius: var(--r);
  background: var(--paper);
  gap: var(--s-2);
}
.criteria { background: var(--indigo-bg); border-radius: var(--r); padding: var(--s-4); }
.criteria h3 { font-family: var(--display); font-size: var(--fs-2); margin-bottom: var(--s-3); color: var(--indigo-ink); }
.criteria ul { display: flex; flex-direction: column; gap: var(--s-2); }
.criteria li { display: flex; gap: .7em; align-items: flex-start; font-size: .92rem; line-height: 1.55; }
.criteria li svg { width: 18px; height: 18px; color: var(--indigo-ink); flex: none; margin-top: .15em; }
@media (max-width: 860px) { .forwho__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ---------- roadmap ---------- */
.roadmap { background: var(--bg); }
.roadmap__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); position: relative; }
.roadmap__strip::before { content: ''; position: absolute; top: 28px; left: 8%; right: 8%; height: 1.5px; background: rgba(12,53,42,.18); z-index: 0; }
.roadmap__phase { position: relative; z-index: 1; }
.roadmap__phase .dot { width: 56px; height: 56px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; margin-bottom: var(--s-3); }
.roadmap__phase.is-active .dot { background: var(--ink); color: #fff; }
.roadmap__phase h3 { font-family: var(--display); font-size: var(--fs-2); margin-bottom: .3em; }
.roadmap__phase p { color: var(--gray); font-size: .9rem; line-height: 1.55; }
.roadmap__phase .tag { display: inline-block; margin-top: var(--s-2); font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .35em .9em; border-radius: 999px; background: var(--mint-bg); color: var(--mint-ink); }
@media (max-width: 760px) { .roadmap__strip { grid-template-columns: 1fr; gap: var(--s-5); } .roadmap__strip::before { display: none; } }

/* ---------- the movement (collage) ---------- */
/* two closed bands — top: 3+3 cols, bottom: 2+2+2 cols — so every span
   sums to a full 6-col row and the collage is a sealed rectangle with no
   orphan cells or ragged margins. Every tile is edge-to-edge in its cell. */
.movement__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: var(--s-2); margin-bottom: var(--s-5); }
.movement__grid .frame:nth-child(1) { grid-column: span 3; grid-row: span 3; }
.movement__grid .frame:nth-child(2) { grid-column: span 3; grid-row: span 3; }
.movement__grid .frame:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.movement__grid .frame:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.movement__grid .frame:nth-child(5) { grid-column: span 2; grid-row: span 2; }
/* portraits in wide tiles: bias each crop so faces stay in frame —
   tuned per photo, one blanket value can't serve five compositions */
.movement__grid .frame:nth-child(1) img { object-position: 50% 22%; } /* warrior: Princess Elizabeth, ATS 1945 — face+shoulders, keep top */
.movement__grid .frame:nth-child(2) img { object-position: 50% 38%; } /* magician: modern woman in profile, hands raised — center on eyes/nose */
.movement__grid .frame:nth-child(3) img { object-position: 50% 15%; } /* lover: Monroe seated portrait — wide tile, keep face */
.movement__grid .frame:nth-child(4) img { object-position: 50% 20%; } /* princess: Elizabeth writing at desk */
.movement__grid .frame:nth-child(5) img { object-position: 50% 18%; } /* queen: Elizabeth II coronation, crown must stay in frame */
.movement__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); border-top: var(--line-thin); padding-top: var(--s-4); }
.movement__stats .stat strong { display: block; font-family: var(--loud); font-size: var(--fs-4); color: var(--purple-ink); }
.movement__stats .stat span { font-size: var(--fs-0); color: var(--gray); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) {
  .movement__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .movement__grid .frame:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  /* 5 tiles on a 2-col grid: let the last span both cols so the
     collage closes as a rectangle instead of leaving a hole */
  .movement__grid .frame:nth-child(5) { grid-column: span 2; }
  .movement__stats { grid-template-columns: 1fr; gap: var(--s-2); text-align: center; }
}

/* ---------- become a mentor ---------- */
.mentor { background: var(--ink); color: #fff; }
.mentor .eyebrow { color: #ddd6fe; }
.mentor .head p { color: rgba(255,255,255,.68); }
.mentor__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin-top: var(--s-5); }
.mentor-card { text-align: center; }
.mentor-card .frame { aspect-ratio: 1/1; border-radius: 50%; margin-bottom: var(--s-2); }
/* circular 1:1 crop clips tall portraits differently per photo — bias toward the face */
.mentor-card:nth-child(1) .frame img { object-position: 50% 15%; } /* princess: Elizabeth writing at desk */
.mentor-card:nth-child(2) .frame img { object-position: 50% 12%; } /* warrior: Princess Elizabeth, ATS 1945 */
.mentor-card:nth-child(3) .frame img { object-position: 50% 10%; } /* lover: Monroe seated portrait */
.mentor-card:nth-child(4) .frame img { object-position: 50% 12%; } /* magician: modern woman in profile */
.mentor-card:nth-child(5) .frame img { object-position: 50% 10%; } /* queen: Elizabeth II coronation */
.mentor-card h4 { font-family: var(--display); font-size: var(--fs-0); letter-spacing: .04em; color: rgba(255,255,255,.9); }
.mentor__note { margin-top: var(--s-5); text-align: center; color: rgba(255,255,255,.55); font-size: var(--fs-0); max-width: 52ch; margin-inline: auto; }
@media (max-width: 760px) { .mentor__strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- voices ---------- */
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.voice-card { background: var(--paper); border: var(--line-thin); border-radius: var(--r); padding: var(--s-4); display: flex; flex-direction: column; }
.voice-card svg { width: 24px; height: 24px; color: var(--purple); margin-bottom: var(--s-2); }
.voice-card p.quote { font-size: var(--fs-1); line-height: 1.6; color: var(--ink); flex: 1; margin-bottom: var(--s-3); }
.voice-card__who { display: flex; align-items: center; gap: .7em; padding-top: var(--s-2); border-top: var(--line-thin); }
.voice-card__initial { width: 38px; height: 38px; border-radius: 50%; background: var(--violet-bg); color: var(--violet-ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; flex: none; }
.voice-card__who strong { display: block; font-size: .9rem; }
.voice-card__who span { display: block; font-size: .78rem; color: var(--gray); }
@media (max-width: 860px) { .voices__grid { grid-template-columns: 1fr; } }

/* ---------- final CTA ---------- */
.final-cta { text-align: center; position: relative; overflow: hidden; }
.final-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(11,110,69,.10), transparent 65%);
}
.final-cta .eyebrow { justify-content: center; display: flex; }
.final-cta h2 { font-size: var(--fs-hero); margin-block: var(--s-3); }
.final-cta p { color: var(--gray); font-size: var(--fs-2); max-width: 50ch; margin-inline: auto; margin-bottom: var(--s-4); }
.final-cta__ctas { display: flex; justify-content: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.final-cta__tag { font-family: var(--mono); font-size: var(--fs-0); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }

/* ---------- footer ---------- */
.footer { border-top: var(--line-thin); padding-block: var(--s-5); }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.footer .brand { opacity: .85; }
.footer nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.footer nav a { font-size: var(--fs-0); color: var(--gray); display: inline-flex; align-items: center; min-height: 44px; }
.footer nav a:hover { color: var(--ink); }
.footer small { display: block; margin-top: var(--s-2); color: var(--gray); font-size: .72rem; width: 100%; }