/* ===========================================================
   journey.css — the site-wide motion system.

   Every page is a scroll-driven journey rather than a static
   document: a progress rail, staged entrances, headings that
   unmask word by word, panels that lift as you reach them,
   cursor-aware buttons and cards, and sticky scenes that
   advance as you scroll through them.
   =========================================================== */

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--forest);
  color: var(--bone);
  padding: .8em 1.4em;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  font-size: .9rem;
  transition: transform .3s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline: none; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2.5px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Scroll progress rail ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--forest), var(--coral) 70%, var(--clay));
  will-change: transform;
}

/* ===========================================================
   ENTRANCE — staged reveals
   =========================================================== */

/* Fine-grained reveal primitives. [data-reveal] from responsive.css
   still works; these add direction + scale variants and a shared
   stagger mechanism driven by --i. */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, var(--rise-y, 28px), 0) scale(var(--rise-s, 1));
  transition:
    opacity .9s var(--ease) calc(var(--i, 0) * 90ms),
    transform 1s var(--ease) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-rise].in { opacity: 1; transform: none; }
[data-rise="zoom"] { --rise-s: .94; --rise-y: 40px; }
[data-rise="left"] { --rise-y: 0; transform: translate3d(-38px, 0, 0); }
[data-rise="right"] { --rise-y: 0; transform: translate3d(38px, 0, 0); }

/* Headings that unmask line by line, word by word */
.mask-line { display: block; overflow: hidden; padding-bottom: .06em; }
.mask-word {
  display: inline-block;
  transform: translateY(105%) rotate(2deg);
  opacity: 0;
  transition:
    transform .95s cubic-bezier(.16, 1, .3, 1) calc(var(--w, 0) * 45ms),
    opacity .6s ease calc(var(--w, 0) * 45ms);
  will-change: transform;
}
.in .mask-word,
.mask-word.in { transform: none; opacity: 1; }

/* Thin rule that draws itself across */
.draw-rule {
  height: 1px;
  background: var(--cream-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}
.draw-rule.in { transform: scaleX(1); }

/* A fixed-proportion image frame, so a two-column split stays
   visually balanced whatever the source photo's aspect ratio. */
.media-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) {
  .media-frame { aspect-ratio: 3 / 2; max-width: 560px; margin-inline: auto; }
}

/* Images that settle: over-scaled, then relax into frame */
.settle { overflow: hidden; }
.settle img {
  transform: scale(1.14);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.settle.in img { transform: scale(1); }

/* ===========================================================
   POINTER — magnetic buttons, spotlight cards
   =========================================================== */
[data-magnetic] {
  will-change: transform;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .35s var(--ease);
}
body.pointer-fine [data-magnetic].pulled { transition-duration: .12s; }

/* Cards that light up under the cursor */
[data-spotlight] { position: relative; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--coral) 16%, transparent),
    transparent 68%
  );
  z-index: 0;
}
body.pointer-fine [data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

/* ===========================================================
   THE METHOD — sticky numbered journey (test / fuel / supplement)
   =========================================================== */
.journey { position: relative; }
.journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.journey-sticky {
  position: sticky;
  top: 16vh;
  align-self: start;
}
.journey-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--forest);
  box-shadow: var(--shadow-lg);
}
.journey-stage figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .8s var(--ease), transform 1.4s var(--ease);
}
.journey-stage figure.active { opacity: 1; transform: scale(1); }
.journey-stage img { width: 100%; height: 100%; object-fit: cover; }
.journey-stage figcaption {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FCF9F3;
  background: rgba(12, 20, 14, .55);
  backdrop-filter: blur(8px);
  padding: .45em .9em;
  border-radius: var(--r-pill);
}
/* progress dots beside the stage */
.journey-dots {
  display: flex;
  gap: .5rem;
  margin-top: 1.2rem;
  justify-content: center;
}
.journey-dots span {
  width: 30px; height: 3px;
  border-radius: 3px;
  background: var(--cream-line);
  transition: background .4s var(--ease);
}
.journey-dots span.active { background: var(--coral); }

.journey-steps { display: flex; flex-direction: column; padding-block: 8vh; }
.journey-step {
  border-top: 1px solid var(--cream-line);
  padding: clamp(1.6rem, 3.4vw, 2.6rem) 0;
  opacity: .34;
  transition: opacity .55s var(--ease);
}
.journey-step.active { opacity: 1; }
.journey-step .idx {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: .9rem;
}
.journey-step .idx::before {
  content: "";
  width: 0; height: 2px;
  background: var(--coral);
  transition: width .7s var(--ease);
}
.journey-step.active .idx::before { width: 42px; }
.journey-step h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .7rem; }
.journey-step p { color: color-mix(in srgb, var(--ink) 70%, transparent); max-width: 48ch; }
.journey-step .meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ===========================================================
   Small pieces used across the new pages
   =========================================================== */

/* Feature list with ticks (shared with .cred-list styling) */
.tick-list { display: grid; gap: 1rem; margin-top: 1.6rem; }
.tick-list li { display: flex; gap: .9rem; align-items: flex-start; }
.tick-list .tick {
  flex: none;
  width: 22px; height: 22px;
  margin-top: .18rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--forest-2);
  display: grid; place-items: center;
}
.tick-list .tick svg { width: 12px; height: 12px; }
.tick-list b { display: block; font-weight: 700; }
.tick-list p { font-size: .94rem; color: color-mix(in srgb, var(--ink) 66%, transparent); margin-top: .15rem; }

/* Biomarker chips */
.marker-cloud { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.marker {
  font-size: .82rem;
  font-weight: 600;
  padding: .5em 1em;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--cream-line);
  color: var(--forest);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
body.pointer-fine .marker:hover {
  transform: translateY(-2px);
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 10%, var(--paper));
}

/* Product grid (supplements) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
.product {
  background: var(--paper);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
body.pointer-fine .product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.product-media {
  aspect-ratio: 5 / 4;
  background: linear-gradient(150deg, var(--sage-soft), var(--paper-2));
  position: relative;
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.product:hover .product-media img { transform: scale(1.06); }
.product-media .tag {
  position: absolute;
  top: .9rem; left: .9rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4em .8em;
  border-radius: var(--r-pill);
  background: rgba(252, 249, 243, .92);
  color: var(--forest);
  backdrop-filter: blur(6px);
}
.product-body { padding: clamp(1.2rem, 2.2vw, 1.6rem); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-body h3 { font-size: 1.25rem; }
.product-body .why { font-size: .92rem; color: color-mix(in srgb, var(--ink) 68%, transparent); }
.product-body .pairs {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--coral-deep);
  display: flex;
  align-items: center;
  gap: .5em;
}
.product-body .pairs::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}

/* Comparison / provider table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2rem; border-radius: var(--r-md); }
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--paper);
  font-size: .94rem;
}
.cmp th, .cmp td {
  text-align: left;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--cream-line);
  vertical-align: top;
}
.cmp thead th {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest);
  background: var(--paper-2);
  border-bottom: 1px solid var(--cream-line);
}
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp tbody tr { transition: background .3s var(--ease); }
body.pointer-fine .cmp tbody tr:hover { background: color-mix(in srgb, var(--sage) 10%, transparent); }
.cmp td b { color: var(--ink); }

/* Notice / disclaimer panel */
.notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--sage) 14%, var(--paper));
  border: 1px solid var(--cream-line);
}
.notice svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; color: var(--forest-2); }
.notice p { font-size: .92rem; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.notice p + p { margin-top: .5rem; }

/* Dark full-bleed panel used for the "test, don't guess" statement */
.panel-dark {
  background: var(--forest);
  color: var(--bone);
  border-radius: clamp(28px, 5vw, 56px);
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.panel-dark h2, .panel-dark h3 { color: var(--bone); }
.panel-dark .lede { color: color-mix(in srgb, var(--bone) 80%, transparent); }
.panel-dark .muted { color: color-mix(in srgb, var(--bone) 62%, transparent); }
.panel-dark .eyebrow { color: var(--clay); }
.panel-dark .eyebrow::before, .panel-dark .eyebrow::after { background: var(--clay); }
.panel-dark .draw-rule { background: color-mix(in srgb, var(--bone) 18%, transparent); }

/* Big number readout row */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.readout div b {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  display: block;
  color: var(--clay);
  letter-spacing: -.02em;
}
.readout div > span {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  color: color-mix(in srgb, var(--bone) 66%, transparent);
  max-width: 22ch;
}

/* ===========================================================
   Responsive + reduced motion
   =========================================================== */
@media (max-width: 980px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-sticky { position: relative; top: 0; max-width: 460px; margin-inline: auto; width: 100%; }
  .journey-stage { aspect-ratio: 3 / 4; }
  .journey-steps { padding-block: 2rem; }
  .journey-step { opacity: 1; }
  .journey-step .idx::before { width: 42px; }
}

/* ---------------------------------------------------------
   Capture mode (tools/shots.sh adds html.shot via ?shot=1).
   Reveals are frozen open and viewport-relative heights are
   pinned to their 900px-viewport equivalents, so one very tall
   headless window renders the page at its true proportions
   instead of stretching every vh to the window height.
   --------------------------------------------------------- */
html.shot [data-rise],
html.shot .mask-word,
html.shot .settle img,
html.shot .draw-rule,
html.shot [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.shot .journey-step { opacity: 1 !important; }
html.shot .journey-sticky { position: static; }
html.shot .journey-steps { padding-block: 72px; }
html.shot .cinema { height: 2700px; }
html.shot .cinema-stage { position: relative; height: 900px; }
html.shot .band { min-height: 648px; }
html.shot .scroll-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise],
  .mask-word,
  .settle img,
  .draw-rule {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .journey-step { opacity: 1 !important; }
  .journey-stage figure { transition: opacity .2s linear; }
  .scroll-progress { display: none; }
}

/* Email addresses are long unbreakable tokens; `anywhere` (unlike
   `break-word`) also lowers their min-content width, so they stop
   setting a floor on very narrow layouts. */
.contact-row a,
.footer-col a[href^="mailto"],
.form-note { overflow-wrap: anywhere; }

/* ===========================================================
   THE LAB LAYER

   The reference points for this site are diagnostics and
   supplement companies, not wellness blogs: framed panels,
   hairline-divided lists, accent pill tags, and rows of
   plainly-stated claims. Numbers and labels are set in mono,
   the way an instrument prints them.
   =========================================================== */

/* ---------- accent pill tag ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.05em;
  border-radius: var(--r-pill);
  background: var(--clay);
  color: var(--forest);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip--gold { background: var(--gold); color: #2A1F08; }
.chip--outline {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--bone) 34%, transparent);
  color: var(--bone);
}

/* ---------- credential badge (replaces the spinning seal) ---------- */
.credential {
  position: absolute;
  left: clamp(.8rem, 2vw, 1.4rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.1rem .75rem .85rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--forest) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  box-shadow: var(--shadow-md);
  max-width: calc(100% - 2 * clamp(.8rem, 2vw, 1.4rem));
}
.credential .laurel {
  flex: none;
  width: 30px; height: 30px;
  color: var(--clay);
}
.credential .laurel svg { width: 100%; height: 100%; }
.credential b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--bone);
  letter-spacing: -.01em;
}
.credential span {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--clay) 88%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ---------- claim row: what we stand behind, stated plainly ---------- */
.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--cream-line);
  border-bottom: 1px solid var(--cream-line);
}
.claims li { display: flex; flex-direction: column; gap: .7rem; }
.claims .ico {
  width: 30px; height: 30px;
  color: var(--forest-2);
}
.claims .ico svg { width: 100%; height: 100%; }
.claims b {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.claims p { font-size: .88rem; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.panel-dark .claims { border-color: color-mix(in srgb, var(--bone) 18%, transparent); }
.panel-dark .claims .ico { color: var(--clay); }
.panel-dark .claims b { color: var(--bone); }
.panel-dark .claims p { color: color-mix(in srgb, var(--bone) 62%, transparent); }

/* ---------- outcomes: hairline-divided statements ---------- */
.outcomes { border-top: 1px solid var(--cream-line); }
.outcomes li {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--cream-line);
  transition: background .35s var(--ease), padding-inline .35s var(--ease);
}
body.pointer-fine .outcomes li:hover {
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  padding-inline: 1rem;
}
.outcomes .n {
  flex: none;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
  width: 3.4em;
}
.outcomes h3 {
  font-size: clamp(1.25rem, 2.6vw, 1.95rem);
  font-weight: 500;
  flex: 1;
}
.outcomes .marker {
  flex: none;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  padding: .45em .8em;
}

/* ---------- framed panel ---------- */
/* A flat block of colour reads as unfinished. This gives the dark
   panels an inner hairline frame, a corner tag and a faint molecular
   lattice, so they look built rather than filled. */
.panel-dark::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 18px);
  border: 1px solid color-mix(in srgb, var(--bone) 15%, transparent);
  border-radius: calc(clamp(28px, 5vw, 56px) - clamp(10px, 1.4vw, 18px));
  pointer-events: none;
  z-index: 1;
}
.panel-dark > * { position: relative; z-index: 2; }

.lattice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--clay) 26%, transparent) 1.4px, transparent 1.5px),
    linear-gradient(to right, color-mix(in srgb, var(--bone) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bone) 5%, transparent) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px, 46px 46px;
  background-position: 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
}

/* ---------- CTA band, rebuilt on the same frame ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .cta-inner { position: relative; z-index: 3; text-align: center; }
.cta-band .chip { margin-bottom: 1.4rem; }
.cta-band h2 {
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cta-band .lede { margin-inline: auto; }
.cta-actions .btn { min-width: 210px; }

@media (max-width: 720px) {
  .outcomes li { flex-wrap: wrap; gap: .5rem 1rem; }
  .outcomes .n { width: auto; }
  .outcomes .marker { order: 3; }
  .cta-actions .btn { width: 100%; }
}

/* ===========================================================
   BIOTECH LAYER

   The visual grammar of a diagnostics company: outlined pill
   labels over scientific imagery, leader lines annotating what
   you are looking at, and figures separated by hairline rules
   the way a report separates them.
   =========================================================== */

/* ---------- outlined label, sat over an image ---------- */
.overlay-pill {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .45em .95em .45em .5em;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, #F4F6EF 55%, transparent);
  background: color-mix(in srgb, #050C08 34%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F4F6EF;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.overlay-pill .ico {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #F4F6EF 45%, transparent);
  display: grid; place-items: center;
}
.overlay-pill .ico svg { width: 12px; height: 12px; }

/* ---------- annotated figure ----------
   A photograph with mono callouts on thin leader lines, the way a
   paper annotates a specimen. The lines are drawn with a pseudo
   element so there is no SVG to keep in sync with the layout. */
.annotated {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--forest);
}
.annotated > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.annotated::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,12,8,.62) 0%, rgba(4,12,8,.14) 34%, rgba(4,12,8,0) 48%),
    linear-gradient(270deg, rgba(4,12,8,.62) 0%, rgba(4,12,8,.14) 34%, rgba(4,12,8,0) 48%),
    linear-gradient(180deg, rgba(4,12,8,.20) 0%, rgba(4,12,8,0) 30%);
  pointer-events: none;
}

.callout {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease) calc(var(--i, 0) * 140ms + 300ms),
              transform .7s var(--ease) calc(var(--i, 0) * 140ms + 300ms);
}
.in .callout { opacity: 1; transform: none; }
.callout .node {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--clay) 26%, transparent);
  position: relative;
}
/* the leader line runs from the node back toward the label */
.callout .node::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: var(--lead, 46px);
  background: linear-gradient(90deg, var(--clay), color-mix(in srgb, var(--clay) 20%, transparent));
  transform-origin: 0 50%;
}
.callout--left { flex-direction: row-reverse; text-align: right; }
.callout--left .node::after { right: 100%; background: linear-gradient(270deg, var(--clay), color-mix(in srgb, var(--clay) 20%, transparent)); }
.callout--right .node::after { left: 100%; }
.callout b {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(4,12,8,.9);
}
.callout span {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: #F4F6EF;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(4,12,8,.92), 0 2px 24px rgba(4,12,8,.7);
}

/* ---------- figures, separated the way a report separates them ---------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.figures > div {
  padding: 0 clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid var(--cream-line);
}
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.figures .unit {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  display: block;
  margin-bottom: .7rem;
}
.figures p {
  margin-top: .7rem;
  font-size: .86rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  max-width: 24ch;
}
.panel-dark .figures > div { border-color: color-mix(in srgb, var(--bone) 18%, transparent); }
.panel-dark .figures b { color: var(--clay); }
.panel-dark .figures .unit { color: color-mix(in srgb, var(--clay) 75%, transparent); }
.panel-dark .figures p { color: color-mix(in srgb, var(--bone) 62%, transparent); }

@media (max-width: 720px) {
  .figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 0; }
  .figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .callout span { font-size: .95rem; }
  .callout b { font-size: .56rem; letter-spacing: .12em; }
  .callout .node::after { --lead: 20px; }
}

/* ===========================================================
   REFINEMENT PASS

   Pulling the site toward the reference set (Wolier, Ritual,
   Solene, Museum of Peace & Quiet). What they have in common is
   restraint: flat colour, hard-edged framed panels, hairline
   rules, one accent, and type doing the work.

   What they never have — and what was making this look cheap —
   is blurred colour blobs, floating cards on drop shadows,
   avatar bubbles, and 60px corner radii.
   =========================================================== */

:root {
  --cream-line: rgba(22, 39, 30, .16);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  /* Depth comes from borders and hairlines here, not from shadow. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* blurred decorative blobs — the single biggest "template" tell */
.blob { display: none !important; }

/* flat, bordered surfaces */
.card,
.price,
.product,
.hcard,
.form-card,
.tool-card,
.contact-info,
.media-frame,
.annotated,
.journey-stage {
  box-shadow: none !important;
  border-radius: var(--r-lg);
}
.card, .price, .product, .hcard, .form-card, .tool-card {
  border: 1px solid var(--cream-line);
}
body.pointer-fine .card:hover,
body.pointer-fine .product:hover,
body.pointer-fine .hcard:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink);
}
.card--accent::before { display: none; }
.card:hover { border-color: var(--ink); }

/* buttons: considered rectangles, not lozenges */
.btn { border-radius: var(--r-sm); padding: 1em 1.6em; font-weight: 600; }
.btn--ghost { border-color: var(--ink); }
.chip, .pill, .marker, .overlay-pill, .journey-stage figcaption { border-radius: var(--r-sm); }
.chip--gold { background: var(--gold); color: #FFFDF7; }

/* the hero: no floating badges, no avatar bubbles — a framed
   portrait and a hairline credential strip instead */
.hero-badge,
.hero-trust .avatars,
.about-sticker { display: none !important; }
.hero-photo { border-radius: var(--r-lg); }
.hero-visual { aspect-ratio: 4 / 5; }
.hero-trust {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-line);
}
.hero-trust p { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* section corners: the big pill radii read as soft, not premium */
.section[style*="border-radius"] { border-radius: var(--r-lg) !important; }
.cta-band, .panel-dark { border-radius: var(--r-lg); }
.panel-dark::before { inset: 14px; border-radius: 6px; }

/* the credential badge, flattened onto the frame */
.credential {
  border-radius: var(--r-sm);
  background: var(--forest);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* eyebrows read as labels, not decoration */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
}
.eyebrow::before, .eyebrow::after { width: 16px; }

/* ---------- consistent measure ----------
   Body copy set to one measure across the site, so blocks that sit
   beside each other end up the same width and the rag stays even
   instead of every paragraph finding its own length. */
p, .faq-a, .journey-step p, .step p, .claims p, .figures p, .product-body .why {
  text-wrap: pretty;
}
.journey-step p,
.step p,
.card p,
.tick-list p { max-width: 46ch; }
.lede { max-width: 54ch; }
.section-head .lede { max-width: 58ch; }
.section-head.center .lede { margin-inline: auto; }

/* ---------- the signature ----------
   Set in a pencil-weight handwriting face and graphite grey rather than
   ink black, very slightly off-axis, so it reads as signed by hand
   instead of typeset in italics. */
/* A flowing copperplate hand, set in ink rather than pencil grey, on its
   own line so nothing crowds it. Caveat was a marker pen; this is a
   signature. */
.signature {
  font-family: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 400;
  line-height: .9;
  color: var(--navy);
  opacity: 1;
  display: block;
  margin: 2.4rem 0 .4rem;
  letter-spacing: .01em;
}
.signature + .link-arrow { display: inline-flex; margin-top: .6rem; }

/* the credential badge, now type only */
.credential { padding: .8rem 1.15rem; }
.credential b { font-size: 1.05rem; }
.credential span { margin-top: .3rem; }

/* ---------- journal row: arrows, not a scrollbar ---------- */
.hscroll-track { scrollbar-width: none; -ms-overflow-style: none; }
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-nav { display: flex; gap: .5rem; }
.hs-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cream-line);
  background: transparent;
  color: var(--forest);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}
.hs-btn svg { width: 18px; height: 18px; }
.hs-btn:hover:not(:disabled) { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.hs-btn:disabled { opacity: .3; cursor: default; }

/* ---------- full-bleed band: keep the subject centred ---------- */
.band-bg img { object-position: center 55%; }

/* ---------- never break a word ----------
   Only genuine unbreakable tokens (email addresses) may break, and
   only where they appear. Everything else wraps at spaces. */
h1, h2, h3, h4, .card h3, .product-body h3, .journey-step h3, .outcomes h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

/* ---------- cards sit level ----------
   Equal height across a row, with the body pushed to a common
   baseline, so a two-line title never knocks the row out of line. */
.programs-grid, .price-grid, .testi-grid, .product-grid, .steps { align-items: stretch; }
.programs-grid > *, .price-grid > *, .testi-grid > *, .steps > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card h3, .step h4 { min-height: 2.2em; display: flex; align-items: flex-end; }
.card p, .step p { flex: 1; }
.card .marker-cloud, .card .price-feat { margin-top: auto; }

/* ===========================================================
   THE FRAME

   The pattern the reference set is built on: a deep panel with a
   cream card set inside it, a gold tag above the headline, big
   serif type, and two stacked buttons. Everything is hard-edged
   and hairline-ruled. This is the shell every page hero now uses.
   =========================================================== */

:root {
  --stone:     #6E7C80;   /* muted labels */
  --navy:      #14232A;   /* the deep panel */
  --navy-2:    #1B2E36;
  --cream:     #F7F2E7;
  --paper:     #FFFCF5;
  --cream-line: rgba(20, 35, 42, .14);
  --bone:      #F7F2E7;
  --ink:       #14232A;
  --forest:    #14232A;
  --forest-2:  #1B2E36;
}

body { background: var(--cream); }

/* ---------- the panel ---------- */
.frame {
  background: var(--navy);
  padding: clamp(.9rem, 1.6vw, 1.4rem);
  padding-top: clamp(5.5rem, 9vw, 7rem);
}
.frame-card {
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(74vh, 620px);
}
.frame-copy {
  padding: clamp(2rem, 4.5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.frame-copy .chip { align-self: flex-start; margin-bottom: 1.6rem; }
.frame-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 15ch;
  text-wrap: balance;
}
.frame-copy .lede {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  max-width: 46ch;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.frame-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-width: 340px;
}
.frame-actions .btn { width: 100%; }
.frame-media { position: relative; overflow: hidden; background: var(--navy-2); }
.frame-media img { width: 100%; height: 100%; object-fit: cover; }

/* breadcrumb, small and out of the way */
.frame-crumb {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  margin-bottom: 1.2rem;
}
.frame-crumb a { border-bottom: 1px solid var(--cream-line); }

/* ---------- buttons, as the references set them ---------- */
.btn {
  border-radius: 8px;
  padding: 1.05em 1.7em;
  font-size: .95rem;
  letter-spacing: .01em;
}
.btn, .btn--coral { --bg: var(--navy); --fg: var(--cream); }
.btn::after, .btn--coral::after { background: var(--gold); }
.btn:hover, .btn--coral:hover { color: var(--navy); }
.btn--outline, .btn--light, .btn--ghost {
  --bg: transparent;
  --fg: var(--navy);
  border: 1px solid var(--navy);
}
.btn--outline::after, .btn--light::after, .btn--ghost::after { background: var(--navy); }
.btn--outline:hover, .btn--light:hover, .btn--ghost:hover { color: var(--cream); }

/* ---------- accents ---------- */
.chip--gold { background: var(--gold); color: #23180A; }
.eyebrow, .tag-mono, .card-num, .journey-step .idx,
.figures .unit, .outcomes .n, .hcard .date, .product-body .pairs { color: var(--stone); }
.eyebrow::before, .eyebrow::after, .tag-mono::before,
.journey-step .idx::before, .classified-row::before { background: var(--gold); }
.hero h1 .stroke, .band h2 em, .cinema-line .em, .accent { color: var(--stone); }
.redact::after { background: var(--gold); }
.journey-dots span.active, .hcard .who .dot, .pill .dot,
.classified-row .blink { background: var(--gold); }
.link-arrow:hover { color: var(--stone); border-color: var(--gold); }
.nav-links a::after { background: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--stone); }
.stars { color: var(--gold); }
::selection { background: var(--gold); color: var(--navy); }

/* dark surfaces pick up the same navy */
.site-footer, .panel-dark, .cta-band, .marquee { background: var(--navy); }
.credential { background: var(--navy); }
.journey-stage { background: var(--navy-2); }
.panel-dark .eyebrow, .panel-dark .readout div b,
.panel-dark .figures b, .cta-band .eyebrow { color: var(--gold); }
.panel-dark .eyebrow::before, .panel-dark .eyebrow::after { background: var(--gold); }

/* ---------- the drawer, as the references do it ---------- */
@media (max-width: 1040px) {
  .nav-links {
    background: var(--navy);
    padding: 6rem 1.8rem 2rem;
    gap: 0;
  }
  .nav-links li { width: 100%; border-bottom: 1px solid rgba(247, 242, 231, .16); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a:not(.btn) {
    color: var(--cream) !important;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    display: block;
    padding: .85rem 0;
  }
  .nav-links a[aria-current="page"] { color: var(--gold) !important; }
  .nav-links .btn { margin-top: 1.6rem; }
  .nav-toggle { background: var(--paper); border-color: var(--cream-line); }
  body.nav-open .nav-toggle span::before,
  body.nav-open .nav-toggle span::after { background: var(--navy); }
}

@media (max-width: 900px) {
  .frame-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .frame-copy { padding: clamp(1.8rem, 6vw, 2.6rem); order: 2; }
  .frame-media { order: 1; aspect-ratio: 16 / 10; }
  .frame-actions { max-width: none; }
}

/* the frame sits under a navy header, so the brand and links invert */
body.framed-top .site-header:not(.scrolled) .brand,
body.framed-top .site-header:not(.scrolled) .brand .mark,
body.framed-top .site-header:not(.scrolled) .nav-links a:not(.btn) { color: var(--cream); }
body.framed-top .site-header:not(.scrolled) .nav-toggle { background: transparent; border-color: rgba(247,242,231,.34); }
body.framed-top .site-header:not(.scrolled) .nav-toggle span,
body.framed-top .site-header:not(.scrolled) .nav-toggle span::before,
body.framed-top .site-header:not(.scrolled) .nav-toggle span::after { background: var(--cream); }
body.framed-top .site-header:not(.scrolled) .btn--coral { border-color: rgba(247,242,231,.4); }
.site-header.scrolled { background: color-mix(in srgb, var(--cream) 92%, transparent); }

/* the credential badge sits on the framed portrait */
.frame-media .credential { left: 1.1rem; bottom: 1.1rem; }

/* section rhythm inside a cream page */
.section { background: transparent; }
.section[style*="paper-2"] { background: color-mix(in srgb, var(--navy) 5%, var(--cream)) !important; }

/* ---------- the mark ----------
   A molecular ring rather than a sprout: the same shape the homepage
   introduction resolves into, so the identity and the story agree.
   Slightly larger than the old mark because it is open rather than
   solid, and it needs the room to stay legible. */
.brand .mark { width: 34px; height: 34px; }
.brand .brand-name small { letter-spacing: .30em; color: var(--stone); }
body.framed-top .site-header:not(.scrolled) .brand-name small { color: var(--gold); }
@media (max-width: 420px) { .brand .mark { width: 28px; height: 28px; } }

/* ===========================================================
   TYPE AND WORDMARK

   The references are set in a high-contrast editorial serif and
   identified by a wordmark, not an icon. Sentient was soft and
   humanist, which is why the site kept reading as a wellness
   blog whatever else changed.
   =========================================================== */
:root {
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
}

h1, h2, h3, h4, .brand-name, .price-amt, .stat b,
.figures b, .readout div b, .cinema-line, .outcomes h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1, .frame-copy h1 { line-height: .98; letter-spacing: -.025em; }
h2 { line-height: 1.02; }
em, .italic, .cinema-line .em, .band h2 em { font-style: italic; }

/* the wordmark */
.brand { gap: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1;
}
.brand-name small {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-top: .34rem;
  color: var(--stone);
}
body.framed-top .site-header:not(.scrolled) .brand-name small { color: var(--gold); }
@media (max-width: 420px) { .brand-name { font-size: 1.35rem; } }

/* ---------- callouts, anchored ----------
   The callout's left/top is the node itself, read off the photograph, so
   each marker sits on the food it names. The label is pushed clear with
   an explicit leader rather than a pseudo-element, which kept drifting. */
.callout { transform: translateY(8px); align-items: center; gap: 0; }
.in .callout { transform: none; }
.callout .node {
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 26%, transparent);
}
.callout .lead {
  position: absolute; top: 50%;
  height: 1px; width: 54px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 25%, transparent));
}
.callout--right .lead { left: 0; }
.callout--right > div { padding-left: 66px; }
.callout--left { text-align: right; }
.callout--left .lead { right: 0; background: linear-gradient(270deg, var(--gold), color-mix(in srgb, var(--gold) 25%, transparent)); }
.callout--left > div { padding-right: 66px; transform: translateX(-100%); }
.callout--left .node { left: 0; }
.callout b { color: var(--gold); }
.callout .node::after { display: none; }

/* ---------- the frame card was marooning its copy ---------- */
.frame-card { min-height: 0; }
.frame-copy { padding-block: clamp(2.6rem, 6vw, 5rem); }
.frame-media { min-height: clamp(320px, 52vh, 560px); }
.frame-media img { object-position: center 22%; }

/* the band's statement sits on a measure, not floating free */
.band-inner { max-width: 46rem; margin-inline: auto; }

/* ---------- one surface system ----------
   base.css still carried the original warm palette, so tinted sections
   (--paper-2) read as gold against the new cream and the site lost its
   continuity. Every surface token now derives from the same three
   colours: navy, cream, gold. */
:root {
  --bone:       #F7F2E7;
  --paper:      #FFFCF5;
  --paper-2:    #EFEADC;   /* tinted block: cream, not gold */
  --sage:       #7C8B8F;
  --sage-soft:  #E4E7E4;
  --clay:       #E8DFC6;
  --forest-2:   #1B2E36;
  --cream-line: rgba(20, 35, 42, .14);
}
.section[style*="paper-2"] { background: var(--paper-2) !important; }
.card-icon { background: var(--sage-soft); color: var(--forest); }
.tick-list .tick, .price-feat .tick, .cred-list .tick { background: var(--sage-soft); color: var(--forest); }
.notice { background: color-mix(in srgb, var(--navy) 5%, var(--paper)); }
.hcard .media.grad-a, .hcard .media.grad-b { background: linear-gradient(140deg, var(--forest-2), var(--navy)); }
.avatars .av { border-color: var(--bone); }

/* ===========================================================
   BUTTONS ON DARK PANELS

   Moving the palette to navy made .btn navy-on-navy, so the CTA
   inside every dark panel became invisible text. On a dark ground
   the primary fills with cream and the secondary is outlined.
   =========================================================== */
.cta-band .btn,
.panel-dark .btn,
.band .btn,
.frame-media .btn {
  --bg: var(--cream);
  --fg: var(--navy);
  border: 1px solid var(--cream);
}
.cta-band .btn::after,
.panel-dark .btn::after,
.band .btn::after { background: var(--gold); }
.cta-band .btn:hover,
.panel-dark .btn:hover,
.band .btn:hover { color: var(--navy); border-color: var(--gold); }

.cta-band .btn--light,
.cta-band .btn--outline,
.panel-dark .btn--light,
.panel-dark .btn--outline,
.band .btn--light {
  --bg: transparent;
  --fg: var(--cream);
  border: 1px solid color-mix(in srgb, var(--cream) 46%, transparent);
}
.cta-band .btn--light::after,
.cta-band .btn--outline::after,
.panel-dark .btn--light::after,
.band .btn--light::after { background: var(--cream); }
.cta-band .btn--light:hover,
.cta-band .btn--outline:hover,
.panel-dark .btn--light:hover,
.band .btn--light:hover { color: var(--navy); border-color: var(--cream); }

.cta-band .link-arrow, .panel-dark .link-arrow { color: var(--cream); }
.cta-band .lede, .band .lede { color: color-mix(in srgb, var(--cream) 82%, transparent); }

/* even, balanced lines in centred copy — no stranded last line */
.cta-band .lede,
.band h2,
.section-head.center .lede,
.cta-band h2 { text-wrap: balance; }
.cta-band .lede { max-width: 44ch; }
.cta-band .cta-actions { margin-top: 2.4rem; justify-content: center; }

/* ===========================================================
   THE REEL — a scroll-driven media panel

   The panel starts inset with rounded corners and opens out as it
   crosses the viewport, so the section reads as one continuous
   move rather than a static picture that happens to be there.
   =========================================================== */
.reel { position: relative; padding-block: 0; }
.reel-stage {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 2vw, 26px);
  /* opened by js/journey.js as the panel crosses the viewport */
  width: var(--reel-w, 84%);
  margin-inline: auto;
  transition: width .12s linear, border-radius .12s linear;
  aspect-ratio: 21 / 9;
  background: var(--navy);
}
.reel-stage img { width: 100%; height: 100%; object-fit: cover; }
.reel-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,35,42,.78), rgba(20,35,42,.22) 55%, rgba(20,35,42,.42));
}
.reel-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  text-align: center;
}
.reel-copy h2 { color: var(--cream); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.reel-copy h2 em { color: var(--gold); }
.reel-copy .eyebrow { color: var(--gold); justify-content: center; }
.reel-copy .eyebrow::before, .reel-copy .eyebrow::after { background: var(--gold); }
.reel-copy .btn { margin-top: 1.6rem; }

@media (max-width: 720px) {
  .reel-stage { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-stage { width: 96%; transition: none; }
}

/* ===========================================================
   MONOCHROME

   Myro and Nomio are near-monochrome with light, refined type,
   and the gold was the thing breaking continuity between
   sections. The palette is now navy, cream and a stone grey for
   muted text. Emphasis comes from weight, scale and space
   rather than a third colour.
   =========================================================== */
:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --gold:       #14232A;   /* the accent is simply the ink */
  --clay:       #C9D2D2;
  --stone:      #6E7C80;
  --coral:      #14232A;
  --coral-deep: #14232A;
}

h1, h2, h3, h4, .brand-name, .cinema-line, .outcomes h3,
.price-amt, .figures b, .readout div b {
  font-weight: 300;
  letter-spacing: -.005em;
}
h1, .frame-copy h1 { font-size: clamp(2.8rem, 5.4vw, 4.8rem); line-height: 1.0; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.04; }
.frame-copy h1 { max-width: 14ch; }
.brand-name { font-size: 1.7rem; font-weight: 400; }

/* labels and eyebrows: stone, not gold */
.eyebrow, .tag-mono, .card-num, .journey-step .idx, .figures .unit,
.outcomes .n, .hcard .date, .product-body .pairs, .brand-name small,
.classified-row, .callout b { color: var(--stone); }
.eyebrow::before, .eyebrow::after, .tag-mono::before,
.journey-step .idx::before, .classified-row::before,
.callout .lead { background: var(--navy); }
.callout .lead { opacity: .7; }
.hero h1 .stroke, .band h2 em, .reel-copy h2 em, .accent { font-style: italic; }
.redact::after { background: var(--navy); }
.journey-dots span.active, .hcard .who .dot, .pill .dot,
.classified-row .blink, .callout .node { background: var(--navy); }
.link-arrow:hover { color: var(--navy); border-color: var(--navy); }
.nav-links a::after { background: var(--navy); }
.nav-links a[aria-current="page"] { color: var(--navy); }
::selection { background: var(--navy); color: var(--cream); }

/* the tag: outlined, not filled */
.chip, .chip--gold {
  background: transparent;
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
  font-weight: 500;
}
.panel-dark .chip, .cta-band .chip, .frame-media .chip {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 40%, transparent);
}

/* on dark: cream accents throughout */
.panel-dark .eyebrow, .cta-band .eyebrow, .reel-copy .eyebrow,
.panel-dark .readout div b, .panel-dark .figures b { color: var(--clay); }
.panel-dark .eyebrow::before, .panel-dark .eyebrow::after,
.reel-copy .eyebrow::before, .reel-copy .eyebrow::after { background: var(--clay); }
.reel-copy h2 em, .cinema-line .em { color: var(--clay); }
.journey-stage figcaption { background: rgba(20,35,42,.62); }
.credential span { color: var(--clay); }
.callout .node { background: var(--clay); box-shadow: 0 0 0 4px rgba(201,210,210,.22); }
.callout .lead { background: var(--clay); }
.callout b { color: var(--clay); }

/* ===========================================================
   FINAL PASS
   =========================================================== */

/* "NUTRITION" under the wordmark was navy on the navy header, because
   the accent token it used became the ink when the palette went
   monochrome. Over a dark panel it is cream. */
body.framed-top .site-header:not(.scrolled) .brand-name small,
body.cinema-view .site-header:not(.scrolled) .brand-name small { color: var(--clay); }

/* Buttons state their own colours explicitly, so no token change can
   quietly dim a label to the point of disappearing again. */
.btn { color: var(--fg); }
.frame-copy .btn:not(.btn--outline):not(.btn--light):not(.btn--ghost) {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.frame-copy .btn--outline { color: var(--navy); }

/* The headline carries more weight: 300 was right for the page but left
   the h1 without enough presence at the top of it. */
h1, .frame-copy h1, .cinema-line { font-weight: 500; }
h2 { font-weight: 400; }

/* The signature, properly set: large, with room for the flourishes the
   capitals carry, and a little rise off the baseline. */
.signature {
  font-size: clamp(4.4rem, 8vw, 6.6rem);
  line-height: .78;
  letter-spacing: .02em;
  margin: 2.8rem 0 .2rem;
  padding-right: .12em;
  color: var(--navy);
}

/* the podium shot puts Emma high in a tall frame, so it is anchored
   nearer the top than the default portrait crop */
.frame-media img[src*="emma-podium"] { object-position: center 28%; }

/* The statement heading was set to a 22ch measure while the two columns
   beneath it run the full width, so the block read as two different
   widths stacked. It now spans the same measure as the columns. */
.redact-head { max-width: none; }
@media (min-width: 981px) {
  .redact-head { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
}

/* The reel copy was pinned to the bottom edge, so the button ended up
   squashed against it. The block is centred in the panel now, with real
   space between the label, the line and the button. */
.reel-copy {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(2rem, 5vw, 4rem);
}
.reel-copy .eyebrow { margin-bottom: 1.4rem; }
.reel-copy h2 { margin: 0; }
.reel-copy .btn { margin-top: 2.4rem; }
.reel-stage::after {
  background: linear-gradient(0deg, rgba(20,35,42,.62), rgba(20,35,42,.30) 45%, rgba(20,35,42,.52));
}

/* The email is one long token; `anywhere` broke it mid-domain and left
   "uk" on a line of its own. It breaks only at the <wbr> after the @. */
.footer-col a[href^="mailto"], .contact-row a {
  overflow-wrap: normal;
  word-break: normal;
  font-size: .9rem;
}

/* ===========================================================
   HERO CARD SPACING

   The copy column was centred, so the space above it depended on
   how long that page's copy happened to be: 85px on Coaching,
   126px on About, 274px on Contact. Worse, longer pages filled
   the column and the buttons ended up against the card's bottom
   edge.

   The copy is anchored to the top with a fixed rhythm instead, so
   every page opens identically, and the card carries a minimum
   height so short pages still have presence.
   =========================================================== */
.frame-card { min-height: clamp(460px, 62vh, 620px); }
.frame-copy {
  justify-content: flex-start;
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(2rem, 4.5vw, 4rem);
}
.frame-crumb { margin-bottom: 1.5rem; }
.frame-copy .chip { margin-bottom: 1.5rem; }
.frame-copy h1 { margin: 0; }
.frame-copy .lede { margin-top: 1.3rem; }
/* the actions sit at the foot of the column, a consistent distance from
   the copy above and never against the card edge */
.frame-actions { margin-top: auto; padding-top: 2.4rem; }

@media (max-width: 900px) {
  .frame-card { min-height: 0; }
  .frame-actions { margin-top: 2rem; padding-top: 0; }
}

/* ===========================================================
   THE STORY BLOCK

   The two columns were centred against each other, so the text
   floated above a short image and left a well of empty space
   beneath it. They top-align now, and the portrait fills its
   column rather than sitting in it.
   =========================================================== */
.about-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.about-photo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.wrap.split:has(.about-visual) { align-items: start; }

/* A signature is a mark, not a headline: it sits at the size a hand
   would write it, close under the copy it signs off. */
.signature {
  font-size: clamp(2.8rem, 4vw, 3.6rem);
  line-height: 1;
  margin: 2rem 0 .3rem;
}

@media (max-width: 980px) {
  .about-visual { aspect-ratio: 3 / 4; max-width: 480px; margin-inline: auto; }
}

/* ===========================================================
   PROGRAMME COLUMNS

   Boxed cards with an icon tile floating above a number is the
   most generic pattern on the web, and it was carrying three
   pages. These are hairline-separated columns instead: a number,
   a rule, a title, and what you get. The same language as the
   figures and the outcomes list, so the site reads as one thing.
   =========================================================== */
.programs-grid {
  gap: 0;
  align-items: stretch;
}
.programs-grid > .card {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--cream-line);
  border-radius: 0;
  padding: 0 clamp(1.4rem, 2.6vw, 2.6rem);
  transition: none;
}
.programs-grid > .card:first-child { border-left: 0; padding-left: 0; }
.programs-grid > .card:last-child { padding-right: 0; }
body.pointer-fine .programs-grid > .card:hover {
  transform: none; box-shadow: none; border-color: var(--cream-line);
}
.programs-grid > .card::before,
.programs-grid > .card::after { display: none; }

/* the icon tile goes; the number does the work */
.programs-grid .card-icon { display: none; }
.programs-grid .card-num {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--stone);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-line);
  margin-bottom: 1.6rem;
}
.programs-grid .card h3 {
  min-height: 0;
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 0 0 .8rem;
}
.programs-grid .card > p { color: color-mix(in srgb, var(--ink) 68%, transparent); max-width: 34ch; }
.programs-grid .price-feat,
.programs-grid .marker-cloud { margin-top: 1.8rem; }
.programs-grid .price-feat li { align-items: flex-start; }

@media (max-width: 900px) {
  .programs-grid > .card {
    border-left: 0;
    border-top: 1px solid var(--cream-line);
    padding: 2rem 0 0;
  }
  .programs-grid > .card:first-child { border-top: 0; padding-top: 0; }
}

/* ===========================================================
   HOVER, IN A MONOCHROME PALETTE

   The hover fill used the accent token, and that token became the
   ink, so hovering a dark button painted navy over navy and the
   label vanished. Hover inverts instead: a filled button empties
   to cream, an outlined one fills with navy.
   =========================================================== */
.btn::after, .btn--coral::after { background: var(--cream); }
.btn:hover, .btn--coral:hover { color: var(--navy); }
.btn--outline::after, .btn--light::after, .btn--ghost::after { background: var(--navy); }
.btn--outline:hover, .btn--light:hover, .btn--ghost:hover { color: var(--cream); }

/* on dark panels the relationship is the other way round */
.cta-band .btn::after, .panel-dark .btn::after,
.reel-copy .btn::after, .band .btn::after { background: var(--navy); }
.cta-band .btn:hover, .panel-dark .btn:hover,
.reel-copy .btn:hover, .band .btn:hover { color: var(--cream); border-color: var(--cream); }
.cta-band .btn--light::after, .cta-band .btn--outline::after,
.panel-dark .btn--light::after { background: var(--cream); }
.cta-band .btn--light:hover, .cta-band .btn--outline:hover,
.panel-dark .btn--light:hover { color: var(--navy); }

/* the featured price card is dark, so its button follows the dark rule */
.price.featured .btn { --bg: var(--cream); --fg: var(--navy); border-color: var(--cream); }
.price.featured .btn::after { background: var(--navy); }
.price.featured .btn:hover { color: var(--cream); }

/* ===========================================================
   THE FOUR STEPS, DRAWN

   The connector line draws itself across as the row arrives and
   each step follows it in, so the sequence reads as a sequence
   rather than four things that happen to be side by side.
   =========================================================== */
.steps.lined { position: relative; }
.steps.lined .step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease) calc(var(--s, 0) * 160ms + 260ms),
              transform .7s var(--ease) calc(var(--s, 0) * 160ms + 260ms);
}
.steps.lined.in .step { opacity: 1; transform: none; }
.steps.lined .step-no {
  position: relative;
  z-index: 2;
  background: var(--cream);
  transform: scale(.72);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, 1.3, .4, 1) calc(var(--s, 0) * 160ms + 320ms),
              opacity .4s ease calc(var(--s, 0) * 160ms + 320ms);
}
.steps.lined.in .step-no { transform: scale(1); opacity: 1; }
/* the rule that joins them, drawn left to right */
.steps.lined .step::after {
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform .9s var(--ease) calc(var(--s, 0) * 160ms + 420ms);
}
.steps.lined.in .step::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .steps.lined .step, .steps.lined .step-no, .steps.lined .step::after {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
html.shot .steps.lined .step,
html.shot .steps.lined .step-no,
html.shot .steps.lined .step::after {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ===========================================================
   VERTICAL RHYTHM

   --section-y was 144px at desktop, and adjacent sections stacked
   it, so the gap between two blocks reached nearly 290px. That is
   the dead space showing up on every page. The scale is tighter
   now and adjacent sections share one gap rather than two.
   =========================================================== */
:root { --section-y: clamp(3rem, 5.5vw, 5rem); }
.section + .section { padding-top: 0; }
.section > .wrap > .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

/* a split's columns share a height, so a short image no longer leaves
   a well of empty space beside a long column of text */
.wrap.split { align-items: stretch; }
.wrap.split > * { min-width: 0; }
.media-frame {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(340px, 42vw, 560px);
}
.wrap.split:has(.card) { align-items: start; }

@media (max-width: 980px) {
  .wrap.split { align-items: start; }
  .media-frame { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
}

/* ===========================================================
   BALANCED LINES

   text-wrap:balance only evens out the lines it is given. On a
   wide panel a three-sentence heading still breaks two-and-one,
   because there is room for a long first line. Constraining the
   measure gives balance something to work with, so the lines come
   out the same length instead of leaving a short one behind.
   =========================================================== */
.panel-dark h2,
.cta-band h2,
.reel-copy h2 {
  max-width: 24ch;
  text-wrap: balance;
}
.panel-dark .lede,
.cta-band .lede,
.reel-copy .lede {
  max-width: 58ch;
  text-wrap: balance;
}

/* the figure row: equal columns, and labels that balance rather than
   dropping a single word onto a line of their own */
.readout, .figures { align-items: start; }
.readout div > span,
.figures p {
  max-width: 20ch;
  text-wrap: balance;
  hyphens: none;
}
.readout div b, .figures b { white-space: nowrap; }

/* the same treatment wherever a short heading sits over wide copy */
.section-head h2 { max-width: 22ch; }
.section-head.center h2 { margin-inline: auto; }
.section-head .lede { text-wrap: balance; }

/* The first section after the hero panel was running straight up under
   it: the pages carry an inline padding-top of about 1rem from an
   earlier layout, which inline styles kept winning. It gets the full
   section gap so the page opens with room to breathe. */
.frame + .section,
.frame + section.section[style] { padding-top: clamp(3.4rem, 6vw, 5.5rem) !important; }

/* The product tag sat under the spotlight overlay and vanished on hover.
   It is lifted above everything in its frame and given a solid ground. */
.product-media { isolation: isolate; }
.product-media .tag {
  z-index: 5;
  background: var(--cream);
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
}
[data-spotlight]::before { z-index: 0; }

/* ---------- contact: the form lives in the hero ----------
   The enquiry form was a section below the fold with the hero pointing
   down at it. It sits in the hero itself now, so the page asks and
   answers in one screen. */
.frame-card:has(.frame-form) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.frame-form {
  padding: clamp(2.4rem, 4vw, 3.4rem) clamp(2rem, 4.5vw, 4rem);
  border-left: 1px solid var(--cream-line);
  display: flex;
  align-items: center;
}
.frame-form .form-card { border: 0; padding: 0; background: transparent; width: 100%; }
.frame-card:has(.frame-form) .frame-media--contact { display: none; }
.frame-copy .contact-info { margin-top: 2rem; }
.frame-copy .contact-row { padding-block: .7rem; }
@media (max-width: 900px) {
  .frame-form { border-left: 0; border-top: 1px solid var(--cream-line); padding-top: 2rem; }
}

/* ---------- where she is ----------
   A small Union flag in the nav, the way Queen of Hearts and French
   Riviera Boats carry theirs: this is a UK coaching practice using a UK
   laboratory, and visitors should be able to tell at a glance. */
.nav-flag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-left: clamp(.4rem, 1vw, .9rem);
}
.nav-flag svg {
  width: 22px;
  height: 11px;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 20%, transparent);
}
.nav-flag span {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  color: var(--stone);
}
body.framed-top .site-header:not(.scrolled) .nav-flag span { color: color-mix(in srgb, var(--cream) 76%, transparent); }
body.framed-top .site-header:not(.scrolled) .nav-flag svg { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cream) 34%, transparent); }
@media (max-width: 1040px) {
  .nav-flag { border-bottom: 0 !important; padding: 1.4rem 0 0; }
  .nav-flag span { color: color-mix(in srgb, var(--cream) 76%, transparent) !important; }
}

/* ---------- the hero asks for the enquiry ----------
   The homepage hero ended on two buttons and a column of empty space.
   It now carries the enquiry itself: what you want help with, and how
   to reach you. Fewer steps between reading and booking. */
.hero-form { margin-top: 2rem; display: grid; gap: .9rem; max-width: 440px; }
.hero-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
.hero-form .field label { font-size: .74rem; letter-spacing: .04em; }
.hero-form input, .hero-form select { padding: .8em .9em; border-radius: var(--r-sm); }
.hero-form .btn { width: 100%; margin-top: .3rem; }
.hero-form .form-note { font-size: .78rem; margin-top: .2rem; }
.hero-form .form-success:empty { display: none; }
@media (max-width: 560px) { .hero-form-row { grid-template-columns: minmax(0, 1fr); } }

/* the flag keeps its 2:1 proportions wherever it sits */
.nav-flag svg { width: 24px; height: 12px; aspect-ratio: 2 / 1; object-fit: contain; }
@media (max-width: 1040px) {
  .nav-flag { justify-content: flex-start; }
  .nav-flag svg { width: 28px; height: 14px; }
}

/* ---------- selects, in the site's own hand ----------
   A browser's default select carries its own chrome and reads as a
   system control dropped into the page. The closed state is drawn here
   instead, with a chevron that matches the arrows elsewhere. (The open
   list is rendered by the operating system and cannot be styled; a fully
   custom listbox is the only way round that.) */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select:focus { background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%); }

/* the submit button was squashed against the field above it */
.hero-form .btn {
  margin-top: 1rem;
  padding: 1.15em 1.7em;
  justify-content: center;
  gap: .7em;
}
.hero-form .btn .arrow { position: relative; top: 1px; }
.hero-form { gap: 1.1rem; }
.hero-form .form-note { margin-top: .4rem; line-height: 1.5; }

/* ===========================================================
   THREE FIXES

   1. The balanced-lines pass set .section-head h2 to a 22ch
      measure, which overrode the earlier rule widening the
      statement heading. That heading spans the columns again.

   2. The hero card took its height from the portrait beside the
      copy, so once the enquiry form replaced the buttons the
      copy column was left with a well of empty cream below it.
      The photograph no longer drives the card's height.

   3. The hero button set its colour at a specificity that beat
      .btn:hover, so the label stayed cream while the fill turned
      cream underneath it and the text disappeared.
   =========================================================== */

/* 1 */
.redact-head,
.section-head:has(.redact-head) h2 { max-width: none !important; }

/* 2 */
.frame-media { min-height: 0; height: 100%; }
.frame-card { min-height: 0; align-items: stretch; }
.frame-copy { justify-content: center; }

/* 3 */
.frame-copy .btn:not(.btn--outline):not(.btn--light):not(.btn--ghost):hover,
.hero-form .btn:hover {
  color: var(--navy);
  border-color: var(--navy);
}
.frame-copy .btn--outline:hover { color: var(--cream); }

/* the "meet your coach" block: columns level, signature under the copy */
.wrap.split:has(.about-visual) { align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.about-visual { position: sticky; top: 12vh; }
@media (max-width: 980px) { .about-visual { position: relative; top: 0; } }

/* Emma's own signature, scanned and cut out, rather than a script face
   pretending to be one. */
img.signature {
  display: block;
  width: clamp(180px, 22vw, 250px);
  height: auto;
  margin: 2rem 0 .6rem;
  opacity: .92;
}

/* Journal card images fill their frame; base.css's img{height:auto} was
   letting a 3:2 photograph letterbox inside a 16:10 card and show the
   panel colour down either side. */
.hcard .media { background: var(--navy); }
.hcard .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hscroll-track { scroll-snap-type: x mandatory; }
.hcard { scroll-snap-align: start; }

/* ---------- charts ----------
   Data drawn in the site's own hand: hairlines, mono labels, one ink.
   Every chart carries a note saying what it is and is not. */
.chart {
  margin: 2.4rem 0 0;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid var(--cream-line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.chart-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.chart-title span { color: var(--stone); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--cream-line); stroke-width: 1; }
.chart .axis text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  fill: var(--stone);
  text-transform: uppercase;
}
.chart .line { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; }
.chart .band { fill: color-mix(in srgb, var(--navy) 7%, transparent); }
.chart .dot { fill: var(--navy); }
.chart .note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  fill: var(--stone);
  text-transform: uppercase;
}
.chart-foot {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.6;
  color: var(--stone);
}

/* journal cards are links */
a.hcard { color: inherit; display: flex; }
a.hcard:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the hero card cannot run away ----------
   A portrait photograph beside the copy was driving the card to full
   page height, which is where the acres of empty cream came from. The
   card is capped and the photograph is cropped to fit it, rather than
   the other way round. */
.frame-card {
  max-height: min(86vh, 760px);
  overflow: hidden;
}
.frame-media { overflow: hidden; }
.frame-media img { width: 100%; height: 100%; object-fit: cover; }
.frame-copy { overflow: auto; }
@media (max-width: 900px) {
  .frame-card { max-height: none; }
  .frame-copy { overflow: visible; }
  .frame-media { aspect-ratio: 4 / 3; }
}

/* Punctuation that follows an inline-block cannot be allowed to wrap onto
   a line of its own; it is glued to the word it belongs to. */
.tight { margin-left: -.06em; }
.redact + .tight,
.redact { white-space: nowrap; }
.redact-head { word-spacing: .01em; }

/* the statement's button was floating well clear of the copy above it */
.redact-section .btn,
.section > .wrap > div > .btn { margin-top: 0; }
.redact-section .split + div { margin-top: 1.6rem !important; }

/* ===========================================================
   VERTICAL RHYTHM, AS A SYSTEM

   Every spacing complaint so far has been answered with another
   one-off margin, which is why the next screen always had the
   same problem somewhere else. This is one scale, applied to the
   relationships that actually repeat: section to section, label
   to heading, heading to copy, copy to action.

   It deliberately comes last in the sheet so it supersedes the
   patches above rather than fighting them.
   =========================================================== */
:root {
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: clamp(2rem, 3.5vw, 3rem);
  --s6: clamp(3rem, 5.5vw, 4.5rem);
  --section-y: var(--s6);
}

/* section to section: one gap, never two stacked */
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }
.frame + .section { padding-top: var(--s6) !important; }
.section:last-of-type { padding-bottom: var(--s6); }

/* label -> heading -> copy -> action, the same everywhere */
.section-head { margin-bottom: var(--s5); }
.eyebrow, .tag-mono, .classified-row { margin-bottom: var(--s2); display: inline-flex; }
.section-head h2, .section-head .redact-head { margin: 0 0 var(--s3); }
.section-head .lede, .section-head p { margin: 0; }
.section-head + * { margin-top: 0; }

/* a heading followed directly by copy */
h2 + p, h2 + .lede, h3 + p { margin-top: var(--s3); }
p + p { margin-top: var(--s2); }

/* copy -> action */
.btn-row, .section .btn:not(.frame-actions .btn):not(.hero-form .btn):not(.cta-actions .btn) {
  margin-top: var(--s4);
}
.split > div > .btn { margin-top: var(--s4); }

/* the statement block */
.redact-section .split { margin-top: var(--s5) !important; }
.redact-section .split + div { margin-top: var(--s4) !important; }

/* lists and grids sit a consistent distance under what introduces them */
.outcomes, .claims, .programs-grid, .price-grid, .product-grid,
.steps, .figures, .readout, .table-scroll, .faq, .journey-grid {
  margin-top: var(--s5);
}
.section-head + .outcomes,
.section-head + .claims,
.section-head + .programs-grid,
.section-head + .price-grid,
.section-head + .product-grid,
.section-head + .steps,
.section-head + .journey-grid { margin-top: 0; }

/* the signature, set rather than scanned */
.signature {
  font-family: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  font-size: clamp(3rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: .9;
  color: var(--navy);
  display: block;
  margin: var(--s5) 0 var(--s1);
}
.signature + .link-arrow { display: inline-flex; margin-top: 0; }

/* ===========================================================
   THE HERO PANEL, EVENLY INSET

   The navy band carried a large top padding purely to clear the
   fixed header, so it showed roughly 100px of navy above the
   cream card and 20px below: visibly lopsided. The panel is now
   inset by the same amount on all four sides and the whole band
   is pushed clear of the header instead, which also lets the
   header sit on the page rather than over the artwork.
   =========================================================== */
.frame {
  padding: clamp(1rem, 1.5vw, 1.4rem);
  margin-top: clamp(64px, 6vw, 82px);
}
.frame + .section { padding-top: var(--s5) !important; }

/* the header now sits over cream, so it reads dark throughout */
body.framed-top .site-header:not(.scrolled) .brand,
body.framed-top .site-header:not(.scrolled) .brand .mark,
body.framed-top .site-header:not(.scrolled) .nav-links a:not(.btn) { color: var(--navy); }
body.framed-top .site-header:not(.scrolled) .brand-name small,
body.framed-top .site-header:not(.scrolled) .nav-flag span { color: var(--stone); }
body.framed-top .site-header:not(.scrolled) .nav-toggle { background: var(--paper); border-color: var(--cream-line); }
body.framed-top .site-header:not(.scrolled) .nav-toggle span,
body.framed-top .site-header:not(.scrolled) .nav-toggle span::before,
body.framed-top .site-header:not(.scrolled) .nav-toggle span::after { background: var(--navy); }
body.framed-top .site-header:not(.scrolled) .nav-flag svg { box-shadow: 0 0 0 1px color-mix(in srgb, var(--navy) 20%, transparent); }
body.framed-top .site-header:not(.scrolled) .btn--coral { border-color: transparent; }

/* the intro is still dark, so the homepage keeps the light header there */
body.cinema-view .site-header:not(.scrolled) .brand,
body.cinema-view .site-header:not(.scrolled) .brand .mark,
body.cinema-view .site-header:not(.scrolled) .nav-links a:not(.btn) { color: var(--cream) !important; }
body.cinema-view .site-header:not(.scrolled) .nav-flag span,
body.cinema-view .site-header:not(.scrolled) .brand-name small { color: var(--clay) !important; }
.home .frame { margin-top: 0; }