/* About a Smile — shared responsive layer.
   Loaded by every page. Desktop (≥1024px) is untouched; breakpoints: 1023, 767, 430. */

html, body { overflow-x: hidden; }

/* Japanese typography: kinsoku line-breaking (no line starting with 、。」） or ending with 「（) */
html[lang="ja"] body { line-break: strict; word-break: normal; overflow-wrap: break-word; }
img, video { max-width: 100%; }

/* visible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #4A7A95; outline-offset: 2px; border-radius: 4px;
}

/* reduced motion: kill marquee, clouds, wiggles, wire, everything */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* announcement ribbon truncates to one line */
.site-ribbon { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .site-ribbon, .site-ribbon * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .site-ribbon { text-align: center; justify-content: center !important; flex-wrap: wrap; line-height: 1.5 !important; padding-top: 8px !important; padding-bottom: 8px !important; height: auto !important; min-height: 0 !important; font-size: 12.5px !important; letter-spacing: .02em !important; }
}

/* mobile bottom action bar (hidden ≥768px) */
.m-cta-bar { display: none; }

/* ============ TABLET ≤1023px ============ */
@media (max-width: 1023px) {
  /* display type scales on tablets too — hero grids leave narrow text columns */
  [style*="font-size: 78px"], [style*="font-size: 74px"] { font-size: clamp(40px, 5.5vw, 58px) !important; }
  [style*="font-size: 66px"], [style*="font-size: 64px"] { font-size: clamp(38px, 5vw, 52px) !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"] { font-size: clamp(34px, 4.5vw, 44px) !important; }
  [style*="font-size: 48px"], [style*="font-size: 46px"] { font-size: clamp(30px, 4vw, 40px) !important; }
  /* 4-col grids → 2 (mega menu, footer, milestone rows) */
  [style*="grid-template-columns: 1.1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* container side padding 28 → 20 */
  [style*="padding-left: 28px"] { padding-left: 20px !important; }
  [style*="padding-right: 28px"] { padding-right: 20px !important; }
}

/* ============ PHONE ≤767px ============ */
@media (max-width: 767px) {
  /* every inline grid collapses to one column… */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …except time-slot pickers (minmax(106px)), which go 3-up with large targets */
  [style*="minmax(106px"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="minmax(106px"] button { min-height: 48px; }

  /* collapsed grids keep desktop gaps otherwise — tighten vertical rhythm */
  [style*="gap: 72px"] { gap: 36px !important; }
  [style*="gap: 56px"], [style*="gap: 48px"] { gap: 28px !important; }
  [style*="gap: 40px"], [style*="gap: 36px"] { gap: 24px !important; }

  /* fixed-height portraits stretch tall at full width — switch to natural ratios */
  img[style*="height: 520px"], img[style*="height: 480px"] { height: auto !important; aspect-ratio: 4 / 4.4; }
  img[style*="height: 400px"], img[style*="height: 380px"], img[style*="height: 340px"] { height: auto !important; aspect-ratio: 4 / 3.6; }

  /* carousel wrapper shrink-wraps to 0 under justify-self:center — force full width */
  [style*="justify-self: center"][style*="position: relative"] { width: 100% !important; justify-self: stretch !important; }

  /* flex card rows (path cards) stack instead of squeezing side-by-side */
  [style*="display: flex"][style*="gap: 24px"][style*="flex-direction: row"],
  section [style*="display: flex"][style*="gap: 24px"]:not([style*="flex-direction: column"]):not([style*="align-items: center"]) { flex-direction: column !important; }
  [style*="gap: 24px"] > a[style*="min-height: 250px"] { min-height: 200px !important; transform: none !important; }

  /* header: keep logo + Book + Menu on one uncramped line */
  [style*="height: 92px"] { gap: 10px !important; }
  a[style*="padding: 13px 22px"] { font-size: 11px !important; letter-spacing: 0.08em !important; padding: 10px 14px !important; white-space: nowrap; }
  button[style*="padding: 12px 20px"] { font-size: 11px !important; letter-spacing: 0.08em !important; padding: 10px 14px !important; white-space: nowrap; }

  /* drawer type slightly smaller so sections don't feel stretched */
  aside a[style*="font-size: 23px"] { font-size: 20px !important; padding: 4px 0 !important; }

  /* oversize hero margins tighten */
  [style*="margin-bottom: 44px"] { margin-bottom: 30px !important; }

  /* flex rows of cards stack */
  [style*="display: flex"][style*="gap: 24px"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }

  /* side padding 28 → 16 */
  [style*="padding-left: 28px"] { padding-left: 16px !important; }
  [style*="padding-right: 28px"] { padding-right: 16px !important; }

  /* section vertical rhythm scales down */
  [style*="padding: 100px"], [style*="padding: 90px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 84px"], [style*="padding: 80px"] { padding-top: 48px !important; padding-bottom: 56px !important; }
  [style*="padding: 72px"] { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* display type scales fluidly (78 → ~42) */
  [style*="font-size: 78px"], [style*="font-size: 74px"], [style*="font-size: 66px"] { font-size: clamp(36px, 10.5vw, 46px) !important; }
  [style*="font-size: 64px"], [style*="font-size: 56px"] { font-size: clamp(32px, 9.5vw, 42px) !important; }
  [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: clamp(30px, 8.5vw, 38px) !important; }
  [style*="font-size: 46px"] { font-size: clamp(20px, 6.4vw, 30px) !important; } /* ortho wire line (nowrap) */
  [style*="font-size: 44px"] { font-size: clamp(28px, 8vw, 34px) !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: clamp(26px, 7.5vw, 32px) !important; }
  [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: clamp(24px, 7vw, 28px) !important; }
  [style*="font-size: 32px"], [style*="font-size: 31px"], [style*="font-size: 30px"] { font-size: clamp(23px, 6.5vw, 26px) !important; }
  [style*="font-size: 28px"] { font-size: clamp(21px, 6vw, 24px) !important; }

  /* JA headings that were pinned to one line may wrap on phones */
  h1[style*="white-space: nowrap"], h2[style*="white-space: nowrap"], [data-display][style*="white-space: nowrap"] { white-space: normal !important; }

  /* sticky doctor photos unstick on phones — they were pinning over the bio while scrolling */
  [style*="position: sticky"][style*="top: 130px"] { position: static !important; }

  /* mobile architecture: hero photo squared (no arch frame), full-width at the TOP
     of the screen, words centered below it */
  [style*="260px 260px 28px 28px"][style*="height: 560px"],
  [style*="260px 260px 24px 24px"][style*="height: 560px"] {
    width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 16px !important;
  }
  [style*="inset: 26px -26px -26px 26px"] { display: none !important; } /* offset arch backdrop */
  [style*="200px 200px 24px 24px"][style*="height: 520px"],
  [style*="200px 200px 24px 24px"][style*="height: 420px"] {
    width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    border-radius: 16px !important;
  }
  /* photo column jumps above the text column in hero grids */
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px 28px 28px"]) > div[style*="justify-self"],
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px 24px 24px"]) > div[style*="justify-self"],
  div[style*="grid-template-columns"]:has(> div [style*="200px 200px 24px 24px"]) > div[style*="justify-self"] { order: -1; width: 100%; }
  /* hero words centered under the photo */
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px 28px 28px"]) > div:not([style*="justify-self"]),
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px 24px 24px"]) > div:not([style*="justify-self"]),
  div[style*="grid-template-columns"]:has(> div [style*="200px 200px 24px 24px"]) > div:not([style*="justify-self"]) { text-align: center; }
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px"]) [style*="display: flex"][style*="gap: 14px"],
  div[style*="grid-template-columns"]:has(> div [style*="260px 260px"]) [style*="display: flex"][style*="gap: 16px"] { justify-content: center; }
  /* quieter mobile: centered section headers */
  section > div > h2:first-child, section > div > span:first-child + h2 { text-align: center; }
  section > div > span[style*="letter-spacing"]:first-child, section > div > h1[data-eyebrow]:first-child { display: block; text-align: center; }
  /* floating doctor badges over the carousel: hidden on phones (they hang off-canvas) */
  [style*="badge-bob"] { display: none !important; }

  /* header: hide the “virtual visits” chip, tighten the pills */
  .nav-hide-m { display: none !important; }

  /* header CTA pill hidden on phones — the bottom action bar carries it */
  .nav-cta-m { display: none !important; }

  /* mega menu becomes a full-screen drawer with stacked sections */
  aside[style*="max-height: 100vh"] { top: 0 !important; bottom: 0 !important; max-height: none !important; height: 100dvh; }
  [style*="padding: 150px 28px 48px"] { padding: 118px 18px 40px !important; }
  aside nav a { min-height: 44px; display: block; }

  /* touch targets & inputs */
  input, select, textarea { font-size: 16px !important; min-height: 44px; box-sizing: border-box; }
  a[style*="border-radius: 999px"], button[style*="border-radius: 999px"] { min-height: 44px; align-items: center; }
  form button[type="submit"], a[style*="letter-spacing: 0.12em"][style*="background: rgb(31, 55, 83)"] { width: 100%; justify-content: center; box-sizing: border-box; }

  /* video full-width */
  video { width: 100% !important; height: auto; }

  /* step-by-step service graphics (crowns, pulpotomy, sealants): keep labels legible —
     swipe sideways instead of shrinking the whole strip */
  div:has(> img[src*='-steps.svg']) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  img[src*='-steps.svg'] { min-width: 540px; }
  div:has(> img[src*='Sealants-process']) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  img[src*='Sealants-process'] { min-width: 540px; }

  /* intro curtain skipped on phones */
  .intro-curtain { display: none !important; }

  /* bottom action bar */
  .m-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 1px; background: #E2E8EE; border-top: 1px solid #E2E8EE;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-cta-bar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 54px; font-family: 'Figtree', 'Noto Sans JP', sans-serif;
    font-size: 14px; font-weight: 600; text-decoration: none;
    background: #FFFFFF; color: #1F3753;
  }
  .m-cta-bar a.m-cta-book { background: #1F3753; color: #FAF6EF; }
  body { padding-bottom: calc(55px + env(safe-area-inset-bottom)); }
  /* keep the drawer's phone strip clear of the action bar */
  aside[style*="max-height: 100vh"] { padding-bottom: calc(55px + env(safe-area-inset-bottom)); box-sizing: border-box; }
}

/* ============ DS MOBILE LAYER ≤767px — About A Smile Design System grammar on phones ============ */
@media (max-width: 767px) {
  /* one quiet type family; tight display tracking; never italic (incl. Japanese) */
  body, body * { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Noto Sans JP', 'Helvetica Neue', sans-serif !important; font-style: normal !important; }
  h1:not([data-eyebrow]), h2, h3, [data-display] { font-weight: 600 !important; letter-spacing: -0.28px !important; }
  h1:not([data-eyebrow]), [data-display] { line-height: 1.07 !important; }
  h1 em, h2 em, [data-display] em { color: inherit !important; background: none !important; padding: 0 !important; }

  /* museum-quiet surfaces: no ornament, no decorative absolutes */
  img[src*='cloud-decor'] { display: none !important; }
  .sticker-band { display: none !important; }
  section [aria-hidden='true'][style*='position: absolute'],
  [style*='radial-gradient'] { display: none !important; }
  svg[style*='position: absolute'] { display: none !important; }

  /* flat color instead of gradients */
  [style*='background: linear-gradient(180deg, rgb(220, 238, 249)'] { background: #DCEEF9 !important; }
  [style*='background: linear-gradient(135deg, rgb(31, 55, 83)'],
  [style*='background: linear-gradient(90deg, rgb(31, 55, 83)'] { background: #1F3753 !important; }
  [style*='background: linear-gradient(135deg, rgb(191, 224, 244)'] { background: #BFE0F4 !important; }

  /* cards: hairline, 18px radius, no shadows anywhere on chrome */
  [style*='box-shadow'] { box-shadow: none !important; }
  [style*='border-radius: 22px'], [style*='border-radius: 24px'],
  [style*='border-radius: 26px'], [style*='border-radius: 28px'] { border-radius: 18px !important; }
  [style*='transform: rotate('] { transform: none !important; }

  /* the one micro-interaction: press = scale(.96) */
  a:active, button:active { transform: scale(0.96) !important; transition: transform 0.1s ease !important; }

  /* tiles: compact 48px rhythm, edge-to-edge feel */
  [style*='padding: 100px'], [style*='padding: 90px'], [style*='padding: 84px'], [style*='padding: 80px'] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* frosted sticky action bar */
  .m-cta-bar { background: rgba(245, 249, 253, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); gap: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .m-cta-bar a { background: transparent; }
  .m-cta-bar a.m-cta-book { background: #1F3753; }
}

/* ============ SMALL PHONE ≤430px ============ */
@media (max-width: 430px) {
  [style*="padding-left: 28px"] { padding-left: 14px !important; }
  [style*="padding-right: 28px"] { padding-right: 14px !important; }
  [style*="height: 92px"] { height: 72px !important; } /* header bar */
  [style*="width: 66px"][style*="height: 66px"] { width: 52px !important; height: 52px !important; } /* logo */
}


/* ============ FULL-BLEED HEROES (Meta-inspired layout) ============ */
[data-hero="photo"] { min-height: 440px; display: flex; align-items: center; }
[data-hero="photo"] > div:not([data-hero-shade]) { position: relative; z-index: 1; width: 100%; }
[data-hero="photo"] h1, [data-hero="photo"] h1 em, [data-hero="photo"] h1 span, [data-hero="photo"] p, [data-hero="photo"] [data-display] em { color: #FFFFFF !important; }
[data-hero="photo"] span[style*="letter-spacing"], [data-hero="photo"] h1[data-eyebrow], [data-hero="photo"] nav, [data-hero="photo"] nav span { color: #F5E3C8 !important; }
[data-hero="photo"] nav a { color: #FFFFFF !important; }
[data-hero="photo"] img[src*="cloud-decor"] { filter: brightness(6); opacity: .07 !important; z-index: 1; }
@media (max-width: 767px) {
  [data-hero="photo"] { min-height: 360px; }
  [data-hero="video"] { height: 78vh !important; min-height: 500px !important; }
  [data-hero="video"] [data-hero-shade] { background: linear-gradient(180deg, rgba(20,38,60,.35) 0%, rgba(20,38,60,.82) 70%) !important; }
  [data-hero="video"] > div:not([data-hero-shade]) { justify-content: flex-end !important; padding-bottom: 88px !important; text-align: center; align-items: center; }
  [data-hero="video"] > button { left: 50%; right: auto !important; transform: translateX(-50%); bottom: 24px !important; }
}

/* ============ SCROLL REVEAL (site-wide, CSS-only, respects reduced motion) ============ */
@keyframes aas-reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section:not([data-hero]):not(.sticker-band) > div:not([aria-hidden]) {
      animation: aas-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@media (max-width: 767px) {
  [data-hero-split] { flex-direction: column; align-items: stretch; }
  [data-hero-split] > img[data-hero-portrait] { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-position: center 10% !important; order: -1; }
  [data-hero-split] > [data-hero-shade] { display: none; }
  [data-hero-split] > img[data-hero-portrait] { -webkit-mask-image: none !important; mask-image: none !important; }
  [data-hero-split] > div:not([data-hero-shade]) > div { max-width: none !important; }
}

/* ============ MOBILE SWIPE ROWS (service card lists) ============ */
@media (max-width: 767px) {
  [data-swipe-m] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  [data-swipe-m]::-webkit-scrollbar { display: none; }
  [data-swipe-m] > * { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ============ TOP BAR CONDENSES ON SCROLL (CSS-only) ============ */
@keyframes aas-condense { to { background: rgba(255,255,255,.80); box-shadow: 0 10px 30px rgba(31,55,83,.10); } }
@supports (animation-timeline: scroll()) {
  header[style*="backdrop-filter"] { animation: aas-condense linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}

/* ============ SIGNATURE CLOUDS drifting through the header bar ============ */
.hdr-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hdr-clouds img { position: absolute; left: 0; height: auto; opacity: .55; animation-name: hdr-drift, hdr-bob; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; will-change: translate, transform; }
@keyframes hdr-drift { from { translate: -200px 0; } to { translate: calc(100vw + 40px) 0; } }
@keyframes hdr-bob { from { transform: translateY(-4px) scale(1); } to { transform: translateY(5px) scale(1.04); } }
.hdr-clouds ~ div { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hdr-clouds img { animation: none; } .hdr-clouds img:nth-child(1) { left: 22%; } .hdr-clouds img:nth-child(2) { left: 48%; } .hdr-clouds img:nth-child(3) { left: 68%; } .hdr-clouds img:nth-child(4) { left: 86%; } }


/* ============ PHONE POLISH PASS ============ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  /* readable minimum for labels, badges, fine print */
  [style*="font-size: 10px"], [style*="font-size: 10.5px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"] { font-size: 12px !important; }
  /* fixed-size portraits and photos scale to the screen */
  img[style*="width: 420px"][style*="height: 540px"] { width: 100% !important; max-width: 340px !important; height: auto !important; aspect-ratio: 7 / 9; margin: 0 auto; }
  img[style*="height: 520px"] { height: auto !important; aspect-ratio: 12 / 13; }
  /* one-line display headings may wrap on phones (JA kinsoku still applies) */
  h1[style*="white-space: nowrap"], h2[style*="white-space: nowrap"], h3[style*="white-space: nowrap"], p[style*="white-space: nowrap"][style*="font-size: 3"] { white-space: normal !important; }
  /* comfortable tap targets inside menus and lists */
  .nav-drop-item, aside a { min-height: 44px; display: flex; align-items: center; }
  footer a { min-height: 44px; display: inline-flex; align-items: center; }
  /* body copy line length + rhythm */
  p { text-wrap: pretty; }
  section p[style*="font-size: 16"], section p[style*="font-size: 17"] { line-height: 1.7; }
  /* tables (JA hours) never overflow */
  table { width: 100%; table-layout: fixed; }
  td, th { font-size: 13px; }
  /* full-width primary buttons, consistent height */
  section a[style*="border-radius: 999px"][style*="background: rgb(31, 55, 83)"], section button[type="submit"] { min-height: 48px; }
  /* inputs never trigger iOS zoom */
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 767px) and (orientation: landscape) {
  [data-hero="video"] { height: 100vh !important; min-height: 320px !important; }
  [data-hero="photo"] { min-height: 280px; }
}

/* ============ PHONE HERO: video on top, uncropped; text centered below ============ */
@media (max-width: 767px) {
  [data-hero="video"] { height: auto !important; min-height: 0 !important; max-height: none !important; display: flex; flex-direction: column; background: #1F3753 !important; }
  [data-hero="video"] > [data-bv-frame] { position: relative !important; inset: auto !important; width: 100%; aspect-ratio: 16 / 9; flex: none; }
  [data-hero="video"] [data-bv-frame] > video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block; }
  [data-hero="video"] [data-hero-shade] { display: none !important; }
  [data-hero="video"] > div:not([data-hero-shade]) { height: auto !important; padding: 30px 20px 36px !important; justify-content: flex-start !important; align-items: center !important; text-align: center !important; }
  [data-hero="video"] [data-eyebrow] { letter-spacing: .12em !important; line-height: 1.6 !important; font-size: 11.5px !important; max-width: 30ch; margin: 0 auto 16px !important; text-align: center; }
  [data-hero="video"] [data-display] { margin-left: auto !important; margin-right: auto !important; text-align: center; }
  [data-hero="video"] p { margin-left: auto !important; margin-right: auto !important; text-align: center; }
  [data-hero="video"] > div:not([data-hero-shade]) > div { justify-content: center !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  [data-hero="video"] > div:not([data-hero-shade]) > div > a { justify-content: center; width: 100%; box-sizing: border-box; }
  /* photo banners: center text, let JA headings wrap */
  [data-hero="photo"] h1, [data-hero="photo"] h2, [data-hero="photo"] p { text-align: center; margin-left: auto !important; margin-right: auto !important; white-space: normal !important; overflow-wrap: anywhere; }
  [data-hero="photo"] > div { padding-left: 20px !important; padding-right: 20px !important; }
  html[lang="ja"] [data-display], html[lang="ja"] h1, html[lang="ja"] h2 { white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
  html[lang="ja"] [data-eyebrow] { letter-spacing: .06em !important; }
}

/* ============ PHONE PHOTO BANNERS: photo on top at a wide ratio, text below ============ */
@media (max-width: 767px) {
  [data-hero="photo"] { background-size: 0 0 !important; background-repeat: no-repeat !important; background-color: #1F3753 !important; min-height: 0 !important; padding-top: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  [data-hero="photo"]::before { content: ""; display: block; flex: none; width: 100%; aspect-ratio: 16 / 10; background-image: inherit; background-size: cover; background-position: inherit; background-repeat: no-repeat; }
  [data-hero="photo"] [data-hero-shade], [data-hero="photo"] img[src*="cloud-decor"] { display: none !important; }
  [data-hero="photo"] > div:not([data-hero-shade]) { padding-top: 28px !important; padding-bottom: 36px !important; box-sizing: border-box !important; width: 100% !important; }
}

/* ============ PHONE SPLIT HEROES (doctor portrait) + no clipped text ============ */
@media (max-width: 767px) {
  [data-hero-split]::before { display: none !important; }
  [data-hero-split] > img[data-hero-portrait] { position: relative !important; inset: auto !important; order: -1; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 15% !important; display: block; }
  [data-hero="photo"] > div:not([data-hero-shade]) { grid-template-columns: minmax(0, 1fr) !important; max-width: 100% !important; }
  [data-hero="photo"] span, [data-hero="video"] span[style*="letter-spacing"] { white-space: normal !important; letter-spacing: .12em !important; overflow-wrap: anywhere; line-height: 1.6; display: inline-block; max-width: 100%; }
  section > div { max-width: 100%; box-sizing: border-box; }
  section h1, section h2, section p { overflow-wrap: break-word; }
}

/* ============ PHONE FORMS: centered, never wider than the screen ============ */
input, select, textarea { box-sizing: border-box; max-width: 100%; }
form label { min-width: 0; }
@media (max-width: 767px) {
  #book > div { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; padding: 0 16px !important; text-align: center; }
  #book > div > div { justify-items: center; }
  #book > div > div > div[style*="flex-direction: column"] { align-items: center; }
  #book form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding: 24px 18px !important; margin: 0 auto; text-align: left; }
  #book form > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  #book form input, #book form select, #book form textarea { width: 100% !important; min-width: 0; }
  #book form button { width: 100%; }
}

/* ============ CALL BUTTON: choose office ============ */
.m-call { flex: 1; position: relative; display: flex; }
.m-call > summary { list-style: none; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; background: transparent; color: #1F3753; font-family: 'Figtree', 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; }
.m-call[open] > summary { background: #EAF3F8; }
.m-cta-bar .m-call-menu a { flex: none; min-height: 44px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 2px; background: #FFFFFF; }
.m-call > summary::-webkit-details-marker { display: none; }
.m-call > summary:focus-visible { outline: 2px solid #4A7A95; outline-offset: -2px; }
.m-call-menu { position: absolute; left: 10px; bottom: calc(100% + 10px); width: min(280px, calc(100vw - 20px)); background: #FFFFFF; border: 1px solid #E2E8EE; border-radius: 16px; box-shadow: 0 18px 44px rgba(31,55,83,.2); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.m-call-menu a:active { background: #EAF3F8; }


/* call menu anchors to the full-width bar so it never runs off-screen */
.m-cta-bar .m-call { position: static !important; }

/* ============ OUR DOCTORS — phone layout: photo on top, bio below, nothing sticky or overlapping ============ */
@media (max-width: 767px) {
  #dr-schwab, #dr-cohen { padding: 0 0 48px !important; }
  #dr-schwab > div, #dr-cohen > div { display: flex !important; flex-direction: column !important; gap: 24px !important; padding: 0 !important; max-width: 100% !important; }
  #dr-schwab > div > div, #dr-cohen > div > div { position: relative !important; top: auto !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; margin: 0 !important; }
  #dr-schwab > div > div:has(> img), #dr-cohen > div > div:has(> img) { order: -1; }
  #dr-schwab > div > div > div[style*="position:absolute"], #dr-cohen > div > div > div[style*="position:absolute"],
  #dr-schwab > div > div > div[style*="position: absolute"], #dr-cohen > div > div > div[style*="position: absolute"] { display: none !important; }
  #dr-schwab img[style*="height:540px"], #dr-cohen img[style*="height:540px"],
  #dr-schwab img[style*="height: 540px"], #dr-cohen img[style*="height: 540px"] { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover !important; object-position: center 15% !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
  #dr-schwab > div > div:not(:has(> img)), #dr-cohen > div > div:not(:has(> img)) { padding: 0 20px !important; box-sizing: border-box; text-align: center; }
  #dr-schwab h2, #dr-cohen h2 { overflow-wrap: anywhere; }
  #dr-schwab ul, #dr-cohen ul, #dr-schwab ol, #dr-cohen ol { text-align: left; }
  [data-hero="photo"]::before { height: 62vw; aspect-ratio: auto; }
}