/* ---------- Web font (self-hosted) ----------
   Bricolage Grotesque, variable (opsz 12-96, wght 300-800), SIL Open Font License 1.1.
   These are the same subset files Google Fonts serves; hosting them here removes the
   render-blocking two-hop Google Fonts request chain. Each page preloads
   the latin file. Keep the unicode-range splits so browsers only fetch what they need. */
/* vietnamese */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   VA Helps — "Honey & Graphite"  (alternate mock, v2)
   Bright and alive. Honey-gold is the PROTAGONIST, not a 12% garnish:
   a full tonal ramp (wash -> vibrant gold -> deep bronze) across CTAs,
   icon tiles, the price figure, numerals and a sunlit hero glow. The
   field stays bright white; neutral-warm gray is a genuine touch
   (hairlines, captions, secondary text); a single graphite band grounds
   the close + footer. Life comes from gold + depth (glow, crisp shadows),
   not from tinted bands. Single family: Bricolage Grotesque.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* field — bright, near-pure white, only faintly warm so the warm hero
     illustration and the gold belong. NOT cool-blue (that reads corporate). */
  --bg:            oklch(0.993 0.004 88);   /* bright white page */
  --bg-2:          oklch(0.980 0.010 84);   /* whisper-warm white, gentle rhythm (no bands) */
  --surface:       oklch(0.999 0.001 90);   /* pure white well / card */
  --surface-2:     oklch(0.974 0.008 84);   /* input / hover surface */

  /* gray — neutral, faintly warm. A crisp touch, never the field. */
  --line:          oklch(0.902 0.006 80);   /* hairline */
  --line-strong:   oklch(0.828 0.008 80);
  --ink:           oklch(0.300 0.010 75);   /* primary text, warm graphite */
  --ink-2:         oklch(0.478 0.011 76);   /* secondary text (AA) */
  --ink-3:         oklch(0.535 0.012 78);   /* muted labels — AA on white ~5:1 (was 0.598 ≈ 3.8:1, failed AA on .cta-note / .logo-strip-label) */

  /* honey-gold — the protagonist. Full tonal ramp; vibrant for life. */
  --accent-wash:   oklch(0.965 0.042 84);   /* faint gold tint (glow base) */
  --accent-soft:   oklch(0.912 0.078 84);   /* soft gold (halos, soft panels) */
  --accent:        oklch(0.818 0.142 80);   /* VIBRANT honey-gold — fills, tiles, CTAs */
  --accent-strong: oklch(0.756 0.152 73);   /* deeper gold, hover/emphasis */
  --accent-ink:    oklch(0.522 0.120 64);   /* deep bronze, gold text + marks (AA on white) */
  --on-accent:     oklch(0.268 0.024 68);   /* warm graphite text on gold fills */

  /* graphite band — the single dark anchor (close + footer). Warm, not cold. */
  --ink-bg:        oklch(0.282 0.012 78);
  --ink-bg-2:      oklch(0.232 0.011 78);
  --on-dark:       oklch(0.970 0.006 85);
  --on-dark-2:     oklch(0.792 0.010 82);

  /* depth */
  --glow:          oklch(0.83 0.15 82 / 0.45);
  --shadow-card:   0 1px 2px oklch(0.30 0.02 75 / 0.06), 0 16px 34px -18px oklch(0.30 0.03 75 / 0.22);
  --shadow-pop:    0 2px 6px oklch(0.30 0.02 75 / 0.08), 0 28px 60px -28px oklch(0.30 0.03 75 / 0.30);

  /* type scale (fluid, ~1.25 ratio) */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.02rem, 0.99rem + 0.16vw, 1.13rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.65rem + 1.75vw, 3.25rem);
  --step-4:  clamp(2.60rem, 1.95rem + 3.25vw, 4.75rem);

  /* spacing */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.65rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-s:   clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  --space-m:   clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-l:   clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-xl:  clamp(4rem, 3rem + 5vw, 7.5rem);
  --section-y: clamp(3rem, 2.2rem + 3.6vw, 6rem);

  --maxw: 1180px;
  --radius: 16px;
  --radius-lg: 26px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint-ish */

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* very faint paper tooth so white isn't dead-flat; kept light to stay bright */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40  0 0 0 0 0.33  0 0 0 0 0.16  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* generous sunlit gold warmth spilling from the top-right — the life of the page */
body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 88vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(95% 70% at 86% -6%, oklch(0.86 0.11 82 / 0.62), transparent 56%);
}
.site-header, main, .site-footer, .skip-link { position: relative; z-index: 2; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3vw, 3rem);
}

.visually-hidden, .skip-link:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 200; left: 1rem; top: 1rem;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; border-radius: 10px; font-weight: 600;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* a warm filament before the kicker, like a catch of gold light */
.eyebrow::before {
  content: ""; width: 1.8rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
}

.section-title {
  font-size: var(--step-3);
  font-weight: 460;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.section-head { max-width: 38ch; margin-bottom: var(--space-l); }
.section-head-center { max-width: 46ch; margin-inline: auto; text-align: center; }
.section-intro {
  margin-top: var(--space-s);
  color: var(--ink-2);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.55;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-py: 0.85em; --btn-px: 1.55em;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55em;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  transition: transform 0.45s var(--ease-out), background-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s var(--ease-out);
  will-change: transform;
}
.btn-sm { --btn-py: 0.7em; --btn-px: 1.2em; font-size: var(--step--1); }
.btn-block { display: flex; width: 100%; }

/* primary = vibrant honey-gold, the protagonist action. Dark warm text + glow. */
.btn-primary, .btn-accent {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 6px oklch(0.6 0.13 74 / 0.28), 0 14px 30px -14px oklch(0.6 0.14 74 / 0.5);
}
.btn-primary:hover, .btn-accent:hover {
  background: var(--accent-strong); transform: translateY(-2px);
  box-shadow: 0 0 0 0 var(--glow), 0 18px 38px -14px oklch(0.6 0.14 74 / 0.62), 0 0 30px -4px var(--glow);
}

/* ghost = hairline outline */
.btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent-strong); color: var(--accent-ink); transform: translateY(-2px); background: var(--accent-wash); }

.btn:active { transform: translateY(0); }

.btn-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header[data-scrolled] {
  background: oklch(0.995 0.004 88 / 0.82);
  backdrop-filter: saturate(135%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px oklch(0.30 0.03 75 / 0.07);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding-block: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.44em;
  font-size: 1.32rem; letter-spacing: -0.02em; color: var(--ink); font-weight: 600;
}
.wordmark-mark {
  height: 1.45em; width: auto; aspect-ratio: 159 / 132;
  color: var(--accent-strong); fill: currentColor; display: block;
}
.wordmark-helps { font-weight: 500; color: var(--ink-2); }
.wordmark-light { color: var(--on-dark); }
.wordmark-light .wordmark-mark { color: var(--accent); }
.wordmark-light .wordmark-helps { color: var(--on-dark-2); }

.primary-nav { display: flex; gap: clamp(1.1rem, 0.5rem + 1.4vw, 2.1rem); }
.primary-nav a {
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  letter-spacing: 0.01em; position: relative; padding-block: 0.4rem;
  transition: color 0.25s var(--ease-out);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-s); }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; border-radius: 10px; }
.nav-toggle-bar { width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu { display: none; }
.mobile-menu[hidden] { display: none; }
.mobile-menu .mobile-nav { display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--space-s) clamp(1.25rem, 0.6rem + 3vw, 3rem) var(--space-m);
  background: var(--surface); border-bottom: 1px solid var(--line); }
.mobile-nav a { padding: 0.85rem 0; font-size: var(--step-1); font-weight: 500; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-nav a.btn { border: none; margin-top: var(--space-s); justify-content: center; color: var(--on-accent); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2rem, 1.4rem + 1.8vw, 3.25rem); padding-bottom: var(--section-y); position: relative; overflow-x: clip; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.hero-copy { max-width: 42ch; }
/* big, catchy hook headline; the explanatory sentence sits below as the subhead */
.hero-title {
  margin-top: var(--space-m);
  font-size: clamp(2.6rem, 1.85rem + 3.3vw, 4.4rem);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-title .soft { color: var(--ink-2); font-weight: 420; }

/* Hero headline rotator (typewriter, powered by main.js).
   Locked to a single line so the headline stays exactly two lines and the
   content below never shifts as phrases swap; white-space:nowrap is the real
   lock (an over-long phrase clips horizontally instead of wrapping/jumping). */
.hero-rotate {
  display: block;
  min-height: 1lh;
  white-space: nowrap;
}
.hero-title .hero-rotate-word { color: var(--accent-ink); }
.hero-rotate-caret {
  display: inline-block;
  width: 0.05em;
  min-width: 2px;
  height: 0.8em;
  margin-left: 0.06em;
  transform: translateY(0.09em);
  background: var(--accent-ink);
  border-radius: 1px;
  animation: tw-blink 1.05s steps(1) infinite;
}
.hero-rotate-caret.is-typing { animation: none; opacity: 1; }
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-rotate-caret { display: none; }
}
.hero-lead {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
.cta-note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-3);
  max-width: 44ch;
}
.hero-trust, .book-trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: var(--space-m);
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
}
.hero-trust li, .book-trust li { position: relative; padding-left: 1.2rem; }
.hero-trust li::before, .book-trust li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px 1px var(--glow);
}

/* the illustration on a sunlit gold halo: warm focal pop, near-frameless */
.hero-media { position: relative; justify-self: end; width: 100%; max-width: 440px; }
.hero-media-frame {
  position: relative; z-index: 1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-pop);
  aspect-ratio: 460 / 540;
}
.hero-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-media-glow {
  position: absolute; inset: -14% -14% -12% -2%; z-index: 0;
  background:
    radial-gradient(closest-side at 64% 40%, var(--accent), transparent 70%),
    radial-gradient(closest-side at 30% 84%, var(--accent-soft), transparent 72%);
  opacity: 0.5;
  filter: blur(8px);
}

/* ---------- Logo strip (muted marks on white, restore on hover) ---------- */
.logo-strip { padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); border-block: 1px solid var(--line); background: var(--bg-2); }
.logo-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) clamp(2rem, 1.2rem + 3vw, 4rem); }
.logo-strip-label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; flex: 0 0 auto; line-height: 1.4; }
.logo-list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.logo-tile { display: inline-flex; align-items: center; justify-content: center; }
.logo-tile img {
  height: clamp(34px, 26px + 1.8vw, 48px); width: auto;
  filter: grayscale(1) contrast(1.02); opacity: 0.62;
  transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
/* TAL is a compact, mid-tone "circle of people" mark; between the wider wordmarks it nearly
   vanishes, so give it a little more height + opacity. Hover still resolves to full color. */
.logo-tile--mark img { height: clamp(40px, 30px + 2vw, 54px); opacity: 0.82; }
.logo-tile:hover img { filter: grayscale(0) contrast(1); opacity: 1; transform: translateY(-2px); }

/* ---------- Empathy ---------- */
.empathy { padding-block: var(--section-y); }
.empathy-inner { max-width: 42rem; }
.empathy-title {
  font-size: var(--step-3);
  font-weight: 440;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.empathy-title em { font-style: normal; color: var(--accent-ink); }
.empathy-body {
  margin-top: var(--space-m); font-size: var(--step-1); font-weight: 400;
  color: var(--ink-2); max-width: 40ch; line-height: 1.6;
}

/* ---------- Services ---------- */
.services { padding-block: var(--section-y); background: var(--bg-2); }
.setup { margin-top: var(--space-l); }
.setup-tabs { display: none; gap: 0.35rem; margin-bottom: var(--space-xl);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem;
  box-shadow: var(--shadow-card); }
html.js .setup-tabs { display: inline-flex; }
.setup-tab { border-radius: 999px; padding: 0.6em 1.6em; font-weight: 600; font-size: var(--step-0);
  color: var(--ink-2); white-space: nowrap;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.setup-tab:hover { color: var(--ink); }
.setup-tab[aria-selected="true"] { background: var(--ink); color: var(--on-dark); }
.setup-tab[aria-selected="true"]:hover { color: var(--on-dark); }

.setup-panel + .setup-panel { margin-top: var(--space-xl); }
html.js .setup-panel + .setup-panel { margin-top: 0; }

/* illustrated step flow — vibrant gold tiles carry the gold surface area */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.4rem + 3vw, 3.25rem); align-items: start; }
.flow-step { position: relative; }
.flow-art {
  width: 64px; height: 64px; margin-bottom: var(--space-s);
  display: grid; place-items: center;
  color: var(--on-accent);
  border-radius: 16px;
  background: var(--accent);
  box-shadow: 0 2px 5px oklch(0.6 0.13 74 / 0.22), 0 14px 26px -14px oklch(0.6 0.14 74 / 0.45);
}
.flow-art svg { width: 30px; height: 30px; display: block; }
.flow-step-title { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.flow-step-desc { margin-top: var(--space-2xs); color: var(--ink-2); font-weight: 400; line-height: 1.55; max-width: 34ch; }
@media (min-width: 761px) {
  .flow-step + .flow-step::before {
    content: ""; position: absolute; left: -1.6rem; top: 31px; transform: translateX(-50%);
    width: 1.9rem; height: 0; border-top: 2px dotted var(--accent); opacity: 0.9;
  }
}
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: var(--space-l); }
  html.js .setup-tabs { display: flex; width: 100%; }
  html.js .setup-tab { flex: 1; padding-inline: 0.5em; text-align: center; }
}

/* ---------- Services: role content (rendered inside the .setup tab panels) ----------
   Shared per-role classes: title, description, and a dotted points list with light
   bronze dot markers (not a wall of checkmarks). Panel layout lives in .role-panel. */
.role-title { font-size: var(--step-2); font-weight: 560; letter-spacing: -0.015em; color: var(--ink); }
.role-desc {
  margin-top: var(--space-2xs);
  color: var(--ink-2); font-size: var(--step-1); font-weight: 400;
  line-height: 1.55; max-width: 56ch;
}
.role-points {
  margin-top: var(--space-m);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.75rem;
}
.role-points li {
  position: relative; padding-left: 1.4rem;
  color: var(--ink); font-weight: 500; font-size: var(--step-0); line-height: 1.45;
}
.role-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-ink);
}
.role-points .role-more { color: var(--ink-3); font-weight: 400; }
.role-points .role-more::before { background: none; }

/* Tabbed panel: lead (title + description) sits beside the points list. Reuses the
   role content classes; the .setup tab chrome is styled further below. */
.role-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 0.8rem + 3.5vw, 4.5rem);
  align-items: start;
}
.role-panel[hidden] { display: none; }  /* re-assert over display:grid when JS hides the panel */
.role-panel .role-desc { margin-top: var(--space-s); }
.role-panel .role-points { margin-top: 0; grid-template-columns: 1fr; gap: 0.6rem; }
/* With working tabs the gold-active tab already names the panel, so the in-panel
   title is redundant; it still labels each block in the no-JS view, where all
   four panels render stacked. */
html.js .role-panel .role-title { display: none; }
html.js .role-panel .role-desc { margin-top: 0; }
/* tighten the tabs-to-panel gap for role panels (the space-xl default suits the step flow) */
.setup:has(.role-panel) .setup-tabs { margin-bottom: var(--space-l); }
/* active tab in the brand gold (matches CTAs/tiles) rather than the default graphite fill —
   gold is the protagonist on this page, so the selected state reads as emphasis, not a
   foreign black pill. Warm-graphite label keeps AA ~8:1. */
.setup:has(.role-panel) .setup-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.setup:has(.role-panel) .setup-tab[aria-selected="true"]:hover { background: var(--accent-strong); color: var(--on-accent); }
@media (max-width: 760px) {
  .role-points { grid-template-columns: 1fr; gap: 0.55rem; }
  .role-panel { grid-template-columns: 1fr; gap: var(--space-s); }
}

/* ---------- How it works ---------- */
.how { padding-block: var(--section-y); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
}
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-s);
  box-shadow: 0 2px 5px oklch(0.6 0.13 74 / 0.22), 0 0 0 6px var(--accent-wash);
}
.how-step-title { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.how-step p { margin-top: var(--space-2xs); color: var(--ink-2); font-weight: 400; line-height: 1.6; max-width: 36ch; }

/* ---------- Why ---------- */
.why { padding-block: var(--section-y); background: var(--bg-2); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.why-body { margin-top: var(--space-s); color: var(--ink-2); font-size: var(--step-1); font-weight: 400; line-height: 1.6; max-width: 42ch; }
.includes { margin-top: var(--space-l); display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; }
.includes li { position: relative; padding-left: 1.7rem; font-weight: 500; color: var(--ink); font-size: var(--step-0); }
.includes li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 9px;
  border-left: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink);
  transform: rotate(-45deg);
}

.safeguards {
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap;
}
/* The seal carries its own frame; present it as a quiet emblem, not a second floating card. */
.hipaa-tile { flex: 0 0 auto; display: inline-flex; }
.hipaa-tile img { display: block; height: 52px; width: auto; }
.safeguards-note {
  flex: 1 1 15rem; color: var(--ink-2); font-weight: 400;
  font-size: var(--step--1); line-height: 1.6; max-width: 42ch;
}

.value-props { display: flex; flex-direction: column; }
.value { padding-block: var(--space-m); border-top: 1px solid var(--line); }
.value:first-child { border-top: none; padding-top: 0; }
.value-title { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.value p { margin-top: var(--space-2xs); color: var(--ink-2); font-weight: 400; max-width: 48ch; }

/* ---------- Pricing ---------- */
.pricing { padding-block: var(--section-y); }
.price-panel {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  max-width: 880px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-pop);
}
/* the price figure is a bold gold block — the number is the moment */
.price-figure {
  background: var(--accent); color: var(--on-accent);
  padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;
  position: relative; overflow: hidden;
}
.price-figure::before {
  content: ""; position: absolute; inset: -45% 25% auto -25%; height: 85%;
  background: radial-gradient(closest-side, oklch(0.97 0.05 90 / 0.55), transparent 70%);
  pointer-events: none;
}
.price-prefix { font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-accent); opacity: 0.78; position: relative; }
.price-amount { font-size: clamp(3.5rem, 2.5rem + 4vw, 5rem); font-weight: 560; line-height: 1; letter-spacing: -0.03em; position: relative; color: var(--on-accent); }
.price-currency { font-weight: 420; opacity: 0.7; font-size: 0.55em; vertical-align: super; }
.price-period { color: var(--on-accent); opacity: 0.78; font-size: var(--step-0); position: relative; }
.price-detail { padding: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
.price-list { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: var(--space-l); }
.price-list li { position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.price-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 9px;
  border-left: 2.5px solid var(--accent-ink); border-bottom: 2.5px solid var(--accent-ink); transform: rotate(-45deg);
}

/* ---------- Testimonials ---------- */
.testimonials { padding-block: var(--section-y); background: var(--bg-2); }
.testimonial-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-m);
}
.testimonial {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-m); box-shadow: var(--shadow-card);
}
.testimonial blockquote { font-size: var(--step-1); font-weight: 400; line-height: 1.55; color: var(--ink); }
.testimonial-by { margin-top: var(--space-s); font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.placeholder-flag { color: var(--accent-ink); font-weight: 500; font-size: var(--step--1); font-style: italic; }
.testimonial--placeholder { background: transparent; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.testimonial--placeholder blockquote { color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section-y); }
.faq-inner { max-width: 760px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--line-strong); }
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding-block: var(--space-m);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  font-size: var(--step-1); font-weight: 500; color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 0.35rem;
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg); transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-a { padding-bottom: var(--space-m); }
.faq-a p { color: var(--ink-2); font-weight: 400; line-height: 1.65; max-width: 64ch; }

/* ---------- Closing CTA / Booking (vivid gold-drenched finale; footer is the dark ground) ---------- */
.cta {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 52%, oklch(0.685 0.15 66) 100%);
  color: var(--on-accent);
  padding-block: var(--section-y); position: relative; overflow: hidden;
}
/* glow vividly: a bright sunlit bloom pouring onto the gold from the top */
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(76% 60% at 50% -12%, oklch(0.965 0.055 90 / 0.72), transparent 60%);
}
.cta-inner { position: relative; max-width: min(720px, 94vw); text-align: center; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.cta-title { font-size: var(--step-3); font-weight: 460; line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; max-width: min(18ch, 90vw); }
.cta-body { margin-top: var(--space-m); color: var(--on-accent); opacity: 0.85; font-size: var(--step-1); font-weight: 400; line-height: 1.55; max-width: min(46ch, 90vw); }
.booking-card {
  width: 100%; max-width: min(720px, 94vw); margin-top: var(--space-l);
  background: var(--surface); border-radius: var(--radius-lg);
  padding: clamp(0.4rem, 0.2rem + 0.6vw, 0.7rem);
  box-shadow: 0 50px 90px -44px oklch(0 0 0 / 0.5), 0 0 60px -14px var(--glow);
  overflow: hidden; min-width: 0;
}
/* Calendly grows the container to fit each step (data-resize="true": ~602px month view,
   ~770px with time slots, ~900-960px on the details form), so the page scrolls rather
   than the iframe. The 600px floor covers Calendly's tiny pre-render height messages and
   the inline height:602px is the month view, so nothing jumps on load. */
.calendly-inline-widget { border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; min-height: 600px; max-width: 100%; min-width: 0; }
.calendly-inline-widget iframe { width: 1px; min-width: 100%; max-width: 100%; }
.cta-contact { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; justify-content: center; align-items: center; color: var(--on-accent); font-size: var(--step-0); }
.cta-contact a { color: var(--on-accent); font-weight: 600; text-decoration: underline; text-decoration-color: oklch(0.25 0.04 70 / 0.55); text-underline-offset: 3px; transition: text-decoration-color 0.3s var(--ease-out); }
.cta-contact a:hover { text-decoration-color: var(--on-accent); }

/* focus rings: ink on the gold close, gold on the dark footer */
.cta :focus-visible { outline-color: var(--ink); }
.site-footer :focus-visible { outline-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-bg-2); color: var(--on-dark-2); padding-top: var(--section-y); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--space-l) var(--space-m); padding-bottom: var(--space-xl);
}
.footer-tagline { margin-top: var(--space-s); color: var(--on-dark-2); max-width: 26ch; font-size: var(--step-0); }
.footer-heading { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark); margin-bottom: var(--space-s); }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a, .footer-contact a { color: var(--on-dark-2); width: fit-content; transition: color 0.25s var(--ease-out); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-base a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 0.2em; transition: color 0.25s var(--ease-out); }
.footer-base a:hover { color: var(--accent); }
@media (max-width: 760px) {
  .footer-nav a, .footer-contact a, .cta-contact a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}
.footer-news-copy { margin-bottom: var(--space-s); max-width: 32ch; }
.news-form { display: flex; gap: 0.5rem; max-width: 340px; }
.news-input {
  flex: 1; min-width: 0; padding: 0.75em 1em; border-radius: 999px;
  border: 1px solid oklch(0.95 0.01 84 / 0.22); background: oklch(0.95 0.01 84 / 0.08);
  color: var(--on-dark); font: inherit; font-size: var(--step--1);
}
.news-input::placeholder { color: var(--on-dark-2); }
.news-input:focus-visible { outline-color: var(--accent); border-color: transparent; background: oklch(0.95 0.01 84 / 0.14); }
.news-status { margin-top: var(--space-s); font-size: var(--step--1); color: var(--accent); min-height: 1.2em; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  padding-block: var(--space-l); border-top: 1px solid oklch(0.95 0.01 84 / 0.14);
  font-size: var(--step--1); color: var(--on-dark-2);
}

/* ---------- Motion: reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
:where(html:not(.js)) .reveal { opacity: 1 !important; transform: none !important; }
.hero-copy .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* HERO FADE-IN TOGGLE
   The hero copy (eyebrow, headline, lead, buttons) is rendered immediately instead of
   fading in with the stagger above. The fade kept the largest above-the-fold text
   invisible for ~1s on a throttled phone, which cost about 10 Lighthouse mobile
   points (LCP 3.8s -> 2.3s). Sections further down still use the scroll reveal.
   To bring the hero fade-in back, comment out the next rule. */
.hero-copy .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .primary-nav a::after, .logo-tile img { transition: none !important; }
}

/* anchor offset so the sticky header clears section tops */
html { scroll-padding-top: clamp(5rem, 4.2rem + 1.6vw, 6.5rem); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 42ch; }
  .hero-media { justify-self: start; margin-top: var(--space-m); max-width: 380px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-lead { max-width: none; }
}
@media (max-width: 760px) {
  .primary-nav, .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: block; overflow: hidden; }
  .price-panel { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; gap: var(--space-m); }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .news-form { max-width: none; }
}

/* ---- Calm sticky mobile CTA (v3 markup only) ----
   Hidden on desktop. On small screens (where the header button is hidden) it appears
   once the hero scrolls away and tucks back over the booking section. main.js toggles
   .is-visible; without JS it stays visible on mobile. Inert where the markup is absent. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 0.6rem var(--space-s);
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: oklch(0.993 0.004 88 / 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px oklch(0.30 0.03 75 / 0.10);
  }
  html.js .sticky-cta {
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
  }
  html.js .sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out), visibility 0s;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html.js .sticky-cta { transform: none; transition: opacity 0.2s linear; }
}

/* ---------- Book page (/book) ----------
   Two-column, hero-shaped: copy left, calendar right. The calendar card borrows the
   hero image treatment (white card, gold halo, pop shadow) so it is the focal point.
   The copy column is sticky on desktop; the calendar is taller than most viewports. */
.book { padding-top: clamp(2rem, 1.4rem + 1.8vw, 3.25rem); padding-bottom: var(--section-y); position: relative; overflow-x: clip; }
.book-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start;
}
.book-copy { max-width: 40ch; position: sticky; top: clamp(5.5rem, 4.6rem + 1.8vw, 7rem); }
.book-title {
  margin-top: var(--space-m);
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.9rem);
  font-weight: 480; line-height: 1.06; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: balance;
}
.book-lead { margin-top: var(--space-s); font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.book-trust { margin-top: var(--space-m); }
.book-alt {
  margin-top: var(--space-l); font-size: var(--step-0); color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; align-items: center;
}
/* the question sits on its own line; the two ways to reach us share the next one */
.book-alt-label { flex-basis: 100%; }
.book-alt a {
  color: var(--accent-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: oklch(0.52 0.12 64 / 0.4); text-underline-offset: 0.18em;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.book-alt a:hover { text-decoration-color: var(--accent-ink); }
.book-calendar { position: relative; }
.book-calendar-glow {
  position: absolute; inset: -8% -6% -6% -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 72% 28%, var(--accent), transparent 70%),
    radial-gradient(closest-side at 24% 86%, var(--accent-soft), transparent 72%);
  opacity: 0.5; filter: blur(8px);
}
.book-calendar-frame {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}
@media (max-width: 860px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-copy { position: static; max-width: 42ch; }
  .book-calendar { margin-top: var(--space-m); }
}