/* ==========================================================================
   Laguna Heights Dental — brand stylesheet (bespoke; replaces the shared
   dental template look entirely).

   Loading order enforced by @dental/core's Meta.astro:
     bootstrap → calander.css → THIS FILE (or issa-home.css) → responsive.css
   Two consequences this file lives with:
     1. Bootstrap is already loaded, so every class here is `lhd-` prefixed and
        can never collide with a Bootstrap class.
     2. The shared dental `responsive.css` loads AFTER this file and rewrites
        bare p/h1..h4 sizes. The site's Layout.astro re-asserts the type scale
        in a bundled <style> block (which loads last) — don't move that.
        For the same reason the header is `.lhd-header`, NOT `.headerMain`, and
        the mobile collapse id is `#lhdNav`, NOT `#navbarSupportedContent`:
        responsive.css targets those two names with the old design's rules.

   Palette sampled from the practice's own logo (navy frame, sailboat crest,
   pale-blue "DENTAL" wordmark) plus the two accents their live site uses:
   #4d97c2 hero wash and #ff9933 sunset orange.
   ========================================================================== */

:root {
  /* Brand colours as given by the practice:
       primary   #4d97c2  (section/hero backgrounds)
       secondary #FF9933  (buttons and highlights)
     `--lhd-primary-deep` is the same hue darkened only where white text sits on
     it (a solid button on #4d97c2 is ~3:1 against white, below AA); `--lhd-blue`
     stays the link/heading colour for the same reason. */
  --lhd-primary: #4d97c2;
  --lhd-primary-deep: #2b719b;
  --lhd-navy: #17216d;
  --lhd-blue: #1f5aa0;
  --lhd-sky: var(--lhd-primary);
  --lhd-mist: #b0ccd5;
  --lhd-sun: #ff9933;
  --lhd-sun-dark: #e8801a;

  --lhd-ink: #12202f;
  --lhd-body: #46586a;
  --lhd-line: #dce6ee;
  --lhd-wash: #eff6fa;
  --lhd-cream: #fdfbf4;
  --lhd-paper: #ffffff;

  --lhd-font-head: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lhd-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale. */
  --lhd-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --lhd-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.07rem);
  --lhd-step-1: clamp(1.12rem, 1.05rem + 0.33vw, 1.3rem);
  --lhd-step-2: clamp(1.32rem, 1.18rem + 0.66vw, 1.7rem);
  --lhd-step-3: clamp(1.55rem, 1.3rem + 1.1vw, 2.25rem);
  --lhd-step-4: clamp(1.95rem, 1.5rem + 2vw, 3.05rem);

  --lhd-radius: 12px;
  --lhd-radius-lg: 20px;
  --lhd-shadow: 0 10px 30px rgba(23, 33, 109, 0.08);
  --lhd-shadow-lg: 0 20px 50px rgba(23, 33, 109, 0.16);
}

/* ============================ shared bits ============================ */

/* overflow-x: clip contains .lhd-split__media--framed::after, the decorative
   border that is intentionally offset 0.9rem right/down of the image. There is
   room for it inside the centred container on desktop, but on a phone the
   container is nearly the full viewport, so the frame hung ~14px off-screen and
   made the whole page scroll sideways (a Google mobile-UX flag). Clipping here
   rather than on .lhd-split keeps the frame fully visible wherever it fits and
   only trims it at the screen edge. `clip`, not `hidden`, so the section does
   not become a scroll container. */
.lhd-section { padding: clamp(3rem, 6vw, 5.5rem) 0; overflow-x: clip; }
.lhd-section--wash { background: var(--lhd-wash); }
.lhd-section--cream { background: var(--lhd-cream); }
/* Soft-blue accent for standalone differentiator callouts (e.g. Biological
   Dentistry) that need more visual weight than the flat --lhd-wash tint used
   elsewhere. Built from the same brand blues (--lhd-wash/--lhd-mist), since the
   palette has no green — see --lhd-eyebrow--bio below for the leaf icon. */
.lhd-section--bio { background: linear-gradient(135deg, var(--lhd-wash) 0%, #dcedf3 55%, var(--lhd-mist) 145%); }

.lhd-eyebrow {
  display: inline-block;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lhd-primary-deep);
  margin-bottom: 0.75rem;
}

.lhd-eyebrow--bio { display: inline-flex; align-items: center; gap: 0.45rem; }
.lhd-bio__icon { width: 1.2em; height: 1.2em; flex: none; color: var(--lhd-primary-deep); }

/* Anchor targets (e.g. #cost) land below the sticky header instead of behind it. */
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
/* Zero-size jump targets inside a <ul> list item (e.g. the Services mega menu's
   deep links into Laser/Biological Dentistry's treatment lists), same offset. */
.lhd-anchor { display: inline-block; scroll-margin-top: 6.5rem; }

.lhd-h2 { margin-bottom: 1rem; }
.lhd-h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-h2--center { text-align: center; }
.lhd-h2--center::after { margin-left: auto; margin-right: auto; }
.lhd-lead { font-size: var(--lhd-step-1); color: var(--lhd-body); }

.lhd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lhd-btn:hover { transform: translateY(-2px); text-decoration: none; }
/* ONE call-to-action look across the whole site: the same orange pill as the
   header's "Schedule Online" button, and on hover it deepens and the label turns
   white. `--primary` is kept as an alias so older markup can't drift out of step.
   Secondary buttons are outlines of the same colour and fill in on hover, so
   their text also ends up white. */
.lhd-btn--sun,
.lhd-btn--primary { background: var(--lhd-sun); color: #23303d; }
.lhd-btn--sun:hover,
.lhd-btn--primary:hover { background: var(--lhd-sun-dark); color: #fff; box-shadow: var(--lhd-shadow); }

.lhd-btn--ghost { background: transparent; color: var(--lhd-sun-dark); border-color: var(--lhd-sun); }
.lhd-btn--ghost:hover { background: var(--lhd-sun-dark); color: #fff; border-color: var(--lhd-sun-dark); }

.lhd-btn--light { background: #fff; color: var(--lhd-navy); }
.lhd-btn--light:hover { background: var(--lhd-sun-dark); color: #fff; }

.lhd-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.lhd-btn--outline-light:hover { background: var(--lhd-sun-dark); color: #fff; border-color: var(--lhd-sun-dark); }

.lhd-btn--sm { padding: 0.6rem 1.1rem; font-size: var(--lhd-step--1); }

/* Body copy links inside ported content.
   `:not(.lhd-btn)` is load-bearing: CTA buttons sit INSIDE .lhd-prose, and
   `.lhd-prose a:hover` (0-2-1) outranks `.lhd-btn--sun:hover` (0-2-0), so without
   it the hover rule below repainted button labels in --lhd-sun-dark — the exact
   colour of the button's hover background, i.e. the label vanished.
   Colour is the brand orange, not blue: on the white/wash/cream backgrounds
   these sections use, `--lhd-blue` reads fine on its own, but the sitewide
   rule is that inline text links on any LIGHT background use the orange
   accent (underline kept for contrast/accessibility) while `.lhd-band a`
   above uses white+underline on DARK backgrounds — see that rule's comment
   for the inverse case. `--lhd-sun-dark`, not the lighter `--lhd-sun`, matches
   how orange is used as TEXT everywhere else on light surfaces (e.g.
   `.lhd-btn--ghost`'s label) for adequate contrast on white. */
.lhd-prose a:not(.lhd-btn), .lhd-list a:not(.lhd-btn) {
  color: var(--lhd-sun-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lhd-prose a:not(.lhd-btn):hover, .lhd-list a:not(.lhd-btn):hover { color: var(--lhd-navy); }
.lhd-prose p:last-child { margin-bottom: 0; }

/* ============================ top bar ============================ */

.lhd-topbar {
  background: var(--lhd-navy);
  color: #dce9f5;
  font-size: var(--lhd-step--1);
  padding: 0.5rem 0;
}
.lhd-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
}
.lhd-topbar__hours { margin: 0; }
.lhd-topbar__call { margin: 0; font-weight: 600; }
.lhd-topbar__call a { color: #fff; text-decoration: none; }
.lhd-topbar__call a:hover { color: var(--lhd-sun); }

/* ============================ header / nav ============================ */

.lhd-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: 0 2px 16px rgba(23, 33, 109, 0.08);
}
.lhd-header .navbar { padding: 0.5rem 0; }
.lhd-header__logo img { display: block; width: 132px; height: auto; }

.lhd-nav { gap: 0.15rem; }
.lhd-nav__link {
  display: block;
  font-family: var(--lhd-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lhd-ink);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: none;
  border: 0;
  white-space: nowrap;
}
.lhd-nav__link:hover, .lhd-nav__link:focus { color: var(--lhd-blue); background: var(--lhd-wash); }
.lhd-nav__link::after { margin-left: 0.35rem; }
.lhd-nav .dropdown-menu {
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: var(--lhd-shadow);
  padding: 0.4rem;
  min-width: 15rem;
}
.lhd-nav .dropdown-item {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--lhd-body);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  white-space: normal;
}
.lhd-nav .dropdown-item:hover, .lhd-nav .dropdown-item:focus {
  background: var(--lhd-wash);
  color: var(--lhd-blue);
}

.lhd-header__phone {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  font-family: var(--lhd-font-head);
}
.lhd-header__phone span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lhd-sky); }
.lhd-header__phone strong { font-size: 1.05rem; color: var(--lhd-navy); }
.lhd-header__phone:hover strong { color: var(--lhd-blue); }

.lhd-toggler {
  display: inline-grid;
  place-items: center;
  background: none;
  color: var(--lhd-navy);
  border: 0;
  padding: 0 0.5rem;
  cursor: pointer;
}
.lhd-toggler:hover { color: var(--lhd-blue); }
/* Bars/cross stacked in one grid cell and cross-faded — display can't transition. */
.lhd-toggler__bars,
.lhd-toggler__close {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.lhd-toggler__close { opacity: 0; transform: rotate(-90deg); }
.lhd-toggler[aria-expanded="true"] .lhd-toggler__bars { opacity: 0; transform: rotate(90deg); }
.lhd-toggler[aria-expanded="true"] .lhd-toggler__close { opacity: 1; transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .lhd-toggler__bars, .lhd-toggler__close { transition: none; transform: none; }
}
@media (min-width: 1200px) { .lhd-toggler { display: none; } }

/* The menu has six top-level items with submenus, so it collapses at xl (1200px)
   rather than lg — hence navbar-expand-xl in Navbar.astro. */
@media (max-width: 1199.98px) {
  .lhd-header__actions { width: 100%; }
  .lhd-nav { padding: 0.5rem 0 0.75rem; }
  .lhd-nav__link { padding: 0.7rem 0.25rem; }
  .lhd-nav .dropdown-menu { border: 0; box-shadow: none; padding-left: 0.9rem; }
  .lhd-nav .nav-item { border-bottom: 1px solid var(--lhd-line); }
  .lhd-nav .nav-item:last-child { border-bottom: 0; }
}

/* A parent that is both a page and a dropdown: label navigates, caret opens. */
.lhd-nav__split { display: flex; align-items: center; }
.lhd-nav__split .lhd-nav__link { padding-right: 0.35rem; }
/* Mobile menu: Bootstrap makes .dropdown-menu static here, so it opened beside the label. */
@media (max-width: 1199.98px) {
  .lhd-nav__split { flex-wrap: wrap; }
  .lhd-nav__split .dropdown-menu { flex: 0 0 100%; width: 100%; }

  /* fixed, not sticky: the topbar offsets a sticky header so 100dvh overran the screen. */
  .lhd-header:has(#lhdNav.show),
  .lhd-header:has(#lhdNav.collapsing) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 1050;
  }
  /* Hidden, not out-z-indexed; the consent banner/modal stay on top by design. */
  body:has(#lhdNav.show) .lhd-callfab,
  body:has(#lhdNav.show) #dnConsentReopen { display: none; }

  /* .show only — a growing height during .collapsing flashes a scrollbar. 8rem = brand row. */
  #lhdNav.show {
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lhd-primary) transparent;
  }
  #lhdNav.show::-webkit-scrollbar { width: 6px; }
  #lhdNav.show::-webkit-scrollbar-track { background: transparent; }
  #lhdNav.show::-webkit-scrollbar-thumb { background: var(--lhd-primary); border-radius: 999px; }
}
.lhd-nav__caret {
  display: inline-grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--lhd-body);
  padding: 0.5rem 0.35rem;
  border-radius: 8px;
  cursor: pointer;
}
.lhd-nav__caret:hover, .lhd-nav__caret[aria-expanded="true"] { color: var(--lhd-primary-deep); background: var(--lhd-wash); }
.lhd-nav__caret svg { transition: transform 0.2s ease; }
.lhd-nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.lhd-nav__link.is-active { color: var(--lhd-primary-deep); background: var(--lhd-wash); }
.lhd-nav .dropdown-item.is-active { color: var(--lhd-primary-deep); background: var(--lhd-wash); font-weight: 600; }

/* ============================ Services mega menu ============================ */
/* Every category AND every treatment is a real <a href> (crawlable without JS).
   Desktop: a wide multi-column panel, each column always expanded — the native
   <details>/<summary> toggle is disabled via pointer-events (see .lhd-mega__cat
   below) so it reads as a plain grid, not an accordion.
   Mobile (<1200px): Bootstrap's own navbar-expand-xl CSS makes `.dropdown-menu`
   `position: static` below that breakpoint (same mechanism every other dropdown
   on this site already relies on), so the mega panel simply stacks full-width in
   the collapsed menu, and pointer-events are restored so each <details> becomes
   a native, no-JS accordion. */
/* `.lhd-nav .dropdown-menu` (0-2-0) also sets border/border-radius/box-shadow/
   padding/min-width — matching its specificity here (instead of the bare
   `.lhd-mega` class alone) so this panel's own sizing reliably wins. */
.lhd-nav .lhd-mega {
  width: min(94vw, 62rem);
  max-width: 62rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: var(--lhd-shadow-lg);
  min-width: 0;
}
/* Native CSS multi-column layout: the browser balances column HEIGHT on its
   own (shortest possible max-column-height for the given column count) while
   keeping categories in their exact source/DOM order (so the mobile
   accordion below — which just turns this into column-count:1 — shows the
   owner's exact requested order). A short category (e.g. the solo links with
   no treatments) will stack UNDER a taller one in the same visual column
   rather than starting a new row, which is what keeps a 13-item category like
   General Dentistry from forcing a second, mostly-empty row below the fold. */
.lhd-mega__grid {
  column-count: 4;
  column-gap: 1.75rem;
}
.lhd-mega__col {
  border: 0;
  break-inside: avoid;
  margin-bottom: 1.25rem;
}
.lhd-mega__col--solo { display: flex; align-items: flex-start; }
.lhd-mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  list-style: none;
  cursor: default;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--lhd-line);
}
.lhd-mega__cat::-webkit-details-marker { display: none; }
.lhd-mega__catlink {
  font-family: var(--lhd-font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lhd-navy);
  text-decoration: none;
  pointer-events: auto;
}
.lhd-mega__catlink:hover, .lhd-mega__catlink:focus { color: var(--lhd-blue); }
.lhd-mega__chev { display: none; color: var(--lhd-body); flex: none; }
.lhd-mega__list { list-style: none; margin: 0; padding: 0; }
.lhd-mega__sublink {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--lhd-body);
  text-decoration: none;
  padding: 0.3rem 0;
  border-radius: 6px;
}
.lhd-mega__sublink:hover, .lhd-mega__sublink:focus { color: var(--lhd-blue); }

@media (min-width: 1200px) {
  /* Lock every column permanently open: disable the summary's native toggle
     (pointer-events: none) but re-enable it on the nested <a> so the category
     link itself stays clickable. */
  .lhd-mega__cat { pointer-events: none; }
  .lhd-mega__list { display: block !important; }

  /* Center the panel under the WHOLE header instead of under wherever the
     "Services" toggle happens to sit in the nav row — Bootstrap auto-disables
     Popper for navbar dropdowns (it treats any `.navbar .dropdown` as
     "static display" automatically), so plain CSS positioning is all that's
     driving this and nothing will fight it. Un-setting `position: relative`
     on the <li> promotes `.lhd-header` (already `position: sticky`, which is
     itself a containing block) to be the mega panel's positioning context,
     so `left: 50%` below centers it on the viewport, not on the toggle —
     the only way a ~62rem panel reliably stays on-screen regardless of
     where "Services" lands in the menu. */
  .lhd-nav__mega-wrap { position: static; }
  .lhd-nav .lhd-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Belt-and-braces: on a very short browser window this scrolls INSIDE the
       panel instead of letting it run off the bottom of the screen
       undetected. The multi-column balancing above (sized for ~1366x768 and
       up) should make this a no-op in practice at normal desktop heights. */
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
  }

  /* Opening on hover (not just click) is handled in Navbar.astro's <script>,
     not here: a pure-CSS `:hover { display:block }` rule closes the instant
     the pointer leaves the element, which is the opposite of what's wanted
     (stay open until an explicit click elsewhere) — that needs real "did the
     user click away" state, which only JS can track. */
}

@media (max-width: 1199.98px) {
  .lhd-nav .lhd-mega {
    width: 100%;
    max-width: none;
    padding: 0.25rem 0 0.5rem;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .lhd-mega__grid { column-count: 1; }
  .lhd-mega__col { border-bottom: 1px solid var(--lhd-line); padding: 0.1rem 0; margin-bottom: 0; break-inside: auto; }
  .lhd-mega__col--solo { border-bottom: 1px solid var(--lhd-line); padding: 0.6rem 0.25rem; }
  .lhd-mega__col:last-child, .lhd-mega__col--solo:last-child { border-bottom: 0; }
  .lhd-mega__cat { padding: 0.6rem 0.25rem; margin-bottom: 0; border-bottom: 0; cursor: pointer; }
  .lhd-mega__chev { display: inline-grid; place-items: center; }
  .lhd-mega__col[open] > .lhd-mega__cat .lhd-mega__chev svg { transform: rotate(180deg); }
  .lhd-mega__chev svg { transition: transform 0.2s ease; }
  .lhd-mega__list { padding: 0 0 0.5rem 0.75rem; }
  .lhd-mega__sublink { padding: 0.45rem 0; }
}

/* ============================ hero ============================ */

.lhd-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 62vh, 40rem);
  background-color: var(--lhd-navy);
  background-image: var(--lhd-hero-img);
  background-size: cover;
  /* Homepage hero only (interior pages use .lhd-phero below, which stays
     top-anchored). Owner asked for this specific photo to crop from the top
     instead — i.e. anchor the visible frame to the BOTTOM of the source
     image — rather than the top-anchored fix applied everywhere else. */
  background-position: center bottom;
  overflow: hidden;
}
/* Their own hero treatment: the photo under a #4d97c2 wash. */
.lhd-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 32, 74, 0.84) 0%, rgba(43, 113, 155, 0.74) 46%, rgba(77, 151, 194, 0.4) 100%);
}
.lhd-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.5rem); }
.lhd-hero__content { max-width: 42rem; }
.lhd-hero__eyebrow {
  display: inline-block;
  color: #fff;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(2px);
}
.lhd-hero__title { color: #fff; margin-bottom: 0.9rem; }
.lhd-hero__sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--lhd-step-1);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}
.lhd-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.lhd-hero__late {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 600;
}
.lhd-hero__late::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lhd-sun);
  box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.3);
  animation: lhd-dot-pulse 1.8s ease-in-out infinite;
}
/* Subtle attention cue on the hero's "late hours"/"same-day emergency" lines —
   soft opacity + scale only, slow cycle, so it reads as a gentle heartbeat
   next to the hero's CTA buttons rather than competing with them. */
@keyframes lhd-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .lhd-hero__late::before { animation: none; }
}

.lhd-offer {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  border-top: 5px solid var(--lhd-sun);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow-lg);
  padding: 1.6rem;
  text-align: center;
  max-width: 22rem;
}
.lhd-offer__title { font-size: var(--lhd-step-2); color: var(--lhd-navy); margin-bottom: 0.35rem; }
.lhd-offer__note { font-size: var(--lhd-step--1); color: var(--lhd-body); margin-bottom: 1.1rem; }
.lhd-offer img { width: 130px; height: auto; margin: 0 auto 1rem; display: block; }

/* ============================ split content bands ============================ */

.lhd-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 992px) {
  .lhd-split { grid-template-columns: 1.05fr 1fr; }
  .lhd-split--flip .lhd-split__media { order: 2; }
}
.lhd-split__media { position: relative; z-index: 0; } /* z-index:0 = own stacking context, so the ::after frame below is not buried by the section background */
.lhd-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
}
/* Red Light Therapy intro photo (src/pages/[...slug].astro, isRedLightPage):
   the source photo is a tall shot of the NovoTHOR bed, which read as
   oversized next to the intro copy. Capping the rendered height near 451px
   and cropping with object-fit keeps the split row compact; object-position
   trims from the top/bottom (not the sides) so the whole bed stays in frame,
   and the height cap itself is the "zoom out" — it shows more of the source
   photo than the full-bleed square crop the raw image would otherwise get. */
.lhd-split__media--rlintro img {
  height: clamp(20rem, 32vw, 28.2rem); /* 28.2rem ≈ 451px */
  object-fit: cover;
  object-position: center;
}
/* Dental Exams "Advanced Diagnostic Technology" band: the video is a
   YouTube Short (9:16), so it uses .lhd-video__frame's own portrait ratio
   rather than stretching to fill the (much wider) split column — capped and
   centred at the same width as a single testimonial card (.lhd-vgrid's
   card), so it reads as one deliberate video, not an oversized column-filling
   box. */
.lhd-split__media--portrait { max-width: 22rem; margin-inline: auto; }
.lhd-split__media--framed::after {
  content: '';
  position: absolute;
  inset: auto -0.9rem -0.9rem auto;
  width: 62%;
  height: 62%;
  border: 3px solid var(--lhd-mist);
  border-radius: var(--lhd-radius-lg);
  z-index: -1;
}

.lhd-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.7rem; }
.lhd-list li { position: relative; padding-left: 2rem; color: var(--lhd-body); }
.lhd-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--lhd-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232b719b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Two-column variant of .lhd-list, used for the standalone "What Our Team
   Offers" section on the Meet the Doctors page (see isDoctorsPage in
   [...slug].astro) — a page-level summary, not tied to a bio's narrow prose
   column, so it gets its own centred, wider measure and a 2-up grid at tablet
   and up instead of the single-column list ported page bodies normally use. */
.lhd-list--2col { max-width: 44rem; margin-left: auto; margin-right: auto; }
/* .lhd-list's base li relies on left-aligned text with an absolutely
   positioned checkmark at the left edge, which reads fine in a left-aligned
   prose column but looks off-centre under this section's centred heading. Here
   each item becomes its own centred icon+text unit instead. */
.lhd-list--2col li { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding-left: 0; text-align: center; }
.lhd-list--2col li::before { position: static; flex: none; }
@media (min-width: 576px) { .lhd-list--2col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

/* Doctor bio card (sections[].layout: "bio") — same hover motion as .lhd-team-card. */
.lhd-biocard {
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-biocard:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
/* Closing copy: no box, opened by the brand dash; last line is the attribution. */
.lhd-bio-note { max-width: 44rem; }
.lhd-bio-note--dash::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-bio-note p:last-child { font-size: var(--lhd-step-0); }

/* Doctors index lead: centred measure under the brand dash. */
.lhd-intro-lead { max-width: 46rem; }
.lhd-intro-lead::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 auto 1.4rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}

/* Panel register (panelBlocks): brand gradient rule, wash fill, list items as chips. */
.lhd-biopanel {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--lhd-wash) 100%);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  overflow: hidden;
}
.lhd-biopanel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-biopanel .lhd-list { margin: 0; }
.lhd-biopanel .lhd-list li {
  background: #fff;
  border-radius: 0.65rem;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  box-shadow: 0 2px 10px rgba(23, 33, 109, 0.06);
}
.lhd-biopanel .lhd-list li::before { left: 1rem; top: 1.05em; }
@media (prefers-reduced-motion: reduce) {
  .lhd-biocard { transition: none; }
  .lhd-biocard:hover { transform: none; }
}

/* Left-aligned 2-col list (unlike .lhd-list--2col, which centres) — just a column count. */
@media (min-width: 768px) {
  .lhd-list--cols { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* ============================ membership plan cards ============================ */
/* Static cards sourced from the practice's printed/Clerri membership plan
   sheet (see membershipPlans in src/data/site-data.ts) — name, age note,
   monthly/yearly price, savings line, services included + additional
   benefits, and a "Join Now" CTA that goes straight to the practice's Clerri
   enrollment page. Styled like `.lhd-step`, in the site's own blue/orange
   palette. */
.lhd-plans-intro { max-width: 42rem; margin: 0 auto 2.5rem; }
.lhd-plans-intro .lhd-lead { margin: 0; }

/* ============================ team grid (Our Practice page) ============== */
/* "Meet Our Team" card grid — 3 columns desktop, 2 tablet, 1 mobile. Shares the
   centred-intro layout with .lhd-plans-intro above. */
.lhd-team-intro { max-width: 42rem; margin: 0 auto 2.5rem; }
.lhd-team-intro .lhd-lead { margin: 0; }
.lhd-team { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lhd-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lhd-team { grid-template-columns: 1fr; } }
.lhd-team-card {
  text-align: center;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem 1.25rem 1.6rem;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-team-card:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
.lhd-team-card__photo {
  display: block;
  width: 11rem;
  height: 11rem;
  object-fit: cover;
  /* Anchor the crop to the top of the frame so a tight portrait crop trims
     shoulders/chest rather than the top of the head/hair — same fix as the
     hero banners (.lhd-hero, .lhd-phero use background-position: center 4x%). */
  object-position: top;
  border-radius: var(--lhd-radius-lg);
  border: 4px solid var(--lhd-wash);
  margin: 0 auto 1.1rem;
}
/* Our Practice team cards: .lhd-bannerphoto caption + .lhd-bcard hover zoom. */
.lhd-tcard {
  position: relative;
  margin: 0;
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-tcard:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
.lhd-tcard__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}
.lhd-tcard:hover .lhd-tcard__photo { transform: scale(1.04); }
.lhd-tcard__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(120deg, rgba(15, 32, 74, 0.88), rgba(43, 113, 155, 0.8));
  color: #fff;
  border-radius: var(--lhd-radius);
  padding: 0.85rem 1.1rem;
  display: grid;
  gap: 0.1rem;
}
.lhd-tcard__role {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-sun);
}
.lhd-tcard__name { font-family: var(--lhd-font-head); font-weight: 800; font-size: var(--lhd-step-1); }
@media (prefers-reduced-motion: reduce) {
  .lhd-tcard, .lhd-tcard__photo { transition: none; }
  .lhd-tcard:hover, .lhd-tcard:hover .lhd-tcard__photo { transform: none; }
}

/* Doctor cards: team-card shell, round, flex so CTAs share a baseline. */
.lhd-doccard { display: flex; flex-direction: column; }
.lhd-doccard__photo { width: 13rem; height: 13rem; border-radius: 50%; }
.lhd-doccard__cta { margin-top: auto; align-self: center; }
.lhd-team-card__name { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.15rem; }
.lhd-team-card__role {
  font-size: var(--lhd-step--1);
  color: var(--lhd-primary-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
/* Billing toggle (Dec 2026 redesign): a no-JS Monthly/Annual switch using two
   visually-hidden radio inputs + styled <label>s. The radios are placed as
   DIRECT SIBLINGS of `.lhd-billing-toggle` and `.lhd-plans` below (same
   parent, `.lhd-plans-row`), so a plain `~` general-sibling selector can reach
   both the toggle's own labels (to show which is active) and the price views
   inside every card (to swap monthly/annual content) — no `:has()` needed. */
/* Wider now that the cards themselves are bigger (Dec 2026 "bigger cards"
   revision) — closer to the page's own content width than the earlier,
   tighter 60rem band. `text-align: center` here is what actually centres the
   toggle below: `.lhd-billing-toggle` is `inline-flex`, an inline-level box,
   so it needs an ANCESTOR's `text-align: center` to centre horizontally —
   `margin: auto` alone does nothing for an inline-level box. The grid below
   isn't affected (grid item placement ignores an ancestor's text-align); each
   `.lhd-plan-card` already sets its own `text-align: center` for its content. */
.lhd-plans-row { max-width: 78rem; margin-inline: auto; text-align: center; }
.lhd-billing-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lhd-billing-toggle {
  display: inline-flex;
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.25rem;
  margin: 0 auto 2rem;
}
.lhd-billing-toggle__label {
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-family: var(--lhd-font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lhd-primary-deep);
  transition: background 0.2s ease, color 0.2s ease;
}
/* Highlight whichever option is actually :checked — driven live by the radio
   state, not hardcoded to "Monthly", so it stays correct after a click. */
#lhd-billing-monthly:checked ~ .lhd-billing-toggle label[for="lhd-billing-monthly"],
#lhd-billing-annual:checked ~ .lhd-billing-toggle label[for="lhd-billing-annual"] {
  background: var(--lhd-sun);
  color: #23303d;
}
#lhd-billing-monthly:focus-visible ~ .lhd-billing-toggle label[for="lhd-billing-monthly"],
#lhd-billing-annual:focus-visible ~ .lhd-billing-toggle label[for="lhd-billing-annual"] {
  outline: 2px solid var(--lhd-primary-deep);
  outline-offset: 2px;
}
/* 3 cards, single row from the small breakpoint up; stacked on phones. */
.lhd-plans { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 576px) {
  .lhd-plans { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }
}
/* `align-items: start` (not grid's default `stretch`) is deliberate: it keeps
   each card sized to its OWN content, so expanding one card's "See benefits"
   details panel doesn't force every other card in the same row to stretch
   taller too. Collapsed-state cards already come out the same height on their
   own, because `.lhd-plan-card__name` below reserves space for 2 lines. */
.lhd-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-top: 4px solid var(--lhd-primary);
  border-radius: var(--lhd-radius-lg);
  padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: var(--lhd-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lhd-plan-card:hover { transform: translateY(-4px); box-shadow: var(--lhd-shadow-lg); }
/* "Best value" corner ribbon — only shown for the Annual option, on every
   card (all 3 are a better deal annually, not just one tier). Lives outside
   both `.lhd-plan-card__view`s since it doesn't belong to either; it's driven
   by the same `#lhd-billing-annual:checked` sibling toggle as the views. */
.lhd-plan-card__ribbon {
  display: none;
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: var(--lhd-sun);
  color: #23303d;
  font-family: var(--lhd-font-head);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--lhd-shadow);
}
#lhd-billing-annual:checked ~ .lhd-plans .lhd-plan-card__ribbon { display: inline-block; }
/* Each card holds a monthly AND an annual "view" (name/age/price/savings);
   only one is ever shown, swapped by the billing toggle above — same
   mechanism as the See benefits/Show less labels below: both are always in
   the DOM, CSS shows/hides the right one. */
/* No `align-items: center` here (stays the flex default, `stretch`): the name/
   age/price/regular-value blocks need their FULL width preserved so the h3's
   reserved 2-line box actually wraps long names instead of growing to fit on
   one line — centering comes from the inherited `text-align: center` on
   `.lhd-plan-card` instead. */
.lhd-plan-card__view { display: flex; flex-direction: column; }
.lhd-plan-card__view--annual { display: none; }
#lhd-billing-annual:checked ~ .lhd-plans .lhd-plan-card__view--monthly { display: none; }
#lhd-billing-annual:checked ~ .lhd-plans .lhd-plan-card__view--annual { display: flex; }
/* Reserves room for a 2-line name (e.g. "Adult Complete Annual") so every
   card's price/savings/button line up at the same height as a 1-line name
   (e.g. "Perio") card next to it. */
.lhd-plan-card__name {
  font-size: var(--lhd-step-1);
  line-height: 1.25;
  color: var(--lhd-navy);
  margin: 0 0 0.4rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lhd-plan-card__price {
  font-family: var(--lhd-font-head);
  font-weight: 800;
  font-size: var(--lhd-step-3);
  color: var(--lhd-primary-deep);
  margin: 0;
}
.lhd-plan-card__price span { font-size: var(--lhd-step--1); font-weight: 600; color: var(--lhd-body); }
.lhd-plan-card__age { font-size: var(--lhd-step--1); color: var(--lhd-body); margin: -0.2rem 0 0.7rem; }
/* "Regular value $X/year" — small, muted, sits above the price. Only the
   dollar figure is struck through (`.lhd-plan-card__regular-amount`); "Regular
   value" and "/year" stay plain text, exactly as requested. Identical in the
   Monthly and Annual views (the regular/non-member price doesn't change), so
   it's simply repeated once in each `.lhd-plan-card__view` rather than hoisted
   out — same "duplicate the one line that needs to show in both views"
   approach already used for the name/age above it. */
.lhd-plan-card__regular { font-size: var(--lhd-step--1); color: var(--lhd-body); margin: 0 0 0.15rem; }
.lhd-plan-card__regular-amount { text-decoration: line-through; }
/* Green "less than paying monthly" line — Annual view only, so it only needs
   a plain rule (no checked-state selector): it lives inside
   `.lhd-plan-card__view--annual`, which is already hidden/shown as a whole by
   the billing toggle. Green isn't one of the brand's existing tokens, but the
   owner explicitly asked for a green "savings" line here. */
.lhd-plan-card__savings-note {
  font-size: var(--lhd-step--1);
  font-weight: 700;
  color: #2e7d32;
  margin: 0.4rem 0 0;
}
/* "See benefits" / "Show less" — a native <details>/<summary> toggle (no JS),
   styled as a plain text link in the site's standard on-light-background link
   colour (`.lhd-prose a:not(.lhd-btn)`), not a button, per the requested
   design. The two labels are both always in the DOM; CSS swaps which one is
   visible off the <details> `[open]` state. */
.lhd-plan-card__toggle {
  display: inline-block;
  cursor: pointer;
  font-family: var(--lhd-font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lhd-sun-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
  margin: 0.1rem 0 0;
}
.lhd-plan-card__toggle::-webkit-details-marker { display: none; }
.lhd-plan-card__toggle:hover { color: var(--lhd-navy); }
.lhd-plan-card__toggle-less { display: none; }
.lhd-plan-card__details[open] .lhd-plan-card__toggle-more { display: none; }
.lhd-plan-card__details[open] .lhd-plan-card__toggle-less { display: inline; }
.lhd-plan-card__panel { text-align: left; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--lhd-line); }
.lhd-plan-card__group-label {
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lhd-primary-deep);
  margin: 0 0 0.4rem;
}
.lhd-plan-card__benefits { font-size: 0.85rem; gap: 0.5rem; text-align: left; margin: 0 0 1rem; }
.lhd-plan-card__benefits:last-of-type { margin-bottom: 0; }
.lhd-plan-card__benefits li { padding-left: 1.55rem; }
.lhd-plan-card__benefits li::before { width: 0.95rem; height: 0.95rem; top: 0.3em; }
.lhd-plan-card__cta { margin-top: 1.1rem; }

/* ============================ numbered benefits grid ============================ */
/* Ported "Applications of X" style sections (e.g. Red Light Therapy) used to
   flow as a flat run of h4/p pairs with a bare "1", "2", "3"… paragraph in
   between — this rebuilds it as the practice's actual 3-up boxed grid with a
   numbered circle badge per card. */
.lhd-numgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--lhd-cream);
  border-radius: var(--lhd-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: 1.75rem 0;
}
@media (min-width: 576px) { .lhd-numgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .lhd-numgrid { grid-template-columns: repeat(3, 1fr); } }
.lhd-numgrid__item { background: #fff; border-radius: var(--lhd-radius); padding: 1.5rem 1.35rem; box-shadow: var(--lhd-shadow); }
.lhd-numgrid__num {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--lhd-blue);
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.lhd-numgrid__item h4 { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.4rem; }
.lhd-numgrid__item p { margin: 0; font-size: var(--lhd-step--1); color: var(--lhd-body); }

/* ============================ in-house plan band ============================ */

.lhd-plan {
  background: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 58%, var(--lhd-primary));
  color: #fff;
  border-radius: var(--lhd-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--lhd-shadow-lg);
}
@media (min-width: 992px) { .lhd-plan { grid-template-columns: 1.6fr auto; } }
.lhd-plan h2 { color: #fff; margin-bottom: 0.75rem; }
.lhd-plan p { color: rgba(255, 255, 255, 0.93); margin: 0; }
.lhd-plan__price {
  display: inline-block;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  color: var(--lhd-sun);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

/* ============================ reviews / CTA bands with photo ============================ */

.lhd-band {
  position: relative;
  background-color: var(--lhd-navy);
  background-size: cover;
  /* Top-anchored for the same reason as .lhd-hero/.lhd-phero: this band is not
     currently used with a photo background on this site (only the plain
     gradient .lhd-band--plain variant is), but keep it consistent in case a
     photo band is ever added here. */
  background-position: center top;
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.lhd-band__scrim { position: absolute; inset: 0; background: rgba(11, 26, 56, 0.72); }
.lhd-band__inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.lhd-band h2 { color: #fff; }
.lhd-band p { color: rgba(255, 255, 255, 0.9); }
.lhd-band .lhd-h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, var(--lhd-sun), #fff); }
/* A ported numbered list (e.g. the "Happy Patients" band's 3-step process) sits
   inside this centred, text-align:center band. A plain <ol> is block-level, so
   under text-align:center its default left-indent marker stays pinned to the
   left edge of the full-width band while the (centered) text floats away from
   it — the number and its item read as unrelated. Made inline-block so the
   list shrinks to its content width and is centered as ONE unit by the band's
   text-align, with left-aligned text inside so each number sits directly next
   to its own line. */
.lhd-band ol {
  display: inline-block;
  text-align: left;
  margin: 1.5rem auto;
  padding-left: 1.4rem;
}
.lhd-band ol li { color: #fff; margin-bottom: 0.5rem; }
.lhd-band ol li:last-child { margin-bottom: 0; }
/* Body-copy links ported into a CTA band (e.g. "our highly skilled Drs." on
   the General Dentist page) otherwise inherit the site-wide `a { color:
   var(--lhd-blue) }` default — a mid blue that is nearly invisible on this
   band's dark navy background. Style them white + underlined so they read as
   links against the dark scrim instead of blending into the surrounding text. */
.lhd-band a:not(.lhd-btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lhd-band a:not(.lhd-btn):hover { color: var(--lhd-sun); }

/* ============================ doctors ============================ */

.lhd-doctor__credential {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  color: var(--lhd-navy);
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
/* Only real links get the hover affordance — "Serving Laguna Niguel Since …"
   is a plain <span> (not clickable) sharing this badge class, so scoping the
   hover to `a.lhd-doctor__credential` leaves it static while the PPO badge
   and the CA-license "verify" link (both real <a> elements) keep their
   hover state. */
a.lhd-doctor__credential:hover { border-color: var(--lhd-blue); color: var(--lhd-blue); }

/* ============================ steps ============================ */

.lhd-steps { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: lhdstep; }
@media (min-width: 576px) { .lhd-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .lhd-steps { grid-template-columns: repeat(4, 1fr); } }
.lhd-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 2.25rem 1.35rem 1.5rem;
  box-shadow: var(--lhd-shadow);
}
.lhd-step::before {
  counter-increment: lhdstep;
  content: counter(lhdstep);
  position: absolute;
  top: -1.1rem;
  left: 1.35rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lhd-blue);
  color: #fff;
  font-family: var(--lhd-font-head);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(31, 90, 160, 0.3);
}
.lhd-step h3 { font-size: var(--lhd-step-1); margin-bottom: 0.5rem; }
.lhd-step p { margin: 0; font-size: var(--lhd-step--1); }

/* ==================== practice info panel (Our Practice page) ==================== */
/* Sits directly under the 4 numbered "What to Expect" .lhd-step cards. These
   two items (location, hours) are not sequential steps, so they deliberately
   do NOT reuse .lhd-step's ::before counter badge — an icon circle instead
   makes clear this is reference info, not step 5 and 6 of the process. */
.lhd-infogrid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: 46rem; margin: 0 auto; }
@media (min-width: 576px) { .lhd-infogrid { grid-template-columns: 1fr 1fr; } }
.lhd-infocard {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--lhd-shadow);
}
.lhd-infocard__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  margin-bottom: 0.9rem;
}
.lhd-infocard h3 { font-size: var(--lhd-step-1); color: var(--lhd-navy); margin-bottom: 0.5rem; }
.lhd-infocard p { margin: 0; font-size: var(--lhd-step--1); color: var(--lhd-body); }
.lhd-infocard__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: var(--lhd-step--1); }
.lhd-infocard__hours li { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px dashed var(--lhd-line); padding-bottom: 0.45rem; color: var(--lhd-body); }
.lhd-infocard__hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.lhd-infocard__hours li span:first-child { color: var(--lhd-navy); font-weight: 600; }

/* ============================ FAQ ============================ */

/* Opt-in "Related Articles" aside (FaqList `relatedLinks`) — the accordion
   keeps its own 54rem measure inside a wider column instead of centering
   full-width, and a narrow card of internal links sits beside it. */
.lhd-faq-with-aside { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 992px) { .lhd-faq-with-aside { grid-template-columns: 2fr 1fr; align-items: start; } }
.lhd-faq-with-aside .lhd-faq { max-width: none; margin: 0; }
.lhd-faq-aside {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  padding: 1.5rem;
}
.lhd-faq-aside__photo { width: 100%; height: auto; border-radius: var(--lhd-radius); margin-bottom: 1.1rem; }
.lhd-faq-aside__title { font-size: var(--lhd-step-0); color: var(--lhd-navy); margin-bottom: 0.9rem; }
/* Second (and later) titled list in the same aside — e.g. Invisalign's
   "Related Services" + "Related Articles" (FaqList `relatedGroups`) — needs
   breathing room above it so the two lists read as distinct groups. */
.lhd-faq-aside__list + .lhd-faq-aside__title { margin-top: 1.5rem; }
.lhd-faq-aside__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.lhd-faq-aside__list li { border-bottom: 1px dashed var(--lhd-line); }
.lhd-faq-aside__list li:last-child { border-bottom: 0; }
.lhd-faq-aside__list a {
  display: block;
  padding: 0.65rem 0.1rem;
  color: var(--lhd-ink);
  font-weight: 600;
  text-decoration: none;
}
/* "Related Services"/"Related Articles" aside sits on a white card — orange,
   not blue, per the sitewide light-background link rule. */
.lhd-faq-aside__list a:hover { color: var(--lhd-sun-dark); }

.lhd-faq { max-width: 54rem; margin: 0 auto; display: grid; gap: 0.85rem; }
.lhd-faq__item {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius);
  box-shadow: 0 4px 14px rgba(23, 33, 109, 0.05);
  overflow: hidden;
}
.lhd-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-1);
  font-weight: 700;
  color: var(--lhd-navy);
}
.lhd-faq__q::-webkit-details-marker { display: none; }
.lhd-faq__q::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5aa0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.lhd-faq__item[open] .lhd-faq__q::after { transform: rotate(180deg); }
.lhd-faq__item[open] .lhd-faq__q { background: var(--lhd-wash); }
.lhd-faq__a { padding: 1.1rem 1.25rem 1.35rem; border-top: 1px solid var(--lhd-line); }
.lhd-faq__a p { color: var(--lhd-body); }
.lhd-faq__a p:last-child { margin-bottom: 0; }
.lhd-faq__ask {
  background: var(--lhd-cream);
  border-left: 3px solid var(--lhd-sun);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  font-size: var(--lhd-step--1);
  color: var(--lhd-ink);
}
.lhd-faq__ask strong { display: block; font-family: var(--lhd-font-head); color: var(--lhd-navy); }

.lhd-faq__group {
  font-size: var(--lhd-step-2);
  color: var(--lhd-navy);
  margin: 1.75rem 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lhd-primary);
}
.lhd-faq__group:first-child { margin-top: 0; }

/* Opt-in per-page layout (FaqList `splitGroups`): each topic group gets its
   own centered heading, its question list, then its image — all full-width
   and stacked, questions first. Naturally responsive since nothing splits
   into columns. */
.lhd-faqsplit__group:last-child { margin-bottom: 0; }
.lhd-faqsplit__media { max-width: 40rem; }
.lhd-faqsplit__media img { border-radius: var(--lhd-radius-lg); box-shadow: var(--lhd-shadow); }
.lhd-faqsplit__plain { max-width: 54rem; }
.lhd-faqsplit__plain:last-child { margin-bottom: 0; }

/* Opt-in two-level layout (FaqList `categories`, used by /faqs-2/): a
   centered category heading, then each subcategory left-aligned with its
   question list and image in a 6/6 row. Reuses .lhd-split's existing grid —
   1 column under 992px, 2 columns above — for the same responsive behavior
   as every other split band on the site. Spacing/alignment that maps onto a
   stock Bootstrap utility (mb-5, mt-4, mt-3, mw-100, m-0, justify-content-*)
   is applied inline in FaqList.astro instead of a rule here — only the
   :last-child override and the 5rem sub-heading gap (off Bootstrap's scale)
   need real CSS. */
.lhd-faqcats__cat:last-child { margin-bottom: 0; }
/* Everything in a category — the subcategory heading AND the question list —
   shares .lhd-faq's 54rem measure, so the heading's left edge lines up with
   the questions under it instead of running the full container width. */
.lhd-faqcats__sub { max-width: 54rem; margin: 1.25rem auto 0; }
.lhd-faqcats__sub:first-of-type { margin-top: 0; }
/* Each subcategory is itself a <details>, so a long FAQ page opens as a short
   list of topics rather than every question at once. Same chevron + navy rule
   as .lhd-faq__group/.lhd-faq__q so the two accordion levels read as one
   family, one step larger at the topic level. */
.lhd-faqcats__grouptoggle {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step-2);
  font-weight: 700;
  color: var(--lhd-navy);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--lhd-primary);
}
.lhd-faqcats__grouptoggle::-webkit-details-marker { display: none; }
.lhd-faqcats__grouptoggle::after {
  content: '';
  flex: none;
  margin-left: auto;
  margin-top: 0.3em;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f5aa0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.lhd-faqcats__group[open] .lhd-faqcats__grouptoggle::after { transform: rotate(180deg); }
.lhd-faqcats__group .lhd-faq { margin-top: 1rem; }

/* Banner shown in place of page body copy when a ported page has no blocks
   (currently only the membership page — see [...slug].astro). A bordered,
   wash-blue card with a phone CTA reads as an intentional call-to-action strip
   rather than a lone sentence floating in the page. */
.lhd-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 1.5rem;
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-left: 4px solid var(--lhd-sun);
  border-radius: var(--lhd-radius-lg);
  padding: 1.5rem 1.75rem;
}
.lhd-callout p { margin: 0; color: var(--lhd-ink); font-size: var(--lhd-step-0); font-weight: 500; flex: 1 1 20rem; }
.lhd-callout .lhd-btn { flex: none; }

.lhd-safety {
  max-width: 54rem;
  margin: 2rem auto 0;
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-left: 4px solid var(--lhd-blue);
  border-radius: var(--lhd-radius);
  padding: 1.35rem 1.5rem;
}
.lhd-safety h3 { font-size: var(--lhd-step-1); margin-bottom: 0.5rem; }
.lhd-disclaimer {
  max-width: 54rem;
  margin: 1.25rem auto 0;
  font-size: var(--lhd-step--1);
  font-style: italic;
  color: #6b7a89;
}

/* ============================ footer ============================ */

.lhd-footer { background: var(--lhd-navy); color: #cfdcea; }
.lhd-footer a { color: #cfdcea; text-decoration: none; }
.lhd-footer a:hover { color: var(--lhd-sun); text-decoration: none; }
/* padding-block, NOT the `padding: <v> 0 <v>` shorthand this used to be. This
   element is also a Bootstrap `.container`, whose 12px horizontal padding is
   what cancels the -12px negative margins on the `.row` inside it. Zeroing
   left/right let those negative margins escape, so the row was 24px wider than
   the viewport and the whole page scrolled sideways on mobile (a Google
   mobile-UX flag). Setting only the block axis leaves the container padding
   intact. Same trap applies to any `.container` here — never set its
   horizontal padding to 0. */
.lhd-footer__top { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.lhd-footer h4, .lhd-footer h5, .lhd-footer h6 { color: #fff; font-family: var(--lhd-font-head); }
.lhd-footer__brand img { width: 168px; height: auto; background: #fff; border-radius: 12px; padding: 0.5rem; }
.lhd-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: var(--lhd-step--1); }
/* A heading-only entry inside a link list (e.g. "Patient Education" grouped
   under "Patient Resources" rather than getting its own top-level column —
   see the FooterLinkItem.heading flag in site-data.ts). Not a link: smaller,
   muted-white, uppercase, with a little breathing room above it so it reads
   as a sub-group label, not another clickable item. */
.lhd-footer__sublabel {
  margin-top: 0.35rem;
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.lhd-footer__hours { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; display: grid; gap: 0.4rem; }
/* Column is only 3/12 wide, so day + time must not wrap onto a second line
   (that broke the neat list into a ragged one). white-space: nowrap on each
   half, a tight 0.5rem gap and the slightly smaller font above keep even the
   longest row ("Wednesday" + "8:00 AM - 6:00 PM") on one line all the way
   down to the 992px (iPad-landscape) container width. */
.lhd-footer__hours li { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px dashed rgba(255, 255, 255, 0.14); padding-bottom: 0.4rem; }
.lhd-footer__hours li span { white-space: nowrap; }
.lhd-footer__hours li:last-child { border-bottom: 0; }
.lhd-footer__note { font-size: var(--lhd-step--1); color: var(--lhd-sun); margin-top: 0.75rem; }
.lhd-footer__social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.lhd-footer__social a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, transform 0.2s ease;
}
.lhd-footer__social a:hover { background: var(--lhd-sun); transform: translateY(-2px); }
.lhd-footer__social svg { width: 1.1rem; height: 1.1rem; fill: #fff; }
.lhd-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.15rem 0;
  font-size: var(--lhd-step--1);
}

/* Contact form (kept on this site so leads reach /api/contact). */
.lhd-form {
  background: #fff;
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
}
.lhd-form h4 { color: var(--lhd-navy); margin-bottom: 0.35rem; }
.lhd-form__hint { font-size: var(--lhd-step--1); color: var(--lhd-body); margin-bottom: 1.1rem; }
.lhd-form .form-control {
  border: 1px solid var(--lhd-line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-size: var(--lhd-step-0);
  color: var(--lhd-ink);
  background: #fff;
}
.lhd-form .form-control:focus {
  border-color: var(--lhd-sky);
  box-shadow: 0 0 0 3px rgba(77, 151, 194, 0.18);
}
.lhd-form textarea.form-control { min-height: 7.5rem; resize: vertical; }
.lhd-form .lhd-err { display: block; font-size: 0.8rem; color: #c0392b; margin-top: 0.3rem; }
.lhd-form .lhd-btn { width: 100%; }

/* Floating call button (mobile-first quick tap). */
.lhd-callfab {
  position: fixed;
  right: 0.9rem;
  bottom: 1rem;
  z-index: 1040;
  box-shadow: var(--lhd-shadow-lg);
}

@media (max-width: 575.98px) {
  .lhd-offer { max-width: none; }
  .lhd-callfab { left: 0.9rem; right: 0.9rem; }
}

/* Cookie-preferences "reopen" control (core's consent manager; only its id is
   ours to hook into — see the mobile-nav rule above that hides it/.lhd-callfab
   while the menu is open). On phones the full pill ("Cookie Preferences" text)
   sat at the bottom edge and overlapped the full-width .lhd-callfab bar above.
   Below 576px it becomes a small round icon-only button, moved up clear of
   that bar; the pill's own background/box-shadow/colour are left untouched so
   it still matches the desktop pill, only size/shape/position change here.
   Text is kept in the DOM (so screen readers still announce it) but pushed off
   -screen with text-indent + cropped by overflow: hidden, the classic
   accessible image-replacement technique — nothing here uses display:none or
   visibility:hidden, which would strip it from the accessible name. The icon
   is drawn with mask-image + background-color: currentColor (not a flat
   background image) specifically so it inherits whatever text colour the pill
   already used, rather than us guessing a hardcoded colour. */
@media (max-width: 575.98px) {
  #dnConsentReopen {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0;
    border-radius: 50% !important;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    position: fixed !important;
    left: auto !important;
    right: 0.9rem !important;
    bottom: 5.5rem !important;
    top: auto !important;
    z-index: 1041;
  }
  #dnConsentReopen::after {
    content: '';
    display: block;
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    text-indent: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 3.2 3.2 0 0 1-3.4-3.8 3 3 0 0 1-3.4-3.4A3.2 3.2 0 0 1 12 3z'/%3E%3Ccircle cx='8.8' cy='10.2' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='13.6' cy='8.6' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='9.4' cy='15' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='14.6' cy='13.8' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='12.6' cy='17.6' r='.9' fill='white' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 3.2 3.2 0 0 1-3.4-3.8 3 3 0 0 1-3.4-3.4A3.2 3.2 0 0 1 12 3z'/%3E%3Ccircle cx='8.8' cy='10.2' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='13.6' cy='8.6' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='9.4' cy='15' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='14.6' cy='13.8' r='.9' fill='white' stroke='none'/%3E%3Ccircle cx='12.6' cy='17.6' r='.9' fill='white' stroke='none'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
  /* Same rule as .lhd-callfab above: stay hidden while the mobile nav is open
     (the nav itself goes `position: fixed; height: 100dvh` then) so it can't
     float on top of the full-screen menu. */
  body:has(#lhdNav.show) #dnConsentReopen,
  body:has(#lhdNav.collapsing) #dnConsentReopen { display: none !important; }
}

/* ============ light contact block (top half of Footer.astro) ============ */

.lhd-contact { margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.lhd-contact li { display: flex; gap: 0.85rem; align-items: flex-start; }
.lhd-contact svg { flex: none; margin-top: 0.25rem; color: var(--lhd-blue); }
.lhd-contact strong {
  display: block;
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lhd-sky);
}
.lhd-contact a { color: var(--lhd-ink); text-decoration: none; font-weight: 600; }
.lhd-contact a:hover { color: var(--lhd-blue); }

.lhd-contact__note { font-size: var(--lhd-step--1); font-weight: 600; color: var(--lhd-sun-dark); margin: 0.75rem 0 0; }

.lhd-mapcard {
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  box-shadow: var(--lhd-shadow);
  border: 1px solid var(--lhd-line);
}
.lhd-mapcard iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Band without a photo (the closing "Get Started" call to action). */
.lhd-band--plain { background-image: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 66%, var(--lhd-primary)); }
.lhd-band--plain .lhd-band__scrim { background: none; }
/* .lhd-ctarow is a flex row (not centered by default — see PageBlocks.astro),
   but every `.lhd-band` is itself centred text; without this a lone CTA
   button sits flush left instead of under the centred heading/paragraph. */
.lhd-band .lhd-ctarow { justify-content: center; }

/* ============ small practice-info sidebar (Red Light Therapy intro) ============ */
/* A narrower companion to .lhd-split for pages that pair their opening copy
   with a compact "get in touch" card instead of a photo — reuses the same
   contact/hours/licence pieces as Footer.astro's #contact section and
   .lhd-infocard__hours, just at card scale. */
@media (min-width: 992px) { .lhd-split--sidebar { grid-template-columns: 2fr 1fr; } }
.lhd-sidebar {
  background: #fff;
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  box-shadow: var(--lhd-shadow);
  padding: 1.5rem;
  align-self: start;
}
.lhd-sidebar__map { margin-bottom: 1.25rem; }
.lhd-sidebar__map iframe { height: 180px; }
.lhd-sidebar__contact { margin-bottom: 1.25rem; }
.lhd-sidebar__title { font-size: var(--lhd-step-0); color: var(--lhd-navy); margin-bottom: 0.6rem; }
.lhd-sidebar .lhd-infocard__hours { margin-bottom: 1.25rem; }
.lhd-sidebar .lhd-doctor__credential { display: flex; justify-content: center; text-align: center; margin-bottom: 1rem; }
.lhd-sidebar .lhd-btn { display: block; text-align: center; }

/* ============ photo with a caption overlay (Red Light Therapy banner) ============ */
.lhd-bannerphoto { position: relative; }
.lhd-bannerphoto__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: linear-gradient(120deg, rgba(15, 32, 74, 0.88), rgba(43, 113, 155, 0.8));
  color: #fff;
  border-radius: var(--lhd-radius);
  padding: 0.9rem 1.15rem;
  display: grid;
  gap: 0.15rem;
}
.lhd-bannerphoto__eyebrow {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-sun);
}
.lhd-bannerphoto__title { font-family: var(--lhd-font-head); font-weight: 800; font-size: var(--lhd-step-1); }

/* Full-width photo stacked above a section's text (Sleep Apnea Treatment's
   "Oral Appliance Therapy Explained" — a photo banner, not a side-by-side
   split). */
.lhd-stackphoto { width: 100%; height: auto; border-radius: var(--lhd-radius-lg); box-shadow: var(--lhd-shadow); margin-bottom: 2rem; }
.lhd-band .lhd-eyebrow { color: var(--lhd-sun); }

/* ==========================================================================
   Interior pages (src/pages/[...slug].astro): compact photo/gradient hero,
   breadcrumb, and the block types the ported markdown produces.
   ========================================================================== */

.lhd-phero {
  position: relative;
  background-color: var(--lhd-navy);
  background-size: cover;
  /* Every ported interior page, the blog index and every blog post share this
     one hero rule, so this single default covers all of them site-wide.
     Was a hard "center top" (0% down); nudged to 20% down as a sitewide
     starting point after the Cosmetic Dentistry hero photo (a person) was
     cropping her chin/shoulders at the very top-anchored position — shows a
     little more of the lower part of each photo while still favoring the
     top. A page whose own photo needs a different balance can override this
     per-page via `heroPosition` in its JSON (see cosmetic-dentistry.json),
     which renders as a higher-specificity inline style. */
  background-position: center 20%;
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
/* Fixed 545px height on desktop only (451px until 2026-09-17), per owner request, for every interior
   hero (ported pages, blog index, blog posts) — NOT the homepage, which keeps
   its own fluid .lhd-hero height. min-height (not height) so a page with an
   unusually long h1/tagline can still grow rather than clip; flex +
   align-items centers the crumbs/title/CTA block inside it, same technique
   .lhd-hero already uses. Below this breakpoint the fluid clamp() padding
   above still governs the height, so mobile/tablet are unaffected. */
@media (min-width: 992px) {
  .lhd-phero {
    min-height: 545px;
    display: flex;
    align-items: center;
    padding-block: 0;
  }
}
.lhd-phero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 32, 74, 0.88) 0%, rgba(43, 113, 155, 0.78) 55%, rgba(77, 151, 194, 0.5) 100%);
}
.lhd-phero--plain { background-image: linear-gradient(120deg, var(--lhd-navy), var(--lhd-primary-deep) 66%, var(--lhd-primary)); }
.lhd-phero--plain .lhd-phero__scrim { background: none; }
.lhd-phero__inner { position: relative; z-index: 2; max-width: 52rem; }
.lhd-phero h1 { color: #fff; margin-bottom: 0.75rem; }
.lhd-phero__tagline { color: rgba(255, 255, 255, 0.93); font-size: var(--lhd-step-1); margin-bottom: 1.5rem; }
.lhd-phero__tagline a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.lhd-phero__tagline a:hover { color: var(--lhd-sun); }
.lhd-phero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lhd-crumbs {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 1rem;
  font-size: var(--lhd-step--1);
  color: rgba(255, 255, 255, 0.8);
}
.lhd-crumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.lhd-crumbs a:hover { color: #fff; text-decoration: underline; }
.lhd-crumbs li + li::before { content: '/'; margin-right: 0.4rem; opacity: 0.6; }

/* Ported page body. Max width for readability; every block styled here. */
.lhd-page { max-width: 54rem; margin-inline: auto; }
.lhd-page > h2 { margin: 2.5rem 0 1rem; clear: both; }
.lhd-page > h2:first-child { margin-top: 0; }
.lhd-page > h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}
.lhd-page > h3 { margin: 2rem 0 0.75rem; font-size: var(--lhd-step-1); }
.lhd-page > h4 { margin: 1.75rem 0 0.6rem; font-size: var(--lhd-step-0); color: var(--lhd-primary-deep); text-transform: uppercase; letter-spacing: 0.06em; clear: both; }

/* A headshot floated beside the paragraphs right after it (see PageBlocks.astro's
   "portrait" block — currently only the "Meet the Doctors" page). `clear: both`
   on the h2/h4 rules above means the float can never bleed into the next
   doctor's heading; it only ever sits next to that one doctor's own bio text. */
.lhd-portrait {
  float: right;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: var(--lhd-shadow);
  margin: 0.25rem 0 1.25rem 1.75rem;
}
.lhd-portrait--left { float: left; margin: 0.25rem 1.75rem 1.25rem 0; }
@media (max-width: 575.98px) {
  .lhd-portrait, .lhd-portrait--left {
    float: none;
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 1.25rem;
  }
}
/* .lhd-portrait circle in a flex row; only the size + crop Bootstrap cannot do. */
.lhd-portrait-sm { width: 200px; height: 200px; object-fit: cover; object-position: top; }
@media (max-width: 575.98px) {
  .lhd-portrait-sm { width: 160px; height: 160px; }
}
.lhd-page p { color: var(--lhd-body); }
.lhd-page > .lhd-btn { margin: 0.5rem 0 1.5rem; }

.lhd-page ol { padding-left: 1.25rem; margin: 1.25rem 0; display: grid; gap: 0.5rem; color: var(--lhd-body); }
.lhd-page ol::marker { color: var(--lhd-primary-deep); font-weight: 700; }

/* Their service link columns (see PageBlocks.astro's "services" group: a
   single-item `ul` badge followed by one or more `links` blocks). Each
   original `links` block becomes its own icon-topped column instead of one
   shared auto-fill grid, so item counts stay grouped exactly as authored
   instead of wrapping unpredictably across grid tracks. */
.lhd-services { margin: 1.75rem 0; }
.lhd-services__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  font-family: var(--lhd-font-head);
  font-weight: 800;
  font-size: var(--lhd-step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.lhd-services__badge svg { width: 1.1em; height: 1.1em; flex: none; }

.lhd-servicecols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem 2.25rem;
}
.lhd-servicecol__icon {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  margin-bottom: 0.9rem;
}
.lhd-servicecol__icon svg { width: 1.4rem; height: 1.4rem; }
.lhd-servicecol__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
/* Specificity must match/beat `.lhd-prose a:not(.lhd-btn)` (0,2,1) — .lhd-page
   is the same element as .lhd-prose (see the "Ported page body" rules below),
   so without the extra `.lhd-page` ancestor class here the generic prose-link
   underline would keep winning and reintroduce the permanent-underline look
   this replaces. */
.lhd-page .lhd-servicecol__list a { color: var(--lhd-ink); text-decoration: none; font-weight: 600; }
/* Orange, not blue, on hover — these service columns sit on the same
   light page background as `.lhd-prose`/`.lhd-list` links above. */
.lhd-page .lhd-servicecol__list a:hover { color: var(--lhd-sun-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Comparison tables (laser vs traditional, CPAP vs appliance, …). */
.lhd-tablewrap { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--lhd-radius); border: 1px solid var(--lhd-line); }
.lhd-table { width: 100%; border-collapse: collapse; min-width: 34rem; background: #fff; }
.lhd-table th, .lhd-table td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--lhd-line); vertical-align: top; font-size: var(--lhd-step--1); }
.lhd-table thead th { background: var(--lhd-wash); color: var(--lhd-navy); font-family: var(--lhd-font-head); }
.lhd-table tbody tr:last-child td { border-bottom: 0; }

/* Review videos (YouTube shorts, 9:16). */
.lhd-video { margin: 1.5rem 0; max-width: 22rem; }
.lhd-video__frame { position: relative; padding-top: 177.78%; border-radius: var(--lhd-radius-lg); overflow: hidden; box-shadow: var(--lhd-shadow); background: #000; }
.lhd-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   Runs the practice's own pages lay out side by side (see PageBlocks.astro):
   paired CTA buttons, and their 3-column video-testimonial rows.
   ===================================================================== */
.lhd-ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}
.lhd-ctarow .lhd-btn { margin: 0; }

.lhd-vgrid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.75rem 0;
}
@media (max-width: 900px) { .lhd-vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lhd-vgrid { grid-template-columns: 1fr; } }

.lhd-vcard { margin: 0; }
.lhd-vcard__title {
  margin: 0.9rem 0 0.35rem;
  font-size: var(--lhd-step-1);
}
.lhd-vcard__quote {
  margin: 0;
  color: var(--lhd-body);
  font-size: var(--lhd-step--1);
  line-height: 1.6;
}

.lhd-citation { font-size: 0.82rem; color: #6b7a89; margin: 0.35rem 0 1.25rem; }
.lhd-citation a { color: #6b7a89; }



/* ==========================================================================
   Buttons always win.
   Every button label follows the header's "Schedule Online" pill: readable at
   rest, WHITE on hover. These `a.lhd-btn…` selectors are deliberately the most
   specific colour rules in the file and sit last, so no descendant link rule
   (.lhd-prose a, .lhd-footer a, a future one someone adds) can ever recolour a
   button's text into its own background again.
   ========================================================================== */

a.lhd-btn, a.lhd-btn:hover, a.lhd-btn:focus { text-decoration: none; }

a.lhd-btn--sun,
a.lhd-btn--primary { color: #23303d; }
a.lhd-btn--sun:hover, a.lhd-btn--sun:focus-visible,
a.lhd-btn--primary:hover, a.lhd-btn--primary:focus-visible { color: #fff; }

a.lhd-btn--ghost { color: var(--lhd-sun-dark); }
a.lhd-btn--ghost:hover, a.lhd-btn--ghost:focus-visible { color: #fff; }

a.lhd-btn--light { color: var(--lhd-navy); }
a.lhd-btn--light:hover, a.lhd-btn--light:focus-visible { color: #fff; }

a.lhd-btn--outline-light,
a.lhd-btn--outline-light:hover,
a.lhd-btn--outline-light:focus-visible { color: #fff; }



/* ===========================================================================
   Blog Insights — /blog-insights/ index and the post pages
   ---------------------------------------------------------------------------
   The index renders EVERY post up front and the script only toggles [hidden],
   so these rules must never assume a card is present or absent: layout comes
   from the grid, not from counting children.
   =========================================================================== */

/* --- filter bar ---------------------------------------------------------- */
.lhd-bfilter {
  border-bottom: 1px solid var(--lhd-line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.lhd-bfilter__label {
  font-family: var(--lhd-font-head);
  font-size: var(--lhd-step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lhd-primary-deep);
  margin: 0 0 0.85rem;
}

.lhd-bfilter__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lhd-bfilter__chip {
  appearance: none;
  border: 1px solid var(--lhd-line);
  background: #fff;
  color: var(--lhd-body);
  font-family: var(--lhd-font-body);
  font-size: var(--lhd-step--1);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.lhd-bfilter__chip:hover { border-color: var(--lhd-primary); color: var(--lhd-primary-deep); }

.lhd-bfilter__chip.is-active {
  background: var(--lhd-primary-deep);
  border-color: var(--lhd-primary-deep);
  color: #fff;
}

.lhd-bcount {
  font-size: var(--lhd-step--1);
  color: var(--lhd-body);
  margin-bottom: 1.5rem;
}

/* --- card grid ----------------------------------------------------------- */
.lhd-bgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (max-width: 991px) { .lhd-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 575px) { .lhd-bgrid { grid-template-columns: minmax(0, 1fr); } }

.lhd-bcard {
  display: flex;
  flex-direction: column;
  background: var(--lhd-paper);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lhd-bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--lhd-shadow);
  border-color: var(--lhd-mist);
}

/* `hidden` must beat `display: flex` — the filter relies on it. */
.lhd-bcard[hidden] { display: none; }

.lhd-bcard__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--lhd-wash);
  overflow: hidden;
}

.lhd-bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.lhd-bcard:hover .lhd-bcard__media img { transform: scale(1.04); }

.lhd-bcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1 1 auto;
}

.lhd-bcard__cat {
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: var(--lhd-wash);
  color: var(--lhd-primary-deep);
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.lhd-bcard__cat:hover { background: var(--lhd-primary-deep); color: #fff; }
.lhd-bcard__cat--static { cursor: default; }
.lhd-bcard__cat--static:hover { background: var(--lhd-wash); color: var(--lhd-primary-deep); }

.lhd-bcard__title { font-size: var(--lhd-step-1); line-height: 1.3; margin: 0; }

.lhd-bcard__title a {
  color: var(--lhd-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--lhd-sun), var(--lhd-sun));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.18s ease;
}

.lhd-bcard__title a:hover { color: var(--lhd-primary-deep); background-size: 100% 2px; }

.lhd-bcard__excerpt {
  font-size: var(--lhd-step--1);
  color: var(--lhd-body);
  margin: 0;
  flex: 1 1 auto;
}

.lhd-bcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--lhd-body);
  opacity: 0.85;
  margin: 0;
}

.lhd-bempty { text-align: center; color: var(--lhd-body); padding: 3rem 0; }
.lhd-bmore { display: flex; justify-content: center; margin-top: 2.5rem; }
.lhd-bmore [hidden] { display: none; }

/* --- post page ----------------------------------------------------------- */
/* Posts always have a photo hero; the scrim is heavier than the page hero's
   because the title sits over an editorial image rather than a brand gradient. */
.lhd-phero--post .lhd-phero__scrim {
  background: linear-gradient(180deg, rgba(18, 32, 47, 0.55), rgba(18, 32, 47, 0.82));
}

.lhd-phero--post .lhd-phero__inner { max-width: 54rem; }

.lhd-bpost__cat {
  display: inline-block;
  background: var(--lhd-sun);
  color: #23303d;
  font-family: var(--lhd-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 0.9rem;
}

.lhd-bpost__cat:hover { background: var(--lhd-sun-dark); color: #fff; }

.lhd-bpost__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--lhd-step--1);
  margin: 0.9rem 0 0;
}

/* Article body. `.lhd-page` sets the measure; these rules cover the elements
   the ported WordPress copy brings that the block-built pages never emit. */
.lhd-bpost h2 { margin: 2.5rem 0 1rem; }
.lhd-bpost h2:first-child { margin-top: 0; }
.lhd-bpost h3 { margin: 2rem 0 0.75rem; font-size: var(--lhd-step-1); }
.lhd-bpost h4 { margin: 1.75rem 0 0.6rem; font-size: var(--lhd-step-0); }

.lhd-bpost ul, .lhd-bpost ol {
  padding-left: 1.25rem;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.5rem;
  color: var(--lhd-body);
}

.lhd-bpost li::marker { color: var(--lhd-primary-deep); font-weight: 700; }

.lhd-bpost img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lhd-radius);
  margin: 1.75rem 0;
}

/* Ported tables are wide and unpredictable — scroll them in their own box so
   the page body never scrolls sideways on a phone. The wrapper is emitted by
   the importer, not by script, so it is there before first paint. */
.lhd-tablewrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}

.lhd-bpost table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--lhd-step--1);
}

.lhd-bpost table :is(td, th) {
  border: 1px solid var(--lhd-line);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  color: var(--lhd-body);
}

.lhd-bpost table tr:first-child :is(td, th) { background: var(--lhd-wash); color: var(--lhd-ink); }

.lhd-bpost blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--lhd-sun);
  color: var(--lhd-ink);
  font-style: italic;
}

.lhd-bpost__cta {
  max-width: 54rem;
  margin: 3rem auto 0;
  background: var(--lhd-wash);
  border: 1px solid var(--lhd-line);
  border-radius: var(--lhd-radius-lg);
  padding: 1.75rem;
}

.lhd-bpost__cta h2 { font-size: var(--lhd-step-2); margin-bottom: 0.6rem; }
.lhd-bpost__cta p { margin-bottom: 1.25rem; }

.lhd-bpost__relhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.lhd-bpost__relhead .lhd-h2 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .lhd-bcard, .lhd-bcard__media img { transition: none; }
  .lhd-bcard:hover { transform: none; }
  .lhd-bcard:hover .lhd-bcard__media img { transform: none; }
}


/* ===========================================================================
   Scroll motion — the site-side half of core's <ScrollReveal />
   ---------------------------------------------------------------------------
   Core owns the reveal mechanism and ships the hidden/animating states. What
   belongs HERE is only what is specific to this brand: which of our classes
   react to scroll position, and what colour the reading bar is.

   `html.dsr-on` is present only when the reveal script is actually running and
   motion is allowed, so anything keyed on it is automatically off for a visitor
   with JS disabled or "reduce motion" set. Keep it that way.
   =========================================================================== */

/* Anchor jumps (the nav's #contact, the blog's filter) glide instead of
   teleporting. Guarded, because a forced smooth scroll is genuinely unpleasant
   for people who asked for less motion — and for anyone using find-in-page. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The sticky header tightens and lifts once the page has moved, so it reads as
   a bar sitting above the content rather than part of it. Only the shadow and
   the padding change — never the height of a sticky element by enough to shift
   what the visitor is reading. */
.lhd-header {
  transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.dsr-scrolled .lhd-header {
  box-shadow: 0 6px 28px rgba(23, 33, 109, 0.16);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}

.lhd-header .navbar { transition: padding 0.3s ease; }
.dsr-scrolled .lhd-header .navbar { padding-block: 0.3rem; }

.lhd-header__logo img { transition: width 0.3s ease; }
.dsr-scrolled .lhd-header__logo img { width: 112px; }

/* Reading progress on article pages, in the brand's CTA orange over blue. */
.dsr-progress__fill {
  background: linear-gradient(90deg, var(--lhd-primary), var(--lhd-sun));
}

/* The hero photo drifts up a touch as it is revealed, which reads as depth
   against the copy sliding in over it. Contained by .lhd-hero's own
   `overflow: hidden`, and vertical only, so it cannot widen the page. */
@media (prefers-reduced-motion: no-preference) {
  html.dsr-on .lhd-hero { animation: lhd-hero-settle 1.4s var(--dsr-ease, ease-out) both; }
}

/* Drifts down into the same bottom-anchored rest position .lhd-hero now uses
   at all times, so the entrance animation never settles higher than the crop
   the page loads with. */
@keyframes lhd-hero-settle {
  from { background-position: center 94%; }
  to   { background-position: center bottom; }
}


/* --------------------------------------------------------------------------
   Blog post inline images that sit beside their related paragraph instead of
   stacking in their own block (used by root-canal-treatment-laguna-niguel-ca
   and available to any future post). Floats on desktop/tablet, stacks full
   width on small phones. */
.lhd-bpost__inline-img {
  display: block;
  width: 280px;
  max-width: 45%;
  height: auto;
  border-radius: 12px;
  margin: 0.25rem 0 1.25rem;
}
.lhd-bpost__inline-img--left { float: left; margin-right: 1.75rem; }
.lhd-bpost__inline-img--right { float: right; margin-left: 1.75rem; }
.lhd-bpost h2, .lhd-bpost h3 { clear: both; }
@media (max-width: 576px) {
  .lhd-bpost__inline-img--left,
  .lhd-bpost__inline-img--right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}