/* ============================================================
   VP Education Group
   Warm paper, one red accent, ruled lines instead of boxes.
   ============================================================ */

:root {
  color-scheme: light;
  --ink: #241619;
  --ink-2: #3A2429;
  --paper: #FBF8F5;
  --slate: #6E585C;
  --pen: #B3282D;
  --pen-dark: #8F1F24;
  --btn-bg: #B3282D;
  --btn-bg-hover: #8F1F24;
  --btn-fg: #FFFFFF;
  --marigold: #F0B93B;
  --rule: #E6D9D2;
  /* Borders of controls (inputs, chips, toggles) must reach 3:1 against the
     page (WCAG 1.4.11), which --rule does not. --rule stays for hairlines. */
  --field-border: #857377;
  --radius: 6px;
  /* Latin faces first, Noto Sans SC as the CJK fallback. Latin text keeps
     its face in both languages; only CJK glyphs fall through to Noto. */
  --cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  --font-display: "Bricolage Grotesque", var(--cjk), sans-serif;
  --font-body: "Public Sans", var(--cjk), sans-serif;
  --font-mono: "IBM Plex Mono", var(--cjk), monospace;
  --font-script: "Caveat", var(--cjk), cursive;
  --max: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- dark theme ----------
   Same warm palette, inverted. Light is the default; dark applies only
   when the viewer picks it with the header toggle (data-theme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F4EDE8;
  --ink-2: #E2D6CF;
  --paper: #1B1417;
  --slate: #A8969B;
  --pen: #E4575D;
  --pen-dark: #F07176;
  --btn-bg: #D4383E;
  --btn-bg-hover: #C2323A;
  --marigold: #F2C15A;
  --rule: #3B2D31;
  --field-border: #85757A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--pen); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Form controls keep their own radius, so only the ring is set here. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */

/* Line-heights are explicit numbers everywhere so a box is the same height
   whichever font ends up drawing the glyphs. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; margin-bottom: 44px; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 0.95rem; font-weight: 700; }

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- buttons and links ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }

.text-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--marigold);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--pen); }

/* ---------- layout that never moves on language switch ----------
   i18n.js appends invisible .i18n-ghost copies of the text in every
   other language to elements marked .i18n-w / .i18n-h.
   .i18n-w reserves the widest of them (single-line labels).
   .i18n-h reserves the tallest (wrapping copy; the visible text must
   sit in one inner <span>). */
.i18n-w { display: inline-block; text-align: center; }
.i18n-w > .i18n-ghost {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
}
.i18n-h { display: grid; }
.i18n-h > span { grid-area: 1 / 1; }
.i18n-h > .i18n-ghost { visibility: hidden; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* a touch wider than the page column: the wordmark, three links, language,
   theme, Log in and the full "Book a free consultation" button need ~1150px */
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wordmark-mark {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--pen);
  transform: rotate(-4deg);
}
.wordmark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.wordmark-text em { font-style: normal; color: var(--pen); }

.site-nav { display: flex; gap: 22px; }
.site-nav a {
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--pen); }

.header-cta { padding: 10px 18px; font-size: 0.92rem; }
/* Log in is a quiet text link beside the one button. The button has a full
   and a short label; the short one takes over where the full one cannot fit.
   The menu carries its own Log in for the smallest phones. */
.header-login {
  padding: 8px 2px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.header-login:hover { color: var(--pen); }
.header-cta-short { display: none; }
.site-nav .nav-login { display: none; }

.lang-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--field-border);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-toggle:hover,
.theme-toggle:hover { border-color: var(--pen); color: var(--pen); }
.lang-flag { font-size: 1.05rem; line-height: 1; }

/* language menu: the button shows the current language and reserves the
   width of the longest name so the header never shifts */
.lang-menu { position: relative; }
.lang-label { display: inline-grid; text-align: left; }
.lang-label > span { grid-area: 1 / 1; visibility: hidden; }
.lang-label > span.current { visibility: visible; }
.lang-chevron { width: 14px; height: 14px; flex: none; }
.lang-toggle[aria-expanded="true"] { border-color: var(--pen); color: var(--pen); }
.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.lang-list[hidden] { display: none; }
.lang-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.lang-list li:hover,
.lang-list li:focus-visible { color: var(--pen); background: var(--rule); }
.lang-list li:focus-visible { outline: 3px solid var(--pen); outline-offset: -3px; }
.lang-list li[aria-selected="true"] { color: var(--pen); }

.theme-toggle { padding: 8px 10px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- 1. hero: portrait, name, record ---------- */

.hero { padding: 48px 0 88px; }

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(240px, 330px) 1.1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

/* <picture> wraps each photo for its AVIF source; it lays out as if absent */
.hero-portrait picture,
.member-photo picture { display: contents; }

.hero-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
}

/* one handwritten line, the only place the pen shows up in the hero */
.hero-note {
  margin-top: 14px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--pen);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 6px;
}

.hero-line {
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 28ch;
}

/* Always stacked, so the block is the same height whatever the labels say. */
/* auto pins the CTA block to the bottom of the column (stretched by .hero-inner's
   align-items: stretch), so the paragraph above it sits a fixed distance below the h1. */
.hero-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* the record: ruled rows, number left, plain sentence right.
   Pinned to the top so its rule lines up with the portrait in both languages. */
.record {
  align-self: start;
  border-top: 2px solid var(--ink);
}

.record-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
}
.record-row + .record-row { border-top: 1px solid var(--rule); }

.record dt {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--pen);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.record-check { font-size: 1.6rem; }

.record dd {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- 2. reviews: two tabs, reviews flow in columns ---------- */

.reviews {
  padding: 96px 0 104px;
  border-top: 1px solid var(--rule);
}

.tabs {
  display: flex;
  gap: 36px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 52px;
}
.tabs [role="tab"] {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--pen);
}
.tab-count {
  /* Two digits of room, so the tab is the same width before and after
     script.js writes the number in. */
  display: inline-block;
  min-width: 2ch;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate);
  margin-left: 8px;
}

.review-panel {
  columns: 2;
  column-gap: 72px;
}

.review {
  break-inside: avoid;
  margin: 0 0 52px;
}

.stars {
  color: var(--marigold);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review blockquote p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink);
}

.review figcaption {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--pen);
  display: grid;
  gap: 2px;
  font-size: 0.9rem;
}
.review figcaption strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}
.review figcaption span { color: var(--slate); }

/* ---------- 3. services ---------- */

.services {
  padding: 96px 0 112px;
  border-top: 1px solid var(--rule);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.svc-col h3,
.svc-ap h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}

.svc-sub {
  margin: 10px 0 16px;
  color: var(--slate);
  font-size: 0.92rem;
}

.services ul { list-style: none; }
.services li { padding: 4px 0; color: var(--ink-2); }

.svc-ap {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--rule);
}

.svc-ap-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 28px;
}
.svc-ap-groups h4 { margin-bottom: 8px; }
.svc-ap-groups li { font-size: 0.95rem; padding: 3px 0; }

.svc-more {
  margin-top: 80px;
  padding-top: 44px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.svc-more p {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 46ch;
}
.svc-more-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-self: end;
}

/* ---------- 4. team ---------- */

.team {
  padding: 96px 0 112px;
  border-top: 1px solid var(--rule);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 56px 40px;
}

.member-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rule);
  display: grid;
  place-items: center;
}
.member-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.member-initials {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 3rem;
  color: var(--pen);
}

.member h3 { margin-top: 18px; }
.member-meta {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--slate);
}
.member-meta + .member-meta { margin-top: 4px; }
.member-bio {
  margin-top: 12px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- 5. refer a family ---------- */

.refer {
  padding: 96px 0 112px;
  border-top: 1px solid var(--rule);
}
.refer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 56px;
  align-items: start;
}
.refer-intro h2 { margin-bottom: 18px; }
.refer-lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 38ch; }

.refer-form { display: flex; flex-direction: column; gap: 28px; }
.refer-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.refer-group legend {
  padding: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}
.refer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.refer-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.refer-field > label,
.refer-label { font-weight: 600; font-size: 0.92rem; line-height: 1.4; color: var(--ink); }
.refer-field input[type="text"],
.refer-field input[type="email"],
.refer-field input[type="tel"],
.refer-field select,
.refer-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.refer-field textarea { resize: vertical; min-height: 88px; }
.refer-field input:focus,
.refer-field textarea:focus { border-color: var(--pen); }
/* a select keeps the browser's focus ring beside the red border */
.refer-field select:focus { border-color: var(--pen); }
.refer-field input[aria-invalid="true"],
.refer-field select[aria-invalid="true"],
.refer-field textarea[aria-invalid="true"] { border-color: var(--pen); }
.refer-field input::placeholder { color: var(--slate); }

.refer-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.refer-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
}
.refer-choice:has(input:checked) { border-color: var(--pen); color: var(--pen); }
/* The whole chip gets the focus ring (not just the small radio) where :has() exists */
@supports selector(:has(*)) {
  .refer-choice:has(input:focus-visible) { outline: 3px solid var(--pen); outline-offset: 2px; }
  .refer-choice input:focus-visible { outline: none; }
}
.refer-choice input,
.refer-consent input { accent-color: var(--pen); width: 18px; height: 18px; margin: 0; flex: none; }

.refer-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.refer-consent input { margin-top: 2px; }

.refer-hint { font-size: 0.85rem; line-height: 1.45; color: var(--slate); }
.refer-error { font-size: 0.85rem; line-height: 1.45; font-weight: 600; color: var(--pen); }
.refer-error:empty { display: none; }

.refer-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.refer-status { font-weight: 600; line-height: 1.5; }
.refer-status:empty { display: none; }
.refer-status.is-error { color: var(--pen); }
.refer-privacy { font-size: 0.85rem; line-height: 1.5; color: var(--slate); }
.refer-privacy a { color: inherit; }

.refer-done {
  padding: 28px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}
.refer-done h3 { margin-bottom: 8px; }
.refer-done p { color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; }

/* Spam trap: off screen, never shown */
.refer-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .refer-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .refer { padding: 72px 0 80px; }
  .refer-pair { grid-template-columns: 1fr; }
}

/* ---------- 5. book a free consultation ----------
   Same two columns and form as "refer a family"; the left column is a ruled
   list like the track record, then the reply promise. */

.book-points { list-style: none; margin: 0 0 22px; border-top: 2px solid var(--ink); max-width: 38ch; }
.book-points li { padding: 12px 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.book-points li + li { border-top: 1px solid var(--rule); }
.book-reply { font-weight: 600; color: var(--ink); }
/* the lessons choices stand in a column, each as wide as the form */
.book .refer-choices { flex-direction: column; gap: 10px; }
.book .refer-choice { width: 100%; }
.book .refer-choice .i18n-w,
.book .refer-privacy .i18n-w { text-align: left; }
.book .refer-field select { min-height: 47px; }
.book-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.book-alt { font-size: 0.95rem; line-height: 1.5; padding-top: 20px; border-top: 1px solid var(--rule); }
.book-alt a { display: inline-grid; color: var(--ink-2); }
.book-alt a:hover { color: var(--pen); }

/* ---------- referral review page (api/referral-review) ---------- */

.review-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.review-card {
  width: 100%;
  max-width: 480px;
  padding: 32px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.review-brand { margin-bottom: 12px; font-family: var(--font-display); font-weight: 700; color: var(--pen); }
.review-card h1 { font-size: 1.8rem; margin-bottom: 12px; }
.review-card p { line-height: 1.6; color: var(--ink-2); margin-bottom: 20px; }
.review-card form { margin-bottom: 20px; }

/* ---------- write a review (review.html) ---------- */

.header-spacer { flex: 1; }
.review-write { padding: 64px 0 96px; }
.review-write-inner { max-width: 640px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 20px; }
.review-write h1 { font-size: clamp(2.1rem, 4vw, 2.8rem); }
.review-write .refer-form { margin-top: 8px; }
.review-write textarea { min-height: 200px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 36px 0 48px;
  font-size: 0.9rem;
  color: var(--slate);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-inner strong { color: var(--ink); font-family: var(--font-display); }
.footer-copyright { margin-top: 6px; font-size: 0.85rem; line-height: 1.5; }
.footer-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 24px; }

/* ---------- legal pages (privacy policy) ----------
   One reading column, ruled like the rest of the site. */

.legal { padding: 56px 0 88px; }
.legal-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.legal-eyebrow { font-size: 0.85rem; line-height: 1.5; color: var(--slate); margin-bottom: 12px; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 20px; }
.legal-lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); }
.legal-toc {
  margin: 36px 0 8px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.legal-toc ol { list-style: none; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; padding: 3px 0; line-height: 1.5; }
.legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--pen); text-decoration: underline; }
.legal h2 { font-size: 1.5rem; margin: 52px 0 14px; scroll-margin-top: 88px; }
.legal h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--pen); }
.legal strong { color: var(--ink); }
.legal-callout {
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--pen);
  color: var(--ink);
}
@media (max-width: 560px) {
  .legal { padding: 40px 0 64px; }
  .legal-toc ol { columns: 1; }
}

/* ---------- sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--rule);
  display: none;
}
.sticky-cta .btn { width: 100%; text-align: center; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(220px, 300px) 1fr; gap: 40px; }
  .record { grid-column: 1 / -1; align-self: start; margin-top: 8px; }
  .svc-ap-groups { grid-template-columns: repeat(2, 1fr); }
}

/* compact header: the desktop header reserves room for the widest of the
   five languages and needs about 1108px, so it collapses at 1110px and below. Log
   in and the Book button stay in the bar; below 820px the wordmark text goes
   and the button takes its short label, below 560px the language name goes,
   and below 481px Log in moves into the menu (see the blocks further down). */
@media (max-width: 1110px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    padding: 18px 24px;
    gap: 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { text-align: left; }
  .nav-toggle { display: flex; justify-content: center; min-width: 44px; min-height: 44px; }
  .header-inner { gap: 12px; }
  .lang-toggle { padding: 10px 14px; min-height: 44px; }
  .theme-toggle { padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; }
}

/* The landing page's header (.site-header-home) carries more than the other
   pages' headers, so it gives up its extras earlier: the wordmark text goes
   and the button takes its short label ... */
@media (max-width: 819px) {
  .site-header-home .wordmark-text { display: none; }
  .header-cta-full { display: none; }
  .header-cta-short { display: inline-block; }
}

/* ... and the language button shows just the flag */
@media (max-width: 559px) {
  .site-header-home .header-inner { gap: 8px; }
  .site-header-home .lang-label { display: none; }
  .site-header-home .lang-toggle { padding: 10px; min-width: 44px; justify-content: center; }
}

@media (max-width: 760px) {
  .hero { padding: 32px 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  /* name, intro and the button come first; a smaller portrait follows */
  .hero-intro { order: -1; padding-top: 0; }
  .hero-portrait { max-width: 220px; }
  .hero-actions { margin-top: 26px; }

  .reviews, .services { padding: 72px 0 80px; }
  .review-panel { columns: 1; }
  .tabs { gap: 28px; margin-bottom: 40px; }

  .svc-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-more { grid-template-columns: 1fr; gap: 24px; margin-top: 64px; }
  .svc-more-actions { justify-self: start; }

  .sticky-cta.visible { display: block; }
}

@media (max-width: 480px) {
  .wordmark-text { display: none; }
  .header-cta { padding: 8px 12px; font-size: 0.88rem; }
  .lang-label { display: none; }
  .lang-toggle { padding: 10px; min-width: 44px; justify-content: center; }
  /* no room for both beside the button: Log in is the last row of the menu */
  .header-login { display: none; }
  .site-nav .nav-login { display: inline-block; }
  .record-row { grid-template-columns: 76px 1fr; }
  .record dt { font-size: 1.5rem; }
  .svc-ap-groups { grid-template-columns: 1fr; gap: 28px; }
}

/* smallest phones: the header carries the mark, language, theme, Book, and
   menu buttons, so tighten the spacing and drop the language chevron */
@media (max-width: 360px) {
  .header-inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .lang-chevron { display: none; }
}

/* ============================================================
   CJK typography (Chinese and Korean)
   The font stacks already fall through to Noto Sans SC for CJK
   glyphs, so nothing here changes a font or a box height. Only
   Latin-specific tricks (tight tracking, ch measures) are dropped.
   The h1 stays Latin in both languages and is left alone.
   ============================================================ */

html[lang^="zh"] h2, html[lang^="ko"] h2,
html[lang^="zh"] h3, html[lang^="ko"] h3,
html[lang^="zh"] h4, html[lang^="ko"] h4 { letter-spacing: 0; }

/* A heading's Latin ghost copies keep the Latin tracking on a Chinese or Korean
   page, so a long heading in a narrow column wraps the same in every language. */
html[lang^="zh"] :is(h2, h3, h4) > .i18n-ghost:not(:lang(zh), :lang(ko)),
html[lang^="ko"] :is(h2, h3, h4) > .i18n-ghost:not(:lang(zh), :lang(ko)) { letter-spacing: -0.02em; }

/* Same 28.16px line box as the Caveat note (1.6rem * 1.1). */
html[lang^="zh"] .hero-note,
html[lang^="ko"] .hero-note { transform: none; font-size: 1.25rem; line-height: 1.76rem; }

/* The note's ghost copies keep the metrics of the language they hold, so the
   note reserves one identical line box whichever language is showing. */
.hero-note > .i18n-ghost { font-size: 1.6rem; line-height: 1.1; }
.hero-note > .i18n-ghost:lang(zh),
.hero-note > .i18n-ghost:lang(ko) { font-size: 1.25rem; line-height: 1.76rem; }

/* ============================================================
   Print
   Content only, black on white: no header, menus, toggles, form,
   or sticky button. Both themes print the same.
   ============================================================ */

@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
    --ink: #000;
    --ink-2: #000;
    --paper: #fff;
    --slate: #000;
    --pen: #000;
    --pen-dark: #000;
    --btn-bg: #fff;
    --btn-bg-hover: #fff;
    --btn-fg: #000;
    --marigold: #000;
    --rule: #999;
    --field-border: #000;
  }

  body { background: #fff; color: #000; font-size: 11pt; }

  .site-header,
  .skip-link,
  .sticky-cta,
  .lang-list,
  form,
  .refer,
  .footer-links a[href="#refer"] { display: none !important; }

  a { color: #000; }
  .btn { border: 1.5px solid #000; }

  .hero, .reviews, .services, .team { padding-top: 24px; padding-bottom: 24px; }
  h2 { margin-bottom: 20px; }
  h2, h3, h4 { break-after: avoid; }
  .review, .member, .svc-col, .svc-ap-groups > div, .record-row { break-inside: avoid; }
}