/* Hallmark · genre: civic · macrostructure: parity-conversion (hosted-factory standard) · theme: business-derived (DHC brand: logo sky/navy + site raspberry) · display-font: Plus Jakarta Sans (the client's own) · nav: topbar + sticky header + mega · footer: navy index
 * Design direction derived FROM the business: logo #4CA9E3/#28507E, site action color #F2295B, Elementor kit border #DFE4E1, font Plus Jakarta Sans.
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * Client: Dental Hygiene Centers, Fort Myers FL (dental-hygiene-centers) · v2 rebuild 2026-07-08
 *
 * v3 "lighter blue" theme · 2026-08-18. The client-approved /light/ concept (formerly light.css, scoped to
 * body.lt) is folded in here and applies site-wide. What changed, in one breath: the kit's near-black
 * #0A2232 is retired everywhere in favour of the logo navy #28507E; every band that has no photograph
 * behind it (trust strip, reviews band, credential chips) is light; the closing CTA is a bright blue band
 * instead of a near-black one; the homepage hero is a SPLIT (copy on its own light panel, photograph shown
 * clean beside it, rating badge on an opaque white card). Interior page heroes (.phero) share the same
 * gradient, bloom and photo plate so the whole site reads as one system.
 *
 * Governing rule: NO light text sits on a photograph anywhere. No text-shadows, no strokes.
 * Contrast floor: every text/background pair >= 4.5:1 (WCAG AA); rating-star graphics >= 3:1.
 *   white on #2578B6 = 4.73   white on #2273B0 = 5.06   white on #28507E = 8.27
 *   #28507E on #E8F3FB = 7.34  #53637A on #F3F9FD = 5.76  #1E6CA8 on #fff = 5.58   #B07800 on #fff = 3.8
 * The literal logo blue #4CA9E3 is only 2.6:1 against white, so it is used as a surface, rule, ring and
 * hover colour — never as a background behind text. */

/* Fonts load via <link preconnect + stylesheet> in each page head (no @import chain). */

:root {
  --navy: #28507E;          /* logo navy - headings, dark bands, footer */
  --navy-deep: #28507E;     /* was the kit's near-black #0A2232 - retired; every "deep" surface is the logo navy now */
  --navy-2: #1E3F63;
  --sky: #4CA9E3;           /* logo sky blue - surfaces, rules, rings, hovers (2.6:1 on white: never behind text) */
  --sky-deep: #1E6CA8;      /* AA-safe link/accent on white (5.58) */
  --sky-band: #2273B0;      /* brightest blue that still carries white body text (5.06) */
  --sky-band-lt: #2578B6;   /* lightest gradient stop allowed under white text (4.73) */
  --sky-tint: #E8F3FB;      /* icon circles, soft washes, light band fill */
  --sky-line: #C5E0F4;      /* visible blue hairline */
  --berry: #F2295B;         /* their site's action color */
  --berry-deep: #C81243;    /* AA-safe button fill */
  --ink: #10243A;
  --muted: #53637A;
  --line: #DCE9F3;          /* hairlines pick up the blue */
  --bg: #F3F9FD;            /* page wash */
  --surface: #fff;
  --dark-ink: #EAF1F8;
  --star: #B07800;          /* rating stars on light surfaces (3.8:1 on white, 3.4:1 on the tint); stars on a blue band keep the gold #F7B500 */

  --head: "Plus Jakarta Sans", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.55rem;
  --text-xl: clamp(1.6rem, 3.2vw, 2.4rem);
  --text-display: clamp(2.1rem, 3.6vw + 0.6rem, 3.4rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 200ms;

  --maxw: 74rem;
  --radius: 14px; --radius-sm: 10px;
  --shadow-card: 0 12px 30px -22px rgba(30, 108, 168, .55);
  --shadow-pop: 0 22px 55px -30px rgba(30, 108, 168, .5);
  --z-dropdown: 100; --z-sticky: 200;
  --measure: 64ch;
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip;
  background: var(--surface); color: var(--ink);
  font-family: var(--body); font-size: var(--text-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--head); font-weight: 700; line-height: 1.14;
  letter-spacing: -0.02em; color: var(--navy); margin: 0 0 var(--space-md);
  overflow-wrap: anywhere; min-width: 0;
}
h1 { font-size: var(--text-display); font-weight: 800; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }
p, ul, ol, dl { margin: 0 0 var(--space-md); max-width: var(--measure); }
a { color: var(--sky-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: var(--z-sticky); background: var(--navy-deep); color: #fff; padding: var(--space-sm) var(--space-md); }
.skip:focus { left: var(--space-md); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
/* eyebrow: uppercase label with a short logo-blue rule above it */
.eyebrow {
  position: relative; padding-top: .95rem;
  font-family: var(--head); font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; font-size: 0.78rem; color: var(--sky-deep); margin: 0 0 var(--space-xs);
}
.eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--sky) 0%, var(--sky-deep) 100%);
}

/* ---- buttons (8 states) --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 1rem var(--head); padding: 0.85rem 1.6rem; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 0; white-space: nowrap;
  background: var(--berry-deep); color: #fff;
  box-shadow: 0 12px 26px -14px rgba(200, 18, 67, .65);
  transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover, .btn.is-hover { background: var(--berry); color: #fff; transform: translateY(-1.5px); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--navy-deep); outline-offset: 3px; }
.btn:disabled, .btn.is-disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { opacity: .7; pointer-events: none; }
.btn[data-state="error"] { background: #8f1030; }
.btn[data-state="success"] { background: #17694b; }
/* ghost = white outline, for use ON a blue band only (transparent fill) */
.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
/* outline = the light-surface counterpart (white fill, navy text, logo-blue ring) */
.btn--outline {
  background: #fff; color: var(--navy); border: 2px solid var(--sky);
  box-shadow: 0 10px 24px -18px rgba(30, 108, 168, .7);
}
.btn--outline:hover { background: var(--sky-tint); color: var(--navy); border-color: var(--sky-deep); }
.btn--navy { background: var(--navy); box-shadow: 0 12px 26px -14px rgba(40,80,126,.6); }
.btn--navy:hover { background: var(--navy-2); }

/* ---- topbar: bright blue band ------------------------------------------------ */
.topbar { background: linear-gradient(90deg, #28507E 0%, #23649B 100%); color: #E1EDF8; font-size: 0.85rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: 0.45rem; flex-wrap: wrap; }
.topbar__meta { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: #BFE0F7; }
.topbar .star { color: #F7B500; }   /* gold stays: this is a blue band, not a light surface */
@media (max-width: 40rem) { .topbar__meta--hours { display: none; } }

/* ---- header + nav ------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); border-bottom: 1px solid var(--sky-line); box-shadow: 0 1px 0 rgba(76,169,227,.18); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 0.55rem; }
.nav__mark { display: flex; align-items: center; text-decoration: none; }
.nav__mark img { height: 44px; width: auto; }
.nav__links { display: none; align-items: stretch; gap: 0.15rem; font-family: var(--head); font-weight: 600; font-size: 0.95rem; }
.nav__links > a, .nav__dd > a {
  display: inline-flex; align-items: center; color: var(--ink); text-decoration: none;
  padding: 0.6rem 0.75rem; border-radius: 8px; white-space: nowrap;
}
.nav__links > a:hover, .nav__dd > a:hover { color: var(--sky-deep); background: var(--sky-tint); }
.nav__links a[aria-current="page"] { color: var(--sky-deep); }
.nav__phone { color: var(--muted) !important; font-weight: 500 !important; }
.nav__cta { margin-left: 0.4rem; padding: 0.6rem 1.25rem !important; border-radius: 999px;
  background: var(--berry-deep); color: #fff !important; }
.nav__cta:hover { background: var(--berry) !important; color: #fff !important; }

/* mega menu (hover + focus-within, no role=menu) */
.nav__dd { position: relative; display: flex; align-items: stretch; }
.nav__dd > a::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 0.45rem; opacity: .7; }
.nav__panel { position: absolute; top: 100%; left: -0.5rem; padding-top: 0.6rem; display: none; z-index: var(--z-dropdown); }
.nav__panel > div {
  background: var(--surface); border: 1px solid var(--sky-line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 1.1rem; min-width: 34rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1.4rem;
}
.nav__panel .col-h { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0.35rem 0 0.2rem; grid-column: 1 / -1; }
.nav__panel .col-h:first-child { margin-top: 0; }
.nav__panel a { display: block; padding: 0.4rem 0.5rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.nav__panel a:hover { background: var(--sky-tint); color: var(--sky-deep); }
.nav__dd:hover .nav__panel, .nav__dd:focus-within .nav__panel { display: block; }

/* mobile disclosure */
.nav__m { position: relative; }
.nav__m > summary { list-style: none; cursor: pointer; font: 600 0.9rem var(--head); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.5rem 1.05rem; }
.nav__m > summary::-webkit-details-marker { display: none; }
.nav__m[open] > summary { background: var(--bg); }
.nav__m ul { position: absolute; right: 0; z-index: var(--z-dropdown); width: min(20rem, 88vw); margin: 0.5rem 0 0; padding: 0.6rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.nav__m li + li { border-top: 1px solid var(--line); }
.nav__m a { display: block; padding: 0.7rem 0.5rem; text-decoration: none; font: 600 1rem var(--head); color: var(--ink); }
@media (min-width: 64rem) { .nav__links { display: flex; } .nav__m { display: none; } }

/* ---- shared hero actions row (home hero + interior .phero) ------------------------ */
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.hero__acts a:not(.btn) { color: var(--navy); font-weight: 600; white-space: nowrap; }

/* ============================================================================
   HOME hero (.hero) — ONE section, two treatments, switched at 64rem.

   >= 64rem (laptop and up): the client-approved treatment. The photograph goes
   full-bleed behind the copy under a pale blue wash carrying navy type.
   <  64rem: the wash is dropped entirely and the photograph returns as a card
   beneath the copy with an opaque white rating badge — the treatment already
   live on phones. Held there on purpose until the phone rendering of the wash
   is signed off; /light-photo/ previews that (see .hero--all below).

   This is ONE section with ONE h1 rather than two sections that show and hide,
   because site_audit.py hard-gates exactly one h1 per page. Both <img> tags
   point at the same file, so whichever one is hidden costs no extra request.

   The wash's opacity SCHEDULE is load-bearing. Dark type over a photo fails
   where the photo is DARK, so the wash holds >= 0.955 alpha across the copy
   column (capped at 34rem) and only thins past it. Verified by sampling the
   composited pixels behind every line of hero text, never from the alpha maths.
   ========================================================================== */

/* ---- phones + tablets: light panel, copy, then the photo as a card ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip; color: var(--ink);
  background: linear-gradient(157deg, #FFFFFF 0%, #F1F8FD 42%, var(--sky-tint) 100%);
  border-bottom: 1px solid var(--sky-line);
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.75rem, 6vw, 4.5rem);
}
/* soft blue light bloom, purely decorative */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: auto -12% -55% 42%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,169,227,.28) 0%, rgba(76,169,227,0) 68%);
}
.hero .hero__bg { display: none; }
/* grid, not block siblings: it keeps the serving line's bottom margin from
   collapsing into the gap above the photo, which is what the previous hero did */
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 3.25rem); align-items: center; }
.hero .eyebrow { color: var(--sky-deep); }
/* the copy column is narrower than a full-bleed hero, so the display size steps
   down a notch to keep the headline's line breaks balanced */
.hero h1 {
  color: var(--navy); max-width: 14ch;
  font-size: clamp(2.05rem, 2.5vw + 0.75rem, 2.95rem);
}
.hero h1 .accent { color: var(--sky-deep); }
.hero__lede { font-size: var(--text-md); color: var(--muted); max-width: 44ch; }
.hero__serving { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--muted); }
/* the rating rides the card badge at this width, so the inline line is redundant */
.hero__stars { display: none; }

/* photo: clean, bright, no scrim, with a logo-blue plate offset behind it */
.hero__card { position: relative; }
.hero__card::before {
  content: ""; position: absolute; z-index: 0; inset: 1rem -1rem -1rem 1rem;
  border-radius: 22px; background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  opacity: .24;
}
.hero__card img {
  position: relative; z-index: 1;
  width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 4 / 3.15;
  box-shadow: 0 32px 64px -34px rgba(30, 108, 168, .62);
}
/* rating badge: an OPAQUE white card overlapping the photo, never type on the photo */
.hero__badge {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .85rem;
  margin: -3.25rem 0 0 .75rem;
  background: #fff; border: 1px solid var(--sky-line); border-radius: 16px;
  padding: .8rem 1.15rem; box-shadow: 0 18px 40px -24px rgba(30, 108, 168, .6);
}
.hero__badge .n { font: 800 1.75rem var(--head); color: var(--navy); line-height: 1; }
.hero__badge .s { color: var(--star); letter-spacing: .1em; font-size: .95rem; line-height: 1.2; }
.hero__badge .c { color: var(--muted); font-size: var(--text-sm); }
.hero__badge p { margin: 0; max-width: none; }
@media (max-width: 40rem) {
  .hero__badge { margin-top: -2.5rem; padding: .7rem .95rem; gap: .65rem; }
  .hero__badge .n { font-size: 1.5rem; }
}

/* ---- laptop and up: full-bleed photograph under the pale blue wash ---------- */
@media (min-width: 64rem) {
  .hero {
    background: none; border-bottom: 0;
    padding-block: clamp(3rem, 8vw, 6.5rem);
  }
  .hero::before { display: none; }
  .hero .wrap { display: block; }
  .hero .hero__bg {
    display: block; position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.08) contrast(1.02);
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      /* 96deg, not steeper: at 101deg the wash drifts thinner toward the bottom-left
         and the rating line lands on visibly darker pixels than the headline */
      linear-gradient(96deg,
        rgba(236,245,252, .99)  0%,
        rgba(233,244,252, .985) 34%,
        rgba(229,242,251, .972) 46%,
        rgba(215,235,250, .78)  55%,
        rgba(198,227,247, .40)  63%,
        rgba(184,220,244, .16)  73%,
        rgba(172,214,242, .04)  86%,
        rgba(170,213,242, 0)    100%),
      linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(243,249,253,.85) 100%);
  }
  .hero__col { max-width: 34rem; }
  /* these run deeper than the flat-panel palette: measured against the darkest
     composited pixel each run actually sits on, the standard values were on
     or under their thresholds */
  .hero .eyebrow { color: #1A6099; }
  .hero h1 { max-width: 17ch; font-size: var(--text-display); }
  .hero__lede { color: #22394F; max-width: 46ch; }
  .hero__serving { color: #2C3F52; }
  .hero__stars { display: block; color: #7C5504; letter-spacing: 0.12em; }
  .hero__stars small { color: #2F4457; letter-spacing: 0; margin-left: 0.5em; }
  .hero__card { display: none; }
}

/* ---- .hero--all: /light-photo/ only ----------------------------------------
   Opts into the wash at phone widths too, so the phone rendering can be signed
   off before it is turned on for everyone. The photo's shadows are lifted here
   rather than the wash being made opaque: an opaque wash keeps the type safe
   but erases the family into a pale blue rectangle. Worst measured pair 3.58:1.
   To ship this to everyone, delete this block and move its declarations onto
   the base .hero rules (and drop .hero__card from the markup).
   -------------------------------------------------------------------------- */
@media (max-width: 63.9375rem) {
  .hero--all {
    background: none; border-bottom: 0;
    padding-block: clamp(3rem, 8vw, 6.5rem);
  }
  .hero--all::before { display: none; }
  .hero--all .hero__bg {
    display: block; position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    object-position: 62% center; filter: brightness(1.22) saturate(1.04) contrast(.94);
  }
  .hero--all::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(168deg,
        rgba(237,246,253, .93) 0%,
        rgba(232,243,252, .88) 38%,
        rgba(226,240,251, .84) 62%,
        rgba(216,236,250, .80) 82%,
        rgba(206,231,248, .76) 100%);
  }
  .hero--all .hero__col { max-width: none; }
  .hero--all .hero__card { display: none; }
  .hero--all .eyebrow { color: #1A6099; }
  .hero--all h1 { max-width: 17ch; font-size: var(--text-display); }
  .hero--all .hero__lede { color: #22394F; }
  .hero--all .hero__serving { color: #2C3F52; }
  .hero--all .hero__stars { display: block; color: #7C5504; letter-spacing: 0.12em; }
  .hero--all .hero__stars small { color: #2F4457; letter-spacing: 0; margin-left: 0.5em; }
}

/* ---- interior page hero: light panel + floating image, same family as the home hero ---- */
.phero {
  position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(157deg, #FFFFFF 0%, #F1F8FD 42%, var(--sky-tint) 100%);
  border-bottom: 1px solid var(--sky-line);
}
.phero::before {
  content: ""; position: absolute; z-index: -1; inset: auto -12% -55% 42%;
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,169,227,.22) 0%, rgba(76,169,227,0) 68%);
}
.phero__grid { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.phero h1 { max-width: 22ch; }
.phero__sub { font-size: var(--text-md); color: var(--muted); max-width: 52ch; }
.phero__img { position: relative; }
.phero__img::before {
  content: ""; position: absolute; z-index: 0;
  inset: 1.35rem -1.35rem -1.35rem 1.35rem;
  border-radius: 20px; background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  opacity: .24;
}
.phero__img img {
  position: relative; z-index: 1;
  border-radius: var(--radius); box-shadow: 0 32px 64px -34px rgba(30, 108, 168, .62);
  width: 100%; object-fit: cover; aspect-ratio: 3 / 2;
}
.phero .hero__acts a:not(.btn) { color: var(--navy); }
@media (min-width: 60rem) { .phero__grid { grid-template-columns: 1.15fr 0.85fr; } }

/* ---- trust / stat strip: light blue band ------------------------------------------- */
.trust {
  background: linear-gradient(180deg, var(--sky-tint) 0%, var(--bg) 100%);
  color: var(--ink); border-bottom: 1px solid var(--sky-line);
}
.trust .wrap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); padding-block: var(--space-xl); }
.trust .stat { border-left: 3px solid var(--sky); padding-left: var(--space-md); }
.trust .num { font: 800 1.7rem var(--head); font-variant-numeric: tabular-nums; color: var(--navy); }
.trust .num .star { color: var(--star); font-size: 1.1rem; margin-left: 2px; }
.trust .lbl { color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 48rem) { .trust .wrap { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---- credential chips --------------------------------------------------------------- */
.creds { background: #fff; border-bottom: 1px solid var(--line); }
.creds .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: var(--space-md); }
.creds .lead-lbl { font: 600 0.8rem var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 0.4rem; }
.chip, .chips li { background: var(--surface); border: 1px solid var(--sky-line); border-radius: 999px; padding: 0.35rem 0.95rem; font-size: var(--text-sm); color: var(--ink); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; max-width: none; }

/* ---- sections ------------------------------------------------------------------------ */
.sec { padding-block: var(--space-3xl); }
.sec--tight { padding-block: var(--space-2xl); }
.bg-soft { background: var(--bg); border-block: 1px solid var(--line); }
.bg-navy { background: var(--navy-deep); color: var(--dark-ink); }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: var(--dark-ink); }
.sec__head { max-width: 52ch; margin-bottom: var(--space-xl); }
.sec__head--split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); max-width: none; }
.sec__kicker { color: var(--muted); max-width: 56ch; }

/* ---- service icon cards ----------------------------------------------------------------- */
.svc { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
@media (min-width: 60rem) { .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc a {
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-lg); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.svc a:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: 0 18px 40px -26px rgba(30,108,168,.6); }
.svc a:hover h3 { color: var(--sky-deep); }
.svc .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--sky-tint) 0%, #D5EAF8 100%);
  color: var(--sky-deep); box-shadow: inset 0 0 0 1px var(--sky-line);
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.svc a:hover .ico { background: linear-gradient(140deg, var(--sky) 0%, var(--sky-deep) 100%); color: #fff; box-shadow: none; }
.svc .ico svg { width: 24px; height: 24px; }
.svc h3 { margin: 0; transition: color var(--dur-short) var(--ease-out); }
.svc p { margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: none; flex-grow: 1; }
.svc .go { color: var(--berry-deep); font-weight: 600; font-size: var(--text-sm); font-family: var(--head); }

/* ---- split media band (image + text, alternating) ------------------------------------------ */
.split { display: grid; gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.split__media img { border-radius: var(--radius); box-shadow: 0 26px 55px -32px rgba(30,108,168,.6); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split .checks { list-style: none; padding: 0; }
.split .checks li { padding: 0.5rem 0 0.5rem 2rem; position: relative; }
.split .checks li::before {
  content: ""; position: absolute; left: 0; top: 0.72rem; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--sky-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6CA8' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 0.7rem; background-position: center; background-repeat: no-repeat;
}
.split .checks strong { color: var(--navy); }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--flip .split__media { order: -1; }
}

/* ---- mini cards (why-us grids on interior pages) ------------------------------------------------ */
.mini { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); list-style: none; padding: 0; max-width: none; }
@media (min-width: 60rem) {
  .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.mini li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-lg); box-shadow: var(--shadow-card); }
.mini strong { display: block; font-family: var(--head); color: var(--navy); font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.mini p { margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: none; }

/* ---- process steps: bright blue numerals (white on #2273B0 = 5.06) ------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; max-width: var(--measure); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-md); padding: var(--space-md) 0; }
.steps li::before {
  content: counter(step); width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--sky-band-lt) 0%, var(--sky-deep) 100%);
  color: #fff; font: 700 1.05rem var(--head);
  box-shadow: 0 10px 22px -14px rgba(30,108,168,.85);
  display: grid; place-items: center;
}
.steps strong { display: block; color: var(--navy); font-family: var(--head); margin-bottom: var(--space-2xs); }
.steps p { margin: 0; color: var(--muted); }
/* horizontal 3-up variant for interior pages */
@media (min-width: 60rem) {
  .steps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); max-width: none; }
  .steps--row li { display: block; padding: 0; }
  .steps--row li::before { margin-bottom: var(--space-sm); }
}

/* ============================================================================
   REVIEWS BAND — light. No photograph sits behind it, so it goes fully light:
   pale blue wash, white review cards, navy type, amber stars.
   ========================================================================== */
.revband {
  background: linear-gradient(180deg, var(--sky-tint) 0%, #F6FBFE 100%);
  color: var(--ink); border-block: 1px solid var(--sky-line);
}
.revband .wrap { padding-block: var(--space-3xl); }
.revband__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.revband__score { border-left: 4px solid var(--sky); padding-left: var(--space-md); }
.revband__score .big { font: 800 3.2rem var(--head); color: var(--navy); line-height: 1; }
.revband__score .stars { color: var(--star); letter-spacing: 0.15em; }
.revband__score .src { color: var(--muted); font-size: var(--text-sm); }
.revband h2 { margin: 0; max-width: 20ch; color: var(--navy); }
.revband a:not(.btn) { color: var(--sky-deep); }
.revband a:not(.btn):hover { color: var(--navy); }
.revs { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); max-width: none; }
@media (min-width: 48rem) and (max-width: 60rem) {
  .revs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revs .rev:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* review card: the same white card everywhere it appears (reviews band, .sec, .bg-soft) */
.rev {
  background: var(--surface); border: 1px solid var(--sky-line); border-radius: var(--radius);
  padding: var(--space-lg); margin: 0; box-shadow: 0 14px 34px -26px rgba(30,108,168,.65);
}
.rev__stars { color: var(--star); letter-spacing: 0.12em; font-size: var(--text-sm); margin: 0 0 var(--space-xs); }
.rev blockquote { margin: 0 0 var(--space-sm); font-size: var(--text-base); line-height: 1.55; color: var(--ink); }
.rev figcaption { color: var(--muted); font-size: var(--text-sm); }

/* ---- areas ------------------------------------------------------------------------------------------ */
.areas { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0; list-style: none; max-width: none; }
.areas a {
  display: inline-block; background: var(--surface); border: 1px solid var(--sky-line); border-radius: 999px;
  padding: 0.55rem 1.15rem; text-decoration: none; color: var(--navy); font: 600 var(--text-sm) var(--head); white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.areas a:hover { border-color: var(--sky-deep); background: var(--sky-tint); transform: translateY(-2px); }

/* ---- FAQ ---------------------------------------------------------------------------------------------- */
.faq { max-width: var(--measure); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); font: 600 var(--text-base) var(--head); color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--berry-deep); font-size: var(--text-lg); line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--sky-deep); }
.faq details > div { padding: 0 var(--space-lg) var(--space-md); color: var(--muted); }

/* ---- gallery strip (image row band) ---------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; padding: 0; list-style: none; }
.gallery img { border-radius: var(--radius); width: 100%; object-fit: cover; object-position: center 25%; aspect-ratio: 4 / 3; box-shadow: 0 16px 38px -28px rgba(30,108,168,.6); }
@media (min-width: 60rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- guide/post teaser cards ------------------------------------------------------------------------------------ */
.posts { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); max-width: none; padding: 0; list-style: none; }
.posts a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.posts a:hover { transform: translateY(-3px); border-color: var(--sky); }
.posts a:hover h3 { color: var(--sky-deep); }
.posts img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.posts h3 { margin: var(--space-md) var(--space-lg) var(--space-2xs); }
.posts p { margin: 0 var(--space-lg) var(--space-lg); color: var(--muted); font-size: var(--text-sm); max-width: none; }

/* ---- hours / visit band ------------------------------------------------------------------------------------------ */
.hours { display: grid; gap: var(--space-xl); max-width: none; }
.hours dl { margin: 0; max-width: none; }
.hours dt { font: 600 var(--text-sm) var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-md); }
.hours dd { margin: var(--space-2xs) 0 0; font-family: var(--head); font-weight: 600; color: var(--navy); }
@media (min-width: 60rem) { .hours { grid-template-columns: 1fr 1fr 1.2fr; } }

/* ---- inline CTA moment (mid-page) --------------------------------------------------------------------------- */
.cta-inline {
  background: var(--sky-tint); border: 1px solid var(--sky-line); border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl); margin-block: var(--space-xl);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  /* belt-and-suspenders: even if authored outside a .wrap, never run full-bleed */
  max-width: calc(var(--maxw) - 2 * clamp(1rem, 3vw, 2rem)); margin-inline: auto;
}
.cta-inline p { margin: 0; font: 700 var(--text-md) var(--head); color: var(--navy); }
.cta-inline > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.cta-inline a:not(.btn) { white-space: nowrap; font-weight: 600; }

/* ============================================================================
   CLOSING CTA — still a colour band so the page lands, but bright blue rather
   than near-black. Darkest stop #28507E (8.27:1), lightest #2273B0 (5.06:1),
   so the white type clears AA outright.
   ========================================================================== */
.cta { position: relative; isolation: isolate; background: var(--sky-band); color: #fff; padding-block: var(--space-2xl); overflow: clip; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(118deg, var(--sky-band) 0%, var(--sky-deep) 46%, var(--navy) 100%); }
.cta h2 { color: #fff; max-width: 24ch; }
.cta p { color: #EAF4FC; }   /* 4.54:1 on the gradient's lightest stop */
.cta a:not(.btn) { color: #fff; font-weight: 600; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }

/* ---- footer: logo navy ------------------------------------------------------------------------------------------ */
.foot { background: linear-gradient(180deg, #28507E 0%, #1E3F63 100%); color: #CBDAEA; font-size: var(--text-sm); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: #BFE0F7; text-decoration: underline; }
.foot__mast { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); align-items: center; padding-block: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,.22); }
.foot__mast img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.foot__mast p { margin: 0; max-width: none; }
.foot__cols { display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, minmax(0,1fr)); padding-block: var(--space-xl); }
.foot__cols h2 { font: 600 0.78rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: #CBDAEA; opacity: .85; margin: 0 0 var(--space-sm); }
.foot__cols ul { list-style: none; margin: 0; padding: 0; }
.foot__cols li { padding: 0.22rem 0; }
.foot__fine { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; padding-block: var(--space-lg); border-top: 1px solid rgba(255,255,255,.22); color: #CBDAEA; opacity: .85; }
.foot__fine p { margin: 0; max-width: none; }
@media (min-width: 60rem) { .foot__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* ---- forms -------------------------------------------------------------------------------------------------- */
.form { max-width: 34rem; }
.form label { display: block; font: 600 var(--text-sm) var(--head); color: var(--navy); margin: var(--space-md) 0 var(--space-2xs); }
.form label .opt { font-weight: 400; color: var(--muted); }
.form input, .form textarea {
  width: 100%; padding: 0.8rem 0.95rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--sky-line); border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 1px; border-color: var(--sky-deep); }
.form textarea { min-height: 8rem; resize: vertical; }
.form button { margin-top: var(--space-lg); }
.form .hp { position: absolute; left: -5000px; top: -5000px; }
#sent { display: none; border: 1.5px solid #17694b; border-radius: var(--radius-sm); padding: var(--space-md); color: #17694b; font-weight: 600; margin-bottom: var(--space-lg); max-width: 34rem; }
#sent:target { display: block; }

/* ---- page furniture -------------------------------------------------------------------------------------------- */
.crumb { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--muted); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; max-width: none; }
.crumb li + li::before { content: "/"; margin-right: 0.35em; color: var(--muted); opacity: .55; }
.crumb a { color: var(--muted); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-2xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose li { margin-bottom: var(--space-xs); }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-card); margin-block: var(--space-lg); }
/* when .prose IS the .wrap, keep the container full-width so text aligns to the
   page's left grid edge; cap the children instead (fixes centered-column drift) */
.wrap.prose { max-width: var(--maxw); }
.wrap.prose > * { max-width: var(--measure); }

/* contact: form + details side by side on desktop */
.contact-grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 60rem) { .contact-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* stat inline (interior pages) */
.stand { border-block: 1px solid var(--line); background: var(--bg); }
.stand__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl); }
.stand__n { font: 800 2.1rem var(--head); color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; margin: 0; }
.stand__q { color: var(--muted); font-size: var(--text-sm); margin: var(--space-2xs) 0 0; }
@media (min-width: 40rem) { .stand__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---- mobile floor + motion ----------------------------------------------------------------------------------------- */
@media (max-width: 63.9375rem) {
  .phero__img::before { inset: 1rem -1rem -1rem 1rem; }
}
@media (max-width: 40rem) {
  .sec { padding-block: var(--space-2xl); }
  .btn { width: 100%; }
  .hero__acts .btn, .cta__row .btn, .phero .btn { width: auto; flex: 1 1 auto; }
  .trust .stat { border-left-width: 3px; padding-left: .75rem; }
}
/* ---- sticky mobile call bar --------------------------------------------------------- */
.callbar { display: none; }
@media (max-width: 64rem) {
  .callbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
    background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.18);
    padding: 0.6rem clamp(1rem, 4vw, 2rem) calc(0.6rem + env(safe-area-inset-bottom));
    gap: var(--space-sm);
  }
  .callbar a { flex: 1 1 50%; display: inline-flex; justify-content: center;
    font: 600 0.95rem var(--head); border-radius: 999px; padding: 0.65rem 1rem;
    text-decoration: none; white-space: nowrap; }
  .callbar__tel { background: var(--berry-deep); color: #fff; }
  .callbar__book { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
  body { padding-bottom: 3.6rem; }
}

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

@media (max-width: 40rem) { .topbar__meta:last-child { display: none; } }

/* ---- team grid (Our Doctors: headshot cards, same card style as .svc) ---------------- */
.team { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); list-style: none; padding: 0; margin: 0; max-width: none; }
@media (min-width: 60rem) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-lg); display: flex; flex-direction: column; }
.team img { width: 8.5rem; height: 8.5rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; border-radius: 16px; margin: 0 0 var(--space-md); }
.team h3 { margin: 0 0 var(--space-2xs); }
.team .role { color: var(--sky-deep); font: 600 var(--text-sm) var(--head); margin: 0 0 var(--space-sm); }
.team p:not(.role) { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); max-width: none; flex-grow: 1; }
.team .go { color: var(--berry-deep); font: 600 var(--text-sm) var(--head); text-decoration: none; }
.team a.go:hover { color: var(--berry); }

/* square headshot for bio pheros (source images are 1:1, so no head is cut).
   The plate is sized to the wrapper, not the capped image, so it is dropped here. */
.phero__img.is-portrait img { aspect-ratio: 1 / 1; object-position: center; max-width: 24rem; margin-inline: auto; }
.phero__img.is-portrait::before { display: none; }