/* ==========================================================================
   Section composition, in page order.
   ========================================================================== */

/* ── Navigation ─────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--overlay);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--hairline);
}

.nav__inner { display: flex; align-items: center; width: 100%; gap: var(--sp-6); }
.nav__brand { display: inline-flex; }

.nav__links {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  margin-left: auto;
  font-size: var(--fs-sm);
}
.nav__links a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.nav__links a:hover { color: var(--text); }

/* margin-left:auto so the controls sit hard right whether or not the link
   list is present — on a phone that is the whole point of the spacing. */
.nav__side { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }

.nav__ext {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.nav__ext span { display: inline-block; transition: transform var(--dur) var(--ease); }
.nav__ext:hover span { transform: translate(3px, -3px); }

.nav__theme, .nav__burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__theme:hover, .nav__burger:hover { border-color: var(--hairline-strong); }

.nav__theme-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.nav__burger { display: none; }

/* Two bars that rotate into a cross. Both live in one box so the closed and
   open states can never disagree. */
.nav__burger-box { position: relative; width: 18px; height: 12px; }
.nav__burger-bar {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.nav__burger-bar:nth-child(1) { top: 0; }
.nav__burger-bar:nth-child(2) { bottom: 0; }

.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ── Drawer ─────────────────────────────────────────────────────────── */
/* A sibling of the nav, never a child: a backdrop-filtered ancestor becomes
   the containing block for fixed descendants and would clip this to the
   height of the bar. */
.drawer[hidden] { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  padding: calc(var(--nav-h) + var(--sp-6)) var(--gutter-safe) var(--sp-8);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-6);
  overflow-y: auto;
  /* Wipes down from under the bar rather than appearing. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease);
}
.drawer.is-open { clip-path: inset(0 0 0 0); }

.drawer__links { display: grid; align-content: start; }

.drawer__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

/* Each line rides up behind its own edge, staggered. */
.drawer__links a > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease);
}
.drawer.is-open .drawer__links a > span { transform: none; }
.drawer.is-open .drawer__links a:nth-child(1) > span { transition-delay: 60ms; }
.drawer.is-open .drawer__links a:nth-child(2) > span { transition-delay: 110ms; }
.drawer.is-open .drawer__links a:nth-child(3) > span { transition-delay: 160ms; }
.drawer.is-open .drawer__links a:nth-child(4) > span { transition-delay: 210ms; }
.drawer.is-open .drawer__links a:nth-child(5) > span { transition-delay: 260ms; }

.drawer__foot {
  display: flex;
  gap: var(--sp-7);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) 260ms;
}
.drawer.is-open .drawer__foot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .drawer { clip-path: none; }
  .drawer__links a > span { transform: none; }
  .drawer__foot { opacity: 1; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  /* Sized by its content, with a floor so it still commands a laptop screen.
     `min-height:100svh` with `align-content:space-between` used to push the
     blocks into the far corners, so arriving at the site meant looking at a
     headline marooned in emptiness. */
  min-height: min(90svh, 820px);
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 2.5vw, 2.25rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.hero__top { display: flex; justify-content: space-between; gap: var(--sp-6); }
.hero__est { text-align: right; }

/* Type left, image right. The image is what fills the upper right, which
   was otherwise a quarter of the screen holding nothing. */
.hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.hero__lede { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-content: center; }

/* Two lines, both flush left. The pair reads as one statement rather than a
   stepped shape, and the left edge lines up with the paragraph and the
   buttons beneath it. */
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__line { display: block; }

/* The period is the one place gold appears in the hero. */
.stop { color: var(--accent-500); }

.hero__copy { max-width: 42ch; color: var(--text-muted); font-size: var(--fs-md); }

/* The image supports the headline; it does not compete with it. Capped so
   a portrait photo cannot take half the screen, and inset from the top so
   the type stays the first thing read. */
.hero__media { display: grid; justify-items: end; align-content: center; }
.hero__media .frame { width: min(100%, 380px); max-height: min(46svh, 420px); }

/* ── The two destinations ───────────────────────────────────────────── */
/* Typographic zones, not cards. Each is a full-width row that opens on
   hover; the media sits behind the type rather than beside it. */
.branches { display: grid; }

.branch {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  transition: padding var(--dur) var(--ease);
}
.branch:last-child { border-bottom: 1px solid var(--hairline); }

.branch__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.branch__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}
.branch__go { display: inline-block; transition: transform var(--dur) var(--ease); }

.branch:hover, .branch:focus-visible { padding-inline: var(--sp-4); }
.branch:hover .branch__meta, .branch:focus-visible .branch__meta { color: var(--text-muted); }
.branch:hover .branch__go { transform: translate(4px, -4px); }

/* The reveal sits behind the row, clipped, and only on a real pointer. */
.branch__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.branch__media img { width: 100%; height: 100%; object-fit: cover; }
.branch__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 25%, transparent 90%);
}
@media (hover: hover) and (pointer: fine) {
  .branch:hover .branch__media { opacity: 0.5; }
}

/* ── Intro ──────────────────────────────────────────────────────────── */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.intro__statement { font-size: var(--fs-3xl); max-width: 16ch; }
.intro__body { color: var(--text-muted); font-size: var(--fs-md); padding-top: var(--sp-3); }

/* ── The two worlds ─────────────────────────────────────────────────── */
/* Each division gets a full-width band with its number set large in the
   margin, so the two read as chapters rather than as a pair of columns. */
.world {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hairline);
}
.world:last-of-type { border-bottom: 1px solid var(--hairline); }

.world__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* The second world mirrors the first, so the page alternates rather than
   repeating one layout twice. */
.world--edu .world__media { order: -1; }

.world__eyebrow { margin-bottom: var(--sp-4); }

.world__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-5);
  max-width: 14ch;
}

.world__copy {
  color: var(--text-muted);
  max-width: 44ch;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-md);
}

/* An indexed list with its own rules, rather than a row of loose tags. The
   counter numbers each offering, which is what turns four words into a
   deliberate set. */
.world__list {
  counter-reset: offering;
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
.world__list li {
  counter-increment: offering;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.world__list li::before {
  content: "0" counter(offering);
  color: var(--text-dim);
}
.world__list li:hover { color: var(--text); padding-inline: var(--sp-3); }

.world__action { justify-self: start; }

.world__media { position: relative; }

/* ── Services ───────────────────────────────────────────────────────── */
.services__list { border-top: 1px solid var(--hairline); }

.service {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur) var(--ease), padding-inline var(--dur) var(--ease);
}
.service:hover { background: var(--bg-raised); padding-inline: var(--sp-5); }

.service__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.service__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.service__desc { color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Why ────────────────────────────────────────────────────────────── */
.why__list { border-top: 1px solid var(--hairline); }

.why__item { border-bottom: 1px solid var(--hairline); }

.why__row {
  width: 100%;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.why__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); }
.why__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.why__sign { position: relative; width: 14px; height: 14px; flex: none; }
.why__sign::before, .why__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.why__sign::before { inset: 6px 0 auto 0; height: 1px; }
.why__sign::after { inset: 0 6px 0 auto; width: 1px; }
.why__row[aria-expanded="true"] .why__sign::after { transform: scaleY(0); opacity: 0; }

.why__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.why__panel > div { overflow: hidden; }
.why__item.is-open .why__panel { grid-template-rows: 1fr; }
.why__body {
  color: var(--text-muted);
  max-width: 56ch;
  padding-left: calc(4rem + var(--sp-5));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Philosophy ─────────────────────────────────────────────────────── */
.philosophy { padding-block: clamp(4rem, 8vw, 8rem); }
.philosophy__stack { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); }

.philosophy__word { transition: color var(--dur-slow) var(--ease); }
.philosophy__gloss { transition: opacity var(--dur-slow) var(--ease); }

.philosophy__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  transition: opacity var(--dur-slow) var(--ease);
}

/* The dimmed state is gated on `.reveals` — the flag meaning JS is alive and
   watching — so without it every phrase is simply legible. 0.4 keeps the
   inactive rows above the 3:1 large-text threshold rather than fading real
   headings into the background. */
.reveals .philosophy__word { color: var(--text-dim); }
.reveals .philosophy__row.is-active .philosophy__word { color: var(--text); }
.reveals .philosophy__gloss { opacity: 0.45; }
.reveals .philosophy__row.is-active .philosophy__gloss { opacity: 1; }

.philosophy__word {
  font-size: var(--fs-mega);
  line-height: 0.82;
  letter-spacing: -0.05em;
}
.philosophy__row--think { justify-self: center; }
.philosophy__row--learn { justify-self: start; }
.philosophy__row--solve { justify-self: end; text-align: right; }
.philosophy__row--solve { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
.philosophy__row--solve .philosophy__word { order: 2; }

.philosophy__gloss { color: var(--text-muted); padding-bottom: 0.6em; max-width: 22ch; }

/* The row dims to 0.4 until it is the active phrase, which took the gold
   stop down with it and made the accent read as absent. The ball is drawn
   rather than typed here, so it holds its size and full strength whatever
   the row is doing — the three of them are what carries the section. */
.philosophy__word .stop {
  /* The glyph itself steps aside; the circle below replaces it. */
  color: transparent;
  position: relative;
  display: inline-block;
  width: 0.34em;
}
.philosophy__word .stop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.06em;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--accent-500);
}

/* ── Audience ───────────────────────────────────────────────────────── */
.audience__list { border-top: 1px solid var(--hairline); }
.audience__item {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--hairline);
  transition: padding-inline var(--dur) var(--ease), background var(--dur) var(--ease);
}
.audience__item:hover, .audience__item:focus-within {
  background: var(--bg-raised);
  padding-inline: var(--sp-5);
}
.audience__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.audience__desc { color: var(--text-dim); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.audience__item:hover .audience__desc { color: var(--text-muted); }

/* ── Choose your path ───────────────────────────────────────────────── */
.paths { padding-block: 0; }
.paths__head { padding-block: var(--section-y) clamp(1.5rem, 2.5vw, 2.25rem); }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; }

.path {
  position: relative;
  min-height: clamp(24rem, 46vh, 34rem);
  display: grid;
  align-content: end;
  gap: var(--sp-5);
  padding: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.path + .path { border-left: 1px solid var(--hairline); }

.path__bg { position: absolute; inset: 0; z-index: -2; }
.path__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Two layers: a wash in the brand navy that tints the photograph, and a
   vertical fade that hands the type a solid ground to sit on. On the light
   theme a single dark scrim turned the panel into a grey smear, so the wash
   carries the hue and the fade carries the legibility. */
.path::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 25%, var(--path-fade) 78%),
    linear-gradient(180deg, var(--path-wash), var(--path-wash));
  transition: opacity var(--dur-slow) var(--ease);
}
.path:hover::before { opacity: 0.9; }
.path:hover .path__bg img { transform: scale(1.03); }
.path__bg img { transition: transform var(--dur-slow) var(--ease); }

.path__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.path__copy { color: var(--text-muted); max-width: 34ch; }

/* ── Contact ────────────────────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.contact__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }
.contact__aside { color: var(--text-muted); display: grid; gap: var(--sp-5); }
.contact__form { display: grid; gap: var(--sp-6); }
.contact__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); padding-top: var(--sp-8); }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
}
.footer__tag { margin-top: var(--sp-4); color: var(--text-dim); font-family: var(--font-display); }
.footer__col { display: grid; align-content: start; gap: var(--sp-3); }
.footer__col .eyebrow { margin-bottom: var(--sp-2); }
.footer__col a { color: var(--text-muted); font-size: var(--fs-sm); width: fit-content; }
.footer__col a:hover { color: var(--text); }
.footer__bar {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.footer__bar a { margin-left: var(--sp-5); }

/* ── Edu holding page ───────────────────────────────────────────────── */
.holding { min-height: 70vh; display: grid; align-content: center; gap: var(--sp-5);
  justify-items: start; max-width: 60ch; }
.holding__title { font-size: var(--fs-3xl); }
.holding__body { color: var(--text-muted); }
.holding__actions { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin-top: var(--sp-4); }

.guides, .guide { padding-top: calc(var(--nav-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
.guides__hero, .guide__hero { max-width: 74ch; padding-block: var(--sp-7) var(--sp-8); }
.guides__hero h1, .guide__hero h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 1.04; letter-spacing: var(--track-tight); margin-block: var(--sp-5); }
.guides__hero > p:last-child, .guide__intro { font-size: var(--fs-md); line-height: 1.7; color: var(--text-muted); max-width: 66ch; }
.guide__notice { border-left: 2px solid var(--accent-500); padding: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); color: var(--text-muted); background: var(--bg-raised); }
.guides__group { margin-top: var(--sp-9); }
.guides__group-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); border-bottom: 1px solid var(--hairline-strong); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); }
.guides__group-head h2 { font-size: var(--fs-2xl); }
.guides__grid, .guide__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.guides__card { display: flex; flex-direction: column; min-height: 18rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg-raised); border: 1px solid var(--hairline); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.guides__card:hover, .guides__card:focus-visible { border-color: var(--hairline-strong); transform: translateY(-3px); }
.guides__card-kicker, .guide__number, .guide__contents-title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--accent-ink); }
.guides__card h3 { font-size: var(--fs-xl); line-height: 1.2; margin-block: var(--sp-6) var(--sp-3); }
.guides__card p { color: var(--text-muted); line-height: 1.6; }
.guides__card-action { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 1px solid var(--hairline); padding-top: var(--sp-4); margin-top: auto; font-size: var(--fs-sm); color: var(--text); }
.guide__layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); border-top: 1px solid var(--hairline-strong); }
.guide__contents { align-self: start; position: sticky; top: calc(var(--nav-h) + var(--sp-5)); padding-top: var(--sp-7); }
.guide__contents ol { list-style: none; padding: 0; margin-top: var(--sp-5); border-left: 1px solid var(--hairline-strong); }
.guide__contents li a { display: block; padding: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.guide__contents li a:hover { color: var(--text); border-left: 2px solid var(--accent-500); margin-left: -1px; }
.guide__article { min-width: 0; max-width: 72ch; }
.guide__section { padding-top: var(--sp-8); scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.guide__section h2 { font-size: var(--fs-xl); line-height: 1.2; margin-block: var(--sp-4); }
.guide__section p { margin-block: var(--sp-4); color: var(--text-muted); line-height: 1.8; }
.guide__answer { border-top: 1px solid var(--hairline); padding-block: var(--sp-5); }
.guide__answer h3 { font-size: var(--fs-md); line-height: 1.35; }
.guide__answer p { margin-bottom: 0; }
.guide__sources { border-top: 1px solid var(--hairline); margin-top: var(--sp-8); }
.guide__contact { background: var(--bg-panel); padding: clamp(1.5rem, 4vw, 2.5rem); margin-top: var(--sp-9); }
.guide__contact h2 { font-size: var(--fs-2xl); margin-block: var(--sp-4); }
.guide__contact > p { color: var(--text-muted); margin-bottom: var(--sp-5); }
.guide__contact-details { border-top: 1px solid var(--hairline-strong); margin-top: var(--sp-7); padding-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.guide__contact-details p { margin-block: var(--sp-2); }
.guide__related { border-top: 1px solid var(--hairline-strong); margin-top: var(--sp-9); padding-top: var(--sp-7); }
.guide__related-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.guide__related-head h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.guide__related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) {
  .guide__layout { display: block; }
  .guide__contents { position: static; border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-5); }
  .guide__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .guides__grid, .guide__related-grid { grid-template-columns: 1fr; }
  .guides__card { min-height: 15rem; }
  .guides__hero, .guide__hero { padding-block: var(--sp-5) var(--sp-7); }
}
.breadcrumbs { margin-bottom: var(--sp-6); font-size: var(--fs-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-3); color: var(--text-muted); }