/* Mobile only. Desktop styles, scripts, content and desktop-emulation mode are unchanged. */
@media (max-width: 820px) {
  html:not(.mobile-desktop-mode) { scroll-padding-top: 80px; scroll-padding-bottom: 88px; }
  html:not(.mobile-desktop-mode) body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html:not(.mobile-desktop-mode) :is(.section-shell,.map-grid.section-shell,.footer-grid,.footer-bottom,.client-footer .footer-heading,.client-footer .footer-invitation,.client-footer .footer-closing-line,.client-footer .footer-patient-guide) {
    width: min(680px,calc(100% - 32px));
    max-width: 100%;
    margin-inline: auto;
  }
  html:not(.mobile-desktop-mode) :is(.section-heading,.split-heading,.credentials-heading) { gap: 12px; margin-bottom: 18px; }
  html:not(.mobile-desktop-mode) :is(.section-heading,.split-heading,.credentials-heading,.home-specialists-copy,.home-visit-copy,.clinic-contact-block,.approach-heading) h2 {
    font-size: clamp(26px,6.8vw,34px);
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  html:not(.mobile-desktop-mode) :is(.section-heading > p,.split-heading > p,.credentials-heading > p,.home-specialists-copy > p,.home-visit-copy > p,.clinic-contact-block > p,.contact-banner p) {
    max-width: 100%; font-size: 15px; line-height: 1.6; margin-bottom: 0;
  }
  html:not(.mobile-desktop-mode) :is(.home-specialists,.home-credentials,.services-section,.doctors-section,.values-section,.clinic-gallery,.home-contact,.home-contact-match,.map-section,.full-reviews,.treatment-bento-section,.results-section,.faq-section,.treatment-cta,.legal-section,.contact-booking-panel) { padding-block: 30px; }
  html:not(.mobile-desktop-mode) :is(.primary-button,.secondary-button,.white-button,.outline-light-button,.link-button,.doctor-cta,.doctor-info-link,.map-below-link) {
    min-height: 44px; padding: 11px 14px; font-size: 14px; line-height: 1.4;
  }

  /* Compact navigation; the drawer scrolls instead of squeezing its touch targets. */
  html:not(.mobile-desktop-mode) :is(.site-header,.nav-shell) { height: 64px; }
  html:not(.mobile-desktop-mode) .nav-shell { width: calc(100% - 28px); gap: 10px; }
  html:not(.mobile-desktop-mode) .site-header .brand { min-width: 0; gap: 9px; margin-right: auto; }
  html:not(.mobile-desktop-mode) .site-header .brand img { width: 42px; height: 42px; flex-basis: 42px; }
  html:not(.mobile-desktop-mode) .site-header .brand strong { font-size: 16px; line-height: 1.2; }
  html:not(.mobile-desktop-mode) .site-header .brand small { font-size: 9px; letter-spacing: .17em; margin-top: 4px; }
  html:not(.mobile-desktop-mode) .site-header .menu-trigger { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .dental-ambient { top: 64px; }
  html:not(.mobile-desktop-mode) .static-mobile-menu { padding: 8px; padding-top: max(8px,env(safe-area-inset-top)); padding-bottom: max(8px,env(safe-area-inset-bottom)); align-items: flex-start; }
  html:not(.mobile-desktop-mode) .static-mobile-menu-panel {
    width: min(380px,100%); height: auto;
    max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  html:not(.mobile-desktop-mode) .static-menu-head { min-height: 64px; padding: 10px 14px; }
  html:not(.mobile-desktop-mode) .static-menu-close { width: 44px; height: 44px; flex: 0 0 44px; }
  html:not(.mobile-desktop-mode) .static-menu-content { display: block; flex: 1 1 auto; min-height: 0; padding: 12px 14px 16px; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-links { height: auto; grid-template-rows: none; grid-auto-rows: minmax(46px,auto); padding: 4px; gap: 3px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-links a { min-height: 46px; padding: 10px 12px; font-size: 17px; }
  html:not(.mobile-desktop-mode) .static-menu-content :is(.static-menu-actions,.static-menu-theme,.static-menu-connect) { margin-top: 12px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-actions a { min-height: 46px; padding: 10px 8px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-actions a strong { font-size: 13px; line-height: 1.35; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-theme-switch button { min-height: 44px; font-size: 13px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-socials a { min-height: 52px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-socials small { font-size: 11px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-hours { margin-top: 12px; padding-top: 12px; font-size: 12px; line-height: 1.5; }

  /* One consistent reading column, with all supplied introductory copy retained. */
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-grid { display: flex; flex-direction: column; width: min(680px,calc(100% - 32px)); padding-block: 12px 22px; gap: 0; min-height: 0; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy { display: contents; text-align: left; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > * { width: 100%; max-width: 100%; margin-inline: 0; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-section .hero-copy > .eyebrow { justify-content: flex-start; font-size: 12px !important; line-height: 16px; margin-bottom: 10px; letter-spacing: .065em; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > h1 { font-size: clamp(44px,12.5vw,60px); line-height: 1.02; margin: 0 0 10px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > .hero-tagline { font-size: 15px; line-height: 1.45; margin: 0 0 12px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > .hero-qualification { padding: 10px 12px; margin: 0 0 10px; gap: 10px; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .hero-qualification > span { font-size: 23px; }
  html:not(.mobile-desktop-mode) .hero-qualification strong { font-size: 14px; line-height: 1.4; }
  html:not(.mobile-desktop-mode) .hero-qualification div > span { font-size: 11px; line-height: 1.5; margin-top: 3px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > .hero-specialty { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 0 0 12px; }
  html:not(.mobile-desktop-mode) .hero-specialty > span { justify-content: center; min-height: 30px; padding: 6px; font-size: 10.5px; line-height: 1.25; white-space: normal; border-radius: 8px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > .hero-introduction { width: 100%; max-width: none; text-align: left; margin: 0 0 16px; }
  html:not(.mobile-desktop-mode) .hero-introduction h2 { font-size: clamp(23px,6.2vw,29px); line-height: 1.22; margin-bottom: 8px; }
  html:not(.mobile-desktop-mode) .hero-introduction p { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-visual { width: 100%; max-width: none; min-height: 0; padding: 0; margin: 0 0 12px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-photo-frame { position: relative; inset: auto; width: 100%; height: clamp(250px,78vw,380px); min-height: 0; aspect-ratio: auto; border-radius: 18px; }
  html:not(.mobile-desktop-mode) .hero-photo-frame > img { object-position: center 38%; }
  html:not(.mobile-desktop-mode) .hero-photo-details { gap: 6px; margin-top: 6px; }
  html:not(.mobile-desktop-mode) .hero-photo-details :is(.hero-location-card,.hero-hours-badge) { padding: 9px 10px; border-radius: 10px; }
  html:not(.mobile-desktop-mode) .hero-photo-details .hero-location-card strong { font-size: 14px; line-height: 1.4; }
  html:not(.mobile-desktop-mode) .hero-photo-details .hero-location-card small { font-size: 11px; line-height: 1.5; }
  html:not(.mobile-desktop-mode) .hero-photo-details .hero-hours-badge { animation: none; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > .hero-experience { width: 100%; justify-content: center; padding: 9px 12px; margin: 0; gap: 8px; font-size: 13px; line-height: 1.4; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .hero-experience > b { font-size: 26px; }

  /* Specialist cards use their available width instead of tall, empty columns. */
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-credentials { padding-block: 26px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .credentials-heading { gap: 12px; margin-bottom: 16px; padding: 0; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .credentials-heading > p { margin: 0; font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) :is(.mobile-doctor-tabs,.about-doctor-tabs:not([hidden])) { gap: 5px; padding: 5px; }
  html:not(.mobile-desktop-mode) :is(.mobile-doctor-tabs,.about-doctor-tabs) button { min-height: 46px; padding: 9px 7px; font-size: 13px; line-height: 1.3; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-profile { height: clamp(240px,74vw,340px); min-height: 0; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-copy,
  html:not(.mobile-desktop-mode) body[data-page="about"] .doctors-section .doctor-grid .doctor-card-body { padding: 18px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .client-doctor-name,
  html:not(.mobile-desktop-mode) body[data-page="about"] .doctor-card-body .client-doctor-name { min-height: 0; font-size: clamp(22px,5.8vw,27px); line-height: 1.25; margin-bottom: 10px; }
  html:not(.mobile-desktop-mode) .doctor-degree-badge { gap: 8px; padding: 8px 10px; margin-bottom: 12px; border-radius: 9px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .doctor-degree-badge { margin-bottom: 12px; }
  html:not(.mobile-desktop-mode) .doctor-degree-badge > span { font-size: 21px; }
  html:not(.mobile-desktop-mode) .doctor-degree-badge strong { font-size: 13px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications :is(.doctor-title,.doctor-description),
  html:not(.mobile-desktop-mode) body[data-page="about"] .doctor-card-body :is(.doctor-title,.doctor-description) { min-height: 0; font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-copy h4 { padding-top: 16px; font-size: 17px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-copy ul { gap: 7px; margin: 12px 0 18px; padding-left: 18px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-copy li { font-size: 14px; line-height: 1.55; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .experience-mark { inset: auto auto 12px 12px; padding: 8px 10px; font-size: 12px; }
  html:not(.mobile-desktop-mode) .doctor-portrait { height: clamp(260px,82vw,400px); min-height: 0; aspect-ratio: auto; }
  html:not(.mobile-desktop-mode) .doctor-portrait img { object-position: center 22%; }
  html:not(.mobile-desktop-mode) #dr-pratheepa-ranjith .doctor-portrait img { object-position: center 15%; }
  html:not(.mobile-desktop-mode) .doctor-card-body .expertise-box { margin-bottom: 16px; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .doctor-card-body .expertise-box > h4 { padding: 14px; font-size: 17px; }
  html:not(.mobile-desktop-mode) .doctor-card-body .expertise-box .doctor-expertise-content { padding: 14px; }
  html:not(.mobile-desktop-mode) .doctor-card-body .expertise-box :is(li,h5) { font-size: 14px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .doctor-card-body .expertise-box .expertise-groups { gap: 14px; }
  html:not(.mobile-desktop-mode) .doctor-grid .doctor-cta { min-height: 46px; margin-top: 0; }

  /* Treatment rails retain the existing controls on the right. */
  html:not(.mobile-desktop-mode) body[data-page="home"] .services-section { padding-block: 24px 30px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .services-section > .section-shell > .section-heading:first-child { margin-bottom: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .explore-treatment-options { margin-bottom: 20px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-heading { padding-top: 20px; margin-bottom: 16px; }
  html:not(.mobile-desktop-mode) .treatment-carousel { --carousel-control: 44px; --carousel-gap: 8px; }
  html:not(.mobile-desktop-mode) .treatment-carousel-stage { gap: 8px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .treatment-carousel-caption { margin-bottom: 10px; gap: 8px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .treatment-carousel-caption p { padding: 7px 9px; font-size: 12px; gap: 7px; }
  html:not(.mobile-desktop-mode) .treatment-carousel-caption [data-swipe-status] { font-size: 12px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-media { height: clamp(152px,45vw,205px); min-height: 0; flex-basis: clamp(152px,45vw,205px); }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-copy { padding: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-copy h3 { font-size: clamp(22px,5.8vw,27px); line-height: 1.2; margin: 8px 0 10px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-copy :is(p,li) { font-size: 14px; line-height: 1.55; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-copy ul { padding-top: 12px; gap: 6px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-actions { margin-top: 14px; }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-page-carousel .treatment-bento-scroll { padding-bottom: 10px; }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-scroll .treatment-bento-card { grid-template-rows: clamp(152px,45vw,205px) auto; }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-scroll .treatment-bento-card > img { height: clamp(152px,45vw,205px); }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-copy { padding: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-copy h2 { font-size: clamp(23px,6vw,29px); line-height: 1.2; margin-block: 8px 10px; }
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-copy :is(p,li) { font-size: 14px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) :is(.home-treatment-more,.treatment-cta-card,.contact-banner,.booking-landing) { padding: 20px; border-radius: 16px; }
  html:not(.mobile-desktop-mode) :is(.home-treatment-more,.treatment-cta-card,.contact-banner,.booking-landing) :is(h2,h3) { font-size: 27px; line-height: 1.2; }
  html:not(.mobile-desktop-mode) .home-treatment-more { margin-top: 16px; }

  /* Other page introductions and photographs stay within the same column. */
  html:not(.mobile-desktop-mode) main > .inner-hero { padding-block: 24px; }
  html:not(.mobile-desktop-mode) .inner-hero h1 { font-size: clamp(32px,8.8vw,44px); line-height: 1.12; margin-block: 10px 12px; }
  html:not(.mobile-desktop-mode) .inner-hero :is(p,.about-intro) { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .about-hero { padding-block: 20px !important; }
  html:not(.mobile-desktop-mode) .about-hero .inner-hero-grid { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 16px; border-radius: 16px; }
  html:not(.mobile-desktop-mode) .about-kicker { margin-block: 0 10px; }
  html:not(.mobile-desktop-mode) .about-hero-actions { gap: 8px; margin-top: 16px; }
  html:not(.mobile-desktop-mode) .about-hero-actions a { font-size: 13px; min-height: 44px; flex: 1 1 120px; }
  html:not(.mobile-desktop-mode) :is(.home-specialists-grid,.story-grid,.gallery-stack,.home-visit-grid,.map-grid) { gap: 20px; }
  html:not(.mobile-desktop-mode) :is(.home-specialists-portrait,.inner-hero-photo,.gallery-image,.story-photo) { width: 100%; max-width: 100%; min-height: 0; height: clamp(220px,68vw,360px); max-height: none; aspect-ratio: auto; margin-inline: 0; border-radius: 16px; }
  html:not(.mobile-desktop-mode) :is(.home-specialists-portrait,.inner-hero-photo,.gallery-image,.story-photo) img { min-height: 0; width: 100%; height: 100%; object-fit: cover; }
  html:not(.mobile-desktop-mode) .home-doctor-list { gap: 10px; margin-block: 16px; }
  html:not(.mobile-desktop-mode) .home-doctor-list article { padding: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .story-copy { padding-block: 22px; }
  html:not(.mobile-desktop-mode) .story-copy h2 { font-size: 29px; line-height: 1.2; }
  html:not(.mobile-desktop-mode) .story-copy :is(p,li) { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) body[data-page="about"] .values-section .values-grid { gap: 12px; }
  html:not(.mobile-desktop-mode) body[data-page="about"] .values-section .values-grid article { padding: 20px; }
  html:not(.mobile-desktop-mode) .values-grid h3 { font-size: 22px; margin-bottom: 8px; }
  html:not(.mobile-desktop-mode) .values-grid p { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) :is(.results-layout,.faq-layout) { grid-template-columns: minmax(0,1fr); gap: 18px; }
  html:not(.mobile-desktop-mode) :is(.results-layout,.faq-intro) h2 { font-size: 28px; line-height: 1.2; }
  html:not(.mobile-desktop-mode) .results-policy-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html:not(.mobile-desktop-mode) .results-policy-grid article { padding: 18px; }
  html:not(.mobile-desktop-mode) .faq-list details { padding: 16px; }
  html:not(.mobile-desktop-mode) .faq-list :is(p,summary) { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .faq-list summary { min-height: 44px; }

  /* Reviews and practical details use compact cards with readable text. */
  html:not(.mobile-desktop-mode) section.reviews-home { padding-block: 26px; }
  html:not(.mobile-desktop-mode) .reviews-home .reviews-intro { gap: 10px; margin-bottom: 14px; }
  html:not(.mobile-desktop-mode) .reviews-home .reviews-intro :is(h2,.google-reviews-title) { font-size: clamp(25px,6.6vw,32px); line-height: 1.2; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .reviews-carousel { gap: 8px; }
  html:not(.mobile-desktop-mode) .reviews-home .review-card.compact { min-height: 280px; padding: 18px; border-radius: 16px; }
  html:not(.mobile-desktop-mode) .reviews-home .review-card.compact blockquote { font-size: 16px; line-height: 1.55; }
  html:not(.mobile-desktop-mode) .reviews-home .review-card .review-author { padding-top: 14px; }
  html:not(.mobile-desktop-mode) .reviews-home :is(.reviews-intro,.review-card,.reviews-actions) { animation: none; }
  html:not(.mobile-desktop-mode) .reviews-home .reviews-actions { gap: 8px; margin-top: 12px; }
  html:not(.mobile-desktop-mode) .reviews-home .reviews-external-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: 100%; }
  html:not(.mobile-desktop-mode) .reviews-home .reviews-external-actions a { min-height: 44px; padding: 10px 8px; font-size: 12px; }
  html:not(.mobile-desktop-mode) .full-reviews .reviews-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  html:not(.mobile-desktop-mode) .reviews-page-head h1 { font-size: clamp(32px,8.8vw,44px); line-height: 1.12; margin-block: 12px; }
  html:not(.mobile-desktop-mode) .reviews-page-head p { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .full-reviews .review-card { padding: 20px; }
  html:not(.mobile-desktop-mode) .full-reviews .review-card blockquote { font-size: 17px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .review-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  html:not(.mobile-desktop-mode) .review-filters button { min-height: 44px; padding: 9px 13px; font-size: 13px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-clinic-info { padding-block: 20px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-clinic-info .trust-grid { width: min(680px,calc(100% - 32px)); gap: 10px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-clinic-info .trust-grid > div { min-height: 82px; padding: 16px; gap: 12px; border-radius: 12px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-clinic-info .trust-grid strong { font-size: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-clinic-info .trust-grid small { font-size: 13px; line-height: 1.5; }

  /* Scale the existing tooth map naturally; avoid a fixed 560–650px phone map. */
  html:not(.mobile-desktop-mode) :is(.map-grid .map-frame.tooth-map-frame,.home-contact-match .home-map-frame.tooth-map-frame) { width: 100%; max-width: 420px; height: auto; min-height: 0; aspect-ratio: 10 / 11; flex-basis: auto; margin-inline: auto; }
  html:not(.mobile-desktop-mode) :is(.map-grid,.home-contact-match) .tooth-map-frame .map-canvas iframe { min-height: 0; width: 100%; height: 100%; }
  html:not(.mobile-desktop-mode) .map-column .map-actions { gap: 8px; margin-top: 12px; }
  html:not(.mobile-desktop-mode) .map-column .map-actions .map-below-link { min-height: 44px; padding: 10px 8px; font-size: 12px; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .visit-hours { padding: 16px; margin-block: 16px; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .visit-hours strong { font-size: 16px; line-height: 1.4; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .visit-hours :is(span,small) { font-size: 14px; line-height: 1.5; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .contact-channel-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .contact-channel-grid a { min-height: 72px; padding: 14px 16px; gap: 12px; border-radius: 12px; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .contact-channel-grid a :is(strong,small,span) { overflow-wrap: anywhere; }
  html:not(.mobile-desktop-mode) .clinic-contact-block .visit-book { margin-top: 14px; width: 100%; }

  /* The booking form keeps native 16px inputs and a stationary action row. */
  html:not(.mobile-desktop-mode) .booking-page { padding-block: 24px 30px; }
  html:not(.mobile-desktop-mode) .booking-intro { margin-bottom: 20px; }
  html:not(.mobile-desktop-mode) .booking-intro h1 { font-size: clamp(33px,9vw,44px); margin-block: 10px; }
  html:not(.mobile-desktop-mode) .booking-intro > p { font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .booking-trust { gap: 6px; margin-top: 14px; }
  html:not(.mobile-desktop-mode) .booking-trust span { font-size: 11px; padding: 6px 8px; }
  html:not(.mobile-desktop-mode) .booking-dialog { width: calc(100% - 16px); height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog-head { min-height: 54px; padding: 7px 12px; gap: 10px; }
  html:not(.mobile-desktop-mode) .booking-dialog-head h2 { font-size: 21px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-guide { padding: 10px 12px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-progress { gap: 4px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-progress li { padding: 6px 3px; font-size: 10px; line-height: 1.3; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-contact-actions { margin-top: 8px; gap: 8px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-guide .booking-contact-actions > a { min-height: 44px; padding: 9px 10px; font-size: 13px; border-radius: 10px; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-scroll { padding: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-topline { margin-bottom: 16px; gap: 12px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-survey legend { font-size: 24px; line-height: 1.2; }
  html:not(.mobile-desktop-mode) .booking-dialog .step-help { font-size: 14px; line-height: 1.55; margin: 10px 0 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-survey :is(label,.field-label) { font-size: 14px; line-height: 1.4; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-field { gap: 7px; margin-bottom: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .booking-survey :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea) { min-height: 48px; padding: 11px 12px; font-size: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .quick-concerns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 18px; }
  html:not(.mobile-desktop-mode) .booking-dialog .quick-concerns button { min-height: 44px; padding: 8px; font-size: 12px; line-height: 1.35; }
  html:not(.mobile-desktop-mode) .booking-dialog .specialist-choices { gap: 8px; }
  html:not(.mobile-desktop-mode) .booking-dialog .specialist-choices label > span { padding: 12px 12px 12px 42px; }
  html:not(.mobile-desktop-mode) .booking-dialog .specialist-choices input:checked + span { padding: 11px 11px 11px 41px; }
  html:not(.mobile-desktop-mode) .booking-dialog .specialist-choices small { font-size: 12px; line-height: 1.5; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-hours { grid-template-columns: minmax(0,1fr); gap: 7px; padding: 14px; margin-bottom: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .pain-panel { padding: 14px; margin-bottom: 16px; }
  html:not(.mobile-desktop-mode) .booking-dialog .pain-scale { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
  html:not(.mobile-desktop-mode) .booking-dialog .pain-scale label span { min-height: 44px; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-actions { padding: 10px 14px max(10px,env(safe-area-inset-bottom)); gap: 10px; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-actions button { min-height: 46px; padding: 11px 14px; font-size: 14px; }

  /* Footer and legal content keep every link and paragraph, with smaller gaps. */
  html:not(.mobile-desktop-mode) .site-footer { padding-block: 28px 18px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-heading { margin-bottom: 20px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-brand { gap: 10px; padding: 0; }
  html:not(.mobile-desktop-mode) .client-footer .footer-brand > img { width: 44px; height: 44px; flex-basis: 44px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-brand strong { font-size: 23px; line-height: 1.3; }
  html:not(.mobile-desktop-mode) .client-footer .footer-invitation { padding-block: 20px; gap: 14px; margin-block: 0 22px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-invitation h2 { font-size: 26px; margin-bottom: 8px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-invitation p { font-size: 14px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .client-footer .footer-grid { gap: 22px; padding-block: 0; }
  html:not(.mobile-desktop-mode) .client-footer .footer-grid :is(p,a) { font-size: 14px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .client-footer .footer-grid a { padding-block: 8px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-grid h2 { margin-bottom: 10px; font-size: 12px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-treatments { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 14px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-treatments h2 { grid-column: 1 / -1; }
  html:not(.mobile-desktop-mode) .client-footer .footer-patient-guide { margin-block: 22px; gap: 10px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-patient-guide section { padding: 16px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-patient-guide h2 { font-size: 14px; margin-bottom: 8px; }
  html:not(.mobile-desktop-mode) .client-footer .footer-patient-guide p { font-size: 14px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .client-footer .footer-closing-line { padding-block: 16px; margin-block: 0; font-size: 15px; line-height: 1.6; }
  html:not(.mobile-desktop-mode) .footer-bottom { gap: 12px; padding-top: 16px; }
  html:not(.mobile-desktop-mode) .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px; }
  html:not(.mobile-desktop-mode) .footer-bottom .footer-link-button { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
  html:not(.mobile-desktop-mode) .legal-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  html:not(.mobile-desktop-mode) .legal-nav { position: static; padding: 14px; gap: 7px; }
  html:not(.mobile-desktop-mode) .legal-nav a { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  html:not(.mobile-desktop-mode) .legal-content { padding: 18px; min-width: 0; }
  html:not(.mobile-desktop-mode) .legal-content section { margin-bottom: 24px; }
  html:not(.mobile-desktop-mode) .legal-content h2 { font-size: 23px; line-height: 1.3; margin-bottom: 10px; }
  html:not(.mobile-desktop-mode) .legal-content :is(p,li) { font-size: 14px; line-height: 1.65; }
  html:not(.mobile-desktop-mode) :is(.legal-highlight,.legal-inline-note) { padding: 16px; }
  html:not(.mobile-desktop-mode) .error-page { padding: 28px 16px; }

  /* A compact bottom dock and assistant leave the reading area usable. */
  html:not(.mobile-desktop-mode) .mobile-action-dock { right: 0; left: 0; bottom: 0; gap: 7px; padding: 8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-radius: 14px 14px 0 0; }
  html:not(.mobile-desktop-mode) .mobile-action-dock a { min-width: 0; min-height: 46px; padding: 8px 5px; gap: 6px; font-size: 12px; line-height: 1.3; border-radius: 10px; }
  html:not(.mobile-desktop-mode) .mobile-action-dock :is(strong,span) { font-size: 12px; }
  html:not(.mobile-desktop-mode) .mobile-action-dock a > span { width: 20px; height: 20px; flex: 0 0 20px; }
  html:not(.mobile-desktop-mode) .mobile-action-dock :is(svg,.brand-icon) { width: 20px; height: 20px; }
  html:not(.mobile-desktop-mode) .assistant-wrap { right: 12px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  html:not(.mobile-desktop-mode) .assistant-button { min-width: 48px; min-height: 48px; padding: 4px 9px 4px 4px; gap: 6px; animation: none; }
  html:not(.mobile-desktop-mode) .assistant-button .artie-launcher-avatar { width: 38px; height: 38px; }
  html:not(.mobile-desktop-mode) .assistant-button .artie-launcher-avatar img { width: 37px; height: 37px; }
  html:not(.mobile-desktop-mode) .assistant-launcher-copy strong { font-size: 12px; }
  html:not(.mobile-desktop-mode) .static-artie-close { min-width: 44px; min-height: 44px; }
  html:not(.mobile-desktop-mode) .artie-composer input { min-height: 44px; font-size: 16px; }
  html:not(.mobile-desktop-mode) .artie-composer button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 360px) {
  html:not(.mobile-desktop-mode) .site-header .brand strong { font-size: 15px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .hero-copy > h1 { font-size: 44px; }
  html:not(.mobile-desktop-mode) .hero-qualification strong { font-size: 13px; }
  html:not(.mobile-desktop-mode) .hero-specialty > span { font-size: 10px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] #qualifications .credential-copy,
  html:not(.mobile-desktop-mode) body[data-page="about"] .doctors-section .doctor-grid .doctor-card-body { padding: 16px; }
  html:not(.mobile-desktop-mode) body[data-page="home"] .home-treatment-stack .home-treatment-copy,
  html:not(.mobile-desktop-mode) body[data-page="treatments"] .treatment-bento-copy { padding: 14px; }
  html:not(.mobile-desktop-mode) .mobile-action-dock a { gap: 4px; font-size: 11px; }
  html:not(.mobile-desktop-mode) .mobile-action-dock :is(strong,span) { font-size: 11px; }
}

@media (max-width: 820px) and (max-height: 520px) {
  html:not(.mobile-desktop-mode) .booking-dialog .booking-guide { padding-block: 8px; }
  html:not(.mobile-desktop-mode) .booking-dialog .survey-actions { padding-block: 8px; }
  html:not(.mobile-desktop-mode) .static-menu-content .static-menu-links a { min-height: 44px; }
}