:root {
  --ink: #17383f;
  --ink-deep: #0f2d33;
  --paper: #fffdf8;
  --cream: #f6f1e8;
  --mist: #e7efec;
  --sage: #8faea1;
  --sage-soft: #dce9e4;
  --accent: #6f9b8f;
  --emergency: #c65543;
  --emergency-deep: #ac4331;
  --white: #ffffff;
  --muted: #66777a;
  --line: rgba(23,56,63,.12);
  --shadow: 0 24px 70px rgba(15,45,51,.12);
  --container: 1200px;
  --header-height: 82px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section { padding: 108px 0; }

.skip-link { position: fixed; left: 16px; top: 10px; z-index: 9999; padding: 10px 14px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 500; letter-spacing: -.045em; }
h1 { font-size: clamp(58px, 6vw, 86px); line-height: .98; margin-bottom: 26px; }
h1 em { color: var(--accent); font-style: normal; font-weight: 500; }
h2 { font-size: clamp(40px, 4vw, 58px); line-height: 1.07; margin-bottom: 24px; }
h3 { font-size: 25px; line-height: 1.2; }
.eyebrow { margin-bottom: 13px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; }
.eyebrow--light { color: #c9ddd5; }
.lead { font-size: 18px; color: var(--muted); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-height); background: rgba(255,253,248,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: background .3s, box-shadow .3s, border-color .3s; }
.site-header.scrolled { background: rgba(255,253,248,.97); border-color: var(--line); box-shadow: 0 8px 26px rgba(15,45,51,.06); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 200px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: white; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 13px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 19px; font-weight: 600; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav a { position: relative; color: #4d6266; font-size: 13px; font-weight: 600; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--accent); transition: right .3s; }
.desktop-nav a:hover::after,.desktop-nav a.active::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.phone-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.phone-link__icon { flex: 0 0 auto; color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; letter-spacing: .02em; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,45,51,.18); }
.button--small { min-height: 42px; padding: 0 19px; }
.button--light { background: white; color: var(--ink); }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.text-link span { color: var(--accent); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--ink); }
.mobile-menu { display: none; }

.hero { padding: calc(var(--header-height) + 70px) 0 84px; background: linear-gradient(120deg, var(--cream) 0 57%, var(--sage-soft) 57% 100%); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 76px; align-items: center; }
.hero-copy { max-width: 580px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 25px; padding: 8px 13px; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: #6aa37f; box-shadow: 0 0 0 5px rgba(106,163,127,.13); }
.hero-copy > p { max-width: 540px; margin-bottom: 30px; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 24px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); color: #587075; font-size: 11px; font-weight: 600; }
.hero-features span::before { content: "•"; margin-right: 9px; color: var(--accent); }
.hero-visual { position: relative; min-width: 0; }
.image-card { overflow: hidden; background: #dce6e2; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.image-card img { height: 100%; object-fit: cover; }
.image-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-image-card { height: 570px; border-radius: 42px; }
.hero-image-card img { object-position: center; }
/* The hero holds a landscape (16:9) video. Match the card to the video's shape so
   the whole clip is visible — no cropping and no empty letterbox bars. */
.hero .hero-image-card { aspect-ratio: 848 / 480; height: auto; min-height: 0; max-height: none; }
.hero .hero-image-card video { object-fit: cover; }
.floating-card { position: absolute; display: flex; flex-direction: column; min-width: 150px; padding: 17px 19px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 18px 44px rgba(15,45,51,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.floating-card strong { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 20px; }
.floating-card span { color: var(--muted); font-size: 10px; }
.rating-card { left: -34px; bottom: 34px; }
.experience-card { right: -18px; top: 34px; }

.stats-strip { background: var(--ink); color: white; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stats-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 118px; border-right: 1px solid rgba(255,255,255,.12); }
.stats-grid > div:last-child { border-right: 0; }
.stats-grid strong { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 27px; font-weight: 500; }
.stats-grid span { margin-top: 4px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.about-grid,.experience-grid,.technology-grid,.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.about-media,.experience-media { position: relative; }
.portrait-card { height: 585px; }
.portrait-card img { object-position: center top; }
.doctor-card { position: absolute; right: -25px; bottom: 35px; display: flex; flex-direction: column; min-width: 220px; padding: 22px; background: white; border-radius: 18px; box-shadow: var(--shadow); }
.doctor-card small { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.doctor-card strong { margin-top: 7px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 20px; }
.doctor-card span { color: var(--muted); font-size: 11px; }
.about-copy { max-width: 560px; }
.check-list { margin: 28px 0 32px; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line); color: #4d6266; font-size: 14px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.photo-gallery__item { margin: 0; overflow: hidden; border-radius: 18px; background: #dce6e2; aspect-ratio: 4 / 3; }
.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.photo-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 820px) { .photo-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .photo-gallery { grid-template-columns: 1fr; } }
.check-list--two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.check-list--two li { border-bottom: 1px solid var(--line); }
.check-list a { color: inherit; font-weight: 650; text-decoration: none; }
.check-list a:hover { color: var(--accent); }
@media (max-width: 640px) { .check-list--two { grid-template-columns: 1fr; } }

.credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.credentials-card { display: flex; flex-direction: column; padding: 34px 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 14px 40px rgba(15,45,51,.05); }
.credentials-card__mark { width: 34px; height: 3px; margin-bottom: 26px; background: var(--accent); border-radius: 2px; }
.credentials-card h3 { margin-bottom: 12px; font-size: 21px; }
.credentials-card p { margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.credentials-card .text-link { margin-top: auto; }
@media (max-width: 860px) { .credentials-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Contact info card: booking + location buttons, wrapping neatly. */
.contact-info-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Booking page now offers a single Online Booking card — center it instead of
   leaving it in one half of the old two-column grid. */
.booking-grid--single { grid-template-columns: 1fr; }
.internal-premium .booking-grid--single { max-width: 640px; margin-inline: auto; }

.services { background: var(--cream); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 50px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 470px; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { min-height: 255px; padding: 26px; background: var(--paper); border: 1px solid rgba(23,56,63,.08); border-radius: 20px; transition: transform .3s var(--ease), box-shadow .3s; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 20px 46px rgba(15,45,51,.10); }
.service-number { width: 30px; height: 3px; margin-bottom: 32px; background: var(--accent); border-radius: 2px; }
.internal-premium .value-card > span { display: block; width: 30px; height: 3px; margin-bottom: 40px; padding: 0; background: #638f86; border-radius: 2px; }
.service-card h3 { margin-bottom: 13px; }
.service-card p { min-height: 51px; margin-bottom: 25px; color: var(--muted); font-size: 13px; }
.service-card a { font-size: 11px; font-weight: 700; }

.experience { background: var(--paper); }
.experience-copy > p:not(.eyebrow) { max-width: 600px; color: var(--muted); }
.feature-list { margin-top: 30px; }
.feature-list > div { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.feature-list span { color: var(--accent); font-size: 10px; font-weight: 800; }
.feature-list strong { display: block; margin-bottom: 4px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 18px; }
.feature-list p { margin: 0; color: var(--muted); font-size: 12px; }
.family-card { height: 600px; }
.family-card img { object-position: center 22%; }
.mini-badge { position: absolute; left: -22px; bottom: 36px; display: flex; flex-direction: column; padding: 18px 22px; background: var(--accent); color: white; border-radius: 16px; box-shadow: var(--shadow); }
.mini-badge strong { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 19px; }
.mini-badge span { font-size: 10px; opacity: .8; }

.technology { background: var(--ink-deep); color: white; }
.technology-grid { gap: 78px; }
.tech-image-card { height: 570px; box-shadow: 0 26px 70px rgba(0,0,0,.25); }
.technology-copy h2 { color: white; }
.technology-copy > p:not(.eyebrow) { color: rgba(255,255,255,.67); }
.tech-list { margin-top: 28px; }
.tech-list > div { display: flex; flex-direction: column; gap: 4px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.tech-list strong { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 17px; font-weight: 500; }
.tech-list span { color: rgba(255,255,255,.56); font-size: 11px; }

.reviews { background: var(--cream); }
.reviews-heading { align-items: center; }
.review-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.review-summary span,.stars { color: var(--accent); letter-spacing: 3px; }
.review-summary strong { color: var(--muted); font-size: 10px; }
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.review-card { display: flex; flex-direction: column; min-height: 250px; padding: 25px; background: var(--paper); border: 1px solid rgba(23,56,63,.08); border-radius: 20px; }
.stars { font-size: 12px; }
.review-card blockquote { margin: 30px 0 auto; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 20px; line-height: 1.45; }
.review-author { display: flex; align-items: center; gap: 11px; margin-top: 25px; }
.review-author > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sage-soft); font-weight: 800; }
.review-author div { display: flex; flex-direction: column; }
.review-author strong { font-size: 11px; }
.review-author small { color: var(--muted); font-size: 9px; }

.appointment-cta { padding: 72px 0; background: var(--accent); color: white; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.cta-inner h2 { margin-bottom: 10px; color: white; font-size: clamp(36px,4vw,52px); }
.cta-inner p:not(.eyebrow) { max-width: 640px; margin-bottom: 0; color: rgba(255,255,255,.76); font-size: 14px; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.cta-actions > a:last-child { font-size: 11px; font-weight: 700; }

.contact { background: var(--paper); }
.contact-copy > p:not(.eyebrow) { color: var(--muted); }
.contact-details { margin: 28px 0 32px; border-top: 1px solid var(--line); }
.contact-details > div { display: grid; grid-template-columns: 84px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.contact-details span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-details strong { font-size: 12px; line-height: 1.65; }
.map-card { position: relative; min-height: 470px; overflow: hidden; background: #e2ebe7; border-radius: 28px; }
.map-grid { position: absolute; inset: -30px; opacity: .55; background-image: linear-gradient(rgba(23,56,63,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(23,56,63,.11) 1px, transparent 1px); background-size: 56px 56px; transform: rotate(12deg) scale(1.15); }
.map-grid::before,.map-grid::after { content:""; position:absolute; left:-15%; top:34%; width:130%; height:12px; background:rgba(255,255,255,.84); transform:rotate(-19deg); box-shadow:0 110px 0 rgba(255,255,255,.84); }
.map-grid::after { top:55%; transform:rotate(41deg); }
.map-pin { position:absolute; left:52%; top:45%; width:54px; height:54px; background:var(--accent); border:8px solid white; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); box-shadow:0 15px 30px rgba(23,56,63,.18); }
.map-pin span { position:absolute; inset:11px; background:white; border-radius:50%; }
.map-label { position:absolute; left:50%; top:63%; transform:translateX(-50%); display:flex; flex-direction:column; min-width:210px; padding:15px 18px; background:white; border-radius:13px; box-shadow:var(--shadow); text-align:center; }
.map-label strong { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.map-label span { color:var(--muted); font-size:10px; }

.site-footer { padding: 72px 0 24px; background: #102e35; color: white; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; }
.brand--footer .brand-mark { background:white; color:var(--ink); }
.brand--footer .brand-copy strong { color:white; }
.brand--footer .brand-copy small { color:rgba(255,255,255,.45); }
.footer-brand p { max-width:360px; margin-top:24px; color:rgba(255,255,255,.58); font-size:12px; }
.footer-areas { margin-top:14px; }
.footer-areas a { color:rgba(255,255,255,.78); text-decoration:underline; text-underline-offset:2px; }
.footer-areas a:hover { color:#9ce1cc; }
.footer-column { display:flex; flex-direction:column; gap:10px; }
.footer-column h3 { margin:0 0 10px; color:#b6d0c6; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.footer-column a,.footer-column span { color:rgba(255,255,255,.65); font-size:11px; line-height:1.7; }
.footer-column a:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:21px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.42); font-size:9px; }
.footer-bottom div { display:flex; gap:18px; }

.reveal { opacity:1; transform:none; }
.reveal--delay { transition-delay:0s; }
.reveal.is-visible { opacity:1; transform:none; }
:focus-visible { outline:3px solid rgba(111,155,143,.45); outline-offset:4px; border-radius:5px; }

@media (max-width: 1080px) {
  .desktop-nav { gap:18px; }
  .phone-link { display:none; }
  .hero-grid { gap:42px; }
  .hero-image-card { height:520px; }
  .about-grid,.experience-grid,.technology-grid,.contact-grid { gap:56px; }
}

@media (max-width: 900px) {
  :root { --header-height:74px; }
  .container { width:min(calc(100% - 32px),var(--container)); }
  .section { padding:82px 0; }
  .desktop-nav,.header-actions .button,.phone-link { display:none; }
  .menu-toggle { display:block; }
  .mobile-menu { position:fixed; inset:var(--header-height) 0 0; display:flex; flex-direction:column; justify-content:space-between; padding:28px 24px 34px; background:var(--paper); transform:translateX(100%); visibility:hidden; transition:transform .4s var(--ease), visibility .4s; }
  .mobile-menu.open { transform:none; visibility:visible; }
  .mobile-menu nav { display:flex; flex-direction:column; }
  .mobile-menu nav a { padding:15px 0; border-bottom:1px solid var(--line); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:26px; }
  .mobile-menu .button { width:100%; }

  .hero { padding:calc(var(--header-height) + 42px) 0 58px; background:linear-gradient(180deg,var(--cream) 0 56%,var(--sage-soft) 56% 100%); }
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  .hero-copy { max-width:680px; }
  h1 { font-size:clamp(48px,10vw,68px); }
  .hero-copy > p { font-size:15px; }
  .hero-image-card { height:min(75vw,560px); min-height:410px; border-radius:30px; }
  .rating-card { left:14px; bottom:-18px; }
  .experience-card { right:14px; top:16px; }

  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid > div:nth-child(2) { border-right:0; }
  .stats-grid > div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.12); }

  .about-grid,.experience-grid,.technology-grid,.contact-grid { grid-template-columns:1fr; }
  .about-media,.experience-media,.technology-media { max-width:680px; }
  .portrait-card,.family-card,.tech-image-card { height:min(80vw,560px); min-height:430px; }
  .doctor-card { right:16px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .section-heading { align-items:flex-start; flex-direction:column; gap:16px; }
  .section-heading > p { max-width:600px; }
  .technology-media { order:2; }
  .review-grid { grid-template-columns:1fr; }
  .review-summary { align-items:flex-start; }
  .cta-inner { align-items:flex-start; flex-direction:column; }
  .cta-actions { align-items:flex-start; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 620px) {
  body { font-size:15px; }
  .container { width:min(calc(100% - 24px),var(--container)); }
  .section { padding:68px 0; }
  .brand { min-width:0; }
  .brand-mark { width:36px; height:36px; }
  .brand-copy strong { font-size:17px; }
  .brand-copy small { font-size:8px; }
  h1 { font-size:clamp(43px,12vw,58px); }
  h2 { font-size:clamp(34px,9vw,44px); }
  .hero { padding-top:calc(var(--header-height) + 28px); }
  .status-pill { margin-bottom:19px; font-size:8px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }
  .hero-features { grid-template-columns:1fr 1fr; margin-top:30px; }
  .hero-image-card { min-height:340px; height:105vw; max-height:470px; border-radius:24px; }
  .floating-card { min-width:126px; padding:13px 14px; }
  .floating-card strong { font-size:17px; }
  .experience-card { display:none; }
  .stats-grid > div { min-height:96px; }
  .stats-grid strong { font-size:23px; }
  .doctor-card { position:relative; right:auto; bottom:auto; width:calc(100% - 28px); margin:-24px auto 0; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; }
  .family-card,.portrait-card,.tech-image-card { min-height:360px; height:110vw; max-height:500px; }
  .mini-badge { left:12px; bottom:12px; }
  .contact-details > div { grid-template-columns:1fr; gap:5px; }
  .map-card { min-height:360px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Premium motion layer: keeps the Lovable layout, adds restrained GSAP/Lenis interaction. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body { visibility: visible; }
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  will-change: transform;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.motion-ready .reveal { opacity: 1; transform: none; }
.image-card img { will-change: transform; backface-visibility: hidden; }
.service-card,
.review-card { transform-style: preserve-3d; will-change: transform; }
.hero-image-card { will-change: transform, clip-path; }
.floating-card { will-change: transform; }

@media (max-width: 900px) {
  .grain { opacity: .018; }
  .service-card,
  .review-card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .grain { display: none; }
  [data-parallax] img,
  .service-card,
  .review-card,
  .floating-card { transform: none !important; }
}

/* =========================================================
   Reliability + mobile refinement + official brand assets
   ========================================================= */
:root {
  --gold: var(--accent);
}

.brand {
  min-width: 0;
}

.brand-logo {
  width: auto;
  height: 76px;
  object-fit: contain;
  object-position: left center;
}

.brand-logo--footer {
  width: 174px;
  height: auto;
  filter: none !important;
  opacity: 1;
}

/* Cards must never disappear when a motion CDN is slow or an animation is interrupted. */
.service-card,
.review-card,
[data-stagger-group] > * {
  opacity: 1;
  visibility: visible;
}

.service-grid,
.review-grid {
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
}

.service-card a {
  margin-top: auto;
}

.review-card blockquote {
  font-size: clamp(17px, 1.45vw, 20px);
}

/* Better image crops for real Dunbar Smiles photography. */
.hero-image-card img {
  object-position: 56% center;
}

.portrait-card img {
  object-position: center 30%;
}

.family-card img {
  object-position: center 36%;
}

.tech-image-card img {
  object-position: center 20%;
}

@media (max-width: 1080px) {
  .brand-logo { width: 150px; }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .brand { min-width: 0; }
  .brand-logo { width: 142px; height: 48px; }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-card:last-child { grid-column: 1 / -1; }
  .service-card,
  .review-card { min-width: 0; }
  .about-copy,
  .experience-copy,
  .technology-copy,
  .contact-copy { max-width: 680px; }
}

@media (max-width: 680px) {
  :root { --header-height: 68px; }
  body { font-size: 14px; line-height: 1.6; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 58px 0; }

  .site-header { height: var(--header-height); }
  .header-inner { gap: 12px; }
  .brand-logo { width: 126px; height: 42px; }
  .menu-toggle { width: 40px; height: 40px; padding: 8px; }
  .mobile-menu { padding: 22px 18px 26px; }
  .mobile-menu nav a { padding: 13px 0; font-size: 21px; }

  h1 { font-size: clamp(38px, 11.5vw, 52px); line-height: 1.02; letter-spacing: -.055em; }
  h2 { font-size: clamp(30px, 8.5vw, 40px); }
  h3 { font-size: 21px; }
  .lead { font-size: 16px; }

  .hero { padding: calc(var(--header-height) + 26px) 0 48px; }
  .hero-grid { gap: 32px; }
  .hero-copy > p { font-size: 14px; line-height: 1.65; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-features { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .hero-image-card { min-height: 330px; height: 96vw; max-height: 430px; border-radius: 24px; }
  .rating-card { left: 10px; bottom: 10px; }
  .floating-card { min-width: 132px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid > div { min-height: 88px; padding: 12px 8px; text-align: center; }
  .stats-grid strong { font-size: 20px; }
  .stats-grid span { font-size: 8px; line-height: 1.35; }

  .portrait-card,
  .family-card,
  .tech-image-card { min-height: 330px; height: 100vw; max-height: 450px; }
  .doctor-card { width: calc(100% - 18px); padding: 18px; }
  .doctor-card strong { font-size: 18px; }

  .section-heading { margin-bottom: 30px; }
  .section-heading > p { font-size: 13px; }
  .service-grid,
  .review-grid { grid-template-columns: 1fr; gap: 14px; }
  .review-card:last-child { grid-column: auto; }
  .service-card { padding: 22px; border-radius: 17px; }
  .service-number { margin-bottom: 24px; }
  .service-card p { min-height: 0; margin-bottom: 18px; }
  .review-card { min-height: 0; padding: 22px; border-radius: 17px; }
  .review-card blockquote { margin: 22px 0 0; font-size: 17px; }
  .review-author { margin-top: 20px; }

  .feature-list > div { grid-template-columns: 30px 1fr; padding: 14px 0; }
  .feature-list strong { font-size: 16px; }
  .tech-list strong { font-size: 16px; }

  .appointment-cta { padding: 52px 0; }
  .cta-inner h2 { font-size: 32px; }
  .cta-actions { width: 100%; }
  .cta-actions .button { width: 100%; }

  .contact-details > div { padding: 14px 0; }
  .map-card { min-height: 330px; }
  .site-footer { padding-top: 54px; }
  .footer-grid { gap: 28px; padding-bottom: 36px; }
  .brand-logo--footer { width: 165px; }
}

@media (max-width: 390px) {
  .container { width: min(calc(100% - 22px), var(--container)); }
  .brand-logo { width: 116px; }
  h1 { font-size: 37px; }
  h2 { font-size: 29px; }
  .status-pill { max-width: 100%; white-space: normal; line-height: 1.35; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid > div { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
  .stats-grid > div:last-child { border-bottom: 0; }
}

/* =========================================================
   Bright theme + tablet navigation + polished phone menu
   ========================================================= */
:root {
  --ink: #183e42;
  --ink-deep: #12363a;
  --paper: #ffffff;
  --cream: #f8fbf9;
  --mist: #eef6f2;
  --sage: #9fc8ba;
  --sage-soft: #e9f5f0;
  --accent: #5b9e8d;
  --muted: #64797b;
  --line: rgba(24, 62, 66, .11);
  --shadow: 0 22px 60px rgba(24, 62, 66, .10);
}

body {
  background: #ffffff;
}

.site-header {
  background: rgba(255, 255, 255, .90);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .98);
}

.hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(159, 200, 186, .24), transparent 32%),
    linear-gradient(120deg, #fbfdfc 0 57%, #eaf5f0 57% 100%);
}

.stats-strip {
  background: linear-gradient(135deg, #2b6862, #397b70);
}

.services,
.reviews {
  background: #f7fbf9;
}

.service-card,
.review-card {
  background: #ffffff;
  border-color: rgba(24, 62, 66, .08);
  box-shadow: 0 10px 30px rgba(24, 62, 66, .05);
}

.about,
.experience,
.contact {
  background: #ffffff;
}

.technology {
  background:
    radial-gradient(circle at 12% 14%, rgba(182, 222, 208, .14), transparent 34%),
    linear-gradient(135deg, #1c5051, #2d6d65);
}

.appointment-cta {
  background: linear-gradient(135deg, #69a895, #83bda9);
}

.map-card {
  background: #edf7f3;
}


/* Phone navigation */
@media (max-width: 680px) {
  :root { --header-height: 66px; }

  .desktop-nav,
  .header-actions .button,
  .phone-link {
    display: none !important;
  }

  .menu-toggle {
    position: relative;
    z-index: 1002;
    display: grid;
    place-content: center;
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 1px solid rgba(24, 62, 66, .10);
    border-radius: 50%;
    background: #f4faf7;
    cursor: pointer;
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
    margin: 2.5px 0;
    border-radius: 99px;
    background: var(--ink);
    transition: transform .25s ease, opacity .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    padding: 18px 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(251, 254, 252, .99);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 13px 14px;
    border: 1px solid rgba(24, 62, 66, .09);
    border-radius: 15px;
    background: #ffffff;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 8px 24px rgba(24, 62, 66, .045);
  }

  .mobile-menu nav a:active {
    background: var(--sage-soft);
  }

  .mobile-menu .button {
    width: 100%;
    min-height: 52px;
    margin-top: 2px;
  }

  .hero {
    padding: calc(var(--header-height) + 20px) 0 42px;
    background:
      radial-gradient(circle at 82% 55%, rgba(171, 211, 197, .23), transparent 36%),
      linear-gradient(180deg, #ffffff 0 58%, #eef8f4 58% 100%);
  }

  .hero-grid {
    gap: 28px;
  }

  h1 {
    font-size: clamp(36px, 10.7vw, 46px);
    line-height: 1.02;
  }

  h2 {
    font-size: clamp(28px, 8.4vw, 36px);
  }

  .hero-copy > p {
    font-size: 14px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-actions .text-link {
    justify-content: center;
    min-height: 42px;
  }

  .hero-features {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-top: 22px;
    font-size: 9px;
  }

  .hero-image-card {
    width: 100%;
    height: min(112vw, 430px);
    min-height: 330px;
    border-radius: 22px;
  }

  .experience-card {
    display: none;
  }

  .rating-card {
    left: 10px;
    bottom: 10px;
  }

  .section {
    padding: 54px 0;
  }

  .about-grid,
  .experience-grid,
  .technology-grid,
  .contact-grid {
    gap: 30px;
  }

  .portrait-card,
  .family-card,
  .tech-image-card {
    width: 100%;
    height: min(108vw, 430px);
    min-height: 320px;
    border-radius: 20px;
  }

  .doctor-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 16px);
    min-width: 0;
    margin: -20px auto 0;
    padding: 15px;
  }

  .section-heading {
    gap: 10px;
    margin-bottom: 24px;
  }

  .service-grid,
  .review-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-card,
  .review-card {
    min-height: 0;
    padding: 19px;
    border-radius: 16px;
  }

  .service-number {
    margin-bottom: 16px;
  }

  .service-card p {
    min-height: 0;
    margin-bottom: 15px;
  }

  .review-card blockquote {
    margin-top: 16px;
    font-size: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid > div {
    min-height: 80px;
    padding: 9px 5px;
  }

  .stats-grid strong {
    font-size: 18px;
  }

  .stats-grid span {
    max-width: 120px;
    font-size: 7px;
    line-height: 1.35;
    text-align: center;
  }

  .cta-inner {
    gap: 22px;
  }

  .cta-actions,
  .cta-actions .button {
    width: 100%;
  }

  .contact-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .map-card {
    min-height: 310px;
    border-radius: 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 390px) {
  .mobile-menu nav {
    grid-template-columns: 1fr;
  }

  .mobile-menu nav a {
    min-height: 48px;
  }
}

/* =========================================================
   Final mobile navigation + brighter layered background
   ========================================================= */
html,
body {
  overflow-x: clip;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(157, 211, 191, .16), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
}

.hero,
.about,
.services,
.experience,
.reviews,
.contact {
  position: relative;
  isolation: isolate;
}

.hero::before,
.about::before,
.services::before,
.experience::before,
.reviews::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  background:
    radial-gradient(circle at 88% 14%, rgba(117, 184, 158, .24), transparent 31%),
    radial-gradient(circle at 18% 74%, rgba(194, 229, 215, .22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,248,243,.86));
}

.about::before,
.contact::before {
  background:
    radial-gradient(circle at 90% 18%, rgba(164, 214, 195, .14), transparent 30%),
    linear-gradient(180deg, #ffffff, #fbfefc);
}

.services::before,
.reviews::before {
  background:
    radial-gradient(circle at 9% 12%, rgba(170, 219, 201, .18), transparent 28%),
    radial-gradient(circle at 94% 84%, rgba(208, 235, 225, .22), transparent 34%),
    linear-gradient(145deg, #f9fcfa, #f0f8f4);
}

.experience::before {
  background:
    radial-gradient(circle at 85% 20%, rgba(185, 225, 210, .18), transparent 32%),
    linear-gradient(180deg, #ffffff, #f8fcfa);
}

.service-card,
.review-card,
.doctor-card,
.floating-card {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(24, 62, 66, .08);
  box-shadow: 0 18px 48px rgba(31, 83, 74, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (max-width: 680px) {
  :root {
    --header-height: 78px;
  }

  .site-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(24, 62, 66, .08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  body.menu-open .site-header {
    background: rgba(255, 255, 255, .985);
    box-shadow: none;
  }

  .header-inner {
    height: var(--header-height);
  }

  .brand {
    min-width: 0;
  }

  .brand-logo {
    width: 116px;
    height: 46px;
    max-height: 46px;
    object-fit: contain;
  }

  .menu-toggle {
    z-index: 1103;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 10px;
    border: 1px solid rgba(24, 62, 66, .10);
    background: rgba(239, 249, 245, .88);
    box-shadow: 0 8px 24px rgba(24, 62, 66, .06);
  }

  .mobile-menu {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 1101;
    display: flex;
    min-height: calc(100dvh - var(--header-height));
    padding: 28px 22px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 96% 4%, rgba(114, 184, 157, .28), transparent 33%),
      radial-gradient(circle at 4% 96%, rgba(187, 226, 211, .28), transparent 36%),
      linear-gradient(145deg, #fbfefc 0%, #f2faf6 48%, #e8f5ef 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.2,.8,.2,1),
      visibility .24s;
  }

  .mobile-menu::before,
  .mobile-menu::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
  }

  .mobile-menu::before {
    width: 210px;
    height: 210px;
    right: -78px;
    top: 100px;
    background: rgba(132, 198, 173, .14);
  }

  .mobile-menu::after {
    width: 250px;
    height: 250px;
    left: -110px;
    bottom: -84px;
    background: rgba(194, 229, 215, .20);
  }

  .mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .mobile-menu__intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(24, 62, 66, .11);
  }

  .mobile-menu__intro span {
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .mobile-menu__intro small {
    color: var(--muted);
    font-size: 10px;
  }

  .mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  width: 100%;
}

.mobile-menu nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 12px 40px;
  border: 0;
  border-bottom: 1px solid rgba(24, 62, 66, .10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(21px, 6.3vw, 28px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
}

 .mobile-menu nav a::after {
  content: "↗";
  position: absolute;
  right: 18px;
  color: var(--accent);
  font-size: 16px;
}

  .mobile-menu nav a:active {
    background: transparent;
    color: var(--accent);
  }

  .mobile-menu nav a:active::after {
    transform: translate(2px, -2px);
  }

  .mobile-menu__footer {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
  }

  .mobile-menu__phone {
    display: flex;
    justify-content: center;
    min-height: 46px;
    align-items: center;
    border: 1px solid rgba(24, 62, 66, .12);
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-menu .button {
    width: 100%;
    min-height: 52px;
    margin: 0;
    box-shadow: 0 14px 28px rgba(24, 62, 66, .16);
  }

  .hero {
    padding-top: calc(var(--header-height) + 34px);
    background: transparent;
  }

  .hero::before {
    background:
      radial-gradient(circle at 92% 9%, rgba(119, 190, 163, .26), transparent 31%),
      radial-gradient(circle at 4% 62%, rgba(199, 232, 219, .26), transparent 35%),
      linear-gradient(160deg, #ffffff 0%, #f6fcf9 48%, #ebf7f2 100%);
  }

  .hero-copy {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(39px, 10.7vw, 48px);
    line-height: 1.01;
  }

  .hero-copy > p {
    max-width: 34rem;
    color: #5f7476;
    font-size: 14px;
  }

  .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    font-size: 9px;
  }

  .hero-image-card {
    height: min(104vw, 420px);
    min-height: 320px;
  }

  .floating-card {
    max-width: calc(100% - 20px);
  }

  .section {
    padding: 58px 0;
  }

  .service-card,
  .review-card {
    padding: 20px;
  }
}

@media (max-width: 390px) {
  :root {
    --header-height: 74px;
  }

  .brand-logo {
    width: 108px;
    height: 42px;
  }

  .mobile-menu {
    padding-inline: 18px;
  }

  .mobile-menu__intro small {
    display: none;
  }

  .mobile-menu nav a {
    min-height: 52px;
    font-size: 21px;
  }

  h1 {
    font-size: 37px;
  }

  .hero-features {
    grid-template-columns: 1fr;
  }
}

/* Mobile hero emergency notice — moved below the image instead of overlapping it. */
@media (max-width: 680px) {
  .hero-visual {
    display: block;
  }

  .hero-image-card {
    border-radius: 24px 24px 0 0;
  }

  .rating-card {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 14px 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 14px 30px rgba(15, 45, 51, .14);
    backdrop-filter: none;
    transform: none !important;
  }

  .rating-card strong {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .rating-card span {
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
  }

  .experience-card {
    display: none;
  }
}

@media (max-width: 390px) {
  .rating-card {
    padding: 13px 15px;
  }

  .rating-card strong {
    font-size: 13px;
  }

  .rating-card span {
    font-size: 9px;
  }
}


/* ===== Final hero polish: clean image, aligned CTAs, robust mobile layout ===== */
html,
body {
  overflow-x: clip;
}

.button--secondary {
  min-height: 50px;
  padding-inline: 22px;
  border: 1.5px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.button--secondary:hover {
  background: #ffffff;
  border-color: rgba(24, 62, 66, .28);
  box-shadow: 0 10px 24px rgba(24, 62, 66, .09);
}

.button--secondary span {
  margin-left: 8px;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.hero-actions {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .button {
  min-width: 184px;
  min-height: 50px;
  white-space: nowrap;
}

/* Remove the emergency overlay/bar entirely; the image remains clean. */
.rating-card {
  display: none !important;
}

.hero-image-card {
  overflow: hidden;
}

/* Grid stacking must stay isolated to >900px: the ≤900px stack rule lives
   earlier in the file (.hero-grid{grid-template-columns:1fr}), and if this
   range included 681-900px it would silently win there instead, leaving the
   hero stuck two-column all the way down to 681px — not the 900px everything
   else (nav breakpoint, inner-hero) assumes. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    gap: 38px;
  }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .hero {
    padding: calc(var(--header-height) + 54px) 0 70px;
  }

  .hero-copy {
    max-width: 520px;
  }

  .hero h1 {
    font-size: clamp(48px, 5.1vw, 66px);
  }

  .hero-copy > p {
    font-size: 15px;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .button {
    min-width: 164px;
    padding-inline: 18px;
  }

  .hero-image-card {
    height: 500px;
    border-radius: 34px;
  }

  .experience-card {
    right: 12px;
    top: 18px;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .hero {
    padding: calc(var(--header-height) + 26px) 0 48px;
  }

  .hero-grid {
    gap: 30px;
  }

  .status-pill {
    margin-bottom: 18px;
  }

  .hero h1 {
    margin-bottom: 20px;
    font-size: clamp(38px, 10.6vw, 46px);
    line-height: 1.02;
  }

  .hero-copy > p {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .hero-actions .button,
  .hero-actions .button--secondary {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }

  .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 24px;
    font-size: 10px;
  }

  .hero-visual {
    width: 100%;
  }

  .hero-image-card {
    width: 100%;
    height: min(104vw, 400px);
    min-height: 320px;
    border-radius: 26px;
    box-shadow: 0 18px 44px rgba(24, 62, 66, .11);
  }

  .hero-image-card img {
    object-position: 52% 28%;
  }

  .floating-card,
  .experience-card {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 36px;
  }

  .hero-features {
    grid-template-columns: 1fr 1fr;
    font-size: 9px;
  }

  .hero-image-card {
    height: 108vw;
    min-height: 300px;
    max-height: 380px;
  }
}

@media (min-width: 1181px) {
  .hero {
    padding: calc(var(--header-height) + 64px) 0 72px;
  }

  .hero h1 {
    font-size: clamp(56px, 5.15vw, 72px);
  }

  .hero-image-card {
    height: 540px;
  }
}

/* ===== Definitive hero image geometry fix =====
   Keep one consistent radius on the frame, preserve responsive heights,
   and let the frame clip the image. */
.hero-image-card {
  width: 100%;
  height: 540px;
  min-height: 0;
  border-radius: 32px !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #dce6e2;
}

.hero-image-card > img {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: 56% center;
}

@media (min-width: 681px) and (max-width: 1180px) {
  .hero-image-card {
    height: 500px;
    border-radius: 28px !important;
  }
}

@media (max-width: 680px) {
  .hero-image-card {
    height: clamp(330px, 96vw, 430px);
    min-height: 0 !important;
    max-height: none;
    border-radius: 24px !important;
  }

  .hero-image-card > img {
    object-position: 52% 28%;
  }
}

@media (max-width: 390px) {
  .hero-image-card {
    height: clamp(300px, 108vw, 380px);
    border-radius: 22px !important;
  }
}


/* ===== Mobile-only hero card: bottom overlap, matching the reference layout ===== */
.mobile-emergency-card {
  display: none;
}

@media (max-width: 680px) {
  .hero-visual {
    position: relative;
    /* Keep the card as a subtle overlap while revealing almost the full video. */
    padding-bottom: 110px;
  }

  .hero-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
  }

  .mobile-emergency-card {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 55px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 20px 22px;
    border: 1px solid rgba(24, 62, 66, .08);
    border-radius: 28px;
    background: rgba(255, 255, 255, .97);
    color: var(--ink);
    box-shadow: 0 18px 42px rgba(15, 45, 51, .14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
  }

  .mobile-emergency-card span {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .mobile-emergency-card strong {
    max-width: 270px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.02em;
  }
}

@media (max-width: 390px) {
  .hero-visual {
    padding-bottom: 100px;
  }

  .mobile-emergency-card {
    bottom: 45px;
    left: 10px;
    right: 10px;
    min-height: 94px;
    padding: 17px 19px;
    border-radius: 24px;
  }

  .mobile-emergency-card strong {
    font-size: 16px;
  }
}


/* ===== Multi-page website system ===== */
.inner-hero{padding:calc(var(--header-height) + 70px) 0 84px;background:radial-gradient(circle at 15% 20%,rgba(115,184,166,.18),transparent 34%),linear-gradient(135deg,#f7fbf9 0%,#f3f7f5 52%,#fff 100%)}
.inner-hero--compact{padding-bottom:58px}.inner-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);gap:68px;align-items:center}.inner-hero__copy h1,.blog-hero h1{max-width:920px;margin:0 0 24px;font-size:clamp(48px,5.1vw,76px);line-height:1.02;letter-spacing:-.055em}.inner-hero__copy>p:last-child{max-width:700px;font-size:18px;line-height:1.75;color:var(--muted)}.inner-hero__image{height:440px;border-radius:32px;overflow:hidden}.inner-hero__image img{width:100%;height:100%;object-fit:cover}.section--tint{background:linear-gradient(135deg,#f4faf7,#edf7f4 55%,#fff)}
.content-split,.profile-grid,.location-grid,.contact-page-grid,.booking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:start}.content-split p,.profile-copy p,.narrow-content p{font-size:17px;line-height:1.8;color:var(--muted)}.info-panel,.contact-form-card,.contact-info-card,.booking-card,.notice-card,.aside-card{padding:34px;border:1px solid rgba(24,62,66,.11);border-radius:26px;background:rgba(255,255,255,.8);box-shadow:0 18px 50px rgba(24,62,66,.08)}.info-panel h3,.booking-card h2,.contact-form-card h2,.contact-info-card h2{margin-top:0}.three-up,.team-mini-grid,.pathway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.value-card,.team-mini-grid article,.pathway-card{padding:28px;border:1px solid rgba(24,62,66,.11);border-radius:24px;background:#fff}.value-card span,.pathway-card>span{display:block;margin-bottom:38px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em}.value-card h3,.pathway-card h3,.team-mini-grid h3{margin-bottom:12px;font-size:24px}.value-card p,.pathway-card p,.team-mini-grid p{color:var(--muted);line-height:1.7}.profile-image{overflow:hidden;border-radius:34px}.profile-image img{width:100%;height:620px;object-fit:cover}.profile-copy{align-self:center}.profile-copy .lead{font-weight:700;color:var(--accent)}
.section-action{display:flex;justify-content:center;margin-top:34px}.resources-preview{background:linear-gradient(145deg,#fff,#f6faf8)}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.blog-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.blog-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(24,62,66,.1);border-radius:26px;background:#fff;box-shadow:0 15px 42px rgba(24,62,66,.07);transition:transform .3s ease,box-shadow .3s ease}.blog-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(24,62,66,.11)}.blog-card__media{display:block;height:220px;overflow:hidden}.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.blog-card:hover .blog-card__media img{transform:scale(1.04)}.blog-card__body{display:flex;flex:1;flex-direction:column;padding:25px}.blog-card__body>span{margin-bottom:13px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.blog-card h3{margin:0 0 13px;font-size:23px;line-height:1.25;letter-spacing:-.025em}.blog-card h3 a{color:var(--ink)}.blog-card p{margin:0 0 24px;color:var(--muted);line-height:1.65}.blog-card .text-link{margin-top:auto}.resource-filter{display:flex;justify-content:space-between;gap:30px;margin-bottom:35px;padding:20px 24px;border-radius:18px;background:var(--ink);color:#fff}.resource-filter span{font-weight:800}.resource-filter p{margin:0;color:rgba(255,255,255,.72)}
.blog-hero{padding:calc(var(--header-height) + 60px) 0 0;background:radial-gradient(circle at 85% 12%,rgba(115,184,166,.2),transparent 34%),linear-gradient(145deg,#f7fbf9,#fff)}.blog-hero .container:first-child{max-width:1040px}.back-link{display:inline-block;margin-bottom:38px;color:var(--ink);font-weight:700}.blog-deck{max-width:800px;margin:0 0 28px;font-size:20px;line-height:1.65;color:var(--muted)}.blog-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:13px}.blog-cover{height:480px;margin-top:50px;overflow:hidden;border-radius:34px;box-shadow:0 24px 70px rgba(24,62,66,.14)}.blog-cover img{width:100%;height:100%;object-fit:cover}.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(250px,330px);gap:80px;align-items:start;justify-content:center}.article-body h2{margin:54px 0 18px;font-size:34px;line-height:1.15}.article-body h2:first-child{margin-top:0}.article-body p{font-size:18px;line-height:1.85;color:#4d6468}.article-aside{position:sticky;top:120px;display:grid;gap:18px}.aside-card{padding:25px}.aside-card h3{margin:0 0 12px}.aside-link{display:block;padding:12px 0;border-bottom:1px solid rgba(24,62,66,.1);color:var(--ink);font-weight:700}.article-cta{margin-top:60px;padding:34px;border-radius:26px;background:linear-gradient(135deg,var(--ink),#275b61);color:#fff}.article-cta h2{margin-top:0;color:#fff}.article-cta p{color:rgba(255,255,255,.78)}.article-cta>div{display:flex;flex-wrap:wrap;gap:12px}.medical-note{margin-top:24px;padding:22px;border-left:4px solid var(--accent);background:#f3f8f6}.medical-note p{margin:6px 0 0;font-size:14px}.faq-layout{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.2fr);gap:70px}.faq-list{display:grid;gap:14px}.faq-list details{padding:20px 22px;border:1px solid rgba(24,62,66,.12);border-radius:18px;background:#fff}.faq-list summary{cursor:pointer;font-weight:800}.faq-list p{margin:14px 0 0;color:var(--muted);line-height:1.7}.location-panel dl{display:grid;gap:0;margin:30px 0}.location-panel dl div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(24,62,66,.12)}.location-panel dt{font-weight:800;color:var(--accent)}.location-panel dd{margin:0;color:var(--muted);line-height:1.6}.location-actions{display:flex;flex-wrap:wrap;gap:12px}.map-card--large{min-height:520px}.preview-form{display:grid;gap:16px;margin-top:26px}.preview-form label{display:grid;gap:8px;font-size:13px;font-weight:800}.preview-form input,.preview-form textarea{width:100%;padding:15px;border:1px solid rgba(24,62,66,.14);border-radius:12px;background:#f8fbfa;font:inherit}.preview-form :disabled{opacity:.72}.booking-card{min-height:330px;display:flex;flex-direction:column}.booking-card .button{margin-top:auto}.notice-card{max-width:900px;margin-inline:auto}.narrow-content{max-width:860px}.narrow-content h1{font-size:clamp(44px,6vw,72px)}
@media (max-width:1050px){.inner-hero__grid{grid-template-columns:1fr;gap:36px}.inner-hero__image{height:420px}.blog-grid,.blog-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:minmax(0,1fr) 280px;gap:44px}.three-up,.team-mini-grid,.pathway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.content-split,.profile-grid,.location-grid,.contact-page-grid,.booking-grid,.faq-layout,.article-layout{grid-template-columns:1fr}.article-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.profile-image img{height:500px}.blog-cover{height:360px}.resource-filter{flex-direction:column}.inner-hero{padding-top:calc(var(--header-height) + 42px)}}
@media (max-width:680px){.inner-hero{padding-bottom:56px}.inner-hero__copy h1,.blog-hero h1{font-size:clamp(38px,11vw,50px)}.inner-hero__copy>p:last-child,.blog-deck{font-size:16px}.inner-hero__image{height:340px;border-radius:24px}.blog-grid,.blog-grid--three,.three-up,.team-mini-grid,.pathway-grid,.article-aside{grid-template-columns:1fr}.blog-card__media{height:210px}.blog-hero{padding-top:calc(var(--header-height) + 36px)}.blog-cover{height:280px;margin-top:32px;border-radius:24px}.blog-meta{display:grid}.article-body h2{font-size:28px}.article-body p{font-size:16px}.article-cta{padding:25px}.article-cta>div,.location-actions{display:grid}.article-cta .button,.location-actions .button{width:100%}.profile-image img{height:420px}.location-panel dl div{grid-template-columns:1fr;gap:6px}.content-split,.profile-grid,.location-grid,.contact-page-grid,.booking-grid{gap:32px}.resource-filter{padding:18px}.map-card--large{min-height:380px}}


/* ===== Visual diversification and official image system ===== */
body.page-about .inner-hero,
body.page-families .inner-hero,
body.page-older-adults .inner-hero { background:linear-gradient(135deg,#fbfdfb 0%,#edf8f3 58%,#f7fbf8 100%); }
body.page-services .inner-hero { background:linear-gradient(130deg,#153d42 0%,#1d5554 100%); color:#fff; }
body.page-services .inner-hero h1,
body.page-services .inner-hero .eyebrow { color:#fff; }
body.page-services .inner-hero__copy>p:last-child { color:rgba(255,255,255,.72); }
body.page-services .inner-hero__image { box-shadow:0 30px 80px rgba(0,0,0,.24); }
body.page-team .inner-hero { background:radial-gradient(circle at 80% 15%,rgba(110,193,172,.22),transparent 35%),linear-gradient(135deg,#f9fcfa,#eaf6f1); }
body.page-contact .inner-hero { background:linear-gradient(135deg,#f7fbf9,#eef7f5); }
body.page-location .inner-hero { background:linear-gradient(125deg,#eef8f4,#fff); }
body.page-book .inner-hero { background:linear-gradient(145deg,#fff,#edf6f2); }
body.page-resources .inner-hero { background:linear-gradient(130deg,#f6fbf8,#e9f5f0); }
body.page-service .inner-hero { position:relative; overflow:hidden; }
body.page-service.service-layout-a .inner-hero { background:linear-gradient(135deg,#f7fbf9,#edf7f2); }
body.page-service.service-layout-b .inner-hero { background:linear-gradient(135deg,#fffaf5,#f3f8f5); }
body.page-service.service-layout-c .inner-hero { background:linear-gradient(135deg,#173e42,#245c5c); color:#fff; }
body.page-service.service-layout-c .inner-hero h1,
body.page-service.service-layout-c .inner-hero .eyebrow { color:#fff; }
body.page-service.service-layout-c .inner-hero__copy>p:last-child { color:rgba(255,255,255,.74); }

.layout-image-left .inner-hero__media { order:-1; }
.layout-image-left .inner-hero__image { border-radius:120px 30px 30px 30px; }
.layout-image-right .inner-hero__image { border-radius:30px 120px 30px 30px; }
.layout-wide-hero .inner-hero__grid { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
.layout-wide-hero .inner-hero__image { height:560px; border-radius:30px 30px 110px 30px; }
.layout-dark-hero .inner-hero__image { border-radius:110px 28px 28px 28px; }
.layout-soft-hero .inner-hero__image { border-radius:32px 110px 32px 32px; }
.layout-location .inner-hero__image { border-radius:28px 28px 120px 28px; }
.layout-contact .inner-hero__image { border-radius:120px 28px 28px 28px; }
.layout-book .inner-hero__image { height:560px; border-radius:200px 200px 28px 28px; }
.service-layout-a .inner-hero__image { border-radius:120px 30px 30px 30px; }
.service-layout-b .inner-hero__grid { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
.service-layout-b .inner-hero__image { border-radius:30px 30px 120px 30px; }
.service-layout-c .inner-hero__image { border-radius:30px 120px 30px 30px; box-shadow:0 30px 80px rgba(0,0,0,.24); }

.practice-gallery { overflow:hidden; }
.practice-gallery__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:stretch; }
.practice-gallery figure { position:relative; overflow:hidden; margin:0; min-height:460px; border-radius:32px; }
.practice-gallery__history { border-radius:32px 120px 32px 32px !important; }
.practice-gallery__team { border-radius:120px 32px 32px 32px !important; }
.practice-gallery img { width:100%; height:100%; object-fit:cover; }
.practice-gallery figcaption,
.service-visual-strip figcaption,
.location-photo figcaption { position:absolute; left:18px; bottom:18px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--ink); font-size:12px; font-weight:700; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

.service-visual-strip { padding:0 0 36px; background:linear-gradient(180deg,#173d42 0 42%,#fff 42%); }
.service-visual-strip__grid { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:18px; }
.service-visual-strip figure { position:relative; overflow:hidden; min-height:320px; margin:0; border-radius:28px; box-shadow:0 18px 50px rgba(16,49,52,.14); }
.service-visual-strip figure:first-child { border-radius:28px 28px 28px 90px; }
.service-visual-strip figure:last-child { border-radius:28px 90px 28px 28px; }
.service-visual-strip img { width:100%; height:100%; object-fit:cover; }

.service-card { padding:0 !important; overflow:hidden; }
.service-card__media { height:155px; overflow:hidden; background:#eaf3ef; }
.service-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.service-card:hover .service-card__media img { transform:scale(1.045); }
.service-card .service-number,
.service-card h3,
.service-card p,
.service-card>a { margin-left:26px; margin-right:26px; }
.service-card .service-number { margin-top:24px; }
.service-card>a { margin-bottom:26px; }
/* Standardize service-card alignment: equal-height cards with the CTA pinned
   to the bottom so photos and "View service" links line up across the grid. */
.service-card { display:flex; flex-direction:column; }
.service-card__media { flex:0 0 auto; }
.service-card>a { margin-top:auto; }

.team-mini-grid { align-items:stretch; }
.team-person { padding:0 !important; overflow:hidden; border-radius:28px !important; background:#fff; box-shadow:0 16px 42px rgba(20,54,58,.08); }
.team-person__image { height:320px; overflow:hidden; background:#eef4f1; }
.team-person__image img { width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .55s ease; }
.team-person:hover .team-person__image img { transform:scale(1.035); }
.team-person__body { padding:24px; }
.team-person__body .eyebrow { margin-bottom:8px; }
.team-person__body h3 { margin:0 0 10px; }

.patient-visual { padding-top:22px; }
.patient-visual__grid { display:grid; grid-template-columns:1.08fr .92fr; gap:54px; align-items:center; }
.patient-visual__media { overflow:hidden; min-height:500px; border-radius:34px 120px 34px 34px; }
.page-students .patient-visual__media,
.page-older-adults .patient-visual__media { border-radius:120px 34px 34px 34px; }
.patient-visual__media img { width:100%; height:100%; object-fit:cover; }
.patient-visual__copy { max-width:540px; }
.patient-visual__copy p { color:var(--muted); font-size:17px; line-height:1.8; }

.service-proof { background:linear-gradient(135deg,#f3f9f6,#fff); }
.service-proof__grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:54px; align-items:center; }
.service-layout-b + * .service-proof__grid { grid-template-columns:1.12fr .88fr; }
.service-proof__copy p { color:var(--muted); font-size:17px; line-height:1.8; }
.service-proof__media { overflow:hidden; min-height:440px; border-radius:34px 110px 34px 34px; }
.service-layout-b ~ main .service-proof__media { border-radius:110px 34px 34px 34px; }
.service-proof__media img { width:100%; height:100%; object-fit:cover; }

.location-photo { background:linear-gradient(135deg,#fff,#eff8f4); }
.location-photo__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.location-photo figure { position:relative; overflow:hidden; min-height:460px; margin:0; border-radius:32px 110px 32px 32px; }
.location-photo img { width:100%; height:100%; object-fit:cover; }
/* Uniform rounding on all four corners of the location photo (was a lopsided 110px corner). */
.internal-premium.page-location .location-photo figure,
.internal-premium.page-location .location-photo figure img { border-radius:26px; }

body.page-article .blog-cover { border-radius:28px 28px 110px 28px; }
body.page-article:nth-of-type(even) .blog-cover { border-radius:110px 28px 28px 28px; }
body.page-article .blog-hero { background:radial-gradient(circle at 85% 5%,rgba(120,196,176,.18),transparent 30%),linear-gradient(180deg,#fff,#f6faf8); }

@media (max-width:1050px){
  .practice-gallery__grid,.patient-visual__grid,.service-proof__grid,.location-photo__grid { grid-template-columns:1fr; }
  .service-visual-strip__grid { grid-template-columns:1fr 1fr; }
  .service-visual-strip figure:first-child { grid-column:1/-1; }
  .layout-image-left .inner-hero__media { order:0; }
  .layout-wide-hero .inner-hero__grid,.service-layout-b .inner-hero__grid { grid-template-columns:1fr; }
}
@media (max-width:680px){
  .layout-image-left .inner-hero__image,
  .layout-image-right .inner-hero__image,
  .layout-wide-hero .inner-hero__image,
  .layout-dark-hero .inner-hero__image,
  .layout-soft-hero .inner-hero__image,
  .layout-location .inner-hero__image,
  .layout-contact .inner-hero__image,
  .layout-book .inner-hero__image,
  .service-layout-a .inner-hero__image,
  .service-layout-b .inner-hero__image,
  .service-layout-c .inner-hero__image { height:360px; border-radius:24px 24px 64px 24px; }
  .practice-gallery__grid,.service-visual-strip__grid { grid-template-columns:1fr; }
  .service-visual-strip figure:first-child { grid-column:auto; }
  .practice-gallery figure,.service-visual-strip figure { min-height:300px; border-radius:24px !important; }
  .team-person__image { height:290px; }
  .patient-visual__media,.service-proof__media,.location-photo figure { min-height:340px; border-radius:24px 24px 64px 24px; }
  .patient-visual__grid,.service-proof__grid,.location-photo__grid { gap:28px; }
  .service-card__media { height:185px; }
}


/* Journal banner — client-facing copy */
.resource-filter {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: 48px;
  padding: 30px 36px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(123, 203, 188, 0.16), transparent 38%),
    linear-gradient(120deg, #173f43 0%, #0f3438 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(15, 52, 56, 0.15);
}

.resource-filter__title span {
  display: block;
  margin-bottom: 10px;
  color: #9fd4ca;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.resource-filter__title h2 {
  margin: 0;
  max-width: 520px;
  color: #fff;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.resource-filter > p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .resource-filter {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px;
  }

  .resource-filter__title h2 {
    font-size: clamp(28px, 7vw, 36px);
  }
}

@media (max-width: 480px) {
  .resource-filter {
    padding: 22px 20px;
    border-radius: 20px;
  }

  .resource-filter > p {
    font-size: 14px;
  }
}

/* =========================================================
   Logo-driven entrance transition
   Full-screen black overlay holds the Dunbar mark in white. GSAP then
   scales a real SVG <mask> shape — a filled silhouette derived from the
   mark itself — from the glyph's own position until it clears the
   viewport, revealing the homepage through the actual logo shape.
   ========================================================= */
.site-loader {
  display: none;
}

.js.loader-active .site-loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow: hidden;
  pointer-events: auto;
  --mark-w: clamp(190px, 32vw, 300px);
}

html.loader-active,
html.loader-active body {
  overflow: hidden;
}

.site-loader__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.site-loader__wash {
  fill: var(--accent);
}

/* Recolored via mask-image (not the old filter:invert trick) because the
   intro background is now a solid color — the mark has to render in a
   color that reads against it, and filter can only push a colored source
   to black or white, never to an arbitrary theme color. White on the
   theme's own teal accent mirrors how .appointment-cta already pairs
   them. Same PNG, same shape, just a different way of tinting it. */
.site-loader__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mark-w);
  aspect-ratio: 655 / 595;
  transform: translate3d(-50%, -50%, 0) scale(.92);
  opacity: 0;
  background-color: var(--white);
  -webkit-mask-image: url('../images/logo-loader-mark-centered.png');
  mask-image: url('../images/logo-loader-mark-centered.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: dsGlyphIn .5s cubic-bezier(.2,.8,.2,1) .1s forwards;
  transition: opacity .12s ease-out;
  will-change: transform, opacity;
}

/* The instant the reveal starts, the flat glyph must vanish — the mask
   shape (not this image) does the reveal from here on. Killing the
   entrance animation (not just re-declaring opacity) matters: a still
   -active "forwards"-filled animation outranks a plain declaration in
   the cascade, so it would otherwise keep holding the glyph at opacity 1
   — a giant static logo sitting over the homepage while the mask grows
   around it. Removing the animation lets the transition below take over
   cleanly, independent of the GSAP timeline. */
.site-loader.is-leaving .site-loader__glyph {
  animation: none;
  opacity: 0;
}

.site-loader.is-leaving {
  pointer-events: none;
}

@keyframes dsGlyphIn {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.9); }
  60% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.03); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.loader-active,
  html.loader-active body { overflow: auto; }
  .site-loader { display: none !important; }
  .hero-video-card > .hero-video { transform: none !important; }
}

/* Hero video keeps the same approved geometry as the previous hero image. */
.hero-video-card {
  position: relative;
  background: #d9e4df;
}

.hero-video-card > .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
  border: 0;
  transform: scale(1.015);
  backface-visibility: hidden;
  will-change: transform;
}

.hero-video-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 38, 44, .02), rgba(12, 38, 44, .17)),
    linear-gradient(90deg, rgba(23, 56, 63, .08), transparent 44%);
}

/* =========================================================
   Arbor-inspired scroll choreography
   ========================================================= */
@media (min-width: 901px) {
  body.page-home.arbor-scroll main {
    perspective: 1400px;
  }

  body.page-home.arbor-scroll main > section > .container {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  body.page-home.arbor-scroll .hero-copy,
  body.page-home.arbor-scroll .hero-visual,
  body.page-home.arbor-scroll .hero-image-card,
  body.page-home.arbor-scroll .hero-video {
    will-change: transform, opacity, clip-path;
    backface-visibility: hidden;
  }

  body.page-home.arbor-scroll .image-card,
  body.page-home.arbor-scroll .blog-card__media,
  body.page-home.arbor-scroll .inner-hero__image {
    will-change: clip-path, transform;
    transform: translateZ(0);
  }

  /* Editorial sticky media: the image lingers while the copy keeps moving. */
  body.page-home.arbor-scroll .experience-media,
  body.page-home.arbor-scroll .technology-media {
    position: sticky;
    top: calc(var(--header-height) + 34px);
    align-self: start;
  }

  body.page-home.arbor-scroll .experience-grid,
  body.page-home.arbor-scroll .technology-grid {
    align-items: start;
  }

  body.page-home.arbor-scroll .feature-list,
  body.page-home.arbor-scroll .tech-list {
    padding-bottom: 8vh;
  }

  body.page-home.arbor-scroll .section h2 {
    transform-origin: 50% 100%;
    will-change: transform, opacity, clip-path;
  }
}

@media (max-width: 900px) {
  .experience-media,
  .technology-media {
    position: static;
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home main > section > .container,
  body.page-home .hero-copy,
  body.page-home .hero-visual,
  body.page-home .image-card,
  body.page-home .blog-card__media {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}

/* =========================================================
   Pinned overlapping mosaic — scroll-driven experience panel
   ========================================================= */
.experience-mosaic {
  position: relative;
  overflow: clip;
  padding: 112px 0 76px;
  background:
    radial-gradient(circle at 50% 10%, rgba(111,155,143,.16), transparent 34%),
    #0b252b;
  color: var(--white);
}

.experience-mosaic__intro {
  position: relative;
  z-index: 4;
  max-width: 900px;
  margin-bottom: 54px;
}

.experience-mosaic__intro h2 {
  max-width: 820px;
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(48px, 6.1vw, 86px);
  line-height: .98;
}

.experience-mosaic__intro > p:last-child {
  max-width: 690px;
  margin-bottom: 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 1.5vw, 20px);
}

.experience-mosaic__scroll {
  position: relative;
  width: min(calc(100% - 48px), 1420px);
  margin-inline: auto;
}

.experience-mosaic__stage {
  position: relative;
  height: min(78vh, 820px);
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
}

.experience-mosaic__top,
.experience-mosaic__bottom {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  will-change: transform;
}

.experience-mosaic__top {
  z-index: 1;
  top: 0;
  left: 7%;
  width: 86%;
  height: 68%;
}

.experience-mosaic__bottom {
  z-index: 2;
  top: 43%;
  left: 0;
  width: 100%;
  height: 63%;
}

.experience-mosaic__panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(255,255,255,.08);
  color: var(--white);
  transform: translateZ(0);
}

.experience-mosaic__panel--copy {
  display: flex;
  align-items: center;
  padding: clamp(30px, 4.8vw, 76px);
  background: rgba(255,255,255,.105);
}

.experience-mosaic__panel--copy-muted {
  background: rgba(255,255,255,.12);
}

.experience-mosaic__panel--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.experience-mosaic__panel--family img { object-position: center 28%; }
.experience-mosaic__panel--technology img { object-position: center 38%; }

.experience-mosaic__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,20,24,.08) 28%, rgba(5,20,24,.78) 100%);
  pointer-events: none;
}

.experience-mosaic__shade--soft {
  background: linear-gradient(180deg, rgba(5,20,24,.02) 32%, rgba(5,20,24,.72) 100%);
}

.experience-mosaic__panel-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 3.6vw, 56px);
  right: clamp(24px, 3.6vw, 56px);
  color: var(--white);
}

.experience-mosaic__panel-copy--top { top: clamp(24px, 3vw, 48px); }
.experience-mosaic__panel-copy--bottom { bottom: clamp(24px, 3vw, 48px); }

.experience-mosaic__panel-copy span,
.experience-mosaic__copy-inner > span {
  display: inline-block;
  margin-bottom: 14px;
  color: #9bd8c3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.experience-mosaic__panel h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(30px, 3.3vw, 58px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.experience-mosaic__panel--copy h3 {
  max-width: 560px;
  margin-bottom: 24px;
  font-size: clamp(30px, 3vw, 52px);
}

.experience-mosaic__panel--copy p {
  max-width: 600px;
  margin-bottom: 0;
  color: rgba(255,255,255,.74);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.65;
}

.experience-mosaic__copy-inner {
  will-change: transform, opacity;
}

@media (min-width: 901px) {
  body.page-home.arbor-scroll .experience-mosaic__stage {
    will-change: transform;
  }

  body.page-home.arbor-scroll .experience-mosaic__panel {
    will-change: transform, opacity;
  }
}

@media (max-width: 900px) {
  .experience-mosaic {
    padding: 82px 0 72px;
  }

  .experience-mosaic__intro {
    margin-bottom: 34px;
  }

  .experience-mosaic__intro h2 {
    font-size: clamp(42px, 11vw, 66px);
  }

  .experience-mosaic__scroll {
    width: min(calc(100% - 32px), 700px);
  }

  .experience-mosaic__stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .experience-mosaic__top,
  .experience-mosaic__bottom {
    position: static;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    transform: none !important;
  }

  .experience-mosaic__panel {
    min-height: 360px;
  }

  .experience-mosaic__panel--copy {
    min-height: 330px;
    padding: 34px 26px;
  }

  .experience-mosaic__panel--image {
    height: min(118vw, 560px);
  }

  .experience-mosaic__panel h3,
  .experience-mosaic__panel--copy h3 {
    font-size: clamp(30px, 9vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-mosaic__top,
  .experience-mosaic__bottom,
  .experience-mosaic__panel,
  .experience-mosaic__panel img,
  .experience-mosaic__copy-inner {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   Smooth pinned mosaic performance + consistent branding
   ========================================================= */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.brand--footer .brand-logo--footer {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

@media (min-width: 901px) {
  .experience-mosaic__stage {
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    contain: layout paint;
  }

  .experience-mosaic__top,
  .experience-mosaic__bottom {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
  }

  .experience-mosaic__panel--image img {
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
  }
}

/* =========================================================
   Arbor-reference editorial scroll sequence
   Normal document flow + smooth Lenis scrolling. No pinning.
   ========================================================= */
.arbor-flow {
  position: relative;
  overflow: hidden;
  padding: 96px 0 118px;
  background: #06191e;
  color: #fff;
}

.arbor-flow__shape {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 34%;
  width: min(58vw, 760px);
  aspect-ratio: 1.12;
  background: linear-gradient(145deg, rgba(26,143,166,.98), rgba(39,164,184,.82));
  clip-path: polygon(17% 0, 100% 16%, 82% 100%, 0 78%);
  transform: translateX(-44%) rotate(8deg);
  opacity: .9;
  pointer-events: none;
}

.arbor-flow__stack {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 1240px);
  margin-inline: auto;
  display: grid;
  gap: 0;
}

/* Cards remain in normal document flow, but each next panel starts slightly
   over the previous one. GSAP only animates that overlap; there is no pinning. */
.arbor-flow__stack > * + * {
  margin-top: -235px;
}

.arbor-flow__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 600px;
  border: 1px solid rgba(255,255,255,.72);
  background: #42494c;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.arbor-flow__card--reverse {
  grid-template-columns: .92fr 1.08fr;
}

.arbor-flow__card--reverse .arbor-flow__media { order: 2; }
.arbor-flow__card--reverse .arbor-flow__copy { order: 1; }

.arbor-flow__media {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: #263337;
  border-right: 1px solid rgba(255,255,255,.55);
}

.arbor-flow__card--reverse .arbor-flow__media {
  border-right: 0;
  border-left: 1px solid rgba(255,255,255,.55);
}

.arbor-flow__media img {
  position: absolute;
  inset: -5% 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.arbor-flow__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 30%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.arbor-flow__media-title {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 58px);
  right: clamp(24px, 4vw, 58px);
  bottom: clamp(26px, 4vw, 54px);
}

.arbor-flow__media-title span,
.arbor-flow__review-heading > span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.76);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.arbor-flow__media-title h2,
.arbor-flow__media-title h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 600;
}

.arbor-flow__media-title h3 {
  font-size: clamp(38px, 4.3vw, 64px);
}

.arbor-flow__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(36px, 6vw, 78px);
  background: linear-gradient(145deg, rgba(77,82,83,.98), rgba(57,64,67,.98));
}

.arbor-flow__copy p {
  max-width: 540px;
  margin: 0 0 42px;
  color: rgba(255,255,255,.84);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.72;
}

.arbor-flow__tab {
  align-self: flex-end;
  min-width: 210px;
  padding: 13px 32px 12px 44px;
  background: #2c95ad;
  color: #fff;
  border: 1px solid rgba(255,255,255,.65);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}

.arbor-flow__tab:hover {
  background: #36abc4;
  transform: translateY(-2px);
}

.arbor-flow__review {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 65% 50%, rgba(31,147,166,.50), transparent 30%),
    #07171c;
}

.arbor-flow__review::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 7%;
  width: 44%;
  aspect-ratio: 1;
  background: rgba(33,151,171,.46);
  border-radius: 44% 56% 58% 42% / 52% 35% 65% 48%;
  transform: rotate(19deg);
  pointer-events: none;
}

.arbor-flow__review-heading,
.arbor-flow__review-body {
  position: relative;
  z-index: 2;
  padding: clamp(38px, 5vw, 72px);
}

.arbor-flow__review-heading {
  border-right: 1px solid rgba(255,255,255,.25);
}

.arbor-flow__review-heading h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: .96;
  letter-spacing: -.055em;
}

.arbor-flow__review-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.arbor-flow__review-body strong {
  display: block;
  max-width: 650px;
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(20px, 2.3vw, 31px);
  line-height: 1.2;
}

.arbor-flow__review-body p {
  max-width: 610px;
  color: rgba(255,255,255,.78);
}

.arbor-flow__review-author {
  margin: 8px 0 32px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

@media (max-width: 900px) {
  .arbor-flow {
    padding: 28px 0 62px;
  }

  .arbor-flow__shape {
    position: absolute;
    top: 37%;
    left: 50%;
    width: 155vw;
    transform: translateX(-50%) rotate(10deg);
    opacity: .72;
  }

  .arbor-flow__stack {
    width: calc(100% - 24px);
    gap: 0;
  }

  .arbor-flow__stack > * + * {
    /* Final visual overlap. JS starts each incoming card +180px lower,
       so this overlap only appears progressively during the scroll trigger. */
    margin-top: -180px;
  }

  .arbor-flow__card,
  .arbor-flow__card--reverse {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .arbor-flow__card--reverse .arbor-flow__media,
  .arbor-flow__card--reverse .arbor-flow__copy {
    order: initial;
  }

  .arbor-flow__media,
  .arbor-flow__card--reverse .arbor-flow__media {
    min-height: min(112vw, 560px);
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.55);
  }

  .arbor-flow__copy {
    min-height: 285px;
    padding: 30px 24px 20px;
  }

  .arbor-flow__copy p {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.65;
  }

  .arbor-flow__media-title {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .arbor-flow__media-title h2,
  .arbor-flow__media-title h3 {
    font-size: clamp(38px, 11.2vw, 58px);
  }

  .arbor-flow__tab {
    min-width: 190px;
    margin-right: -24px;
    padding: 12px 24px 11px 36px;
  }

  .arbor-flow__review {
    display: block;
    min-height: 0;
  }

  .arbor-flow__review-heading {
    padding: 34px 24px 18px;
    border: 0;
  }

  .arbor-flow__review-heading h3 {
    font-size: clamp(46px, 13vw, 64px);
  }

  .arbor-flow__review-body {
    padding: 12px 24px 22px;
  }

  .arbor-flow__review-body strong {
    font-size: 20px;
  }

  .arbor-flow__review .arbor-flow__tab {
    margin-top: 8px;
  }
}


@media (prefers-reduced-motion: no-preference) {
  .arbor-flow__card,
  .arbor-flow__review {
    transform-origin: 50% 0%;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arbor-flow__media img {
    transform: none !important;
  }
}


/* =========================================================
   CINEMATIC ARBOR-STYLE STACK — refined
   Sticky editorial cards create the continuous overlap/depth
   seen in the reference site instead of simple reveal animations.
   ========================================================= */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body.page-home.arbor-scroll .arbor-flow {
    overflow: clip;
    padding-top: 120px;
    padding-bottom: 150px;
  }

  body.page-home.arbor-scroll .arbor-flow__stack {
    display: block;
    width: min(calc(100% - 72px), 1320px);
  }

  body.page-home.arbor-scroll .arbor-flow__stack > * {
    position: sticky;
    top: 92px;
    margin-top: 0 !important;
    margin-bottom: 115px;
    min-height: 620px;
    transform-origin: 50% 0%;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
  }

  body.page-home.arbor-scroll .arbor-flow__stack > *:first-child {
    margin-top: 0 !important;
  }

  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(2) { top: 106px; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(3) { top: 120px; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(4) { top: 134px; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(5) { top: 148px; }

  body.page-home.arbor-scroll .arbor-flow__card {
    box-shadow: 0 35px 90px rgba(0,0,0,.32);
  }

  body.page-home.arbor-scroll .arbor-flow__media {
    min-height: 620px;
  }

  body.page-home.arbor-scroll .arbor-flow__media img {
    transform: translate3d(0,0,0) scale(1.08);
    will-change: transform;
  }

  body.page-home.arbor-scroll .arbor-flow__card::before,
  body.page-home.arbor-scroll .arbor-flow__review::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(3,17,21,.02), rgba(3,17,21,.34));
    transition: opacity .1s linear;
  }

  body.page-home.arbor-scroll .arbor-flow__media-title,
  body.page-home.arbor-scroll .arbor-flow__copy,
  body.page-home.arbor-scroll .arbor-flow__review-heading,
  body.page-home.arbor-scroll .arbor-flow__review-body {
    will-change: transform, opacity;
  }

  /* Give the stack room to finish its final pinned card. */
  body.page-home.arbor-scroll .arbor-flow__stack > *:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  body.page-home .arbor-flow__stack > * {
    position: relative;
    top: auto !important;
    opacity: 1 !important;
    background-clip: padding-box;
  }

  /* Prevent older cards/text from visually bleeding through the active card. */
  body.page-home .arbor-flow__card,
  body.page-home .arbor-flow__review {
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  body.page-home .arbor-flow__card {
    background: #42494c;
  }

  body.page-home .arbor-flow__review {
    background:
      radial-gradient(circle at 65% 50%, rgba(31,147,166,.50), transparent 30%),
      #07171c;
  }
}


/* =========================================================
   INTERNAL PAGES — FINAL EDITORIAL REDESIGN
   Reference direction: premium, image-led, bordered editorial layouts.
   Homepage and desktop navbar are intentionally untouched.
   ========================================================= */
.internal-premium{--ip:#0b252b;--ip2:#10353b;--paper:#f7f4ed;--paper2:#efebe3;--line:rgba(11,37,43,.18);--mint:#8fd2bd;background:var(--paper)}
.internal-premium main{background:var(--paper);overflow:clip}
.internal-premium .inner-hero{position:relative;padding:calc(var(--header-height) + 56px) 0 74px;background:radial-gradient(circle at 88% 12%,rgba(143,210,189,.19),transparent 27%),linear-gradient(180deg,#fbfaf6,var(--paper));border-bottom:1px solid var(--line)}
.internal-premium .inner-hero:before{content:"";position:absolute;left:0;right:0;top:var(--header-height);height:1px;background:var(--line)}
.internal-premium .inner-hero__grid{grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(40px,6vw,92px);align-items:end}
.internal-premium .inner-hero__copy{padding:28px 0 18px}
.internal-premium .inner-hero__copy .eyebrow,.internal-premium .blog-hero .eyebrow{margin-bottom:20px;color:#4e7e75;font-size:12.5px;letter-spacing:.01em}
.internal-premium .inner-hero__copy h1,.internal-premium .blog-hero h1{max-width:940px;margin-bottom:26px;color:var(--ip);font-size:clamp(58px,6.4vw,102px);line-height:.92;letter-spacing:-.064em;text-wrap:balance}
.internal-premium .inner-hero__copy>p:last-child,.internal-premium .blog-deck{max-width:680px;color:#526b70;font-size:clamp(17px,1.4vw,21px);line-height:1.65}
.internal-premium .inner-hero__image{height:clamp(480px,61vh,700px);overflow:hidden;border:1px solid var(--line);border-radius:0!important;box-shadow:none!important;background:#dfe9e5}
.internal-premium .inner-hero__image img{width:100%;height:100%;object-fit:cover}
.internal-premium.page-services .inner-hero,.internal-premium.page-contact .inner-hero,.internal-premium.page-book .inner-hero,.internal-premium.page-location .inner-hero,.internal-premium.page-service.service-layout-c .inner-hero{background:radial-gradient(circle at 86% 10%,rgba(143,210,189,.15),transparent 24%),linear-gradient(145deg,#071b20,#10353b);border-color:rgba(255,255,255,.28);color:#fff}
.internal-premium.page-services .inner-hero:before,.internal-premium.page-contact .inner-hero:before,.internal-premium.page-book .inner-hero:before,.internal-premium.page-location .inner-hero:before,.internal-premium.page-service.service-layout-c .inner-hero:before{background:rgba(255,255,255,.2)}
.internal-premium.page-services .inner-hero h1,.internal-premium.page-services .inner-hero .eyebrow,.internal-premium.page-contact .inner-hero h1,.internal-premium.page-contact .inner-hero .eyebrow,.internal-premium.page-book .inner-hero h1,.internal-premium.page-book .inner-hero .eyebrow,.internal-premium.page-location .inner-hero h1,.internal-premium.page-location .inner-hero .eyebrow,.internal-premium.page-service.service-layout-c .inner-hero h1,.internal-premium.page-service.service-layout-c .inner-hero .eyebrow{color:#fff}
.internal-premium.page-services .inner-hero__copy>p:last-child,.internal-premium.page-contact .inner-hero__copy>p:last-child,.internal-premium.page-book .inner-hero__copy>p:last-child,.internal-premium.page-location .inner-hero__copy>p:last-child,.internal-premium.page-service.service-layout-c .inner-hero__copy>p:last-child{color:rgba(255,255,255,.73)}

.internal-premium .section{padding:clamp(82px,9vw,132px) 0;background:var(--paper)}
.internal-premium .section+.section{border-top:1px solid var(--line)}
.internal-premium .section--tint{background:var(--paper2)}
.internal-premium .section-heading{align-items:end;margin-bottom:clamp(42px,6vw,74px);padding-bottom:24px;border-bottom:1px solid var(--line)}
.internal-premium .section-heading h2,.internal-premium .content-split h2,.internal-premium .profile-copy h2,.internal-premium .faq-layout h2,.internal-premium .patient-visual__copy h2,.internal-premium .booking-card h2,.internal-premium .contact-form-card h2,.internal-premium .contact-info-card h2{color:var(--ip);font-size:clamp(42px,5vw,74px);line-height:.98;letter-spacing:-.054em;text-wrap:balance}
.internal-premium .section-heading>p,.internal-premium .section-heading>div+p{max-width:520px;color:#536d72;line-height:1.75}

/* About / practice */
.internal-premium .content-split{grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);gap:clamp(46px,7vw,106px)}
.internal-premium .content-split .lead,.internal-premium .profile-copy .lead{color:var(--ip);font-size:clamp(20px,2vw,28px);line-height:1.46}
.internal-premium .info-panel,.internal-premium .booking-card,.internal-premium .contact-form-card,.internal-premium .contact-info-card,.internal-premium .notice-card,.internal-premium .aside-card{padding:clamp(28px,4vw,50px);border:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.48);box-shadow:none}
.internal-premium .info-panel{background:var(--ip);color:#fff}
.internal-premium .info-panel h3,.internal-premium .info-panel li{color:#fff}
.internal-premium .info-panel .check-list li{border-color:rgba(255,255,255,.18)}
.internal-premium .three-up,.internal-premium .pathway-grid{gap:0;border:1px solid var(--line)}
.internal-premium .value-card,.internal-premium .pathway-card{min-height:320px;padding:clamp(28px,3.5vw,46px);border:0;border-right:1px solid var(--line);border-radius:0;background:transparent}
.internal-premium .value-card:last-child,.internal-premium .pathway-card:last-child{border-right:0}
.internal-premium .value-card span,.internal-premium .pathway-card>span{margin-bottom:66px;color:#638f86}
.internal-premium .value-card h3,.internal-premium .pathway-card h3{font-size:clamp(26px,2.4vw,35px);letter-spacing:-.03em}
.internal-premium .practice-gallery__grid{gap:1px;border:1px solid var(--line);background:var(--line)}
.internal-premium .practice-gallery figure{margin:0;background:var(--paper)}
.internal-premium .practice-gallery img{display:block;width:100%;min-height:430px;object-fit:cover}
.internal-premium .practice-gallery figcaption{padding:18px 20px;border-top:1px solid var(--line);color:#4f676c}

/* Team */
.internal-premium .profile-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0;align-items:stretch;border:1px solid var(--line)}
.internal-premium .profile-image{min-height:670px;border-radius:0}
.internal-premium .profile-image img{height:100%;min-height:670px;object-fit:cover}
.internal-premium .profile-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,6vw,86px);background:var(--ip)}
.internal-premium .profile-copy h2,.internal-premium .profile-copy p,.internal-premium .profile-copy .eyebrow,.internal-premium .profile-copy .lead{color:#fff}
.internal-premium .profile-copy p{color:rgba(255,255,255,.76)}
.internal-premium .team-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.internal-premium .team-mini-grid article{padding:0;border:0;border-radius:0;background:var(--paper)}
.internal-premium .team-person__image{height:430px;overflow:hidden}
.internal-premium .team-person__image img{width:100%;height:100%;object-fit:cover}
.internal-premium .team-person__body{min-height:205px;padding:26px 28px 34px;border-top:1px solid var(--line)}

/* Services */
.internal-premium .service-visual-strip{padding:0;background:var(--ip)}
.internal-premium .service-visual-strip__grid{gap:1px;background:rgba(255,255,255,.22);border-inline:1px solid rgba(255,255,255,.22)}
.internal-premium .service-visual-strip figure{margin:0;background:var(--ip)}
.internal-premium .service-visual-strip img{height:350px;object-fit:cover}
.internal-premium .service-visual-strip figcaption{padding:16px 18px;border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.76)}
.internal-premium .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.internal-premium .service-card{min-height:545px;padding:0 34px 36px;border:0;border-radius:0;background:var(--paper);box-shadow:none}
.internal-premium .service-card:hover{transform:none;box-shadow:none;background:#fff}
.internal-premium .service-card__media{height:275px;margin:0 -34px 30px;overflow:hidden;border-bottom:1px solid var(--line)}
.internal-premium .service-card__media img{width:100%;height:100%;object-fit:cover}
.internal-premium .service-card h3{font-size:clamp(28px,2.7vw,41px);line-height:1.04;letter-spacing:-.04em}
.internal-premium .service-card p{color:#536b70;line-height:1.7}
.internal-premium.page-service .feature-list,.internal-premium.page-service .check-list{border-top:1px solid var(--line)}
.internal-premium.page-service .feature-list>div,.internal-premium.page-service .check-list li{padding:20px 0;border-bottom:1px solid var(--line)}

/* Patient pages */
.internal-premium.page-patient .patient-visual__grid{gap:0;border:1px solid var(--line);background:var(--ip)}
.internal-premium.page-patient .patient-visual__media,.internal-premium.page-patient .patient-visual__media img{min-height:550px;height:550px}
.internal-premium.page-patient .patient-visual__media img{width:100%;object-fit:cover}
.internal-premium.page-patient .patient-visual__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,84px)}
.internal-premium.page-patient .patient-visual__copy h2,.internal-premium.page-patient .patient-visual__copy p,.internal-premium.page-patient .patient-visual__copy .eyebrow,.internal-premium.page-patient .patient-visual__copy .text-link{color:#fff}
.internal-premium .faq-layout{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:clamp(42px,7vw,96px)}
.internal-premium .faq-list{gap:0;border-top:1px solid var(--line)}
.internal-premium .faq-list details{padding:24px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.internal-premium .faq-list summary{position:relative;padding-right:40px;font-size:18px}
.internal-premium .faq-list summary:after{content:"+";position:absolute;right:2px;top:-3px;font-size:28px;font-weight:400}
.internal-premium .faq-list details[open] summary:after{content:"−"}

/* Blog listing + article pages */
.internal-premium .resource-filter{align-items:center;padding:18px 0;border-block:1px solid var(--line);border-radius:0;background:transparent;color:var(--ip)}
.internal-premium .resource-filter p{color:#536b70}
.internal-premium .blog-grid,.internal-premium .blog-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.internal-premium .blog-card{border:0;border-radius:0;background:var(--paper);box-shadow:none}
.internal-premium .blog-card:hover{transform:none;box-shadow:none;background:#fff}
.internal-premium .blog-card__media{height:260px;border-bottom:1px solid var(--line)}
.internal-premium .blog-card__body{padding:28px 28px 34px}
.internal-premium .blog-card h3{font-size:clamp(24px,2.1vw,33px);line-height:1.12}
.internal-premium.page-article .blog-hero{padding:calc(var(--header-height) + 62px) 0 0;background:radial-gradient(circle at 88% 6%,rgba(143,210,189,.18),transparent 28%),var(--paper)}
.internal-premium.page-article .blog-hero .container:first-child{max-width:1160px}
.internal-premium.page-article .blog-cover{height:min(62vh,670px);margin-top:50px;border:1px solid var(--line);border-radius:0!important;box-shadow:none}
.internal-premium.page-article .article-layout{grid-template-columns:minmax(0,760px) minmax(270px,330px);gap:clamp(54px,8vw,116px)}
.internal-premium.page-article .article-body p{color:#465f65;font-size:18px;line-height:1.86}
.internal-premium.page-article .article-body h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.04em}
.internal-premium.page-article .article-aside{top:calc(var(--header-height) + 28px)}

/* Contact / location / booking */
.internal-premium.page-contact .section,.internal-premium.page-book .section,.internal-premium.page-location .section{background:var(--paper2)}
.internal-premium .contact-page-grid,.internal-premium .booking-grid,.internal-premium .location-grid{gap:1px;border:1px solid var(--line);background:var(--line)}
.internal-premium .contact-form-card,.internal-premium .contact-info-card,.internal-premium .booking-card,.internal-premium .location-panel,.internal-premium .map-card--large{border:0;border-radius:0;background:var(--paper);box-shadow:none}
.internal-premium .contact-info-card,.internal-premium .booking-card:nth-child(2){background:var(--ip);color:#fff}
.internal-premium .contact-info-card h2,.internal-premium .contact-info-card a,.internal-premium .contact-info-card strong,.internal-premium .booking-card:nth-child(2) h2,.internal-premium .booking-card:nth-child(2) p,.internal-premium .booking-card:nth-child(2) .eyebrow{color:#fff}
.internal-premium .contact-details>div{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.17)}
.internal-premium .preview-form input,.internal-premium .preview-form textarea{border-radius:0;border-color:var(--line);background:#fff}

/* Closing CTA */
.internal-premium .appointment-cta{padding:0;background:var(--ip);border-top:1px solid rgba(255,255,255,.16)}
.internal-premium .appointment-cta .cta-inner{min-height:420px;padding:clamp(58px,7vw,96px) 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.internal-premium .appointment-cta h2{max-width:760px;color:#fff;font-size:clamp(46px,6vw,84px);line-height:.96;letter-spacing:-.06em}
.internal-premium .appointment-cta p,.internal-premium .appointment-cta .cta-actions>a:not(.button){color:rgba(255,255,255,.76)}

/* =========================================================
   MOBILE MENU — modern full-screen treatment only.
   ========================================================= */
@media(max-width:900px){
  .mobile-menu{inset:var(--header-height) 0 0;padding:18px 20px 24px;overflow-y:auto;background:radial-gradient(circle at 92% 10%,rgba(143,210,189,.18),transparent 28%),linear-gradient(155deg,#071b20,#0d3036);color:#fff;transform:translate3d(0,-12px,0) scale(.99);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.75,.2,1),visibility .3s}
  .mobile-menu.open{transform:none;opacity:1;visibility:visible}
  .mobile-menu:before{content:"";position:fixed;right:-90px;bottom:8%;width:250px;height:250px;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
  .mobile-menu__intro{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:4px 0 18px;border-bottom:1px solid rgba(255,255,255,.14)}
  .mobile-menu__intro span{color:#9ce1cc;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
  .mobile-menu__intro small{max-width:190px;color:rgba(255,255,255,.52);font-size:11px;text-align:right}
  .mobile-menu nav{counter-reset:mnav;display:grid;gap:0;margin:12px 0 22px}
  .mobile-menu nav a{
  counter-increment:mnav;
  position:relative;
  display:grid;
  grid-template-columns:1fr 24px;
  column-gap:20px;
  align-items:center;
  min-height:62px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:clamp(20px,5.8vw,28px);
  line-height:1;
  letter-spacing:-.035em;
  transform:translateY(12px);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.75,.2,1),opacity .34s ease,color .2s ease;
}
  .mobile-menu.open nav a{transform:none;opacity:1}
  .mobile-menu.open nav a:nth-child(1){transition-delay:.04s}.mobile-menu.open nav a:nth-child(2){transition-delay:.08s}.mobile-menu.open nav a:nth-child(3){transition-delay:.12s}.mobile-menu.open nav a:nth-child(4){transition-delay:.16s}.mobile-menu.open nav a:nth-child(5){transition-delay:.2s}.mobile-menu.open nav a:nth-child(6){transition-delay:.24s}.mobile-menu.open nav a:nth-child(7){transition-delay:.28s}.mobile-menu.open nav a:nth-child(8){transition-delay:.32s}
  
  .mobile-menu nav a:before{
  content:none;
}

.mobile-menu nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mobile-menu nav a:after{
  content:"↗";
  justify-self:end;
  color:rgba(255,255,255,.45);
  font-size:17px;
}
  .mobile-menu nav a:active{color:#9ce1cc}
  .mobile-menu__footer{display:grid;grid-template-columns:1fr;gap:10px;padding-top:8px}
  .mobile-menu__phone{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;font-weight:750}
  .mobile-menu .button{min-height:52px;border-radius:0;background:#fff;color:#0b252b}
}

/* =========================================================
   COMPLETE RESPONSIVE PASS FOR INTERNAL PAGES
   ========================================================= */
@media(max-width:1050px){
  .internal-premium .inner-hero__grid{grid-template-columns:1fr;gap:34px}
  .internal-premium .inner-hero__copy{max-width:820px}
  .internal-premium .inner-hero__image{height:min(64vw,620px)}
  .internal-premium .team-mini-grid,.internal-premium .blog-grid,.internal-premium .blog-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .internal-premium .section{padding:74px 0}
  .internal-premium .inner-hero{padding:calc(var(--header-height) + 34px) 0 52px}
  .internal-premium .inner-hero__copy h1,.internal-premium .blog-hero h1{font-size:clamp(48px,13vw,72px);line-height:.94}
  .internal-premium .inner-hero__image{height:min(78vw,540px)}
  .internal-premium .content-split,.internal-premium .profile-grid,.internal-premium .location-grid,.internal-premium .contact-page-grid,.internal-premium .booking-grid,.internal-premium .faq-layout,.internal-premium.page-article .article-layout,.internal-premium.page-patient .patient-visual__grid{grid-template-columns:1fr;gap:0}
  .internal-premium .profile-image,.internal-premium .profile-image img{min-height:520px;height:520px}
  .internal-premium .profile-copy{min-height:470px}
  .internal-premium .three-up,.internal-premium .pathway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .internal-premium .value-card,.internal-premium .pathway-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .internal-premium .value-card:nth-child(2n),.internal-premium .pathway-card:nth-child(2n){border-right:0}
  .internal-premium .service-visual-strip__grid{grid-template-columns:1fr}
  .internal-premium .service-visual-strip img{height:300px}
  .internal-premium .service-grid{grid-template-columns:1fr}
  .internal-premium .service-card{min-height:0}
  .internal-premium .blog-grid,.internal-premium .blog-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .internal-premium.page-article .article-aside{position:static;grid-template-columns:1fr 1fr;margin-top:42px}
}
@media(max-width:680px){
  .internal-premium .container{width:min(calc(100% - 32px),var(--container))}
  .internal-premium .section{padding:62px 0}
  .internal-premium .inner-hero__copy{padding:18px 0 4px}
  .internal-premium .inner-hero__copy h1,.internal-premium .blog-hero h1{margin-bottom:20px;font-size:clamp(42px,13vw,58px)}
  .internal-premium .inner-hero__copy>p:last-child,.internal-premium .blog-deck{font-size:16px;line-height:1.65}
  .internal-premium .inner-hero__image{height:min(94vw,500px)}
  .internal-premium .section-heading{display:block;margin-bottom:34px;padding-bottom:18px}
  .internal-premium .section-heading>p,.internal-premium .section-heading>div+p{margin-top:18px}
  .internal-premium .section-heading h2,.internal-premium .content-split h2,.internal-premium .profile-copy h2,.internal-premium .faq-layout h2,.internal-premium .patient-visual__copy h2,.internal-premium .booking-card h2,.internal-premium .contact-form-card h2,.internal-premium .contact-info-card h2{font-size:clamp(36px,10vw,50px)}
  .internal-premium .info-panel,.internal-premium .notice-card,.internal-premium .aside-card,.internal-premium .booking-card,.internal-premium .contact-form-card,.internal-premium .contact-info-card,.internal-premium .profile-copy,.internal-premium.page-patient .patient-visual__copy{padding:30px 24px}
  .internal-premium .three-up,.internal-premium .pathway-grid,.internal-premium .team-mini-grid,.internal-premium .blog-grid,.internal-premium .blog-grid--three,.internal-premium.page-article .article-aside{grid-template-columns:1fr}
  .internal-premium .value-card,.internal-premium .pathway-card{min-height:245px;border-right:0!important}
  .internal-premium .value-card span,.internal-premium .pathway-card>span{margin-bottom:44px}
  .internal-premium .profile-image,.internal-premium .profile-image img{min-height:430px;height:430px}
  .internal-premium .profile-copy{min-height:420px}
  .internal-premium .team-person__image{height:410px}
  .internal-premium .service-card{padding:0 24px 30px}
  .internal-premium .service-card__media{height:240px;margin-inline:-24px}
  .internal-premium .service-card h3{font-size:31px}
  .internal-premium.page-patient .patient-visual__media,.internal-premium.page-patient .patient-visual__media img{min-height:420px;height:420px}
  .internal-premium .blog-card__media{height:230px}
  .internal-premium.page-article .blog-hero{padding-top:calc(var(--header-height) + 38px)}
  .internal-premium.page-article .blog-cover{height:66vw;min-height:280px;margin-top:30px}
  .internal-premium.page-article .article-body p{font-size:16px}
  .internal-premium .appointment-cta .cta-inner{min-height:350px;padding:56px 0}
  .internal-premium .appointment-cta h2{font-size:clamp(40px,12vw,56px)}
  .internal-premium .cta-actions{width:100%;display:grid;gap:12px}
  .internal-premium .cta-actions .button,.internal-premium .cta-actions>a{width:100%;min-height:50px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:390px){.mobile-menu{padding-inline:16px}.mobile-menu nav a{min-height:56px;font-size:23px}.internal-premium .inner-hero__copy h1,.internal-premium .blog-hero h1{font-size:40px}}


/* =========================================================
   CLIENT REVIEW FIXES — AUG 23
   Scope: homepage micro-elements + About + Team + Services +
   New Patients + Contact. Blog listing/articles are untouched.
   ========================================================= */

/* 1) Hero video label: hidden on desktop/tablet, visible only on phone. */

/* 9) Homepage doctor metadata becomes a clean caption below the photo,
   rather than a floating card inside the image. */
body.page-home .about-media .doctor-card{
  position:static;
  width:100%;
  min-width:0;
  margin:14px 0 0;
  padding:16px 2px 0;
  border-top:1px solid rgba(24,62,66,.14);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.page-home .about-media .doctor-card small{font-size:10px}
body.page-home .about-media .doctor-card strong{font-size:22px}

/* 2) ABOUT — balanced hero instead of oversized uneven split. */
.internal-premium.page-about .inner-hero{padding-bottom:88px}
.internal-premium.page-about .inner-hero__grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(48px,6vw,92px);
  align-items:center;
}
.internal-premium.page-about .inner-hero__copy{padding:0;max-width:650px}
.internal-premium.page-about .inner-hero__copy h1{
  max-width:640px;
  font-size:clamp(54px,5.1vw,82px);
  line-height:.98;
}
.internal-premium.page-about .inner-hero__media{order:-1}
.internal-premium.page-about .inner-hero__image{
  height:auto;
  aspect-ratio:3/2;
  border-radius:30px!important;
  background:#dfe7e3;
}
.internal-premium.page-about .inner-hero__image img{object-fit:cover;object-position:center}

/* 3) About gallery — equal radius, real gap, identical image area. */
.internal-premium.page-about .practice-gallery__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  border:0;
  background:transparent;
}
.internal-premium.page-about .practice-gallery figure{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:#fff;
}
.internal-premium.page-about .practice-gallery img{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1200/650;
  object-fit:cover;
  object-position:center;
}
.internal-premium.page-about .practice-gallery figcaption{
  padding:16px 20px;
  border-top:1px solid var(--line);
  background:#fff;
  color:#405b60;
  font-weight:650;
}

/* 4 & 6) TEAM — full team photo stays fully visible and the hero balances. */
.internal-premium.page-team .inner-hero{padding-bottom:86px}
.internal-premium.page-team .inner-hero__grid{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(44px,6vw,88px);
  align-items:center;
}
.internal-premium.page-team .inner-hero__copy{max-width:660px;padding:0}
.internal-premium.page-team .inner-hero__copy h1{
  font-size:clamp(54px,5vw,80px);
  line-height:.98;
}
.internal-premium.page-team .inner-hero__image{
  height:auto;
  aspect-ratio:1400/760;
  border-radius:30px!important;
  background:#e5ebe8;
}
.internal-premium.page-team .inner-hero__image img{
  object-fit:contain;
  object-position:center;
  background:#e5ebe8;
}
.internal-premium.page-team .profile-grid{
  overflow:hidden;
  border-radius:32px;
  border:1px solid var(--line);
}
.internal-premium.page-team .team-mini-grid{
  gap:22px;
  border:0;
  background:transparent;
}
.internal-premium.page-team .team-mini-grid article{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
}
.internal-premium.page-team .team-person__image{
  height:auto;
  aspect-ratio:1/1;
  background:#ecefed;
}
.internal-premium.page-team .team-person__image img{
  object-fit:cover;
  object-position:center top;
}

/* 5 & 6) SERVICES — completely cleaner overview with readable CTAs. */
.internal-premium.page-services .inner-hero{
  padding-bottom:82px;
  background:radial-gradient(circle at 85% 15%,rgba(143,210,189,.15),transparent 24%),linear-gradient(145deg,#071b20,#10353b);
}
.internal-premium.page-services .inner-hero__grid{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(44px,6vw,86px);
  align-items:center;
}
.internal-premium.page-services .inner-hero__copy{padding:0;max-width:690px}
.internal-premium.page-services .inner-hero__copy h1{
  font-size:clamp(52px,5vw,78px);
  line-height:.98;
}
.internal-premium.page-services .inner-hero__image{
  height:auto;
  aspect-ratio:1400/760;
  border-radius:30px!important;
  border-color:rgba(255,255,255,.22);
}
.internal-premium.page-services .inner-hero__image img{object-fit:cover;object-position:center}

.internal-premium.page-services .services-overview-intro{background:#f1eee7}
.internal-premium.page-services .services-overview-intro__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(42px,6vw,86px);
  align-items:center;
}
.internal-premium.page-services .services-overview-intro__copy h2{
  max-width:650px;
  margin:0 0 24px;
  color:var(--ip);
  font-size:clamp(42px,4.7vw,70px);
  line-height:1;
  letter-spacing:-.052em;
}
.internal-premium.page-services .services-overview-intro__copy>p{
  max-width:600px;
  color:#536b70;
  font-size:18px;
  line-height:1.75;
}
.internal-premium.page-services .services-overview-intro__links{
  display:grid;
  margin-top:32px;
  border-top:1px solid var(--line);
}
.internal-premium.page-services .services-overview-intro__links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  border-bottom:1px solid var(--line);
  color:var(--ip);
  font-weight:700;
}
.internal-premium.page-services .services-overview-intro__media{
  overflow:hidden;
  border-radius:30px;
  border:1px solid var(--line);
  background:#dce5e1;
}
.internal-premium.page-services .services-overview-intro__media img{
  display:block;
  width:100%;
  aspect-ratio:1400/760;
  object-fit:cover;
}
.internal-premium.page-services .service-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  border:0;
  background:transparent;
}
.internal-premium.page-services .service-card{
  min-height:0;
  padding:0 30px 32px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
}
.internal-premium.page-services .service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 60px rgba(11,37,43,.09);
}
.internal-premium.page-services .service-card__media{
  height:auto;
  margin:0 -30px 26px;
  aspect-ratio:16/8.7;
  border-bottom:1px solid var(--line);
  background:#e7ece9;
}
.internal-premium.page-services .service-card__media img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.internal-premium.page-services .service-card__media--technology img{object-fit:contain;padding:34px;background:#e8efec}
.internal-premium.page-services .service-number{
  display:block;
  width:30px;height:3px;
  margin-bottom:22px;
  border:0;
  border-radius:2px;
  background:var(--accent);
}
.internal-premium.page-services .service-card h3{
  margin-bottom:16px;
  font-size:clamp(28px,2.35vw,38px);
}
.internal-premium.page-services .service-card a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:8px;
  color:var(--ip);
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid var(--ip);
}

/* 7 & 8) NEW PATIENTS — modern balanced hero + even 2x2 step cards. */
.internal-premium.page-new-patients .inner-hero{
  background:radial-gradient(circle at 90% 12%,rgba(143,210,189,.22),transparent 26%),linear-gradient(180deg,#fbfaf6,#f2eee6);
}
.internal-premium.page-new-patients .inner-hero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(44px,6vw,86px);
  align-items:center;
}
.internal-premium.page-new-patients .inner-hero__copy{max-width:620px;padding:0}
.internal-premium.page-new-patients .inner-hero__copy h1{
  font-size:clamp(58px,5.4vw,86px);
  line-height:.96;
}
.internal-premium.page-new-patients .inner-hero__image{
  height:auto;
  aspect-ratio:1400/760;
  border-radius:30px!important;
}
.internal-premium.page-new-patients .inner-hero__image img{
  object-fit:contain;
  object-position:center;
  background:#e6ebe8;
}
.internal-premium.page-new-patients .new-patient-steps{background:#f7f4ed}
.internal-premium.page-new-patients .pathway-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  border:0;
  background:transparent;
}
.internal-premium.page-new-patients .pathway-card{
  display:flex;
  flex-direction:column;
  min-height:310px;
  padding:34px;
  border:1px solid var(--line)!important;
  border-radius:26px;
  background:#fff;
}
.internal-premium.page-new-patients .pathway-card>span{
  margin-bottom:auto;
  padding-bottom:42px;
}
.internal-premium.page-new-patients .pathway-card h3{
  max-width:420px;
  margin-bottom:14px;
  font-size:clamp(28px,2.5vw,38px);
}
.internal-premium.page-new-patients .patient-visual__grid{
  overflow:hidden;
  gap:0;
  border:0;
  border-radius:32px;
  background:var(--ip);
}
.internal-premium.page-new-patients .patient-visual__media,
.internal-premium.page-new-patients .patient-visual__media img{
  min-height:0;
  height:auto;
}
.internal-premium.page-new-patients .patient-visual__media img{
  display:block;
  width:100%;
  aspect-ratio:1400/760;
  object-fit:contain;
  background:#dfe6e3;
}
.internal-premium.page-new-patients .patient-visual__copy{min-height:100%}

/* CONTACT — real, usable form on Netlify. */
.internal-premium.page-contact .contact-page-grid{
  gap:24px;
  border:0;
  background:transparent;
}
.internal-premium.page-contact .contact-form-card,
.internal-premium.page-contact .contact-info-card{
  border:1px solid var(--line);
  border-radius:28px;
}
.internal-premium.page-contact .preview-form{gap:18px}
.internal-premium.page-contact .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.internal-premium.page-contact .preview-form label{gap:9px;color:#314e54;font-size:12px;letter-spacing:.02em}
.internal-premium.page-contact .preview-form input,
.internal-premium.page-contact .preview-form textarea{
  border:1px solid rgba(11,37,43,.18);
  border-radius:14px;
  background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.internal-premium.page-contact .preview-form input:focus,
.internal-premium.page-contact .preview-form textarea:focus{
  outline:none;
  border-color:#5ba58f;
  box-shadow:0 0 0 4px rgba(91,165,143,.12);
}
.internal-premium.page-contact .field-optional{color:#71868a;font-weight:500}
.internal-premium.page-contact .form-consent{display:flex;grid-template-columns:none;flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;line-height:1.5}
.internal-premium.page-contact .form-consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;box-shadow:none}
.internal-premium.page-contact .contact-submit{width:max-content;min-width:180px;border:0}
.internal-premium.page-contact .form-note{margin:0;color:#708489;font-size:12px;line-height:1.5}
.internal-premium.page-contact .form-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.internal-premium.page-contact .form-success{display:grid;gap:6px;margin-top:22px;padding:18px 20px;border-radius:16px;background:#e8f5ef;color:#123c35}
.internal-premium.page-contact .form-success strong{font-size:17px}

@media(max-width:1050px){
  .internal-premium.page-about .inner-hero__grid,
  .internal-premium.page-team .inner-hero__grid,
  .internal-premium.page-services .inner-hero__grid,
  .internal-premium.page-services .services-overview-intro__grid,
  .internal-premium.page-new-patients .inner-hero__grid{grid-template-columns:1fr;gap:36px}
  .internal-premium.page-about .inner-hero__media{order:0}
  .internal-premium.page-about .inner-hero__copy,
  .internal-premium.page-team .inner-hero__copy,
  .internal-premium.page-services .inner-hero__copy,
  .internal-premium.page-new-patients .inner-hero__copy{max-width:800px}
}

@media(max-width:800px){
  .internal-premium.page-about .practice-gallery__grid{grid-template-columns:1fr;gap:18px}
  .internal-premium.page-services .service-grid{grid-template-columns:1fr;gap:18px}
  .internal-premium.page-new-patients .pathway-grid{grid-template-columns:1fr 1fr;gap:16px}
  .internal-premium.page-contact .form-row{grid-template-columns:1fr}
}

@media(max-width:680px){
  .internal-premium.page-about .inner-hero,
  .internal-premium.page-team .inner-hero,
  .internal-premium.page-services .inner-hero,
  .internal-premium.page-new-patients .inner-hero{padding-bottom:54px}
  .internal-premium.page-about .inner-hero__copy h1,
  .internal-premium.page-team .inner-hero__copy h1,
  .internal-premium.page-services .inner-hero__copy h1,
  .internal-premium.page-new-patients .inner-hero__copy h1{font-size:clamp(42px,12.5vw,56px);line-height:1}
  .internal-premium.page-about .inner-hero__image,
  .internal-premium.page-team .inner-hero__image,
  .internal-premium.page-services .inner-hero__image,
  .internal-premium.page-new-patients .inner-hero__image{border-radius:22px!important}
  .internal-premium.page-about .practice-gallery figure{border-radius:22px}
  .internal-premium.page-services .services-overview-intro__copy h2{font-size:clamp(38px,10vw,48px)}
  .internal-premium.page-services .services-overview-intro__media{border-radius:22px}
  .internal-premium.page-services .service-card{padding:0 22px 26px;border-radius:22px}
  .internal-premium.page-services .service-card__media{margin:0 -22px 24px}
  .internal-premium.page-new-patients .pathway-grid{grid-template-columns:1fr;gap:14px}
  .internal-premium.page-new-patients .pathway-card{min-height:270px;padding:26px;border-radius:22px}
  .internal-premium.page-new-patients .patient-visual__grid{border-radius:22px}
  .internal-premium.page-contact .contact-form-card,
  .internal-premium.page-contact .contact-info-card{border-radius:22px}
  .internal-premium.page-contact .contact-submit{width:100%}
}

/* =========================================================
   FINAL INTERNAL THEME ALIGNMENT — homepage visual system
   Keeps desktop navbar intact. Blog/resources pages use their
   previous/base layout. All other internal pages inherit the
   brighter white + mint + deep-teal language used on homepage.
   ========================================================= */
.internal-premium{
  --ip:#17383f;
  --ip2:#0f2d33;
  --paper:#ffffff;
  --paper2:#f3faf7;
  --line:rgba(23,56,63,.12);
  --mint:#8faea1;
  background:#ffffff;
  color:var(--ink);
}

.internal-premium .inner-hero{
  background:
    radial-gradient(circle at 88% 8%,rgba(143,174,161,.20),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f5fbf8 52%,#eaf5f0 100%);
}
.internal-premium .section--tint,
.internal-premium.page-contact .section,
.internal-premium.page-book .section,
.internal-premium.page-location .section{
  background:linear-gradient(135deg,#f7fbf9 0%,#eef7f3 60%,#ffffff 100%);
}
.internal-premium.page-services .services-overview-intro,
.internal-premium.page-new-patients .new-patient-steps{
  background:linear-gradient(135deg,#f7fbf9,#edf7f3 58%,#ffffff);
}
.internal-premium.page-new-patients .inner-hero{
  background:
    radial-gradient(circle at 90% 10%,rgba(143,174,161,.20),transparent 28%),
    linear-gradient(135deg,#ffffff,#f1f8f5 62%,#e6f2ed);
}

/* Match homepage cards: rounded, airy, white and lightly elevated. */
.internal-premium .info-panel,
.internal-premium .value-card,
.internal-premium .pathway-card,
.internal-premium .team-mini-grid article,
.internal-premium .service-card,
.internal-premium .contact-form-card,
.internal-premium .contact-info-card,
.internal-premium .booking-card,
.internal-premium .location-panel,
.internal-premium .map-card--large,
.internal-premium .aside-card{
  border:1px solid rgba(23,56,63,.10);
  border-radius:26px;
  background:#fff;
  box-shadow:0 16px 48px rgba(15,45,51,.07);
}

/* Dark emphasis panels follow the homepage technology section. */
.internal-premium .info-panel,
.internal-premium .profile-copy,
.internal-premium.page-patient .patient-visual__copy,
.internal-premium .contact-info-card,
.internal-premium .booking-card:nth-child(2){
  background:
    radial-gradient(circle at 92% 10%,rgba(111,155,143,.16),transparent 32%),
    linear-gradient(145deg,#102f35,#173f45);
  color:#fff;
}

.internal-premium .appointment-cta{
  background:linear-gradient(135deg,#6f9b8f,#83b4a6);
  border-top:0;
}
.internal-premium .appointment-cta .cta-inner{
  min-height:0;
  padding:72px 0;
}
.internal-premium .appointment-cta h2{
  max-width:760px;
  font-size:clamp(42px,5vw,68px);
  line-height:1;
}

/* Internal hero typography: premium but not oversized/cropped. */
.internal-premium .inner-hero__copy h1,
.internal-premium .blog-hero h1{
  max-width:850px;
  font-size:clamp(48px,5.15vw,78px);
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.internal-premium .section-heading h2,
.internal-premium .content-split h2,
.internal-premium .profile-copy h2,
.internal-premium .faq-layout h2,
.internal-premium .patient-visual__copy h2,
.internal-premium .booking-card h2,
.internal-premium .contact-form-card h2,
.internal-premium .contact-info-card h2{
  font-size:clamp(38px,4.2vw,62px);
  line-height:1.03;
}

/* Restore spacious homepage-style gaps instead of rigid editorial dividers. */
.internal-premium .team-mini-grid,
.internal-premium .service-grid,
.internal-premium .blog-grid,
.internal-premium .blog-grid--three,
.internal-premium .contact-page-grid,
.internal-premium .booking-grid,
.internal-premium .location-grid{
  gap:22px;
  border:0;
  background:transparent;
}
.internal-premium .team-mini-grid article,
.internal-premium .service-card{
  overflow:hidden;
}

/* Media treatment follows homepage rounded photography. */
.internal-premium .inner-hero__image,
.internal-premium .profile-image,
.internal-premium .patient-visual__grid,
.internal-premium .services-overview-intro__media,
.internal-premium .practice-gallery figure,
.internal-premium .team-person__image{
  border-radius:28px;
  overflow:hidden;
}
.internal-premium .inner-hero__image{
  box-shadow:0 24px 70px rgba(15,45,51,.10);
}

/* Remove beige remnants from specific service variants. */
.internal-premium.page-service.service-layout-b .inner-hero,
.internal-premium.page-service.service-layout-a .inner-hero{
  background:
    radial-gradient(circle at 86% 12%,rgba(143,174,161,.18),transparent 30%),
    linear-gradient(135deg,#ffffff,#f3faf7 60%,#eaf5f0);
}

/* =========================================================
   MOBILE / TABLET — layouts intentionally recompose rather
   than simply shrinking desktop columns.
   ========================================================= */
@media(max-width:900px){
  .internal-premium .inner-hero{
    padding:calc(var(--header-height) + 38px) 0 56px;
  }
  .internal-premium .inner-hero__grid,
  .internal-premium .content-split,
  .internal-premium .profile-grid,
  .internal-premium .patient-visual__grid,
  .internal-premium .contact-page-grid,
  .internal-premium .booking-grid,
  .internal-premium .location-grid,
  .internal-premium .faq-layout,
  .internal-premium.page-services .services-overview-intro__grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .internal-premium .inner-hero__copy,
  .internal-premium.page-about .inner-hero__copy,
  .internal-premium.page-team .inner-hero__copy,
  .internal-premium.page-services .inner-hero__copy,
  .internal-premium.page-new-patients .inner-hero__copy{
    max-width:none;
    padding:0;
  }

  .internal-premium .inner-hero__copy h1,
  .internal-premium .blog-hero h1,
  .internal-premium.page-about .inner-hero__copy h1,
  .internal-premium.page-team .inner-hero__copy h1,
  .internal-premium.page-services .inner-hero__copy h1,
  .internal-premium.page-new-patients .inner-hero__copy h1{
    max-width:100%;
    font-size:clamp(42px,10.5vw,62px);
    line-height:1;
    letter-spacing:-.05em;
  }

  .internal-premium .inner-hero__image,
  .internal-premium.page-about .inner-hero__image,
  .internal-premium.page-team .inner-hero__image,
  .internal-premium.page-services .inner-hero__image,
  .internal-premium.page-new-patients .inner-hero__image{
    width:100%;
    height:auto !important;
    min-height:0;
    aspect-ratio:16/10;
    border-radius:24px !important;
  }
  .internal-premium .inner-hero__image img,
  .internal-premium.page-team .inner-hero__image img,
  .internal-premium.page-new-patients .inner-hero__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .internal-premium .team-mini-grid,
  .internal-premium .service-grid,
  .internal-premium .three-up,
  .internal-premium .pathway-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .internal-premium .profile-image img{
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
  }
  .internal-premium .profile-copy,
  .internal-premium.page-patient .patient-visual__copy{
    padding:38px 32px;
    border-radius:24px;
  }
  .internal-premium.page-patient .patient-visual__media,
  .internal-premium.page-patient .patient-visual__media img{
    min-height:0;
    height:auto;
  }
  .internal-premium.page-patient .patient-visual__media img{
    aspect-ratio:16/10;
    object-fit:cover;
  }
  .internal-premium.page-article .article-layout{
    grid-template-columns:1fr;
    gap:44px;
  }
  .internal-premium.page-article .article-aside{
    position:static;
  }
}

@media(max-width:680px){
  .internal-premium .container{
    width:min(calc(100% - 30px),var(--container));
  }
  .internal-premium .section{
    padding:72px 0;
  }
  .internal-premium .inner-hero{
    padding:calc(var(--header-height) + 28px) 0 44px;
  }
  .internal-premium .inner-hero__grid{
    gap:24px !important;
  }
  .internal-premium .inner-hero__copy h1,
  .internal-premium .blog-hero h1,
  .internal-premium.page-about .inner-hero__copy h1,
  .internal-premium.page-team .inner-hero__copy h1,
  .internal-premium.page-services .inner-hero__copy h1,
  .internal-premium.page-new-patients .inner-hero__copy h1{
    font-size:clamp(38px,12vw,52px);
    line-height:1.02;
  }
  .internal-premium .inner-hero__copy>p:last-child{
    font-size:16px;
    line-height:1.65;
  }
  .internal-premium .inner-hero__image,
  .internal-premium.page-about .inner-hero__image,
  .internal-premium.page-team .inner-hero__image,
  .internal-premium.page-services .inner-hero__image,
  .internal-premium.page-new-patients .inner-hero__image{
    aspect-ratio:4/3;
    border-radius:20px !important;
  }

  .internal-premium .team-mini-grid,
  .internal-premium .service-grid,
  .internal-premium .three-up,
  .internal-premium .pathway-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .internal-premium .service-card,
  .internal-premium .pathway-card,
  .internal-premium .value-card,
  .internal-premium .team-mini-grid article,
  .internal-premium .contact-form-card,
  .internal-premium .contact-info-card,
  .internal-premium .booking-card,
  .internal-premium .location-panel,
  .internal-premium .aside-card{
    border-radius:20px;
  }
  .internal-premium .service-card{
    padding:0 20px 24px;
  }
  .internal-premium .service-card__media{
    margin:0 -20px 22px;
    aspect-ratio:16/9;
  }
  .internal-premium .pathway-card{
    min-height:0 !important;
    padding:26px;
  }
  .internal-premium .pathway-card>span{
    margin-bottom:24px;
    padding-bottom:0 !important;
  }
  .internal-premium .profile-copy,
  .internal-premium.page-patient .patient-visual__copy{
    padding:30px 24px;
  }
  .internal-premium.page-about .practice-gallery__grid{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .internal-premium.page-contact .contact-submit{
    width:100%;
  }
  .internal-premium .appointment-cta .cta-inner{
    padding:58px 0;
  }
  .internal-premium .appointment-cta h2{
    font-size:clamp(38px,11vw,52px);
  }
}


/* =========================================================
   HOMEPAGE MOBILE — DESKTOP-MATCHED SCROLL STACK
   Same sticky/ScrollTrigger language as desktop, tuned to a phone viewport.
   ========================================================= */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  body.page-home.arbor-scroll .arbor-flow {
    overflow: clip;
    padding-top: 72px;
    padding-bottom: 96px;
  }

  body.page-home.arbor-scroll .arbor-flow__stack {
    display: block;
    width: calc(100% - 20px);
  }

  body.page-home.arbor-scroll .arbor-flow__stack > * {
    position: sticky;
    top: 78px !important;
    margin-top: 0 !important;
    margin-bottom: 78px;
    min-height: 0;
    transform-origin: 50% 0%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(2) { top: 88px !important; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(3) { top: 98px !important; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(4) { top: 108px !important; }
  body.page-home.arbor-scroll .arbor-flow__stack > *:nth-child(5) { top: 118px !important; }

  body.page-home.arbor-scroll .arbor-flow__card,
  body.page-home.arbor-scroll .arbor-flow__review {
    box-shadow: 0 24px 58px rgba(0,0,0,.30);
  }

  body.page-home.arbor-scroll .arbor-flow__media,
  body.page-home.arbor-scroll .arbor-flow__card--reverse .arbor-flow__media {
    min-height: min(55svh, 430px);
  }

  body.page-home.arbor-scroll .arbor-flow__copy {
    min-height: auto;
    padding: 24px 22px 18px;
  }

  body.page-home.arbor-scroll .arbor-flow__copy p {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.55;
  }

  body.page-home.arbor-scroll .arbor-flow__media-title h2,
  body.page-home.arbor-scroll .arbor-flow__media-title h3 {
    font-size: clamp(34px, 10.2vw, 50px);
  }

  body.page-home.arbor-scroll .arbor-flow__review-heading {
    padding: 30px 22px 14px;
  }

  body.page-home.arbor-scroll .arbor-flow__review-body {
    padding: 10px 22px 20px;
  }

  body.page-home.arbor-scroll .arbor-flow__review-heading h3 {
    font-size: clamp(42px, 12vw, 58px);
  }

  body.page-home.arbor-scroll .arbor-flow__stack > *:last-child {
    margin-bottom: 0;
  }
}

/* =========================================================
   INNER-HERO UNIFIED TO MATCH THE HOME HERO
   Every inner page's hero (.inner-hero__grid/__copy/__image)
   gets the Home hero's grid ratio, gap, padding rhythm, image
   height, centered alignment, and heading scale, at the same
   breakpoints Home now uses (900px stack, matching the nav
   breakpoint; 680px and 390px phone tiers). Deliberately left
   alone: each page's own background/tint, each page's own
   image corner-radius "signature", and Team's letterboxed
   object-fit — those stay page-specific, same as before.
   !important matches this codebase's own existing convention
   for a final alignment layer, and is needed to beat the many
   scattered per-page/per-layout selectors this replaces.
   Blog articles (.blog-hero/.blog-cover) intentionally untouched.
   ========================================================= */
.inner-hero {
  padding: calc(var(--header-height) + 64px) 0 72px;
}

/* The .inner-hero ancestor prefix on every selector below isn't just
   description — it bumps specificity to match/beat the many existing
   ".internal-premium .inner-hero__*" and ".layout-* .inner-hero__*"
   rules this is meant to override, since several of those also use
   !important (for corner-radius) and specificity is what breaks ties
   between two !important declarations, not source order. */
.inner-hero.inner-hero.inner-hero .inner-hero__grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: 76px !important;
  align-items: center !important;
}

.inner-hero.inner-hero.inner-hero .inner-hero__copy {
  max-width: 580px !important;
  padding: 0 !important;
}

.inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
  max-width: 580px !important;
  font-size: clamp(56px, 5.15vw, 72px) !important;
  line-height: 1.02 !important;
}

.inner-hero.inner-hero.inner-hero .inner-hero__image {
  height: 540px !important;
  aspect-ratio: auto !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .inner-hero.inner-hero.inner-hero .inner-hero__grid {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
    gap: 38px !important;
  }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .inner-hero {
    padding: calc(var(--header-height) + 54px) 0 70px;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__copy,
  .inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
    max-width: 520px !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
    font-size: clamp(48px, 5.1vw, 66px) !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__image {
    height: 500px !important;
  }
}

@media (max-width: 900px) {
  .inner-hero.inner-hero.inner-hero .inner-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__copy,
  .inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
    max-width: 680px !important;
  }
}

@media (max-width: 680px) {
  .inner-hero {
    padding: calc(var(--header-height) + 26px) 0 48px;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__grid {
    gap: 30px !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
    font-size: clamp(38px, 10.6vw, 46px) !important;
    line-height: 1.02 !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__image {
    height: clamp(330px, 96vw, 430px) !important;
  }
}

@media (max-width: 390px) {
  .inner-hero.inner-hero.inner-hero .inner-hero__copy h1 {
    font-size: 36px !important;
  }

  .inner-hero.inner-hero.inner-hero .inner-hero__image {
    height: clamp(300px, 108vw, 380px) !important;
  }
}
.mobile-menu nav a{
  grid-template-columns:1fr 24px !important;
  column-gap:20px !important;
}

.mobile-menu nav a:after{
  justify-self:end !important;
}

/* =========================================================
   FINAL MOBILE MENU FIX
   Removes numbering and keeps the arrow aligned at the far right.
   This intentionally uses flex (not grid) because an earlier rule
   changes the menu links to display:flex.
   ========================================================= */
@media (max-width: 900px) {
  .mobile-menu nav {
    counter-reset: none !important;
  }

  .mobile-menu nav a {
    counter-increment: none !important;
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-right: 4px;
  }

  .mobile-menu nav a::before {
    content: none !important;
    display: none !important;
  }

  .mobile-menu nav a::after {
    content: "↗" !important;
    position: static !important;
    margin-left: auto !important;
    flex: 0 0 auto;
    color: rgba(255,255,255,.45);
    font-size: 17px;
    line-height: 1;
    transform: none;
  }
}

/* ===== CLIENT-APPROVED SUPPORTING UI ===== */
.button--emergency {
  border: 1px solid transparent;
  background: var(--emergency);
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(180,60,40,.22);
}
.button--emergency:hover {
  background: var(--emergency-deep);
  box-shadow: 0 12px 28px rgba(180,60,40,.28);
}
/* Emergency service page: make the "Urgent Dental Care" label stand out. */
.internal-premium.service-emergency .inner-hero__copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--emergency);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-hours {
  margin-top: 6px;
  color: rgba(255,255,255,.67) !important;
  line-height: 1.65 !important;
}
.footer-hours strong {
  color: #fff;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
footer.site-footer .brand-logo--footer {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.footer-social__link {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  transition: color .25s var(--ease), border-color .25s, background .25s, transform .25s var(--ease);
}
.footer-social__link:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
}
.footer-social__link svg { display: block; }
.mobile-menu__hours {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.70);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}
.mobile-menu .button--emergency {
  border: 1px solid transparent;
  background: var(--emergency);
  color: #fff;
  font-weight: 800;
}
.google-reviews {
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(143,174,161,.18), transparent 32%),
    linear-gradient(135deg, #f8fcfa 0%, #eef7f3 60%, #ffffff 100%);
}
.google-reviews .reviews-heading { align-items: end; }
.page-new-patients .pathway-grid { align-items: stretch; }
.page-new-patients .pathway-card { height: 100%; }
.page-new-patients .faq-list details { scroll-margin-top: calc(var(--header-height) + 24px); }

/* New-patient online intake forms */
.dsf-banner { margin: 0 0 24px; padding: 16px 20px; border-radius: 14px; font-size: 14px; font-weight: 650; }
.dsf-banner--ok { background: var(--sage-soft); color: var(--ink); border: 1px solid var(--line); }
.dsf-banner--err { background: #fbe9e7; color: #7a2318; border: 1px solid rgba(122,35,24,.2); }

.dsf-tabs { display: none; }
.dsf-forms--tabbed .dsf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.dsf-tab { padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dsf-tab:hover { border-color: var(--accent); }
.dsf-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.dsf-panel { margin-bottom: 40px; }
.dsf-forms--tabbed .dsf-panel { display: none; margin-bottom: 0; }
.dsf-forms--tabbed .dsf-panel.is-active { display: block; }
.dsf-panel__title { margin: 0 0 20px; }
.dsf-forms--tabbed .dsf-panel__title { display: none; }

.dsf-form { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.dsf-form__intro { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

/* New-patient 3-step wizard */
.dsf-wizard .dsf-steps { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0 0 30px; }
.dsf-step-dot { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--muted); opacity: .55; }
.dsf-step-dot.is-active, .dsf-step-dot.is-done { opacity: 1; color: var(--accent); }
.dsf-step-dot__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; flex: none; }
.dsf-step-dot.is-active .dsf-step-dot__num, .dsf-step-dot.is-done .dsf-step-dot__num { background: var(--accent); color: #fff; border-color: var(--accent); }
.dsf-wizard-step { display: none; }
.dsf-wizard-step.is-active { display: block; }
.dsf-wizard-nav { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.dsf-wizard-nav [hidden] { display: none !important; }
.dsf-wizard-progress { margin-left: auto; color: var(--muted); font-size: 14px; }
.button--ghost { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
@media (max-width: 680px) {
  .dsf-step-dot__label { display: none; }
  .dsf-wizard-nav { flex-wrap: wrap; }
}
.dsf-section { margin-bottom: 28px; }
.dsf-section__heading { margin: 0 0 16px; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.dsf-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 22px; }
.dsf-field { display: flex; flex-direction: column; gap: 6px; }
.dsf-field--wide { grid-column: 1 / -1; }
.dsf-field label, .dsf-field legend { font-size: 13px; font-weight: 650; color: var(--ink); }
.dsf-field input, .dsf-field select, .dsf-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; font-size: 14px; }
.dsf-field input:focus, .dsf-field select:focus, .dsf-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.dsf-field textarea { resize: vertical; }
.dsf-req { color: #c0392b; }

.dsf-yesno { border: 0; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dsf-yesno legend { margin-bottom: 8px; }
.dsf-yesno__opts { display: flex; gap: 22px; }
.dsf-radio, .dsf-check { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; cursor: pointer; }
.dsf-radio input, .dsf-check input { width: auto; }
.dsf-detail { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.dsf-detail input { width: auto; min-width: 120px; }

.dsf-checkgroup { border: 0; margin: 0; padding: 0; }
.dsf-checkgroup__opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 20px; margin-top: 4px; }
.dsf-check-single label { flex-direction: row; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dsf-other { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.dsf-other input { width: auto; min-width: 180px; }

.dsf-note { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--sage-soft); border-radius: 8px; font-size: 13px; color: var(--ink); }
.dsf-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 14px; font-weight: 600; }
.dsf-consent input { margin-top: 3px; }
.dsf-form__actions { margin-top: 26px; }
.dsf-fallback { margin-top: 26px; font-size: 13px; color: var(--muted); }

/* Honeypot — visually hidden but present for bots. */
.dsf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
  .dsf-grid, .dsf-checkgroup__opts { grid-template-columns: 1fr; }
  .dsf-form { padding: 22px; }
}

/* =========================================================
   ARBOR MOTION + WORDPRESS COMPATIBILITY
   ========================================================= */
.arbor-flow__card,
.arbor-flow__review {
  isolation: isolate;
  background-clip: padding-box;
}
.arbor-flow__copy {
  background: linear-gradient(145deg, rgb(77,82,83), rgb(57,64,67));
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  body.page-home.arbor-scroll .arbor-flow__stack > * { overflow: hidden; }
}
body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-menu { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .mobile-menu { top: 46px; }
}

/* =========================================================
   GOOGLE REVIEWS SLOT + FRONTEND-ONLY NEW PATIENT FORMS
   ========================================================= */
/* Google reviews are plugin-driven now; the old manual carousel is no longer used. */
.google-reviews-live {
  min-height: 170px;
}

.google-reviews-placeholder {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 30px;
  border: 1px solid rgba(23,56,63,.11);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15,45,51,.07);
}

.google-reviews-placeholder__mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f3f7f5;
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
}

.google-reviews-placeholder strong {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
}

.google-reviews-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

/* New patient forms */
.patient-history {
  background:
    radial-gradient(circle at 92% 8%, rgba(143,174,161,.16), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
}

.patient-history__heading {
  margin-bottom: 28px;
}

.patient-form-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.patient-form-downloads a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(23,56,63,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}

.patient-form-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.patient-form-tab {
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid rgba(23,56,63,.12);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.patient-form-tab:hover { transform: translateY(-1px); }
.patient-form-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.patient-form-panel[hidden] { display: none !important; }
.patient-form-panel.is-active { display: block; }

.patient-form {
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(23,56,63,.11);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,45,51,.07);
}

.patient-form__title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.patient-form__title > span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(23,56,63,.14);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}

.patient-form__title h3 {
  margin: 0 0 6px;
  font-size: clamp(28px, 3vw, 40px);
}

.patient-form__title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.patient-form-section {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(23,56,63,.11);
  border-radius: 18px;
  background: #fbfdfc;
}

.patient-form-section summary {
  position: relative;
  padding: 18px 48px 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.patient-form-section summary::-webkit-details-marker { display: none; }
.patient-form-section summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
}
.patient-form-section[open] summary::after { content: "−"; }

.patient-form-section__body,
.patient-question-list {
  padding: 4px 20px 22px;
  border-top: 1px solid rgba(23,56,63,.08);
}

.patient-form label {
  display: grid;
  gap: 7px;
  color: #36555b;
  font-size: 12px;
  font-weight: 700;
}

.patient-form input[type="text"],
.patient-form input[type="email"],
.patient-form input[type="tel"],
.patient-form input[type="date"],
.patient-form input[type="number"],
.patient-form select,
.patient-form textarea,
.appointment-request-ui input,
.appointment-request-ui select,
.appointment-request-ui textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid rgba(23,56,63,.15);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.patient-form textarea,
.appointment-request-ui textarea { min-height: 110px; resize: vertical; }

.patient-form input:focus,
.patient-form select:focus,
.patient-form textarea:focus,
.appointment-request-ui input:focus,
.appointment-request-ui select:focus,
.appointment-request-ui textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,155,143,.12);
}

.form-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.form-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.form-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }

.patient-form-section__body > label,
.patient-form-section__body > .choice-group,
.patient-form-section__body > .checkbox-grid,
.patient-form-section__body > .form-helper { margin-top: 14px; }

.choice-group > span {
  display: block;
  margin-bottom: 8px;
  color: #36555b;
  font-size: 12px;
  font-weight: 800;
}

.choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-pills label,
.patient-question__choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.choice-pills input,
.patient-question__choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-pills span,
.patient-question__choices span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(23,56,63,.13);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
}

.choice-pills input:checked + span,
.patient-question__choices input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: center;
  gap: 8px !important;
}
.checkbox-line input { width: auto; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px 14px;
}
.checkbox-grid label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.checkbox-grid input { flex: 0 0 auto; }

.patient-question {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(23,56,63,.09);
}
.patient-question:last-child { border-bottom: 0; }

.patient-question__text {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.patient-question__text > span {
  flex: 0 0 24px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.patient-question__text p {
  margin: 0;
  color: #405b60;
  font-size: 12px;
  line-height: 1.55;
}
.patient-question__choices {
  display: flex;
  gap: 6px;
}
.patient-question__choices span {
  min-width: 50px;
  min-height: 34px;
  padding: 0 10px;
}

.patient-extra-fields { padding: 16px 0 4px; }
.form-helper { color: var(--muted); font-size: 12px; line-height: 1.6; }

.medication-table { display: grid; gap: 10px; margin-top: 12px; }
.medication-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.patient-form-notice {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: #eef7f3;
  color: #456267;
  font-size: 12px;
  line-height: 1.6;
}

.office-use {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(23,56,63,.18);
}
.office-use > strong {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.office-use :disabled { opacity: .6; }

.patient-form__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.patient-form__actions .form-note { margin: 0; color: var(--muted); font-size: 11px; }

.appointment-request-ui { background: #f2f8f5; }
.appointment-request-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}
.appointment-request-grid h2 { font-size: clamp(38px, 4.4vw, 60px); }
.appointment-request-grid .contact-form-card { margin: 0; }

@media (max-width: 900px) {
  .patient-form-tabs { grid-template-columns: 1fr; }
  .form-grid--4,
  .form-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .checkbox-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appointment-request-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .google-reviews-placeholder { align-items: flex-start; padding: 22px 18px; }
  .patient-form { padding: 18px; border-radius: 20px; }
  .patient-form__title { gap: 12px; }
  .patient-form-section summary { padding: 16px 44px 16px 16px; }
  .patient-form-section__body,
  .patient-question-list { padding: 4px 15px 18px; }
  .form-grid--2,
  .form-grid--3,
  .form-grid--4,
  .medication-row,
  .checkbox-grid { grid-template-columns: 1fr; }
  .patient-question {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .patient-question__choices { padding-left: 33px; }
  .patient-form__actions { align-items: stretch; flex-direction: column; }
  .patient-form__actions .button { width: 100%; }
  .patient-form-downloads { display: grid; grid-template-columns: 1fr; }
  .patient-form-downloads a { justify-content: center; }
}

/* =========================================================
   FINAL HEADER + RESPONSIVE SYSTEM
   One desktop layout, one compact layout, one phone refinement.
   ========================================================= */

/* Desktop header */
.site-header > .container.header-inner {
  width: min(calc(100% - 40px), 1720px);
}
.header-inner { gap: 22px; }
.desktop-nav {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  gap: 24px;
}
.desktop-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
}
.header-actions {
  flex: 0 0 auto;
  gap: 10px;
}
.header-actions .phone-link,
.header-actions .button { white-space: nowrap; }
.header-actions .button--emergency {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 12px;
}
.header-actions .button--small:not(.button--emergency) {
  min-height: 42px;
  padding-inline: 18px;
}
.header-hours-inline {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  max-width: 260px;
  padding-right: 14px;
  border-right: 1px solid rgba(23,56,63,.12);
  color: #2c4a4f;
  white-space: nowrap;
  line-height: 1.45;
}
.header-hours-inline > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
}
.header-hours-inline small {
  color: #566b6e;
  font-size: 10.5px;
  font-weight: 600;
}
.header-hours-inline__clock {
  display: inline-grid;
  place-items: center;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}

/* Laptop: preserve the approved desktop theme without shrinking text to 7–9px. */
@media (min-width: 1181px) and (max-width: 1450px) {
  .site-header > .container.header-inner { width: min(calc(100% - 28px), 1420px); }
  .header-inner { gap: 14px; }
  .desktop-nav { gap: 15px; }
  .desktop-nav a { font-size: 12px; }
  .header-hours-inline,
  .header-actions .phone-link { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .button--small:not(.button--emergency) {
    padding-inline: 13px;
    font-size: 10.5px;
  }
  .header-actions .button--emergency {
    padding-inline: 14px;
    font-size: 11.5px;
  }
  .hero-grid { gap: clamp(44px, 4vw, 62px); }
  .hero-image-card { height: clamp(500px, 41vw, 555px); }
  .hero-copy > p { font-size: 16px; }
}

/* Compact navigation for tablets and narrow laptops. */
@media (max-width: 1180px) {
  .desktop-nav,
  .header-hours-inline,
  .header-actions > .button,
  .header-actions > .phone-link {
    display: none !important;
  }
  .site-header > .container.header-inner {
    width: min(calc(100% - 28px), var(--container));
  }
  .menu-toggle {
    position: relative;
    z-index: 1103;
    display: grid !important;
    place-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(24,62,66,.10);
    border-radius: 50%;
    background: #f4faf7;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 20px;
    height: 2px;
    margin: 2.5px 0;
    border-radius: 99px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed !important;
    inset: var(--header-height) 0 0 !important;
    z-index: 1101;
    display: flex !important;
    min-height: calc(100dvh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 92% 10%, rgba(143,210,189,.18), transparent 28%),
      linear-gradient(155deg,#071b20,#0d3036);
    color: #fff;
    transform: translate3d(0,-12px,0) scale(.99);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.75,.2,1), visibility .3s;
  }
  .mobile-menu.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-menu__intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .mobile-menu__intro span {
    color: #9ce1cc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .mobile-menu__intro small {
    max-width: 190px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    text-align: right;
  }
  .mobile-menu nav {
    display: grid;
    gap: 0;
    margin: 12px 0 22px;
  }
  .mobile-menu nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 58px;
    padding: 10px 4px 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: clamp(20px, 3.2vw, 27px);
    line-height: 1;
    letter-spacing: -.035em;
  }
  .mobile-menu nav a::before { content: none !important; }
  .mobile-menu nav a::after {
    content: "↗";
    position: static;
    flex: 0 0 auto;
    margin-left: auto;
    color: rgba(255,255,255,.45);
    font-size: 17px;
  }
  .mobile-menu__footer {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
  }
  .mobile-menu__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
  }
  .mobile-menu__hours {
    color: rgba(255,255,255,.72);
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
  }
  .mobile-menu .button {
    width: 100%;
    min-height: 50px;
  }
}

@media (min-width: 1181px) {
  .menu-toggle,
  .mobile-menu { display: none !important; }
}

@media (max-width: 680px) {
  .site-header > .container.header-inner { width: calc(100% - 24px); }
  .brand-logo {
    width: 112px !important;
    height: 42px !important;
  }
  .mobile-menu {
    gap: 14px;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .mobile-menu__intro {
    gap: 10px;
    padding-bottom: 12px;
  }
  .mobile-menu__intro small {
    max-width: 150px;
    font-size: 9px;
  }
  .mobile-menu nav { margin: 4px 0 10px; }
  .mobile-menu nav a {
    min-height: 50px !important;
    padding: 10px 4px 10px 0 !important;
    font-size: clamp(18px, 5.7vw, 22px) !important;
  }
  .mobile-menu__footer {
    gap: 8px;
    padding-top: 8px;
  }
  .mobile-menu__phone,
  .mobile-menu .button {
    min-height: 46px !important;
    font-size: 11px;
  }

  /* New-patient forms */
  .patient-history { overflow: hidden; }
  .patient-history .container { width: min(calc(100% - 24px), var(--container)); }
  .patient-form,
  .patient-form-section,
  .patient-form-section__body,
  .patient-question,
  .patient-question__text,
  .patient-question__choices,
  .form-grid,
  .form-grid > *,
  .medication-row > * {
    min-width: 0;
    max-width: 100%;
  }
  .patient-form {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .patient-form__title {
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .patient-form__title h3 { font-size: clamp(24px, 8vw, 32px); }
  .patient-form-tabs { gap: 8px; }
  .patient-form-tab {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .patient-form-section { border-radius: 14px; }
  .patient-form-section summary {
    padding: 14px 40px 14px 14px !important;
    font-size: 13px;
    line-height: 1.35;
  }
  .patient-form-section summary::after { right: 14px; }
  .patient-form-section__body,
  .patient-question-list { padding: 4px 12px 16px !important; }
  .patient-form input[type="text"],
  .patient-form input[type="email"],
  .patient-form input[type="tel"],
  .patient-form input[type="date"],
  .patient-form input[type="number"],
  .patient-form select,
  .patient-form textarea,
  .appointment-request-ui input,
  .appointment-request-ui select,
  .appointment-request-ui textarea {
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .choice-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    width: 100%;
  }
  .choice-pills label,
  .choice-pills label > span { width: 100%; }
  .patient-question { padding: 13px 0; }
  .patient-question__choices {
    width: 100%;
    padding-left: 0 !important;
  }
  .patient-question__choices label { flex: 1 1 0; }
  .patient-question__choices span {
    width: 100%;
    min-width: 0;
  }
  .checkbox-grid,
  .form-grid--2,
  .form-grid--3,
  .form-grid--4,
  .medication-row { grid-template-columns: 1fr !important; }
  .appointment-request-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

@media (max-width: 390px) {
  .mobile-menu { padding-inline: 14px; }
  .mobile-menu__intro small { display: none; }
  .mobile-menu nav a {
    min-height: 47px !important;
    font-size: 19px !important;
  }
  .choice-pills { grid-template-columns: 1fr; }
}


/* =========================================================
   CLIENT NAVBAR UPDATE — v1.2.0
   Persistent clinic hours + phone on laptop/tablet/mobile.
   The approved large-desktop layout remains unchanged.
   ========================================================= */

/* Hidden on wide desktop because the same information already lives inline. */
.header-utility {
  display: none;
}
.header-utility__hours-short {
  display: none;
}

/* Laptop: use a slim utility row so hours/phone stay readable without
   squeezing the approved navigation links and CTA buttons. */
@media (max-width: 1450px) {
  :root {
    --header-height: 114px;
  }

  .site-header {
    height: var(--header-height);
  }

  .header-utility {
    display: block;
    height: 32px;
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }

  .header-utility__inner {
    width: min(calc(100% - 28px), 1420px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .header-utility__hours {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.82);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }

  .header-utility__clock {
    flex: 0 0 auto;
    color: #9ce1cc;
    font-size: 13px;
  }

  .header-utility__phone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding-left: 17px;
    border-left: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .header-utility__phone-icon {
    flex: 0 0 auto;
    color: #9ce1cc;
  }

  .header-utility__phone:hover {
    color: #9ce1cc;
  }

  .site-header > .container.header-inner {
    height: calc(var(--header-height) - 32px);
  }
}

/* Tablet / narrow laptop: the utility row remains visible while the main
   navigation switches to the hamburger menu. The full header stays fixed. */
@media (max-width: 1180px) {
  :root {
    --header-height: 106px;
  }

  .site-header > .container.header-inner {
    height: 74px;
  }

  .mobile-menu {
    top: calc(var(--wp-admin-offset, 0px) + var(--header-height)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    min-height: auto !important;
    max-height: none !important;
  }
}

/* Phone: concise one-line hours + tap-to-call number stay visible at all
   times above the logo/menu row. */
@media (max-width: 680px) {
  :root {
    --header-height: 102px;
  }

  .header-utility {
    height: 34px;
  }

  .header-utility__inner {
    width: calc(100% - 24px);
    gap: 10px;
  }

  .header-utility__hours {
    gap: 5px;
    overflow: hidden;
    font-size: 9px;
    letter-spacing: -.01em;
  }

  .header-utility__hours-full {
    display: none;
  }

  .header-utility__hours-short {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-utility__clock {
    font-size: 11px;
  }

  .header-utility__phone {
    min-height: 24px;
    padding-left: 9px;
    font-size: 9.5px;
  }

  .site-header > .container.header-inner {
    height: 68px;
  }
}

/* WordPress admin-bar-safe fixed header/menu while testing logged in. */
body.admin-bar {
  --wp-admin-offset: 32px;
}
body.admin-bar .site-header {
  top: var(--wp-admin-offset);
}
@media (max-width: 782px) {
  body.admin-bar {
    --wp-admin-offset: 46px;
  }
}

/* =========================================================
   MOBILE FIXED HEADER HARDENING — v1.2.1
   IMPORTANT: This belongs in assets/css/style.css.
   Keeps the utility row + logo/hamburger row fixed on tablet/mobile.
   ========================================================= */

@media (max-width: 1180px) {
  html body .site-header[data-header] {
    position: fixed !important;
    inset: auto 0 auto 0 !important;
    top: var(--wp-admin-offset, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--header-height) !important;
    z-index: 9990 !important;
    transform: none !important;
  }

  html body .site-header[data-header] .header-utility {
    position: relative;
    z-index: 2;
  }

  html body .site-header[data-header] > .container.header-inner {
    position: relative;
    z-index: 3;
  }

  html body .site-header[data-header] .menu-toggle {
    position: relative;
    z-index: 9992 !important;
  }

  html body .mobile-menu {
    position: fixed !important;
    top: calc(var(--wp-admin-offset, 0px) + var(--header-height)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9980 !important;
  }
}

/* Phone header = 34px utility bar + 68px main navbar. */
@media (max-width: 680px) {
  :root {
    --header-height: 102px;
  }

  html body .site-header[data-header] {
    position: fixed !important;
    top: var(--wp-admin-offset, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 102px !important;
    margin: 0 !important;
  }

  html body .site-header[data-header] .header-utility {
    display: block !important;
    width: 100%;
    height: 34px !important;
  }

  html body .site-header[data-header] > .container.header-inner {
    width: calc(100% - 24px) !important;
    height: 68px !important;
    margin-inline: auto !important;
  }

  html body .mobile-menu {
    top: calc(var(--wp-admin-offset, 0px) + 102px) !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* WordPress admin toolbar offset while previewing the site logged in. */
body.admin-bar {
  --wp-admin-offset: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --wp-admin-offset: 46px;
  }
}

/* =========================================================
   DUNBAR LOCATION — v1.3.0
   Real Google Maps embed + corrected clinic-details alignment.
   ========================================================= */
.internal-premium.page-location .location-details-section {
  padding: 84px 0;
}

.internal-premium.page-location .location-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: stretch;
}

.internal-premium.page-location .location-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 42px 38px;
}

.internal-premium.page-location .location-panel h2 {
  margin: 0 0 8px;
  font-size: clamp(38px, 3.7vw, 58px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.internal-premium.page-location .location-panel dl {
  width: 100%;
  margin: 22px 0 30px;
}

.internal-premium.page-location .location-panel dl div {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 0;
}

.internal-premium.page-location .location-panel dd,
.internal-premium.page-location .location-panel dd a {
  overflow-wrap: anywhere;
}

.internal-premium.page-location .location-actions {
  margin-top: auto;
  padding-top: 2px;
}

.internal-premium.page-location .map-card--google {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(23,56,63,.10);
  border-radius: 26px;
  background: #e7f0ec;
  box-shadow: 0 16px 48px rgba(15,45,51,.07);
}

.internal-premium.page-location .map-card--google iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
}

@media (max-width: 900px) {
  .internal-premium.page-location .location-details-section {
    padding: 64px 0;
  }

  .internal-premium.page-location .location-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .internal-premium.page-location .location-panel {
    padding: 36px 32px 32px;
  }

  .internal-premium.page-location .map-card--google {
    min-height: 430px;
    height: 430px;
  }

  .internal-premium.page-location .map-card--google iframe {
    min-height: 430px;
  }
}

@media (max-width: 680px) {
  .internal-premium.page-location .location-details-section {
    padding: 54px 0;
  }

  .internal-premium.page-location .location-panel {
    padding: 28px 22px 24px;
    border-radius: 20px;
  }

  .internal-premium.page-location .location-panel h2 {
    font-size: clamp(34px, 10vw, 44px);
  }

  .internal-premium.page-location .location-panel dl {
    margin: 18px 0 24px;
  }

  .internal-premium.page-location .location-panel dl div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }

  .internal-premium.page-location .map-card--google {
    min-height: 340px;
    height: 340px;
    border-radius: 20px;
  }

  .internal-premium.page-location .map-card--google iframe {
    min-height: 340px;
  }
}

/* =========================================================
   MOBILE / TABLET HEADER + MENU — SINGLE SOURCE OF TRUTH
   Appended last so it overrides every earlier layered block.
   One fixed white row (logo · call · hamburger) + a reliable
   full-screen slide-down menu. The old two-row utility strip
   and the fragile offset math are retired here.
   ========================================================= */
@media (max-width: 1180px) {
  :root {
    --util-h: 34px;         /* dark hours/phone strip (kept, like laptop) */
    --navrow-h: 58px;       /* white logo + hamburger row */
    --mnav: 92px;           /* total header = strip + nav row */
    --ds-top: 0px;          /* space reserved above the fixed header (WP admin bar) */
    --header-height: 92px;  /* keep hero/inner-hero top padding in sync with the real bar */
  }

  /* --- Fixed clinic header (this is the "fixed" fix) --- */
  html body .site-header[data-header] {
    position: fixed !important;
    top: var(--ds-top) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--mnav) !important;
    margin: 0 !important;
    z-index: 12000 !important;
    transform: none !important;
    background: rgba(255,255,255,.985) !important;
    border-bottom: 1px solid rgba(23,56,63,.10) !important;
    box-shadow: 0 8px 24px rgba(15,45,51,.07) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  /* Top utility strip stays on mobile — same hours + phone as the laptop bar. */
  html body .site-header[data-header] .header-utility {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: var(--util-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ink) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }
  html body .site-header[data-header] .header-utility__inner {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  html body .site-header[data-header] .header-utility__hours {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* Long wording won't fit a phone strip, so show the compact hours line
     (same information, laptop shows the full one on wide screens). */
  html body .site-header[data-header] .header-utility__hours-full {
    display: none !important;
  }
  html body .site-header[data-header] .header-utility__hours-short {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .site-header[data-header] .header-utility__clock {
    flex: 0 0 auto !important;
    color: #9ce1cc !important;
    font-size: 11px !important;
  }
  html body .site-header[data-header] .header-utility__phone {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding-left: 12px !important;
    border-left: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  html body .site-header[data-header] .header-utility__phone-icon {
    flex: 0 0 auto !important;
    color: #9ce1cc !important;
  }
  html body .site-header[data-header] .header-utility__phone:hover {
    color: #9ce1cc !important;
  }

  /* White nav row: logo (left) + hamburger (right). */
  html body .site-header[data-header] > .container.header-inner {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--navrow-h) !important;
    min-height: var(--navrow-h) !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html body .site-header[data-header] .brand {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .site-header[data-header] .brand-logo {
    width: auto !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain !important;
  }

  /* Desktop nav never shows in this range. */
  html body .site-header[data-header] .desktop-nav {
    display: none !important;
  }

  html body .site-header[data-header] .header-actions {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }

  /* Phone number already lives in the top strip; CTA buttons live in the menu. */
  html body .site-header[data-header] .header-actions .phone-link {
    display: none !important;
  }
  html body .site-header[data-header] .header-actions > .button {
    display: none !important;
  }

  /* Hamburger — always the top-most, always clickable. */
  html body .site-header[data-header] .menu-toggle {
    position: relative !important;
    z-index: 12002 !important;
    display: grid !important;
    place-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 10px !important;
    border: 1px solid rgba(23,56,63,.12) !important;
    border-radius: 50% !important;
    background: #f4faf7 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html body .site-header[data-header] .menu-toggle span {
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    margin: 2.5px 0 !important;
    border-radius: 99px !important;
    background: var(--ink) !important;
    transition: transform .25s ease, opacity .2s ease !important;
  }
  html body .site-header[data-header] .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  html body .site-header[data-header] .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }
  html body .site-header[data-header] .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* --- Slide-down menu (this is the "opening" fix) --- */
  html body .mobile-menu {
    position: fixed !important;
    top: calc(var(--ds-top) + var(--mnav)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100dvh - var(--ds-top) - var(--mnav)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    z-index: 11990 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 92% 10%, rgba(143,210,189,.18), transparent 28%),
      linear-gradient(155deg,#071b20,#0d3036) !important;
    color: #fff !important;
    /* closed state */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0,-10px,0) !important;
    transition:
      opacity .25s ease,
      transform .32s cubic-bezier(.2,.75,.2,1),
      visibility .25s !important;
  }
  html body .mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0,0,0) !important;
  }

  html body .mobile-menu nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 4px 0 10px !important;
  }
  html body .mobile-menu nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 10px 4px 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: clamp(20px, 5.6vw, 26px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body .mobile-menu nav a::before {
    content: none !important;
    display: none !important;
  }
  html body .mobile-menu nav a::after {
    content: "↗" !important;
    position: static !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: rgba(255,255,255,.45) !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  html body .mobile-menu__footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 8px !important;
  }
  html body .mobile-menu__phone,
  html body .mobile-menu .button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* The menu owns page scrolling while open. */
  html body.menu-open { overflow: hidden !important; }

  /* Keep anchored/scrolled-to content clear of the fixed bar. */
  html { scroll-padding-top: calc(var(--ds-top) + var(--mnav) + 12px) !important; }
}

/* Logged-in preview: WordPress admin bar is fixed (32px) on >=783px, so reserve
   space for it. On <=782px WP makes the bar non-fixed (it scrolls away), so we
   keep the clinic header pinned to the very top — no reserved gap. */
@media (min-width: 783px) and (max-width: 1180px) {
  body.admin-bar { --ds-top: 32px; }
}

/* Small phones: tighten the strip text and logo so hours + phone still fit. */
@media (max-width: 480px) {
  html body .site-header[data-header] .header-utility__inner { gap: 8px !important; }
  html body .site-header[data-header] .header-utility__hours { font-size: 9px !important; }
  html body .site-header[data-header] .header-utility__phone {
    padding-left: 9px !important;
    font-size: 10.5px !important;
  }
  html body .site-header[data-header] .brand-logo { width: auto !important; max-height: 50px !important; }
  html body .site-header[data-header] .menu-toggle {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Very small phones: keep hours + phone on one line without collisions. */
@media (max-width: 360px) {
  html body .site-header[data-header] .header-utility__hours { font-size: 8px !important; }
  html body .site-header[data-header] .header-utility__phone {
    padding-left: 8px !important;
    font-size: 10px !important;
  }
  html body .site-header[data-header] .brand-logo { width: auto !important; max-height: 46px !important; }
}

/* Revision-guide support: confirmed team roles without guessing portrait mapping. */
.team-person--text-only{display:flex;align-items:center;min-height:180px}.team-person--text-only .team-person__body{width:100%}


/* Launch hardening: contact anti-spam + clear form states. */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-message {
  display: grid;
  gap: 4px;
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(23, 56, 63, 0.14);
  background: #f5f9f7;
}
.form-message--error {
  background: #fff7f5;
  border-color: rgba(126, 55, 44, 0.2);
}
.team-person__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4f1;
}
.team-person__placeholder span {
  font-size: 72px;
  font-weight: 600;
  color: #17383f;
  opacity: .28;
  line-height: 1;
}


/* Incremental fix: homepage Google Map should fully fill the card, not render as a tiny embed. */
.map-card--google {
  position: relative;
  min-height: 470px;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(23,56,63,.10);
  border-radius: 28px;
  background: #e7f0ec;
  box-shadow: 0 16px 48px rgba(15,45,51,.07);
}
.map-card--google iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 470px;
  border: 0;
}
@media (max-width: 900px) {
  .map-card--google { min-height: 430px; }
  .map-card--google iframe { min-height: 430px; }
}
@media (max-width: 680px) {
  .map-card--google { min-height: 340px; border-radius: 20px; }
  .map-card--google iframe { min-height: 340px; }
}

/* Keep resource-card imagery visible on the resources archive and homepage preview. */
.page-home .blog-grid .blog-card__media {
  display: block;
}


/* Final requested visual refinements — 17 Sep 2026 */

/* Team hero: use the supplied wide team photograph without letterboxing. */
.internal-premium.page-team .inner-hero__image {
  aspect-ratio: 1400 / 760 !important;
  height: auto !important;
  overflow: hidden !important;
  background: #e5ebe8 !important;
}
.internal-premium.page-team .inner-hero__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Team cards: deliberately compact, with Maria represented by the approved initial placeholder. */
.internal-premium.page-team .team-mini-grid {
  align-items: start !important;
}
.internal-premium.page-team .team-mini-grid article {
  min-height: 0 !important;
  height: auto !important;
}
.internal-premium.page-team .team-person__image,
.internal-premium.page-team .team-person__placeholder {
  width: 100% !important;
  height: 300px !important;
  aspect-ratio: auto !important;
}
.internal-premium.page-team .team-person__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40% !important;
}
/* Glaiza's portrait is framed lower than Mica's; nudge her crop up so the two faces line up. */
.internal-premium.page-team .team-person--glaiza .team-person__image img {
  object-position: center 72% !important;
}
.internal-premium.page-team .team-person__placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg,#edf5f1,#f8fbf9) !important;
  border-bottom: 1px solid var(--line) !important;
}
.internal-premium.page-team .team-person__placeholder span {
  display: grid !important;
  place-items: center !important;
  width: 112px !important;
  height: 112px !important;
  border: 1px solid rgba(23,56,63,.12) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--ip) !important;
  font-size: 54px !important;
  font-weight: 600 !important;
  opacity: .7 !important;
  box-shadow: 0 16px 34px rgba(15,45,51,.07) !important;
}
.internal-premium.page-team .team-person__body {
  min-height: 0 !important;
  padding: 22px 26px 26px !important;
}
.internal-premium.page-team .team-person__body .eyebrow {
  margin-bottom: 7px !important;
}
.internal-premium.page-team .team-person__body h3 {
  margin: 0 !important;
}
/* Two team members shown for now (Maria removed) — balance them as a centered
   two-up rather than leaving an empty third column in the grid. */
.internal-premium.page-team .team-mini-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .internal-premium.page-team .team-mini-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* New Patients hero: clinic environment fills the visual panel cleanly. */
.internal-premium.page-new-patients .inner-hero__image {
  overflow: hidden !important;
  background: #e6ebe8 !important;
}
.internal-premium.page-new-patients .inner-hero__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* New Patients support panel: remove the large empty bands around the group photo. */
.internal-premium.page-new-patients .patient-visual__grid {
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important;
  align-items: stretch !important;
}
.internal-premium.page-new-patients .patient-visual__media {
  min-height: 520px !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #dfe6e3 !important;
}
.internal-premium.page-new-patients .patient-visual__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 24% !important;
  background: transparent !important;
}
.internal-premium.page-new-patients .patient-visual__copy {
  min-height: 520px !important;
}

/* Homepage map: the Google iframe must occupy the entire visual card. */
.page-home .map-card--google,
body.page-home .map-card--google {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 470px !important;
  height: 470px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #e7f0ec !important;
}
.page-home .map-card--google iframe,
body.page-home .map-card--google iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  border: 0 !important;
}

/* Resource images are intentionally retained. */
.internal-premium.page-resources .blog-card__media,
.page-home .blog-card__media {
  display: block !important;
  overflow: hidden !important;
}
.internal-premium.page-resources .blog-card__media img,
.page-home .blog-card__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  .internal-premium.page-team .team-person__image,
  .internal-premium.page-team .team-person__placeholder { height: 280px !important; }
  .internal-premium.page-new-patients .patient-visual__grid { grid-template-columns: 1fr !important; }
  .internal-premium.page-new-patients .patient-visual__media,
  .internal-premium.page-new-patients .patient-visual__media img { min-height: 430px !important; height: 430px !important; }
  .internal-premium.page-new-patients .patient-visual__copy { min-height: 0 !important; }
  .page-home .map-card--google,
  body.page-home .map-card--google { min-height: 430px !important; height: 430px !important; }
}

@media (max-width: 680px) {
  .internal-premium.page-team .team-person__image,
  .internal-premium.page-team .team-person__placeholder { height: 250px !important; }
  .internal-premium.page-team .team-person__placeholder span { width: 92px !important; height: 92px !important; font-size: 44px !important; }
  .internal-premium.page-new-patients .patient-visual__media,
  .internal-premium.page-new-patients .patient-visual__media img { min-height: 340px !important; height: 340px !important; }
  .page-home .map-card--google,
  body.page-home .map-card--google { min-height: 340px !important; height: 340px !important; border-radius: 20px !important; }
}

/* =========================================================
   CONTINUING EDUCATION NAV + HEADER SOCIAL ICONS
   - Adds an 8th nav item ("Continuing Education"); nav spacing
     is tightened so the row stays clean.
   - The utility bar (hours · phone · social) now shows on wide
     desktop too, so the social icons appear at every width and
     the phone moves out of the crowded main action row.
   - Instagram/Facebook always render; WhatsApp appears only once
     'whatsapp_url' is set in dunbar_clinic_data() (post-launch).
   ========================================================= */

/* Right-hand group inside the utility bar: phone + social icons. */
.header-utility__end {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.header-utility__social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.header-utility__social-link {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  transition: color .25s var(--ease), background .25s;
}
.header-utility__social-link:hover {
  color: #9ce1cc;
  background: rgba(255,255,255,.10);
}
.header-utility__social-link svg { display: block; }

/* Social icons in the mobile slide-down menu (dark background). */
.mobile-menu__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.mobile-menu__social-link {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  transition: color .25s var(--ease), border-color .25s, background .25s, transform .25s var(--ease);
}
.mobile-menu__social-link:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
}
.mobile-menu__social-link svg { display: block; }

/* Wide desktop: bring the utility bar onto the top row so social icons
   are always present and the action row drops its duplicate hours/phone.
   Mirrors the proven laptop utility bar (see the max-width:1450px block). */
@media (min-width: 1451px) {
  :root { --header-height: 114px; }
  .site-header { height: var(--header-height); }
  .header-utility {
    display: block;
    height: 32px;
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .header-utility__inner {
    width: min(calc(100% - 40px), 1720px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .header-utility__hours {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.82);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }
  .header-utility__clock { flex: 0 0 auto; color: #9ce1cc; font-size: 13px; }
  .header-utility__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  .header-utility__phone-icon { flex: 0 0 auto; color: #9ce1cc; }
  .header-utility__phone:hover { color: #9ce1cc; }
  .site-header > .container.header-inner { height: calc(var(--header-height) - 32px); }
  /* Hours + phone now live in the utility bar; drop the action-row copies. */
  .header-actions .header-hours-inline,
  .header-actions .phone-link { display: none; }
  /* Eight nav items: keep the row comfortable. */
  .header-inner { gap: 18px; }
  .desktop-nav { gap: 20px; }
}

/* Laptop: tighten the nav a touch more so eight items still fit cleanly. */
@media (min-width: 1181px) and (max-width: 1450px) {
  .desktop-nav { gap: 13px; }
  .desktop-nav a { font-size: 11.5px; }
}

/* Tablet / mobile use the hamburger menu, so keep the slim strip to
   hours + phone only; social icons live in the mobile menu footer. */
@media (max-width: 1180px) {
  .header-utility__social { display: none; }
}


/* =========================================================
   CLIENT REVISION — September 2026: logo, directory, hours, service content
   ========================================================= */
/* Slightly larger desktop logo while preserving nav spacing and compact mobile behavior. */
@media (min-width: 1451px) {
  html body .site-header[data-header] .brand-logo { height: 82px; width: auto; max-height: 82px; }
}
@media (min-width: 1181px) and (max-width: 1450px) {
  html body .site-header[data-header] .brand-logo { height: 78px; width: auto; max-height: 78px; }
}

.section-heading--directory {
  margin-bottom: clamp(34px, 5vw, 58px);
  align-items: end;
}
.section-heading--directory h2 {
  margin: 0;
  font-size: clamp(42px, 5.8vw, 76px);
  letter-spacing: -.045em;
}

.article-layout--single {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.clinic-hours-card {
  margin: 28px 0 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.clinic-hours-card h3 { margin: 0 0 14px; font-size: 20px; }
.clinic-hours-list { margin: 0; }
.clinic-hours-list > div {
  display: grid;
  grid-template-columns: minmax(118px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.clinic-hours-list dt { font-weight: 750; color: var(--ink); }
.clinic-hours-list dd { margin: 0; color: var(--muted); }
@media (max-width: 680px) {
  .clinic-hours-list > div { grid-template-columns: 1fr; gap: 3px; }
}


/* =========================================================
   CLIENT REVISION — September 2026: contact hierarchy,
   entrance wayfinding, clickable states, homepage composition
   ========================================================= */

/* Contact hero: remove the dated building image and use the space for
   the information patients need immediately. */
.internal-premium.page-contact .contact-hero-grid {
  align-items: center;
}
.internal-premium.page-contact .contact-kicker {
  margin-bottom: 18px;
  color: #9ce1cc;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
  letter-spacing: .045em;
}
.internal-premium.page-contact .contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.internal-premium.page-contact .contact-hero-panel {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 22px 56px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.internal-premium.page-contact .contact-hero-panel__label {
  margin: 0 0 18px;
  color: #9ce1cc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.internal-premium.page-contact .contact-hero-detail {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.internal-premium.page-contact .contact-hero-detail span {
  color: rgba(255,255,255,.64);
  font-size: 12px;
  font-weight: 700;
}
.internal-premium.page-contact .contact-hero-detail strong,
.internal-premium.page-contact .contact-hero-detail a {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.internal-premium.page-contact .contact-location-link {
  margin-top: 24px;
  color: #fff;
}
.internal-premium.page-contact .contact-info-intro {
  color: rgba(255,255,255,.74);
  line-height: 1.7;
}
.internal-premium.page-contact .contact-info-card .clinic-hours-card {
  border-top-color: rgba(255,255,255,.2);
}
.internal-premium.page-contact .contact-info-card .clinic-hours-list > div {
  border-bottom-color: rgba(255,255,255,.16);
}
.internal-premium.page-contact .contact-info-card .clinic-hours-list dt { color: #fff; }
.internal-premium.page-contact .contact-info-card .clinic-hours-list dd { color: rgba(255,255,255,.72); }
.internal-premium.page-contact .contact-info-card__actions { gap: 10px; }

.button--hero-outline {
  border: 1px solid rgba(255,255,255,.5);
  background: transparent;
  color: #fff;
}
.button--hero-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.1);
}

/* Location wayfinding: make the correct entrance impossible to miss. */
.entrance-photo { position: relative; }
.entrance-photo-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 13px 16px;
  background: rgba(10,39,45,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.46);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.entrance-direction-note {
  display: grid;
  gap: 5px;
  margin: 20px 0 4px;
  padding: 17px 18px;
  border-left: 4px solid var(--accent);
  background: #eef7f3;
  color: var(--ink);
}
.entrance-direction-note strong { font-size: 15px; }
.entrance-direction-note span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.internal-premium.page-location .map-card--google .map-entrance-note {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  gap: 1px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 10px;
  background: rgba(10,39,45,.94);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  pointer-events: none;
}
.internal-premium.page-location .map-card--google .map-entrance-note strong {
  color: #9ce1cc;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.internal-premium.page-location .map-card--google .map-entrance-note span {
  font-size: 13px;
  font-weight: 800;
}

/* Consistent interaction language: clickable controls lift slightly, gain a
   predictable shadow, and preserve readable contrast on light/dark surfaces. */
.button,
.arbor-flow__tab,
.internal-premium.page-services .service-card,
.text-link,
.desktop-nav a,
.mobile-menu nav a,
.phone-link {
  transition: transform .22s var(--ease), box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
}
.button {
  box-shadow: 0 7px 18px rgba(15,45,51,.12);
}
.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15,45,51,.2);
}
.button--light:hover,
.button--light:focus-visible {
  background: #fff;
  color: var(--ink);
}
.text-link,
.internal-premium.page-services .service-card a {
  text-decoration: none !important;
}
.text-link:hover,
.text-link:focus-visible,
.internal-premium.page-services .service-card a:hover,
.internal-premium.page-services .service-card a:focus-visible {
  transform: translateY(-1px);
  color: #3f786b;
}
.internal-premium.page-services .service-card {
  cursor: pointer;
  border: 1px solid transparent;
}
.internal-premium.page-services .service-card:hover,
.internal-premium.page-services .service-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(111,155,143,.35);
  box-shadow: 0 18px 42px rgba(15,45,51,.11);
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible,
.phone-link:hover,
.phone-link:focus-visible {
  color: var(--ink);
}

@media (max-width: 800px) {
  .internal-premium.page-contact .contact-hero-grid { gap: 30px; }
  .internal-premium.page-contact .contact-hero-panel { padding: 26px 22px; }
  .internal-premium.page-contact .contact-hero-detail { grid-template-columns: 1fr; gap: 3px; }
  .internal-premium.page-contact .contact-hero-actions .button { width: 100%; }
}

@media (max-width: 680px) {
  .entrance-photo-label { left: 12px; right: 12px; bottom: 12px; padding: 11px 12px; font-size: 12px; }
  .internal-premium.page-location .map-card--google .map-entrance-note { top: 10px; left: 10px; }
  .internal-premium.page-contact .contact-info-card__actions .button { width: 100%; }
}


/* Make the full service tile behave like the visible clickable card. */
.internal-premium.page-services .service-card { position: relative; }
.internal-premium.page-services .service-card > a { position: relative; z-index: 2; }
.internal-premium.page-services .service-card > a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -500px;
}
.internal-premium.page-services .service-card { overflow: hidden; }

/* =========================================================
   CLIENT REVISION ROUND 3 — About, Team and New Patients
   ========================================================= */

/* ABOUT: consistent content-left / image-right storytelling. */
.internal-premium.page-about .inner-hero__grid,
.internal-premium.page-about .about-split {
  grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr);
  gap: clamp(42px,6vw,88px);
  align-items: center;
}
.internal-premium.page-about .about-hero__image img {
  object-position: center 34%;
}
.internal-premium.page-about .about-split {
  display: grid;
}
.internal-premium.page-about .about-split__copy {
  max-width: 680px;
}
.internal-premium.page-about .about-split__copy h2 {
  color: var(--ip);
  font-size: clamp(38px,4.2vw,62px);
  line-height: 1.03;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.internal-premium.page-about .about-split__copy .lead {
  color: var(--ip);
  font-size: clamp(19px,1.8vw,25px);
  line-height: 1.5;
}
.internal-premium.page-about .about-split__media {
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #e7efeb;
  box-shadow: 0 22px 58px rgba(15,45,51,.09);
}
.internal-premium.page-about .about-split__media img {
  display: block;
  width: 100%;
  height: clamp(430px,48vw,590px);
  object-fit: cover;
  object-position: center center;
}
.internal-premium.page-about .about-history .about-split__media img {
  object-position: center 48%;
}
.internal-premium.page-about .about-split__media--today img {
  object-position: center 46%;
}
.internal-premium.page-about .about-split__media figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: #536b70;
  font-size: 14px;
  background: #fff;
}

/* TEAM: preserve higher-resolution originals and improve secondary-label legibility. */
.internal-premium.page-team .profile-image img,
.internal-premium.page-team .team-person__image img {
  image-rendering: auto;
}
.internal-premium.page-team .profile-image img {
  object-position: center 36%;
}
.internal-premium.page-team .team-person__body .eyebrow {
  font-size: 14px !important;
  line-height: 1.45;
  letter-spacing: .01em;
}
.internal-premium.page-team .section-heading > p {
  font-size: 16px;
}

/* NEW PATIENTS: simpler first-visit flow, forms earlier and no divider under the intro. */
.internal-premium.page-new-patients .new-patient-steps__heading {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.internal-premium.page-new-patients .pathway-grid--first-visit {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
.internal-premium.page-new-patients .pathway-grid--first-visit .pathway-card {
  min-height: 280px;
}
.internal-premium.page-new-patients .inner-hero__image img {
  filter: brightness(1.05) saturate(.96);
  object-position: center 48% !important;
}
.internal-premium.page-new-patients .patient-forms {
  background: #fff;
}
.internal-premium.page-new-patients .patient-visual__media img {
  filter: brightness(1.035) saturate(.98);
}

@media (max-width: 900px) {
  .internal-premium.page-about .about-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .internal-premium.page-about .about-split__media img {
    height: auto;
    aspect-ratio: 16/10;
  }
  .internal-premium.page-new-patients .pathway-grid--first-visit {
    grid-template-columns: 1fr !important;
  }
  .internal-premium.page-new-patients .pathway-grid--first-visit .pathway-card {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .internal-premium.page-about .about-split__media {
    border-radius: 20px;
  }
  .internal-premium.page-about .about-split__media img {
    aspect-ratio: 4/3;
  }
  .internal-premium.page-team .team-person__body .eyebrow {
    font-size: 13.5px !important;
  }
}


/* =========================================================
   CLIENT REVISION ROUND 4 — persistent CTAs, lean homepage,
   resources polish, and mobile-performance refinements
   ========================================================= */

/* Desktop keeps the primary CTAs in the main header. On tablet/mobile,
   keep the same two actions visible in the utility row even when the menu
   is closed. This avoids adding another fixed bar or increasing header height. */
.header-utility__mobile-actions { display: none; }

@media (max-width: 1180px) {
  .header-utility__inner { justify-content: center; }
  .header-utility__hours,
  .header-utility__end { display: none !important; }
  .header-utility__mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 560px);
    height: 100%;
    gap: 8px;
    align-items: center;
  }
  .header-utility__quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 26px;
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .header-utility__quick:hover,
  .header-utility__quick:focus-visible {
    transform: translateY(-1px);
    background: rgba(255,255,255,.16);
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .header-utility__quick--emergency {
    border-color: rgba(255,255,255,.46);
    background: var(--emergency);
  }
  .header-utility__quick--emergency:hover,
  .header-utility__quick--emergency:focus-visible {
    background: var(--emergency-deep);
  }
}

@media (max-width: 480px) {
  .header-utility__mobile-actions { width: 100%; gap: 6px; }
  .header-utility__quick { padding-inline: 8px; font-size: 9.5px; }
}

/* Emergency CTA uses the same lift/pop system as the rest of the website,
   with a slightly stronger shadow so urgency remains visually obvious. */
.button--emergency {
  box-shadow: 0 9px 22px rgba(180,60,40,.3) !important;
}
.button--emergency:hover,
.button--emergency:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 15px 34px rgba(180,60,40,.36) !important;
}

/* Resources: cleaner image presentation and a consistent focal crop. */
.internal-premium.page-resources .inner-hero__image img {
  object-fit: cover;
  object-position: center 50%;
}
.internal-premium.page-resources .blog-card__media img {
  object-position: center center;
}

/* Keep motion subtle on devices/users that ask for less of it. */
@media (prefers-reduced-motion: reduce) {
  .button,
  .text-link,
  .service-card,
  .blog-card__media img,
  .photo-gallery__item img {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   CLIENT REVISION ROUND 5 — final hours clarity, visible dentist,
   image focal points, and lightweight internal pages
   ========================================================= */

/* Wide/laptop header hours: separate days, time, and appointment-only day
   instead of compressing the schedule into a difficult-to-scan sentence. */
.header-hours-structured {
  gap: 14px !important;
}
.header-hours-structured__group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.header-hours-structured__group + .header-hours-structured__group {
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.header-hours-structured__group strong {
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.header-hours-structured__group span {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 600;
}
.header-hours-structured__group--appointment span {
  color: #b9ecd9;
}
@media (min-width: 1181px) and (max-width: 1320px) {
  .header-hours-structured { gap: 9px !important; }
  .header-hours-structured__group + .header-hours-structured__group {
    padding-left: 9px;
  }
  .header-hours-structured__group strong { font-size: 9.5px; }
  .header-hours-structured__group span { font-size: 9px; }
}

/* Homepage: Dr. Tiwana is now visibly represented in the practice section,
   not only in the hero video's poster frame. */
body.page-home .about-media .portrait-card img {
  object-fit: cover;
  object-position: center 30%;
}

/* New Patients: preserve the brighter, welcoming crop on its own clinic image. */
.internal-premium.page-new-patients .inner-hero__image img {
  object-position: center 50% !important;
}
.internal-premium.page-continuing-education .inner-hero__image {
  border-radius: 26px !important;
  overflow: hidden;
}

@media (max-width: 680px) {
  .internal-premium.page-continuing-education .inner-hero__image {
    border-radius: 20px !important;
  }
}