/* =============================================================================
   The Center — bespoke design layer (v2: navy-anchored, decorated, animated)
   0 primitives · 1 global · 2 header(navy) · 3 footer · 4 sections+decoration
   · 5 cards/buttons · 6 hero · 7 trust strip · 8 testimonials · 9 motion · 10 responsive
   ========================================================================== */

/* 0. PRIMITIVES ----------------------------------------------------------- */
:root {
  --hdr-h: 78px;
  --hdr-h-mobile: 64px;
  --cream: #f3ecdf;             /* clearly WARM light field (deepened so it reads distinct from white + from cool surface) */
  --surface-2: #e6edf7;         /* clearly COOL light field (deepened) — pairs against cream for legible section rhythm */
  --navy: var(--wp--preset--color--brand);
  --ink: var(--wp--preset--color--ink);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,22,50,.05), 0 4px 14px -8px rgba(10,22,50,.18);
  --shadow-md: 0 14px 34px -16px rgba(13,33,74,.34);
  --shadow-lg: 0 34px 70px -26px rgba(13,33,74,.46);
  --ring: 0 0 0 3px rgba(137,173,69,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .2s var(--ease);
  --rule: linear-gradient(90deg, var(--wp--preset--color--accent), #b6d27a);
  --navy-grad: linear-gradient(150deg, #214a82 0%, #1a3d6d 42%, #0e2347 100%);
}

/* 1. GLOBAL --------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: #fff; }
::selection { background: var(--wp--preset--color--accent); color: var(--ink); }
:where(a,button,input,select,textarea,.wp-element-button,summary):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
:where([id]) { scroll-margin-top: calc(var(--hdr-h) + 18px); }
img, svg { max-width: 100%; height: auto; }

/* full-bleed sections must butt flush — kill the editor block-gap between them */
.site-main > .wp-block-post-content > *,
.site-main > .entry-content > * { margin-block: 0 !important; }

/* header/footer are flow groups too — kill the * + * gap (it showed a white sliver
   between the utility strip and the navy nav bar). */
.site-header > *, .site-footer > * { margin-block: 0 !important; }

/* …and at the very top level: the template parts + main are flow siblings, so the same
   * + * gap appeared between the CTA band and the footer (and header and hero). */
.wp-site-blocks > *, .wp-block-template-part, .site-main { margin-block: 0 !important; }

/* never allow a horizontal scrollbar from a stray full-bleed/decoration overflow */
html, body { overflow-x: clip; max-width: 100%; }

/* my custom grid/flex containers space children with `gap` — neutralize WP flow-layout's
   `* + * { margin-block-start }` so it doesn't stack on top (this was offsetting trust item 1
   by 24px and loosening card bodies / hero). */
.trust-grid > *, .trust-item > *, .svc-grid > *, .svc-body > *, .team-grid > *, .team-body > *,
.testi-grid > *, .premier-grid > *, .premier-col > *, .premier-card > *, .hero > .wp-block-cover__inner-container > *,
.cta-band > .wp-block-cover__inner-container > * { margin-block: 0 !important; }

.entry-content :where(p) { max-width: 68ch; }
/* a 68ch-capped paragraph whose text is centered must also center its BOX (margin auto), or the
   narrower box pins left inside a wider centered container and the text reads off-center (lesson 18) */
.entry-content :where(p).has-text-align-center, .cat-intro p, .prose-narrow.has-text-align-center p { margin-inline: auto; }
p.is-lead, .is-lead p { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }

/* prose link underline-grow */
.prose a:not(.wp-element-button):not(.team-photo-mono):where(:any-link),
.entry-content a:not(.wp-element-button):not(.team-photo-mono):where(:any-link) {
  background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1.5px;
  background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--t), color var(--t);
}
.prose a:not(.wp-element-button):not(.team-photo-mono):hover, .entry-content a:not(.wp-element-button):not(.team-photo-mono):hover { background-size: 100% 1.5px; }
/* an anchor used as an image tile (no text) must not inherit the prose underline-grow background */
.entry-content a.team-photo-mono { background-size: cover; }

/* 2. HEADER (dark navy — so the white brand logo reads + adds richness) ---- */
/* Sticky header — the nav bar must follow you down on scroll (client 6/18). WP wraps the
   header template part in <header class="wp-block-template-part">, a direct child of the
   page-tall .wp-site-blocks — THAT is the element with travel room. .site-header and the
   inner .primary-bar both sit inside header-tall parents, so sticking them does nothing (the
   element scrolls away with its short parent). The footer part renders as <footer>, so this
   selector won't catch it. html/body use overflow-x:clip (not hidden), which does NOT break
   sticky; on mobile .util-strip is display:none so only the ~64px nav bar sticks. Verified
   live with a scroll test. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.site-header { position: relative; z-index: 100; }
.util-strip { background: var(--ink); color: rgba(255,255,255,.72); }
.util-inner { gap: clamp(1rem,2.4vw,2rem); padding-block: 8px; }
.util-strip .util-item { margin: 0; font-size: .82rem; letter-spacing: .01em; }
.util-strip a { color: rgba(255,255,255,.78); transition: color var(--t); }
.util-strip a:hover { color: var(--wp--preset--color--accent); }
.util-item.util-phone a { font-weight: 600; color: #fff; }

.primary-bar { position: sticky; top: 0; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); transition: box-shadow var(--t), padding var(--t), background var(--t); }
.primary-inner { padding-block: 12px; gap: 1.25rem; min-height: var(--hdr-h); flex-wrap: nowrap; align-items: center; }
.header-ctas { flex: 0 0 auto; }
/* Full-width header: override the constrained 1200px cap so the logo sits hard-left and the
   CTA hard-right, giving the nav the entire middle (no needless wrapping on wide screens). */
.site-header .primary-inner,
.site-header .util-inner { max-width: none !important; margin-inline: 0 !important; }
.site-header.scrolled .primary-bar { background: var(--ink); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.site-header.scrolled .primary-inner { padding-block: 7px; }
.brand-logo { line-height: 0; flex: 0 0 auto; }
.brand-logo img { width: 124px; max-width: 38vw; transition: width var(--t); }
.site-header.scrolled .brand-logo img { width: 116px; }
.nav-actions { gap: clamp(1.25rem, 2.4vw, 2.4rem); flex-wrap: nowrap; }

/* desktop nav — one line, evenly spaced, white on navy, green underline-grow */
/* nav grows into the middle and wraps to centered rows (tight row-gap) as width shrinks */
.primary-nav { flex: 1 1 auto; min-width: 0; }
.primary-nav .wp-block-navigation__container { flex-wrap: wrap !important; justify-content: center !important; gap: .35rem clamp(.65rem, 1.2vw, 1.2rem) !important; }
.primary-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--body); font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9);
  padding-block: 8px; position: relative; white-space: nowrap; transition: color var(--t);
}
.primary-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  background: var(--rule); border-radius: 2px; transition: right var(--t);
}
.primary-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.primary-nav .current-menu-item .wp-block-navigation-item__content::after { right: 0; }
.primary-nav .wp-block-navigation-item__content:hover { color: #fff; }
/* force the inner label span white — it otherwise inherits the dark body text color → invisible on navy */
.primary-bar .wp-block-navigation-item__content,
.primary-bar .wp-block-navigation-item__label,
.primary-bar .wp-block-navigation a:not(.wp-element-button) { color: rgba(255,255,255,.92) !important; }
.primary-bar .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.primary-bar .wp-block-navigation-item:hover .wp-block-navigation-item__label { color: #fff !important; }

.header-ctas { gap: .6rem; margin: 0; flex-wrap: nowrap; align-items: center; }
.header-ctas .wp-block-button__link { white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(137,173,69,.7); }
.header-ctas .btn-book .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--ink); font-weight: 700; }
.header-ctas .btn-book .wp-block-button__link:hover { background: #98bd4f; transform: translateY(-1px); }
.btn-call.is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; gap: .4rem; display: inline-flex; align-items: center; }
.btn-call.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.btn-call-icon { display: inline-flex; align-items: center; line-height: 0; }
.header-ctas .btn-book-mobile { display: none; }
.header-ctas .btn-call { display: none; }

/* mobile hamburger / overlay */
.primary-nav .wp-block-navigation__responsive-container-open,
.primary-nav .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open { padding: clamp(1.5rem,7vw,3rem); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--heading);
  font-size: 1.55rem; font-weight: 500; padding-block: .35em; color: #fff;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* 2b. CUSTOM MOBILE MENU (off-canvas panel) ------------------------------- */
.m-toggle { display: none; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border-radius: 12px; transition: background var(--t); }
.m-toggle:hover { background: rgba(255,255,255,.08); }
.m-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }

.m-menu { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.m-menu__scrim { position: absolute; inset: 0; background: rgba(8,17,38,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .45s var(--ease); }
/* box-sizing:border-box so the width INCLUDES the padding (content-box made the panel
   ~45px wider than min(89vw,420px) → it bled off-screen).
   The left-right scroll was the decorative glow overflowing the inline-end edge: since
   overflow-y:auto makes the panel a scroll container, neither overflow-x:hidden nor :clip
   stops it (per spec, with a scrolling y-axis the x-axis `clip` computes to `hidden`, and a
   scroll container's "hidden" axis is still touch/JS-scrollable). The real fix is to keep
   nothing overflowing horizontally (see .m-menu__glow). overflow-x:hidden is just a backstop. */
.m-menu__panel { box-sizing: border-box; position: absolute; top: 0; right: 0; height: 100%; width: min(89vw, 420px); background: var(--navy-grad); color: #fff; display: flex; flex-direction: column; padding: clamp(1.4rem,5vw,2rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform .5s var(--ease); box-shadow: -36px 0 70px -20px rgba(0,0,0,.55); }
.m-menu.is-open { visibility: visible; }
.m-menu.is-open .m-menu__scrim { opacity: 1; }
.m-menu.is-open .m-menu__panel { transform: none; }
/* anchored to (not past) the inline-end edge + width capped to the panel, so it never
   creates horizontal scrollable overflow. width:min() keeps it inside narrow phones too. */
.m-menu__glow { position: absolute; top: -100px; right: 0; width: min(300px, 100%); height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(137,173,69,.22), transparent 70%); pointer-events: none; }

.m-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(1.25rem,4vw,1.85rem); position: relative; z-index: 1; }
.m-menu__logo { width: 150px; height: auto; }
.m-menu__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); color: #fff; border-radius: 50%; cursor: pointer; transition: transform var(--t), background var(--t), border-color var(--t); }
.m-menu__close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); transform: rotate(90deg); }

/* Nav list now sits BELOW the CTAs/info — a hairline rule separates the two groups. */
.m-menu__nav { display: flex; flex-direction: column; position: relative; z-index: 1; margin-top: clamp(1.1rem,4vw,1.5rem); padding-top: .35rem; border-top: 1px solid rgba(255,255,255,.1); }
.m-menu__nav a { display: flex; align-items: baseline; gap: .85rem; padding: .9rem .25rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); transition: color var(--t), padding-left var(--t); }
.m-menu__nav a .n { font-family: var(--wp--preset--font-family--body); font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #b6d27a; min-width: 1.7em; }  /* lighter green: AA on navy */
.m-menu__nav a .l { font-family: var(--wp--preset--font-family--heading); font-size: 1.45rem; line-height: 1.1; }
.m-menu__nav a .x { margin-left: auto; align-self: center; color: rgba(255,255,255,.35); transition: transform var(--t), color var(--t); }
.m-menu__nav a:hover, .m-menu__nav a:focus-visible { color: var(--wp--preset--color--accent); padding-left: .6rem; }
.m-menu__nav a:hover .x, .m-menu__nav a:focus-visible .x { color: var(--wp--preset--color--accent); transform: translateX(5px); }
.m-menu__nav a { opacity: 0; transform: translateX(18px); }
.m-menu.is-open .m-menu__nav a { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), color var(--t), padding-left var(--t); transition-delay: calc(var(--i) * .055s + .12s); }

/* Book + Call side by side on one row (CTAs sit at the top of the panel, above the nav). */
.m-menu__actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: .6rem; margin: clamp(1.1rem,4vw,1.6rem) 0 1rem; position: relative; z-index: 1; }
.m-menu__book, .m-menu__call { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .4rem; padding: .8rem .65rem; border-radius: var(--radius-pill); font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: .9rem; line-height: 1.2; text-decoration: none; transition: transform var(--t), background var(--t), border-color var(--t); }
.m-menu__call svg { flex: 0 0 auto; }
.m-menu__book { background: var(--wp--preset--color--accent); color: var(--ink); box-shadow: 0 12px 26px -12px rgba(137,173,69,.8); }
.m-menu__book:hover { background: #98bd4f; transform: translateY(-2px); }
.m-menu__call { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.m-menu__call:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.m-menu__dir { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; transition: background var(--t), border-color var(--t), transform var(--t); position: relative; z-index: 1; }
.m-menu__dir:hover { background: rgba(255,255,255,.1); border-color: var(--wp--preset--color--accent); transform: translateY(-1px); }
.m-menu__pin { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--ink); }
.m-menu__addr { display: flex; flex-direction: column; font-size: .9rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.m-menu__addr strong { color: #fff; font-weight: 600; }
.m-menu__addr em { font-style: normal; font-size: .78rem; color: #b6d27a; font-weight: 700; margin-top: .15rem; }  /* lighter green: AA on navy */

/* office-hours card (mirrors the directions card above it) — open + CLOSED rows, clearly legible */
.m-menu__hours { display: flex; align-items: flex-start; gap: .85rem; margin: .85rem 0 .25rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
.m-menu__hours-ico { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--ink); }
.m-menu__hours-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.m-menu__hours-label { color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.m-menu__hours-rows { display: flex; flex-direction: column; gap: .35rem; }
/* days · dashed leader · time — the leader makes it obvious which hours pair with which days */
.m-menu__hours-rows .row { display: flex; align-items: center; gap: .5rem; font-size: .92rem; line-height: 1.5; }
.m-menu__hours-rows .days { color: rgba(255,255,255,.82); white-space: nowrap; }
/* dashed leader, positioned to read centered against the day/time text (tuned by eye) */
.m-menu__hours-rows .lead { flex: 1 1 auto; min-width: 16px; height: 0; border-bottom: 1px dashed rgba(255,255,255,.36); transform: translateY(0.05em); }
.m-menu__hours-rows .time { color: #fff; font-weight: 600; white-space: nowrap; }
.m-menu__hours-rows .is-closed .time { color: #e7b7a0; font-weight: 600; }   /* warm muted = clearly "closed" */
.m-menu__hours-emerg { font-style: normal; font-size: .76rem; color: #b6d27a; font-weight: 700; margin-top: .5rem; }  /* lighter green: AA on navy */

@media (prefers-reduced-motion: reduce) {
  .m-menu__panel, .m-menu__scrim, .m-menu__nav a { transition: none !important; }
  .m-menu__nav a { opacity: 1; transform: none; }
}

/* 3. FOOTER --------------------------------------------------------------- */
.site-footer { background: var(--navy-grad) !important; padding-block: clamp(3.5rem,6vw,5.5rem) 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(137,173,69,.16), transparent 70%); pointer-events: none; }
.footer-grid { display: grid; gap: clamp(2rem,4vw,3.5rem); grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-bottom: clamp(2.5rem,5vw,4rem); position: relative; }
.footer-logo img { width: 188px; max-width: 60%; }
.footer-docs { font-family: var(--wp--preset--font-family--heading); font-size: 1.18rem; color: #fff; margin: 1.1rem 0 .6rem; }
.footer-about .footer-contact { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.7; margin: 0 0 1.1rem; }
.site-footer :is(h1,h2,h3,h4).footer-heading { color: #fff; font-size: 1.12rem; font-weight: 600; margin: 0 0 1.15rem; padding-bottom: .65rem; position: relative; }
.footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--rule); border-radius: 2px; }
.footer-heading a { color: inherit; text-decoration: none; transition: color var(--t); }
.footer-heading a:hover { color: #b6d27a; }  /* lighter green: AA on navy */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-links a, .footer-contact a { color: rgba(255,255,255,.78); transition: color var(--t), padding-left var(--t); }
.footer-links a:hover { color: #fff; padding-left: 5px; }
.footer-contact a:hover { color: var(--wp--preset--color--accent); }
.footer-hours { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.footer-hours strong { color: #fff; font-weight: 600; }
.footer-emergency strong { color: #b6d27a; }  /* lighter green: AA on navy (accent #89ad45 was 4.21:1) */
.footer-social { gap: .45rem; margin-top: .4rem; }
.footer-social .wp-social-link { background: rgba(255,255,255,.1); border-radius: var(--radius-pill); transition: background var(--t), transform var(--t); }
.footer-social .wp-social-link:hover { background: var(--wp--preset--color--accent); transform: translateY(-3px); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding-block: 1.4rem; gap: 1rem; position: relative; }
.footer-legal p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-legal-links a { color: rgba(255,255,255,.72); }
.footer-legal-links a:hover { color: #fff; }

/* 3b. MOBILE FOOTER (elevated) — centered brand + tappable call pill, two side-by-side link columns,
   centered hours + legal. Uses the width instead of one tall left-justified stack. */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,2.75rem) 1.1rem; align-items: start; padding-bottom: clamp(2.25rem,6vw,3rem); }
  /* brand: full width, centered */
  .footer-about { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-logo img { width: 208px; max-width: 66vw; margin-inline: auto; }
  .footer-docs { margin: 1.05rem 0 .55rem; }
  .footer-about .footer-contact { margin: 0 0 1rem; }
  .footer-about .footer-contact a[href^="tel:"] { display: inline-block; margin-top: .8rem; padding: .62rem 1.6rem; border-radius: var(--radius-pill); background: var(--wp--preset--color--accent); color: var(--ink) !important; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(137,173,69,.8); }
  .footer-about .footer-contact a[href^="tel:"]:hover { background: #98bd4f; padding-left: 1.6rem; }
  .footer-social { justify-content: center; margin-top: .7rem; gap: .65rem; }
  .footer-social .wp-social-link { width: 48px; height: 48px; border-radius: 50%; margin: 0; }
  .footer-social .wp-social-link a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
  .footer-social .wp-social-link svg { width: 22px; height: 22px; }
  /* two link lists, side by side, centered */
  .footer-col-services { grid-column: 1; }
  .footer-col-resources { grid-column: 2; }
  .footer-col-services, .footer-col-resources { text-align: center; }
  .footer-col-services .footer-heading, .footer-col-resources .footer-heading { font-size: 1rem; padding-bottom: .7rem; }
  .footer-col-services .footer-heading::after, .footer-col-resources .footer-heading::after { left: 50%; transform: translateX(-50%); }
  .footer-col-services .footer-links, .footer-col-resources .footer-links { align-items: center; gap: .72rem; }
  .footer-links a:hover { padding-left: 0; }
  /* hours: full width, centered, with a tinted card feel */
  .footer-col-hours { grid-column: 1 / -1; text-align: center; }
  .footer-col-hours .footer-heading::after { left: 50%; transform: translateX(-50%); }
  .footer-hours { margin: 0 0 .65rem; }
  /* legal: centered stack */
  .footer-legal { justify-content: center; text-align: center; flex-direction: column; gap: .55rem; }
  .footer-legal p { margin-inline: auto; }
}

/* 4. SECTIONS + DECORATION ------------------------------------------------ */
.section { padding-block: var(--wp--preset--spacing--90); position: relative; overflow: hidden; }
/* The first content section sits directly under the subpage hero (which already carries ~96px of
   its own bottom padding) — a full section top-padding on top of that reads as a cavern above the
   opening paragraph. Trim the first section's top padding only; section-to-section rhythm is untouched. */
.subpage-hero + .section { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
/* Client direction (6/23): move OFF cream site-wide toward the navy/light-blue palette.
   .section-cream now renders the cool light-blue surface (same as .section-surface) so every
   content section that was cream is now light-blue. (Token --cream kept for reference only.) */
.section-cream { background: var(--surface-2); }
.section-navy { background: var(--navy-grad); color: #fff; }
/* crisp top edge on every light section so two adjacent light fields never read as one (Steven feedback) */
.section-cream, .section-surface, .section-steel, .trust-strip { border-top: 1px solid rgba(19,41,75,.09); }
.section-navy :is(h1,h2,h3,h4) { color: #fff; }
.section-navy p { color: rgba(255,255,255,.84); }
.section-navy .eyebrow { color: #b6d27a; }   /* lighter green: AA on navy (accent #89ad45 is 4.21:1) */

/* soft radial glow decoration on navy sections */
.section-navy::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  top: -180px; right: -140px; background: radial-gradient(circle, rgba(137,173,69,.14), transparent 68%); pointer-events: none; }
.section-navy::after { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  bottom: -200px; left: -160px; background: radial-gradient(circle, rgba(114,146,188,.22), transparent 70%); pointer-events: none; }

/* eyebrow: small green dash + uppercase label */
.eyebrow { font-family: var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: .2em;
  font-size: .78rem; font-weight: 700; color: #4a6b20; margin: 0 0 .6rem; display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--rule); border-radius: 2px; display: inline-block; }
/* a centered eyebrow must be a BLOCK flex (not inline-flex) for justify-content to center it — an
   inline-flex box only centers if its *parent* is text-align:center (true in heroes, not on CTA bands) */
[style*="text-align:center"] .eyebrow, .has-text-align-center.eyebrow, .section-head .eyebrow { display: flex; justify-content: center; }

.script-accent { font-family: var(--wp--preset--font-family--script); color: var(--wp--preset--color--accent); line-height: 1; display: block; }

.section-head { text-align: center; max-width: 56ch; margin-inline: auto; margin-bottom: clamp(2.5rem,4.5vw,3.75rem); position: relative; z-index: 1; }
.section-head > * { margin-block: 0; }
.section-head .eyebrow { margin-bottom: .65rem; }
.section-head h2 { margin-top: .1rem; }
.section-head .is-lead { margin-top: .95rem; }
.section-head.has-rule > :is(h1,h2,h3)::after, .has-center-rule::after {
  content: ""; display: block; width: 60px; height: 3px; margin: 1.1rem auto 0; background: var(--rule); border-radius: 3px; }

/* 5. CARDS + BUTTONS ------------------------------------------------------ */
.card, .svc-card, .team-card, .testi-card {
  background: #fff; border: 1px solid rgba(19,41,75,.08); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); position: relative; height: 100%; overflow: clip;
}
.card:hover, .svc-card:hover, .team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* green accent bar that grows across the card top on hover */
.svc-card::before, .team-card::before { content: ""; position: absolute; top: 0; left: 0; right: 100%; height: 4px; background: var(--rule); transition: right .35s var(--ease); z-index: 2; }
.svc-card:hover::before, .team-card:hover::before { right: 0; }
.svc-card .wp-block-image, .team-card .wp-block-image { margin: 0; overflow: hidden; }
.svc-card img, .team-card img { width: 100%; display: block; transition: transform .6s var(--ease); }
.svc-card img { aspect-ratio: 16/11; object-fit: cover; }
.team-card img { aspect-ratio: 4/5; object-fit: cover; object-position: top center; }
.svc-card:hover img, .team-card:hover img { transform: scale(1.06); }

.wp-element-button { transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t); }
.wp-block-button:not(.btn-call) .wp-element-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.is-style-ghost .wp-block-button__link, .btn-ghost .wp-block-button__link { background: transparent; color: var(--navy); border: 1.5px solid currentColor; box-shadow: none; }
.section-navy .is-style-ghost .wp-block-button__link, .section-navy .btn-ghost .wp-block-button__link, .hero .btn-ghost .wp-block-button__link, .cta-band .btn-ghost .wp-block-button__link, .cta-band .is-style-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn-ghost .wp-block-button__link:hover, .hero .btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--navy); }
.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* 6. HERO ----------------------------------------------------------------- */
/* min-height uses svh (small viewport height) so the hero doesn't jump when the mobile address
   bar shows/hides; vh first as the fallback for very old engines (svh is baseline since 2023). */
.hero { text-align: center; color: #fff; isolation: isolate; min-height: clamp(560px, 86vh, 760px); min-height: clamp(560px, 86svh, 760px); display: flex; }
.hero :is(h1,h2,h3) { color: #fff; }
.hero > .wp-block-cover__inner-container { margin: auto; }
.hero .wp-block-cover__image-background { animation: heroZoom 18s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero .wp-block-cover__image-background { animation: none; } }
/* NEUTRAL center scrim (not navy) — keeps the centered white text legible while letting the
   photo read bright & true at the edges. Replaces the old navy vignette the client flagged
   as a "blue shade." See §20 for the matching cover-dim reduction + text shadows. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(102% 82% at 50% 50%, rgba(4,8,16,.50) 0%, rgba(4,8,16,.28) 46%, rgba(4,8,16,0) 76%); }
/* z-index !important: WP core's .wp-block-cover .wp-block-cover__inner-container sets z-index:1
   at the SAME specificity as our rule, and (being later in source order) won it — which left the
   text tied with .hero::after (z1). Since ::after paints after same-z-index siblings, the scrim
   was painting OVER the text. Force the text above the darkening. */
.hero .wp-block-cover__inner-container { position: relative; z-index: 3 !important; padding-block: clamp(4rem,10vh,6.5rem); display: grid; gap: 1.15rem; justify-items: center; }
.hero-title { margin: 0; letter-spacing: -.015em; text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45); }
.hero .script-accent { color: #fff; opacity: .97; font-size: clamp(1.7rem,4.6vw,2.5rem); margin: -.5rem 0 0; }
.hero-sub { max-width: 48ch; font-size: var(--wp--preset--font-size--large); color: rgba(255,255,255,.92); margin: .35rem 0 .5rem; }
.hero-eyebrow { color: #fff; opacity: .92; }
.hero-ctas { gap: .85rem; margin-top: .7rem; }
.hero-ctas .wp-block-button__link { padding: 1.05rem 2.2rem; font-size: .98rem; }
/* scroll cue */
.hero .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; }
.hero .scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: #fff; border-radius: 2px; animation: scrollCue 1.7s var(--ease) infinite; }
@keyframes scrollCue { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1;transform:translateY(12px)} 100%{opacity:0;transform:translateY(12px)} }

/* 7. TRUST / FEATURE STRIP ------------------------------------------------ */
.trust-strip { background: var(--cream); padding-block: clamp(2.5rem,4vw,3.25rem); border-bottom: 1px solid rgba(19,41,75,.06); }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2.5vw,2.25rem); align-items: start; }
.trust-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; padding-inline: clamp(.5rem,1.5vw,1.4rem); }
.trust-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background: rgba(19,41,75,.12); }
/* fixed-height icon row so every icon (and the labels beneath) line up exactly */
.trust-item .wp-block-image { margin: 0 !important; height: 56px; display: flex; align-items: center; justify-content: center; }
.trust-item img { width: auto !important; height: 52px !important; object-fit: contain; transition: transform var(--t); }
.trust-item:hover img { transform: translateY(-4px) scale(1.05); }
.trust-item .trust-label { font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; color: var(--navy); margin: 0 !important; line-height: 1.25; }
.trust-item .trust-sub { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 0 !important; }

/* 8. SERVICES / WHY / TEAM / TESTIMONIALS / GALLERY ----------------------- */
.svc-grid, .team-grid, .testi-grid { gap: 1.7rem; position: relative; z-index: 1; }
.svc-icon { width: 52px; height: 52px; object-fit: contain; margin-bottom: .35rem; }
.svc-body { padding: 1.6rem 1.65rem 1.75rem; display: grid; gap: .5rem; }
.svc-body h3 { margin: 0; }
.svc-body p { margin: 0; color: var(--wp--preset--color--muted); font-size: .98rem; line-height: 1.6; }
.svc-link { margin-top: .35rem !important; }
.svc-link a { font-weight: 700; color: #4a6b20; display: inline-block; transition: transform var(--t); }
/* deeper green for text links sitting directly on the warm/cool light fields — the button/action
   green #5b7d2c reads ~4.1:1 on the deepened cream/surface; #4a6b20 clears AA (buttons keep #5b7d2c) */
.section-cream a:not(.wp-element-button):not(.svc-link), .section-surface a:not(.wp-element-button):not(.svc-link) { color: #4a6b20; }
.section-navy .svc-link a { color: #b6d27a; }
/* A WHITE card (.svc-card/.team-card) placed ON a navy section must keep its on-white text colors —
   otherwise .section-navy's :is(h1,h2,h3){#fff} + p{#fff} bleed in and the card text vanishes.
   Scoped to .svc-card/.team-card so it never touches .testi-card or translucent .feature cards. */
.section-navy :is(.svc-card,.team-card) :is(h1,h2,h3,h4) { color: var(--wp--preset--color--brand); }
.section-navy :is(.svc-card,.team-card) p { color: var(--wp--preset--color--muted); }
.section-navy :is(.svc-card,.team-card) .team-role { color: var(--wp--preset--color--action); }
.section-navy :is(.svc-card,.team-card) .svc-link a { color: var(--wp--preset--color--action); }
.svc-link a:hover { transform: translateX(4px); }

.why-grid { gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.framed-img { position: relative; }
.framed-img::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--wp--preset--color--accent); border-radius: var(--radius); z-index: 0; }
.framed-img img { position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.team-grid { max-width: 900px; margin-inline: auto; }
.team-body { padding: 1.5rem 1.6rem 1.7rem; display: grid; gap: .35rem; text-align: center; }
.team-body h3 { margin: 0; }
.team-role { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--action); margin: 0; }
.team-body p:not(.team-role):not(.svc-link) { color: var(--wp--preset--color--muted); font-size: .96rem; margin: .4rem 0 0; }
.team-body .svc-link { margin-top: .5rem !important; }

/* testimonials on navy with a big decorative quote mark */
.testi-section { position: relative; }
.testi-card { padding: 2rem 1.8rem 1.9rem; display: grid; gap: .85rem; align-content: start; background: rgba(255,255,255,.97); }
.testi-card::after { content: "\201D"; position: absolute; top: 6px; right: 18px; font-family: var(--wp--preset--font-family--heading); font-size: 5rem; line-height: 1; color: rgba(137,173,69,.18); }
.testi-stars, .section-navy .testi-stars { color: #e7a93b; letter-spacing: .14em; font-size: 1.05rem; margin: 0; }
.testi-quote, .section-navy .testi-quote { font-family: var(--wp--preset--font-family--heading); font-size: 1.18rem; line-height: 1.5; color: var(--ink); margin: 0; position: relative; z-index: 1; }
.testi-name, .section-navy .testi-name { font-weight: 700; color: var(--navy); font-size: .92rem; margin: 0; letter-spacing: .01em; }

.gallery-section .wp-block-columns { gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.smile-gallery img { border-radius: var(--radius-sm); transition: transform var(--t), box-shadow var(--t); }
.smile-gallery .wp-block-image { overflow: hidden; border-radius: var(--radius-sm); }
.smile-gallery .wp-block-image:hover img { transform: scale(1.07); }

/* before/after comparison slider (drag the divider — left = before, right = after) */
.ba { position: relative; width: 100%; aspect-ratio: 5/4; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); user-select: none; touch-action: none; cursor: ew-resize; --pos: 50%; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-after { z-index: 1; }
.ba-before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag { position: absolute; bottom: 14px; z-index: 4; font-family: var(--wp--preset--font-family--body); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; background: rgba(13,28,58,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: .45rem .8rem; border-radius: 999px; pointer-events: none; }
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; }
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); z-index: 3; box-shadow: 0 0 14px rgba(0,0,0,.45); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%,-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(8,18,40,.4); cursor: ew-resize; transition: transform var(--t), box-shadow var(--t); }
.ba-handle:hover { transform: translate(-50%,-50%) scale(1.08); }
.ba-handle:focus-visible { box-shadow: 0 6px 18px rgba(8,18,40,.4), var(--ring); outline: none; }

/* 3-across grid of comparison sliders in the right column — small tiles keep the 500px source crisp */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; position: relative; z-index: 1; }
.ba-grid .ba-handle { width: 30px; height: 30px; }
.ba-grid .ba-handle svg { width: 15px; height: 15px; }
.ba-grid .ba-tag { font-size: .46rem; padding: .25rem .45rem; bottom: 7px; letter-spacing: .1em; }
.ba-grid .ba-divider { width: 2px; }
@media (max-width: 781px) { .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }   /* columns stack → grid full width */
@media (max-width: 480px) { .ba-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

/* welcome with a faint script + centered rule — soft center spotlight adds depth/“lit” feel */
.welcome-section { text-align: center; padding-block: clamp(3.75rem,7vw,6rem);
  background-image: radial-gradient(62% 58% at 50% 36%, rgba(255,255,255,.07), transparent 72%), var(--navy-grad); }
.welcome-section .script-welcome { font-size: clamp(2.7rem,6vw,4rem); margin-bottom: .15rem; opacity: .96; }
.welcome-section .has-center-rule::after { width: 96px; height: 2px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent), transparent); }

/* closing CTA band */
.cta-band { background: var(--navy-grad); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rule); z-index: 2; }
.cta-band::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -220px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(137,173,69,.16), transparent 68%); pointer-events: none; }
.cta-band .wp-block-cover__inner-container { padding-block: clamp(4rem,7vw,5.75rem); text-align: center; display: grid; gap: 1.05rem; justify-items: center; position: relative; z-index: 1; }
.cta-band :is(h1,h2,h3) { margin: 0; color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 48ch; margin: 0; }
.cta-band .wp-block-buttons { margin-top: .6rem; }

/* interior sub-page hero */
.subpage-hero { background: var(--navy-grad); padding-block: clamp(3.25rem,7vw,5rem); text-align: center; position: relative; overflow: hidden; }
.subpage-hero::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; top: -200px; right: -120px; background: radial-gradient(circle, rgba(137,173,69,.14), transparent 68%); }
.subpage-title { margin: 0; color: #fff; position: relative; z-index: 1; }
.single-date { color: rgba(255,255,255,.72); font-size: .9rem; margin-bottom: .4rem; }
.site-main > .entry-content.section { padding-top: clamp(2.5rem,5vw,4rem); }

/* blog cards */
.post-card { display: flex; flex-direction: column; }
.post-card-body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .5rem; }
.post-card-date { font-size: .82rem; color: var(--wp--preset--color--muted); }
.post-card-body h2 a { color: var(--navy); }
/* Featured image: reserve a fixed 16/10 box (object-fit cover) so every card is uniform AND the
   images don't pop/reflow ("zoom in and enlarge") as they lazy-load while you scroll. The only
   scale is a deliberate hover-zoom, matching the site's other cards. */
.post-grid > * { min-width: 0; }   /* let columns shrink below the image's intrinsic width */
.post-card .wp-block-post-featured-image { aspect-ratio: 16 / 10; overflow: hidden; margin: 0; }
.post-card .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.post-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }

/* 9. MOTION --------------------------------------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; } }

/* 10. RESPONSIVE ---------------------------------------------------------- */
/* Tablet: relax the multi-column grids. The nav itself just wraps to centered rows — no hamburger yet. */
@media (max-width: 980px) {
  .trust-grid { grid-template-columns: repeat(2,1fr); gap: 1.75rem 1rem; }
  .trust-item:nth-child(2)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .framed-img::before { inset: 12px -12px -12px 12px; }
}

/* Mobile/tablet-portrait: collapse the wrapping nav into the hamburger overlay; group logo | (Call · Book · ☰) */
@media (max-width: 768px) {
  .primary-inner { flex-wrap: nowrap; min-height: var(--hdr-h-mobile); padding-block: 8px; gap: .6rem; justify-content: flex-start !important; }
  .primary-inner > .header-ctas { order: 2; margin-left: auto !important; }   /* push the action group to the right; logo stays left */
  .primary-nav { display: none; }                /* core inline nav hidden — replaced by the custom off-canvas menu */
  .m-toggle { display: flex; order: 3; }
  .util-strip { display: none; }
  .header-ctas .btn-call { display: block; }
  .header-ctas .btn-book-desktop { display: none; }
  .header-ctas .btn-book-mobile { display: none; }   /* Book lives in the menu now; bar = logo · Call(number) · ☰ */
  .btn-call.is-style-outline .wp-block-button__link { padding: .5rem .85rem; }
  .btn-call .btn-call-text { font-size: .8rem; font-weight: 600; }
  .brand-logo img { width: 100px; }
  .site-header.scrolled .brand-logo img { width: 92px; }
}
@media (max-width: 781px) {
  .why-grid .wp-block-column:first-child, .gallery-section .wp-block-column:first-child { margin-bottom: 1.75rem; }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .brand-logo img { width: 92px; }
  .hero { min-height: 78vh; min-height: 78svh; }
}

/* 8b. OFFICE GALLERY · STATS BAND · TESTIMONIAL WALL ---------------------- */
/* light cool-surface section (cream → surface → navy reads as a clean progression) */
.section-surface { background: var(--surface-2); }
/* on the steel field the muted lead dips just under AA — deepen it for ≥4.5:1 */
.section-steel p.is-lead, .section-steel .is-lead p { color: #43536f; }

/* "Welcome to Our Office" — uniform photo grid, hover-zoom, native click-to-expand lightbox */
.office-section .office-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.5vw,1.1rem); position: relative; z-index: 1; }
.office-grid .wp-block-image { margin: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); background: #e9eef5; }
.office-grid .wp-block-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform .6s var(--ease); cursor: zoom-in; }
.office-grid .wp-block-image:hover img { transform: scale(1.06); }

/* stats / credibility band (navy) — slimmer than a full section; big serif numbers, green unit */
.stats-band { padding-block: clamp(3rem,5vw,4.5rem); }
/* The stat numbers/labels/dividers are white — designed for a navy field — but the section was
   left as section-surface (light blue) → unreadable. Render the band on navy (fixes contrast +
   matches the client's "more navy" direction). Two-class selector beats .section-surface. */
.stats-band.section-surface { background: var(--navy-grad); border-top-color: rgba(255,255,255,.10); }
.stats-band .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.25rem,3vw,2.5rem); position: relative; z-index: 1; text-align: center; }
.stat { display: flex; flex-direction: column; gap: .4rem; position: relative; padding-inline: clamp(.5rem,1.5vw,1.2rem); }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.16); }
.stat-num { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: clamp(2.6rem,5.5vw,3.7rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat-num .u { color: var(--wp--preset--color--accent); margin-left: .02em; }
.stat-label { font-family: var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: .15em; font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.72); }

/* testimonial marquee — seamless infinite auto-scroll (cards duplicated; translateX(-50%) loops
   exactly because every card incl. the last carries the same trailing margin). Pauses on hover/
   focus; edges fade into the navy via a mask. Reduced-motion → static, swipeable, no duplicates. */
.testi-marquee { position: relative; z-index: 1; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi-track { display: flex; flex-wrap: nowrap; width: max-content; padding-block: .85rem; animation: testiScroll var(--testi-dur,48s) linear infinite; will-change: transform; }
.testi-track .testi-card { flex: 0 0 clamp(268px, 80vw, 344px); width: clamp(268px, 80vw, 344px); margin-right: 1.6rem; }
.testi-marquee:hover .testi-track, .testi-marquee:focus-within .testi-track { animation-play-state: paused; }
@keyframes testiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; padding-inline: clamp(1.15rem,5vw,3rem); }
  .testi-track .testi-card--dup { display: none; }
  .testi-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 980px) {
  .stats-band .stats-grid { grid-template-columns: repeat(2,1fr); gap: 2rem 1rem; }
  .stat:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .office-section .office-grid { grid-template-columns: 1fr 1fr; }
}

/* 8c. PREMIER SERVICES (staggered editorial: navy cards + interleaved photos) + TOP DENTAL OFFICE */
.section-steel { background: linear-gradient(170deg, #eef3f9 0%, #dde7f3 100%); }

.premier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.2vw,1.7rem); align-items: start; position: relative; z-index: 1; }
.premier-col { display: flex; flex-direction: column; gap: clamp(1rem,2vw,1.5rem); }
.premier-col--offset { margin-top: clamp(1.75rem,4vw,3.5rem); }   /* staggered/offset editorial rhythm */
.premier-photo { margin: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); }
.premier-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--ease); }
.premier-photo:hover img { transform: scale(1.06); }
.premier-card { background: var(--navy-grad); color: #fff; border-radius: var(--radius); padding: clamp(1.5rem,2.6vw,2.1rem); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: .7rem; position: relative; overflow: hidden; }
.premier-card::before { content: ""; position: absolute; top: 0; left: 0; right: 100%; height: 4px; background: var(--rule); transition: right .4s var(--ease); }
.premier-card:hover::before { right: 0; }
.premier-card h3 { color: #fff; margin: 0; }
.premier-card p { color: rgba(255,255,255,.85); margin: 0; font-size: .98rem; line-height: 1.6; }
.premier-link a { color: #b6d27a; font-weight: 700; display: inline-block; transition: transform var(--t), color var(--t); }
.premier-link a:hover { transform: translateX(4px); color: #c8de98; }

.tdo-copy { position: relative; z-index: 1; }
.tdo-copy .wp-block-buttons { justify-content: center; margin-top: 1.4rem; }
.tdo-team { margin-top: clamp(2rem,4.5vw,3.25rem) !important; position: relative; z-index: 1; }
.tdo-team img { width: 100%; display: block; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

@media (max-width: 820px) {
  .premier-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .premier-col--offset { margin-top: 0; }
}

/* =============================================================================
   11. INTERIOR PAGES (Phase 2) — sub-page hero · prose · feature grid · steps ·
       team roster · FAQ accordion · Gravity-Forms embed
   ========================================================================== */

/* 11a. SUB-PAGE HERO (richer than the bare title used by page.html) ---------- */
/* The navy-gradient hero already styles .subpage-hero (§8). Enrich it so bespoke
   pages can add an eyebrow, a lead, and CTAs — all centered, above the glow. */
.subpage-hero { padding-block: clamp(3.5rem,8vw,6rem); }
.subpage-hero > * { position: relative; z-index: 1; }
.subpage-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(114,146,188,.20), transparent 70%); pointer-events: none; }
.subpage-hero .eyebrow { color: #b6d27a; justify-content: center; margin-bottom: .7rem; }  /* AA on navy */
.subpage-hero .subpage-title { letter-spacing: -.015em; }
.subpage-hero .subpage-sub { color: rgba(255,255,255,.86); max-width: 56ch; margin: 1rem auto 0; font-size: var(--wp--preset--font-size--large); }
.subpage-hero .wp-block-buttons { justify-content: center; margin-top: 1.5rem; }
.subpage-hero.has-rule .subpage-title::after { content: ""; display: block; width: 60px; height: 3px; margin: 1.15rem auto 0; background: var(--rule); border-radius: 3px; }

/* Photo cover hero variant — shorter than the homepage hero, same vignette/zoom feel. */
/* page-hero (About, Contact — single-image heroes) gets the SAME treatment as the home .hero:
   svh height, a de-blued/lightened cover dim, a neutral center scrim, the text forced above the
   overlay, and stronger shadows. The existing site uses single images here (no carousel), so no
   slider — just the photo + legibility polish. */
.page-hero { text-align: center; color: #fff; isolation: isolate; min-height: clamp(360px,52vh,520px); min-height: clamp(360px,52svh,520px); display: flex; }
.page-hero :is(h1,h2,h3) { color: #fff; }
.page-hero > .wp-block-cover__background { background-color: #070b14 !important; opacity: .14 !important; }  /* was 60% navy ink — de-blue + lighten */
.page-hero > .wp-block-cover__inner-container { margin: auto; position: relative; z-index: 3 !important; padding-block: clamp(3rem,7vh,5rem); display: grid; gap: 1rem; justify-items: center; }
.page-hero > .wp-block-cover__inner-container > * { margin-block: 0 !important; }
/* neutral center scrim (not navy) behind the centered text; z-index 1 stays below the text (z3) */
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(104% 86% at 50% 50%, rgba(4,8,16,.50) 0%, rgba(4,8,16,.28) 46%, rgba(4,8,16,0) 78%); }
.page-hero .wp-block-cover__image-background { animation: heroZoom 18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .page-hero .wp-block-cover__image-background { animation: none; } }
.page-hero .eyebrow { color: #fff; opacity: .92; justify-content: center; text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.page-hero .page-hero-title { margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45); letter-spacing: -.015em; }
.page-hero .page-hero-sub { max-width: 52ch; color: rgba(255,255,255,.92); font-size: var(--wp--preset--font-size--large); margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,.5); }

/* 11b. PROSE / long-form marketing copy ------------------------------------ */
.prose-narrow { max-width: 760px; margin-inline: auto; }
.prose-narrow > * { position: relative; z-index: 1; }
.lead, p.lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); line-height: 1.6; }
.section-navy .lead { color: rgba(255,255,255,.86); }

/* green-check benefit list (replaces plain bullets where appropriate) */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 2rem; line-height: 1.55; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--wp--preset--color--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6b20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.section-navy .check-list li::before { background-color: rgba(137,173,69,.2); }

/* 11c. FEATURE GRID (icon + heading + copy cards for interior value props) -- */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.1rem,2.4vw,1.9rem); position: relative; z-index: 1; }
.feature-grid > * { margin-block: 0 !important; }
.feature { background: #fff; border: 1px solid rgba(19,41,75,.08); border-radius: var(--radius); padding: clamp(1.5rem,2.6vw,2.1rem);
  box-shadow: var(--shadow-sm); display: grid; gap: .55rem; align-content: start; transition: transform var(--t), box-shadow var(--t); position: relative; overflow: clip; }
.feature > * { margin-block: 0 !important; }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.feature::before { content: ""; position: absolute; top: 0; left: 0; right: 100%; height: 4px; background: var(--rule); transition: right .35s var(--ease); }
.feature:hover::before { right: 0; }
.feature .feature-ico, .feature img { width: 52px; height: 52px; object-fit: contain; margin-bottom: .25rem; }
.feature h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.feature p { margin: 0; color: var(--wp--preset--color--muted); font-size: .98rem; line-height: 1.6; }
.section-navy .feature { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section-navy .feature h3 { color: #fff; }
.section-navy .feature p { color: rgba(255,255,255,.8); }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .feature-grid { grid-template-columns: 1fr; } }

/* 11d. NUMBERED STEPS (procedures / how-it-works) -------------------------- */
.steps { display: grid; gap: clamp(1.1rem,2.2vw,1.6rem); max-width: 820px; margin-inline: auto; counter-reset: step; position: relative; z-index: 1; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: start; background: #fff; border: 1px solid rgba(19,41,75,.08); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.2rem,2.2vw,1.6rem) clamp(1.3rem,2.4vw,1.8rem); }
.step > * { margin-block: 0 !important; }
.step::before { counter-increment: step; content: counter(step); flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-grad); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -10px rgba(26,61,109,.6); }
.step .step-body { display: grid; gap: .35rem; }
.step h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.step p { margin: 0; color: var(--wp--preset--color--muted); }

/* 11e. TEAM ROSTER (dense grid for About; feeds the team-member pages) ------ */
.team-grid.team-grid--all { max-width: 1180px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.7rem); margin-inline: auto; }
.team-grid--all .team-card { text-align: center; }
.team-grid--all .team-body { padding: 1.1rem 1rem 1.3rem; gap: .15rem; }
.team-grid--all .team-body h3 { font-size: 1.12rem; }
.team-grid--all .team-role { margin-bottom: .15rem; }
.team-grid--all .team-card img { aspect-ratio: 4/5; }
/* monogram avatar for a team member with no photo on file (e.g. blank.webp) */
.team-photo-mono { width: 100%; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; background: var(--navy-grad); color: #fff;
  text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.4rem,4vw,3.2rem); letter-spacing: .04em; transition: filter var(--t); }
.team-card:hover .team-photo-mono { filter: brightness(1.12); }
.team-photo-mono span { opacity: .92; }
/* role-group label between roster bands */
.roster-band { margin-top: clamp(2.25rem,4vw,3.25rem) !important; }
.roster-band:first-of-type { margin-top: 0 !important; }
.roster-label { text-align: center; margin-bottom: clamp(1.25rem,2.5vw,1.85rem) !important; }
@media (max-width: 1000px) { .team-grid.team-grid--all { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .team-grid.team-grid--all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .team-grid.team-grid--all { grid-template-columns: 1fr; max-width: 320px; } }

/* 11f. FAQ ACCORDION (native <details>/<summary>) -------------------------- */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: .8rem; position: relative; z-index: 1; }
.faq-item { background: #fff; border: 1px solid rgba(19,41,75,.1); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--t), border-color var(--t); }
.faq-item[open] { box-shadow: var(--shadow-md); border-color: rgba(137,173,69,.4); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem;
  font-family: var(--wp--preset--font-family--heading); font-size: 1.12rem; line-height: 1.35; color: var(--navy); font-weight: 500; transition: color var(--t); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--wp--preset--color--action); }
.faq-item > summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 11px; height: 11px;
  border-right: 2.5px solid var(--wp--preset--color--accent); border-bottom: 2.5px solid var(--wp--preset--color--accent);
  transform: rotate(45deg); transform-origin: 60% 60%; transition: transform var(--t); }
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-answer { padding: 0 1.3rem 1.25rem; color: var(--wp--preset--color--muted); }
.faq-answer > * { margin-block: 0 0 .75rem !important; }
.faq-answer > *:last-child { margin-bottom: 0 !important; }
/* FAQ items are white cards — keep their text dark even on a navy section (lesson 14) */
.section-navy .faq-item > summary { color: var(--navy); }
.section-navy .faq-item > summary:hover { color: var(--wp--preset--color--action); }
.section-navy .faq-answer, .section-navy .faq-answer :is(p,li) { color: var(--wp--preset--color--muted); }
.faq-item[open] .faq-answer { animation: faqIn .28s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-answer { animation: none; } }

/* 11g. GRAVITY-FORMS EMBED CARD (field styling lives in the gform-styles mu-plugin) */
.gform-wrap { max-width: 760px; margin-inline: auto; background: #fff; border: 1px solid rgba(19,41,75,.08);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.5rem,3.2vw,2.75rem); position: relative; z-index: 1; }
.gform-wrap .gform_wrapper { margin: 0; }
/* two-column contact layout: form card + a navy info panel */
.contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem,3vw,2.5rem); align-items: start; position: relative; z-index: 1; }
.contact-grid > * { margin-block: 0 !important; }
.contact-info { background: var(--navy-grad); color: #fff; border-radius: var(--radius); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow-md); display: grid; gap: 1.25rem; position: relative; overflow: hidden; }
.contact-info :is(h2,h3) { color: #fff; margin: 0; }
.contact-info p { color: rgba(255,255,255,.85); margin: 0; line-height: 1.6; }
.contact-info a { color: #fff; }
.contact-info .ci-item { display: grid; gap: .25rem; position: relative; z-index: 1; }
.contact-info .ci-label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* 11i. SERVICE / CATEGORY pages — icon medallion (works on any section bg) + quick-nav */
.cat-icon-badge { width: 78px; height: 78px; border-radius: 50%; background: var(--wp--preset--color--accent-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; box-shadow: var(--shadow-sm); }
.cat-icon-badge img { width: 42px; height: 42px; object-fit: contain; }
.section-head .cat-icon-badge { position: relative; z-index: 1; }
.svc-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.7rem,1.5vw,1.1rem); position: relative; z-index: 1; }
.svc-nav > * { margin-block: 0 !important; }
.svc-nav a { display: grid; gap: .55rem; justify-items: center; text-align: center; padding: 1.3rem .65rem; background: #fff; border: 1px solid rgba(19,41,75,.08); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--navy); font-family: var(--wp--preset--font-family--heading); font-size: .98rem; line-height: 1.25; transition: transform var(--t), box-shadow var(--t); }
.svc-nav a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc-nav .cat-icon-badge { width: 58px; height: 58px; margin: 0; }
.svc-nav .cat-icon-badge img { width: 32px; height: 32px; }
@media (max-width: 860px) { .svc-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .svc-nav { grid-template-columns: repeat(2, 1fr); } }
.cat-section .faq { margin-top: clamp(1.5rem,3vw,2.25rem); }
.cat-intro { max-width: 760px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.cat-intro p { margin: 0 auto 1rem; }  /* auto inline-margin so the 68ch-capped centered text stays centered */
.section-navy .cat-intro p { color: rgba(255,255,255,.85); }

/* 11j. SMILE GALLERY — responsive grid of before/after sliders + patient-story videos */
.smile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem,2vw,1.6rem); position: relative; z-index: 1; }
.smile-grid .ba { aspect-ratio: 5/4; }
.smile-grid .ba-handle { width: 38px; height: 38px; }
.smile-grid .ba-tag { font-size: .58rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1rem,2vw,1.6rem); position: relative; z-index: 1; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); background: #0a1430; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 11h. TEAM BIO CARDS — green-framed photo + "+" expand badge (modernized from the original
   site's team treatment) + the desktop bio modal. The "+" signals "click to read the full bio".
   On desktop the card opens a modal; on mobile/tablet (and with no JS) it follows the link to the
   person's dedicated page. Scoped to .team-card--bio so the homepage dentist cards are untouched. */
.team-card--bio { cursor: pointer; }
.team-card--bio .wp-block-image,
.team-card--bio .team-photo-mono {
  position: relative; margin: 14px 14px 0 !important; width: auto; border: 2px solid var(--wp--preset--color--accent);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--t), box-shadow var(--t);
}
.team-card--bio:hover .wp-block-image,
.team-card--bio:hover .team-photo-mono { border-color: #9cc257; box-shadow: 0 0 0 4px rgba(137,173,69,.18); }
/* the resting (un-zoomed) photo must already fill the frame — kill the inline <a> baseline gap
   below the image (line-box strut) that left a white sliver until the hover-zoom covered it */
.team-card .wp-block-image, .svc-card .wp-block-image,
.team-card .wp-block-image a, .svc-card .wp-block-image a { display: block; line-height: 0; font-size: 0; }
.team-card img, .svc-card img { vertical-align: bottom; }
/* the "+" expand badge, inside the photo's bottom-right corner (as on the original) */
.team-card--bio .wp-block-image::after,
.team-card--bio .team-photo-mono::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; z-index: 4;
  background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 6px 16px rgba(13,33,74,.4); transition: transform .28s var(--ease), background var(--t); pointer-events: none;
}
.team-card--bio:hover .wp-block-image::after,
.team-card--bio:hover .team-photo-mono::after { transform: scale(1.12) rotate(90deg); background-color: #98bd4f; }

/* 11k. TEAM-MEMBER BIO pages (Phase 3) — framed portrait + prose */
.bio-grid { gap: clamp(2rem,5vw,3.5rem) !important; align-items: start; }
.bio-grid .framed-img.bio-photo img { aspect-ratio: 4/5; object-position: top center; }
.bio-mono { aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; background: var(--navy-grad); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: clamp(3rem,7vw,4.5rem); position: relative; z-index: 1; }
.bio-body > p { margin: 0 0 1.05rem; }
.bio-body > p:last-of-type { margin-bottom: 0; }
.bio-body .svc-link { margin-top: 1.4rem !important; }
@media (max-width: 781px) { .bio-grid .wp-block-column:first-child { max-width: 360px; margin-inline: auto; margin-bottom: 1.75rem; } }

/* desktop bio modal */
.bio-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.bio-modal.is-open { display: block; }
.bio-modal__scrim { position: absolute; inset: 0; background: rgba(8,17,38,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: bioFade .2s ease; }
.bio-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; overflow: hidden; animation: bioIn .26s var(--ease) both; }
@keyframes bioFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bioIn { from { opacity: 0; transform: translate(-50%,-46%) scale(.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .bio-modal__scrim, .bio-modal__panel { animation: none; } }
.bio-modal__media { position: relative; background: var(--navy-grad); min-height: 260px; }
.bio-modal__media-inner, .bio-modal__media-inner img, .bio-modal__mono { width: 100%; height: 100%; }
.bio-modal__media-inner img { object-fit: cover; display: block; }
.bio-modal__mono { display: flex; align-items: center; justify-content: center; background: var(--navy-grad); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.6rem,5vw,3.6rem); min-height: 260px; }
.bio-modal__close { position: absolute; top: 12px; right: 12px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--t), background var(--t); }
.bio-modal__close:hover { transform: rotate(90deg); background: #fff; }
.bio-modal__body { padding: clamp(1.6rem,3vw,2.5rem); }
.bio-modal__role { font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--wp--preset--color--action); margin: 0 0 .25rem; }
.bio-modal__name { font-family: var(--wp--preset--font-family--heading); color: var(--navy); margin: 0 0 1rem; font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; }
.bio-modal__text p { color: var(--wp--preset--color--muted); margin: 0 0 .9rem; line-height: 1.7; }
.bio-modal__text p:last-child { margin-bottom: 0; }
.bio-modal__cta { margin: 1.25rem 0 0; }
.bio-modal__cta a { font-weight: 700; color: var(--wp--preset--color--action); }
@media (max-width: 600px) { .bio-modal__panel { flex-direction: column; } .bio-modal__media { flex: 0 0 auto; max-height: 220px; } }

/* =============================================================================
   12. BLOG / ARTICLE — single-post reading layout + on-brand image treatments
   (Phase 3c: 135 legacy posts converted to core blocks; rendered via single.html)
   ========================================================================== */
/* 12a. hero — category eyebrow + serif title + "By Editorial Team · date" meta */
.single-hero .single-cat { margin-bottom: .7rem !important; }
.single-hero .single-cat,
.single-hero .single-cat a { color: #b6d27a; text-decoration: none; }        /* AA green on navy */
.single-hero .single-cat a:hover { color: #c8df96; text-decoration: underline; }
.single-hero .single-meta { margin-top: 1.05rem !important; align-items: baseline; column-gap: .2rem !important; row-gap: .1rem !important; }
.single-hero .single-meta > * { margin: 0 !important; color: rgba(255,255,255,.74); font-size: .9rem; }
.single-hero .single-byline { color: #fff; font-weight: 600; }
.single-hero .single-byline::before { content: "By "; color: rgba(255,255,255,.74); font-weight: 400; }
.single-hero .single-meta .single-date::before { content: "·"; margin: 0 .55rem 0 .4rem; color: rgba(255,255,255,.5); }

/* 12b. featured image — wide, rounded, shadowed (override the §1 margin-block:0 !important) */
.single-article .wp-block-post-featured-image {
  margin: 0 auto clamp(1.9rem,4vw,3rem) !important; max-width: 1100px; position: relative; z-index: 2;
}
.single-article .wp-block-post-featured-image img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; width: 100%; height: auto;
}

/* 12c. body rhythm — comfortable measure, serif headings with a brand tick, lead paragraph */
.single-article .wp-block-post-content { font-size: 1.05rem; }
.single-article .entry-content :is(h2,h3,h4) { line-height: 1.22; margin-top: 2.1em !important; margin-bottom: .35em !important; }
.single-article .entry-content h2 { font-size: var(--wp--preset--font-size--x-large); }
.single-article .entry-content h2::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--rule); margin-bottom: .9rem;
}
.single-article .entry-content h3 { font-size: var(--wp--preset--font-size--large); color: var(--navy); }
.single-article .entry-content h4 { font-size: 1.18rem; color: var(--navy); }
.single-article .wp-block-post-content > p:first-of-type {
  font-size: var(--wp--preset--font-size--large); line-height: 1.66; color: var(--ink);
}
.single-article .entry-content p { line-height: 1.75; }

/* 12d. lists — green markers, breathing room */
.single-article .entry-content :is(ul,ol) { max-width: 68ch; padding-left: 1.35rem; margin: 1.1rem 0; display: grid; gap: .55rem; }
.single-article .entry-content :is(ul,ol) :is(ul,ol) { margin: .55rem 0 0; }
.single-article .entry-content li { line-height: 1.65; padding-left: .2rem; }
.single-article .entry-content li::marker { color: var(--wp--preset--color--action); font-weight: 700; }

/* 12e. IMAGE TREATMENTS — rounded, soft-shadowed, gentle hover-zoom (matches the site's cards/gallery) */
.single-article .entry-content .wp-block-image { margin: 1.7rem 0; overflow: hidden; border-radius: var(--radius);
  box-shadow: var(--shadow-md); background: #e9eef5; width: -moz-fit-content; width: fit-content; }
.single-article .entry-content .wp-block-image img { display: block; width: 100%; height: auto; transition: transform .55s var(--ease); }
.single-article .entry-content .wp-block-image:hover img { transform: scale(1.04); }
.single-article .entry-content .wp-block-image figcaption { font-size: .85rem; color: var(--wp--preset--color--muted); text-align: center; padding: .55rem .8rem; margin: 0; background: #fff; }
/* floats: cap size, give text room to wrap; un-float on small screens */
.single-article .entry-content .wp-block-image.alignleft  { float: left;  max-width: min(44%,340px); margin: .5rem 1.9rem 1.3rem 0; }
.single-article .entry-content .wp-block-image.alignright { float: right; max-width: min(44%,340px); margin: .5rem 0 1.3rem 1.9rem; }
.single-article .entry-content .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .single-article .entry-content .wp-block-image.alignleft,
  .single-article .entry-content .wp-block-image.alignright { float: none; max-width: 100%; margin: 1.5rem auto; }
}

/* 12f. blockquote, separator, back-link, CTA */
.single-article .entry-content .wp-block-quote {
  border-left: 4px solid var(--wp--preset--color--accent); margin: 1.9rem 0; padding: .3rem 0 .3rem 1.5rem;
  font-family: var(--wp--preset--font-family--heading); font-style: italic; font-size: 1.18rem; color: var(--ink); }
.single-article .entry-content .wp-block-separator { max-width: 120px; margin: 2.4rem auto; border-color: rgba(19,41,75,.18); }
.single-back { margin-top: clamp(2.5rem,5vw,3.5rem) !important; }
.single-back a { font-weight: 600; }
.single-cta .single-cta-sub { color: var(--wp--preset--color--muted); margin-top: .5rem; }

/* =============================================================================
   13. CLIENT REVISIONS — "after Divi removal 6/18" · GENERAL pass (CSS layer)
   Navy-anchored rebalance: green section headers on navy, green expandable bars,
   light-blue closing CTA, bolder icon medallions, consistent ALL-CAPS buttons/
   expandables. Every fg/bg pair WCAG-verified (dark field → light text, light
   field → dark text). Section-rhythm / alignment / first-sentence de-dupe are
   content-level and handled in Phase 2 (page HTML), not here.
   ========================================================================== */

/* 13a. GREEN SECTION HEADERS on navy CONTENT sections. Scoped to .section-head
   (only ever a section title), so the hero title and any heading inside a white
   card are deliberately untouched — they'd fail contrast in green. #a9cc5f clears
   AA-normal even on the lightest navy-gradient stop (#214a82 → 4.85:1). */
.section-navy .section-head :is(h1,h2,h3) { color: #a9cc5f; }

/* 13b. EXPANDABLE (FAQ) BARS: white card → green button-bar w/ white label+caret.
   Card body stays white so the OPEN answer keeps dark-on-light legibility.
   White on the #5b7d2c→#4a6b20 green = 4.76–6.15:1 (AA). Uppercase here also makes
   casing consistent regardless of the content (fixes "ROOT CANALS" vs "Crowns"). */
.faq-item > summary {
  background: linear-gradient(180deg, #5b7d2c, #4a6b20); color: #fff;
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; font-weight: 700;
}
.faq-item > summary:hover { color: #fff; background: linear-gradient(180deg, #688c31, #547a25); }
.faq-item[open] > summary { background: linear-gradient(180deg, #4a6b20, #3f5b1b); }
.faq-item > summary::after { border-right-color: #fff; border-bottom-color: #fff; }
/* override the §11f navy-section rule that forced the (then-white) bar's text navy */
.section-navy .faq-item > summary,
.section-navy .faq-item > summary:hover { color: #fff; }

/* 13c. CLOSING CTA BAND → light-blue field, so the navy content above and the navy
   footer below are visually separated (was navy-on-navy). The cover overlay was
   solid brand-navy (has-background-dim-100); repaint it and flip text to dark. */
.cta-band .wp-block-cover__background {
  background: linear-gradient(165deg, #dbe8f7 0%, #c4d8ee 100%) !important; opacity: 1 !important;
}
.cta-band::before { background: var(--rule); }                 /* keep the green top hairline accent */
.cta-band::after  { background: radial-gradient(circle, rgba(255,255,255,.55), transparent 68%); } /* soft light bloom, not the green glow */
.cta-band :is(h1,h2,h3) { color: var(--ink); }                  /* 10.8:1 on the field (AAA) */
.cta-band p { color: #2c3e5e; }                                 /* 7.4–8.5:1 (AAA) */
.cta-band .eyebrow { color: #3d5719; }                          /* deepened so the small bold label clears AA */
/* ghost "Call …" button: navy outline on the light field (was white-on-navy) */
.cta-band .btn-ghost .wp-block-button__link,
.cta-band .is-style-ghost .wp-block-button__link { color: var(--navy); border-color: rgba(26,61,109,.45); }
.cta-band .btn-ghost .wp-block-button__link:hover,
.cta-band .is-style-ghost .wp-block-button__link:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 13d. ALL-CAPS BUTTONS everywhere — consistency no longer depends on content casing. */
.wp-element-button { text-transform: uppercase; letter-spacing: .04em; }

/* 13e. BOLDER ICON MEDALLIONS — white disc + green ring + shadow. The icons are
   two-tone (#88ac45 green + #7292bc blue) line art; the old pale-green badge hid
   the green strokes. White lets BOTH colors read; the green ring adds prominence. */
.cat-icon-badge {
  background: #fff; width: 84px; height: 84px;
  box-shadow: 0 0 0 2px var(--wp--preset--color--accent) inset, var(--shadow-sm);
}
.cat-icon-badge img { width: 46px; height: 46px; }
.svc-nav .cat-icon-badge {
  width: 64px; height: 64px;
  box-shadow: 0 0 0 2px var(--wp--preset--color--accent) inset, var(--shadow-sm);
}
.svc-nav .cat-icon-badge img { width: 36px; height: 36px; }

/* =============================================================================
   14. BACK-TO-TOP FAB (mobile only) — fades in after ~1.25 viewports of scroll.
   Navy disc + accent-green chevron (#a9cc5f on navy = 5.95:1). Desktop relies on
   the sticky header instead, so the FAB is display:none above 768px. Sits below
   the mobile-menu scrim (z-1000) so it never overlaps the open menu.
   ========================================================================== */
.to-top {
  display: none; position: fixed; z-index: 90;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--navy-grad); color: #a9cc5f;
  box-shadow: 0 10px 26px -8px rgba(13,33,74,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t), color var(--t);
}
.to-top:hover { background: var(--ink); color: #b6d27a; }
.to-top:focus-visible { outline: none; box-shadow: 0 10px 26px -8px rgba(13,33,74,.55), var(--ring); }
@media (max-width: 768px) {
  .to-top { display: inline-flex; }
  .to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity var(--t), visibility var(--t), background var(--t); transform: none; }
}

/* =============================================================================
   15. CLIENT REVISIONS round 2 — image framing + contact-panel legibility
   ========================================================================== */
/* Dental Implants: the dentists' photo was cropping the tops of their heads —
   anchor the cover-crop to the top so both faces stay in frame. */
/* Dentists portrait (Keith+Denson, page 15) is a tall 2:3 shot in a 4:3 frame — anchoring to the
   very top left their faces sitting low under a ceiling of equipment. Pull the window down so the
   faces sit centered-upper with safe headroom (verified against the source crop). */
.framed-img.crop-top img { object-position: center 30%; }
/* Request Appointment hero: lift the focal point so the front-desk team's heads
   aren't cut off at the top of the banner. */
.appt-hero .wp-block-cover__image-background { object-position: center 22%; }
/* Contact panel: the info under each label read too dim — brighten it (links in
   AA-green on navy, plain text near-white). Labels were already fine.
   !important: the section link rule (.section-surface/.section-cream a:not(...)) is more
   specific and was overriding this to dark green (#4a6b20 → ~1.4:1 on navy, near-invisible —
   the client's "not bright enough green" note). The navy card's links must always be light. */
.contact-info a { color: #b6d27a !important; }
.contact-info a:hover { color: #c8de98 !important; }
.contact-info p { color: rgba(255,255,255,.92); }

/* Home 4-item bar: a cooler (non-cream) field + whole item clickable (stretched link). */
.trust-strip { background: var(--surface-2); }
.trust-label a { color: inherit; text-decoration: none; }
.trust-label a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.trust-item:hover .trust-label { color: var(--wp--preset--color--action); }

/* =============================================================================
   16. CLIENT REVISIONS round 3 — hero slider · green sub-headers on navy
   ========================================================================== */
/* Home hero: restore the rotating slider (CSS-only crossfade across 3 brand
   photos). Sits behind the cover overlay + content. */
.hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; animation: heroFade 21s ease-in-out infinite; will-change: opacity; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }
@keyframes heroFade { 0%,33.33%{opacity:1} 38%,95%{opacity:0} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:not(:first-child) { display: none; }
  .hero-slide:first-child { opacity: 1; }
}

/* Green sub-headers on navy: broadened beyond section titles to the prose/feature
   contexts (e.g. the technology page's per-device headings, navy prose sections).
   Scoped to prose containers only, so headings inside white cards are untouched.
   #a9cc5f clears AA on the lightest navy. */
.section-navy :is(.why-grid, .prose-narrow, .media-prose, .cat-intro) :is(h2,h3,h4) { color: #a9cc5f; }

/* =============================================================================
   17. "TREATMENT INFORMATION" (blog index) — navy listing so the white cards pop,
   distinct title vs. blurb color, clean 3-up grid (no stretched bottom row).
   ========================================================================== */
.post-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
/* white post-cards now sit on a navy section — keep their on-card text dark (the
   section-navy heading/paragraph rules would otherwise turn them white). */
.section-navy .post-card h2 a, .post-card-body h2 a { color: var(--navy); }
.section-navy .post-card h2 a:hover { color: var(--wp--preset--color--action); }
/* The blog index is .section-navy, so .section-navy p (§"section-navy p", ~l296)
   directly colors the excerpt's inner <p class="wp-block-post-excerpt__excerpt">
   WHITE → white-on-white blurb (invisible). Coloring only the container div lets
   that direct rule win by the cascade (inherited value loses to a direct selector).
   Target the inner excerpt paragraph explicitly so the blurb stays muted-slate and
   clearly distinct from the navy title (.post-card h2 a, l1044). */
.section-navy .post-card .wp-block-post-excerpt,
.section-navy .post-card .wp-block-post-excerpt p,
.section-navy .post-card .wp-block-post-excerpt__excerpt,
.post-card .wp-block-post-excerpt,
.post-card .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); font-size: .95rem; line-height: 1.6; }
/* the intro + pagination/no-results sit directly on navy → keep them light. */
.section-navy p.is-lead, .section-navy .is-lead { color: rgba(255,255,255,.88); }
.section-navy .wp-block-query-pagination a,
.section-navy .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers,
.section-navy .wp-block-query-no-results, .section-navy .wp-block-query-no-results p { color: rgba(255,255,255,.9); }
.section-navy .wp-block-query-pagination a:hover { color: var(--wp--preset--color--accent); }

/* =============================================================================
   18. ALIGNMENT — body copy flush-left to match the headings on content pages.
   Client feedback (6/18): "Previously the body copy was the same left-alignment of
   the header/sub-header, which looks better." WordPress's constrained layout gives
   every child margin-inline:auto; combined with the 68ch measure cap on paragraphs
   (§1, line ~59) that centered the paragraph BOX, pushing copy ~58px right of the
   full-width headings & bullet lists so it read as a stray indent. Pin the measure
   flush-left inside the service/detail-page prose column. The deliberate centered
   section-intros on the category/overview pages use .cat-intro / .section-head and
   are intentionally left untouched (a section-header pattern, not body copy). */
.prose-narrow > :where(p, ul, ol, h2, h3, h4, h5, blockquote):not(.has-text-align-center) {
  margin-inline: 0 !important;   /* beat WP core's .is-layout-constrained auto-margin (!important) */
  text-align: left;
}
.prose-narrow > :where(p):not(.has-text-align-center) { max-width: none; }
/* list headings shouldn't hug their lists — .check-list zeroes its own margins, so a
   top-level check-list in body prose gets no gap under its heading. Restore the rhythm. */
.prose-narrow > ul.check-list, .prose-narrow > ol.check-list { margin-block: 1.4rem; }

/* Home is the ONLY page that still centers multi-paragraph reading body — the
   "Welcome" and "Top Dental Office" sections. Every interior page is already
   flush-left, so bring these into line for one consistent site-wide standard
   (daylight-web-design: center only short text; left-align long-form body for a
   stable left edge + readability). KEPT centered: the "Welcome" script accent,
   section eyebrows/headings, the CTA button, testimonials, premier cards, trust
   labels. (margin-inline:0 beats §1's centered-box auto-margin so the copy sits
   flush with — not indented from — the column edge.) */
.welcome-section > p:not(.script-accent),
.tdo-copy > p {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: none;
}

/* =============================================================================
   20. HOME HERO — de-blue the photo + a real slider (preloaded, with controls).
   Client (6/18): "It's also got a blue shade over it, which it didn't previously."
   The cover dim was 40% navy (ink) + a navy vignette → a heavy blue cast. Drop the
   flat dim to a whisper of NEUTRAL near-black so the photo reads bright and true;
   legibility now comes from the neutral center scrim (.hero::after) + text shadows.
   ========================================================================== */
.hero > .wp-block-cover__background { background-color: #070b14 !important; opacity: .12 !important; }
.hero-sub, .hero .script-accent, .hero-eyebrow { text-shadow: 0 1px 16px rgba(0,0,0,.5); }

/* Slider: once nav.js has preloaded every image it adds .is-js and drives the crossfade
   itself (smooth from the first cycle, no pop-in) — and .is-ready a frame later so the very
   first slide shows instantly without a fade-from-blank. CSS keyframe (§ above) is the
   no-JS fallback. */
.hero-slider.is-js .hero-slide { animation: none; opacity: 0; }
.hero-slider.is-js.is-ready .hero-slide { transition: opacity .9s var(--ease); }
.hero-slider.is-js .hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slider.is-js .hero-slide { transition: none; } }

/* prev/next arrows + dots (injected by nav.js, appended to .hero so they stay accessible). */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer; border-radius: 50%;
  background: rgba(8,16,34,.34); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .9;
  transition: background var(--t), opacity var(--t), transform var(--t); }
.hero-arrow:hover { background: rgba(8,16,34,.62); opacity: 1; }
.hero-arrow:active { transform: translateY(-50%) scale(.94); }
.hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow--prev { left: clamp(.55rem, 2.5vw, 1.9rem); }
.hero-arrow--next { right: clamp(.55rem, 2.5vw, 1.9rem); }
.hero-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; display: flex; gap: 0; margin: 0; }
/* 10px visible dot, but a ~36px transparent hit area (padding + content-box clip) so the tap
   target clears the 44px-ish accessibility guidance even though the dot reads small. */
.hero-dot { width: 10px; height: 10px; padding: 13px; box-sizing: content-box; background-clip: content-box;
  border: 0; border-radius: 50%; cursor: pointer; background-color: rgba(255,255,255,.5); transition: background-color var(--t), transform var(--t); }
.hero-dot.is-active { background-color: #fff; transform: scale(1.3); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
/* Mobile: arrows meet the 44px minimum tap target (per current touch-accessibility guidance). */
@media (max-width: 600px) { .hero-arrow { width: 44px; height: 44px; } .hero-arrow svg { width: 20px; height: 20px; } }


/* ============================================================================
   2026-06-24 — Holt Creative QA round 2 fixes
   ========================================================================== */
/* About Us bio modal: long dentist bios stretched the photo column to the full
   text height (a giant zoomed crop). Cap the panel and let the BODY scroll
   internally so the photo stays a sane portrait height. Desktop only — the
   mobile single-column layout keeps its own scroll. */
/* Panel is now a flex row (desktop) / column (mobile). The body scrolls inside the fixed-height
   panel — `min-height:0` is the canonical flex fix that lets it shrink below content and scroll
   (the old grid layout let the body grow taller than the panel and clipped its last lines). The
   photo column stretches to the panel height; nothing overflows past the panel. */
.bio-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (min-width: 601px) { .bio-modal__media { flex: 0 0 40%; } }
/* headshots are portraits — anchoring to the very top showed foreheads; drop to the face */
.bio-modal__media-inner img { object-position: center 28%; }

/* Smile Gallery "Patient Stories": the stacked paragraphs sit in a section-head,
   which zeroes their margins. Restore spacing so they aren't cramped. */
#stories .section-head p + p { margin-top: 1.1rem; }

/* Our Technology + Routine Cleanings: bold the lead/summary line under each technology / X-ray name. */
.page-id-16 p.is-lead, .page-id-16 .is-lead p,
.page-id-335 p.is-lead, .page-id-335 .is-lead p { font-weight: 600; }

/* Technology page: clickable thumbnail "jump row" under the hero — each photo links to its
   section (client: "icons/images for each technology across the top, clickable"). */
.tech-jump-section { padding-bottom: clamp(2rem, 4vw, 3rem); }   /* compact band — no cavern under the icons */
.tech-jump { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.9rem, 2vw, 1.7rem); max-width: 980px; margin-inline: auto; }
.tech-jump a { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; text-decoration: none; color: #fff; font-weight: 600; }
.tech-jump__img { width: clamp(76px, 9vw, 106px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-md); border: 3px solid rgba(255,255,255,.85); }
.tech-jump__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.tech-jump a:hover .tech-jump__img img { transform: scale(1.08); }
.tech-jump a:hover .tech-jump__label { color: #b6d27a; }
.tech-jump__label { font-size: .9rem; line-height: 1.3; }
.section[id^="tech-"] { scroll-margin-top: 96px; }   /* so the sticky header doesn't cover a jumped-to section */
@media (max-width: 680px) { .tech-jump { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================================
   2026-06-29 — Holt Creative mobile revisions (staging). Mobile-only where noted;
   desktop left as Jaclyn approved.
   ========================================================================== */

/* (6) iOS Safari auto-inflates long text blocks: the accordion answers (Sedation
   "Types of Sedation" / FAQ) rendered much larger than designed on iPhone, while
   Chrome showed them at the correct 16px. Pin text to the designed scale so iOS
   stops boosting it. (Affects iOS only; no change on desktop.) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* (4) Hero eyebrow: on mobile the long eyebrow ("Lindale, Texas · …") wraps to two
   lines and the green rule (::before) sat to the LEFT of the block. Stack the rule
   centered above the text. */
@media (max-width: 768px) {
  .hero .eyebrow { flex-direction: column; align-items: center; gap: .5rem; }
}

/* (2) Mobile menu Office Hours: "8 am – 5 pm" overflowed the card on narrow phones
   (days + time both nowrap, the row couldn't wrap). Let the row wrap and drop the
   decorative dashed leader on small screens. */
@media (max-width: 540px) {
  .m-menu__hours-rows .row { flex-wrap: wrap; row-gap: .1rem; }
  .m-menu__hours-rows .lead { display: none; }
  .m-menu__hours-rows .days { white-space: normal; }
  .m-menu__hours-rows .time { margin-left: auto; }
}

/* (9/10) Service-card icons (Cosmetic / Dental Hygiene boxes): the .svc-card photo
   rule (aspect-ratio:16/11; object-fit:cover, §6) was cropping the square brand
   icons inside figure.svc-icon top/bottom. Show them whole. */
.svc-card .svc-icon img { aspect-ratio: 1 / 1; object-fit: contain; }

/* (3/5/8/12) MOBILE-ONLY body-copy alignment: left-align the long-form body copy on
   the pages the client flagged (About / Dental Services / Dental Implants / Smile
   Gallery). Desktop stays centered as approved. Eyebrows + section-head titles +
   the deliberate overview intros keep their alignment. */
@media (max-width: 768px) {
  .page-id-13 .prose-narrow > p,
  .page-id-14 .cat-intro p,
  .page-id-15 .cat-intro p,
  .page-id-18 #stories .section-head p:not(.eyebrow) { text-align: left; }
}

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home header: brand-true colors + icons + mobile addr
   Restores the approved two-tone header: light-blue (#7292BC / --steel) utility
   strip with NAVY (#1A3D6D / --navy) text + brand icons; address+hours LEFT,
   phone RIGHT. Navy menu bar unchanged. Mobile: slim light-blue strip shows the
   tappable address (→ driving directions); the header Call button becomes a solid
   brand-green pill. HARD RULE: never green on the light-blue strip (same tone,
   no contrast — it clashes).
   ========================================================================== */
/* lighter tint of the #7292BC steel (non-brand web color) → navy text ~5.8:1 for senior readability */
.util-strip { background: var(--light-blue); color: var(--navy); }
.util-strip a { color: var(--navy); }
.util-item.util-phone a { color: var(--navy); font-weight: 700; }
.util-strip a:hover { text-decoration: underline; text-underline-offset: 2px; }
.util-strip .util-item { font-size: .9rem; font-weight: 600; letter-spacing: .005em; display: inline-flex; align-items: center; gap: .42rem; }
.util-strip .util-item a { display: inline-flex; align-items: center; gap: .42rem; }
.util-ico { display: inline-flex; align-items: center; line-height: 0; color: var(--navy); }
.util-ico svg { width: 15px; height: 15px; display: block; }
/* address + hours LEFT · phone hard RIGHT */
.site-header .util-inner { justify-content: flex-start; gap: clamp(.9rem, 2.2vw, 1.8rem); }
.site-header .util-inner .util-item.util-phone { margin-left: auto; }

/* Green button = tactile "press": a defined drop-shadow at rest (no green glow) so
   it reads as a raised button on the navy bar; on hover/press the shadow lifts away
   and it sinks 1px, so it looks pressed in. (Desktop "Request Appointment".) */
.header-ctas .btn-book .wp-block-button__link {
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.45);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.header-ctas .btn-book .wp-block-button__link:hover,
.header-ctas .btn-book .wp-block-button__link:active {
  box-shadow: none; transform: translateY(1px); background: var(--wp--preset--color--accent);
}

@media (max-width: 768px) {
  /* show the slim light-blue strip again — just the tappable address (directions) */
  .util-strip { display: block; padding-block: 6px; }
  .site-header .util-inner { justify-content: center; gap: 0; }
  .util-strip .util-item.util-hours,
  .util-strip .util-item.util-phone { display: none; }
  .util-strip .util-item.util-addr { margin: 0 auto; font-size: .82rem; text-align: center; }
  .util-strip .util-item.util-addr a { font-weight: 700; }
  /* Call button → solid brand-green pill on the navy bar (green on navy = strong contrast) */
  .header-ctas .btn-call.is-style-outline .wp-block-button__link {
    background: var(--wp--preset--color--accent); color: var(--navy);
    border-color: transparent; font-weight: 700;
    box-shadow: 0 8px 18px -6px rgba(0,0,0,.45);   /* drop shadow at rest — no green glow */
    transition: transform var(--t), box-shadow var(--t), background var(--t);
  }
  .header-ctas .btn-call.is-style-outline .wp-block-button__link:hover,
  .header-ctas .btn-call.is-style-outline .wp-block-button__link:active {
    background: var(--wp--preset--color--accent); color: var(--navy); border-color: transparent;
    box-shadow: none; transform: translateY(1px);   /* shadow gone + 1px sink = pressed */
  }
}

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home HERO: primary CTA back to steel-blue (never
   green in the hero, per Andrea), white bold text, same tactile "press" as the
   green buttons (raised drop-shadow at rest → sinks flat on hover/press).
   ========================================================================== */
.hero-ctas .wp-block-button:not(.btn-ghost) .wp-block-button__link {
  background: var(--wp--preset--color--steel); color: #fff; font-weight: 700;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.5);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.hero-ctas .wp-block-button:not(.btn-ghost) .wp-block-button__link:hover,
.hero-ctas .wp-block-button:not(.btn-ghost) .wp-block-button__link:active {
  background: var(--wp--preset--color--steel); box-shadow: none; transform: translateY(1px);
}
/* hero script line "(Especially if…)" bumped +6pt (≈0.5rem) over original per Andrea —
   shifts the whole responsive range up so it grows evenly on every screen. */
.hero .script-accent { font-size: clamp(2.2rem, calc(4.6vw + 0.5rem), 3rem); }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home WELCOME section: "Welcome" back to brand green +
   much larger; body copy re-centered and narrowed to 70% (an earlier rule had
   forced these paragraphs left-aligned + full width). Navy gradient bg kept.
   ========================================================================== */
.welcome-section .script-welcome {
  color: var(--wp--preset--color--accent);   /* brand green — was forced white by .section-navy p */
  font-size: clamp(3rem, 8vw, 6rem);          /* much larger (was 2.7–4rem) */
}
.welcome-section > p:not(.script-accent) {
  text-align: center !important;              /* re-center (earlier rule forced these left) */
  margin-inline: auto !important;
  max-width: 70% !important;                   /* narrow the measure to 70% of the column */
}

/* =============================================================================
   ANDREA REV — 2026-07-01 · shared "adjusted light blue" token (the lightened
   steel from the header top strip), now also the Premier-Services section bg.
   ========================================================================== */
:root { --light-blue: #a9c3e2; }
.services-section { background: var(--light-blue); }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Divider consistency + Premier eyebrow on light blue.
   Standardize dividers on the section-head "has-rule" style (60×3, rounded):
   Welcome (navy panel) keeps it GREEN; Premier (light-blue panel) → NAVY.
   Premier eyebrow "ALL UNDER ONE ROOF": drop the green dash + recolor to navy
   (green / dark-green clashes on the light-blue panel).
   ========================================================================== */
.welcome-section .has-center-rule::after { width: 60px; height: 3px; background: var(--rule); }
.services-section .section-head.has-rule > :is(h1,h2,h3)::after { background: var(--navy); }
.services-section .eyebrow { color: var(--navy); }
.services-section .eyebrow::before { display: none; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home "Top Dental Office" section:
   drop the eyebrow dash · let the heading sit on one line (lift the width cap;
   still wraps on mobile) · widen the team image +80px (1200 → 1280), centered.
   ========================================================================== */
.tdo-section .eyebrow::before { display: none; }
.tdo-section .section-head { max-width: none; }
.tdo-team { max-width: 1280px !important; margin-inline: auto; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home "Meet Our Dentists" section → navy panel (blends
   with the Top Dental Office section above; fewer color "bands"). Heading in the
   script font (green, like Welcome); cards light-blue with all-navy text; the
   green photo frame goes from 2px → 4px.
   ========================================================================== */
.team-section .section-head h2 {
  font-family: var(--wp--preset--font-family--script);
  color: var(--wp--preset--color--accent);
  font-size: clamp(3rem, 6.5vw, 4.5rem);   /* larger script heading, per Andrea */
}
.team-section .team-card--bio .team-body h3 { font-size: clamp(1.45rem, 2vw, 1.75rem) !important; }  /* bigger dentist names (beats WP preset !important) */
.team-section .team-card--bio { background: var(--light-blue); }
.team-section .team-card--bio :is(h1,h2,h3,h4),
.team-section .team-card--bio p,
.team-section .team-card--bio .team-role,
.team-section .team-card--bio .svc-link a { color: var(--navy) !important; }
.team-card--bio .wp-block-image,
.team-card--bio .team-photo-mono { border-width: 4px; }
/* merged office + dentists = one navy panel (one continuous gradient, no stripe);
   give the dentists half breathing room from the team photo above it */
.tdo-section .team-section { margin-top: clamp(2.75rem, 5.5vw, 5rem); }

/* office tour ("A look inside"): drop the eyebrow dash, per Andrea */
.office-section .eyebrow::before { display: none; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home testimonials → light-blue panel; eyebrow navy +
   no dash; divider navy; ★ ratings removed (we can't presume the quote authors
   would give 5 stars — avoids reading as dishonest). Rotation kept as-is.
   ========================================================================== */
.testi-section { background: var(--light-blue); }
.testi-section .eyebrow { color: var(--navy); }
.testi-section .eyebrow::before { display: none; }
.testi-section .section-head.has-rule > :is(h1,h2,h3)::after { background: var(--navy); }
.testi-section .testi-stars { display: none; }

/* Smile Transformations ("See the results"): drop the eyebrow dash, per Andrea */
.gallery-section .eyebrow::before { display: none; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home numbers/stats band: section → our light blue
   (green was too bright); each number sits on its own floating navy (dark-blue)
   card with a soft shadow + white text; numbers in the sans-serif (Acumin Pro).
   ========================================================================== */
.stats-band.section-surface { background: var(--light-blue); }
.stats-band .stats-grid { align-items: stretch; }
.stats-band .stat {
  background: var(--navy); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.9rem, 2vw, 1.5rem);
  box-shadow: 0 18px 40px -16px rgba(13,33,74,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.stats-band .stat-num { font-family: var(--wp--preset--font-family--body); font-weight: 700; color: #fff; }
.stats-band .stat-num .u { color: #fff; }
.stats-band .stat-label { color: rgba(255,255,255,.82); }

/* =============================================================================
   ANDREA REV — 2026-07-01 · Home closing CTA: light-blue field; two buttons like
   the live design — navy SOLID "Call" (phone icon) + OUTLINED "Explore Our
   Services" (navy outline reads best on light blue). Green top hairline dropped
   (green on light blue clashes).
   ========================================================================== */
.cta-band .wp-block-cover__background { background: var(--light-blue) !important; }
/* navy divider between the numbers band and the CTA (both light blue → they'd
   otherwise blend). Navy, not green — green on light blue clashes. */
.cta-band::before { display: block; background: var(--navy); height: 4px; }
.cta-band .cta-call .wp-block-button__link {
  background: var(--navy); color: #fff; border: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.cta-band .cta-call .wp-block-button__link:hover { background: var(--ink); color: #fff; }
.cta-band .cta-call .cta-ico { display: inline-flex; line-height: 0; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · About Us page: hero eyebrow dash gone; "Our Story"
   section below the hero → navy gradient panel (class swap), its eyebrow dash
   gone, and "Top Lindale Office" heading → script font in green.
   ========================================================================== */
.page-id-13 .page-hero .eyebrow::before { display: none; }
.about-story .eyebrow::before { display: none; }
.about-story .section-head h2 {
  font-family: var(--wp--preset--font-family--script);
  color: var(--wp--preset--color--accent);
}

/* =============================================================================
   ANDREA REV — 2026-07-01 · GLOBAL: remove the little green dash before EVERY
   eyebrow, site-wide (Andrea's dropped it on every section, so make it universal).
   Supersedes the earlier per-section `.eyebrow::before {display:none}` rules;
   eyebrow COLORS stay per-section (they depend on the panel behind them).
   ========================================================================== */
.eyebrow::before { display: none; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · About Us staff: everyone (dentists first, then staff)
   in ONE navy 5-column gallery — light-blue cards with navy text, serif white
   heading like the live design. (Whole About page is navy now except the CTA.)
   ========================================================================== */
@media (min-width: 1001px) { .team-gallery .team-grid--all { grid-template-columns: repeat(5, 1fr); } }
.team-gallery .team-card--bio { background: var(--light-blue); }
.team-gallery .team-card--bio :is(h1,h2,h3,h4),
.team-gallery .team-card--bio p,
.team-gallery .team-card--bio .team-role,
.team-gallery .team-card--bio .svc-link a { color: var(--navy) !important; }
.team-gallery .section-head h2 { color: #fff; }

/* CTA navy divider only when a LIGHT (non-navy) section sits directly above the
   CTA — e.g. the home page (light-blue numbers band). When a navy section is
   adjacent (e.g. the About team gallery), the divider is navy-on-navy, so hide it. */
.section-navy + .cta-band::before { display: none; }

/* =============================================================================
   ANDREA REV — 2026-07-01 · SERVICES page (page-id-14) — Andrea's tweak round
   1. Intro "A Full Range" → new light-blue; its framed-image outline → NAVY
      (green frame vanishes on light blue — the same-tone rule). Eyebrow → navy.
   2. Service catalog: all cat-sections are navy now (content class swap) — render
      the whole navy run as ONE flat navy field (kill the per-section gradient
      reset + corner glow blobs that would stripe when 7 navy sections stack).
      The subpage-hero is NOT .section, so it keeps its gradient.
   3. Accordions → official-green PILLS, navy label + caret, NO white outline; the
      open answer becomes its own rounded white card. Navy label (not white)
      because white fails contrast on our official green — and it matches our
      green buttons (navy text on green).
   4. Restorative "circle tooth" icon nudged 1px left (arrow arm made it read
      off-centre inside its medallion).
   CTA already matches home (shared .cta-band styling + home's button markup).
   ========================================================================== */

/* 1 — intro section */
.page-id-14 .section-surface { background: var(--light-blue); }
.page-id-14 .section-surface .framed-img::before { border-color: var(--navy); }
.page-id-14 .section-surface .eyebrow { color: var(--navy); }

/* 2 — one seamless flat-navy catalog */
.page-id-14 .section.section-navy { background: var(--navy); }
.page-id-14 .section.section-navy::before,
.page-id-14 .section.section-navy::after { display: none; }

/* 3 — official-green accordion pills */
.page-id-14 .faq-item { background: transparent; border: none; box-shadow: none; overflow: visible; }
.page-id-14 .faq-item[open] { box-shadow: none; border-color: transparent; }
.page-id-14 .faq-item > summary,
.page-id-14 .faq-item[open] > summary {
  background: var(--wp--preset--color--accent);   /* official green #89AD45 */
  color: var(--navy);
  border-radius: 999px;                            /* full pill */
  box-shadow: 0 6px 16px -9px rgba(13,33,74,.5);
}
.page-id-14 .faq-item > summary:hover { background: #7c9e3d; color: var(--navy); }
.page-id-14 .faq-item > summary::after { border-right-color: var(--navy); border-bottom-color: var(--navy); }
.page-id-14 .faq-answer {
  background: #fff; color: var(--wp--preset--color--muted);
  margin-top: .55rem; padding: 1.05rem 1.4rem 1.15rem;
  border-radius: 18px; box-shadow: var(--shadow-sm);
}

/* 4 — restorative medallion optical nudge */
.page-id-14 #restorative .section-head .cat-icon-badge img { transform: translateX(-1px); }

/* =============================================================================
   ANDREA REV — 2026-07-01 · SERVICES page — round 2:
   a. Subtle divider hairline between each service (the merged navy catalog reads
      as one field; a soft full-width rule re-separates the services without
      bringing back the color "banding").
   b. "Read More" buttons were the off-brand OLIVE (#5b7d2c/--action). Recolor to
      our LIGHT BLUE + navy text so they read as a distinct "full page" action,
      apart from the green FAQ pills above them (green pills / light-blue button).
   ========================================================================== */
.page-id-14 .cat-section { border-top: 1px solid rgba(255,255,255,.12); }

.page-id-14 .cat-section .wp-block-button__link {
  background: var(--light-blue); color: var(--navy);
}
.page-id-14 .cat-section .wp-block-button__link:hover {
  background: #96b4da; color: var(--navy);
}

/* =============================================================================
   ANDREA REV — 2026-07-01 · RESTORATIVE DENTISTRY detail page (page-id-276)
   1. Whole page → one seamless flat NAVY field (hero + both content sections);
      CTA stays light-blue (matches Andrea's original + the About-page pattern).
   2. "What is Restorative Dentistry?" heading → script font + our green.
   3. Service cards → LIGHT BLUE, 2×2, now carrying the info snippet from Andrea's
      original design; navy text (readable on light blue); centered icon+title,
      left-aligned snippet; hover accent bar navy (green would clash on light blue).
   ========================================================================== */

/* 1 — LIGHT-BLUE hero (distinct from the navy body; bookends the light-blue CTA)
   + seamless flat-navy body. Hero text → navy for legibility; green glow/rule → navy. */
.page-id-276 .subpage-hero { background: var(--light-blue); }
.page-id-276 .subpage-hero::before,
.page-id-276 .subpage-hero::after { display: none; }
.page-id-276 .subpage-hero :is(h1,.subpage-title),
.page-id-276 .subpage-hero .subpage-sub,
.page-id-276 .subpage-hero .eyebrow { color: var(--navy); }
.page-id-276 .subpage-hero.has-rule .subpage-title::after { background: var(--navy); }
.page-id-276 .section.section-navy { background: var(--navy); }
.page-id-276 .section.section-navy::before,
.page-id-276 .section.section-navy::after { display: none; }

/* tighten the intro → "Explore These Services" gap by 160px
   (!important + higher specificity beats the .entry-content > * margin-block:0 reset at §top) */
.page-id-276 .section.section-navy + .section.section-navy { margin-top: -160px !important; }

/* 2 — script-green intro heading */
.page-id-276 .section-navy .prose-narrow h3 {
  font-family: var(--wp--preset--font-family--script);
  color: var(--wp--preset--color--accent);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.1; margin: 1.15rem 0 .25rem;
}

/* 3 — light-blue 2×2 cards with snippet */
.page-id-276 .svc-grid { grid-template-columns: repeat(2, 1fr); max-width: 940px; margin-inline: auto; }
@media (max-width: 640px) { .page-id-276 .svc-grid { grid-template-columns: 1fr; } }
.page-id-276 .svc-card { background: var(--light-blue); border-color: rgba(26,61,109,.14); }
.page-id-276 .svc-card::before { background: var(--navy); }
.page-id-276 .svc-body { text-align: center; display: flex; flex-direction: column; height: 100%; gap: .5rem; }
.page-id-276 .svc-link { margin-top: auto !important; }   /* pin "Learn More" to the card bottom so the row balances */
.page-id-276 .svc-icon { margin-inline: auto; }
.page-id-276 .svc-icon img { width: 52px; height: 52px; aspect-ratio: auto; object-fit: contain; }
.page-id-276 .svc-body > p { text-align: left; }
.page-id-276 .svc-card p { color: var(--navy); }
.page-id-276 .svc-card .svc-link a { color: var(--navy); font-weight: 700; }

/* =============================================================================
   ANDREA REV — 2026-07-02 · SITE-WIDE consistency pass:
   • Every subpage HERO → LIGHT BLUE (distinct from the navy body), navy text.
   • Page BODIES → NAVY: the cream/surface sections are swapped to section-navy in
     content; here we flatten stacked navy sections so they don't gradient-"band".
     Scoped :not(.home):not(.page-id-13) so approved Home + About keep their look.
     CTA stays light blue (bookend).
   • Accordions → our official GREEN pills (navy label) everywhere — no more olive.
   ========================================================================== */

/* hero → light blue */
.subpage-hero { background: var(--light-blue); }
.subpage-hero::before, .subpage-hero::after { display: none; }
.subpage-hero :is(h1,h2,h3,.subpage-title),
.subpage-hero .subpage-sub,
.subpage-hero .eyebrow { color: var(--navy); }
.subpage-hero.has-rule .subpage-title::after { background: var(--navy); }

/* body → flat navy (no gradient banding); Home + About keep their gradient panels */
body:not(.home):not(.page-id-13) .section.section-navy { background: var(--navy); }
body:not(.home):not(.page-id-13) .section.section-navy::before,
body:not(.home):not(.page-id-13) .section.section-navy::after { display: none; }

/* accordions → official-green pills, navy label, white answer card (site-wide) */
.faq-item { background: transparent; border: none; box-shadow: none; overflow: visible; }
.faq-item > summary,
.faq-item[open] > summary,
.section-navy .faq-item > summary,
.section-navy .faq-item[open] > summary {
  background: var(--wp--preset--color--accent); color: var(--navy);
  border-radius: 999px; box-shadow: 0 6px 16px -9px rgba(13,33,74,.5);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.faq-item > summary:hover,
.section-navy .faq-item > summary:hover { background: #7c9e3d; color: var(--navy); }
.faq-item > summary::after { border-right-color: var(--navy); border-bottom-color: var(--navy); }
.faq-answer,
.section-navy .faq-answer { background: #fff; color: var(--wp--preset--color--muted); margin-top: .55rem; padding: 1.05rem 1.4rem 1.15rem; border-radius: 18px; box-shadow: var(--shadow-sm); }

/* =============================================================================
   ANDREA REV — 2026-07-02 · service cards → LIGHT BLUE everywhere (match the
   Restorative page). Home/About don't use .svc-card, so this is service-pages only.
   Card LAYOUT (grid/columns) stays per-page; only the card look is unified.
   ========================================================================== */
.svc-card { background: var(--light-blue); border-color: rgba(26,61,109,.14); }
.svc-card::before { background: var(--navy); }          /* hover accent navy, not green (clashes on light blue) */
.svc-card :is(h3,h4) { color: var(--navy); }
.section-navy .svc-card p, .svc-card p { color: var(--navy); }   /* beat .section-navy .svc-card p:muted */
.section-navy .svc-card .svc-link a, .svc-card .svc-link a { color: var(--navy); font-weight: 700; }   /* beat §405 olive */
.svc-body { text-align: center; }                       /* center icon + title + link (simple cards) */
.svc-card .svc-icon { margin-inline: auto; }            /* center icon (beat .svc-card .wp-block-image margin:0) */
.svc-icon img { width: 52px; height: 52px; aspect-ratio: auto; object-fit: contain; }
/* Restorative keeps its snippet-card layout (flex column, left snippet, pinned link)
   via its own .page-id-276 rules above. */

/* ANDREA REV — 2026-07-02 · Services page: tighten "A Full Range" → "Explore Our
   Services" gap by 120px (target the Explore section via its quick-nav grid). */
.page-id-14 .section.section-navy:has(.svc-nav) { margin-top: -120px !important; }

/* =============================================================================
   ANDREA REV — 2026-07-02 · numbered STEP cards → light blue w/ navy titles+text
   (match the light-blue card theme; Home/About don't use .step). Plus a reusable
   .script-head class = script font + green (e.g. "What is a root canal?").
   ========================================================================== */
.step { background: var(--light-blue); border-color: rgba(26,61,109,.14); }
.step .step-body h3 { color: var(--navy); }
.step .step-body p { color: var(--navy); }

.section-navy .prose-narrow .script-head, .script-head {
  font-family: var(--wp--preset--font-family--script);
  color: var(--wp--preset--color--accent);
  font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.1;
}

/* ANDREA REV — 2026-07-02 · accordion ANSWER panel → light blue (white read too
   stark on navy); navy text. Ties accordions into the light-blue card family.
   Overrides the global + the page-14 scoped answer backgrounds. */
.faq-answer,
.section-navy .faq-answer,
.page-id-14 .faq-answer { background: var(--light-blue); color: var(--navy); }
.faq-answer :is(p,li,strong),
.section-navy .faq-answer :is(p,li,strong),
.page-id-14 .faq-answer :is(p,li,strong) { color: var(--navy); }

/* ANDREA REV — 2026-07-02 · Cosmetic Dentistry (page-370): procedure cards → 2×2
   with snippets (like Restorative); tighten accordions→Procedures and cards→
   What-to-Expect gaps by 120px each (kept equal). */
.page-id-370 .svc-grid { grid-template-columns: repeat(2, 1fr); max-width: 940px; margin-inline: auto; }
@media (max-width: 640px) { .page-id-370 .svc-grid { grid-template-columns: 1fr; } }
.page-id-370 .svc-body { display: flex; flex-direction: column; height: 100%; }
.page-id-370 .svc-link { margin-top: auto !important; }
.page-id-370 .svc-body > p { text-align: left; }
.page-id-370 .section.section-navy:has(.svc-grid) { margin-top: -120px !important; }
.page-id-370 .section.section-navy:has(.steps) { margin-top: -120px !important; }

/* ANDREA REV — 2026-07-02 · Dental Hygiene (page-321): Preventative-Dentistry cards
   → 4 across, icon + title only (whole card clickable, per Andrea's original design).
   Tighten intro→"Preventative Dentistry" AND cards→"Best Practices" gaps 120px each. */
.page-id-321 .svc-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .page-id-321 .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .page-id-321 .svc-grid { grid-template-columns: 1fr; } }
/* hide the "Learn More" text and make the whole card a REAL link (a real anchor filling
   the card — not a ::after overlay — so cmd/right-click "open in new tab/window" works). */
.page-id-321 .svc-card { position: relative; }
.page-id-321 .svc-card .svc-link { margin: 0 !important; }
.page-id-321 .svc-card .svc-link a { position: absolute; inset: 0; z-index: 3; font-size: 0; }
.page-id-321 .section.section-navy:has(.svc-grid) { margin-top: -120px !important; }  /* intro → Preventative */
.page-id-321 .section.section-navy:has(.faq-item) { margin-top: -120px !important; }  /* cards → Best Practices */

/* ANDREA REV — 2026-07-02 · Oral Cancer Screenings (page-339): check-list circles →
   solid OUR-GREEN with a white checkmark (were faint green + olive check). Feature-card
   icons recolored navy→green (SVG source, keep white). */
/* GLOBAL: check-list circles → solid our-green + white checkmark (beats the navy-section
   faint-green rule §653 via the .section-navy variant below). */
.section-navy .check-list li::before,
.check-list li::before {
  background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

/* ANDREA REV — 2026-07-02 · Implants (page-15): tighten the gaps between sections (120px)
   and turn the Read More / Learn More content buttons light blue (navy text). */
.page-id-15 .section.section-navy + .section.section-navy,
.page-id-15 .section.section-navy + .cta-band { margin-top: -120px !important; }
.page-id-15 .section .wp-block-button__link { background: var(--light-blue); color: var(--navy); }
.page-id-15 .section .wp-block-button__link:hover { background: #96b4da; color: var(--navy); }

/* ANDREA REV — 2026-07-02 · Technology (page-16): tighten gaps between sections (120px);
   add 40px breathing room between the image/text row and the accordions in each section. */
.page-id-16 .section.section-navy + .section.section-navy { margin-top: -120px !important; }
/* don't pull the section right after the tech-jump nav up (it was covering the nav
   labels); and leave the CTA at its normal gap (the last section ends in an image). */
.page-id-16 .section:has(.tech-jump__img) + .section.section-navy { margin-top: 0 !important; }
.page-id-16 .section .faq { padding-top: 40px; }

/* ANDREA REV — 2026-07-02 · Patient Info (page-17): tighten sections (reduced padding)
   + a subtle divider line between each section. */
.page-id-17 .section.section-navy { padding-block: clamp(2.25rem, 4.5vw, 3rem); }
.page-id-17 .section.section-navy + .section.section-navy { border-top: 1px solid rgba(255,255,255,.12); }

/* ANDREA REV — 2026-07-02 · Patient Info (page-17): content buttons were olive (--action);
   set them to OUR green (accent) with navy text (matches the site's green buttons/pills). */
.page-id-17 .section .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--navy); }
.page-id-17 .section .wp-block-button__link:hover { background: #7c9e3d; color: var(--navy); }

/* ANDREA REV — 2026-07-02 · Smile Gallery (page-18): tighten the gap between the gallery
   and the Patient Stories section. */
.page-id-18 .section.section-navy + .section.section-navy { margin-top: -120px !important; }

/* ANDREA REV — 2026-07-02 · Smile Gallery (page-18): the Patient Stories section-head holds
   several body paragraphs — widen it from 56ch so the copy isn't a skinny column. */
.page-id-18 .section:has(.video-grid) .section-head { max-width: 860px; }
.page-id-18 .section:has(.video-grid) .section-head p { max-width: none; }   /* body paras fill the wider block, matching the lead */

/* ANDREA REV — 2026-07-02 · Contact (19) + Request Appointment (127): body → LIGHT BLUE.
   Green that sits ON the light blue (eyebrow, heading rule, on-body links) → navy; greens
   on the WHITE form card (.gform-wrap) and the navy info panel (.contact-info) stay. */
.page-id-19 .section-cream, .page-id-127 .section-cream { background: var(--light-blue); }
.page-id-19 .section-cream .eyebrow, .page-id-127 .section-cream .eyebrow { color: var(--navy); }
.page-id-19 .section-cream .section-head.has-rule > :is(h1,h2,h3)::after,
.page-id-127 .section-cream .section-head.has-rule > :is(h1,h2,h3)::after { background: var(--navy); }
.page-id-127 .section-cream .section-head a { color: var(--navy); }

/* ANDREA REV — 2026-07-02 · Blog (posts page / home.html): its main's direct children
   aren't inside .entry-content, so the flow block-gap (24px) wasn't reset and showed as a
   white stripe between the hero and body. Zero it out. */
.blog .site-main > * { margin-block: 0 !important; }

/* ANDREA REV — 2026-07-02 · Blog POSTS (.single-article, single.html): the INVERSE of the
   other pages — NAVY hero + LIGHT-BLUE body. All green on the light blue → navy. */
/* hero → navy (revert the global light-blue-hero for posts) */
.single-article .subpage-hero { background: var(--navy-grad); }
.single-article .subpage-hero :is(h1,h2,h3,.subpage-title),
.single-article .subpage-hero .subpage-sub { color: #fff; }
.single-article .subpage-hero.has-rule .subpage-title::after { background: var(--rule); }
/* body → light blue */
.single-article .entry-content.section { background: var(--light-blue); }
/* green-on-light-blue → navy */
.single-article .entry-content a:not(.wp-element-button) { color: var(--navy); }
.single-article .entry-content li::marker { color: var(--navy); }
.single-article .entry-content h2::before { background: var(--navy); }
.single-article .entry-content .wp-block-quote { border-left-color: var(--navy); }
.single-article .single-back a { color: var(--navy); }

/* Blog post closing CTA → NAVY (dark blue): white heading, light sub, green eyebrow +
   phone link, green button with navy text (all pop on navy). */
.single-article .single-cta { background: var(--navy-grad); }
.single-article .single-cta :is(h1,h2,h3) { color: #fff; }
.single-article .single-cta .eyebrow { color: #b6d27a; }
.single-article .single-cta .single-cta-sub { color: rgba(255,255,255,.84); }
.single-article .single-cta a:not(.wp-element-button) { color: #b6d27a; }
.single-article .single-cta .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--navy); }
.single-article .single-cta .wp-block-button__link:hover { background: #7c9e3d; color: var(--navy); }

/* Blog posts: same as the blog index — the main's direct children carry a flow block-gap
   that showed a white stripe between the hero and body. Zero it. */
.single-article > * { margin-block: 0 !important; }

/* thin light-blue divider between the navy blog-post CTA and the navy footer */
.single-article .single-cta { border-bottom: 2px solid var(--light-blue); }

/* ============================================================================
   ANDREA REV — 2026-07-04 · Subpage breadcrumb bar
   A slim navy nav strip between the hero and the body on secondary / tertiary
   pages, so patients can climb back up without the browser Back button. Framed
   top & bottom by a thin light-blue hairline (our divider motif) so it reads as
   a distinct bar whether the hero above it is light-blue or navy. Links use the
   site's navy-accent green (#b6d27a, AA on navy); the current page is white.
   Secondary pages: whole trail sits right. Tertiary pages (.crumb-split): the
   top crumb pins left, the rest sits right.
   ========================================================================= */
.subpage-crumb {
	background: var(--navy);
	border-top: 1px solid rgba(169,195,226,.45);
	border-bottom: 1px solid rgba(169,195,226,.45);
	padding-block: .7rem;
}
.subpage-crumb .crumb-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1.15rem, 4vw, 2rem);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .6rem;
	flex-wrap: wrap;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.35;
}
.subpage-crumb.crumb-split .crumb-inner { justify-content: space-between; }
.subpage-crumb .crumb-right { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.subpage-crumb a { color: #b6d27a; text-decoration: none; transition: color var(--t,.2s ease); }
.subpage-crumb a:hover,
.subpage-crumb a:focus-visible { color: #cbe39a; text-decoration: underline; text-underline-offset: 3px; }
.subpage-crumb .crumb-current { color: #fff; }
.subpage-crumb .crumb-sep { color: rgba(255,255,255,.34); font-weight: 400; }
/* the body section now follows the crumb (not the hero) — keep its top breathing room */
.subpage-crumb + .section { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (max-width: 600px) {
	.subpage-crumb .crumb-inner,
	.subpage-crumb.crumb-split .crumb-inner { justify-content: center; font-size: .72rem; letter-spacing: .07em; gap: .45rem; }
}

/* =============================================================================
   ANDREA REV — 2026-07-10 · HOME
   (1) Merge "Top Dental Office / Meet Our Dentists" + "Welcome to Our Office"
       into ONE navy panel: office-section is now a nested alignwide group inside
       .tdo-section (no its own .section-navy), so the diagonal navy gradient no
       longer resets/stripes at the seam. Restores the vertical breathing room the
       separate section used to provide.
   (2) Counters band -> navy field + GREEN cards (was light-blue band + navy cards).
       Navy text on green = same green/navy pairing as the accordion pills.
   ========================================================================== */
.tdo-section .office-section { margin-top: clamp(3rem, 6vw, 5rem); }

.stats-band .stat { background: var(--wp--preset--color--accent); box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); }
.stats-band .stat-num,
.stats-band .stat-num .u,
.stats-band .stat-label { color: var(--navy); }

/* =============================================================================
   ANDREA REV — 2026-07-10 · FOOTER
   (1) Column headings (Services / Patient Resources / Office Hours): larger + green.
   (2) Green location + phone icons beside the address/phone (SVGs in footer.html).
   (3) Social buttons: green containers, navy icons.
   ========================================================================== */
.site-footer h2.footer-heading { font-size: clamp(1.35rem, 1.9vw, 1.6rem); color: var(--wp--preset--color--accent); }

.footer-contact .fc-ico { width: 1.05em; height: 1.05em; fill: var(--wp--preset--color--accent); flex: none; }
.footer-contact a[href*="maps"] { display: inline-flex; align-items: flex-start; gap: .45em; }
.footer-contact a[href*="maps"] .fc-ico { margin-top: .2em; }
.footer-contact a[href^="tel:"] .fc-ico { vertical-align: -.18em; margin-right: .45em; }

.footer-social .wp-social-link { background-color: var(--wp--preset--color--accent) !important; }
.footer-social .wp-social-link svg { fill: var(--navy) !important; color: var(--navy) !important; }
.footer-social .wp-social-link:hover { background-color: #98bd4f !important; }

@media (max-width: 600px) {
  .footer-col-services .footer-heading, .footer-col-resources .footer-heading, .footer-col-hours .footer-heading { font-size: 1.25rem; }
  .footer-about .footer-contact a[href^="tel:"] .fc-ico { fill: var(--navy) !important; }
}

/* ANDREA REV — 2026-07-10b · footer social: larger green circles, icon glyph UNCHANGED
   (more breathing room around the icon). svg size deliberately not set here. */
.footer-social .wp-social-link { width: 46px; height: 46px; border-radius: 50%; margin: 0; display: flex; align-items: center; justify-content: center; }
.footer-social .wp-social-link a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; }
.footer-social { gap: .55rem; }

/* =============================================================================
   ANDREA REV — 2026-07-10 · Dental Services cards → back to client's ORIGINAL:
   WHITE cards with a GREEN shadow (was light-blue). Green hover accent restored.
   (Client's call; overrides the 2026-07-02 light-blue treatment.)
   ========================================================================== */
.svc-card, .page-id-276 .svc-card { background: #fff; border-color: rgba(19,41,75,.08); box-shadow: 10px 10px 0 0 var(--wp--preset--color--accent); }
.svc-card::before, .page-id-276 .svc-card::before { background: var(--rule); }
.svc-card:hover, .page-id-276 .svc-card:hover { transform: translate(4px, 4px); box-shadow: 6px 6px 0 0 var(--wp--preset--color--accent); }

/* =============================================================================
   ANDREA REV — 2026-07-10 · "Benefits" .feature cards (all service pages):
   solid LIGHT-BLUE hard drop shadow, subtle 3px offset (mirrors the green
   hard shadow on the service cards). Global — every navy benefit box.
   ========================================================================== */
.feature { box-shadow: 3px 3px 0 0 var(--light-blue); }
.feature:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--light-blue); }

/* ANDREA REV — 2026-07-10 · Implants: 30px breathing room below the Snap-On
   Dentures "Read More" button before the CTA band. */
#snap-on-dentures .wp-block-buttons { margin-bottom: 30px; }

/* =============================================================================
   ANDREA REV — 2026-07-10 · Contact Us info card: green icons for location,
   phone, and hours (clock) beside each item.
   ========================================================================== */
.contact-info .ci-item { position: relative; padding-left: 2.5rem; }
.contact-info .ci-item::before { content: ""; position: absolute; left: 0; top: .12rem; width: 1.45rem; height: 1.45rem; background-color: var(--wp--preset--color--accent); -webkit-mask: center / contain no-repeat var(--ci-ico); mask: center / contain no-repeat var(--ci-ico); }
.contact-info .ci-item:nth-child(1) { --ci-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27%2F%3E%3C%2Fsvg%3E"); }
.contact-info .ci-item:nth-child(2) { --ci-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6.62%2010.79c1.44%202.83%203.76%205.15%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201C10.07%2021%203%2013.93%203%205c0-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%27%2F%3E%3C%2Fsvg%3E"); }
.contact-info .ci-item:nth-child(3) { --ci-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%2018a8%208%200%201%201%200-16%208%208%200%200%201%200%2016zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67z%27%2F%3E%3C%2Fsvg%3E"); }