/* ============================================================
   PROXIMA SENIOR ADVISING — styles.css
   Swiss / International Typographic Style
   Cream ground · near-black ink · poster accents (one per zone)
   Grid: 12 col / 8px base unit · Inter (self-hosted variable)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "InterVar";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("../assets/fonts/inter-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Pulled in from the Aero exploration: the serif "turn" for emphasized words
   (e.g. hero-em) and the mono annotation family for captions/microtype.
   Both self-hosted already (assets/fonts/), same files Aero uses. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ground + ink */
  --paper:    #F7F4ED;
  --paper-2:  #EFEADD;
  --paper-3:  #FFFEFA;   /* v4: added from v3 — used by callback card, pay cards */
  --ink:      #141311;
  --ink-2:    #4A463E;
  --ink-3:    #6B655A;   /* v4: added from v3 — used by hero-reassure, scroll-cue */
  --line:     #D8D1C0;
  --line-2:   #C7BEA8;   /* v4: added from v3 — used by hero-ring, journey-rail */
  --line-dark:#2C2A25;

  /* poster accents */
  --red:      #C9311B;   /* CTA / step 01 — AA large on paper, white text ok */
  --red-hot:  #E0381F;   /* graphic-only vermilion (star, duotone) */
  --blue:     #2447C9;   /* step 02 / focus rings / links */
  --blue-2:   #2E55D8;   /* v4: added from v3 — used by duo--blue in journey */
  --green:    #49B776;   /* step 03 / confirmation / primary CTA — sampled from mascot-pair.png's own hue-140 bucket (see js/mist-trail.js colorForHeight), matching the Mist Path hero's mesh */
  --green-2:  #2A8159;   /* v4: added from v3 — used by duo--green in journey */
  --yellow:   #F0B400;   /* graphic-only highlight */
  --error:    #A02713;

  /* type */
  --font: "InterVar", "Neue Haas Grotesk Display Pro", "Helvetica Neue",
          Helvetica, Arial, sans-serif;
  /* pulled from Aero: the serif accent + the mono annotation family (neither
     existed in v4 — v4 was pure Inter). Used sparingly, not a type-system swap. */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --fs-0: 0.75rem;    /* 12 — caps labels   */
  --fs-1: 0.875rem;   /* 14 — small         */
  --fs-2: 1.125rem;   /* 18 — body          */
  --fs-3: 1.375rem;   /* 22 — lead          */
  --fs-4: 1.625rem;   /* 26 — h3            */
  --fs-h2: clamp(2.125rem, 1.1rem + 3.4vw, 3.5rem);
  --fs-h1: clamp(2.625rem, 1.2rem + 5.6vw, 5.75rem);

  /* v4: v3 fluid type aliases (used by hero-h1, journey-h2, callback-h2, etc.) */
  --fs-caps:    0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    1.125rem;
  --fs-lead:    1.375rem;
  --fs-h3:      1.625rem;
  --fs-display: clamp(2.85rem, 1rem + 7.6vw, 6rem);

  /* rhythm */
  --u: 8px;
  --gap: 24px;
  --gutter: clamp(16px, 2.2vw, 32px); /* v4: added from v3 */
  --maxw:   1320px;                    /* v4: added from v3 */
  --section-y: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(0.22, 0.7, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* v4: added from v3 */

  /* layers */
  --z-chat:   50;
  --z-base:   1;    /* v4: added from v3 */
  --z-above:  10;   /* v4: added from v3 */
  --z-nav:    20;   /* v4: added from v3 */
  --z-sticky: 30;   /* v4: added from v3 */
  --z-modal:  50;   /* v4: added from v3 */
  --z-toast:  60;   /* v4: added from v3 */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The UA stylesheet's [hidden]{display:none} loses to any author rule that
   sets display on the same element (e.g. .btn's display:inline-flex) — so
   toggling the `hidden` attribute on a flex/grid element silently does
   nothing unless this wins the cascade back. Bit us on #directory-load-more. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "cv05" 1; /* Inter: open 'l' — friendlier, closer to Haas */
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
strong { font-weight: 650; }

::selection { background: var(--green); color: #fff; }

[id] { scroll-margin-top: 96px; } /* was 24px — the header is now position:fixed and needs clearance */

/* visually hidden (a11y) */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 16px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Layout primitives ---------- */
.container {
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .container { width: min(100% - 96px, 1240px); }
}

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }

section { border-top: 1px solid var(--line); }

/* ---------- Caps labels (the Swiss ruled label) ---------- */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Global star-icon size — v3-derived sections use `.eyebrow .star-i` which has
   no contextual size; without this the <svg> falls back to the 300x150 default
   (the giant red star bug). v1's contextual rules (.label/.chips/etc.) are more
   specific and still win where set. */
.star-i { width: 1em; height: 1.375em; flex: none; }
.label .star-i { width: 10px; height: 13.8px; flex: none; }

/* ---------- Wordmark (locked geometry from brand sheet) ---------- */
.wm { display: inline-block; text-decoration: none; color: inherit; }
.wm-word {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1;
}
.wm-star {
  display: inline-block;
  vertical-align: baseline;
  flex-shrink: 0;
  overflow: visible;
  width: .725em;
  height: 1em;
  margin-left: -0.02em;
}
.wm-sub {
  display: block;
  font-size: .415em;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: .25em;
  padding-left: 2px;
}

/* ---------- Header ---------- */
/* Pulled from Aero: a fixed, floating glass nav (was a normal static block
   pushing content down). Now overlays the hero as you land, and whatever
   scrolls beneath it after — real backdrop-filter, something to read
   against at all times, not glass-over-nothing. */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: rgba(247, 244, 237, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(20, 19, 17, 0.08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px -18px rgba(20, 19, 17, 0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: rgba(247, 244, 237, 0.96); }
}
.site-head .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}
.site-head .wm { font-size: 24px; }

.site-nav { display: none; }
@media (min-width: 900px) {
  .site-nav { display: flex; gap: 36px; }
}
.site-nav a {
  position: relative;
  text-decoration: none;
  font-size: var(--fs-1);
  font-weight: 550;
  letter-spacing: .04em;
  padding: 10px 2px;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%; height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.head-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  font-size: var(--fs-1);
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease), transform .12s ease;
  cursor: pointer;
}
.head-call:hover { background: var(--ink); color: var(--paper); }
.head-call:active { transform: translateY(1px); }
.head-call .star-i { width: 11px; height: 15px; color: var(--green); transition: color .22s var(--ease); }
.head-call:hover .star-i { color: var(--yellow); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  border-top: none;
  overflow: hidden;
}
.hero .container {
  position: relative;
  padding-block: clamp(56px, 8vw, 112px) clamp(64px, 8vw, 120px);
}

.hero-mark {
  position: absolute;
  top: -4%;
  right: -14%;
  width: min(52vw, 660px);
  color: var(--ink);
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.hero-mark svg { width: 100%; height: auto; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px var(--gap);
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  /* BUGFIX (found while adding the hero-chip): these were bare .hero-copy /
     .hero-card selectors, documented elsewhere as "harmless dead CSS" since
     .hero-grid's markup no longer exists — but .hero-copy's class name IS
     reused by the current v3 hero, so this was silently forcing it to
     grid-column:1/span 7 at >=1024px, pushing .hero-visual (2nd grid item,
     grid-column:auto) onto a new row instead of beside it. Scoping under
     .hero-grid restores the "actually dead" property these rules were
     supposed to have. Same latent bug exists in the archived
     index-v4-original.html (left as-is there — it's a frozen backup). */
  .hero-grid .hero-copy { grid-column: 1 / span 7; }
  .hero-grid .hero-card { grid-column: 9 / span 4; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hero-grid .hero-card { grid-column: 8 / span 5; }
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 740;
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 14ch;
  margin-top: 28px;
  text-wrap: balance;
}
.hero .deck {
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: 28px;
  text-wrap: pretty;
}
.hero .deck strong { color: var(--ink); }

.hero-callline {
  margin-top: 32px;
  font-size: var(--fs-2);
}
.hero-callline a {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .2s var(--ease);
}
.hero-callline a:hover { color: var(--red); }

/* trust chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.chips li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chips .star-i { width: 11px; height: 15px; flex: none; }
.c-red   { color: var(--red); }
.c-blue  { color: var(--blue); }
.c-green { color: var(--green); }
.c-yellow{ color: var(--yellow); }

/* ---------- Callback card ---------- */
.card {
  background: #FFFEFA;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 0 var(--ink);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 22px;
}
.card-head .star-i { width: 12px; height: 16.5px; color: var(--red-hot); }
.card-head h2 {
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.card-body { padding: 24px 22px 26px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: var(--fs-1);
  font-weight: 650;
  margin-bottom: 8px;
}
.field .opt { color: var(--ink-2); font-weight: 450; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-size: 1.0625rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink-2);
  border-radius: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
}
.input:hover { border-color: var(--ink); }
.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 71, 201, .18);
}
textarea.input { min-height: 88px; resize: vertical; line-height: 1.5; }

.field.is-error .input { border-color: var(--error); }
.err {
  display: none;
  font-size: var(--fs-1);
  font-weight: 550;
  color: var(--error);
  margin-top: 6px;
}
.field.is-error .err { display: block; }

/* segmented radios — best time */
.seg {
  border: 0;
}
.seg legend {
  font-size: var(--fs-1);
  font-weight: 650;
  margin-bottom: 8px;
}
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1.5px solid var(--ink-2);
  font-size: var(--fs-1);
  font-weight: 550;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .1s ease;
  user-select: none;
}
.seg label:hover { border-color: var(--ink); }
.seg label:active { transform: scale(.98); }
.seg input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.seg input:focus-visible + label {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* consent */
.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  margin: 20px 0 18px;
}
.consent input {
  appearance: none;
  width: 24px; height: 24px;
  margin-top: 2px;
  border: 2px solid var(--ink);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .15s var(--ease);
}
.consent input::before {
  content: "";
  width: 12px; height: 12px;
  transform: scale(0);
  transition: transform .15s var(--ease);
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.consent input:checked { background: var(--red); border-color: var(--red); }
.consent input:checked::before { transform: scale(1); }
.consent label {
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.consent.is-error input { border-color: var(--error); box-shadow: 0 0 0 3px rgba(160,39,19,.15); }

.turnstile-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-bottom: 18px;
}

/* form status messages */
.form-status { margin-top: 14px; font-size: var(--fs-1); font-weight: 550; }
.form-status[data-tone="error"] { color: var(--error); }
.form-status[data-tone="ok"]    { color: var(--green); }

/* success state */
.card-success { padding: 36px 22px; text-align: left; }
.card-success .star-i { width: 26px; height: 36px; color: var(--green); }
.card-success h3 { font-size: var(--fs-4); letter-spacing: -.01em; margin: 14px 0 8px; }
.card-success p { color: var(--ink-2); font-size: var(--fs-2); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 30px;
  font-size: 1.0625rem;
  font-weight: 680;
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .12s ease, box-shadow .22s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(2px) scale(.99); }
.btn[disabled] { opacity: .6; cursor: progress; }

.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* NOTE: class name kept as .btn--red — it renders green (the primary/CTA
   color as of the Swiss+Aero merge). Cosmetic rename debt: .btn--green
   would be more honest, but every call site (this file + index-v4.html)
   would need updating together. Fine to leave until touched for other reasons. */
.btn--red { background: var(--green); border-color: var(--green); color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }

.btn--block { width: 100%; }

/* ---------- Ticker ---------- */
/* The photo, back — cropped deliberately this time (checked the actual
   image first instead of guessing). mj-sky-panels.png is an older man
   leaping + a woman cycling, each "heads in the clouds" behind a floating
   glass panel; the earlier "center 38%" position landed on the flat grass
   band, which is why it just read as solid dark green under the overlay.
   This targets the cloud band instead — bright enough to still show real
   tonal variation even through the dark glass tint.
   NOTE: background-position only changes what's DISPLAYED, not what's
   DOWNLOADED — the browser still fetches the full PNG regardless of crop.
   Actually shrinking the request needs a real pre-cropped/resized asset,
   which needs image-editing tools I don't have here. */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(20, 19, 17, 0.16);
  background-image: url("../assets/moodboard/mj-sky-panels.png");
  background-size: cover;
  background-position: center 24%;
  color: var(--paper);
}
.ticker-track {
  position: relative;
  display: flex;
  width: max-content;
  background: rgba(20, 19, 17, 0.68);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  backdrop-filter: blur(8px) saturate(1.25);
  animation: tick 42s linear infinite;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ticker-track { background: rgba(20, 19, 17, 0.92); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul {
  display: flex;
  align-items: center;
  list-style: none;
}
.ticker li {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 15px 14px 15px 14px;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker .star-i { width: 12px; height: 16.5px; flex: none; }
.ticker li:nth-child(4n+1) .star-i { color: var(--red-hot); }
.ticker li:nth-child(4n+2) .star-i { color: var(--yellow); }
.ticker li:nth-child(4n+3) .star-i { color: #6E8DFF; }
.ticker li:nth-child(4n+4) .star-i { color: #4CAF7D; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--section-y); }

.sec-head {
  display: grid;
  gap: 28px var(--gap);
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .sec-head > .sec-title { grid-column: 1 / span 7; }
  .sec-head > .sec-side  { grid-column: 9 / span 4; }
}
.sec-title h2 {
  font-size: var(--fs-h2);
  font-weight: 730;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-top: 22px;
  max-width: 20ch;
  text-wrap: balance;
}
.sec-side {
  font-size: var(--fs-2);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: 36px;
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step { padding-right: 8px; }
.step-no {
  font-size: clamp(3.25rem, 5vw, 4.5rem);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.step:nth-child(1) .step-no { color: var(--red); }
.step:nth-child(2) .step-no { color: var(--blue); }
.step:nth-child(3) .step-no { color: var(--green); }
.step h3 {
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 18px 0 10px;
}
.step p { color: var(--ink-2); }

.how-photo { position: relative; }
.how-photo figcaption {
  margin-top: 12px;
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- Duotone treatment ---------- */
.duo {
  position: relative;
  background: var(--duo, var(--blue));
  overflow: hidden;
}
.duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.07) brightness(1.05);
  mix-blend-mode: multiply;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease);
}
.duo:hover img { transform: scale(1.03); }
.duo--red  { --duo: var(--red-hot); }
.duo--blue { --duo: #2E55D8; }
.duo--blue img { filter: grayscale(1) contrast(1.02) brightness(1.3); }
@supports not (mix-blend-mode: multiply) {
  .duo img { filter: grayscale(1); }
}

/* ---------- Free / approach ---------- */
.free { background: var(--paper-2); }
.free-grid { display: grid; gap: 48px var(--gap); }
@media (min-width: 1024px) {
  .free-grid { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .free-photo { grid-column: 1 / span 5; }
  .free-copy  { grid-column: 7 / span 6; }
}
.free-photo .aero-photo__frame { aspect-ratio: 1 / 1; } /* was 4/4.6 on the old .duo wrapper — loosened for the new landscape source photo */
.free-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 730;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 22px 0 26px;
  max-width: 16ch;
}
.free-copy p {
  font-size: var(--fs-2);
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.free-copy p + p { margin-top: 18px; }
.free-copy p strong { color: var(--ink); }

mark {
  background: linear-gradient(transparent 8%, var(--yellow) 8%, var(--yellow) 92%, transparent 92%);
  color: var(--ink);
  padding-inline: 2px;
  font-weight: 650;
}

/* ---------- Paying for care (dark) ---------- */
.paying {
  /* position:relative alone does NOT create a stacking context — needs an
     explicit z-index too, same lesson already paid for on .site-foot and
     the callback orb. */
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
}
.paying .label { color: #B9B2A2; }
.paying .sec-side { color: #B9B2A2; }
.pay-grid {
  display: grid;
  gap: var(--gap);
  border-top: 1px solid var(--line-dark);
  padding-top: 36px;
}
@media (min-width: 700px)  { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pay-grid { grid-template-columns: repeat(4, 1fr); } }
/* Was 4 unrelated colors (red/blue/yellow/green), then 4 different
   solid steps along a green->blue walk — still read as "each card its
   own color". This is one green->blue gradient, identical on every
   card's border (border-image, since border-color can't take a
   gradient) — the gradient itself is the accent, not a per-card hue. */
.pay {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--green) 0%, var(--blue-2) 100%) 1 100%;
  padding: 6px 0 6px 20px;
}
.pay { --pay-accent: var(--green); }
.pay h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.pay p { font-size: var(--fs-1); line-height: 1.6; color: #CFC9BB; }

.pay-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.pay-foot p { color: #CFC9BB; max-width: 52ch; font-size: var(--fs-2); }

/* ---------- CTA band ---------- */
.band {
  background: var(--green);
  color: #fff;
  border-top: 1px solid var(--green);
}
.band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: clamp(48px, 7vw, 88px);
}
.band h2 {
  font-size: clamp(2rem, 1rem + 3.4vw, 3.25rem);
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.band p { margin-top: 10px; font-size: var(--fs-2); color: #FFE3DC; }
.band-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.band .btn {
  background: #fff; border-color: #fff; color: var(--ink);
}
.band .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.band-call { color: #fff; font-weight: 650; }
.band-call a {
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.band-call a:hover { color: var(--yellow); }

/* ---------- Footer ---------- */
.site-foot {
  /* position:relative alone does NOT create a stacking context — needs an
     explicit z-index too, or the canvas's z-index:-1 escapes to a more
     distant ancestor instead of stacking "behind this element's own
     content" (this exact bug, and the fix, already cost real time on the
     callback orb earlier — see that commit history if this looks familiar). */
  position: relative;
  z-index: 0;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
  overflow: hidden;
}
/* shared by both constellation instances (.site-foot, .paying) — position:
   absolute resolves against whichever positioned ancestor holds it, so one
   rule covers every section that uses this device. */
.constellation-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.foot-grid {
  display: grid;
  gap: 44px var(--gap);
  padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: repeat(12, 1fr); }
  .foot-col--talk  { grid-column: 1 / span 5; }
  .foot-col--pages { grid-column: 7 / span 2; }
  .foot-col--id    { grid-column: 9 / span 4; }
}
.foot-label {
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8F897B;
  margin-bottom: 20px;
}
.foot-phone {
  display: inline-block;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 740;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 3px solid var(--green-2);
  padding-bottom: 4px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-phone:hover { color: var(--yellow); border-color: var(--yellow); }
.foot-col--talk p { color: #B9B2A2; font-size: var(--fs-1); margin-top: 16px; max-width: 40ch; }
.foot-col--talk a.mail { color: var(--paper); text-underline-offset: 3px; }
.foot-col--talk a.mail:hover { color: var(--yellow); }

.foot-col--pages ul { list-style: none; }
.foot-col--pages li + li { margin-top: 12px; }
.foot-col--pages a {
  text-decoration: none;
  font-size: var(--fs-1);
  font-weight: 550;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.foot-col--pages a:hover { border-color: var(--paper); }

.foot-col--id p { font-size: var(--fs-1); color: #B9B2A2; text-wrap: pretty; }
.foot-col--id p + p { margin-top: 14px; }

.foot-tag {
  font-style: italic;
  font-weight: 320;
  font-size: var(--fs-3);
  color: #CFC9BB;
  padding-top: 8px;
}

.foot-mark {
  padding-top: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--line-dark);
}
.foot-mark .wm { display: block; }
.foot-mark .wm-word { font-size: clamp(56px, 14.5vw, 210px); }
.foot-mark .wm-sub { font-size: clamp(11px, 1.2vw, 18px); color: #8F897B; }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 28px 36px;
  font-size: 0.8125rem;
  color: #8F897B;
}
.foot-legal a { color: #B9B2A2; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--paper); }

/* ---------- Chat float ---------- */
/* Pulled from Aero, literally: this is the same CSS as Aero's own chat
   launcher (index-aero.html .chat-btn / .chat-btn__glass), values unchanged.
   .chat-btn itself is just a translucent ring with no blur of its own — only
   the bust-masked .chat-btn__glass layer gets backdrop-filter, so the live
   page behind this fixed button blurs through the mascot shape specifically,
   not the whole button. This replaces the earlier solid-gradient version. */
.chat-btn {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: var(--z-chat);
  width: 72px; height: 72px; padding: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(20, 19, 17, 0.14);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 28px -12px rgba(20, 19, 17, 0.45);
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), transform .18s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-btn { background: rgba(251, 253, 254, 0.95); }
}
.chat-btn:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-3px); }
.chat-btn:active { background: rgba(255, 255, 255, 0.34); transform: translateY(0) scale(.96); }

.chat-btn__glass, .chat-btn__face { position: absolute; inset: 10px 0 -10px 0; pointer-events: none; }
.chat-btn__glass {
  -webkit-mask: url("../assets/masks/fella-bust.svg") center / contain no-repeat;
  mask: url("../assets/masks/fella-bust.svg") center / contain no-repeat;
  -webkit-backdrop-filter: blur(6px) saturate(1.85) brightness(1.06);
  backdrop-filter: blur(6px) saturate(1.85) brightness(1.06);
  background:
    radial-gradient(ellipse 52% 30% at 34% 19%, rgba(255, 255, 255, 0.66), transparent 56%),
    linear-gradient(158deg, rgba(59, 165, 93, 0.72) 0%, rgba(44, 150, 140, 0.58) 46%, rgba(46, 85, 216, 0.72) 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-btn__glass {
    background:
      radial-gradient(ellipse 52% 30% at 34% 19%, rgba(255, 255, 255, 0.7), transparent 56%),
      linear-gradient(158deg, #57BE86 0%, #2E9E8F 46%, #3D63D8 100%);
  }
}

/* Pulled from Aero: glass, like the header — this panel is already
   position:fixed, floating over whatever page content is scrolled behind
   it when opened, so there's always something real for the blur to read. */
.chat-panel {
  position: fixed;
  right: 20px; bottom: 92px;
  z-index: var(--z-chat);
  width: min(360px, calc(100vw - 40px));
  background: rgba(255, 254, 250, 0.8);
  color: var(--ink);
  border: 1.5px solid rgba(20, 19, 17, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 20px 44px -22px rgba(20, 19, 17, 0.5);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .25s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-panel { background: rgba(255, 254, 250, 0.97); }
}
.chat-panel.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.chat-panel .card-head { padding: 14px 18px; }
.chat-panel .card-body { padding: 20px 18px; }
.chat-panel p { font-size: var(--fs-1); color: var(--ink-2); margin-bottom: 16px; }
@media (max-width: 480px) {
  .chat-panel { right: 12px; bottom: 84px; }
  .chat-btn { right: 12px; bottom: 12px; }
}

/* ---------- Reveal animations ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .65s var(--ease) var(--d, 0ms),
    transform .65s var(--ease) var(--d, 0ms);
}
/* [data-reveal].is-in hardcodes transform:none, which would erase the photo
   tilt once revealed — restore it after, same fix Aero's own CSS uses for
   its tilted cards. Also covers the pre-reveal frame so the tilt reads
   during the fade/rise, not just after. */
.aero-photo--tilt { transform: rotate(-1.4deg); }
html.js [data-reveal].aero-photo--tilt { transform: translateY(18px) rotate(-1.4deg); }
html.js [data-reveal].aero-photo--tilt.is-in { transform: rotate(-1.4deg); }

/* slow hero star spin */
.spin-slow { animation: spin 90s linear infinite; transform-origin: center; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js [data-reveal].aero-photo--tilt { transform: rotate(-1.4deg); }
  .ticker-track { animation: none; }
  .spin-slow { animation: none; }
  .duo img, .duo:hover img { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Inner pages (privacy / data deletion) ---------- */
.page-main { padding-block: clamp(48px, 7vw, 96px); }
.page-main .label { margin-bottom: 20px; }
.page-main h1 {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
  font-weight: 730;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 28px;
}
.page-main .prose { max-width: 68ch; color: var(--ink-2); }
.page-main .prose h2 {
  font-size: var(--fs-4);
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 36px 0 12px;
}
.page-main .prose p + p { margin-top: 14px; }
.page-main .prose ul { margin: 14px 0 14px 22px; }
.page-main .prose li + li { margin-top: 8px; }
.notice {
  border: 1.5px solid var(--ink);
  background: #FFFEFA;
  padding: 18px 20px;
  font-size: var(--fs-1);
  margin: 28px 0;
  max-width: 68ch;
}

/* ============================================================
   Resources / guide page (resources.html)
   ============================================================ */

/* Top floor raised from 48px to clear .site-head, which is position:fixed
   at ~94-98px tall (more on narrow viewports where nav wraps) — same fix
   .dir-hero already needed (128px floor there). Without it the eyebrow
   label renders correctly but sits entirely underneath the opaque fixed
   header, invisible despite having correct computed styles/position. */
.res-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(120px, 16vw, 156px) clamp(40px, 5vw, 64px);
}
/* Mounts gradient-init.js's existing #hero-gradient config (AA-verified,
   paper-adjacent tints) — that config has sat unused since no page ever
   actually placed the canvas it targets. Same engine/positioning recipe
   as .dir-promo-bg on index-v4.html. */
.res-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.res-hero > .container { position: relative; z-index: 1; }
/* Scale/weight matched to .free-h2 (index-v4.html's "Why it's free"
   headline) rather than this page's own older, noticeably smaller/
   lighter values (was 4.375rem ceiling / weight 740) — the technical
   swap to styles-v4.css didn't by itself update this page's own
   typographic scale to match how bold/oversized headlines have become
   site-wide this session. */
.res-hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 4.5vw, 4.75rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 17ch;
  margin-top: 26px;
  text-wrap: balance;
}
.res-hero .deck {
  font-size: var(--fs-3);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 24px;
  text-wrap: pretty;
}
.res-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 28px;
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.res-layout {
  display: grid;
  gap: 48px var(--gap);
  padding-bottom: var(--section-y);
}
@media (min-width: 1024px) {
  .res-layout { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .res-body { grid-column: 1 / span 8; min-width: 0; }
  /* top/z-index match .dir-filters' sticky bar — same problem (a sticky
     element under the fixed ~94-98px .site-head), same fix: top:24px
     alone left the rail sticking underneath the header instead of below
     it, so on scroll the header visibly clipped its top edge. */
  .res-rail { grid-column: 10 / span 3; position: sticky; top: 94px; z-index: var(--z-sticky); }
}

/* table of contents */
.toc { border: 2px solid var(--ink); background: #FFFEFA; padding: 18px 20px 8px; }
.toc-label {
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.toc ol { list-style: none; }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: var(--fs-1);
  font-weight: 570;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.toc li:last-child a { border-bottom: none; }
/* --green-2, not --green: --green is #49B776, ~2.3:1 on cream — fine for fills
   and graphics, below AA for 13px text. --green-2 is the same hue family at 4.7:1. */
.toc a:hover { color: var(--green-2); transform: translateX(3px); }
.toc .no {
  font-weight: 760;
  font-feature-settings: "tnum" 1;
  font-size: 0.8125rem;
  color: var(--green-2);
}

/* guide sections */
.rsec { border-top: 1px solid var(--line); padding-top: 36px; margin-top: clamp(40px, 6vw, 60px); }
.res-body > .rsec:first-child { margin-top: 0; }
/* Gradient-filled numeral — same green->blue walk as .facts/.pay's left
   edge, so the numerals read as the same device, not a third accent.
   Originally tried as an outline (-webkit-text-stroke, .how-step-num's
   recipe): on bold numerals with acute angles or crossing strokes (04's
   diagonal, 01's thin vertical) outline-only rendering leaves phantom
   marks at the self-intersections — a real rendering artifact, not just
   a style call. A solid fill has no such gap to glitch, gradient or not. */
.rsec-no {
  font-size: clamp(3.25rem, 2.3rem + 4vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  color: var(--green);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rsec-no {
    background: linear-gradient(180deg, var(--green) 0%, var(--blue-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.rsec h2 {
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.375rem);
  font-weight: 730;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 14px 0 18px;
  max-width: 24ch;
  text-wrap: balance;
}
.rsec p { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.rsec p + p { margin-top: 14px; }
.rsec p strong, .rsec li strong { color: var(--ink); }
.rsec ul { list-style: none; margin-top: 16px; max-width: 62ch; }
.rsec ul li {
  position: relative;
  padding-left: 26px;
  margin-top: 10px;
  color: var(--ink-2);
}
.rsec ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 10px;
  background: var(--ink);
}

/* cost table — superseded by the .steps-grid card layout in the Costs
   section (kept per this file's convention of leaving replaced CSS in
   place rather than deleting, e.g. see .how-steps above) */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 26px;
  font-feature-settings: "tnum" 1;
}
.cost-table th {
  text-align: left;
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 16px 12px 0;
  border-bottom: 2px solid var(--ink);
}
.cost-table td {
  vertical-align: top;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--ink-2);
}
.cost-table td:first-child { font-weight: 700; color: var(--ink); font-size: var(--fs-2); }
.cost-table .money { font-weight: 700; color: var(--ink); white-space: nowrap; display: block; }
.cost-table .per { font-weight: 450; color: var(--ink-2); font-size: var(--fs-1); }
.table-note { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 640px) {
  .cost-table { border-top: 2px solid var(--ink); }
  .cost-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .cost-table tbody, .cost-table tr, .cost-table td { display: block; }
  .cost-table tr { border-bottom: 1px solid var(--line); padding: 18px 0; }
  .cost-table td { border: none; padding: 0; }
  .cost-table td:first-child { font-size: var(--fs-3); }
  .cost-table td:nth-child(2) { margin: 2px 0 8px; }
  .cost-table .money { display: inline; }
}

/* cost cards — money figure inside a reused .how-step card */
.how-step p.money {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.2;
  font-feature-settings: "tnum" 1;
  margin: 2px 0 10px;
}
.how-step p.money .per { font-weight: 450; color: var(--ink-2); font-size: var(--fs-1); }

/* fact boxes — left edge carries the same green->blue gradient walk as
   .pay's card border (a literal quote of that device, not a look-alike:
   border-image can't be scoped to one side once the other 3 sides also
   have a border, so this uses a ::before bar instead, inset over the
   ink border rather than replacing it). */
.facts { border: 2px solid var(--ink); background: #FFFEFA; margin-top: 26px; max-width: 640px; position: relative; }
.facts::before {
  content: "";
  position: absolute;
  left: -2px; top: -2px; bottom: -2px;
  width: 4px;
  background: linear-gradient(180deg, var(--green) 0%, var(--blue-2) 100%);
}
.facts-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: var(--fs-0);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.facts-head .star-i { width: 11px; height: 15px; }
.facts dl { padding: 6px 18px 14px; }
.facts-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-1);
}
.facts dl .facts-row:last-child { border-bottom: none; }
.facts dt { font-weight: 700; color: var(--ink); }
.facts dd { color: var(--ink-2); }
@media (max-width: 560px) {
  .facts-row { grid-template-columns: 1fr; gap: 4px; }
}

/* pricing-questions checklist */
.check-grid { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 700px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check {
  display: flex;
  gap: 12px;
  border: 1.5px solid var(--ink-2);
  background: #FFFEFA;
  padding: 16px 18px;
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--ink-2);
}
.check .star-i { width: 11px; height: 15px; flex: none; margin-top: 4px; color: var(--green); }
.check strong { color: var(--ink); }

/* FAQ */
.qa { border-top: 2px solid var(--ink); margin-top: 26px; }
.qa-item { border-bottom: 1px solid var(--line); }
.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 680;
  letter-spacing: -0.005em;
  list-style: none;
  transition: color .18s var(--ease);
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:hover { color: var(--green-2); }
.qa-item summary .star-i {
  width: 12px; height: 16.5px; flex: none;
  color: var(--ink);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.qa-item[open] summary .star-i { transform: rotate(135deg); color: var(--green); }
.qa-body { padding: 0 2px 20px; }
.qa-body p { color: var(--ink-2); max-width: 60ch; }
.qa-body p + p { margin-top: 12px; }

/* photo break — reuses .duo/.duo--green + .how-photo's figcaption as-is;
   only this aspect-ratio is new (hands.jpg's own crop, unlike
   .steps-proof's fixed 21/9 banner ratio, which would crop it badly) */
.res-duo { aspect-ratio: 1024 / 683; border-radius: 12px; }

/* dark closing band's .pay cards act as jump-links back into the guide,
   unlike the homepage's plain (non-link) .pay <article>s — kept as a
   modifier rather than changed on .pay itself so the homepage cards are
   untouched */
.pay--link { color: inherit; text-decoration: none; display: block; transition: transform .18s var(--ease); }
.pay--link:hover, .pay--link:focus-visible { transform: translateX(4px); }

/* ===================================================================
   ===== v4: ICONS (from v3) =====
   Lucide stroke icons rendered via <svg class="ico"><use href="#i-name"/>
   =================================================================== */

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* eyebrow label — v3-only variant used by hero/journey/callback/pay sections */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caps);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1;
}

/* .section variant used by callback (the .section class already has padding from v1,
   but we add .callback overrides below that supersede it) */
.section.callback {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

/* ===================================================================
   ===== v4: HERO (from v3) =====
   Replaces v1's .hero block. Old v1 .hero-grid / .hero-mark / hero h1
   rules are kept above but the markup no longer exists, so they're
   harmless dead CSS. The v3 hero rules below take precedence for all
   new .hero-* selectors.
   =================================================================== */

/* Override v1's minimal .hero so v3's full hero rules apply cleanly */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding-block: clamp(100px, 14vw, 160px) clamp(92px, 12vw, 140px);
  border-top: none;
}

/* Remove v1's padding override — v3 hero has its own padding via above */
.hero .container {
  position: static;
  padding-block: 0;
}

/* Shader-gradient glow — sits behind .hero-bg's rings/star (z-index below
   --z-base) but above the plain .hero background. See js/gradient-init.js
   for its falloff config; if WebGL never initializes the canvas stays
   empty and .hero's own --paper background shows through unchanged. */
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── Background texture layer ── */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
  overflow: hidden;
}

.hero-bg__svg {
  position: absolute;
  top: 50%;
  right: clamp(-220px, -9vw, -90px);
  transform: translateY(-50%);
  width: clamp(540px, 64vw, 980px);
  height: auto;
  max-width: none;
}

/* Mobile: keep abstraction ambient, off the copy */
@media (max-width: 767px) {
  .hero-bg { opacity: 0.42; }
  .hero-bg__svg {
    top: 30%;
    right: -50%;
    width: clamp(460px, 150vw, 720px);
  }
  .hero-field-star { display: none; }
}

/* Rings — CSS-only entrance (no JS gating) */
.hero-ring { transform-origin: 360px 360px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-ring {
    opacity: 0;
    animation: ringRipple .9s var(--ease-out) calc(var(--ri, 0) * 90ms) both;
  }
  @keyframes ringRipple {
    from { opacity: 0; transform: scale(0.84); }
    to   { opacity: 1; transform: scale(1); }
  }

  .hero-glow {
    opacity: 0;
    animation: heroFade 1s var(--ease-out) .25s both;
  }

  .hero-star-focal {
    opacity: 0;
    transform-origin: 360px 360px;
    animation: starSettle .7s var(--ease-out) .38s both;
  }
  @keyframes starSettle {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }

  .hero-field-star {
    opacity: 0;
    animation: heroFade .6s var(--ease-out) calc(.6s + var(--fi, 0) * 90ms) both;
  }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Reduced motion: everything visible, static */
@media (prefers-reduced-motion: reduce) {
  .hero-ring,
  .hero-glow,
  .hero-star-focal,
  .hero-field-star { opacity: 1; }
}

/* Star spin + field star orbit (slow, calm) */
.hero-star-spin  { transform-box: view-box; transform-origin: 360px 360px; }
.hero-field-star { transform-box: view-box; transform-origin: 360px 360px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-star-spin { animation: heroStarSpin 72s linear infinite; }
  @keyframes heroStarSpin { to { transform: rotate(360deg); } }

  .hero-field-star {
    animation:
      heroFade .6s var(--ease-out) calc(.6s + var(--fi, 0) * 90ms) both,
      heroOrbit calc(50s + var(--fi, 0) * 18s) linear infinite;
  }
  @keyframes heroOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
}

@media (prefers-reduced-motion: reduce) {
  .hero-star-spin,
  .hero-field-star { animation: none; }
}

/* ── Inner layout ── */
.hero-inner {
  position: relative;
  z-index: var(--z-above);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: 6fr 5fr;
    align-items: center;
    gap: 40px;
    min-height: clamp(480px, 62vh, 700px);
  }
}

/* Copy column */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 680px;
}

/* Visual balance column */
.hero-visual {
  display: none;
}

@media (min-width: 768px) {
  .hero-visual {
    display: block;
    min-height: 440px;
  }
}

/* Hero h1 */
.hero-h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--ink);
}

.hero-h1 .ln > span { text-wrap: balance; }

/* <em> inside h1 — was upright vermillion (--red); now the Aero treatment
   for this exact phrase: Instrument Serif italic + green (the new primary) */
.hero-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--green);
}

/* Deck paragraph */
.hero-deck {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 52ch;
}

.hero-deck strong {
  color: var(--ink);
  font-weight: 680;
}

/* Actions row */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Inline phone link */
.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.hero-phone:hover { color: var(--ink); }
.hero-phone .ico { width: 1.1em; height: 1.1em; }

/* Reassurance line */
.hero-reassure {
  font-size: var(--fs-caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ── Scroll cue ── */
.hero-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-above);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  text-decoration: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.hero-scroll-cue:hover { color: var(--red); }

.hero-scroll-cue:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-scroll-cue__text {
  font-size: var(--fs-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-scroll-cue__ico {
  width: 1.25em;
  height: 1.25em;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue__ico {
    animation: bobDown 1.8s var(--ease) infinite alternate;
  }
  @keyframes bobDown {
    from { transform: translateY(0); }
    to   { transform: translateY(6px); }
  }
}

/* Line-by-line text reveal — used by hero-h1.reveal-lines + callback-h2.reveal-lines */
html.js .reveal-lines .ln {
  display: block;
  overflow: hidden;
}

html.js .reveal-lines .ln > span {
  display: block;
  transform: translateY(108%);
  transition: transform .8s var(--ease-out) var(--d, 0ms);
}

html.js .reveal-lines.is-in .ln > span {
  transform: none;
}

/* data-draw (scale-from-left) — for ruled lines/bars */
html.js [data-draw] {
  transform: scaleX(0);
  transform-origin: left;
}

html.js [data-draw].is-in {
  transform: scaleX(1);
  transition: transform .7s var(--ease-out) var(--d, 0ms);
}

/* Hero + scroll-cue reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__ico { animation: none !important; }
  .hero-ring             { animation: none !important; }
  .hero-star-focal,
  .hero-field-star,
  .hero-glow             { animation: none !important; opacity: 1 !important; }
  html.js .reveal-lines .ln > span,
  html.js .reveal-lines.is-in .ln > span { transform: none !important; transition: none !important; }
  html.js [data-draw],
  html.js [data-draw].is-in              { transform: none !important; transition: none !important; }
}

/* ===================================================================
   ===== v4: HERO — "Mist Path" (promoted from _hero-mockup-c.html) ====
   Mascot pair + js/mist-trail.js mesh/dither, replacing the previous
   guiding-star/proximity-rings hero. Scoped under .hero-c so
   _hero-mockup-b.html (still comparison-only, shares this stylesheet)
   keeps the original .hero-h1/.hero-em/.hero-deck/.hero-visual rules
   above untouched.
   =================================================================== */
.hero-c { display: block; }

/* .hero-inner's own position:relative (base rule above) loses to the
   higher-specificity ".hero .container { position: static; }" a few
   hundred lines up (the old v3-hero override, 2 classes vs 1) — so its
   z-index: var(--z-above) was never actually applying, and .hero-c-mist's
   explicit z-index:1 (a real positioned stacking level) painted the mesh
   ABOVE the hero's text/mascots instead of behind them. Re-declaring
   position here at equal (2-class) specificity wins on source order,
   since this rule comes later in the file. */
.hero-c .hero-inner { position: relative; z-index: var(--z-above); }

.hero-c-mist {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-c-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 660px;
}

/* Bigger, heavier than .hero-h1's standard --fs-display, still sized
   to fit the 6fr copy column. */
.hero-c-h1 {
  font-size: clamp(2.9rem, 0.9rem + 6vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--ink);
}
.hero-c-h1 .ln > span { text-wrap: balance; }

/* This hero's "the way" matches the rest of the headline's own font
   instead of .hero-em's Instrument Serif italic above — keeps only
   the colour cue. */
.hero-c-h1 .hero-em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* .hero-deck's 52ch cap (above) ran wider than this narrower
   headline's widest line — pull it in so the copy block's right edge
   reads as one consistent line. */
.hero-c .hero-deck { max-width: 400px; }

/* Mascots take over .hero-visual (the grid's real right column),
   walking toward the text column — matches the source art's own
   leftward pose. Gated to the same >=768px breakpoint as the base
   .hero-visual rule above. */
@media (min-width: 768px) {
  .hero-c .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.hero-c-mascots {
  position: relative;
  width: clamp(210px, 25vw, 360px);
  pointer-events: none;
}
.hero-c-mascots img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.78;
}

/* ===================================================================
   ===== v4: STEPS + FREE (promoted from _sections-mockup.html) ========
   Replaces .journey (below, kept but now unused on index-v4.html) and
   .free-grid (in the FREE/APPROACH block further down, also now unused)
   with one shared grammar: eyebrow, oversized headline, thin top rule,
   3-up row of equal-weight left-bordered modules. Old CSS left in place
   rather than deleted — same low-risk-over-cleanliness call as the hero
   promotion's unused .hero-bg/.hero-ring rules.
   =================================================================== */
.how-steps { padding-block: var(--section-y); }

/* NOT named .steps/.step — collides with the live v1-era ".steps {
   display:grid...} .step{padding-right:8px}" rule a few hundred lines
   down (comment: "replaces v1's .steps how-it-works"). First pass here
   collided with it directly: the section became a stray grid-item,
   squashing .container to ~1/3 width. Renamed to sidestep it. */

.steps-header { max-width: 640px; }
.steps-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 14px;
  color: var(--ink);
}
.steps-note {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  margin-top: 14px;
}

/* Thin flow line, green -> teal — the same direction the hero's mesh
   runs in, a small visual rhyme rather than a literal rail. */
.steps-line {
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, #2CA88F 100%);
  margin: clamp(32px, 5vw, 56px) 0 0;
}

.steps-grid {
  display: grid;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  margin-top: -1px;
}
@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

.how-step {
  padding: 28px 4px 0;
  border-left: 2px solid var(--line);
}
@media (min-width: 768px) {
  .how-step { padding: 32px clamp(16px, 2vw, 28px) 0; }
  .how-step:first-child { padding-left: 4px; border-left: none; }
}
/* Below 768px .steps-grid drops to one column, so 01/02/03 stack instead
   of sitting in a row — .steps-line only ever sat once above the whole
   grid, which read fine as "above step 01" but left 02 and 03 looking
   like they'd lost their green marker. Each step gets its own top
   border on mobile instead; .steps-line is redundant with 01's then,
   so it's hidden rather than shown twice. */
@media (max-width: 767px) {
  .steps-line { display: none; }
  .how-step { border-top: 2px solid var(--green); }
}

.how-step-num {
  display: block;
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--paper-2);
  margin-bottom: 18px;
}
@supports (-webkit-text-stroke: 1px black) {
  .how-step-num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--green);
  }
}

.how-step-ico { width: 22px; height: 22px; color: var(--green); margin-bottom: 14px; }
.how-step h3 {
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--ink);
}
.how-step p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 38ch; }

.steps-proof { margin-top: clamp(48px, 7vw, 80px); }
.steps-proof .aero-photo-plain { border-radius: 12px; overflow: hidden; }
.steps-proof img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9; /* matches mj-water-leap.png's native 3360x1440 crop */
  object-fit: cover;
}
.steps-proof figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  font-style: italic;
}

.free-new { padding-block: var(--section-y); border-top: 1px solid var(--line); }

.free-h2 {
  font-size: clamp(2.4rem, 1.2rem + 4.5vw, 4.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--ink);
  margin-top: 16px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.free-h2 .ln:last-child span { color: var(--green); }

.free-points {
  display: grid;
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
@media (min-width: 768px) {
  .free-points { grid-template-columns: repeat(3, 1fr); }
}

.free-point { border-left: 2px solid var(--line); padding: 0 4px; }
@media (min-width: 768px) {
  .free-point { padding-inline: clamp(16px, 2vw, 28px); }
  .free-point:first-child { padding-left: 4px; border-left: none; }
}
.free-point-ico { width: 22px; height: 22px; color: var(--green); margin-bottom: 14px; }
.free-point p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.free-point mark {
  background: color-mix(in srgb, var(--yellow) 55%, transparent);
  color: var(--ink);
  padding: 0 3px;
  border-radius: 2px;
}
.free-point strong { color: var(--ink); font-weight: 700; }

/* ===================================================================
   ===== v4: JOURNEY (from v3) — replaces v1's .steps how-it-works =====
   =================================================================== */

.journey {
  background: var(--paper-2);
  padding-block: clamp(60px, 7vw, 104px) var(--section-y);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.journey-header {
  max-width: 680px;
  margin-bottom: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.journey-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.journey-note {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 52ch;
  line-height: 1.5;
}

/* ── Track ── */
.journey-track {
  position: relative;
  padding-left: clamp(40px, 7vw, 72px);
}

.journey-rail {
  position: absolute;
  left: calc(clamp(40px, 7vw, 72px) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--line-2);
  pointer-events: none;
}

.journey-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--red) 0%, var(--blue) 52%, var(--green) 100%);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .1s linear;
  will-change: clip-path;
}

@media (prefers-reduced-motion: reduce) {
  .journey-rail__fill { transition: none; clip-path: inset(0 0 0 0); }
}

/* ── Waypoints ── */
.journey-waypoint {
  position: relative;
  margin-bottom: clamp(56px, 9vw, 120px);
}

.journey-waypoint:last-child { margin-bottom: 0; }

.waypoint-node {
  position: absolute;
  left: calc(-1 * clamp(40px, 7vw, 72px) / 2 - 12px);
  top: 4px;
  width: 24px;
  height: 33px;
  color: var(--line-2);
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  transform-origin: center;
}

.waypoint-node__star { width: 100%; height: 100%; }

/* Lit states — added by JS as scroll reaches each waypoint */
.journey-waypoint--01.wp-lit .waypoint-node { color: var(--red);   transform: scale(1.18); }
.journey-waypoint--02.wp-lit .waypoint-node { color: var(--blue);  transform: scale(1.18); }
.journey-waypoint--03.wp-lit .waypoint-node { color: var(--green); transform: scale(1.18); }

/* Reduced-motion: all waypoints lit immediately */
@media (prefers-reduced-motion: reduce) {
  .journey-waypoint--01 .waypoint-node { color: var(--red); }
  .journey-waypoint--02 .waypoint-node { color: var(--blue); }
  .journey-waypoint--03 .waypoint-node { color: var(--green); }
  .waypoint-node { transition: none; }
}

.waypoint-card {
  padding-left: clamp(12px, 2vw, 24px);
}

@media (min-width: 768px) {
  .waypoint-card {
    max-width: 620px;
    padding-left: clamp(20px, 3vw, 44px);
  }
}

.waypoint-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.waypoint-num {
  font-size: var(--fs-caps);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* Accent colours per step */
.journey-waypoint--01 .waypoint-num,
.journey-waypoint--01 .waypoint-icon { color: var(--red); }
.journey-waypoint--02 .waypoint-num,
.journey-waypoint--02 .waypoint-icon { color: var(--blue); }
.journey-waypoint--03 .waypoint-num,
.journey-waypoint--03 .waypoint-icon { color: var(--green); }

.waypoint-icon { width: 1.25em; height: 1.25em; }

.waypoint-h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}

.waypoint-body {
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
}

.waypoint-fig {
  margin-top: 28px;
  max-width: 400px;
}

.waypoint-fig .aero-photo-plain {
  aspect-ratio: 3 / 2;
  border-radius: 4px;
}

.waypoint-fig__caption {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.45;
}

/* duo--green variant (used in journey waypoint 03) */
.duo--green { --duo: var(--green-2); }
.duo--green img { filter: grayscale(1) contrast(1.06) brightness(1.25); }

/* ===================================================================
   ===== Pulled from Aero: the tilted photo-card + mono caption =====
   Straight, full-colour photography — no duotone filter. From the
   Aero collage plates (aero-lab.html PLATE 03): a slight tilt, a taped
   paper-card edge, and a small uppercase mono caption underneath.
   =================================================================== */
.aero-photo { position: relative; }
/* .aero-photo--tilt's transform rule lives further down, next to the
   [data-reveal] interaction fix — see the "Reveal animations" section */
.aero-photo__frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: 10px 10px 14px;
  box-shadow: 0 20px 44px -28px rgba(20, 19, 17, 0.5);
}
.aero-photo__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aero-photo__tape {
  position: absolute; top: -12px; left: 50%; z-index: 2;
  transform: translateX(-50%) rotate(-3deg);
  width: 88px; height: 24px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(20, 19, 17, 0.08);
}
.aero-photo__caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.aero-photo__caption b { color: var(--ink-2); font-weight: 600; }

/* plain frame (no tilt/tape) for smaller, secondary photo moments —
   still straight/untreated, just a lighter touch than the hero photo-card */
.aero-photo-plain {
  border: 1px solid var(--line);
  overflow: hidden;
}
.aero-photo-plain img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================================================================
   ===== v4: PAYING FOR CARE — icon additions (section 5) =====
   Icons sit above each .pay card heading; colored by existing accent.
   =================================================================== */

.pay-ico-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

/* Icon colors match per-card accent (defined on .pay:nth-child above) */
.paying .v4-pay-ico {
  width: 1.4em;
  height: 1.4em;
  color: var(--pay-accent, var(--paper));
}

/* Eyebrow compass icon in the paying section label */
.paying .label .v4-pay-ico {
  color: #B9B2A2;
}

/* ===================================================================
   ===== v4: CALLBACK (from v3) =====
   =================================================================== */

.callback {
  background: var(--paper);
  padding-block: var(--section-y);
  overflow: hidden;
}

/* 2-col desktop: copy ~5 col, card ~6 col */
.callback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 7vw, 80px);
  align-items: start;
}

@media (min-width: 868px) {
  .callback-grid {
    grid-template-columns: 5fr 6fr;
    align-items: center;
  }
}

/* ── Left copy column ── */
.callback-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.callback-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  margin-top: 12px;
}

.callback-lead {
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 44ch;
}

.callback-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.callback-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.5;
}

.callback-list__ico {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  color: var(--green);
  margin-top: 0.15em;
}

.callback-phone-line {
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: 1.5;
}

.callback-phone-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--green) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}

.callback-phone-link:hover {
  color: var(--green-2);
  text-decoration-color: var(--green-2);
}

.callback-phone-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Right form card ── */
.callback-card {
  background: var(--paper-3);
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

.callback-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper-3);
  padding: 14px 24px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

.callback-card__star {
  width: 1em;
  height: 1.375em;
  flex-shrink: 0;
  color: var(--yellow);
}

.callback-card__body {
  padding: clamp(24px, 4vw, 36px);
}

.callback-card__intro {
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 24px;
}

/* Sign up / sign in toggle — reuses .cb-segment (the old "best time to
   call" control) with 2 options instead of 3. Email + password, not
   phone/SMS verification (a code costs money per send; a password
   doesn't). Sign up also collects name + phone (same core info the
   old callback form did); sign in is just email + password. :has()
   lets the plain radio input (nested inside .cb-segment, not a direct
   sibling of the fields/copy it controls) drive both the intro copy
   and the extra fields without JS — hidden (display:none) fields are
   automatically excluded from the browser's own required-field
   validation, so auth-name/auth-phone's `required` only actually
   applies while they're visible, in sign-up mode. */
.auth-mode { margin-bottom: 20px; }
.auth-copy--signin { display: none; }
.callback-card__body:has(#auth-mode-signin:checked) .auth-copy--signup { display: none; }
.callback-card__body:has(#auth-mode-signin:checked) .auth-copy--signin { display: block; }
.callback-card__body:has(#auth-mode-signin:checked) .auth-field--signup { display: none; }

.auth-facility-link {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-3);
  text-align: center;
}

/* ---------- Customer Auth: multi-step signup, OTP, logged-in state ---------- */

.auth-step { display: block; }
.auth-step[hidden] { display: none; }

.auth-step-info {
  font-size: var(--fs-2);
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.5;
}
.auth-step-info strong { color: var(--ink); }

.auth-code-input {
  letter-spacing: .35em;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

.auth-resend {
  margin-top: 14px;
  font-size: var(--fs-1);
  text-align: center;
}
.auth-resend a {
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.auth-resend a[style*="pointer-events: none"] {
  color: var(--ink-3);
  text-decoration: none;
  cursor: default;
}

/* Logged-in state panel */
#auth-logged-in {
  padding: 8px 0;
}
#auth-logged-in[hidden] { display: none; }

#auth-greeting {
  font-size: var(--fs-3);
  margin-bottom: 18px;
}
#auth-greeting strong { color: var(--ink); }

#auth-logout {
  margin-top: 4px;
}

/* Hide auth-mode toggle + copy + forms when logged in */
#auth-ui[hidden] { display: none; }

/* Honeypot */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Password hint */
.cb-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-1);
  color: var(--ink-3);
}.auth-facility-link a {
  color: var(--ink);
  font-weight: 650;
  text-underline-offset: 3px;
}
.auth-facility-link a:hover { color: var(--green); }

/* ── Form fields ── */
.cb-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cb-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  cursor: pointer;
}

.cb-req {
  color: var(--red);
  margin-left: 2px;
}

.cb-optional {
  font-size: calc(var(--fs-caps) + 1px);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}

.cb-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--paper-3);
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.4;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.cb-input::placeholder {
  color: var(--ink-3);
  opacity: 0.75;
}

.cb-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
}

.cb-field.is-error .cb-input,
.cb-field.is-error .cb-consent-input {
  border-color: var(--error);
}

.cb-field.is-error .cb-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent);
}

.cb-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.55;
}

.cb-error {
  display: block;
  font-size: var(--fs-small);
  color: var(--error);
  font-weight: 500;
  line-height: 1.4;
  min-height: 0;
}

.cb-error:empty { display: none; }

/* ── Fieldset (best time) ── */
.cb-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb-legend {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
  display: block;
  width: 100%;
}

/* Segmented control */
.cb-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}

.cb-seg-label {
  flex: 1 1 0;
  display: block;
  cursor: pointer;
}

.cb-seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.cb-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper-3);
  text-align: center;
  border-right: 1.5px solid var(--line-2);
  transition:
    background-color 0.15s var(--ease),
    color            0.15s var(--ease);
  white-space: nowrap;
}

.cb-seg-label:last-child .cb-seg-btn { border-right: none; }

.cb-seg-input:checked + .cb-seg-btn {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.cb-seg-input:focus-visible + .cb-seg-btn {
  outline: 3px solid var(--blue);
  outline-offset: -1px;
  z-index: 1;
  position: relative;
}

.cb-seg-label:hover .cb-seg-input:not(:checked) + .cb-seg-btn {
  background: var(--paper-2);
  color: var(--ink);
}

/* ── Consent ── */
.cb-field--consent { gap: 8px; }

.cb-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.cb-consent-input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 2px;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

.cb-consent-input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.cb-consent-text {
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.55;
}

.cb-field--consent .cb-error {
  padding-left: 30px;
}

/* ── Security line ── */
.cb-security {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-caps);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.cb-security__ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  color: var(--green);
}

/* ── cb-success state (JS-injected) ── */
.cb-success {
  padding: 28px 0 8px;
}
.cb-success__hed {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
}
.cb-success__body {
  font-size: var(--fs-body);
  color: var(--ink-2);
  line-height: 1.6;
}

/* ── Callback reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .cb-input,
  .cb-seg-btn,
  .callback-phone-link { transition: none !important; }
}

/* ---------- Ghost button, light-bg variant ---------- */
/* .btn--ghost is ink-on-transparent meant for DARK sections (.paying); this
   is the light-bg equivalent, for secondary actions on paper backgrounds. */
.btn--ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.btn--ghost-ink:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ===================================================================
   ===== Directory promo (index-v4.html, between #paying and #callback) =====
   =================================================================== */

.dir-promo { position: relative; overflow: hidden; background: var(--paper-2); }

/* Canvas sits behind everything; --paper-2 above is the fallback if WebGL
   never initializes (js/network-gradient.js just leaves the canvas empty). */
.dir-promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.dir-promo > .container { position: relative; z-index: 1; }

.dir-promo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.dir-promo-stat { display: flex; flex-direction: column; gap: 4px; }
.dir-promo-stat__num {
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green);
  font-feature-settings: "tnum" 1;
}
.dir-promo-stat__label { font-size: var(--fs-small); color: var(--ink-2); max-width: 22ch; }

.dir-promo-types { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; }
.dir-promo-types li {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .dir-promo-row .btn { width: 100%; }
}

/* ===================================================================
   ===== Directory listing (directory.html) =====
   =================================================================== */

.dir-hero { border-top: none; padding-block: clamp(128px, 16vw, 172px) clamp(32px, 4vw, 48px); }
.dir-hero__h1 {
  font-size: clamp(2.25rem, 1.1rem + 3.6vw, 3.75rem);
  font-weight: 740;
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 16ch;
  margin-top: 22px;
}
.dir-hero__deck {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 58ch;
  margin-top: 20px;
}
.dir-hero__deck a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.dir-hero__deck a:hover { color: var(--green-2); }

/* Sticky filter bar — plain opaque background (no backdrop-filter): this is
   a functional toolbar, not a signature glass moment, and it always has
   the fixed header sitting above it, so keeping it simple avoids a second
   translucency decision to verify. z-sticky (30) is intentionally above
   z-nav (20) in the project's own z-scale for exactly this kind of element. */
.dir-filters {
  position: sticky;
  top: 94px;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding-block: 18px;
}
.dir-filters__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.dir-filters__search { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.dir-filters__search .ico {
  position: absolute; left: 14px;
  width: 18px; height: 18px;
  color: var(--ink-3);
  pointer-events: none;
}
.dir-filters__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  background: var(--paper-3);
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance: none;
}
.dir-filters__input::placeholder { color: var(--ink-3); opacity: .8; }
.dir-filters__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
}

/* select-arrow SVG is a data-URI, so it can't reference var(--ink-2) —
   #4A463E below is that token's literal value, kept in sync by hand */
.dir-filters__select {
  min-height: 48px;
  padding: 10px 36px 10px 14px;
  background-color: var(--paper-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A463E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  font-size: var(--fs-small);
  font-weight: 550;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: border-color .18s var(--ease);
}
.dir-filters__select:hover { border-color: var(--ink-2); }
.dir-filters__select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
}

.dir-filters__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 3px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.dir-filters__clear:hover { color: var(--ink); border-color: var(--line-2); }
.dir-filters__clear .ico { width: 14px; height: 14px; }

.dir-filters__count {
  margin-top: 14px;
  font-size: var(--fs-caps);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dir-results { border-top: none; padding-block: clamp(32px, 5vw, 48px) var(--section-y); }

.dir-card-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .dir-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dir-card-grid { grid-template-columns: repeat(3, 1fr); } }

.dir-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.dir-card:hover {
  border-color: var(--ink-2);
  box-shadow: 0 16px 32px -20px rgba(20, 19, 17, 0.35);
  transform: translateY(-2px);
}
/* the card has no href of its own — .dir-card__link is stretched to cover
   it (::after, inset:0), so focus-within is exactly "the card's one link
   is focused" and the card itself can show the ring around its own edge */
.dir-card:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.dir-card__link:focus-visible { outline: none; }

.dir-card__sample {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.dir-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 27v10M27 32h10' stroke='rgba(20,19,17,0.12)' stroke-width='1'/%3E%3C/svg%3E");
  color: var(--ink-3);
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.dir-card__photo .ico { width: 28px; height: 28px; opacity: .5; }

.dir-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.dir-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dir-card__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.dir-card__rating { flex: none; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); font-feature-settings: "tnum" 1; }

.dir-card__where { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-2); }
.dir-card__where .ico { width: 14px; height: 14px; flex: none; color: var(--ink-3); }

.dir-card__types { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.dir-card__types li {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: .03em;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}

.dir-card__amenities { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.dir-card__amenities li {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink-2) 8%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
.dir-card__price-tag {
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-left: 4px;
}
.dir-card__price { font-size: var(--fs-body); font-weight: 700; color: var(--ink); font-feature-settings: "tnum" 1; }
.dir-card__price .per { font-weight: 500; color: var(--ink-3); font-size: var(--fs-small); }

.dir-card__summary { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; flex: 1; }

/* directory.js wraps the WHOLE card (photo + body) in this <a> directly —
   .dir-card__link used to be a small "View details" text link stretched
   over the card via ::after (see .dir-card__cta below, which is that
   small-link look now); inline-flex + width:fit-content from that older
   role collapsed the new full-card anchor to 0 width whenever its content
   had nothing else to size against (e.g. a photo-only div with no icon
   child) — aspect-ratio then had a 0 width to multiply, so the photo
   silently rendered at 0x0. See [[openclaw-data-collection]] memory. */
.dir-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.dir-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.dir-card:hover .dir-card__cta { color: var(--green); }

.dir-card__save,
.fac-cta__save {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 650;
  cursor: pointer;
}
.dir-card__save {
  margin: 0 16px 16px;
  padding: 10px 14px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-2);
  border-radius: 4px;
}
.dir-card__save:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.dir-card__save:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dir-card__save.is-saved,
.fac-cta__save.is-saved { cursor: default; opacity: .75; }
.fac-cta__save { margin-top: 10px; }

.dir-empty { text-align: center; padding: 64px 20px; max-width: 480px; margin-inline: auto; }
.dir-empty .ico { width: 40px; height: 40px; color: var(--line-2); margin-bottom: 16px; }
.dir-empty h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.dir-empty p { color: var(--ink-2); margin-bottom: 24px; }

.dir-load-more-wrap { display: flex; justify-content: center; margin-top: 40px; }

.dir-noscript {
  padding: 24px;
  text-align: center;
  border: 1.5px solid var(--line);
  background: var(--paper-3);
  color: var(--ink-2);
}
.dir-noscript a { color: var(--green); font-weight: 600; }

/* ===================================================================
   ===== Facility detail (facility.html) =====
   =================================================================== */

.fac-container { padding-block: clamp(120px, 14vw, 160px) var(--section-y); }

.fac-sample-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--yellow) 18%, var(--paper-3));
  border: 1.5px solid color-mix(in srgb, var(--yellow) 50%, transparent);
  color: var(--ink-2);
  font-size: var(--fs-small);
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 28px;
}
.fac-sample-banner .ico { flex: none; width: 18px; height: 18px; color: #9A7A00; }

.fac-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .18s var(--ease);
}
.fac-back:hover { color: var(--ink); }
.fac-back .ico { width: 16px; height: 16px; }

.fac-hero {
  display: grid;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .fac-hero { grid-template-columns: 5fr 7fr; align-items: center; }
}

.fac-hero__photo {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 27v10M27 32h10' stroke='rgba(20,19,17,0.12)' stroke-width='1'/%3E%3C/svg%3E");
  border-radius: 4px;
  color: var(--ink-3);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.fac-hero__photo .ico { width: 40px; height: 40px; opacity: .5; }

.fac-hero__body h1 {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 14px;
}
.fac-hero__where { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-body); margin-top: 14px; }
.fac-hero__where .ico { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.fac-hero__price { font-size: var(--fs-h3); font-weight: 750; color: var(--ink); margin-top: 16px; font-feature-settings: "tnum" 1; }
.fac-hero__price .per { font-weight: 500; font-size: var(--fs-small); color: var(--ink-3); }

.fac-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; list-style: none; }
.fac-chip {
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
}
.fac-chip--accent { color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-2); }

.fac-layout { display: grid; gap: 48px; }
@media (min-width: 900px) {
  .fac-layout { grid-template-columns: 7fr 4fr; gap: var(--gap); align-items: start; }
  .fac-cta { position: sticky; top: 116px; }
}

.fac-main h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin: 32px 0 14px; }
.fac-main h2:first-child { margin-top: 0; }
.fac-desc { color: var(--ink-2); line-height: 1.65; max-width: 62ch; }

.fac-amenities { list-style: none; display: grid; gap: 10px; }
@media (min-width: 500px) { .fac-amenities { grid-template-columns: 1fr 1fr; } }
.fac-amenities li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.fac-amenities .ico { flex: none; width: 16px; height: 16px; color: var(--green); margin-top: 2px; }

.fac-cta { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 4px; padding: 24px; }
.fac-cta__label { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.fac-cta__body { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; }
.fac-cta .btn { width: 100%; }
.fac-cta__phone { text-align: center; font-size: var(--fs-small); color: var(--ink-2); margin-top: 12px; }
.fac-cta__phone a { color: var(--green); font-weight: 600; }
.fac-cta__direct {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caps);
  color: var(--ink-3);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.fac-cta__direct .ico { width: 14px; height: 14px; flex: none; }
.fac-cta__direct a { color: var(--ink-2); font-weight: 600; }

.fac-notfound { text-align: center; padding: 48px 20px; max-width: 480px; margin-inline: auto; }
.fac-notfound h1 { font-size: var(--fs-h2); font-weight: 730; margin: 16px 0 12px; }
.fac-notfound p { color: var(--ink-2); margin-bottom: 24px; }

/* ---------- Loading states ---------- */
.dir-loading, .fac-loading {
  text-align: center; padding: 60px 20px; color: var(--ink-3);
  font-size: var(--fs-body); font-weight: 500;
}
.dir-empty-msg { text-align: center; padding: 60px 20px; color: var(--ink-3); grid-column: 1 / -1; }

/* ---------- Photo gallery (facility detail) ---------- */
.fac-gallery { max-width: 800px; margin: 0 0 32px; }
.gal-viewport { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.gal-track { width: 100%; height: 100%; }
.gal-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform .5s ease; }
.gal-slide.active { opacity: 1; transform: scale(1); }
.gal-slide img { width: 100%; height: 100%; object-fit: cover; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: rgba(0,0,0,.5); color: #fff; border-radius: 50%; font-size: 24px; line-height: 40px; text-align: center; cursor: pointer; transition: background .2s; padding: 0; }
.gal-nav:hover { background: rgba(0,0,0,.7); }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
.gal-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.gal-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--line-3); cursor: pointer; transition: background .2s; padding: 0; }
.gal-dot.active { background: var(--brand-1); }
.gal-dot:hover { background: var(--ink-3); }

/* ---------- Facility detail layout ---------- */
.fac-detail { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }
.fac-breadcrumb { margin-bottom: 24px; }
.fac-breadcrumb a { color: var(--ink-3); font-size: 14px; text-decoration: none; font-weight: 600; }
.fac-breadcrumb a:hover { color: var(--brand-1); }
.fac-header h1 { font-size: var(--fs-h1); font-weight: 740; line-height: 1.12; margin: 0 0 8px; }
.fac-location { color: var(--ink-3); font-size: var(--fs-body); margin: 0 0 8px; }
.fac-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-1); }
.fac-rating .star-i { width: 18px; height: 18px; fill: var(--gold, #e8b400); }
.fac-section { margin: 40px 0; }
.fac-section h2 { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 16px; }
.fac-summary { font-size: 18px; font-weight: 600; color: var(--ink-1); margin-bottom: 12px; }
.fac-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.fac-fact { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; }
.fac-fact-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.fac-fact-value { display: block; font-weight: 600; color: var(--ink-1); }
.fac-highlights { display: flex; flex-wrap: wrap; gap: 8px; }
.fac-highlight { background: var(--brand-1-faint, #fde8e8); color: var(--brand-1); padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.fac-amenities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fac-amenities li { padding: 8px 12px; background: var(--surface-2); border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.fac-amenities li::before { content: "✓ "; color: var(--brand-1); font-weight: 700; }
.fac-cta { margin-top: 48px; }

/* ---------- Directory + facility reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dir-card,
  .dir-card__link .ico,
  .dir-filters__input,
  .dir-filters__select,
  .fac-back,
  .gal-slide { transition: none !important; }
}