/* ============================================================
   Golden Hour Aging — components.
   The section grammar is the n2 card grammar she asked for: full-width
   rounded panels that alternate ground color, so the page reads panel by
   panel instead of one unbroken scroll. Utility pace: every panel answers
   something or offers a next step.
   ============================================================ */

/* ── masthead ─────────────────────────────────────────────── */
.masthead {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.masthead__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 0;
}
.brand__mono { height: 38px; width: auto; }
.brand__word { height: 13px; width: auto; }
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}
.nav__link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 450;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: #fff; }
.nav__link[aria-current="page"] { border-bottom-color: var(--champagne); color: #fff; }

/* Pathways dropdown: a <details> inside the nav. Closed, only the summary
   shows (UA rule); open, the menu floats under it on desktop and stacks
   inside the phone menu. The summary is styled as a nav link with a caret. */
.nav__sub { position: relative; }
.nav__sub summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav__sub summary::-webkit-details-marker { display: none; }
.nav__sub summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--ease-out);
}
.nav__sub[open] summary::after { transform: translateY(1px) rotate(225deg); }
.nav__link--sub.is-current { border-bottom-color: var(--champagne); color: #fff; }
.nav__menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  z-index: 50;
}
.nav__menu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 10px; height: 10px;
  background: var(--navy-deep);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(-50%) rotate(45deg);
}
.nav__item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}
.nav__item b { display: block; font-weight: 600; color: #fff; }
.nav__item span { display: block; font-size: 0.86rem; color: rgba(255, 255, 255, 0.62); margin-top: 2px; }
.nav__item:hover, .nav__item:focus-visible { background: rgba(255, 255, 255, 0.07); }
.nav__item[aria-current="page"] b { color: var(--champagne); }

/* Phone menu: the <details> is a no-JS state holder, its [open] drives the
   dropdown via :has(). The nav is a SIBLING of the details, never a child. */
.nav-toggle { display: none; }
.nav-toggle summary {
  list-style: none;
  cursor: pointer;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.95rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-toggle summary::-webkit-details-marker { display: none; }

@media (max-width: 59.9rem) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-deep);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    box-shadow: var(--shadow-lift);
  }
  .masthead:has(.nav-toggle[open]) .nav { display: flex; }
  .nav__link { padding: 13px var(--gutter); border-bottom: none; font-size: 1.05rem; }
  .nav__link[aria-current="page"] { color: var(--champagne); }
  .nav .btn { margin: 10px var(--gutter) 0; justify-content: center; }
  /* the dropdown stacks inside the phone menu instead of floating */
  .nav__sub summary { display: flex; justify-content: space-between; }
  .nav__link--sub.is-current { color: var(--champagne); }
  .nav__menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.18);
  }
  .nav__menu::before { display: none; }
  .nav__item { padding: 11px var(--gutter) 11px calc(var(--gutter) + 14px); border-radius: 0; }
}

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: var(--t-press), background-color 180ms var(--ease-out), color 180ms var(--ease-out);
  min-height: 46px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #1B3A66; }
/* ⛔ .on-navy a (0,1,1) outranks .btn--x (0,1,0), which once painted
   champagne text on the champagne pill. Every button rule is therefore
   written at (0,2,0) so a dark section can never repaint a button. */
.btn.btn--gold, .on-navy .btn--gold { background: var(--champagne); color: var(--navy); }
.btn.btn--gold:hover { background: #F4E5AB; }
.btn.btn--primary, .on-navy .btn--primary { color: #fff; }
.btn--ghost { border-color: rgba(18, 41, 74, 0.4); color: var(--ink-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); }
.on-navy .btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.on-navy .btn--ghost:hover { border-color: #fff; }
.btn__arrow { font-family: var(--font-body); }

/* ── panels: the n2 grammar ───────────────────────────────── */
.panel {
  border-radius: var(--r-panel);
  margin-inline: var(--page-gutter);
  padding-block: var(--sect);
}
/* ONE spacing rule for the whole page flow: hero, page heads and panels all
   breathe by the same gap, so there is never a flush seam next to a gapped
   one (the hero/promises band shipped flush because .panel + .panel could
   not see the hero). */
main > * + * { margin-top: var(--page-gutter); }
.panel--paper { background: var(--paper); }
.panel--cream { background: var(--cream); }
.panel--wash { background: var(--wash); }
.panel--navy { background: var(--navy); }
.panel--deep { background: var(--navy-deep); }
.panel--seam { padding-block: var(--seam); }

/* ── eyebrow: pill, used sparingly (max one per three panels) ─ */
.eyebrow {
  display: inline-block;
  background: var(--wash);
  color: var(--gold-deep);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.on-navy .eyebrow {
  background: rgba(239, 219, 147, 0.12);
  color: var(--champagne);
  border-color: rgba(239, 219, 147, 0.4);
}

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  border-radius: var(--r-panel);
  margin-inline: var(--page-gutter);
  margin-top: var(--page-gutter);
  overflow: hidden;
  position: relative;
  background: var(--cream);
}
.hero__media, .hero__media picture, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 30%;
}
.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3.2rem, 7vw, 5.5rem) var(--gutter);
  min-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__copy { max-width: 30rem; }
.hero__copy h1 { margin-bottom: 0.45em; }
.hero__copy .lede { font-size: 1.16rem; max-width: 27rem; margin-bottom: 1.4em; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Phones get their own portrait frame instead of a destructive crop. */
.hero__mobile { display: none; }
@media (max-width: 47.9rem) {
  .hero__media { display: none; }
  .hero { background: var(--paper); }
  .hero__inner { min-height: 0; padding-top: 2.6rem; padding-bottom: 2.2rem; }
  .hero__mobile {
    display: block;
    margin: 1.8rem calc(-1 * var(--gutter)) 0;
  }
  .hero__mobile img { width: 100%; height: auto; border-radius: 0; }
}

/* ── promises row (her three checkmarks, each carrying its meaning) ── */
.promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
}
.promise { margin: 0; max-width: none; }
.promise__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 650;
  color: #fff;
  margin-bottom: 8px;
}
.promise__head svg { flex: none; }
.promise p { margin: 0; font-size: 0.99rem; color: var(--on-navy-mut); max-width: 30ch; }
@media (max-width: 59.9rem) {
  .promises { grid-template-columns: 1fr; gap: 20px; }
  .promise p { max-width: 52ch; }
}

/* ── cards ────────────────────────────────────────────────── */
.cards { display: grid; gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 59.9rem) {
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
}
.card {
  background: #fff;
  border: 1px solid rgba(18, 41, 74, 0.08);
  border-radius: var(--r-card);
  padding: clamp(1.3rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.card--cream { background: var(--cream); border-color: transparent; box-shadow: none; }
.card--navy { background: var(--navy); border-color: transparent; }
.card h3 { margin-bottom: 0.4em; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card__price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 650;
  color: var(--ink-strong);
  margin: 0 0 2px;
}
.card__tag { font-size: var(--fs-small); color: var(--gold-deep); font-weight: 650; margin-bottom: 12px; }

/* ── split layout (media + copy) ──────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
/* ⛔ Grid/flex children default to min-width:auto, so an image's intrinsic
   width (now declared for CLS) silently widens its track and the page
   overflows. Found at 768px by the width sweep; every layout child opts out. */
.split > *, .cards > *, .cta-band__inner > *, .footer__top > *, .hub-list > * { min-width: 0; }
.split--wide-copy { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 59.9rem) {
  .split, .split--wide-copy { grid-template-columns: 1fr; }
}
.figure { margin: 0; }
.figure img { border-radius: var(--r-img); width: 100%; object-fit: cover; }
.figure--2x3 img { aspect-ratio: 2 / 3; }
.figure--3x2 img { aspect-ratio: 3 / 2; }
.figure--1x1 img { aspect-ratio: 1 / 1; }
.figure--16x9 img { aspect-ratio: 16 / 9; }

/* ── phases ───────────────────────────────────────────────── */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 59.9rem) { .phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35.9rem) { .phases { grid-template-columns: 1fr; } }
.phase {
  background: #fff;
  border-radius: var(--r-card);
  border: 1px solid rgba(18, 41, 74, 0.08);
  padding: 1.3rem 1.3rem 1.1rem;
}
.phase__n {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--gold-deep);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.phase h3 { font-size: 1.12rem; margin-bottom: 0.35em; }
.phase p { font-size: 0.97rem; margin: 0; color: var(--mut); }

/* ── answer-first lede block ──────────────────────────────── */
.answer {
  background: var(--wash);
  border-left: 3px solid var(--gold-line);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  margin: 0 0 2rem;
  /* The box hugs its text: a full-width box around a 62ch paragraph reads
     as a layout mistake (caught by Daniel on /score/, 2026-09-06). */
  max-width: calc(62ch + 2.8rem);
}
.answer p { margin: 0; font-size: 1.06rem; max-width: 62ch; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { max-width: var(--wrap-narrow); }
.faq details {
  border-bottom: 1px solid rgba(18, 41, 74, 0.14);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-strong);
  padding: 14px 30px 14px 0;
  position: relative;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold-deep);
  transition: var(--t-press);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq__a { padding: 0 0 18px; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ── steps / milestones ───────────────────────────────────── */
.steps { counter-reset: step; padding: 0; margin: 0; list-style: none; max-width: var(--wrap-narrow); }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.6rem 64px;
  margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--champagne);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 4px;
  width: 2px;
  background: var(--gold-line);
}
.steps h3 { margin-bottom: 0.25em; }
.steps p { margin-bottom: 0; }

/* ── library hub rows ─────────────────────────────────────── */
.hub-list { display: grid; gap: 16px; }
.hub-row {
  display: block;
  background: #fff;
  border: 1px solid rgba(18, 41, 74, 0.08);
  border-radius: var(--r-card);
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: var(--t-press), box-shadow 200ms var(--ease-out);
}
.hub-row:active { transform: scale(0.99); }
.hub-row:hover { box-shadow: var(--shadow-lift); }
.hub-row h3 { margin-bottom: 0.3em; }
.hub-row p { margin: 0; color: var(--mut); }
.hub-row .hub-row__go { color: var(--gold-deep); font-weight: 650; font-size: 0.95rem; }

/* Planned cluster topics: named, honest, not links (nothing links to a 404). */
.planned { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.planned li {
  background: var(--cream);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0;
}

/* ── forms ────────────────────────────────────────────────── */
.form { max-width: 34rem; }
.form label { display: block; font-weight: 650; color: var(--ink-strong); margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(18, 41, 74, 0.25);
  border-radius: var(--r-input);
  padding: 12px 14px;
  margin-bottom: 4px;
}
.form input:focus, .form textarea:focus {
  outline: 2.5px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
.form .field { margin-bottom: 18px; }
.form .hint { font-size: var(--fs-small); color: var(--mut); margin: 0; }
.form .hx { position: absolute; left: -9999px; }
.on-navy .form input, .on-navy .form textarea { border-color: transparent; }
.on-navy .form label { color: #fff; }
.on-navy .form .hint { color: var(--on-navy-mut); }

/* ── video facade (click-to-load, self-hosted poster) ─────── */
.yt {
  position: relative;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 16 / 9;
}
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 0;
  background: rgba(18, 41, 74, 0.85);
  color: var(--champagne);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-press), background-color 180ms var(--ease-out);
}
.yt__play:hover { background: var(--navy); }
.yt__play:active { transform: scale(0.94); }
.yt__play svg { margin-left: 4px; }

/* ── welcome circle (her idea, built calm) ────────────────── */
.welcome { position: fixed; right: 18px; bottom: 18px; z-index: 50; }
.welcome__btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2.5px solid var(--champagne);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--navy);
  box-shadow: var(--shadow-lift);
  transition: var(--t-press);
}
.welcome__btn:active { transform: scale(0.95); }
.welcome__btn img { width: 100%; height: 100%; object-fit: cover; }
.welcome__hint {
  position: absolute;
  right: 74px;
  bottom: 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.92rem;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.welcome__panel {
  position: fixed;
  right: 18px;
  bottom: 94px;
  width: min(360px, calc(100vw - 36px));
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(18, 41, 74, 0.1);
  padding: 1.2rem 1.2rem 1.3rem;
}
.welcome__panel[hidden] { display: none; }
.welcome__panel h2 { font-size: 1.25rem; margin-bottom: 0.3em; }
.welcome__panel p { font-size: 0.98rem; color: var(--mut); }
.welcome__paths { display: grid; gap: 8px; margin-top: 12px; }
.welcome__paths a {
  display: block;
  background: var(--cream);
  border-radius: 12px;
  padding: 11px 14px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink-strong);
  font-size: 0.98rem;
}
.welcome__paths a:hover { background: var(--wash); }
.welcome__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mut);
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
@media (max-width: 47.9rem) {
  .welcome { right: 12px; bottom: 12px; }
  .welcome__btn { width: 56px; height: 56px; }
  .welcome__hint { display: none; }
}

/* ── page head (interior pages) ───────────────────────────── */
.page-head { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.2rem, 3vw, 2rem); }
.page-head .crumbs {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  font-size: var(--fs-small);
  color: var(--mut);
  flex-wrap: wrap;
}
.page-head .crumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--gold-line); }
.page-head .crumbs a { color: var(--mut); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--ink-strong); }
.page-head .lede { font-size: 1.14rem; max-width: 42rem; }

/* ── byline / author strip ────────────────────────────────── */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(18, 41, 74, 0.12);
  max-width: var(--wrap-narrow);
}
.byline img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.byline p { margin: 0; font-size: 0.95rem; color: var(--mut); }
.byline strong { display: block; font-size: 1rem; }

/* ── safety note ──────────────────────────────────────────── */
.safety {
  background: var(--cream);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  font-size: 0.95rem;
  color: var(--ink);
  max-width: var(--wrap-narrow);
}
.safety p { margin: 0; }

/* ── CTA band ─────────────────────────────────────────────── */
.cta-band { text-align: left; }
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 59.9rem) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band .btn { justify-self: start; }

/* ── footer ───────────────────────────────────────────────── */
.footer { background: var(--navy-deep); margin-top: var(--page-gutter); }
.footer .wrap { padding-block: clamp(2.6rem, 6vw, 4rem) 1.6rem; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2rem;
}
@media (max-width: 59.9rem) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 35.9rem) { .footer__top { grid-template-columns: 1fr; } }
.footer__lockup { width: min(190px, 100%); height: auto; }
.footer h2 {
  color: var(--on-navy-mut);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.55em; }
.footer a { color: var(--on-navy); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--champagne); }
.footer__tag { color: var(--on-navy-mut); font-size: 0.98rem; max-width: 26ch; margin-top: 14px; }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--on-navy-mut);
  font-size: var(--fs-small);
}
.footer__base p { margin: 0; }
.footer__safety {
  color: var(--on-navy-mut);
  font-size: var(--fs-small);
  max-width: 70ch;
  padding-bottom: 1.2rem;
}
.footer__credit { display: flex; align-items: center; gap: 10px; }
.footer__credit img { height: 30px; width: auto; }

/* ============================================================
   EDITORIAL LAYER — added 2026-09-09.

   Why this exists: the first build was structurally right and
   compositionally flat. Every section was a rounded panel of near-
   identical beige holding an equal-weight grid, which is the exact
   signature that reads as machine-made. This layer adds the four
   things that were missing — scale contrast, ground contrast,
   photography, and craft detail — WITHOUT touching her identity.
   Palette, mark and display face are unchanged.
   ============================================================ */

/* ---------- Paper grain. One inline SVG, zero requests. -------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.panel--navy.grain::after, .panel--deep.grain::after { opacity: 0.22; mix-blend-mode: overlay; }

/* ---------- Gold hairline rule, the editorial connective ------- */
.rule {
  width: 56px;
  height: 2px;
  border: 0;
  margin: 0 0 20px;
  background: var(--champagne);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .reveal .rule, html:not(.no-js) .rule.reveal { transform: scaleX(0); transition: transform 700ms var(--ease-out) 120ms; }
  html:not(.no-js) .reveal.is-in .rule, html:not(.no-js) .rule.reveal.is-in { transform: scaleX(1); }
}

/* Letterspaced small-caps label. Used instead of a second type size. */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.on-navy .label { color: var(--champagne); }

/* ============================================================
   HERO — feature variant (home only; utility pages keep .hero)
   ============================================================ */
.hero--feature { min-height: min(86svh, 760px); border-radius: var(--r-panel); }
.hero--feature .hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(8,19,37,0.90) 0%, rgba(8,19,37,0.74) 32%, rgba(8,19,37,0.34) 55%, rgba(8,19,37,0.06) 72%, rgba(8,19,37,0) 86%),
    linear-gradient(to top, rgba(8,19,37,0.55) 0%, rgba(8,19,37,0) 42%);
}
.hero--feature .hero__inner { min-height: min(86svh, 760px); align-items: center; }
.hero--feature .hero__copy { max-width: 34rem; }
.hero--feature h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.35rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: 0.5em;
}
/* The single most "made by a person" move on the page: the second
   clause drops to italic champagne instead of arriving as more roman. */
.hero__accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
}
.hero--feature .lede {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.26rem);
  color: rgba(255,255,255,0.90);
  max-width: 30rem;
  margin-bottom: 1.5em;
}
.hero__cred {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(239,219,147,0.32);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: rgba(239,219,147,0.95);
  max-width: 30rem;
}
.hero__cred strong { color: #fff; font-weight: 650; letter-spacing: 0; }

/* Ken Burns. 28s, 3% — felt, not noticed. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero--feature .hero__media img { animation: kenburns 28s var(--ease-out) both; }
}
@keyframes kenburns {
  from { transform: scale(1.0) translate3d(0,0,0); }
  to   { transform: scale(1.055) translate3d(-1%, -0.6%, 0); }
}

/* ---------- Credential / promise strip ------------------------- */
.promises { align-items: start; }
.promise__head {
  font-family: var(--font-display);
  font-size: 1.14rem;
  letter-spacing: -0.01em;
}
.promise__n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.55;
  margin-bottom: 10px;
}

/* ============================================================
   FRAMED PORTRAIT — an offset gold rule behind the photo.
   Cheap, entirely CSS, and it is the detail that stops a photo
   reading as "an image dropped into a grid cell".
   ============================================================ */
.frame { position: relative; margin: 0; }
.frame::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--gold-line);
  border-radius: var(--r-img);
  z-index: 0;
}
.frame--left::before { inset: 18px 18px -18px -18px; }
.frame .figure, .frame picture, .frame img { position: relative; z-index: 1; }
.frame img { border-radius: var(--r-img); box-shadow: var(--shadow-soft); }
@media (max-width: 59.9rem) {
  .frame::before { inset: 12px -12px -12px 12px; }
  .frame--left::before { inset: 12px 12px -12px -12px; }
}

/* A caption that reads as editorial credit, not alt text. */
.frame__cap {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ============================================================
   QUOTE BAND — a full-bleed photograph with the quote in a floating
   card offset to one side. ⛔ Deliberately NOT text-over-portrait:
   every frame we hold is Stephanie alone and centred, so a centred
   overlay would sit on her face. The card also gives the page one
   genuinely magazine-like device, which is the single cheapest way
   to stop a layout reading as generated.
   ============================================================ */
.quoteband {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 52vw, 620px);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.quoteband picture, .quoteband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  z-index: -2;
  border-radius: 0;
}
.quoteband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(102deg, rgba(8,19,37,0.55) 0%, rgba(8,19,37,0.30) 34%, rgba(8,19,37,0.04) 56%, rgba(8,19,37,0) 74%);
}
.quotecard {
  margin: 0;
  max-width: min(30rem, 100%);
  background: rgba(247,244,238,0.96);
  backdrop-filter: blur(3px);
  border-radius: var(--r-card);
  border-top: 3px solid var(--champagne);
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
  box-shadow: 0 24px 60px rgba(8,19,37,0.28);
}
.quotecard q, .quotecard p {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.95rem + 1.7vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0;
  max-width: none;
  text-wrap: balance;
}
.quotecard q { quotes: none; }
.quotecard em { font-style: italic; color: var(--gold-deep); }
.quotecard cite {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gold-line);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
@media (max-width: 47.9rem) {
  .quoteband { min-height: 0; align-items: stretch; padding: 0; background: var(--navy); }
  .quoteband picture, .quoteband img { position: relative; height: clamp(280px, 68vw, 420px); z-index: 0; }
  .quoteband::before { display: none; }
  .quotecard { max-width: none; border-radius: 0; box-shadow: none; background: var(--paper); }
}

/* ============================================================
   PHASE LINE — the four phases as a numbered editorial sequence
   on navy, joined by one hairline, instead of four identical
   grey boxes. On a phone it becomes a snap carousel, which is
   literally the "flipping through cards, not scrolling" she asked
   for and the reason n2co was her best mobile experience.
   ============================================================ */
.phaseline { position: relative; margin-top: 40px; }
.phaseline__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
}
/* the connecting hairline, behind the numerals */
.phaseline__track::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, rgba(239,219,147,0) 0%, rgba(239,219,147,0.45) 12%, rgba(239,219,147,0.45) 88%, rgba(239,219,147,0) 100%);
}
.pstep { position: relative; padding-top: 0; }
.pstep__n {
  display: block;
  font-family: var(--font-display);
  font-size: 3.1rem;
  line-height: 1;
  font-weight: 500;
  color: var(--champagne);
  margin: 0 0 22px;
  position: relative;
  padding-right: 16px;
  background: var(--navy);
  width: max-content;
}
.pstep h3 { color: #fff; font-size: 1.16rem; margin-bottom: 0.4em; }
.pstep p { color: var(--on-navy-mut); font-size: 0.97rem; margin: 0; max-width: 32ch; }
.pstep__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid rgba(239,219,147,0.5);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--champagne);
}

@media (max-width: 59.9rem) {
  .phaseline {
    margin-inline: calc(var(--gutter) * -1);
  }
  .phaseline__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(76%, 300px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .phaseline__track::-webkit-scrollbar { display: none; }
  .phaseline__track::before { display: none; }
  .pstep {
    scroll-snap-align: start;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(239,219,147,0.22);
    border-radius: var(--r-card);
    padding: 22px 20px 24px;
  }
  .pstep__n { background: transparent; font-size: 2.6rem; margin-bottom: 14px; }
  .pstep p { max-width: none; }
  .phaseline__hint {
    display: block;
    margin: 14px var(--gutter) 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(239,219,147,0.75);
  }
}
.phaseline__hint { display: none; }

/* ============================================================
   LADDER — the three pathways with real hierarchy. Three cards of
   identical weight tell the reader nothing; this one shows the
   rungs. ⛔ The marker is "the entry point" (a fact about how the
   system is designed), NEVER "most families choose" — she has no
   order history and we do not manufacture one.
   ============================================================ */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 59.9rem) { .ladder { grid-template-columns: 1fr; } }

.rung {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(18,41,74,0.10);
  border-radius: var(--r-card);
  padding: 30px 26px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.rung:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.rung__step {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold-line);
  margin: 0 0 18px;
}
.rung h3 { font-size: 1.28rem; margin-bottom: 0.35em; }
.rung__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-strong);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
}
.rung__price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--mut); letter-spacing: 0.04em; }
.rung p { color: var(--mut); font-size: 1rem; }
.rung .btn { margin-top: auto; align-self: flex-start; }

/* The entry rung: gold edge, lifted, and a flag that states a
   design fact rather than a popularity claim. */
.rung--entry {
  border-color: var(--gold-line);
  border-width: 1.5px;
  box-shadow: var(--shadow-lift);
}
.rung__flag {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--champagne);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

/* ============================================================
   SIGNATURE — her name in the display italic, closing the About
   block the way a letter closes. Costs nothing, reads as human.
   ============================================================ */
.sig {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--ink-strong);
  margin: 26px 0 6px;
  line-height: 1;
}
.sig + .sig__role {
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 24px;
}

/* Credential chips — honest proof where press proof does not exist. */
.creds { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.creds li {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--ink-strong);
  background: rgba(255,255,255,0.55);
}
.on-navy .creds li { border-color: rgba(239,219,147,0.4); color: var(--on-navy); background: rgba(255,255,255,0.04); }

/* Gold check list — replaces plain bullets in the problem block. */
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
.ticks li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 0.7em;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 16px;
  height: 1.5px;
  background: var(--gold-line);
}

/* Wide feature split: photo gets real estate, copy stays readable. */
.split--feature { grid-template-columns: 1fr 0.82fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--portrait { grid-template-columns: 0.78fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 59.9rem) {
  .split--feature, .split--portrait { grid-template-columns: 1fr; }
  .split--portrait > .frame { order: -1; }
}

/* ============================================================
   HERO (feature) on phones. The base .hero drops the background and
   stacks copy above a portrait on paper — safe, but it throws away
   the whole "high end" register on the canvas she actually judges
   sites by. hero-mobile (DSC_3329) is a native 2:3 frame with her
   face in the upper third, so the copy anchors to the BOTTOM over a
   scrim and never touches her face.
   ============================================================ */
@media (max-width: 47.9rem) {
  .hero--feature { background: var(--navy); }
  .hero--feature .hero__mobile {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
  }
  .hero--feature .hero__mobile picture,
  .hero--feature .hero__mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
  }
  .hero--feature .hero__mobile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,19,37,0.94) 0%, rgba(8,19,37,0.86) 26%, rgba(8,19,37,0.45) 48%, rgba(8,19,37,0.10) 68%, rgba(8,19,37,0.20) 100%);
  }
  .hero--feature .hero__inner {
    position: relative;
    z-index: 1;
    min-height: 88svh;
    justify-content: flex-end;
    padding-top: 3rem;
    padding-bottom: 2.4rem;
  }
  .hero--feature h1 { font-size: clamp(2.2rem, 1.2rem + 5.6vw, 2.9rem); }
  .hero--feature .hero__cred { font-size: 0.8rem; margin-top: 20px; padding-top: 14px; }
  .hero--feature .hero__ctas .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* Scroll cue: a single hairline that breathes. Desktop only. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(239,219,147,0) 0%, rgba(239,219,147,0.85) 100%);
  z-index: 2;
}
@media (max-width: 59.9rem) { .hero__cue { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__cue { animation: cue 2.6s ease-in-out infinite; transform-origin: top center; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ------------------------------------------------------------
   Hero (feature) corrections, verified against real captures
   2026-09-09:

   1. .hero--feature is a dark surface but is NOT .on-navy (the
      panel classes carry that), so .btn--ghost fell through to the
      light-ground variant: navy text on a navy scrim, effectively
      invisible. Scoped fix rather than adding .on-navy, because
      .on-navy would also repaint the headline and lede.
   2. On a phone the copy block sat over her FACE. hero-mobile is a
      2:3 frame cropped on width, so her face lands at ~22% of the
      hero height no matter how tall it is. The copy therefore has
      to start below ~40%: taller hero, tighter internals, and a
      scrim that goes properly opaque behind the text.
   ------------------------------------------------------------ */
.hero--feature .btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.hero--feature .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }

@media (max-width: 47.9rem) {
  .hero--feature .hero__inner { min-height: 94svh; padding-bottom: 2rem; }
  .hero--feature .hero__mobile::after {
    background: linear-gradient(to top,
      rgba(8,19,37,0.97) 0%,
      rgba(8,19,37,0.95) 34%,
      rgba(8,19,37,0.86) 46%,
      rgba(8,19,37,0.42) 60%,
      rgba(8,19,37,0.08) 76%,
      rgba(8,19,37,0.24) 100%);
  }
  .hero--feature h1 { font-size: clamp(2rem, 1.1rem + 5vw, 2.6rem); margin-bottom: 0.42em; }
  .hero--feature .lede { font-size: 1.02rem; margin-bottom: 1.15em; }
  .hero--feature .hero__ctas { gap: 9px; }
  .hero--feature .hero__ctas .btn { padding-block: 13px; }
  .hero--feature .hero__cred { margin-top: 16px; padding-top: 12px; font-size: 0.74rem; line-height: 1.45; }
  /* the welcome circle must not sit on the hero CTA */
  .welcome { bottom: 12px; right: 12px; }
}

/* The welcome circle is fixed bottom-right and lands on the hero's
   credential line at the bottom of the first screen. Keep the text clear
   of it rather than moving the circle, which she specifically likes. */
@media (max-width: 47.9rem) {
  .hero--feature .hero__cred { padding-right: 66px; }
}

/* ============================================================
   ILLUSTRATIVE IMAGERY LAYER — added 2026-09-09.

   Why: her OWN live site tells the story in pictures and the first
   rebuild dropped all of it. Measured off goldenhouraging.com on
   2026-09-09: three mountain photographs, one per pathway card; an
   aging couple in a golden field beside "Two Parents, Two Distinct
   Scores"; a road; a hands band. Every serious site in the category
   does the same (agingparents.com runs an explicit overwhelmed →
   hopeful photographic sequence). Mountains are ALREADY her visual
   language, and they tie to the painted mountain mural behind her in
   the hero photograph and to the name Golden Hour itself.

   ⛔ The art we added is landscape and still life ONLY. No people, no
      faces, no hands, no care settings, no products. Two reasons: a
      generated person would be the most detectable AI tell on a page
      whose whole brief was "must not look machine made", and nothing
      here may imply a client or a relative we cannot evidence.
   ============================================================ */

.figure--4x3 img { aspect-ratio: 4 / 3; }

/* deep links from review emails land below the sticky masthead */
[id] { scroll-margin-top: 96px; }

/* the one-parent scope line on the $600 tier card (her 09-10 review) */
.card__scope { font-size: 0.94rem; border-left: 2px solid var(--gold-line); padding-left: 12px; }

/* About: story beside her seated-on-the-rocks portrait (photo LEFT on desktop,
   so the two portraits on the page alternate sides; DOM order on phones). */
.split--story { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--story > .frame { order: -1; }
@media (max-width: 59.9rem) {
  .split--story { grid-template-columns: 1fr; }
  .split--story > .frame { order: 0; }
}

/* ── About: portrait hero. The page-head grammar with her in it: rule,
   label, a balanced headline, the lede, the credential chips, and the
   About portrait in an offset frame. Nothing floats in empty sand. ── */
.about-hero { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(1rem, 3vw, 1.6rem); }
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-hero .crumbs { margin-bottom: 26px; }
.about-hero h1 {
  font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
  max-width: 15ch;
  margin-bottom: 0.5em;
}
.about-hero .nowrap { white-space: nowrap; }
.about-hero .lede { max-width: 32rem; margin-bottom: 0; }
.about-hero .creds { margin: 26px 0 0; }
.about-hero__photo { width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 59.9rem) {
  .about-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-hero__photo { max-width: 100%; justify-self: stretch; }
  .about-hero h1 { max-width: none; }
}

/* ---------- Problem / resolution pair -------------------------- */
.beforeafter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: 34px;
}
@media (max-width: 47.9rem) { .beforeafter { grid-template-columns: 1fr; } }
.ba-item { margin: 0; }
.ba-item img { border-radius: var(--r-img); box-shadow: var(--shadow-soft); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ba-item figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mut);
}
.ba-item figcaption b {
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-strong);
  font-weight: 600;
}
.ba-item--after figcaption b { color: var(--gold-deep); }

/* ---------- Phase steps, now carrying the light of their hour --- */
.phaseline--img .phaseline__track::before { display: none; }
.pstep__img { margin: 0 0 -30px; position: relative; }
.pstep__img img {
  width: 100%;
  border-radius: var(--r-img);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(4, 12, 26, 0.45);
}
.pstep__img::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  border-radius: 0 0 var(--r-img) var(--r-img);
  background: linear-gradient(to top, rgba(8,19,37,0.92) 0%, rgba(8,19,37,0.45) 55%, rgba(8,19,37,0) 100%);
}
.phaseline--img .pstep__n {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 0 0 0 16px;
  margin-bottom: 14px;
  font-size: 2.7rem;
  text-shadow: 0 2px 14px rgba(4, 12, 26, 0.65);
}
.phaseline--img .pstep h3 { padding-left: 16px; }
.phaseline--img .pstep p { padding-left: 16px; }
@media (max-width: 59.9rem) {
  .phaseline--img .pstep { padding-inline: 0; padding-top: 0; overflow: hidden; }
  .phaseline--img .pstep h3, .phaseline--img .pstep p { padding-inline: 20px; }
  .phaseline--img .pstep p { padding-bottom: 22px; }
  .pstep__img { margin-bottom: -34px; }
  .pstep__img img { border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: none; }
  .pstep__img::after { border-radius: 0; }
  .phaseline--img .pstep__n { padding-left: 20px; }
}

/* ---------- Pathway rungs, with their own mountain ------------- */
.rung { padding: 0; overflow: hidden; }
.rung__img { margin: 0; }
.rung__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rung__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.rung--entry .rung__flag { top: auto; margin-top: -16px; position: relative; left: 0; align-self: flex-start; }

/* ---------- CTA band over a photograph ------------------------- */
.cta-band--image { position: relative; overflow: hidden; isolation: isolate; }
.cta-band--image picture, .cta-band--image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; z-index: -2; border-radius: 0;
}
.cta-band--image::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(8,19,37,0.94) 0%, rgba(8,19,37,0.88) 42%, rgba(8,19,37,0.62) 68%, rgba(8,19,37,0.45) 100%);
}
@media (max-width: 47.9rem) {
  .cta-band--image::before {
    background: linear-gradient(to top, rgba(8,19,37,0.96) 0%, rgba(8,19,37,0.90) 55%, rgba(8,19,37,0.72) 100%);
  }
}

/* The photographic closing band needs real height or the scrim eats the
   whole picture: at the default seam padding the image showed as a dark
   smear. Give it room and sit the copy in the open left third. */
.cta-band--image { min-height: 380px; display: grid; align-items: center; }
.cta-band--image picture, .cta-band--image img { object-position: center 46%; }
@media (max-width: 47.9rem) { .cta-band--image { min-height: 340px; } }

/* ============================================================
   INNER PAGES — the same editorial system as home, applied to the
   other nineteen. Added 2026-09-09.

   Nine content pages carried no photography at all (the library hub,
   all four pillar guides, how-it-works, start, watch and the legal
   set). Same rule as everywhere else: landscape and still life, no
   people, and deliberately nothing that resembles her Dossier
   product, because a stack of navy-and-gold volumes on a library
   page would read as a photograph of a $1,500 item whose real
   appearance is still unconfirmed.
   ============================================================ */

/* Page heads get the hero's typographic treatment, one step down. */
.page-head h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.page-head .rule { margin-bottom: 16px; }
.page-head .label { margin-bottom: 18px; }
.page-head .lede { color: var(--mut); }

/* Full-width illustrative band under a page head. */
.pband {
  position: relative;
  margin-inline: var(--page-gutter);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--cream);
}
.pband picture, .pband img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 340px);
  object-fit: cover;
  object-position: center 55%;
}
.pband--tall img { height: clamp(240px, 34vw, 440px); }
.pband__cap {
  position: absolute;
  left: clamp(16px, 3vw, 30px);
  bottom: clamp(14px, 2.4vw, 22px);
  margin: 0;
  max-width: 34ch;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(18, 41, 74, 0.78);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}

/* Pathway pages: the tier's own mountain, sat beside the summary. */
.tier-hero { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
@media (max-width: 59.9rem) { .tier-hero { grid-template-columns: 1fr; } }
.tier-hero .figure img { border-radius: var(--r-img); box-shadow: var(--shadow-soft); }

/* A pillar guide's opening band sits tighter than a hub's. */
.pband--slim img { height: clamp(160px, 20vw, 260px); }

/* The phase sequence on a LIGHT ground (how-it-works). Same component, ink
   flipped: .pstep was written for the navy panel on the home page, so
   without this the labels ship white on cream and vanish. */
.phaseline--light .pstep h3 { color: var(--ink-strong); }
.phaseline--light .pstep p { color: var(--mut); }
/* ⚠ The numeral is NOT on the light ground: it overlaps the bottom of the
   photograph, on the dark scrim. Recolouring it to gold-deep made it
   invisible. Only the text below the image flips. */
.phaseline--light .pstep__n { color: var(--champagne); }
.phaseline--light .pstep__img img { box-shadow: var(--shadow-soft); }
@media (max-width: 59.9rem) {
  .phaseline--light .pstep {
    background: var(--paper);
    border-color: rgba(18, 41, 74, 0.12);
  }
}

/* ------------------------------------------------------------
   BAND CROPPING FIX (2026-09-09). The first .pband was a short
   letterbox with a centre-weighted crop, which is fine for a still
   life shot flat on a table and terrible for a mountain: it sliced
   the summit off every landscape band. A peak that runs out of the
   top of the frame reads as a mistake, because it is one.

   Two rules now:
     - landscape bands are TALLER, so the whole massif fits
     - the crop is weighted UP the frame, because in every one of
       these frames the subject is the skyline, not the foreground
   ------------------------------------------------------------ */
/* Default is a still life shot flat on a table, so it stays centred. Only
   the mountain bands want the upward bias, and they ask for it with --peak. */
.pband picture, .pband img {
  height: clamp(260px, 32vw, 430px);
  object-position: center 50%;
}
/* Mountains: the summit is the subject. Give it room and hold the sky. */
.pband--peak picture, .pband--peak img {
  height: clamp(320px, 42vw, 580px);
  object-position: center 34%;
}
.pband--tall picture, .pband--tall img { height: clamp(300px, 38vw, 520px); }
/* Still life sits flat and centred, so it can stay shorter. */
.pband--slim picture, .pband--slim img {
  height: clamp(210px, 24vw, 330px);
  object-position: center 50%;
}
@media (max-width: 47.9rem) {
  .pband--peak picture, .pband--peak img { height: clamp(280px, 62vw, 380px); }
}

/* Same fault on the closing band: the foothills were losing their tops. */
.cta-band--image picture, .cta-band--image img { object-position: center 38%; }

/* ------------------------------------------------------------
   PRODUCT-TIER CARDS (the $300 / $600 / $1,500 ladder).
   ⛔ These images are METAPHOR, not product photography, and that
   is deliberate on both counts: the first two tiers are DIGITAL,
   so a printed book would misrepresent what arrives, and the
   Dossier box's real appearance is still unconfirmed. Real
   product photography replaces the third the day she confirms it.
   ------------------------------------------------------------ */
.card--tier { padding: 0; overflow: hidden; }
.card--tier .card__img { margin: 0; }
.card--tier .card__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.card--tier .card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }

/* ============================================================
   PROMISE STRIP, rebuilt 2026-09-09.

   Was: three thin text columns adrift in a tall navy band, each led
   by a 20px hairline tick, heading and body at nearly the same
   weight. Nothing held them together and nothing said which was the
   heading, so the band read as empty with some small text in it.

   Now: each promise is a proper column — a champagne rule across the
   top, a filled mark that is actually visible, a display-serif head,
   then body. Hairline dividers between columns on desktop give the
   band structure instead of whitespace. The three checkmarks are HER
   device, carried over from her live site, so they stay; they are
   just given weight.
   ============================================================ */
.promises {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
}
.promise {
  padding: 0 clamp(20px, 3vw, 44px);
  border-left: 1px solid rgba(239, 219, 147, 0.18);
  display: flex;
  flex-direction: column;
}
.promise:first-child { border-left: 0; padding-left: 0; }
.promise:last-child { padding-right: 0; }

.promise__rule {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0 0 22px;
  background: linear-gradient(90deg, var(--champagne) 0%, rgba(239, 219, 147, 0.22) 100%);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .reveal .promise__rule { transform: scaleX(0); transition: transform 760ms var(--ease-out) 120ms; }
  html:not(.no-js) .reveal.is-in .promise__rule { transform: scaleX(1); }
}

.promise__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--champagne);
  color: var(--navy);
  margin-bottom: 16px;
  flex: none;
}
.promise__mark svg { display: block; }

.promise__head {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.42rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
.promise p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-navy-mut);
  max-width: 34ch;
}

@media (max-width: 59.9rem) {
  .promises { grid-template-columns: 1fr; }
  .promise {
    border-left: 0;
    border-top: 1px solid rgba(239, 219, 147, 0.16);
    padding: 26px 0 0;
  }
  .promise:first-child { border-top: 0; padding-top: 0; }
  .promise__rule { display: none; }
  .promise__mark { width: 30px; height: 30px; margin-bottom: 12px; }
  .promise p { max-width: 46ch; }
}