/* =============================================================================
   Northeast Aesthetics - Global Stylesheet
   -----------------------------------------------------------------------------
   Token system → base/typography → layout primitives → buttons → header/footer
   → sections → cards → forms → motion → responsive.

   Palette and type are carried over from the Squarespace build this replaced:
   navy and cyan are sampled directly from the logo artwork, the supporting
   blues are the theme's accent ramp, and Poppins was the original site font.
   Every color decision derives from the tokens block below.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (navy + cyan sampled from the logo artwork) */
  --navy:        #153E69;   /* wordmark navy, primary dark */
  --navy-deep:   #0E2C4C;   /* pressed / deep panels */
  --navy-soft:   #28415D;   /* theme "black", body dark */
  --cyan:        #20BBED;   /* wordmark cyan, primary accent */
  --cyan-deep:   #1470AF;   /* theme accent, hover + text-safe on white */
  --blue-soft:   #8EB6DC;   /* theme darkAccent, fine accents on navy */
  --blue-pale:   #BED6EE;   /* theme lightAccent, tint panels */
  --mist:        #F2F7FB;   /* pale blue-gray section wash */
  --bone:        #F8F9FA;   /* neutral off-white */
  --white:       #FFFFFF;

  /* Functional text colors */
  --text-on-dark:        rgba(255,255,255,0.92);
  --text-on-dark-muted:  rgba(255,255,255,0.66);
  --text-on-light:       #1F2D3D;
  --text-on-light-muted: #5A6B7D;
  --line-on-dark:        rgba(255,255,255,0.16);
  --line-on-light:       rgba(21,62,105,0.12);

  /* Typography - Poppins throughout, as on the original site */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  /* Type scale matched 1:1 to the live Squarespace build (desktop maxes):
     h1 6.37 / h2 4.12 / h3 2.74 / h4 1.57 / large 1.47 / body 1.08 rem */
  --fs-eyebrow: clamp(0.72rem, 0.66rem + 0.3vw, 0.85rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --fs-lead:    clamp(1.15rem, 1rem + 0.9vw, 1.47rem);
  --fs-h4:      clamp(1.2rem, 1.05rem + 0.6vw, 1.57rem);
  --fs-h3:      clamp(1.6rem, 1.2rem + 1.8vw, 2.74rem);
  --fs-h2:      clamp(2.1rem, 1.4rem + 3vw, 4.12rem);
  --fs-h1:      clamp(2.6rem, 1.5rem + 5vw, 6.37rem);

  /* Layout */
  --maxw: 1400px;          /* matches the original theme's max page width */
  --maxw-text: 900px;
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  /* Elevation */
  --shadow-card: 0 18px 40px -24px rgba(21,62,105,0.45);
  --shadow-lift: 0 30px 60px -30px rgba(21,62,105,0.55);
  --header-h: 112px;
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;               /* live --body-font-weight: 300 */
  line-height: 1.87;              /* live --body-font-line-height: 1.87em */
  color: var(--navy-soft);        /* live text color #28415D */
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;              /* live --heading-font-weight */
  letter-spacing: 0;             /* live --heading-font-letter-spacing: 0 */
  text-wrap: balance;
  color: var(--navy-soft);       /* live text color: hsl(211,40%,26%) = #28415D */
}
/* Leading tightens as the type grows. The theme shipped a flat 1.46em, which
   is fine at body size but opens a ~30px gap above and below a 66px heading. */
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-h3); line-height: 1.28; }
h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.35; }

p { text-wrap: pretty; }

::selection { background: var(--cyan); color: var(--white); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-text); }

.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--bone { background: var(--bone); }
.section--navy { background: var(--navy); color: var(--text-on-dark); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
/* Single-edge trims, for where two adjacent sections' paddings stack up into
   more dead space than the content needs. */
.section--tight-bottom { padding-bottom: calc(var(--section-y) * 0.3); }
.section--tight-top { padding-top: calc(var(--section-y) * 0.5); }

.section-head { margin-bottom: 3rem; }
/* The icon slot is a fixed height with its icon bottom-aligned, so short icons
   leave dead space at the top that reads as part of this gap. Trimmed here
   rather than in the slot, which would shrink the icons themselves. */
.section-head:has(+ .svc-grid--onlight) { margin-bottom: 1.25rem; }
.section-head--center { text-align: center; margin-inline: auto; max-width: 760px; }

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: 0.9rem;
}
.section--navy .eyebrow { color: var(--blue-soft); }

/* inline accent color for emphasized words in headings */
.text-accent { color: var(--cyan-deep); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-on-light-muted);
  font-weight: 300;
}
.section--navy .lead { color: var(--text-on-dark-muted); }

.stack > * + * { margin-top: 1.15rem; }

/* Two-column media + copy rows */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--flip .split__media { order: 2; }

/* Flat on the live site: square corners, no shadow — the photo is the edge. */
.split__media img {
  width: 100%;
  /* Square, as on the live site — the taller box gives these rows the presence
     a 4/3 letterbox didn't. Portrait bios and --tall keep their own ratios. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.split__media--tall img { aspect-ratio: 3 / 4; }

/* Heading that links out (e.g. SkinPen headings link to skinpen.com) */
.heading-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.heading-link:hover { color: var(--cyan-deep); border-bottom-color: var(--cyan-deep); }

/* Photo gallery: 3-across top row, 4-across bottom row */
.gallery-row {
  display: grid;
  gap: clamp(0.6rem, 0.4rem + 1vw, 1.1rem);
}
.gallery-row + .gallery-row { margin-top: clamp(0.6rem, 0.4rem + 1vw, 1.1rem); }
.gallery-row--3 { grid-template-columns: repeat(3, 1fr); }
.gallery-row--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-row img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .gallery-row--3,
  .gallery-row--4 { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.1rem 2.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.25s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn--cyan { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.btn--cyan:hover { background: var(--white); border-color: var(--white); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* Outline on dark backgrounds */
.section--navy .btn--outline,
.cta .btn--outline,
.services-band .btn--outline,
.hero .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.75); }
.section--navy .btn--outline:hover,
.cta .btn--outline:hover,
.services-band .btn--outline:hover,
.hero .btn--outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* Page heroes sit on a photo, and .page-hero was missing from the list above,
   so this button rendered as navy-on-photo and all but disappeared. A
   translucent navy fill makes it legible over any hero image while staying
   clearly secondary to the solid cyan CTA beside it. */
.page-hero .btn--outline {
  background: rgba(21, 62, 105, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white);
  border-color: transparent;
}
.page-hero .btn--outline:hover {
  background: var(--white);
  color: var(--navy);
  border-color: transparent;
}

/* The live CTA is one wide pill rather than a pair: measured ~908x110 CSS px,
   filling most of the copy column, in the same #1470AF as the nav button. The
   padding and type size are the live primary-button token (1.4em x 3.2em);
   the font-size clamps down so the thing stays usable on a phone. */
.btn--wide {
  width: min(56rem, 100%);
  background: var(--cyan-deep);
  border-color: transparent;
  color: var(--white);
  font-size: clamp(1rem, 0.55rem + 1.5vw, 1.67rem);
  padding: 1.4em 3.2em;
}
.btn--wide:hover { background: #10598a; border-color: transparent; color: var(--white); }

/* Hero pills, as on the live about banner: equal-width solid blue in sentence
   case. The fixed min-width is what makes "Book Appointment" break over two
   lines while "Patient Portal" stays on one, exactly as it does there. */
.btn--hero {
  /* min(), not a bare 18rem: as a plain minimum this floors whatever grid
     column the button sits in, and below ~394px it pushes the lead panel's
     form fields out past the panel edge. */
  min-width: min(18rem, 100%);
  background: var(--cyan-deep);
  border-color: transparent;
  color: var(--white);
  font-size: clamp(1rem, 0.75rem + 0.8vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  padding: 1.4em 3.2em;
}
.btn--hero:hover { background: #10598a; border-color: transparent; color: var(--white); }

/* Larger cousin for a section-closing CTA: the live button measures ~448x162
   CSS px, and the 2.4em side padding is what breaks "Schedule Your
   Consultation" over two lines instead of running it on one. */
.btn--hero-lg {
  min-width: min(28rem, 100%);
  font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.75rem);
  padding: 1.35em 2.4em;
}

.btn--lg { padding: 1.25rem 2.6rem; font-size: 0.88rem; }
.btn--sm { padding: 0.85rem 1.6rem; font-size: 0.74rem; }

/* Inline icons in buttons. Without an explicit size an inline SVG with only a
   viewBox falls back to 300x150. flex:none stops it being squashed. */
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--lg svg { width: 19px; height: 19px; }
/* The arrow eases out on hover — small motion, reads as "go". */
.btn svg { transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.btn-row--center { justify-content: center; }

/* Quiet text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--cyan); gap: 0.85rem; }
.link-arrow svg { width: 18px; height: 18px; }
.section--navy .link-arrow { color: var(--blue-soft); }

/* -----------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
/* The header floats over the page and is transparent until you scroll, matching
   the transparent-header behavior of the Squarespace build. It only overlays
   pages that open with a dark hero; /terms/ and the 404 start on a light section,
   where white-on-white would be unreadable, so they get the solid bar from the
   start and reserve space for it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-on-light);
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
.site-header.is-stuck { box-shadow: 0 6px 24px -18px rgba(21,62,105,0.5); }

/* Pages without a dark hero: push content clear of the fixed bar. */
main { padding-top: var(--header-h); }

[id] { scroll-margin-top: calc(var(--header-h) + 2.5rem); }

/* ---- Overlay mode: page opens with a dark hero ------------------------- */
body:has(main > .hero:first-child) main,
body:has(main > .page-hero:first-child) main { padding-top: 0; }

body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck),
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* The splash video is ungraded footage that runs from near-white to near-black
   within one clip, so white nav text alone is unreadable on its bright frames.
   This scrim is the fix: a soft dark band that sits under the bar only while the
   bar is transparent, tall enough to clear the nav and gone by ~90px below it.
   It reads as part of the video's own vignette rather than as a second header.
   ::before rather than a markup element so nothing new has to be threaded
   through every template that opens with a hero. */
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck)::before,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 90px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(11,32,56,0.62) 0%,
              rgba(11,32,56,0.46) 45%,
              rgba(11,32,56,0.20) 78%,
              rgba(11,32,56,0) 100%);
}

/* Logo, links and buttons invert to white while the bar is transparent. */
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link,
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__toggle,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__toggle,
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__caret,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__caret {
  color: var(--white);
  /* Belt and braces with the scrim above: holds the letterforms together if a
     frame goes blown-out white right under the links. */
  text-shadow: 0 1px 3px rgba(11,32,56,0.55);
}

/* The wordmark is a navy script on a transparent ground, so over the scrim it
   would go muddy the same way the links did. Flipped to solid white for the
   duration of overlay mode; it returns to navy-and-cyan the moment the bar
   solidifies on scroll, and on every page that never had a hero. */
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__logo img,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__logo img {
  filter: brightness(0) invert(1);
}
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link:hover,
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link:hover {
  color: var(--blue-pale);
  /* The light wash from the solid bar would vanish against the scrim; over the
     hero the fill has to come up in brightness instead of down. */
  background-color: rgba(255,255,255,0.14);
}
body:has(main > .hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link[aria-current="page"],
body:has(main > .page-hero:first-child):not(.nav-open) .site-header:not(.is-stuck) .nav__link[aria-current="page"] {
  color: var(--white);
  border-color: var(--cyan);
}

/* The nav CTA is a mid-blue pill outlined in navy to pair with the Gift Card
   pill's border, and it keeps its solid fill over photo
   heroes instead of going ghosted — white-on-blue stays legible on any image. */
.nav__actions .btn--primary,
.nav__drawer-foot .btn--primary {
  background: var(--cyan-deep);
  border-color: var(--navy);
  color: var(--white);
  padding: 1.1rem 2.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
}
/* Desktop only — the drawer's copy of this button keeps the smaller size above.
   Sized to match the Gift Card pill beside it (.btn--sm): same padding, type
   size, tracking and line-height, so the two read as a pair and only the width
   differs with the label. The label is deliberately two lines ("Book an" /
   "Appointment"), stacked the same way "Gift" / "Card" wraps.

   The break is a <br> in the markup rather than a max-width, because .btn is
   inline-flex: a max-width clamps the border box and the longer line just
   spills out of the pill. The <br> lives inside a span so it breaks text -- a
   bare <br> would be blockified into its own flex item and do nothing. */
.nav__actions .btn--primary {
  padding: 0.85rem 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: normal;
}
.nav__cta-label { text-align: center; display: block; }

/* The Gift Card pill sits beside the CTA above and needs the same always-legible
   treatment: over a photo hero the bar is transparent and .btn--outline's default
   navy-on-transparent would vanish, so pin it to a solid white fill instead. */
.nav__actions .btn--outline {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}
.nav__actions .btn--outline:hover { background: var(--navy); color: var(--white); }

.nav__actions .btn--primary:hover,
.nav__drawer-foot .btn--primary:hover {
  background: #10598a;   /* cyan-deep, one step darker */
  border-color: var(--navy);
  color: var(--white);
}

/* Interior banners are shorter, so keep their text out from under the bar. */
.page-hero__inner { padding-top: calc(4rem + var(--header-h)); }

.nav {
  /* Three tracks rather than a flex row: the outer two are both 1fr, so the
     centre track is centred on the bar itself and does not drift when the
     wordmark and the CTA turn out to be different widths. Flex with
     margin-left:auto could only ever centre the links in the space left over. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  min-height: var(--header-h);
  padding-block: 0.85rem;
  /* full-width bar so the logo sits near the left edge, not the centered wrap */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
}
.nav__logo {
  justify-self: start;
  /* The grid track must never be allowed to compress the wordmark: a 1fr track
     will happily shrink below its content, and a replaced element squeezed that
     way stretches rather than clips. max-content pins the track to the image's
     true width so the ratio is structurally safe, not just safe at the widths
     that happen to be tested. */
  min-width: max-content;
}

/* Measured against the live header: the wordmark's ink box is ~8.5% taller
   there than a 58px logo gave us. */
.nav__logo img {
  height: 72px;
  width: auto;
  /* Second line of defence behind min-width above. If anything ever does box
     this in, contain letterboxes it — fill (the default) distorts it. */
  object-fit: contain;
  max-width: none;
  flex: none;
  /* Matches the bar's own background/border fade so the navy-to-white flip
     lands on the same beat as the bar solidifying, not a frame apart. */
  transition: height 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-self: center;
  /* Each link carries its own inline padding — the visual gap between two
     link boxes is this plus 2x that padding. Owner asked for slightly more
     air between items (2026-08-25). */
  gap: clamp(0.4rem, 0.2rem + 0.6vw, 0.9rem);
  list-style: none;
  padding: 0;
}
.nav__link {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  /* Padding, not margin, so the whole box is the hit target rather than just
     the glyphs — roughly 48px tall, which clears the usual touch minimum. */
  display: block;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--cyan-deep); background-color: rgba(21,62,105,0.06); }
.nav__link[aria-current="page"] { border-color: var(--cyan); color: var(--cyan-deep); }

/* ---- About dropdown ------------------------------------------------------
   The label and caret sit side by side; the panel drops below them. It opens
   on hover, on :focus-within (so tabbing into it works with no JS), and when
   main.js flips the caret's aria-expanded for click/touch. */
.nav__item--menu { position: relative; display: flex; align-items: center; }
.nav__caret {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -0.35rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
}
.nav__caret svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.nav__caret:hover { color: var(--cyan-deep); }
.nav__item--menu:hover .nav__caret svg,
.nav__item--menu:focus-within .nav__caret svg,
.nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
/* Invisible bridge over the gap, so moving the pointer down to the panel
   doesn't cross dead space and close it. */
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu,
.nav__item--menu.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.nav__menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: calc(var(--radius) - 4px);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  /* The overlay-mode text-shadow on the header would smear on a white panel. */
  text-shadow: none;
}
.nav__menu a:hover { background: var(--mist); color: var(--cyan-deep); }
.nav__menu a[aria-current="page"] { color: var(--cyan-deep); }

.nav__actions { display: flex; align-items: center; justify-self: end; gap: 0.75rem; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--navy);
}
.nav__toggle svg { width: 28px; height: 28px; }

/* Hamburger swaps to a close cross while the drawer is open. */
.nav__toggle .nav__icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .nav__icon--close { display: block; }

/* Mobile drawer: a full-screen panel rather than a dropdown under the bar, so
   the links get the whole viewport and nothing of the page shows through.

   It opens as a circle wiping out from the toggle button — the panel is
   literally uncovered, which is the same idea as the hero's "uncover timeless
   beauty". JS sets --nav-x/--nav-y to the button's center and --nav-r to the
   distance from there to the farthest corner. Kept out of `display: none` so
   the whole thing can animate. */
.nav__drawer {
  position: fixed;
  inset: 0;
  /* Below .site-header (100) so the logo and close button stay on top. */
  z-index: 90;
  background: var(--white);
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) clamp(2rem, 1rem + 4vw, 3.5rem);
  visibility: hidden;
  pointer-events: none;
  clip-path: circle(0px at var(--nav-x, 100%) var(--nav-y, 0px));
  /* visibility flips only after the circle has closed, so nothing pops. */
  transition: clip-path 0.5s var(--ease), visibility 0s linear 0.5s;
}
.nav__drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(var(--nav-r, 150vmax) at var(--nav-x, 100%) var(--nav-y, 0px));
  transition: clip-path 0.55s var(--ease), visibility 0s;
}

/* Links rise into place behind the wipe, one after another, so the panel
   assembles rather than just appearing. No delays on the way out — closing
   should feel immediate. */
.nav__drawer-links li,
.nav__drawer-foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}
.nav__drawer.is-open .nav__drawer-links li,
.nav__drawer.is-open .nav__drawer-foot { opacity: 1; transform: none; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(1) { transition-delay: 0.14s; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(2) { transition-delay: 0.20s; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(3) { transition-delay: 0.26s; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(4) { transition-delay: 0.32s; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(5) { transition-delay: 0.38s; }
.nav__drawer.is-open .nav__drawer-links li:nth-child(6) { transition-delay: 0.44s; }
.nav__drawer.is-open .nav__drawer-foot { transition-delay: 0.38s; }

/* The circle would read as motion sickness fuel; fall back to a plain cut. */
@media (prefers-reduced-motion: reduce) {
  .nav__drawer,
  .nav__drawer.is-open { clip-path: none; }
  .nav__drawer-links li,
  .nav__drawer-foot { transform: none; }
}

.nav__drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  align-self: center;
}
.nav__drawer-links a {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}
/* "Meet the Team" tucks under About as a smaller, lighter line. */
.nav__drawer-sub { list-style: none; padding: 0; margin: -0.5rem 0 0.25rem; }
.nav__drawer-links .nav__drawer-sub a {
  padding: 0.25rem 0;
  font-size: clamp(1.15rem, 0.95rem + 1.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--cyan-deep);
}
.nav__drawer-foot { text-align: center; }
.nav__drawer-tel {
  display: block;
  margin-bottom: 1.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cyan-deep);
}
.nav__drawer .btn { width: 100%; max-width: 22rem; }
/* Two stacked pills now (Gift Card + Book an Appointment) — space them apart;
   the tel link above already carries its own margin-bottom. */
.nav__drawer .btn + .btn { margin-top: 0.75rem; }

/* Page must not scroll behind the open panel. */
body.nav-open { overflow: hidden; }

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(760px, 100vh, 1200px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--navy);
}
.hero__media { position: absolute; inset: 0; }
.hero__pause {
  position: absolute;
  right: clamp(0.75rem, 2vw, 2rem);
  bottom: clamp(0.75rem, 2vw, 2rem);
  z-index: 4;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20,44,76,0.55);
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero__pause:hover { background: rgba(20,44,76,0.85); }
.hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero__pause-icon { width: 20px; height: 20px; fill: #fff; }
.hero__pause-icon--play { display: none; }
.hero__pause.is-paused .hero__pause-icon--pause { display: none; }
.hero__pause.is-paused .hero__pause-icon--play { display: block; }
.hero__media img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,44,76,0.55) 0%, rgba(14,44,76,0.42) 45%, rgba(14,44,76,0.78) 100%);
}

/* ---- Video splash (home) ----------------------------------------------- */
/* The splash plays whole at every size. The section takes its height from the
   clip instead of from the viewport, so the video spans the full width and the
   16:9 master is never cropped — it just scales with the window. The header
   still floats over it transparently, as it does on the photo heroes. */
.hero--video {
  display: block;
  min-height: 0;
  /* .hero's place-items leaks in: Chrome 151+ applies justify-items to block
     layout too, shrink-wrapping the video to its natural width. */
  place-items: normal;
}
.hero--video .hero__media { position: static; inset: auto; }
.hero--video .hero__video {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 10vw, 8rem);
  color: var(--white);
}
.hero__logo {
  width: min(620px, 78vw);
  margin: 0 auto 2rem;
  filter: brightness(0) invert(1);
}
.hero h1, .hero h2 { color: var(--white); }
.hero__sub {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  max-width: 640px;
  margin-inline: auto;
}

/* Page banner for interior pages */
.page-hero {
  position: relative;
  min-height: clamp(760px, 100vh, 1200px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--navy);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay { position: absolute; inset: 0; background: rgba(14,44,76, var(--hero-overlay, 0.62)); }
/* Services hero: heading left-justified, sitting in the right half */
.page-hero--right .page-hero__inner {
  display: grid;
  justify-items: end;
  text-align: left;
}
.page-hero--right .page-hero__inner > * { width: min(760px, 100%); }
/* Live site sets this banner heading at the h2 scale, not h1. Kept as an <h1>
   in the markup so the page still has one, but sized to match. */
.page-hero--right h1 { font-size: var(--fs-h2); }
/* Team hero: at the full h1 max, "behind your transformation." runs past the
   1400px wrap and drops the last word onto a third line. Capped at 5.25rem,
   which keeps that line intact. */
.page-hero--team h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.25rem); }
@media (max-width: 760px) {
  .page-hero--right .page-hero__inner { justify-items: start; }
}
/* Team hero: text left-justified against the left edge of the wrap, rather
   than the centered default the other banners use. */
.page-hero--left .page-hero__inner { text-align: left; }

/* About hero: centered on a narrow measure. The live banner sets its heading at
   ~3.5rem inside a ~55rem column, which is what breaks the line after "for"
   rather than after "Destination". */
.page-hero--center .page-hero__inner > * {
  width: min(55rem, 100%);
  margin-inline: auto;
}
/* Larger than the live banner's ~3.5rem. The heading holds "Your Destination
   for" together with non-breaking spaces, so the only break is before
   "Timeless" — which also means the clamp has to bottom out small enough for
   that unbreakable run to fit a narrow phone. */
.page-hero--center h1 {
  font-size: clamp(1.85rem, 1.1rem + 3.8vw, 4.2rem);
  line-height: 1.15;
}
.page-hero--center .btn-row {
  margin-top: clamp(2rem, 1rem + 2.6vw, 4.4rem);
  gap: clamp(1rem, -1rem + 7vw, 7.5rem);
  align-items: stretch;
}
.page-hero__inner { position: relative; z-index: 2; color: var(--white); padding-block: 4rem; }
.page-hero h1 { color: var(--white); }
nav.eyebrow a { display: inline-block; padding-block: 0.4rem; }
.page-hero--tight .page-hero__inner { padding-block: calc(4rem + var(--header-h)) 4rem; }
/* These heroes carry long, sentence-length SEO headlines, so they step down
   from the display scale to keep the line count sane. */
.page-hero--tight h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 4.4rem); line-height: 1.1; }
.page-hero--tight .page-hero__inner > p { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .page-hero--tight h1 { line-height: 1.2; }
}
.page-hero p { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); font-weight: 300; margin-top: 1rem; }

/* Outlined display word, carried over from the original site's hero treatment.
   The stroke color can't be currentColor: on this same element `color` is
   transparent, so currentColor would resolve to transparent and the word would
   vanish. It defaults to white (these heroes sit on photos) and takes an
   override via --stroke-color. Width is in em so it stays proportional as the
   display type scales, with a floor so it never thins to a hairline. */
.stroke {
  -webkit-text-stroke: max(1px, 0.018em) var(--stroke-color, #fff);
  color: transparent;
}
/* Without text-stroke support the word would be invisible rather than outlined. */
@supports not (-webkit-text-stroke: 1px #fff) {
  .stroke { color: inherit; }
}
.blue-word { color: var(--blue-soft); }

/* -----------------------------------------------------------------------------
   7. SERVICE + TEAM CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem);
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* For counts that don't divide evenly (the five services), flex-wrap centers
   the final row instead of stranding one card against the left edge. */
.cards--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cards--center > .card { flex: 1 1 300px; max-width: 400px; }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.card__media { overflow: hidden; background: var(--blue-pale); }
.card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
a.card:hover .card__media img { transform: scale(1.05); }

.card__body { padding: 1.6rem 1.5rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 1.22rem; margin-bottom: 0.6rem; }
.card__body p { color: var(--text-on-light-muted); font-size: 0.97rem; font-weight: 300; }
.card__body .link-arrow { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* Team cards: plain, no card chrome — cut-out portraits on white (matches original) */
.card--team {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
a.card--team:hover { transform: none; box-shadow: none; }
.card--team .card__media {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.card--team .card__media img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
a.card--team:hover .card__media img { transform: none; }
.card--team .card__body {
  text-align: center;
  align-items: center;
  padding: 1.1rem 0 0;
}
.card--team .card__body h3 { font-size: 1.45rem; margin-bottom: 1rem; }
.card--team .card__biobtn {
  margin-top: 0.25rem;
  background: var(--cyan-deep);
  border-color: var(--cyan-deep);
  color: var(--white);
}
.card--team .card__biobtn:hover { background: var(--navy); border-color: var(--navy); }

/* Row of office photos under a split section (About page). Portrait crops,
   three across at every width so the row reads as one set. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.3rem + 1.2vw, 1.5rem);
  list-style: none;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  margin-bottom: clamp(2rem, 1.2rem + 2vw, 3rem);
}
.photo-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Team row: all four providers on screen at once, two per row on smaller
   screens, so nobody is hidden behind an arrow. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-grid > li { display: flex; }
.team-grid > li > .card { flex: 1; }
/* Names wrap to two lines on narrow screens; keep the buttons on one line. */
.team-grid .card__biobtn { margin-top: auto; }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}
@media (max-width: 480px) {
  .team-grid .card--team .card__body h3 { font-size: 1.15rem; }
}

/* ---- Card carousel ------------------------------------------------------
   Native scroll-snap track: it already works by swipe/trackpad with no JS,
   and the arrows just drive scrollBy(). --per-view sets how many cards are
   on screen; the item basis is derived from it so the gaps stay exact. */
.carousel {
  --per-view: 3;
  --carousel-gap: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem);
  position: relative;
}
.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item {
  flex: 0 0 calc(
    (100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view)
  );
  scroll-snap-align: start;
  display: flex;
}
.carousel__item > .card { flex: 1; }

.carousel__nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(44px, 3.4vw, 58px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cyan-deep);
  color: var(--white);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel__nav:hover { background: var(--navy); }
.carousel__nav svg { width: 45%; height: 45%; }
.carousel__nav--prev { left: 0; transform: translate(-40%, -50%); }
.carousel__nav--next { right: 0; transform: translate(40%, -50%); }
/* Disabled at either end, and both hidden outright when nothing overflows. */
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }
.carousel[data-carousel-static] .carousel__nav { display: none; }

@media (max-width: 1100px) {
  .carousel { --per-view: 2; }
}
@media (max-width: 700px) {
  .carousel { --per-view: 1; }
  .carousel__nav--prev { transform: translate(0, -50%); }
  .carousel__nav--next { transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------------------
   8. SERVICE DETAIL ROWS (services page)
   -------------------------------------------------------------------------- */
.service-row + .service-row { margin-top: clamp(3rem, 1.5rem + 5vw, 6rem); }
.service-row h2 { margin-bottom: 1rem; }

/* -----------------------------------------------------------------------------
   9. TEAM BIOS (team page)
   -------------------------------------------------------------------------- */
/* Bio layout: name + portrait in the left column, intro video in the right,
   then the copy running full width beneath in two columns. Members without a
   video keep the plain two-column split (portrait left, copy right) — hence
   the :has() switch rather than a modifier class on every article. */
.bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
/* A rule between members, as on the live page. The old single margin is split
   either side of it so the line sits in the middle of the gap. */
.bio + .bio {
  margin-top: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  padding-top: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  border-top: 1px solid var(--line-on-light);
}
.bio__name { margin-bottom: 1.4rem; }
.bio__copy > * + * { margin-top: 1rem; }
.bio__copy p { color: var(--text-on-light-muted); font-weight: 300; }
.bio__media img { aspect-ratio: 3 / 4; object-position: center top; }

.bio__head { text-align: center; }
/* Measured off the live page: its portrait runs ~26% of the viewport against a
   ~42% video, where ours sat at ~22% — so the photo gets about a fifth wider
   and the pair reads in the same proportion. */
.bio__media { max-width: min(70%, 24rem); margin-inline: auto; }

/* Every portrait is sized the same way whether or not there's a video beside
   it, so all four read as one set. That leaves the 3/4 portrait taller than
   the 16/9 video, so the video drops to start level with the top of the
   portrait rather than the top of the name — anchored to the photo instead of
   floating against nothing. The offset mirrors the name block, derived from
   the same font-size clamp so it tracks with the type. (It was 3.75rem when a
   credential line sat under the name; that line is gone, so this is now the
   name's own line box plus its margin.) */
.bio:has(.bio__video) .bio__video {
  margin-top: calc(1.25 * clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem) + 1.4rem);
}

/* Default h2 runs to 4.12rem, which wrapped every name onto two lines here. */
.bio__name {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  text-wrap: balance;
}

/* With a video the copy drops below both columns and splits in two. Paragraph
   spacing switches from margin-top to margin-bottom: a top margin on whichever
   paragraph starts the second column would push it out of line with the first. */
.bio:has(.bio__video) .bio__copy {
  grid-column: 1 / -1;
  columns: 2;
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  /* The grid's own row gap already separates this from the media row. */
  margin-top: 0;
}
.bio:has(.bio__video) .bio__copy > * {
  margin-top: 0;
  margin-bottom: 1.15rem;
  break-inside: avoid;
}

/* Intro video: fills the right column, matching the portrait's rounding and
   shadow. The sources are 16/9, and `contain` letterboxes rather than crops if
   a future one isn't. */
.bio__video { margin: 0; }
.bio__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   10. TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote { text-align: center; max-width: 900px; margin-inline: auto; }
.quote blockquote {
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--white);
  text-wrap: balance;
  /* In em, not px: the font-size shrinks with the viewport, so a pixel cap
     would let the line get *longer* in characters as the screen narrows.
     This holds the measure at roughly the same line count all the way down. */
  max-width: 21em;
  margin-inline: auto;
}
.quote figcaption {
  margin-top: 1.75rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-soft);
  font-weight: 600;
}

/* ---- Testimonial: pale-blue band with wavy, blue-outlined edges -------- */
.testimonial-band {
  position: relative;
  overflow: hidden;
  background: var(--blue-pale);
  /* The top wave eats into the top, and the CTA's wave below extends the
     blue band downward — so to sit visually centered the quote needs an
     extra wave-height of top padding vs bottom. */
  padding-top: calc(clamp(40px, 5vw, 70px) + clamp(70px, 10vw, 150px));
  padding-bottom: clamp(40px, 5vw, 70px);
}
.testimonial-band .wrap { position: relative; z-index: 2; }
.testimonial-band .quote blockquote {
  color: var(--navy);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.7rem);
}
.testimonial-band .quote figcaption { color: var(--navy-soft); }
/* blue line drawn along the wave edge */
.wave__line {
  stroke: var(--cyan-deep);
  stroke-width: 6px;
  vector-effect: non-scaling-stroke;
}
/* CTA top wave is filled with the band color so it flows over the photo */
.wave__fill--band { fill: var(--blue-pale); }

/* ---- Services "Get in touch": animated flowing-blue band -------------- */
.getintouch {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(480px, 68vh, 780px);
  display: grid;
  place-items: center;
  text-align: center;
  background: #3a78bd;
}
.getintouch > .wave { z-index: 2; height: clamp(60px, 7vw, 110px); }
.git-wave .wave__line { stroke: #2f6cb2; stroke-width: 6px; }
/* animated flowing gradient */
.git-bg {
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(42% 50% at 28% 26%, rgba(228,238,249,0.95) 0%, rgba(228,238,249,0) 58%),
    radial-gradient(46% 52% at 80% 72%, rgba(38,98,172,0.45) 0%, rgba(38,98,172,0) 55%),
    radial-gradient(50% 55% at 58% 55%, rgba(205,225,244,0.75) 0%, rgba(205,225,244,0) 52%),
    linear-gradient(125deg, #5a95cf 0%, #7fa9d8 42%, #9cc0e6 58%, #5a95cf 100%);
  background-size: 200% 200%, 230% 230%, 190% 190%, 300% 300%;
  filter: blur(24px) saturate(1.05);
  animation: git-flow 20s ease-in-out infinite alternate;
}
@keyframes git-flow {
  0%   { background-position: 10% 20%, 90% 10%, 10% 90%, 0% 50%; }
  50%  { background-position: 55% 45%, 35% 60%, 65% 25%, 100% 50%; }
  100% { background-position: 95% 85%, 5% 95%, 45% 5%, 0% 50%; }
}
/* moving diagonal light sheen */
.git-sheen {
  position: absolute;
  inset: -40% -20%;
  z-index: 1;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,0.4) 50%, transparent 62%);
  mix-blend-mode: screen;
  animation: git-sheen 11s ease-in-out infinite alternate;
}
@keyframes git-sheen {
  0%   { transform: translateX(-16%); }
  100% { transform: translateX(16%); }
}
/* content */
.git-inner { position: relative; z-index: 3; }
.git-title { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-weight: 700; line-height: 1.05; }
.git-q { color: var(--navy-deep); font-size: clamp(2rem, 1.3rem + 3.4vw, 3.7rem); }
.git-link {
  color: var(--navy-deep);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.7rem);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
  transition: color 0.2s ease;
}
.git-link:hover { color: #06182B; }
/* pause / play control (CSS-only via the hidden checkbox) */
.git-pause-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.git-pause {
  position: absolute;
  right: clamp(0.75rem, 2vw, 2rem);
  bottom: clamp(0.75rem, 2vw, 2rem);
  z-index: 4;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20,44,76,0.55);
  cursor: pointer;
  transition: background 0.2s ease;
}
.git-pause:hover { background: rgba(20,44,76,0.85); }
.git-pause-input:focus-visible ~ .git-pause { outline: 2px solid #fff; outline-offset: 2px; }
.git-pause__icon { width: 20px; height: 20px; fill: #fff; }
.git-pause__icon--play { display: none; }
.git-pause-input:checked ~ .git-bg,
.git-pause-input:checked ~ .git-sheen { animation-play-state: paused; }
.git-pause-input:checked ~ .git-pause .git-pause__icon--pause { display: none; }
.git-pause-input:checked ~ .git-pause .git-pause__icon--play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .git-bg, .git-sheen { animation: none; }
}

/* -----------------------------------------------------------------------------
   11. CTA BAND
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-on-dark);
  text-align: center;
}
.cta__media { position: absolute; inset: 0; }
.cta__media img,
.cta__video { width: 100%; height: 100%; object-fit: cover; }
/* Nobody misses a decorative background loop, and it saves the download. */
@media (prefers-reduced-motion: reduce) {
  .cta__video { display: none; }
  .cta__media { background: url("/images/cta-splash-poster.jpg") center / cover no-repeat; }
}
.cta__overlay { position: absolute; inset: 0; background: rgba(14,44,76,0.55); }
.cta__inner { position: relative; z-index: 2; padding-block: calc(var(--section-y) * 2.6); }
.cta h2 { color: var(--white); }
.cta p { color: var(--text-on-dark-muted); margin-top: 1rem; }

/* ---- Our Services: accent-blue band with line-art icons --------------- */
.services-band {
  position: relative;
  overflow: hidden;
  background: var(--cyan-deep);
  color: var(--white);
  /* extra top/bottom room so the wavy edges clear the content */
  padding-block: calc(var(--section-y) + clamp(35px, 5vw, 90px));
}
/* soft glows behind the cards show through their translucent fills */
.services-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 16% 24%, rgba(32,187,237,0.38), transparent 65%),
    radial-gradient(46rem 32rem at 85% 18%, rgba(190,214,238,0.26), transparent 65%),
    radial-gradient(60rem 40rem at 50% 92%, rgba(14,44,76,0.55), transparent 70%),
    radial-gradient(34rem 26rem at 70% 60%, rgba(32,187,237,0.22), transparent 65%);
}
.services-band h2, .services-band h3 { color: var(--white); }
/* wavy top & bottom edges (white, matching the sections above/below) */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(70px, 10vw, 150px);
  display: block;
  z-index: 1;
  pointer-events: none;
}
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; }
.services-band .wrap { position: relative; z-index: 2; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.4rem + 1.8vw, 2.25rem);
  align-items: start;
}
/* each column stacks its item(s); the gap is deliberately large so the second
   item reads as its own service rather than a continuation of the first */
.svc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  text-align: center;
}
.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
a.svc:hover { transform: translateY(-3px); opacity: 0.92; }
.svc__icon {
  width: clamp(210px, 22vw, 330px);
  height: auto;
  margin-bottom: 0.9rem;
}
.svc h3 { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); margin-bottom: 0.35rem; text-align: center; }
.svc p { font-size: 0.85rem; color: var(--text-on-light-muted); max-width: 30ch; margin-inline: auto; }
/* white text only on the blue Our Services band */
.services-band .svc p { color: var(--white); }
/* larger, tighter blocks on the blue band so each of the six services reads
   as a distinct unit instead of one running column of text */
.services-band .svc h3 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  margin-bottom: 1rem;
}
/* Live body settings for these blurbs: 1.08rem at weight 300 on 1.87 leading,
   and a line long enough that the short ones sit on a single line. */
.services-band .svc p {
  max-width: 21rem;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.87;
}
/* On the blue band each service is a glass card so all five read as buttons */
.services-band .svc {
  width: 100%;
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem) clamp(1.15rem, 0.7rem + 1.5vw, 2rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.25s var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.services-band a.svc:hover {
  transform: translateY(-6px);
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.19), rgba(255,255,255,0.09));
  border-color: rgba(32,187,237,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 60px -30px rgba(14,44,76,0.8);
}
.services-band a.svc:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.services-band .svc__icon {
  width: clamp(180px, 17vw, 260px);
  transition: transform var(--dur) var(--ease);
}
.services-band a.svc:hover .svc__icon { transform: translateY(-5px); }
.services-band .svc-grid { align-items: stretch; }
/* The six tiles sit in two balanced rows of three; each tile carries its
   pathway as a small tag, so the grid stays even while the grouping reads. */
.services-band .svc-grid + .svc-grid { margin-top: clamp(1rem, 0.4rem + 1.8vw, 2.25rem); }
.svc__tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-soft, #9fd4ee);
  margin-bottom: 0.6rem;
}
/* Concerns We Treat: four text tiles on their own band, same glass cards */
.services-band .svc-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .services-band .svc-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.services-band .svc p { margin-bottom: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }
/* The cards slide in rather than fade: fading a translucent fill over the
   band's glows reads as a color shift, so opacity stays fixed and only the
   position animates. */
.js .services-band .svc-grid.reveal { opacity: 1; transform: none; }
.js .services-band .svc-grid.reveal .svc { transform: translateY(26px); }
.js .services-band .svc-grid.reveal.is-visible .svc {
  transform: none;
  animation: svc-rise 0.75s var(--ease) backwards;
}
.services-band .svc-grid.reveal.is-visible .svc:nth-child(2) { animation-delay: 0.09s; }
.services-band .svc-grid.reveal.is-visible .svc:nth-child(3) { animation-delay: 0.18s; }
@keyframes svc-rise {
  from { transform: translateY(26px); }
  to { transform: none; }
}
.svc__go {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: var(--radius-pill);
  color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.svc__go svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
a.svc:hover .svc__go {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
a.svc:hover .svc__go svg { transform: translateX(4px); }
/* Closes the homepage services grid; tighter than the onlight page's version */
.services-band .svc-cta { margin-top: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
  .services-band .svc-quad { grid-template-columns: 1fr; }
}

/* ---- Services page "Our Services": dark icons on white, navy text ------ */
.svc-grid--onlight {
  gap: clamp(2.25rem, 1.2rem + 3vw, 4rem) clamp(2rem, 1rem + 2.5vw, 4rem);
}
/* uniform-height icon slot so the text below lines up across columns;
   icons are bottom-aligned within it */
.svc-grid--onlight .svc__iconwrap {
  height: clamp(160px, 17vw, 250px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.svc-grid--onlight .svc__icon {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin-bottom: 0;
}
/* left-most (Neurotoxin) and right-most (Med-Grade) icons a bit smaller */
#neurotoxin .svc__icon,
#skin-care .svc__icon { max-height: 72%; }
/* middle (Dermal Fillers) icon just slightly reduced */
#dermal-fillers .svc__icon { max-height: 80%; }
.svc-grid--onlight .svc h3 { color: var(--navy); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); margin-bottom: 0.9rem; }
.svc-grid--onlight .svc p { color: var(--text-on-light-muted); max-width: 36ch; font-weight: 300; }
/* SkinPen items have no icon — nudge them to align with the iconed columns */
.svc-grid--onlight .svc--text { padding-top: 0.25rem; }
/* Closes the services list — needs more air above it than a default btn-row. */
.svc-cta { margin-top: clamp(4rem, 2.4rem + 4.6vw, 7rem); }

/* ---- Our Approach: blue band with floating syringes ------------------- */
.approach {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  text-align: center;
}
.approach__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin-inline: auto;
}
/* "Our Approach" — light "Our", bold "Approach" */
.approach__title {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(2.8rem, 2rem + 3.6vw, 4.8rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.approach__title-light { font-weight: 400; }
/* bold sub-heading with italic "every" */
.approach__intro {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  line-height: 1.35;
  margin-inline: auto;
}
/* Statement: the plan set large, light, and airy; services carry the accent */
.approach__statement {
  max-width: 56ch;
  margin: clamp(1.5rem, 1rem + 1.2vw, 2.25rem) auto 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.6;
  text-wrap: balance;
  color: var(--text-on-dark);
}
.approach__accent {
  color: var(--cyan);
  font-weight: 600;
  white-space: nowrap;
}

/* Our Approach buttons: chunky solid-blue pills, pyramid layout */
.approach__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
}
.approach__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
}
.approach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 240px;
  min-height: 92px;
  padding: 1rem 2.4rem;
  border-radius: 999px;
  background: #1c6cb2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,0.55);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.approach-btn:hover {
  background: #17588f;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(0,0,0,0.6);
}
.approach-btn--lg {
  min-width: 340px;
  min-height: 112px;
  padding: 1.1rem 3rem;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 560px) {
  .approach-btn, .approach-btn--lg { min-width: min(320px, 82vw); }
}
.approach__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.approach__syringe {
  position: absolute;
  --size: 1;
  width: calc(clamp(90px, 12vw, 170px) * var(--size));
  height: auto;
  /* white syringe art reads as a soft light-blue tint on the navy band */
  opacity: 0.10;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.15));
  /* --rot: base tilt, preserved through the drift animation */
  --rot: 0deg;
  transform: rotate(var(--rot));
  animation: syringe-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
/* drifts along a gentle loop and returns to start, spinning slightly as it goes */
@keyframes syringe-float {
  0%   { transform: translate(0, 0) rotate(var(--rot)); }
  25%  { transform: translate(14px, -18px) rotate(calc(var(--rot) + 6deg)); }
  50%  { transform: translate(-10px, -30px) rotate(calc(var(--rot) - 5deg)); }
  75%  { transform: translate(-18px, -12px) rotate(calc(var(--rot) + 3deg)); }
  100% { transform: translate(0, 0) rotate(var(--rot)); }
}
.approach__syringe--1 { top: 6%;  left: -2%;  --rot: -18deg; --dur: 17s; --delay: -2s; }
.approach__syringe--2 { top: 12%; right: 4%;  --rot: 28deg;  --dur: 21s; --delay: -8s; opacity: 0.08; }
.approach__syringe--3 { bottom: 8%; left: 7%;  --rot: 42deg;  --dur: 15s; --delay: -5s; opacity: 0.12; }
.approach__syringe--4 { bottom: -3%; right: -2%; --rot: -32deg; --dur: 23s; --delay: -11s; }
.approach__syringe--5 { top: 44%; left: 2%;   --rot: 72deg;  --dur: 19s; --delay: -3s; opacity: 0.07; }
.approach__syringe--6 { top: 38%; right: 8%;  --rot: -8deg;  --dur: 25s; --delay: -14s; opacity: 0.09; }
.approach__syringe--7  { top: -4%;    left: 23%;  --rot: 15deg;  --dur: 20s; --delay: -6s;  --size: 0.72; opacity: 0.07; }
.approach__syringe--8  { top: 1%;     right: 21%; --rot: -52deg; --dur: 26s; --delay: -17s; --size: 0.8;  opacity: 0.06; }
.approach__syringe--9  { bottom: 0%;  left: 29%;  --rot: -24deg; --dur: 18s; --delay: -9s;  --size: 1.1;  opacity: 0.10; }
.approach__syringe--10 { bottom: 5%;  right: 26%; --rot: 62deg;  --dur: 22s; --delay: -13s; --size: 0.85; opacity: 0.08; }
.approach__syringe--11 { top: 57%;    left: 13%;  --rot: 100deg; --dur: 28s; --delay: -4s;  --size: 0.65; opacity: 0.06; }
.approach__syringe--12 { top: 63%;    right: 14%; --rot: -70deg; --dur: 16s; --delay: -19s; --size: 0.95; opacity: 0.07; }
.approach__syringe--13 { bottom: -5%;  left: 47%;  --rot: 35deg;  --dur: 24s; --delay: -2s;  --size: 0.9;  opacity: 0.08; }
.approach__syringe--14 { bottom: 2%;   left: 17%;  --rot: -85deg; --dur: 19s; --delay: -15s; --size: 0.7;  opacity: 0.06; }
.approach__syringe--15 { top: 20%;   left: 12%;   --rot: 58deg;    --dur: 18s;  --delay: -7s;   --size: 0.78;  opacity: 0.07; }
.approach__syringe--16 { top: 26%;   right: 31%;  --rot: -40deg;   --dur: 27s;  --delay: -16s;  --size: 0.68;  opacity: 0.06; }
.approach__syringe--17 { top: 34%;   left: 34%;   --rot: 112deg;   --dur: 21s;  --delay: -1s;   --size: 0.62;  opacity: 0.06; }
.approach__syringe--18 { top: 7%;    left: 41%;   --rot: -15deg;   --dur: 24s;  --delay: -12s;  --size: 0.85;  opacity: 0.07; }
.approach__syringe--19 { top: 47%;   right: 35%;  --rot: 80deg;    --dur: 17s;  --delay: -20s;  --size: 0.72;  opacity: 0.06; }
.approach__syringe--20 { top: 53%;   left: 24%;   --rot: -58deg;   --dur: 29s;  --delay: -5s;   --size: 0.9;   opacity: 0.08; }
.approach__syringe--21 { top: 71%;   left: 39%;   --rot: 22deg;    --dur: 19s;  --delay: -14s;  --size: 0.66;  opacity: 0.06; }
.approach__syringe--22 { top: 73%;   right: 23%;  --rot: -95deg;   --dur: 23s;  --delay: -3s;   --size: 0.8;   opacity: 0.07; }
.approach__syringe--23 { top: 17%;   right: 45%;  --rot: 48deg;    --dur: 26s;  --delay: -18s;  --size: 0.6;   opacity: 0.06; }
.approach__syringe--24 { top: 42%;   left: 46%;   --rot: -30deg;   --dur: 30s;  --delay: -10s;  --size: 0.75;  opacity: 0.07; }
.approach__syringe--25 { bottom: 15%; right: 7%;  --rot: 135deg;   --dur: 16s;  --delay: -22s;  --size: 1.05;  opacity: 0.09; }
.approach__syringe--26 { top: 29%;   left: 4%;    --rot: -72deg;   --dur: 25s;  --delay: -8s;   --size: 0.88;  opacity: 0.08; }
.approach__syringe--27 { top: 67%;   right: 3%;   --rot: 18deg;    --dur: 20s;  --delay: -25s;  --size: 0.95;  opacity: 0.08; }
.approach__syringe--28 { bottom: 19%; left: 32%;  --rot: -110deg;  --dur: 22s;  --delay: -6s;   --size: 0.7;   opacity: 0.06; }
@media (max-width: 700px) {
  .approach__syringe--5,
  .approach__syringe--6,
  .approach__syringe--7,
  .approach__syringe--8,
  .approach__syringe--11,
  .approach__syringe--12,
  .approach__syringe--15,
  .approach__syringe--16,
  .approach__syringe--17,
  .approach__syringe--18,
  .approach__syringe--19,
  .approach__syringe--20,
  .approach__syringe--21,
  .approach__syringe--22,
  .approach__syringe--23,
  .approach__syringe--24,
  .approach__syringe--28 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .approach__syringe { animation: none; }
}
.motion-paused .approach__syringe { animation-play-state: paused; }

/* -----------------------------------------------------------------------------
   12. CONTACT + FORMS
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
/* Column headings, not section statements. These sit as bare <h2> outside a
   .section-head, so without this they fall back to the full display scale and
   render at ~66px over a half-width column. */
.contact-grid h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.25;
}

.info-block + .info-block { margin-top: 2.25rem; }
/* Visit Our Office: three uniform contact tiles, each the same shape -
   a small label, one prominent value, one quiet action line. */
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: center;
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  align-items: stretch;
}
.contact-tiles .tile .eyebrow { display: block; margin-bottom: 0.75rem; }
.contact-value {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}
.contact-value--sm { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.5; }
/* The email address must stay on one line; sized so it fits the tile. */
.contact-value--email { font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.05rem); white-space: nowrap; overflow-wrap: normal; }
.contact-value a { color: inherit; text-decoration: none; }
.contact-value a:hover { color: var(--cyan-deep); }
.tile address.contact-value { font-style: normal; }
.tile .contact-sub { color: var(--text-on-light-muted); font-size: 0.95rem; margin-bottom: 0; }
/* Stacked variant inside the town pages' contact column, next to the form. */
.contact-grid .tile + .tile, .contact-grid .info-block + .tile { margin-top: 1.25rem; }
.info-block h3 { font-size: 1.05rem; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
/* Plain links in a contact block read as accent text, but a .btn inside one
   keeps its own colors - otherwise the button label loses its contrast. */
.info-block a:not(.btn):not(.address-link) { color: var(--cyan-deep); font-weight: 500; }
.info-block a:not(.btn):not(.address-link):hover { text-decoration: underline; }
.info-block address { font-style: normal; color: var(--text-on-light-muted); }

.address-link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.2s var(--ease);
}
.address-link:hover,
.address-link:focus-visible {
  color: var(--cyan-deep);
  text-decoration: underline;
}
.section--navy .address-link:hover,
.section--navy .address-link:focus-visible { color: var(--white); }

.form { display: grid; gap: 1.15rem; min-width: 0; }
/* minmax(0, …) rather than 1fr: a bare 1fr floors the track at the input's
   intrinsic width, which overflows the row on a narrow phone. */
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }

.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-on-light);
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  width: 100%;
  min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(32,187,237,0.18);
}

.form__status {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.form__status.is-error { display: block; background: #FDECEC; color: #8A1F1F; }
.form__status.is-success { display: block; background: #E8F7EE; color: #14602F; }

/* Honeypot - hidden from humans, tempting to bots */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* -----------------------------------------------------------------------------
   RATES LIST (about)
   Treatment name against its blurb, no cards and no imagery — the live page
   sets these out as a plain two-column list.
   -------------------------------------------------------------------------- */
.rates {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 2.6vw, 4.5rem);
  max-width: 62rem;
  margin-inline: auto;
}
.rates__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 0.8rem + 3vw, 4.5rem);
  align-items: start;
}
.rates__name {
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
}
.rates__detail p { font-size: 0.95rem; line-height: 1.7; }
.rates__detail a {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--cyan-deep);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.rates__detail a:hover { color: var(--navy); }
@media (max-width: 700px) {
  .rates__row { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* -----------------------------------------------------------------------------
   LEAD PANEL (about)
   Inquiry form on the theme's darkAccent blue, copy on the left.
   -------------------------------------------------------------------------- */
.lead-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  background: var(--blue-soft);
  padding: clamp(2rem, 1.2rem + 3.6vw, 4.5rem);
  color: var(--white);
}
/* Grid children default to min-width:auto, which lets a wide child push the
   column past the panel. */
.lead-panel > * { min-width: 0; }
.lead-panel h2 { color: var(--white); }
.lead-panel__copy p { margin-top: 1.5rem; font-weight: 600; font-size: 0.95rem; }
/* On the blue the uppercase micro-labels would fade out, so the form's labels
   run white here and keep their "(required)" note lighter. */
.lead-panel .field label,
.lead-panel .field__group-label { color: var(--white); }
.lead-panel .field label span { opacity: 0.8; font-weight: 400; }
.lead-panel .field__group-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: -0.4rem;
}
.lead-panel .field input,
.lead-panel .field textarea { border-color: transparent; }
.lead-panel .field textarea { min-height: 110px; }
@media (max-width: 860px) {
  .lead-panel { grid-template-columns: 1fr; }
}

/* Flat closing bands, in place of a photo CTA. The live site uses the paler
   lightAccent on the about page and the deeper darkAccent (white type) on the
   team page. */
.band-pale,
.band-soft { text-align: center; }
.band-pale { background: var(--blue-pale); }
.band-soft { background: var(--blue-soft); }
.band-pale h2,
.band-soft h2 { max-width: 22ch; margin-inline: auto; }
.band-pale h2 { color: var(--navy-soft); }
.band-soft h2 { color: var(--white); }

/* -----------------------------------------------------------------------------
   13. BOOKING TILES
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 0.8rem + 2vw, 2.5rem);
}
.tile {
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.2rem + 2vw, 3.25rem);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.tile h2 { font-size: var(--fs-h3); margin-bottom: 0.85rem; }
.tile p { color: var(--text-on-light-muted); font-weight: 300; margin-bottom: 1.75rem; }

/* ---- Resource articles ------------------------------------------------ */
/* Article pages are reading pages: the site h1 scale overwhelms a text-first
   layout, so titles sit closer to a section heading. */
.article-title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.18;
}
/* Page-footer review block: labelled references, plus the reviewer line once
   a review date is set. */
.page-review {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-on-light);
}
.page-review__title {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.article-byline {
  color: var(--text-on-light-muted);
  font-size: 0.95rem;
  margin: 0.75rem 0 2.5rem;
}
.article-refs { list-style: none; padding: 0; }
.article-refs li { margin-bottom: 0.6rem; }
.article-refs a { color: var(--cyan-deep); font-weight: 500; }

/* ---- Brand tables (dermal fillers / collagen stimulation) ------------- */
.table-wrap { overflow-x: auto; }
.brand-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.brand-table th, .brand-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-on-light);
  vertical-align: top;
}
.brand-table thead th { color: var(--navy); font-weight: 600; }
.brand-table tbody th { font-weight: 500; white-space: nowrap; }
.brand-table td { color: var(--text-on-light-muted); font-weight: 300; }
.brand-table-note { margin-top: 1.5rem; color: var(--text-on-light-muted); }
.brand-table-note a { color: var(--cyan-deep); font-weight: 500; }

/* The "can't find a time?" note under the booking tiles. It sat tight against
   the tiles above and its button, which read as cramped. */
.booking-note { margin-top: clamp(4rem, 2.4rem + 4.6vw, 7rem); }
.booking-note .lead { line-height: 1.65; }
.booking-note .btn-row { margin-top: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }

/* -----------------------------------------------------------------------------
   14. LONG-FORM (terms)
   -------------------------------------------------------------------------- */
.prose > * + * { margin-top: 1.15rem; }
.prose > .btn-row { margin-top: 2rem; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2.75rem; }
.prose h3 { font-size: 1.15rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--text-on-light-muted); font-weight: 300; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.5rem; }
.prose a:not(.btn):not(.address-link) {
  color: var(--cyan-deep);
  font-weight: 500;
  text-decoration-line: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: color 0.2s var(--ease);
}
.prose a:not(.btn):not(.address-link):hover,
.prose a:not(.btn):not(.address-link):focus-visible {
  color: var(--navy);
  text-decoration-line: underline;
}

.section--navy .prose p,
.section--navy .prose li { color: var(--text-on-dark); }
.section--navy .prose strong { color: var(--white); font-weight: 600; }
.section--navy .prose a:not(.btn):not(.address-link) { color: var(--blue-soft); }
.section--navy .prose a:not(.btn):not(.address-link):hover,
.section--navy .prose a:not(.btn):not(.address-link):focus-visible { color: var(--white); }

/* -----------------------------------------------------------------------------
   13b. CHIP ROW (treatments offered, under a page intro)
   The treatment list used to be a clause inside a 60-word paragraph. As chips
   it is scannable and the intro drops to one sentence.
   -------------------------------------------------------------------------- */
.chip-row {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.chip-row li {
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--navy);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   14. PLACE LIST (the communities a county also serves)
   Two dozen town names set as a sentence is a wall. Columns let a reader scan
   for their own town, which is the only reason they are reading the list.
   -------------------------------------------------------------------------- */
.place-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 12rem;
  column-gap: 2rem;
}
.place-list li {
  break-inside: avoid;
  padding: 0.3rem 0 0.3rem 1.1rem;
  position: relative;
  color: var(--text-on-light-muted);
  font-weight: 300;
  font-size: 0.97rem;
}
.place-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

/* -----------------------------------------------------------------------------
   14a. CHECKLIST (prevention and treatment)
   Actionable items belong in a list a reader can scan, not a paragraph.
   -------------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  color: var(--text-on-light-muted);
  font-weight: 300;
}
.checklist svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.3rem;
  color: var(--cyan-deep);
  flex: none;
}
.checklist a { color: var(--cyan-deep); font-weight: 500; }
.checklist a:hover, .checklist a:focus-visible { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   14b. NUMBERED STEPS (concern pages)
   The "how we treat this" section runs to three ~450-character paragraphs.
   Numbered, labelled steps make it scannable instead of a wall.
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.35rem; align-items: start; }
.step__num {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step__title { font-size: 1.12rem; color: var(--navy); margin-bottom: 0.6rem; letter-spacing: 0.01em; }
.step__body p { color: var(--text-on-light-muted); font-weight: 300; }
.step__list { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; }
.step__list li { color: var(--text-on-light-muted); font-weight: 300; }
.step__list li::marker { color: var(--cyan); }
.step__body a:not(.btn):not(.address-link) { color: var(--cyan-deep); font-weight: 500; }
.step__body a:not(.btn):not(.address-link):hover,
.step__body a:not(.btn):not(.address-link):focus-visible { text-decoration: underline; }
@media (max-width: 560px) {
  .step { gap: 1rem; }
  .step__num { width: 2.15rem; height: 2.15rem; font-size: 0.85rem; }
}

/* -----------------------------------------------------------------------------
   14c. LONG-FORM TYPE SCALE (concerns + locations)
   The display scale is built for the marketing pages, where a section heading
   is a full-width statement with air around it. These pages put a heading
   every few hundred words in a narrow measure, so at --fs-h2 (up to 66px) the
   headings outweighed the prose they introduced. They step down one tier.
   -------------------------------------------------------------------------- */
.longform .section-head { margin-bottom: 1.85rem; }
.longform .section-head h2 {
  font-size: clamp(1.5rem, 1.12rem + 1.35vw, 2.28rem);
  line-height: 1.22;
}
.longform .section-head .eyebrow { margin-bottom: 0.55rem; }
.longform .prose h2 { font-size: clamp(1.3rem, 1.08rem + 0.8vw, 1.75rem); margin-top: 2.25rem; }
.longform .prose h3 { font-size: 1.08rem; margin-top: 1.75rem; }
/* The page H1 is a sentence-length SEO headline; it does not need display size. */
.longform .page-hero--tight h1 { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.35rem); }

/* -----------------------------------------------------------------------------
   PRODUCTS (products page)
   -------------------------------------------------------------------------- */
.products__logo { width: min(22rem, 70%); height: auto; margin: 0 auto 1.25rem; }
.products .section-head .lead { max-width: 40rem; margin-inline: auto; }

.product-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
}
.product {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
/* The pack shots are on a flat pale-gray studio ground; matching it here makes
   the photo edge disappear into the card. */
.product__media { position: relative; background: #f6f6f6; }
.product__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.product__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--cyan-deep);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.product__tag {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-deep);
}
.product__name { margin-top: 0.35rem; font-size: var(--fs-h4); line-height: 1.25; color: var(--navy); }
.product__size { margin-top: 0.2rem; font-size: 0.9rem; color: var(--text-on-light-muted); }
.product__desc { margin-top: 0.85rem; font-size: 0.95rem; }
.product__includes { margin-top: 0.65rem; font-size: 0.88rem; color: var(--text-on-light-muted); }
.product__includes strong { color: var(--navy); font-weight: 600; }
/* margin-top:auto pins the price to the card floor so a row lines up. */
.product__price {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.product__now { font-size: 1.5rem; font-weight: 600; color: var(--navy); }
.product__was { color: var(--text-on-light-muted); }
.product__list-note {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.products__note { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.products__note a { color: var(--cyan-deep); font-weight: 500; }

/* -----------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
/* White footer, three centered columns — matching the live site. Body copy runs
   at the live body token (1.08rem / 1.87 leading) and links are the accent
   blue, underlined; the headings are the live h4 size in the body color. */
.site-footer {
  background: var(--white);
  color: var(--navy-soft);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.footer__col {
  text-align: center;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.87;
}
/* Everything in a column is separated by one step; a label and the link it
   introduces ("Book Online" / "Schedule Appointment Now") stay paired. */
.footer__col > * + * { margin-top: 0.95rem; }
.footer__col h2 + * { margin-top: 1.5rem; }
.footer__label + p { margin-top: 0; }

.footer__grid h2 {
  font-size: 1.57rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy-soft);
  margin-bottom: 0;
}
.footer__label { font-weight: 600; }
.footer__grid ul { list-style: none; padding: 0; }
.footer__grid li + li { margin-top: 0.8rem; }
.footer__grid a {
  color: var(--cyan-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--dur) var(--ease);
}
.footer__grid a:hover { color: var(--navy); }
.footer__grid address { font-style: normal; }
/* Phone and address read as plain text on the live site, not as blue links,
   but they stay tappable — the underline shows up on hover. */
.footer__quiet { color: inherit; text-decoration: none; }
.footer__quiet:hover { color: var(--cyan-deep); text-decoration: underline; }
.footer__link-strong { font-weight: 600; }

.socials { display: flex; justify-content: center; gap: 1.5rem; }
.socials a {
  display: grid;
  place-items: center;
  color: var(--navy-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.socials a:hover { color: var(--cyan-deep); }
.socials svg { width: 48px; height: 48px; }

.footer__bar {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(40, 65, 93, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-on-light-muted);
}
.footer__bar a { color: var(--cyan-deep); }

/* -----------------------------------------------------------------------------
   16. 404
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.error-page .code {
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  font-weight: 600;
  color: var(--cyan-deep);
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   17. MOTION
   -------------------------------------------------------------------------- */
/* Reveals are opt-in: the hiding rule is scoped to .js, which the shared header
   sets before any of this content paints. Without JavaScript the page renders
   fully visible rather than blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"]  { transition-delay: 0.09s; }
.reveal[data-delay="2"]  { transition-delay: 0.18s; }
.reveal[data-delay="3"]  { transition-delay: 0.27s; }
.reveal[data-delay="4"]  { transition-delay: 0.36s; }
.reveal[data-delay="5"]  { transition-delay: 0.45s; }
.reveal[data-delay="6"]  { transition-delay: 0.54s; }
.reveal[data-delay="7"]  { transition-delay: 0.63s; }
.reveal[data-delay="8"]  { transition-delay: 0.72s; }
.reveal[data-delay="9"]  { transition-delay: 0.81s; }
.reveal[data-delay="10"] { transition-delay: 0.90s; }
.reveal[data-delay="11"] { transition-delay: 0.99s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* Socials lead, so the two content columns pair up on the row below. */
  .footer__col:first-child { grid-column: 1 / -1; }
}

@media (min-width: 901px) and (max-width: 1240px) {
  .nav { gap: 1.25rem; padding-inline: 1.25rem; }
  .nav__logo img { height: 55px; }
  .nav__links { gap: 1rem; }
  .nav__link { font-size: 0.88rem; letter-spacing: 0.05em; padding: 0.5rem 0.4rem; }
  /* Contact left the nav, so even the mid-width band affords a little air. */
  .nav__links { gap: 0.35rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 80px; }
  /* .nav__links is display:none here, so it leaves the grid entirely; without
     this the CTA/toggle would land in the middle track instead of the right. */
  .nav { grid-template-columns: 1fr auto; }
  /* Pinned explicitly: below 900px the desktop 72px would otherwise push the
     bar past its own min-height and make the mobile header taller than the
     drawer trigger needs it to be. */
  .nav__logo img { height: 56px; }
  .nav__links, .nav__actions .btn { display: none; }
  .nav__toggle { display: block; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media img, .split__media--tall img { aspect-ratio: 16 / 10; }
  /* Single column: portrait, then video, then the copy in one run. The copy
     rule repeats the :has() to match the specificity of the desktop block —
     a bare .bio would lose to .bio:has(.bio__video) despite the media query. */
  .bio { grid-template-columns: 1fr; }
  .bio__media { max-width: 20rem; }
  /* .bio__media also carries .split__media, so the 16/10 rule above would crop
     these to a letterbox. Restate 3/4 to keep the headshots matching desktop. */
  .bio__media img { aspect-ratio: 3 / 4; object-position: center top; }
  .bio:has(.bio__video) .bio__copy { columns: 1; }
  /* Stacked, so there's no portrait to line up with. */
  .bio:has(.bio__video) .bio__video { margin-top: 0; }
}

@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  /* The video splash sizes itself from the clip, so it opts out of the
     viewport-height floor that would letterbox it. */
  .hero:not(.hero--video),
  .page-hero { min-height: 78vh; }
}