/* ============================================================
   The Way Through — Emma-Jayne Hirst
   v5.9 · 27 Sep 2026 — hero meta spacing, portrait 2:3, about grid .9/1.1
   v4.7 · 15 Sept 2026 — REVIEW BAR FOR THE CLIENT

   v1 was a text-only editorial page. The reference (thepathhome.io)
   is 33,000px with 23 photographs: a full-bleed cinematic hero, a
   sticky-scroll spine where 3:4 portraits pin while text moves, and
   bone editorial sections between. v2 rebuilds around that.

   Palette now sits much closer to the reference: warm bone ground,
   deep olive panels, one bright chartreuse accent used sparingly.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* Taken straight from thepathhome.io — bone, olive, lime. */
  --bone:       #FFFAF2;
  --bone-2:     #F7F1E6;
  --bone-3:     #EFE7D8;
  --ink:        #14150F;
  --ink-soft:   #4C5145;
  --deep:       #24352B;            /* her call: a deeper, greener green */
  --deep-2:     #1A2720;
  --deep-3:     #111A14;
  --accent:     #D0EC6B;            /* their lime — dark grounds only */
  --accent-ink: #46521C;            /* small text on bone, clears 4.5:1 */
  --rule:       rgba(20, 21, 15, .16);
  --rule-lt:    rgba(255, 250, 242, .22);

  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --gut: clamp(20px, 5vw, 76px);
  --maxw: 1340px;
  --ease: cubic-bezier(.625, .05, 0, 1);
  --navh: 76px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.62; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* MUST be clip, never hidden. overflow-x:hidden turns body into a scroll
     container, which stops window.scrollY updating and kills position:sticky
     for every descendant — i.e. it silently disables the pinned image spine.
     clip contains the same overflow without creating a scroll container. */
  overflow-x: clip;
}
/* height:auto is the required partner to the width/height attributes on every
   <img>. Those attributes reserve space and stop layout shift, but they also act
   as a specified height, which overrides aspect-ratio. Without this line the
   portrait rendered at its full 1250px instead of the 4/5 frame. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--deep-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(84px, 12vw, 190px); position: relative; }
.section--tight { padding-block: clamp(64px, 9vw, 130px); }

/* ---------- typography ---------- */

/* parenthetical serif label — the reference's most recognisable move */
.label {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 300; font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.22; color: var(--ink-soft);
  margin: 0 0 clamp(26px, 3vw, 52px); letter-spacing: -.01em;
}
.on-deep .label { color: var(--accent); }

/* display type: line-height TIGHTER than font-size — big text reads
   as carved rather than typed. This is the reference's signature. */
.d1 { font-size: clamp(44px, 7vw, 104px); line-height: .88; letter-spacing: -.038em; font-weight: 500; }
.d2 { font-size: clamp(32px, 4.6vw, 68px); line-height: .94;  letter-spacing: -.032em; font-weight: 500; }
.d3 { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.04; letter-spacing: -.024em; font-weight: 500; }

.statement {
  font-size: clamp(27px, 3.7vw, 54px); line-height: 1.08;
  letter-spacing: -.03em; font-weight: 400; max-width: 19ch;
}
.statement em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.008em; }

.body-lg { font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.68; }
.measure { max-width: 62ch; }
.muted { color: var(--ink-soft); }
.on-deep .muted { color: rgba(255, 250, 242, .70); }

.eyebrow {
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
}
.on-deep .eyebrow { color: var(--accent); }

/* ---------- deep panels ---------- */
.on-deep { background: var(--deep); color: var(--bone); }
.on-deep.is-darker { background: var(--deep-2); }
.on-deep a { color: var(--bone); }

/* ============================================================
   NAV — minimal over the hero: mark left, "Menu" right.
   Nothing else, exactly like the reference.
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--navh); display: flex; align-items: center;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav__in { width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--gut); display: flex; align-items: center; justify-content: space-between; }

/* over the hero image everything is white; once past it, ink on bone */
.nav { color: #fff; }
.nav[data-solid='true'] {
  background: rgba(255, 250, 242, .90);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav__mark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav__mark svg { width: 34px; height: 22px; display: block; overflow: visible; }
.nav__mark b { font-weight: 600; font-size: 15px; letter-spacing: -.015em; }
/* nav only — the footer keeps its wordmark at every width */
@media (max-width: 560px) { .nav .nav__mark b { display: none; } }

.menu-btn {
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.menu-btn i { width: 22px; height: 9px; position: relative; display: block; }
.menu-btn i::before, .menu-btn i::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .45s var(--ease);
}
.menu-btn i::before { top: 0; } .menu-btn i::after { bottom: 0; }
body[data-menu='open'] .menu-btn i::before { transform: translateY(3.75px) rotate(45deg); }
body[data-menu='open'] .menu-btn i::after  { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--deep-2); color: var(--bone);
  display: flex; align-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
}
body[data-menu='open'] .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
body[data-menu='open'] { overflow: hidden; }
.menu__grid {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut);
  padding-top: var(--navh);
  display: grid; grid-template-columns: 1.4fr .8fr; gap: clamp(30px, 5vw, 80px); align-items: end;
}
@media (max-width: 820px) { .menu__grid { grid-template-columns: 1fr; align-items: start; } }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  text-decoration: none; padding: clamp(8px, 1.1vw, 14px) 0;
  font-size: clamp(28px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.032em;
  font-weight: 500; border-bottom: 1px solid var(--rule-lt);
  display: flex; align-items: baseline; gap: 16px;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.menu__links a:hover { color: var(--accent); padding-left: 14px; }
.menu__links a span { font-family: var(--serif); font-size: 14px; font-weight: 300; opacity: .55; }
.menu__aside p { color: rgba(255, 250, 242, .7); font-size: 15px; }
.menu__aside a.mail { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   HERO — full-bleed cinematic image, centred type
   ============================================================ */
.hero {
  position: relative; min-height: 660px; height: 100svh;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
/* framed off-centre on purpose: the figure must not sit directly under
   her name, or it reads as a portrait of her. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 45%; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  /* warmer, lighter wash than v3: enough contrast for white type without
     flattening the image into a dark slab */
  background:
    linear-gradient(180deg, rgba(26,18,10,.50) 0%, rgba(26,18,10,.12) 32%,
                            rgba(26,18,10,.26) 64%, rgba(26,18,10,.62) 100%);
}
.hero__in { text-align: center; color: #fff; padding-inline: var(--gut); max-width: 1000px; }
.hero h1 {
  font-size: clamp(40px, 7.2vw, 108px); line-height: .92;
  letter-spacing: -.04em; font-weight: 500;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.hero__sub, .hero__meta { display: block; }
.hero h1 .hero__sub, .hero h1 .hero__meta { letter-spacing: normal; }
/* her note: same face as the credentials line below it, not the serif */
.hero__sub {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(16px, 1.85vw, 24px); line-height: 1.35;
  margin-top: clamp(10px, 1.2vw, 16px); letter-spacing: -.012em;
  color: rgba(255, 255, 255, .92);
}
.hero__meta {
  margin-top: clamp(30px, 3.8vw, 52px); font-size: 13.5px; line-height: 1.6;
  letter-spacing: .04em; color: rgba(255, 255, 255, .82);
}
.hero__cta { margin-top: clamp(26px, 3vw, 40px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.scroll-cue {
  position: absolute; bottom: clamp(22px, 3vw, 40px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.scroll-cue i { width: 1px; height: clamp(40px, 5vw, 68px); background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  animation: drop 2.6s var(--ease) infinite;
}
@keyframes drop { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--ink); color: var(--bone);
  text-decoration: none; font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--deep-3); transform: translateY(-2px); }
.btn--light { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--deep-3); }
/* base ghost, for light grounds. Without this, .btn--ghost outside .on-deep
   falls through to .btn and renders as a solid pill. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.on-deep .btn { background: var(--accent); border-color: var(--accent); color: var(--deep-3); }
.on-deep .btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.on-deep .btn--ghost { background: transparent; color: var(--bone); border-color: var(--rule-lt); }
.on-deep .btn--ghost:hover { background: var(--bone); color: var(--deep-2); border-color: var(--bone); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- section head ---------- */
.sec-head {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 70px); padding-bottom: clamp(44px, 5.5vw, 88px); align-items: start;
}
@media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; } }
.sec-head .label { margin-bottom: 0; }

/* ---------- full-bleed figure ---------- */
.figure-wide {
  position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden;
  margin-block: clamp(48px, 6vw, 96px);
}
.figure-wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .figure-wide { aspect-ratio: 4 / 3; } }

/* ---------- concerns grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
.cell {
  background: var(--bone); padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 36px);
  display: flex; flex-direction: column; gap: 12px; transition: background .35s var(--ease);
}
.cell:hover { background: var(--bone-2); }
.cell__n { font-size: 11.5px; letter-spacing: .12em; color: var(--accent-ink); font-weight: 700; }
.cell h3 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.12; letter-spacing: -.022em; font-weight: 500; }
.cell p { font-size: 15.5px; line-height: 1.58; color: var(--ink-soft); }

/* ============================================================
   STICKY STEPS — the spine. A 3:4 portrait pins while the
   method text scrolls past it; the image cross-fades per step.
   ============================================================ */
.ss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); }
.ss__visual { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.ss__frame {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 78svh;
  overflow: hidden; background: var(--deep-3);
}
.ss__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease);
}
.ss__frame img.is-on { opacity: 1; transform: none; }
.ss__count {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--deep-2); color: var(--accent);
  font-size: 12px; letter-spacing: .12em; padding: 9px 14px; font-weight: 600;
}
.ss__step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 8vh; }
.ss__k { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 1.5vw, 22px); color: var(--accent); margin-bottom: 14px; }
.ss__step h3 { font-size: clamp(25px, 2.8vw, 42px); line-height: 1.0; letter-spacing: -.028em; font-weight: 500; margin-bottom: 20px; }
.ss__step p { color: rgba(255, 250, 242, .76); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.72; max-width: 54ch; }

@media (max-width: 880px) {
  .ss { grid-template-columns: 1fr; gap: 0; }
  .ss__visual { top: var(--navh); height: auto; margin-bottom: 26px; }
  .ss__frame { aspect-ratio: 4 / 3; max-height: 38svh; }
  .ss__step { min-height: auto; padding-block: 30px; border-top: 1px solid var(--rule-lt); }
  .ss__step:first-child { border-top: 0; }
}

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 84px); align-items: start; }
@media (max-width: 920px) { .about__grid { grid-template-columns: 1fr; } .portrait img { aspect-ratio: 4 / 5; } }
.creds { border-top: 1px solid var(--rule); margin-top: clamp(30px, 3.5vw, 48px); }
.creds li {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px;
}
.creds li b { font-weight: 500; }
.creds li span { color: var(--ink-soft); font-size: 13.5px; text-align: right; }

/* ---------- numbered steps ---------- */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 58px minmax(0, .7fr) minmax(0, 1.4fr);
  gap: clamp(16px, 3vw, 46px); padding-block: clamp(28px, 3.2vw, 44px);
  border-bottom: 1px solid var(--rule); align-items: start;
}
@media (max-width: 880px) { .step { grid-template-columns: 36px 1fr; } .step > *:last-child { grid-column: 2 / -1; } }
.step__n { font-family: var(--serif); font-weight: 300; font-size: clamp(25px, 2.6vw, 38px); line-height: 1; color: var(--accent-ink); }
.step h3 { font-size: clamp(19px, 1.75vw, 26px); line-height: 1.08; letter-spacing: -.022em; font-weight: 500; }
.step p { font-size: 16px; line-height: 1.66; color: var(--ink-soft); max-width: 56ch; }
.fee-line { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.fee { display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 17px; border: 1px solid var(--rule); border-radius: 999px; font-size: 14.5px; }
.fee b { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.3vw, 30px) 0; text-align: left;
  font-size: clamp(17px, 1.55vw, 23px); line-height: 1.22; letter-spacing: -.022em; font-weight: 500;
  transition: color .25s;
}
.faq__q:hover { color: var(--accent-ink); }
.faq__ic { flex: 0 0 auto; width: 18px; height: 18px; position: relative; margin-top: 6px; }
.faq__ic::before, .faq__ic::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.faq__ic::before { inset: 8px 0 auto; height: 1.5px; }
.faq__ic::after  { inset: 0 8px auto; width: 1.5px; height: 18px; }
.faq__item[data-open='true'] .faq__ic::after { transform: scaleY(0); opacity: 0; }
/* height-driven: no height declared, so without JS every answer renders open */
.faq__a { overflow: hidden; transition: height .45s var(--ease); }
.faq__a p { max-width: 64ch; color: var(--ink-soft); font-size: 16px; line-height: 1.66; padding-bottom: clamp(22px, 2.3vw, 30px); }

/* ============================================================
   CONTACT — full-bleed image band behind a dark wash
   ============================================================ */
.contact { position: relative; overflow: hidden; isolation: isolate; color: var(--bone); }
.contact__media { position: absolute; inset: 0; z-index: -1; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__media::after { content: ''; position: absolute; inset: 0; background: rgba(29, 33, 25, .90); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 86px); align-items: start; }
@media (max-width: 920px) { .contact__grid { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; color: rgba(255,250,242,.7); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px;
  background: rgba(255, 250, 242, .07); color: var(--bone);
  border: 1px solid var(--rule-lt); border-radius: 3px;
  transition: border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: rgba(255, 250, 242, .12);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select option { color: var(--ink); }
.contact__direct { border-top: 1px solid var(--rule-lt); margin-top: 32px; padding-top: 26px; }
.contact__direct a { font-size: clamp(18px, 1.9vw, 27px); letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--rule-lt); }
.contact__direct a:hover { border-color: var(--accent); color: var(--accent); }
.crisis { border: 1px solid var(--rule-lt); border-radius: 3px; padding: 20px 22px; margin-top: 30px; font-size: 14.5px; line-height: 1.6; color: rgba(255,250,242,.76); }
.crisis b { color: var(--bone); font-weight: 600; }

/* ---------- footer ---------- */
/* Two aligned rows, not three floating blocks: brand + links on top, a
   hairline, then the legal line. Everything lines up on real edges. */
.foot { padding-block: clamp(48px, 5vw, 78px); border-top: 1px solid var(--rule-lt); }
.foot p, .foot a, .foot button { font-size: 14px; color: rgba(255, 250, 242, .64); }
.foot a { text-decoration: none; }
.foot a:hover, .foot button:hover { color: var(--accent); }

.foot__top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-bottom: clamp(28px, 3vw, 42px);
}
.foot__brand p { margin: 0; }
.foot__brand p:first-of-type { margin-top: 12px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: flex-end; padding-top: 5px; }

/* social glyphs. No ring, no box -- the footer is hairlines and words, and a
   bordered pill is louder than anything else down there. Touch area comes from
   padding so the target is big without the glyph looking big, and alignment is
   done by centring the flex line rather than nudging with a margin. */
.foot__ico {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 7px;
  color: rgba(255, 250, 242, .66);
  transition: color .18s ease;
}
.foot__ico svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.foot__ico:hover, .foot__ico:focus-visible { color: var(--bone); }

/* the row gaps are tuned for words; the two glyphs belong together */
.foot__links { align-items: center; }
.foot__ico + .foot__ico { margin-left: -12px; }

/* visually hidden, still read aloud */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  align-items: baseline; border-top: 1px solid var(--rule-lt); padding-top: clamp(18px, 2vw, 24px);
}
.foot__bottom p { margin: 0; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--rule-lt);
}
@media (max-width: 700px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__links { justify-content: flex-start; }
}

/* ---------- portrait placeholder (only where it must be HER) ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(34,38,31,.03) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--bone-2), var(--bone-3));
  border: 1px solid var(--rule); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; text-align: center; overflow: hidden;
}
.ph::before { content: ''; position: absolute; inset: 12px; border: 1px dashed var(--rule); pointer-events: none; }
.ph__in { position: relative; max-width: 30ch; }
.ph__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); display: block; margin-bottom: 10px; }
.ph__txt { font-family: var(--serif); font-weight: 300; font-size: 16.5px; line-height: 1.4; color: var(--ink-soft); }
.ph__meta { display: block; margin-top: 12px; font-size: 12px; color: var(--ink-soft); opacity: .75; }
.ph--portrait { aspect-ratio: 4 / 5; }

/* ---------- scroll reveal ---------- */
[data-rise] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-rise].is-in { opacity: 1; transform: none; }

/* ---------- REVIEW MODE (build stage only) ---------- */
.review-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  max-width: min(340px, calc(100vw - 32px));
  background: var(--deep-2); color: var(--bone);
  border: 1px solid var(--rule-lt); border-radius: 14px;
  padding: 12px 14px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 14px 38px rgba(17, 26, 20, .34);
}
.review-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-bar button {
  background: var(--accent); color: var(--deep-3); border: 0; cursor: pointer;
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; flex: 0 0 auto;
}
.review-bar .cnt { color: var(--accent); font-weight: 600; }

/* the explainer only appears once the highlights are on */
.review-bar__hint {
  margin: 0; color: rgba(255, 250, 242, .74); font-size: 12.5px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease);
}
body[data-review='on'] .review-bar__hint { max-height: 110px; opacity: 1; margin: 0 0 10px; }
body[data-review='on'] [data-confirm] {
  background: linear-gradient(transparent 62%, rgba(203, 228, 125, .5) 62%);
  outline: 1px dashed rgba(79, 92, 38, .6); outline-offset: 3px; border-radius: 1px;
}
body[data-review='on'] .on-deep [data-confirm], body[data-review='on'] .contact [data-confirm], body[data-review='on'] .hero [data-confirm] {
  background: linear-gradient(transparent 62%, rgba(203, 228, 125, .34) 62%);
  outline-color: rgba(203, 228, 125, .5);
}
@media print { .review-bar, .nav, .menu { display: none; } }

/* ---------- capture mode (?cap=1) — still screenshots only ---------- */
[data-capture='on'] .ss__visual { position: static; height: auto; }
[data-capture='on'] .ss__step { min-height: 0; padding-block: 34px; border-top: 1px solid var(--rule-lt); }
[data-capture='on'] .ss__frame { max-height: none; }
[data-capture='on'] [data-rise] { opacity: 1; transform: none; }

/* ---------- footer wordmark (reuses .nav__mark) ---------- */
.foot .nav__mark { color: var(--bone); }
.foot .nav__mark:hover { color: var(--accent); }
.foot .nav__mark b { font-size: 16px; }

/* ---------- v4.1: facts rows ----------
   Same two-column rhythm as the reference's process rows: a label column wide
   enough that headings never wrap to three lines, and body copy that actually
   fills its track instead of sitting in a thin strip. */
/* Labels are short noun phrases now, so the column cannot be forced to wrap.
   The 230px floor holds even when the container is squeezed, and the two-column
   layout drops to stacked well before it could get tight. */
.steps--plain .step {
  grid-template-columns: minmax(230px, .32fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
}
.steps--plain .step h3 {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.18; letter-spacing: -.018em;
  text-wrap: balance; hyphens: none;
}
.steps--plain .step p { max-width: 58ch; }
@media (max-width: 940px) {
  .steps--plain .step { grid-template-columns: 1fr; gap: 8px; }
  /* v5.12: the numbered-steps rule at 880px pins the last child to column 2, which on these
     un-numbered rows created an implicit label column sized to each label - misaligned rows. */
  .steps--plain .step > *:last-child { grid-column: auto; }
}

/* ---------- v4.1: qualifications, plain on the page ----------
   Her note: not a dropdown. Same row rhythm as the facts rows above. */
/* clear air between the prose and the list, and room to breathe inside it */
.quals { border-top: 1px solid var(--rule); margin-top: clamp(44px, 5.5vw, 76px); }
.quals li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px;
  align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.45;
}
.quals li b { font-weight: 500; }
.quals li span { color: var(--ink-soft); font-size: 13.5px; text-align: right; }
@media (max-width: 560px) {
  .quals li { grid-template-columns: 1fr; gap: 2px; }
  .quals li span { text-align: left; }
}

/* ---------- v4.1: the mark reacts on hover ----------
   The vesica is two circles overlapping; the lens between them is the point.
   On hover they draw apart and the lens flickers, then settles. */
/* The two circles pull apart and the lens between them flickers alight.
   Stronger than v4.1 — the old version was too subtle to read as interactive.
   It also flickers once on load so you know it is alive without hovering. */
.nav__mark svg circle { transition: transform .6s var(--ease); }
.nav__mark:hover .m-left,  .nav__mark:focus-visible .m-left  { transform: translateX(-3.2px); }
.nav__mark:hover .m-right, .nav__mark:focus-visible .m-right { transform: translateX(3.2px); }
.nav__mark:hover .m-lens,  .nav__mark:focus-visible .m-lens  { animation: lens-flick .72s steps(1, end) 1; }
.nav__mark.is-waking .m-lens { animation: lens-flick .72s steps(1, end) 1; }

@keyframes lens-flick {
  0%   { opacity: .26; }
  12%  { opacity: .04; }
  26%  { opacity: .95; }
  38%  { opacity: .10; }
  52%  { opacity: .85; }
  66%  { opacity: .18; }
  80%  { opacity: .70; }
  100% { opacity: .26; }
}
.nav__mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nav__mark:hover .m-left, .nav__mark:hover .m-right,
  .nav__mark:focus-visible .m-left, .nav__mark:focus-visible .m-right { transform: none; }
  .nav__mark:hover .m-lens, .nav__mark:focus-visible .m-lens,
  .nav__mark.is-waking .m-lens { animation: none; }
}

/* ---------- v4.2: privacy notice dialog ---------- */
.sheet {
  border: 0; padding: 0; max-width: 760px; width: min(94vw, 760px);
  max-height: 86svh; background: var(--bone); color: var(--ink);
  border-radius: 4px; box-shadow: 0 40px 90px rgba(17, 26, 20, .45);
}
.sheet::backdrop { background: rgba(17, 26, 20, .68); backdrop-filter: blur(3px); }
.sheet__head {
  position: sticky; top: 0; background: var(--deep); color: var(--bone);
  padding: 18px clamp(20px, 3vw, 34px); display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px;
}
.sheet__head h2 { font-size: clamp(19px, 2vw, 26px); letter-spacing: -.024em; line-height: 1.1; }
.sheet__head p { margin: 5px 0 0; font-size: 12.5px; color: var(--accent); }
.sheet__close {
  background: none; border: 1px solid var(--rule-lt); color: var(--bone);
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer; flex: 0 0 auto;
  font-size: 17px; line-height: 1; transition: background .25s, color .25s;
}
.sheet__close:hover { background: var(--bone); color: var(--deep); }
.sheet__body { padding: clamp(20px, 3vw, 34px); overflow-y: auto; max-height: calc(86svh - 86px); }
.sheet__body h3 {
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  margin: 26px 0 6px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.sheet__body h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sheet__body p, .sheet__body li { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.sheet__body ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.sheet__body li { margin-bottom: 4px; }
.sheet__body b { color: var(--ink); font-weight: 600; }

/* ---------- v4.3: touch targets ----------
   Footer links, the email link and the wordmark were 22-26px tall — fine with a
   mouse, too small for a thumb. WCAG 2.5.5 and both platform guidelines want
   ~44px. Applied on coarse pointers at any width, and on small screens. */
@media (pointer: coarse), (max-width: 700px) {
  .foot__links a:not(.foot__ico),
  .foot__bottom .linklike,
  .contact__direct a,
  .menu__aside a.mail {
    display: inline-block;
    padding-block: 11px;
  }
  .nav__mark { padding-block: 9px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .foot__ico { padding: 14px 14px; }          /* 45x45 -- was 39 wide */
  .menu-btn { min-height: 44px; }
  .sheet__close { width: 44px; height: 44px; font-size: 20px; }
  /* WCAG 2.5.5 wants 44x44 on touch. 2.5.8 only requires 24x24, so these were
     already conformant -- but on a page whose whole job is to feel safe to use,
     a thumb should not have to aim. */
  .faq__q { min-height: 44px; }
}

/* ---------- v4.5: portrait ----------
   Same 4:5 frame the placeholder box occupied, so the About grid is unchanged. */
.portrait { margin: 0; }
.portrait img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;   /* v5.9: taller frame so the photo meets the text column */
  object-position: center 18%;
  border-radius: 2px; display: block;
}

/* ---------- v5.12: mobile pass (27 Sep 2026) ---------- */
.nw { white-space: nowrap; }
.foot__social { display: inline-flex; align-items: center; gap: 12px; }
.foot__social .foot__ico + .foot__ico { margin-left: 0; }
/* single-column concern cards: flush left with every other section's text, rules still full width */
@media (max-width: 640px) { .cell { padding-inline: 0; } .cell:hover { background: var(--bone); } }

/* v5.12: portrait runs the full height of the text column (top and bottom flush) on two-column layouts */
@media (min-width: 921px) {
  .about__grid { align-items: stretch; }
  .about__grid > div:first-child { display: flex; }
  .portrait { flex: 1; display: flex; }
  .portrait img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 20%; }
}