/* MedParc Hospitals: shared motion + layout layer (header, footer, page designs). Loads after main.css. */
/* keyframes this layer relies on (kept here so older main.css builds still animate) */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes floatBlob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, 30px); } }
@keyframes spinBorder { to { --ang: 360deg; } }
@keyframes priceShine { to { background-position: -200% 0; } }
@keyframes sweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes dotsDrift { to { background-position: 260px 130px; } }
@keyframes lineShine { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes skewIn { from { opacity: 0; transform: scaleX(0) skewX(-30deg); } to { opacity: 1; transform: none; } }
@keyframes fInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes fInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes fInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes chipIn { from { opacity: 0; transform: scale(.4) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 70% { box-shadow: 0 0 0 10px rgba(255, 204, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 204, 83, 0); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(20deg); } }
@keyframes gloss { to { left: 130%; } }
@keyframes btnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(1, 150, 154, .45); } 50% { box-shadow: 0 0 0 10px rgba(1, 150, 154, 0); } }
@keyframes dropIn { to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes wordUp { to { transform: none; } }
@keyframes progressBar { to { width: 100%; } }
@keyframes mpTick { to { transform: rotate(360deg); } }
@keyframes mpMail { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(14deg); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(8deg); } }
/* =====================================================================
   MedParc Hospitals — Homepage motion layer (v4)
   Loads after assets/css/main.css. Keeps brand colours, fonts and layout;
   adds motion, fixes header spacing, sliders, packages, FAQ and footer.
   ===================================================================== */
:root { --mp-green: #34D399; --mp-pk-dark: #0A2440; --mp-pk-btn: #2E4660; }

/* Sections below the fold were paint-contained (content-visibility), which
   clipped hover pop-ups and the footer. Render them normally. */
/* Revealed blocks kept a clip-path that cropped pop-ups, hover lifts and shadows */
.js [data-reveal].is-in:not([data-reveal="clip"]):not([data-reveal="clipx"]) { clip-path: none; }
main > section:nth-of-type(n+4), .footer { content-visibility: visible !important; contain-intrinsic-size: none !important; contain: none !important; }

/* ---------- Global button motion ---------- */
.btn::after { animation: mpSheen 5.5s ease-in-out infinite; }
.btn:hover::after { animation: gloss .9s var(--ease); }
@keyframes mpSheen { 0%, 72% { left: -75%; } 100% { left: 140%; } }
@media (hover: hover) {
  .btn:hover > svg:last-child { animation: mpArrow .7s var(--ease); }
  .link-more:hover svg { animation: none; }
}
@keyframes mpArrow { 0% { transform: translateX(0); } 45% { transform: translateX(14px); opacity: 0; } 46% { transform: translateX(-12px); opacity: 0; } 100% { transform: translateX(4px); opacity: 1; } }
.btn:focus-visible, .cnav__btn:focus-visible, .mp-pk__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Plain arrow cursor: no cursor ring, no click bursts */
.cursor-dot, .cursor-ring, .ripple { display: none !important; }
.btn:active, .cnav__btn:active, .sw-arrow:active, .tcard__b:active { transform: scale(.96); }

/* Section titles: buttons get a moving glow ring + arrow */
.shead .btn, .about__txt .btn, .pkgs > .wrap > p .btn { box-shadow: 0 0 0 0 rgba(1, 150, 154, .45); animation: btnPulse 2.6s ease-in-out infinite; }
.shead .btn svg, .about__txt .btn svg, .pkgs > .wrap > p .btn svg { animation: mpWiggle 3s ease-in-out infinite; }
@keyframes mpWiggle { 0%, 80%, 100% { transform: none; } 85% { transform: translateX(5px); } 90% { transform: translateX(0); } 95% { transform: translateX(4px); } }
.link-more svg { animation: mpWiggle 3.2s ease-in-out infinite; }
.link-more:hover svg { animation: none; }

/* =====================================================================
   HEADER (desktop)
   ===================================================================== */
@media (min-width: 1101px) {
  .hdr { background: linear-gradient(90deg, #fff 0%, #F4FAFA 50%, #fff 100%); background-size: 200% 100%; animation: mpHdrBg 14s ease-in-out infinite; }
  @keyframes mpHdrBg { 50% { background-position: 100% 0; } }
  .hdr-top .wrap { width: calc(100% - 2 * clamp(20px, calc(3 * var(--vw, 1vw)), 60px)); max-width: 1700px; }
  /* items never shrink into each other; a fixed gap with a divider sits between every icon group */
  .hdr-top__row { justify-content: center; align-items: center; padding-block: 12px 6px; flex-wrap: wrap; row-gap: 8px; column-gap: clamp(36px, 3.4vw, 64px); }
  .hdr-top .ibox, .hdr-top .emg { flex: 0 0 auto; margin: 0 !important; padding: 2px 0 !important; position: relative; align-items: center; gap: 12px; }
  .hdr-top .ibox + .ibox::before, .hdr-top .emg::before { content: ""; position: absolute; left: calc(-.5 * clamp(36px, 3.4vw, 64px)); top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, #C3CED6, transparent); }
  .hdr-top .ibox__txt { line-height: 1.45; text-align: left; white-space: nowrap; }
  .hdr-top .ibox__ic { transition: transform .5s var(--spring), background .3s, box-shadow .3s; }
  .hdr-top .ibox:hover .ibox__ic { transform: rotate(-12deg) scale(1.12); box-shadow: 0 8px 18px -8px rgba(1, 150, 154, .9); }
  .hdr-top .ibox:first-child .ibox__ic svg { animation: mpPin 2.6s ease-in-out infinite; }
  .hdr-top .ibox:nth-child(2) .ibox__ic svg { animation: mpMail 3.4s ease-in-out infinite; }
  .hdr-top .ibox:nth-child(3) .ibox__ic svg { animation: mpTick 4s linear infinite; }
  @keyframes mpMail { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
  @keyframes mpTick { to { transform: rotate(360deg); } }
  .hdr-top .emg { padding: 2px 0; transition: transform .4s var(--spring); }
  .hdr-top .emg:hover { transform: scale(1.04); }
  .hdr-top .emg__siren { animation: mpSirenShake 3s ease-in-out infinite; transform-origin: 50% 80%; }

  /* ECG heartbeat line under the top bar */
  .hdr-ecg { position: relative; height: 22px; margin-top: 2px; opacity: 0; }
  .js.is-loaded .hdr-ecg { animation: dropIn .9s var(--ease) .35s forwards; }
  html:not(.js) .hdr-ecg { opacity: 1; }
  .hdr-ecg svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .hdr-ecg .ecg-base { fill: none; stroke: #DDE4E9; stroke-width: 1.4; }
  .hdr-ecg .ecg-beat { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70 930; stroke-dashoffset: 1000; filter: drop-shadow(0 0 4px rgba(1, 150, 154, .75)); animation: mpEcgRun 4.2s linear infinite; }
  .hdr-ecg .ecg-beat--2 { stroke: var(--yellow); stroke-dasharray: 26 974; animation-delay: -2.1s; filter: drop-shadow(0 0 4px rgba(255, 204, 83, .9)); }

  /* main row: full width with breathing room left and right; gap between logo and menu */
  .hdr-main { position: relative; }
  .hdr-main__row { justify-content: space-between; max-width: none; width: 100%; padding-inline: clamp(24px, 5.2vw, 100px) !important; box-sizing: border-box; }
  .hdr-main .logo { margin: 0 clamp(32px, 4vw, 80px) 0 0 !important; flex: none; }
  .hdr-main nav { flex: 1 1 auto; display: flex; justify-content: center; }
  .hdr-main .menu { flex: 0 0 auto; }
  .hdr-main .menu > li { margin: 0 clamp(8px, .9vw, 16px); }
  .hdr-main .logo { width: clamp(160px, 11vw, 210px); }
  /* menu hover: colour + underline that grows from the centre, nothing else */
  .menu > li > a { transition: color .3s; }
  .menu > li > a::after { left: 50%; right: auto; width: 100%; transform: translateX(-50%) scaleX(0); transform-origin: center; height: 2px; border-radius: 2px; transition: transform .4s var(--ease); }
  .menu > li:hover > a::after, .menu > li > a[aria-current="page"]::after, .menu > li:focus-within > a::after { transform: translateX(-50%) scaleX(1); }
  .menu .sub a { opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .45s var(--ease), color .25s, background .25s, padding .3s; transition-delay: calc(var(--i, 0) * 22ms); }
  .menu > li:hover .sub a, .menu > li:focus-within .sub a { opacity: 1; transform: none; }
  .hdr-btn { margin-left: clamp(16px, calc(1.6 * var(--vw, 1vw)), 28px); }
  .hdr-btn .btn svg { animation: mpWiggle 3.6s ease-in-out infinite; }
  .hdr-main.is-stuck { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
  .hdr-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), var(--yellow), var(--teal), transparent); background-size: 200% 100%; opacity: 0; transition: opacity .4s; animation: mpLineMove 4s linear infinite; }
  .hdr-main.is-stuck::after { opacity: 1; }
}
@keyframes mpPin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mpSirenShake { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-8deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@keyframes mpLineMove { to { background-position: -200% 0; } }
@keyframes mpEcgRun { to { stroke-dashoffset: 0; } }
/* mobile header accent line */
.mhdr { position: relative; }
.mhdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), var(--yellow), var(--teal), transparent); background-size: 200% 100%; animation: mpLineMove 4s linear infinite; pointer-events: none; }
.mhdr__siren svg, .mhdr__call svg { animation: mpSirenShake 3s ease-in-out infinite; }

/* =====================================================================
   HERO
   ===================================================================== */
.hslider .swiper { position: relative; z-index: 1; }
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hfx { position: absolute; color: rgba(255, 255, 255, .28); transform: translate3d(calc(var(--mx, 0) * var(--k, 10) * 1px), calc(var(--my, 0) * var(--k, 10) * 1px), 0); transition: transform .8s var(--ease); }
.hfx svg { display: block; width: var(--s, 46px); height: var(--s, 46px); animation: mpFloat var(--t, 7s) ease-in-out var(--dl, 0s) infinite; }
.hfx--1 { left: 1.5%; top: 6%; --s: 44px; --k: 14; --t: 7s; }
.hfx--2 { left: 47%; top: 4%; --s: 38px; --k: -18; --t: 6s; --dl: -2s; color: rgba(255, 204, 83, .55); }
.hfx--3 { left: 49%; bottom: 14%; --s: 52px; --k: 22; --t: 8s; --dl: -1s; }
.hfx--4 { right: 1.4%; top: 12%; --s: 40px; --k: -12; --t: 6.5s; --dl: -3s; }
.hfx--5 { right: 2.5%; bottom: 20%; --s: 34px; --k: 16; --t: 5.5s; color: rgba(1, 200, 205, .6); }
.hfx--6 { left: 3%; bottom: 12%; --s: 36px; --k: -10; --t: 7.5s; --dl: -4s; color: rgba(255, 204, 83, .45); }
.hfx--2 svg, .hfx--5 svg { animation-name: mpFloat, mpBeat; animation-duration: var(--t), 1.6s; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out; }
@keyframes mpFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(8deg); } }
@keyframes mpBeat { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.22; } 24% { scale: 1; } 32% { scale: 1.12; } }
.hfx-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; animation: floatBlob 14s ease-in-out infinite; }
.hfx-orb--1 { width: 320px; height: 320px; right: 18%; top: -120px; background: radial-gradient(circle, rgba(1, 150, 154, .7), transparent 70%); }
.hfx-orb--2 { width: 260px; height: 260px; left: 30%; bottom: -140px; background: radial-gradient(circle, rgba(255, 204, 83, .35), transparent 70%); animation-duration: 18s; animation-direction: reverse; }
.hero-ecg { position: absolute; left: 0; right: 0; bottom: 5%; width: 100%; height: 90px; opacity: .8; }
.hero-ecg .ecg-base { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.hero-ecg .ecg-beat { fill: none; stroke: #5FE3E6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90 910; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(95, 227, 230, .9)); animation: mpEcgRun 5s linear infinite; }

/* image card follows the cursor in 3D */
.hslide__media { perspective: 1200px; }
.hslide__frame { transform: rotateY(calc(var(--mx, 0) * 6deg)) rotateX(calc(var(--my, 0) * -5deg)) translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0); transition: transform .7s var(--ease); transform-style: preserve-3d; }
.hslide__media .hchip { translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 12px); transition: translate .7s var(--ease); }
.hchip svg { animation: mpBeat 1.8s ease-in-out infinite; }
.hchip--b svg { animation: mpPin 2.4s ease-in-out infinite; }
.hchip--c { right: 6px; top: 4%; padding: 9px 12px; }
.hchip--c .hchip__ecg { width: 64px; height: 34px; border-radius: 10px; background: #E9F7F7; display: grid; place-items: center; flex: none; overflow: hidden; }
.hchip--c .hchip__ecg svg { width: 60px; height: 22px; padding: 0; background: none; animation: none; }
.hchip--c .hchip__ecg path { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: mpEcgDraw 1.8s linear infinite; }
@keyframes mpEcgDraw { 70%, 100% { stroke-dashoffset: 0; } }
.swiper-slide-active .hchip--c { animation-delay: 2s, 2.9s; }
.hchip--a { top: 22%; }
/* stethoscope badge */
.hsteth { position: absolute; left: -18px; bottom: 6%; z-index: 4; width: 86px; height: 86px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); display: grid; place-items: center; translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 14px); transition: translate .7s var(--ease); }
.hsteth::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); animation: spinSlow 12s linear infinite; }
.hsteth::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .6); animation: ring 2.4s var(--ease) infinite; }
.hsteth svg { width: 50px; height: 50px; fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hsteth .st-tube { stroke-dasharray: 160; stroke-dashoffset: 160; }
.swiper-slide-active .hsteth .st-tube { animation: mpDraw 1.6s var(--ease) 1.6s forwards; }
.hsteth .st-head { fill: var(--teal); stroke: none; transform-box: fill-box; transform-origin: center; animation: mpBeat 1.6s ease-in-out infinite; }
.swiper-slide:not(.swiper-slide-active) .hsteth .st-tube { stroke-dashoffset: 0; }
@keyframes mpDraw { to { stroke-dashoffset: 0; } }
.sw-arrow { position: relative; }
.sw-arrow::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); animation: ring 2.6s var(--ease) infinite; }
.hs-next::after { animation-delay: 1.3s; }
.sw-arrow:active { transform: scale(.9); }

/* quick booking strip */
.hq-doc__ic { position: relative; }
.hq-doc__ic::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .5); animation: ring 2.2s var(--ease) infinite; }
.hq-doc__ic svg { animation: mpNudge 2.4s ease-in-out infinite; }
@keyframes mpNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.hq-doc { background-size: 110% auto; transition: transform .5s var(--ease), box-shadow .5s, background-size 1.2s var(--ease); }
.hq-doc:hover { background-size: 122% auto; }
.hq-appt { transition: box-shadow .5s, transform .5s var(--ease); }
.hq-appt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, rgba(1, 150, 154, .9) 80%, rgba(255, 204, 83, .9) 90%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 6s linear infinite; pointer-events: none; opacity: .8; }
.hform input, .hform select { transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); }
.hform input:focus, .hform select:focus { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(1, 150, 154, .25), 0 10px 20px -12px rgba(9, 36, 60, .35); }
.hform__circle { animation: mpHeart 2.2s ease-in-out infinite; }
.hform__circle:hover { animation: none; }
@keyframes mpHeart { 0%, 50%, 100% { scale: 1; } 10% { scale: 1.05; } 20% { scale: 1; } 30% { scale: 1.035; } }
.hmarq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hmarq__item h3 { transition: color .3s; }
.hmarq__item:hover h3 { color: var(--yellow); }

/* =====================================================================
   SLIDERS (specialities, facilities, doctors, testimonials)
   ===================================================================== */
.carousel[data-mpx] .swiper { touch-action: pan-y; }
.carousel[data-mpx] .swiper-slide { transition: opacity .5s; }
.swiper-slide.mp-in { animation: mpSlideIn .85s var(--ease) both; }
.swiper-slide.mp-in:nth-child(odd) { animation-name: mpSlideIn2; }
@keyframes mpSlideIn { from { opacity: 0; transform: perspective(900px) translateX(40px) rotateY(-16deg) scale(.94); } }
@keyframes mpSlideIn2 { from { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(10deg) scale(.95); } }
.cnav__btn { overflow: visible; }
.cnav__btn:active { transform: scale(.9); }
.cnav__btn--next::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(1, 150, 154, .5); animation: btnPulse 2.4s ease-in-out infinite; pointer-events: none; }
.cnav__bar { transition: transform .8s var(--ease); }

/* speciality cards */
.scard { will-change: transform; transform-style: preserve-3d; }
.scard__img::before { content: "+"; position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--teal); font: 600 26px/44px var(--f-head); text-align: center; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: mpPlus 2.6s ease-in-out infinite; transition: transform .6s var(--spring), background .3s, color .3s; }
@keyframes mpPlus { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 60% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.scard:hover .scard__img::before { transform: rotate(180deg) scale(1.12); background: var(--teal); color: #fff; }
.scard__body { position: relative; }
.scard__body::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.scard:hover .scard__body::before { transform: scaleX(1); }
.scard h3 a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
.scard:hover h3 a { background-size: 100% 1.5px; }

/* facility cards */
.fcard__cat svg { animation: mpBeat 1.8s ease-in-out infinite; }
.fcard__go::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .55); animation: ring 2.6s var(--ease) infinite; }
.fcard__body::before { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform: scaleX(0); transition: transform .7s var(--ease); }
.fcard:hover .fcard__body::before { transform: scaleX(1); }

/* doctor cards */
.tcard__img::before { display: block; content: ""; position: absolute; width: 130%; aspect-ratio: 1; left: -15%; top: 18%; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), rgba(1, 150, 154, .28), transparent 35%, rgba(255, 204, 83, .3), transparent 75%, rgba(1, 150, 154, .28)); z-index: -1; animation: spinBorder 9s linear infinite; height: auto; inset: auto; left: -15%; top: 18%; }
.tcard__dept { animation: mpTagIn .8s var(--spring) both; }
@keyframes mpTagIn { from { opacity: 0; transform: translateY(-14px); } }
.tcard__b svg { transition: transform .4s var(--spring); }
.tcard__b:hover svg { transform: scale(1.2) rotate(-10deg); }
.tcard.is-press { animation: mpPress .55s var(--spring); }
@keyframes mpPress { 30% { transform: scale(.95); } 100% { transform: none; } }
.mp-burst { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--teal); pointer-events: none; animation: mpBurst .7s var(--ease) forwards; z-index: 5; }
@keyframes mpBurst { to { transform: scale(14); opacity: 0; } }

/* testimonials: no extra gap around cards */
figure.qcard { margin: 0; }
.qcard__quote { animation: mpFloat 6s ease-in-out infinite; }
.qcard .stars svg { animation: mpStar 2.8s ease-in-out infinite; color: #F5B50A; fill: #F5B50A; }
.qcard .stars svg:nth-child(2) { animation-delay: .15s; } .qcard .stars svg:nth-child(3) { animation-delay: .3s; } .qcard .stars svg:nth-child(4) { animation-delay: .45s; } .qcard .stars svg:nth-child(5) { animation-delay: .6s; }
@keyframes mpStar { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.3) rotate(18deg); } }
.qcard__av { transition: transform .5s var(--spring); }
.qcard:hover .qcard__av { transform: scale(1.1) rotate(-6deg); }
.swiper-slide-active .qcard { border-color: rgba(1, 150, 154, .45); }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__media { isolation: isolate; }
.ab-dots { position: absolute; z-index: -1; right: -26px; bottom: 8%; width: 140px; height: 140px; background-image: radial-gradient(var(--teal) 1.6px, transparent 1.6px); background-size: 16px 16px; opacity: .35; animation: floatBlob 10s ease-in-out infinite; }
.about__main { position: relative; }
.ab-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 20px; overflow: hidden; }
.ab-sheen::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: mpCardSheen 6s ease-in-out infinite; }
.about__main img { clip-path: inset(0 0 0 0 round 20px); }
.js .about__media:not(.is-in) .about__main img { clip-path: inset(0 100% 0 0 round 20px); }
.about__media.is-in .about__main img { transition: clip-path 1.4s var(--ease) .1s, transform 1.2s var(--ease); }
.ab-ic { position: absolute; z-index: 3; width: 58px; height: 58px; border-radius: 18px; background: #fff; color: var(--teal); display: grid; place-items: center; box-shadow: 0 18px 36px -18px rgba(9, 36, 60, .5); animation: bob 6s ease-in-out infinite; }
.ab-ic svg { width: 28px; height: 28px; }
.ab-ic--1 { left: -22px; top: 30%; color: var(--red); }
.ab-ic--1 svg { animation: mpBeat 1.6s ease-in-out infinite; }
.ab-ic--2 { right: 30%; bottom: 8px; animation-delay: -2s; }
.ab-ic--2 svg { animation: mpFloat 5s ease-in-out infinite; }
.ab-ic--3 { right: -24px; top: 52%; animation-delay: -4s; background: var(--navy); color: #fff; }
.about__count { overflow: hidden; }
.about__count::before { content: ""; position: absolute; width: 120px; height: 120px; right: -40px; top: -40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: ring 3s var(--ease) infinite; }
.ab-ecg { display: block; width: min(320px, 70%); height: 30px; margin: 10px 0 4px; }
.ab-ecg path { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.ab-ecg.is-in path { animation: mpDraw 2.2s var(--ease) forwards; }
.ab-ecg .dot { fill: var(--red); opacity: 0; }
.ab-ecg.is-in .dot { animation: mpDotIn .4s 2s forwards, mpBeat 1.4s 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mpDotIn { to { opacity: 1; } }
.about__lead { position: relative; border-left-color: transparent; }
.about__lead::before { content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--teal), var(--yellow)); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease) .3s; }
.about__lead.is-in::before { transform: scaleY(1); }
.ab-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0 67px; max-width: 560px; }
.ab-feats li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #F5FAFB; border: 1px solid #E3EEF0; font-family: var(--f-head); font-size: 14.5px; font-weight: 500; color: var(--navy); transition: transform .45s var(--spring), box-shadow .4s, background .4s, border-color .4s; }
.ab-feats li:hover { transform: translateY(-4px); background: #fff; border-color: transparent; box-shadow: 0 16px 30px -18px rgba(9, 36, 60, .45); }
.ab-feats i { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; transition: transform .6s var(--spring), background .3s; }
.ab-feats li:hover i { transform: rotateY(180deg); background: var(--navy); }
.ab-feats i svg { width: 20px; height: 20px; }
.ab-feats li:nth-child(1) i svg { animation: mpBeat 1.6s ease-in-out infinite; }
.ab-feats li:nth-child(4) i { background: var(--red); }

/* =====================================================================
   COUNTERS (24/7 emergency & trauma care strip)
   ===================================================================== */
.counters__ecg { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 120px; transform: translateY(-50%); z-index: 0; opacity: .55; pointer-events: none; }
.counters__ecg .ecg-base { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 2; }
.counters__ecg .ecg-beat { fill: none; stroke: #FF6B6E; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80 920; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(255, 107, 110, .9)); animation: mpEcgRun 4.5s linear infinite; }
.counters__row { position: relative; z-index: 1; }
.counter { position: relative; overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.counter::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), transparent 0 65%, rgba(1, 200, 205, .9) 82%, rgba(255, 204, 83, .9) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 5s linear infinite; pointer-events: none; }
.counter:nth-child(2)::after { animation-delay: -1.25s; } .counter:nth-child(3)::after { animation-delay: -2.5s; } .counter:nth-child(4)::after { animation-delay: -3.75s; }
.counter:hover { transform: translateY(-8px) scale(1.02); background: rgba(1, 150, 154, .22); }
.counter__ic { animation: none; position: relative; border: 0; background: radial-gradient(circle at 30% 30%, rgba(1, 200, 205, .55), rgba(1, 150, 154, .25)); box-shadow: 0 10px 24px -10px rgba(1, 150, 154, .9), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .6s var(--spring); }
.counter__ic::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .45); animation: spinSlow 14s linear infinite; }
.counter:hover .counter__ic { transform: rotateY(360deg); transition: transform 1s var(--ease); }
.counter__ic svg { animation: none; }
.counter:nth-child(1) .counter__ic svg { animation: mpDrive 1.6s ease-in-out infinite; }
.counter:nth-child(2) .counter__ic svg, .counter:nth-child(4) .counter__ic svg { animation: mpBeat 1.5s ease-in-out infinite; }
.counter:nth-child(4) .counter__ic svg { animation-delay: .4s; }
.counter:nth-child(3) .counter__ic svg { animation: mpPin 2.2s ease-in-out infinite; }
@keyframes mpDrive { 0%, 100% { transform: translateX(-3px); } 50% { transform: translate(3px, -1px); } }
.counter:nth-child(1) .counter__ic { background: radial-gradient(circle at 30% 30%, rgba(255, 107, 110, .7), rgba(239, 46, 50, .35)); box-shadow: 0 10px 24px -10px rgba(239, 46, 50, .9); }
.counter__t { position: relative; padding-bottom: 8px; }
.counter__t::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 70px; border-radius: 3px; background: linear-gradient(90deg, var(--yellow), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .4s; }
.counter.is-in .counter__t::after { transform: scaleX(1); }
@media (max-width: 767px) { .counter__t::after { left: 50%; margin-left: -35px; transform-origin: center; } }

/* =====================================================================
   AMBIENT MEDICAL ICONS (section backgrounds, static + scroll motion)
   ===================================================================== */
.sec-fx { display: none !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.section > .sec-fx { border-radius: inherit; }
.sfx { position: absolute; color: rgba(1, 150, 154, .16); }
.sfx svg { display: block; width: var(--s, 54px); height: var(--s, 54px); animation: mpFloat var(--t, 8s) ease-in-out var(--dl, 0s) infinite; }
.sfx--1 { left: 3%; top: 9%; --s: 58px; --t: 8s; }
.sfx--2 { right: 4%; top: 30%; --s: 46px; --t: 6.5s; --dl: -2s; color: rgba(239, 46, 50, .14); }
.sfx--3 { left: 46%; bottom: 5%; --s: 40px; --t: 7s; --dl: -4s; color: rgba(19, 58, 97, .12); }
.sfx--4 { right: 22%; top: 5%; --s: 36px; --t: 9s; --dl: -1s; color: rgba(255, 180, 40, .28); }
.sfx--2 svg { animation-name: mpFloat, mpBeat; animation-duration: var(--t), 1.7s; animation-iteration-count: infinite; }
@supports (animation-timeline: view()) {
  .sec-fx { animation: mpParallax linear both; animation-timeline: view(); }
  @keyframes mpParallax { from { transform: translateY(60px); } to { transform: translateY(-60px); } }
}
.panel--grey > .section > .wrap, .pkgs > .wrap { position: relative; z-index: 1; }
.pkgs { position: relative; }

/* =====================================================================
   HEALTH PACKAGES — same design as the live site
   (navy cards, yellow featured card, scrollable test list with a
   visible scrollbar, wide "Book Now" bar)
   ===================================================================== */
.mp-pk { position: relative; }
.mp-pk__track.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 470px)); justify-content: center; gap: 44px; margin-top: 8px; padding: 0; }
.pkgs .pcard { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; border-radius: 22px; background: #0A2340; color: #B9C6D3; overflow: hidden; height: auto; box-shadow: 0 30px 60px -38px rgba(9, 36, 60, .8); transition: transform .55s var(--ease), box-shadow .55s; }
.pkgs .pcard::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; background: radial-gradient(60cqi 40cqi at var(--px, 85%) var(--py, 0%), rgba(1, 150, 154, .26), transparent 70%); pointer-events: none; transition: opacity .4s; }
.pkgs .pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(1, 200, 205, .7) 84%, rgba(255, 204, 83, .8) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; animation: spinBorder 5s linear infinite; pointer-events: none; }
.pkgs .pcard:hover { transform: translateY(-10px); box-shadow: 0 44px 70px -36px rgba(9, 36, 60, .9); }
.pkgs .pcard:hover::after { opacity: 1; }
.pkgs .pcard > * { position: relative; z-index: 1; margin-inline: 9.4cqi; }
.pkgs .pcard h3 { display: flex; align-items: center; gap: 2.6cqi; margin-top: 10cqi; padding: 0 0 5.6cqi 2.6cqi; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-family: var(--f-head); font-size: clamp(15px, 4.2cqi, 21px); font-weight: 500; line-height: 1.3; }
.pkgs .pcard__price { margin-top: 10cqi; font-size: clamp(36px, 13.8cqi, 66px); font-weight: 400; line-height: 1; letter-spacing: -.5px; background-image: linear-gradient(90deg, #FFCC53, #FFE3A1, #FFCC53); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: priceShine 5s linear infinite; }
.pkgs .pcard > p { margin-top: 5.4cqi; padding-bottom: 8.4cqi; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: clamp(14px, 3.85cqi, 18.5px); line-height: 1.67; color: #B9C6D3; }
.pk-list { position: relative; margin-top: 7.2cqi; }
.pkgs .pk-list .pcard__list { display: block; margin: 0; padding: 0 9cqi 0 0; height: 55.5cqi; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; grid-template-columns: none; }
.pkgs .pk-list .pcard__list::-webkit-scrollbar { display: none; }
.pkgs .pk-list.no-sb .pcard__list { height: auto; }
.pkgs .pcard__list li { display: flex; align-items: center; gap: 3.2cqi; min-height: 9.2cqi; padding: 0; margin: 0; color: #fff; font-size: clamp(14px, 3.85cqi, 18.5px); font-weight: 500; line-height: 1.35; transition: transform .35s var(--ease), color .3s; }
.pkgs .pcard__list li:hover { transform: translateX(1.6cqi); color: var(--yellow); }
.pkgs .pcard__list svg { width: clamp(14px, 3.9cqi, 19px); height: clamp(14px, 3.9cqi, 19px); margin: 0; flex: none; color: #3DDC97; stroke-width: 2; }
.pkgs .pcard.is-in .pcard__list li svg { animation: mpCheck .5s var(--spring) both; animation-delay: calc(var(--li, 0) * 60ms + .3s); }
@keyframes mpCheck { from { transform: scale(0) rotate(-45deg); } }
.pk-sb { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); cursor: pointer; }
.pk-sb i { position: absolute; left: 0; right: 0; top: 0; height: var(--h, 50%); transform: translateY(var(--y, 0)); border-radius: 4px; background: #fff; cursor: grab; transition: background .3s; }
.pk-sb:hover i, .pk-sb.is-drag i { background: var(--yellow); }
.pk-list.no-sb .pk-sb { display: none; }
.pkgs .pcard .btn { margin-top: 11.6cqi; margin-bottom: 12.4cqi; width: auto; min-height: 0; height: 14cqi; padding: 0 8.6cqi; justify-content: space-between; border-radius: 3.2cqi; background: #2E4560; color: #fff; font-size: clamp(14px, 3.85cqi, 18.5px); font-weight: 500; }
.pkgs .pcard .btn::before { background: var(--teal); }
.pkgs .pcard .btn svg { width: clamp(16px, 4.6cqi, 22px); height: clamp(16px, 4.6cqi, 22px); animation: mpWiggle 3s ease-in-out infinite; }
.pkgs .pcard .btn:hover svg { animation: none; transform: translateX(4px); }
.pkgs .pcard__flag { display: none; }
/* featured (yellow) card */
.pkgs .pcard--hl { background: linear-gradient(180deg, #FBD680 0%, #FFCC53 100%); color: #0A2340; box-shadow: 0 36px 60px -34px rgba(224, 164, 0, .7); }
.pkgs .pcard--hl::before { background: radial-gradient(60cqi 40cqi at var(--px, 85%) var(--py, 0%), rgba(255, 255, 255, .5), transparent 70%); }
.pkgs .pcard--hl h3 { color: #0A2340; font-weight: 400; border-color: #0A2340; padding-left: 1.4cqi; }
.pkgs .pcard--hl .mp-ast { width: clamp(16px, 4.8cqi, 22px); height: clamp(16px, 4.8cqi, 22px); flex: none; color: #0A2340; animation: spinSlow 9s linear infinite; }
.pkgs .pcard--hl .pcard__price { background-image: linear-gradient(90deg, #0A2340, #2C5A86, #0A2340); }
.pkgs .pcard--hl > p { color: #0A2340; border-color: #0A2340; }
.pkgs .pcard--hl .pcard__list li { color: #0A2340; font-weight: 400; }
.pkgs .pcard--hl .pcard__list li:hover { color: var(--teal-2); }
.pkgs .pcard--hl .pcard__list svg { color: #0A2340; stroke-width: 1.8; }
.pkgs .pcard--hl .pk-sb { background: rgba(255, 255, 255, .4); }
.pkgs .pcard--hl .pk-sb:hover i { background: #0A2340; }
.pkgs .pcard--hl .btn { background: #0A2340; }
.pkgs .pcard--hl .shine { position: absolute; inset: 0; margin: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pkgs .pcard--hl .shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: mpCardSheen 5.5s ease-in-out infinite; }
@keyframes mpCardSheen { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.pkg-feats i { animation: mpBeat 2s ease-in-out infinite; }
.pkg-feats span:nth-child(2) i { animation-delay: .3s; } .pkg-feats span:nth-child(3) i { animation-delay: .6s; }
/* tablet / mobile: cards become a horizontal scroller */
.mp-pk__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.mp-pk__nav[hidden] { display: none; }
.mp-pk__bar { width: clamp(90px, calc(14 * var(--vw, 1vw)), 200px); height: 4px; border-radius: 4px; background: rgba(19, 58, 97, .12); overflow: hidden; }
.mp-pk__bar span { display: block; height: 100%; width: var(--w, 33%); border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--navy)); transform: translateX(var(--x, 0)); transition: transform .3s var(--ease), width .3s; }
.mp-pk__btn[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 1100px) {
  .mp-pk__track.pgrid { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 16px 6px 22px; margin: -16px -6px 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mp-pk__track.pgrid::-webkit-scrollbar { display: none; }
  .mp-pk__track > .pcard { flex: 0 0 calc((100% - 22px) / 2); scroll-snap-align: start; }
}
@media (max-width: 680px) { .mp-pk__track > .pcard { flex-basis: 88%; } }

/* =====================================================================
   FAQ — wider image, pop-up card never clipped
   ===================================================================== */
.faqband { overflow: visible; }
@media (min-width: 1101px) { .faqband__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }
.faqband__media { max-width: 580px; width: 100%; padding-left: 0; margin: 0 auto; position: relative; isolation: isolate; }
.faqband__media > img { aspect-ratio: 5 / 6; object-fit: cover; object-position: center top; width: 100%; border-radius: 24px; transition: transform 1s var(--ease); }
.faqband__media:hover > img { transform: scale(1.015); }
.faqband__media::before { content: ""; position: absolute; z-index: -1; inset: -14px; border-radius: 28px; border: 2px dashed rgba(1, 150, 154, .35); animation: mpDash 18s linear infinite; }
@keyframes mpDash { to { transform: rotate(1turn) scale(.98); } }
.faqband__media::before { animation: none; }
.faqband__ask { left: 18px; right: auto; bottom: 22px; top: auto; width: min(320px, calc(100% - 36px)); z-index: 3; transition: transform .5s var(--spring), box-shadow .4s; }
.faqband__ask:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 34px 60px -26px rgba(9, 36, 60, .55); animation-play-state: paused; }
.faqband__ask i { position: relative; }
.faqband__ask i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .5); animation: ring 2.2s var(--ease) infinite; }
.faqband__ask i svg { animation: mpSirenShake 2.6s ease-in-out infinite; }
.fq-bub { position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--teal); display: grid; place-items: center; font: 700 24px/1 var(--f-head); box-shadow: 0 16px 30px -16px rgba(9, 36, 60, .5); animation: bob 5s ease-in-out infinite; }
.fq-bub--1 { right: -20px; top: 10%; }
.fq-bub--2 { right: 12%; top: -18px; width: 42px; height: 42px; font-size: 18px; background: var(--yellow); color: var(--navy); animation-delay: -2s; border-radius: 50%; }
.acc details { transition: box-shadow .4s, transform .4s var(--ease); position: relative; overflow: hidden; }
.acc details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--teal), var(--yellow)); transform: scaleY(0); transition: transform .5s var(--ease); }
.acc details[open]::before { transform: scaleY(1); }
.acc details:hover { transform: translateX(4px); box-shadow: 0 12px 26px -18px rgba(9, 36, 60, .4); }
.acc summary:hover .acc__ic { background: var(--teal); color: #fff; transform: rotate(90deg); }
.acc details[open] summary:hover .acc__ic { transform: rotate(135deg); }
@media (max-width: 1100px) { .faqband__media { max-width: 520px; } .fq-bub--1 { right: -6px; } }
@media (max-width: 767px) {
  .faqband__media { max-width: 420px; }
  .faqband__media::before { inset: -10px; }
  .faqband__ask { position: relative; left: auto; bottom: auto; margin: -50px auto 0; width: calc(100% - 24px); }
  .fq-bub--1 { right: 4px; }
}

/* =====================================================================
   FOOTER — logo badge, four equal link columns, map strip
   ===================================================================== */
.footer__panel { overflow: hidden; }
.footer__ecg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60px; opacity: .6; pointer-events: none; z-index: 0; }
.footer__ecg .ecg-base { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.6; }
.footer__ecg .ecg-beat { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-dasharray: 70 930; stroke-dashoffset: 1000; filter: drop-shadow(0 0 5px rgba(1, 150, 154, .9)); animation: mpEcgRun 6s linear infinite; }
.footer__in { position: relative; z-index: 1; }

.ft-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, calc(2.4 * var(--vw, 1vw)), 44px); }
.footer__logo { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); position: relative; overflow: hidden; transition: transform .5s var(--spring); }
.footer__logo::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(1, 150, 154, .2), transparent); transform: skewX(-18deg); animation: mpCardSheen 6s ease-in-out infinite; }
.footer__logo:hover { transform: translateY(-3px) scale(1.03); }
.footer__logo img { height: clamp(48px, calc(4.2 * var(--vw, 1vw)), 66px); width: auto; display: block; filter: none; }
.ft-tag { margin: 0; color: var(--foot-text); font-size: 15px; line-height: 1.7; max-width: 520px; }
.ft-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.ft-emg { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 40px; background: rgba(239, 46, 50, .14); border: 1px solid rgba(239, 46, 50, .35); color: #fff; font-family: var(--f-head); font-weight: 600; font-size: 17px; line-height: 1.15; transition: background .3s, transform .4s var(--spring); }
.ft-emg small { display: block; font-size: 12px; font-weight: 500; color: #FFB4B5; letter-spacing: .3px; }
.ft-emg i { width: 42px; height: 42px; border-radius: 50%; background: var(--red); display: grid; place-items: center; flex: none; position: relative; }
.ft-emg i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(239, 46, 50, .6); animation: ring 1.8s var(--ease) infinite; }
.ft-emg i svg { width: 20px; height: 20px; animation: mpSirenShake 2.6s ease-in-out infinite; }
.ft-emg:hover { background: rgba(239, 46, 50, .25); transform: translateY(-3px); }

.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, calc(2.6 * var(--vw, 1vw)), 48px); }
.ft-col { min-width: 0; }
.ft-col h3 { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 19px; margin: 0 0 22px; padding-bottom: 14px; position: relative; }
.ft-col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform-origin: left; animation: mpGrow 3s ease-in-out infinite; }
@keyframes mpGrow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.7); } }
.ft-col h3 i { width: 38px; height: 38px; border-radius: 12px; background: rgba(1, 150, 154, .22); color: #7FE0E2; display: grid; place-items: center; flex: none; transition: transform .6s var(--spring), background .3s; }
.ft-col h3 i svg { width: 19px; height: 19px; }
.ft-col:hover h3 i { transform: rotateY(180deg); background: var(--teal); color: #fff; }
.ft-links li + li { margin-top: 11px; }
.ft-links a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--foot-text); font-size: 15px; line-height: 1.45; transition: color .25s, transform .35s var(--ease); }
.ft-links a .ch { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--teal); transition: transform .35s var(--spring), color .25s; }
.ft-links a span { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.ft-links a:hover { color: var(--yellow); transform: translateX(5px); }
.ft-links a:hover .ch { transform: translateX(3px); color: var(--yellow); }
.ft-links a:hover span { background-size: 100% 1px; }
.ft-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 7px 14px; border-radius: 30px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13.5px; font-weight: 500; transition: background .3s, transform .35s var(--spring); }
.ft-all .ch { width: 14px; height: 14px; animation: mpWiggle 3s ease-in-out infinite; }
.ft-all:hover { background: var(--teal); transform: translateY(-2px); }
.ft-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--foot-text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ft-contact li + li { margin-top: 14px; }
.ft-contact i { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; flex: none; transition: transform .5s var(--spring), background .3s; }
.ft-contact i svg { width: 17px; height: 17px; }
.ft-contact li:hover i { transform: rotate(-12deg) scale(1.08); background: var(--teal); }
.ft-contact a { color: #fff; transition: color .25s; }
.ft-contact a:hover { color: var(--yellow); }
.ft-contact .is-emg i { background: var(--red); }
.ft-contact .is-emg i svg { animation: mpSirenShake 2.6s ease-in-out infinite; }
.ft-contact .is-emg a { color: #FF8A8C; font-weight: 600; }
.ft-col--contact .fsocial { margin-top: 20px; flex-wrap: wrap; }
.fsocial a { position: relative; width: 44px; height: 44px; }
.fsocial a::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--spring); }
.fsocial a:hover::after { opacity: 1; transform: scale(1.12); }

.ft-map { position: relative; margin-top: clamp(30px, calc(3 * var(--vw, 1vw)), 46px); }
.ft-map .fmap { aspect-ratio: auto; height: clamp(190px, calc(16 * var(--vw, 1vw)), 250px); border: 0; padding: 5px; border-radius: 20px; background: linear-gradient(135deg, var(--teal), var(--yellow), var(--teal)); background-size: 200% 200%; animation: mpGrad 6s ease infinite; }
.ft-map .fmap iframe { border-radius: 15px; width: 100%; height: 100%; }
@keyframes mpGrad { 50% { background-position: 100% 100%; } }
.ft-dir { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; color: var(--navy); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); font-size: 13.5px; line-height: 1.35; transition: transform .45s var(--spring); }
.ft-dir b { display: block; font-family: var(--f-head); font-size: 16px; }
.ft-dir i { width: 42px; height: 42px; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; }
.ft-dir i svg { width: 20px; height: 20px; animation: mpPin 2.2s ease-in-out infinite; }
.ft-dir .ch { width: 18px; height: 18px; color: var(--teal); }
.ft-dir:hover { transform: translateY(-4px); }
.footer__bottom { position: relative; }
@media (max-width: 1100px) {
  .ft-top { grid-template-columns: auto minmax(0, 1fr); }
  .ft-cta { grid-column: 1 / -1; justify-content: flex-start; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { padding-inline: 56px; }
}
@media (max-width: 767px) {
  .ft-top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ft-cta { justify-content: center; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .ft-col--fac, .ft-col--contact { grid-column: 1 / -1; }
  .ft-col--fac .ft-links { columns: 2; column-gap: 18px; }
  .ft-col--fac .ft-links li { break-inside: avoid; margin: 0 0 11px; }
  .ft-links a, .ft-contact li { font-size: 14px; }
  .ft-dir { left: 12px; right: 12px; bottom: 12px; }
  .footer__panel { padding-inline: 16px; }
  .footer__bottom { padding-inline: 0; text-align: center; align-items: center; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1279.98px) and (min-width: 1101px) {
  .hdr-main .logo { margin-right: clamp(18px, calc(2.4 * var(--vw, 1vw)), 40px); }
  .menu > li { margin: 0 5px; }
}
@media (max-width: 1100px) {
  .hfx--2, .hfx--3 { display: none; }
  .hsteth { left: 4px; width: 70px; height: 70px; }
  .hsteth svg { width: 40px; height: 40px; }
  .ab-feats { margin-left: 0; }
}
@media (max-width: 767px) {
  .hfx--1, .hfx--4, .hfx--6 { display: none; }
  .hero-ecg { height: 60px; bottom: 4%; }
  .hchip--c { display: none; }
  .hsteth { width: 60px; height: 60px; bottom: auto; top: 44%; left: 4px; }
  .hsteth svg { width: 34px; height: 34px; }
  .ab-feats { grid-template-columns: 1fr; }
  .ab-ic { width: 46px; height: 46px; border-radius: 14px; }
  .ab-ic svg { width: 22px; height: 22px; }
  .ab-ic--1 { left: -6px; } .ab-ic--3 { right: -6px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-fx, .hdr-ecg .ecg-beat, .hero-ecg .ecg-beat, .counters__ecg .ecg-beat, .footer__ecg .ecg-beat { display: none; }
  .hfx svg, .hchip svg, .hsteth::before, .hsteth::after, .hsteth .st-head, .counter::after, .counter__ic::before, .counter__ic svg, .ab-dots, .sfx svg, .sec-fx, .pkgs .pcard--hl .shine::after, .pkgs .pcard::after, .pkgs .pcard__price, .ab-sheen::after, .ft-col h3::after, .ft-emg i svg, .ft-emg i::after, .ft-all .ch, .link-more svg, .shead .btn, .shead .btn svg, .ab-ic, .ab-ic svg, .fq-bub, .btn::after, .hform__circle, .qcard__quote, .qcard .stars svg, .pkgs .pcard--hl::after, .hq-appt::after, .fmap, .footer__logo::after, .mhdr::after, .hdr, .scard__img::before, .fcard__go::before, .tcard__img::before, .bcard__date::after, .footer h3::after, .pkg-feats i { animation: none !important; }
  .hsteth .st-tube, .ab-ecg path { stroke-dashoffset: 0 !important; }
  .ab-ecg .dot { opacity: 1; }
  .js .about__media:not(.is-in) .about__main img { clip-path: none; }
  .hslide__frame, .hfx, .hslide__media .hchip, .hsteth { transform: none !important; translate: none !important; }
  .swiper-slide.mp-in { animation: none; }
}

/* Blogs: three cards side by side, no slider */
.mp-blogs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mp-blogs .bcard { height: 100%; }
@media (max-width: 1023px) { .mp-blogs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 640px) { .mp-blogs { grid-template-columns: 1fr; gap: 20px; } }
/* Footer map: taller, clear space above it */
.ft-map { margin-top: 48px !important; padding-top: 8px; }
.ft-map .fmap { height: 320px !important; }
.ft-col--contact .fsocial { margin-bottom: 8px; }
@media (max-width: 767px) { .ft-map .fmap { height: 280px !important; } }
/* =====================================================================
   ABOUT US page
   ===================================================================== */
/* ---------- Hero ---------- */
.ptitle { position: relative; isolation: isolate; overflow: hidden; }
.pt-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pt-fx .hfx { color: rgba(255, 255, 255, .3); }
.pt-fx .hfx--1 { left: 3%; top: 12%; }
.pt-fx .hfx--2 { left: 38%; top: 10%; }
.pt-fx .hfx--3 { left: 58%; bottom: 22%; }
.pt-fx .hfx--4 { right: 3%; top: 8%; }
.pt-fx .hfx--5 { right: 30%; bottom: 40%; }
.pt-fx .hfx--6 { left: 26%; bottom: 46%; }
.pt-fx .hero-ecg { bottom: 0; height: 80px; opacity: .75; }
.pt-fx .hfx-orb--1 { right: 10%; top: -100px; }
.pt-fx .hfx-orb--2 { left: 6%; bottom: -150px; }
.ptitle__row { position: relative; z-index: 2; }
.pt-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pt-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 30px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; animation: fInLeft .9s var(--ease) .2s both; }
.pt-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: pulseDot 1.8s infinite; }
.pt-line { display: block; width: 110px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform-origin: left; animation: skewIn 1s var(--ease) 1s both; position: relative; overflow: hidden; }
.pt-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); animation: lineShine 2.4s ease-in-out infinite; }
.ptitle h1 { text-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ptitle h1 .w:nth-child(n+2) > span { background: linear-gradient(90deg, #fff 0%, var(--yellow) 30%, #7FE0E2 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: wordUp 1s var(--ease) forwards, mpHeadShine 6s linear 1.6s infinite; animation-delay: calc(.35s + var(--i) * 70ms), 1.6s; }
.pt-mark { position: absolute; z-index: 1; right: clamp(16px, 3vw, 60px); top: 50%; transform: translateY(-62%); font: 800 clamp(70px, 11vw, 190px)/1 var(--f-head); letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); white-space: nowrap; pointer-events: none; animation: ptMark 1.4s var(--ease) .4s both, ptMarkFloat 9s ease-in-out 1.8s infinite; translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -10px); transition: translate .8s var(--ease); }
@keyframes ptMark { from { opacity: 0; transform: translate(80px, -62%); } }
@keyframes ptMarkFloat { 0%, 100% { transform: translateY(-62%); } 50% { transform: translateY(-56%); } }
.pt-sweep { position: absolute; z-index: 1; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); transform: skewX(-20deg); animation: sweep 6s ease-in-out infinite; pointer-events: none; }
.crumb [aria-current] { position: relative; animation: mpHeart 2.4s ease-in-out 2s infinite; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
.crumb a { transition: color .3s; }
@media (max-width: 767px) { .pt-mark { font-size: 56px; top: 24%; opacity: .55; } }
.pstrip__row p { position: relative; padding-left: 20px; }
.pstrip__row p::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--teal), var(--yellow)); animation: skewIn 1s var(--ease) .9s both; transform-origin: top; }
.pstrip { position: relative; overflow: hidden; }
.pstrip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; background: linear-gradient(90deg, transparent, rgba(1, 150, 154, .08), transparent); transform: skewX(-20deg); animation: sweep 7s ease-in-out infinite; pointer-events: none; }
@media (max-width: 1100px) { .pt-chips { display: none; } }

/* ---------- Vision / Mission / Core values ---------- */
.vmv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); align-items: stretch; perspective: 1400px; }
.vmv-card { --c: var(--teal); --cs: rgba(1, 150, 154, .16); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.6vw, 40px); border-radius: 24px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 24px 50px -38px rgba(9, 36, 60, .5); transition: transform .6s var(--ease), box-shadow .6s, border-color .4s; transform-style: preserve-3d; }
.vmv-card--mission { --c: var(--yellow); --cs: rgba(255, 204, 83, .22); background: linear-gradient(160deg, #133A61 0%, #09243C 100%); border-color: transparent; color: #C8D4E0; }
.vmv-card--values { --c: var(--red); --cs: rgba(239, 46, 50, .12); }
.vmv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, var(--c) 80%, var(--teal) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinBorder 5s linear infinite; opacity: .55; transition: opacity .4s; }
.vmv-card::after { content: ""; position: absolute; z-index: -2; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, var(--cs), transparent 70%); animation: floatBlob 10s ease-in-out infinite; }
.vmv-card:hover { transform: translateY(-12px); box-shadow: 0 40px 70px -40px rgba(9, 36, 60, .6); }
.vmv-card:hover::before { opacity: 1; }
.vmv-num { position: absolute; right: 26px; top: 18px; font: 700 clamp(56px, 5vw, 84px)/1 var(--f-head); color: transparent; -webkit-text-stroke: 1.5px rgba(19, 58, 97, .14); transition: transform .6s var(--spring), -webkit-text-stroke-color .4s; }
.vmv-card--mission .vmv-num { -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.vmv-card:hover .vmv-num { transform: translateY(-6px) scale(1.06); -webkit-text-stroke-color: var(--c); }
.vmv-ic { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 16px 30px -14px var(--c); margin-bottom: 8px; transition: transform .8s var(--spring); }
.vmv-card--mission .vmv-ic { color: var(--navy-2); }
.vmv-ic svg { width: 38px; height: 38px; position: relative; z-index: 1; }
.vmv-card:hover .vmv-ic { transform: rotateY(360deg); }
.vmv-orbit { position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c) 60%, transparent); animation: spinSlow 12s linear infinite; }
.vmv-orbit::after { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.vmv-card--vision .vmv-ic svg { animation: mpBlink 4s ease-in-out infinite; }
@keyframes mpBlink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
.vmv-card--mission .vmv-ic svg { animation: mpPulseRing 2.4s ease-in-out infinite; }
@keyframes mpPulseRing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.vmv-card--values .vmv-ic svg { animation: mpFloat 4s ease-in-out infinite; }
.vmv-card h3 { font-size: clamp(22px, 1.6vw, 28px); color: var(--navy); position: relative; padding-bottom: 12px; }
.vmv-card--mission h3 { color: #fff; }
.vmv-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--c); transition: width .6s var(--ease); }
.vmv-card:hover h3::after { width: 96px; }
.vmv-card p { margin: 0; font-size: 16px; line-height: 1.75; }
.vmv-card--mission p { color: #D7E2EC; }
.vmv-values { display: grid; gap: 10px; margin-top: 4px; }
.vmv-values li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #F6F9FA; border: 1px solid #E6EDF0; font-family: var(--f-head); font-weight: 500; color: var(--navy); transition: transform .45s var(--spring), background .3s, border-color .3s; }
.vmv-values li:hover { transform: translateX(8px); background: #fff; border-color: var(--c); }
.vmv-values i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.vmv-values i svg { width: 18px; height: 18px; }
.vmv-values li:nth-child(1) i { background: var(--red); } .vmv-values li:nth-child(1) i svg { animation: mpBeat 1.6s ease-in-out infinite; }
.vmv-values li:nth-child(2) i { background: var(--teal); }
.vmv-values li:nth-child(3) i { background: var(--yellow); color: var(--navy-2); } .vmv-values li:nth-child(3) i svg { animation: spinSlow 6s linear infinite; }
.vmv-card.is-in .vmv-values li { animation: mpValIn .7s var(--spring) both; }
.vmv-card.is-in .vmv-values li:nth-child(2) { animation-delay: .12s; } .vmv-card.is-in .vmv-values li:nth-child(3) { animation-delay: .24s; }
@keyframes mpValIn { from { opacity: 0; transform: translateX(-24px) scale(.94); } }
@media (max-width: 1023px) { .vmv { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }

/* ---------- Leadership spotlight ---------- */
.ld { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(22px, 3vw, 48px); align-items: start; }
.ld-tabs { display: grid; gap: 12px; position: sticky; top: 120px; }
.ld-tab { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid #E3EAEE; background: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform .45s var(--spring), border-color .3s, box-shadow .4s, background .3s; }
.ld-tab:hover { transform: translateX(6px); border-color: rgba(1, 150, 154, .4); }
.ld-tab[aria-selected="true"] { background: linear-gradient(120deg, #133A61, #09243C); border-color: transparent; box-shadow: 0 20px 40px -24px rgba(9, 36, 60, .7); transform: translateX(10px); }
.ld-tab__img { width: 58px; height: 58px; border-radius: 14px; overflow: hidden; flex: none; background: linear-gradient(170deg, #EAF6F7, #CDE6EC); }
.ld-tab__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.ld-tab:hover .ld-tab__img img { transform: scale(1.1); }
.ld-tab__txt b { display: block; font-family: var(--f-head); font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.ld-tab__txt small { display: block; font-size: 13px; color: var(--teal); margin-top: 3px; }
.ld-tab[aria-selected="true"] b { color: #fff; }
.ld-tab[aria-selected="true"] small { color: var(--yellow); }
.ld-tab__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform: scaleX(0); transform-origin: left; }
.ld-tab[aria-selected="true"] .ld-tab__bar { animation: ldBar var(--ld-t, 8s) linear forwards; }
.ld.is-paused .ld-tab[aria-selected="true"] .ld-tab__bar { animation-play-state: paused; }
@keyframes ldBar { to { transform: scaleX(1); } }
.ld-tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ld-stage { position: relative; border-radius: 28px; background: linear-gradient(150deg, #F3F9FA 0%, #E3F1F4 100%); border: 1px solid #E0ECEF; padding: clamp(22px, 3vw, 44px); overflow: hidden; isolation: isolate; min-height: 100%; }
.ld-stage::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -140px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(1, 150, 154, .2), transparent 70%); animation: floatBlob 12s ease-in-out infinite; }
.ld-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(19, 58, 97, .08) 1.4px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(120deg, transparent 30%, #000 70%); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 70%); }
.ld-panel { display: none; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(22px, 3vw, 46px); align-items: center; }
.ld-panel.is-active { display: grid; }
.ld-photo { position: relative; border-radius: 24px; aspect-ratio: 1 / 1.08; background: linear-gradient(170deg, #FFFFFF 0%, #CDE6EC 100%); isolation: isolate; box-shadow: 0 30px 60px -36px rgba(9, 36, 60, .6); }
.ld-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.ld-ring { position: absolute; z-index: 0; inset: 10% 6% -4%; border-radius: 50%; border: 2px dashed rgba(1, 150, 154, .35); animation: spinSlow 24s linear infinite; }
.ld-ring--2 { inset: 22% 18% 8%; border: 0; background: conic-gradient(from var(--ang, 0deg), rgba(1, 150, 154, .3), transparent 40%, rgba(255, 204, 83, .35), transparent 80%); animation: spinBorder 8s linear infinite; }
.ld-badge { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 30px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -16px rgba(9, 36, 60, .6); }
.ld-badge i { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.ld-badge i svg { width: 13px; height: 13px; }
.ld-bio { position: relative; }
.ld-quote { position: absolute; right: 0; top: -30px; font: 700 140px/1 Georgia, serif; color: rgba(1, 150, 154, .12); pointer-events: none; }
.ld-bio h3 { font-size: clamp(24px, 2vw, 34px); color: var(--navy); }
.ld-bio .leader__role { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 18px; padding: 5px 14px; border-radius: 30px; background: var(--teal); color: #fff; font-size: 14px; font-weight: 500; }
.ld-bio p:not(.leader__role) { font-size: 15.5px; line-height: 1.8; color: var(--text-2); margin: 0 0 12px; }
.ld-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ld-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 30px; background: #fff; border: 1px solid #DCE8EB; color: var(--navy); font-size: 13px; font-weight: 500; transition: transform .4s var(--spring), border-color .3s; }
.ld-tags span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.ld-tags span:nth-child(2)::before { background: var(--yellow); } .ld-tags span:nth-child(3)::before { background: var(--red); }
.ld-tags span:hover { transform: translateY(-3px); border-color: var(--teal); }
/* panel entrance on switch */
.ld-panel.is-active .ld-photo { animation: ldPhoto .9s var(--ease) both; }
.ld-panel.is-active .ld-bio > * { animation: ldText .8s var(--ease) both; }
.ld-panel.is-active .ld-bio > :nth-child(2) { animation-delay: .06s; } .ld-panel.is-active .ld-bio > :nth-child(3) { animation-delay: .12s; }
.ld-panel.is-active .ld-bio > :nth-child(4) { animation-delay: .18s; } .ld-panel.is-active .ld-bio > :nth-child(5) { animation-delay: .24s; } .ld-panel.is-active .ld-bio > :nth-child(6) { animation-delay: .3s; }
@keyframes ldPhoto { from { opacity: 0; clip-path: inset(0 0 100% 0 round 24px); transform: scale(1.04); } to { opacity: 1; clip-path: inset(0 0 0 0 round 24px); } }
@keyframes ldText { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 1023px) {
  .ld { grid-template-columns: 1fr; }
  .ld-tabs { position: static; display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ld-tabs::-webkit-scrollbar { display: none; }
  .ld-tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
  .ld-tab:hover, .ld-tab[aria-selected="true"] { transform: none; }
}
@media (max-width: 767px) {
  .ld-panel { grid-template-columns: 1fr; }
  .ld-photo { max-width: 340px; width: 100%; margin-inline: auto; }
  .ld-tab__txt small { display: none; }
  .ld-tab__img { width: 46px; height: 46px; }
  .ld-tab__txt b { font-size: 14px; }
}

/* ---------- Why choose us: care hub (light background, same as Vision & Mission) ---------- */
.wcu-sec .section { position: relative; overflow: hidden; }
.wcu-sec .section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(19, 58, 97, .08) 1.3px, transparent 1.3px); background-size: 26px 26px; animation: dotsDrift 30s linear infinite; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.wcu-sec .wrap { position: relative; z-index: 1; }
.wcu { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 360px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 40px); align-items: center; }
.wcu-col { display: grid; gap: 18px; }
.wcu-item { --c: var(--teal); --ci: var(--teal); position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 18px 40px -34px rgba(9, 36, 60, .5); transition: transform .5s var(--spring), border-color .4s, box-shadow .5s; overflow: visible; }
.wcu-col--l .wcu-item { flex-direction: row-reverse; text-align: right; }
.wcu-item:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 80%, transparent); }
.wcu-item > div { position: relative; z-index: 1; }
.wcu-item .wcu-fill { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.wcu-item .wcu-fill::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%); opacity: 0; transition: opacity .5s; }
.wcu-item .wcu-fill::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); }
.wcu-item:hover .wcu-fill::before { opacity: 1; }
.wcu-item:hover .wcu-fill::after { animation: mpCardSheen 1.2s var(--ease); }
.wcu-ic { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; flex: none; color: var(--ci); background: color-mix(in srgb, var(--c) 16%, #fff); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: transform .8s var(--spring), background .4s, color .4s; }
.wcu-ic svg { width: 28px; height: 28px; }
.wcu-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px solid var(--c); opacity: 0; animation: wcuRing 3s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes wcuRing { 0% { opacity: .7; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
.wcu-item:hover .wcu-ic { transform: rotateY(360deg); background: var(--c); color: #fff; }
.wcu-n { display: inline-block; font: 700 12px/1 var(--f-head); letter-spacing: 1.5px; color: var(--ci); margin-bottom: 6px; }
.wcu-item h3 { color: var(--navy); font-size: clamp(17px, 1.2vw, 20px); margin-bottom: 6px; }
.wcu-item p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.65; }
/* connectors to the hub */
.wcu-item::before { content: ""; position: absolute; top: 50%; width: clamp(18px, 2.4vw, 40px); height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, transparent), var(--c)); }
.wcu-col--l .wcu-item::before { left: 100%; }
.wcu-col--r .wcu-item::before { right: 100%; transform: scaleX(-1); }
.wcu-item .wcu-dot { position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: wcuDotL 2.4s linear infinite; animation-delay: var(--d, 0s); }
.wcu-col--l .wcu-dot { left: 100%; }
.wcu-col--r .wcu-dot { right: 100%; animation-name: wcuDotR; }
@keyframes wcuDotL { from { transform: translateX(0); opacity: 1; } to { transform: translateX(clamp(18px, 2.4vw, 40px)); opacity: 0; } }
@keyframes wcuDotR { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(-1 * clamp(18px, 2.4vw, 40px))); opacity: 0; } }
/* brand colours */
.wcu-item--1 { --c: #01969A; --ci: #01969A; --d: 0s; }
.wcu-item--2 { --c: #FFCC53; --ci: #8A5A00; --d: .4s; }
.wcu-item--3 { --c: #133A61; --ci: #133A61; --d: .8s; }
.wcu-item--4 { --c: #EF2E32; --ci: #EF2E32; --d: 1.2s; }
.wcu-item--5 { --c: #36C3C6; --ci: #017E81; --d: 1.6s; }
.wcu-item--6 { --c: #E0A400; --ci: #8A5A00; --d: 2s; }
.wcu-item--4 .wcu-ic svg { animation: mpBeat 1.6s ease-in-out infinite; }
.wcu-item--6 .wcu-ic svg { animation: mpTick 6s linear infinite; }
.wcu-item--2 .wcu-ic svg { animation: mpFloat 4s ease-in-out infinite; }
.wcu-item--1 .wcu-ic svg, .wcu-item--5 .wcu-ic svg { animation: mpPin 2.6s ease-in-out infinite; }
.wcu-item--3 .wcu-ic svg { animation: mpPulseRing 2.4s ease-in-out infinite; }
/* hub */
.wcu-hub { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.wcu-hub__r { position: absolute; border-radius: 50%; }
.wcu-hub__r--1 { inset: 0; border: 2px dashed rgba(19, 58, 97, .2); animation: spinSlow 40s linear infinite; }
.wcu-hub__r--2 { inset: 9%; background: conic-gradient(from var(--ang, 0deg), #01969A, transparent 25%, #FFCC53, transparent 50%, #EF2E32, transparent 75%, #01969A); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spinBorder 7s linear infinite; }
.wcu-hub__r--3 { inset: 18%; background: radial-gradient(circle at 30% 25%, #1E5A8C, #09243C 70%); box-shadow: 0 30px 60px -24px rgba(9, 36, 60, .65), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wcu-hub__r--3::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .5); animation: ring 2.6s var(--ease) infinite; }
.wcu-text { position: absolute; inset: -4%; width: 108%; height: 108%; animation: spinSlow 30s linear infinite reverse; }
.wcu-text text { font: 600 9px var(--f-head); letter-spacing: 1.9px; fill: var(--navy); opacity: .55; }
.wcu-orbit { position: absolute; inset: 9%; animation: spinSlow 14s linear infinite; }
.wcu-orbit span { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; border: 2px solid #fff; }
.wcu-orbit span:nth-child(1) { left: 50%; top: 0; background: #01969A; box-shadow: 0 0 14px #01969A; }
.wcu-orbit span:nth-child(2) { left: 93%; top: 75%; background: #FFCC53; box-shadow: 0 0 14px #FFCC53; }
.wcu-orbit span:nth-child(3) { left: 7%; top: 75%; background: #EF2E32; box-shadow: 0 0 14px #EF2E32; }
.wcu-hub__core { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; color: #fff; gap: 4px; }
.wcu-hub__core svg { width: clamp(46px, 4vw, 62px); height: clamp(46px, 4vw, 62px); color: #FF6B6E; animation: mpBeat 1.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 107, 110, .6)); }
.wcu-hub__core b { font: 700 clamp(34px, 3vw, 48px)/1 var(--f-head); background: linear-gradient(90deg, #fff, var(--yellow), #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: priceShine 4s linear infinite; }
.wcu-hub__core small { font-size: 13px; color: #C8D4E0; letter-spacing: .4px; }
.wcu-hub__ecg { width: 70%; height: 26px; margin-top: 4px; }
.wcu-hub__ecg path { fill: none; stroke: #36C3C6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: mpEcgDraw 2s linear infinite; }
.wcu-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 1100px) {
  .wcu { grid-template-columns: 1fr 1fr; }
  .wcu-hub { grid-column: 1 / -1; order: -1; width: min(320px, 80%); margin: 0 auto 10px; }
  .wcu-col--l .wcu-item { flex-direction: row; text-align: left; }
  .wcu-item::before, .wcu-dot { display: none; }
}
@media (max-width: 767px) { .wcu { grid-template-columns: 1fr; } }

/* ---------- More motion ---------- */
.ld-photo { transition: transform .6s var(--ease); transform-style: preserve-3d; }
@keyframes mpHeadShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.ld-tab__img { position: relative; }
.ld-tab[aria-selected="true"] .ld-tab__img { box-shadow: 0 0 0 2px var(--yellow); animation: mpHeart 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pt-fx, .pt-mark, .pt-sweep, .wcu-text, .ptitle h1 .w > span, .crumb [aria-current], .vmv-sec .shead h2, .wcu-sec .shead h2, .ld-tab__img, .pt-line::after, .pstrip::after, .vmv-card::before, .vmv-card::after, .vmv-orbit, .vmv-ic svg, .vmv-values i svg, .ld-ring, .ld-stage::before, .wcu-ic::after, .wcu-ic svg, .wcu-dot, .wcu-hub__r, .wcu-hub__r--3::after, .wcu-orbit, .wcu-hub__core svg, .wcu-hub__core b, .wcu-hub__ecg path, .wcu-sec .section::before { animation: none !important; }
  .wcu-hub__ecg path { stroke-dashoffset: 0; }
  .ld-tab[aria-selected="true"] .ld-tab__bar { animation: none; transform: scaleX(1); }
}
/* =====================================================================
   SPECIALITIES page
   ===================================================================== */
.ptitle h1 .w:only-child > span { background: linear-gradient(90deg, #fff 0%, var(--yellow) 30%, #7FE0E2 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: wordUp 1s var(--ease) forwards, mpHeadShine 6s linear 1.6s infinite; animation-delay: .35s, 1.6s; }

/* ---------- Ticker strip ---------- */
.sp-ticker { margin: clamp(26px, 3vw, 44px) var(--gap-x, 15px) 0; border-radius: 18px; background: linear-gradient(90deg, #09243C, #133A61); overflow: hidden; position: relative; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sp-ticker__track { display: flex; width: max-content; gap: 40px; animation: mqTick 60s linear infinite; }
.sp-ticker:hover .sp-ticker__track { animation-play-state: paused; }
.sp-ticker a { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--f-head); font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; white-space: nowrap; transition: color .3s; }
.sp-ticker a:hover { color: var(--yellow); }
.sp-ticker a i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--c, #36C3C6); }
.sp-ticker a i svg { width: 16px; height: 16px; animation: mpBeat 1.8s ease-in-out infinite; }
@keyframes mqTick { to { transform: translateX(-50%); } }

/* ---------- Toolbar: filters + search ---------- */
.sp-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 2.6vw, 38px); }
.sp-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-chips .chip { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 18px; font-size: 14.5px; transition: background .35s, color .35s, border-color .35s, transform .45s var(--spring), box-shadow .4s; }
.sp-chips .chip i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #01969A) 14%, #fff); color: var(--c, #01969A); transition: transform .6s var(--spring), background .3s, color .3s; }
.sp-chips .chip i svg { width: 14px; height: 14px; }
.sp-chips .chip .n { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 20px; display: grid; place-items: center; background: var(--grey); color: var(--navy); font-size: 12.5px; font-weight: 600; transition: background .3s, color .3s; }
.sp-chips .chip:hover i { transform: rotate(-15deg) scale(1.1); }
.sp-chips .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 14px 28px -16px rgba(9, 36, 60, .8); transform: translateY(-2px); }
.sp-chips .chip[aria-pressed="true"] i { background: var(--c, #01969A); color: #fff; transform: rotateY(360deg); }
.sp-chips .chip[aria-pressed="true"] .n { background: var(--yellow); color: var(--navy-2); }
.sp-tools .search { flex: 0 1 380px; }
.sp-tools .search input { height: 50px; border-radius: 30px; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.sp-tools .search input:focus { transform: translateY(-2px); }
.sp-tools .search svg { animation: mpFloat 4s ease-in-out infinite; }
.sp-count { width: 100%; font-size: 14px; color: var(--text); margin-top: -6px; }
.sp-count b { color: var(--teal); font-family: var(--f-head); }

/* ---------- Cards ---------- */
.sp-grid { --g: clamp(18px, 2vw, 30px); --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); perspective: 1600px; }
.sp-grid > .sp-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); min-width: 0; }
@media (max-width: 1279px) { .sp-grid { --cols: 3; } }
@media (max-width: 899px) { .sp-grid { --cols: 2; } }
@media (max-width: 559px) { .sp-grid { --cols: 1; } }
.sp-card { --c: #01969A; position: relative; }
.sp-card[data-cat="emergency"] { --c: #EF2E32; }
.sp-card[data-cat="surgical"] { --c: #133A61; }
.sp-card[data-cat="women-child"] { --c: #E0A400; }
.sp-in { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 14px 34px -28px rgba(9, 36, 60, .55); transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .6s, border-color .4s; isolation: isolate; }
.sp-in::before { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--c) 80%, var(--yellow) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; animation: spinBorder 4s linear infinite; pointer-events: none; }
.sp-in::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(220px 160px at var(--px, 50%) var(--py, 0%), color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.sp-card:hover .sp-in { box-shadow: 0 40px 70px -40px rgba(9, 36, 60, .6); border-color: transparent; }
.sp-card:hover .sp-in::before, .sp-card:hover .sp-in::after { opacity: 1; }
.sp-card:active .sp-in { transform: scale(.98) !important; transition-duration: .15s; }
.sp-media { position: relative; display: block; aspect-ratio: 736 / 560; border-radius: 22px 22px 0 0; overflow: hidden; background: linear-gradient(160deg, #E5F2F5, #CFE5EC); }
.sp-media img { width: 100%; height: 112%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
@supports (animation-timeline: view()) {
  .sp-media img { animation: spParallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes spParallax { from { translate: 0 -8%; } to { translate: 0 0; } }
}
.sp-card:hover .sp-media img { transform: scale(1.1) rotate(1deg); }
.sp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c) 70%, #09243C) 130%); opacity: .55; transition: opacity .5s; }
.sp-card:hover .sp-shade { opacity: .95; }
.sp-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1.1s var(--ease); }
.sp-card:hover .sp-media::after { transform: translateX(130%); }
.sp-num { position: absolute; left: 16px; top: 14px; font: 700 15px/1 var(--f-head); color: #fff; padding: 7px 10px; border-radius: 10px; background: rgba(9, 36, 60, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .5s var(--spring); }
.sp-card:hover .sp-num { transform: translateY(-3px) rotate(-6deg); }
.sp-tag { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 12px; font-weight: 600; }
.sp-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: spDot 2s ease-out infinite; }
@keyframes spDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.sp-ic { position: absolute; z-index: 4; left: 22px; top: -30px; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--c); border: 4px solid #fff; box-shadow: 0 14px 28px -12px var(--c); transform: translateZ(40px); transition: transform .8s var(--spring), border-radius .5s; }
.sp-ic svg { width: 26px; height: 26px; }
.sp-card[data-cat="women-child"] .sp-ic { color: var(--navy-2); background: var(--yellow); }
.sp-card:hover .sp-ic { transform: translateZ(60px) rotateY(360deg); border-radius: 50%; }
.sp-card[data-cat="emergency"] .sp-ic svg { animation: mpSirenShake 2.6s ease-in-out infinite; }
.sp-card[data-cat="medical"] .sp-ic svg, .sp-card[data-cat="women-child"] .sp-ic svg { animation: mpBeat 1.8s ease-in-out infinite; }
.sp-card[data-cat="surgical"] .sp-ic svg { animation: mpFloat 4s ease-in-out infinite; }
.sp-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 42px clamp(18px, 1.6vw, 26px) 22px; transform: translateZ(20px); }
.sp-body h3 { font-size: clamp(17px, 1.15vw, 20px); line-height: 1.35; color: var(--navy); }
.sp-body h3 a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.sp-card:hover .sp-body h3 a { background-size: 100% 1.5px; color: var(--teal); }
.sp-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); flex: 1; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px dashed #DCE5E9; }
.sp-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--navy); transition: color .3s, gap .4s var(--ease); }
.sp-more:hover { color: var(--teal); gap: 12px; }
.sp-go { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grey); color: var(--navy); transition: background .35s, color .35s, transform .6s var(--spring); }
.sp-go svg { width: 18px; height: 18px; }
.sp-card:hover .sp-go { background: var(--c); color: #fff; transform: rotate(-45deg) scale(1.08); }
.sp-card[data-cat="women-child"]:hover .sp-go { color: var(--navy-2); }
/* re-entry after filtering */
.sp-card.sp-pop { animation: spPop .7s var(--spring) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes spPop { from { opacity: 0; transform: perspective(900px) rotateX(-22deg) translateY(30px) scale(.92); } }
.sp-grid .empty { grid-column: 1 / -1; }

/* ---------- CTA band ---------- */
.sp-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(36px, 4vw, 60px); padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: linear-gradient(120deg, #133A61, #09243C); color: #D7E2EC; }
.sp-cta::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(1, 150, 154, .45), transparent 70%); animation: floatBlob 12s ease-in-out infinite; }
.sp-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); transform: skewX(-20deg); animation: sweep 6s ease-in-out infinite; pointer-events: none; }
.sp-cta__ic { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.sp-cta__ic::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .6); animation: ring 2.2s var(--ease) infinite; }
.sp-cta__ic svg { width: 40px; height: 40px; animation: mpFloat 4s ease-in-out infinite; }
.sp-cta h3 { color: #fff; font-size: clamp(20px, 1.6vw, 28px); margin-bottom: 6px; }
.sp-cta p { margin: 0; }
.sp-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 899px) { .sp-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; } .sp-cta__btns { justify-content: center; } }
@media (max-width: 767px) { .sp-tools .search { flex: 1 1 100%; max-width: none; } .sp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .sp-chips::-webkit-scrollbar { display: none; } .sp-chips .chip { flex: none; } }

@media (prefers-reduced-motion: reduce) {
  .sp-ticker__track, .sp-in::before, .sp-tag::before, .sp-ic svg, .sp-media img, .sp-cta::before, .sp-cta::after, .sp-cta__ic::after, .sp-cta__ic svg, .sp-tools .search svg, .sp-card.sp-pop { animation: none !important; }
}
/* =====================================================================
   HEADER: dropdowns (two columns, icons, "View all" button)
   ===================================================================== */
/* the header row must sit above the page-title banner, otherwise dropdowns slide underneath it */
.hdr-main { position: relative; z-index: 940; }
.hdr-main.is-stuck { z-index: 950; }
.menu > li { position: relative; }
.menu .sub.mega { left: 50%; top: calc(100% - 6px); width: min(640px, 92vw); min-width: 0; padding: 0; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -24px rgba(9, 36, 60, .45), 0 0 0 1px rgba(9, 36, 60, .06); transform: translate(-50%, 16px) scale(.97); transform-origin: top center; transition: opacity .3s, transform .45s var(--spring), visibility .3s; max-height: none; overflow: visible; display: block; }
.menu > li:hover .sub.mega, .menu > li:focus-within .sub.mega { transform: translate(-50%, 0) scale(1); }
.menu .sub.mega::before { content: ""; position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; box-shadow: -2px -2px 4px rgba(9, 36, 60, .05); }
.menu .sub.mega::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mega--doc { width: min(600px, 92vw) !important; }
.mega--fac { width: min(580px, 92vw) !important; }
.mega__head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px 22px 0 0; background: linear-gradient(120deg, #133A61, #09243C); color: #fff; overflow: hidden; }
.mega__head::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); transform: skewX(-20deg); animation: sweep 5s ease-in-out infinite; }
.mega__head > i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--teal); flex: none; }
.mega__head > i svg { width: 22px; height: 22px; animation: mpBeat 1.8s ease-in-out infinite; }
.mega__head b { display: block; font-family: var(--f-head); font-size: 17px; font-weight: 600; }
.mega__head small { display: block; font-size: 12.5px; color: #C8D4E0; }
.menu .sub.mega a.mega__all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; background: var(--yellow); color: var(--navy-2); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; transition: transform .4s var(--spring), background .3s; position: relative; z-index: 1; }
.menu .sub.mega a.mega__all::before { display: none; }
.menu .sub.mega a.mega__all svg { width: 15px; height: 15px; transition: transform .3s; }
.menu .sub.mega a.mega__all:hover { padding-left: 16px; background: #fff; transform: translateY(-2px); }
.menu .sub.mega a.mega__all:hover svg { transform: translateX(4px); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding: 14px; max-height: min(64vh, 560px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C9D6DD transparent; }
.menu .sub.mega .mega__grid a { --c: #01969A; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; font-size: 14px; line-height: 1.3; color: var(--navy); transition: background .25s, color .25s, transform .35s var(--ease); }
.menu .sub.mega .mega__grid a::before { display: none; }
.menu .sub.mega .mega__grid a i { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: transform .5s var(--spring), background .3s, color .3s; }
.menu .sub.mega .mega__grid a i svg { width: 16px; height: 16px; }
.menu .sub.mega .mega__grid a:hover { background: #F2F8F9; color: var(--teal); padding-left: 10px; transform: translateX(3px); }
.menu .sub.mega .mega__grid a:hover i { background: var(--c); color: #fff; transform: rotate(-10deg) scale(1.08); }
.menu .sub.mega .mega__grid a[aria-current="page"] { background: #EAF6F6; color: var(--teal); }
.mega__doc img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: linear-gradient(170deg, #EAF6F7, #CDE6EC); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(1, 150, 154, .35); transition: transform .5s var(--spring), box-shadow .3s; }
.menu .sub.mega .mega__grid a.mega__doc:hover img { transform: scale(1.1); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--teal); }
.mega__doc small { display: block; font-size: 11.5px; color: var(--text); margin-top: 1px; }
/* items cascade in when the panel opens */
.menu .sub.mega .mega__grid a { opacity: 0; transform: translateY(6px); }
.menu > li:hover .sub.mega .mega__grid a, .menu > li:focus-within .sub.mega .mega__grid a { opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease), background .25s, color .25s; transition-delay: calc(var(--i, 0) * 18ms); }
@media (max-width: 1279px) { .menu .sub.mega { width: min(560px, 92vw); } }
@media (prefers-reduced-motion: reduce) { .mega__head::after, .mega__head > i svg { animation: none; } }
/* =====================================================================
   INNER PAGES: speciality / facility / doctor details, listings,
   booking, contact
   ===================================================================== */
.fx-card.sp-pop { animation: spPop .7s var(--spring) both; animation-delay: calc(var(--k, 0) * 45ms); }

/* ---------- shared: section headings with icon ---------- */
.sec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sec-h > i { --c2: var(--c, #01969A); position: relative; width: 50px; height: 50px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--c2), color-mix(in srgb, var(--c2) 60%, #09243C)); box-shadow: 0 14px 26px -14px var(--c2); transition: transform .8s var(--spring); }
.sec-h > i::after { content: ""; position: absolute; inset: -5px; border-radius: 19px; border: 1.5px dashed color-mix(in srgb, var(--c2) 50%, transparent); animation: spinSlow 14s linear infinite; }
.sec-h > i svg { width: 24px; height: 24px; }
.sec-h:hover > i { transform: rotateY(360deg); }
.sec-h h2 { margin: 0 !important; font-size: clamp(22px, 1.8vw, 32px) !important; line-height: 1.25 !important; color: var(--navy); }
.pg-sd .detail__main > * + *, .pg-fd .fd-main > * + *, .pg-dp .detail__main > * + * { margin-top: clamp(34px, 4vw, 54px); }

/* rich content blocks used on detail pages */
:is(.pg-sd, .pg-fd, .pg-dp) .prose { position: relative; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: #fff; border: 1px solid #E5ECEF; box-shadow: 0 20px 40px -36px rgba(9, 36, 60, .5); overflow: hidden; }
:is(.pg-sd, .pg-fd, .pg-dp) .prose::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--c, #01969A), var(--yellow)); }
:is(.pg-sd, .pg-fd, .pg-dp) .prose p { font-size: 15.5px; line-height: 1.8; color: var(--text-2); }
:is(.pg-sd, .pg-fd, .pg-dp) .ticks li::before { animation: none; transition: transform .5s var(--spring); }
:is(.pg-sd, .pg-fd, .pg-dp) .ticks li { padding: 10px 12px; border-radius: 12px; transition: background .3s, transform .4s var(--ease); }
:is(.pg-sd, .pg-fd, .pg-dp) .ticks li:hover { background: #F2F8F9; transform: translateX(5px); }
:is(.pg-sd, .pg-fd, .pg-dp) .ticks li:hover::before { transform: scale(1.2) rotate(-12deg); }
:is(.pg-sd, .pg-fd, .pg-dp) .capabilities { padding: clamp(18px, 2vw, 26px); border-radius: 22px; background: linear-gradient(150deg, #F3F9FA, #E6F3F5); border: 1px solid #DDEBEE; }
:is(.pg-sd, .pg-fd, .pg-dp) .conditions li { background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 10px 22px -20px rgba(9, 36, 60, .5); transition: transform .45s var(--spring), background .3s, color .3s, border-color .3s; }
:is(.pg-sd, .pg-fd, .pg-dp) .conditions li svg { padding: 3px; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c, #01969A) 12%, #fff); color: var(--c, #01969A); }
:is(.pg-sd, .pg-fd, .pg-dp) .conditions li:hover { background: var(--c, #01969A); border-color: transparent; transform: translateY(-4px); color: #fff; }
:is(.pg-sd, .pg-fd, .pg-dp) .conditions li:hover svg { background: rgba(255, 255, 255, .2); color: #fff; }
:is(.pg-sd, .pg-fd, .pg-dp) .grid--2 .tile { border-radius: 22px; transform-style: preserve-3d; }
:is(.pg-sd, .pg-fd, .pg-dp) .tile__ic { background: color-mix(in srgb, var(--c, #01969A) 12%, #fff); color: var(--c, #01969A); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #01969A) 40%, transparent); animation: spDot 2.6s ease-out infinite; }
:is(.pg-sd, .pg-fd, .pg-dp) .tile:hover .tile__ic { background: var(--c, #01969A); }
/* process steps: connected timeline */
:is(.pg-sd, .pg-fd, .pg-dp) .steps { position: relative; counter-reset: st; }
:is(.pg-sd, .pg-fd, .pg-dp) .steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c, #01969A) 40%, transparent) 0 10px, transparent 10px 18px); background-size: 36px 3px; animation: mpDashRun 1.2s linear infinite; z-index: 0; }
@keyframes mpDashRun { to { background-position: 36px 0; } }
:is(.pg-sd, .pg-fd, .pg-dp) .step { z-index: 1; border-radius: 22px; padding-top: 74px; text-align: center; transition: transform .6s var(--spring), box-shadow .5s; }
:is(.pg-sd, .pg-fd, .pg-dp) .step:hover { transform: translateY(-10px) rotateX(6deg); }
:is(.pg-sd, .pg-fd, .pg-dp) .step__n { position: absolute; left: 50%; top: 22px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--f-head); color: #fff; background: linear-gradient(140deg, var(--c, #01969A), color-mix(in srgb, var(--c, #01969A) 60%, #09243C)); box-shadow: 0 0 0 6px #fff, 0 14px 26px -12px var(--c, #01969A); }
:is(.pg-sd, .pg-fd, .pg-dp) .step__n::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c, #01969A) 45%, transparent); animation: ring 2.6s var(--ease) infinite; }
:is(.pg-sd, .pg-fd, .pg-dp) .step:nth-child(2) .step__n::after { animation-delay: .8s; } :is(.pg-sd, .pg-fd, .pg-dp) .step:nth-child(3) .step__n::after { animation-delay: 1.6s; }
/* FAQ + call-to-action */
:is(.pg-sd, .pg-fd, .pg-dp) .acc details { border: 1px solid #E5ECEF; }
:is(.pg-sd, .pg-fd, .pg-dp) .cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; }
:is(.pg-sd, .pg-fd, .pg-dp) .cta-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); transform: skewX(-20deg); animation: sweep 6s ease-in-out infinite; pointer-events: none; }
:is(.pg-sd, .pg-fd, .pg-dp) .cta-band .btn--red svg { animation: mpSirenShake 2.6s ease-in-out infinite; }
@media (max-width: 767px) { :is(.pg-sd, .pg-fd, .pg-dp) .steps::before { display: none; } }

/* sticky sidebars: body had overflow set in main.css, which turns sticky off; clip instead */
body:not(.lock) { overflow: visible; overflow-x: clip; }
/* the JS sets --stick so tall sidebars still reveal their bottom */
[data-sticky] { position: sticky; top: var(--stick, 110px); align-self: start; }

/* =====================================================================
   SPECIALITY DETAIL
   ===================================================================== */
.sd { grid-template-columns: minmax(0, 1fr) 360px; }
.sd-media { position: relative; border-radius: 26px; perspective: 1400px; }
.sd-media__in { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--grey); box-shadow: 0 34px 60px -40px rgba(9, 36, 60, .7); transition: transform .6s var(--ease); }
.sd-media__in img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.sd-media:hover .sd-media__in img { transform: scale(1.06); }
.sd-media__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-130%); animation: mpSweepX 6s ease-in-out 1s infinite; }
@keyframes mpSweepX { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.sd-badge { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 30px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -16px rgba(9, 36, 60, .6); animation: chipIn .9s var(--spring) .6s both, bob 6s ease-in-out 1.6s infinite; }
.sd-badge i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.sd-badge i svg { width: 15px; height: 15px; }
.sd-badge--b { left: auto; right: 18px; top: auto; bottom: 18px; animation-delay: .9s, 2.4s; }
.sd-badge--b i { background: var(--red); }
.sd-badge--b i svg { animation: mpSirenShake 2.6s ease-in-out infinite; }
.sd-high { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px !important; }
.sd-high li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #E3EAEE; transition: transform .45s var(--spring), box-shadow .4s, border-color .3s; }
.sd-high li:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 20px 36px -26px rgba(9, 36, 60, .6); }
.sd-high i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: transform .7s var(--spring); }
.sd-high li:hover i { transform: rotateY(360deg); }
.sd-high i svg { width: 22px; height: 22px; }
.sd-high b { display: block; font-family: var(--f-head); color: var(--navy); font-size: 15px; }
.sd-high span { font-size: 13px; color: var(--text); line-height: 1.35; }
.sd-aside { display: grid; gap: 14px; }
.sd-list { border-radius: 22px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 24px 50px -40px rgba(9, 36, 60, .6); overflow: hidden; }
.sd-list__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(120deg, #133A61, #09243C); color: #fff; }
.sd-list__head i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--teal); flex: none; }
.sd-list__head i svg { width: 20px; height: 20px; animation: mpBeat 1.8s ease-in-out infinite; }
.sd-list__head h2 { color: #fff; font-size: 17px; margin: 0; }
.sd-list__head small { font-size: 12px; color: #C8D4E0; }
.sd-list__nav { display: grid; padding: 8px; gap: 1px; }
.sd-list__nav a { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 10px; font-size: 13.5px; line-height: 1.25; color: var(--navy); transition: background .25s, color .25s, transform .35s var(--ease); }
.sd-list__nav a i { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: transform .5s var(--spring), background .3s, color .3s; }
.sd-list__nav a i svg { width: 13px; height: 13px; }
.sd-list__nav a > svg { width: 14px; height: 14px; margin-left: auto; color: #B7C4CC; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--ease); }
.sd-list__nav a:hover { background: #F2F8F9; transform: translateX(3px); }
.sd-list__nav a:hover i { background: var(--c); color: #fff; transform: rotate(-10deg); }
.sd-list__nav a:hover > svg { opacity: 1; transform: none; color: var(--teal); }
.sd-list__nav a[aria-current="page"] { background: linear-gradient(120deg, var(--teal), #017E81); color: #fff; box-shadow: 0 10px 22px -12px rgba(1, 150, 154, .9); }
.sd-list__nav a[aria-current="page"] i { background: rgba(255, 255, 255, .2); color: #fff; }
.sd-list__nav a[aria-current="page"] > svg { opacity: 1; transform: none; color: var(--yellow); }
.sd-help { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 16px; border-radius: 22px; background: linear-gradient(130deg, #133A61, #09243C); color: #C8D4E0; }
.sd-help__ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.sd-help__ic::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .6); animation: ring 2.2s var(--ease) infinite; }
.sd-help__ic svg { width: 20px; height: 20px; animation: wiggle 2.5s ease-in-out infinite; }
.sd-help small { display: block; font-size: 12px; }
.sd-help a:not(.btn) { color: #fff; font-family: var(--f-head); font-weight: 600; }
.sd-help .btn { grid-column: 1 / -1; min-height: 44px; }
.sd-emg { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #FFB4B5 !important; font-weight: 500 !important; font-family: var(--f-body) !important; }
.sd-emg svg { width: 16px; height: 16px; animation: mpSirenShake 2.6s ease-in-out infinite; }
@media (max-width: 1100px) { .sd { grid-template-columns: 1fr; } .sd-aside { position: static; } .sd-list__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sd-high { grid-template-columns: 1fr; } .sd-list__nav { grid-template-columns: 1fr; } }

/* =====================================================================
   FACILITY DETAIL (sidebar on the left, navy)
   ===================================================================== */
.fd { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: clamp(26px, 3.4vw, 54px); align-items: start; }
.fd-nav { position: relative; overflow: hidden; border-radius: 24px; padding: 8px 8px 12px; background: linear-gradient(170deg, #133A61 0%, #09243C 100%); color: #C8D4E0; box-shadow: 0 30px 60px -40px rgba(9, 36, 60, .9); }
.fd-nav::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(1, 150, 154, .4), transparent 70%); animation: floatBlob 10s ease-in-out infinite; pointer-events: none; }
.fd-nav__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 4px; }
.fd-nav__head i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--navy-2); flex: none; }
.fd-nav__head i svg { width: 20px; height: 20px; }
.fd-nav__head h2 { color: #fff; font-size: 17px; margin: 0; }
.fd-nav__head small { font-size: 12px; }
.fd-nav nav { position: relative; display: grid; gap: 1px; }
.fd-nav__g { display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8FA3B6; }
.fd-nav__g::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c) 55%, #fff); box-shadow: 0 0 10px var(--c); }
.fd-nav nav a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; font-size: 13.5px; color: #E2EAF1; transition: background .25s, transform .35s var(--ease); }
.fd-nav nav a i { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: color-mix(in srgb, var(--c) 55%, #fff); transition: transform .5s var(--spring), background .3s, color .3s; }
.fd-nav nav a i svg { width: 14px; height: 14px; }
.fd-nav nav a:hover { background: rgba(255, 255, 255, .07); transform: translateX(4px); }
.fd-nav nav a:hover i { transform: rotate(-12deg) scale(1.1); background: var(--c); color: #fff; }
.fd-nav nav a[aria-current="page"] { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.fd-nav nav a[aria-current="page"] i { background: var(--c); color: #fff; }
.fd-nav__emg { position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 6px 0; padding: 12px; border-radius: 16px; background: rgba(239, 46, 50, .16); border: 1px solid rgba(239, 46, 50, .4); color: #fff; font-family: var(--f-head); font-weight: 600; }
.fd-nav__emg small { display: block; font-size: 11.5px; color: #FFB4B5; font-family: var(--f-body); font-weight: 500; }
.fd-nav__emg i { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--red); flex: none; }
.fd-nav__emg i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(239, 46, 50, .6); animation: ring 1.8s var(--ease) infinite; }
.fd-nav__emg i svg { width: 18px; height: 18px; animation: mpSirenShake 2.4s ease-in-out infinite; }
.fd-hero { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; padding: clamp(16px, 1.8vw, 22px); border-radius: 28px; background: linear-gradient(150deg, #F3F9FA, #E6F2F5); border: 1px solid #DCEAEE; perspective: 1400px; }
.fd-hero__img { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 480 / 560; background: linear-gradient(160deg, #E5F2F5, #CFE5EC); box-shadow: 0 30px 50px -34px rgba(9, 36, 60, .7); transition: transform .6s var(--ease); }
.fd-hero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.fd-hero:hover .fd-hero__img img { transform: scale(1.07); }
.fd-hero__ic { position: absolute; right: 16px; bottom: 16px; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--c); border: 4px solid #fff; box-shadow: 0 16px 30px -14px var(--c); transform: translateZ(40px); animation: bob 5s ease-in-out infinite; }
.fd-hero__ic svg { width: 28px; height: 28px; animation: mpBeat 1.8s ease-in-out infinite; }
.fd-grp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 30px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; box-shadow: 0 10px 20px -16px rgba(9, 36, 60, .6); }
.fd-grp i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: spDot 2s ease-out infinite; }
.fd-hero__txt h2 { margin: 14px 0 12px !important; font-size: clamp(24px, 2.2vw, 36px) !important; line-height: 1.2 !important; color: var(--navy); }
.fd-hero__txt p { color: var(--text-2); font-size: 15.5px; line-height: 1.8; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fd-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 30px; background: #fff; border: 1px solid #DCE8EB; color: var(--navy); font-size: 13px; font-weight: 500; transition: transform .4s var(--spring), border-color .3s; }
.fd-chips li svg { width: 16px; height: 16px; color: var(--c); }
.fd-chips li:hover { transform: translateY(-3px); border-color: var(--c); }
.fd-sup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; perspective: 1200px; }
.fd-sup__grid article { position: relative; overflow: hidden; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #E3EAEE; transition: transform .6s var(--spring), box-shadow .5s, border-color .3s; }
.fd-sup__grid article::after { content: ""; position: absolute; width: 140px; height: 140px; right: -50px; bottom: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); transition: transform .6s var(--ease); }
.fd-sup__grid article:hover { transform: translateY(-8px) rotateX(6deg); border-color: var(--c); box-shadow: 0 30px 50px -36px rgba(9, 36, 60, .6); }
.fd-sup__grid article:hover::after { transform: scale(1.6); }
.fd-sup__grid i { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--c); margin-bottom: 12px; transition: transform .8s var(--spring); }
.fd-sup__grid article:nth-child(2) i { background: var(--red); } .fd-sup__grid article:nth-child(3) i { background: var(--teal); } .fd-sup__grid article:nth-child(4) i { background: var(--yellow); color: var(--navy-2); }
.fd-sup__grid article:hover i { transform: rotateY(360deg); }
.fd-sup__grid i svg { width: 24px; height: 24px; }
.fd-sup__grid h3 { font-size: 18px; color: var(--navy); margin-bottom: 6px; }
.fd-sup__grid p { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.65; }
.fd-rel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fd-rel__c { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--navy); isolation: isolate; }
.fd-rel__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.fd-rel__c::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(9, 36, 60, .92)); }
.fd-rel__c:hover img { transform: scale(1.1); }
.fd-rel__ic { position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--c); transition: transform .7s var(--spring); }
.fd-rel__c:hover .fd-rel__ic { transform: rotateY(360deg); }
.fd-rel__ic svg { width: 20px; height: 20px; }
.fd-rel__t { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; }
.fd-rel__t b { font-family: var(--f-head); font-size: 16px; font-weight: 600; }
.fd-rel__t svg { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .5s var(--spring), background .3s; }
.fd-rel__c:hover .fd-rel__t svg { background: var(--yellow); color: var(--navy-2); transform: rotate(-45deg); }
@media (max-width: 1100px) { .fd { grid-template-columns: 1fr; } .fd-aside { position: static; order: 2; } }
@media (max-width: 767px) { .fd-hero { grid-template-columns: 1fr; } .fd-hero__img { aspect-ratio: 4 / 3.4; } .fd-sup__grid, .fd-rel__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FACILITIES LISTING (portrait cards)
   ===================================================================== */
.fx-grid { --g: clamp(16px, 1.8vw, 26px); --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); perspective: 1600px; }
.fx-grid > .fx-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); min-width: 0; }
@media (max-width: 1279px) { .fx-grid { --cols: 3; } }
@media (max-width: 899px) { .fx-grid { --cols: 2; } }
@media (max-width: 559px) { .fx-grid { --cols: 1; } }
.fx-in { position: relative; display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 480 / 590; background: var(--navy); isolation: isolate; box-shadow: 0 26px 50px -36px rgba(9, 36, 60, .8); transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .5s; }
.fx-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.3s var(--ease), filter .6s; }
.fx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 36, 60, .05) 25%, rgba(9, 36, 60, .55) 55%, color-mix(in srgb, var(--c) 35%, #09243C) 100%); transition: opacity .5s; }
.fx-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--c) 80%, var(--yellow) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; animation: spinBorder 4s linear infinite; }
.fx-card:hover .fx-in { box-shadow: 0 40px 70px -36px rgba(9, 36, 60, .9); }
.fx-card:hover .fx-in::after { opacity: 1; }
.fx-card:hover .fx-in img { transform: scale(1.1); }
.fx-card:active .fx-in { transform: scale(.98) !important; }
.fx-ic { position: absolute; left: 18px; top: 18px; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 14px 26px -12px var(--c); transform: translateZ(40px); transition: transform .8s var(--spring), border-radius .5s; }
.fx-ic svg { width: 24px; height: 24px; animation: mpBeat 2s ease-in-out infinite; }
.fx-card:hover .fx-ic { transform: translateZ(60px) rotateY(360deg); border-radius: 50%; }
.fx-grp { position: absolute; right: 16px; top: 22px; padding: 6px 11px; border-radius: 30px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 11.5px; font-weight: 600; }
.fx-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; color: #fff; transform: translateZ(30px); }
.fx-n { display: inline-block; font: 700 12px/1 var(--f-head); letter-spacing: 1.5px; color: var(--yellow); margin-bottom: 6px; }
.fx-txt h3 { color: #fff; font-size: clamp(18px, 1.3vw, 22px); line-height: 1.25; }
.fx-txt p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #D7E2EC; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
.fx-card:hover .fx-txt p, .fx-in:focus-visible .fx-txt p { max-height: 120px; opacity: 1; }
.fx-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 30px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; transition: background .3s, color .3s, gap .4s var(--ease); }
.fx-go svg { width: 16px; height: 16px; }
.fx-card:hover .fx-go { background: var(--yellow); color: var(--navy-2); gap: 12px; }
@media (hover: none) { .fx-txt p { max-height: 120px; opacity: 1; } }

/* =====================================================================
   DOCTORS LISTING
   ===================================================================== */
.dl-bar { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, auto); gap: 10px; align-items: center; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #E3EAEE; box-shadow: 0 24px 50px -36px rgba(9, 36, 60, .6); }
.dl-search { position: relative; display: block; }
.dl-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--teal); }
.dl-search input { width: 100%; height: 50px; border-radius: 16px; border: 1px solid #E3EAEE; background: #F6F9FA; padding: 0 16px 0 46px; font-size: 14.5px; transition: border-color .3s, box-shadow .3s, background .3s; }
.dl-search input:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 150, 154, .14); }
.dl-sel { position: relative; display: grid; gap: 2px; padding: 6px 30px 6px 14px; height: 50px; border-radius: 16px; border: 1px solid #E3EAEE; background: #fff; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.dl-sel:hover, .dl-sel:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 150, 154, .1); }
.dl-sel::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.dl-sel > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--teal); }
.dl-sel > span svg { width: 13px; height: 13px; }
.dl-sel select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font-size: 14px; color: var(--navy); font-weight: 500; cursor: pointer; max-width: 190px; }
.dl-sel select:focus { outline: none; }
.dl-seg { display: flex; padding: 4px; height: 50px; border-radius: 16px; background: #F1F5F7; }
.dl-seg button { padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--navy); transition: background .3s, color .3s, box-shadow .3s; }
.dl-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: 0 8px 18px -10px rgba(9, 36, 60, .9); }
.dl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 22px; }
.dl-meta p { margin: 0; color: var(--text); font-size: 14.5px; }
.dl-meta b, .bk-total b { color: var(--teal); font-family: var(--f-head); }
.dl-active { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-active button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 30px; background: #EAF6F6; color: var(--teal-2); font-size: 13px; font-weight: 600; animation: chipIn .5s var(--spring) both; }
.dl-active button svg { width: 14px; height: 14px; }
.dl-active button:hover { background: var(--teal); color: #fff; }
.dl-reset { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--red); opacity: 0; pointer-events: none; transition: opacity .3s; }
.dl-reset svg { width: 15px; height: 15px; }
.dl.is-filtered .dl-reset { opacity: 1; pointer-events: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); perspective: 1600px; }
@media (max-width: 1279px) { .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-bar { position: static; grid-template-columns: 1fr 1fr; } .dl-search { grid-column: 1 / -1; } .dl-seg { justify-content: center; } }
@media (max-width: 559px) { .dl-grid { grid-template-columns: 1fr; } .dl-bar { grid-template-columns: 1fr; } }
[data-doc].is-hidden { display: none !important; }
[data-doc].is-pop { animation: spPop .65s var(--spring) both; animation-delay: calc(var(--k, 0) * 40ms); }
.dc-in { position: relative; height: 100%; display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 16px 34px -30px rgba(9, 36, 60, .6); transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .5s, border-color .4s; }
.dc-in::before { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, var(--teal) 80%, var(--yellow) 92%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; animation: spinBorder 4s linear infinite; pointer-events: none; }
.dc-card:hover .dc-in { border-color: transparent; box-shadow: 0 40px 70px -40px rgba(9, 36, 60, .65); }
.dc-card:hover .dc-in::before { opacity: 1; }
.dc-photo { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1.02; background: linear-gradient(170deg, #EEF8F9 0%, #CDE6EC 100%); isolation: isolate; }
.dc-ring { position: absolute; z-index: -1; width: 120%; aspect-ratio: 1; left: -10%; top: 22%; border-radius: 50%; background: conic-gradient(from var(--ang, 0deg), rgba(1, 150, 154, .3), transparent 35%, rgba(255, 204, 83, .35), transparent 75%, rgba(1, 150, 154, .3)); animation: spinBorder 10s linear infinite; }
.dc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform-origin: bottom; transition: transform 1s var(--ease); }
.dc-card:hover .dc-photo img { transform: scale(1.07); }
.dc-dept { position: absolute; left: 10px; top: 10px; padding: 5px 11px; border-radius: 30px; background: rgba(255, 255, 255, .92); color: var(--teal); font-size: 12px; font-weight: 600; }
.dc-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 6px 4px; transform: translateZ(24px); }
.dc-body h3 { font-size: clamp(16.5px, 1.1vw, 19px); color: var(--navy); }
.dc-body h3 a:hover { color: var(--teal); }
.dc-role { margin: 0; font-size: 13.5px; color: var(--teal); line-height: 1.45; }
.dc-quals { display: flex; flex-wrap: wrap; gap: 5px; }
.dc-quals span { padding: 3px 8px; border-radius: 8px; background: #F2F6F8; font-size: 11.5px; color: var(--navy); font-weight: 600; }
.dc-lang { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.dc-lang svg { width: 15px; height: 15px; color: var(--teal); flex: none; margin-top: 1px; }
.dc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.dc-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; border: 1px solid #DCE5E9; font-size: 13.5px; font-weight: 600; color: var(--navy); transition: background .3s, color .3s, border-color .3s, transform .2s; }
.dc-b svg { width: 16px; height: 16px; transition: transform .4s var(--spring); }
.dc-b:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.dc-b:hover svg { transform: scale(1.2) rotate(-10deg); }
.dc-b--fill { background: var(--teal); border-color: var(--teal); color: #fff; }
.dc-b--fill:hover { background: var(--navy); border-color: var(--navy); }
.dc-b:active { transform: scale(.96); }
.dl-empty { text-align: center; padding: 50px 20px; border-radius: 24px; border: 1px dashed #CBD7DD; background: #FAFCFD; }
.dl-empty i { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; background: #EAF6F6; color: var(--teal); margin-bottom: 12px; }
.dl-empty i svg { width: 28px; height: 28px; animation: mpFloat 3s ease-in-out infinite; }
.dl-empty h3 { color: var(--navy); font-size: 20px; margin-bottom: 6px; }
.dl-empty p { margin: 0 0 16px; }

/* =====================================================================
   DOCTOR PROFILE
   ===================================================================== */
.dp { grid-template-columns: 380px minmax(0, 1fr); }
.dp-card { background: #fff !important; border: 1px solid #E3EAEE; box-shadow: 0 30px 60px -44px rgba(9, 36, 60, .7); border-radius: 26px !important; }
.dp-photo { isolation: isolate; background: linear-gradient(170deg, #EEF8F9, #CDE6EC) !important; }
.dp-photo img { position: relative; z-index: 1; transition: transform 1.2s var(--ease); }
.dp-card:hover .dp-photo img { transform: scale(1.04); }
.dp-ring { position: absolute; z-index: 0; inset: 18% 4% -10%; border-radius: 50%; border: 2px dashed rgba(1, 150, 154, .35); animation: spinSlow 26s linear infinite; }
.dp-ring--2 { inset: 30% 14% 0; border: 0; background: conic-gradient(from var(--ang, 0deg), rgba(1, 150, 154, .32), transparent 40%, rgba(255, 204, 83, .38), transparent 80%); animation: spinBorder 8s linear infinite; }
.dp-dept { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 30px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 12.5px; font-weight: 600; box-shadow: 0 12px 24px -14px rgba(9, 36, 60, .6); animation: chipIn .9s var(--spring) .6s both; }
.dp-dept i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.dp-dept i svg { width: 13px; height: 13px; }
.dp-card .pcardx__body { gap: 12px; }
.dp-card .pcardx__body h2 { font-size: clamp(22px, 1.7vw, 28px); }
.dp-card .quals span { animation: chipIn .6s var(--spring) both; }
.dp-card .meta li svg { transition: transform .5s var(--spring); }
.dp-card .meta li:hover svg { transform: rotate(-12deg) scale(1.15); }
.dp-jump { display: grid; gap: 2px; padding: 10px; border-radius: 16px; background: #F4F8FA; }
.dp-jump p { margin: 0 0 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.dp-jump a { position: relative; padding: 6px 10px 6px 22px; border-radius: 10px; font-size: 13px; color: var(--navy); line-height: 1.35; transition: background .25s, color .25s; }
.dp-jump a::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #C3D2D9; transition: background .3s, transform .3s; }
.dp-jump a:hover { background: #fff; color: var(--teal); }
.dp-jump a.is-on { background: #fff; color: var(--teal); font-weight: 600; box-shadow: 0 8px 18px -14px rgba(9, 36, 60, .6); }
.dp-jump a.is-on::before { background: var(--teal); transform: scale(1.4); }
.pg-dp .expertise { perspective: 1200px; }
.pg-dp .expertise__item { position: relative; overflow: hidden; border-radius: 22px; background: #fff; transition: transform .6s var(--spring), box-shadow .5s, border-color .3s; }
.pg-dp .expertise__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--yellow)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.pg-dp .expertise__item:hover { transform: translateY(-8px) rotateX(5deg); }
.pg-dp .expertise__item:hover::before { transform: scaleX(1); }
.pg-dp .expertise__item h3 { display: flex; align-items: center; gap: 10px; }
.pg-dp .expertise__item h3::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--teal); flex: none; transform: rotate(45deg); transition: transform .6s var(--spring); }
.pg-dp .expertise__item:hover h3::before { transform: rotate(225deg) scale(1.2); background: var(--yellow); }
.pg-dp .timeline li::before { box-shadow: 0 0 0 0 rgba(1, 150, 154, .5); animation: spDot 2.4s ease-out infinite; }
@media (max-width: 1100px) { .dp { grid-template-columns: 1fr; } .dp-card { position: static; } .dp-jump { display: none; } }

/* =====================================================================
   BOOKING
   ===================================================================== */
.bk { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
.bk-filters { border-radius: 24px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 30px 60px -46px rgba(9, 36, 60, .7); overflow: hidden; }
.bk-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: linear-gradient(120deg, #133A61, #09243C); }
.bk-filters__head h2 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 18px; margin: 0; }
.bk-filters__head h2 svg { width: 18px; height: 18px; color: var(--yellow); }
.bk-filters__head button { font-size: 13px; font-weight: 600; color: var(--yellow); padding: 6px 10px; border-radius: 20px; transition: background .3s; }
.bk-filters__head button:hover { background: rgba(255, 255, 255, .1); }
.bk-grp { border-bottom: 1px solid #EEF2F4; }
.bk-grp summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; font-family: var(--f-head); font-weight: 600; color: var(--navy); }
.bk-grp summary::-webkit-details-marker { display: none; }
.bk-grp summary > span { display: inline-flex; align-items: center; gap: 9px; }
.bk-grp summary > span svg { width: 18px; height: 18px; color: var(--teal); }
.bk-grp summary em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px; display: inline-grid; place-items: center; background: #EEF2F4; color: var(--text); font-size: 11.5px; font-family: var(--f-body); transition: background .3s, color .3s; }
.bk-grp summary em.on { background: var(--teal); color: #fff; }
.bk-grp summary > svg { width: 16px; height: 16px; color: var(--text); transform: rotate(90deg); transition: transform .35s var(--ease); }
.bk-grp[open] summary > svg { transform: rotate(-90deg); }
.bk-opts { display: grid; padding: 0 10px 12px; max-height: none; }
.bk-opts .check { padding: 7px 8px; }
.bk-opts .check em { background: #F2F6F8; padding: 1px 7px; border-radius: 10px; }
.bk-help { display: flex; align-items: center; gap: 12px; margin: 14px; padding: 12px; border-radius: 16px; background: #F2F8F9; }
.bk-help i { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; flex: none; }
.bk-help i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(1, 150, 154, .45); animation: ring 2.2s var(--ease) infinite; }
.bk-help i svg { width: 18px; height: 18px; animation: wiggle 2.5s ease-in-out infinite; }
.bk-help small { display: block; font-size: 12px; color: var(--text); }
.bk-help a { font-family: var(--f-head); font-weight: 600; color: var(--navy); }
.bk-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-title { font-size: clamp(26px, 2.4vw, 40px); color: var(--navy); }
.bk-title span { color: var(--teal); position: relative; }
.bk-title span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; border-radius: 4px; background: rgba(255, 204, 83, .5); z-index: -1; transform-origin: left; animation: skewIn 1s var(--ease) .6s both; }
.bk-total { margin: 4px 0 0; color: var(--text); }
.bk-search { position: relative; display: flex; flex: 0 1 380px; }
.bk-search input { width: 100%; height: 52px; border-radius: 30px; border: 1px solid #DCE5E9; padding: 0 64px 0 20px; font-size: 14.5px; transition: border-color .3s, box-shadow .3s; }
.bk-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 150, 154, .14); }
.bk-search__btn { position: absolute; right: 5px; top: 5px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; pointer-events: none; }
.bk-search__btn svg { width: 18px; height: 18px; }
.bk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0 18px; margin-bottom: 18px; border-bottom: 1px dashed #DCE5E9; }
.bk-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin-left: auto; }
.bk-sort svg { width: 16px; height: 16px; color: var(--teal); }
.bk-sort select { height: 40px; border-radius: 12px; border: 1px solid #DCE5E9; padding: 0 12px; color: var(--navy); font-weight: 600; background: #fff; }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-card { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid #E3EAEE; transition: transform .5s var(--spring), box-shadow .5s, border-color .3s; overflow: hidden; }
.bk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--teal), var(--yellow)); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.bk-card:hover { transform: translateY(-5px); border-color: rgba(1, 150, 154, .4); box-shadow: 0 26px 50px -36px rgba(9, 36, 60, .65); }
.bk-card:hover::before { transform: scaleY(1); }
.bk-photo { border-radius: 16px; overflow: hidden; background: linear-gradient(170deg, #EEF8F9, #CDE6EC); aspect-ratio: 1 / 1.12; }
.bk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.bk-card:hover .bk-photo img { transform: scale(1.08); }
.bk-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bk-top h3 { font-size: 17px; color: var(--navy); line-height: 1.3; }
.bk-top h3 a:hover { color: var(--teal); }
.bk-verified svg { width: 20px; height: 20px; color: var(--teal); flex: none; }
.bk-dept { align-self: flex-start; padding: 3px 10px; border-radius: 20px; background: #EAF6F6; color: var(--teal-2); font-size: 12px; font-weight: 600; }
.bk-role { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.bk-lang { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--text); }
.bk-lang svg { width: 14px; height: 14px; color: var(--teal); flex: none; margin-top: 1px; }
.bk-acts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: auto; padding-top: 8px; }
.bk-book, .bk-call { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-size: 13px; font-weight: 600; transition: background .3s, color .3s, transform .2s, box-shadow .3s; }
.bk-book svg, .bk-call svg { width: 15px; height: 15px; }
.bk-book { background: var(--teal); color: #fff; box-shadow: 0 10px 20px -12px rgba(1, 150, 154, .9); }
.bk-book:hover { background: var(--navy); }
.bk-call { border: 1.5px solid var(--navy); color: var(--navy); }
.bk-call:hover { background: var(--navy); color: #fff; }
.bk-book:active, .bk-call:active { transform: scale(.96); }
@media (max-width: 1100px) { .bk { grid-template-columns: 1fr; } .bk-filters { position: static; } .bk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bk-grid { grid-template-columns: 1fr; } .bk-opts { grid-template-columns: 1fr; } .bk-card { grid-template-columns: 96px minmax(0, 1fr); } }
/* booking sheet */
.bk-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.bk-modal.is-open { visibility: visible; opacity: 1; }
.bk-modal__scrim { position: absolute; inset: 0; background: rgba(5, 27, 46, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bk-modal__panel { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); transform: translateY(30px) scale(.96); transition: transform .5s var(--spring); }
.bk-modal.is-open .bk-modal__panel { transform: none; }
.bk-modal__x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F1F5F7; color: var(--navy); transition: transform .4s var(--spring), background .3s; }
.bk-modal__x:hover { transform: rotate(90deg); background: var(--red-tint); color: var(--red); }
.bk-modal__x svg { width: 18px; height: 18px; }
.bk-steps { display: flex; gap: 6px; margin: 2px 50px 18px 0; }
.bk-steps span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 13px/1 var(--f-head); color: #9AAAB5; position: relative; }
.bk-steps span::before { content: ""; width: 100%; height: 4px; border-radius: 4px; background: #E6EDF0; transition: background .5s; }
.bk-steps span small { font: 500 11.5px var(--f-body); }
.bk-steps span.is-on { color: var(--teal); }
.bk-steps span.is-on::before { background: linear-gradient(90deg, var(--teal), var(--yellow)); }
.bk-m-doc { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: #F2F8F9; margin-bottom: 14px; }
.bk-m-doc img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; object-position: top; background: #CDE6EC; }
.bk-m-doc h2 { font-size: 18px; color: var(--navy); margin: 0; }
.bk-m-doc p { margin: 2px 0 0; font-size: 13px; color: var(--teal); }
.bk-modal h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--navy); margin: 12px 0 10px; }
.bk-modal h3 svg { width: 17px; height: 17px; color: var(--teal); }
.bk-dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.bk-date { flex: 0 0 66px; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: 14px; border: 1.5px solid #E3EAEE; background: #fff; color: var(--navy); font-size: 11.5px; transition: border-color .25s, background .25s, color .25s, transform .3s var(--spring); }
.bk-date strong { font: 700 19px/1.1 var(--f-head); }
.bk-date:hover { border-color: var(--teal); transform: translateY(-2px); }
.bk-date[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 12px 22px -12px rgba(1, 150, 154, .9); }
.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-slot { display: grid; gap: 2px; padding: 11px 6px; border-radius: 14px; border: 1.5px solid #E3EAEE; color: var(--navy); text-align: center; transition: border-color .25s, background .25s, color .25s, transform .3s var(--spring); }
.bk-slot b { font-family: var(--f-head); font-size: 14px; }
.bk-slot small { font-size: 11.5px; color: var(--text); }
.bk-slot:hover { border-color: var(--teal); transform: translateY(-2px); }
.bk-slot[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.bk-slot[aria-pressed="true"] small { color: #C8D4E0; }
.bk-field { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text); }
.bk-field input { height: 46px; border-radius: 12px; border: 1px solid #DCE5E9; padding: 0 14px; font-size: 14.5px; }
.bk-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(1, 150, 154, .14); }
.bk-hint { margin: 12px 0 10px; font-size: 13px; color: var(--text); }
.bk-hint.ok { color: var(--teal-2); font-weight: 600; }
.bk-go { background: #25D366; }
.bk-go svg { width: 18px; height: 18px; }
.bk-go[aria-disabled="true"] { background: #B8C4CB; pointer-events: none; box-shadow: none; }
.bk-note { margin: 10px 0 0; font-size: 12px; color: var(--text); text-align: center; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.ct-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.ct-card { --c: var(--teal); position: relative; overflow: hidden; padding: 24px 22px; border-radius: 24px; background: #fff; border: 1px solid #E3EAEE; box-shadow: 0 20px 40px -36px rgba(9, 36, 60, .6); transition: transform .6s var(--ease), box-shadow .5s, border-color .3s; transform-style: preserve-3d; }
.ct-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); transition: transform .6s var(--ease); }
.ct-card:hover { border-color: var(--c); box-shadow: 0 34px 60px -40px rgba(9, 36, 60, .7); }
.ct-card:hover::before { transform: scale(1.5); }
.ct-ic { position: relative; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--c); margin-bottom: 16px; box-shadow: 0 16px 28px -14px var(--c); transform: translateZ(30px); transition: transform .8s var(--spring); }
.ct-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px solid var(--c); opacity: 0; animation: wcuRing 3s var(--ease) infinite; }
.ct-card:nth-child(2) .ct-ic::after { animation-delay: .7s; } .ct-card:nth-child(3) .ct-ic::after { animation-delay: 1.4s; } .ct-card:nth-child(4) .ct-ic::after { animation-delay: 2.1s; }
.ct-card:hover .ct-ic { transform: translateZ(40px) rotateY(360deg); }
.ct-ic svg { width: 26px; height: 26px; }
.ct-card:nth-child(1) .ct-ic svg { animation: wiggle 2.5s ease-in-out infinite; } .ct-card:nth-child(2) .ct-ic svg { animation: mpSirenShake 2.4s ease-in-out infinite; }
.ct-card:nth-child(3) .ct-ic svg { animation: mpMail 3.4s ease-in-out infinite; } .ct-card:nth-child(4) .ct-ic svg { animation: mpPin 2.4s ease-in-out infinite; }
.ct-card:nth-child(4) .ct-ic { color: var(--navy-2); }
.ct-card h3 { font-size: 18px; color: var(--navy); margin-bottom: 6px; }
.ct-val { margin: 0 0 6px; font-family: var(--f-head); font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.ct-val a { color: var(--c); }
.ct-card:nth-child(4) .ct-val a { color: var(--amber-ink); }
.ct-val a:hover { text-decoration: underline; }
.ct-card p:last-child { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.55; }
.ct-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(28px, 3vw, 46px); align-items: stretch; }
.ct-form { position: relative; overflow: hidden; padding: clamp(22px, 2.6vw, 36px); border-radius: 28px; background: linear-gradient(160deg, #133A61, #09243C); color: #C8D4E0; isolation: isolate; }
.ct-form::before { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -130px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(1, 150, 154, .45), transparent 70%); animation: floatBlob 12s ease-in-out infinite; }
.ct-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ct-form__head i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--yellow); color: var(--navy-2); flex: none; }
.ct-form__head i svg { width: 24px; height: 24px; animation: mpFloat 4s ease-in-out infinite; }
.ct-form__head h2 { color: #fff; font-size: clamp(22px, 1.8vw, 28px); margin: 0; }
.ct-form__head p { margin: 2px 0 0; font-size: 14px; }
.ct-form .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form .full { grid-column: 1 / -1; }
.cf-f { position: relative; display: block; }
.cf-f input, .cf-f textarea { width: 100%; height: 56px; padding: 22px 16px 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 15px; transition: border-color .3s, background .3s, box-shadow .3s; }
.cf-f textarea { height: 130px; resize: vertical; padding-top: 26px; }
.cf-f span { position: absolute; left: 16px; top: 18px; font-size: 14.5px; color: #9FB2C3; pointer-events: none; transition: transform .3s var(--ease), font-size .3s, color .3s, top .3s; }
.cf-f input:focus, .cf-f textarea:focus { outline: none; border-color: var(--teal); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(1, 150, 154, .25); }
.cf-f input:focus + span, .cf-f input:not(:placeholder-shown) + span, .cf-f textarea:focus + span, .cf-f textarea:not(:placeholder-shown) + span { top: 7px; font-size: 11.5px; color: var(--yellow); }
.cf-f .is-invalid { border-color: #FF8A8C; }
.ct-form .form__status { grid-column: 1 / -1; color: #fff; }
.ct-form .form__status a { color: var(--yellow); }
.ct-map { position: relative; border-radius: 28px; overflow: hidden; min-height: 460px; background: #DCEAEE; box-shadow: 0 30px 60px -44px rgba(9, 36, 60, .8); }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ct-map__card { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -20px rgba(9, 36, 60, .6); animation: chipIn .9s var(--spring) .4s both; }
.ct-map__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--red); color: #fff; flex: none; }
.ct-map__ic svg { width: 22px; height: 22px; animation: mpPin 2s ease-in-out infinite; }
.ct-map__card b { font-family: var(--f-head); font-size: 17px; color: var(--navy); }
.ct-map__card p { margin: 2px 0 8px; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.ct-hours { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--teal-2); }
.ct-live { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: spDot 1.6s ease-out infinite; --c: #22C55E; }
.ct-social { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 40px); }
.ct-social p { margin: 0; font-family: var(--f-head); font-weight: 600; color: var(--navy); }
.ct-social .fsocial { margin: 0; }
.ct-social .fsocial a { background: var(--navy); }
.ct-social .fsocial a:hover { background: var(--teal); color: #fff; }
@media (max-width: 1100px) { .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-split { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .ct-cards { grid-template-columns: 1fr; } .ct-form .form { grid-template-columns: 1fr; } .ct-map { min-height: 420px; } }

@media (prefers-reduced-motion: reduce) {
  .sec-h > i::after, .sd-media__in::after, .sd-badge, .fd-nav::before, .fd-hero__ic, .fx-in::after, .dc-ring, .dp-ring, .ct-ic::after, .ct-map__card, .ct-form::before, :is(.pg-sd, .pg-fd, .pg-dp) .steps::before, :is(.pg-sd, .pg-fd, .pg-dp) .step__n::after { animation: none !important; }
}

/* doctors without a photo yet: initials tile */
.dc-ini, .bk-photo .dc-ini { display: grid; place-items: center; width: 100%; height: 100%; font: 700 clamp(40px, 4vw, 64px)/1 var(--f-head); color: var(--navy); opacity: .85; }
.bk-photo .dc-ini { font-size: 34px; }
.bk-ini { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: #CDE6EC; color: var(--navy); font: 700 22px/1 var(--f-head); flex: none; }
.bk-ini[hidden] { display: none; }
.mega__ini { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(170deg, #EAF6F7, #CDE6EC); color: var(--navy); font: 700 12px/1 var(--f-head); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(1, 150, 154, .35); }

@media (max-height: 960px) and (min-width: 1101px) { .sd-help { display: none; } }
.sd-list__nav a { font-size: 13px; }
.sd-list__nav a i { width: 22px; height: 22px; }
.dp-card .pcardx__img { aspect-ratio: 1 / .88; }
.bk-opts .check { padding: 5px 8px; }

/* booking filters fit one screen: long groups scroll inside */
.bk-opts { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C9D6DD transparent; overscroll-behavior: contain; }
@media (max-height: 820px) and (min-width: 1101px) { .bk-opts { max-height: 170px; } .bk-help { display: none; } }

/* =====================================================================
   v4 — client revisions (Oct 2026)
   ===================================================================== */

/* ---------- 1. Global size: +10% (100% browser zoom now looks like the old 110%) ---------- */
@media (min-width: 1280px) {
  html { zoom: .88; }
  :root { --vw: 1.13636vw; --vh: 1.13636vh; --dvh: 1.13636dvh; --z: .88; }
}
@media (max-width: 1100px) {
  html { zoom: 1.06; }
  :root { --vw: .9434vw; --vh: .9434vh; --dvh: .9434dvh; --z: 1.06; }
}

/* ---------- 2. About (home + About Us): single image at its natural size ---------- */
.about__media--plain { padding: 0; }
.about__media--plain .about__main { aspect-ratio: auto; background: none; height: auto; }
.about__media--plain .about__main img { display: block; width: 100%; height: auto; object-fit: initial; }
.about__media--plain:hover .about__main img { transform: none; }

/* ---------- 3. Doctor cards: no white sheen / glow on hover ---------- */
.tcard::after, .tcard:hover::after { display: none !important; content: none; }
.tcard:hover .tcard__orb { transform: none; }
.tcard:hover { box-shadow: 0 18px 34px -20px rgba(9, 36, 60, .35); }
.tcard__img img.is-avatar, .dc-photo img.is-avatar, .bk-photo img.is-avatar, .pcardx__img img.is-avatar { object-fit: contain; object-position: center bottom; }

/* ---------- 4. Health packages: no white glare / sheen on hover ---------- */
.pkgs .pcard--hl::before { display: none; }
.pkgs .pcard--hl .shine { display: none; }
.pkgs .pcard--hl .pk-sb { background: rgba(10, 35, 64, .14); }
.pkgs .pcard .pk-sb i { background: rgba(255, 255, 255, .7); }
.pkgs .pcard--hl .pk-sb i { background: rgba(10, 35, 64, .75); }

/* ---------- 5. Mega menus: 3 columns for Specialities & Doctors, centred under the menu ---------- */
.menu .sub.mega { transform: translate(calc(-50% + var(--shift, 0px)), 16px) scale(.97); }
.menu > li:hover .sub.mega, .menu > li:focus-within .sub.mega { transform: translate(calc(-50% + var(--shift, 0px)), 0) scale(1); }
.menu .sub.mega::before { left: calc(50% - var(--shift, 0px)); }
.menu .sub.mega::after { top: -20px; height: 20px; }
.menu .sub.mega.mega--spec, .menu .sub.mega.mega--doc { width: min(940px, calc(94 * var(--vw))) !important; }
.mega--spec .mega__grid, .mega--doc .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid { max-height: min(calc(70 * var(--vh)), 600px); overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.menu .sub.mega .mega__grid a span { min-width: 0; }

/* ---------- 6. Mobile menu: chevrons were unsized (rendered huge) ---------- */
.mpanel__nav a svg { width: 16px; height: 16px; flex: none; }
.mpanel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mhdr { position: sticky; top: 0; }

/* ---------- 7. Desktop quick menu (hamburger): appointment + directions as buttons ---------- */
.oc__panel { overflow-y: auto; overscroll-behavior: contain; }
.oc__cta { display: grid; gap: 12px; margin-top: 22px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s; }
.oc.is-open .oc__cta { opacity: 1; transform: none; }
.oc__cta .mstrip, .oc__cta .mdir { margin: 0; transition: background .3s, border-color .3s, color .3s, transform .35s var(--ease), box-shadow .35s; }
.oc__cta .mstrip:hover { background: var(--amber); border-style: solid; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(224, 164, 0, .9); }
.oc__cta .mstrip:hover span, .oc__cta .mstrip:hover svg { color: var(--navy-2); }
.oc__cta .mdir { justify-content: flex-start; padding: 14px 16px; font-size: 15px; }
.oc__cta .mdir span { flex: 1; }
.oc__cta .mdir svg:last-child { width: 18px; height: 18px; color: var(--navy); transition: transform .3s; }
.oc__cta .mdir:hover { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(1, 150, 154, .9); }
.oc__cta .mdir:hover svg { color: #fff; }
.oc__cta .mdir:hover svg:last-child { transform: translateX(4px); }
/* scroll-lock without turning <body> into a scroller (kept the sticky mobile header in view) */
html.lock { overflow: hidden; }
body.lock { overflow: clip; }
.mpanel { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* =====================================================================
   v5 — client revisions
   ===================================================================== */
/* Top bar: keep the teal ECG pulse, drop the yellow one */
.hdr-ecg .ecg-beat--2 { display: none; }
/* Hero: no yellow progress line under the slider */
.hslider__progress { display: none; }
/* Inner page heroes: floating icons removed (markup gone; guard any leftovers) */
.pt-fx .hfx, .hero-fx .hfx { display: none; }

/* About (home + About Us): image height follows the text column */
@media (min-width: 1101px) {
  .about:has(.about__media--plain) { align-items: stretch; }
  .about__media--plain { display: flex; }
  .about__media--plain .about__main { flex: 1; height: auto; min-height: 0; }
  .about__media--plain .about__main img { position: absolute; inset: 0; }
  .about__media--plain .about__main img { height: 100%; min-height: 100%; object-fit: cover; object-position: center; }
}
@media (max-width: 1100px) {
  .about__media--plain .about__main { aspect-ratio: 4 / 3; }
  .about__media--plain .about__main img { height: 100%; object-fit: cover; object-position: center; }
}

/* =====================================================================
   v6 — client revisions
   ===================================================================== */
/* Health packages: no light on hover (pointer glow + button shine) */
.pkgs .pcard::before { display: none !important; }
.pkgs .pcard .btn::after { display: none !important; }



/* =====================================================================
   v7 — client revisions
   ===================================================================== */
/* About (home + About Us): full original photo (488x737), never cropped, as tall as the text */
.about__media--plain .ab-sheen { display: none; }
@media (min-width: 1101px) {
  .about:has(.about__media--plain) { align-items: stretch; }
  .about__media--plain { display: flex; justify-content: center; align-items: stretch; }
  .about__media--plain .about__main { flex: none; height: 100%; width: auto; max-width: 100%; aspect-ratio: 488 / 737; min-height: 0; border-radius: 20px; }
  .about__media--plain .about__main img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
}
@media (max-width: 1100px) {
  .about__media--plain .about__main { aspect-ratio: auto; max-width: 440px; margin-inline: auto; }
  .about__media--plain .about__main img { position: static; width: 100%; height: auto; object-fit: initial; }
}

/* Facility images: neutral black/grey shading (no red tint) and a brighter image on hover */
.fx-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(17, 20, 24, .45) 60%, rgba(10, 12, 15, .88) 100%); }
.fx-card:hover .fx-shade { opacity: .7; }
.fx-in::after { background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, rgba(255, 255, 255, .85) 80%, rgba(170, 178, 186, .9) 92%, transparent); }
.fx-card:hover .fx-in img { filter: brightness(1.08) saturate(1.12) contrast(1.03); }
.fcard__img::after { background: linear-gradient(180deg, transparent 50%, rgba(10, 12, 15, .5)); }
.fcard:hover .fcard__img img { filter: brightness(1.08) saturate(1.12); }
.fd-rel__c::before { background: linear-gradient(180deg, transparent 35%, rgba(10, 12, 15, .88)); }
.fd-rel__c:hover img { filter: brightness(1.08) saturate(1.12); }
.fx-in img, .fcard__img img, .fd-rel__c img { transition: transform 1.3s var(--ease), filter .5s; }

/* ---------- Desktop quick menu (hamburger) — redesigned ---------- */
.oc__panel { width: min(440px, calc(94 * var(--vw))); padding: 0; gap: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: -30px 0 80px -30px rgba(9, 36, 60, .45); scrollbar-width: thin; }
.oc__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #EEF2F5; }
.oc__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--yellow), var(--teal)); background-size: 200% 100%; animation: mpLineMove 6s linear infinite; }
.oc__top .oc__logo { width: 170px; height: auto; }
.oc__top .oc__close { position: static; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #F1F5F8; color: var(--navy); }
.oc__top .oc__close:hover { background: var(--red, #EF2E32); color: #fff; transform: rotate(90deg); }
.oc__nav { display: flex; flex-direction: column; padding: 8px 14px 4px; }
.oc__nav a { --d: calc(var(--i, 0) * 45ms + .15s); position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 14px; color: var(--navy); font: 700 14.5px/1.2 var(--f-head); letter-spacing: .6px; text-transform: uppercase; opacity: 0; transform: translateX(26px); transition: opacity .45s var(--ease) var(--d), transform .55s var(--ease) var(--d), background .25s, color .25s; }
.oc__nav a + a::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: #EEF2F5; }
.oc.is-open .oc__nav a { opacity: 1; transform: none; }
.oc__nav a i { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--teal); background: #E8F6F6; transition: background .3s, color .3s, transform .5s var(--spring); }
.oc__nav a i svg { width: 19px; height: 19px; }
.oc__nav a span { flex: 1; }
.oc__nav a > svg { width: 16px; height: 16px; color: #A9B6C0; transition: transform .3s var(--ease), color .3s; }
.oc__nav a:hover, .oc__nav a[aria-current="page"] { background: linear-gradient(90deg, #E8F6F6, rgba(232, 246, 246, 0)); color: var(--teal); }
.oc__nav a:hover::before, .oc__nav a:hover + a::before, .oc__nav a[aria-current="page"]::before, .oc__nav a[aria-current="page"] + a::before { opacity: 0; }
.oc__nav a:hover i, .oc__nav a[aria-current="page"] i { background: var(--teal); color: #fff; transform: rotate(-8deg) scale(1.06); }
.oc__nav a:hover > svg { transform: translateX(4px); color: var(--teal); }
.oc__quick { padding: 14px 22px 6px; display: grid; gap: 12px; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease) .5s, transform .6s var(--ease) .5s; }
.oc.is-open .oc__quick { opacity: 1; transform: none; }
.oc__qt { margin: 4px 0 2px; font: 700 19px/1.2 var(--f-head); color: var(--navy); display: flex; align-items: center; gap: 10px; }
.oc__qt::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #E3EAEE, transparent); }
.oc-card { --bg: #F4F7F9; --fg: var(--navy); --ac: var(--navy); position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg); color: var(--fg); border: 1px solid transparent; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s, color .3s, border-color .3s; }
.oc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ac); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.oc-card i { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ac); box-shadow: 0 6px 14px -8px rgba(9, 36, 60, .35); transition: transform .5s var(--spring); }
.oc-card i svg { width: 20px; height: 20px; }
.oc-card span { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-card small { font-size: 12.5px; font-weight: 600; color: var(--navy); opacity: .85; transition: color .3s; }
.oc-card b { font: 700 18px/1.2 var(--f-head); letter-spacing: .3px; color: var(--ac); transition: color .3s; }
.oc-card > svg { width: 18px; height: 18px; flex: none; color: var(--ac); transition: transform .3s var(--ease), color .3s; }
.oc-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px var(--ac); }
.oc-card:hover::before { transform: none; }
.oc-card:hover small, .oc-card:hover b, .oc-card:hover > svg { color: #fff; }
.oc-card:hover i { transform: rotate(-10deg) scale(1.06); }
.oc-card:hover > svg { transform: translateX(4px); }
.oc-card--emg { --bg: #FDECEC; --ac: #E5262B; }
.oc-card--emg b { animation: blink 1.4s ease-in-out infinite; }
.oc-card--emg:hover b { animation: none; }
.oc-card--emg i svg { animation: mpSirenShake 3s ease-in-out infinite; }
.oc-card--appt { --bg: #E9F1FB; --ac: #2E6BC6; }
.oc-card--book { --bg: #FFF7E3; --ac: #B07A00; border: 1.5px dashed #E0A400; }
.oc-card--book b { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.oc-card--book:hover { border-color: transparent; }
.oc-card--book::before { background: linear-gradient(90deg, #E0A400, #FFCC53); }
.oc-card--dir { --bg: #fff; --ac: var(--teal); border-color: #E3EAEE; }
.oc-card--dir b { font-size: 15px; color: var(--navy); }
.oc__foot { margin-top: auto; padding: 16px 22px 22px; display: grid; gap: 8px; font-size: 13px; color: var(--text); }
.oc__foot a, .oc__foot span { display: flex; gap: 8px; align-items: flex-start; color: inherit; }
.oc__foot a:hover { color: var(--teal); }
.oc__foot svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--teal); }
@media (prefers-reduced-motion: reduce) { .oc__nav a, .oc__quick { transition: none; opacity: 1; transform: none; } .oc-card--emg b, .oc-card--emg i svg, .oc__top::after { animation: none; } }

/* ---------- Floating quick actions (right edge) — colourful expanding pills ---------- */
.fmenu { gap: 12px; right: 0; }
.fmenu a { --c1: #F5B400; --c2: #FFCC53; --tint: #FFF4D6; position: relative; height: 60px; padding: 0 8px 0 8px; gap: 0; border-radius: 40px 0 0 40px; background: #fff; color: var(--navy); border: 1px solid rgba(9, 36, 60, .06); border-right: 0; box-shadow: 0 14px 30px -14px rgba(9, 36, 60, .45); overflow: hidden; isolation: isolate; transition: padding .5s var(--ease), box-shadow .4s, color .3s; }
.fmenu a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, var(--c1), var(--c2)); opacity: 0; transition: opacity .4s; }
.fmenu .c-yellow { --c1: #E9A800; --c2: #FFCC53; --tint: #FFF4D6; }
.fmenu .c-cyan { --c1: #01969A; --c2: #2EC4C8; --tint: #DDF6F6; }
.fmenu .c-green { --c1: #E5466B; --c2: #FF8A9F; --tint: #FDE4EA; }
.fmenu .c-blue { --c1: #2E6BC6; --c2: #5FA0F0; --tint: #E3EEFB; }
.fmenu__ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--c1), var(--c2)) !important; box-shadow: 0 0 0 4px var(--tint), 0 8px 16px -8px var(--c1); transition: transform .55s var(--spring), box-shadow .4s, background .3s; }
.fmenu__ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c1); opacity: .5; animation: ring 2.8s var(--ease) infinite; }
.fmenu a:nth-child(2) .fmenu__ic::after { animation-delay: .7s; } .fmenu a:nth-child(3) .fmenu__ic::after { animation-delay: 1.4s; } .fmenu a:nth-child(4) .fmenu__ic::after { animation-delay: 2.1s; }
.fmenu__ic svg { color: #fff; width: 21px; height: 21px; }
.fmenu__lbl { font: 700 15px/1 var(--f-head); letter-spacing: .2px; color: var(--navy); }
.fmenu__go { width: 0; height: 34px; margin-left: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c1); opacity: 0; flex: none; transition: width .45s var(--ease), margin .45s var(--ease), opacity .3s .1s; }
.fmenu__go svg { width: 16px; height: 16px; }
.fmenu a:hover, .fmenu a:focus-visible { padding-right: 12px; color: #fff; box-shadow: 0 20px 38px -14px var(--c1); }
.fmenu a:hover::before, .fmenu a:focus-visible::before { opacity: 1; }
.fmenu a:hover .fmenu__lbl, .fmenu a:focus-visible .fmenu__lbl { max-width: 200px; opacity: 1; margin-left: 14px; color: #fff; }
.fmenu a:hover .fmenu__ic, .fmenu a:focus-visible .fmenu__ic { transform: rotate(-12deg) scale(1.05); background: rgba(255, 255, 255, .22) !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.fmenu a:hover .fmenu__ic::after { opacity: 0; }
.fmenu a:hover .fmenu__go, .fmenu a:focus-visible .fmenu__go { width: 34px; margin-left: 16px; opacity: 1; }
.fmenu a:hover .fmenu__go svg { animation: nudge 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fmenu__ic::after { animation: none; } }
.fmenu a.c-yellow, .fmenu a.c-cyan, .fmenu a.c-green, .fmenu a.c-blue { background: #fff; }

/* ---------- Content elements from the client documents ---------- */
.sd-kicker { margin: 0 0 14px; font: 600 clamp(17px, .8rem + .5vw, 21px)/1.35 var(--f-head); color: var(--c, var(--teal)); }
.dp-quote { margin: 18px 0; padding: 16px 20px 16px 22px; border-left: 4px solid var(--teal); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #EEF8F8, rgba(238, 248, 248, 0)); font: italic 500 16.5px/1.6 var(--f-head); color: var(--navy); }
.dp-sub { margin: 18px 0 8px; font-size: 18px; color: var(--navy); }
.ticks li.li-titled { display: block; }
.ticks li.li-titled strong { display: block; color: var(--navy); font-weight: 600; margin-bottom: 2px; }
.ticks li.li-titled span { color: var(--text); }
.prose p strong, .expertise__item p strong { color: var(--navy); font-weight: 600; }
.meta li.dp-consult span { line-height: 1.5; }

/* =====================================================================
   v9 — client revisions
   ===================================================================== */
/* 1. Desktop only: +10% again (100% now looks like the previous 110%). Phones/tablets unchanged. */
@media (min-width: 1280px) {
  html { zoom: .968; }
  :root { --vw: 1.03306vw; --vh: 1.03306vh; --dvh: 1.03306dvh; --z: .968; }
}
@media (min-width: 1101px) and (max-width: 1279.98px) {
  html { zoom: 1.1; }
  :root { --vw: .90909vw; --vh: .90909vh; --dvh: .90909dvh; --z: 1.1; }
}
@media (min-width: 1101px) and (max-width: 1279.98px) {
  .hdr, .hdr-main { zoom: .90909; }
  .hdr-main .menu > li { margin: 0 clamp(5px, .7vw, 12px); }
  .hdr-main__row { padding-inline: clamp(14px, 2vw, 40px) !important; }
}

/* 2. Floating quick actions + mobile bottom bar (sitewide, from the homepage) */
/* Hero: no hover/cursor effects, nothing layered over the slider images */
.hslide__media .hchip, .hslide__media .hshape, .hslide__media .hsteth { display: none !important; }
.hslider .hslide__frame { transform: none !important; }
.hslider .hslide__media .hchip { translate: none !important; }
.hero .btn:hover, .hero .btn { transform: none; }
/* Hero: phone-friendly titles (2-3 lines) */
@media (max-width: 767px) {
  .hslide__content { padding: 16px 18px 0 !important; }
  .hslide__title { white-space: normal; font-size: clamp(25px, 7.4vw, 31px); line-height: 1.2; letter-spacing: -.2px; text-wrap: balance; }
  .hslide__sub { font-size: 10.5px; letter-spacing: .5px; padding: 7px 12px; white-space: nowrap; }
  .hslide__desc { font-size: 14.5px; line-height: 1.6; }
}
/* Mobile bottom bar: original icons, clean white bar */
.mbar { background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px -10px rgba(9, 36, 60, .28); overflow: hidden; }
.mbar a, .mbar a:first-child { background: #fff; color: var(--navy); font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; gap: 5px; padding: 10px 4px 12px; }
.mbar a:active { background: #F1F8F8; }
.mbar__t { display: block; line-height: 1.25; white-space: nowrap; }
.mbar a, .mbar a:first-child { justify-content: flex-start; }
.mbar__ic { width: 30px; height: 30px; flex: none; }
.mbar__ic img, .mbar a:first-child img { width: 30px; height: 30px; filter: none; object-fit: contain; }
/* Desktop floating buttons: original icons, expanding white pills */
.fmenu a.c-yellow { --tint: #FCDF99; } .fmenu a.c-cyan { --tint: #ACFDFF; } .fmenu a.c-green { --tint: #FADDE0; } .fmenu a.c-blue { --tint: #D5E8F2; }
.fmenu a { height: 64px; padding: 0 5px; background: #fff; color: var(--navy); }
.fmenu a::before { display: none; }
.fmenu__ic { width: 54px; height: 54px; background: var(--tint) !important; border: 2px solid var(--teal); box-shadow: none; }
.fmenu__ic::after { border-color: var(--teal); }
.fmenu__ic img { width: 32px; height: 32px; object-fit: contain; filter: none; }
.fmenu a:hover, .fmenu a:focus-visible { padding-right: 12px; color: var(--teal); box-shadow: 0 18px 36px -16px rgba(9, 36, 60, .55); }
.fmenu a:hover .fmenu__lbl, .fmenu a:focus-visible .fmenu__lbl { color: var(--teal); }
.fmenu a:hover .fmenu__ic, .fmenu a:focus-visible .fmenu__ic { background: #fff !important; transform: rotate(-8deg); box-shadow: none; }
.fmenu__go { background: var(--teal); color: #fff; }

/* 3. Phones: no WhatsApp bubble or back-to-top arrow; room for the bottom bar */
@media (max-width: 767px) {
  .wa-fab, .to-top { display: none !important; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* 4. Phones: page heroes (all inner pages) */
@media (max-width: 767px) {
  .pt-mark { display: none !important; }
  .ptitle__row { padding: 64px 18px 22px !important; gap: 14px; align-items: flex-start; flex-direction: column; }
  .pt-head { max-width: 100%; }
  .pt-pill { max-width: 100%; padding: 6px 12px; gap: 8px; font-size: 10.5px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-pill .pulse { flex: none; }
  .ptitle h1 { overflow-wrap: anywhere; }
  .crumb { margin: 0; gap: 6px 8px; font-size: 14px; line-height: 1.3; align-items: center; justify-content: flex-start; }
  .crumb [aria-current] { animation: none; margin: 0; padding: 3px 10px; max-width: 100%; }
  .ptitle__bg { opacity: .55; }
}
/* 5. Phones: section headings with icon (speciality, facility and doctor pages) */
@media (max-width: 767px) {
  .sec-h { gap: 12px; align-items: center; }
  .sec-h > i { width: 40px; height: 40px; border-radius: 12px; }
  .sec-h > i svg { width: 19px; height: 19px; }
  .sec-h > i::after { inset: -4px; border-radius: 15px; }
  .sec-h h2, .sec-h .split-words { font-size: clamp(19px, 5.4vw, 22px) !important; line-height: 1.3 !important; min-width: 0; }
}
/* 6. Phones: footer "View All" buttons on one line */
@media (max-width: 767px) {
  .ft-all { white-space: nowrap; font-size: 13px; padding: 8px 14px; }
}
@media (max-width: 767px) {
  .ft-cols { grid-template-columns: 1fr; gap: 30px; }
  .ft-col:not(.ft-col--contact) .ft-links { columns: 2; column-gap: 18px; }
  .ft-col:not(.ft-col--contact) .ft-links li { break-inside: avoid; margin: 0 0 11px; }
  .ft-all { margin-top: 6px; }
}
/* Phones: a little more room for text inside content cards on detail pages */
@media (max-width: 767px) {
  :is(.pg-sd, .pg-fd, .pg-dp) .prose, .detail__main > section.prose, .fd-main > section.prose { padding-left: 18px !important; padding-right: 16px !important; }
}

/* 7. Phones: doctors listing (compact filters, horizontal cards) */
@media (max-width: 559px) {
  .dl-bar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 18px; }
  .dl-search, .dl-seg, .dl-bar > .dl-sel:has(select[data-f="dept"]) { grid-column: 1 / -1; }
  .dl-search input { height: 46px; border-radius: 13px; }
  .dl-sel { height: 46px; border-radius: 13px; padding: 5px 26px 5px 12px; min-width: 0; }
  .dl-sel select { font-size: 13.5px; min-width: 0; width: 100%; text-overflow: ellipsis; }
  .dl-seg { height: 44px; border-radius: 13px; }
  .dl-seg button { flex: 1; }
  .dl-meta { margin: 14px 0 14px; }
  .dl-grid { gap: 12px; }
  .dc-in { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; border-radius: 18px; }
  .dc-photo { width: 104px; flex: none; aspect-ratio: auto; min-height: 132px; border-radius: 14px; align-self: stretch; }
  .dc-photo img { object-position: top center; }
  .dc-dept { display: none; }
  .dc-body { padding: 2px 0 0; gap: 4px; min-width: 0; transform: none; }
  .dc-body h3 { font-size: 16px; line-height: 1.3; }
  .dc-role { font-size: 13px; line-height: 1.4; }
  .dc-quals { gap: 4px; }
  .dc-quals span { font-size: 10.5px; padding: 3px 7px; }
  .dc-lang { font-size: 12px; }
  .dc-btns { margin-top: auto; gap: 6px; }
  .dc-b { height: 36px; font-size: 12.5px; border-radius: 10px; }
}