/* ============================================================
   Mountain View Family Dental — "Telluride Street"
   ------------------------------------------------------------
   Direction: warm heritage editorial.

   The practice's own copy is the brief: "Brighton's oldest, privately owned
   and operated", family-run since the 1970s, "not a corporate chain - we're
   your neighbors who chose to build our practice right here in Adams County."
   Every competitor in this vertical is clinical white + sky blue + rounded
   sans. So this goes the other way: a warm paper ground, a characterful serif,
   hairline rules and letterspaced small-caps like a well-set local paper, and
   a Front Range sandstone accent against the navy from their logo.

   Restraint is deliberate. This is healthcare - the design should feel
   established and calm, not clever.

   Palette (all pairings verified against WCAG):
     ink   #1c1e22 on paper  15.62:1   AAA
     navy  #0b3b63 on paper  10.80:1   AAA      (from the practice logo)
     clay  #9c4225 on paper   6.10:1   AA       (Front Range sandstone)
     sage  #5f6b57 on paper   5.27:1   AA
     muted #5c5952 on paper   6.54:1   AA
     white on navy           11.54:1   AAA      (primary CTA)
     white on clay            5.79:1   AA

   Type: Fraunces (display, opsz+SOFT axes) + Karla (body).
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* ground */
  --paper:      #faf7f2;
  --paper-2:    #f3ebe0;
  --paper-3:    #ebe0d1;
  --card:       #fffdfa;

  /* brand */
  --navy:       #0b3b63;
  --navy-600:   #0a3355;
  --navy-700:   #082741;
  --navy-800:   #061d31;
  --navy-tint:  #e7eef5;

  /* accent — Front Range sandstone */
  --clay:       #9c4225;
  --clay-600:   #85371e;
  --clay-tint:  #f6e6dd;

  --sage:       #5f6b57;
  --sage-tint:  #e9ede5;

  /* text */
  --ink:        #1c1e22;
  --muted:      #5c5952;
  --line:       #ded3c4;
  --line-soft:  #ebe3d8;

  /* type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Karla', 'Helvetica Neue', Helvetica, sans-serif;

  /* rhythm */
  --maxw:   1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --sp:     clamp(3.5rem, 7vw, 6.5rem);

  /* form */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  /* elevation — warm, low, never floaty */
  --sh-sm: 0 1px 2px rgba(28,30,34,.05);
  --sh:    0 2px 4px rgba(28,30,34,.05), 0 8px 20px -12px rgba(28,30,34,.14);
  --sh-lg: 0 12px 40px -20px rgba(28,30,34,.30);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain. Warmth without an image request — a tiny SVG turbulence tile
   at very low opacity. Sits above the ground, below every element. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration-color: color-mix(in srgb, var(--navy) 32%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--clay); text-decoration-color: currentColor; }

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

/* ---------- Step 16: Web Interface Guidelines ----------
   Touch behaviour. Without touch-action, mobile Safari holds every tap for
   ~300ms waiting to see whether it is a double-tap-to-zoom — on a site whose
   primary action is a phone-number tap, that delay is the whole interaction.
   The tap highlight is set deliberately to the clay accent instead of the UA's
   default translucent black, which reads as a smudge over the warm paper. */
a, button, summary, label, input[type="submit"], .btn, .menu-toggle, .tech-chip {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--clay) 18%, transparent);
}

/* Tell the browser this is a light-scheme page, so form controls, scrollbars and
   the like are painted light even when the OS is set to dark. Without it, a
   native <select> on Windows in dark mode renders dark-on-dark. The design is
   deliberately light-only (see the palette note at the top), so this declares
   that rather than adding a dark theme. */
:root { color-scheme: light; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 40;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); font-variation-settings: 'SOFT' 22, 'WONK' 1, 'opsz' 96; letter-spacing: -.025em; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.22; }
h4 { font-size: 1.06rem; }

/* Headings need breathing room from the copy they introduce, and more space
   above them than below so they group with their own section, not the one before. */
h2 { margin-bottom: 1rem; }
h3 { margin-bottom: .6rem; }
p + h2, ul + h2, ol + h2, .faq-list + h2, div + h2 { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
p + h3, ul + h3, ol + h3, div + h3 { margin-top: clamp(1.8rem, 3vw, 2.4rem); }

p { margin: 0 0 1.15em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol { max-width: 68ch; padding-left: 1.15rem; }
li { margin-bottom: .5rem; }
li::marker { color: var(--clay); }

strong, b { font-weight: 700; color: var(--ink); }

/* Editorial eyebrow — letterspaced small caps over a clay hairline. This is the
   signature detail; it repeats at the head of every section. */
.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.15rem;
  padding-top: .85rem;
  border-top: 1.5px solid var(--clay);
  width: fit-content;
  max-width: 100%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em;
  padding: .85rem 1.6rem;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1rem; }

.btn--primary, .btn-primary {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover, .btn-primary:hover {
  background: var(--clay); border-color: var(--clay); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(156,66,37,.6);
}
/* The nav's Book Now is the one action in the header, so it takes the accent
   rather than the navy every other link already uses — against the paper header
   a navy button read as more navy text. Clay on white is 7.2:1. Hover inverts to
   navy so the button still moves on interaction. */
.btn-nav {
  padding: .62rem 1.15rem; font-size: .88rem;
  background: var(--clay); border-color: var(--clay); color: #fff;
}
.btn-nav:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Text-link CTA with a travelling arrow */
.svc-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--body); font-weight: 700; font-size: .84rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay);
  margin-top: auto;
  padding-top: 1rem;
}
.svc-cta span { transition: transform .22s ease; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--navy-700);
  color: #dbe5ee;
  font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; }
.topbar-info { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.tb-item { display: inline-flex; align-items: center; gap: .45rem; color: #dbe5ee; text-decoration: none; }
.tb-item:hover { color: #fff; }
.tb-item svg { opacity: .75; }
/* The anchor is a CHILD of .tb-item, so the global `a` colour wins without this
   and the phone/address render navy-on-navy (invisible). */
.tb-item a { color: inherit; text-decoration: none; }
.tb-item a:hover { color: #fff; text-decoration: underline; }
.topbar-social, .tb-social { display: inline-flex; align-items: center; gap: .7rem; }
.tb-social a { color: #dbe5ee; display: inline-flex; }
.tb-social a:hover { color: #fff; transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 132px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Client request (Dr. Schmidt, repeated 2026-10-14): a larger logo in the nav.
   52px -> 68px -> 80px -> 88px -> 120px, with the header grown to match each time.
   The only logo file that exists anywhere — the practice's WordPress upload,
   which has no larger original on the server — is 300x173, and 246x161 after
   its transparent margin is trimmed off. The 120px client-requested size is
   visibly upscaled. Replace it with a supplied vector when available. */
.brand-logo { height: 120px; width: auto; }

.main-nav { display: flex; align-items: center; gap: .35rem; }
/* Plain menu links only. `.main-nav > a` is specificity 0,1,1 and sets
   background:none / border:0 / color:ink, which silently out-specifies the
   0,1,0 component classes — that is why the nav's Book Now rendered with no
   button styling at all and the phone link lost its navy. Excluding them here
   is what lets .btn-nav and .nav-phone own their own appearance. */
.main-nav > a:not(.btn):not(.nav-phone), .services-toggle {
  font-family: var(--body); font-size: .93rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: .6rem .8rem; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: color .16s ease;
  position: relative;
}
/* Colour-only affordance — no underline rule under the menu items. */
.main-nav > a, .services-toggle { text-decoration: none; }
.main-nav > a:not(.btn):hover, .services-toggle:hover,
.main-nav > a:not(.btn).active, .services-toggle.active { color: var(--clay); }

.chev { font-size: .62em; opacity: .6; transition: transform .2s ease; }
.has-dropdown:hover .chev { transform: translateY(1px); }

.nav-phone {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .93rem; color: var(--navy);
  text-decoration: none; padding: .6rem .7rem;
}
.nav-phone:hover { color: var(--clay); }

/* ---------- Dropdowns ---------- */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 268px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
/* Hover bridge — spans the visual gap between trigger and panel so the cursor
   never leaves the hover region on the way down. Removing this reintroduces
   the "menu closes when I move toward it" bug (completeness audit sub-check 21). */
.dropdown::before {
  content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item {
  /* `display` intentionally omitted: the `.dropdown a, .submenu a` guard below
     owns it at higher specificity, so declaring it here would be dead code. */
  padding: .62rem .8rem;
  font-size: .92rem; font-weight: 500; color: var(--ink);
  text-decoration: none; border-radius: var(--r-sm);
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.dropdown-item:hover { background: var(--clay-tint); color: var(--clay); padding-left: 1.05rem; }
/* Menu links stack; they never take the global underline. Scoped to the panels
   rather than the class so an item that forgets .dropdown-item still renders as
   a menu row instead of an inline, underlined run of links. */
.dropdown a, .submenu a { display: block; text-decoration: none; }

.dropdown--cascade { min-width: 300px; }
.has-submenu { position: relative; }
/* Specificity matches the .dropdown a guard above, which would otherwise reset
   this row to display:block and un-align the chevron. */
.dropdown .dropdown-item--parent { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dropdown-item--parent .chev { transform: rotate(-90deg); font-size: .58em; }

.submenu {
  position: absolute; top: -.5rem; left: calc(100% - 4px);
  min-width: 268px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateX(0); }
.submenu-overview {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.submenu-overview:hover { color: var(--clay); }

.menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: .6rem;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); transition: transform .22s ease, opacity .22s ease; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -12%, var(--clay-tint), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper) 74%);
  border-bottom: 1px solid var(--line);
}
/* Contour rules — a topographic nod to the Front Range, very low contrast */
.hero__blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--line); opacity: .55;
}
.hero__blob--1 { width: 620px; height: 620px; top: -290px; right: -150px; }
.hero__blob--2 { width: 900px; height: 900px; top: -420px; right: -260px; opacity: .32; }

/* Interior pages call page_hero() without an image, so .hero__visual is absent
   and a fixed two-column grid would leave half the hero empty. Split only when
   there is actually something in column two. */
.hero__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.hero__grid:has(.hero__visual) { grid-template-columns: 1.08fr .92fr; }
.hero__grid:not(:has(.hero__visual)) .hero__content { max-width: 46rem; }
.hero__grid:not(:has(.hero__visual)) .hero__sub { max-width: 62ch; }
.hero__content > * { animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards; }
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .13s; }
.hero__content > *:nth-child(3) { animation-delay: .21s; }
.hero__content > *:nth-child(4) { animation-delay: .29s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero h1 { margin-bottom: 1.2rem; }
.hero__sub {
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  color: var(--muted); max-width: 56ch; margin-bottom: 2rem;
}
.hero__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--navy); text-decoration: none; font-size: 1rem;
}
.hero__phone:hover { color: var(--clay); }

.hero__badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hero__badge {
  display: inline-flex; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .34rem .95rem;
  font-size: .8rem; font-weight: 700; color: var(--navy);
  box-shadow: var(--sh-sm);
}
.hero__badge-text { letter-spacing: .02em; }

/* Offset frame behind the portrait — the "hand-placed photograph" detail */
.hero__visual { position: relative; isolation: isolate; }
.hero__photo {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-lg);
  background: var(--paper-3);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero__visual::after {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1.5px solid var(--clay); border-radius: var(--r-lg);
  z-index: 0;
}

/* ---------- Sections ---------- */
.section { padding: var(--sp) 0; }
/* Only ever used on the associations strip, which sets its own padding at the
   same specificity but later in the file — so this declaration never applied.
   Kept as the semantic modifier; the padding lives with .assoc-strip. */
.section--tight { }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 62ch; }
.sec-head h2 { margin-bottom: .8rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.4rem); }

/* ---------- Service cards ---------- */
.svc-grid, .subsvc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1.15rem;
}
.svc-card, .subsvc-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem 1.5rem;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Clay rule wipes across the top edge on hover */
.svc-card::before, .subsvc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.svc-card:hover, .subsvc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh);
  border-color: var(--line-soft);
}
.svc-card:hover::before, .subsvc-card:hover::before { transform: scaleX(1); }
.svc-card:hover .svc-cta span, .subsvc-card:hover .svc-cta span { transform: translateX(5px); }

.svc-card__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 1.15rem;
  border-radius: var(--r); background: var(--navy-tint); color: var(--navy);
}
.svc-card h3, .subsvc-card h3 { margin-bottom: .55rem; }
.svc-card p, .subsvc-card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

/* Centred action row under a grid (e.g. "Read the full team bios"). */
.section-actions { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 2.8rem); }

/* ---------- Page grid + sidebar ---------- */
/* Fixed main column + sticky sidebar, applied to every service and content page
   so repeated page types lay out identically regardless of copy volume
   (SOP Step 5 sub-check 27). */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.page-main { min-width: 0; }
/* The main column is ~700px, not full width — scale the display sizes to the
   measure so headings stop wrapping mid-phrase. */
.page-main h2 { font-size: clamp(1.65rem, 2.4vw, 2.05rem); }
.page-main h3 { font-size: clamp(1.12rem, 1.5vw, 1.28rem); }
.page-main p, .page-main ul, .page-main ol { max-width: none; }

.sidebar {
  position: sticky; top: 112px;  /* .header-inner min-height + 12px */
  display: flex; flex-direction: column; gap: 1.1rem;
}
.sidebar__photo {
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--paper-3);
  box-shadow: var(--sh-sm);
}
.sidebar__photo img { width: 100%; height: 100%; object-fit: cover; }

.sidebar__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.35rem;
}
.sidebar__card h3 {
  font-family: var(--body); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .9rem; padding-bottom: .65rem;
  border-bottom: 1px solid var(--line-soft);
}
.sidebar__card p { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; }
.sidebar__cta { background: var(--navy-tint); border-color: transparent; }
.sidebar__cta h3 { color: var(--navy); border-bottom-color: rgba(11,59,99,.16); }
.sidebar__cta .btn { width: 100%; }
/* "or call" is prose; only the number is the tel: link. It used to be one
   anchor over the whole string, which announced "link, or call 303 659 5185"
   and made two words that dial nothing look tappable. */
   Scoped under .sidebar__cta because this is now a <p>, so the plain
   .sidebar__phone class loses colour, font-size and margin to .sidebar__card p
   on specificity. */
.sidebar__cta .sidebar__phone {
  display: block; text-align: center; margin-top: .8rem; margin-bottom: 0;
  font-size: .9rem; font-weight: 600; color: var(--navy);
}
.sidebar__cta .sidebar__phone a { color: inherit; text-decoration: underline; }

.sidebar__nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar__nav li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.sidebar__nav li:last-child { border-bottom: 0; }
.sidebar__nav a {
  display: block; padding: .62rem 0; font-size: .93rem;
  color: var(--ink); text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.sidebar__nav a:hover { color: var(--clay); padding-left: .4rem; }
.sidebar__nav a.is-current { color: var(--clay); font-weight: 700; }

.sidebar__hours .hours { list-style: none; padding: 0; margin: 0; }
.sidebar__hours .hours li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line-soft);
}
.sidebar__hours .hours li:last-child { border-bottom: 0; }
.sidebar__hours .hours li::before { content: none; }
.sidebar__hours .day { font-size: .86rem; }
.sidebar__hours .time { font-size: .84rem; text-align: right; }

/* Content photos woven between sections */
.content-figure {
  margin: clamp(2rem, 4vw, 2.8rem) 0;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.content-figure img { width: 100%; height: auto; display: block; }
.content-figure figcaption {
  font-size: .84rem; color: var(--muted); line-height: 1.5;
  padding: .85rem 1rem 0;
}
/* A manufacturer's product shot arrives on a transparent ground, so it wants the
   paper behind it and room to breathe — not the full-bleed edge-to-edge crop the
   photographic figures get. */
.content-figure--product {
  background: linear-gradient(160deg, var(--paper-2), var(--paper));
  padding: clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: none; border: 1px solid var(--line-soft);
}
.content-figure--product img { max-width: 520px; margin: 0 auto; }
.content-figure--product figcaption { text-align: center; padding-bottom: 0; }

/* Manufacturer credit line — small mark beside a sentence, not a hero. */
.vendor-mark {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin: 2rem 0; padding: 1rem 1.2rem;
  border-left: 3px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.vendor-mark img { width: 130px; height: auto; flex: none; }
.vendor-mark span { flex: 1 1 16rem; }

/* Cross-reference to a related page, at the end of an article. Sits apart from
   the prose so it reads as a signpost, not a continuation of the argument. */
.related-note {
  margin: clamp(2.2rem, 5vw, 3rem) 0 0;
  padding: 1.4rem 1.6rem;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--clay);
}
.related-note h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.related-note p { margin: 0; color: var(--muted); }

/* "Individual results may vary" under a testimonial block. Required alongside
   patient reviews (3 CCR 709-1.17(6) / FTC 16 CFR 255) — legible, not fine print,
   because the FTC says small print is not sufficient. */
.review-disclaimer {
  margin: 1.4rem 0 0;
  font-size: .84rem; line-height: 1.55; color: var(--muted);
  text-align: center; max-width: 64ch; margin-inline: auto;
}

/* Conditional-hours footnote under an hours table. */
.hours-note {
  font-size: .86rem; color: var(--muted); line-height: 1.55;
  margin: -1.1rem 0 1.8rem;
}

@media (max-width: 1000px) {
  /* Keep the single column shrinkable. A bare `1fr` has an automatic min-width,
     so phone links and long headings expanded the grid beyond narrow viewports. */
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .sidebar__photo { aspect-ratio: 16 / 7; }
}

/* ---------- Technology strip ---------- */
.tech-strip { display: flex; flex-wrap: wrap; gap: .7rem; }
.tech-chip {
  display: inline-flex; align-items: center;
  padding: .7rem 1.3rem;
  border: 1.5px solid var(--navy); border-radius: 999px;
  font-weight: 700; font-size: .92rem; color: var(--navy);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.tech-chip:hover { background: var(--navy); color: var(--paper); transform: translateY(-2px); }

/* ---------- Team ---------- */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 1.5rem;
}
.team-card { display: block; text-decoration: none; color: inherit; text-align: center; }
.team-card__photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--paper-3);
  margin-bottom: 1rem;
  box-shadow: var(--sh-sm);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.team-card:hover .team-card__photo img { transform: scale(1.045); }
.team-card h3 { font-size: 1.12rem; margin-bottom: .18rem; }
.team-card:hover h3 { color: var(--clay); }
.team-card__role {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.team-card--compact .team-card__photo { aspect-ratio: 1 / 1; }

/* Team members whose headshot the client hasn't sent yet. Initials on the paper
   ground rather than a stock photo of a stranger or a grey silhouette — it reads
   as "photo coming" instead of "this is them". No link, so no hover lift. */
.team-card--nolink { cursor: default; }
.team-card__monogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 2.6rem; font-weight: 600;
  letter-spacing: .06em;
  color: var(--clay);
  background: linear-gradient(150deg, var(--paper-2), var(--paper-3));
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); max-width: 74ch; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--navy);
  position: relative;
  transition: color .16s ease;
}
/* The question inside <summary> is an <h3> so it joins the document outline.
   Inheriting the summary's own type keeps the change invisible on screen — the
   global h3 rule would otherwise impose its own size, line-height and margin. */
.faq summary h3 { font: inherit; color: inherit; margin: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--clay); }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 2.5rem 1.5rem 0; color: var(--muted); }
.faq__body p { margin-bottom: .8rem; }

/* ---------- Digestible content treatments ---------- */
/* Each of these is applied only where the content genuinely has that shape —
   see tools/digest.py. Prose stays prose. */

/* Parallel named options with short blurbs */
.d-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem; margin: 1.6rem 0 2rem;
}
.d-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-lg); padding: 1.3rem 1.25rem;
}
.d-card h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.d-card p { margin: 0; font-size: .94rem; color: var(--muted); }

/* Homepage "Why Choose" — the source numbers these reasons itself, so the
   numeral becomes the marker. No invented headings: these reasons have no
   titles in the source and giving them one would put words in the practice's
   mouth. counter-reset is not used; the digits come from the copy. */
.reasons {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  /* The base `ul, ol` rule caps lists at 68ch for readable prose. A card grid is
     not prose — left capped, only two of the three cards fit per row. */
  max-width: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}
.reason {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--clay);
  border-radius: var(--r-lg); padding: 3.1rem 1.4rem 1.5rem;
  margin: 0;
}
.reason__num {
  position: absolute; top: 1.1rem; left: 1.4rem;
  font-family: var(--display); font-size: 2.3rem; line-height: 1;
  font-weight: 600; color: var(--clay); opacity: .42;
}
.reason p { margin: 0; font-size: .95rem; color: var(--muted); }

/* Homepage "Our Location" — address, phone and hours beside the map. */
.loc-details { margin-top: 1.6rem; }
.loc-hours__title {
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-family: var(--body);
  margin: 1.6rem 0 .5rem;
}
.loc-hours { margin: 0; }
.loc-hours__row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .42rem 0; border-bottom: 1px solid var(--line-soft);
}
.loc-hours__row:last-child { border-bottom: 0; }
.loc-hours dt { font-weight: 600; color: var(--ink); font-size: .92rem; }
.loc-hours dd {
  margin: 0; color: var(--muted); font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

/* Longer blurbs: full-width rows so text wraps wide instead of stacking tall */
.d-rows { margin: 1.6rem 0 2rem; display: flex; flex-direction: column; gap: .9rem; }
.d-row {
  display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: 1.4rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem 1.35rem;
}
.d-row__label {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  color: var(--navy); line-height: 1.2;
}
.d-row__body p { margin: 0; font-size: .95rem; color: var(--muted); }

/* Genuine sequences */
.d-steps { list-style: none; counter-reset: dstep; padding: 0; margin: 1.6rem 0 2rem; }
.d-step {
  counter-increment: dstep; position: relative;
  padding: 0 0 1.4rem 3.4rem; margin: 0;
}
.d-step::before {
  content: counter(dstep);
  position: absolute; left: 0; top: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
}
/* Connector line so the steps read as one sequence */
.d-step:not(:last-child)::after {
  content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: .2rem;
  width: 1.5px; background: var(--line);
}
.d-step__head {
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
  color: var(--navy); margin-bottom: .3rem; padding-top: .35rem;
}
.d-step p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Positive lists only — see the polarity note in tools/digest.py */
.d-check { list-style: none; padding: 0; margin: 1rem 0 1.8rem; }
.d-check li {
  position: relative; padding-left: 1.9rem; margin-bottom: .6rem;
}
.d-check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage);
  transform: rotate(-45deg);
}
/* Neutral bullets for everything else */
.d-list { margin: 1rem 0 1.8rem; padding-left: 1.15rem; }
.d-list li { margin-bottom: .5rem; }

@media (max-width: 620px) {
  .d-row { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------- Associations ---------- */
.assoc-strip { padding: clamp(2.4rem, 5vw, 3.6rem) 0; border-block: 1px solid var(--line); background: var(--paper-2); }
.assoc-strip__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.8rem, 5vw, 3.8rem);
}
.assoc-card { display: grid; place-items: center; text-decoration: none; }
.assoc-card__logo { display: grid; place-items: center; }
.assoc-card__logo img {
  width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
a.assoc-card:hover .assoc-card__logo img,
a.assoc-card:focus-visible .assoc-card__logo img { filter: none; opacity: 1; transform: translateY(-2px); }

/* Per-logo sizing. After tools/transparent_logos.py trims each badge to its
   alpha bounding box, their true content ratios are 1.57-5.17 (MDDS is a wide
   wordmark, AAFE nearly square), so one shared max-height would leave MDDS
   towering and AAFE tiny. Heights are set for roughly equal visual AREA
   (h = sqrt(A/ratio)). Re-tune when a badge is added or replaced. */
.assoc-card--aafe .assoc-card__logo img { max-height: 70px; max-width: 88%; }
.assoc-card--ada  .assoc-card__logo img { max-height: 56px; max-width: 88%; }
.assoc-card--bbb  .assoc-card__logo img { max-height: 54px; max-width: 88%; }
.assoc-card--cda  .assoc-card__logo img { max-height: 54px; max-width: 88%; }
.assoc-card--mdds .assoc-card__logo img { max-height: 42px; max-width: 92%; }

/* ---------- CTA band ---------- */
/* Emitted as .container > .cta-band > .cta-band-inner, so this is an inset card,
   not a full-bleed band — it needs its own horizontal padding and radius. */
.cta-band {
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.8rem, 4vw, 3rem);
  margin: clamp(3.5rem, 7vw, 6rem) 0;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 340px at 88% 0%, rgba(156,66,37,.34), transparent 66%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px);
}
/* Texture: fine diagonal hatch + the same paper grain used on the page ground,
   so the navy panels read as printed stock rather than flat fill. */
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* linkify_contacts() wraps the phone number in the CTA body copy, and the global
   `a` colour is the same navy as this panel — it rendered invisible. */
.cta-band a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cta-band a:hover { color: var(--clay-tint); }
.cta-band .btn, .cta-band .btn:hover { text-decoration: none; }
/* Three flat children (h2, p, a). Grid keeps the copy stacked in column one and
   the button pinned right across both rows — flex would let the button wrap out. */
.cta-band-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.cta-band-inner h2 { grid-column: 1; grid-row: 1; }
.cta-band-inner p  { grid-column: 1; grid-row: 2; }
.cta-band-inner .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.cta-band h2 { color: var(--paper); margin-bottom: 0; }
.cta-band p { color: #cfdae6; margin-bottom: 0; max-width: 54ch; }
.cta-band .btn--primary, .cta-band .btn-primary {
  background: var(--paper); color: var(--navy); border-color: var(--paper);
}
.cta-band .btn--primary:hover, .cta-band .btn-primary:hover {
  background: var(--clay); border-color: var(--clay); color: #fff;
}

/* ---------- Forms ---------- */
.ff-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--sh-sm);
}
.ff-form h3 { margin-bottom: .5rem; }
.ff-row { margin-bottom: 1.05rem; display: flex; flex-direction: column; gap: .4rem; }
.ff-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.ff-row label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.ff-row input, .ff-row select, .ff-row textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: .8rem .95rem;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.ff-row input:focus, .ff-row select:focus, .ff-row textarea:focus {
  outline: none; background: var(--card);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-tint);
}
/* The rule above suppresses the outline for every focus, including keyboard
   focus, and replaces it with a navy tint ring. That ring is deliberately soft
   because it fires on mouse click too. For keyboard users it is not enough on
   its own, so put the real clay focus ring back for :focus-visible only. */
.ff-row input:focus-visible, .ff-row select:focus-visible, .ff-row textarea:focus-visible {
  outline: 2.5px solid var(--clay);
  outline-offset: 2px;
}
.ff-row textarea { min-height: 128px; resize: vertical; }

/* Honeypot. Hidden from people, left visible to bots that fill every field.
   Deliberately NOT display:none or hidden — the crudest bots skip those. Kept
   out of the tab order and out of the accessibility tree instead. */
.ff-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.ff-field-error { margin: .45rem 0 0; font-size: .88rem; font-weight: 600; color: var(--clay); }
.ff-row.has-error input { border-color: var(--clay); }
.ff-row[data-captcha] input { max-width: 12rem; }
.ff-actions { margin-top: 1.3rem; }
.ff-fineprint { font-size: .82rem; color: var(--muted); margin-top: .9rem; }
/* main.js falls back to creating a .ff-form-status node if it can't find the
   emitted one, so both class names style identically. */
.ff-status, .ff-form-status { margin-top: .8rem; font-size: .92rem; font-weight: 600; }
.ff-status.is-error, .ff-form-status.is-error { color: var(--clay); }

/* ---------- Contact / hours lists ---------- */
.contact-list, .hours-list { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.contact-list li { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list strong {
  display: inline-block; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-right: .5rem;
}
.hours-list li, .hours li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
}
.hours-list li:last-child, .hours li:last-child { border-bottom: 0; }
.day { font-weight: 700; font-size: .92rem; }
.time { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
/* Dotted leader between day and time — the "printed card" detail */
.hours-list li::before, .hours li::before {
  content: ""; order: 1; flex: 1 1 auto;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-.28em); margin-inline: .4rem;
}
.hours-list .time, .hours .time { order: 2; }

/* ---------- Embeds ---------- */
.map-embed, .review-widget {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.map-embed { min-height: 380px; aspect-ratio: 4 / 3; }
.review-widget { min-height: 420px; }

/* ---------- Review funnel ---------- */
.review-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.review-branch {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.2rem);
}
.review-branch h3 { margin-bottom: .6rem; }
.review-branch--yes { border-top: 3px solid var(--sage); }
.review-branch--no  { border-top: 3px solid var(--clay); }
.review-branch .ff-form { border: 0; padding: 0; box-shadow: none; background: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-700); color: #c6d3e0; padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer a { color: #c6d3e0; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h4, .footer-hours-h {
  font-family: var(--body); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  margin: 0 0 1.1rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* HOURS follows the Visit Us contact block inside the same column and was sitting
   flush against it. */
/* Must out-specify `.site-footer h4` (0,1,1) above, whose `margin` shorthand
   covers margin-top. Written as a bare `.footer-hours-h` (0,1,0) this lost, so
   the hours block sat hard against the section above it — the exact spacing the
   client flagged in review, "fixed" once already without ever taking effect. */
.site-footer .footer-hours-h { margin-top: 2.2rem; }

.footer-emergency {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: var(--clay); color: #fff;
  border-radius: var(--r-lg);
  padding: 1.1rem 1.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-emergency__label { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: #fff; }
.footer-emergency__call {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: #fff !important; font-size: 1.05rem;
}
.footer-emergency__call:hover { text-decoration: underline; }

.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .6rem; font-size: .93rem; }
.brand--footer { margin-bottom: 1.1rem; }
/* brightness(0) invert(1) flattened the badge into a featureless white blob.
   Show the real logo on a paper chip so the navy mark stays legible on navy. */
.brand--footer {
  display: inline-flex; background: var(--paper);
  padding: .7rem 1rem; border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.brand-logo--footer { height: 54px; width: auto; }
.footer-tagline { font-size: .93rem; color: #a9bccd; max-width: 34ch; }
.footer-contact li, .footer-visit li { display: flex; gap: .55rem; align-items: flex-start; }
.social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.social a:hover { background: var(--clay); border-color: var(--clay); transform: translateY(-2px); }

/* Two columns keep days aligned while allowing the client-confirmed Friday note
   to wrap instead of widening the page on phones. */
.site-footer .hours, .site-footer .hours-list { display: grid; gap: 0; }
.site-footer .hours li, .site-footer .hours-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  column-gap: 1rem; padding: .5rem 0;
  border-bottom-color: rgba(255,255,255,.1);
}
.site-footer .hours li::before, .site-footer .hours-list li::before { content: none; }
.site-footer .day { color: #e4ecf3; white-space: nowrap; }
.site-footer .time { color: #a9bccd; text-align: right; font-size: .88rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: .86rem; color: #9db0c2;
}
.footer-bottom-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  /* Must match the specificity of `.hero__grid:has(.hero__visual)` above
     (0,2,0). A bare `.hero__grid` here is 0,1,0 and loses, so the one page that
     HAS a hero image — the homepage — kept its two-column grid on mobile and
     wrapped the copy into a ~15-character column beside a shrunken photo.
     Third instance of this trap: see also .btn-nav and the submenu links. */
  .hero__grid,
  .hero__grid:has(.hero__visual) { grid-template-columns: 1fr; }
  .hero__visual { max-width: 440px; margin-inline: auto; order: -1; }
  .hero__visual::after { inset: 16px -16px -16px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  /* An element with backdrop-filter becomes the containing block for its
     position:fixed descendants. The drawer lives inside .site-header, so the
     header's frosted-glass filter made `inset: 0 0 0 auto` resolve against the
     78px header box instead of the viewport — the drawer opened as a stub and
     the hero painted straight over it. The blur is a desktop nicety; drop it at
     drawer widths and give the header an opaque ground so it stays legible. */
  .site-header { backdrop-filter: none; background: var(--paper); }
  /* Below the drawer breakpoint the header also carries the menu toggle. */
  .brand-logo { height: 88px; }
  .header-inner { min-height: 108px; }
  .menu-toggle { display: flex; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw);
    background: var(--paper);
    border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6rem 1.4rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow: var(--sh-lg);
    /* The drawer scrolls (overflow-y: auto), so without this, flicking past its
       last item hands the scroll to the page underneath and the content behind
       the drawer moves. */
    overscroll-behavior: contain;
  }
  .main-nav.is-open { transform: none; }
  .main-nav > a:not(.btn):not(.nav-phone), .services-toggle { width: 100%; justify-content: space-between; padding: .95rem .4rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .main-nav > a::after, .services-toggle::after { display: none; }
  .has-dropdown { width: 100%; }

  /* Touch has no hover, so the cascade flattens into the flow (SOP Step 5 #21). */
  .dropdown, .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: none; min-width: 0;
    padding: .2rem 0 .6rem .7rem;
    border-left: 1.5px solid var(--line);
    margin: .3rem 0 .5rem .4rem;
    display: none;
  }
  .has-dropdown.is-tapped > .dropdown, .has-submenu.is-tapped > .submenu { display: block; }
  .dropdown::before { display: none; }
  .nav-phone, .btn-nav { width: 100%; justify-content: center; margin-top: .8rem; }
  .tb-hide-sm { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .two-col, .review-branches, .ff-row--split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-inner .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 1.2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero__visual::after { display: none; }
  .assoc-strip__grid { gap: 1.6rem 2.2rem; }
}

/* ---------- Review summary ----------
   The aggregate rating rendered as real page content, above the third-party
   review iframe. The JSON-LD aggregateRating reflects THIS, not the iframe. */
.review-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.review-summary__stars {
  color: #e8a72c;
  font-size: 1.35rem;
  letter-spacing: .1em;
  line-height: 1;
}
.review-summary__text {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
}
.review-summary__text strong { color: var(--navy); }
.review-summary__link {
  margin-left: auto;
  font-family: var(--body); font-weight: 700; font-size: .9rem;
  color: var(--clay); text-decoration: none;
}
.review-summary__link:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .review-summary__link { margin-left: 0; }
}

/* ---------- Breadcrumbs ----------
   BreadcrumbList JSON-LD shipped on 36 of 37 pages with nothing rendered. This
   is the visible trail, built from the same list the schema uses. */
.breadcrumb {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--body);
  font-size: .82rem;
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem;
  list-style: none;
  margin: 0; padding: .6rem 0;
  max-width: none;                 /* the global ul/ol max-width would cramp it */
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .55rem; }
.breadcrumb li + li::before { content: "/"; color: var(--line); font-size: .9em; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .breadcrumb { font-size: .78rem; }
}

/* ---------- Mobile action bar ----------
   Below 980px the nav's phone link and Book button move into the off-canvas
   drawer, and .topbar does not stick — so past the hero there was no visible way
   to call from any page. This restores a persistent Call/Book pair on phones.
   Hidden at >=981px, where both live in the header already. */
.action-bar { display: none; }

@media (max-width: 980px) {
  .action-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;              /* under the drawer (100), over page content */
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line);
  }
  .action-bar a {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 48px;         /* comfortable tap target */
    padding: 0 1.1rem;
    border-radius: 8px;
    font-family: var(--body); font-weight: 700; font-size: .95rem;
    text-decoration: none;
  }
  .action-bar__call { background: var(--navy); color: #fff; }
  .action-bar__book { background: var(--clay); color: #fff; }
  .action-bar a:hover, .action-bar a:focus { text-decoration: none; color: #fff; }

  /* Keep the bar from covering the last of the footer. */
  body { padding-bottom: 4.6rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .topbar, .cta-band, .menu-toggle, .footer-emergency, .action-bar { display: none; }
  body { background: #fff; font-size: 12pt; }
  body::before { display: none; }
  a { text-decoration: underline; }
}

/* ---------- Regulatory disclosure ----------
   Colorado 3 CCR 709-1.17(5) requires a PROMINENT general-dentistry disclosure on
   pages advertising specialty procedures, so this is deliberately not a footnote:
   full width, sits directly under the hero, and reads at body size. */
.disclosure {
  background: var(--navy-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--navy);
}
.disclosure p {
  max-width: 74ch;
  margin: 0 auto;
  padding: 1rem 1.4rem;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
.disclosure strong { color: var(--navy); }

.review-summary__note {
  flex-basis: 100%;
  margin: .35rem 0 0;
  font-family: var(--body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Pay Your Bill: the two payment paths ----------
   One block per way to pay. The crypto button is injected by the Via Salaria
   widget script into #via-salaria-pay, so this styles a container whose
   contents arrive at runtime and must not collapse to zero height before
   they do. */
.pay-option {
  margin: 1.4rem 0 1.8rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.pay-option--primary { border-color: var(--brand); border-width: 2px; }
/* The vendor button lands here. min-height reserves its row so the copy below
   does not jump upward while the script is still fetching. */
.pay-option--crypto #via-salaria-pay { min-height: 46px; }
.pay-option__note {
  margin: .9rem 0 0;
  font-size: .92rem;
  color: var(--muted);
}
.pay-option__note:last-child { margin-bottom: 0; }