/* Tyngsboro Dental Care: site stylesheet (homepage-spec r1 + ADDENDUM 1/2, r4 reviews; v3 bold rebuild per homepage-spec-v3, 2026-09-27).
   Every value is from v2-specs/homepage-spec.md; viewport-relative recipe values are authored as their
   mechanism (vh, vw, %, max(), clamp(), fr), never as landed px. Section order: base, atoms, H0 chrome,
   H1..H8, breakpoints per section, reduced motion. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sticky-h); }
body { margin: 0; padding-top: var(--header-h); background: #fff; color: var(--ink);
  font: 400 16px/1.75 var(--font-body); }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--primary); }
:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 1001; padding: 10px 16px; background: #fff;
  color: var(--primary); font: 700 16px/1.2 var(--font-display); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Google widget marks (widget-native colours, outside the hue budget) */
.gg-r { fill: var(--g-red); } .gg-b { fill: var(--g-blue); } .gg-y { fill: var(--g-yellow); } .gg-g { fill: var(--g-green); }
.st-on { fill: var(--g-star); } .st-off { fill: var(--g-star-empty); }

/* ---------- button atom (spec 0.4) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 44px; padding: 0 var(--pill-px, 24px); min-width: var(--pill-minw, 0);
  border: 2px solid var(--primary); border-radius: var(--radius-pill);
  background: var(--primary); color: #fff; font: 700 var(--pill-fs, 16px)/1.2 var(--font-display);
  letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none; cursor: pointer; }
.pill:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
.pill { transition: transform .3s; }
.pill--wq { transition: background-color .3s, border-color .3s, color .3s, transform .3s; }
.pill--q { transition: all .2s, transform .3s; }
.pill--eh { transition: all .3s cubic-bezier(.4, 0, .2, 1), transform .3s; }
/* every hover fenced to fine pointers (ADDENDUM 2 M3.2); the newlife lift composes with each skin's colour (M3.1) */
@media (hover: hover) and (pointer: fine) {
  .pill--wq:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .pill--q:hover { background: #fff; color: var(--primary); }
  .pill--eh:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
  .pill:hover { transform: translateY(-2px); }
}
/* pressed state after hover so it wins while the pointer is down (D1.10); no lift while pressed */
.pill--wq:active, .pill--q:active { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
.pill:active { transform: none; }

/* ---------- H0 desktop header (>= 1025) ---------- */
.hd { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #fff; transition: .3s; }
.hd-top { height: var(--ribbon-h); background: var(--primary); }
.hd-top__in { position: relative; max-width: 1250px; margin: 0 auto; padding: 0 10px; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.hd-notice { font: 400 15px/20px var(--font-body); color: #fff; white-space: nowrap; }
.er { position: absolute; right: 0; top: 0; width: 248px; height: 44px; padding: 6px 16px;
  background: var(--emergency); color: #fff; border-radius: var(--radius-tab); z-index: 2;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  font: 600 14px/16px var(--font-display); text-decoration: none; transition: .4s; }
.er span, .er-pill span { display: block; white-space: nowrap; }
.er:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }

.hd-brand { height: var(--brand-h); }
.hd-brand__in { max-width: 1300px; margin: 0 auto; height: 100%; padding: 0 10px 8px;
  display: flex; justify-content: space-between; align-items: flex-end; }
.hd-info { order: -1; flex: 0 0 279px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hd-phone { font: 700 24px/28px var(--font-display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.hd-addr { padding: 2px 0; font: 400 15px/20px var(--font-body); color: var(--ink); text-decoration: none; white-space: nowrap; }
.lk { flex: 0 0 361px; width: 361px; height: 60px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lk-mark { flex: none; width: 42px; height: 60px; }
.lk-text { display: flex; flex-direction: column; white-space: nowrap; }
.lk-name { font: 800 22px/26px var(--font-display); letter-spacing: .5px; text-transform: uppercase; color: var(--primary); }
.lk-tag { font: 400 16px/20px var(--font-body); color: var(--ink); }
.hd-cta { --pill-minw: 279px; --pill-px: 24px; flex: none; }
.er-pill { display: none; }

.hd-bar { height: var(--bar-h); background: var(--ink); }
.nav { width: 980px; max-width: 100%; height: 100%; margin: 0 auto; padding: 0; list-style: none;
  display: flex; justify-content: space-around; }
.nav-item { position: relative; display: flex; }
.nav-link { display: block; padding: 3px 6px; font: 600 16px/26px var(--font-display); color: #fff;
  text-decoration: none; transition: color .4s, background-color .4s; }
.nav-link:focus-visible { outline: var(--focus-dark); outline-offset: -3px; }
.dd-toggle { flex: none; width: 24px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent;
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dd-toggle svg { display: block; }
.dd-toggle:focus-visible { outline: var(--focus-dark); outline-offset: -2px; }
.dd { position: absolute; top: var(--bar-h); left: 0; width: 280px; min-width: 280px; margin: 0; padding: 0;
  list-style: none; background: var(--primary); border-radius: 0; box-shadow: var(--shadow-dd); z-index: 3;
  visibility: hidden; opacity: 0; }
.nav-item:hover > .dd, html:not(.js) .nav-item:focus-within > .dd, .nav-item.is-open > .dd { visibility: visible; opacity: 1; }
.dd-row { display: block; width: 280px; min-height: 38.19px; padding: 10px 12px;
  font: 400 14px/18.2px var(--font-display); color: #fff; text-decoration: none; transition: color .4s, background-color .4s; }
.dd-row:focus-visible { outline: var(--focus-dark); outline-offset: -3px; }
@media (hover: hover) {
  .nav-link:hover { color: var(--gold); }                                   /* ADDENDUM F1: gold text on the ink bar */
  .dd-row:hover { background: var(--gold); color: var(--ink); }             /* D0.10: ink label on gold */
  .er:hover, .er-pill:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
}
/* active markers (page state on <body> only; D0.11) */
body[data-section="home"] .nav-item--home > .nav-link,
body[data-section="about"] .nav-item--about > .nav-link,
body[data-section="services"] .nav-item--services > .nav-link,
body[data-section="reviews"] .nav-item--reviews > .nav-link,
body[data-section="forms"] .nav-item--forms > .nav-link,
body[data-section="contact"] .nav-item--contact > .nav-link { box-shadow: inset 0 -3px 0 var(--gold); }
body[data-page="services"] .dd-row[data-nav="services"],
body[data-page="crowns-and-bridges"] .dd-row[data-nav="crowns-and-bridges"],
body[data-page="root-canals"] .dd-row[data-nav="root-canals"],
body[data-page="dentures"] .dd-row[data-nav="dentures"],
body[data-page="night-guards"] .dd-row[data-nav="night-guards"],
body[data-page="sealants"] .dd-row[data-nav="sealants"],
body[data-page="fluoride"] .dd-row[data-nav="fluoride"],
body[data-page="metal-free-composite-white-fillings"] .dd-row[data-nav="metal-free-composite-white-fillings"],
body[data-page="our-technologies"] .dd-row[data-nav="our-technologies"] { box-shadow: inset 4px 0 0 var(--gold); font-weight: 700; }

/* sticky state (worcester-interactive/03 targets; ADDENDUM V5.1 + V5.5, owner 2026-09-28): the header
   is fixed at every scroll position, never re-enters from off-screen, and the 144 -> 96 condense GLIDES:
   the ribbon rides up under the header's own transform (the .er tab fades so its overhang cannot peek),
   the brand row's height / logo / type transition in place, and the emergency pill grows in. The
   worcester logo/info reorder is dropped (a flex order swap cannot animate); the lockup keeps its
   centred slot, the info block stays left. */
@media (min-width: 1025px) {
  .hd-brand { transition: height .3s; }
  .hd-brand__in { transition: padding .3s; }
  .lk { transition: height .3s, gap .3s; }
  .lk-mark { transition: width .3s, height .3s; }
  .lk-name, .lk-tag { transition: font-size .3s, line-height .3s; }
  .fix-nav .hd { transform: translateY(calc(-1 * var(--ribbon-h))); box-shadow: var(--shadow-sticky); }
  .fix-nav .er { opacity: 0; visibility: hidden; pointer-events: none; }
  .fix-nav .hd-brand { height: var(--sticky-brand-h); }
  .fix-nav .hd-brand__in { padding: 0 10px 6px; }
  .fix-nav .lk { height: 52px; gap: 10.4px; }
  .fix-nav .lk-mark { width: 36.4px; height: 52px; }
  .fix-nav .lk-name { font-size: 19px; line-height: 22.5px; }
  .fix-nav .lk-tag { font-size: 14px; line-height: 17.3px; }
  @keyframes er-in { from { flex-basis: 0; width: 0; min-width: 0; border-width: 0; opacity: 0; } }
  .fix-nav .er-pill { display: inline-flex; flex: 0 0 248px; flex-direction: column; width: 248px; min-width: 248px;
    --pill-px: 0px; background: var(--emergency); border-color: var(--emergency); color: #fff; overflow: hidden;
    font: 600 13px/15px var(--font-display); animation: er-in .3s both;
    transition: background-color .4s, border-color .4s, color .4s, transform .3s; }
  .er-pill:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }
}
@media (min-width: 1025px) and (max-width: 1239px) { .fix-nav .hd-info { display: none; } }
@media (max-width: 1199px) { .hd-notice { display: none; } }

/* ---------- H0 house mobile chrome (<= 1024 bar + drawer; ADDENDUM V5.2: the quick-action nav
   lives at the bottom of the open drawer, never as a fixed bottom bar) ---------- */
.mbar, .m-panel { display: none; }
@media (max-width: 1024px) {
  html { scroll-padding-top: var(--mbar-h); }
  body { padding-top: var(--mbar-h); }
  .hd { display: none; }
  .mbar { display: flex; position: fixed; top: 0; left: 0; right: 0; height: var(--mbar-h); z-index: 100;
    background: #fff; align-items: center; padding-left: 20px; }
  .mbar-lk { display: flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; }
  .mbar-mark { flex: none; width: 28px; height: 40px; }
  .mbar-text { display: flex; flex-direction: column; width: 122px; }
  .mbar-name { font: 800 17px/19px var(--font-display); letter-spacing: .5px; text-transform: uppercase; color: var(--primary); }
  .mbar-name > span { display: block; white-space: nowrap; }
  .mbar-tag { font: 400 12px/14px var(--font-body); color: var(--ink); white-space: nowrap; }
  .mbar-call { flex: none; width: 44px; height: 44px; margin-right: 8px; display: flex; align-items: center;
    justify-content: center; color: var(--primary); }
  .mbar-menu { flex: none; width: 70px; height: 80px; margin: 0; padding: 0; border: 0; background: var(--primary);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
  .mbar-menu:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }
  .mbar-icon { display: flex; flex-direction: column; gap: 6px; }
  .mbar-icon i { display: block; width: 28px; height: 3px; background: #fff; transition: transform .3s, opacity .3s; }
  .menu-open .mbar-icon i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-open .mbar-icon i:nth-child(2) { opacity: 0; }
  .menu-open .mbar-icon i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  /* V5.8 (owner): no visible Menu/Close label under the icon; the button's name lives in aria-label */

  .m-panel { display: flex; flex-direction: column; position: fixed; top: var(--mbar-h); left: 0; right: 0; bottom: 0;
    z-index: 90; background: var(--ink); overflow: hidden; visibility: hidden; transform: translateX(100%);
    transition: transform .3s, visibility .3s; }
  .m-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .menu-open .m-panel { visibility: visible; transform: none; }
  body.menu-open { overflow: hidden; }
  .m-panel :focus-visible { outline: var(--focus-dark); outline-offset: -3px; }
  .m-row { display: flex; align-items: center; min-height: 56px; padding: 16px 64px 16px 20px;
    font: 600 18px/24px var(--font-display); color: #fff; text-decoration: none; border-top: 1px solid var(--on-dark-line); }
  .m-nav > .m-row:first-child { border-top: 0; }
  .m-item { position: relative; }
  .m-expand { position: absolute; right: 0; top: 0; width: 56px; height: 56px; margin: 0; padding: 0; border: 0;
    border-left: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .m-expand svg { transition: transform .3s; }
  .m-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
  .m-child { display: flex; align-items: center; min-height: 48px; padding: 12px 20px 12px 36px;
    font: 400 16px/24px var(--font-display); color: var(--on-dark-soft); text-decoration: none; background: rgba(0, 0, 0, .15); }
  .m-emerg { display: flex; align-items: center; min-height: 56px; padding: 16px 20px;
    font: 600 16px/22px var(--font-display); color: #fff; text-decoration: none; border-top: 1px solid var(--on-dark-line);
    border-bottom: 1px solid var(--on-dark-line); box-shadow: inset 4px 0 0 var(--emergency); }
  .m-hours { margin: 24px 20px; padding: 10px 20px; background: rgba(255, 255, 255, .06); color: #fff; }
  .m-hours__title { font: 600 17px/24px var(--font-display); color: #fff; margin-bottom: 6px; }
  .m-hours dl div { display: flex; justify-content: space-between; gap: 12px; font: 400 15px/24px var(--font-body); }
  .m-hours dt { font-weight: 700; }
  .m-hours__note { margin-top: 6px; font: 400 15px/24px var(--font-body); }
  .m-social { padding: 0 8px 24px; }
  .m-fb { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff; }
  /* V5.2 quick actions: pinned to the drawer's bottom edge at every drawer width; segment skin unchanged */
  .ab { flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr; height: var(--actionbar-h); }
  .ab__seg { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 0;
    font: 700 15px/1 var(--font-display); text-decoration: none; }
  .ab__seg svg { flex: none; }
  .ab__call { background: var(--primary); color: #fff; }
  .ab__req { background: var(--gold); color: var(--ink); }
  .ab__em { background: var(--emergency); color: #fff; }
  .ab__call:focus-visible, .ab__em:focus-visible { outline: var(--focus-dark); outline-offset: -4px; }
  .ab__req:focus-visible { outline: 2px dashed var(--ink); outline-offset: -4px; }
}

/* ---------- H1 hero (v4 owner order: the r3 photo hero restored, ADDENDUM 2 M1: newlife-int/02 card + action bar) ----------
   HARD RULE (M1.3 / G-M1.13): no transform, filter, perspective, contain or will-change on .hero, main or body; and
   (v3) no overflow other than visible on main, body or html (H3's sticky chapter). The hero's own overflow:hidden is
   fine: it holds no sticky element. */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; height: 80vh; min-height: 700px; padding: 0 10% 8vh; background-color: var(--ink);
  background-image: url("../assets/hero-family.jpg"); background-attachment: fixed; background-repeat: no-repeat;
  background-size: max(100%, calc((100vh - var(--sticky-h)) * 1.7647)) auto; background-position: 50% var(--sticky-h); }
.hero picture { display: contents; }
.hero__img { display: none; }
.hero__card { width: 38rem; padding: 2rem 2rem 0; background: rgba(10, 36, 64, .70); border-radius: 20px 20px 0 0; color: #fff; }
.hero__kicker { margin: 0 0 12px; font: 400 16px/18px var(--font-body); letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); }
.hero__h1 { margin: 0 0 24px; font: 800 40px/45px var(--font-display); color: #fff; text-wrap: balance; }
.hero__deck { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 -2rem; padding: 1rem 2rem;
  border-top: 2px solid var(--gold); color: #fff; text-decoration: none; transition: color .3s; }
.hero__sub { font: 400 19.2px/33.6px var(--font-body); }
.hero__chev { flex: none; display: block; color: var(--gold); transition: transform .3s; }
.hero__deck:focus-visible { outline: var(--focus-dark); outline-offset: -4px; }
.hero__bar { display: grid; grid-template-columns: 1fr 1fr; width: 38rem; background: rgba(10, 36, 64, .70);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hero__cell { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 16px; border-radius: 0;
  font: 700 16px/24px var(--font-display); letter-spacing: 0; text-transform: none; color: #fff; text-decoration: none;
  white-space: nowrap; transition: transform .3s, background-color .3s; }
.hero__cell--req { background: var(--primary); }
.hero__cell:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }
@media (hover: hover) and (pointer: fine) {
  .hero__deck:hover { color: var(--sky); }
  .hero__deck:hover .hero__chev { transform: translateX(3px); }
  .hero__cell:hover { transform: translateY(-2px); }
  .hero__cell--call:hover { text-decoration: underline; }
}
.hero__deck:active { color: var(--sky); }
.hero__cell:active { transform: none; }
.hero__cell--req:active { background: var(--primary-deep); }
/* load entrance (M1.17): only under html.js-motion (head script; never without JS or under reduced motion) */
@keyframes hero-bar-in { from { opacity: 0; transform: translate3d(-100px, 0, 0); } }
@keyframes hero-card-in { from { opacity: 0; transform: translate3d(0, 100px, 0); } }
/* backwards fill: the from-keyframe holds through the delay, and the landed state is the element's own
   opacity 1 / transform none (a forwards fill would hold an identity matrix, not none) */
.js-motion .hero__bar { animation: hero-bar-in 1s cubic-bezier(.25, 1, .5, 1) 40ms backwards; }
.js-motion .hero__card { animation: hero-card-in 1s cubic-bezier(.25, 1, .5, 1) 400ms backwards; }
/* <= 1024: stacked (newlife-mobile/04), no overlap, no fixed background (M1.5, M1.25) */
@media (max-width: 1024px) {
  .hero { height: auto; min-height: 0; padding: 0; justify-content: flex-start; background: var(--ink); }
  .hero__img { display: block; order: -1; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; object-position: 50% 20%; }
  .hero__card { width: 100%; border-radius: 0; background: var(--ink);
    padding: 2rem calc(90vw - min(80vw, 38rem)) 0 10vw; }
  .hero__deck { margin: 0 calc(min(80vw, 38rem) - 90vw) 0 -10vw; padding-left: 10vw; padding-right: calc(90vw - min(80vw, 38rem)); }
  /* build delta B3.2: spec "two 304 cells from x = 10%" overflows the viewport below ~676 (60 + 608 at 601); the cells
     cap at 19rem and share the 80vw measure below that */
  .hero__bar { width: 100%; grid-template-columns: repeat(2, minmax(0, 19rem)); padding: 0 10vw; background: var(--ink);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 600px) {
  .hero__img { aspect-ratio: 1 / .734; object-position: 50% 13%; }
  .hero__card { padding: 2rem 20px 0; }
  .hero__deck { margin: 0 -20px; padding: 1rem 20px; }
  /* build delta B3.1 (ADDENDUM 2 M1.21 amended): spec min(8.2vw, 32px) assumed "Gentle family dentistry" = 322px at 32;
     the shipped face measures 384.3px, so 32px gives 3 lines and the hero ends under the action bar. 28px = x0.70 of the
     40px desktop H1, the floor of the same mobile.md 40-48 band: 336px line, 2 lines, hero clear of the bar at 390 / 360 */
  .hero__h1 { font-size: min(7.2vw, 28px); line-height: 1.125; }
  .hero__sub { font-size: 16px; line-height: 28px; }
  .hero__bar { grid-template-columns: 1fr; padding: 0 0 16px; }
  .hero__cell { height: 50px; }
  .hero__cell--call { border-top: 1px solid var(--on-dark-line); }
}

/* ---------- H2 proof row (newlife/10) ---------- */
.feat { background: #fff; padding: 64px 0; }
.feat__in { width: min(100% - 96px, 1504px); margin: 0 auto; }
.feat__h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font: 700 36.8px/44px var(--font-display);
  color: var(--ink); text-wrap: balance; }
.feat__h2::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.feat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.feat__col { border-top: 2px solid var(--gold); padding-top: 32px; }
.feat__h3 { margin: 0 0 12px; font: 700 24px/30px var(--font-display); color: var(--ink); }
.feat__p { font: 400 16px/28px var(--font-body); color: var(--ink); }
.feat__p a { color: var(--primary); font-weight: 700; text-decoration: underline; transition: color .2s; }
@media (hover: hover) { .feat__p a:hover { color: var(--primary-deep); } }
@media (max-width: 991px) {
  .feat__in { width: calc(100% - 64px); }
  .feat__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* ADDENDUM V5.3 (owner, 2026-09-28): the newlife-mobile/06 uniform 4-block stack reads as
     template repetition at phone width. Recomposed as one editorial lead (its H3 demotes to the
     house kicker; it restates the H1) plus a single ruled group of three fact rows. Desktop and
     601-991 keep the banked anatomy. */
  .feat { padding: 40px 0; }
  .feat__in { width: calc(100% - 40px); }
  .feat__grid { display: block; }
  .feat__h2 { font-size: 30px; line-height: 36px; }
  .feat__col { border-top: 0; padding-top: 0; }
  .feat__col--lead .feat__h3 { margin: 0 0 8px; font: 400 13px/18px var(--font-body); letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--primary); }
  .feat__col--lead .feat__p { font-size: 18px; line-height: 30px; }
  .feat__col--lead + .feat__col--fact { margin-top: 28px; border-top: 2px solid var(--gold); padding-top: 24px; }
  .feat__col--fact + .feat__col--fact { margin-top: 20px; border-top: 1px solid var(--fact-line); padding-top: 20px; }
  .feat__col--fact .feat__h3 { font-size: 18px; line-height: 26px; margin-bottom: 8px; }
}

/* ---------- H3 services chapter (homepage-spec-v3 H3: coastal 07/08 T3 + coastal-interactive/01 + coastal-mobile/01) ----------
   STICKY LAW: no overflow other than visible on .chap or any ancestor, and no reveal transform on .split__img, .chap__wm,
   .split__media or any ancestor of them (C3.15). One sticky watermark layer rides behind the whole chapter under the
   sticky header; three 154vh splits pin their square image at the header's bottom (96) while the text column passes. */
.chap { position: relative; background: var(--ink); padding: var(--chap-pad) 0 calc(var(--chap-pad) * .7); color: #fff; }
.chap__wm-track { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.chap__wm { position: sticky; top: var(--sticky-h); height: calc(100vh - var(--sticky-h));
  background: url("../assets/molar-watermark.png") center / auto 86% no-repeat; opacity: var(--wm-alpha); }
.chap__in { position: relative; z-index: 1; padding: 0 var(--split-gutter); }
.chap__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 48px; }
.chap__h2, .split__h { font: 800 var(--fluid-display)/1.1 var(--font-display); letter-spacing: .05em; color: #fff; }
.chap__btns { display: flex; gap: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--split-gap); height: 154vh; margin-bottom: 16px; }
.split:last-child { margin-bottom: 0; }
.split--rev .split__media { order: -1; }
.split__img { position: sticky; top: var(--sticky-h); width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.split__text { align-self: center; max-width: none; }
.split__h { margin: 0 0 24px; }
.split__p { max-width: 510px; margin: 0 0 24px; font: 400 20px/30px var(--font-body); color: #fff; }
.split__list { max-width: 510px; margin: 0 0 48px; padding: 0; list-style: none; }
.split__list li { border-top: 1px solid rgba(255, 255, 255, .18); }
.split__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
/* the row's 8px padding lives on the link / label so a linked row is one 44px target (row geometry = li 8px 0 + 28) */
.split__link, .split__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0;
  font: 400 17px/28px var(--font-body); }
.split__link { color: #fff; text-decoration: none; }
.split__item { color: var(--on-dark-soft); }
.split__arrow { flex: none; display: block; color: var(--gold); transition: transform .2s; }
.split__link:focus-visible { outline: var(--focus-dark); outline-offset: 2px; }
.split__cta { margin: 0; }
/* chapter pills (C3.6, C3.11): gold = --gold fill + ink label; ghost = 2px white border + white label. Hover snaps the colour
   (0s, coastal) to a white fill + ink label and composes with the r3 .3s lift; focus = 2px dashed white (C3.12) */
.pill--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pill--ghost { background: transparent; border-color: #fff; color: #fff; }
.chap .pill:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) {
  .pill--gold:hover, .pill--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
  .split__link:hover span { text-decoration: underline; text-decoration-thickness: 1px; }
  .split__link:hover .split__arrow { transform: translateX(3px); }
}
/* <= 1024: plain flow, sticky inert, IMAGE FIRST in all three (coastal-mobile/01); the watermark stays under the 80px bar.
   build delta: the spec's `.split{display:block}` cannot put the image first (the text precedes it in source order for the
   desktop tab order), so the stack is a flex column with the media ordered first; geometry is the same block stack. */
@media (max-width: 1024px) {
  .chap__wm { top: var(--mbar-h); height: calc(100vh - var(--mbar-h)); }
  .chap__head { flex-direction: column; align-items: center; gap: 36px; margin-bottom: 36px; text-align: center; }
  .chap__btns { flex-direction: column; align-items: center; }
  .split { display: flex; flex-direction: column; height: auto; margin-bottom: 52px; }
  .split__media, .split--rev .split__media { order: -1; width: 100%; max-width: 560px; margin: 0 auto 68px; }
  .split__img { position: static; }
  .split__text { align-self: stretch; }
  .split__h, .split__cta { text-align: center; }
  .split__p, .split__list { max-width: none; }
  .split__list { margin-bottom: 36px; }
}
@media (max-width: 600px) {
  .chap { --chap-pad: 88px; --fluid-display: 38px; --split-gutter: 20px; }
}

/* ---------- H4 doctor bio split (newlife-int/11) ---------- */
.bio { background: var(--sky); padding: 0; }
.bio__grid { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 0; }
.bio__text { display: flex; align-items: center; justify-content: center; padding: 64px; }
.bio__well { width: 100%; max-width: 576px; }
.bio__h2 { margin: 0 0 32px; font: 800 64px/72px var(--font-display); color: var(--ink); text-wrap: balance; }
.bio__cred { font: 700 14px/24.5px var(--font-body); letter-spacing: 2.8px; text-transform: uppercase; color: var(--ink); }
.bio__rule { border-top: 2px solid var(--gold); padding-top: 24px; margin-top: 32px; }
.bio__copy p { margin: 0 0 16px; font: 400 16px/28px var(--font-body); color: var(--ink); }
.bio__copy p:last-child { margin: 0; }
.bio__copy a { color: var(--primary); font-weight: 700; text-decoration: none; transition: .2s; }
.bio__copy a:active { color: var(--primary-deep); }
@media (hover: hover) { .bio__copy a:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.bio__photo { position: relative; z-index: 2; margin-bottom: -50px; background: var(--sky-mat); padding: 64px 64px calc(64px + 50px);
  display: flex; align-items: center; justify-content: center; }
.bio__img { display: block; width: 320px; height: 100%; max-height: 525px; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 1279px) { .bio__h2 { font-size: 56px; line-height: 63px; } }
@media (max-width: 900px) {
  .bio__grid { grid-template-columns: 1fr; }
  .bio__photo { order: -1; padding: 48px; margin-bottom: 0; z-index: auto; }
  .bio__img { width: min(320px, 100%); height: auto; max-height: none; }
  .bio__text { padding: 40px 20px; }
  .bio__h2 { font-size: 48px; line-height: 54px; }
}
@media (max-width: 600px) {
  .bio__photo { padding: 32px; }
  .bio__h2 { font-size: 40px; line-height: 45px; }
}

/* ---------- H5 reviews (worcester/07; the designed moment) ----------
   SITE DELTA r4 (owner ruling 2026-09-27, overrides mobile.md's 32px peek + the spec's H5 phone peek, D5.11 / G5.9):
   exactly ONE review is visible at every width; no part of any other review ever shows at rest. The house peek rule
   was written for CARD carousels; this editorial layout has no card edge, so a peek shows cut-off raw text columns.
   Mechanism: every slide is exactly the viewport's width (flex 0 0 100%, no track gap) and clips its own box
   horizontally (clip-path inset(-40px 0): italic overhang never crosses a slide edge, vertical ascenders keep room);
   the phone's 20px gutter moves INSIDE the slide. Swipe, arrows, counter, dots, autoplay/pause, aria-live unchanged. */
.rev { background: #fff; padding: 120px 20px 40px; text-align: center; }
.rev__intro { margin-bottom: 50px; }
.rev__rating { display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  font: 400 15px/21px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.rev__rating svg { display: block; flex: none; }
@media (hover: hover) { .rev__rating:hover { text-decoration: underline; } }
.rev__h2 { font: 700 50px/55px var(--font-display); color: var(--ink); text-wrap: balance; }
.rev__viewport { max-width: 1000px; margin: 0 auto; overflow-x: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rev__viewport::-webkit-scrollbar { display: none; }
.rev__track { display: flex; list-style: none; margin: 0; padding: 0; }
.rev__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; clip-path: inset(-40px 0); display: flex; flex-direction: column; justify-content: center; }
.review { display: flex; justify-content: space-between; align-items: flex-start; text-align: left; }
.rev__quote-col { width: 100%; max-width: 445px; margin: 0; }
.rev__quote { font: italic 500 54px/54px var(--font-quote); color: var(--ink); text-wrap: balance; }
.rev__body-col { width: 100%; max-width: 490px; }
.rev__body { margin: 0 0 20px; font: 400 17px/28.9px var(--font-body); color: var(--ink); }
.rev__attr { display: flex; align-items: center; gap: 20px; }
.rev__attr svg { display: block; flex: none; }
.rev__name { font: 700 17px/24px var(--font-body); color: var(--ink); }
.rev__controls { max-width: 1000px; margin: 30px auto 0; display: grid; grid-template-columns: 445px 490px;
  justify-content: space-between; align-items: center; text-align: left; }
.rev__nav { display: flex; align-items: center; }
.rev__dots { display: none; }
.rev__row { display: flex; align-items: center; gap: 10px; }
.rev__arrow { width: 55px; height: 55px; margin: 0; padding: 0; border: 1px solid var(--ring-soft); border-radius: 50%;
  background: transparent; color: var(--primary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .3s; }
.rev__arrow:active { background: var(--sky-strong); transform: translateY(1px); }
.rev__count { margin-left: 20px; font: 400 16px/24px var(--font-body); color: var(--ink); white-space: nowrap; }
/* V5.6: the start/pause control is gone; the carousel is manual only (no autoplay to govern) */
@media (hover: hover) {
  .rev__arrow:hover { background: var(--sky-strong); }
}
.rev__cta { justify-self: start; }
.rev__cta .pill { --pill-minw: 285px; }
@media (max-width: 1024px) {
  .review { flex-direction: column; }
  .rev__quote-col, .rev__body-col { max-width: none; }
  .rev__quote { margin-bottom: 16px; }
  .rev__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
}
@media (max-width: 768px) { .rev__quote { font-size: 40px; line-height: 40px; } }
@media (max-width: 600px) {
  .rev { padding: 72px 0 40px; }
  .rev__intro { padding: 0 20px; }
  .rev__rating { flex-wrap: wrap; justify-content: center; min-height: 44px; }
  .rev__h2 { font-size: 34px; line-height: 37.4px; }
  .rev__viewport { overflow-x: auto; padding: 0; scroll-padding: 0; }
  .rev__track { gap: 0; }
  .rev__slide { flex: 0 0 100%; padding: 0 20px; align-self: flex-start; }
  .rev__quote { font-size: 36px; line-height: 40px; }
  .rev__controls { flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 0 20px; }
  .rev__nav { flex-direction: column; gap: 10px; }
  .rev__dots { display: flex; }
  .rev__dot { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .rev__dot span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--dot-off); }
  .rev__dot[aria-current="true"] span { background: var(--primary); }
  .rev__cta { align-self: center; }
}

/* ---------- H6 contact CTA + form (easthamilton/05) ---------- */
.ct { background: var(--cream); }
.ct__in { width: min(1200px, 100% - 40px); margin: 0 auto; padding: 90px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 0; }
.ct__text, .ct__card { width: 45%; }
.ct__kicker { font: 800 18px/25.2px var(--font-display); color: var(--primary); }
.ct__h2 { font: 800 54px/64.8px var(--font-display); color: var(--ink); text-wrap: balance; }
.ct__bar { display: block; height: 7px; margin-top: 20px; }
.ct__bar::before { content: ""; display: block; width: 100px; height: 3px; margin-top: 2px; background: var(--primary); }
.ct__p { margin: 30px 0 28.8px; font: 400 18px/29.7px var(--font-body); color: var(--ink); }
.ct__btns { margin-top: 30px; }
.ct__btns .pill { --pill-fs: 18px; --pill-px: 27px; height: 52px; }
.ct__card { background: #fff; border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); transition: box-shadow .3s; }
.ct__card:focus-within { box-shadow: var(--shadow-card-hover); }
@media (hover: hover) and (pointer: fine) { .ct__card:hover { box-shadow: var(--shadow-card-hover); } }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
.f-span { grid-column: 1 / -1; }
.f-field { min-width: 0; }
.f-name { min-width: 0; margin: 0; padding: 0; border: 0; }
.f-label { display: block; margin-bottom: 8px; padding: 0; font: 700 16px/20px var(--font-body); color: var(--ink); }
.f-req { font: italic 400 13px/20px var(--font-body); color: var(--ink-70); }
.f-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-sub { display: block; margin-bottom: 8px; padding-top: 5px; font: 400 15px/20px var(--font-body); color: var(--ink); }
.f-input { display: block; width: 100%; height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--field-line);
  border-radius: var(--radius-field); box-shadow: var(--shadow-field); background: #fff;
  font: 400 15px/24px var(--font-body); color: var(--ink); transition: .2s linear; }
textarea.f-input { height: 96px; resize: vertical; }
.f-input:focus { border-color: var(--primary); outline: var(--focus-light); outline-offset: 3px; box-shadow: none; }
.f-input[aria-invalid="true"] { border-color: var(--error); }
.is-invalid > .f-label, .is-invalid .f-sub.is-invalid, .f-name.is-invalid > .f-label { color: var(--error); }
.f-msg { margin-top: 8px; padding: 13px 24px; background: var(--error-wash); border: 1px solid var(--error); border-radius: 0;
  font: 400 15px/24.75px var(--font-body); color: var(--error); }
.f-summary { position: relative; padding: 16px 16px 16px 48px; background: var(--error-wash); border: 1px solid var(--error);
  border-radius: 5px; color: var(--error); }
.f-summary svg { position: absolute; left: 10px; top: 12px; width: 28px; height: 28px; }
.f-summary__h { font: 700 14px/20px var(--font-body); color: var(--error); }
.f-summary ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; font: 400 14px/22px var(--font-body); }
.f-summary a { color: var(--error); }
.f-summary:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.f-submit .pill { --pill-px: 30px; }
.f-note { margin-top: 12px; font: 400 14px/21px var(--font-body); color: var(--ink-70); }
.f-status { font: 700 16px/24px var(--font-body); color: var(--ink); }
@media (max-width: 780px) {
  .ct__in { flex-direction: column; padding: 64px 0; }
  .ct__text, .ct__card { width: 100%; }
  .ct__text { margin-bottom: 30px; text-align: center; }
  .ct__bar::before { margin-left: auto; margin-right: auto; }
  .ct__h2 { font-size: 34px; line-height: 40.8px; }
}
@media (max-width: 640px) { .ct-form, .f-pair { grid-template-columns: 1fr; } }

/* ---------- H7 location band (schillingfarms/08; map live at rest, ADDENDUM F6) ---------- */
.loc { --loc-h: max(calc(100vh - var(--sticky-h)), 50.625vw); display: flex; flex-wrap: wrap; width: 100%; overflow: hidden;
  background: var(--primary-deep) url("../assets/texture-linen.png") 0 0 / 800px 800px repeat; }
.loc__panel { width: 50%; min-height: var(--loc-h); display: flex; align-items: center; justify-content: center; }
.loc__map { position: relative; width: 50%; height: var(--loc-h);
  background: url("../assets/map-card.png") 8px 8px no-repeat, url("../assets/map-attrib.png") right bottom no-repeat,
    url("../assets/map-facade.png") center / 1440px 1440px no-repeat var(--map-land); }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loc__text { width: 100%; margin: 18px 0 0; padding: 0 24px; text-align: center; color: #fff; }
.loc__h2 { margin: 0 0 18px; font: 700 clamp(48px, 5vw, 72px)/.9 var(--font-display); color: #fff; text-wrap: balance; }
.loc__p, .loc__hours { font: 400 16px/24.8px var(--font-body); text-transform: uppercase; color: #fff; }
.loc__p { margin: 0 0 20px; }
.loc__email { text-transform: none; }
.loc__hours { margin: 0 auto 20px; border-collapse: collapse; }
.loc__hours caption { font: inherit; }
.loc__hours th { padding: 0 8px; font-weight: 400; text-align: right; }
.loc__hours td { padding: 0 8px; text-align: left; }
.loc__social { margin: 0; }
.loc__text a { display: inline-block; color: #fff; text-decoration: none; transition: opacity .3s ease-out; }
.loc__text a:focus-visible { outline: var(--focus-dark); outline-offset: 3px; }
.loc__fb { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
@media (hover: hover) { .loc__text a:hover { opacity: .6; } }
@media (max-width: 759px) {
  .loc { display: block; }
  .loc__panel { width: 100%; min-height: 0; padding: 78px 20px 58px; }
  .loc__text { padding: 0; }
  .loc__map { width: 100%; height: max(50vh, 330px); }
}
@media (max-width: 600px) {
  .loc__h2 { font-size: 44px; }
  .loc__text a { display: inline-flex; min-height: 44px; align-items: center; }
  .loc__fb { width: 44px; justify-content: center; }
}

/* ---------- H8 footer (newlife/12) ---------- */
.ft { background: var(--ink); color: #fff; padding: 64px 0; font-size: 14.4px; }
.ft__in { width: min(100% - 96px, 1600px); margin: 0 auto; }
.ft__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 21.6px; }
.ft__title { margin: 0 0 16px; font: 700 21.6px/1.2 var(--font-display); color: #fff; }
.ft__rule { border-top: 2px solid var(--gold); padding-top: 21.6px; }
.ft__h4 { margin: 0 0 4px; font: 700 14.4px/1.2 var(--font-display); color: #fff; }
.ft__group { margin-bottom: 14.4px; }
.ft__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14.4px; }
.ft__pair > .ft__group { margin-bottom: 0; }
.ft__rule > .ft__pair { margin-bottom: 14.4px; }
.ft__list { margin: 0; padding: 0; list-style: none; }
.ft__link { display: inline-block; padding: 10.9px 0; font: 400 14.4px/25.2px var(--font-body); color: #fff;
  text-decoration: none; transition: color .2s; }
.ft__text { display: block; font: 400 14.4px/25.2px var(--font-body); color: #fff; }
.ft__fb { display: inline-flex; width: 44px; height: 44px; margin-left: -11px; align-items: center; justify-content: center;
  color: #fff; transition: color .2s; }
.ft :focus-visible { outline: var(--focus-dark); outline-offset: 3px; }
.ft__chipwrap { margin: 0; }
.ft__chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; background: #fff;
  border-radius: var(--radius-chip); box-shadow: var(--shadow-chip); color: var(--ink); text-decoration: none; transition: .2s; }
.ft__chip svg { display: block; flex: none; }
.ft__chip-num { font: 700 15px/1 var(--font-body); }
.ft__chip-txt { font: 400 15px/1 var(--font-body); color: var(--primary); white-space: nowrap; }
@media (hover: hover) {
  .ft__link:hover, .ft__fb:hover { color: var(--gold); }
  .ft__chip:hover { background: var(--sky); }
  .ft__chip:hover .ft__chip-n { text-decoration: underline; }
}
.ft__legal { margin-top: 43.2px; padding: 43.2px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 21.6px;
  font: 400 14.4px/25.2px var(--font-body); color: #fff; }
.ft__legal p:last-child { text-align: right; }
@media (max-width: 767px) {
  .ft__grid { grid-template-columns: 1fr; }
  .ft__legal { grid-template-columns: 1fr; }
  .ft__legal p:last-child { text-align: left; }
}
@media (max-width: 600px) {
  /* V5.2: no fixed bar to pay for; the base 64px 0 padding stands */
  .ft__in { width: calc(100% - 40px); }
  .ft__link { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
}
/* build delta B3.3: the one-line chip is 319px wide; under 360 it would overflow the 280px well, so its label wraps */
@media (max-width: 359px) {
  .ft__chip { height: auto; min-height: 44px; padding: 6px 16px; flex-wrap: wrap; }
}

/* ---------- scroll reveals (ADDENDUM 2 M2: quincy-int/01 CORRECTION (c) + quincy-interactive/07) ----------
   Hidden states exist only under html.js-motion (head script, never under reduced motion); js/home.js adds .is-in
   to a band once (IntersectionObserver, -10% bottom margin). Never on .hero, main or body. */
.js-motion [data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.js-motion [data-reveal="lead"] { transform: translateY(48px); }
.js-motion [data-reveal="head"] { transform: translateY(24px); transition-delay: .1s; }
.js-motion [data-reveal="body"] { transform: translateY(24px); transition-delay: .4s; }
.js-motion [data-reveal="fade"] { transition: opacity .6s ease-out; }
.js-motion .ct__card[data-reveal] { transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.is-in [data-reveal] { opacity: 1; transform: none; }

/* ---------- reduced motion (spec 0.8) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation: none !important; scroll-behavior: auto !important; }
}