/* Responsive safety fix. Keep mobile nav at bottom without inherited top from global nav. */
html,body{max-width:100%;overflow-x:clip}
:where(img,video,iframe,svg){max-width:100%}
#home,#doctors,#care,#specialist-directory,#facilities,#about,#appointment,#contact{scroll-margin-top:calc(70px + 1rem)}
@media(min-width:761px) and (max-width:1100px){
 header{min-width:0;gap:12px}
 header>.brand{min-width:0}
 header>.button.small{flex:0 0 auto}
 header nav#nav{top:95px}
}
@media(max-width:760px){
 :root{--mobile-bottom-bar:66px}
 body{padding-bottom:calc(var(--mobile-bottom-bar) + env(safe-area-inset-bottom,0px))!important}
 header{
   height:68px!important;min-height:68px!important;
   padding:0 12px!important;gap:8px!important;
   display:flex;align-items:center;justify-content:space-between;
   width:100%;max-width:100%;overflow:visible;
   top:0;z-index:40;
 }
 header>.brand{flex:0 0 auto!important;min-width:0;order:0!important}
 header .brand-symbol{width:69px!important;height:52px!important;flex-shrink:0}
 header .brand-symbol img{width:100%!important;height:100%!important;object-fit:contain}
 header .language-switch{order:1!important;margin-left:auto!important;flex:0 0 78px}
 header .language-switch select{
   width:78px!important;min-width:0!important;max-width:78px!important;
   height:39px!important;margin:0!important;
   padding:8px 19px 8px 9px!important;font-size:12px!important;border-radius:9px;
 }
 header>.button.small{order:2!important;flex:0 0 auto;min-height:39px!important;padding:9px 10px!important;font-size:11px!important;gap:5px!important;line-height:1.25;white-space:nowrap}
 header>.menu{order:3!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;margin:0!important;padding:4px!important;font-size:23px!important;align-self:center}
 header nav#nav{
   display:none;position:absolute!important;left:0!important;right:0!important;
   top:68px!important;bottom:auto!important;height:auto!important;max-height:calc(100dvh - 150px);
   overflow:auto;background:#FFFFFF;z-index:41;
   padding:14px 20px!important;box-shadow:0 14px 23px #0936241C
 }
 header nav#nav.open{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 header nav#nav a{display:block;padding:6px 0}
 /* IMPORTANT: global nav {top:77px} was stretching this fixed bar to fill the viewport. */
 nav.mobile-actions{
   display:grid!important;position:fixed!important;
   inset:auto 0 0 0!important;top:auto!important;right:0!important;left:0!important;bottom:0!important;
   height:calc(var(--mobile-bottom-bar) + env(safe-area-inset-bottom,0px))!important;
   min-height:0!important;max-height:calc(var(--mobile-bottom-bar) + env(safe-area-inset-bottom,0px))!important;
   grid-template-columns:1fr 1fr 1.18fr!important;
   align-content:center!important;align-items:stretch!important;justify-content:stretch!important;
   padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px))!important;
   gap:8px!important;box-sizing:border-box!important;
   width:100vw;max-width:100%;margin:0!important;
   border-top:1px solid #FFFFFF!important;border-bottom:0!important;
   background:#FFFFFF!important;box-shadow:0 -6px 23px #09362418!important;
   z-index:45!important;
 }
 nav.mobile-actions .mobile-action{
   display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
   min-width:0!important;min-height:0!important;height:52px!important;max-height:52px!important;
   gap:7px!important;padding:6px 5px!important;
   border-radius:11px!important;font-size:12px!important;font-weight:800!important;
   background:#FFFFFF!important;color:#093624!important;line-height:1.3!important;
 }
 nav.mobile-actions .mobile-action.mobile-action-primary{background:#7E9088!important;color:#093624!important}
 nav.mobile-actions .mobile-action span:first-child{font-size:17px!important;line-height:1!important;flex:0 0 auto}
 nav.mobile-actions .mobile-action::after{display:none!important}
 .chat-launch{
   z-index:46!important;right:13px!important;
   bottom:calc(var(--mobile-bottom-bar) + env(safe-area-inset-bottom,0px) + 12px)!important;
   font-size:12px!important;padding:9px 13px!important;line-height:1.3
 }
 #chat{
   z-index:47!important;
   right:10px!important;bottom:calc(var(--mobile-bottom-bar) + env(safe-area-inset-bottom,0px) + 63px)!important;
   max-height:min(65dvh,470px)!important;overflow-y:auto
 }
 .section{max-width:100%;overflow-wrap:break-word}
 #doctors .doctor-card .doctor-photo-rail{overflow:hidden;right:0!important}
 #doctors .doctor-photo-rail img{
   height:97%!important;max-height:97%!important;right:0!important;
   bottom:0!important;object-fit:contain!important;object-position:center bottom!important
 }
 .facility-stage{max-width:100%}
 .topbar{min-height:37px;line-height:1.4;text-align:center;padding:8px 9px}
}
@media(max-width:420px){
 header{padding:0 9px!important;gap:6px!important}
 header .brand-symbol{width:58px!important;height:48px!important}
 header .language-switch{flex-basis:71px}
 header .language-switch select{width:71px!important;max-width:71px!important;padding-left:7px!important}
 header>.button.small{font-size:10px!important;padding:9px 8px!important}
 header>.menu{width:33px!important;flex-basis:33px!important;font-size:22px!important}
 nav.mobile-actions{gap:6px!important;padding-left:8px!important;padding-right:8px!important}
 nav.mobile-actions .mobile-action{font-size:11px!important;gap:4px!important}
}
@media(max-width:350px){
 header>.button.small{display:none!important}
 nav.mobile-actions .mobile-action{font-size:10px!important}
 .chat-launch span{display:none}
 .chat-launch{width:45px;height:45px;border-radius:50%;padding:0!important;font-size:19px!important}
}
@media(min-width:761px){
 nav.mobile-actions{display:none!important}
 #doctors .doctor-photo-rail img{height:100%!important;max-height:100%!important;right:0!important;bottom:0!important;object-fit:contain!important}
}
@media(prefers-reduced-motion:reduce){
 nav.mobile-actions a,#doctors .doctor-photo-rail img{transition:none!important;animation:none!important}
}

/* Portrait framing correction: keep both faces centred and clearly visible on phones/tablets. */
#doctors .doctor-photo-rail img{
 max-width:none!important;
 object-position:center bottom!important;
}
#doctors .doctor-photo-pending .doctor-original-photo[hidden]{display:none!important}
#doctors .doctor-photo-pending.has-portrait .doctor-fallback-monogram{display:none!important}
#doctors .doctor-photo-pending.has-portrait{background:transparent!important}
@media(min-width:681px) and (max-width:1050px){
 #doctors .doctor-card .doctor-photo-rail{width:45%!important}
 #doctors .doctor-photo-rail img{
   width:100%!important;height:100%!important;max-height:100%!important;
   object-fit:contain!important;object-position:center bottom!important;right:0!important
 }
}
@media(max-width:680px){
 #doctors .doctor-card .doctor-photo-rail{
   width:48%!important;max-width:48%!important;
   height:clamp(250px,67vw,340px)!important;
   z-index:1
 }
 #doctors .doctor-photo-rail img{
   display:block;width:100%!important;height:100%!important;max-height:100%!important;
   right:0!important;bottom:0!important;
   object-fit:cover!important;object-position:50% 10%!important;
   transform:none!important;filter:drop-shadow(0 4px 12px #09362425)
 }
 #doctors .doctor-card:hover .doctor-photo-rail img{transform:none!important}
 #doctors .doctor-intro{position:relative;z-index:2}
 #doctors .doctor-details{position:relative;z-index:2}
}
@media(max-width:400px){
 #doctors .doctor-intro{width:57%!important}
 #doctors .doctor-card .doctor-photo-rail{width:45%!important;max-width:45%!important}
}


/* Head-safe portrait zoom, all sizes. Reserve space above the photo before scaling. */
#doctors .doctor-card .doctor-photo-rail{
  overflow:hidden!important;
}
/* Images are fitted within the card, not cropped to fill it. */
#doctors .doctor-card .doctor-photo-rail img{
  display:block;
  position:absolute;
  left:auto!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  width:100%!important;
  height:92%!important;
  max-height:92%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:scale(1)!important;
  transform-origin:center bottom!important;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease!important;
}
/* 92% x 1.025 = 94.3%: hair remains safely below the card's top. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  #doctors .doctor-card:hover .doctor-photo-rail img,
  #doctors .doctor-card:focus-within .doctor-photo-rail img,
  #doctors .doctor-card-women:hover .doctor-photo-rail img,
  #doctors .doctor-card-women:focus-within .doctor-photo-rail img{
    transform:scale(1.025)!important;
  }
}
/* Avoid zoom sticking on touch devices or when reduced motion is preferred. */
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  #doctors .doctor-card:hover .doctor-photo-rail img,
  #doctors .doctor-card:focus-within .doctor-photo-rail img{
    transform:scale(1)!important;
  }
}