/* HMS complete public-site mobile polish. Loaded after all other public styles. */
@media (max-width: 760px) {
  :root { --mobile-gutter: 18px; --mobile-gap: 12px; }
  body { padding-bottom: 84px !important; background: #f8fbfc; }
  img, video { max-width: 100%; }
  main { overflow: hidden; }

  /* Top area and app navigation */
  .utility-bar { min-height: 33px !important; padding: 6px var(--mobile-gutter) !important; font-size: .62rem !important; }
  .utility-bar span:not(:first-child) { display: none !important; }
  .site-header { position: sticky !important; top: 0 !important; z-index: 1000 !important; min-height: 64px !important; padding: 8px var(--mobile-gutter) !important; box-shadow: 0 4px 16px rgba(8, 50, 70, .08) !important; }
  .site-brand { max-width: calc(100% - 55px) !important; gap: 8px !important; }
  .brand-logo { width: 40px !important; height: 40px !important; }
  .site-brand strong { font-size: .82rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-brand small { font-size: .57rem !important; }
  .header-actions { display: none !important; }
  .site-menu-toggle { display: grid !important; place-items: center; flex: 0 0 42px; }
  .site-nav { width: min(82vw, 320px) !important; padding: 84px 20px 28px !important; }
  .site-nav a { min-height: 46px !important; display: flex !important; align-items: center !important; }
  .mobile-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; height: 69px !important; }
  .mobile-nav a { min-width: 0 !important; font-size: .61rem !important; }
  .mobile-nav i { font-size: 1rem !important; }
  .mobile-nav .mobile-book { transform: translateY(-14px); width: 53px; height: 53px; border-radius: 18px; box-shadow: 0 8px 20px rgba(15,76,129,.25); }
  .emergency-fab { right: 14px !important; bottom: 88px !important; padding: 10px 12px !important; font-size: .7rem !important; }

  /* Shared layout and page banners */
  .section { padding: 43px var(--mobile-gutter) !important; }
  .page-banner, .page-banner-image, .specialties-hero, .emergency-cover { min-height: 240px !important; padding: 68px var(--mobile-gutter) 38px !important; }
  .page-banner h1, .specialties-hero h1, .emergency-cover h1 { font-size: clamp(1.85rem, 8vw, 2.35rem) !important; line-height: 1.06 !important; }
  .page-banner p, .specialties-hero p, .emergency-cover p { font-size: .86rem !important; line-height: 1.55 !important; }
  .eyebrow, .section-kicker { font-size: .62rem !important; letter-spacing: .12em !important; }
  .section-top { gap: 10px !important; }
  .section-top .text-link { font-size: .78rem !important; }

  /* All small information cards use a clean, readable two-column phone grid. */
  .modern-service-grid.services-full-grid,
  .specialties-page-grid,
  .doctor-profile-grid,
  .blog-showcase-grid,
  .promise-grid,
  .premium-care-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--mobile-gap) !important; }
  .modern-service-grid.services-full-grid > article,
  .specialties-page-grid > article,
  .doctor-profile-grid > article,
  .blog-showcase-grid > article,
  .promise-grid > article,
  .premium-care-grid > article { min-width: 0 !important; min-height: 0 !important; padding: 15px !important; border-radius: 16px !important; overflow: hidden; }
  .modern-service-grid.services-full-grid h3,
  .specialties-page-grid h3,
  .doctor-profile-grid h3,
  .blog-showcase-grid h3,
  .promise-grid h3,
  .premium-care-grid h3 { font-size: .9rem !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  .modern-service-grid.services-full-grid p,
  .specialties-page-grid p,
  .doctor-profile-grid p,
  .blog-showcase-grid p,
  .promise-grid p,
  .premium-care-grid p { font-size: .72rem !important; line-height: 1.48 !important; overflow-wrap: anywhere; }
  .modern-service-grid.services-full-grid i,
  .specialties-page-grid > article > i,
  .promise-grid > article > i,
  .premium-care-grid > article > i { width: 42px !important; height: 42px !important; border-radius: 13px !important; font-size: 1rem !important; }
  .blog-showcase-grid .blog-card img { height: 105px !important; }
  .blog-showcase-grid .text-link,
  .specialties-page-grid a,
  .modern-service-grid.services-full-grid a { font-size: .66rem !important; }

  /* Doctor cards stay compact without cropping their content. */
  .doctor-profile-grid > article > img,
  .doctor-profile-grid .doctor-photo-placeholder { height: 126px !important; }
  .doctor-profile-grid > article > div:last-child { padding: 13px !important; }
  .doctor-profile-grid small { font-size: .64rem !important; line-height: 1.35 !important; }
  .doctor-profile-grid .doctor-card-actions { grid-template-columns: 1fr !important; gap: 6px !important; margin-top: 10px !important; }
  .doctor-profile-grid .doctor-card-actions a,
  .doctor-profile-grid .doctor-card-actions button { min-height: 34px !important; padding: 7px !important; font-size: .6rem !important; }

  /* Full-width content blocks remain easy to read. */
  .about-showcase, .mission-vision-grid, .contact-layout, .emergency-guide, .home-care-path, .faq-photo-section { grid-template-columns: 1fr !important; gap: 22px !important; }
  .about-showcase > img, .home-care-path-image img { min-height: 220px !important; max-height: 270px !important; object-fit: cover; border-radius: 18px; }
  .mission-vision-grid > article { padding: 18px !important; border-radius: 18px !important; }
  .mission-vision-photo img { height: 185px !important; }
  .faq-photo { min-height: 245px !important; }
  .faq-content details { padding: 14px !important; }
  .faq-content summary { font-size: .84rem !important; }

  /* Forms and contact details are full-width touch targets. */
  .appointment-box, .appointment-form-large, .contact-box { padding: 20px !important; border-radius: 18px !important; }
  .contact-layout aside { padding: 22px !important; border-radius: 18px !important; }
  .form-control, .form-select { min-height: 46px !important; font-size: .9rem !important; }
  textarea.form-control { min-height: 128px !important; }
  .btn-hms, .service-appointment-button, .specialty-appointment-button { min-height: 44px !important; justify-content: center !important; }
  .contact-detail { gap: 11px !important; }
  .contact-detail strong { font-size: .79rem !important; overflow-wrap: anywhere; }
  .department-cta { margin: 0 var(--mobile-gutter) 38px !important; padding: 24px 18px !important; border-radius: 18px !important; display: grid !important; gap: 16px !important; }
  .department-cta h2 { font-size: 1.4rem !important; }

  /* Carousels: cards show cleanly and always respond to finger swipe. */
  .card-carousel-viewport, .story-carousel, .article-carousel, .testimonial-carousel, .admin-video-carousel { width: 100% !important; overflow: hidden !important; touch-action: pan-y !important; }
  .services-section .card-carousel-track,
  .doctors-section .card-carousel-track,
  .home-specialties-premium .card-carousel-track { gap: 12px !important; }
  .services-section .card-carousel-track > article,
  .doctors-section .card-carousel-track > article,
  .home-specialties-premium .card-carousel-track > a { flex: 0 0 calc((100% - 12px) / 2) !important; min-width: 0 !important; }
  .story-video-card { height: 320px !important; }
  .story-video-overlay { padding: 22px !important; }
  .article-carousel-track > article { min-height: 310px !important; }
  .article-carousel-track > article > div { padding: 23px 20px !important; }
  .admin-video-carousel-track > article { grid-template-columns: 1fr !important; }
  .admin-video-carousel video { height: 220px !important; }
  .admin-video-carousel article > div { padding: 22px !important; }

  /* Footer keeps every link visible without squeezing columns. */
  .site-footer { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; padding: 40px var(--mobile-gutter) 98px !important; }
  .site-footer > div { min-width: 0 !important; }
  .site-footer a, .site-footer p { font-size: .8rem !important; }
  .footer-bottom { margin-top: 4px !important; line-height: 1.6 !important; }

  /* Content-rich cards need room: show one instead of squeezing two. */
  .doctors-section .card-carousel-track { gap: 12px !important; }
  .doctors-section .card-carousel-track > article { flex: 0 0 calc((100% - 12px) / 2) !important; }
  .doctors-section .modern-doctor-grid img,
  .doctors-section .doctor-photo-placeholder { height: 132px !important; }
  .doctors-section .modern-doctor-grid h3 { font-size: .84rem !important; }
  .doctors-section .modern-doctor-grid p,
  .doctors-section .modern-doctor-grid span { font-size: .66rem !important; }
  .doctors-section .doctor-card-actions a,
  .doctors-section .doctor-card-actions button { font-size: .59rem !important; min-height: 34px !important; }

  .doctor-profile-grid,
  .blog-showcase-grid { grid-template-columns: 1fr !important; }
  .doctor-profile-grid > article > img,
  .doctor-profile-grid .doctor-photo-placeholder { height: 240px !important; }
  .blog-showcase-grid .blog-card img { height: 185px !important; }
  .blog-showcase-grid .blog-card h3,
  .doctor-profile-grid h3 { font-size: 1.05rem !important; }
  .blog-showcase-grid .blog-card p,
  .doctor-profile-grid p { font-size: .84rem !important; }

  html:root body .bottom-testimonials .testimonial-card-track { gap: 0 !important; }
  html:root body .bottom-testimonials .testimonial-card-track > article { flex: 0 0 100% !important; min-height: 0 !important; padding: 23px !important; }
  html:root body .bottom-testimonials .testimonial-card-track .testimonial-person img { width: 58px !important; height: 58px !important; }
  html:root body .bottom-testimonials .testimonial-card-track .testimonial-person strong { font-size: .95rem !important; }
  html:root body .bottom-testimonials .testimonial-card-track .testimonial-person small { font-size: .74rem !important; }
  html:root body .bottom-testimonials .testimonial-card-track > article > p { font-size: .92rem !important; line-height: 1.7 !important; }

  /* Force the home rails to exactly two equal cards on a phone screen. */
  html:root body .services-section .modern-service-grid.card-carousel-track > article,
  html:root body .doctors-section .modern-doctor-grid.card-carousel-track > article,
  html:root body .home-specialties-premium .premium-specialty-grid.card-carousel-track > a { flex: 0 0 calc((100% - 12px) / 2) !important; min-width: 0 !important; }

  /* Mobile app header: keep appointment and install actions within reach. */
  .site-header { gap: 7px !important; }
  .site-brand { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; }
  .site-brand strong { max-width: 176px !important; }
  .header-actions { display: flex !important; align-items: center !important; gap: 6px !important; flex: 0 0 auto !important; }
  .header-actions .nav-appointment,
  .header-actions .install-button { width: 39px !important; height: 39px !important; min-height: 39px !important; padding: 0 !important; border-radius: 12px !important; display: grid !important; place-items: center !important; }
  .header-actions .nav-appointment { background: linear-gradient(135deg, #0f4c81, #117f8b) !important; color: #fff !important; box-shadow: 0 7px 15px rgba(15, 76, 129, .22) !important; }
  .header-actions .install-button { background: #e9f7f6 !important; color: #087d79 !important; border: 1px solid #cdecea !important; }
  .header-actions .nav-appointment span,
  .header-actions .install-button span { display: none !important; }
  .header-actions .nav-appointment i,
  .header-actions .install-button i { margin: 0 !important; font-size: .96rem !important; }
  .site-menu-toggle { flex: 0 0 39px !important; width: 39px !important; height: 39px !important; border-radius: 12px !important; }

  /* Slide menu behaves like a clean app drawer. */
  .site-nav { background: linear-gradient(160deg, #ffffff, #eefafa) !important; box-shadow: 16px 0 38px rgba(6, 45, 61, .18) !important; border-right: 1px solid #d9eeee !important; }
  .site-nav::before { content: 'HMS MENU'; display: block; margin: 0 0 18px; color: #0f4c81; font-size: .67rem; letter-spacing: .16em; font-weight: 900; }
  .site-nav a { margin: 5px 0 !important; padding: 0 14px !important; border-radius: 12px !important; color: #24455d !important; font-weight: 750 !important; }
  .site-nav a.active { background: linear-gradient(135deg, #0f4c81, #117f8b) !important; color: #fff !important; box-shadow: 0 9px 18px rgba(15, 76, 129, .18) !important; }
  .site-menu-backdrop.is-visible { backdrop-filter: blur(3px); background: rgba(3, 33, 51, .36) !important; }

  /* Bottom dock: raised, blurred and easy to tap. */
  .mobile-nav { left: 11px !important; right: 11px !important; bottom: max(9px, env(safe-area-inset-bottom)) !important; width: auto !important; height: 65px !important; padding: 6px 7px max(6px, env(safe-area-inset-bottom)) !important; border: 1px solid rgba(207, 230, 234, .9) !important; border-radius: 20px !important; background: rgba(255, 255, 255, .92) !important; box-shadow: 0 12px 30px rgba(9, 57, 78, .19) !important; backdrop-filter: blur(15px); }
  .mobile-nav a { gap: 3px !important; color: #587181 !important; font-weight: 750 !important; }
  .mobile-nav a.active { color: #0a817e !important; }
  .mobile-nav a.active::before { content: ''; width: 18px; height: 3px; border-radius: 6px; background: #0ca39c; position: absolute; top: 4px; }
  .mobile-nav .mobile-book { width: 55px !important; height: 55px !important; border: 3px solid #f8fbfc !important; background: linear-gradient(135deg, #0f4c81, #0e998f) !important; color: #fff !important; }
  .mobile-nav .mobile-book.active { color: #fff !important; }

  /* Final shared header repair: works on every public page. */
  html:root body { padding-bottom: 118px !important; }
  html:root body .site-header { display: grid !important; grid-template-columns: minmax(0, 1fr) 42px !important; grid-template-areas: 'brand menu' 'actions actions' !important; gap: 8px 10px !important; min-height: 112px !important; padding: 9px var(--mobile-gutter) 10px !important; }
  html:root body .site-header .site-brand { grid-area: brand; width: 100% !important; max-width: 100% !important; }
  html:root body .site-header .site-brand strong { max-width: none !important; font-size: .86rem !important; }
  html:root body .site-header .site-brand small { font-size: .6rem !important; }
  html:root body .site-header .site-menu-toggle { grid-area: menu; align-self: center; justify-self: end; }
  html:root body .site-header .header-actions { grid-area: actions; width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html:root body .site-header .header-actions:has(.install-button[hidden]) { grid-template-columns: 1fr !important; }
  html:root body .site-header .header-actions .nav-appointment,
  html:root body .site-header .header-actions .install-button { width: 100% !important; height: 37px !important; min-height: 37px !important; padding: 0 12px !important; display: inline-flex !important; justify-content: center !important; gap: 7px !important; }
  html:root body .site-header .header-actions .install-button[hidden] { display: none !important; }
  html:root body .site-header .header-actions .nav-appointment span,
  html:root body .site-header .header-actions .install-button span { display: inline !important; font-size: .71rem !important; font-weight: 800 !important; }
  html:root body .site-header .header-actions .nav-appointment i,
  html:root body .site-header .header-actions .install-button i { font-size: .8rem !important; }
  /* App-style mobile drawer: a smooth left panel with a clear close state. */
  html:root body .site-header .site-menu-toggle {
    position: relative !important;
    overflow: hidden !important;
    color: #0f4c81 !important;
    background: #eaf6f7 !important;
    border: 1px solid #d4ebec !important;
    box-shadow: 0 6px 15px rgba(11, 82, 104, .12) !important;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), background .28s ease, color .28s ease, box-shadow .28s ease !important;
  }
  html:root body .site-header .site-menu-toggle i {
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease !important;
  }
  html:root body .site-header .site-menu-toggle.is-open {
    color: #fff !important;
    background: linear-gradient(135deg, #0f4c81, #0c958f) !important;
    box-shadow: 0 10px 20px rgba(10, 99, 117, .28) !important;
    transform: rotate(90deg) scale(1.04) !important;
  }
  html:root body .site-header .site-menu-toggle.is-open i { transform: rotate(-90deg) !important; }
  html:root body .site-nav {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(84vw, 330px) !important;
    min-height: 100dvh !important;
    padding: 40px 18px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border-radius: 0 25px 25px 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-104%) !important;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .28s ease !important;
    will-change: transform !important;
  }
  html:root body .site-nav.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  html:root body .site-menu-backdrop {
    transition: opacity .34s ease, visibility .34s ease, backdrop-filter .34s ease !important;
  }
  html:root body .mobile-nav { z-index: 1002 !important; }

  /* Avoid blank space while scroll-reveal animations wait on phone screens. */
  html:root body .section,
  html:root body .cta-section { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* Doctors page: compact single profile card, made for a narrow screen. */
  html:root body .doctor-profile-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  html:root body .doctor-profile-grid > article { padding: 0 !important; border-radius: 18px !important; }
  html:root body .doctor-profile-grid > article > img,
  html:root body .doctor-profile-grid .doctor-photo-placeholder { height: 200px !important; border-radius: 18px 18px 0 0 !important; }
  html:root body .doctor-profile-grid > article > div:last-child { padding: 17px !important; }
  html:root body .doctor-profile-grid .doctor-card-actions { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html:root body .doctor-profile-grid .doctor-card-actions a,
  html:root body .doctor-profile-grid .doctor-card-actions button { min-height: 40px !important; padding: 7px 8px !important; font-size: .65rem !important; }

  /* Final app-style bottom navigation. */
  html:root body .mobile-nav { display: flex !important; align-items: center !important; justify-content: space-around !important; height: 70px !important; padding: 7px 8px max(7px, env(safe-area-inset-bottom)) !important; border-radius: 24px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 16px 36px rgba(8,53,75,.20) !important; }
  html:root body .mobile-nav a { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; height: 51px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border-radius: 14px !important; font-size: .61rem !important; line-height: 1 !important; transition: color .2s ease, background .2s ease, transform .2s ease !important; }
  html:root body .mobile-nav a i { font-size: 1.02rem !important; }
  html:root body .mobile-nav a.active:not(.mobile-book) { background: #e8f7f6 !important; color: #087d79 !important; }
  html:root body .mobile-nav a.active:not(.mobile-book)::before { display: none !important; }
  html:root body .mobile-nav .mobile-book { flex: 0 0 62px !important; width: 62px !important; height: 62px !important; margin: 0 2px !important; transform: translateY(-21px) !important; border-radius: 21px !important; box-shadow: 0 12px 25px rgba(11,98,118,.35) !important; }
  html:root body .mobile-nav .mobile-book i { font-size: 1.08rem !important; }
  html:root body .mobile-nav .mobile-book span { font-size: .62rem !important; }
  html:root body .mobile-nav a:active { transform: scale(.94) !important; }

  /* Home welcome section: compact, readable and app-like on a phone. */
  html:root body .hms-welcome-section { padding-top: 46px !important; padding-bottom: 42px !important; }
  html:root body .hms-welcome-heading { justify-content: center !important; }
  html:root body .hms-welcome-heading .section-kicker { font-size: .59rem !important; letter-spacing: .09em !important; text-align: center !important; }
  html:root body .hms-welcome-heading .welcome-line { display: none !important; }
  html:root body .hms-welcome-grid { margin-top: 17px !important; text-align: center !important; }
  html:root body .hms-welcome-grid h2 { font-size: 2.3rem !important; }
  html:root body .hms-welcome-grid .welcome-copy { padding: 17px 0 0 !important; border-left: 0 !important; }
  html:root body .hms-welcome-grid .welcome-copy p { font-size: .91rem !important; line-height: 1.7 !important; }
  html:root body .welcome-proof { justify-content: center !important; margin-top: 19px !important; }
  html:root body .welcome-proof span { min-width: 116px !important; text-align: left !important; }
  html:root body .welcome-feature-strip { margin-top: 27px !important; display: grid !important; grid-template-columns: 1fr !important; }
  html:root body .welcome-feature-strip > div { padding: 15px !important; text-align: left !important; }
  html:root body .mobile-nav .mobile-book:active { transform: translateY(-21px) scale(.94) !important; }
}