/* Authoritative shared layout. Loaded last by build.py, after legacy page
   styles, so navigation and reading rhythm cannot drift from page to page. */
:root {
  --layout-title: clamp(34px, 3.4vw, 52px);
  --layout-heading: clamp(27px, 2.5vw, 36px);
  --layout-section: clamp(28px, 3.5vw, 48px);
}

.site-header .nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding-block: 10px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
}
.site-header .brand {
  grid-column: auto;
  min-width: 0;
  gap: 10px;
  font-size: 21px;
  line-height: 1.2;
  text-decoration: none;
}
.site-header .brand-mark,
.site-header .brand-mark img { width: 44px; height: 44px; }
.site-header .nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  width: auto;
  padding: 0;
  margin: 0;
}
.site-header .nav-links a { padding: 10px 12px; font-size: 17px; white-space: nowrap; }
.site-header .header-phone {
  grid-column: auto;
  grid-row: auto;
  justify-self: end;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.3;
  white-space: nowrap;
}
.site-header .nav-toggle { display: none; }
.top-note p a { margin-inline-start: .2em; }

/* The consent component's paragraph was inheriting the large page-body
   size, making it cover nearly a third of the mobile viewport. */
body #np-consent { padding: 14px 16px; }
body #np-consent .np-title { font-size: 16px; line-height: 1.3; }
body #np-consent p { font-size: 15px; line-height: 1.4; }
body #np-consent .np-icon { width: 28px; height: 28px; }
body #np-consent .np-icon svg { width: 18px; height: 18px; }
body #np-consent .np-btns { margin-top: 12px; }
body #np-consent button { min-height: 44px; }

main h1:not(.check-title) {
  font-size: var(--layout-title);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 28ch;
  text-wrap: pretty;
}
main > .section { padding-block: var(--layout-section); }
main > .section.compact { padding-block: clamp(24px, 3vw, 40px); }
main > .section:is(.treatment-hero, .hub-hero, .about-hero, .providers-hero, .location-hero) {
  padding-block: clamp(28px, 3.5vw, 48px) 24px;
}
main > .section.content-section { padding-block: clamp(20px, 2vw, 28px); }
main > .section.next-step { padding-block: var(--layout-section); }
main :is(.content-section, .next-step, .arrival-section, .apollo-section) h2,
main > .section > .wrap > h2 {
  font-size: var(--layout-heading);
  line-height: 1.2;
  max-width: none;
  text-wrap: pretty;
}
main .provider-body h2 { font-size: var(--layout-heading); line-height: 1.2; }
main .content-section h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; }
main :is(.content-section, .apollo-prose) p,
main :is(.lede, .hero-lede) {
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.6;
}
main .treatment-grid { padding-block: 0; gap: 24px; }
main .treatment-tile { padding: clamp(20px, 2.4vw, 28px); }
main .treatment-tile h2 { font-size: 27px; line-height: 1.2; max-width: none; }
main .treatment-tile .tile-thumb { aspect-ratio: 4 / 3; }
main .hub-hero + .section { padding-top: 12px; }
main .hub-banner img { aspect-ratio: 21 / 9; }
main .book-col { margin-inline: auto; }

/* Related reading follows the article's reading axis instead of returning
   to a wide marketing grid with a tiny list stranded at the far left. */
.section[aria-labelledby="related-title"] { padding-block: 24px; }
.section[aria-labelledby="related-title"] > .wrap {
  width: min(800px, calc(100% - (var(--gutter) * 2)));
}
.section[aria-labelledby="related-title"] h2 { font-size: 28px; }
.section[aria-labelledby="related-title"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.section[aria-labelledby="related-title"] li { margin: 0; }
.section[aria-labelledby="related-title"] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
}
main .location-lede { padding-block: 20px; }
main .arrival-section ol { margin-bottom: 0; }
.apollo-page .apollo-section { padding-block: var(--layout-section); }
.apollo-page .apollo-hero { padding-top: clamp(28px, 3.5vw, 48px); }
.apollo-page .apollo-split { gap: clamp(24px, 4vw, 56px); }
.apollo-page .apollo-facts { margin-top: 28px; gap: 24px; }

/* One primary action above the fold. The shared header owns it; contextual
   actions near the end of a long page still remain available. */
main > .hero .button-row,
main > .apollo-hero .button-row { display: none; }

/* Spravato is a reading page, not an equipment showcase. Stack headings with
   their prose instead of leaving an empty column beside every paragraph. */
.spravato-page .apollo-section > .apollo-course {
  display: block;
  max-width: 860px;
}
.spravato-page .apollo-section > .apollo-course > div:first-child { margin-bottom: 20px; }
.spravato-page .apollo-prose p { max-width: 72ch; }
.spravato-page .apollo-hero-grid { align-items: start; gap: 28px 40px; }
.spravato-page .apollo-hero-grid > .apollo-warning { grid-column: 1 / -1; }
.spravato-page .apollo-warning {
  border: 1px solid color-mix(in srgb, var(--crisis) 30%, transparent);
  border-radius: 8px;
  box-shadow: none;
  padding: 20px 24px;
  font-size: 18px;
}
.spravato-page .clinic-visit-figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.spravato-page .clinic-visit-figure figcaption { font-size: 15px; }
.spravato-page .apollo-cards { grid-template-columns: 1fr 1fr; }
.spravato-page .apollo-callout {
  border: 1px solid var(--surface-line);
  border-radius: 8px;
}
.visit-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
  padding: 24px 0;
  list-style: none;
  border-block: 1px solid var(--surface-line);
}
.visit-sequence li { display: flex; align-items: start; gap: 12px; font-size: 18px; line-height: 1.4; }
.visit-sequence span {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clinical-blue);
  color: var(--paper);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .site-header .nav { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; min-height: 68px; padding-block: 8px; }
  .site-header .brand { grid-column: 1; grid-row: 1; font-size: 19px; }
  .site-header .header-phone { grid-column: 2; grid-row: 1; }
  .site-header .nav-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    position: relative;
  }
  .site-header .nav-toggle > span[aria-hidden] { font-size: 0; }
  .site-header .nav-toggle::after {
    content: '';
    width: 20px;
    height: 14px;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .site-header .nav-links {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex-direction: column;
    padding-block: 8px;
    border-top: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
    max-height: 60vh;
    overflow-y: auto;
  }
  .site-header .nav-links.is-open { display: flex; }
  .site-header .nav-links a { width: 100%; }
}
@media (max-width: 640px) {
  .section[aria-labelledby="related-title"] > .wrap { width: calc(100% - 32px); }
  .site-header .nav { gap: 8px; }
  .site-header .brand { font-size: 16px; gap: 8px; }
  .site-header .brand-mark, .site-header .brand-mark img { width: 32px; height: 32px; }
  .site-header .header-phone { font-size: 14px; padding: 10px; }
  main .hero { padding-top: 24px; gap: 24px; }
  main .hero-copy { align-self: start; }
  main .hub-banner img { aspect-ratio: 4 / 3; }
  .apollo-page .apollo-facts { gap: 16px; padding-block: 20px; }
  .spravato-page .apollo-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .spravato-page .apollo-hero-copy { display: contents; }
  .spravato-page .apollo-hero-copy > .apollo-kicker { grid-row: 1; margin: 0; }
  .spravato-page .apollo-hero-copy > h1 { grid-row: 2; margin: 0; }
  .spravato-page .clinic-visit-figure { grid-row: 3; }
  .spravato-page .apollo-hero-copy > p:not(.apollo-kicker) { grid-row: 4; }
  .spravato-page .apollo-hero-grid > .apollo-warning { grid-row: 5; }
  .spravato-page .apollo-cards { grid-template-columns: 1fr; }
  .spravato-page .apollo-warning { padding: 18px; font-size: 17px; }
  .visit-sequence { grid-template-columns: 1fr; gap: 16px; }
}