/* Modern Dental Hub — the design of the site (Rules 2, 15, 21, 44). Owner decision 2026-10-06: the look of the clinic's
   current website (moderndentalhub.com, Elementor kit) carried over: Signature Gold #B28D51, Charcoal #222222, the deep
   greens #202924 / #212724 / #1A1F1D, Soft Gray #F2F2F2; Playfair Display headings, Raleway text, Inter controls; the
   Art-Deco patterns of its hero, its services band and its "Why choose" section (src/hero-pattern.svg, src/band.svg,
   src/pattern-green.svg are the clinic's own SVGs); pill buttons, black-and-white portrait service cards, outlined
   boxes, rounded FAQ questions and the footer on the photo of the office sign.
   Rule 2 kept over the old site where they differ: the action colour is gold with charcoal text (white on gold is
   3.1:1, below Rule 21), never black; card buttons are gold too.
   Contrast (Rule 21): charcoal on gold 5.2:1; gold on charcoal 5.2:1, on the FAQ green 4.9:1, on the deep green 4.9:1;
   gold-deep #7D5F33 on white 5.9:1 and on Soft Gray 5.3:1 (links, labels); gold-h #A27F45 on white 3.7:1 (large
   headings and numerals only); the grey heading #7E7E7E on Soft Gray 3.6:1 (large text only); text #2B2B2B on white
   14:1; muted #5C5C5C on Soft Gray 6.2:1; #E6E3DC on charcoal 12.9:1.
   Colour contexts: white is the default; .sec-gray (Soft Gray), .sec-dark (Charcoal), .sec-pattern (deep green with the
   pattern), .sec-deep (the FAQ green) and .sec-night (the visit green) redefine the same variables. */
:root {
  --gold: #B28D51;
  --gold-2: #C4A36A;
  --gold-deep: #7D5F33;
  --gold-h: #A27F45;
  --gold-soft: #F6F1E7;
  --charcoal: #222222;
  --hero: #252525;
  --green: #202924;
  --deep: #212724;
  --night: #1A1F1D;
  --pattern-bg: #171D1A;
  --ink: #111111;
  --gray: #F2F2F2;
  --gray-head: #7E7E7E;
  --label: #4A4A4A;
  --white: #FFFFFF;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 5vw, 64px);
  --edge: max(var(--pad), calc((100vw - 1200px) / 2));
  --sec: clamp(72px, 8vw, 110px);
  --topbar-h: 46px;
  --header-h: 96px;
  --top: calc(var(--topbar-h) + var(--header-h));
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  /* Room kept clear of the bottom action bar: its expanded height plus its gap to the edge */
  --bar-space: calc(84px + max(12px, env(safe-area-inset-bottom)));
  /* The light context */
  --bg: var(--white);
  --fg: var(--ink);
  --text: #2B2B2B;
  --muted: #5C5C5C;
  --eyebrow: var(--gold-deep);
  --h2: var(--ink);
  --accent: var(--gold-h);
  --line: rgba(34, 34, 34, 0.14);
  --box: rgba(17, 17, 17, 0.85);
  --focus: var(--gold-deep);
  --card: var(--white);
}
.sec-gray, .promos, .practice, .reviews, .insurance, .doctors-strip, .contact-details, .profile-facts {
  --bg: var(--gray); --line: rgba(34, 34, 34, 0.16); background: var(--bg);
}
.sec-dark, .services, .tiles-sec, .mid-cta, .sec-pattern, .why, .sec-deep, .faq, .sec-night, .journey, .page-hero {
  --bg: var(--charcoal); --fg: var(--white); --text: #E6E3DC; --muted: #BDB8AE; --eyebrow: var(--gold-2); --h2: var(--gold); --accent: var(--gold);
  --line: rgba(255, 255, 255, 0.2); --box: rgba(255, 255, 255, 0.88); --focus: var(--gold-2); --card: #2B2B2B;
  background: var(--bg); color: var(--fg);
}
.sec-pattern, .why { --bg: var(--pattern-bg); }
.sec-deep, .faq { --bg: var(--deep); }
.sec-night, .journey { --bg: var(--night); }
/* The deep-green Art-Deco pattern of the current "Why choose" section and of its inner-page heroes */
.sec-pattern, .why, .page-hero { position: relative; isolation: isolate; }
.sec-pattern::before, .why::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/pattern-green.svg") 0 0 / 460px auto repeat; }
.sec-pattern::after, .why::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23, 29, 26, 0.35); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; scroll-padding-bottom: var(--bar-space); -webkit-text-size-adjust: 100%; background: var(--charcoal); }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; font-variant-numeric: lining-nums; color: var(--fg); background: var(--white); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; max-width: 20ch; color: var(--h2); }
h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.22; }
p, figure, ul, ol, dl, dd, address { margin: 0; }
address { font-style: normal; }
.container { width: min(1200px, 100% - 2 * var(--pad)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--white); color: var(--ink); font-weight: 600; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }

.eyebrow { font: 600 12px/1.5 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.lede { max-width: 54ch; font-size: clamp(17px, 1.2vw, 18px); line-height: 1.6; color: var(--text); }
.lede a, .fine-print a, .prose a { color: var(--fg); text-underline-offset: 4px; text-decoration-color: var(--gold); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.two-col > * { min-width: 0; }
.stack > .prose { margin-top: 26px; max-width: 72ch; }
.sec-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.sec-head-split > * { min-width: 0; }
.sec-head-split .lede { padding-top: 6px; }
.sec-head-split .text-link { justify-self: start; }
.card-kicker { font: 600 12px/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; }
.fine-print { max-width: 70ch; font-size: 15px; color: var(--muted); }
.quote { max-width: 46ch; margin: clamp(44px, 5vw, 72px) auto 0; text-align: center; font: 600 clamp(19px, 1.6vw, 23px)/1.4 var(--display); color: var(--gold); text-wrap: balance; }

/* ---------- Buttons: pills as on the current site; the action colour is gold with charcoal text (Rule 2) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px;
  border: 1px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--charcoal);
  font: 600 16px/1.2 var(--ui); text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn:active { transform: translateY(1px); }
.btn-line { background: transparent; border-color: var(--fg); color: var(--fg); }
.btn-line:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-line-light { border-color: rgba(255, 255, 255, 0.9); color: var(--white); }
.btn-line-light:hover { background: var(--white); border-color: var(--white); color: var(--charcoal); }
.btn-light { background: var(--white); border-color: var(--white); color: var(--charcoal); }
.btn-light:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-dark { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: #3A3A3A; border-color: #3A3A3A; }
.btn-lg { min-height: 56px; padding: 16px 64px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn-wide { justify-content: space-between; width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.arrow { width: 14px; height: 14px; flex: none; transition: transform 0.2s var(--ease); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.3 var(--ui); color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--gold); }
.text-link:hover .arrow { transform: translateX(3px); }
.more-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--ui); color: var(--gold-deep); text-decoration: none; }
.more-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Header: the charcoal "Call today" bar, then the monogram and the Playfair links over the dark hero ---------- */
.site-header { position: absolute; z-index: 60; top: 0; left: 0; right: 0; color: var(--white); --focus: var(--gold-2); }
.topbar { display: flex; justify-content: center; align-items: center; height: var(--topbar-h); background: var(--charcoal); }
.topbar a { display: inline-flex; align-items: center; min-height: 40px; font: 500 16px/1 var(--display); color: var(--white); text-decoration: none; letter-spacing: 0.01em; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold-2); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); padding: 0 var(--edge); }
.brand { display: inline-flex; align-items: center; color: var(--white); text-decoration: none; }
.brand-mark { width: 66px; height: auto; flex: none; }
.nav-links { display: flex; gap: clamp(18px, 2.2vw, 32px); font: 500 17px/1 var(--display); }
.nav-links a { padding: 12px 0; color: var(--white); text-decoration: none; border-bottom: 1px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--gold-2); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-actions .btn { min-width: 186px; }

/* ---------- Hero (Rules 43, 44): the clinic's existing opening — the Art-Deco pattern on charcoal, the glowing
   monogram, the welcome line, the gold pill ---------- */
.home main { background: var(--white); }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero) url("/hero-pattern.svg") center top / 375px 632px repeat; color: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(37, 37, 37, 0.2) 0%, rgba(37, 37, 37, 0.6) 62%, rgba(37, 37, 37, 0.86) 100%); }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: min(100svh, 900px); padding: calc(var(--top) + clamp(28px, 6vh, 72px)) 0 clamp(56px, 8vh, 104px); animation: rise 0.9s var(--ease) both; }
.hero-mark { width: clamp(132px, 14vw, 196px); height: auto; margin-bottom: clamp(24px, 3.5vh, 40px); filter: drop-shadow(0 0 22px rgba(253, 237, 201, 0.45)) drop-shadow(0 0 60px rgba(204, 161, 86, 0.3)); animation: glow 4s 0.6s ease-in-out infinite alternate; }
.hero-kicker { display: flex; align-items: center; gap: 14px; font: 600 15px/1.5 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); }
.hero-kicker::before, .hero-kicker::after { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero-display { margin-top: 20px; max-width: 16ch; font: 600 clamp(40px, 5.8vw, 82px)/1.04 var(--display); letter-spacing: -0.01em; color: var(--white); text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.hero-lead { max-width: 44ch; margin: 22px 0 36px; font: 500 clamp(17px, 1.4vw, 21px)/1.5 var(--sans); color: rgba(255, 255, 255, 0.88); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; }
.hero-actions .btn { min-width: 274px; }
@keyframes glow { from { filter: drop-shadow(0 0 18px rgba(253, 237, 201, 0.35)) drop-shadow(0 0 48px rgba(204, 161, 86, 0.22)); } to { filter: drop-shadow(0 0 28px rgba(253, 237, 201, 0.6)) drop-shadow(0 0 72px rgba(204, 161, 86, 0.38)); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
main > section { padding: var(--sec) 0; }
main > section.hero, main > section.urgent { padding: 0; }

/* Location and contact after the hero (Rule 16): gold glyphs in Soft Gray circles, the labels as on "Get in Touch" */
.contacts { padding: clamp(36px, 4vw, 56px) 0; }
.contacts-list { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.25fr); gap: 24px clamp(20px, 3vw, 44px); padding: 0; list-style: none; }
.contacts-list li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.contacts-list svg { flex: none; width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--gray); color: var(--gold-h); }
.contact-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.contact-label { font: 400 15px/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.contact-text a, .contact-value { font: 600 16px/1.45 var(--sans); overflow-wrap: break-word; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.contact-note { font-size: 14px; color: var(--muted); }
.hours-list { display: grid; gap: 4px; font-size: 15px; line-height: 1.45; }
.hours-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.hours-list dt { color: var(--muted); }
.hours-list dd { font-weight: 600; white-space: nowrap; }

/* Urgent strip (rules §7): the gold band, charcoal text and a charcoal button (Rule 2: a supporting colour for contrast) */
.urgent { background: var(--gold); color: var(--charcoal); --focus: var(--charcoal); }
.urgent-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 22px 0; }
.urgent-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.urgent h2 { font-size: 24px; max-width: none; color: var(--charcoal); }
.urgent p { font-size: 16px; color: var(--charcoal); max-width: 60ch; }
.urgent .text-link { color: var(--charcoal); border-bottom-color: var(--charcoal); }

/* Trust bar */
.trust { padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--line); background: var(--white); }
.trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 40px); padding: 0; list-style: none; }
.trust-list li { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 2px solid var(--gold); }
.trust-list strong { font: 600 18px/1.3 var(--display); }
.trust-list span { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* "First Time Patient Specials": the offer on a photo under a teal veil */
.promos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.promos .sec-head { margin-bottom: 0; }
.promos .lede { margin-top: 20px; }
.promo-list { display: grid; gap: 20px; padding: 0; list-style: none; }
.promo-card { overflow: hidden; max-width: 520px; background: var(--white); border-radius: var(--r); box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.5); }
.promo-media { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 250px; color: var(--white); }
.promo-media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.promo-media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(58, 88, 98, 0.5) 0%, rgba(40, 64, 72, 0.88) 100%); }
.promo-copy { padding: 28px 28px 26px; }
.promo-kicker { font: 600 17px/1.3 var(--display); }
.promo-copy h3 { margin-top: 8px; font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; line-height: 1.1; color: var(--white); }
.promo-foot { padding: 22px 28px 26px; }
.promo-foot p { font-size: 15px; color: var(--text); }
.promo-foot .cta-row { margin-top: 18px; }

/* "Our Dental Services": charcoal under the gold Art-Deco band, portrait cards */
.services, .tiles-sec { background: var(--charcoal) url("/band.svg") 0 0 / 546px 153px repeat-x; padding-top: calc(153px + var(--sec)); }
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
.cat-card, .solo-card, .svc-card {
  --fg: var(--ink); --text: #2B2B2B; --muted: #5C5C5C; --focus: var(--gold-deep); --line: rgba(34, 34, 34, 0.14);
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r); background: var(--white); color: var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cat-card:hover, .solo-card:hover, .svc-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6); }
.page-sec:not(.tiles-sec) .svc-card { border: 1px solid rgba(34, 34, 34, 0.12); box-shadow: 0 18px 38px -30px rgba(0, 0, 0, 0.45); }
.tile-media { position: relative; display: block; overflow: hidden; }
.tile-media img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 16%; filter: grayscale(1); transition: transform 0.6s var(--ease); }
.cat-card:hover .tile-media img, .solo-card:hover .tile-media img, .svc-card:hover .tile-media img { transform: scale(1.03); }
.tile-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.82) 62%, #FFFFFF 100%); }
.tile-arrow { position: absolute; z-index: 1; top: 16px; right: 16px; width: 48px; height: 48px; color: #2B1F33; border-radius: 50%; background: rgba(255, 255, 255, 0.72); transition: transform 0.25s var(--ease); }
.cat-card:hover .tile-arrow, .solo-card:hover .tile-arrow, .svc-card:hover .tile-arrow { transform: translate(2px, -2px); }
.tile-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; gap: 10px; margin-top: -64px; padding: 0 20px 20px; }
.tile-body h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; color: var(--ink); }
.tile-body h3 a { color: inherit; text-decoration: none; }
.tile-body h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.cat-items { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; font: 500 14px/1.5 var(--ui); }
.cat-items li { position: relative; padding-left: 11px; color: var(--muted); }
.cat-items li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-h); }
.cat-items a { display: inline-block; padding: 2px 0; color: var(--text); text-decoration: none; }
.cat-items a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.tile-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.tile-more { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--ui); color: var(--ink); text-decoration: none; }
.tile-more:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.tile-actions .btn { padding-inline: 18px; }

/* Second Opinion + Check Your Insurance (Rule 18): the bordered white boxes of the current site */
.intake-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.intake-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--ink); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.4); }
.intake-card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.intake-card > p { color: var(--text); max-width: 56ch; }
.intake-card .cta-row { margin-top: 8px; }
.learn-more { margin-top: 6px; border-top: 1px solid var(--line); }
.learn-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 0; font: 600 15px/1.3 var(--ui); cursor: pointer; list-style: none; }
.learn-more summary::-webkit-details-marker { display: none; }
.learn-more .faq-ico { color: var(--gold-deep); }
.learn-more-body { padding: 0 0 12px; font-size: 15px; color: var(--text); max-width: 60ch; }

/* Our practice: the introduction of the current site, then the office photos (Rule 19) */
.practice-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
.practice-intro h2 { max-width: 18ch; color: var(--gray-head); }
.practice-intro .prose { margin-top: 26px; }
.practice-photo { overflow: hidden; border-radius: var(--r); }
.practice-photo img { width: 100%; aspect-ratio: 10 / 11; object-fit: cover; object-position: 50% 40%; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
.gallery-slide { position: relative; min-width: 0; }
.gallery-photo { position: relative; overflow: hidden; border-radius: var(--r); background: var(--white); }
.gallery-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 22px 22px; color: var(--white); background: linear-gradient(0deg, rgba(20, 20, 20, 0.8) 0%, rgba(20, 20, 20, 0.45) 55%, rgba(20, 20, 20, 0) 100%); border-radius: 0 0 var(--r) var(--r); }
.gallery-text h3 { font-size: 20px; color: var(--white); }
.gallery-text p { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.92); max-width: 48ch; }

/* Why choose us and the first visit: outlined boxes with Playfair titles, the gold line */
.boxes, .numbered { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding: 0; list-style: none; }
.boxes li, .numbered li { min-width: 0; padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px) clamp(28px, 3vw, 40px); border: 1px solid var(--box); }
.boxes h3, .numbered h3 { margin-bottom: 12px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--white); }
.boxes p, .numbered p { color: var(--text); }
.num { display: block; margin-bottom: 14px; font: 600 13px/1 var(--ui); letter-spacing: 0.18em; color: var(--gold-2); }

/* Reviews: the white card on Soft Gray */
.reviews-slot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: center; padding: clamp(24px, 3vw, 40px); background: var(--white); border-radius: var(--r); }

/* Doctors (Rule 5), as "Our Doctors" on the current site: square photos, names in capitals, education, "Read more" */
.doctor-rail, .doctor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; }
.doctor-card { display: flex; flex-direction: column; min-width: 0; }
.doctor-photo { overflow: hidden; background: var(--gray); }
.doctor-photo img { width: 100%; aspect-ratio: 384 / 500; object-fit: cover; object-position: 50% 18%; transition: transform 0.6s var(--ease); }
.doctor-card:hover .doctor-photo img { transform: scale(1.03); }
.doctor-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 0; }
.doctor-body h3 { font: 400 clamp(23px, 2.1vw, 30px)/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.doctor-body h3 a { text-decoration: none; }
.doctor-body h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.doctor-label { margin-top: 6px; font: 600 16px/1.4 var(--ui); color: var(--fg); }
.doctor-edu, .doctor-summary { font-size: 16px; color: var(--text); }
.doctor-summary { margin-top: 6px; }

/* Insurance: white plan pills on Soft Gray */
.plan-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; padding: 0; list-style: none; }
.plan-chips li { padding: 9px 18px; border-radius: 999px; font: 500 14px/1.4 var(--ui); color: var(--ink); background: var(--white); }
.insurance .text-link { margin-right: 24px; }

/* FAQ: rounded outlined questions on the FAQ green; the open one turns white, as on the current site */
.faq-head { margin-bottom: clamp(32px, 4vw, 52px); }
.faq-head .lede, .faq-head .prose { margin-top: 16px; }
.faq-list { display: grid; gap: 16px; max-width: 800px; margin-inline: auto; }
.faq-item { border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r); color: var(--white); transition: background 0.2s, color 0.2s; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding: 18px 24px; font: 400 clamp(18px, 1.5vw, 21px)/1.35 var(--ui); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] { background: var(--white); color: var(--ink); border-color: var(--white); --focus: var(--gold-deep); }
.faq-ico { position: relative; flex: none; width: 14px; height: 14px; color: currentColor; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform 0.25s var(--ease); }
.faq-ico::after { transform: rotate(90deg); }
.faq-item[open] .faq-ico::after, .learn-more[open] .faq-ico::after { transform: rotate(0deg); }
.faq-answer { padding: 0 24px 24px; font-size: 16px; color: #2B2B2B; }
.faq-answer p + p, .faq-answer p + ul, .faq-answer ul + p { margin-top: 10px; }
.faq-answer a { color: var(--ink); text-decoration-color: var(--gold); }
.faq-answer .checklist li { color: #2B2B2B; }

/* Get in touch (homepage closing and the end of every inner page): white and Soft Gray halves */
main > section.git { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: var(--white); border-top: 1px solid var(--line); }
.git-main { padding: var(--sec) clamp(28px, 5vw, 80px) var(--sec) var(--edge); }
.git-side { padding: var(--sec) var(--edge) var(--sec) clamp(28px, 5vw, 80px); background: var(--gray); --line: rgba(34, 34, 34, 0.16); }
.git h2 { max-width: 15ch; }
.git .lede { margin: 18px 0 28px; }
.git-title { font: 600 clamp(32px, 3.4vw, 48px)/1.1 var(--display); }
.git-intro { margin-top: 14px; max-width: 46ch; color: var(--text); }
.git-list { display: grid; gap: 22px; margin: 28px 0 10px; }
.git-list > div > dt { margin-bottom: 8px; font: 400 clamp(19px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--label); }
.git-list > div > dd { font-size: 16px; overflow-wrap: anywhere; }
.git-list a { text-underline-offset: 4px; text-decoration-color: var(--gold); }
.git-list .hours-list { max-width: 320px; }
.git-list .hours-list dt { color: var(--text); }

/* ---------- Contact block: Logika forms when ready, otherwise the round contact icons of "Contact Us" ---------- */
.contact-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 18px; margin-top: clamp(32px, 4vw, 48px); }
.git .contact-forms { grid-template-columns: minmax(0, 1fr); margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.contact-alt { margin-top: 36px; max-width: 520px; }
.contact-alt-copy { margin-bottom: 10px; font-size: 15px; color: var(--muted); }
.contact-alt-buttons { display: grid; gap: 10px; }
.form-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r); background: transparent; overflow: auto; }
.form-dialog::backdrop { background: rgba(20, 20, 20, 0.72); }
.form-dialog .contact-card { margin: 0; }
.dialog-close { position: sticky; top: 0; float: right; z-index: 1; width: 44px; height: 44px; border: 0; background: transparent; color: var(--charcoal); font-size: 28px; line-height: 1; cursor: pointer; }
.contact-card { --bg: var(--white); --fg: var(--ink); --text: #2B2B2B; --muted: #5C5C5C; --eyebrow: var(--gold-deep); --line: rgba(34, 34, 34, 0.14); color: var(--fg); padding: clamp(24px, 3vw, 36px); background: var(--white); border-radius: var(--r); border: 1px solid var(--ink); }
.contact-card .btn-line { border-color: var(--ink); color: var(--ink); }
.contact-card .btn-line:hover { background: var(--ink); color: var(--white); }
.contact-card-title { font-size: clamp(26px, 2.4vw, 32px); }
.contact-card-intro { margin: 10px 0 20px; font-size: 16px; color: var(--text); }
.contact-card.reach-card { padding: 0; border: 0; background: none; }
.reach-icons { display: flex; flex-wrap: wrap; gap: 18px 20px; padding: 0; list-style: none; }
.reach-icons a { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 84px; text-decoration: none; font: 600 13px/1.3 var(--ui); color: var(--ink); text-align: center; }
.reach-icons a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.reach-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--gray); color: var(--gold-h); transition: background 0.2s; }
.reach-ico svg { width: 26px; height: 26px; }
.reach-icons a:hover .reach-ico { background: var(--gold-soft); }
.contact-block .contact-forms { margin-top: 28px; }

.est [hidden] { display: none !important; }
.est-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.est-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.est-step > .est-consent-field, .est-step > .est-field:has(textarea) { grid-column: 1 / -1; }
.est-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.est-field > label { font: 600 14px/1.4 var(--ui); }
.est-req { color: var(--gold-deep); }
.est-opt { font-size: 13px; font-weight: 500; color: var(--muted); }
.est input[type="text"], .est input[type="email"], .est input[type="tel"], .est textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(34, 34, 34, 0.3); border-radius: var(--r-sm); background: var(--white);
  font: inherit; font-size: 16px; color: var(--ink);
}
.est textarea { min-height: 110px; resize: vertical; }
.est input:focus, .est textarea:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(178, 141, 81, 0.35); }
.est input[aria-invalid="true"], .est textarea[aria-invalid="true"] { border-color: #A1271F; }
.est-hint { font-size: 13px; color: var(--muted); }
.est-error { font-size: 14px; font-weight: 600; color: #A1271F; }
.est-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 400; line-height: 1.55; color: #414141; cursor: pointer; }
.est-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold-deep); }
.est-privacy, .est-noscript { margin-top: 18px; font-size: 14px; color: var(--muted); }
.est-privacy a, .est-noscript a { color: var(--ink); font-weight: 600; }
.est-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.est-status { margin-top: 16px; font-size: 15px; font-weight: 600; }
.est-status:empty { display: none; }
.est-status:focus { outline: none; }
.est.is-done .est-fields, .est.is-done .est-actions { display: none; }
.est.is-done .est-status { margin: 0; padding: 20px 22px; background: var(--gray); border-radius: var(--r-sm); font-size: 17px; line-height: 1.5; }

/* ---------- Footer: on the photo of the office sign, centred, as on the current site (Rule 17: every policy link) ---------- */
.site-footer {
  --fg: var(--white); --text: #ECE9E2; --muted: #E0DCD3; --line: rgba(255, 255, 255, 0.4); --focus: var(--gold-2);
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 110px) 0 calc(var(--bar-space) + 28px); background: #141414; color: var(--white); text-align: center;
}
.footer-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(16, 16, 18, 0.7); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.brand-footer .brand-mark { width: 76px; }
.footer-desc { max-width: 58ch; font-size: 15px; color: var(--text); }
.footer-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px clamp(24px, 4vw, 56px); width: min(100%, 1060px); margin-top: 6px; }
.footer-col { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.footer-title { margin-bottom: 10px; font: 600 12px/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2); }
.footer-col a { display: inline-block; max-width: 100%; padding: 6px 0; font: 400 17px/1.4 var(--display); color: var(--white); text-decoration: none; overflow-wrap: break-word; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold-2); }
.footer-col p { padding: 6px 0; font-size: 14px; color: var(--muted); }
.site-footer .btn-light { margin-top: 10px; }
.footer-legal { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 60px); padding-top: 26px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--ui); color: var(--muted); }
.footer-policies { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 26px; }
.footer-policies a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; }
.footer-policies a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Inner pages ---------- */
/* The hero of every inner page: white Playfair on the deep-green pattern, the header floating over it */
.page-hero { --bg: var(--pattern-bg); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 26, 23, 0.9) 0%, rgba(20, 26, 23, 0.7) 55%, rgba(20, 26, 23, 0.45) 100%); }
main > section.page-hero { padding: 0; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; padding: calc(var(--top) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 96px); }
.page-hero-plain .page-hero-grid, .page-hero:not(.page-hero-split):not(.page-hero-profile) .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { max-width: 20ch; font-size: clamp(38px, 4.6vw, 64px); font-weight: 400; line-height: 1.08; color: var(--white); }
.page-hero-copy { max-width: 60ch; margin: 22px 0 30px; }
.page-lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--text); }
.page-note { margin-top: 12px; color: var(--muted); }
.page-hero-copy a { color: var(--white); text-underline-offset: 4px; text-decoration-color: var(--gold); }
.page-hero .checklist li { color: var(--text); }
.page-hero-media, .page-hero-portrait { position: relative; overflow: hidden; border-radius: var(--r); background: var(--charcoal); }
.page-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero-portrait { justify-self: end; width: min(100%, 420px); }
.page-hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 22px; padding: 0; list-style: none; font: 500 13px/1.5 var(--ui); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li[aria-current] { padding: 6px 0; color: var(--white); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--gold); }
.crumbs a { display: inline-block; padding: 6px 0; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.page-sec h2 { max-width: 20ch; }
.page-sec .two-col > .prose { padding-top: 8px; }
.page-sec .container > .two-col, .sec-intro { margin-bottom: clamp(32px, 4vw, 52px); }
.page-sec.sec-gray + .page-sec.sec-gray, .page-sec.doctors-strip + .page-sec.sec-gray, .page-sec.sec-gray + .page-sec.doctors-strip { border-top: 1px solid var(--line); }
.prose { max-width: 66ch; color: var(--text); }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p, .prose h3 + p, .prose h3 + ul { margin-top: 14px; }
.prose h3 { margin-top: 26px; color: var(--fg); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose-after { margin-top: 28px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split .prose { margin-top: 24px; }
.split-media { overflow: hidden; border-radius: var(--r); background: var(--white); }
.split-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; }
.checklist { display: grid; gap: 12px; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 28px; font-size: 16px; color: var(--text); }
ul.checklist li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 14px; height: 1.5px; background: var(--gold); }
ol.checklist { counter-reset: n; }
ol.checklist li { counter-increment: n; }
ol.checklist li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; font: 600 14px/1.7 var(--ui); color: var(--eyebrow); }
/* Steps: outlined boxes with gold numerals */
.steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; padding: 0; list-style: none; }
.step { padding: 26px 24px 30px; border: 1px solid var(--box); }
.step-n { display: block; margin-bottom: 14px; font: 600 clamp(34px, 3.2vw, 44px)/1 var(--display); color: var(--accent); }
.step p { font-size: 16px; color: var(--text); }
/* Aftercare: the gold heading and the outlined box of the current "Aftercare" sections */
.aftercare h2 { color: var(--accent); }
.care-box { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--accent); }
.care-list ul.checklist li strong { display: block; }
/* Outlined boxes on the pattern; myths as the bordered white cards ("Myth:" black, "Fact:" gold) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.info-card { display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 30px; border: 1px solid var(--box); background: transparent; }
.info-card h3 { margin-bottom: 12px; font-size: clamp(22px, 2vw, 27px); color: var(--fg); }
.info-card .prose { font-size: 16px; }
.myth-card { background: var(--white); border-color: var(--ink); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.4); }
.myth-label { color: var(--ink); }
.fact-label { font: 600 19px/1 var(--display); color: var(--gold-h); }
.cost-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.cost-grid .prose { margin-top: 24px; }
.cost-side { display: grid; gap: 18px; }
.offer-card { padding: 24px 26px; background: var(--white); border-radius: var(--r); border-top: 3px solid var(--gold); }
.offer-title { font: 600 22px/1.25 var(--display); margin-bottom: 8px; }
.offer-card p { font-size: 15px; color: var(--text); }
.cost-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* The repeated call to action on charcoal */
main > section.mid-cta { padding: clamp(32px, 4vw, 52px) 0; }
.mid-cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.mid-cta-row p { max-width: 56ch; font: 500 clamp(19px, 1.6vw, 22px)/1.4 var(--display); color: var(--white); }
/* Groups of the services hub on the charcoal band */
.svc-groups { display: grid; gap: clamp(48px, 6vw, 80px); }
.svc-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: 24px; }
.svc-group-head h2 { font-size: clamp(28px, 3vw, 40px); }
.svc-group-head h2 a { color: inherit; text-decoration: none; }
.svc-group-head h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.doctors-strip .sec-head { margin-bottom: 36px; }
.doctor-card-large .doctor-body { padding-top: 20px; }
main > section.profile-facts { padding: clamp(24px, 3vw, 40px) 0; }
.facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 32px; }
.facts-list div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facts-list dt { font: 400 15px/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.facts-list dd { font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
main > section.contact-details { padding: clamp(32px, 4vw, 56px) 0; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 48px); }
.contact-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.contact-item > a:not(.text-link) { font: 600 17px/1.45 var(--sans); overflow-wrap: anywhere; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.contact-item .text-link { margin-top: 4px; }
.reviews-slot .reviews-slot-grid { background: var(--white); }
.provider-list { display: grid; gap: 16px; margin-bottom: 20px; padding: 0; list-style: none; }
.provider-card { padding: clamp(24px, 3vw, 32px); background: var(--white); border: 1px solid var(--ink); }
.provider-card h3 { margin-bottom: 8px; }
.provider-card p { color: var(--text); max-width: 60ch; }
.provider-card .fine-print { margin-top: 8px; }
.provider-card .cta-row { margin-top: 20px; }

.legal { padding: clamp(40px, 5vw, 72px) 0 var(--sec); }
.legal-wrap { width: min(760px, 100% - 2 * var(--pad)); }
.legal-copy { color: var(--text); }
.legal-copy h2 { max-width: none; margin: 36px 0 12px; font-size: clamp(24px, 2.4vw, 30px); color: var(--fg); }
.legal-copy p + p, .legal-copy p + ul, .legal-copy ul + p { margin-top: 14px; }
.legal-copy ul { display: grid; gap: 8px; padding-left: 20px; }
.legal-copy a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--gold); }

/* ---------- Bottom-right action bar (Rule 2): Call · Directions · Book · Chat · Menu ---------- */
.action-bar {
  position: fixed; z-index: 70; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px;
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 14px 40px rgba(20, 20, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.action-bar > a, .action-bar > button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 60px; min-height: 60px; padding: 7px 8px; border: 0; border-radius: 21px;
  background: transparent; color: var(--charcoal); font: 600 12px/1 var(--ui); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: min-width 0.2s var(--ease), min-height 0.2s var(--ease), padding 0.2s var(--ease), gap 0.2s var(--ease), background 0.2s var(--ease);
}
.action-bar svg { flex: none; width: 22px; height: 22px; }
.action-bar > [aria-expanded="true"] { background: rgba(34, 34, 34, 0.08); }
.action-bar > [data-action="book"] { background: var(--gold); color: var(--charcoal); }
@media (hover: hover) {
  .action-bar > :hover { background: rgba(34, 34, 34, 0.08); }
  .action-bar > [data-action="book"]:hover { background: var(--gold-2); }
}
.action-bar > :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.bar-label { display: block; max-width: 96px; max-height: 14px; overflow: hidden; white-space: nowrap; opacity: 1; transition: max-width 0.2s var(--ease), max-height 0.2s var(--ease), opacity 0.14s ease; }
.action-bar.is-compact > a, .action-bar.is-compact > button { min-width: 46px; min-height: 46px; padding: 12px; gap: 0; }
.action-bar.is-compact .bar-label { max-width: 0; max-height: 0; opacity: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .action-bar { background: rgba(255, 255, 255, 0.97); } }

.sheet, .chat-fallback, .logika-chat-panel { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(var(--bar-space) + 4px); color: var(--ink); }
.sheet {
  z-index: 69; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - var(--bar-space) - 100px); max-height: calc(100dvh - var(--bar-space) - 100px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: 22px; background: var(--white); box-shadow: 0 20px 50px rgba(20, 20, 20, 0.35);
}
.menu-tree, .menu-tree ul { margin: 0; padding: 0; list-style: none; }
.menu-tree a, .menu-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 12px 16px;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: 500 16px/1.3 var(--ui); text-align: left; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .menu-tree a:hover, .menu-group-toggle:hover { background: var(--gray); } }
.menu-tree a[aria-current="page"] { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.menu-group ul { margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid rgba(34, 34, 34, 0.14); }
.menu-group ul a { min-height: 44px; font-weight: 400; }
.menu-chevron { flex: none; width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.menu-group-toggle[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.chat-fallback {
  z-index: 80; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 24px 22px 22px; border-radius: 18px; background: var(--white); box-shadow: 0 24px 60px rgba(20, 20, 20, 0.35);
}
.chat-fallback h2 { max-width: none; padding-right: 36px; font-size: 22px; }
.chat-fallback p { font-size: 15px; color: #333333; }
.chat-fallback .btn-line { border-color: var(--charcoal); color: var(--charcoal); }
.chat-fallback-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--charcoal); font-size: 26px; line-height: 1; cursor: pointer; }
.chat-fallback-close:hover { background: var(--gray); }
.logika-chat-panel {
  z-index: 80; display: flex; flex-direction: column; width: min(400px, calc(100vw - 24px));
  height: min(640px, calc(100vh - var(--bar-space) - 96px)); height: min(640px, calc(100dvh - var(--bar-space) - 96px));
  overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: 0 24px 60px rgba(20, 20, 20, 0.35);
}
.logika-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(34, 34, 34, 0.14); }
.logika-chat-heading h2 { max-width: none; font-size: 19px; }
.logika-chat-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--charcoal); font-size: 26px; line-height: 1; cursor: pointer; }
.logika-chat-frame { flex: 1; min-height: 0; }
.logika-chat-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.logika-chat-loading, .logika-chat-fallback { padding: 24px 20px; font-size: 15px; color: #333333; }
.logika-chat-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.logika-chat-note { margin-top: auto; padding: 10px 16px; border-top: 1px solid rgba(34, 34, 34, 0.14); font-size: 12px; line-height: 1.5; color: #5F5F5F; }
.logika-chat-note a { color: var(--ink); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .trust-list, .contacts-list, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .promos-grid, .practice-intro, .two-col, .split, .cost-grid, .reviews-slot-grid, .page-hero-grid, .sec-head-split { grid-template-columns: minmax(0, 1fr); }
  main > section.git { grid-template-columns: minmax(0, 1fr); }
  .git-main, .git-side { padding: var(--sec) var(--pad); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero-portrait { justify-self: start; width: min(100%, 360px); }
  .practice-photo img { aspect-ratio: 4 / 3; }
  /* Rule 5 / Rule 31: the doctors as a full-bleed horizontal rail, gutter inside, the first card on the content line */
  .doctor-rail { display: flex; gap: 16px; margin-inline: calc(50% - 50vw); padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .doctor-rail::-webkit-scrollbar { display: none; }
  .doctor-rail .doctor-card { position: relative; flex: 0 0 min(78vw, 320px); scroll-snap-align: start; overflow: hidden; background: var(--charcoal); }
  .doctor-rail .doctor-card .doctor-photo img { aspect-ratio: 3 / 4; }
  .doctor-rail .doctor-card .doctor-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 20px 14px; color: var(--white); background: linear-gradient(0deg, rgba(20, 20, 20, 0.9) 0%, rgba(20, 20, 20, 0.55) 60%, rgba(20, 20, 20, 0) 100%); }
  .doctor-rail .doctor-card .doctor-body h3 { color: var(--white); }
  .doctor-rail .doctor-card :is(.doctor-label, .doctor-edu, .doctor-summary) { display: none; }
  .doctor-rail .doctor-card .more-link { color: var(--gold-2); }
  .doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --topbar-h: 0px; --header-h: 72px; }
  body { font-size: 16px; }
  .topbar { display: none; }
  .header-bar { padding-top: env(safe-area-inset-top); }
  .brand-mark { width: 50px; }
  .nav-actions .btn { min-width: 0; min-height: 44px; padding: 10px 22px; font-size: 15px; }
  .hero-inner { min-height: 0; padding: calc(var(--top) + env(safe-area-inset-top) + 32px) 0 56px; }
  .hero-mark { width: 120px; }
  .hero-display { margin-top: 16px; font-size: clamp(36px, 10vw, 48px); max-width: none; }
  .hero-lead { margin: 16px 0 26px; font-size: 17px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; min-width: 0; }
  .page-hero-grid { padding-top: calc(var(--top) + env(safe-area-inset-top) + 16px); }
  .contacts-list, .trust-list, .contact-grid, .doctor-grid, .boxes, .numbered, .footer-nav { grid-template-columns: minmax(0, 1fr); }
  .trust-list { gap: 14px; }
  .urgent-copy { flex-direction: column; gap: 4px; }
  /* Rule 31: the service cards as a full-bleed rail, the gutter inside */
  .tile-grid { display: flex; gap: 14px; margin-inline: calc(50% - 50vw); padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tile-grid::-webkit-scrollbar { display: none; }
  .tile-grid > li { flex: 0 0 min(80vw, 320px); scroll-snap-align: start; }
  .services, .tiles-sec { background-size: 375px 105px; padding-top: calc(105px + var(--sec)); }
  /* Rule 19 (mobile): swipeable office photos, the text below each photo */
  .gallery { display: flex; gap: 14px; margin-inline: calc(50% - 50vw); padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-slide { flex: 0 0 86vw; scroll-snap-align: start; }
  .gallery-text { position: static; padding: 14px 4px 0; color: var(--fg); background: none; }
  .gallery-text h3 { color: var(--fg); font-size: 20px; }
  .gallery-text p { color: var(--text); }
  .faq-item summary { min-height: 64px; padding: 16px 18px; font-size: 17px; }
  .faq-answer { padding: 0 18px 20px; }
  .page-hero-media img, .split-media img { aspect-ratio: 5 / 4; }
  .mid-cta-row { flex-direction: column; align-items: flex-start; }
  .est-step { grid-template-columns: minmax(0, 1fr); }
  .cta-row .btn { flex: 1 1 auto; }
  .btn-lg { padding-inline: 40px; }
  .reach-icons { gap: 16px 10px; }
  .reach-icons a { min-width: 72px; }
}
@media (max-width: 420px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .contacts .hours-list div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contacts .hours-list div + div { margin-top: 6px; }
  .tile-actions .btn { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Google reviews (rules §5а): curated 5-star cards from the Logika snapshot. */
.reviews-feed { display: grid; gap: 24px; }
.review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 17px/1.4 var(--sans); }
.review-summary strong { font: 600 24px/1 var(--display); }
.review-stars { display: inline-flex; gap: 2px; color: var(--gold); }
.review-stars svg { width: 18px; height: 18px; }
.review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.review-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--white); border-radius: var(--r); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.review-card blockquote { margin: 0; flex: 1; }
.review-card blockquote p { font: 400 16px/1.6 var(--sans); }
.review-by { font: 500 14px/1.4 var(--sans); color: var(--muted, #6b6b6b); }