/* ==========================================================================
   Boston Dental HQ, clean layer. Loaded last on every page; it defines the one visual language and overrides what the older
   page styles still say.
   Governing idea: "a quiet clinic in black and white": Poppins only, neutral greys, one near-black, pill controls, rounded
   cards, hairlines instead of boxes, photography as the only colour-free decoration, air.
   Parts: 1 tokens  2 the card (home hero + inner page heads)  3 sticky bar + menu  4 controls  5 sections  6 forms and tables
          7 footer and mark  8 booking sheet  9 motion floor
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --ink: #111111;
  --ink-soft: #2a2a2a;
  --mute-ink: #5c5c5c;
  --mute-faint: #8a8a8a;
  --paper: #ffffff;
  --bone-deep: #F1F3F6;
  --accent: #3C4351;
  --accent-deep: #2E3440;
  --night: #1C222C;
  --tint: #F1F3F6;
  --tint-2: #E5E9EF;
  --ink-rgb: 17, 17, 17;
  --accent-rgb: 60, 67, 81;
  --line-ink: rgba(17, 17, 17, .1);
  --sans: 'Poppins', system-ui, sans-serif;
  --serif: 'Poppins', system-ui, sans-serif;
  --r-card: 24px;
  --r-ctl: 14px;
  --sec: clamp(72px, 9vw, 128px);
  --pv-ink: #111111;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --bk-accent: #3C4351;
  --bk-radius: 24px;
}
html { scroll-padding-top: 90px; }
body.pv-page { font-family: var(--sans); font-weight: 400; background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; }
body.pv-page *, body.pv-page *::before, body.pv-page *::after { font-family: inherit; }
.pv-page em { font-style: normal; }
.pv-page h1, .pv-page h2, .pv-page h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.035em; color: var(--ink); }
.pv-page h2 em, .pv-page h1 em { color: inherit; }
.pv-page .wrap { max-width: 1280px; }
.pv-page .register::before, .pv-page .reviews::before, .pv-page .page-head::before, .pv-page .marquee { display: none; }
.pv-page ::selection { background: rgba(17, 17, 17, .14); }

/* ---------- 2. the card: home hero (film) and inner page heads (still) ---------- */
.pv-hero { padding: 16px; background: #fff; }
.pv-card { position: relative; height: calc(100svh - 32px); min-height: 560px; max-height: 1040px; border-radius: 28px; overflow: hidden; background: #c6c6c6; isolation: isolate; animation: pv-card 1s var(--ease-out) both; }
.pv-sub-hero .pv-card { height: clamp(440px, 62svh, 600px); min-height: 0; background: var(--night); }
@keyframes pv-card { from { transform: scale(.98); } to { transform: none; } }
.pv-media { position: absolute; inset: 0; z-index: 0; animation: pv-film 1.3s ease .1s both; }
@keyframes pv-film { from { opacity: .25; } to { opacity: 1; } }
.pv-slide { position: absolute; inset: 0; }
.pv-slide:not(.is-cur) { display: none; }
.pv-poster, .pv-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 45%; display: block; }
.pv-video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); opacity: 0; transition: opacity .8s ease; }
.pv-video.is-on { opacity: 1; }
.pv-slide.is-live .pv-poster { opacity: 0; transition: opacity .6s ease .5s; }
.pv-sub-hero .pv-poster { object-position: var(--pos, 60% 40%); }
.pv-card::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(12, 12, 12, .66) 0%, rgba(12, 12, 12, .34) 40%, rgba(12, 12, 12, 0) 70%), linear-gradient(0deg, rgba(12, 12, 12, .42) 0%, rgba(12, 12, 12, 0) 40%); }

.pv-bar { position: absolute; z-index: 9; top: 20px; left: 20px; right: 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; animation: pv-rise .9s var(--ease-out) .25s both; }
.pv-bar > :first-child { justify-self: start; }
.pv-bar > :last-child { justify-self: end; }
.pv-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid rgba(17, 17, 17, .09); border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 24px rgba(17, 17, 17, .06); color: var(--pv-ink); font: 500 15px/1 var(--sans); cursor: pointer; transition: background-color .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
.pv-pill:hover { background: rgba(255, 255, 255, .88); }
.pv-pill:active { transform: scale(.96); }
.pv-pill svg { flex: none; }
.pv-pill:focus-visible, .pv-icon:focus-visible, .pv-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pv-logo { font: 500 17px/1 var(--sans); letter-spacing: .02em; color: #fff; white-space: nowrap; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }

.pv-copy { position: absolute; z-index: 5; left: 44px; bottom: 44px; width: min(56%, 760px); }
.pv-eyebrow { margin: 0 0 14px; font: 500 14px/1 var(--sans); letter-spacing: .02em; color: rgba(255, 255, 255, .8); animation: pv-rise .9s var(--ease-out) .3s both; }
.pv-title { margin: 0; color: #fff; font: 600 clamp(42px, 5.5vw, 88px)/.98 var(--sans); letter-spacing: -.05em; }
.pv-sub-hero .pv-title { font-size: clamp(38px, 4.6vw, 72px); animation: pv-rise .95s var(--ease-out) .4s both; }
.pv-title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.pv-title .ln > span { display: block; animation: pv-line .95s var(--ease-out) both; }
.pv-title .ln:nth-child(1) > span { animation-delay: .35s; } .pv-title .ln:nth-child(2) > span { animation-delay: .47s; } .pv-title .ln:nth-child(3) > span { animation-delay: .59s; }
@keyframes pv-line { from { transform: translateY(105%); } to { transform: none; } }
.pv-sub { margin: 22px 0 28px; max-width: 480px; color: rgba(255, 255, 255, .82); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; animation: pv-rise .9s var(--ease-out) .78s both; }
.pv-sub-hero .pv-sub { margin: 16px 0 24px; max-width: 560px; animation-delay: .55s; }
@keyframes pv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.pv-actions { display: flex; align-items: center; gap: 10px; animation: pv-rise .9s var(--ease-out) .92s both; }
.pv-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; border-radius: 999px; background: #fff; color: #111; font: 500 16px/1 var(--sans); white-space: nowrap; transition: transform .3s var(--ease-out), box-shadow .3s ease, background-color .25s ease; }
.pv-cta:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.pv-cta:active { transform: scale(.97); }
.pv-icon { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .3s var(--ease-out), background-color .25s ease; }
.pv-icon:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.pv-icon:active { transform: scale(.94); }

@media (max-width: 820px) {
  .pv-hero { padding: 10px; }
  .pv-card { height: calc(100svh - 20px); min-height: 520px; border-radius: 26px; background: #1c2029; }
  .pv-sub-hero .pv-card { height: clamp(430px, 62svh, 540px); }
  .pv-poster, .pv-video { object-position: 50% 0; }
  .pv-sub-hero .pv-poster { object-position: var(--posm, 60% 30%); }
  .pv-card::before { display: none; }
  .pv-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 3; pointer-events: none; background: linear-gradient(0deg, rgba(28, 32, 41, .9) 6%, rgba(28, 32, 41, .5) 42%, rgba(28, 32, 41, 0) 100%); }
  .pv-bar { top: 14px; left: 14px; right: 14px; }
  .pv-pill { min-height: 44px; padding: 0 15px; font-size: 14px; gap: 8px; }
  .pv-logo { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
  .pv-copy { left: 22px; right: 22px; bottom: 22px; width: auto; text-align: center; }
  .pv-sub-hero .pv-copy { text-align: left; }
  .pv-title { font-size: clamp(34px, 10.4vw, 50px); }
  .pv-sub-hero .pv-title { font-size: clamp(32px, 9.6vw, 46px); }
  .pv-sub { margin: 16px auto 22px; font-size: 15px; color: rgba(255, 255, 255, .78); }
  .pv-sub-hero .pv-sub { margin: 12px 0 20px; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pv-actions { gap: 8px; }
  .pv-cta { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 14px; font-size: 15.5px; background: var(--accent); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
  .pv-icon { width: 54px; height: 54px; background: rgba(17, 17, 17, .55); border-color: rgba(255, 255, 255, .22); }
}
@media (max-width: 380px) { .pv-pill { padding: 0 12px; gap: 6px; font-size: 13.5px; } .pv-logo { font-size: 14px; } .pv-bar { left: 10px; right: 10px; } .pv-cta { font-size: 14.5px; padding: 0 10px; } .pv-icon { width: 50px; height: 50px; } }
/* sub-page card on desktop: dark Book pill reads against the dim still */
@media (min-width: 821px) { .pv-sub-hero .pv-cta { min-height: 52px; } }

/* ---------- 3. sticky bar (after the card scrolls away) and the menu overlay ---------- */
.gbar { position: fixed; z-index: 120; top: 0; left: 0; right: 0; padding: 10px 16px; pointer-events: none; transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform .5s var(--ease-out), opacity .3s ease, visibility 0s linear .5s; }
.gbar.pv-show { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.gbar-in { pointer-events: auto; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(17, 17, 17, .08); box-shadow: 0 10px 34px rgba(17, 17, 17, .08); }
.gbar .pv-logo { color: var(--ink); text-shadow: none; }
.gbar .pv-pill { background: #fff; }
.gbar .pv-book { justify-self: end; background: var(--accent); color: #fff; border-color: var(--accent); }
.gbar .pv-book:hover { background: var(--accent-deep); }
.gbar .pv-pill:focus-visible { outline-color: var(--accent); }
.pv-book { background: rgba(255, 255, 255, .6); }
.menu-lock { overflow: hidden; }
.pv-menu { position: fixed; z-index: 700; inset: 10px; border-radius: 26px; background: rgba(246, 246, 246, .94); -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1); display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(26px, 5vw, 64px) 44px; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s linear .5s; }
.pv-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pv-menu-close { position: absolute; top: 14px; left: 14px; background: #fff; }
.pv-menu a.pv-link { display: block; width: max-content; max-width: 100%; padding: 4px 0; font: 600 clamp(38px, 6vw, 76px)/1.05 var(--sans); letter-spacing: -.045em; color: var(--ink); transition: opacity .25s ease, transform .4s var(--ease-out); }
.pv-menu a.pv-link[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.pv-menu .pv-links:hover a.pv-link { opacity: .35; }
.pv-menu .pv-links a.pv-link:hover { opacity: 1; transform: translateX(8px); }
.pv-menu .pv-meta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 15px; color: var(--mute-ink); }
.pv-menu .pv-meta a { color: var(--ink); font-weight: 500; font-size: 20px; white-space: nowrap; }
.pv-menu .pv-meta a.pv-small { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.pv-menu.is-open .pv-link, .pv-menu.is-open .pv-meta { animation: pv-rise .6s var(--ease-out) both; }
.pv-menu.is-open .pv-link:nth-child(2) { animation-delay: .05s; } .pv-menu.is-open .pv-link:nth-child(3) { animation-delay: .1s; } .pv-menu.is-open .pv-link:nth-child(4) { animation-delay: .15s; } .pv-menu.is-open .pv-link:nth-child(5) { animation-delay: .2s; }
@media (max-width: 820px) { .gbar { padding: 8px 10px; } .pv-menu { inset: 8px; padding-top: 84px; } }

/* ---------- 4. controls: one pill language ---------- */
.pill-btn, button.submit, .cta-band .cta, .modal-cta, .careers-cta { border-radius: 999px; min-height: 52px; padding: 0 30px; background: var(--accent); color: #fff; border: 1px solid var(--accent); font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: none; }
.pill-btn:hover, button.submit:hover, .cta-band .cta:hover, .modal-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 17, 17, .22); }
button.submit .arrow { display: none; }
.cta-band .pv-actions { justify-content: center; animation: none; }
.cta-band .pv-cta { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.cta-band .pv-cta:hover { background: var(--accent-deep); box-shadow: 0 14px 30px rgba(17, 17, 17, .22); }
.cta-band .pv-icon { color: #111; background: #fff; border-color: rgba(17, 17, 17, .18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cta-band .pv-icon:hover { background: var(--tint); }
.cta-band .pv-icon:focus-visible, .cta-band .pv-cta:focus-visible { outline-color: var(--accent); }
.cta-band .cta-phone { display: inline-block; margin-top: 20px; color: var(--mute-ink); font-size: 15px; }
.cta-band .cta-phone em { font-style: normal; }
.why-arrow { border-radius: 50%; border-color: rgba(17, 17, 17, .18); }

/* ---------- 5. sections: one header style, hairlines, air ---------- */
.label { font: 500 13px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--mute-ink); display: flex; align-items: center; gap: 12px; }
.label::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--accent); }
.why-title, .faq-title, .register-head h2, .section-head h2, .cta-band h2, .reviews h2, .stats-band h2 { font: 600 clamp(32px, 3.8vw, 54px)/1.06 var(--sans); letter-spacing: -.04em; }
.register, .faq, .why-section, .team-section, .reviews, .cta-band, .apply, .price-wrap, .about-body { padding-top: var(--sec); padding-bottom: var(--sec); background: #fff; }
.why-section, .reviews { background: var(--bone-deep); }
.cta-band { text-align: center; background: #fff; border-top: 1px solid var(--line-ink); }
.cta-band .label { justify-content: center; }
.cta-band p { color: var(--mute-ink); }
.stats-band { background: #fff; padding: 0; }
.stats-band .stat strong { font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.stats-band .stat { border-color: var(--line-ink); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--mute-ink); }
.why-card, .team-card, .promise-card, .review-card, .price-cat, .form-card, .form-aside, .apply-card, .info-block { border-radius: var(--r-card); background: #fff; border: 1px solid var(--line-ink); box-shadow: none; }
.why-section .why-card { background: #fff; }
.why-card:hover, .team-card:hover, .promise-card:hover, .review-card:hover { box-shadow: 0 18px 44px rgba(17, 17, 17, .08); border-color: var(--line-ink); transform: translateY(-4px); }
.why-icon { background: var(--tint); color: var(--accent); border: 0; }
.why-card .num, .review-card .stars { color: var(--ink); }
.team-avatar.photo { box-shadow: 0 0 0 1px var(--line-ink); }
.team-card .role, .team-card .gdc, .review-card .who small, .price-row .price small { text-transform: none; letter-spacing: .01em; color: var(--mute-ink); }
.page-head, .page-hero { display: none; }
.faq details { border-color: var(--line-ink); }
.faq summary { font: 500 clamp(17px, 1.6vw, 20px)/1.35 var(--sans); letter-spacing: -.015em; }
.faq-x { border-color: rgba(17, 17, 17, .18); color: var(--ink); }
.faq details[open] .faq-x { background: var(--accent); border-color: var(--accent); color: #fff; }
.price-wrap { padding-top: 40px; }
.price-wrap .price-note { color: var(--mute-ink); }
.price-cat h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -.03em; border: 0; padding: 0; margin-bottom: 6px; }
.price-row .price { font: 500 20px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.price-row, .foot-grid, .foot-bottom { border-color: var(--line-ink); }
.pricing-chips { top: 12px; border-radius: 999px; margin: 0 0 28px; padding: 8px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line-ink); }
.pricing-chips a { border-radius: 999px; border-color: transparent; background: transparent; font-weight: 500; }
.pricing-chips a:hover { background: var(--tint); border-color: transparent; }
.pricing-chips a.on { background: var(--accent); color: #fff; }
@media (min-width: 821px) { .pricing-chips { margin: 0 0 32px; padding: 8px; background: rgba(255, 255, 255, .86); } }
.about-body p { color: var(--ink-soft); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; max-width: 62ch; }
.about-body .about-pull { font: 600 clamp(26px, 3vw, 40px)/1.15 var(--sans); letter-spacing: -.035em; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 22px; }
.about-body a, .faq-a a, .consent a, .prose-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.prose-section h2 { font-size: clamp(26px, 2.6vw, 36px); }
.prose-section .sec-label { color: var(--mute-ink); }
.contents { border-radius: var(--r-card); }
.team-avatar { background: var(--tint); color: var(--ink); }

/* ---------- 6. forms ---------- */
.field label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea { background-color: #fff; border: 1px solid rgba(17, 17, 17, .18); border-radius: 14px; padding: 14px 16px; font-size: 16px; background-image: none; }
.field select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(17, 17, 17, .08); background-size: 12px 8px; }
.field input:focus, .field textarea:focus { background-size: 0 0; }
.consent input[type=checkbox] { border-radius: 6px; border-color: rgba(17, 17, 17, .35); }
.consent input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.form-card, .apply-card { padding: clamp(26px, 4vw, 48px); }
.form-error { border-color: rgba(17, 17, 17, .3); background: var(--tint); border-radius: 14px; }
.success-state { border-radius: 18px; border-color: var(--line-ink); background: var(--tint); }
.success-state .check, .modal-check { background: var(--accent); color: #fff; border-color: var(--accent); }
.cv-dropzone { border-radius: 18px; }
.form-map { border-radius: var(--r-card); border: 1px solid var(--line-ink); }
.modal-card { border-radius: 26px; }
.modal-card h3 { font: 600 28px/1.15 var(--sans); letter-spacing: -.03em; }

/* ---------- 7. footer and the embossed mark ---------- */
footer { background: var(--night); color: #d6d6d6; border: 0; padding: clamp(56px, 7vw, 96px) 0 36px; }
footer .foot-mark, footer .foot-mark * { color: #fff; font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; }
footer .foot-mark .dot { background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .5); }
footer .foot-tag, footer .foot-col p, footer .foot-col a, footer .foot-bottom, footer .foot-bottom a, footer .careers-aside, footer .careers-aside em { color: #b9b9b9; font-family: var(--sans); font-style: normal; }
footer .foot-col .foot-h, footer .foot-col h5 { color: #fff; font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; text-transform: none; margin-bottom: 16px; }
footer a:hover, footer .careers-aside:hover, footer .careers-aside:hover em { color: #fff; }
footer .foot-grid, footer .foot-bottom { border-color: rgba(255, 255, 255, .12); }
footer .foot-bottom { text-transform: none; letter-spacing: .01em; font-size: 13px; }
footer .foot-sign .bd-tile { filter: none; }
footer .foot-sign .bd-mark { filter: none; }

/* ---------- 8. booking sheet in the same language ---------- */
.bk-sheet { font-family: var(--sans); border-radius: 28px 0 0 28px; }
.bk-title { font: 600 21px/1.2 var(--sans); letter-spacing: -.03em; }
.bk-close { background: #fff; }
.bk-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-fallback a { background: var(--accent); }
@media (max-width: 720px) { .bk-sheet { border-radius: 26px 26px 0 0; } }

/* ---------- 9. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pv-card, .pv-media, .pv-bar, .pv-eyebrow, .pv-title, .pv-title .ln > span, .pv-sub, .pv-actions, .pv-menu .pv-link, .pv-menu .pv-meta { animation: none !important; }
  .pv-menu, .pv-pill, .pv-cta, .gbar { transition-duration: .001s !important; }
}

/* specificity fixes */
.pv-page .pv-title, .pv-page .pv-title em { color: #fff; }
.pv-page .submit-row .meta { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--mute-ink); }
.pv-page .form-aside .k { text-transform: none; letter-spacing: 0; font-size: 13px; }
.pv-page .label { color: var(--mute-ink); }
.pv-page .pv-eyebrow { color: rgba(255, 255, 255, .8); }
.pv-bar a, .gbar a, .pv-menu a.pv-link, .pv-menu .pv-meta a:not(.pv-small) { text-decoration: none; }
@media (max-width: 820px) {
  .pv-sub-hero .pv-card { height: auto; min-height: clamp(440px, 62svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: 130px 22px 22px; }
  .pv-sub-hero .pv-copy { position: relative; left: auto; right: auto; bottom: auto; width: auto; z-index: 5; }
  .pv-sub-hero .pv-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
.price-cat { padding: 28px 28px 14px; }
@media (max-width: 820px) {
  .price-cat { padding: 22px 20px 8px; }
  .pv-card::before { display: block; background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 26%); }
}
.review-card .dr, .cta-phone em, .foot-tag, .careers-aside em, .hero-phone em { font-style: normal; }

/* ---------- content pass: headline break, info pages, price markers, footer column ---------- */
.pv-page .pv-title { letter-spacing: -.05em; font-weight: 600; }
@media (max-width: 420px) { .pv-page .pv-title { font-size: clamp(32px, 9.6vw, 40px); } }
.info-sec { padding: clamp(48px, 6vw, 88px) 0; border-bottom: 1px solid var(--line-ink); }
.info-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.info-head h2 { margin-top: 18px; font: 600 clamp(28px, 3vw, 42px)/1.08 var(--sans); letter-spacing: -.04em; }
.info-body { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.info-body p { margin: 0 0 16px; max-width: 62ch; }
.info-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.info-big { font: 600 clamp(34px, 5vw, 60px)/1.05 var(--sans); letter-spacing: -.04em; }
.info-big a { text-decoration: none; white-space: nowrap; }
.info-list { list-style: none; margin: 0 0 16px; padding: 0; }
.info-list li { padding: 14px 0; border-bottom: 1px solid var(--line-ink); max-width: 62ch; }
.info-list li:first-child { border-top: 1px solid var(--line-ink); }
.info-warn { background: var(--accent); border-bottom: 0; }
.info-warn .info-head h2, .info-warn .label { color: #fff; }
.info-warn .label::before { background: #fff; }
.info-warn .info-body { color: #e6e6e6; }
.info-warn .info-list li { border-color: rgba(255, 255, 255, .18); }
.info-src { font-size: 13px !important; color: var(--mute-ink); }
@media (max-width: 820px) { .info-grid { grid-template-columns: 1fr; } .info-body { font-size: 16px; } }
.gdc-check { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.price-dated { margin: 0 0 24px; font: 500 15px/1.5 var(--sans); color: var(--ink); }
.price-dated span { display: block; font-weight: 400; font-size: 13px; color: var(--mute-ink); margin-top: 4px; }
.price-row .price small { display: inline-block; margin-right: 8px; font: 500 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute-ink); }
a.stat { display: block; color: inherit; text-decoration: none; transition: background-color .25s ease; }
a.stat:hover { background: var(--tint); }
.foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; } }
/* portrait stills sit on the right of the card on desktop (never upscaled across the whole width) */
@media (min-width: 821px) {
  .pv-sub-hero .pv-media.pv-portrait { left: auto; width: min(52%, 760px); }
  .pv-sub-hero .pv-media.pv-portrait .pv-poster { object-position: var(--pos); }
  .pv-sub-hero .pv-media.pv-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #1C222C 0%, rgba(28, 34, 44, 0) 38%); }
}

/* ---------- header v2: left cluster (Menu + wordmark), quiet links, right cluster (find us, call, Book) ---------- */
.pv-bar { display: flex; align-items: center; gap: 12px; }
.gbar-in { display: flex; align-items: center; gap: 12px; }
.pv-bar-l { display: flex; align-items: center; gap: 14px; flex: none; }
.pv-bar-r { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.pv-pill, .pv-round { flex: none; width: auto; }
.pv-round { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
.pv-hlinks { display: none; flex: 1 1 auto; justify-content: center; gap: clamp(14px, 2vw, 30px); min-width: 0; }
.pv-hlinks a { position: relative; padding: 8px 2px; font: 500 15px/1 var(--sans); color: #fff; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.pv-hlinks a::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.pv-hlinks a:hover::after, .pv-hlinks a[aria-current]::after { transform: scaleX(1); }
.pv-hlinks a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.gbar .pv-hlinks a { color: #111; text-shadow: none; }
.gbar .pv-round { background: #fff; }
.gbar .pv-bar-r .pv-book { margin-left: 0; }
@media (min-width: 1024px) { .pv-hlinks { display: flex; } }
@media (max-width: 1023px) { .pv-bar-r .pv-round:not(.pv-call) { display: none; } }
@media (max-width: 820px) {
  .pv-bar-l { gap: 8px; }
  .pv-round { width: 44px; height: 44px; }
  .pv-bar-r { gap: 6px; }
  .gbar-in { gap: 8px; padding: 6px 6px; }
}
@media (max-width: 430px) {
  .pv-bar-l .pv-pill > span { display: none; }
  .pv-bar-l .pv-pill { padding: 0; width: 44px; justify-content: center; }
  .pv-logo { font-size: 13.5px; }
}
/* why-us cards: inner padding, icon breathing room (the older layers left the left padding at 0) */
.why-card { padding: 32px 30px 30px !important; border: 1px solid var(--line-ink) !important; border-radius: var(--r-card) !important; background: #fff !important; box-shadow: none !important; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(17, 17, 17, .08) !important; }
.why-icon { width: 52px; height: 52px; margin: 0 0 22px; }
@media (max-width: 720px) { .why-card { padding: 28px 24px 26px !important; } }
/* sweep fixes */
.team-card { padding: 34px 28px 30px !important; }
@media (max-width: 720px) { .team-card { padding: 28px 22px 26px !important; } }
h1, h2, h3, .pv-sub, .pv-eyebrow, .cta-band p, .faq summary { text-wrap: balance; }
p, li { text-wrap: pretty; }
.label + h2, .label + .why-title, .label + .faq-title { margin-top: 16px; }
.field label .optional, .optional { color: #666 !important; }
/* static map card (replaces the third-party iframe: no cookies before consent, no empty box) */
.form-map { min-height: 0; }
.map-card { position: relative; display: block; width: 100%; height: 100%; min-height: 320px; overflow: hidden; border-radius: inherit; color: var(--ink); text-decoration: none; }
.map-card svg, .map-card-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }
.map-card-credit { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; color: #555; background: rgba(255,255,255,.8); padding: 2px 6px; border-radius: 6px; }
.map-card-label { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .92); font-size: 14px; max-width: 260px; }
.map-card-label span { color: var(--mute-ink); }
.map-card-go { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 14px/1 var(--sans); transition: transform .3s var(--ease-out); }
.map-card:hover .map-card-go { transform: translateY(-2px); }
.map-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 820px) { .map-card-credit { right: auto; left: 10px; top: 8px; bottom: auto; } }
/* Pricing categories: every option visible (Ahmed 2026-10-10: "I can't see the other options"). Wrap instead of a hidden sideways scroll;
   sticky only where the whole set fits in one row. */
.pricing-chips { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; border-radius: 26px; }
.pricing-chips a { flex: none; }
@media (max-width: 1099px) { .pricing-chips { position: static; justify-content: flex-start; } }
@media (max-width: 820px) { .pricing-chips { margin: 0 0 24px; padding: 8px; gap: 6px; border-radius: 22px; } .pricing-chips a { min-height: 38px; padding: 0 14px; font-size: 13.5px; } }
.pricing-chips { border: 0; background: transparent; padding: 0; }
.pricing-chips a { border: 1px solid var(--line-ink); background: #fff; }
.pricing-chips a:hover { border-color: var(--accent); background: #fff; }
.pricing-chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (min-width: 821px) { .pricing-chips { background: transparent; padding: 0; gap: 8px; } .pricing-chips a { padding: 0 15px; font-size: 13.5px; min-height: 40px; } }
@media (max-width: 820px) { .pricing-chips { padding: 0; } }
@media (min-width: 821px) { .pricing-chips { display: flex; flex-wrap: wrap; gap: 8px; } }   /* 2026-10-15 Ahmed: fill the row, then wrap */
/* Hover never changes a button's text colour to match its background (Ahmed 2026-10-10: white text on white on hover) */
.pv-cta:hover { background: #f2f2f2; color: #111; }
@media (max-width: 820px) { .pv-cta:hover, .pv-cta:active { background: var(--accent-deep); color: #fff; } }
.cta-band .pv-cta:hover { background: var(--accent-deep); color: #fff; }
.gbar .pv-book:hover { color: #fff; }

/* Autoplay on iPhone (2026-10-10): Safari will not autoplay a video it considers invisible, and ours started at opacity 0.
   The first film is now fully visible from the start, sitting under the poster; the poster fades away once the film plays. */
.pv-video.first { opacity: 1; }
.pv-slide > picture { position: absolute; inset: 0; display: block; z-index: 3; }
.pv-slide > .pv-poster { z-index: 3; }

/* 2026-10-10: the poster leaves the moment the film plays (a delayed fade showed the film already moved on: a visible shift) */
.pv-slide.is-live .pv-poster { opacity: 0; transition: opacity .15s linear 0s; }
/* animated-image fallback (Brave, iPhone Low Power Mode): same box as the film */
img.pv-anim { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity 1.2s linear; }
img.pv-anim.is-on { opacity: 1; }

/* 2026-10-10: never a black card while the still or film loads on mobile data */
@media (max-width: 820px) { .pv-media .pv-slide:first-child { background: #1c2029 url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAA0ABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDevGYR7VOCe9clrenxyHepy4610mrSsgUKKwNRkAhDJy3espPU2hHQw7a4msZwynGKKtSmOVVJAyaKXMJxO3vzFJCQWGfWuV1EpDGY0Oc96qSaw7qRuqlLe+amGrSULkxnYmsArSlXPFFURLtOVOKKj2bK50V6KKK6DEKKKKACiiigAooooA//2Q==") 50% 0 / cover no-repeat; } }

/* Browsers that refuse video (Brave, iPhone Low Power Mode): a sharp smiling still with a slow, smooth push-in, dissolving between
   the two smiles. Animated images stuttered and looked blocky on iPhones (Ahmed, 2026-10-10). */
img.pv-kb { transform-origin: 50% 30%; animation: pv-kb 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes pv-kb { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Phones (2026-10-10): no separate still layered over the film. The film shows its own first frame (poster attribute) and plays in
   place, like the escape-room site, so the first play cannot sit differently from the loops. */


/* ---------- real practice footage: Find us block (home), framed stills (about, pricing) ---------- */
.find-us { padding: var(--sec) 0; background: #fff; border-top: 1px solid var(--line-ink); }
.fu-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(36px, 7vw, 120px); align-items: center; justify-content: center; max-width: 1100px; }
.fu-film { margin: 0; aspect-ratio: 9 / 16; width: 100%; max-width: 400px; border-radius: 28px; overflow: hidden; background: #cfcfcf; box-shadow: 0 24px 60px rgba(17, 17, 17, .12); }
.fu-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; background: #cfcfcf; }
.fu-copy h2 { margin: 18px 0 16px; font: 600 clamp(32px, 4vw, 56px)/1.06 var(--sans); letter-spacing: -.04em; }
.fu-copy p { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 19px); color: var(--mute-ink); max-width: 36ch; }
.fu-actions .pv-actions { animation: none; }
.fu-actions .pv-cta { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.fu-actions .pv-cta:hover { background: var(--accent-deep); box-shadow: 0 14px 30px rgba(17, 17, 17, .22); }
.fu-actions .pv-icon { color: #111; background: #fff; border-color: rgba(17, 17, 17, .18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fu-actions .pv-icon:hover { background: var(--tint); }
.fu-actions .pv-cta:focus-visible, .fu-actions .pv-icon:focus-visible { outline-color: var(--accent); }
@media (max-width: 820px) {
  .fu-grid { grid-template-columns: 1fr; gap: 28px; }
  .fu-film { max-width: none; aspect-ratio: 4 / 5; border-radius: 24px; }
  .fu-video { object-position: 50% 38%; }
}
.real-band { padding: clamp(40px, 6vw, 88px) 0; background: #fff; }
.real-fig { margin: 0 auto; width: min(100%, 460px); }
.real-fig img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; background: #cfcfcf; }
.real-cap { margin: 16px 4px 0; text-align: center; font: 400 14px/1.5 var(--sans); color: var(--mute-ink); }

/* ---------- colour pass: charcoal blue accent (#3C4351, the practice's original brand colour), tinted grounds ---------- */
.gbar .pv-hlinks a::after { background: var(--accent); }
.pv-hlinks a:focus-visible { outline-color: currentColor; }
.pv-page a:focus-visible, .pv-page button:focus-visible, .pv-page summary:focus-visible, .pv-page input:focus-visible, .pv-page select:focus-visible, .pv-page textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pv-hero a:focus-visible, .pv-hero button:focus-visible, .pv-menu a:focus-visible, .gbar a:focus-visible { outline-color: currentColor; }
.pv-menu a.pv-link[aria-current] { text-decoration-color: var(--accent); }
.faq summary:hover, .price-row .price, .stats-band .stat strong { color: var(--ink); }
.pricing-chips a.on, .pricing-chips a:hover { color: #fff; }
.pricing-chips a:hover:not(.on) { color: var(--ink); background: var(--tint); }
.price-row:hover { background: rgba(60, 67, 81, .05); }
.pill-btn:hover, button.submit:hover, .cta-band .cta:hover, .modal-cta:hover { color: #fff; box-shadow: 0 14px 30px rgba(60, 67, 81, .28); }
.cta-band, .register, .find-us { background: #fff; }
.why-section, .reviews, .info-sec:nth-of-type(odd) { background: var(--tint); }
.info-warn { background: var(--night) !important; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(60, 67, 81, .12); }
.consent input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.review-card .stars { color: var(--accent); }
.about-body .about-pull { border-left-color: var(--accent); }
.team-avatar.photo { box-shadow: 0 0 0 1px var(--line-ink), 0 0 0 5px var(--tint); }
.gdc-check, .cta-band .cta-phone strong { color: var(--accent); }
.map-card-go { background: var(--accent); }
.fu-film { box-shadow: 0 24px 60px rgba(60, 67, 81, .18); }
.promise-card h3, .promise-card h3 em, .team-card h3, .review-card .dr { font-style: normal; }

/* E hero as stills (2026-10-10): each smile fades in and slowly zooms in, then dissolves to the next */
.pv-stills > picture { display: block !important; position: absolute; inset: 0; }
.pv-stills img.pv-poster, .pv-stills img.pv-anim { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 35%; opacity: 0; transition: opacity 1.6s ease; animation: none; }
.pv-stills img.pv-poster.is-on, .pv-stills img.pv-anim.is-on { opacity: 1; animation: pv-zoomin 9s cubic-bezier(.25,.1,.25,1) forwards; }
.pv-slide.pv-stills.is-live .pv-poster.is-on { opacity: 1; }
@keyframes pv-zoomin { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (min-width: 821px) { .pv-stills img.pv-poster, .pv-stills img.pv-anim { object-position: 70% 30%; } }
@media (max-width: 820px) { .pv-stills img.pv-poster, .pv-stills img.pv-anim { object-position: 50% 0; transform-origin: 50% 25%; } }
@media (prefers-reduced-motion: reduce) { .pv-stills img.is-on { animation-duration: 20s; } }
@media (min-width: 821px) { .pv-stills img.pv-poster, .pv-stills img.pv-anim { transform-origin: 50% 50%; } @keyframes pv-zoomin { from { transform: scale(1); } to { transform: scale(1.06); } } }
/* Phone stats (2026-10-10, practice feedback: the stacked rows looked busy): one quiet row of three in a soft card */
@media (max-width: 820px) {
  .stats-band { padding: 18px 16px 6px; }
  .stats-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--tint, #F1F3F6); border-radius: 22px; padding: 16px 6px; text-align: center; }
  .stats-band .stat { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 2px 8px !important; border: 0 !important; border-left: 1px solid rgba(60, 67, 81, .14) !important; font-size: 11.5px; line-height: 1.3; letter-spacing: 0 !important; color: var(--mute-ink); }
  .stats-band .stat:first-child { border-left: 0 !important; }
  .stats-band .stat strong { display: block; margin: 0 !important; font: 600 17px/1.15 var(--sans) !important; letter-spacing: -.02em !important; color: var(--ink); white-space: nowrap; }
  a.stat:hover { background: transparent; }
}
@media (max-width: 370px) { .stats-band .stat strong { font-size: 15.5px !important; } .stats-band .stat { font-size: 11px; padding: 2px 5px !important; } }
@media (max-width: 820px) {
  .stats-band { padding: 10px 10px 4px !important; }
  .stats-band > * { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .stats-row { border-radius: 26px; width: 100%; }
}

/* ---------- team hero: three real dentists fanned like a hand of photos (HTML/CSS, no image) ---------- */
.pv-fan-card { background: radial-gradient(55% 85% at 74% 48%, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #3C4351 0%, #1c2029 100%) !important; }
.pv-fan-card::before { background: linear-gradient(90deg, rgba(20, 24, 32, .45) 0%, rgba(20, 24, 32, 0) 60%); }
.pv-fan { position: absolute; z-index: 3; right: clamp(24px, 6vw, 96px); top: 50%; translate: 0 -46%; display: flex; align-items: center; left: auto; bottom: auto; width: auto; height: auto; animation: none; }
.fan-card { --w: clamp(190px, 17vw, 250px); position: relative; display: block; flex: none; width: var(--w); aspect-ratio: 3 / 4; margin-left: calc(var(--w) * -.2); border: 6px solid #fff; border-radius: 18px; overflow: hidden; background: #fff; text-decoration: none; color: #fff;
  box-shadow: 0 22px 40px rgba(8, 12, 20, .34), 0 4px 10px rgba(8, 12, 20, .2); transform: rotate(var(--r)); transition: transform .5s var(--ease-out), box-shadow .5s ease, margin .5s var(--ease-out); animation: fan-deal .6s var(--ease-out) backwards; animation-delay: calc(350ms + var(--i) * 120ms); }
.fan-card:first-child { margin-left: 0; }
.fan-card:nth-child(2) { z-index: 2; } .fan-card:nth-child(3) { z-index: 3; }
.fan-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; background: #d9dde4; }
.fan-label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(28, 32, 41, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); line-height: 1.2; }
.fan-label b { font: 600 13px/1.2 var(--sans); }
.fan-label i { font: 400 12px/1.2 var(--sans); font-style: normal; color: rgba(255, 255, 255, .8); }
@keyframes fan-deal { from { opacity: 0; transform: translateY(70px) rotate(calc(var(--r) * 2.6 + 6deg)) scale(.9); } to { opacity: 1; transform: rotate(var(--r)); } }
@media (hover: hover) or (pointer: coarse) {
  .pv-fan:hover .fan-card:not(:hover), .pv-fan:focus-within .fan-card:not(:focus-visible) { transform: rotate(var(--r)) translateX(calc((var(--i) - 1) * 18px)); }
}
.fan-card:hover, .fan-card:focus-visible, .fan-card:active { transform: translateY(-14px) rotate(0deg) scale(1.05) !important; z-index: 6; box-shadow: 0 30px 54px rgba(8, 12, 20, .42), 0 6px 14px rgba(8, 12, 20, .22); }
.fan-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#dr-ahmed, #dr-kamil, #dr-nihaal { scroll-margin-top: 100px; }
@media (max-width: 820px) {
  .pv-sub-hero .pv-fan-card { padding-top: 78px; }
  .pv-fan { position: relative; right: auto; top: auto; translate: none; justify-content: center; margin: 0 0 22px; order: -1; align-self: center; }
  .fan-card { --w: clamp(104px, 30vw, 128px); border-width: 4px; border-radius: 14px; }
  .fan-label { left: 4px; right: 4px; bottom: 4px; padding: 5px 7px; border-radius: 9px; }
  .fan-label b { font-size: 10.5px; } .fan-label i { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .fan-card { animation: none; transition: none; } .fan-card:hover, .fan-card:focus-visible { transform: rotate(0deg) !important; } }
/* Team hero roster (2026-10-10): a quiet credentials panel on the charcoal-blue card */
.tr-card { background: radial-gradient(60% 90% at 78% 40%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%), linear-gradient(135deg, #3C4351 0%, #1c2029 100%) !important; }
.tr-card::before { display: none !important; }
.tr-panel { position: absolute; z-index: 3; right: clamp(24px, 5vw, 80px); top: 50%; translate: 0 -44%; left: auto; bottom: auto; width: min(460px, 40%); padding: 22px 26px 18px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; inset: auto clamp(24px,5vw,80px) auto auto; }
.tr-head, .tr-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.62); }
.tr-head { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
.tr-foot { padding-top: 12px; }
.tr-row { display: grid; grid-template-columns: 1fr auto 18px; grid-template-areas: "name gdc go" "role gdc go"; align-items: center; column-gap: 14px; padding: 15px 2px; border-bottom: 1px solid rgba(255,255,255,.10); color: #fff; text-decoration: none; transition: background-color .25s ease, padding .25s ease; border-radius: 10px; }
.tr-row:hover, .tr-row:focus-visible { background: rgba(255,255,255,.06); padding-left: 10px; padding-right: 10px; }
.tr-name { grid-area: name; font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; }
.tr-role { grid-area: role; font-size: 13px; color: rgba(255,255,255,.66); margin-top: 3px; }
.tr-gdc { grid-area: gdc; font: 500 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); white-space: nowrap; }
.tr-go { grid-area: go; color: rgba(255,255,255,.55); transition: transform .25s ease, color .25s ease; }
.tr-row:hover .tr-go { transform: translateX(3px); color: #fff; }
@media (max-width: 1024px) { .tr-panel { width: min(420px, 44%); } }
@media (max-width: 820px) {
  .pv-sub-hero .tr-card { padding-top: 0; }
  .tr-panel { position: relative; inset: auto; translate: none; width: auto; margin: 78px 16px 0; padding: 16px 18px 12px; }
  .tr-name { font-size: 16px; } .tr-role { font-size: 12px; } .tr-head, .tr-foot { font-size: 11px; }
}
@media (min-width: 821px) { .pv-sub-hero .tr-panel { inset: auto; top: 50%; right: clamp(28px, 5vw, 80px); translate: 0 -40%; } }
@media (max-width: 820px) { .tr-panel { margin-top: 70px; } .tr-head span:last-child { text-align: right; } }
@media (max-width: 820px) { .tr-panel { margin-bottom: 22px; } }
/* Team hero has no image: no space reserved for one on phones */
@media (max-width: 820px) {
  .pv-sub-hero .tr-card { min-height: 0 !important; height: auto !important; padding-top: 84px !important; aspect-ratio: auto !important; }
  .pv-sub-hero .tr-card .pv-copy { position: relative !important; inset: auto !important; margin: 0 !important; padding: 0 0 22px !important; width: auto !important; }
}
/* 2026-10-10 Ahmed: no repeats. The card header keeps only Menu, name and links; find-us, call and Book live in the hero buttons,
   and appear in the header only once you scroll (the sticky bar). */
.pv-card .pv-bar .pv-round, .pv-card .pv-bar .pv-call, .pv-card .pv-bar .pv-book { display: none !important; }
/* 2026-10-10 Ahmed: menu button is just the symbol, everywhere */
button[data-menu] > span { display: none !important; }
button[data-menu] { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; border-radius: 50%; }
/* sticky bar on phones: find-us, call and Book all fit (2026-10-10) */
@media (max-width: 1023px) { .gbar .pv-bar-r .pv-round:not(.pv-call) { display: inline-flex !important; } }
@media (max-width: 820px) {
  .gbar .pv-bar-r { gap: 6px; }
  .gbar .pv-round { width: 40px; height: 40px; min-height: 40px; min-width: 40px; }
  .gbar .pv-book { min-height: 40px; padding: 0 14px; }
  .gbar .pv-logo { font-size: 14px; }
}
@media (max-width: 370px) { .gbar .pv-logo { font-size: 13px; } .gbar .pv-book { padding: 0 11px; } .gbar .pv-round { width: 38px; min-width: 38px; height: 38px; } }
.map-gmaps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-gmaps .map-card-go { z-index: 2; }
.map-gmaps .map-card-go { display: none; } /* Google's own card already links out */
/* Phone size system (2026-10-10): header row = 40px controls with 16px icons; hero/CTA row = 52px with 18px icons */
@media (max-width: 820px) {
  .pv-bar button[data-menu], .gbar button[data-menu], .gbar .pv-round { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; }
  .pv-bar button[data-menu] svg, .gbar button[data-menu] svg { width: 14px; height: 14px; }
  .gbar .pv-round svg { width: 16px !important; height: 16px !important; }
  .gbar .pv-book { height: 40px; min-height: 40px !important; font-size: 14px; padding: 0 14px !important; }
  .gbar .pv-book svg { width: 11px; height: 11px; }
  .pv-bar .pv-logo, .gbar .pv-logo { font-size: 14.5px; }
  .pv-actions { gap: 8px; }
  .pv-actions .pv-cta { min-height: 52px !important; height: 52px; font-size: 15px; }
  .pv-actions .pv-icon, .cta-band .pv-icon { width: 52px !important; height: 52px !important; min-width: 52px; }
  .pv-actions .pv-icon svg, .cta-band .pv-icon svg { width: 18px; height: 18px; }
}
/* Sticky bar fit (2026-10-10): equal 8px inset all round, everything inside the pill, wordmark gives way first */
@media (max-width: 820px) {
  .gbar-in { padding: 8px !important; gap: 6px; }
  .gbar .pv-bar-l { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .gbar .pv-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -.01em; }
  .gbar .pv-bar-r { gap: 6px; }
  .gbar button[data-menu], .gbar .pv-round { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
  .gbar .pv-book { height: 38px; min-height: 38px !important; padding: 0 13px !important; gap: 6px; }
}
@media (max-width: 380px) { .gbar .pv-book svg { display: none; } .gbar .pv-book { padding: 0 14px !important; } .gbar .pv-logo { font-size: 13.5px; } }
/* CareStack booking in our colour (2026-10-10, Ahmed picked tint A): their teal shifts to our blue-grey, colours calmed. */
.bk-frame { filter: saturate(.3) hue-rotate(28deg) brightness(.92) contrast(1.08); }
/* Map (2026-10-10): fit the card exactly (phones were cropping Google's bottom-left control) and tint it charcoal blue like the team card */
.map-gmaps iframe { height: 100% !important; min-height: 0 !important; max-height: none; filter: grayscale(1) contrast(1.04); }
.map-gmaps::after { content: ""; position: absolute; inset: 0; background: var(--accent, #3C4351); mix-blend-mode: color; pointer-events: none; z-index: 2; }
/* Map tint lightened (2026-10-10): half-strength charcoal blue, some of Google's colour comes back */
.map-gmaps iframe { filter: grayscale(1) brightness(1.05); }
.map-gmaps::after { opacity: .5; }
/* Desktop colour = phone colour (2026-10-14, Ahmed): charcoal-blue fade instead of grey, charcoal-blue Book button, facts in the soft tinted card */
@media (min-width: 821px) {
  .pv-card { background: #1c2029; }
  .pv-card::before { background: linear-gradient(90deg, rgba(28, 32, 41, .94) 0%, rgba(28, 32, 41, .82) 32%, rgba(28, 32, 41, .5) 52%, rgba(28, 32, 41, .12) 66%, rgba(28, 32, 41, 0) 76%), linear-gradient(0deg, rgba(28, 32, 41, .5) 0%, rgba(28, 32, 41, 0) 40%); }
  .pv-hero .pv-cta { background: var(--accent); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
  .pv-hero .pv-cta:hover { background: var(--accent-deep); color: #fff; }
  .pv-hero .pv-icon { background: rgba(28, 32, 41, .45); border-color: rgba(255, 255, 255, .22); }
  .pv-hero .pv-icon:hover { background: rgba(28, 32, 41, .7); }
  .stats-band { padding: 16px; }
  .stats-band > .wrap, .stats-band .wrap { max-width: none; padding: 0; }
  .stats-row { background: var(--tint, #F1F3F6); border-radius: 26px; padding: 26px 0; }
  .stats-row .stat { padding: 4px 48px !important; border-top: 0 !important; border-bottom: 0 !important; }
}
/* Old-site font back (2026-10-14, practice preference): Fraunces serif for headings and the wordmark, Poppins stays for everything else */
:root { --serif: 'Fraunces', Georgia, serif; }
h1, h2, .pv-title, .why-title, .faq-title, .register-head h2, .section-head h2, .cta-band h2, .reviews h2, .stats-band h2 { font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -.01em !important; font-optical-sizing: auto; }
h1 em, h2 em, .pv-title em { font-style: italic; font-weight: 400; }
.pv-logo { font-family: var(--serif) !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .07em !important; }
@media (max-width: 820px) { .gbar .pv-logo { font-size: 12px !important; letter-spacing: .04em !important; } }
@media (max-width: 380px) { .gbar .pv-logo { font-size: 10.8px !important; letter-spacing: .02em !important; } }
/* Top strip like the old site (2026-10-14): address left; full phone number and a light Book link right */
.topstrip { background: #fff; }
.topstrip-in { margin: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--line-ink, rgba(17,17,17,.1)); font: 500 13.5px/1 var(--sans); }
.topstrip a { color: var(--ink, #111); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topstrip a:hover span { color: var(--accent); }
.ts-r { display: flex; align-items: center; gap: 0; }
.ts-r > a + a { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line-ink, rgba(17,17,17,.12)); }
.topstrip .ts-book { color: var(--accent); font-weight: 600; }
.topstrip .ts-book svg { opacity: 1; transition: transform .25s var(--ease-out, ease); }
.topstrip .ts-book:hover svg { transform: translateX(3px); }
.topstrip .ts-book span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.topstrip .ts-book:hover span { text-decoration-color: currentColor; color: var(--accent); }
.topstrip svg { flex: none; opacity: .75; }
.topstrip + .pv-hero { padding-top: 12px; }
@media (max-width: 820px) {
  .topstrip-in { margin: 0 12px; min-height: 40px; font-size: 12.5px; gap: 10px; }
  .topstrip .ts-book { display: none !important; }
  .topstrip + .pv-hero { padding-top: 8px; }
}
@media (max-width: 360px) { .topstrip-in { font-size: 11.5px; } .topstrip svg { display: none; } }
/* Home hero the same height as the other pages' cards on desktop (2026-10-14) */
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-card { height: clamp(440px, 62svh, 600px); min-height: 0; } }
@media (max-width: 820px) { .topstrip + .pv-hero:not(.pv-sub-hero) .pv-card { height: calc(100svh - 64px); min-height: 500px; } }
/* Book in the top strip = the old site's outline button (2026-10-15, Ahmed's reference) */
.topstrip .ts-book { margin-left: 22px !important; padding: 0 20px !important; border-left: 0 !important; height: 34px; border: 1px solid var(--ink, #111) !important; border-radius: 999px; color: var(--ink, #111); font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.topstrip .ts-book svg { display: none; }
.topstrip .ts-book span { text-decoration: none !important; }
.topstrip .ts-book:hover { background: var(--accent); border-color: var(--accent) !important; }
.topstrip .ts-book:hover span { color: #fff !important; }
.topstrip-in { min-height: 52px; }
/* Book back inside the hero box, top right, in the old site's outline style (2026-10-15) */
.bk-long { display: none; }
@media (min-width: 821px) {
  .pv-card .pv-bar .pv-book { display: inline-flex !important; margin-left: auto; height: 42px; min-height: 42px; padding: 0 22px; border-radius: 999px; background: transparent !important; border: 1px solid rgba(255, 255, 255, .7) !important; color: #fff !important; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pv-card .pv-bar .pv-book svg, .pv-card .pv-bar .pv-book .bk-short { display: none; }
  .pv-card .pv-bar .pv-book .bk-long { display: inline; }
  .pv-card .pv-bar .pv-book:hover { background: #fff !important; color: var(--ink, #111) !important; border-color: #fff !important; }
}
/* Old-site type sizes (2026-10-15, measured on bostonhq-glfc): h1 34->57.6px, h2 30->46px, light 16px intro, 21px facts, 11px spaced caps nav */
h1, .pv-title { font-size: clamp(34px, 4vw, 57.6px) !important; line-height: 1.15 !important; letter-spacing: .01em !important; }
h2, .why-title, .faq-title, .register-head h2, .section-head h2, .cta-band h2, .reviews h2, .stats-band h2 { font-size: clamp(30px, 3.2vw, 46px) !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
.pv-sub { font-size: 16px !important; font-weight: 300 !important; line-height: 1.55 !important; }
@media (min-width: 821px) { .stats-band .stat strong { font-size: 21px !important; letter-spacing: 0 !important; } }
.pv-hlinks a { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase; }
.pv-logo { font-size: 16px !important; letter-spacing: .08em !important; }
@media (max-width: 820px) { .pv-bar .pv-logo { font-size: 15px !important; } }
/* No leading dash on section labels (2026-10-15, Ahmed) */
.label::before { display: none !important; }
.label { gap: 0 !important; }
/* Home title on two lines, each line kept whole (2026-10-15, Ahmed) */
.pv-hero:not(.pv-sub-hero) .pv-title { max-width: none !important; }
.pv-hero:not(.pv-sub-hero) .pv-title .ln { display: block; white-space: nowrap; }
@media (max-width: 820px) { .pv-hero:not(.pv-sub-hero) .pv-title { font-size: min(32px, 7.5vw) !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-sub { max-width: 640px !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-sub { max-width: none !important; white-space: nowrap; margin-top: 14px; } }
/* "Dental HQ" wordmark is short, so the phone bar can use the full size again (2026-10-15) */
@media (max-width: 820px) { .gbar .pv-logo { font-size: 15px !important; letter-spacing: .08em !important; } }
/* Pricing chips just sit at the top of the list and scroll away; no sticking (2026-10-15, Ahmed: too much) */
.pricing-chips { position: static !important; }
/* Desktop facts like the old site (2026-10-15, Ahmed: no bubble): plain white row, spaced caps labels, a hairline under it */
@media (min-width: 821px) {
  .stats-band { padding: 0 !important; background: #fff; border-bottom: 1px solid var(--line-ink, rgba(17,17,17,.1)); }
  .stats-band > .wrap, .stats-band .wrap { max-width: 1280px !important; padding: 0 36px !important; margin: 0 auto; }
  .stats-row { display: flex !important; justify-content: space-between; background: none !important; border-radius: 0 !important; padding: 34px 0 !important; }
  .stats-row .stat { padding: 0 !important; border: 0 !important; font: 500 11px/1.4 var(--sans) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--mute-ink, #6b6b6b) !important; display: flex; flex-direction: column; gap: 8px; }
  .stats-row .stat strong { text-transform: none; letter-spacing: 0 !important; font-size: 21px !important; color: var(--ink, #111); }
}
@media (min-width: 821px) { .stats-row .stat { flex: none !important; width: auto !important; } }
/* Menu button solid white in the hero (2026-10-15, Ahmed) */
.pv-card .pv-bar button[data-menu] { background: #fff !important; color: var(--ink, #111) !important; border-color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pv-card .pv-bar button[data-menu]:hover { background: #f1f3f6 !important; }
/* Strip lines up with the box: line = box width, address starts at the menu button, number ends at the Book button (2026-10-15) */
.topstrip-in { margin: 0 16px !important; padding: 0 20px; }
@media (max-width: 820px) { .topstrip-in { margin: 0 10px !important; padding: 0 14px; } }
/* Strip: no rule, lighter type (2026-10-15, Ahmed: smoother) */
.topstrip-in { border-bottom: 0 !important; min-height: 40px !important; font-weight: 400 !important; font-size: 13px !important; }
.topstrip a { color: var(--mute-ink, #5b6170) !important; }
.topstrip a:hover span { color: var(--ink, #111) !important; }
.topstrip svg { opacity: .6 !important; }
.topstrip + .pv-hero { padding-top: 4px !important; }
/* Home hero on desktop = the old hero fitted in the box (2026-10-15, Ahmed): the blue-toned photo, light blue-grey shade, two white pills */
.pv-cta-call { display: none !important; }
@media (min-width: 821px) {
  .pv-hero:not(.pv-sub-hero) .pv-card { background: #7d8394; }
  .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 50% 39% !important; }
  .pv-hero:not(.pv-sub-hero) .pv-card::before { background: linear-gradient(90deg, rgba(52, 58, 72, .62) 0%, rgba(52, 58, 72, .38) 35%, rgba(52, 58, 72, .08) 60%, rgba(52, 58, 72, 0) 72%) !important; }
  .pv-hero:not(.pv-sub-hero) .pv-actions .pv-icon { display: none !important; }
  .pv-hero:not(.pv-sub-hero) .pv-cta-call { display: inline-flex !important; }
  .pv-hero:not(.pv-sub-hero) .pv-actions { gap: 16px !important; }
  .pv-hero:not(.pv-sub-hero) .pv-actions .pv-cta { background: #fff !important; color: var(--ink, #111) !important; border: 0 !important; height: 46px !important; min-height: 46px !important; padding: 0 28px !important; font-size: 14px !important; font-weight: 500 !important; }
  .pv-hero:not(.pv-sub-hero) .pv-actions .pv-cta:hover { background: #f1f3f6 !important; color: var(--ink, #111) !important; }
}
@media (min-width: 821px) and (max-width: 1279px) { .pv-hero:not(.pv-sub-hero) .pv-sub { white-space: normal !important; max-width: 440px !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 50% 39% !important; } }
/* Same crop as the old site on every desktop width (2026-10-15, Ahmed) */
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-fit: cover !important; object-position: 50% 39% !important; transform-origin: 70% 40% !important; } }
/* Content lines up with the hero box on every width and every page (2026-10-15, Ahmed: no awkward side gaps):
   the box sits 16px in, its heading 44px inside that, so content runs from 60px to 60px */
@media (min-width: 821px) {
  .wrap, .stats-band > .wrap, .stats-band .wrap { max-width: none !important; padding-left: 60px !important; padding-right: 60px !important; margin: 0 !important; }
}
/* One charcoal-blue grade over every hero photo, so colour photos sit together (2026-10-15, Ahmed) */
.pv-card .pv-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #3C4351; mix-blend-mode: color; opacity: .38; }
.pv-hero:not(.pv-sub-hero) .pv-card { background: #8d93a3; }
/* Calmer colour on the hero photos (2026-10-15, Ahmed: too vibrant): less saturation under a stronger charcoal-blue grade */
.pv-card .pv-media img { filter: saturate(.62) contrast(.98); }
.pv-card .pv-media::after { opacity: .5 !important; }
/* Map without any filter (2026-10-15, Ahmed) */
.map-gmaps iframe { filter: none !important; }
.map-gmaps::after { display: none !important; }
.register-copy p + p { margin-top: 12px; }
@media (min-width: 921px) { .register-head { align-items: center !important; } }
/* Less empty space between the facts row and "Why choose us" (2026-10-15, Ahmed) */
.why-section { padding-top: 56px !important; }
@media (max-width: 820px) { .why-section { padding-top: 36px !important; } }
/* Desktop first screen = top strip + hero box + facts row, exactly one screen tall; "Why choose us" arrives on scroll (2026-10-15, Ahmed) */
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-card { height: calc(100svh - 183px) !important; min-height: 420px !important; max-height: none !important; } }
/* Back to the side-profile smile on desktop (2026-10-15, Ahmed): her original framing, charcoal fade on the left */
@media (min-width: 821px) {
  .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 70% 30% !important; transform-origin: 70% 40% !important; }
  .pv-hero:not(.pv-sub-hero) .pv-card { background: #1c2029 !important; }
  .pv-hero:not(.pv-sub-hero) .pv-card::before { background: linear-gradient(90deg, rgba(28, 32, 41, .9) 0%, rgba(28, 32, 41, .72) 30%, rgba(28, 32, 41, .35) 50%, rgba(28, 32, 41, .06) 64%, rgba(28, 32, 41, 0) 74%), linear-gradient(0deg, rgba(28, 32, 41, .45) 0%, rgba(28, 32, 41, 0) 40%) !important; }
}
/* Bigger wordmark (2026-10-15, Ahmed) */
.pv-logo { font-size: 20px !important; }
@media (max-width: 820px) { .pv-bar .pv-logo { font-size: 18px !important; } .gbar .pv-logo { font-size: 17px !important; } }
/* Home hero text block centred in the box height, left-aligned like the old site (2026-10-15, Ahmed) */
@media (min-width: 821px) {
  .pv-hero:not(.pv-sub-hero) .pv-copy { top: 50% !important; bottom: auto !important; transform: translateY(-50%); }
}
/* Hero bar Book button solid white (2026-10-15, Ahmed) */
@media (min-width: 821px) {
  .pv-card .pv-bar .pv-book { background: #fff !important; color: var(--ink, #111) !important; border-color: #fff !important; }
  .pv-card .pv-bar .pv-book:hover { background: #f1f3f6 !important; border-color: #f1f3f6 !important; }
}
/* Reviews (2026-10-15, Ahmed: it breaks easily): no endless auto-scroll; one tidy row you swipe or step through, lined up with the heading */
.review-track { animation: none !important; transform: none !important; width: auto !important; }
.review-set + .review-set { display: none !important; }
.review-marquee { -webkit-mask-image: none !important; mask-image: none !important; margin: 0 !important; padding: 4px 60px 10px !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding-left: 60px; scrollbar-width: none; overscroll-behavior-x: contain; }
.review-marquee::-webkit-scrollbar { display: none; }
.review-set { gap: 20px !important; padding-right: 60px !important; }
.review-card { scroll-snap-align: start; width: 380px !important; transform: none !important; }
.review-card:hover { transform: none !important; }
.rev-nav { display: flex; gap: 10px; justify-content: flex-end; padding: 0 60px; margin-top: -48px; margin-bottom: 18px; }
.rev-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-ink, rgba(17,17,17,.12)); background: #fff; color: var(--ink, #111); display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.rev-nav button:hover { background: var(--tint, #f1f3f6); }
.rev-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 820px) {
  .review-marquee { padding: 4px 16px 10px !important; scroll-padding-left: 16px; }
  .review-set { padding-right: 16px !important; gap: 12px !important; }
  .review-card { width: 82vw !important; max-width: 340px; }
  .rev-nav { display: none; }
}
@media (max-width: 820px) { .review-marquee { padding-left: 22px !important; padding-right: 22px !important; scroll-padding-left: 22px; } .review-set { padding-right: 22px !important; } }
/* Consultation offer under the fee list (2026-10-15, fees v3) */
.price-offer { margin: 28px 0 0; padding: 26px 28px; border-radius: var(--r-card, 24px); background: var(--accent, #3C4351); color: #fff; }
.price-offer h3 { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--serif) !important; margin: 0 0 10px; color: #fff; }
.price-offer p { margin: 0; color: rgba(255,255,255,.86); font-size: 15.5px; line-height: 1.6; max-width: 820px; }
.price-offer .price-offer-small { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.66); }
/* Price cards packed in two columns, no holes (2026-10-15, Ahmed: random sizes and holes) */
@media (min-width: 821px) {
  .price-cats { display: block !important; columns: 2; column-gap: 24px; }
  .price-cat { break-inside: avoid; -webkit-column-break-inside: avoid; display: block; width: 100%; margin: 0 0 24px !important; }
}
/* Facts row v2 (2026-10-15, Ahmed's reference): icon, small label, serif title, one line; tint band, thin dividers */
.facts-band { background: var(--tint, #F1F3F6) !important; border: 0 !important; padding: 0 !important; margin: 16px 16px 0; border-radius: 24px; }
.facts-band > .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.facts-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 26px 0; }
.fact { display: flex; align-items: flex-start; gap: 18px; padding: 4px 44px; text-decoration: none; color: var(--ink, #111); border-left: 1px solid rgba(60, 67, 81, .14); }
.fact:first-child { border-left: 0; }
.fact-ic { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--accent, #3C4351); }
.fact-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact-k { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-ink, #6b7080); }
.fact-t { font: 400 21px/1.2 var(--serif); color: var(--ink, #111); }
.fact-d { font: 300 14px/1.5 var(--sans); color: var(--mute-ink, #6b7080); max-width: 30ch; }
a.fact:hover .fact-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 1100px) and (min-width: 821px) { .fact { padding: 4px 24px; gap: 14px; } .fact-ic { width: 46px; height: 46px; } .fact-t { font-size: 18px; } }
@media (max-width: 820px) {
  .facts-band { margin: 10px 10px 0; border-radius: 22px; }
  .facts-row { grid-template-columns: 1fr; padding: 6px 18px; }
  .fact { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(60, 67, 81, .12); align-items: center; gap: 14px; }
  .fact:first-child { border-top: 0; }
  .fact-ic { width: 46px; height: 46px; }
  .fact-t { font-size: 18px; }
  .fact-d { font-size: 13px; }
}
/* Emergency stands out in red in every menu (2026-10-15, Ahmed) */
.pv-hlinks a[href="/emergency"] { color: #ff8a80 !important; }
.gbar .pv-hlinks a[href="/emergency"], .pv-menu a.pv-link[href="/emergency"] { color: #c62828 !important; }
.pv-hlinks a[href="/emergency"]::after { background: currentColor !important; }
@media (min-width: 821px) {
  .facts-band { margin-bottom: 16px; }
  .facts-row { padding: 22px 0; }
  .pv-hero:not(.pv-sub-hero) .pv-card { height: calc(100svh - 230px) !important; }
}
@media (max-width: 1199px) and (min-width: 821px) { .fact-d { font-size: 13px; } .fact { padding: 2px 20px; } .fact-ic { width: 42px; height: 42px; } .fact-ic svg { width: 20px; height: 20px; } }
.facts-band .fact-t { font-family: "Fraunces", Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0 !important; white-space: normal !important; }
.facts-band .fact-k, .facts-band .fact-d { white-space: normal !important; }
.facts-band .fact { min-width: 0; }
.pv-card .pv-hlinks a[href="/emergency"] { color: #ff5a4f !important; text-shadow: 0 1px 10px rgba(0,0,0,.55) !important; }
/* Facts row without the bubble (2026-10-15, Ahmed) */
.facts-band { background: #fff !important; border-radius: 0 !important; margin: 0 !important; }
.facts-band .fact-ic { background: var(--tint, #F1F3F6) !important; }
@media (min-width: 821px) { .facts-row { padding: 26px 60px 26px !important; } .facts-row .fact:first-child { padding-left: 0; } .facts-row .fact:last-child { padding-right: 0; } }
@media (max-width: 820px) { .facts-row { padding: 4px 22px !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-card { height: calc(100svh - 209px) !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 100% 100% !important; transform-origin: 75% 60% !important; } }
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 100% 20% !important; } }
/* Desktop: the menu row is a solid white band across the top of the box, like the top strip; the photo starts under it (2026-10-15, Ahmed) */
@media (min-width: 821px) {
  .pv-card .pv-bar { top: 0 !important; left: 0 !important; right: 0 !important; height: 84px; padding: 0 20px; background: #fff; border-bottom: 1px solid rgba(17,17,17,.06); animation: none; }
  .pv-card .pv-media { top: 84px !important; height: auto !important; bottom: 0 !important; }
  .pv-card::before { top: 84px !important; }
  .pv-card .pv-logo { color: var(--ink, #111) !important; text-shadow: none !important; }
  .pv-card .pv-hlinks a { color: var(--ink, #111) !important; text-shadow: none !important; }
  .pv-card .pv-hlinks a[href="/emergency"] { color: #c62828 !important; text-shadow: none !important; }
  .pv-card .pv-bar button[data-menu] { background: var(--tint, #F1F3F6) !important; border-color: var(--tint, #F1F3F6) !important; box-shadow: none !important; }
  .pv-card .pv-bar .pv-book { background: var(--accent, #3C4351) !important; color: #fff !important; border-color: var(--accent, #3C4351) !important; }
  .pv-card .pv-bar .pv-book:hover { background: var(--accent-deep, #2E3440) !important; border-color: var(--accent-deep, #2E3440) !important; }
}
@media (min-width: 821px) { .pv-card { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } }
/* Home hero photo with more life (2026-10-15, Ahmed): lighter grade than the inner pages */
.pv-hero:not(.pv-sub-hero) .pv-media img { filter: saturate(.92) contrast(1.03) !important; }
.pv-hero:not(.pv-sub-hero) .pv-media::after { opacity: .22 !important; }
/* Team: 4 across on wide screens, 2x2 below, never one card alone (2026-10-15) */
@media (min-width: 1180px) { .team-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 821px) and (max-width: 1179px) { .team-grid { grid-template-columns: repeat(2, 1fr) !important; } }
/* Inner-page hero box = home hero box height on desktop, so photos are not cut in half (2026-10-15, Ahmed) */
@media (min-width: 821px) { .pv-sub-hero .pv-card { height: calc(100svh - 209px) !important; min-height: 420px !important; max-height: none !important; } }
/* Uniform gap under the hero box on every page (2026-10-15, Ahmed) */
.pv-hero + * { padding-top: 64px !important; margin-top: 0 !important; }
.pv-hero + * > .wrap > :first-child, .pv-hero + * > :first-child:not(.wrap), .pv-hero + .prose > :first-child > :first-child { margin-top: 0 !important; }
.pv-hero + .facts-band { padding-top: 0 !important; }
@media (max-width: 820px) { .pv-hero + * { padding-top: 40px !important; } .pv-hero + .facts-band { padding-top: 0 !important; } }
/* First load fits the screen on every page (2026-10-15, Ahmed): inner-page box runs exactly to the bottom of the screen,
   so nothing below it peeks in half cut; the home page keeps strip + box + facts row */
@media (min-width: 821px) { .pv-sub-hero .pv-card { height: calc(100svh - 60px) !important; min-height: 440px !important; max-height: none !important; } }
@media (max-width: 820px) { .pv-sub-hero .pv-card { height: auto !important; min-height: calc(100svh - 54px) !important; max-height: none !important; } }
/* Inner pages (2026-10-15, Ahmed's reference): shorter box + an intro and three facts under it;
   box and strip together fill exactly the first screen on desktop */
@media (min-width: 821px) {
  .pv-sub-hero { display: flex; flex-direction: column; min-height: calc(100svh - 40px); box-sizing: border-box; }
  .pv-sub-hero .pv-card { flex: 1 1 auto; height: auto !important; min-height: 360px !important; }
}
.hero-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: 40px; align-items: center; padding: 30px 44px 14px; }
.hf-k { margin: 0 0 10px; font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-ink, #6b7080); }
.hf-h { margin: 0 0 12px; font: 400 clamp(28px, 2.6vw, 40px)/1.1 "Fraunces", Georgia, serif !important; letter-spacing: 0 !important; color: var(--ink, #111); }
.hf-h em { font-style: italic; }
.hf-p { margin: 0; font: 300 15px/1.6 var(--sans); color: var(--mute-ink, #5b6170); max-width: 46ch; }
.hf-facts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.hf-facts .fact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 26px; border-left: 1px solid rgba(60, 67, 81, .14); text-decoration: none; color: var(--ink, #111); min-width: 0; }
.hf-facts .fact:first-child { border-left: 0; }
.hf-facts .fact-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--tint, #F1F3F6); display: grid; place-items: center; color: var(--accent, #3C4351); flex: none; }
.hf-facts .fact-ic svg { width: 26px; height: 26px; }
.hf-facts .fact-tx { display: flex; flex-direction: column; gap: 6px; }
.hf-facts .fact-t { font: 400 20px/1.2 "Fraunces", Georgia, serif !important; color: var(--ink, #111); }
.hf-facts .fact-d { font: 300 14px/1.55 var(--sans); color: var(--mute-ink, #5b6170); }
.hf-facts a.fact:hover .fact-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 1199px) and (min-width: 821px) { .hero-facts { gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } .hf-facts .fact { padding: 4px 16px; } .hf-facts .fact-ic { width: 48px; height: 48px; } .hf-facts .fact-t { font-size: 17px !important; } .hf-facts .fact-d { font-size: 13px; } .hf-p { font-size: 14px; } }
/* short screens: keep it compact so it still fits */
@media (min-width: 821px) and (max-height: 820px) { .hero-facts { padding-top: 22px; padding-bottom: 8px; } .hf-p { display: none; } .hf-facts .fact-ic { width: 46px; height: 46px; } .hf-facts .fact { gap: 10px; } .hf-h { font-size: clamp(26px, 2.3vw, 34px) !important; } }
@media (max-width: 820px) {
  .hero-facts { grid-template-columns: 1fr; gap: 18px; padding: 30px 12px 0; }
  .hf-facts { grid-auto-flow: row; grid-auto-columns: auto; }
  .hf-facts .fact { flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; border-left: 0; border-top: 1px solid rgba(60, 67, 81, .12); }
  .hf-facts .fact:first-child { border-top: 0; }
  .hf-facts .fact-ic { width: 46px; height: 46px; }
  .hf-facts .fact-t { font-size: 18px !important; }
}
/* Desktop: no address/phone strip; everything moves up (2026-10-15, Ahmed). Phones keep the strip. */
@media (min-width: 821px) {
  .topstrip { display: none !important; }
  .pv-hero { padding-top: 16px !important; }
  .pv-hero:not(.pv-sub-hero) .pv-card { height: calc(100svh - 181px) !important; }
  .pv-sub-hero { min-height: 100svh !important; }
}
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-poster { object-position: 70% 30% !important; transform-origin: 62% 40% !important; } }
/* Home loop (2026-10-16): every smile layer framed the same way */
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-stills img.pv-anim { object-position: 70% 30% !important; transform-origin: 62% 40% !important; } }
/* Home: behind the photo = its own backdrop colour, so moving it in the editor never shows a dark strip (2026-10-16) */
@media (min-width: 821px) { .pv-hero:not(.pv-sub-hero) .pv-media { background: #fdfefb; } }
/* Home facts row (2026-10-16, Ahmed): first item at the left edge, last at the right edge, each line exactly
   halfway between its neighbours, so all four gaps either side of the lines are equal */
@media (min-width: 821px) {
  .facts-band .facts-row { display: grid !important; grid-template-columns: auto 1fr auto 1fr auto !important; align-items: stretch; }
  .facts-band .facts-row .fact { grid-row: 1; padding: 4px 0 !important; border-left: 0 !important; }
  .facts-band .facts-row .fact:nth-child(1) { grid-column: 1; }
  .facts-band .facts-row .fact:nth-child(2) { grid-column: 3; }
  .facts-band .facts-row .fact:nth-child(3) { grid-column: 5; }
  .facts-band .facts-row::before, .facts-band .facts-row::after { content: ""; grid-row: 1; justify-self: center; width: 1px; background: rgba(60, 67, 81, .14); }
  .facts-band .facts-row::before { grid-column: 2; }
  .facts-band .facts-row::after { grid-column: 4; }
}
@media (min-width: 821px) { .facts-band .facts-row { grid-template-columns: minmax(0, auto) minmax(48px, 1fr) minmax(0, auto) minmax(48px, 1fr) minmax(0, auto) !important; } .facts-band .facts-row .fact { min-width: 0; } }
/* Safari (2026-10-16): round photos that zoom on hover showed a square box; Safari drops the rounded clip during a
   transform, so clip with a mask too and round the image itself */
.team-avatar { -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); isolation: isolate; }
.team-avatar img { border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Home photo on phones (2026-10-16): the colour grade is baked into the image, so no live filter or blend layer
   (Safari renders filtered, zooming images soft) */
@media (max-width: 820px) {
  .pv-hero:not(.pv-sub-hero) .pv-media img { filter: none !important; }
  .pv-hero:not(.pv-sub-hero) .pv-media::after { display: none !important; }
}
/* Very small phones (320-359px, e.g. the first iPhone SE): heading and buttons scale to fit (2026-10-16) */
@media (max-width: 359px) {
  .pv-hero:not(.pv-sub-hero) .pv-title { font-size: 21px !important; }
  .pv-hero .pv-copy { left: 16px !important; right: 16px !important; }
  .pv-actions { gap: 6px !important; }
  .pv-actions .pv-cta { font-size: 13.5px !important; padding: 0 12px !important; min-width: 0; }
  .pv-actions .pv-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; }
}
/* Pricing: cards never wider than the screen on very small phones (2026-10-16) */
.price-cats { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 821px) { .price-cats { grid-template-columns: none !important; } }
.price-cat { min-width: 0; }
.price-row .treatment { min-width: 0; overflow-wrap: anywhere; }
/* Long links and emails in the privacy text wrap instead of pushing the page sideways on small phones (2026-10-16) */
.prose, .prose p, .prose li, .prose dd, .cx-prose { overflow-wrap: anywhere; }
/* Every hero box = the home box (2026-10-16, Ahmed). Desktop: same height as home; the strip underneath is laid out
   like the home facts row (icon beside the text) so box + strip still fill exactly the first screen. Phone: same height as home. */
@media (min-width: 821px) {
  .pv-sub-hero { display: block !important; min-height: 0 !important; }
  .pv-sub-hero .pv-card { height: calc(100svh - 181px) !important; min-height: 420px !important; flex: none !important; }
  .hero-facts { padding: 22px 44px 0 !important; gap: 32px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) !important; align-items: center !important; }
  .hf-k { margin-bottom: 6px; }
  .hf-h { font-size: clamp(24px, 2.1vw, 32px) !important; margin: 0 !important; }
  .hf-p { display: none; }
  .hf-facts .fact { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; padding: 2px 22px !important; }
  .hf-facts .fact-ic { width: 52px !important; height: 52px !important; }
  .hf-facts .fact-ic svg { width: 22px; height: 22px; }
  .hf-facts .fact-t { font-size: 19px !important; }
  .hf-facts .fact-d { font-size: 13.5px !important; }
}
@media (min-width: 821px) and (max-width: 1199px) { .hf-facts .fact { padding: 2px 14px !important; gap: 12px !important; } .hf-facts .fact-ic { width: 42px !important; height: 42px !important; } .hf-facts .fact-t { font-size: 16px !important; } .hf-facts .fact-d { font-size: 12.5px !important; } .hf-h { font-size: 22px !important; } }
@media (max-width: 820px) { .pv-sub-hero .pv-card { min-height: calc(100svh - 64px) !important; } }
/* Inner pages, desktop (2026-10-16): first screen ends exactly at the screen edge (box + strip, nothing peeking in),
   and the hero text sits where it does on the home page (Ahmed's layout: 7.1% in, 38.3% down) */
@media (min-width: 821px) {
  .pv-sub-hero { min-height: 100svh !important; box-sizing: border-box; }
  .pv-sub-hero .pv-copy { left: 7.1% !important; top: 38.3% !important; bottom: auto !important; right: auto !important; transform: none !important; width: min(48%, 680px) !important; }
}
/* phone: same as the home hero, centred at the bottom */
@media (max-width: 820px) {
  .pv-sub-hero .pv-copy { text-align: center !important; }
  .pv-sub-hero .pv-actions { justify-content: center; }
}
@media (min-width: 821px) and (max-height: 720px) { .pv-sub-hero .pv-copy { top: 24% !important; } .pv-sub-hero .pv-title { font-size: clamp(30px, 3.4vw, 46px) !important; } }
/* Every hero on desktop gets the home buttons: two white pills, Book and Call (2026-10-16, Ahmed) */
@media (min-width: 821px) {
  .pv-sub-hero .pv-actions .pv-icon { display: none !important; }
  .pv-sub-hero .pv-cta-call { display: inline-flex !important; }
  .pv-sub-hero .pv-actions { gap: 16px !important; }
  .pv-sub-hero .pv-actions .pv-cta { background: #fff !important; color: var(--ink, #111) !important; border: 0 !important; height: 46px !important; min-height: 46px !important; padding: 0 28px !important; font-size: 14px !important; font-weight: 500 !important; }
  .pv-sub-hero .pv-actions .pv-cta:hover { background: #f1f3f6 !important; color: var(--ink, #111) !important; }
}
/* Floating scroll bar: one "Book an Appointment" pill like the hero bar, instead of location + call + Book + (2026-10-16, Ahmed) */
.gbar .pv-bar-r .pv-round { display: none !important; }
.gbar .pv-book .bk-short, .gbar .pv-book svg { display: none !important; }
.gbar .pv-book .bk-long { display: inline !important; }
.gbar .pv-book { background: var(--accent, #3C4351) !important; color: #fff !important; border-color: var(--accent, #3C4351) !important; height: 42px !important; min-height: 42px !important; padding: 0 22px !important; border-radius: 999px; font: 600 11.5px/1 var(--sans) !important; letter-spacing: .16em !important; text-transform: uppercase; white-space: nowrap; }
.gbar .pv-book:hover { background: var(--accent-deep, #2E3440) !important; }
@media (max-width: 820px) { .gbar .pv-book { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; font-size: 10.5px !important; letter-spacing: .1em !important; } }
@media (max-width: 374px) { .gbar .pv-book { padding: 0 11px !important; font-size: 9.8px !important; letter-spacing: .06em !important; } }
@media (max-width: 420px) { .gbar .pv-logo { font-size: 14px !important; letter-spacing: .05em !important; } .gbar-in { gap: 6px !important; } }
@media (max-width: 374px) { .gbar .pv-logo { font-size: 12.5px !important; letter-spacing: .03em !important; } .gbar button[data-menu] { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; } }
@media (max-width: 339px) { .gbar .pv-logo { font-size: 11px !important; } }
.gbar .gbar-in .pv-bar-r a.pv-round { display: none !important; }
/* Menu links a little bigger (2026-10-16, Ahmed) */
.pv-hlinks a { font-size: 12.5px !important; }
/* Enquiry: heading sits right under its label and level with the text beside it (2026-10-16, Ahmed: gap too big) */
@media (min-width: 921px) { .register-head { align-items: start !important; } .register-head h2 { margin-top: 0 !important; line-height: 1.05 !important; } .register-copy p:first-child { margin-top: 0; } }
section.register .label { margin-bottom: 14px !important; }
section.register .label + .register-head { margin-top: 0 !important; }
/* the label sits in a .label-row with its own bottom margin */
section.register .label-row { margin-bottom: 14px !important; }
section.register .label-row .label { margin-bottom: 0 !important; }
/* Home on phones (2026-10-16): if the photo is moved down in the editor, the space above it is the photo's own
   light backdrop (no old blurred placeholder), with a soft charcoal fade at the top so the logo stays readable */
@media (max-width: 820px) {
  .pv-hero:not(.pv-sub-hero) .pv-media, .pv-hero:not(.pv-sub-hero) .pv-media .pv-slide { background: #fafbfc !important; background-image: none !important; }
  .pv-hero:not(.pv-sub-hero) .pv-card::before { content: ""; display: block !important; position: absolute; inset: 0 0 auto 0; height: 26%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(28, 32, 41, .55) 0%, rgba(28, 32, 41, .22) 45%, rgba(28, 32, 41, 0) 100%) !important; }
}

/* 2026-10-18 Ahmed: small spaced label above "Welcome" in the home hero */
.pv-kicker { margin: 0 0 18px !important; font: 500 12.5px/1 var(--sans) !important; letter-spacing: .34em !important; text-transform: uppercase; color: rgba(255, 255, 255, .72) !important; }
@media (max-width: 760px) { .pv-kicker { font-size: 11px !important; letter-spacing: .3em !important; margin-bottom: 14px !important; } }

/* 2026-10-18 Ahmed: a quiet line under the hero buttons that jumps to the enquiry form */
.pv-enq { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 400 14px/1.3 var(--sans); color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s; }
.pv-enq .t { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.pv-enq:hover, .pv-enq:focus-visible { color: #fff; }
.pv-enq:hover .t, .pv-enq:focus-visible .t { text-decoration-color: rgba(255, 255, 255, .8); }
.pv-enq .a { transition: transform .2s; }
.pv-enq:hover .a { transform: translateX(3px); }
#book { scroll-margin-top: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 760px) { .pv-enq { margin-top: 12px; font-size: 13px; } }

/* 2026-10-18 Ahmed: no shine on the Book pill in the scroll bar; flat and clean */
.gbar .pv-book, .gbar .pv-book:hover, .gbar .pv-book:focus-visible { box-shadow: none !important; }

/* 2026-10-18 Ahmed: no icons in the fact rows; text only, with the room the icons used */
.fact-ic { display: none !important; }
.hf-facts .fact, .facts-band .fact { gap: 0 !important; }
.hf-facts .fact-tx { gap: 6px; }
#advice, #message { scroll-margin-top: 0; }

/* 2026-10-18 Ahmed "is this lined up?": strip under inner heroes laid out like the home facts row. Each fact is as wide
   as its text, the gaps between them are equal, the lines sit in the middle of each gap, and the last fact ends on the edge. */
@media (min-width: 821px) {
  .hf-facts { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) minmax(0, auto) minmax(40px, 1fr) minmax(0, auto) !important; align-items: stretch; }
  .hf-facts .fact { grid-row: 1; padding: 2px 0 !important; border-left: 0 !important; max-width: 290px; }
  .hf-facts .fact:nth-child(1) { grid-column: 1; }
  .hf-facts .fact:nth-child(2) { grid-column: 3; }
  .hf-facts .fact:nth-child(3) { grid-column: 5; }
  .hf-facts::before, .hf-facts::after { content: ""; grid-row: 1; justify-self: center; width: 1px; background: rgba(60, 67, 81, .14); }
  .hf-facts::before { grid-column: 2; }
  .hf-facts::after { grid-column: 4; }
}

/* 2026-10-18: small phones (iPhone SE size) - the long About intro ran 2px past the first screen; slightly smaller hero text there */
@media (max-width: 820px) and (max-height: 620px) { .pv-sub-hero .pv-sub { font-size: 14px !important; line-height: 1.5 !important; } }

/* 2026-10-18 Ahmed: Contact page message form; its own layout, not the home enquiry block */
.cf-sec { padding: clamp(56px, 7vw, 100px) 0; background: #fff; }
.cf-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cf-head .label { margin-bottom: 14px; }
.cf-head h2 { margin: 0 0 18px; }
.cf-head p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink-soft, #3a3f4a); max-width: 42ch; }
.cf-head .cf-urgent { font-size: 14.5px; color: var(--mute-ink, #5b6170); }
.cf-head .cf-urgent a { color: var(--accent, #3C4351); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 18px; }
.cf-grid .field { margin: 0; }
.cf-grid .cf-wide { grid-column: 1 / -1; }
.cf-form textarea { min-height: 150px; resize: vertical; }
.cf-submit { justify-content: flex-end; margin-top: 22px; }
@media (max-width: 820px) {
  .cf-shell { grid-template-columns: 1fr; gap: 26px; }
  .cf-grid { grid-template-columns: 1fr; gap: 16px; }
  .cf-submit { justify-content: stretch; }
  .cf-submit .submit { width: 100%; }
}
.hf-facts .fact-d { white-space: normal !important; }   /* a phone number line could run into the divider */

/* 2026-10-18 Ahmed: on wide screens the fact rows looked sparse. Three equal columns, text centred in each, a line on each
   column edge, and the type grows with the screen so the row stays full. Phones keep the stacked list. */
@media (min-width: 821px) {
  .facts-band .facts-row, .hf-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; align-items: stretch !important; }
  .facts-band .facts-row::before, .facts-band .facts-row::after, .hf-facts::before, .hf-facts::after { content: none !important; display: none !important; }
  .facts-band .facts-row .fact, .hf-facts .fact { grid-column: auto !important; grid-row: auto !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; text-align: center; padding: 4px clamp(16px, 2vw, 40px) !important; border-left: 1px solid rgba(60, 67, 81, .14) !important; }
  .facts-band .facts-row .fact:first-child, .hf-facts .fact:first-child { border-left: 0 !important; }
  .facts-band .fact-tx, .hf-facts .fact-tx { display: flex; flex-direction: column; align-items: center; max-width: 34ch; }
  .facts-band .fact-t, .hf-facts .fact-t { font-size: clamp(19px, 1.45vw, 28px) !important; line-height: 1.2 !important; }
  .facts-band .fact-d, .hf-facts .fact-d { font-size: clamp(13.5px, .95vw, 17px) !important; line-height: 1.55 !important; }
  .facts-band .fact-k { font-size: clamp(11px, .72vw, 13px) !important; }
}
.facts-band .fact-t, .hf-facts .fact-t, .hf-facts .fact-d { white-space: normal !important; overflow-wrap: break-word; }
@media (min-width: 821px) and (max-width: 1199px) { .hf-facts .fact { padding: 2px 10px !important; } .hf-facts .fact-t { font-size: 16px !important; } .hf-facts .fact-d { font-size: 12.5px !important; } }
.facts-band .fact-d, .hf-facts .fact-d { text-wrap: balance; }

/* 2026-10-18 Ahmed: lighter, calmer fact rows. Smaller serif titles, quieter descriptions on even lines
   (no balanced wrapping, which made narrow ragged blocks), same spacing in every column. */
@media (min-width: 821px) {
  .facts-band .fact-tx, .hf-facts .fact-tx { max-width: 23em; gap: 8px !important; }
  .facts-band .fact-k { margin-bottom: 2px; letter-spacing: .2em; }
  .facts-band .fact-t, .hf-facts .fact-t { font-size: clamp(18px, 1.15vw, 22px) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
  .facts-band .fact-d, .hf-facts .fact-d { font-size: clamp(13.5px, .8vw, 15px) !important; font-weight: 400 !important; line-height: 1.6 !important; color: #6b7080 !important; text-wrap: pretty; }
  .facts-band .facts-row { padding-top: 30px !important; padding-bottom: 30px !important; }
}
@media (min-width: 821px) and (max-width: 1199px) { .hf-facts .fact-t { font-size: 16px !important; } .hf-facts .fact-d { font-size: 12.5px !important; } }
@media (min-width: 1200px) { .facts-band .fact-tx { max-width: 28em; } }
@media (min-width: 821px) { .facts-band .facts-row { padding-top: 18px !important; padding-bottom: 16px !important; } }   /* hero + row = exactly the first screen */
@media (min-width: 821px) { .facts-band .fact-tx { max-width: 340px !important; } .hf-facts .fact-tx { max-width: 300px !important; } }
@media (min-width: 1200px) { .facts-band .fact-tx { max-width: 430px !important; } }
@media (min-width: 821px) { .facts-band .fact-d, .hf-facts .fact-d { max-width: none !important; } }   /* the old 30ch cap forced a third line */
.facts-band .fact-d strong, .hf-facts .fact-d strong { font-weight: 600; color: var(--ink, #1c2029); }   /* 2026-10-19 Ahmed: "for £25" in bold */

/* 2026-10-20 Ahmed: on phones the last "Why choose us" card stopped off to the side. Pad both ends of the track by half
   the leftover space so every card, first and last included, stops in the middle. Card = min(82vw, 340px) (site.css). */
@media (max-width: 720px) {
  .why-marquee { padding-left: calc((100vw - min(82vw, 340px)) / 2) !important; padding-right: calc((100vw - min(82vw, 340px)) / 2) !important; scroll-padding-inline: 0 !important; }
  .why-card { scroll-snap-align: center !important; }
}

/* 2026-10-20 Ahmed: phone reviews had no arrows and stopped off-centre. Same behaviour as "Why choose us": every card stops in
   the middle (ends padded by half the leftover space), with arrows and a count centred underneath. */
.rev-ph { display: none; }
@media (max-width: 820px) {
  .review-marquee { padding-left: calc((100% - min(82vw, 340px)) / 2) !important; padding-right: calc((100% - min(82vw, 340px)) / 2) !important; scroll-padding-inline: 0 !important; }
  .review-set { padding-right: 0 !important; }
  .review-card { scroll-snap-align: center !important; }
  .rev-ph { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
  .rev-ph button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(60, 67, 81, .25); background: #fff; color: var(--ink, #1c2029); display: inline-grid; place-items: center; cursor: pointer; transition: opacity .2s, background .2s; }
  .rev-ph button:disabled { opacity: .35; cursor: default; }
  .rev-count { min-width: 4.2em; text-align: center; font: 500 13px/1 var(--sans); letter-spacing: .06em; color: var(--mute-ink, #5b6170); }
}
@media (max-width: 820px) {   /* WebKit ignores the scroller's end padding here, so the end space sits inside the row (marquee is full width on phones) */
  .review-marquee { padding-right: 0 !important; }
  .review-set { padding-right: calc((100vw - min(82vw, 340px)) / 2) !important; }
}

/* 2026-10-20 Ahmed: team cards short and sweet: name, GDC number, special interests, View profile (opens the full bio in place) */
.team-card h3 { margin-bottom: 2px !important; }
.team-card .gdc { display: block; margin: 0 0 18px; font: 400 14px/1.4 var(--sans) !important; letter-spacing: .02em !important; color: var(--mute-ink, #6b7080) !important; text-transform: none !important; }
.team-card .tc-k { margin: 0 0 6px; font: 500 14px/1.4 var(--sans); color: var(--ink, #1c2029); }
.team-card .tc-list { list-style: none; margin: 0 0 22px; padding: 0; }
.team-card .tc-list li { font: 400 14px/1.7 var(--sans); color: var(--mute-ink, #6b7080); }
.team-card .tc-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 24px; border: 1px solid rgba(60, 67, 81, .22); border-radius: 999px; background: #fff; color: var(--ink, #1c2029); font: 500 14px/1 var(--sans); text-decoration: none; cursor: pointer; list-style: none; transition: background .2s, border-color .2s; }
.team-card .tc-btn::-webkit-details-marker { display: none; }
.team-card .tc-btn:hover { background: var(--tint, #f1f3f6); border-color: rgba(60, 67, 81, .35); }
.team-card .tc-arrow { transition: transform .25s; }
.tc-more .tc-close, .tc-more[open] .tc-open { display: none; }
.tc-more[open] .tc-close { display: inline; }
.tc-more[open] .tc-arrow { transform: rotate(90deg); }
.tc-bio { padding-top: 16px; }
.tc-bio p { margin: 0 0 10px; font: 400 14.5px/1.65 var(--sans); color: var(--ink-soft, #3a3f4a); }
.tc-bio .role { font-weight: 500; color: var(--ink, #1c2029); }
.tc-hire p { margin-bottom: 22px; }
.team-card { display: flex !important; flex-direction: column; align-items: center; }
.team-card .tc-more, .tc-hire .tc-btn { margin-top: auto; }   /* buttons line up across the row */
.team-card .tc-list { margin-bottom: 22px; }

/* 2026-10-20 Ahmed: phone alignment. Strip descriptions use the full width (the old 30ch cap broke lines early), and on wider
   phones the team cards go two across, edge to edge with the strip and headings, instead of a narrow centred column. */
@media (max-width: 820px) {
  .hf-facts .fact-d { max-width: none !important; }
  .team-grid { max-width: none !important; margin: 0 !important; }
}
@media (min-width: 560px) and (max-width: 820px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (min-width: 721px) and (max-width: 820px) { .hero-facts { padding-left: 26px !important; padding-right: 26px !important; } }   /* page margin is 36px here; strip sits 10px in */
.rev-count { display: none !important; }   /* 2026-10-20 Ahmed: no "18 / 18", arrows only */

/* 2026-10-20 Ahmed: Team strip is an invitation, "Care starts with a conversation", with a button to the Contact page */
.hf-talk .hf-talk-body { display: flex; align-items: center; gap: 28px; }
.hf-talk .hf-talk-body p { margin: 0; max-width: 46ch; font: 400 clamp(15px, 1vw, 17px)/1.6 var(--sans); color: var(--mute-ink, #5b6170); }
.hf-btn { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 26px; border-radius: 999px; background: var(--accent, #3C4351); color: #fff !important; font: 500 14.5px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background .2s; }
.hf-btn:hover { background: var(--accent-deep, #2E3440); }
@media (max-width: 820px) {
  .hf-talk .hf-talk-body { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 10px; }
}
@media (min-width: 821px) { .hf-talk .hf-talk-body { justify-content: space-between; } .hf-talk .hf-talk-body p { max-width: 52ch; } }
@media (max-width: 820px) { .hf-talk .hf-talk-body { margin-top: 0; } .hf-talk.hero-facts { gap: 12px !important; } }

/* 2026-10-20 Ahmed's mockup: heading and line above the price list; the note under it small and quiet */
.price-head { margin: 0 0 18px; }
.price-head h2 { margin: 0 0 12px; font: 400 clamp(28px, 2.6vw, 40px)/1.15 var(--serif) !important; letter-spacing: 0; }
.price-head p { margin: 0; max-width: 62ch; font: 400 16px/1.6 var(--sans); color: var(--mute-ink, #5b6170); }
.price-dated { margin: 0 0 26px !important; max-width: 62ch; font: 400 13px/1.5 var(--sans) !important; color: var(--mute-ink, #6b7080) !important; }
@media (max-width: 820px) { .hf-facts .fact-d, .hf-p { text-wrap: pretty !important; } }   /* full-width lines on phones, as in Ahmed's mockup */

/* 2026-10-20: practice team joins the dentists (Sorraia Ferreira). Cards sit three across with any short last row centred,
   two across on tablets and wider phones, one on small phones. */
.team-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 20px !important; }
.team-grid > .team-card { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }
@media (max-width: 1179px) { .team-grid > .team-card { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } }
@media (max-width: 820px) { .team-grid { gap: 16px !important; } .team-grid > .team-card { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); } }
@media (max-width: 559px) { .team-grid > .team-card { flex-basis: 100%; max-width: 100%; } }
.team-card .tc-role { display: block; margin: 0 0 6px; font: 400 14px/1.4 var(--sans); color: var(--mute-ink, #6b7080); }

/* 2026-10-20 Ahmed: practice team in its own row of compact cards, so no card stretches empty next to a dentist */
.team-grid > .tc-break { flex: 0 0 100% !important; max-width: 100% !important; height: 0; margin: 0; padding: 0; border: 0; }
.team-card.tc-staff, .team-card.tc-hire { flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: 20px; text-align: left; padding: 22px 24px !important; }
.tc-staff .team-avatar, .tc-hire .team-avatar { width: 84px !important; height: 84px !important; min-width: 84px; margin: 0 !important; font-size: 22px; flex: none; }
.tc-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tc-text h3 { margin: 0 0 4px !important; font-size: 18px !important; }
.tc-text .tc-role { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--mute-ink, #6b7080); }
.tc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 14px/1 var(--sans); color: var(--ink, #1c2029); text-decoration: none; }
.tc-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.team-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }   /* an old 480px cap squeezed the cards at tablet width */