/* NIDARI NUTRITION — home.css
   Homepage sections only. Load after base.css. */

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(20px, 5vw, 60px));
  padding-bottom: clamp(40px, 8vw, 90px);
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 88% 12%, rgba(20, 125, 140, .07), transparent 60%),
    radial-gradient(900px 700px at -4% 100%, rgba(63, 143, 92, .07), transparent 58%),
    var(--paper);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46fr 54fr;   /* content left, cards right */
  gap: clamp(16px, 2.4vw, 40px);      /* tighter — close the mid-hero gap */
  align-items: stretch;               /* card column matches the left's height */
}

/* LEFT — content */
.hero__left { display: flex; flex-direction: column; min-width: 0; }

/* RIGHT — card deck fills the full left-column height; tagline floats above it */
.hero__right { position: relative; display: flex; flex-direction: column; min-width: 0; }
.hero__right .stack { flex: 1 1 auto; min-height: 0; }

/* script tagline sits ABOVE the card (out of flow so it doesn't shorten it) */
.hero__tagline {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin-bottom: 14px;
  text-align: center;
  white-space: nowrap;
  font-family: var(--script);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.15;
  color: var(--peacock-gold);
}
.hero__tagline-burst,
.hero__tagline-heart {
  display: inline-block;
  vertical-align: middle;
  width: 1em; height: 1em;
  color: var(--peacock-gold);
  overflow: visible;
}
.hero__tagline-burst { margin-right: .32em; }
.hero__tagline-heart { margin-left: .32em; }
/* At phone widths the nowrap script line (text + burst + heart) is wider than the
   viewport at its 1.3rem floor — the trailing heart landed ~40px off-screen and
   dragged the page's scroll width with it. Scale with the viewport instead:
   5.4vw = 17.3px at 320px, meeting the 1.3rem cap again by ~430px. */
@media (max-width: 430px) {
  .hero__tagline { font-size: clamp(.95rem, 5.4vw, 1.3rem); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--herb-deep);
  background: var(--herb-wash);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  /* gentle breathing glow so the enrolling pill quietly draws the eye */
  animation: heroPillGlow 3.2s var(--ease-soft) infinite;
}
@keyframes heroPillGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,160,94,0); }
  50%      { box-shadow: 0 0 0 5px rgba(53,160,94,.12); }
}
.hero__eyebrow-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--herb-bright);
}
/* expanding live-status ping */
.hero__eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--herb-bright);
  animation: heroDotPing 2s var(--ease-out) infinite;
}
@keyframes heroDotPing {
  0%   { transform: scale(1); opacity: .6; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* credentials strap beneath the enrolling pill — gold, spaced caps */
.hero__creds {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--peacock-gold);
  margin-bottom: 20px;
}

.hero__wordmark {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--herb);
  margin-bottom: 16px;
  line-height: 1.5;
}
.hero__wordmark span {
  display: block;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  font-size: .8rem;
}

.hero__display {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(3rem, 7vw, 5rem);   /* ~80px cap, per spec */
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
  color: var(--ink);
}
.hero__display span { display: block; }
.hero__display-green { color: var(--herb); }
.hero__display-accent {
  display: inline-block;
  position: relative;
  font-family: var(--script);
  font-weight: 400;
  font-style: normal;
  color: var(--terra);
  /* Great Vibes reads delicate + small — size up generously and give the
     ascenders/descenders and the flourish room to breathe */
  font-size: 1.2em;
  line-height: 1.08;
  letter-spacing: 0;
  margin-top: 0.04em;
}

/* small hand-drawn heart, lifted to the top-right of "You." */
.hero__accent-heart {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.02em;
  position: relative;
  top: -0.5em;            /* just above the cap of "You." */
  color: var(--peacock-gold);
  overflow: visible;
}

.hero__treat {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 22px;
}
.hero__treat-word {
  color: var(--terra);
  font-style: italic;
  font-weight: 700;
}

.hero__copy {
  font-size: clamp(1.28rem, 1.9vw, 1.52rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  max-width: min(48ch, 100%);
  margin-bottom: 30px;
}
.hero__copy em { color: var(--herb-deep); font-style: normal; font-weight: 700; }

/* closing line — flowing script, gold sparkles on both ends, gold underline */
.hero__copy-accent {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  position: relative;
  white-space: nowrap;              /* keep the whole line together */
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.1;
  color: var(--ink);
  margin-top: 0.25em;
}
.hero__copy-accent-text {
  position: relative;
  padding-bottom: .12em;
}
/* hand-drawn gold underline swash beneath just the words */
.hero__copy-accent-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent, var(--peacock-gold) 12%, var(--peacock-gold) 88%, transparent);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* Book-a-call pill — calendar icon + two-line label, soft gold outline */
.hero__book {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px 14px 18px;
  border-radius: 100px;
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--peacock-gold) 55%, var(--line));
  box-shadow: var(--sh-sm);
  color: var(--ink);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
    border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.hero__book:hover {
  transform: translateY(-2px);
  border-color: var(--peacock-gold);
  background: var(--white);
  box-shadow: var(--sh-md);
}
.hero__book-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--herb);
  background: var(--herb-wash);
}
.hero__book-icon svg { width: 22px; height: 22px; }
.hero__book-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero__book-text strong {
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__book-text span {
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

/* wrapper handles centring (plain CSS) so Framer's inline transform on the
   inner <p> can't wipe the translateX — pinned centre-bottom of the hero */
.hero__micro-pos {
  position: absolute;
  bottom: clamp(20px, 4vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero__micro {
  text-align: center;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  /* soft paper backdrop so it stays crisp over the plume lines */
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 8px 18px;
  border-radius: 100px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__left { order: 1; }
  .hero__right { order: 2; }
  .hero__treat-word { white-space: normal; }
  /* on stacked layouts, drop it back into flow so it can't overlap the cards */
  .hero__micro-pos {
    position: static;
    transform: none;
    margin: 4px auto 0;
  }
  .hero__micro { white-space: normal; }
}
@media (max-width: 480px) {
  .hero__display { font-size: clamp(2.6rem, 14vw, 3.6rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   STORY CARD
   ═══════════════════════════════════════════════════════════════════ */
.story {
  position: relative;
  width: 100%;
  height: 100%;              /* fill the deck (which sets the aspect ratio) */
  aspect-ratio: 100 / 70;    /* wider + shorter card */
  perspective: 1600px;
  outline: none;
}
.story__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}
.story--flipped .story__inner { transform: rotateY(180deg); }

.story__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 30px 60px -34px rgba(22, 49, 31, .5),
    0 6px 18px -10px rgba(22, 49, 31, .2);
  overflow: hidden;
}

/* ── AFTER face: photo panel + details panel ─────────────────── */
.story__after { display: flex; }

.story__photo {
  position: relative;
  flex: 0 0 56%;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tier-wash), var(--white));
}
.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.story__photo-initial {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: 3.2rem;
  color: var(--tier-deep);
  opacity: .75;
}
/* tier pill sits on the photo */
.story__tier {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tier);
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}

.story__detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vw, 24px);
}

.story__badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--herb-deep);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.story__name {
  align-self: center;
  text-align: center;
  font-family: var(--heading);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: var(--wt-heading);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.story__tag {
  align-self: center;
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tier-deep);
  margin: 3px 0 14px;
}

.story__results {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.7vw, 17px);
  margin-bottom: 18px;
}
.story__results li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(.86rem, 1.15vw, .96rem);
  font-weight: 500;
  color: var(--body);
  line-height: 1.28;
}
.story__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--tier-deep);
  /* glossy, pillowy raised chip */
  background: radial-gradient(120% 120% at 32% 24%, #ffffff, var(--paper-2) 118%);
  box-shadow:
    0 4px 10px -3px rgba(22, 49, 31, .2),
    0 2px 4px -2px rgba(22, 49, 31, .12),
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -3px 6px rgba(22, 49, 31, .05) inset;
}
.story__ico svg { width: 20px; height: 20px; }

.story__quote {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin-top: auto;
  padding: 12px 0 0 18px;
  border-top: 1px solid var(--line);
}
.story__quote::before {
  content: "\201C";
  position: absolute;
  left: -2px; top: 6px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--tier);
  opacity: .5;
}

.story__flip-hint {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tier-deep);
  margin-top: 12px;
}

/* ── BEFORE face ─────────────────────────────────────────────── */
.story__before {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 40px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .08), transparent 55%),
    var(--herb-deep);
  border-color: var(--herb-deep);
}
.story__before-label {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tier);
  font-weight: 700;
  margin-bottom: 14px;
}
.story__before-text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: #f2f7ea;
  font-style: italic;
}
.story__before .story__flip-hint { color: rgba(255, 255, 255, .7); margin-top: 20px; }

/* ── Narrow cards ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .story { aspect-ratio: 100 / 96; }
  .story__photo { flex-basis: 38%; }
  .story__ico { width: 34px; height: 34px; }
  .story__ico svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STORY STACK
   ═══════════════════════════════════════════════════════════════════ */
.stack {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  /* run as tall as the column so the card matches the left text block */
  display: flex;
  flex-direction: column;
  --card-w: min(
    540px,
    100%
  ); /* front-card width — deck, dots + arrows track it */
}
.stack__badge {
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 40;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 100px;
}

/* the deck sizes the FRONT card and hugs the left so the single peek has room
   to poke out on the right (its details column). It grows to fill the column
   height (bounded) so the card runs long, like the left text block. */
.stack__deck {
  position: relative;
  width: var(--card-w);
  margin-right: auto; /* left-align the front card in the column */
  flex: 0 0 auto; /* don't stretch — height follows the aspect ratio */
  aspect-ratio: 100 / 120; /* card height, relative to width; higher = taller */
  overflow: visible; /* let the peek card show beyond the front */
}
.stack__card {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}
.stack__card.is-front {
  cursor: grab;
}
.stack__card.is-front:active {
  cursor: grabbing;
}

/* stage — holds the deck plus the two flanking arrows */
.stack__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* arrows sit on the left and right sides of the front card, vertically centred */
.stack__arrow {
  position: absolute;
  top: 50%;
  z-index: 40;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--herb);
  box-shadow: var(--sh-md, 0 8px 24px -10px rgba(22, 49, 31, 0.25));
  transition:
    transform 0.25s var(--ease-out),
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.stack__arrow svg {
  width: 18px;
  height: 18px;
}
.stack__arrow--prev {
  /* sit fully outside the card's left edge */
  left: -60px;
  transform: translateY(-50%);
}
.stack__arrow--prev svg {
  transform: rotate(180deg);
}
.stack__arrow--next {
  /* sit just past the right edge of the PEEK card. The peek is one card-width
     wide, offset 42% (see layoutFor in StoryStack.jsx), so its right edge is at
     card-w * 1.42 */
  left: calc(var(--card-w) * 1.42 - 34px);
  transform: translateY(-50%);
}
.stack__arrow:hover {
  background: var(--herb);
  border-color: var(--herb);
  color: #fff;
}
.stack__arrow--prev:hover {
  transform: translateY(-50%) scale(1.06);
}
.stack__arrow--next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* controls: dots only, centred under the front card */
.stack__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  width: var(--card-w);
  margin-right: auto;
  flex-shrink: 0;
}

.stack__dots {
  display: flex;
  gap: 8px;
}
.stack__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all 0.35s var(--ease-out);
}
.stack__dot.is-active {
  width: 24px;
  border-radius: 100px;
  background: var(--herb);
}

/* on narrow viewports there's no room to sit fully outside — tuck the arrows
   just inside the card edges instead of letting them clip off-screen */
@media (max-width: 620px) {
  .stack__arrow {
    width: 40px;
    height: 40px;
  }
  .stack__arrow--prev {
    left: 8px;
  }
  .stack__arrow--next {
    left: auto;
    right: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ATLAS INTRO
   ═══════════════════════════════════════════════════════════════════ */
/* Diet Atlas teaser — dark section: left copy, right 3D globe + badge, stat rail. */
/* ═══════════════════════════════════════════════════════════════════
   ATLAS — the real map, not a poster of one
   The previous teaser was a stock photo behind a badge and six stat
   chips: nothing to look at, nothing to do, and it did not say what
   the Atlas is. This draws the actual origin map (same coastline mask
   and coordinates the Atlas itself uses) and gives one clear way in.
   ═══════════════════════════════════════════════════════════════════ */
.atlasmap {
  /* The section used to sit on the same cream as the sections above and below
     it, so nothing announced a new zone before the eye reached the map — which
     is why it read as polite rather than arresting. It is now the one dark
     band on a cream page, in the peacock family the token block already
     reserved for the Atlas (--peacock-deep, previously defined and never
     used anywhere). Every text pair below is measured, not eyeballed. */
  background: linear-gradient(168deg, #0e4257 0%, var(--peacock-deep) 46%, #071c26 100%);
  color: #fff6e5;
  overflow: hidden;
  position: relative;
}
.atlasmap::before {          /* faint plume glow, keeps the flat fill from deadening */
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 70% at 22% 0%, rgba(20,125,140,.34), transparent 70%);
  pointer-events: none;
}
.atlasmap > .wrap { position: relative; z-index: 1; }
.atlasmap__head {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: end; gap: clamp(20px, 3vw, 56px);
}
.atlasmap__head-r { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
/* --peacock-gold measures only 3.42:1 where the plume glow lightens the top
   of the band; this step holds 5.22:1 at that worst point, 11.09:1 at the
   darkest. Checked against the lightest ground, not the average. */
.atlasmap .eyebrow { color: #e8cb8a; }
.atlasmap__star { color: #e8cb8a; }
/* the global svg{display:block} was dropping this star onto its own line above the eyebrow */
.atlasmap__star { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
.atlasmap__title {
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: var(--fs-h2); line-height: 1.06; color: #fff6e5;   /* 11.10:1 */
  margin: 14px 0 0; max-width: 20ch;
}
.atlasmap__title em {
  font-style: italic; font-family: var(--serif); font-weight: 600;
  color: #e8cb8a;                                                /* 5.22:1 at the band's lightest point */
}
.atlasmap__lead {
  margin: 0; max-width: 58ch;
  color: rgba(255, 246, 229, .84);                               /* 8.29:1 */
  font-size: 1.06rem; line-height: 1.6;
}

.atlasmap__figure { margin: clamp(26px, 3.4vw, 42px) 0 0; }
.atlasmap__stage {
  position: relative;
  aspect-ratio: 3 / 1;
  border-radius: 20px;
  overflow: hidden;
  /* deeper than the band it now sits on, so the map reads as a recessed
     panel rather than dissolving into the section behind it */
  background:
    radial-gradient(120% 150% at 50% 0%, #0a2e3d 0%, #071f2a 55%, #04141c 100%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(203, 161, 74, .30);
}
/* The land grid is 300x100 cells — natively 3:1. Any other ratio spaces
   the rows further apart than the columns and the dots smear into
   horizontal streaks (they did, at 3/2 and 1/1). So the ratio is fixed
   and small screens get width instead: the figure goes full-bleed. */
@media (max-width: 700px) {
  .atlasmap__figure {
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter) * 2);
  }
  .atlasmap__stage { border-radius: 0; }
  /* the base .atlasmap__caption rule is declared later in this file, so it
     needs the extra specificity to win — a plain class here lost and the
     caption sat flush against the screen edge inside the full-bleed figure */
  .atlasmap__figure .atlasmap__caption { margin-inline: var(--gutter); }
  .atlasmap__pin { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
  .atlasmap__pin i { inset: 4.5px; }
  .atlasmap__chip { left: 10px; top: 9px; font-size: .66rem; padding: 5px 10px; }
}

#atlasMiniLand { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlasmap__pins { position: absolute; inset: 0; }
.atlasmap__pin {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
}
.atlasmap__pin i {
  position: absolute; inset: 7px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px 1px var(--c), 0 0 18px 4px color-mix(in srgb, var(--c) 34%, transparent);
  transition: inset .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.atlasmap__pin:hover i, .atlasmap__pin:focus-visible i {
  inset: 4px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 20px 6px var(--c);
}
.atlasmap__pin:focus-visible { outline: none; }

.atlasmap__chip, .atlasmap__readout {
  position: absolute; z-index: 3;
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 246, 228, .78);
  background: rgba(8, 34, 45, .62);
  border: 1px solid rgba(203, 161, 74, .28);
  padding: 7px 13px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.atlasmap__chip { left: 14px; top: 13px; display: inline-flex; align-items: center; gap: 8px; }
/* The top-left corner is where the Mayo Clinic / Bethesda origin labels land,
   and the chip was sitting on top of them. Nothing else uses the bottom-left. */
.atlasmap__chip--btm { top: auto; bottom: 13px; }
.atlasmap__chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--peacock-gold); box-shadow: 0 0 8px var(--peacock-gold); }
.atlasmap__readout {
  right: 14px; bottom: 13px; letter-spacing: .04em; text-transform: none;
  font-size: .84rem; color: #fff6e4; opacity: 0; transition: opacity .2s;
}
.atlasmap__readout.is-on { opacity: 1; }
.atlasmap__caption { margin: 12px 2px 0; font-size: .88rem; color: rgba(255,246,229,.72); }  /* 6.55:1 on the band */

.atlasmap__foot {
  margin-top: clamp(20px, 2.6vw, 30px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
}
.atlasmap__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.atlasmap__legend li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(255,246,229,.88); }  /* 8.98:1 */
.atlasmap__legend .sw { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px color-mix(in srgb, var(--c) 60%, transparent); flex: none; }
.atlasmap__legend b { font-weight: 600; color: #fff6e5; }
.atlasmap__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.atlasmap__note { font-size: .88rem; color: rgba(255,246,229,.72); }

/* Both CTAs now show on wide screens. They used to be mutually exclusive
   because the section was one screen tall and they would have been visible
   together; the rail, six cards and map put well over a thousand pixels
   between them, so hiding the lower one left a long scroll with no way on. */
.atlasmap__cta--top { display: none; }
@media (min-width: 1100px) { .atlasmap__cta--top { display: inline-flex; } }
@media (max-width: 1099px) {
  .atlasmap__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 640px) {
  .atlasmap__foot { flex-direction: column; align-items: stretch; }
  .atlasmap__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .atlasmap__foot .atlasmap__cta { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   ATLAS — proof rail + the six featured entries
   Added 2026-09-06. The section was a headline over one wide, mostly
   empty map: no imagery on a page whose hero is photographic, no
   numbers, and 64 anonymous dots that only name themselves on hover —
   which does not exist on a phone. These two blocks carry the section
   now and the map became the atmosphere behind them.

   EVERY NUMBER IN .atlasrail IS COUNTED FROM THE ATLAS DATA.
   64 records; origins on FIVE continents (there is no South American
   origin in the set); oldest tradition dated ~1200 BCE. Marketing
   drafts have said "6 continents / 10 regions" — both are unsupported.
   Re-count diets-data.js before changing any of these.
   ═══════════════════════════════════════════════════════════════════ */

/* Eyebrow gets the flanking hairline the brand uses on its posters. The
   rule is a flex sibling, not a ::after, so it can never overlap the text. */
.atlasmap__eyebrow { display: flex; align-items: center; gap: 12px; }
.atlasmap__eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 190px;
  background: linear-gradient(90deg, rgba(232,203,138,.55), rgba(232,203,138,0));
}

/* The gold italic is the section's one display moment — the poster device.
   It was set at the same size as the sans around it, so it read as an
   afterthought rather than the accent. */
.atlasmap__title em {
  /* Its own line: with the em inline the question mark kept wrapping alone
     onto a third line ("...made for / you?"). The "?" now lives inside the
     em so the italic phrase can never be split from its punctuation. */
  display: block;
  font-size: 1.14em;
  line-height: .95;
  letter-spacing: -.005em;
}

/* ── proof rail ──────────────────────────────────────────────────── */
.atlasrail {
  list-style: none; margin: clamp(30px, 3.6vw, 46px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(203, 161, 74, .26);
  border-bottom: 1px solid rgba(203, 161, 74, .26);
}
.atlasrail li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; padding: clamp(16px, 2vw, 22px) 10px;
  border-left: 1px solid rgba(203, 161, 74, .18);
}
.atlasrail li:first-child { border-left: 0; }
.atlasrail svg { width: 22px; height: 22px; color: #e8cb8a; margin-bottom: 4px; }
.atlasrail b {
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; color: #fff6e5;   /* 11.1:1 */
}
.atlasrail span {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 246, 229, .76);                                          /* 7.0:1 */
  max-width: 18ch;
}
/* 4 -> 2 columns, never a lone orphan on a row: 4 divides by both. */
@media (max-width: 760px) {
  .atlasrail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlasrail li:nth-child(odd) { border-left: 0; }
  .atlasrail li:nth-child(n+3) { border-top: 1px solid rgba(203, 161, 74, .18); }
}

/* ── the six featured entries ────────────────────────────────────── */
.apicks { margin-top: clamp(34px, 4.4vw, 58px); }
.apicks__head { display: flex; align-items: baseline; gap: 14px 20px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 22px); }
.apicks__h {
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: var(--fs-h3); line-height: 1.1; color: #fff6e5; margin: 0;
}
.apicks__sub { margin: 0; font-size: .98rem; color: rgba(255, 246, 229, .78); }

.apicks__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  /* Explicit counts that divide 6 exactly — an auto-fit track leaves a dead
     cell on the last row at some widths. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.apick__ev { white-space: nowrap; }
/* Two cards a row on a phone leaves ~160px — not enough for "MODERATE
   EVIDENCE". The heading directly above already says these are ratings. */
@media (max-width: 699px) { .apick__evw { display: none; } }
/* At 320px two cards a row leaves ~138px and even "MODERATE" nowrap ran 3px
   past it — clipped, not scrolled, because the root clips overflow-x. */
@media (max-width: 380px) { .apick__ev { font-size: .61rem; letter-spacing: .05em; padding: 4px 7px; } }
/* 6 across needs ~190px a card to keep the rating chip on one line; at iPad
   landscape (1194) that left 170px cards with two-line chips, so the row of
   six only starts at 1240. */
@media (max-width: 1239px) { .apicks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .apicks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.apick { min-width: 0; }
.apick__a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  background: rgba(255, 246, 229, .045);
  border: 1px solid rgba(203, 161, 74, .22);
  border-radius: 14px; overflow: hidden;
  transition: transform .28s var(--ease-out), border-color .28s var(--ease-out),
              background-color .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.apick__a:hover, .apick__a:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 62%, transparent);
  background: rgba(255, 246, 229, .075);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .8);
  outline: none;
}
.apick__a:focus-visible { box-shadow: 0 0 0 2px #fff6e5, 0 22px 40px -26px rgba(0,0,0,.8); }

.apick__shot { display: block; position: relative; }
/* The family colour reads as a hairline on the photo's foot, which is what
   ties a card to its pin on the map and to the legend under it. */
.apick__shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--c);
}
/* width/height attributes are on the img, so it needs height:auto or the
   aspect ratio is overridden and the whole grid row balloons. */
.apick__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

.apick__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 3px; padding: 12px 12px 13px; }

.apick__name {
  font-family: var(--heading); font-weight: var(--wt-strong);
  font-size: .98rem; line-height: 1.2; color: #fff6e5;                       /* 11.1:1 */
}
.apick__where {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: .8rem; line-height: 1.3; color: rgba(255, 246, 229, .8);        /* 7.5:1 */
}
.apick__where svg { width: 11px; height: 11px; flex: none; margin-top: 3px; color: var(--c); }
.apick__when {
  font-family: var(--serif); font-style: italic;
  font-size: .92rem; line-height: 1.3; color: #e8cb8a;                       /* 5.2:1 worst ground */
}
.apick__ev {
  /* margin-top:auto, not a fixed gap: "Traditional South Asian" runs to two
     lines while "DASH" runs to one, and without this the rating chips sat at
     different heights across the row. */
  align-self: flex-start; margin-top: auto; padding-top: 0;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
}
/* Ratings are the Atlas's own values. Strong reads green, moderate gold,
   mixed deliberately neutral — a limited rating must never be dressed up. */
.apick__ev[data-ev="strong"]   { background: rgba(127, 176, 105, .18); color: #bfe0a2; }
.apick__ev[data-ev="moderate"] { background: rgba(203, 161, 74, .18);  color: #edd097; }
.apick__ev[data-ev="mixed"]    { background: rgba(255, 246, 229, .09); color: rgba(255,246,229,.8); }
.apick__ev[data-ev="limited"]  { background: rgba(255, 246, 229, .09); color: rgba(255,246,229,.8); }

/* ── map pins that the cards can light up ────────────────────────── */
.atlasmap__pin--star i {
  inset: 5px;
  box-shadow: 0 0 0 1.5px rgba(255, 246, 229, .85), 0 0 10px 2px var(--c),
              0 0 22px 6px color-mix(in srgb, var(--c) 40%, transparent);
}
.atlasmap__pin.is-lit i {
  inset: 2px;
  box-shadow: 0 0 0 2px #fff6e5, 0 0 24px 8px var(--c);
}
.atlasmap__label {
  position: absolute; transform: translate(-50%, -100%);
  margin-top: -13px; white-space: nowrap; pointer-events: none;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 246, 229, .82); text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
/* Crete/Mecca and Mayo/Bethesda are close enough to collide when every label
   sits above its pin, so alternate sides down the route. */
.atlasmap__label--below { transform: translate(-50%, 0); margin-top: 13px; }
@media (max-width: 899px) { .atlasmap__label { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   DIET TIERS
   ═══════════════════════════════════════════════════════════════════ */
.tiers {
  overflow-x: clip;
  /* match the Hero backdrop — warm paper with soft teal/herb radial tints */
  background:
    radial-gradient(1100px 700px at 88% 12%, rgba(20, 125, 140, .07), transparent 60%),
    radial-gradient(900px 700px at -4% 100%, rgba(63, 143, 92, .07), transparent 58%),
    var(--paper);
}

/* heading accent — "different level of" in terracotta italic */
.tiers .sechead__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--terra);
}
/* let the two explicit lines hold without re-wrapping */
.tiers .sechead__title { max-width: none; }

/* ── Three tier cards, side by side ──────────────────────────── */
.tiergrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 52px);
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* it is a <button> — strip the UA chrome, keep the page's type */
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* header wash — accent gradient at the top, fading into the card */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-wash) 92%, #fff) 0%,
    color-mix(in srgb, var(--accent-wash) 40%, #fff) 30%,
    var(--white) 58%);
  /* every tier card carries its own accent border */
  border: 2px solid var(--accent);
  border-radius: 20px;
  overflow: hidden;                 /* clip the top colour bar to the rounded corners */
  padding: 34px 30px 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 26px 50px -28px color-mix(in srgb, var(--accent) 45%, rgba(22, 49, 31, .4)),
    0 6px 16px -10px rgba(22, 49, 31, .18);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 32px 58px -28px color-mix(in srgb, var(--accent) 52%, rgba(22, 49, 31, .5)),
    0 8px 20px -12px rgba(22, 49, 31, .18);
}

/* full-width colour bar across the top, tinted to the tier accent */
.tcard__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}

.tcard__top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.tcard__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* -deep on -wash measured 3.01:1 (amber) / 3.89:1 (sage); -ink clears AA */
  color: var(--accent-ink, var(--accent-deep));
}

/* tagline pill next to the tier label — filled by default, ghost on Light */
.tcard__badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  /* was var(--accent): white measured 2.46:1 on amber, 3.15:1 on sage,
     4.38:1 on terra — all under AA. The family's own -ink step fixes it
     without inventing a badge colour: 9.56 / 13.46 / 14.19:1. */
  background: var(--accent-ink, var(--accent));
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}

.tcard__name {
  /* a <span> inside the button, so the h1–h4 rule no longer reaches it */
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  line-height: 1.05;
  font-size: clamp(1.4rem, 1.8vw, 1.72rem);
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.tcard__blurb {
  font-size: .96rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0 0 24px;
}

/* ── Tier card: selection affordance ─────────────────────────────
   These three cards are the section's control. The "you can pick this"
   signal has to be readable BEFORE anything is picked — so every card
   carries a visible action line, and the chosen one swaps it for a
   state line. Selection is never carried by colour alone: the picked
   card gains a ring, a word ("Showing below") and aria-pressed. */

.tcard__best {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--accent-ink, var(--accent-deep));
  font-weight: 600;
  margin: 0 0 20px;
  padding-left: 13px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.tcard__foot {
  position: relative;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* default state — the invitation */
.tcard__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--accent-ink, var(--accent-deep));
}
.tcard__go-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.tcard__go-i { width: 15px; height: 15px; flex: none; transition: transform .3s var(--ease-out); }
.tcard:hover .tcard__go-i,
.tcard:focus-visible .tcard__go-i { transform: translateX(4px); }

/* chosen state — the confirmation */
.tcard__on {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-ink, var(--accent));
  padding: 8px 14px;
  border-radius: 100px;
}
.tcard__on-i { width: 13px; height: 13px; flex: none; }

.tcard.is-on .tcard__go { display: none; }
.tcard.is-on .tcard__on { display: inline-flex; }

/* unpicked cards step back so the picked one reads first, but stay
   fully legible — this is de-emphasis, not disabling. */
.tcard:not(.is-on) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 14px 30px -22px color-mix(in srgb, var(--accent) 40%, rgba(22, 49, 31, .35));
}
.tcard.is-on {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent),
    0 30px 56px -26px color-mix(in srgb, var(--accent) 55%, rgba(22, 49, 31, .5)),
    0 8px 20px -12px rgba(22, 49, 31, .18);
}
.tcard:focus-visible {
  outline: 3px solid var(--accent-ink, var(--accent));
  outline-offset: 3px;
}

/* Approach rows are only hidden once the JS control is actually wired.
   Without JS nothing is hidden and all three rows read normally. */
.js .tiers__rows[data-tiers-ready] > .tierrow[hidden] { display: none !important; }

/* ── Stacked approach rows (one per tier) ────────────────────── */
.tiers__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;                          /* row spacing = inter-card gap */
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: 20px;                /* bottom margin = inter-card gap */
  /* break out of .wrap to near-full width, leaving a small gap at each edge */
  --edge: clamp(16px, 3vw, 48px);
  width: calc(100vw - 2 * var(--edge));
  margin-left: calc(50% - 50vw + var(--edge));
}
.tierrow { scroll-margin-top: calc(var(--header-h) + 24px); }

/* food-card (illustrated, links to diet page or Atlas) — image-dominant */
.fcard {
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 80vw;
  height: 328px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* hover is detected on the stationary slot so the lift can't jitter the pointer */
.fcard-slot { flex: 0 0 auto; }
.fcard-slot:hover .fcard { transform: translateY(-5px); box-shadow: var(--sh-lg); }

/* header — dominant accent-gradient panel (~60% of the card) */
.fcard__art {
  position: relative;
  flex: 0 0 190px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 78%, #fff) 0%,
    var(--accent) 42%,
    var(--accent-deep) 100%);
  overflow: hidden;
}
.fcard__art::after {          /* soft sheen across the header, edge to edge */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 55%);
}
.fcard__icon { width: 68px; height: 68px; color: #fff; position: relative; z-index: 1; }
/* photo fills the art panel; the sheen (::after) + tag sit above it */
.fcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard__art-tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: rgba(255, 255, 255, .92);
  padding: 4px 9px;
  border-radius: 100px;
}

.fcard__body { display: flex; flex-direction: column; padding: 16px 20px 18px; flex: 1; min-height: 0; }
.fcard__name {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 1.18rem;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.fcard__arrow { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; transition: transform .3s var(--ease-out); }
.fcard:hover .fcard__arrow { transform: translateX(4px); }
.fcard__desc { font-size: .9rem; color: var(--body); line-height: 1.5; }

/* Every tier's approach cards carry a dark foot instead of paper, so the photo
   above has something to sit against.

   The foot is TIER-COLOURED — Light reads green, Medium bronze, Hard rust — so
   difficulty is legible at a glance instead of every card looking identical.

   These are not the raw accents. Dropping #7c9a64 / #d69a2e / #c05b3a straight in
   goes muddy and illegible; each ink is that tier's OWN hue taken down to ~15%
   lightness with saturation held up, so the three stay a family. Contrast with
   the white title is 13–15:1, and 8.3–9.2:1 for the 76%-white description —
   comfortably past WCAG AAA. See --sage-ink / --amber-ink / --terra-ink. */
.tierrow--light { --card-ink: var(--sage-ink); }
.tierrow--med   { --card-ink: var(--amber-ink); }
.tierrow--hard  { --card-ink: var(--terra-ink); }

.tierrow .fcard { border-color: var(--card-ink); }
.tierrow .fcard__body { background: var(--card-ink); }
.tierrow .fcard__name { color: #fff; }
.tierrow .fcard__desc { color: rgba(255, 255, 255, .76); }
/* the tier accent lifted toward white — raw terra and amber both go muddy
   against the deep green, this keeps the arrow tied to its tier and legible */
.tierrow .fcard__arrow { color: color-mix(in srgb, var(--accent) 62%, #fff); }

/* ── Section CTA — bold, modern invite panel ─────────────────── */
/* plain centred invite — no panel, straight on the page */
.tiers__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vw, 30px);
  margin: clamp(56px, 7vw, 96px) auto 0;   /* breathing room above, centred */
}
.tiers__cta-title {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: min(2.5rem, 5.4vw);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
/* This used to repaint the primary button gold (#ffb81c — a hex in no token,
   matching neither --amber nor --peacock-gold), with a comment claiming it
   matched the Explore-the-Atlas CTA. That CTA is green. The result was one
   button shape meaning two different things depending on the section, which
   is precisely the signal a single-conversion page cannot afford to blur.
   It now inherits .btn--primary like every other booking button. */
.tiers__cta .btn--primary {
  font-weight: 800;
  box-shadow:
    0 14px 30px -10px rgba(34, 114, 68, .45),
    0 0 0 6px rgba(34, 114, 68, .10);
}
.tiers__cta .btn--primary:hover {
  box-shadow:
    0 20px 42px -12px rgba(34, 114, 68, .55),
    0 0 0 8px rgba(34, 114, 68, .16);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tiergrid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; margin-top: clamp(24px, 4vw, 40px); }
}
/* too narrow to hold the line without overflowing — let it wrap again */
@media (max-width: 560px) {
  .tiers__cta-title { white-space: normal; font-size: clamp(1.6rem, 7vw, 2rem); max-width: 20ch; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════════════ */
.process { background: var(--paper); }
.process .sechead--center { max-width: none; }
.process .sechead__title { max-width: 20ch; margin-inline: auto; }
.process .sechead__intro { max-width: 62ch; }

/* ── The dated path ──────────────────────────────────────────────────
   A real external date beats a countdown: every cohort card on this page
   says "Starts 1 September", so the urgency is a fact rather than a
   widget. Four keys, the last one anchored. */
.ppath {
  list-style: none; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.ppath li { background: var(--white); padding: 16px clamp(14px, 1.6vw, 22px); }
.ppath__k {
  display: block; font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ppath__v { display: block; margin-top: 6px; font-size: .95rem; color: var(--ink); line-height: 1.35; }
.ppath .is-anchor { background: var(--herb-wash); }
.ppath .is-anchor .ppath__k { color: var(--herb-deep); }
.ppath .is-anchor .ppath__v { font-weight: 600; }
@media (max-width: 760px) { .ppath { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ppath { grid-template-columns: minmax(0, 1fr); } }
/* ── The journey: a four-step walkthrough ────────────────────────────
   Replaced .poffer / .pdoor / .ptrack (2026-09-06). That layout gave
   step 01 a big panel and squeezed steps 02–04 into a 200px spine, so
   three quarters of the process was read through a keyhole. Each step
   now gets the full stage — its own copy, photograph, duration and
   price — and the rail on the left keeps the whole path in view.

   DEGRADATION: panels are visible by default. home.js hides the three
   inactive ones only once it runs; if it never does, all four stack and
   the rail is made non-interactive rather than left as dead buttons.
   ─────────────────────────────────────────────────────────────────── */
.journey {
  margin-top: clamp(20px, 2.6vw, 32px);
  display: grid; grid-template-columns: minmax(0, 292px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: start;
}

/* ── left rail ──────────────────────────────────────────────────── */
.journey__rail {
  position: sticky; top: calc(var(--header-h) + 18px);
  padding-right: clamp(14px, 1.8vw, 26px);
  border-right: 1px solid var(--line);
}
.journey__kicker {
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.08; color: var(--ink);
}
.journey__sub {
  margin-top: 8px; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.jsteps { position: relative; margin-top: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 4px; }
/* the spine behind the numbers, stopping at the first and last centre */
.jsteps::before {
  content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px;
  width: 2px; background: var(--line-strong); border-radius: 2px;
}
.jstep {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start;
  gap: 14px; width: 100%; min-height: 60px; padding: 9px 10px 9px 0;
  background: none; border: 0; border-radius: 10px;
  font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: background-color .22s var(--ease-soft);
}
.jstep__n {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--herb-wash); color: var(--herb-deep);
  font-family: var(--heading); font-weight: var(--wt-heading); font-size: 1rem;
  /* The ring is the "you can pick this" signal, and it is on every step
     from the start — not only after one has been chosen. */
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: background-color .22s var(--ease-soft), color .22s var(--ease-soft),
              box-shadow .22s var(--ease-soft), transform .22s var(--ease-out);
}
.jstep__t { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.jstep__t b {
  font-family: var(--heading); font-weight: var(--wt-strong);
  font-size: 1.06rem; line-height: 1.22; color: var(--ink);
}
.jstep__t i { font-style: normal; font-size: .88rem; line-height: 1.35; color: var(--muted); }

.jstep:hover { background: var(--herb-wash); }
.jstep:hover .jstep__n { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--herb); }
.jstep:focus-visible { outline: 2px solid var(--herb); outline-offset: 2px; }

/* Active state carries THREE signals, not just colour: a filled dark
   terracotta disc, the name in that same terracotta, and a bar down the
   left edge — so it survives a colourblind reader and a greyscale print. */
.jstep.is-on::before {
  content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--terra-deep);
}
.jstep.is-on .jstep__n {
  background: var(--terra-deep); color: #fff;            /* 6.01:1 */
  box-shadow: 0 0 0 4px var(--terra-wash);
}
.jstep.is-on .jstep__t b { color: var(--terra-deep); }   /* 5.60:1 on paper */

/* Without JS the rail cannot filter anything, so it stops pretending to. */
html:not(.js) .jstep { cursor: default; pointer-events: none; }
html:not(.js) .jstep.is-on::before { display: none; }
html:not(.js) .jstep.is-on .jstep__n { background: var(--herb-wash); color: var(--herb-deep); box-shadow: 0 0 0 1px var(--line-strong); }
html:not(.js) .jstep.is-on .jstep__t b { color: var(--ink); }

.journey__sig {
  display: flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 2.6vw, 32px);
  font-family: var(--script); font-size: 1.5rem; line-height: 1.15; color: var(--herb);
}
.journey__sig svg { width: 26px; height: 26px; flex: none; color: var(--herb-bright); }

/* ── the panel ──────────────────────────────────────────────────── */
.journey__stage { min-width: 0; }
.jpan {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(20px, 2.6vw, 40px);
  /* The photographs are cut 4:5 for this column. A 3:2 crop stretched to the
     copy's height turned every one of them into a narrow vertical slice —
     Minahil's portrait became a face cropped at both ears. */
  align-items: start;
}
.jpan + .jpan { margin-top: clamp(34px, 4vw, 56px); }   /* only ever seen with JS off */
.jpan[hidden] { display: none; }
.jpan:focus { outline: none; }

.jpan__col { min-width: 0; }
.jpan__kick {
  display: flex; align-items: center; gap: 12px;
  font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-deep);
}
.jpan__rule { width: 34px; height: 2px; background: var(--terra-deep); border-radius: 2px; flex: none; }
.jpan__h {
  margin-top: 12px;
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.06; color: var(--herb-deep);
  max-width: 17ch;
}
.jpan__h em {
  font-style: italic; font-family: var(--serif); font-weight: 600;
  font-size: 1.1em; color: var(--herb);
}
.jpan__lead {
  margin-top: 14px; max-width: 54ch;
  font-size: 1.03rem; line-height: 1.6; color: var(--body);
}

.jpan__list { list-style: none; margin: clamp(18px, 2.2vw, 26px) 0 0; padding: 0; display: grid; gap: 12px; }
.jpan__list li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px;
  font-size: .97rem; line-height: 1.5; color: var(--body); max-width: 56ch;
}
.jpan__list svg {
  width: 36px; height: 36px; padding: 9px; border-radius: 50%;
  background: var(--herb-wash); color: var(--herb); box-sizing: border-box;
}

.jpan__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  margin-top: clamp(18px, 2.2vw, 26px); padding-top: 16px;
  border-top: 1px solid var(--line);
}
.jpan__dur { display: inline-flex; align-items: center; gap: 8px; font-size: .97rem; color: var(--body); }
.jpan__dur svg { width: 19px; height: 19px; color: var(--herb); flex: none; }
.jpan__price {
  font-family: var(--serif); font-style: italic; font-size: 1.32rem;
  color: var(--terra-deep);                                /* 5.60:1 on paper */
}
.jpan__price i { font-size: .74em; font-style: italic; color: var(--muted); margin-right: 3px; }
.jpan__price--free { font-family: var(--heading); font-style: normal; font-weight: var(--wt-heading); font-size: 1.2rem; }

.jpan__act { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: clamp(16px, 2vw, 22px); }
.jpan__alt { font-size: .94rem; color: var(--herb); text-underline-offset: 3px; }
.jpan__promise {
  margin-top: clamp(14px, 1.8vw, 18px); max-width: 56ch;
  font-size: .93rem; line-height: 1.55; color: var(--muted);
  padding-left: 14px; border-left: 2px solid var(--sage);
}

.jpan__fig { margin: 0; }
.jpan__fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  /* The sources are cut 4:5, so at this ratio nothing is cropped. Where the
     frame goes landscape below, the crop is taken from near the top — centred
     it sliced the heads off every one of these photographs. */
  object-position: 50% 18%;
  border-radius: 14px; box-shadow: var(--sh-md);
}
.jpan__fig figcaption { margin-top: 10px; font-size: .84rem; line-height: 1.4; color: var(--muted); }

.jpan__nav {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line);
}
.jnav {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 11px 20px; border-radius: 999px;
  font: inherit; font-size: .95rem; font-weight: var(--wt-strong);
  cursor: pointer; transition: background-color .22s var(--ease-soft), color .22s var(--ease-soft), transform .22s var(--ease-out);
}
.jnav svg { width: 16px; height: 16px; flex: none; }
.jnav--prev { background: none; border: 1px solid var(--line-strong); color: var(--body); }
.jnav--prev svg { transform: scaleX(-1); }
.jnav--prev:hover { background: var(--herb-wash); border-color: var(--herb); color: var(--herb-deep); }
.jnav--next { background: var(--herb-deep); border: 1px solid var(--herb-deep); color: #fff; }  /* 14.06:1 */
.jnav--next:hover { background: var(--herb); border-color: var(--herb); transform: translateY(-2px); }
.jnav:focus-visible { outline: 2px solid var(--herb); outline-offset: 2px; }

/* ── narrower: the figure drops under the copy ──────────────────── */
@media (max-width: 1180px) {
  .jpan { grid-template-columns: minmax(0, 1fr); }
  .jpan__fig { order: -1; }
  .jpan__fig img { aspect-ratio: 3 / 2; }
}

/* ── under 1000: the rail becomes a 2x2 header, never a scroller ──
   4 divides by 2, so no orphan tile on the second row, and the steps
   stay entirely on screen instead of running off the side. */
@media (max-width: 999px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); }
  .journey__rail {
    position: static; border-right: 0; padding-right: 0;
    padding-bottom: clamp(18px, 2.4vw, 24px); border-bottom: 1px solid var(--line);
  }
  .jsteps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .jsteps::before { display: none; }
  .jstep {
    grid-template-columns: 38px minmax(0, 1fr); gap: 11px; min-height: 62px;
    padding: 10px; border: 1px solid var(--line); background: var(--white);
  }
  .jstep__n { width: 38px; height: 38px; font-size: .95rem; }
  .jstep__t { padding-top: 2px; }
  .jstep__t b { font-size: .98rem; }
  .jstep__t i { display: none; }              /* the sub-line is the panel's job at this width */
  .jstep.is-on { border-color: var(--terra-deep); background: var(--terra-wash); }
  .jstep.is-on::before { display: none; }
  .journey__sig { display: none; }
}
@media (max-width: 520px) {
  .jsteps { grid-template-columns: minmax(0, 1fr); }
  .jstep__t i { display: block; }
  .jpan__fig img { aspect-ratio: 5 / 4; }
  .jpan__nav { flex-direction: column-reverse; align-items: stretch; }
  .jnav { justify-content: center; }
}

/* Reassurance as mechanisms. "Halal by default · Women-led · No commitment"
   was four adjectives; each of these states how the thing actually works. */
.pmech {
  list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 760px) { .pmech { grid-template-columns: minmax(0, 1fr); } }
.pmech li {
  padding: 16px 18px; border-radius: 14px; max-width: 58ch;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .95rem; line-height: 1.55; color: var(--body);
}
.pmech b { color: var(--ink); font-weight: 700; }
.pmech strong { color: var(--ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   COHORTS
   ═══════════════════════════════════════════════════════════════════ */
.cohorts { background: var(--paper-2); }

/* ══ Colour themes ══════════════════════════════════════════════
   One hue per intake, set on both the card and the slider shell. Each theme
   supplies the light accent trio (headline, outcome rail, chips), the three
   stops of the dark pricing panel, and the metallic that sits on that panel.
   Everything else on the card is identical from cohort to cohort. */
.cxt--terra {
  --cx-accent: var(--terra);
  --cx-accent-deep: var(--terra-deep);
  --cx-accent-wash: var(--terra-wash);
  --cx-panel-1: #4a2113;
  --cx-panel-2: #63301c;
  --cx-panel-3: #8a4326;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
.cxt--pom {
  --cx-accent: var(--pom);
  --cx-accent-deep: var(--pom-deep);
  --cx-accent-wash: var(--pom-wash);
  --cx-panel-1: #5c1826;
  --cx-panel-2: #7a2233;
  --cx-panel-3: #9c2c41;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f3d79b;
  --cx-glow-hover: #dcb45f;
}
.cxt--peacock-blue {
  --cx-accent: var(--peacock-blue);
  --cx-accent-deep: var(--peacock-blue-deep);
  --cx-accent-wash: var(--peacock-blue-wash);
  --cx-panel-1: #142c4c;
  --cx-panel-2: #1d3f6b;
  --cx-panel-3: #2a568c;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
.cxt--herb {
  --cx-accent: var(--herb);
  --cx-accent-deep: var(--herb-deep);
  --cx-accent-wash: var(--herb-wash);
  --cx-panel-1: var(--herb-deep);
  --cx-panel-2: #1d4229;
  --cx-panel-3: var(--herb-700);
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
/* gold accent, so the panel goes deep bronze and the metallic lifts to champagne
   — plain peacock-gold on a gold panel would have no separation */
.cxt--gold {
  --cx-accent: var(--peacock-gold-deep);
  --cx-accent-deep: #7d5c1f;
  --cx-accent-wash: var(--peacock-gold-wash);
  --cx-panel-1: #40300f;
  --cx-panel-2: #574118;
  --cx-panel-3: #7a5b22;
  --cx-glow: #e6c684;
  --cx-glow-soft: #f6e3bb;
  --cx-glow-hover: #f2d99f;
}
/* wide enough that the right column doesn't stack tall, but tighter than wrap-wide */
.cohorts .wrap { max-width: 1180px; }

/* the shared 720px cap forces the title onto two lines — let it run the full measure */
.cohorts .sechead--center { max-width: none; }
.cohorts .sechead__title {
  white-space: nowrap;
  font-size: min(3.4rem, 4.6vw);
}

/* ══ Slider shell ═══════════════════════════════════════════════ */
.cxs {
  position: relative;
  margin-top: clamp(34px, 5vw, 54px);
}
.cxs__stage { position: relative; }
.cxs__slide { cursor: grab; }
.cxs__slide:active { cursor: grabbing; }

.cxs__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-md);
  cursor: pointer;
  z-index: 3;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.cxs__arrow:hover { background: var(--cx-accent); color: #fff; border-color: var(--cx-accent); }
.cxs__arrow svg { width: 20px; height: 20px; }
.cxs__arrow--prev { left: -22px; }
.cxs__arrow--prev svg { transform: rotate(90deg); }
.cxs__arrow--next { right: -22px; }
.cxs__arrow--next svg { transform: rotate(-90deg); }

.cxs__dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.cxs__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong);
  transition: width .3s var(--ease-out), background .3s var(--ease-out);
}
.cxs__dot.is-active { width: 26px; border-radius: 100px; background: var(--cx-accent); }

/* ══ Poster card ════════════════════════════════════════════════ */
.cx {
  --pad: clamp(14px, 1.6vw, 22px);
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(16px, 2.2vw, 34px);
  padding: var(--pad);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;                 /* lets the photo bleed to the card edge */
  /* lifted off the cream band on every side: an ambient ring with no offset so the
     top and side edges read as clearly as the foot, over a deeper cast shadow */
  box-shadow:
    0 0 34px -4px rgba(22, 49, 31, .15),
    0 18px 46px -22px rgba(22, 49, 31, .42),
    0 6px 16px -10px rgba(22, 49, 31, .16);
}

/* Photo fills the LEFT PORTION of the top-left block, bleeding out to the card's top
   and left edges and fading out before the headline so the type sits on clean cream.
   It isn't cut short at the foot by a magic offset: the results panel paints over its
   lower end, so that seam always lands exactly at the top of the results strip
   however tall the card gets. */
.cx__photo {
  position: absolute;
  top: calc(-1 * var(--pad));
  /* pushed past the card edge (and clipped by it) so the subject sits further left.
     A smaller bleed pulls the whole photo right — set `photoBleed` on the cohort
     when a subject needs more room on the left than `photoPos` alone can give. */
  left: calc(-1 * var(--pad) - var(--cx-photo-bleed, clamp(48px, 6.4vw, 104px)));
  right: 42%;
  bottom: 0;
  margin: 0;
  background: var(--paper-3);
  /* dissolves before the text column, and at the foot into the results panel */
  -webkit-mask-image:
    linear-gradient(to right, #000 66%, transparent 100%),
    linear-gradient(to bottom, #000 68%, transparent 92%);
  mask-image:
    linear-gradient(to right, #000 66%, transparent 100%),
    linear-gradient(to bottom, #000 68%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The slot is a tall 1:1.9 crop, so `cover` scales to the height and the source's
   width is trimmed. Which part of that width survives is per-photo: a subject
   sitting far left wants 0%, a centred subject needs the window pushed right so
   she lands clear of the fade. Set `photoPos` on the cohort to tune it. */
.cx__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cx-photo-pos, 0%) center;
  display: block;
}

/* ── Left column ──────────────────────────────────────────────── */
.cx__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.3vw, 17px);
}
.cx__top { position: relative; z-index: 1; display: flex; flex: 1; align-items: center; }

/* headline occupies the open cream to the right of the photo — no scrim needed,
   the photo has already faded out by the time it reaches this column */
.cx__intro {
  width: 48%;
  margin-left: auto;
  padding: clamp(14px, 1.8vw, 24px) 0;
  text-align: center;
}
/* "Healthier. Better You." lockup: heavy sans over an overlapping script */
.cx__title { display: block; line-height: 1; }
.cx__title-main {
  display: block;
  font-family: var(--heading);
  font-weight: 800;
  /* sized for the longest title ("Blood Sugar Balance"), not for "PCOS" */
  font-size: clamp(1.9rem, 3.9vw, 3.2rem);
  line-height: .96;
  letter-spacing: -.01em;
  color: var(--cx-panel-1);
  overflow-wrap: break-word;   /* last resort, so a long word can never bleed out */
}
.cx__title-script {
  display: block;
  font-family: var(--script);
  /* Great Vibes ships 400 only — without this it inherits the 800 from
     .cx__title and the browser fakes a bold, thickening the script */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: .95;
  letter-spacing: 0;
  /* the cohort's accent, a shade up from the near-black title above
     so the two lines still read apart */
  color: var(--cx-accent);
  /* sits just under the sans — enough for the C's ascender to reach its baseline,
     not so much that the script cuts through the letterforms */
  margin-top: -.05em;
}

.cx__rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: clamp(9px, 1.1vw, 14px) auto;
  max-width: 230px;
  color: var(--cx-accent);
}
.cx__rule span { flex: 1; height: 1px; background: var(--line-strong); }
.cx__rule i { font-style: normal; font-size: .8rem; }

.cx__tagline {
  font-family: var(--sans);
  font-size: clamp(.92rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--body);
}
.cx__tagline span { display: block; }

/* flat accent wash — a highlighted fact, not a button; kept narrow so it
   never runs under the photo column */
.cx__starts {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  margin-top: clamp(13px, 1.5vw, 18px);
  padding: clamp(7px, .8vw, 9px) clamp(12px, 1.3vw, 16px);
  border-radius: 9px;
  background: color-mix(in srgb, var(--cx-accent) 13%, transparent);
  white-space: nowrap;   /* the date never breaks across two lines */
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-size: clamp(.7rem, .85vw, .8rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx__starts-icon { width: 16px; height: 16px; flex: none; color: var(--cx-accent); }

/* ── Results strip ────────────────────────────────────────────── */
/* full-bleed cream panel: covers the bottom of the photo layer so the stats
   always sit on clean paper */
.cx__results {
  position: relative;
  flex: none;
  margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: clamp(14px, 1.7vw, 20px) var(--pad) var(--pad);
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--paper) 70%, transparent) 34px,
    var(--paper) 76px,
    var(--paper) 100%);
}
.cx__outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0; padding: 0;
}
/* stat rail, in the cohort's accent (the Atlas .astat band it mirrored
   was replaced by the live origin map) */
.cx__outcome {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px clamp(6px, 1.2vw, 14px);
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(.72rem, .92vw, .82rem);
  color: var(--body);
  line-height: 1.4;
}
/* feathered divider, fading out at top and bottom */
.cx__outcome + .cx__outcome::before {
  content: "";
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--cx-accent) 34%, transparent),
    transparent);
}
/* ring chip — accent outline over a soft inner wash, not a filled disc */
.cx__outcome-icon {
  display: grid; place-items: center;
  width: clamp(46px, 4.4vw, 60px);
  height: clamp(46px, 4.4vw, 60px);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 45%, transparent);
  background: radial-gradient(120% 120% at 50% 22%,
    color-mix(in srgb, var(--cx-accent-wash) 85%, transparent),
    color-mix(in srgb, var(--paper) 60%, transparent) 74%);
  color: var(--cx-accent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--cx-accent) 5%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
.cx__outcome-icon svg { width: clamp(20px, 2vw, 26px); height: clamp(20px, 2vw, 26px); }

/* diamond flourish on a faded rule, between the chip and the stat */
.cx__outcome-flourish {
  position: relative;
  width: clamp(52px, 5.4vw, 82px);
  height: 9px;
  margin: 9px 0 6px;
}
.cx__outcome-flourish::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--cx-accent) 45%, transparent) 26%,
    color-mix(in srgb, var(--cx-accent) 45%, transparent) 74%,
    transparent);
}
.cx__outcome-flourish::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--paper);   /* break the rule cleanly around the diamond */
}

/* every stat identical — same face, size and casing across all four */
.cx__outcome strong {
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.02vw, .92rem);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-accent-deep);
  line-height: 1.25;
  font-variant-numeric: lining-nums;
}

/* ── Right column ─────────────────────────────────────────────── */
/* the right half sits on its own soft wash — a green/gold glow with a faint dot
   grid — so the column reads as a panel rather than bare paper */
.cx__right {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, .9vw, 11px);
  padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px);
  border-radius: 16px;
  background:
    radial-gradient(520px 260px at 88% -8%, color-mix(in srgb, var(--cx-glow) 20%, transparent), transparent 66%),
    radial-gradient(460px 320px at 4% 104%, color-mix(in srgb, var(--cx-accent) 16%, transparent), transparent 62%),
    linear-gradient(170deg, var(--white) 0%, color-mix(in srgb, var(--paper-2) 70%, var(--white)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.cx__right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(color-mix(in srgb, var(--cx-panel-1) 12%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(120% 110% at 78% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 110% at 78% 0%, #000, transparent 70%);
}

/* script head, flanked by hairlines that fade out toward the card edges */
.cx__coaches-head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  padding-bottom: 2px;
}
.cx__coaches-head span { flex: 1; height: 1px; }
.cx__coaches-head span:first-child {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cx-glow) 70%, transparent));
}
.cx__coaches-head span:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cx-glow) 70%, transparent), transparent);
}

.cx__coaches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 13px); }
.cx__coach {
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--sh-sm);
}
/* fixed height (not aspect-ratio + max-height, which shrinks the width too) so the
   photo always spans the full tile while staying short enough to keep the card compact */
.cx__coach-photo {
  position: relative;
  width: 100%;
  height: clamp(120px, 13vw, 165px);
  background: var(--paper-3);
}
/* framed just under the top of the source so the shorter tile never clips heads */
.cx__coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.cx__coach-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cx-accent);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 9px,
      color-mix(in srgb, var(--cx-accent) 7%, transparent) 9px,
      color-mix(in srgb, var(--cx-accent) 7%, transparent) 18px),
    var(--cx-accent-wash);
}
.cx__coach-name {
  padding: 6px 10px 7px;
  text-align: center;
  background: var(--cx-panel-1);
  color: #fff;
}
.cx__coach-name strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(.85rem, 1.05vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
}
.cx__coach-name span { display: block; margin-top: 2px; font-size: .68rem; color: rgba(255,255,255,.86); }

/* facts — open rows on the paper, feathered dividers (Atlas), values flush right */
.cx__facts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
}
.cx__fact {
  position: relative;
  display: grid;
  grid-template-columns: 32px auto 1fr;
  align-items: center;
  gap: 12px;
  padding: clamp(8px, .95vw, 11px) 2px;
}
/* hairline that fades out at both ends, as on the Atlas stat rail */
.cx__fact + .cx__fact::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--line-strong) 90%, transparent) 12%,
    color-mix(in srgb, var(--line-strong) 90%, transparent) 88%,
    transparent);
}
/* glossy raised puck — same recipe as .story__ico in the hero cards */
.cx__fact-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--cx-accent-deep);
  background: radial-gradient(120% 120% at 32% 24%, #ffffff, var(--paper-2) 118%);
  box-shadow:
    0 4px 10px -3px rgba(22, 49, 31, .2),
    0 2px 4px -2px rgba(22, 49, 31, .12),
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -3px 6px rgba(22, 49, 31, .05) inset;
}
.cx__fact-icon svg { width: 16px; height: 16px; }
.cx__fact-label {
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
}
.cx__fact-value {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  text-align: right;
}
.cx__fact-value span { display: block; }

/* ── Pricing panel ────────────────────────────────────────────── */
/* deep accent panel — the one dark block on the card, so the price carries weight */
.cx__price {
  position: relative;
  margin-top: auto;
  padding: clamp(16px, 1.8vw, 22px) clamp(13px, 1.5vw, 18px) clamp(11px, 1.3vw, 15px);
  border: 1px solid color-mix(in srgb, var(--cx-glow) 34%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 12% 0%,
      color-mix(in srgb, var(--cx-glow) 16%, transparent) 0%,
      transparent 58%),
    linear-gradient(165deg, var(--cx-panel-1) 0%, var(--cx-panel-2) 62%, var(--cx-panel-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 18px 34px -24px var(--cx-panel-1);
}

/* "Limited spots" rides the panel's top edge as a gold badge */
.cx__price-note {
  position: absolute;
  top: 0; left: clamp(13px, 1.5vw, 18px);
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cx-glow);
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(22, 49, 31, .6);
}

.cx__price-cols {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
}
.cx__price-money { text-align: center; }

/* price and the struck original sit on one baseline */
.cx__price-now {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.cx__price-was {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  text-decoration-color: color-mix(in srgb, var(--cx-glow) 75%, transparent);
  text-decoration-thickness: 1.5px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.cx__price-caption {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-glow) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--cx-glow) 45%, transparent);
  color: var(--cx-glow-soft);
  font-family: var(--sans);
  font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}

.cx__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cx__perks li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: clamp(.76rem, .95vw, .85rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .94);
  line-height: 1.3;
}
.cx__perk-tick {
  display: grid; place-items: center;
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cx-glow) 22%, transparent);
  color: var(--cx-glow-soft);
}
.cx__perk-tick svg { width: 10px; height: 10px; }

.cx__cta {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: clamp(13px, 1.5vw, 18px);
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--cx-glow);
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(.8rem, 1vw, .92rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--cx-glow) 16%, transparent),
    0 14px 26px -14px rgba(22, 49, 31, .8);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* sheen sweep on hover */
.cx__cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
}
.cx__cta:hover {
  transform: translateY(-2px);
  background: var(--cx-glow-hover);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--cx-glow) 22%, transparent),
    0 20px 32px -16px rgba(22, 49, 31, .9);
}
.cx__cta:hover::after { transform: translateX(100%); }
.cx__cta svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.cx__cta:hover svg { transform: translateX(4px); }

.cx__footnote {
  margin-top: 9px;
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  color: rgba(240, 247, 240, .68);
}

/* ── Section foot ─────────────────────────────────────────────── */
.cohorts__foot {
  margin-top: 34px;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--body);
}
.cohorts__foot a { font-weight: 700; color: var(--herb); }
.cohorts__foot a:hover { color: var(--herb-700); }

/* ══ Compact desktop poster ═════════════════════════════════════
   The two-column card must clear a laptop viewport in one screen (~900px tall,
   less the stuck header). Card height is set by the right column — coaches,
   facts, pricing — so the tightening lands there first, with a lighter pass on
   the results rail. Nothing is removed; every block just gives back the slack
   in its own padding, gaps and type. Kept behind the 1000px breakpoint so the
   stacked mobile layout below is untouched. */
@media (min-width: 1001px) {
  .cx { --pad: clamp(12px, 1.2vw, 16px); }
  .cx__left { gap: clamp(9px, 1vw, 13px); }
  .cx__intro { padding: clamp(8px, 1.2vw, 14px) 0; }
  .cx__starts { margin-top: clamp(10px, 1.2vw, 14px); }

  .cx__results { padding: clamp(10px, 1.2vw, 14px) var(--pad) var(--pad); }
  .cx__outcome-icon { width: clamp(40px, 3.6vw, 50px); height: clamp(40px, 3.6vw, 50px); }
  .cx__outcome-icon svg { width: clamp(18px, 1.7vw, 22px); height: clamp(18px, 1.7vw, 22px); }
  .cx__outcome-flourish { margin: 6px 0 4px; }

  .cx__right {
    gap: clamp(6px, .7vw, 9px);
    padding: clamp(9px, 1vw, 12px) clamp(9px, 1vw, 13px) clamp(10px, 1.1vw, 14px);
  }
  .cx__coaches-head { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
  /* the single biggest block on the column — keyed to viewport height so short
     laptops crop the tile rather than pushing the card past the fold */
  .cx__coach-photo { height: clamp(96px, 13.5vh, 148px); }
  .cx__coach-name { padding: 4px 8px 5px; }
  .cx__coach-name strong { font-size: clamp(.8rem, .95vw, .92rem); }
  .cx__coach-name span { font-size: .64rem; }

  .cx__fact { padding: clamp(5px, .6vw, 7px) 2px; }
  .cx__fact-value { font-size: .72rem; line-height: 1.35; }

  .cx__price {
    padding: clamp(13px, 1.5vw, 17px) clamp(12px, 1.4vw, 16px) clamp(9px, 1vw, 12px);
  }
  .cx__price-now { font-size: clamp(1.8rem, 2.5vw, 2.3rem); }
  .cx__price-caption { margin-top: 5px; }
  .cx__perks { gap: 5px; }
  .cx__perks li { font-size: clamp(.72rem, .88vw, .8rem); }
  .cx__cta { margin-top: clamp(10px, 1.1vw, 13px); padding: 10px 18px; }
  .cx__footnote { margin-top: 6px; font-size: .68rem; }
}

/* ══ Responsive ═════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .cxs__arrow--prev { left: 6px; }
  .cxs__arrow--next { right: 6px; }
}
@media (max-width: 1000px) {
  /* stacked: photo becomes a banner across the top, fading down into the headline */
  .cx { grid-template-columns: 1fr; }
  .cx__photo {
    right: calc(-1 * var(--pad));
    bottom: auto;
    height: 340px;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .cx__photo img { object-position: 50% 30%; }
  .cx__left { padding-top: 230px; }
  .cx__intro { width: 100%; margin-left: 0; background: none; }
}
@media (max-width: 700px) {
  .cx__photo { height: 280px; }
  .cx__left { padding-top: 180px; }
  .cx__outcomes { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .cx__outcome:nth-child(odd)::before { display: none; }
  .cx__price-cols { grid-template-columns: 1fr; }
  .cx__fact { grid-template-columns: 32px 1fr; row-gap: 4px; }
  .cx__fact-value { grid-column: 2; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════
   CASE STUDIES
   ═══════════════════════════════════════════════════════════════════ */
.cases { background: var(--paper); }

/* ══ Coverflow slider ═══════════════════════════════════════════
   Every card is stacked in the same grid cell, so the stage is always as tall
   as the tallest case and never jumps between slides. The active card sits
   centred; its neighbours are pushed out, scaled down and blurred, peeking a
   sliver past each edge of the active card. */
.cases__slider {
  position: relative;
  margin-top: clamp(34px, 5vw, 54px);
}
.cases__stage {
  display: grid;
  padding: 10px 0 22px;      /* room for the cards' shadows */
  cursor: grab;
}
.cases__stage:active { cursor: grabbing; }

.cases__slide {
  grid-area: 1 / 1;
  /* wide landscape card; the shift is tuned so a scaled-down neighbour's outer
     edge lands on the wrap edge — a sliver peeks, nothing is clipped */
  width: 84%;
  justify-self: center;
  transform: translateX(calc(var(--off) * 17%)) scale(.86);
  filter: blur(3px);
  opacity: .5;
  cursor: pointer;
  transition:
    transform .5s var(--ease-out),
    filter .5s var(--ease-out),
    opacity .5s var(--ease-out);
}
.cases__slide.is-active {
  transform: translateX(0) scale(1);
  filter: none;
  opacity: 1;
  cursor: default;
}
/* Kept in the grid to hold the height, but invisible and untouchable.
   The translate is zeroed as well: a far slide is never seen, yet its
   transform still extended the document's scrollable width — the same
   defect fixed on the cohort stage in the 2026-08-23 pass. Measured
   +253px of page overflow at 1180px before this line. */
.cases__slide.is-far { opacity: 0; pointer-events: none; transform: translateX(0) scale(.86); }
.cases__slide:not(.is-active) .case { pointer-events: none; }

/* Controls now live in a static bar under the deck (arrow · counter · arrow),
   matching the editorial reference — no more floating buttons beside the
   card, no dot rail. */
.cases__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(20px, 3vw, 28px);
}
.cases__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.cases__arrow:hover { background: var(--herb); color: #fff; border-color: var(--herb); }
.cases__arrow svg { width: 20px; height: 20px; }
.cases__arrow--prev svg { transform: rotate(90deg); }
.cases__arrow--next svg { transform: rotate(-90deg); }

.cases__counter {
  min-width: 64px;
  text-align: center;
  font-family: var(--heading);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ══ The card ═══════════════════════════════════════════════════
   Portrait + overlapping pull-quote on the left, the story on the right. */
.case {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr);
  align-items: stretch;
  gap: clamp(26px, 4vw, 54px);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-wash), transparent 55%),
    var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 30px 56px -34px rgba(22, 49, 31, .5),
    0 6px 16px -10px rgba(22, 49, 31, .16);
  transition: box-shadow .4s var(--ease-out);
}
.cases__slide.is-active .case:hover { box-shadow: var(--sh-lg); }

/* ── Left: plain full-height portrait (the quote no longer overlaps it —
   it moved into .case__body as the hero element, per the editorial
   reference) ─────────────────────────────────────────────────────── */
.case__media { position: relative; }
.case__photo {
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 22px 44px -26px rgba(22, 49, 31, .5);
}
.case__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center 22%;
}

/* ── Right: kicker, the promoted pull-quote, name, stats, story ──── */
.case__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.case__kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink, var(--herb-deep));
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

/* the hero moment — was a small caption tucked under the photo, now the
   card's largest text, with a decorative mark and one accent-italic clause */
.case__quote { margin: 0 0 clamp(14px, 1.8vw, 20px); }
.case__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: .6;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
  margin-bottom: 4px;
}
.case__quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.25;
  color: var(--ink);
}
.case__quote blockquote em {
  font-style: italic;
  color: var(--accent-deep);
}

.case__title {
  margin: 0 0 clamp(16px, 2vw, 22px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--sans, inherit);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* number-forward stat row — replaces the checkmark-pill list. Every fact
   that was in the old highlights/headline still appears here, verbatim;
   numeric facts get the big-number treatment, non-numeric ones (e.g.
   "Brain Fog Gone") read as a single bold line in the same slot so the
   row stays visually consistent regardless of how many facts a given
   client's card has (never hand-capped to match a mockup's count). */
.case__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 30px) clamp(22px, 3vw, 34px);
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.case__stat { display: flex; flex-direction: column; gap: 2px; }
.case__stat b {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--herb-deep);
  font-variant-numeric: lining-nums;
}
.case__stat span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__stat--label { justify-content: center; }
.case__stat--label span {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(.92rem, 1.15vw, 1.02rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--herb-deep);
}

.case__summary {
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.62;
  color: var(--body);
  margin: 0;
}
.case__summary b { color: var(--ink); }

.cases__disclaimer {
  margin-top: 30px;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────────── */
/* less room to peek — widen the card and pull the neighbours in */
@media (max-width: 980px) {
  .cases__slide { width: 92%; transform: translateX(calc(var(--off) * 10%)) scale(.9); }
  .case { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr); }
}
/* no room to peek without clipping: show the active card only */
@media (max-width: 820px) {
  .cases__slide { width: 100%; transform: none; opacity: 0; }
  .cases__slide.is-active { opacity: 1; }
}
/* stack: portrait on top, story beneath. Arrows/counter already live in a
   static bar below the deck at every width, so no arrow repositioning
   is needed here (the old floating-arrow mobile overrides are gone). */
@media (max-width: 700px) {
  .case {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 20px 26px;
  }
  .case__media { max-width: 340px; margin: 0 auto; }
  .case__photo img { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
  .case__title { font-size: .74rem; }
  .cases__arrow { width: 38px; height: 38px; }
}

@media (max-width: 460px) {
  .case__stats { gap: 14px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ — "the answer ledger"          rebuilt 2026-09-07 (Madison pass)
   ═══════════════════════════════════════════════════════════════════
   WHAT THIS REPLACED, AND WHY. The previous FAQ was nine Q&A pairs in a
   three-column grid of white cards on the --paper-2 cream band. Three
   independent measurements condemned it, all reproducible:

     1. THE CARD WAS NOT A SURFACE. #ffffff on #f7ecd4 measures 1.17:1,
        and its --line hairline measures 1.26:1 on the card / 1.07:1 on
        the band. The layout spent three grid columns and nine boxes to
        draw structure that is, measurably, almost invisible. House
        Rule 61's corollary already names this exact shape: paper on
        cream is not a plane. Every pale pair in this token family
        measures 1.01–1.27:1, so no swap of pale fills can fix it — only
        a contrasting RULE can. (CHROMA)
     2. A DEAD CELL ACROSS THE WHOLE 681–1000px BAND. Three .faqgroup
        children in a repeat(2, 1fr) grid = 2 + 1, leaving one empty
        335.6 x 718.3px cell, measured at 768px — iPad portrait, this
        project's first-priority viewport. House Rule 73. Separately,
        height:100% forced all three cards to the tallest one's height,
        stranding up to 193.9px of empty card below the last line of ink
        at 1280 and 102.1px at 1440 (per-card leaf-ink measurement, worst
        card of the three; the 24.3px seen in single-column states is
        just the card's own padding and is not a void).
     3. THE MEASURE WAS ~33ch AT EVERY BREAKPOINT. Measured, not
        estimated: the .faqgroup__a content box was 315.66px at 1280,
        317px at 820 and 308px at 390 — the three-column desktop layout
        gave the copy no more room than a phone did, because card
        padding + border + gutter ate everything the grid freed. Under
        the 45-75ch floor everywhere. (KERN)

   THE ANSWERS STAY OPEN. This is not a styling preference, it is the
   research, and it reconfirms the call the previous session made in the
   comment this one replaces. NN/g (Farrell 2014): the plain question
   list "is still the best underlying design for short and medium-length
   FAQs". NN/g (Wang 2024) lists "users need access to most content" as
   the first reason NOT to use an accordion — which is exactly roti,
   halal, Ramadan and price. NN/g (Loranger 2014): "it is easier to
   scroll down the page than to decide which heading to click on."
   Baymard found Expanded best matched expectations on desktop and on
   short mobile content. GOV.UK: "test your content without an accordion
   first." First-open-rest-collapsed was rejected on evidence too (NN/g
   Budiu 2015: it "prevented users from getting a quick glance ... at
   the structure of the page"). Nothing here collapses, so this segment
   needs NO JavaScript at all and renders identically with JS disabled.

   THE DEVICE. No cards, no columns, no shadows. Each category is one
   ledger row: its name set as the largest type in the section in a
   right-aligned rail, with its three Q&As stacked at a legal measure
   beside it, on a constant pitch. That inverts the old hierarchy — the
   category was an 11.84px uppercase whisper and is now a ~36px display
   head, so the three categories become the section's architecture
   instead of a label on a box. Precedent measured from live work by
   ANTENNA: Basecamp's rail split (532:664, 60.94px gutter, box-shadow
   none) and AG1's category-as-display-head at 2.80:1 against body.
   ─────────────────────────────────────────────────────────────────── */

/* GROUND. Kept LIGHT — a dark FAQ would put a second dark band directly
   against the .closing CTA and pre-spend the one value jolt that section
   exists to deliver. But it moves off cream: the FAQ was the fifth
   consecutive cream band, and paper -> paper-2 alternates by only
   dE 5.1 at a 2 degree hue shift, so five bands read as one endless
   beige. --herb-wash is the same LIGHTNESS (L* 93.7 -> 93.3, so it adds
   no value weight and steals nothing from the CTA) rotated 36.1 degrees
   toward the brand green (hue 90.8 -> 126.9, dE 7.7). It also sits
   between the cream bands (89-91deg) and .closing's herb-deep (151deg),
   so the page now steps through hue into its finale instead of jumping
   cream to near-black. Existing token, no new hex. */
.faq { background: var(--herb-wash); }
.faq__inner { max-width: none; }
.faq .sechead--center { max-width: none; }

/* ── The ledger ─────────────────────────────────────────────────────
   DERIVED, NOT LOCKED — read this before changing a number. The measure
   is the locked value (KERN: 420-500px content box for this copy at
   17px Inter; hard floor 340px, above which real lines first average
   45ch). The rail width and the ledger max-width are DERIVED from it:

       ledger = rail + gap + answers   ->   920 = 356 + 64 + 500

   Locking a split RATIO as well would over-determine the row, which is
   the defect house rules already record twice (field-split, then
   module-plate). ANTENNA measured live rails at 1:1.25 and flagged that
   single figure as over-generalised; it is a reference observation, not
   a spec. The ratio this yields, 1:1.40, is an OUTPUT. If the measure
   changes, recompute the rail — never the other way round.

   minmax(0, Npx) rather than fixed px on purpose: the tracks grow from
   0 up to their limit and share whatever is actually available, so a
   narrower wrap shrinks them instead of overflowing. This only behaves
   because the RAIL's cap is smaller than the ANSWERS' cap: both tracks
   grow together from 0, the rail hits its ceiling first, and every
   remaining pixel goes to the answers. Keep rail-max < answers-max or
   the two will split the shortfall evenly and crush the measure. */
.faq__groups {
  margin-top: clamp(32px, 4vw, 48px);
  --faq-rail: 260px;
  --faq-answers: 500px;
  --faq-gap: 64px;
}

.faqgroup {
  display: grid;
  gap: 0 var(--faq-gap);
  max-width: calc(var(--faq-rail) + var(--faq-gap) + var(--faq-answers));
  margin-inline: auto;
  /* The one structural boundary, and the only place the green is heavy:
     --herb-700 on --herb-wash measures 6.74:1, clearing the 3:1 non-text
     benchmark with margin, where the old card edge measured 1.17:1.
     Three of these in the section — a rule per category, not a stripe
     per row. */
  border-top: 2px solid var(--herb-700);
  padding-top: clamp(24px, 3vw, 32px);
}
.faqgroup + .faqgroup { margin-top: clamp(48px, 6vw, 96px); }

/* THE RAIL STARTS AT 720px, NOT 1000px. It was gated at min-width:1000
   and CRITWALL measured the consequence: at 768px — iPad portrait, this
   project's declared first-priority viewport — the rail, the right
   alignment and the sticky head all vanished, leaving a plain bold
   subhead over a list. The section's whole signature was desktop-only,
   absent on the viewport that matters most here. 720px is the width at
   which a 190px rail still leaves the answers ≥414px, above KERN's
   340px floor. */
@media (min-width: 720px) {
  .faqgroup {
    grid-template-columns: minmax(0, var(--faq-rail)) minmax(0, var(--faq-answers));
    justify-content: center;
  }
}
@media (min-width: 720px) and (max-width: 999px) {
  .faq__groups { --faq-rail: 190px; --faq-gap: 44px; --faq-answers: 480px; }
}

/* ── The rail: category as display head ─────────────────────────────
   Was .74rem/11.84px uppercase at .16em — the smallest thing in the
   section. Now the largest. Right-aligned on desktop so the 64px gap
   becomes a real axis rather than a gutter between two columns.
   --herb-deep measures 11.88:1 on this ground. */
.faqgroup__title {
  font-family: var(--sans);
  font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.25rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--herb-deep);
  text-wrap: balance;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
@media (min-width: 720px) {
  .faqgroup__title {
    text-align: right;
    margin-bottom: 0;
    /* Sticky so the category travels with its own three Q&As: whichever
       answer you are reading, its category is beside it, which is the only
       orientation cue an always-open FAQ can give you.
       align-self:start is required — a stretched grid item fills the row and
       is its own sticky container, so it would never move. Costs no JS.
       THE RAIL VOID — ACCEPTED, NOT FIXED. FINALCUT's explicit call, on
       the record, overrulable by the Principal.
       CRITWALL measured the empty rail column below each head three ways
       (agreeing within 1px) at a 356px rail: 451.4 / 452.7 / 505.8px.
       Narrowing to 260px did NOT help — re-measured scroll-independently
       as group-height minus head-ink: 481.7 / 442.8 / 536.0px at 1280.
       That is ~30px WORSE on two of the three groups. Recorded as a
       regression on that metric rather than dressed up as a fix.
       (Measure it that way, never as head-ink-to-group-bottom: the head is
       sticky, so that formula depends on scroll and returns -1.7px after a
       scroll to the end of the group — a meaningless false pass.)
       Accepted because nothing TRUE is available to fill it: a per-category
       count is 3/3/3 and carries no information, and an ordinal over three
       TOPICAL categories is decoration justified after the fact — the house
       rule is numbered markers only where the content really is a sequence.
       The only change that zeroes this void is collapsing to one column at
       every width, which would also delete the rail, the right-aligned axis
       and the sticky orientation cue. In a two-column editorial layout this
       column IS margin; the live reference ANTENNA measured (Basecamp, 532px
       rail) has the same property.
       Offset uses var(--header-h) rather than the header's real measured
       63px height so it self-corrects if that token is ever fixed — the
       token is stale by 9px, which is a global issue, not this segment's. */
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
  }
}

/* ── The list ───────────────────────────────────────────────────────
   Single column, capped at the measure even when the viewport could go
   wider, and centred below 1000px so the section keeps one axis. */
.faqgroup__list {
  margin: 0;
  max-width: var(--faq-answers);
}
/* Below the two-column breakpoint the whole block — rule, head and list —
   collapses to ONE 520px column, centred. Capping only the list left it
   hugging the left of its group, with dead right margin under a centred
   section title; capping the group instead keeps a single axis.
   THE BOUNDARY MUST BE 719px, NOT 999px. At 999 this rule overlapped the
   two-column tier that now starts at 720 and would have squeezed a
   two-track grid into a 520px box across the whole 720-999 band. */
@media (max-width: 719px) {
  .faqgroup { max-width: 520px; }
  .faqgroup__list { max-width: 520px; }
}

/* PITCH. Every gap between a Q&A pair is identical: 24px of answer
   padding + a 1px rule + 24px of question padding = 48px, with the rule
   dead centre. Against 12px from a question to its own answer, that is
   exactly 4:1 — the ratio that makes a pair read as one unit rather
   than as four loose lines. It was 2.5:1. (GOV.UK measures 5.0:1.)
   The rule is the page's own ink at 14% over this ground, compositing
   to #cad3c1 at 1.304:1 — deliberately quiet. It marks rhythm; it is
   not a boundary, and it must not compete with the 6.74:1 category rule
   above. Eight of these against three of those. */
.faqgroup__q {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(28, 38, 31, .14);
}
.faqgroup__q:first-of-type { padding-top: 0; border-top: 0; }

.faqgroup__a {
  margin: 12px 0 0;
  padding-bottom: 24px;
  /* 17px, the site's own --fs-body. Was .95rem/15.2px — an 11% cut below
     this site's baseline applied, of all places, to the copy its own CSS
     comment calls "the actual objection-killers", and under the 16px web
     body floor. Against the question's 20-22px that is a 1.18-1.29 size
     step, up from an inert 1.07. */
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
}
.faqgroup__a:last-of-type { padding-bottom: 0; }

/* ── Foot ───────────────────────────────────────────────────────────
   The whole line was 21.6px Cormorant italic sitting directly on top of
   an upright 16px Inter button — two full typographic voices in a
   two-element cluster whose only job is "read this, then click that",
   and italic slows the eye exactly where it should be speeding up. The
   serif is pulled back to the inline accent base.css:92 says it is for. */
.faq__cta {
  margin-top: clamp(48px, 6vw, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.faq__cta p {
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-style: normal;
  color: var(--ink);
  /* One short sentence — it should hold one line wherever it fits, and only
     wrap when it must. 34ch stranded "is"; 42ch then stranded "The" ahead of
     the nowrap phrase below. 62ch is ~682px at this size, so desktop sets it
     as a single line and only narrow viewports wrap, where balance evens them. */
  max-width: 62ch;
  text-wrap: balance;
}
.faq__cta em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.16em;
  font-weight: 600;
  color: var(--herb-deep);
  /* Browsers break after the hyphen in "15-minute", stranding "15-" at the end
     of a line. The phrase is short enough to hold on one line down to 320px —
     the 320px text-node probe in the overflow sweep is what proves that, not
     an assumption. */
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   CLOSING CTA
   ═══════════════════════════════════════════════════════════════════ */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(90px, 13vw, 156px);
  text-align: center;
  background:
    radial-gradient(1100px 620px at 50% 12%, rgba(53,160,94,.20), transparent 62%),
    radial-gradient(700px 500px at 50% 120%, rgba(20,125,140,.16), transparent 60%),
    linear-gradient(180deg, #0c2b1b, var(--herb-deep) 60%, #0a2417);
  color: #eef4e8;
  scroll-margin-top: var(--header-h);
}
.closing__field { z-index: 0; opacity: .75; }
/* soft radial bloom behind the copy so the network flows into a glow at the CTA */
.closing__glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 52%;
  width: min(760px, 88vw); height: min(760px, 88vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(53,160,94,.28), rgba(53,160,94,.08) 42%, transparent 66%);
  pointer-events: none;
}
.closing__inner { position: relative; z-index: 1; max-width: 800px; }

.closing__title {
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  line-height: 1.06;
  color: #fff;
  margin-bottom: 22px;
}
.closing__title em { font-style: normal; color: var(--herb-lime); font-weight: 700; }

.closing__sub {
  font-size: var(--fs-lead);
  color: rgba(240,246,235,.95);
  max-width: 52ch;
  margin: 0 auto 34px;
}
.closing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
/* brighten the primary CTA so it pops off the dark-green field */
.closing .btn--hero {
  --btn-bg: linear-gradient(135deg, var(--herb-lime), var(--herb-bright));
  color: #0c2b1b;
  box-shadow: 0 16px 40px -10px rgba(134,187,60,.5),
              0 0 0 6px rgba(134,187,60,.16);
}
.closing .btn--hero:hover {
  --btn-bg: linear-gradient(135deg, var(--herb-lime), var(--herb-bright));
  box-shadow: 0 22px 52px -12px rgba(134,187,60,.6),
              0 0 0 9px rgba(134,187,60,.2);
}

.closing .btn--wa { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.closing .btn--wa:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.closing__micro { font-size: .9rem; font-weight: 500; color: rgba(238,244,232,.9); }

/* ═══════════════════════════════════════════════════════════════════
   STATIC-PORT ADDITIONS
   Rules the React build applied as inline styles on the component.
   ═══════════════════════════════════════════════════════════════════ */

/* The closing-CTA canvas was positioned inline by the old <GoldNetwork>. */
.closing__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── FAQ accordion — REMOVED 2026-09-07 ────────────────────────────────
   This block held `html:not(.js) .faq__a-wrap` and `html:not(.js) .faq__a`,
   left behind when the accordion was taken out. Both selectors matched ZERO
   elements in the shipped markup (verified: `faq__a-wrap`, `faq__a`,
   `faq__item` and `faq__q` all occur 0 times in index.html, and there is no
   [data-faq] node for home.js's initFAQ stub to bind to). They were inert,
   but they sat directly beneath the comment block that explains with
   citations WHY accordions were rejected here, so a future editor could
   reasonably read them as a live collapse mechanism and reconnect it.
   Deleted rather than left as a trap. The FAQ needs no JavaScript at all.
   ─────────────────────────────────────────────────────────────────── */

/* ── Tap targets ───────────────────────────────────────────────────────
   The slider dots render at 8×8 and the menu button at 28×34 — well under
   the ~44px guideline, and genuinely fiddly on a phone. These rules grow
   the *hit area* only; every dot looks exactly the same as before.

   Width is capped at the dot's own width plus the flex gap, so neighbouring
   targets meet at the midpoint rather than overlapping (which would make
   taps land on the wrong dot).
   ─────────────────────────────────────────────────────────────────── */
.stack__dot,
.cxs__dot,
.cases__dot { position: relative; }

.stack__dot::after,
.cxs__dot::after,
.cases__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 8px);
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════════════
   UI/UX AUDIT FIXES — 2026-08-14
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero CTA: make the primary action actually look primary ───────────
   It was `background: var(--paper)` — the exact same cream as the page
   behind it — with a 1.5px hairline. Meanwhile the header's secondary
   "Book Free Call" is solid green. The single most important conversion
   action on the page was the faintest button on it.
   ─────────────────────────────────────────────────────────────────── */
.hero__book {
  background: linear-gradient(135deg, var(--herb-bright), var(--herb));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 32px -10px rgba(34, 114, 68, .55),
              0 0 0 6px rgba(53, 160, 94, .12);
}
.hero__book:hover {
  background: linear-gradient(135deg, var(--herb-bright), var(--herb-700));
  border-color: transparent;
  box-shadow: 0 20px 44px -12px rgba(34, 114, 68, .62),
              0 0 0 8px rgba(53, 160, 94, .16);
}
.hero__book-text strong { color: #fff; }
.hero__book-text span   { color: rgba(255, 255, 255, .82); }
.hero__book-icon { background: rgba(255, 255, 255, .16); color: #fff; }

/* ── Tier row labels ──────────────────────────────────────────────────
   The three approach rows carried no label at all — nothing said which
   row was Light, Medium or Hard. The tier colour alone can't carry that
   (and carries nothing for a colourblind visitor), so each row now names
   its own tier.
   ─────────────────────────────────────────────────────────────────── */
.tierrow__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding-inline: var(--gutter);
}
.tierrow__chip {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--card-ink);
  padding: 5px 11px;
  border-radius: 100px;
}
.tierrow__name {
  font-family: var(--heading);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: var(--wt-heading);
  letter-spacing: -.01em;
  color: var(--ink);
}
.tierrow__count { font-size: .85rem; color: var(--muted); }
.tierrow + .tierrow { margin-top: clamp(30px, 4vw, 48px); }

@media (max-width: 560px) {
  .tierrow__label { gap: 6px 10px; }
  .tierrow__name { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   ATLAS SECTION — rebuilt 2026-09-07 to the client's reference layout.
   Five blocks: photographic hero band, floating proof card, arrow-driven
   card rail, full-bleed dark map band with region pills, journey row.

   The section used to be one continuous dark peacock slab. The reference
   inverts that: light throughout, with the MAP as the single dark moment.
   These rules come after the originals in the cascade and supersede them
   for the new structure; the old .atlasmap__head / .atlasrail / .apicks__grid
   rules are now unused by the markup.
   ═══════════════════════════════════════════════════════════════════ */
.atlasmap {
  background: var(--paper);
  color: var(--ink);
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 78px);
}
.atlasmap::before { content: none; }   /* the old plume glow belonged to the dark slab */

/* ── (a) hero band ─────────────────────────────────────────────────── */
.atlhero {
  position: relative;
  isolation: isolate;
  padding: clamp(58px, 9vw, 116px) 0 clamp(62px, 8vw, 104px);
  margin-bottom: clamp(-64px, -5vw, -44px);   /* the proof card rides up over it */
  overflow: hidden;
}
.atlhero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.atlhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Warm scrim: the headline is near-black on a photograph, so the left third
   has to be reliably light regardless of what the photo does there. */
.atlhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(255,246,229,.97) 0%, rgba(255,246,229,.93) 34%, rgba(255,246,229,.55) 56%, rgba(255,246,229,.14) 78%),
    linear-gradient(0deg, rgba(255,246,229,.85), rgba(255,246,229,0) 42%);
}
.atlhero__inner { position: relative; }
.atlhero__eyebrow {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--herb-deep);
}
.atlhero__title {
  margin: 0; max-width: 15ch;
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(2.4rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em;
  color: var(--ink);
}
.atlhero__title em { font-family: var(--serif); font-style: italic; font-weight: 600; color: var(--herb); }
.atlhero__lead {
  margin: clamp(16px, 2vw, 22px) 0 clamp(24px, 3vw, 34px); max-width: 42ch;
  font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--body);
}

/* ── shared pill button ───────────────────────────────────────────── */
.atlbtn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border-radius: 999px;
  font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background-color .28s var(--ease-out);
}
.atlbtn svg { width: 17px; height: 17px; flex: none; }
.atlbtn--green { background: var(--herb-deep); color: #fff6e5; box-shadow: 0 14px 30px -16px rgba(11,40,24,.75); }
.atlbtn--green:hover { background: var(--herb); transform: translateY(-2px); }
.atlbtn--gold { background: #d9b25f; color: #21160a; box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
.atlbtn--gold:hover { background: #e6c477; transform: translateY(-2px); }

/* ── (b) floating proof card ──────────────────────────────────────── */
.atlcard {
  position: relative; z-index: 2;
  list-style: none; margin: 0 0 clamp(44px, 5.5vw, 72px); padding: clamp(20px, 2.4vw, 30px) clamp(14px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 60px -34px rgba(22,49,31,.42), 0 4px 14px -8px rgba(22,49,31,.12);
}
.atlcard li {
  display: flex; align-items: center; gap: 14px;
  padding: 6px clamp(10px, 1.6vw, 22px);
  border-left: 1px solid var(--line);
}
.atlcard li:first-child { border-left: 0; }
.atlcard svg { width: 26px; height: 26px; flex: none; color: var(--herb); }
.atlcard span { display: flex; flex-direction: column; min-width: 0; }
.atlcard b {
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.05; letter-spacing: -.015em;
  color: var(--herb-deep); font-variant-numeric: lining-nums;
}
.atlcard span span, .atlcard li span > :not(b) { }
.atlcard li span { font-size: .8rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 900px) {
  .atlcard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
  .atlcard li:nth-child(odd) { border-left: 0; }
  .atlcard li:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 10px; }
}
@media (max-width: 460px) {
  .atlcard { grid-template-columns: 1fr; }
  .atlcard li { border-left: 0; }
  .atlcard li + li { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
}

/* ── (c) the rail ─────────────────────────────────────────────────── */
.apicks__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.apicks__h {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink);
}
.atlrail__nav { display: flex; gap: 10px; flex: none; }
.atlrail__arrow {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  cursor: pointer; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.atlrail__arrow:hover:not(:disabled) { background: var(--herb); color: #fff; border-color: var(--herb); }
.atlrail__arrow:disabled { opacity: .34; cursor: default; }
.atlrail__arrow svg { width: 19px; height: 19px; }
.atlrail__arrow[data-rail-prev] svg { transform: rotate(90deg); }
.atlrail__arrow[data-rail-next] svg { transform: rotate(-90deg); }

.apicks__rail {
  list-style: none; margin: 0 0 clamp(52px, 6.5vw, 86px); padding: 6px 4px 20px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.apicks__rail::-webkit-scrollbar { display: none; }
.apicks__rail > .apick { scroll-snap-align: start; }
/* light ground now, so the card is a white card with a real border */
.apicks__rail .apick__a {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px -26px rgba(22,49,31,.4);
}
.apicks__rail .apick__a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--herb) 36%, transparent);
  box-shadow: 0 24px 44px -26px rgba(22,49,31,.5);
}
.apicks__rail .apick__name { color: var(--ink); }
.apicks__rail .apick__where,
.apicks__rail .apick__when { color: var(--muted); }
@media (min-width: 1240px) { .apicks__rail { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-flow: row; overflow-x: visible; } }

/* ── (d) the map, its own dark band ───────────────────────────────── */
.atlband {
  position: relative;
  left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  background: linear-gradient(168deg, #0e4257 0%, var(--peacock-deep) 46%, #071c26 100%);
  color: #fff6e5;
  padding: clamp(46px, 6vw, 80px) 0;
  overflow: hidden;
}
.atlband__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  gap: clamp(26px, 4vw, 54px); align-items: center;
}
@media (max-width: 980px) { .atlband__grid { grid-template-columns: 1fr; } }
.atlband__h {
  margin: 0 0 14px;
  font-family: var(--heading); font-weight: var(--wt-heading);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em;
  color: #fff6e5;
}
.atlband__h em { font-family: var(--serif); font-style: italic; font-weight: 600; color: #e6c477; }
.atlband__lead { margin: 0 0 22px; font-size: 1rem; line-height: 1.6; color: rgba(255,246,229,.82); max-width: 46ch; }
.atlband__fig { margin: 0; }

/* region pills, positioned on the same projection the canvas uses */
.atlregions { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.atlregions li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,246,229,.94); color: #10333c;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.7);
  white-space: nowrap;
}
.atlregions b { font-size: .72rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.atlregions span { font-size: .64rem; color: #4a6068; line-height: 1.2; }
/* Below iPad the map is too small to carry six floating pills without them
   colliding; the legend under it still names every family. */
@media (max-width: 899px) { .atlregions { display: none; } }

.atlasmap__legend { margin-top: clamp(20px, 2.4vw, 28px); }

/* ── (e) journey row ──────────────────────────────────────────────── */
.atljourney { padding-top: clamp(44px, 5.5vw, 72px); }
.atljourney__eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--herb-deep);
}
.atljourney__steps {
  list-style: none; margin: 0 0 clamp(30px, 3.6vw, 44px); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 900px) { .atljourney__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .atljourney__steps { grid-template-columns: 1fr; } }
.atljourney__steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; }
.atljourney__ic {
  grid-row: 1 / 4; width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 50%; background: var(--herb-wash); color: var(--herb-deep);
  border: 1px solid color-mix(in srgb, var(--herb) 24%, transparent);
}
.atljourney__ic svg { width: 21px; height: 21px; }
.atljourney__steps b { font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.atljourney__steps strong { font-family: var(--heading); font-weight: var(--wt-heading); font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
.atljourney__steps li > span:last-child { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.atljourney__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.atljourney__note { font-size: .84rem; color: var(--muted); }

/* Evidence chips were authored light-on-dark for the old dark Atlas slab
   (#bfe0a2 / #edd097 / near-white). The rail now sits on white cards, where
   "mixed" and "limited" rendered white-on-white — invisible, caught in a
   render. Dark-on-light equivalents, scoped to the rail so any other
   surface keeps the original treatment. Measured on #fff below. */
.apicks__rail .apick__ev[data-ev="strong"]   { background:#e4efdc; color:#1c4a2a; }
.apicks__rail .apick__ev[data-ev="moderate"] { background:#f6ebd4; color:#6a4a12; }
.apicks__rail .apick__ev[data-ev="mixed"]    { background:#e9edef; color:#3a4a52; }
.apicks__rail .apick__ev[data-ev="limited"]  { background:#efeae5; color:#55483f; }
.apicks__rail .apick__ev[data-ev="emerging"] { background:#ece9f1; color:#463a58; }