/* =========================================================
   FIX YOUR PICKER — shared styles (index.html, method.html, thanks.html)
   Bodoni Moda + Instrument Sans · chocolate, cherry, rouge, butter.
   Original homepage styles first; the "2026 restructure" layer at the bottom.
   ========================================================= */
:root {
  /* Color */
  --color-bg: #FBF1DC;           /* cream-butter — primary background */
  --color-bg-alt: #FFFAF1;       /* milk — alternate background / surfaces */
  --color-bg-peach: #F4D7CB;     /* rosé — soft panels */
  --color-bg-deep: #F4D7CB;      /* rosé — feature sections (was chocolate; the site is all-light for readability) */
  --color-text: #2E1A14;         /* chocolate — primary text */
  --color-text-muted: #6B4A3E;   /* cocoa — secondary (7:1 on cream) */
  --color-on-deep: #2E1A14;      /* text on feature sections — chocolate */
  --color-on-deep-muted: #6B4A3E; /* cocoa */
  --color-rouge: #F28A9B;        /* rouge — reddish-pink pop; text on chocolate (7:1), fills on light */
  --color-accent: #B01E3B;       /* cherry — CTA + text accent */
  --color-accent-hover: #8A1530;
  --color-sun: #F2C15B;          /* butter-gold — fills and highlights; text only on chocolate */
  --color-line: #E6D0B0;         /* soft rule on cream */

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text-body: 1.125rem;
  --text-small: 0.9375rem;
  --text-hero: clamp(3.5rem, 1.5rem + 7.4vw, 8.5rem);
  --text-h2: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem);
  --leading-body: 1.65;
  --measure: 35rem;

  /* Space */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --max-width: 80rem;

  /* Shape: radius follows hierarchy */
  --radius-pill: 999px;
  --radius-image: 28px;
  --radius-panel: 22px;
  --shadow-soft: 0 12px 30px -18px rgba(46,26,20,.5);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--color-text); color: var(--color-bg); padding: .5rem 1rem; z-index: 100; border-radius: var(--radius-pill); }
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.section--milk { background: var(--color-bg-alt); }
.section--deep { background: var(--color-bg-deep); color: var(--color-on-deep); }
.section--deep :focus-visible { outline-color: var(--color-sun); }

.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.05; letter-spacing: -0.02em; }
.soft-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.pill-label { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: var(--radius-pill); background: var(--color-bg-alt); font-size: var(--text-small); font-weight: 500; margin-bottom: var(--space-3); }
.pill-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-sun); }
.section--deep .pill-label { background: var(--color-bg-alt); color: var(--color-on-deep); }
.section--milk .pill-label { background: var(--color-bg); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 1.75rem;
  border-radius: var(--radius-pill); background: var(--color-accent); color: #FFFFFF; font-weight: 600; font-size: 1rem; text-decoration: none; border: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.btn::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-sun); transition: transform .2s ease; }
.btn:hover { background: var(--color-accent-hover); }
.btn:hover::after { transform: scale(1.5); }
.btn--small { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: .9375rem; }
.btn--butter { background: var(--color-bg); color: var(--color-accent); }
.btn--butter:hover { background: var(--color-bg-alt); }

/* ---------- Photo placeholders ---------- */
.photo { position: relative; aspect-ratio: var(--ratio, 4 / 5); border-radius: var(--radius-image); overflow: hidden; display: flex; align-items: flex-end;
  background: radial-gradient(circle at 25% 20%, #F6C98A 0, transparent 45%), radial-gradient(circle at 80% 85%, #E9A8A0 0, transparent 50%), #F1D8B8; }
.photo--cool { background: radial-gradient(circle at 70% 25%, #EAD9C6 0, transparent 45%), radial-gradient(circle at 20% 80%, #CFA7B9 0, transparent 55%), #E4CFC7; }
.photo__spec { margin: .75rem; padding: .85rem 1rem; border-radius: 16px; background: rgba(255,253,248,.88); font-size: .8125rem; line-height: 1.45; color: var(--color-text); }
.photo__spec strong { display: block; font-weight: 600; margin-bottom: .2rem; }

/* ---------- Header: floating pill ---------- */
.site-header { position: sticky; top: .75rem; z-index: 50; padding-inline: var(--gutter); }
.site-header__inner { max-width: calc(var(--max-width) - 2 * var(--gutter)); margin: .75rem auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: rgba(255,253,248,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-pill); padding: .4rem .4rem .4rem 1.4rem; box-shadow: var(--shadow-soft); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: .45rem; }
.wordmark::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-sun); }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__links { display: flex; gap: .25rem; }
.nav__links a { text-decoration: none; padding: .55rem .9rem; border-radius: var(--radius-pill); font-size: .9375rem; font-weight: 500; }
.nav__links a:hover { background: var(--color-bg); }
.menu { display: none; }

/* ---------- 01 Hero ---------- */
.hero { background: var(--color-bg); overflow: hidden; }

/* Desktop: named-area grid so the portrait, headline and copy can be freely
   rearranged per breakpoint from the same flat markup (no duplicated HTML).
   Contained (not edge-bleeding) so left/right margins stay symmetric: an
   text left, portrait in a wider right column (1 : 1.35) so the photo can
   run large. Spacer rows (1fr) top and bottom keep the text block compact
   and vertically centered beside the taller portrait. */
.hero__layout {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  grid-template-rows: 1fr repeat(5, auto) 1fr;
  grid-template-areas:
    ".        portrait"
    "title    portrait"
    "sub      portrait"
    "support  portrait"
    "cta      portrait"
    "proof    portrait"
    ".        portrait";
  align-items: center;
  column-gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.hero__kicker { grid-area: kicker; font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); letter-spacing: .09em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .6rem; text-wrap: balance; max-width: 20ch; }
.hero__title { grid-area: title; font-family: var(--font-display); font-size: var(--text-hero); line-height: .95; letter-spacing: -0.035em; text-wrap: balance; }
.hero__title .soft-italic { color: var(--color-accent); }
.hero__sub { grid-area: sub; margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; max-width: 30rem; text-wrap: pretty; }
.hero__support { grid-area: support; margin-top: var(--space-2); color: var(--color-text-muted); max-width: 28rem; text-wrap: pretty; }
.hero__cta { grid-area: cta; margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hero__cta-link { font-weight: 500; text-underline-offset: .25em; }

/* Portrait: sized by its OWN aspect ratio (never cropped, never stretched),
   centered in the right half, capped so it still fits within a typical
   laptop's first viewport (height is nearly always the binding constraint
   here, not width). */
.hero__portrait { grid-area: portrait; justify-self: center; align-self: center; }
.hero__portrait img { display: block; width: auto; height: auto; max-width: min(100%, 46rem); max-height: min(90vh, 60rem); object-fit: contain; margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  .hero__portrait img { animation: hero-settle 1.1s cubic-bezier(.2,.8,.2,1) both .1s; }
  @keyframes hero-settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
}

/* ---------- 02 Recognition: reads like your own thoughts ---------- */
.recognition__title { max-width: 20ch; }
.thoughts { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); max-width: 56rem; }
.thought { max-width: 34rem; background: var(--color-bg); padding: 1.1rem 1.4rem; border-radius: var(--radius-panel) var(--radius-panel) var(--radius-panel) 6px; font-size: 1.125rem; }
.thought:nth-child(even) { align-self: flex-end; background: var(--color-bg-peach); border-radius: var(--radius-panel) var(--radius-panel) 6px var(--radius-panel); }
.pull-line { margin-top: var(--space-5); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); line-height: 1.05; color: var(--color-accent); max-width: 18ch; letter-spacing: -0.02em; }

/* ---------- 03 What I help with ---------- */
.help__grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-5); align-items: start; }
.help__body { color: var(--color-on-deep-muted); font-size: 1.1875rem; }
.help__question { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.2; color: var(--color-sun); }
.help__question-label { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-small); color: var(--color-on-deep-muted); margin-bottom: .5rem; }
.chips-shift { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.chips-shift h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .45rem 1rem; border-radius: var(--radius-pill); font-size: 1rem; }
.chips--from li { border: 1.5px solid rgba(46,26,20,.22); color: var(--color-on-deep-muted); }
.chips--to li { background: var(--color-sun); color: var(--color-text); font-weight: 600; }
.chips-shift__arrow { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; }
.chips-shift__arrow svg { width: 1.4rem; }

/* ---------- 04 Method ---------- */
.method__title { font-size: clamp(2.75rem, 1.2rem + 6vw, 7rem); line-height: .98; }
.method__title span { display: block; }
.method__title .soft-italic { color: var(--color-accent); }
.trio { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.trio__item { background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-3) var(--space-3); }
.trio__mark { width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-3); }
.trio__name { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; margin-bottom: .5rem; }

.shift-rows { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.shift-rows__head { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; }
.shift-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-radius: var(--radius-pill); background: var(--color-bg-peach); }
.shift-row__from { color: var(--color-text-muted); }
.shift-row__arrow { color: var(--color-accent); font-weight: 600; }
.shift-row__to { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }

/* Picker spectrum: interactive track (all three show without JS) */
.spectrum { margin-top: var(--space-5); background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: clamp(1.25rem, 1rem + 2vw, 3rem); }
.spectrum__head { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; margin-bottom: .25rem; }
.spectrum__hint { color: var(--color-text-muted); font-size: var(--text-small); display: none; }
.spectrum__tabs { display: none; position: relative; margin-block: var(--space-4) var(--space-3); }
.js .spectrum__tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.js .spectrum__hint { display: block; }
.spectrum__tabs::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 6px; background: linear-gradient(90deg, var(--color-line), var(--color-sun), var(--color-accent)); }
.spectrum__tab { position: relative; justify-self: center; border: 0; background: var(--color-bg-alt); border: 2px solid var(--color-text); border-radius: var(--radius-pill); padding: .6rem 1.1rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.spectrum__tab:first-child { justify-self: start; }
.spectrum__tab:last-child { justify-self: end; }
.spectrum__tab[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.spectrum__panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.js .spectrum__panels { display: block; }
.spectrum__panel h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: .25rem; }
.js .spectrum__panel h4 { display: none; }
.spectrum__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); color: var(--color-accent); line-height: 1.1; margin-bottom: .5rem; }
.spectrum__panel p:not(.spectrum__quote) { max-width: 38rem; }

.aside { margin-top: var(--space-4); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; background: var(--color-bg-peach); border-radius: var(--radius-panel); padding: clamp(1.25rem, 1rem + 2vw, 2.75rem); }
.aside__mark { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; }
.aside__head { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.15; margin-bottom: .75rem; }
.aside p + p { margin-top: .5rem; }
.aside__q { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; }
.aside__close { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--color-accent); }

/* ---------- 05 Shield: orbit ---------- */
.shield__grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-5); align-items: center; }
.orbit { display: none; position: relative; width: min(100%, 32rem); aspect-ratio: 1; margin-inline: auto; }
.js .orbit { display: block; }
.orbit::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(46,26,20,.25); }
.orbit__node { position: absolute; width: 27%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(46,26,20,.3); background: var(--color-bg-alt); color: var(--color-on-deep); cursor: pointer; font-weight: 600; font-size: clamp(.8125rem, .7rem + .4vw, 1rem); line-height: 1.15; padding: .25rem; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.orbit__node:hover { border-color: var(--color-sun); }
.orbit__node[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.orbit__node--heart { width: 40%; left: 30%; top: 30%; background: var(--color-sun); color: var(--color-text); border-color: var(--color-sun); font-family: var(--font-display); font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); font-weight: 600; }
.orbit__node--heart small { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 500; margin-top: .2rem; }
.orbit__node--heart[aria-selected="true"] { background: var(--color-sun); border-color: var(--color-on-deep); box-shadow: 0 0 0 6px rgba(242,193,91,.3); }
.orbit__node--env { left: 11%; top: 11%; }
.orbit__node--mind { right: 11%; top: 11%; }
.orbit__node--body { left: 11%; bottom: 11%; }
.orbit__node--beauty { right: 11%; bottom: 11%; }
.domain-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.js .domain-panels { display: block; }
.domain-panel { background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: var(--space-3); }
.domain-panel--north { grid-column: 1 / -1; background: var(--color-sun); color: var(--color-text); }
.js .domain-panel { background: var(--color-bg-alt); color: var(--color-on-deep); }
.domain-panel__tag { font-size: var(--text-small); color: var(--color-sun); font-weight: 600; margin-bottom: .25rem; }
.domain-panel--north .domain-panel__tag { color: var(--color-text); }
.js .domain-panel--north .domain-panel__tag { color: var(--color-sun); }
.domain-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; margin-bottom: var(--space-2); }
.domain-panel li { padding-block: .35rem; border-bottom: 1px solid rgba(46,26,20,.12); }
.domain-panel--north li { border-color: rgba(46,26,20,.2); }
.js .domain-panel--north li { border-color: rgba(46,26,20,.12); }

/* ---------- 06 How we work: timeline ---------- */
.timeline { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); position: relative; }
.timeline::before { content: ""; position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; height: 2px; background: var(--color-line); }
.timeline__step { position: relative; padding-top: 3.75rem; }
.timeline__dot { position: absolute; top: 0; left: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-weight: 600; }
.timeline__card { background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: var(--space-3); height: 100%; }
.timeline__label { font-size: var(--text-small); color: var(--color-text-muted); font-weight: 500; }
.timeline__name { font-family: var(--font-display); font-weight: 600; font-size: 1.625rem; line-height: 1.15; margin-block: .25rem .75rem; }
.timeline__q { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--color-accent); margin-bottom: .5rem; }
.timeline__card p + p { margin-top: .5rem; }
.included { margin-top: var(--space-5); }
.included__head { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; margin-bottom: var(--space-2); }
.included .chips li { background: var(--color-bg-peach); padding: .6rem 1.1rem; }

/* ---------- 07 Why ---------- */
.why__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-5); align-items: center; }
.why__title { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 6rem); line-height: 1; }
.why__body { margin-top: var(--space-3); }
.why__quote { margin-top: var(--space-4); background: var(--color-sun); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-3); transform: rotate(-1.5deg); }
.why__quote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.12; }
.why__close { margin-top: var(--space-4); }
.why__close p + p { margin-top: .75rem; }
.why__close p:last-child { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }

/* ---------- 08 About ---------- */
.about__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-5); align-items: start; }
.about__photo { position: sticky; top: 6.5rem; }
.about__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--space-4); }
.about__turn { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.3; padding: var(--space-3); border-radius: var(--radius-panel); background: var(--color-bg-peach); margin-block: var(--space-3) !important; }
.about__question { margin-block: var(--space-3) var(--space-4); font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.1; color: var(--color-accent); }
.about__philosophy p:first-child { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; margin-bottom: .5rem; }
.draft { margin-top: var(--space-4); padding: 1rem 1.25rem; border: 2px dashed var(--color-text-muted); border-radius: 16px; font-size: var(--text-small); color: var(--color-text-muted); max-width: var(--measure); }
.draft b { color: var(--color-accent); }

/* ---------- 09 Goals ---------- */
.goals__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); }
.goals__note { color: var(--color-text-muted); font-size: var(--text-small); max-width: 24rem; }
.goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); }
.goals li { display: flex; gap: 1rem; align-items: baseline; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; padding-block: .9rem; border-bottom: 2px solid var(--color-line); }
.goals li::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-sun); }
.goals li:last-child { grid-column: 1 / -1; }
.coming-soon { margin-top: var(--space-4); border: 2px dashed var(--color-text-muted); border-radius: var(--radius-panel); padding: 2.5rem 1.5rem; text-align: center; color: var(--color-text-muted); font-weight: 600; letter-spacing: .04em; }

/* ---------- 10 Final CTA ---------- */
.final { background: var(--color-accent); color: var(--color-bg); text-align: center; }
.final__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 1.5rem + 6vw, 7.5rem); line-height: .98; letter-spacing: -0.03em; max-width: 12ch; margin-inline: auto; }
.final__line { margin-top: var(--space-3); font-size: 1.25rem; }
.final .btn { margin-top: var(--space-4); }
.final :focus-visible { outline-color: var(--color-bg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg-deep); color: var(--color-on-deep-muted); padding-block: var(--space-4); font-size: var(--text-small); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
.site-footer .wordmark { color: var(--color-on-deep); }
.site-footer a { color: var(--color-on-deep); }
.site-footer :focus-visible { outline-color: var(--color-sun); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(46,26,20,.07); color: var(--color-on-deep); font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; transition: background-color .2s ease; }
.social-link:hover { background: rgba(46,26,20,.14); }
.social-link--soon { opacity: .5; border: 1px dashed var(--color-on-deep-muted); background: transparent; cursor: default; }

/* =========================================================
   MOBILE (designed at 390px; holds to 375px)
   ========================================================= */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
  .menu summary { list-style: none; cursor: pointer; min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-bg); font-weight: 600; font-size: .9375rem; display: flex; align-items: center; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__panel { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .5rem); background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: 1rem; box-shadow: var(--shadow-soft); }
  .menu__panel a:not(.btn) { display: block; padding: .75rem 1rem; border-radius: 14px; font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; }
  .menu__panel .btn { width: 100%; margin-top: .5rem; }
  .site-header { position: sticky; }

  /* Mobile: portrait sits beside the WHOLE opening headline (kicker + big
     title stacked together on the right), sized large enough to roughly
     match that combined height - so face + full headline read as one
     opening composition, not a tiny thumbnail beside just the label. */
  .hero__layout {
    padding-inline: var(--gutter);
    padding-block: var(--space-4);
    column-gap: 1rem;
    row-gap: 0;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "portrait title"
      "sub      sub"
      "support  support"
      "cta      cta"
      "proof    proof";
  }
  .hero__portrait { justify-self: start; align-self: center; }
  .hero__portrait img { max-width: clamp(7rem, 32vw, 9.75rem); max-height: none; border-radius: var(--radius-image); box-shadow: var(--shadow-soft); }
  .hero__kicker { align-self: end; margin-bottom: .4rem; }
  .hero__title { font-size: clamp(2.25rem, 10vw, 3.25rem); margin-top: 0; }
  .hero__cta .btn { width: 100%; }

  .thought, .thought:nth-child(even) { max-width: 92%; }

  .help__grid, .shield__grid, .why__grid, .about__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .chips-shift { grid-template-columns: 1fr; }
  .chips-shift__arrow { transform: rotate(90deg); width: 2.75rem; height: 2.75rem; }

  .trio { grid-template-columns: 1fr; }
  .trio__item { display: grid; grid-template-columns: 3rem 1fr; gap: 0 1rem; padding: var(--space-3); }
  .trio__mark { width: 3rem; height: 3rem; grid-row: span 2; margin: 0; }
  .shift-rows { grid-template-columns: 1fr; }
  .shift-row { border-radius: 18px; }

  .js .spectrum__tabs { grid-template-columns: 1fr 1fr 1fr; gap: .35rem; }
  .spectrum__tab { font-size: .8125rem; padding: .5rem .6rem; }
  .spectrum__panels { grid-template-columns: 1fr; }
  .aside { grid-template-columns: 1fr; }

  .orbit { width: min(100%, 21rem); }
  .domain-panels { grid-template-columns: 1fr; }

  /* Timeline goes vertical */
  .timeline { grid-template-columns: 1fr; gap: var(--space-3); }
  .timeline::before { top: 1.25rem; bottom: 1.25rem; left: 1.2rem; right: auto; width: 2px; height: auto; }
  .timeline__step { padding-top: 0; padding-left: 3.5rem; }

  .why__quote { transform: rotate(-1deg); }
  .about__photo { position: static; width: 88%; }
  .goals { grid-template-columns: 1fr; }
  .final .btn { width: 100%; }
}

/* ---------- C3: hero on chocolate sections elsewhere ---------- */
.section--deep .btn:not(.btn--butter), .mid-cta .btn { box-shadow: 0 0 0 1.5px var(--color-rouge); }
.section--deep .btn:not(.btn--butter):hover, .mid-cta .btn:hover { background: var(--color-rouge); color: var(--color-text); }
.help__question { color: var(--color-rouge); }
.chips--to li { background: var(--color-rouge); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Mid-page CTA ---------- */
.mid-cta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-bg-deep); color: var(--color-on-deep); border-radius: var(--radius-panel); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.mid-cta__line { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.15; max-width: 26ch; }
.mid-cta :focus-visible { outline-color: var(--color-sun); }

/* ---------- 05b The Sword: authenticity in action ---------- */
.sword { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(46,26,20,.12); }
.sword__head { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-4); align-items: end; margin-bottom: var(--space-5); }
.sword__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: 1.02; letter-spacing: -0.02em; }
.sword__title .soft-italic { color: var(--color-rouge); display: block; }
.sword__intro { color: var(--color-on-deep-muted); font-size: 1.1875rem; max-width: 34rem; }
.sword__intro strong { color: var(--color-on-deep); font-weight: 600; }
/* The blade: a single line from hilt to tip, each move a notch along it */
.blade { position: relative; display: grid; grid-template-columns: repeat(8, 1fr) 14rem; align-items: center; padding-block: 5.5rem; padding-left: 3rem; }
.blade::before { content: ""; position: absolute; left: 3rem; right: 12.5rem; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 4px; background: linear-gradient(90deg, rgba(46,26,20,.15), var(--color-rouge) 70%, var(--color-accent)); }
.blade::after { content: ""; position: absolute; right: 11.25rem; top: 50%; transform: translateY(-50%); border-left: 22px solid var(--color-accent); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.blade__hilt { position: absolute; left: calc(3rem - 2px); top: 50%; width: 4px; height: 44px; transform: translateY(-50%); background: var(--color-sun); border-radius: 4px; }
.blade__move { position: relative; display: flex; justify-content: center; }
.blade__move::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--color-bg-alt); border: 2.5px solid var(--color-accent); position: relative; z-index: 1; transition: background-color .2s ease, transform .2s ease; }
.blade__move:hover::before { background: var(--color-rouge); transform: scale(1.3); }
.blade__label { position: absolute; left: 50%; transform: translateX(-50%); width: 8.5rem; text-align: center; font-size: .9375rem; line-height: 1.3; font-weight: 500; }
.blade__move:nth-child(odd) .blade__label { bottom: calc(100% + 1rem); }
.blade__move:nth-child(even) .blade__label { top: calc(100% + 1rem); }
.blade__tip { position: relative; justify-self: stretch; padding-left: 2.25rem; text-align: left; }
.blade__tip span { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1rem + 1vw, 2rem); color: var(--color-rouge); line-height: 1; white-space: nowrap; }
.blade__tip small { display: block; font-size: var(--text-small); color: var(--color-on-deep-muted); margin-top: .35rem; }
.triad-line { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.triad-line li { border-radius: var(--radius-panel); padding: var(--space-3); background: var(--color-bg-alt); font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.25; }
.triad-line b { display: block; font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; color: var(--color-sun); margin-bottom: .35rem; }

@media (max-width: 900px) {
  .mid-cta .btn { width: 100%; }
  .sword__head { grid-template-columns: 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
  /* Blade turns vertical: hilt at top, tip at bottom */
  .blade { grid-template-columns: 1fr; gap: 1.35rem; padding: 1rem 0 0 2.25rem; }
  .blade::before { left: .55rem; right: auto; top: 0; bottom: 3.25rem; width: 4px; height: auto; transform: none; background: linear-gradient(180deg, rgba(46,26,20,.15), var(--color-rouge) 70%, var(--color-accent)); }
  .blade::after { left: calc(.55rem - 7px); right: auto; top: auto; bottom: 2.1rem; transform: none; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 20px solid var(--color-accent); border-bottom: 0; }
  .blade__hilt { left: calc(.55rem - 18px); top: 0; width: 40px; height: 4px; transform: none; }
  .blade__move { justify-content: flex-start; align-items: center; gap: 1rem; margin-left: calc(-2.25rem + .55rem - 5px); }
  .blade__label, .blade__move:nth-child(odd) .blade__label, .blade__move:nth-child(even) .blade__label { position: static; transform: none; width: auto; text-align: left; font-size: 1rem; }
  .blade__tip { justify-self: start; margin: 2.25rem 0 0; padding-left: 0; text-align: left; }
  .triad-line { grid-template-columns: 1fr; }
}

/* =========================================================
   FINAL LAYER — Bodoni display type, restrained colour, light hover
   ========================================================= */
/* Bodoni runs visually smaller than Fraunces: nudge weights, tighten spacing */
.h2, .sword__title, .about__title, .final__title, .why__title, .method__title { font-weight: 500; letter-spacing: -0.025em; }
.soft-italic { font-weight: 400; }
.wordmark { font-weight: 600; letter-spacing: .01em; }

/* Hero: magazine-cover caps, PICKER in cherry.
   font-weight 700 + a fixed smaller optical size (instead of letting the
   variable font scale opsz up with the huge display size) keeps strokes
   sturdy/legible at this size instead of hairline-thin. */
.hero__title { font-weight: 700; font-variation-settings: 'opsz' 30; text-transform: uppercase; line-height: .86; letter-spacing: -0.04em; font-size: clamp(3rem, .96rem + 5.44vw, 6.4rem); }
.hero__line { display: block; }
.hero .hero__line--accent { color: var(--color-accent); }

/* Recognition pull line: caps statement, italic turn */
.pull-line { font-style: normal; max-width: none; font-weight: 500; line-height: .95; }
.pull-line__caps { display: block; text-transform: uppercase; color: var(--color-text); letter-spacing: -0.04em; font-size: clamp(2.5rem, 1rem + 5vw, 6.25rem); }
.pull-line__italic { display: block; font-style: italic; font-weight: 400; color: var(--color-accent); padding-left: clamp(1rem, 6vw, 7rem); font-size: clamp(2.25rem, 1rem + 4.4vw, 5.5rem); }

/* Fewer pink moments: rouge stays on hero, Sword, blade */
.help__question { color: var(--color-sun); }
.chips--to li { background: var(--color-sun); }

.credential { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--color-line); font-size: var(--text-small); color: var(--color-text-muted); max-width: var(--measure); }

.kind-words { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kind-words[hidden] { display: none; }
.kind-words__head { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; }
.kind-word { background: var(--color-bg-peach); border-radius: var(--radius-panel); padding: var(--space-4) var(--space-3); }
.kind-word blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.25; }
.kind-word figcaption { margin-top: 1rem; font-size: var(--text-small); color: var(--color-text-muted); font-weight: 500; }

/* Light hover: buttons lift + glow; clickable charts glow. Nothing else moves. */
.btn { transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { box-shadow: 0 12px 26px -12px rgba(176,30,59,.75); }
.spectrum__tab, .orbit__node { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.spectrum__tab:hover { box-shadow: 0 0 0 4px rgba(242,138,155,.35); }
.orbit__node:hover { box-shadow: 0 0 22px 2px rgba(242,138,155,.45); }
.blade__move:hover::before { box-shadow: 0 0 14px 3px rgba(242,138,155,.6); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}

@media (max-width: 900px) {
  .hero__title { font-size: clamp(2.6rem, 13.2vw, 4.4rem); }
  .pull-line__italic { padding-left: 0; }
  .kind-words { grid-template-columns: 1fr; }
}

/* =========================================================
   2026 RESTRUCTURE LAYER
   Shorter homepage, soft-launch CTA, method.html, thanks.html.
   Same tokens, fonts and palette — nothing new in the palette.
   ========================================================= */

/* ---------- Header: CTA always visible, icon menu on mobile ---------- */
.header-actions { display: flex; align-items: center; gap: .5rem; }
.label-short { display: none; }
.menu summary .menu__icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Hero proof (R.R.) ---------- */
.hero__proof { grid-area: proof; margin-top: var(--space-3); max-width: 30rem; padding-left: 1.25rem; border-left: 3px solid var(--color-rouge); }
.hero__proof blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--color-text); text-wrap: pretty; }
.hero__proof figcaption { margin-top: .5rem; font-size: var(--text-small); color: var(--color-text-muted); font-weight: 500; }

/* ---------- Reframe ---------- */
.reframe__body { font-size: 1.25rem; line-height: 1.55; color: var(--color-on-deep); max-width: 30rem; }

/* ---------- Method (homepage, named not taught) ---------- */
.method__intro { margin-top: var(--space-3); max-width: 36rem; font-size: 1.1875rem; color: var(--color-text-muted); }
.trio__domains { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.trio__domains li { padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-small); font-weight: 500; }
.trio__domains li:first-child { background: var(--color-sun); font-weight: 600; }
.method .triad-line li { background: var(--color-bg-peach); }
.method .triad-line b { color: var(--color-accent); }
.method__expand { margin-top: var(--space-5); display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-4); align-items: end; }
.method__expand-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem); line-height: 1; color: var(--color-accent); letter-spacing: -0.02em; }
.method__expand p:not(.method__expand-title) { font-size: 1.1875rem; max-width: 30rem; }
.cta-row { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.text-link { font-weight: 600; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.text-link:hover { color: var(--color-accent); }

/* ---------- Work with me: plain offer block ---------- */
.offer__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-5); align-items: start; }
.offer__photo { position: sticky; top: 6.5rem; }
.offer__blocks { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.offer__block { padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-line); }
.offer__block h3 { font-size: var(--text-small); font-weight: 600; color: var(--color-accent); margin-bottom: .35rem; }
.offer__block p { max-width: 36rem; }
.arc { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); counter-reset: arc; }
.arc li { background: var(--color-bg); border-radius: var(--radius-panel); padding: var(--space-3); }
.arc__label { display: block; font-size: var(--text-small); color: var(--color-text-muted); font-weight: 500; }
.arc__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; margin-top: .25rem; }
.offer .mid-cta { margin-top: var(--space-4); }

/* ---------- About additions ---------- */
.about__name { margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--text-small); font-weight: 500; }
.about__ceiling { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; max-width: var(--measure); }
.about .kind-word { margin-top: var(--space-4); max-width: 40rem; }

/* ---------- Final: outcomes + first-access form ---------- */
.final--split { text-align: left; }
.final__grid { display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-5); align-items: start; }
.final .pill-label { background: var(--color-bg-alt); color: var(--color-text); }
.final .h2 { color: var(--color-bg); }
.final .goals { margin-top: var(--space-4); grid-template-columns: 1fr; gap: 0; }
.final .goals li { border-color: rgba(46,26,20,.14); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); padding-block: .7rem; }
.final .goals li:last-child { grid-column: auto; }
.final .goals__note { margin-top: var(--space-3); color: var(--color-bg); opacity: .9; }
.signup { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-panel); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: 0 30px 60px -30px rgba(46,26,20,.6); scroll-margin-top: 6rem; }
.signup .final__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); max-width: 11ch; margin-inline: 0; color: var(--color-text); }
.signup__promise { margin-top: var(--space-2); font-size: 1.125rem; }
.signup__form { margin-top: var(--space-4); display: grid; gap: 1rem; }
.field label { display: block; font-size: var(--text-small); font-weight: 600; margin-bottom: .35rem; }
.field input { width: 100%; min-height: 3.25rem; padding: .75rem 1.1rem; border: 2px solid var(--color-line); border-radius: 14px; background: var(--color-bg-alt); font: inherit; color: var(--color-text); transition: border-color .2s ease; }
.field input:hover { border-color: var(--color-text-muted); }
.field input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); }
.signup__form .btn { width: 100%; margin-top: .25rem; cursor: pointer; }
.signup__note { font-size: var(--text-small); color: var(--color-text-muted); }
.signup :focus-visible { outline-color: var(--color-accent); }
.honeypot { display: none; }
[data-mode="calendly"] { display: none; }
.cta-calendly .signup__promise { margin-bottom: var(--space-4); }

/* ---------- method.html ---------- */
.page-intro { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space-section); }
.page-intro__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: center; }
.page-intro__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.75rem, 1.4rem + 5vw, 6.25rem); line-height: .98; letter-spacing: -0.03em; }
.page-intro .prose { margin-top: var(--space-4); color: var(--color-on-deep-muted); font-size: 1.1875rem; }
.page-intro .prose p:first-child { color: var(--color-on-deep); }
.back-cta { text-align: center; }
.back-cta .final__title { margin-bottom: var(--space-2); }
.back-cta__lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.2; max-width: 26ch; margin: 0 auto var(--space-4); }

/* ---------- thanks.html ---------- */
.thanks { min-height: 70vh; display: grid; align-items: center; text-align: center; }
.thanks__title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(3rem, 1.2rem + 7vw, 7rem); line-height: .9; letter-spacing: -0.04em; }
.thanks__title span { display: block; color: var(--color-rouge); font-style: italic; text-transform: none; font-weight: 400; letter-spacing: -0.02em; }
.thanks__line { margin: var(--space-3) auto 0; font-size: 1.25rem; max-width: 30rem; color: var(--color-on-deep-muted); }
.thanks__actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: center; align-items: center; }
.thanks .text-link { color: var(--color-on-deep); }

/* =========================================================
   MOBILE — restructure layer (390px)
   ========================================================= */
@media (max-width: 900px) {
  :root { --space-section: clamp(3.5rem, 2.5rem + 4vw, 4.5rem); }

  /* Header: wordmark · first-access pill · icon menu */
  .site-header__inner { padding: .35rem .35rem .35rem 1rem; gap: .5rem; }
  .wordmark { font-size: 1.1rem; gap: .35rem; }
  .wordmark::before { width: .5rem; height: .5rem; }
  .header-cta { min-height: 2.75rem; padding: .45rem .95rem; font-size: .875rem; }
  .header-cta::after { display: none; }
  .label-long { display: none; }
  .label-short { display: inline; }
  .menu summary { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }


  /* Spectrum: 44px tap targets, short labels, full name shown in panel */
  .spectrum__tab { min-height: 2.75rem; font-size: .9375rem; padding: .5rem 1rem; }
  .js .spectrum__panel h4 { display: block; }

  .method__expand { grid-template-columns: 1fr; gap: var(--space-2); }
  .cta-row .btn { width: 100%; }
  .cta-row { justify-content: center; }

  .offer__grid, .final__grid, .page-intro__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .offer__photo { position: static; width: 80%; }
  .arc { grid-template-columns: 1fr; }
  .about__name { margin-top: calc(-1 * var(--space-2)); }
}
.cta-row--tight { margin-top: var(--space-4); }
.chips-shift__h { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin-bottom: 1rem; }
.page-intro .chips-shift { margin-top: var(--space-5); }
.why__quote--wide { max-width: 40rem; margin-top: 0; }
.nav__links a[aria-current="page"] { background: var(--color-bg); }
.back-cta .final__line { margin-bottom: 0; }
.shield__title { margin-bottom: var(--space-4); }

/* ---------- Mobile polish after review ---------- */
.trio__domains li { white-space: nowrap; }
@media (max-width: 900px) {
  .trio__domains { grid-column: 1 / -1; margin-top: 1.25rem; }
  .method .triad-line { gap: 0; background: var(--color-bg-peach); border-radius: var(--radius-panel); padding: .5rem var(--space-3); }
  .method .triad-line li { background: transparent; border-radius: 0; padding: .9rem 0; }
  .method .triad-line li + li { border-top: 1px solid rgba(46,26,20,.12); }
  .offer__photo { width: 100%; }
  .offer__photo .photo { aspect-ratio: 4 / 3; }
  .offer__photo img { object-position: 50% 18%; }
}

/* =========================================================
   BLOG — blog/index.html listing + blog/<slug>.html posts.
   Same tokens, fonts and palette as the rest of the site.
   ========================================================= */
.blog-list { display: grid; gap: var(--space-3); }
.blog-card { background: var(--color-bg-alt); border-radius: var(--radius-panel); box-shadow: var(--shadow-soft); }
.blog-card__link { display: block; padding: var(--space-4); text-decoration: none; color: inherit; }
.blog-card__meta, .post-meta { font-size: var(--text-small); color: var(--color-text-muted); font-weight: 500; }
.chips--tag { margin-top: .6rem; }
.chips--tag li { border: 1.5px solid var(--color-line); font-size: var(--text-small); font-weight: 500; padding: .3rem .85rem; }
.blog-card__title { margin-top: .75rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; }
.blog-card__excerpt { margin-top: .5rem; max-width: var(--measure); }
.blog-card__cta { display: inline-block; margin-top: var(--space-2); }

.post-title { margin-top: .25rem; }
.post-meta { margin-top: var(--space-2); }
.post-body .pull-line.post-pull-line { margin-top: var(--space-4); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); max-width: 26ch; }

.author-bio { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px solid var(--color-line); display: flex; align-items: center; gap: var(--space-3); }
.author-bio__photo { width: 4.5rem; flex: none; }
.author-bio__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.author-bio__line { margin-top: .2rem; color: var(--color-text-muted); font-size: var(--text-small); }
.author-bio__disclaimer { margin-top: .35rem; color: var(--color-text-muted); font-size: .8125rem; }

/* Long-form article body: subheadings and lists inside .prose */
.post-photo { margin: 0 0 var(--space-4); max-width: 24rem; }
@media (min-width: 761px) { .post-photo { max-width: 17rem; } }
.post-photo img { object-position: 50% 30%; }
.post-body h2 { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.post-body ul, .post-body ol { margin: var(--space-2) 0; padding-left: 1.25rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: .4rem; }
.post-body li::marker { color: var(--color-accent); }
.post-body .faq-q { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; }

.mid-cta p:not(.mid-cta__line) { margin-top: .5rem; color: var(--color-on-deep-muted); max-width: 30rem; }

/* Calm callout inside a post body (e.g. crisis/safety note): reuses .aside,
   single column since a safety note doesn't need the circular mark icon. */
.post-body .aside { grid-template-columns: 1fr; }
.post-body .aside h2 { margin-top: 0; }

@media (max-width: 900px) {
  .blog-card__link { padding: var(--space-3); }
}

/* Hero CTA reads as a plain underlined link (not a pill button) at every
   width, so it doesn't compete with the headline and portrait. Label and
   destination still come from CTA_MODE in site.js via data-cta. */
.hero__cta .btn,
.hero__cta .btn:hover,
.thanks__book .btn,
.thanks__book .btn:hover {
  display: inline; width: auto; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  color: var(--color-accent); font-size: 1.125rem; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em;
}
.hero__cta .btn::after, .thanks__book .btn::after { content: none; }
.hero__cta .btn:hover, .thanks__book .btn:hover { color: var(--color-accent-hover); text-decoration-thickness: 2.5px; }

/* Desktop hero: two-line, larger kicker. */
@media (min-width: 901px) {
  .hero__kicker { font-size: 1.125rem; max-width: none; line-height: 1.4; }
  .hero__kicker-line { display: block; }
}

/* Tablet portrait hero (600-900px): a much larger portrait beside the
   two-line kicker + title (grouped and vertically centered via spacer
   rows), with the rest of the copy full width below. Phones keep the
   compact thumbnail layout. */
@media (min-width: 600px) and (max-width: 900px) {
  .hero__layout {
    column-gap: 2rem;
    padding-block: var(--space-5);
    grid-template-rows: 1fr auto 1fr auto auto auto auto;
    grid-template-areas:
      "portrait ."
      "portrait title"
      "portrait ."
      "sub      sub"
      "support  support"
      "cta      cta"
      "proof    proof";
  }
  .hero__portrait img { max-width: clamp(14rem, 36vw, 19rem); }
  .hero__kicker { font-size: 1.0625rem; max-width: none; line-height: 1.4; }
  .hero__kicker-line { display: block; }
  .hero__sub { margin-top: var(--space-4); }
  .hero__sub, .hero__support { max-width: 34rem; }
}

/* Orphans + even line lengths, sitewide. `balance` evens out every line
   of headings, paragraphs, list items and quotes so nothing ends on a
   lone word (very long blocks fall back to normal wrapping). The #main
   scope outranks the per-component `text-wrap: pretty` rules. */
#main :is(h1, h2, h3, h4, p, li, blockquote, figcaption, dt, dd) { text-wrap: balance; }
#main .trio__domains li { text-wrap: nowrap; } /* keep the domain chips on one line */
#main .why__quote p { text-wrap: wrap; } /* hand-broken lines; balancing would re-wrap them */
/* Two-sentence closing headlines: one sentence per line. */
.final__title-line { display: block; }
/* "They were picking me strongly." pair: one sentence per line; if a
   sentence has to wrap (phones), it splits evenly and the second half
   hangs indented under the first. */
.about__turn-line { display: block; padding-left: 1.25em; text-indent: -1.25em; }

/* Hand-set line breaks: .lb is its own line at every width; .lb-m only
   on phones. Block spans (not <br>) so text-wrap: balance still evens
   out each line on its own if it has to wrap. */
.lb { display: block; }
.nowrap { white-space: nowrap; } /* keep a hyphenated word (and its dash) together */
@media (max-width: 600px) { .lb-m { display: block; } }

/* Phones: "Are you dating a partner" on one line (scaled to the screen
   width), with the italic line scaled to match; tablet/desktop keep the
   clamp sizes, where it already fits on one line. */
@media (max-width: 900px) {
  /* 6.3vw leaves ~10% slack for Safari's slightly wider Bodoni; nowrap
     guarantees the caps line never breaks on phones/tablets. */
  .pull-line__caps { font-size: min(clamp(2.5rem, 1rem + 5vw, 6.25rem), 6.3vw); white-space: nowrap; }
  .pull-line__italic { font-size: min(clamp(2.25rem, 1rem + 4.4vw, 5.5rem), 5.8vw); }
}

/* Phones: "They were picking me strongly." / "I wasn't evaluating them
   strongly." each on one line: type and box padding scale down with the
   screen instead of wrapping. */
@media (max-width: 600px) {
  .about__turn { font-size: min(1.625rem, calc((100vw - 5rem) / 14)); padding-inline: 1rem; }
  .about__turn-line { padding-left: 0; text-indent: 0; }
}

/* Hero testimonial: narrow enough to settle into three even lines. */
.hero__proof blockquote { max-width: 17em; }

/* Hand-set line breaks, so lines are even on every phone and browser (not
   only ones that support text-wrap: balance). <br class="bm"> breaks only
   on phones (≤600px), <br class="bd"> only on desktop (≥1200px); tablet
   sets below. Blocks with active
   hand breaks switch balancing off so it can't re-wrap the set lines. */
br.bm, br.bd { display: none; }
@media (max-width: 600px) {
  br.bm { display: inline; }
  #main :has(> br.bm) { text-wrap: wrap; }
}
@media (min-width: 1200px) {
  br.bd { display: inline; }
  #main :has(> br.bd) { text-wrap: wrap; }
}
/* Tablets get their own sets: <br class="bt"> upright (700–900px, the
   phone-style layout) and <br class="bl"> sideways / small laptops
   (901–1199px, the desktop layout). 601–699px keeps automatic balancing. */
br.bt, br.bl { display: none; }
@media (min-width: 700px) and (max-width: 900px) {
  br.bt { display: inline; }
  #main :has(> br.bt) { text-wrap: wrap; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  br.bl { display: inline; }
  #main :has(> br.bl) { text-wrap: wrap; }
}

/* Boxes hug their (now hand-balanced) text instead of keeping the old
   full width, so there's no empty strip on the right: the "This is you"
   bubbles read like a real message thread, and the About callouts sit
   snug around their lines. */
.thought { width: fit-content; }
.about__turn { width: fit-content; max-width: 100%; }
@media (min-width: 700px) {
  /* 18.5 × the quote's font size (+ padding): it wraps the same way at every
     tablet/desktop width, so the last line never ends on a lone word. */
  .about .kind-word { max-width: calc(18.5 * clamp(1.375rem, 1.1rem + .8vw, 1.875rem) + 2 * var(--space-3)); }
}

/* Hero label: "Relationship coaching" / "for women" as separate phrases at
   every width (phones may wrap the first phrase again in the narrow
   column, but "for women" never splits). */
.hero__kicker-line { display: block; }


/* =========================================================
   ALL-LIGHT LAYER — readability pass. Every section now sits on the
   hero's light palette: cream / milk for most, soft rosé for feature
   sections (the old chocolate ones, via --color-bg-deep) and the closing
   CTA (was cherry). Text is chocolate/cocoa throughout; cherry is the
   text accent; gold and rouge stay small (dots, chips, rules) so nothing
   reads overly bright.
   ========================================================= */
/* Page headers (About, Method, blog) and the thank-you page: cream, like the hero */
.page-intro.section--deep, .thanks.section--deep { background: var(--color-bg); }
.section--deep :focus-visible, .mid-cta :focus-visible, .site-footer :focus-visible, .final :focus-visible { outline-color: var(--color-accent); }

/* Buttons on the old dark surfaces lose their rouge ring/hover */
.section--deep .btn:not(.btn--butter), .mid-cta .btn { box-shadow: none; }
.section--deep .btn:not(.btn--butter):hover, .mid-cta .btn:hover { background: var(--color-accent-hover); color: #FFFFFF; }

/* Text that was gold/rouge (only legible on chocolate) becomes cherry */
.help__question, .domain-panel__tag, .js .domain-panel--north .domain-panel__tag,
.sword__title .soft-italic, .blade__tip span, .thanks__title span,
.section--deep .triad-line b { color: var(--color-accent); }

/* Closing CTA sections: soft rosé instead of solid cherry */
.final { background: var(--color-bg-peach); color: var(--color-text); }
.final .h2, .final .goals__note { color: var(--color-text); }
.final .goals__note { color: var(--color-text-muted); opacity: 1; }
.final .btn--butter { background: var(--color-accent); color: #FFFFFF; }
.final .btn--butter:hover { background: var(--color-accent-hover); }

/* Footer: light, separated by a hairline */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); }

/* Method "why" quote: rosé card instead of a large bright-gold block */
.why__quote { background: var(--color-bg-peach); }

/* Type: accent lines upright and bold (like the hero's PICKER.), and the
   remaining italic display lines a touch heavier so thin strokes hold up */
.soft-italic { font-style: normal; font-weight: 600; }
.pull-line__italic, .about__question, .help__question, .back-cta__lead, .mid-cta__line,
.spectrum__quote, .method__expand-title, .why__quote p, .kind-word blockquote,
.hero__proof blockquote, .thanks__title span { font-weight: 500; }
/* Page headers no longer need a deep bottom band to separate them from the
   (same-colored) content below: tighter bottom spacing + a hairline. */
.page-intro.section--deep { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); }
/* Gold dots wash out on rosé: cherry bullets in the closing goals list */
.final .goals li::before { background: var(--color-accent); }

/* Footer sign-off (inspired by her coach's "with love" footer): a short
   warm note, then her name in handwritten script. Ephesis is the one
   script face on the site, used only for this signature. */
.site-footer__note { flex-basis: 100%; padding-bottom: var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-line); }
.site-footer__note-line { font-size: 1rem; line-height: 1.5; color: var(--color-text); text-wrap: balance; }
.signature { margin-top: .15rem; font-family: "Ephesis", var(--font-display); font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem); line-height: 1.1; color: var(--color-accent); }

/* "You're not bad at relationships…" moved up from the help section to
   answer the "This is you" headline directly, as a lead-in above the
   message bubbles. */
.recognition__lead { margin-top: var(--space-3); max-width: 36rem; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.3; color: var(--color-text); }
.help__grid .help__question:first-child { margin-top: 0; }

/* Section labels ("The method", "This is you", …): bigger, bolder pills
   in the simple body font, closer in presence to the Picker spectrum
   title, still clearly a label, not a button. */
.pill-label { font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem); font-weight: 600; padding: .5rem 1.25rem; gap: .65rem; margin-bottom: var(--space-3); }
.pill-label::before { width: .65rem; height: .65rem; }

/* Readability: Bodoni Moda's optical-size axis otherwise follows the font
   size, so big headlines switch to hairline-thin display strokes. Pinning
   a sturdier optical size sitewide keeps every Bodoni line solid (the hero
   title keeps its own 'opsz' 30). The method title also steps up to 600. */
body { font-variation-settings: 'opsz' 24; }
.method__title { font-weight: 600; }

/* Real-font fit fixes (measured with Bodoni Moda / Instrument Sans):
   short headlines that should hold one line are sized to their space. */
.offer .h2 { white-space: nowrap; font-size: min(var(--text-h2), 4.2vw, 3.75rem); }
.signup .final__title { max-width: none; }
@media (max-width: 900px) {
  .offer .h2 { font-size: min(var(--text-h2), calc((100vw - 2 * var(--gutter)) / 10.8)); }
  .method__title > span { white-space: nowrap; }
  .method__title { font-size: min(clamp(2.75rem, 1.2rem + 6vw, 7rem), calc((100vw - 2 * var(--gutter)) / 8)); }
}
@media (max-width: 600px) {
  .spectrum__head { font-size: 1.5rem; white-space: nowrap; }
  .about__turn { font-size: min(1.625rem, calc((100vw - 4.5rem) / 16.2)); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .hero__sub { font-size: 2.6vw; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  /* narrow two-column About layout: quote a touch smaller so it still ends on a full line */
  .about .kind-word { max-width: calc(18.5 * 1.25rem + 2 * var(--space-3)); }
  .about .kind-word blockquote { font-size: 1.25rem; }
}
/* the sitewide #main text-wrap: balance shorthand would otherwise re-enable wrapping */
#main .offer .h2 { text-wrap: nowrap; }
@media (max-width: 600px) { #main .spectrum__head { text-wrap: nowrap; } }
/* "ARE YOU DATING A PARTNER" on one line at every width (desktop too):
   capped so the real Bodoni fits the widest container with room to spare */
.pull-line__caps { white-space: nowrap; font-size: min(clamp(2.5rem, 1rem + 5vw, 6.25rem), 6vw, 5rem); }
.pull-line__italic { font-size: min(clamp(2.25rem, 1rem + 4.4vw, 5.5rem), 5.5vw, 4.5rem); }

/* Section labels, round 2 (site owner: still too small): double size and
   no pill — at this size a pill reads like a button and would compete
   with "Get first access". A plain label in the body font with the gold
   dot, sitewide. */
.pill-label, .section--deep .pill-label, .final .pill-label {
  background: none; padding: 0; color: var(--color-text);
  /* ~30% larger again; the calc() keeps the longest label ("Rebuilding
     Yourself", ~9.2em wide) on one line on narrow phones */
  font-size: min(clamp(2.25rem, 1.8rem + 1.95vw, 3.375rem), calc((100vw - 2 * var(--gutter) - 1.65rem) / 9.8)); font-weight: 600; line-height: 1.15;
  gap: .75rem; margin-bottom: var(--space-2);
}
.pill-label::before { width: .9rem; height: .9rem; flex: none; }


/* Homepage Picker spectrum: a static diagram (no tabs) — the three points
   on one gradient line with just their questions, all visible at once.
   Phones: the line runs down the left with each point stacked. */
.spectrum--static .spectrum__scale { list-style: none; margin: var(--space-3) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.spectrum--static .spectrum__scale::before { content: ""; position: absolute; left: 16.5%; right: 16.5%; top: 1.3rem; height: 5px; transform: translateY(-50%); border-radius: 5px; background: linear-gradient(90deg, var(--color-line), var(--color-sun), var(--color-accent)); }
.spectrum--static .spectrum__step { position: relative; text-align: center; }
.spectrum--static .spectrum__label { display: inline-block; background: var(--color-bg-alt); border: 2px solid var(--color-text); border-radius: var(--radius-pill); padding: .45rem 1rem; font-weight: 600; font-size: .9375rem; line-height: 1.2; white-space: nowrap; }
.spectrum--static .spectrum__step:last-child .spectrum__label { background: var(--color-text); color: var(--color-bg); }
.spectrum--static .spectrum__quote { margin: .9rem 0 0; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.2; }
@media (max-width: 600px) {
  .spectrum--static .spectrum__scale { grid-template-columns: 1fr; gap: var(--space-3); padding-left: 1.5rem; }
  .spectrum--static .spectrum__scale::before { left: .35rem; right: auto; top: .6rem; bottom: .6rem; width: 5px; height: auto; transform: none; background: linear-gradient(180deg, var(--color-line), var(--color-sun), var(--color-accent)); }
  .spectrum--static .spectrum__step { text-align: left; }
  .spectrum--static .spectrum__step::before { content: ""; position: absolute; left: -1.5rem; top: .55rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--color-bg-alt); border: 2px solid var(--color-text); }
  .spectrum--static .spectrum__step:last-child::before { background: var(--color-text); }
  .spectrum--static .spectrum__label { border: 0; background: none !important; color: var(--color-text) !important; padding: 0; font-size: 1rem; }
  .spectrum--static .spectrum__quote { margin-top: .2rem; }
}

/* Homepage About: "Why do we keep choosing who we choose?" now sits right
   under "Hi, I'm Cami." as a smaller cherry subtitle (the About page keeps
   its larger version at the end of the story). */
.about .about__title + .about__question { margin: .6rem 0 var(--space-3); font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.2; }

/* Hero: her name under the kicker (2026-09, site owner's request) — chocolate so it reads as a byline */
.hero__kicker-name { color: var(--color-text); }

/* Footer social links: only these are SHOWN for now (2026-09, site owner's request). Every link stays in the
   HTML on every page (and in the JSON-LD sameAs), just hidden. To show one again, add its aria-label below. */
.site-footer__social .social-link:not([aria-label="Instagram"]):not([aria-label="Facebook"]):not([aria-label="YouTube"]):not([aria-label="LinkedIn"]) { display: none; }

/* Certification badges beside the credential line (homepage About + about.html). Kept small so the bright
   badges don't fight the soft palette. Wraps if more badges are added later. */
.cred { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--color-line); max-width: var(--measure); display: flex; align-items: center; gap: 1rem 1.25rem; }
.cred .credential { margin: 0; padding: 0; border: 0; }
.cred__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; flex: none; }
.cred__badges img { display: block; width: 84px; height: 84px; }
@media (max-width: 600px) { .cred { flex-direction: column; align-items: flex-start; } }

/* =====================================================================
   2026-09-29 cleanup (site owner's requests, homepage-first, sitewide)
   ===================================================================== */

/* No more gold dots next to titles: section labels + wordmark lose theirs;
   CTA buttons keep a small WHITE dot instead of the gold one. */
.pill-label::before, .wordmark::before { content: none; display: none; }
.pill-label { gap: 0; }
.btn::after { background: #FFFFFF; }

/* Every image has rounded corners at every width (the desktop hero portrait was square). */
.hero__portrait img, .author-bio__photo img, .author-bio img { border-radius: var(--radius-image); }
.author-bio__photo img, .author-bio img { border-radius: 16px; }

/* Hero kicker: "Relationship coaching / for women with Cami Boudreaux" —
   two lines, the name nestled after "for women", smaller and in chocolate. */
.hero__kicker-name { color: var(--color-text); font-size: .72em; letter-spacing: .08em; white-space: nowrap; display: inline-block; margin-left: .35em; }

/* "Are you dating a partner or managing a project?" — a small closing
   line for the section above, not its own headline. */
.pull-line { margin-top: var(--space-4); }
.pull-line__caps { font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem); letter-spacing: 0; white-space: nowrap; }
.pull-line__italic { font-size: clamp(1.125rem, .95rem + .8vw, 1.625rem); padding-left: 0; font-weight: 600; }

/* What I help with: the outcome goals, two columns (one on phones). */
.help__goals { margin-top: var(--space-2); }
.help__goals li { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); border-color: rgba(46,26,20,.14); }
.help__goals li::before { background: var(--color-accent); width: .6rem; height: .6rem; }
.section--deep .goals__note { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Method heading: 25% smaller, one weight; the intro runs exactly as wide
   as the heading (the table-caption trick sizes it to the title). */
.method__title { font-size: clamp(2.0625rem, .9rem + 4.5vw, 5.25rem); }
.method__head { display: table; }
.method__head .method__intro { display: table-caption; caption-side: bottom; max-width: none; margin-top: var(--space-3); color: var(--color-text); }
@media (max-width: 900px) {
  .method__title { font-size: min(clamp(2.0625rem, .9rem + 4.5vw, 5.25rem), calc((100vw - 2 * var(--gutter)) / 10.7)); }
}

/* Trio: text merged into the cards, so the red summary boxes are gone. */
.trio__item strong { font-weight: 600; }

/* "Expansion, not deletion." on one line, its sentence right underneath. */
.method__expand { display: block; }
.method__expand-title { font-style: normal; font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); white-space: nowrap; }
.method__expand p:not(.method__expand-title) { margin-top: .5rem; max-width: 36rem; }

/* Hi, I'm Cami: no box, fewer type styles. The question and the ceiling
   line share one upright display style; everything else is body text. */
.about__question, .about .about__title + .about__question { font-style: normal; color: var(--color-text); font-weight: 500; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); line-height: 1.25; }
.about__turn-plain { font-weight: 400; }  /* not bold (site owner, 2026-10-12) */
.about__ceiling { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); font-weight: 500; }

/* Closing section: "Ready to fix your picker?" + how the call works on the
   left, the booking button in its own card on the right. */
.final--split .final__intro .final__title { text-align: left; margin-inline: 0; max-width: 12ch; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.final--split .final__intro .final__line { max-width: 30rem; font-size: 1.1875rem; }
.final--split .final__grid { align-items: center; }
.cta-calendly .signup__promise { margin-top: 0; }
.cta-calendly .btn { width: 100%; margin-top: 0; }
/* No label pills anywhere (milk sections still had a cream pill behind the label). */
.section--milk .pill-label, .pill-label { background: none; padding: 0; }
/* Method intro fills the heading's width (not balanced shorter). Phones: normal full-width paragraph. */
#main .method__head .method__intro { text-wrap: pretty; }
@media (max-width: 600px) {
  .method__head { display: block; }
  .method__head .method__intro { display: block; }
}
.about__ceiling { margin-top: var(--space-3); }
.cta-calendly .signup__promise { margin-bottom: var(--space-3); }
/* Phones: kicker as compact as it fits beside the thumbnail. */
@media (max-width: 599px) {
  .hero__kicker { font-size: .8125rem; letter-spacing: .05em; }
}

/* Quiz signup under the booking card: for people not ready to book a call (2026-09-29). */
.signup__quiz { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.signup__quiz-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.signup__quiz .signup__promise { margin-top: .4rem; }
.signup__quiz .signup__form { margin-top: var(--space-3); }

/* Body text fills its lines (2026-09-29, site owner): paragraphs and list items
   use `pretty` (full lines, no stranded last word) instead of `balance` (which
   made every line shorter). Headings and quotes stay balanced. site.js also
   binds the last words of each block so no line ends with one or two words,
   and sizes body text under a heading to the heading's width. */
#main :is(p, li, dd) { text-wrap: pretty; }
#main .h2 + .prose { margin-top: var(--space-3); }
/* "Are you dating a partner / or managing a project?" at the same size as
   "Expansion, not deletion." (site owner, 2026-09-29). The caps line is
   capped by viewport width on phones so it stays on one line. */
.pull-line__caps { font-size: min(clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem), 5.4vw); }
.pull-line__italic { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); }
.pull-line { line-height: 1.15; }

/* Method page Sword (2026-09-29): heading on two lines, "The Sword" / "is authenticity in action.",
   a little smaller; blade labels kept clear of the "Authenticity" tip. */
.sword__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.sword__title .soft-italic { white-space: nowrap; }
@media (min-width: 901px) {
  .sword__head { grid-template-columns: auto 1fr; }
  .blade { grid-template-columns: repeat(8, 1fr) 16rem; }
  .blade__tip { padding-left: 3.25rem; }
  .blade__label { max-width: 9.5rem; }
}


/* =========================================================
   VALUE + REVENUE PASS (2026-10-03, site owner approved)
   Founding-spots banner, value lines under every included item,
   "Why this is different", FAQ, spots notes. Tokens only.
   ========================================================= */
/* Founding spots banner (homepage, above the header; scrolls away, header stays sticky) */
.spots-bar { display: block; background: var(--color-bg-deep); color: var(--color-text); text-align: center; text-decoration: none; font-size: var(--text-small); font-weight: 500; line-height: 1.45; padding: .6rem var(--gutter); text-wrap: balance; }
.spots-bar__text { font-weight: 700; }
.spots-bar__link { color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.spots-bar:hover .spots-bar__link, .spots-bar:focus-visible .spots-bar__link { color: var(--color-accent-hover); }
.spots-note { margin-top: var(--space-1); font-size: var(--text-small); font-weight: 600; color: var(--color-accent); }
.cta-calendly .spots-note { margin: .25rem 0 1rem; }
.back-cta .spots-note { margin: var(--space-2) auto var(--space-3); }
.thanks .spots-note { margin-top: var(--space-2); }

/* Value lines: each included item + what it does for her */
.value-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.value-list li { position: relative; padding: .85rem 0 .85rem 1.4rem; border-top: 1px solid var(--color-line); line-height: 1.5; }
.value-list li:last-child { border-bottom: 1px solid var(--color-line); }
.value-list li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: .6rem; height: 2px; background: var(--color-accent); }
.value-list strong { display: block; font-weight: 700; color: var(--color-text); }
.offer__block .value-list { margin-top: .4rem; }
.included .value-list { max-width: 46rem; }
.included__head--goals { margin-top: var(--space-5); }
.included .goals { margin-top: var(--space-2); }

/* Why this is different */
.edge__list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); counter-reset: edge; }
@media (min-width: 640px) { .edge__list { grid-template-columns: repeat(2, 1fr); } .edge__item:last-child { grid-column: 1 / -1; } }
/* 3 + 2: six-column grid, top row thirds, bottom row halves, so five cards fill evenly */
@media (min-width: 1000px) { .edge__list { grid-template-columns: repeat(6, 1fr); } .edge__item { grid-column: span 2; } .edge__item:nth-child(n+4) { grid-column: span 3; } .edge__item:last-child { grid-column: span 3; } }
.edge__item { counter-increment: edge; background: var(--color-bg-alt); border-radius: var(--radius-panel); padding: var(--space-3); }
.edge__item::before { content: counter(edge, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-accent); margin-bottom: .5rem; }
.edge__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin-bottom: .45rem; }
.edge__item p { color: var(--color-text-muted); }

/* FAQ (details/summary; answers mirror the FAQPage JSON-LD) */
.faq__list { margin-top: var(--space-4); max-width: 46rem; border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-peach); color: var(--color-accent); font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding: 0 2.5rem 1.25rem 0; color: var(--color-text-muted); max-width: 40rem; }

/* =====================================================================
   2026-10-12 (site owner): the "Relationship coaching for women" line moved
   from the hero into the sticky header, under the wordmark; her name moved
   onto her blazer lapel in the hero photo.
   ===================================================================== */
.wordmark { flex-direction: column; align-items: flex-start; gap: .1rem; line-height: 1.05; }
.wordmark__tag { font-family: var(--font-body); font-weight: 600; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
@media (max-width: 900px) { .wordmark { gap: .15rem; } .wordmark__tag { font-size: .5625rem; letter-spacing: .06em; } }
.header-cta { white-space: nowrap; }
@media (max-width: 430px) {
  .site-header__inner { padding-left: .85rem; }
  .wordmark { font-size: 1rem; }
  .wordmark__tag { font-size: .5rem; letter-spacing: .03em; }
  .header-cta { padding-inline: .8rem; }
}
@media (max-width: 374px) {
  .site-header__inner { gap: .3rem; padding-left: .75rem; }
  .wordmark__tag { letter-spacing: .01em; }
  .header-cta { padding-inline: .65rem; font-size: .8125rem; }
}

.hero__portrait { position: relative; }
.hero__name { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__name text { font-family: var(--font-display); font-weight: 600; font-size: 50px; letter-spacing: .02em; fill: var(--color-text); opacity: .88; }
.hero__name-caption { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__name { animation: hero-settle 1.1s cubic-bezier(.2,.8,.2,1) both .1s; }
}
/* Tablets and phones: the photo is too small to read a name on the lapel,
   so it sits as a small caption under the photo instead. */
@media (max-width: 900px) {
  .hero__name { display: none; }
  .hero__name-caption { display: block; margin-top: .45rem; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--color-text); }
}
@media (max-width: 599px) { .hero__name-caption { font-size: .75rem; margin-top: .35rem; } }

/* Set line breaks (2026-10-12, site owner): blocks marked .lines break only at
   their <br class="l"> on tablet/desktop (two even lines, or three for the
   method intro; the "goals" note is one line). Phones ignore the breaks and
   wrap naturally. max-width !important beats the heading-width match in site.js. */
.lines br.l { display: none; }
@media (min-width: 601px) {
  #main .lines { max-width: none !important; text-wrap: wrap; }
  .lines br.l { display: inline; }
  .goals__note.lines { white-space: nowrap; }
}

/* Testimonials in the body font, italic (2026-10-12, site owner: Bodoni italic was hard to read). */
.kind-word blockquote, .hero__proof blockquote { font-family: var(--font-body); font-style: italic; font-weight: 400; letter-spacing: 0; }
.kind-word blockquote { font-size: clamp(1.1875rem, 1rem + .5vw, 1.4375rem); line-height: 1.45; }
.hero__proof blockquote { font-size: 1.125rem; line-height: 1.5; }

/* Growth-areas quiz invite + pop-up (homepage, 2026-10-12). A text link, not a
   button, so "Book a free strategy call" stays the only call to action. */
.quiz-invite__title { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.quiz-invite__link { display: inline-block; margin-top: .5rem; color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
.quiz-invite__link:hover { color: var(--color-accent-hover); text-decoration-thickness: 2.5px; }
.quiz-pop { width: min(46rem, calc(100vw - 2rem)); height: min(52rem, calc(100dvh - 2rem)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radius-panel); background: var(--color-bg); box-shadow: var(--shadow-soft); overflow: hidden; }
.quiz-pop::backdrop { background: rgba(46, 26, 20, .45); }
.quiz-pop__frame { display: block; width: 100%; height: 100%; border: 0; }
.quiz-pop__close { position: absolute; top: .75rem; right: .75rem; z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-text); color: var(--color-bg); cursor: pointer; }
.quiz-pop__close svg { width: 1.25rem; height: 1.25rem; }
.quiz-pop__close:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
html:has(.quiz-pop[open]) { overflow: hidden; }
@media (max-width: 600px) { .quiz-pop { width: 100vw; height: 100dvh; border-radius: 0; } }
/* "Is this you?" heading + lead: two lines each on tablet/desktop, so the type
   scales down just enough for each line to fit the column. */
@media (min-width: 601px) {
  .recognition__title.lines { font-size: min(var(--text-h2), calc((min(100vw, 80rem) - 2 * var(--gutter)) / 19.4)); }
  .recognition__lead.lines { font-size: min(clamp(1.375rem, 1.1rem + 1vw, 1.875rem), calc((min(100vw, 80rem) - 2 * var(--gutter)) / 28.9)); }
}
/* Upright tablets: the heading is too narrow to hold the method intro's three
   lines, so the intro drops the heading-width binding there. */
@media (min-width: 601px) and (max-width: 1023px) {
  .method__head:has(.method__intro.lines) { display: block; }
  .method__head .method__intro.lines { display: block; }
}

/* thanks.html (2026-10-12, site owner + her coach): "You're on the list." on one
   line ("the list." stays cherry italic), sized to fit; no founding-spots line;
   the booking CTA is the same underlined cherry link as the homepage hero. */
.thanks__title { white-space: nowrap; font-size: min(clamp(3rem, 1.2rem + 7vw, 7rem), calc((100vw - 2 * var(--gutter)) / 8.6)); }
.thanks__title span { display: inline; }