/* ==========================================================================
   ЧОУ „Света София" - prototype stylesheet

   Aesthetic family: editorial. Per the skill's Section 2.B, editorial is an
   aesthetic and not a design system: no official package owns it, so this is
   native CSS (display serif, asymmetric grid, generous whitespace) rather
   than a vendored system. Nothing here is borrowed from Material, Fluent,
   Carbon, Primer or any other named system.

   Plain CSS on purpose: this is handed to a WordPress + Oxygen install, so
   every rule has to be portable without a build step.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

/* Because the page declares lang="bg-BG", the display serif renders the
   Bulgarian localised Cyrillic forms (д, т, и, п). That is deliberate and
   reads as native Bulgarian typography. To switch to the Russian forms,
   uncomment the line below. */
/* h1, h2, h3, h4 { font-feature-settings: "locl" 0; } */

p { margin: 0; }

/* --- Focus. Never removed, always visible in both modes. ------------------ */
:focus-visible {
  outline: 3px solid var(--brand-gold-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-raised);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.skip:focus { left: var(--sp-2); top: var(--sp-2); }

/* --- Layout primitives ---------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 768px) {
  .shell { padding-inline: var(--sp-4); }
}

.section { padding-block: var(--sp-6); }
@media (min-width: 768px) {
  .section { padding-block: var(--sp-7); }
}

/* The block is not capped at the body measure. A measure set in ch at 17px
   was squeezing 40px+ headings into a 520px box, which broke long headings
   onto four lines. Display type gets its own cap, counted in its own ch. */
.section-head { margin-bottom: var(--sp-4); }
.section-head h2 { font-size: var(--step-4); max-width: 22ch; }
.section-head p {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: var(--measure);
}

.lead { font-size: var(--step-1); color: var(--text-muted); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-2); }
.prose h3 { font-size: var(--step-3); margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.prose ul { margin: var(--sp-2) 0 0; padding-left: 1.25rem; color: var(--text-muted); }
.prose li + li { margin-top: 0.35rem; }
.prose a { color: var(--brand-gold-ink); text-underline-offset: 3px; }

.tint { background: var(--surface-sunken); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;          /* CTA labels never wrap */
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* gold surface + ink label = 9.4:1 */
.btn--primary { background: var(--brand-gold); color: #1b2028; }
.btn--primary:hover { background: var(--brand-gold-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--text); background: var(--surface-raised); }

/* on the dark band */
.btn--onband { background: var(--brand-gold); color: #1b2028; }
.btn--onband:hover { background: var(--brand-gold-hover); }

.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--step--1); }

/* Long CTA labels stay on one line at desktop, which is the rule that matters.
   On a narrow phone they go full width and wrap rather than push the page. */
@media (max-width: 559px) {
  .pagehead__actions .btn,
  .band__actions .btn,
  .row__cta .btn,
  .hero__actions .btn,
  .form .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-gold-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-more:hover { color: var(--text); }

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.header[data-stuck="true"] { box-shadow: var(--shadow-1); }

/* The header is sticky and 72px tall, so an anchor target would land underneath
   it. Clear the header plus a gap. */
:target { scroll-margin-top: calc(72px + var(--sp-2)); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 72px;                  /* cap is 80px */
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 768px) {
  .header__inner { padding-inline: var(--sp-4); }
}

.brand { display: flex; align-items: center; flex: 0 0 auto; border-radius: var(--radius); }
.brand img { height: 36px; width: auto; }
@media (min-width: 900px) { .brand img { height: 44px; } }

@media (prefers-color-scheme: dark) {
  /* The wordmark is dark ink on transparent. The logo is never recoloured,
     so in dark mode it sits on its own light plate instead. */
  .brand { background: #f7f8fa; padding: 0.35rem 0.6rem; }
}

.nav { margin-left: auto; display: none; min-width: 0; }
.nav ul { display: flex; align-items: center; flex-wrap: nowrap; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  white-space: nowrap;           /* the nav never wraps to a second line */
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav a:hover,
.nav li[aria-current] > a { border-bottom-color: var(--brand-gold); }

.nav__group { position: relative; }
.nav__group > a::after {
  content: "";
  display: inline-block;
  width: 0.34em; height: 0.34em;
  margin-left: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}
.nav ul.nav__sub {
  position: absolute;
  display: block;
  top: calc(100% + 0.65rem);
  left: -0.9rem;
  min-width: 250px;
  padding: 0.5rem 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub li { display: block; }
.nav__sub a {
  padding: 0.5rem 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  border-bottom: 0;
}
.nav__sub a:hover { background: var(--surface-sunken); color: var(--brand-gold-ink); }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.header__tel {
  display: none;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text);
}
.header__tel:hover { color: var(--brand-gold-ink); }

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

/* --- Mobile action bar ---------------------------------------------------
   Below 720px the primary action leaves the header and moves into the thumb
   zone. Calling is the school's real booking mechanism, so it gets a
   permanent control instead of being hidden until 900px.                    */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--sp-1);
  padding: 0.6rem 0.75rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface-raised);
  border-top: 1px solid var(--line);
}
.actionbar__cta { flex: 1; justify-content: center; }
.actionbar__call {
  flex: 0 0 auto;
  width: 48px;
  padding-inline: 0;
  justify-content: center;
  font-size: 1.25rem;
}

/* Header responsive rules live after the components they override. */
@media (max-width: 719px) {
  /* logo plus burger only, so the row fits a 360px phone with room to spare */
  .brand img { height: 32px; }
  .burger__label { display: none; }
  .burger { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 1.15rem; }
  .header__actions > .btn { display: none; }
  body { padding-bottom: 68px; }       /* nothing hides behind the action bar */
}

@media (min-width: 720px) {
  .actionbar { display: none; }
}

@media (min-width: 900px) {
  .header__tel { display: inline-flex; align-items: center; gap: 0.4rem; }
}
@media (min-width: 1200px) {
  .header__actions { margin-left: var(--sp-3); }
  .nav { display: block; }
  .burger { display: none; }
}
@media (min-width: 1440px) {
  .nav ul { gap: 1.75rem; }
}

/* Mobile / condensed navigation panel */
.panel {
  position: fixed;
  inset: 72px 0 0;
  z-index: var(--z-nav-panel);
  background: var(--surface);
  overflow-y: auto;
  padding: var(--sp-3) 0 var(--sp-6);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1200px) { .panel { display: none; } }

.panel ul { list-style: none; margin: 0; padding: 0; }
.panel > .shell > ul > li { border-bottom: 1px solid var(--line); }
.panel a { display: block; padding: 0.85rem 0; text-decoration: none; font-weight: 600; }
.panel .panel__sub a { padding: 0.5rem 0 0.5rem var(--sp-2); font-weight: 400; color: var(--text-muted); }

/* Accordion row: the branch label stays a real link, the caret is its own
   control, so the parent page is never trapped behind a toggle. */
.panel__row { display: flex; align-items: center; gap: var(--sp-2); }
.panel__row a { flex: 1; }
.panel__toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;          /* full touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.panel__toggle i { transition: transform var(--dur) var(--ease); }
.panel__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.panel__sub { padding-bottom: var(--sp-2); }
.panel__sub[hidden] { display: none; }

/* Placed after the base .panel rule so it actually wins: the panel stops
   above the action bar instead of covering it. */
@media (max-width: 719px) {
  .panel { bottom: 68px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--band-deep); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 29, 37, 0.92) 0%, rgba(24, 29, 37, 0.78) 42%, rgba(24, 29, 37, 0.24) 78%),
    linear-gradient(180deg, rgba(24, 29, 37, 0.5) 0%, rgba(24, 29, 37, 0.18) 40%);
}
.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 620px);
  padding-block: var(--sp-6) var(--sp-6);
}
@media (min-width: 768px) {
  .hero__inner { padding-block: var(--sp-6) var(--sp-7); }
}
.hero__copy { max-width: 46rem; color: #f7f8fa; }
.hero h1 {
  /* Sized for the 8-word headline, so it lands on 2 lines at desktop.
     Font scale and headline length are planned together, not separately. */
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3rem);
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.hero p {
  margin-top: var(--sp-3);
  max-width: 34rem;
  font-size: var(--step-1);
  color: #eef0f4;
}
.hero__actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero .btn--ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

/* --- Proof row ------------------------------------------------------------ */
.proof {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding-block: var(--sp-5);
}
@media (min-width: 640px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proof { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }

.proof__item { border-top: 2px solid var(--brand-gold); padding-top: var(--sp-2); }
.proof__figure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  line-height: 1;
  font-weight: 600;
}
.proof__label { margin-top: 0.5rem; color: var(--text-muted); font-size: var(--step--1); }

/* --- Results (featured trio + disclosure) --------------------------------- */
.results {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .results { grid-template-columns: repeat(3, 1fr); } }

.result {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.result__year {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.result dl { margin: var(--sp-2) 0 0; }
.result dt { font-size: var(--step--1); color: var(--text-muted); }
.result dd {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
}
.result dd:last-child { margin-bottom: 0; }

.disclosure { margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: var(--sp-2) 0;
  font-weight: 600;
  color: var(--brand-gold-ink);
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
/* Same caret as the FAQ and the navigation panel: one disclosure affordance
   across the whole site instead of three. */
.disclosure summary .ph { transition: transform var(--dur) var(--ease); }
.disclosure[open] summary .ph { transform: rotate(180deg); }
.disclosure__body {
  display: grid;
  gap: 0.35rem var(--sp-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--step--1);
}
@media (min-width: 640px) { .disclosure__body { grid-template-columns: repeat(2, 1fr); } }

/* --- Editorial split ------------------------------------------------------ */
.split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); }
  .split--flip .split__media { order: -1; }
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.split__body h2 { font-size: var(--step-4); }
.split__body p { margin-top: var(--sp-2); color: var(--text-muted); }
.split__body .link-more { margin-top: var(--sp-3); }

/* --- Admission steps ------------------------------------------------------ */
.steps {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 640px) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps--four { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

.step { border-top: 1px solid var(--line-strong); padding-top: var(--sp-2); }
.step h3 { font-size: var(--step-3); }
.step p { margin-top: var(--sp-2); color: var(--text-muted); }
.step__meta {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-gold-ink);
}

/* --- Index rows (differentiators) ----------------------------------------
   Asymmetric: the subject sits in the narrow column, the argument in the wide
   one. Distinct from .steps and .result so no layout family repeats.        */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .row { grid-template-columns: 5fr 7fr; gap: var(--sp-5); }
}
.row__title { font-size: var(--step-3); }
.row h2 { font-size: var(--step-3); }
.row--figure .row__figure {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem);
  line-height: 1;
  margin-top: var(--sp-2);
  color: var(--brand-gold-ink);
}
.row__cta { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.row__title a { text-decoration: none; }
.row__title a:hover { color: var(--brand-gold-ink); }
.row__body p { color: var(--text-muted); }

/* Rows whose title carries a link read as one click target. The arrow is the
   resting affordance (it shows on touch, where :hover never fires); the tint,
   the underline and the nudge are the hover/focus confirmation. The stretched
   pseudo-element makes the whole band hit-testable while the <a> stays the
   only thing in the tab order. */
.row:has(.row__title a) {
  position: relative;
  cursor: pointer;
  padding-inline: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
}
.row:has(.row__title a) .row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Links inside the body (the "Вижте..." CTA) stay above the stretched overlay
   so they keep their own destination and hover state. */
.row:has(.row__title a) .row__body a {
  position: relative;
  z-index: 1;
}
.row__title:has(a)::after {
  content: "\2192"; /* → */
  margin-inline-start: 0.35em;
  color: var(--brand-gold-ink);
  display: inline-block;
}
.row:has(.row__title a):hover,
.row:has(.row__title a):focus-within {
  background: var(--surface-sunken);
}
.row:has(.row__title a):hover .row__title a,
.row:has(.row__title a):focus-within .row__title a {
  color: var(--brand-gold-ink);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .row:has(.row__title a) { transition: background-color 160ms ease; }
  .row__title:has(a)::after { transition: transform 160ms ease; }
  .row:has(.row__title a):hover .row__title::after,
  .row:has(.row__title a):focus-within .row__title::after {
    transform: translateX(0.25em);
  }
}

/* --- Schedule. Hairline definition rows, no card containers. -------------- */
.schedule { margin: 0; border-top: 1px solid var(--line-strong); }
.schedule__row {
  display: grid;
  gap: 0.25rem var(--sp-4);
  grid-template-columns: 1fr;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .schedule__row { grid-template-columns: 1fr 1fr; align-items: baseline; }
}
.schedule dt { font-weight: 600; }
.schedule dd { margin: 0; color: var(--text-muted); }
.schedule dd b { color: var(--text); font-weight: 600; }
.schedule dd a { color: var(--brand-gold-ink); }

/* --- Fees ----------------------------------------------------------------- */
.fees { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .fees { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); } }

.fee-card {
  background: var(--band);
  color: var(--band-text);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.fee-card__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 3vw, 4rem);
  line-height: 1;
}
.fee-card__unit { font-size: var(--step-0); color: var(--band-text-muted); }
.fee-card .btn { margin-top: var(--sp-3); }

.includes { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .includes { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
.includes h3 { font-size: var(--step-2); }
.includes ul { margin: var(--sp-2) 0 0; padding-left: 1.1rem; color: var(--text-muted); }
.includes li + li { margin-top: 0.35rem; }

/* --- Quote ---------------------------------------------------------------- */
.quote { max-width: 46rem; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.28;
}
.quote figcaption { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--step--1); }
.quote figcaption b { color: var(--text); font-weight: 600; }

/* Testimonial split. The heading holds the narrow column and the quotes stack
   in the wide one, so two quotes of very different length no longer leave a
   dead half-row the way a two-card row did. Hairline rules, no card chrome:
   same vocabulary as `.step` and `.schedule` elsewhere on the page.
   The single bare `.quote` on other pages keeps the plain treatment above, so
   every rule below is scoped to `.quotes`. */
.quotes { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.quotes__head h2 { font-size: var(--step-4); max-width: 14ch; }

/* Source order is heading, quotes, link, so on one column the link closes the
   section instead of standing between the heading and the quotes. On two
   columns it moves under the heading and the stack spans both rows. */
@media (min-width: 900px) {
  .quotes {
    grid-template-columns: 0.8fr 1.2fr;
    grid-template-rows: auto 1fr;
    gap: var(--sp-3) var(--sp-6);
    align-items: start;
  }
  .quotes__head { grid-area: 1 / 1; }
  .quotes__foot { grid-area: 2 / 1; }
  .quotes__list { grid-area: 1 / 2 / span 2 / 3; }
}

.quotes__list { display: grid; }
.quotes .quote {
  max-width: none;
  margin: 0;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
/* First rule is the heavy one, so the stack reads as a set with a clear start. */
.quotes .quote:first-child { border-top: 2px solid var(--brand-gold); }
.quotes .quote:last-child { border-bottom: 1px solid var(--line); }

/* text-indent hangs the opening „ into the gutter, so the first line starts on
   the same optical axis as the lines under it. */
.quotes .quote blockquote { font-size: var(--step-2); text-indent: -0.42em; }
.quotes .quote--lead blockquote { font-size: var(--step-3); }

.quotes .quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Monogram instead of a stock portrait: no invented faces for real parents.
   The gold token is identical in both colour schemes, so the dark ink on it
   stays legible either way. */
.quote__mono {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #1b2028;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
}

.section__foot { margin-top: var(--sp-4); }

/* --- Call to action band + footer ----------------------------------------- */
.band { background: var(--band); color: var(--band-text); }
/* Inline variant: the call to action closes a section instead of being one. */
.band--inline {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--radius);
}
.band__lead { font-size: var(--step-1); max-width: 46ch; }
.band--inline .band__inner { padding: 0; }
.band h2 { font-size: var(--step-4); max-width: 22ch; }
.band p { margin-top: var(--sp-2); color: var(--band-text-muted); max-width: 46ch; }
.band__inner { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 860px) {
  .band__inner { grid-template-columns: 1.2fr auto; gap: var(--sp-6); }
}
.band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.band .btn--ghost { color: var(--band-text); border-color: rgba(255, 255, 255, 0.5); }
.band .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; }

.footer { background: var(--band-deep); color: var(--band-text); padding-block: var(--sp-5) var(--sp-3); }
.footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); } }
.footer .footer__label { font-family: var(--font-text); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-text-muted); font-weight: 600; margin: 0; }
.footer p { margin-top: var(--sp-2); color: var(--band-text-muted); max-width: 40ch; }
.footer ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.footer li + li { margin-top: 0.4rem; }
.footer a { color: var(--band-text); text-decoration: none; }
.footer a:hover { color: var(--brand-gold); }
.footer__meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--band-text-muted);
}

/* --- Interior page header ------------------------------------------------- */
.pagehead { background: var(--surface-sunken); border-bottom: 1px solid var(--line); padding-block: var(--sp-5); }
.pagehead h1 { font-size: var(--step-4); }
/* Only the lead paragraph is prose. A blanket `.pagehead p` also caught the
   breadcrumb and the action row, and outranked both of their own rules, so the
   crumb rendered at lead size and two CTAs wrapped inside a 65ch cap with
   1100px of shell available. Exclude them by selector instead. */
.pagehead > .shell > p:not(.crumbs):not(.pagehead__actions) {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  max-width: var(--measure);
  font-size: var(--step-1);
}
.crumbs { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-2); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-gold-ink); }
.pagehead__actions { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- Fee table ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
table.fees-table { width: 100%; border-collapse: collapse; min-width: 520px; }
table.fees-table caption { text-align: left; color: var(--text-muted); font-size: var(--step--1); padding-bottom: var(--sp-2); }
table.fees-table th, table.fees-table td { text-align: left; padding: 0.75rem 0.75rem 0.75rem 0; }
table.fees-table thead th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
table.fees-table tbody tr + tr { border-top: 1px solid var(--line); }
table.fees-table td b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }

/* --- FAQ / accordion ------------------------------------------------------ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }

/* The row is a flex line, not a float. The caret matches the one in the
   mobile navigation panel so every disclosure on the site opens the same way. */
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
  padding: var(--sp-3) 0;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ph {
  flex: 0 0 auto;
  color: var(--brand-gold-ink);
  font-size: 1.1rem;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary .ph { transform: rotate(180deg); }
.faq summary:hover { color: var(--brand-gold-ink); }
.faq p { padding-bottom: var(--sp-3); color: var(--text-muted); max-width: 60ch; }

/* Two independent column stacks so a long FAQ stops running down one narrow
   strip. Each column is its own container: opening a row inside one column
   never shifts the rows in the other. Auto-placed grid items would, because
   the grid row grows to its tallest cell. */
.faq--grid { display: grid; gap: var(--sp-2) var(--sp-6); grid-template-columns: 1fr; }
.faq--grid > * { min-width: 0; }
@media (min-width: 900px) {
  .faq--grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.faq__more {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem var(--sp-3);
  color: var(--text-muted);
}
.faq__more a { color: var(--brand-gold-ink); font-weight: 600; }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); } }
.contact dl { margin: 0; }
.contact dt { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: var(--sp-3); }
.contact dt:first-child { margin-top: 0; }
.contact dd { margin: 0.25rem 0 0; font-size: var(--step-1); }
.contact dd a { text-decoration: none; }
.contact dd a:hover { color: var(--brand-gold-ink); }
.contact__map img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* --- Form ----------------------------------------------------------------
   Label above input, helper below, error below that. No placeholder-as-label.
   Every colour here is checked against the section background.              */
.form { display: grid; gap: var(--sp-3); max-width: 34rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-weight: 600; }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { border-color: var(--brand-gold-ink); }
.field__help { font-size: var(--step--1); color: var(--text-muted); }

/* Error state is driven by the browser, not by JavaScript. :user-invalid
   fires only after the person has actually interacted with the field, so
   nothing turns red before they have typed a character. */
.field__error { display: none; font-size: var(--step--1); color: var(--danger); font-weight: 600; }
.field:has(:user-invalid) .field__error { display: block; }
.field :user-invalid { border-color: var(--danger); }
.field :user-invalid:focus-visible { outline-color: var(--danger); }

.form__status {
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--brand-gold);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
}
.form__status[hidden] { display: none; }

/* --- Waiting-list section: copy on one side, form panel on the other ------ */
.notify { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }
/* Grid children default to min-width:auto and refuse to shrink below their
   content, which pushed the page wide on a 390px phone. */
.notify > * { min-width: 0; }
@media (min-width: 900px) {
  .notify { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); }
}
/* One step down from a full-width section heading: this one lives in a
   half-width column, so the scale is planned against the column, not the page.
   No extra ch cap here, the column is already the measure. */
.notify__copy h2 { font-size: var(--step-3); }
.notify__copy > p { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--step-1); }

.notify__facts { margin: var(--sp-4) 0 0; border-top: 1px solid var(--line); }
.notify__facts > div { padding-block: var(--sp-2); border-bottom: 1px solid var(--line); }
.notify__facts dt { font-weight: 600; }
.notify__facts dd { margin: 0.15rem 0 0; color: var(--text-muted); font-size: var(--step--1); }

.notify__panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.notify__panel .form { max-width: none; }

/* --- Reveal on scroll. MOTION_INTENSITY 4. -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .reveal[data-visible="true"] { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 70ms; }
  .reveal[data-delay="2"] { transition-delay: 140ms; }
  .reveal[data-delay="3"] { transition-delay: 210ms; }
}

/* No-JS safety: never leave content hidden if the observer never runs. */
.no-js .reveal { opacity: 1; transform: none; }