/* Belleville Lake Pediatrics — design system */
/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Text is pure black on pure white, by request. All the colour lives in the
     bands, tiles, buttons and photographs instead of in the type. */
  --ink:         #000000;
  --ink-soft:    #111111;
  --ink-faint:   #454545;
  --paper:       #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F4FAFE;

  /* Saturated brand set */
  --hull:        #0B3B5E;
  --lake:        #0E86C8;
  --lake-deep:   #0A6497;
  --lake-deeper: #084F79;
  --sky:         #63C6F0;
  --mist:        #D6EEFB;

  /* Accents, used as solid fills. Black sits on all of them at AA. */
  --sun:         #FFC02E;
  --coral:       #FF7A5C;
  --leaf:        #25C08D;
  --grape:       #A98BEE;
  --oak:         #E3B87D;
  --oak-deep:    #A8793A;

  /* Section bands. Strong enough to read as colour from across the room. */
  --band-sky:    #D6EEFB;
  --band-sun:    #FFF0CC;
  --band-mint:   #D5F5E9;
  --band-blush:  #FFE3DB;
  --band-grape:  #ECE4FC;

  --line:        #CFE2EF;
  --line-strong: #6E90A8;   /* form controls: 3.38:1 on white, meets WCAG 1.4.11 */
  --line-soft:   #E4F0F8;
  --danger:      #C1553F;

  --shadow-sm: 0 1px 2px rgba(11,59,94,.08);
  --shadow-md: 0 10px 30px rgba(11,59,94,.13);

  --display: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1140px;
  --measure: 68ch;
  --pad: 24px;
  --radius: 18px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  /* Nunito Sans at 400 sits very light next to Quicksand 700 headings, which
     read the page as washed out even though the ink is almost black. 500 is
     the weight that matches. Font smoothing is left at the browser default on
     purpose: `antialiased` thins every stroke on macOS and iOS, which is the
     other half of the same problem. */
  font-weight: 500;
  line-height: 1.62;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lake-deep); text-underline-offset: 3px; }
a:hover { color: var(--hull); }

:focus-visible {
  outline: 3px solid var(--lake);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--hull); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600;
  /* moved out of view without a negative offset, which would widen the page */
  transform: translateY(-120%);
  transition: transform .15s;
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 820px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

.band { padding-block: 76px; }
.band-tight { padding-block: 52px; }
.band-mist   { background: var(--band-sky); }
.band-sky    { background: var(--band-sky); }
.band-sun    { background: var(--band-sun); }
.band-mint   { background: var(--band-mint); }
.band-blush  { background: var(--band-blush); }
.band-grape  { background: var(--band-grape); }
.band-surface { background: var(--surface); }
.band-paper { background: var(--paper); }

.sec-head {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 36px; max-width: 66ch;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 .5em;
  letter-spacing: -.006em;
  line-height: 1.18;
}
h1 { font-size: clamp(1.95rem, 4.1vw, 2.8rem); line-height: 1.12; letter-spacing: -.012em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.22rem; line-height: 1.3; }
h4 { font-family: var(--body); font-weight: 700; font-size: 1.03rem; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--lake-deep); margin: 0 0 .4em;
}
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 64ch; }

.prose { color: var(--ink-soft); }
.prose h2, .prose h3 { color: var(--hull); margin-top: 1.9em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 22px; max-width: var(--measure); }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--sky); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 13px 20px; border-radius: 99px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--lake-deep); color: var(--paper); border-color: var(--lake-deep); }
.btn-solid:hover { background: var(--lake-deeper); border-color: var(--lake-deeper); color: var(--paper); }
.btn-line { background: transparent; color: var(--lake-deep); border-color: var(--sky); }
.btn-line:hover { border-color: var(--lake); background: var(--mist); color: var(--lake-deep); }
.btn-oak { background: var(--oak); color: #2A1F10; border-color: var(--oak); }
.btn-oak:hover { background: var(--oak-deep); color: #2A1F10; }
.btn-lg { font-size: .97rem; padding: 16px 28px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   6. Header
   ========================================================================== */
.topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: .83rem; color: var(--ink-soft);
}
.topbar .shell {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px; min-height: 38px; flex-wrap: wrap;
}
.topbar a { color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--lake-deep); }
.topbar .sep { color: var(--line); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
/* The header carries brand + 7 links + 2 buttons, which needs more room than
   the reading column. Give it its own wider track and let items shrink. */
.site-header .shell { max-width: 1320px; }
.masthead { display: flex; align-items: center; gap: 16px; min-height: 84px; min-width: 0; }
.masthead > * { min-width: 0; }

/* The lockup is a supplied image, so it is never recoloured or restyled here.
   Height is fixed and width follows, and the width/height attributes on the tag
   reserve the same box so the header does not shift while it loads. */
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; margin-right: auto; flex: none; }
.brand-logo    { display: block; height: 47px; width: auto; max-width: 100%; }
.brand-logo-sm { height: 62px; }

.nav-main { display: flex; gap: 2px; align-items: center; }
.nav-main ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-main a {
  font-size: .875rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; padding: 9px 9px; border-radius: 8px;
  white-space: nowrap; transition: color .15s, background-color .15s;
}
.nav-main a:hover { color: var(--hull); background: var(--surface-2); }
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a { color: var(--hull); font-weight: 600; background: var(--mist); }

.hdr-cta { display: flex; gap: 8px; align-items: center; flex: none; }
.hdr-cta .btn { padding: 12px 16px; font-size: .86rem; }

.burger {
  display: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; width: 46px; height: 46px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--hull);
}

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */
.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(21,40,58,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(340px, 86vw);
  background: var(--surface); padding: 20px;
  overflow-y: auto; transform: translateX(100%);
  transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav a {
  display: block; padding: 13px 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 1.02rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-nav .current-menu-item > a,
.drawer-nav .current_page_item > a { color: var(--hull); font-weight: 700; background: var(--mist); }
.drawer-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.x-btn {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  width: 42px; height: 42px; cursor: pointer; color: var(--ink);
  font-size: 1.2rem; line-height: 1;
}

/* ==========================================================================
   8. Wave divider
   ========================================================================== */
/* Filled wave divider. The front layer is the colour of the band below, so
   it is the shape that actually draws the boundary; the two behind it only
   add depth. The whole strip sits on the colour of the band above. */
.wave {
  display: block; width: 100%; height: 96px;
  background: var(--mist); margin-bottom: -1px;
}
.wave path { stroke: none; }
.wave .wv-back  { fill: var(--sky); opacity: .48; }
.wave .wv-mid   { fill: var(--lake); opacity: .30; }
.wave .wv-front { fill: var(--paper); }

/* Same divider where the band underneath is not white. */
.wave-on-sun   .wv-front { fill: var(--band-sun); }
.wave-on-mint  .wv-front { fill: var(--band-mint); }
.wave-on-grape .wv-front { fill: var(--band-grape); }

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero { background: var(--mist); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.02fr;
  gap: 44px; align-items: center; padding-block: 72px 80px;
}
/* The photograph is the first thing a parent looks at, so it gets the wider
   half of the hero and a little more height than a bare 16:9 strip. */
.hero-photo .photo.wide,
.hero-photo .photo-slot.wide { aspect-ratio: 3/2; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-copy h1 { margin: 0; max-width: 21ch; }
.hero-copy .lede { margin: 0; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 15px; font-size: .8rem; font-weight: 700; color: #000;
}
.pill-row .pill:nth-child(3n+1) { background: var(--sky);   border-color: var(--sky); }
.pill-row .pill:nth-child(3n+2) { background: var(--sun);   border-color: var(--sun); }
.pill-row .pill:nth-child(3n+3) { background: var(--leaf);  border-color: var(--leaf); }

/* ==========================================================================
   10. Cards
   ========================================================================== */
.cards { display: grid; gap: 20px; }
.c2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.c3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0; }
.card p { color: var(--ink-soft); font-size: .97rem; margin: 0; max-width: none; }

a.card { text-decoration: none; color: inherit; transition: border-color .16s, box-shadow .16s, transform .16s; }
a.card:hover { border-color: var(--sky); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .arrow { color: var(--lake-deep); font-weight: 700; font-size: .85rem; margin-top: auto; padding-top: 6px; }

.ico {
  width: 46px; height: 46px; border-radius: 14px; background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  color: #000; flex: none;
}

/* Rotate the tile colour through the accents so a grid of cards has some life
   in it. Order is deterministic, so the same card is always the same colour. */
.cards > :nth-child(5n+2) .ico { background: var(--sun); }
.cards > :nth-child(5n+3) .ico { background: var(--leaf); }
.cards > :nth-child(5n+4) .ico { background: var(--coral); }
.cards > :nth-child(5n+5) .ico { background: var(--grape); }
.actions3 > :nth-child(2) .ico { background: var(--sun); }
.actions3 > :nth-child(3) .ico { background: var(--leaf); }

/* A colour bar across the top of each card, so a grid reads as a set of
   distinct things rather than a wall of white boxes. */
.cards > * { position: relative; overflow: hidden; }
.cards > *::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--sky);
}
.cards > :nth-child(5n+2)::before { background: var(--sun); }
.cards > :nth-child(5n+3)::before { background: var(--leaf); }
.cards > :nth-child(5n+4)::before { background: var(--coral); }
.cards > :nth-child(5n+5)::before { background: var(--grape); }

.actions3 {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin-top: -46px; position: relative; z-index: 5;
}
.action {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px;
}
.action p { flex: 1; font-size: .95rem; color: var(--ink-soft); max-width: none; }

/* ==========================================================================
   11. Split, callouts, photo slots
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Centring is right when it is prose beside a photograph. When both columns
   are stacks of cards, as on Contact Us, it drops the shorter column halfway
   down the page and the two stop looking like a pair. */
.split-top { align-items: start; }
.split-wide { grid-template-columns: 1.25fr .75fr; }
.split-img-first > :first-child { order: -1; }

.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--oak);
  background: var(--surface); border-radius: 0 12px 12px 0;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
}
.callout.urgent { border-left-color: var(--danger); }
.callout h3 { color: var(--hull); margin: 0; font-family: var(--body); font-weight: 700; font-size: 1.03rem; }
.callout p { color: var(--ink-soft); font-size: .96rem; margin: 0; max-width: none; }

.photo-slot {
  position: relative;
  border: 2px dashed var(--sky); border-radius: var(--radius);
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 11px,
    rgba(143,187,212,.13) 11px, rgba(143,187,212,.13) 22px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 30px 20px; text-align: center; color: var(--lake-deep);
  min-height: 200px;
}
.photo-slot .slot-label { font-size: .84rem; font-weight: 700; line-height: 1.35; max-width: 34ch; }
.photo-slot .slot-spec {
  font-size: .72rem; color: var(--ink-faint); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.photo-slot .slot-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--oak); color: #2A1F10;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
/* A real photo, once one is uploaded through the CMS. Same footprint as the
   placeholder it replaces, so no layout shifts when photos land. */
.photo {
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow, 0 1px 2px rgba(28,61,90,.08));
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo.tall   { aspect-ratio: 3/4; }
.photo.wide   { aspect-ratio: 16/9; }
.photo.square { aspect-ratio: 1/1; }

.photo-slot.tall   { aspect-ratio: 3/4;  min-height: 0; }
.photo-slot.wide   { aspect-ratio: 16/9; min-height: 0; }
.photo-slot.square { aspect-ratio: 1/1;  min-height: 0; }

/* inline placeholder token for details still to be supplied */
.ph {
  background: rgba(200,165,121,.24);
  border-bottom: 1.5px dotted var(--oak-deep);
  padding: 0 3px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ==========================================================================
   12. CTA band
   ========================================================================== */
.cta-band { background: var(--hull); color: var(--mist); padding-block: 64px; }
.cta-band h2 { color: var(--paper); }
.cta-band p { color: var(--mist); }
.cta-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px; align-items: start;
}
/* Contact Us already carries the form in its own card, so the band there is
   copy only and should use the full width rather than half of it. */
.cta-inner:not(:has(.cta-form)) { grid-template-columns: minmax(0, 1fr); }
.cta-band .btn-line { color: var(--paper); border-color: rgba(251,248,243,.5); }
.cta-band .btn-line:hover { background: rgba(251,248,243,.12); border-color: var(--paper); color: var(--paper); }

/* ==========================================================================
   13. Page header, tables, forms
   ========================================================================== */
.pagehead { background: var(--mist); padding: 56px 0 60px; }
.pagehead .inner { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.pagehead h1 { margin: 0; }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--hull); font-weight: 600; }
td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

input[type=text], input[type=email], input[type=tel], input[type=search], textarea, select {
  font: inherit; width: 100%;
  padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: 9px;
  background: var(--paper); color: var(--ink);
}
textarea { resize: vertical; }
label { font-size: .87rem; font-weight: 600; color: var(--hull); display: flex; flex-direction: column; gap: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 14px; font-size: .85rem; font-weight: 500; color: var(--ink-soft);
}

/* WordPress core alignment + caption classes */
.alignwide { max-width: min(1220px, 100%); margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 1.4em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.4em; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: .5em; }
.wp-block-image img { border-radius: var(--radius); }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
  /* Same sky as a page header, so the page opens and closes on the same
     ground. The wave above it is the boundary, so there is no top border. */
  background: var(--mist);
  padding: 56px 0 28px; font-size: .92rem;
  position: relative; overflow: hidden; isolation: isolate;
}
.site-footer > .shell { position: relative; z-index: 1; }

/* The flipped wave sits directly on the band above with no gap.

   Its strip has to be painted in the colour of the band ABOVE it, not below:
   the front layer is the footer's mist rising up, and everything the wave does
   not cover is still the call-to-action band. Left at the default mist this
   drew a hard straight line across the page where the navy band stopped, which
   is the opposite of what a wave is for. */
.wave-up {
  background: var(--mist);
  margin-top: -1px; margin-bottom: -1px;
}
/* The strip is flipped with scaleY(-1), which puts the front shape at the TOP
   of the box and leaves the background showing at the bottom. So the front
   layer has to be the colour of the band ABOVE (the navy call to action) and
   the background the colour of the footer below. Filled with mist, as it was,
   the navy band stopped at a hard straight line and the water sat upside
   down underneath it. */
.wave-up .wv-front { fill: var(--hull); }

/* A page header is short, so its art can fill it. The footer is tall and gets
   taller as the columns stack, so the drawing is pinned to a fixed strip below
   the wave instead. Stretched over the whole footer it would crop to nothing at
   phone width and swim behind the type at desktop. */
.foot-art { inset: 0 0 auto 0; height: 300px; }
@media (max-width: 760px) { .foot-art { height: 230px; } }

/* Quieter than a page header: the footer is read, not looked at. */
.foot-art .art-sun circle { opacity: .13; }
/* Disc only down here. The rays crossing the logotype read as clutter rather
   than weather, and the disc alone still ties the footer to the headers. */
.foot-art .art-sun .rays { display: none; }
.foot-art .art-cloud { opacity: .34; }
.foot-art .art-dot { opacity: .22; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 34px; }
.foot-grid h2 {
  color: var(--hull); margin: 0 0 12px; font-size: .77rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a {
  color: var(--ink-soft); text-decoration: none;
  display: inline-block; padding-block: 3px; min-height: 24px;
}
.foot-grid a:hover { color: var(--lake-deeper); text-decoration: underline; }
.foot-grid p { color: var(--ink-soft); max-width: none; }

/* Facebook and Instagram.

   The whole block is rendered only when there is at least one web address to
   point at, so there is no empty-state to style here. 44px targets because the
   footer is mostly read on a phone and these sit close to the legal links. */
.social { margin-top: 20px; }
.social-head {
  color: var(--hull); margin: 0 0 10px; font-size: .77rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}
.social-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--lake-deep); text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.social-link:hover,
.social-link:focus-visible {
  background: var(--lake-deep); border-color: var(--lake-deep); color: var(--paper);
  text-decoration: none;
}
/* The footer's own link rule sets a column layout and an inline-block box;
   these are circles in a row, so they opt out of both. */
.foot-grid .social-row { flex-direction: row; }
/* .foot-grid a sets ink-soft at (0,1,1), which beats .social-link at (0,1,0),
   so the marks came out black. Named with the same weight to win it back. */
.foot-grid .social-link { display: inline-flex; padding-block: 0; color: var(--lake-deep); }
.foot-grid .social-link:hover { color: var(--paper); text-decoration: none; }
.social-card { margin-top: 4px; }
.foot-bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(11,59,94,.18);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--ink-faint); font-size: .83rem;
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 1140px) {
  .nav-main { display: none; }
  .burger { display: flex; }
  .hdr-cta .hide-md { display: none; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 52px 64px; }
  .hero-copy h1 { max-width: none; }
  .split, .split-wide { grid-template-columns: 1fr; gap: 32px; }
  .split-img-first > :first-child { order: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .actions3 { margin-top: -30px; }
}

/* Phones: the brand must be allowed to shrink and wrap, otherwise it pushes
   the Schedule button and burger past the right edge. */
@media (max-width: 760px) {
  /* flex:none in the base rule stops the brand shrinking, which is what
     pushed the burger past the right edge. Allow it to shrink here. */
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-logo { height: 38px; }
  .hdr-cta .btn { padding: 11px 14px; font-size: .82rem; }
  .masthead { gap: 10px; min-height: 74px; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  body { font-size: 16px; }
  .band { padding-block: 52px; }
  .band-tight { padding-block: 40px; }
  .actions3 { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .topbar .shell { justify-content: center; font-size: .79rem; gap: 10px; }
  .topbar .sep, .topbar .hide-sm { display: none; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}

@media print {
  .site-header, .topbar, .drawer, .cta-band, .site-footer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   16. Photography and the sections built around it
   ========================================================================== */

/* Age-stage cards: a photo, a label, one line. The photo is the point, so it
   sits flush to the card edges with the type tucked underneath. */
.stages { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.stage {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.stage img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.stage-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; }
.stage-age {
  align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 99px; color: #000;
  background: var(--sky);
}
.stages > :nth-child(2) .stage-age { background: var(--sun); }
.stages > :nth-child(3) .stage-age { background: var(--leaf); }
.stages > :nth-child(4) .stage-age { background: var(--coral); }
.stage h3 { margin: 0; font-size: 1.1rem; }
.stage p  { margin: 0; font-size: .93rem; max-width: none; }

/* Full-width photograph with the copy beside it, not on top of it, so nothing
   depends on the image being dark enough to carry white text. */
.feature {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  border-radius: var(--radius); overflow: hidden; background: var(--hull);
}
.feature img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.feature-copy { padding: 40px 38px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.feature-copy h2, .feature-copy p { color: #FFFFFF; }
.feature-copy p { max-width: 46ch; }
.feature-copy .eyebrow { color: var(--sun); }

/* A loose band of square photographs, used once as a breather. */
.snaps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.snaps img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); }

/* Questions parents ask */
.faq { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--sky); border-radius: 12px; padding: 18px 20px;
}
.faq > :nth-child(4n+2) { border-left-color: var(--sun); }
.faq > :nth-child(4n+3) { border-left-color: var(--leaf); }
.faq > :nth-child(4n+4) { border-left-color: var(--coral); }
.faq-item h3 { margin: 0 0 6px; font-size: 1rem; }
.faq-item p  { margin: 0; font-size: .93rem; max-width: none; }

/* An image beside prose on the interior pages */
.side-photo { width: 100%; border-radius: var(--radius); object-fit: cover; display: block; }

@media (max-width: 700px) {
  .feature-copy { padding: 28px 24px; }
  .feature img { min-height: 220px; }
}

/* ==========================================================================
   17. Downloadable forms
   ========================================================================== */

.card-forms { padding-bottom: 24px; }
.dl-list { display: grid; gap: 9px; margin: 14px 0 4px; }

/* Each row is one file. The whole row is the link, so it is an easy target on
   a phone, and the metadata line answers the two questions people actually
   have: how long is it, and can I fill it in without printing it. */
.dl {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dl:hover, .dl:focus-visible {
  border-color: var(--lake); background: var(--band-sky); transform: translateY(-1px);
}
.dl-ico {
  flex: none; width: 31px; height: 31px; border-radius: 9px;
  display: grid; place-items: center; background: var(--sky); color: #000;
}
.dl-lead .dl-ico { background: var(--sun); }
.dl-ext  .dl-ico { background: var(--leaf); }
.dl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-name { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.dl-desc { font-size: .89rem; line-height: 1.5; color: var(--ink-soft); }
.dl-meta { font-size: .73rem; font-weight: 600; letter-spacing: .02em; color: var(--lake-deep); }

/* The packet is what most families need, so it is the one that looks different. */
.dl-lead { border-width: 2px; border-color: var(--sun); background: var(--band-sun); }
.dl-lead:hover, .dl-lead:focus-visible { background: #FFE9B8; border-color: var(--oak-deep); }

.dl-head { margin: 26px 0 6px; font-size: 1rem; }
.dl-note { font-size: .82rem; color: var(--ink-faint); margin: 0 0 10px; max-width: none; }
.dl-ext + .dl-note { margin-top: 10px; }

@media (max-width: 480px) {
  .dl { padding: 12px 13px; gap: 11px; }
  .dl-name { font-size: .95rem; }
}

/* Two columns of file rows once there is room for them. */
.dl-grid { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); align-items: start; }
.dl-grid .dl-lead { grid-column: 1 / -1; }


/* ==========================================================================
   18. Decorative SVG behind the hero and the page headers
   ========================================================================== */

/* Both artwork layers are full-bleed, sit behind everything, and never take
   a click. They are aria-hidden, so they add nothing for a screen reader. */
.hero, .pagehead { position: relative; overflow: hidden; isolation: isolate; }
.hero > .shell, .pagehead > .shell, .hero > .wave { position: relative; z-index: 1; }

/* Parked on the crest the front wave layer makes at about 83% of the width.
   Boat and wave are anchored to the same bottom edge, so they stay together
   at any viewport size. z-index 2 puts the hull on the water rather than
   behind it. */
.hero-boat {
  position: absolute; z-index: 2; pointer-events: none;
  height: auto; opacity: .92;
}
@media (max-width: 860px) { .hero-boat { width: 84px !important; bottom: 38px !important; left: 70% !important; } }
@media (max-width: 560px) { .hero-boat { width: 66px !important; bottom: 26px !important; } }

.hero-art, .page-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; user-select: none;
}
/* One drawing for landscape windows, one for portrait. Only ever one shown. */
.hero-art-sm, .page-art-sm { display: none !important; }
@media (max-width: 760px) {
  .hero-art, .page-art { display: none !important; }
  .hero-art-sm, .page-art-sm { display: block !important; }
}

/* The sun is large and pale on purpose: the headline crosses it, and pure
   black on this tint still clears AA by a wide margin. */
.art-sun circle { fill: var(--sun); opacity: .30; }
.art-sun .rays line {
  stroke: var(--sun); stroke-width: 7; stroke-linecap: round; opacity: .26;
}

.art-cloud { fill: #FFFFFF; opacity: .74; }
.art-cloud-soft { opacity: .46; }

.art-boat .b-sail-a { fill: var(--hull); }
.art-boat .b-sail-b { fill: var(--sky); }
.art-boat .b-mast   { fill: var(--hull); }
.art-boat .b-hull   { fill: var(--lake); }

.art-ripple path {
  fill: none; stroke: var(--lake); stroke-width: 3.2;
  stroke-linecap: round; opacity: .26;
}
.art-ripple-soft path { opacity: .16; }

.art-dot { opacity: .40; }
.art-dot.d-sun   { fill: var(--sun); }
.art-dot.d-coral { fill: var(--coral); }
.art-dot.d-leaf  { fill: var(--leaf); }
.art-dot.d-grape { fill: var(--grape); }
.art-dot.d-sky   { fill: var(--sky); }

/* Interior headers get the same language at half the volume, so the artwork
   reads as one family without competing with the page title. */
.page-art .art-sun circle { opacity: .22; }
.page-art .art-sun .rays line { opacity: .18; }
.page-art .art-cloud { opacity: .55; }
.page-art .art-dot { opacity: .30; }

@media (max-width: 860px) {
  .wave { height: 64px !important; }
  /* At phone width the art would crowd the type, so only the quiet pieces
     stay and the busy middle is cropped away. */
  .hero-art { opacity: .8; }
  .page-art { opacity: .65; }
}
@media (max-width: 560px) {
  .wave { height: 46px !important; }
}

/* ==========================================================================
   19. Articles
   ========================================================================== */

/* A card in a list of articles. The whole card is the link, so it is an easy
   target on a phone, and the meta line answers "how long is this". */
.artgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.artgrid-tight { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.artcard {
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.artcard:hover, .artcard:focus-visible {
  border-color: var(--lake); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.artcard-top {
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lake-deep);
}
.artcard-title { font-family: var(--display); font-weight: 700; font-size: 1.14rem; line-height: 1.25; }
.artcard-lede  { font-size: .92rem; line-height: 1.52; color: var(--ink-soft); }
.artcard-meta  { margin-top: 4px; font-size: .76rem; font-weight: 700; color: var(--lake-deep); }

.sec-more { margin-top: 22px; }

/* Article page. One reading column with a sidebar that drops underneath on
   anything narrower than a laptop. */
.pagehead-art .inner { max-width: 44rem; }
.crumb { color: var(--lake-deep); text-decoration: none; border-bottom: 1.5px solid var(--sky); }
.crumb:hover { border-bottom-color: var(--lake-deep); }
.art-meta { margin: 4px 0 0; font-size: .82rem; font-weight: 600; color: var(--ink-faint); }

.art-wrap { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.art-body { max-width: 68ch; min-width: 0; }
.art-body h2 {
  margin: 38px 0 12px; font-size: 1.42rem; scroll-margin-top: 96px;
}
.art-body h2:first-of-type { margin-top: 6px; }
.art-body h3 { margin: 26px 0 8px; font-size: 1.08rem; }
.art-body p  { margin: 0 0 15px; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 22px; }
.art-body li { margin-bottom: 8px; }
.art-body a { color: var(--lake-deep); }

.art-rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0 18px; }
.art-small { font-size: .85rem; color: var(--ink-faint); }
.art-small em { font-style: normal; }

/* Contents list, shown only when an article has enough sections to need one. */
.art-toc {
  background: var(--band-sky); border-radius: 12px; padding: 16px 20px 14px; margin: 0 0 30px;
}
.art-toc-head {
  margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lake-deep);
}
.art-toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.art-toc a {
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600;
  display: block; padding-block: 3px; min-height: 24px;
}
.art-toc a:hover { color: var(--lake-deep); text-decoration: underline; }

.art-side { display: grid; gap: 16px; position: sticky; top: 92px; }
.art-side .card { padding: 20px 22px; }
.art-side h3 { font-size: 1.02rem; margin-top: 0; }
.art-side p { font-size: .88rem; }
.art-side-phone { font-size: 1.12rem !important; font-weight: 700; margin: 0 0 12px; }
.art-side-phone a { color: var(--hull); text-decoration: none; }

/* An optional square the practice can fill from the CMS: a short notice
   that sits above the help card. Tinted so it reads as a notice, not a
   third promo card. */
.art-side .card-note { background: var(--mist); border-color: var(--sky); }
.art-side .card-note h3 { color: var(--hull); }
.art-side .card-note p { margin: 0 0 10px; }
.art-side .card-note p:last-child { margin-bottom: 0; }
/* A table inside an article, e.g. a dosing chart. It scrolls inside its own
   box so a wide table never drags the whole page sideways on a phone. */
.art-table { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 12px; }
.art-table table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.art-table th, .art-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.art-table thead th { background: var(--mist); color: var(--hull); font-family: var(--display); font-weight: 700; font-size: .88rem; }
.art-table tbody tr:nth-child(even) { background: var(--surface-2); }
.art-table tbody tr:last-child td { border-bottom: 0; }
.art-table td { font-variant-numeric: tabular-nums; }

.art-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.art-links a { color: var(--lake-deep); font-weight: 600; font-size: .9rem; }

@media (max-width: 1000px) {
  .art-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .art-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
}
@media (max-width: 560px) {
  .artcard { padding: 17px 18px 15px; }
  .art-body h2 { font-size: 1.28rem; margin-top: 30px; }
}

/* Contact form status message */
.form-status { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; font-size: .94rem; border: 1px solid var(--line); }
.form-status.is-ok { background: var(--mist); border-color: var(--sky); color: var(--hull); }
.form-status.is-bad { background: #fdf1ee; border-color: #e3b7a8; color: #7a3b25; }

/* ==========================================================================
   21. Insurances we accept
   ========================================================================== */
/* "Do you take Blue Cross" is really "do you take MY Blue Cross", so the plan
   names carry as much weight as the insurer and sit right under it rather than
   in a second column that would break apart on a phone. */
.ins-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px;
}
.ins {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 5px;
  border-left: 4px solid var(--lake);
}
.ins-name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--hull); line-height: 1.3;
}
.ins-plans { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

/* Footer legal links sit on the same row as the copyright line. */
.foot-legal-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.foot-legal-links a {
  color: var(--ink-soft); text-decoration: underline;
  display: inline-block; padding-block: 3px; min-height: 24px;
}
.foot-legal-links a:hover { color: var(--lake-deeper); }

/* ==========================================================================
   22. The message band above the footer
   ========================================================================== */
/* Copy on the left, the form on the right, both on the navy. The form is the
   point of this band now, so it gets the wider half. */
.cta-copy { max-width: 46ch; }
.cta-phone a {
  font-family: var(--display); font-weight: 700; font-size: 1.28rem;
  color: var(--paper); text-decoration: none;
}
.cta-phone a:hover { color: var(--sun); text-decoration: underline; }
.cta-form { min-width: 0; }

/* Two short fields share a row so the band stays compact. */
.msg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .msg-row { grid-template-columns: 1fr; } }

/* On the navy the field styling has to be rebuilt: the default borders and
   labels are tuned for white and vanish here. */
.msg-form-dark label { color: var(--mist); font-weight: 600; font-size: .88rem; }
.msg-form-dark input,
.msg-form-dark textarea {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.5);
  color: var(--ink);
}
.msg-form-dark input::placeholder,
.msg-form-dark textarea::placeholder { color: var(--ink-faint); }
.msg-form-dark input:focus-visible,
.msg-form-dark textarea:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 2px; background: #fff;
}
.msg-form-dark button { align-self: flex-start; }

.form-status-dark { border-color: rgba(255,255,255,.45); color: var(--paper); }
.form-status-dark.is-ok { background: rgba(255,255,255,.14); border-color: var(--sky); color: var(--paper); }
.form-status-dark.is-bad { background: rgba(255,122,92,.22); border-color: var(--coral); color: var(--paper); }

@media (max-width: 900px) {
  .cta-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cta-copy { max-width: none; }
}

/* Related links in an article sidebar are navigation, so they get a real
   target height rather than the 20px a bare line of text gives. */
.art-links a { display: inline-block; padding-block: 3px; min-height: 24px; }