/* Danbe Dental - r4 fix pass. Every value comes from tokens.css.
   Section comments name the measured recipe each block executes.

   The r4 law: where a recipe's Mechanism section says a value is viewport-relative,
   this file authors the RATIO (a percentage, a flex rule, an intrinsic size) and
   lets the value land. Absolute offsets copied from a 1440x900 capture are the
   defect class the audit found eleven times; none remain. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--body-ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--ink); }
/* no control may fall back to the UA font */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 400;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); padding: 10px 16px;
  font-size: var(--size-pill-small); font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- The one button atom (FLAVOR) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pill-h); padding: var(--pill-pad);
  border-radius: var(--radius-pill); border: var(--pill-border);
  background: var(--pill-fill); color: var(--pill-text);
  font-family: var(--font-body); font-size: var(--size-pill); font-weight: 700;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.pill:hover, .pill:focus-visible {
  background: var(--pill-fill-hover); color: var(--pill-text-hover);
}
.pill--350 { width: 350px; max-width: 100%; }
.pill--block { width: 100%; }
.pill--on-dark { border: var(--pill-border-on-dark); }
.pill--util {
  height: var(--pill-h-util); font-size: var(--size-pill-small); padding: 0 16px;
}
.pill .gl { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ================= 00 HEADER : hanoverendo/00 + mvendo/00 =================
   Mechanism: a fixed bar whose height is NOT authored - it is the sum of a 70px
   pill row and a 75px nav row in a flex column. The nav row carries the logo and
   the nav as flex children, so the logo's x is a consequence of the track, never
   a gutter (the recipe's "x84" is what centring produces at 1440 and becomes x4
   at 1280). r3 pinned both with absolute offsets, which is V2/V10.

   Device precondition (hanoverendo/00): the overhanging monogram transfers only to
   a transparent mark taller than its row AND without a baseline text row. Danbe's
   mark is a boxed wordmark with a "SPECIALIST CARE AT EVERY AGE" tagline row, so
   the device does not transfer and the logo sits INSIDE the bar (V1/V18).
   The logo therefore occupies its own cell in the bar-height track rather than the
   75px nav row, which is the only way a 1.8:1 lockup clears both bar edges. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: var(--header-h);
  background: var(--frost-header);
  border: 0; box-shadow: none;
  transition: background-color var(--t-header);
}
.site-header.is-solid { background: var(--white); }

.hd-inner {
  height: var(--header-h);
  display: flex; flex-flow: row nowrap; align-items: stretch;
  padding-left: var(--header-edge);
}

/* logo cell: fixed px width (recipe), vertically centred in the BAR */
.hd-logo { flex: 0 0 auto; align-self: center; display: block; }
.hd-logo picture { display: block; }
.hd-logo img { width: var(--logo-w); height: auto; aspect-ratio: 219 / 122; }

/* the two storeys live to the right of the logo cell */
.hd-stack {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}

.hd-util {
  height: var(--header-util-h);
  display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end;
  gap: 10px; padding-right: var(--header-edge);
}

/* nav fills the track left of the bar edge and starts after the logo (V10) */
.hd-nav {
  height: var(--header-nav-h);
  display: flex; align-items: stretch; min-width: 0;
  padding-left: var(--header-edge); padding-right: var(--header-edge);
}
.nav-list {
  display: flex; align-items: stretch; justify-content: space-between;
  width: 100%; list-style: none; margin: 0; padding: 0;
}
.nav-list > li { position: relative; display: flex; align-items: stretch; flex: 0 1 auto; }

.nav-link {
  display: flex; align-items: center; white-space: nowrap;
  padding: 20px 10px;
  font-family: var(--font-body); font-size: var(--size-nav); font-weight: 500;
  line-height: var(--lh-nav); letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  transition: color var(--t-fast);
}
.nav-link:hover { color: var(--azure-deep); }

/* class B: styled active marker WITH parent highlighting */
.nav-link.is-current::after,
.has-drop.is-parent > .nav-link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px;
  height: 2px; background: var(--azure-deep);
}
.has-drop.is-parent > .nav-link::after { right: 38px; }

.caret {
  width: 28px; height: var(--header-nav-h); padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.caret svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--t-fast); }
.has-drop:hover > .caret svg,
.caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.has-drop:hover > .nav-link,
.has-drop.is-open > .nav-link { color: var(--azure-deep); }

/* dropdown card : humphries-interactive/01 + hanoverendo-interactive/01 */
.drop {
  position: absolute; top: 100%; left: 0;
  width: 350px; padding: 24px;
  background: var(--white); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fade), visibility var(--t-fade);
  z-index: 10;
}
.has-drop:hover > .drop,
.has-drop.is-open > .drop,
.drop:focus-within { opacity: 1; visibility: visible; }
/* the panel must never run off the right edge of the bar */
.nav-list > li:nth-last-child(-n+3) .drop { left: auto; right: 0; }

.drop-head {
  margin: 0 0 10px; font-size: var(--size-dropdown); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-upper); color: var(--azure-deep);
}
.drop-head + ul + .drop-head { margin-top: 18px; }
.drop ul { list-style: none; margin: 0; padding: 0; }
.drop li + li { margin-top: 6px; }
.drop a {
  display: block; padding: 3px 0; height: 28px; line-height: 22px;
  font-size: var(--size-dropdown); font-weight: 400; text-transform: uppercase;
  color: var(--muted-ink); text-decoration: none; transition: color var(--t-fast);
}
.drop a:hover { color: var(--azure-deep); }

/* mobile-only chrome, hidden until the mobile-header tier */
.mb-tel, .mb-menu, .drawer, .actionbar { display: none; }

/* ================= 01 HERO : hanoverendo/01 + mvendo/01 =================
   Mechanism: the section has no height of its own; its container is
   height:100vh, a column flex box, justify-content:flex-end, gap:2%,
   padding-bottom:5%. padding-bottom resolves against the viewport WIDTH and the
   gap against the container's content HEIGHT, which is why the stack moves when
   either axis changes. The recipe's y414/y493/y780 are landed values at 1440x900
   only; r3 froze them (V4/V9) and floored the hero at 900px so short viewports
   lost the pill below the fold. */
.hero {
  position: relative; height: 100vh;
  overflow: hidden; background: var(--ink-deep);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
/* no scrim : both precedents put type straight on the footage */
.hero-stack {
  position: relative; height: 100%;
  max-width: var(--hero-well); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
  gap: 2%;
  padding: 0 var(--gutter-phone) 5%;
  text-align: center;
}

.hero-h1 {
  width: 100%; max-width: var(--h1-measure);
  margin: 0;
  font-size: var(--size-h1); line-height: var(--lh-h1); color: var(--white);
  /* class B (a11y floor, r4c): the GWB footage's deck/water crosses the H1 band
     at 1.9-2.8:1 in its brightest patches and no crop of the 4K master passes
     bare (measured; see homepage-spec "Video source"). A glyph-scoped ink halo
     is the minimal delta - smaller than the gradient DEFECTS.md pre-authorised.
     No scrim layer; footage elsewhere stays untouched. */
  text-shadow: 0 1px 2px rgba(13, 28, 48, .55), 0 2px 18px rgba(13, 28, 48, .50),
               0 0 42px rgba(13, 28, 48, .40);
}
/* the ghost card IS the logo box at its authored width (recipe: 350x270.7 is the
   350px-wide render of a 600x464 PNG). Danbe's lockup is 1.8:1, so the same
   mechanism gives a 350x195 card instead of 62px of empty frost (V8). */
.hero-card {
  width: var(--hero-card-w); max-width: 100%;
  background: var(--frost-card);
  display: flex;
  border-radius: 0; border: 0; box-shadow: none;
}
.hero-card img { width: 100%; height: auto; }
.hero-pill { width: 281px; max-width: 100%; flex: none; }

/* Reduced motion: smooth scroll off, but the ambient hero video stays visible.
   The earlier display:none here made the hero a still for every user whose OS
   has animation effects off (owner-observed on Windows 2026-09-24); owner
   ruling: the video displays for everyone, as the family sites do. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.hero { background: url("../assets/hero-ambient.jpg") center/cover no-repeat; }

/* ================= the canvas : hanoverendo/02 =================
   Two layers, not one: the page block carries the fixed photo plus a 0.40 white
   overlay, and every band adds its own 0.76 white. Effective white 0.856, so the
   photo reads through at ~14%. */
.canvas {
  position: relative;
  background-image: url("../assets/canvas-wash.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.canvas::before {
  content: ""; position: absolute; inset: 0;
  background: var(--wash-page); pointer-events: none;
}
.band { position: relative; background-color: var(--wash-band); }

/* ================= 02 WELCOME SPLIT : hanoverendo/02 =================
   The "144px gutters" are 10% of viewport width per side: the inner well is 80%.
   The split is two calc(50% - 10px) columns with a 20px gap - the prose recipe's
   "~164px center gap" is arithmetically impossible against its own 1152px well
   and the Mechanism pass corrects it. */
.welcome { padding: var(--band-pad) 0; }
.welcome-well { width: var(--well-welcome); margin: 0 auto; }
.welcome-intro {
  margin: 0;
  font-size: var(--size-lede); line-height: var(--lh-lede);
  text-align: center; color: var(--body-ink);
}
.welcome-split {
  margin: 60px 0 0;
  display: flex; flex-flow: row nowrap; gap: var(--split-gap);
  align-items: center;                 /* V13: the recipe centres copy on the photo */
}
.welcome-split > * { width: calc(50% - (var(--split-gap) / 2)); min-width: 0; }
.welcome-media img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0; box-shadow: none;
}
.welcome-copy { text-align: center; }
.welcome-copy h2 { font-size: var(--size-h2); line-height: var(--lh-h2); color: var(--ink); }
.welcome-copy p {
  margin: 20px 0 28px; font-size: var(--size-lede); line-height: var(--lh-lede);
}

/* ================= 03 SPECIALISTS : humphries/02 =================
   The plate law: plates are width:100% with max-width:1300px inside a container
   with 30px side padding, i.e. min(1300, vw - 60). The r3 "70px band gutter" was
   a 1440-derived constant that survived into the phone block and left the plate
   at viewport-140 (V3). */
.specialists { padding: var(--band-pad) var(--band-frame); }
.plate {
  width: 100%; max-width: var(--plate-w); margin: 0 auto; padding: 15px;
  background: var(--plate-fill); box-shadow: var(--shadow-plate);
}
.plate-prose {
  max-width: 840px; margin: 30px auto 36px; text-align: center;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--muted-ink);
}
.docs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--docs-gap); margin-bottom: 44px;
}
.doc { text-decoration: none; color: inherit; display: block; text-align: center; min-width: 0; }
.doc img {
  width: 100%; max-width: var(--doc-w); height: auto; aspect-ratio: 350 / 467;
  object-fit: cover; object-position: top center; margin: 0 auto;
  box-shadow: var(--shadow-plate);
}
.doc-name {
  display: block; margin-top: 20px;
  font-family: var(--font-display); font-size: var(--size-doc-name);
  line-height: var(--lh-doc-name); color: var(--ink);
}
.doc-spec {
  display: block; margin-top: 4px;
  font-size: var(--size-bio); font-weight: 700; color: var(--azure-deep);
}
.doc-bio {
  display: block; margin-top: 10px;
  font-size: var(--size-bio); line-height: var(--lh-bio); color: var(--muted-ink);
}
.doc:hover .doc-name { color: var(--azure-deep); }

.slab {
  width: 100%; max-width: 840px; min-height: 278px; margin: 0 auto 30px;
  background: var(--ink); border-radius: var(--radius-slab);
  box-shadow: var(--shadow-slab);
  padding: 26px 40px 30px; text-align: center; color: var(--white);
}
.slab-icon { width: 40px; height: 40px; color: var(--azure-on-dark); margin: 0 auto; }
.slab-title {
  margin: 12px 0 0; font-size: var(--size-slab-title);
  line-height: var(--lh-slab-title); color: var(--white);
}
.slab-text {
  margin: 12px auto 20px; max-width: 700px;
  font-size: var(--size-body); line-height: var(--lh-body); color: var(--white);
}

/* ================= 04 SERVICES CARDS : hanoverendo/03 =================
   Well is 90% of viewport width (the "72px gutters"). Cards are fluid grid
   tracks, height from the 16:9 source.
   Hover is the Izmir component, measured: the tint is NOT an overlay - the image
   drops to opacity 0.3 and scales 1.25 over the card's own dark underlay; the
   keyline is 3px inset 15px (not 1px/16px); the hover caption is a flex box
   inset:0 with 32px padding parked offscreen by its own width. */
.services { padding: var(--band-pad) 0; text-align: center; }
.services h2 { font-size: var(--size-h2); line-height: var(--lh-h2); color: var(--ink); }
.svc-well { width: var(--well-wide); margin: 0 auto; }
.svc-intro {
  margin: 20px auto 40px;
  font-size: var(--size-lede); line-height: var(--lh-lede);
}
.svc-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap);
}
.svc-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; text-decoration: none;
  background: var(--card-under);
}
.svc-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--t-card), transform var(--t-card);
}
/* rest caption: absolutely positioned with EVERY offset auto, so it sits at its
   static position - bottom-CENTRE, lifted by its own padding (recipe correction:
   the prose said bottom-left) */
.svc-cap {
  position: absolute; z-index: 2;
  padding: 0 0 40px; text-align: center;
  font-family: var(--font-body); font-size: var(--size-caption);
  line-height: var(--lh-caption); font-weight: 700; color: var(--white);
  opacity: 1; transition: opacity var(--t-cap-in);
}
.svc-key { position: absolute; inset: var(--card-key-inset); z-index: 2; pointer-events: none; }
.svc-key::before, .svc-key::after {
  content: ""; position: absolute; inset: 0; transition: transform var(--t-card);
}
.svc-key::before {
  border-top: var(--card-key-w) solid var(--keyline);
  border-bottom: var(--card-key-w) solid var(--keyline);
  transform: scaleX(0); transform-origin: left center;
}
.svc-key::after {
  border-left: var(--card-key-w) solid var(--keyline);
  border-right: var(--card-key-w) solid var(--keyline);
  transform: scaleY(0); transform-origin: center top;
}
.svc-learn {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  padding: var(--card-pad);
  font-size: var(--size-caption-hover); font-weight: 700; color: var(--white);
  transform: translateX(-100%);        /* V17: anatomy-tracking, not a 1440 constant */
  transition: transform var(--t-card);
}
.svc-card:hover img, .svc-card:focus-visible img {
  opacity: var(--card-img-opacity); transform: scale(var(--card-img-zoom));
}
.svc-card:hover .svc-key::before, .svc-card:focus-visible .svc-key::before { transform: scaleX(1); }
.svc-card:hover .svc-key::after, .svc-card:focus-visible .svc-key::after { transform: scaleY(1); }
.svc-card:hover .svc-learn, .svc-card:focus-visible .svc-learn { transform: translateX(0); }
.svc-card:hover .svc-cap, .svc-card:focus-visible .svc-cap {
  opacity: 0; transition: opacity var(--t-cap-out);
}
.svc-all { margin-top: 40px; }

/* ================= 05 REVIEWS : HOUSE component (class C) ================= */
.reviews { background: var(--ink); padding: var(--band-pad) 0; text-align: center; }
.reviews h2 { font-size: var(--size-h2); line-height: var(--lh-h2); color: var(--white); }
.rv-well { width: var(--well-wide); margin: 0 auto; }
.rv-summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 40px; font-size: var(--size-lede); color: var(--on-dark-soft);
}
.rv-summary strong { color: var(--white); }
.g-mark { width: 22px; height: 22px; display: inline-flex; flex: none; }
.g-mark svg { width: 100%; height: 100%; }
.g-mark--sm { width: 16px; height: 16px; }
.stars, .rv-stars span { color: var(--g-star-amber); letter-spacing: 2px; }

.rv-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  align-items: stretch;
}
/* V14: the card is a column and the footer is pushed to its bottom, so the rules
   line up across a stretched row instead of floating at three heights */
.rv-card {
  background: var(--card-on-dark); border: 1px solid var(--card-on-dark-b);
  border-radius: var(--radius-card); padding: 28px; text-align: left;
  display: flex; flex-direction: column;
}
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--card-on-dark-b); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-review-name); font-weight: 700;
}
.rv-who { display: flex; flex-direction: column; min-width: 0; }
.rv-who b { font-size: var(--size-review-name); font-weight: 700; color: var(--white); }
.rv-who em { font-style: normal; font-size: var(--size-review-meta); color: var(--on-dark-soft); }
.rv-stars { margin: 14px 0 0; font-size: 16px; }
.rv-card blockquote {
  margin: 10px 0 18px; font-size: var(--size-review-quote);
  line-height: var(--lh-review-quote); color: var(--on-dark-quote);
}
.rv-foot {
  display: flex; align-items: center; gap: 8px;
  margin: auto 0 0;                    /* pinned to the card bottom */
  padding-top: 14px; border-top: 1px solid var(--on-dark-line);
  font-size: var(--size-fine); color: var(--on-dark-soft);
}
.rv-cta {
  margin-top: 44px; display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
}
.rv-more { color: var(--azure-on-dark); font-size: var(--size-body); }

/* ================= 06 CONTACT : hanoverendo/05 =================
   Mechanism: a 90% well holding two EQUAL calc(50% - 15px) columns with a 30px
   gap, each with 30px padding and the white panel fill + shadow that makes the
   band read as two panels; the map is authored px and genuinely fixed; the
   columns stack below 1120. r3 shipped asymmetric 640/573 tracks, a 55px gap and
   no panels. */
.contact { padding: var(--band-pad) 0; }
.ct-well { width: var(--well-wide); margin: 0 auto; }
.contact h2 {
  margin: 0 0 44px;
  text-align: center; font-size: var(--size-h2-contact);
  line-height: var(--lh-h2-contact); color: var(--ink);
}
.ct-grid { display: flex; flex-flow: row nowrap; gap: var(--contact-gap); }
.ct-grid > * {
  width: calc(50% - (var(--contact-gap) / 2)); min-width: 0;
  padding: var(--contact-pad);
  background: var(--panel-fill); box-shadow: var(--shadow-plate);
}
.ct-info { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.ct-name {
  margin: 0 0 22px; font-family: var(--font-display);
  font-size: var(--size-practice); line-height: var(--lh-practice); color: var(--ink);
}
.ct-micro {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px 0 6px; font-size: var(--size-micro); font-weight: 700; color: var(--body-ink);
}
.ct-micro .gl { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ct-micro svg[stroke], .ct-micro .gl path[stroke] { fill: none; }
.ct-lines { margin: 0; font-size: var(--size-micro); line-height: 30px; }
.ct-lines a { color: var(--ink); text-decoration: underline; }
.ct-map { margin: 28px auto 0; width: var(--map-w); max-width: 100%; }
.ct-map iframe { width: 100%; height: var(--map-h); border: 0; display: block; }

/* form : hanoverendo/05 field set, static demo */
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 11px; }
.fld { margin: 0 0 14px; }
.fld label, .consent label {
  display: block; margin-bottom: 5px;
  font-size: var(--size-label); font-weight: 400; color: var(--muted-ink);
}
.fld label b { color: var(--req-red); font-weight: 400; }
.fld input, .fld select, .fld textarea {
  width: 100%; height: 44px; padding: 6px 10px;
  font-family: var(--font-body); font-size: var(--size-input); color: var(--body-ink);
  background: var(--white); border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
}
.fld textarea { height: 120px; resize: vertical; padding-top: 10px; }
.consent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; }
.consent input { width: 16px; height: 16px; border-radius: 2px; margin: 2px 0 0; flex: none; }
.consent label { margin: 0; font-size: var(--size-legal-line); line-height: 18px; }
.fine { margin: 0 0 16px; font-size: var(--size-fine); line-height: 20px; color: var(--grey-fine); }
.form-status { margin: 12px 0 0; font-size: var(--size-fine); color: var(--azure-deep); min-height: 20px; }

/* ================= 07 FOOTER : mvendo/07 + hanoverendo/06 =================
   The one genuinely full-bleed band: a 30px frame and four calc(25% - 15px)
   columns with a 20px gap, so the columns are width-relative. The hours card
   fills its column rather than being a 320px component. r3 used fixed 330px
   tracks with space-between, which let a column shrink under the one child that
   cannot (V5). */
.site-footer { background: var(--grey-footer); padding: 56px 30px 48px; }
.ft-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--footer-gap);
}
.ft-col { text-align: center; color: var(--white); min-width: 0; }
.ft-head {
  font-family: var(--font-body); font-size: var(--size-footer-head); font-weight: 400;
  line-height: var(--lh-footer-head); text-transform: uppercase; color: var(--white);
  margin: 0 0 18px;
}
.ft-name { margin: 0 0 8px; font-size: var(--size-footer-name); }
.ft-body { margin: 0 0 12px; font-size: var(--size-footer-body); line-height: 26px; }
.ft-body a { color: var(--azure-on-dark); text-decoration: underline; }
.ft-links { list-style: none; margin: 0; padding: 0; }
.ft-links li { min-height: 39px; }
.ft-links a {
  display: inline-block; padding: 5px 0; line-height: 24px;
  font-size: var(--size-footer-link); font-weight: 500;
  text-transform: uppercase; color: var(--footer-link); text-decoration: none;
}
.ft-links a:hover { text-decoration: underline; }

.hours {
  width: 100%; max-width: var(--hours-w); margin: 0 auto; border-collapse: collapse;
  background: var(--white); box-shadow: var(--shadow-plate);
  table-layout: auto;
}
.hours tr { height: 54px; }
/* V15: the precedent card opens and closes on a tinted row */
.hours tr:nth-child(odd) { background: var(--grey-zebra); }
.hours th, .hours td {
  padding: 0 16px; font-size: var(--size-hours); color: var(--body-ink);
}
.hours th { text-align: left; font-weight: 500; }
/* V5: no white-space:nowrap. Danbe's own hour strings ("09:00 am - 04:30 pm",
   "Emergency Coverage") have a wider min-content than the reference's, and
   nowrap turned that into a card that could not shrink inside its column. The
   recipe allows the cell to wrap; the 54px row absorbs a second line. */
.hours td { text-align: right; font-weight: 700; }
@media (max-width: 1300px) {
  .hours th, .hours td { padding: 0 10px; }
}

.legal { background: var(--ink-deep); min-height: 54px; display: flex; align-items: center; }
.lg-inner {
  margin: 0 auto; width: 100%;
  padding: 0 30px; display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--size-legal); font-weight: 500; color: var(--white);
}

/* ================= COMPACT NAV TIER : 901 - 1166 =================
   V2: the nav's intrinsic width plus the logo cannot coexist below ~1166 and
   nothing detected it. Type and padding step down here; below 901 the bar
   becomes the mobile header, which is also where hanoverendo-mobile/09 records
   the family collapsing its own nav (authored max-width:1119px). */
@media (max-width: 1166px) {
  .nav-link { padding: 20px 7px; }
  .drop { width: 320px; }
}

/* ======================= MOBILE HEADER TIER <=900 ======================= */
@media (max-width: 900px) {

  .site-header { height: var(--header-h-mobile); background: var(--white);
                 border-bottom: 1px solid var(--hairline); }
  .hd-inner { height: var(--header-h-mobile); align-items: center;
              padding: 0 var(--gutter-phone); }
  /* V18: the phone/tablet bar carries the tagline-less variant. At a 44px lockup
     height the "SPECIALIST CARE AT EVERY AGE" row renders about 6px tall, which
     is a grey smear rather than type; dropping the row beats smearing it. */
  .hd-logo img { width: auto; height: var(--logo-h-mobile); aspect-ratio: 219 / 105; }
  .hd-stack { display: none; }

  .mb-tel {
    display: flex; align-items: center; justify-content: center;
    width: var(--tap-min); height: var(--tap-min); margin-left: auto; color: var(--ink);
  }
  .mb-tel svg { width: 24px; height: 24px; fill: currentColor; }

  .mb-menu {
    display: flex; align-items: center; gap: 8px; margin-left: 8px;
    height: var(--tap-min); min-width: 88px; padding: 0 14px;
    background: var(--ink); color: var(--white); border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--ls-upper);
  }
  .mb-menu .bars { display: grid; gap: 3px; }
  .mb-menu .bars i {
    display: block; width: 18px; height: 2px; background: currentColor;
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  body.nav-open .mb-menu .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.nav-open .mb-menu .bars i:nth-child(2) { opacity: 0; }
  body.nav-open .mb-menu .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .drawer {
    display: block; position: fixed; inset: var(--header-h-mobile) 0 0 0; z-index: 195;
    background: var(--ink); overflow-y: auto; overflow-x: hidden;
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path var(--t-med), visibility var(--t-med);
  }
  body.nav-open .drawer { clip-path: inset(0); visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* V20: the drawer composes to its bottom instead of ending in 264px of ink */
  .dw-panel { display: flex; flex-direction: column; min-height: 100%; padding: 8px 0 24px; }
  .dw-list { list-style: none; margin: 0; padding: 0; }
  .dw-list > li { position: relative; border-bottom: 1px solid var(--on-dark-line); }
  .dw-list > li > a {
    display: flex; align-items: center; height: 56px; padding: 0 var(--gutter-phone);
    color: var(--white); text-decoration: none; font-size: var(--size-body);
  }
  .dw-list > li > a.is-current { color: var(--azure-on-dark); }
  .dw-caret {
    position: absolute; right: 8px; top: 6px; width: var(--tap-min); height: var(--tap-min);
    background: none; border: 0; color: var(--white); cursor: pointer;
  }
  .dw-caret svg { width: 22px; height: 22px; fill: currentColor; transition: transform var(--t-fast); }
  .dw-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dw-sub { list-style: none; margin: 0; padding: 0 0 8px; display: none; }
  .dw-sub.is-open { display: block; }
  .dw-sub a {
    display: flex; align-items: center; height: 50px;
    padding: 0 var(--gutter-phone) 0 36px;
    color: var(--on-dark-soft); text-decoration: none; font-size: var(--size-bio);
  }
  .dw-foot {
    margin-top: auto; padding: 28px var(--gutter-phone) 32px;
    display: grid; gap: 14px; justify-items: start;
    border-top: 1px solid var(--on-dark-line);
  }
  .dw-nap { color: var(--on-dark-soft); font-size: var(--size-bio); line-height: 24px; }
  .dw-nap p { margin: 0; }
  .dw-nap .dw-nap-name { color: var(--white); font-weight: 700; }
  .dw-nap a { color: var(--azure-on-dark); }
  .dw-tel { display: flex; align-items: center; min-height: var(--tap-min);
             color: var(--white); font-size: 22px; text-decoration: none; }
  .dw-em { display: flex; align-items: center; min-height: var(--tap-min);
            color: var(--azure-on-dark); font-size: var(--size-bio); text-decoration: none; }
  .dw-foot .pill { color: var(--ink); }

  /* bands: stack */
  .welcome-split { flex-flow: column nowrap; gap: 32px; }
  .welcome-split > * { width: 100%; }
  .docs { grid-template-columns: 1fr; gap: 40px; }
  .svc-row { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .ct-grid { flex-flow: column nowrap; gap: 32px; }
  .ct-grid > * { width: 100%; }
}

/* the contact columns stack where the recipe stacks them */
@media (max-width: 1119px) {
  .ct-grid { flex-flow: column nowrap; gap: 32px; }
  .ct-grid > * { width: 100%; }
}

/* V5: an intermediate footer step, above the width where the hours card's
   min-content floor would overrun a quarter column */
@media (max-width: 1150px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
}

/* ======================= PHONE <=600 : house mobile system ======================= */
@media (max-width: 600px) {

  .actionbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    height: var(--actionbar-h);
  }
  .ab {
    display: flex; align-items: center; justify-content: center;
    font-size: var(--size-pill-small); font-weight: 700; text-decoration: none;
  }
  .ab--call { background: var(--azure-deep); color: var(--white); }
  .ab--req  { background: var(--azure-tint); color: var(--ink); }
  .ab--em   { background: var(--ink-deep); color: var(--white); }
  .drawer { padding-bottom: var(--actionbar-h); }

  /* hero : the video survives at 390 (hanoverendo-mobile/02). The stack is the
     same rule set as desktop - 5% of 390 is simply a 19.5px bottom inset. */
  .hero-card { width: var(--hero-card-w-phone); }

  /* bands : restructure, do not rescale */
  .welcome-well, .svc-well, .rv-well, .ct-well { width: 100%; padding: 0 var(--gutter-phone); }
  .welcome-copy p, .plate-prose, .slab-text, .doc-bio {
    max-width: var(--well-phone); margin-left: auto; margin-right: auto;
  }

  /* media full-bleed to the viewport edge */
  .welcome-split { margin-top: 40px; }
  .welcome-media { width: calc(100% + 2 * var(--gutter-phone));
                   margin-left: calc(-1 * var(--gutter-phone)); }
  .svc-row { margin: 0 calc(-1 * var(--gutter-phone)); gap: 0; }
  .svc-cap { padding-bottom: 24px; }

  /* the plate becomes a full-width sheet; nothing is viewport-140 any more (V3) */
  .specialists { padding: var(--band-pad) 0; }
  .plate { max-width: none; padding: 24px var(--gutter-phone) 32px;
           box-shadow: none; background: rgba(255, 255, 255, 0.92); }
  .doc img { max-width: 310px; }
  .slab { padding: 24px 20px 28px; }

  .pill--350 { width: min(281px, 100%); }
  .svc-all, .welcome-copy .pill, .slab .pill { margin-left: auto; margin-right: auto; display: flex; }

  .rv-cta { flex-direction: column; gap: 18px; }

  .ct-grid > * { padding: var(--gutter-phone); }
  .ct-map { width: calc(100% + 2 * var(--gutter-phone)); max-width: none;
            margin-left: calc(-1 * var(--gutter-phone)); }
  .ct-map iframe { height: 320px; }
  .f2 { grid-template-columns: 1fr; column-gap: 0; }

  .site-footer { padding: 52px var(--gutter-phone) 48px; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .lg-inner { flex-direction: column; align-items: center; gap: 6px; padding: 0 var(--gutter-phone); }
  .legal { min-height: 0; padding: 14px 0 calc(var(--actionbar-h) + 40px); }
}