/* Gangnam Podo Woman Clinic -- static site styles, v2.
   Rectangular photos only: no border-radius > 2px, no shadows, no gradients
   except the one hero overlay, no icons/emoji/checkmarks, no pill chips,
   no scroll/entrance animation, no sliders. */

:root {
  --ink: #1E2A52;
  --ink-soft: #3B4666;
  --indigo: #302952;
  --wine: #52294B;
  --wine-dark: #3E1F39;
  --wine-light: #F1E1EC;
  --sage: #8FA3A6;
  --sage-mid: #CEDBDD;
  --sage-light: #EEF3F3;
  --paper: #FFFFFF;
  --hair: #D9E0E1;
  --muted: #6B7B7E;
  --on-dark: #F2F0F6;
  --on-dark-muted: #B9B4C9;

  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label: "Oswald", var(--font-body);

  --container: 1080px;
  --measure: 68ch;
  --gutter: 20px;
  --header-h: 72px;
  --header-h-mobile: 60px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(30px, 3.6vw, 44px); }
h2 { font-size: 28px; margin-top: 0; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; margin: 1.3em 0 0.4em; }
small, .small { font-size: 14px; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
article > p, article .lede, section p, section li { max-width: var(--measure); }
.lede { font-size: 19px; }

.eyebrow {
  font-family: var(--font-label);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.6em;
}

.hr-top { border-top: 1px solid var(--hair); padding-top: 2.2em; margin-top: 2.2em; }
.hr-bottom { border-bottom: 1px solid var(--hair); padding-bottom: 2.2em; }

/* -------------------------------------------------- skip link / focus */

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }

.skip-link:focus { left: var(--gutter); top: var(--gutter); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--wine); outline-offset: 2px;
}
.mobile-bar :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }

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

.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hair); height: var(--header-h-mobile); }
@media (min-width: 1024px) { .site-header { height: var(--header-h); } }

.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.2em; }
/* flex-shrink:0 -- otherwise, once the nav's nowrap text hits its own
   min-content floor and can't shrink any further, the logo (nothing else
   in the row resists) absorbs the entire deficit and gets crushed instead. */
.site-logo { display: block; text-decoration: none; flex-shrink: 0; }
.site-logo img { height: 28px; width: auto; }
.site-logo__text { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); }
@media (min-width: 1024px) { .site-logo img { height: 34px; } }

/* .site-header__inner has exactly two flex children -- the logo and this
   group -- so justify-content:space-between always pins the logo left and
   everything else (nav / button / menu) together on the right, at every
   width, with no per-breakpoint margin-left:auto bookkeeping. */
.site-header__right { display: flex; align-items: center; gap: 1.2em; }

.site-nav { display: none; }
/* Element+class beats the plain .btn rule (both are single-class-weight
   selectors otherwise, and .btn is declared later in this file, so a bare
   .site-header__cta{display:none} was losing the cascade to .btn's
   display:inline-flex -- this is why the button never actually hid). */
a.site-header__cta { display: none; }
@media (min-width: 768px) {
  /* 768px up to the nav breakpoint below: no room for the full six-item
     nav, but the button + Menu fit. */
  a.site-header__cta { display: inline-flex; white-space: nowrap; }
}
.nav-mobile > summary { list-style: none; cursor: pointer; font-weight: 600; padding: 10px 14px; border: 1px solid var(--ink); }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile[open] > summary { background: var(--ink); color: var(--paper); }
.nav-mobile__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--hair); padding: 0 var(--gutter) 16px; }
.nav-mobile__panel ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile__panel li { border-top: 1px solid var(--hair); }
.nav-mobile__panel a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; }
.nav-mobile__cta { display: block; text-align: center; margin-top: 12px; }

/* Five links (Doctors is desktop-only-excluded; see build_nav_desktop()) +
   the button, computed against the 1080px container with the full-width
   (flex-shrink:0) logo -- see the fit computation in the project report
   for the arithmetic. 15px + a tighter 20px gap instead of the previous
   17px/1.6em, which is what left only ~4px of margin for five items and
   none at all for six. */
@media (min-width: 1140px) {
  .nav-mobile { display: none; }
  .site-nav { display: block; }
  .site-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; font-size: 15px; }
  .site-nav a { color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap; }
  .site-nav a:hover { border-bottom-color: var(--hair); }
  .site-nav a[aria-current] { border-bottom-color: var(--wine); font-weight: 600; }
}

/* -------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-decoration: none; text-align: center; border-radius: 0;
  border: 1px solid var(--ink); cursor: pointer; background: var(--paper); color: var(--ink);
}
.btn--primary { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.btn--primary:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--sage-light); }

/* -------------------------------------------------- images / media */

.media { position: relative; overflow: hidden; background: var(--sage-light); width: 100%; }
.media picture, .media img { display: block; width: 100%; height: 100%; max-width: none; }
.media img { object-fit: cover; object-position: center; }
.media.ratio-16x9 { aspect-ratio: 16/9; }
.media.ratio-3x2 { aspect-ratio: 3/2; }
.media.ratio-4x3 { aspect-ratio: 4/3; }
.media.ratio-4x5 { aspect-ratio: 4/5; }
.media figcaption { position: static; font-size: 13px; color: var(--muted); padding: 0.4em 0.2em 0; background: none; }
.media-placeholder { display: flex; align-items: center; justify-content: center; background: var(--sage-light); border: 1px dashed var(--hair); color: var(--muted); aspect-ratio: 3/2; }
.media-placeholder.ratio-16x9 { aspect-ratio: 16/9; }
.media-placeholder.ratio-4x3 { aspect-ratio: 4/3; }
.media-placeholder.ratio-4x5 { aspect-ratio: 4/5; }
.media-placeholder p { margin: 0; font-size: 14px; }

/* -------------------------------------------------- hero (split) */

/* Mobile-first base (<1024px, both the <768 and 768-1023 sub-tiers): a
   plain flex column, image visually first via order (DOM keeps text/H1
   first, for SEO and reading order), text with normal page gutters. */
.hero-split { display: flex; flex-direction: column; }
.hero-split__text { padding-inline: var(--gutter); padding-block: 2.2em; }
.hero-split__eyebrow {
  font-family: var(--font-label); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--wine); margin: 0 0 0.8em;
}
.hero-split h1 { font-size: clamp(34px, 5vw + 16px, 40px); line-height: 1.06; }
.hero-split__lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 38ch; margin: 20px 0 0; }
.hero-split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4em; margin-top: 32px; }
.hero-split__secondary {
  color: var(--ink); font-size: 16px; text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
}
.hero-split__secondary:hover { color: var(--wine); border-bottom-color: var(--wine); }

.hero-split__media { order: -1; aspect-ratio: 4/3; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-split__media { aspect-ratio: 16/9; }
}

@media (min-width: 1024px) {
  /* Full-width grid (not a .wrap): the text column's own padding aligns it
     with the 1080px container/header logo, while the media column is left
     unconstrained so it bleeds to the true viewport edge -- a .wrap here
     would cap and center the whole row instead. */
  .hero-split { display: grid; grid-template-columns: 46fr 54fr; min-height: 540px; }
  .hero-split__text {
    /* A .wrap's logo/text sits at margin-centering-offset PLUS its own
       padding-inline -- e.g. 180px + 20px = 200px at 1440. This column
       isn't a .wrap (it can't be, the media column must stay unconstrained
       to bleed), so it has to replicate both terms, not just the
       margin-offset half, or it lands one full gutter short. */
    padding-inline-start: max(var(--gutter), calc((100vw - 1080px) / 2 + var(--gutter)));
    padding-inline-end: 40px;
    padding-block: 0;
    display: flex; align-items: center;
  }
  .hero-split__inner { max-width: 520px; }
  .hero-split h1 { font-size: clamp(42px, 4.4vw, 62px); max-width: 11ch; }
  .hero-split__media { order: 0; aspect-ratio: auto; height: 100%; }
}
@media (min-width: 1200px) { .hero-split { min-height: 600px; } }

/* -------------------------------------------------- hero facts band */

.hero-facts {
  /* padding-block/margin-block, never the shorthand -- .wrap's own
     padding-inline and margin-inline:auto (same specificity, declared
     earlier) were being wiped out by blanket "padding: 0"/"margin: 0"
     here, which is what pinned the band (and its hairlines) to the true
     viewport edge and left it un-centred instead of matching the
     container. */
  list-style: none; margin-block: 0; padding-block: 0;
  display: grid; grid-template-columns: 1fr;
  /* border-top AND border-bottom -- the band draws both of its own
     hairlines and closes as a strip; the home section right after it
     drops its own .hr-top line instead (see ".hero-facts + .hr-top"
     below), so they don't double up. */
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.hero-facts li { padding: 20px 0; }
.hero-facts li + li { border-top: 1px solid var(--hair); }
.hero-facts a {
  font-family: var(--font-label); font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--wine); text-decoration: none;
}
.hero-facts a:hover { text-decoration: underline; }
.hero-facts p { font-size: 15px; color: var(--muted); margin: 6px 0 0; }

@media (min-width: 1024px) {
  .hero-facts--1 { grid-template-columns: 1fr; }
  .hero-facts--2 { grid-template-columns: repeat(2, 1fr); }
  .hero-facts--3 { grid-template-columns: repeat(3, 1fr); }
  .hero-facts li { padding: 26px 28px 26px 0; }
  .hero-facts li + li { border-top: none; }
  .hero-facts li:nth-child(2), .hero-facts li:nth-child(3) { border-left: 1px solid var(--hair); padding-left: 28px; }
}

/* The band already closes with its own hairline; the section after it
   keeps .hr-top's spacing but not a second line. */
.hero-facts + .hr-top { border-top: none; }

/* -------------------------------------------------- families */

/* 1 column below 768px, 2x2 from 768px (an even count never leaves an
   orphan single item on its own row), 4-across once there's room. */
/* Column count tracks how many cards are actually visible (unbuilt-target
   cards are omitted upstream, never rendered inert) so a mode with fewer
   built families never leaves an orphan cell: 2 -> two columns, 3 -> three,
   4 -> four across once there's room, 2x2 in between. Anything else (0, 1,
   5+) just stays single-column at every width -- no matching modifier
   class, so no override applies. */
.families__grid { display: grid; grid-template-columns: 1fr; gap: 2em; margin-top: 1.4em; }
@media (min-width: 768px) {
  .families__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .families__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .families__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .families__grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.families__item h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; margin-top: 0.7em; }

/* -------------------------------------------------- strengths (alternating rows) */

.strength-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4em; align-items: center; margin-top: 72px; }
.strength-row:first-of-type { margin-top: 1.4em; }
.strength-row--reverse .strength-row__media { order: 2; }
.strength-row__num { font-family: var(--font-label); font-weight: 300; font-size: 88px; line-height: 0.9; color: var(--sage-mid); margin: 0; }
.strength-row__text h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; margin-top: 0.2em; }
.strength-row__claims { font-size: 15px; color: var(--muted); }
@media (max-width: 767px) {
  .strength-row, .strength-row--reverse { grid-template-columns: 1fr; gap: 1.2em; margin-top: 48px; }
  .strength-row--reverse .strength-row__media { order: 0; }
}

/* -------------------------------------------------- journey */

.journey__steps { list-style: none; margin: 1.4em 0; padding: 0; display: flex; border-top: 2px solid var(--hair); }
.journey__steps li { flex: 1; padding: 14px 8px 0; border-left: 2px solid var(--hair); margin-left: -2px; position: relative; }
.journey__steps li::before { content: ""; position: absolute; top: -2px; left: -1px; width: 4px; height: 8px; background: var(--wine); }
.journey__ord { display: block; font-family: var(--font-label); font-weight: 500; font-size: 14px; color: var(--wine); }
.journey__label { display: block; font-size: 15px; }
.journey__note { font-size: 14px; color: var(--muted); margin: 0.3em 0; }
@media (max-width: 767px) {
  .journey__steps { flex-direction: column; border-top: none; }
  .journey__steps li { border-top: none; border-left: 2px solid var(--hair); margin-left: 0; padding: 0 0 14px 16px; }
  .journey__steps li::before { top: 0; left: -1px; width: 8px; height: 4px; }
}

/* -------------------------------------------------- home doctors */

.home-doctors__primary { display: grid; grid-template-columns: 320px 1fr; gap: 2em; align-items: start; margin-top: 1.4em; }
.home-doctors__portrait { max-width: 320px; }
.home-doctors__others { list-style: none; margin: 1.4em 0; padding: 1.2em 0 0; border-top: 1px solid var(--hair); }
@media (max-width: 767px) { .home-doctors__primary { grid-template-columns: 1fr; } .home-doctors__portrait { max-width: 240px; } }

/* -------------------------------------------------- consult section */

.consult { background: var(--sage-light); padding-block: 3em; }
.consult__grid { display: grid; grid-template-columns: 1fr; gap: 2.4em; }
.consult__address, .consult__hours { font-size: 15px; }
@media (min-width: 1024px) { .consult__grid { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------- inner-page header + layout */

.page-header { padding-block: 40px 1.6em; }
.page-header h1 { max-width: 24ch; }
.page-header .lede { max-width: var(--measure); }
@media (max-width: 767px) { .page-header { padding-block: 28px 1.4em; } }
.breadcrumb { font-family: var(--font-label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.8em; }
.breadcrumb a { color: var(--muted); }
.breadcrumb__sep { margin: 0 0.5em; }
.page-header__hero { margin-top: 1.6em; }
/* Same specificity as .media.ratio-16x9 (two classes each), declared later
   in the file so it wins: 16:9 below 1024px, wider 21:9 from 1024px up. */
@media (min-width: 1024px) { .media.page-header__hero { aspect-ratio: 21/9; } }
.trust-strip { color: var(--muted); font-size: 15px; }

.page-layout { display: grid; grid-template-columns: 1fr; gap: 2.4em; padding-block: 0.4em 1em; }
.page-aside { display: none; }
@media (min-width: 1100px) {
  .page-layout { grid-template-columns: minmax(0, 720px) 300px; align-items: start; }
  .page-aside { display: block; position: sticky; top: 96px; }
}
.plan-box { border: 1px solid var(--hair); padding: 1.6em; }
.plan-box__heading { font-weight: 600; margin-top: 0; }
.plan-box ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.plan-box li { padding: 0.4em 0; border-top: 1px solid var(--hair); font-size: 15px; }
.plan-box li:first-child { border-top: none; }
.plan-box .btn { width: 100%; margin-bottom: 0.8em; }
.plan-box__tel { margin: 0; text-align: center; }

.page-main--article { padding-block: 0.4em 1em; }

/* -------------------------------------------------- who performs it */

.who-performs { display: grid; grid-template-columns: 96px 1fr; gap: 1.2em; align-items: start; }
.who-performs--no-image { grid-template-columns: 1fr; }
.who-performs__thumb { width: 96px; }

/* -------------------------------------------------- lists reused from v1 */

.trust-strip { margin: 0; }
.families__item, .doctors-teaser { padding-top: 0; }
.strengths__list, .doctor-list, .children-list, .related ul { list-style: none; margin: 0; padding: 0; }
.doctor-list li { padding-block: 1.2em; }
.doctor-list__name { font-weight: 600; margin: 0 0 0.2em; }
.children-list li { padding-block: 1.2em; border-top: 1px solid var(--hair); }
.children-list li:first-child { border-top: none; }
.children-list__title { font-weight: 600; margin: 0 0 0.2em; }
.related ul { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; }

.two-col-list { columns: 1; list-style: none; margin: 0; padding: 0; }
.two-col-list li { border-top: 1px solid var(--hair); padding: 0.4em 0; }
.two-col-list li:first-child { border-top: none; }
@media (min-width: 600px) { .two-col-list { columns: 2; column-gap: 2em; } }

.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1.2em; }
@media (min-width: 720px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

.diagram-figure { max-width: 680px; margin-inline: auto; }
.diagram-wrap { overflow-x: auto; }
.diagram-wrap svg { width: 100%; min-width: 560px; height: auto; display: block; }
.diagram-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 0.6em; }

/* -------------------------------------------------- steps */

.steps { list-style: none; margin: 0; padding: 0; }
.steps__item { display: grid; grid-template-columns: 64px 1fr; gap: 1em; padding-block: 1em; border-top: 1px solid var(--hair); }
.steps__item:first-child { border-top: none; }
.steps__num { font-family: var(--font-label); font-weight: 300; font-size: 40px; color: var(--sage); }

/* -------------------------------------------------- timeline / faq */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 1em; padding: 0.8em; border-top: 1px solid var(--hair); background: var(--sage-light); }
.timeline li:first-child { border-top: none; }
.timeline__when { font-weight: 600; }
.faq { background: var(--sage-light); padding: 1.8em; }
.faq h3 { margin-top: 1.2em; }
.faq h3:first-of-type { margin-top: 0; }
.sources-list { padding-left: 1.2em; }
.sources-list li { margin-bottom: 0.4em; }

/* -------------------------------------------------- forms */

.lead-form { max-width: 560px; margin-top: 0; }
.field { margin-bottom: 1.2em; display: flex; flex-direction: column; gap: 0.4em; }
.field label { font-weight: 600; font-size: 15px; }
.field input[type="text"], .field select, .field textarea {
  font: inherit; padding: 0.6em 0.7em; border: 1px solid var(--hair); border-radius: 0;
  background: var(--paper); color: var(--ink); width: 100%;
}
.field textarea { resize: vertical; }
.field--consent label { font-weight: 400; display: flex; gap: 0.6em; align-items: flex-start; }
.field--consent input { margin-top: 0.3em; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 1em; font-weight: 600; }
.form-note--error { color: var(--wine); }

.channels { list-style: none; display: flex; flex-wrap: wrap; gap: 0.8em; margin: 0 0 1.6em; padding: 0; }

/* -------------------------------------------------- mark (draft / confirm) */

mark { color: var(--ink); padding: 0 0.15em; }
mark.draft { background: var(--sage-light); border-bottom: 1px dotted var(--sage); }
mark.confirm { background: var(--wine-light); border-bottom: 1px dotted var(--wine); }

/* -------------------------------------------------- footer (full-bleed indigo) */

.site-footer { background: var(--indigo); color: var(--on-dark); margin-top: 4em; padding-block: 2.6em calc(2.6em + 64px); font-size: 15px; }
.site-footer a { color: var(--on-dark); }
.site-footer__name { color: var(--paper); font-weight: 600; }
.site-footer__logo { height: 30px; width: auto; margin-bottom: 0.6em; }
.site-footer .site-index__heading, .site-footer .site-footer__heading { color: var(--paper); }
.site-footer .site-index a, .site-footer__links a { color: var(--on-dark-muted); }
.site-footer .site-index a:hover, .site-footer__links a:hover { color: var(--paper); }
.site-footer .site-index li, .site-footer__links li, .site-index { border-color: rgba(255,255,255,0.18); }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.site-footer__heading { font-weight: 600; margin-bottom: 0.4em; }
.site-footer__links { list-style: none; margin: 0; padding: 0; columns: 2; }
.site-footer__safety, .site-footer__legal { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 1.6em; padding-top: 1.2em; font-size: 14px; color: var(--on-dark-muted); }

.site-index { padding-bottom: 1.8em; margin-bottom: 1.8em; border-bottom: 1px solid var(--hair); }
.site-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8em; font-size: 13px; }
.site-index__heading { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--ink); margin: 0 0 0.5em; }
.site-index ul { list-style: none; margin: 0; padding: 0; }
.site-index li { border-top: 1px solid var(--hair); padding: 0.3em 0; }
.site-index li:first-child { border-top: none; }
.site-index a { color: var(--muted); }
.site-index a:hover { color: var(--wine); }

@media (min-width: 768px) { .site-footer { padding-block: 2.6em; } }

/* -------------------------------------------------- mobile sticky action bar */

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--paper); border-top: 1px solid var(--hair);
  transition: transform 0.2s ease, visibility 0s linear 0s;
}
.mobile-bar .btn { flex: 1; border-radius: 0; min-height: 100%; border: none; }
.mobile-bar .btn--primary { border-right: 1px solid rgba(255,255,255,0.25); }
/* Home only -- base.html adds this class when page.type == "home", so the
   bar starts hidden below its own hero actions row instead of duplicating
   it; site.js's IntersectionObserver removes/restores the class as that row
   leaves/re-enters view. visibility is delayed going tucked (stays on
   screen for the full slide) but instant coming back (so it's focusable
   the moment it starts sliding in), and hidden either way keeps its links
   out of tab order while tucked. */
.mobile-bar--tucked { transform: translateY(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
@media (prefers-reduced-motion: reduce) { .mobile-bar, .mobile-bar--tucked { transition: none; } }
@media (min-width: 768px) { .mobile-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 64px; } }

/* -------------------------------------------------- responsive resets */

@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__links { columns: 1; }
  .site-index__grid { grid-template-columns: 1fr; }
  .steps__item { grid-template-columns: 44px 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 0.2em; }
}
@media (max-width: 360px) { :root { --gutter: 16px; } }

/* -------------------------------------------------- print / reduced motion */

@media print {
  .site-header, .site-footer, .consult, .mobile-bar, .skip-link, .page-aside { display: none; }
  body { font-size: 12pt; padding-bottom: 0; }
  a { color: var(--ink); text-decoration: none; }
  .wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }