/* Kreeb Family Dentistry: site styles. Source of truth: kreeb-build/mockup (approved v2, 2026-11-01). */
/* Kreeb Family Dentistry mockup styles (2026-11-01).
   Tokens become Bricks variables; every colour pair used for text is listed in tokens.md with its ratio. */

@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-vf.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-vf-italic.woff2) format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* Metric-matched fallbacks so the swap does not shift the layout */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 92%; descent-override: 24%; }

:root {
  --ink: #1D2B2D;          /* body text: 13.9:1 on bg */
  --ink-soft: #45555A;     /* secondary text: 7.4:1 on bg, 6.6:1 on sand */
  --bg: #FBF9F5;           /* warm alabaster page */
  --sand: #F2ECE2;         /* alternate band; never the only edge of a control */
  --white: #FFFFFF;
  --teal: #0B5D58;         /* actions and links: white on teal 7.7:1, teal on bg 7.3:1 */
  --teal-dark: #08433F;    /* hover, footer: white 11.1:1 */
  --teal-tint: #E3EFEC;    /* soft panel: teal text 6.6:1 */
  --gold: #CEA634;         /* logo gold: decoration and on ink only (5.6:1); never text on light, never under white text */
  --gold-text: #7D5E12;    /* eyebrow text: 5.7:1 on bg */
  --line: #D9D1C3;         /* decorative dividers only */
  --control-edge: #6B7B7F; /* input and card edges: 4.3:1 on white */

  --font-head: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", Arial, sans-serif;

  --step--1: 0.9375rem;    /* 15px */
  --step-0: 1.0625rem;     /* 17px base, in rem so browser text size scales it */
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --radius: 0.75rem;
  --radius-lg: 1.25rem;
  --shadow: 0 1px 2px rgba(29,43,45,.06), 0 8px 24px rgba(29,43,45,.08);
  --wrap: 72rem;
  --header-h: 4.5rem;
  --bar-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 560; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--teal); color: var(--white); padding: .75rem 1rem; border-radius: var(--radius); z-index: 100; font-weight: 700; }
.skip:focus { top: 1rem; color: var(--white); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--sand { background: var(--sand); }
.section--tint { background: var(--teal-tint); }
.eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .75rem; }
.lede { font-size: var(--step-1); color: var(--ink); }
.muted { color: var(--ink-soft); }
.section-head { max-width: 46rem; margin-bottom: 2.25rem; }

/* Buttons: 48px tall minimum */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; font-weight: 700; font-size: var(--step-0); text-decoration: none; border: 2px solid transparent; line-height: 1.2; cursor: pointer; }
.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover { background: var(--teal-dark); color: var(--white); }
.btn--ghost { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn--ghost:hover { background: var(--teal-tint); color: var(--teal-dark); }
.btn--light { background: var(--white); color: var(--teal-dark); }
.btn--light:hover { background: var(--teal-tint); color: var(--teal-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,249,245,.97); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.logo img { width: 9.5rem; height: auto; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; padding-block: .5rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; text-underline-offset: 6px; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone { display: none; color: var(--ink); font-weight: 700; text-decoration: none; }
.header-phone:hover { color: var(--teal); }
.header-actions .btn { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1rem; border: 2px solid var(--control-edge); border-radius: 999px; font-weight: 700; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); width: min(20rem, 90vw); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; }
.menu-panel a { display: block; padding: .8rem 1rem; color: var(--ink); text-decoration: none; font-weight: 700; border-radius: .5rem; }
.menu-panel a:hover { background: var(--teal-tint); color: var(--teal-dark); }
@media (min-width: 64rem) {
  .nav { display: block; }
  .menu { display: none; }
  .header-phone, .header-actions .btn { display: inline-flex; }
}

/* Hero: real <img>, no video, no text animation */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal-tint); color: var(--teal-dark); font-weight: 700; font-size: var(--step--1); padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.25rem; }
.pill::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); }
.hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.15rem); }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--teal); }
.hero .byline { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1rem; }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 1440 / 855; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 2.5rem -0.85rem auto auto; width: 45%; height: 55%; border-radius: var(--radius-lg); background: var(--gold); opacity: .22; z-index: -1; }
.hero-note { position: relative; margin: -1.75rem 0 0 1.25rem; width: fit-content; background: var(--white); border-radius: var(--radius); padding: .7rem 1rem; box-shadow: var(--shadow); font-size: var(--step--1); max-width: 17rem; }
.hero-note strong { display: block; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }

/* Trust strip (values come from ACF site settings) */
.trust { border-block: 1px solid var(--line); background: var(--white); }
.trust ul { list-style: none; margin: 0; padding: 1.1rem 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }
.trust li { display: flex; gap: .7rem; align-items: center; font-size: var(--step--1); line-height: 1.35; }
.trust li strong { display: block; font-size: var(--step-0); }
.trust .badge { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--teal-tint); display: grid; place-items: center; color: var(--teal); }
@media (max-width: 30rem) { .trust ul { gap: .9rem 1rem; } .trust .badge { width: 2rem; height: 2rem; } .trust li { gap: .5rem; } }
@media (min-width: 56rem) { .trust ul { grid-template-columns: repeat(4, 1fr); } }

/* Service cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.35rem 1.25rem; transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: var(--shadow); border-color: var(--control-edge); }
.card h3 { margin-bottom: .35rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card h3 a:hover { color: var(--teal); }
.card p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.card .go { margin-top: .9rem; display: inline-flex; color: var(--teal); font-weight: 700; font-size: var(--step--1); }
.card--feature { border-top: 4px solid var(--gold); }
.more-link { margin-top: 1.75rem; }

/* Doctors */
.docs { display: grid; gap: 1.5rem; }
.doc { display: grid; grid-template-columns: 7rem 1fr; gap: 1.25rem; align-items: start; background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem; border: 1px solid var(--line); }
.doc img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; background: var(--sand); border: 4px solid var(--teal-tint); box-shadow: 0 0 0 1px var(--line); }
.doc h3 { font-family: var(--font-head); font-size: var(--step-2); font-weight: 560; margin-bottom: .2rem; }
.doc h3 a { color: var(--ink); text-decoration: none; }
.doc h3 a:hover { color: var(--teal); text-decoration: underline; }
.doc .role { color: var(--gold-text); font-weight: 700; font-size: var(--step--1); margin-bottom: .6rem; }
.doc p { font-size: var(--step--1); }
.docs-intro { display: grid; gap: 2rem; align-items: center; }
.docs-intro img { border-radius: var(--radius-lg); aspect-ratio: 915/757; object-fit: cover; }
@media (min-width: 56rem) { .docs { grid-template-columns: 1fr 1fr; } .docs-intro { grid-template-columns: 1.1fr .9fr; } }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li { counter-increment: step; background: var(--white); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.25rem 4.25rem; position: relative; border: 1px solid var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 1.15rem; top: 1.1rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.steps h3 { margin-bottom: .25rem; }
.steps p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Reviews band */
.reviews-band { background: var(--ink); color: var(--white); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1rem + 3vw, 3rem); display: grid; gap: 1.5rem; align-items: center; }
.reviews-band h2 { color: var(--white); margin-bottom: .4rem; }
.reviews-band p { color: #E4E9E9; margin: 0; }
.rating { display: flex; align-items: baseline; gap: .75rem; }
.rating .num { font-family: var(--font-head); font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 600; color: var(--gold); line-height: 1; }
.rating .of { color: #E4E9E9; font-size: var(--step--1); }
@media (min-width: 56rem) { .reviews-band { grid-template-columns: auto 1fr auto; gap: 3rem; } }

/* Visit */
.visit { display: grid; gap: 2rem; }
.nap { font-style: normal; font-size: var(--step-1); line-height: 1.5; margin-bottom: 1.25rem; }
.hours { width: 100%; max-width: 26rem; border-collapse: collapse; margin-bottom: 1.5rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { font-weight: 700; }
.map { border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); min-height: 18rem; display: grid; place-items: center; text-align: center; padding: 2rem; border: 1px dashed var(--control-edge); color: var(--ink-soft); }
@media (min-width: 56rem) { .visit { grid-template-columns: 1fr 1.1fr; align-items: start; } }

/* FAQ: native details */
.faq { max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 700; font-size: var(--step-1); position: relative; min-height: 3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: .8rem; height: .8rem; border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding: 0 0 1.25rem; }
.faq details p { margin: 0; }

/* CTA band */
.cta { background: var(--teal); color: var(--white); border-radius: var(--radius-lg); padding: clamp(2rem, 1rem + 3vw, 3.5rem); display: grid; gap: 1.5rem; }
.cta h2 { color: var(--white); margin-bottom: .4rem; }
.cta p { color: #EAF4F2; margin: 0; }
.cta .btn--ghost { border-color: var(--white); color: var(--white); }
.cta .btn--ghost:hover { background: var(--teal-dark); color: var(--white); }
@media (min-width: 56rem) { .cta { grid-template-columns: 1fr auto; align-items: center; } }

/* Footer */
.site-footer { background: var(--teal-dark); color: #E7F0EE; padding-block: 3rem 2rem; margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.site-footer a { color: var(--white); }
.footer-grid { display: grid; gap: 2rem; }
.site-footer h2 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; color: var(--white); margin-bottom: .75rem; letter-spacing: .02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer .small { font-size: var(--step--1); color: #C9DAD7; border-top: 1px solid rgba(255,255,255,.18); margin-top: 2rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.footer-logo { background: var(--white); display: inline-block; padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: 1rem; }
.footer-logo img { width: 8rem; }
@media (min-width: 56rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* Mobile thumb-zone bar: 48px buttons, safe-area padding, focus never hidden behind it */
.thumb-bar { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(29,43,45,.08); padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.thumb-bar > * { min-width: 0; }
.thumb-bar .btn { min-height: 3rem; padding-inline: .5rem; font-size: var(--step--1); white-space: nowrap; }
@media (max-width: 26rem) { .thumb-bar .btn .icon { display: none; } .thumb-bar .btn { font-size: .8125rem; padding-inline: .3rem; } }
@media (max-width: 63.99rem) {
  html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 1rem); }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 64rem), (max-height: 26rem) { .thumb-bar { display: none; } body { padding-bottom: 0; } }
body:has(input:focus, textarea:focus, select:focus) .thumb-bar { display: none; }

/* Treatment page */
.crumbs { font-size: var(--step--1); padding-top: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.t-hero { padding-block: 1.5rem 2.5rem; }
.t-hero-grid { display: grid; gap: 2rem; align-items: center; }
.t-hero .subtext { font-size: var(--step-1); color: var(--ink-soft); max-width: 40rem; }
.t-hero-media img { border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
@media (min-width: 56rem) { .t-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.reviewer { display: flex; align-items: center; gap: .6rem; font-size: var(--step--1); color: var(--ink-soft); margin: .25rem 0 1.25rem; }
.reviewer .flag { background: #FFF2CC; color: #5C4300; border: 1px solid #C9A227; border-radius: .4rem; padding: .1rem .5rem; font-weight: 700; }

.t-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 64rem) { .t-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; } .t-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; max-width: 68ch; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--teal); }
.prose > p:first-child { font-size: var(--step-1); }
.answer { background: var(--white); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.5rem; font-size: var(--step-1); margin-bottom: 2rem; }
.answer p { margin: 0; }

.table-scroll { overflow-x: auto; margin: 1.25rem 0 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.table-scroll:focus-visible { outline-offset: 2px; }
.prose table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--teal-tint); color: var(--teal-dark); font-weight: 700; }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose td:first-child { font-weight: 700; }
@media (max-width: 47.99rem) {
  .table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--line); min-width: 7.5rem; }
  .table-scroll thead th:first-child { background: var(--teal-tint); }
  .swipe-hint { display: block; font-size: var(--step--1); color: var(--ink-soft); margin: -.75rem 0 1.5rem; }
}
.swipe-hint { display: none; }
.facts table { min-width: 0; }
.facts { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; margin-bottom: 2rem; }
.facts h2 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; margin: 0; padding: .8rem 1rem; background: var(--teal-tint); color: var(--teal-dark); }
.facts dl { margin: 0; display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); }
.facts dt, .facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts dt, .facts dd { margin: 0; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: var(--step--1); }
.facts dt { font-weight: 700; }
@media (max-width: 36rem) { .facts dl { grid-template-columns: minmax(0, 1fr); } .facts dd { border-top: 0; padding-top: 0; } }

.aside-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem; margin-bottom: 1rem; }
.aside-card h2 { font-family: var(--font-body); font-size: var(--step-1); font-weight: 700; margin-bottom: .5rem; }
.aside-card p { font-size: var(--step--1); }
.aside-card .btn { width: 100%; margin-top: .5rem; }
.aside-card--book { background: var(--teal-tint); border-color: transparent; }
.aside-card ul { padding-left: 1.1rem; margin: 0 0 .75rem; font-size: var(--step--1); }
.toc a { display: block; padding: .4rem 0; min-height: 1.75rem; font-size: var(--step--1); }
.block-off { border: 2px dashed var(--control-edge); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--ink-soft); font-size: var(--step--1); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(107,123,127,.06) 10px 20px); }
.block-off strong { color: var(--ink); }
.sources { font-size: var(--step--1); color: var(--ink-soft); word-break: break-word; }
.sources h2 { font-size: var(--step-1); }


@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Kreeb homepage v2: bolder layer on top of kreeb.css (same tokens).
   Media fallback order: practice photo/video, then stock, then a labelled placeholder. */

:root { --slate-950: #0C1F1F; --step-5: clamp(2.6rem, 1.6rem + 4.2vw, 4.75rem); }

/* Header sits on the light page; the hero below is full-bleed */
.v2 .site-header { background: rgba(251,249,245,.96); backdrop-filter: saturate(1.2); }

/* Full-bleed video hero. Base layer is a real <img> (LCP); the video is added by script after load,
   only at 768px+ with reduced motion and Save-Data off. Text sits on a solid gradient panel, so
   contrast holds on any frame even without the baked grade: the text column ends at about 55% of the width, where the overlay is at least 71% slate (worst case white frame: 6.5:1, computed 2026-11-01). */
.vhero { position: relative; isolation: isolate; background: var(--slate-950); color: var(--white); overflow: hidden; }
.vhero-media { position: relative; aspect-ratio: 4 / 3; }
.vhero-media img, .vhero-media video, .vhero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero-media video { opacity: 0; transition: opacity .8s ease; }
.vhero-media video.is-playing { opacity: 1; }
.vhero-copy { position: relative; padding: 2rem 0 2.75rem; }
.vhero h1 { font-size: var(--step-5); font-weight: 520; color: var(--white); letter-spacing: -0.02em; margin-bottom: .5em; }
.vhero h1 em { font-style: italic; color: var(--gold); font-weight: 480; }
.vhero .lede { color: #E9EFEE; font-size: var(--step-1); max-width: 36rem; }
.vhero .byline { color: #C5D3D1; font-size: var(--step--1); margin-bottom: 1rem; }
.vhero .pill { background: rgba(255,255,255,.12); color: var(--white); border: 1px solid rgba(255,255,255,.25); }
.vhero .pill::before { background: #6FD3B8; }
.vhero .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.8); }
.vhero .btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
.vhero .btn--primary { background: var(--white); color: var(--teal-dark); }
.vhero .btn--primary:hover { background: var(--teal-tint); color: var(--teal-dark); }
.vhero-pause { position: absolute; right: 1.25rem; top: 1.25rem; z-index: 3; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(12,31,31,.7); color: var(--white); font: 700 var(--step--1) var(--font-body); cursor: pointer; }
.vhero-pause:hover { background: rgba(12,31,31,.9); }
@media (min-width: 48rem) {
  .vhero { min-height: min(46rem, 82vh); display: grid; align-items: center; }
  .vhero-media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .vhero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,31,31,.92) 0%, rgba(12,31,31,.8) 50%, rgba(12,31,31,.4) 72%, rgba(12,31,31,.12) 100%); }
  .vhero-copy { padding: 4rem 0 6.5rem; max-width: 40rem; }
}

/* Trust bar floats over the hero edge */
.v2 .trust { border: 0; background: transparent; position: relative; z-index: 2; }
.v2 .trust ul { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-top: -1.5rem; }
@media (min-width: 48rem) { .v2 .trust ul { margin-top: -3.25rem; } }

/* Big section headings */
.v2 .section h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 520; letter-spacing: -0.02em; }
.v2 .section h2 em { font-style: italic; color: var(--teal); font-weight: 480; }

/* Featured services: image-led, asymmetric */
.featured { display: grid; gap: 1.25rem; }
.feat { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--slate-950); color: var(--white); min-height: 20rem; display: flex; align-items: flex-end; isolation: isolate; }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,31,31,0) 25%, rgba(12,31,31,.88) 72%, rgba(12,31,31,.96) 100%); }
.feat:hover img { transform: scale(1.04); }
.feat-body { padding: 1.5rem; }
.feat h3 { font-family: var(--font-head); font-size: var(--step-2); font-weight: 520; margin-bottom: .35rem; }
.feat h3 a { color: var(--white); text-decoration: none; }
.feat h3 a::after { content: ""; position: absolute; inset: 0; }
.feat p { color: #DCE6E4; font-size: var(--step--1); margin: 0 0 .75rem; }
.feat .go { color: var(--gold); font-weight: 700; font-size: var(--step--1); }
.feat--placeholder { background: linear-gradient(135deg, #12403C, #0C1F1F); }
.feat--placeholder .ph { position: absolute; top: 1rem; left: 1rem; right: 1rem; font-size: .8125rem; background: #FFF2CC; color: #3D2E00; border-radius: .5rem; padding: .45rem .65rem; }
@media (min-width: 56rem) {
  .featured { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
  .feat--big { grid-row: span 2; min-height: 34rem; }
}
.svc-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem .25rem; color: var(--ink); text-decoration: none; font-weight: 700; }
.svc-list a span { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
.svc-list a::after { content: ""; flex: none; width: .6rem; height: .6rem; border-top: 2.5px solid var(--teal); border-right: 2.5px solid var(--teal); transform: rotate(45deg); transition: transform .2s; }
.svc-list a:hover { color: var(--teal); }
.svc-list a:hover::after { transform: translateX(4px) rotate(45deg); }
@media (min-width: 56rem) { .svc-list { column-gap: 2.5rem; } }

/* Dark dentists section */
.dark { background: var(--slate-950); color: #E3EBEA; }
.dark h2, .dark h3 { color: var(--white); }
.dark .eyebrow { color: var(--gold); }
.dark a { color: #9FE3D2; }
.dark a:hover { color: var(--white); }
.docs2 { display: grid; gap: 2.5rem; align-items: center; }
.docs2-photo { position: relative; }
.docs2-photo img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3.3; object-fit: cover; }
.docs2-photo figcaption { margin-top: .6rem; font-size: var(--step--1); color: #B9C8C6; }
.doc2 { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.doc2 img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: var(--white); }
.doc2 h3 { font-family: var(--font-head); font-size: var(--step-2); font-weight: 520; margin-bottom: .15rem; }
.doc2 h3 a { color: var(--white); text-decoration: none; }
.doc2 h3 a:hover { text-decoration: underline; }
.doc2 .role { color: var(--gold); font-weight: 700; font-size: var(--step--1); margin-bottom: .4rem; }
.doc2 p { font-size: var(--step--1); color: #D3DEDC; margin-bottom: .5rem; }
@media (min-width: 56rem) { .docs2 { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Full-width team band */
.team-band { position: relative; display: none; }
@media (min-width: 48rem) { .team-band { display: block; } }
.team-band img { width: 100%; height: clamp(18rem, 42vw, 34rem); object-fit: cover; object-position: center 30%; }
.team-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 0 1.25rem; background: linear-gradient(180deg, rgba(12,31,31,0), rgba(12,31,31,.85)); color: var(--white); font-weight: 700; }

/* New patients with photo */
.np { display: grid; gap: 2.5rem; align-items: center; }
.np-photo img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.v2 .steps { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .np { grid-template-columns: .95fr 1.05fr; gap: 4rem; } }

/* Visit with exterior photo */
.visit2-photo img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.visit2-photo figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: .5rem; }

/* CTA with photo background */
.cta2 { position: relative; isolation: isolate; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem); display: grid; gap: 1.5rem; }
.cta2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,67,63,.95) 0%, rgba(8,67,63,.88) 55%, rgba(8,67,63,.7) 100%); }
.cta2 h2 { color: var(--white); margin-bottom: .4rem; }
.cta2 p { color: #E3F0ED; margin: 0; }
.cta2 .btn--ghost { color: var(--white); border-color: var(--white); }
.cta2 .btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
@media (min-width: 56rem) { .cta2 { grid-template-columns: 1fr auto; align-items: center; } }

/* Scroll reveal: below the fold only, added by script, off for reduced motion and without JS */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .feat:hover img { transform: none; } }

/* Treatment page hero (v2) */
.thero .vhero-copy { padding-top: 1.5rem; }
@media (min-width: 48rem) { .thero { min-height: min(34rem, 70vh); } .thero .vhero-copy { padding: 2.5rem 0 4rem; } }
.thero h1 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); }
.thero .eyebrow { color: var(--gold); }
.thero .flag { background: #FFF2CC; color: #5C4300; border-radius: .4rem; padding: .1rem .5rem; font-weight: 700; margin-left: .4rem; }
.crumbs--dark { padding: 0 0 1.25rem; }
.crumbs--dark a, .crumbs--dark li, .crumbs--dark li + li::before { color: #C5D3D1; }
.crumbs--dark a:hover { color: var(--white); }
.v2 .prose h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 520; letter-spacing: -0.015em; }
.v2 .t-layout { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.v2 .answer { border-left-color: var(--teal); box-shadow: var(--shadow); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.v2 .aside-card--book { background: var(--slate-950); color: #E3EBEA; }
.v2 .aside-card--book h2 { color: var(--white); }
.v2 .aside-card--book .btn--primary { background: var(--white); color: var(--teal-dark); }
.v2 .aside-card--book .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.8); }
.v2 .aside-card--book .btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }

/* ===== Bricks integration (build) ===== */
#brx-header { position: sticky; top: 0; z-index: 50; }
#brx-header .site-header { position: static; }
#brx-content > .brxe-section, #brx-content > section { width: 100%; }
.brxe-text-basic, .brxe-heading { max-width: none; }
.brxe-image img, .kr-media img { display: block; }
.nav details { position: relative; }
.nav summary { list-style: none; cursor: pointer; font-weight: 700; padding-block: .5rem; display: inline-flex; align-items: center; gap: .35rem; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav .sub { position: absolute; top: calc(100% + .5rem); left: -1rem; min-width: 17rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; display: grid; gap: 0; }
.nav .sub a { display: block; padding: .55rem .8rem; border-radius: .5rem; font-weight: 400; }
.nav .sub a:hover { background: var(--teal-tint); text-decoration: none; }
.menu-panel .sub { padding-left: 1rem; }
.menu-panel { max-height: 75vh; overflow: auto; }
.kr-children { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 1rem 0 2rem; }
.kr-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.kr-gallery img { border-radius: var(--radius); }
.prose img { border-radius: var(--radius); }
.posts-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.page-404 { text-align: center; } .page-404 .btn-row { justify-content: center; }
.gform_wrapper.gravity-theme .gfield_label { font-weight: 700; }
.team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.member { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.member img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 25%; }
.member > div { padding: 1.25rem 1.35rem; }
.member h2 { font-size: var(--step-2); margin: 0 0 .2rem; }
.member .role { color: var(--gold-text); font-weight: 700; font-size: var(--step--1); }
.member p { font-size: var(--step--1); }
.case { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 1rem 0; }
.case figure { margin: 0; } .case img { border-radius: var(--radius); width: 100%; }
.case figcaption { font-weight: 700; font-size: var(--step--1); margin-top: .35rem; }
.facts ul { margin: 0; padding: .8rem 1rem .8rem 2rem; }
.std-page { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.std-page .prose { max-width: 50rem; }
.site-header .logo { flex: none; display: block; }
.site-header .logo img { width: 9.5rem; height: auto; }
.header-actions { flex: none; }
.header-actions p { margin: 0; }
.header-phone { white-space: nowrap; }
.site-header .wrap > .nav { flex: 1 1 auto; display: none; justify-content: center; }
@media (min-width: 64rem) { .site-header .wrap > .nav { display: flex; } }
.site-header .btn, .thumb-bar .btn { white-space: nowrap; }
.svc-list a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; }
.svc-list a span { grid-column: 1; }
.svc-list a::after { grid-column: 2; grid-row: 1 / span 2; }
.svc-list .brxe-text, .svc-list .brxe-text p { margin: 0; }
.card .card-title { font-family: var(--font-body); font-size: var(--step-1); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: .75rem 0 .35rem; }
.card .card-title a { color: var(--ink); text-decoration: none; }
.card .card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card .card-title a:hover { color: var(--teal); }
.site-footer li a { display: inline-block; padding: .2rem 0; min-height: 1.5rem; }
.toc a { padding: .5rem 0; min-height: 2rem; }
.case figcaption { color: var(--ink); }
.prose .card-title { margin-top: .5rem; }
/* Bricks sets html { font-size: 62.5% }; our tokens are written for a 16px root so browser text size scales them */
html { font-size: 100%; }
.thumb-bar .brxe-text, .thumb-bar p { margin: 0; }
.thumb-bar .btn { width: 100%; }
.prose table.hours, .prose .facts table { min-width: 0; width: 100%; }

/* long source URLs must wrap on phones */
.prose, .prose li, .prose a, .sources, .sources a { overflow-wrap: anywhere; }
/* rating number on light pages: gold fails contrast there, use the text gold */
.std-page .rating .num { color: var(--gold-text); }
.std-page .rating .of { color: var(--ink-soft); }