/* NOTE: the floating button container is .mp-fab, NOT .fab.
   Font Awesome uses `fab` as its Brands font class, so styling `.fab`
   silently applied position:fixed to every brand icon on the page and
   made WhatsApp, Facebook, Instagram and LinkedIn vanish. */
/* ==========================================================================
   MedPark v2. Full redesign, draft. Served only on ?preview=2.
   Pattern: Trust & Authority + Conversion.
   Palette and type from Medpark Bandguidline.pdf.
   ========================================================================== */

@font-face{font-family:"Organo";src:url("/fonts/Organo-Regular.woff2") format("woff2"),url("/fonts/Organo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --t1:#12C0C6; --t2:#41CCD1; --t3:#70D9DC; --t4:#A0E5E8; --t5:#CFF2F3; --t6:#E1F4FD;
  --n1:#0A2A4A; --n2:#3B546E; --n3:#6C7F92; --n4:#9DA9B6; --n5:#CED4DA; --n6:#EDF2F5;
  --ink:var(--n1); --ink2:var(--n2); --ink3:var(--n3);
  --line:var(--n5); --line-soft:#E4EAEE;
  --bg:#FFFFFF; --bg2:#F5F9FB; --bg3:var(--t6);
  --accent:var(--t1); --accent-ink:#0A7F84; --accent-deep:#0E9AA0;
  /* Action colours. These are deliberate and they are not decoration.
     Red marks the primary emergency action and WhatsApp green marks WhatsApp,
     so a distressed visitor finds them without reading. Marketing chose this
     on purpose. An earlier revision removed them for being outside the brand
     palette, which was wrong: the palette governs the brand surface, not the
     safety-critical controls. Restored 2026-09-03. Do not remove again. */
  --urgent:#E63946; --urgent-deep:#C92F3A;
  --wa:#25D366; --wa-deep:#128C7E;
  /* Type system, straight from the MedPark guideline:
       Headlines and large text : Helvetica World Bold, and Organo
       Sub-headlines            : Helvetica Bold
       Paragraph                : Helvetica World Regular
     Helvetica World is not licensed for web use here, so the stack names it
     first and falls back through the real Helvetica metrics. Arimo sits near
     the end as the Linux/Android stand-in, not at the front where it was.
     Trebuchet MS was removed from the display stack: it is not a brand face
     and looks nothing like either Organo or Helvetica. */
  --ff:"Helvetica World","Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  --fh:"Helvetica World","Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  --fd:"Organo",var(--ff);
  --r1:10px; --r2:16px; --r3:24px; --pill:999px;
  --sh1:0 1px 3px rgba(10,42,74,.06);
  --sh2:0 8px 24px -10px rgba(10,42,74,.22);
  --sh3:0 22px 50px -20px rgba(10,42,74,.40);
  --ez:cubic-bezier(.22,.61,.36,1);
  --tap:48px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,iframe,svg{max-width:100%;display:block}

/* --------------------------------------------------------------------------
   Rendering cost of the long tail.
   This page is one very long document. Without help the browser lays out and
   paints every section on first load, including the ones nobody scrolls to.
   content-visibility lets it skip that work until a section is near the
   viewport. contain-intrinsic-size gives it a size to assume in the meantime,
   so the scrollbar stays honest and nothing jumps.
   Deliberately NOT applied to the hero or the first content section, which
   must paint immediately, nor to the scroll-snap rails, where skipping layout
   would break snapping. Added 2026-09-02.
   -------------------------------------------------------------------------- */
.legacy .med-news-section,
.legacy .med-insurance-section,
.legacy .med-package-section,
.faq{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
@supports not (content-visibility:auto){
  .legacy .med-news-section,.legacy .med-insurance-section,
  .legacy .med-package-section,.faq{content-visibility:visible}
}
img,video{height:auto}
a{color:var(--accent-ink);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:32px}}

.sec{padding-block:clamp(52px,7vw,96px)}
.sec--tint{background:var(--bg2)}
.sec--deep{background:var(--n1);color:#fff}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep p{color:#BCD0DE}

/* Sub-headlines are Helvetica Bold per the guideline. They already resolved
   to that by inheriting the body stack at weight 700; naming the variable
   explicitly stops it drifting if the body face is ever changed. */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;text-wrap:balance;color:var(--ink)}
h2,h3,h4{font-family:var(--fh)}
/* The guideline lists Helvetica World Bold FIRST for headlines, Organo second.
   Organo is a rounded display face: charming on a short accent, too informal
   across a long hospital headline. Headlines use the Helvetica-metric face;
   Organo stays available as .mp-display for short accents. */
h1{font-family:var(--fh);font-weight:700;letter-spacing:-.02em;font-size:clamp(32px,5.4vw,56px);
   line-height:1.08;letter-spacing:-.022em}
.mp-display{font-family:var(--fd);font-weight:400;letter-spacing:.01em}
h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;letter-spacing:-.015em}
h3{font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--ink2);max-width:66ch}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.sec--deep .eyebrow{color:var(--t2)}
.sec--deep .eyebrow::before{background:var(--t2)}

.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{font-size:17px}
.sec-head.center p{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:13px 26px;border-radius:var(--pill);border:2px solid transparent;
  font-family:var(--ff);font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
  touch-action:manipulation;transition:transform .18s var(--ez),box-shadow .18s var(--ez),background-color .18s var(--ez),color .18s var(--ez),border-color .18s var(--ez)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* The two safety-critical actions. Same values the current live site uses,
   so a returning visitor recognises them instantly. */
.btn--urgent{background:var(--urgent);border-color:var(--urgent);color:#fff;box-shadow:var(--sh2)}
.btn--urgent:hover,.btn--urgent:focus-visible{background:var(--urgent-deep);border-color:var(--urgent-deep);color:#fff}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn--wa:hover,.btn--wa:focus-visible{background:var(--wa-deep);border-color:var(--wa-deep);color:#fff}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#04262A}
.btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--n1);border-color:#fff}
.btn--outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn--lg{padding:16px 30px;font-size:17px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:900;background:rgba(10,42,74,.96);
  backdrop-filter:saturate(150%) blur(10px);color:#fff;box-shadow:var(--sh2)}
.hdr__bar{display:flex;align-items:center;gap:16px;min-height:66px}
.hdr__logo{flex:0 0 auto;display:flex;align-items:center}
.hdr__logo img{height:42px;width:auto;border-radius:8px;background:#fff;padding:4px}
.hdr__nav{display:none;margin-left:auto;gap:2px}
@media (min-width:1024px){.hdr__nav{display:flex}}
.hdr__nav a{position:relative;color:#fff;text-decoration:none;font-weight:600;font-size:15px;
  padding:10px 13px;border-radius:8px;white-space:nowrap}
.hdr__nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--t1);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ez)}
.hdr__nav a:hover::after,.hdr__nav a:focus-visible::after,.hdr__nav a[aria-current]::after{transform:scaleX(1)}
.hdr__act{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:1024px){.hdr__act{margin-left:14px}}
.hdr__lang{display:none;gap:4px}
@media (min-width:768px){.hdr__lang{display:flex}}
.hdr__lang a{min-width:42px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em;
  border:1.5px solid rgba(255,255,255,.5);border-radius:var(--pill);transition:background-color .18s var(--ez)}
.hdr__lang a:hover,.hdr__lang a[aria-current]{background:#fff;color:var(--n1);border-color:#fff}
.hdr__call{display:none}
@media (min-width:600px){.hdr__call{display:inline-flex}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);
  background:transparent;border:0;color:#fff;font-size:22px;border-radius:10px;cursor:pointer}
@media (min-width:1024px){.burger{display:none}}
.burger:hover{background:rgba(255,255,255,.14)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--n1);color:#fff;
  transform:translateX(100%);transition:transform .28s var(--ez);z-index:950;
  display:flex;flex-direction:column;padding:18px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer__close{align-self:flex-end;width:var(--tap);height:var(--tap);background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer;border-radius:10px}
.drawer nav{display:flex;flex-direction:column;margin-top:6px}
.drawer nav a{color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:14px 6px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.drawer nav a:hover{color:var(--t2)}
.drawer__foot{margin-top:18px;display:grid;gap:10px}
.scrim{position:fixed;inset:0;background:rgba(4,18,30,.55);opacity:0;pointer-events:none;
  transition:opacity .28s var(--ez);z-index:940}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(520px,78svh,760px);display:flex;align-items:center;
  background:var(--n1) url("/videos/hero-poster.jpg") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:0;transform:none;pointer-events:none}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(6,26,46,.90) 0%,rgba(8,34,58,.72) 46%,rgba(10,42,74,.42) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(44px,7vw,76px)}
.hero__badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:var(--pill);
  padding:8px 15px;font-size:13.5px;font-weight:700;margin-bottom:20px}
.hero__badge .dot{width:9px;height:9px;border-radius:50%;background:var(--t1);box-shadow:0 0 0 4px rgba(18,192,198,.28)}
.hero h1{color:#fff;max-width:16ch;margin-bottom:18px}
.hero__lead{color:#DCEAF2;font-size:clamp(17px,2.1vw,21px);max-width:46ch;margin-bottom:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__note{margin-top:20px;color:#A8C4D4;font-size:14px;display:flex;align-items:center;gap:8px}

/* ---------- trust strip ---------- */
.trust{background:var(--n1);border-top:1px solid rgba(255,255,255,.10);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){.trust__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust__item{display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:76px}
@media (min-width:860px){.trust__item+.trust__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}}
.trust__item i{font-size:20px;color:var(--t2);width:26px;text-align:center;flex:0 0 auto}
.trust__item b{display:block;font-size:14.5px;font-weight:700}
.trust__item span{display:block;font-size:12.5px;color:#9FC0CE;line-height:1.35}

/* ---------- help / triage cards ---------- */
.help__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.help__card{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh1);text-decoration:none;
  transition:transform .2s var(--ez),box-shadow .2s var(--ez),border-color .2s var(--ez)}
@media (hover:hover){.help__card:hover{transform:translateY(-5px);box-shadow:var(--sh3);border-color:var(--t3)}}
.help__ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--t6);color:var(--accent-ink);font-size:21px}
.help__card h3{margin:0;color:var(--ink)}
.help__card p{margin:0;font-size:14.5px;color:var(--ink3)}
.help__card .go{margin-top:auto;padding-top:8px;font-weight:700;font-size:14.5px;color:var(--accent-ink)}
.help__card--urgent{background:linear-gradient(160deg,var(--t6),#fff);border-color:var(--t3);
  box-shadow:0 0 0 1px var(--t4) inset,var(--sh2)}
.help__card--urgent .help__ico{background:var(--t1);color:var(--n1)}
.help__card--urgent .go{color:var(--accent-ink);font-weight:800}

/* ---------- locations ---------- */
.loc__grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:900px){.loc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.loc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1)}
.loc__map{position:relative;aspect-ratio:16/10;background:var(--n6)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc__body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.loc__body h3{margin:0}
.loc__tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:var(--t6);
  padding:6px 12px;border-radius:var(--pill)}
.loc__rows{display:grid;gap:9px;margin:2px 0 4px}
.loc__row{display:flex;gap:11px;font-size:15px;color:var(--ink2);align-items:flex-start}
.loc__row i{color:var(--accent-ink);width:18px;text-align:center;margin-top:3px;flex:0 0 auto}
.loc__cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:6px}
.loc__cta .btn{flex:1 1 auto;min-width:140px}

/* ---------- services ---------- */
.svc__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.svc{display:flex;align-items:center;gap:12px;padding:16px 18px;min-height:72px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r1);font-weight:600;color:var(--ink);
  text-decoration:none;transition:border-color .18s var(--ez),background-color .18s var(--ez),transform .18s var(--ez)}
.svc i{color:var(--accent-ink);font-size:17px;width:22px;text-align:center;flex:0 0 auto}
@media (hover:hover){.svc:hover{border-color:var(--t3);background:var(--t6);transform:translateY(-2px)}}

/* ---------- insurance ---------- */
.ins{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.ins{grid-template-columns:1fr 1fr}}
.ins__list{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.ins__list li{display:flex;gap:11px;align-items:flex-start;color:#CFE0EA;font-size:16px}
.ins__list i{color:var(--t2);margin-top:4px}
.ins__panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r3);padding:26px}
.ins__panel h3{margin-top:0}

/* ---------- stories rail ---------- */
.rail__shell{position:relative;display:flex;align-items:center;gap:10px}
.rail{list-style:none;margin:0;padding:4px 2px 16px;display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--n5);border-radius:var(--pill)}
.story{position:relative;flex:0 0 auto;width:74vw;max-width:266px;aspect-ratio:9/16;
  scroll-snap-align:center;border-radius:var(--r2);overflow:hidden;background:var(--n1);
  box-shadow:var(--sh2);transition:transform .22s var(--ez),box-shadow .22s var(--ez)}
@media (min-width:768px){.story{width:230px;scroll-snap-align:start}
  .story:hover{transform:translateY(-5px);box-shadow:var(--sh3)}}
.story video{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.story__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s var(--ez);
  background:linear-gradient(180deg,rgba(10,42,74,.08),rgba(10,42,74,.46))}
.story__play span{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--n1);display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.32);transition:transform .18s var(--ez),background-color .18s var(--ez)}
.story__play:hover span,.story__play:focus-visible span{background:var(--t1);color:#fff;transform:scale(1.08)}
.story.is-playing .story__play{opacity:0;pointer-events:none}
.rail__btn{flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--n1);display:none;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .18s var(--ez),color .18s var(--ez)}
.rail__btn:hover{background:var(--n1);color:#fff;border-color:var(--n1)}
.rail__btn[disabled]{opacity:.35;cursor:default}
@media (min-width:768px){.rail__btn{display:inline-flex}}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px;max-width:900px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.faq details[open]{border-color:var(--t3);box-shadow:var(--sh1)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;min-height:var(--tap);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-weight:700;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:13px;color:var(--accent-ink);transition:transform .22s var(--ez);flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .faq__a{padding:0 22px 20px;color:var(--ink2);font-size:16px}
.faq .faq__a p{margin:0}

/* ---------- footer ---------- */
.ftr{background:var(--n1);color:#C9DCE8;padding-block:clamp(40px,6vw,66px) 0}
.ftr__grid{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:700px){.ftr__grid{grid-template-columns:1.4fr 1fr 1.2fr}}
.ftr h4{color:#fff;font-size:16px;margin:0 0 14px}
.ftr a{color:#BFE9EB;text-decoration:none}
.ftr a:hover{color:var(--t1);text-decoration:underline}
.ftr__logo{background:#fff;border-radius:14px;padding:10px;display:inline-block;margin-bottom:12px}
.ftr__logo img{height:52px;width:auto}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__social{display:flex;gap:9px;margin-top:14px}
.ftr__social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .18s var(--ez),transform .18s var(--ez)}
.ftr__social a:hover{background:var(--t1);color:var(--n1);transform:translateY(-2px)}
.ftr__bottom{margin-top:30px;border-top:1px solid rgba(255,255,255,.12);padding-block:18px;
  font-size:13px;color:var(--n4);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---------- sticky mobile action ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:880;display:flex;gap:1px;
  background:var(--n1);padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -3px 16px rgba(10,42,74,.3)}
.dock a{flex:1 1 0;min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px;
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;touch-action:manipulation}
.dock a:active{filter:brightness(.92)}
.dock .d-call{background:var(--n1)}
.dock .d-wa{background:var(--t1);color:var(--n1)}
@media (min-width:768px){.dock{display:none}}
@media (max-width:767px){body{padding-bottom:60px}}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:880;display:none;align-items:center;gap:10px;
  background:var(--wa);color:#fff;padding:14px 20px;border-radius:var(--pill);text-decoration:none;
  font-weight:700;box-shadow:var(--sh3);transition:transform .18s var(--ez)}
.wa-float:hover{transform:translateY(-3px);color:#fff}
@media (min-width:768px){.wa-float{display:inline-flex}}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--n1);padding:12px 18px;
  border-radius:0 0 10px 0;font-weight:700;z-index:999}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hero__video{display:none}
  .rail{scroll-behavior:auto}
}

/* ==========================================================================
   Section blending, reveal on scroll, vertical marquee.
   ========================================================================== */

/* ---------- soft transitions between sections ----------
   Hard colour edges between bands read as separate pages stacked up. Each
   section fades into its neighbour instead, so scrolling feels continuous. */
.sec{position:relative}

.sec--tint{
  background:linear-gradient(180deg,
    var(--bg) 0%, var(--bg2) 8%, var(--bg2) 92%, var(--bg) 100%);
}

.sec--deep{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(18,192,198,.20) 0%, rgba(18,192,198,0) 60%),
    linear-gradient(180deg, #0D3455 0%, var(--n1) 26%, var(--n1) 74%, #08243E 100%);
}

/* A thin gradient seam above and below a dark band softens the join. */
.sec--deep::before,
.sec--deep::after{
  content:"";position:absolute;left:0;right:0;height:70px;pointer-events:none;z-index:1
}
.sec--deep::before{top:0;background:linear-gradient(180deg,var(--bg2) 0%,rgba(245,249,251,0) 100%)}
.sec--deep::after{bottom:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}
.sec--deep > .wrap{position:relative;z-index:2}

/* The hero hands over to the trust band with a fade rather than a cut. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,42,74,0) 0%,rgba(10,42,74,.85) 70%,var(--n1) 100%)
}
.trust{background:linear-gradient(180deg,var(--n1) 0%,var(--n1) 62%,#0C3252 100%)}
.trust + .sec{background:linear-gradient(180deg,#F2F8FA 0%,var(--bg) 34%)}

/* ---------- reveal on scroll ----------
   Progressive enhancement the safe way round. Content is VISIBLE by default.
   The hiding rules apply only once JS has put .js-reveal on <html>, which it
   does only when IntersectionObserver actually exists and motion is allowed.
   If the script fails, or a bot renders the page, everything is simply shown.

   An earlier version hid content by default. That hid the entire preserved
   content block, because a 0.12 intersection ratio can never be reached by an
   element several times taller than the viewport. Threshold is now 0. */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ez),transform .62s var(--ez)}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none}

html.js-reveal [data-reveal-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity .58s var(--ez),transform .58s var(--ez)}
html.js-reveal [data-reveal-stagger].is-in > *{opacity:1;transform:none}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.02s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.08s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.14s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.20s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.26s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.32s}
html.js-reveal [data-reveal-stagger].is-in > *:nth-child(n+7){transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- vertical marquee gallery ----------
   Two columns drifting in opposite directions. Pure transform, so it stays on
   the compositor. Pauses on hover and focus, and does not run at all for
   reduced motion, where it becomes a normal grid. */
.gal{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));
  height:clamp(430px,66vh,640px);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
@media (min-width:900px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}

.gal__col{display:flex;flex-direction:column;gap:16px;will-change:transform}
.gal__col--down{animation:galUp 52s linear infinite}
.gal__col--up{animation:galDown 52s linear infinite}
.gal:hover .gal__col,.gal:focus-within .gal__col{animation-play-state:paused}

.gal figure{margin:0;border-radius:var(--r2);overflow:hidden;background:var(--n6);
  box-shadow:var(--sh1);flex:0 0 auto}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}

@keyframes galUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes galDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .gal{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .gal__col{animation:none}
  .gal__col > *:nth-child(n+4){display:none}
}

/* ==========================================================================
   Preserved sections. The client's own photography, facility cards, packages
   catalogue, services and news carried over from the live homepage and
   restyled here. The markup is untouched; only presentation changes.
   ========================================================================== */

.legacy .med-section,
.legacy .med-news-section,
.legacy .emergency-section,
.legacy .capabilities-section,
.legacy .packages-section,
.legacy .med-insurance-section,
.legacy .emergency-cta-section{padding-block:clamp(48px,6.5vw,88px);position:relative}

.legacy .med-container,
.legacy .container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.legacy .med-container,.legacy .container{padding-inline:32px}}

/* alternating grounds, each fading into the next */
.legacy .med-light-bg,
.legacy .capabilities-section,
.legacy .packages-section{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 8%,var(--bg2) 92%,var(--bg) 100%)}

.legacy h2{font-size:clamp(25px,3.4vw,40px);font-weight:700;letter-spacing:-.015em;
  color:var(--ink);text-align:center;margin-bottom:.55em;text-wrap:balance}
.legacy h3{font-size:clamp(17px,1.9vw,21px);font-weight:700;color:var(--ink)}
.legacy p{color:var(--ink2)}

/* a short turquoise rule under each section heading */
.legacy h2::after{content:"";display:block;width:64px;height:4px;margin:16px auto 0;
  border-radius:var(--pill);background:linear-gradient(90deg,var(--t1),var(--n1))}

/* ---------- facility cards, packages, services, news: one card language ---- */
.legacy .med-feature,
.legacy .med-service,
.legacy .med-news-card,
.legacy .med-package-card,
.legacy .capability-card,
.legacy .service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh1);overflow:hidden;height:100%;width:auto!important;margin:0!important;
  display:flex;flex-direction:column;
  transition:transform .22s var(--ez),box-shadow .22s var(--ez),border-color .22s var(--ez)}

@media (hover:hover){
  .legacy .med-feature:hover,.legacy .med-service:hover,.legacy .med-news-card:hover,
  .legacy .med-package-card:hover,.legacy .med-hospital-card:hover,
  .legacy .capability-card:hover,.legacy .service-card:hover{
    transform:translateY(-6px);box-shadow:var(--sh3);border-color:var(--t3)}
}

/* photos fill their frame and never shift the layout */
.legacy .med-hospital-card img,
.legacy .med-news-image-wrapper img,
.legacy .med-package-card img,
.legacy .zoomable-image{width:100%;height:100%;object-fit:cover;display:block}
.legacy .med-news-image-wrapper{aspect-ratio:16/10;overflow:hidden;position:relative}
.legacy .med-news-image-wrapper img{transition:transform .5s var(--ez)}
.legacy .med-news-card:hover .med-news-image-wrapper img{transform:scale(1.05)}

.legacy .med-news-date-flag{position:absolute;left:12px;bottom:12px;background:var(--n1);color:#fff;
  border-radius:var(--pill);padding:6px 13px;font-size:12px;font-weight:700;letter-spacing:.02em}

.legacy .med-news-content{display:flex;flex-direction:column;flex:1 1 auto;padding:20px;gap:8px}
.legacy .med-news-content h3{margin:0}
.legacy .med-news-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:11px 18px;border-radius:var(--pill);background:var(--t6);
  color:var(--accent-ink);border:1px solid var(--t4);font-weight:700;text-decoration:none;
  transition:background-color .18s var(--ez),color .18s var(--ez)}
.legacy .med-news-btn:hover{background:var(--accent);border-color:var(--accent);color:#04262A}

/* ---------- grids: equal columns, equal heights, no ragged rows ---------- */
.legacy .med-features,
.legacy .med-services,
.legacy .med-news-grid,
.legacy .hospital-services-grid,
.legacy .capabilities-grid,
.legacy .services-grid{display:grid;gap:18px;align-items:stretch}

.legacy .med-features,
.legacy .capabilities-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.legacy .med-services,
.legacy .services-grid,
.legacy .hospital-services-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.legacy .med-news-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* the two facility cards sit side by side and match height */
.legacy .med-hospitals-grid,
.legacy .hospital-cards{display:grid;gap:22px;grid-template-columns:1fr;align-items:stretch}
@media (min-width:860px){.legacy .med-hospitals-grid,.legacy .hospital-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- packages catalogue rail: horizontal, snapping ---------- */
.legacy .med-packages-carousel,
.legacy .packages-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:14px;-webkit-overflow-scrolling:touch}
.legacy .med-package-card{flex:0 0 auto;width:min(78vw,300px);scroll-snap-align:center}
@media (min-width:768px){.legacy .med-package-card{width:280px;scroll-snap-align:start}}
.legacy .med-packages-carousel::-webkit-scrollbar,
.legacy .packages-carousel::-webkit-scrollbar{height:6px}
.legacy .med-packages-carousel::-webkit-scrollbar-thumb,
.legacy .packages-carousel::-webkit-scrollbar-thumb{background:var(--n5);border-radius:var(--pill)}

/* ---------- buttons inside preserved markup ---------- */
.legacy .med-btn,.legacy .cta-btn,.legacy .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:13px 24px;border-radius:var(--pill);font-weight:700;text-decoration:none;
  background:var(--accent);color:#04262A;border:2px solid var(--accent);
  transition:transform .18s var(--ez),background-color .18s var(--ez),color .18s var(--ez)}
.legacy .med-btn:hover,.legacy .cta-btn:hover,.legacy .btn-primary:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;transform:translateY(-2px)}

/* dark bands inside the preserved markup follow the same blending rule */
.legacy .emergency-section,
.legacy .emergency-cta-section,
.legacy .med-insurance-section{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(18,192,198,.18) 0%, rgba(18,192,198,0) 60%),
    linear-gradient(180deg,#0D3455 0%,var(--n1) 26%,var(--n1) 74%,#08243E 100%);
  color:#fff}
.legacy .emergency-section h2,.legacy .emergency-cta-section h2,.legacy .med-insurance-section h2,
.legacy .emergency-section h3,.legacy .emergency-cta-section h3,.legacy .med-insurance-section h3{color:#fff}
.legacy .emergency-section p,.legacy .emergency-cta-section p,.legacy .med-insurance-section p{color:#C3D7E4}

/* keep every image inside preserved markup responsive */
.legacy img{max-width:100%;height:auto}
.legacy iframe{max-width:100%}

/* ---------- cashless positioning ----------
   MedPark is being positioned as the first cashless hospital in Egypt. Given a
   prominent, repeated place: hero flag, trust strip, and the insurance band. */
.hero__flag{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;
  background:linear-gradient(90deg,rgba(18,192,198,.24),rgba(18,192,198,.06));
  border:1px solid rgba(65,204,209,.55);border-radius:var(--pill);
  padding:10px 18px;color:#EAFBFC;font-size:15.5px}
.hero__flag i{color:var(--t2);font-size:17px}
.hero__flag strong{color:#fff}

.trust__item--flag{background:rgba(18,192,198,.12);
  box-shadow:inset 0 0 0 1px rgba(65,204,209,.35)!important;border-radius:12px}
.trust__item--flag i{color:var(--t1)}


/* ==========================================================================
   Facility cards. Two photos of the real buildings, each a single large
   click target with its name and description over a gradient scrim, and a
   clear Learn More affordance. The overlay is absolutely positioned over the
   photo in the original markup, so this must not be flattened into a column.
   ========================================================================== */
.legacy .med-hospitals-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:880px){.legacy .med-hospitals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.legacy .med-hospital-card{
  position:relative;border-radius:var(--r3);overflow:hidden;background:var(--n1);
  box-shadow:var(--sh2);border:1px solid var(--line);
  transition:transform .26s var(--ez),box-shadow .26s var(--ez)}
@media (hover:hover){
  .legacy .med-hospital-card:hover{transform:translateY(-6px);box-shadow:var(--sh3)}
}

.legacy .med-hospital-image-wrapper{position:relative;display:block;
  aspect-ratio:4/3;overflow:hidden;background:var(--n1)}
@media (min-width:880px){.legacy .med-hospital-image-wrapper{aspect-ratio:3/2}}

.legacy .med-hospital-image-wrapper > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ez)}
@media (hover:hover){
  .legacy .med-hospital-card:hover .med-hospital-image-wrapper > img{transform:scale(1.06)}
}

/* Scrim so the name and description stay readable over any photograph. */
.legacy .med-hospital-image-wrapper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,42,74,0) 28%,rgba(10,42,74,.62) 62%,rgba(6,26,46,.93) 100%)}

.legacy .med-hospital-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:24px 24px 26px;color:#fff}
.legacy .med-hospital-overlay h3{
  margin:0;color:#fff;font-size:clamp(20px,2.3vw,26px);font-weight:700;
  letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.legacy .med-hospital-overlay p{
  margin:0;color:#DCEAF2;font-size:15.5px;line-height:1.5;max-width:46ch;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}

.legacy .med-btn-small{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  margin-top:6px;padding:12px 22px;border-radius:var(--pill);
  background:var(--accent);color:#04262A;border:2px solid var(--accent);
  font-weight:700;font-size:15px;text-decoration:none;
  transition:background-color .18s var(--ez),color .18s var(--ez),transform .18s var(--ez)}
.legacy .med-btn-small::after{content:"→";font-weight:700;font-size:1.05em}
.legacy .med-btn-small:hover,.legacy .med-btn-small:focus-visible{
  background:#fff;border-color:#fff;color:var(--n1);transform:translateX(3px)}

/* The whole card is clickable, not just the button. The real link is still the
   only thing in the tab order, so this adds no duplicate stop for keyboards. */
.legacy .med-hospital-card .med-btn-small::before{
  content:"";position:absolute;inset:0;z-index:3}
.legacy .med-hospital-card:focus-within{outline:3px solid var(--accent);outline-offset:3px}

/* ==========================================================================
   Packages catalogue. Twenty price pages with no carousel script in v2, so
   they stacked. Turned into a snapping horizontal rail with CSS alone, which
   also removes the JS dependency entirely.
   ========================================================================== */
.legacy .med-packages-wrapper{
  position:relative;display:flex;align-items:center;gap:10px}

.legacy .med-packages-carousel{
  display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding:4px 2px 16px;transform:none!important;width:auto!important;flex:1 1 auto}

.legacy .med-package-card{
  flex:0 0 auto!important;width:min(76vw,300px);scroll-snap-align:center;
  border-radius:var(--r2);overflow:hidden;background:#fff}
@media (min-width:768px){
  .legacy .med-package-card{width:290px;scroll-snap-align:start}
}
.legacy .med-package-card img{width:100%;height:auto;display:block;cursor:zoom-in}

.legacy .med-packages-carousel::-webkit-scrollbar{height:8px}
.legacy .med-packages-carousel::-webkit-scrollbar-thumb{background:var(--n5);border-radius:var(--pill)}

/* The old arrows were driven by a script v2 does not load. The rail scrolls and
   snaps on its own, so they are hidden rather than left dead. */
.legacy .med-packages-nav{
  flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--n1);
  font-size:22px;line-height:1;cursor:pointer;display:none;
  align-items:center;justify-content:center;
  transition:background-color .18s var(--ez),color .18s var(--ez)}
.legacy .med-packages-nav:hover{background:var(--n1);color:#fff;border-color:var(--n1)}
.legacy .med-packages-nav[disabled]{opacity:.35;cursor:default}
@media (min-width:768px){.legacy .med-packages-nav{display:inline-flex}}

/* Price pages are portrait scans; keep them whole rather than cropping. */
.legacy .med-package-card img{aspect-ratio:auto;object-fit:contain;background:#fff}
.legacy .med-wellness-text{text-align:center;margin-inline:auto;font-size:17px}

/* ==========================================================================
   Legacy overrides found by inspecting computed styles on the live page.
   ========================================================================== */

/* styles.css gives .center a turquoise gradient pill with a 60px radius and
   white text. It reads as a button rather than a heading and clashes with the
   v2 heading style. Normalised to match every other section heading. */
.legacy h2.center,
.legacy h2.center:is(:hover,:focus){
  background-image:none!important;background-color:transparent!important;
  color:var(--ink)!important;border-radius:0!important;
  padding:0 0 16px!important;box-shadow:none!important;
  display:block;width:auto;text-align:center}

/* Section intro paragraphs sit centred under their heading, on one measure. */
.legacy .med-wellness-text,
.legacy .med-intro-text,
.legacy .capabilities-subtitle,
.legacy .packages-subtitle,
.legacy .emergency-text{
  text-align:center;margin-inline:auto;max-width:68ch;font-size:17px;line-height:1.65}

/* Chips and pills used for feature lists across the preserved sections. */
.legacy .med-chip,.legacy .feature-chip,.legacy .emergency-list li,.legacy .packages-list li{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);
  background:var(--t6);color:var(--accent-ink);font-weight:600;font-size:14.5px;
  border:1px solid var(--t4);list-style:none}
.legacy .emergency-list,.legacy .packages-list{display:flex;flex-wrap:wrap;gap:10px;
  padding:0;margin:18px 0;justify-content:center}

/* Inside the dark bands the chips invert. */
.legacy .emergency-section .emergency-list li,
.legacy .med-insurance-section li{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#EAF6F9}

/* The insurance illustration should not stretch. */
.legacy .med-insurance-section img{max-width:420px;margin-inline:auto;border-radius:var(--r2)}

/* Anything still using a fixed percentage width inside a grid is released. */
.legacy [class*="col-"],.legacy .med-col{width:auto!important;flex:1 1 auto}

/* ==========================================================================
   Corrections, second pass.
   ========================================================================== */

/* ---------- packages rail ----------
   The price pages are large portrait scans. Without a hard height they render
   at natural size and blow the rail open. Both axes are pinned here so the
   result cannot depend on the source image or on legacy specificity. */
.legacy .med-packages-carousel{align-items:stretch}

.legacy .med-package-card{
  flex:0 0 auto!important;
  width:clamp(210px,66vw,280px)!important;
  height:clamp(300px,54vw,400px)!important;
  padding:0!important;margin:0!important;
  background:#fff;border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;scroll-snap-align:center;
  box-shadow:var(--sh1);transition:transform .2s var(--ez),box-shadow .2s var(--ez)}
@media (min-width:768px){
  .legacy .med-package-card{width:266px!important;height:380px!important;scroll-snap-align:start}
  .legacy .med-package-card:hover{transform:translateY(-5px);box-shadow:var(--sh3)}
}
.legacy .med-package-card img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:top center;
  display:block;cursor:zoom-in;aspect-ratio:auto!important;max-width:none}

/* ---------- service and capability cards ----------
   The preserved markup repeats each title (once as a label, once as a heading).
   Give them a real card shape so the repetition reads as a caption, not a bug. */
.legacy .med-service,
.legacy .service-card,
.legacy .capability-card,
.legacy .med-feature{
  padding:22px;gap:8px;text-align:left;align-items:flex-start;justify-content:flex-start}
.legacy .med-service h3,
.legacy .service-card h3,
.legacy .capability-card h3,
.legacy .med-feature h3{margin:0 0 4px;font-size:17.5px}
.legacy .med-service p,
.legacy .service-card p,
.legacy .capability-card p,
.legacy .med-feature p{margin:0;font-size:15px;color:var(--ink3);line-height:1.5}
.legacy .med-service img,
.legacy .service-card img,
.legacy .capability-card img,
.legacy .med-feature img{width:46px;height:46px;object-fit:contain;margin-bottom:6px}

/* Section-level "Most Requested" style tags. */
.legacy .med-tag,.legacy .most-requested,.legacy .badge{
  display:inline-block;padding:5px 12px;border-radius:var(--pill);
  background:var(--t6);color:var(--accent-ink);font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--t4)}

/* ---------- "Inside MedPark" gallery: taller ---------- */
.gal{height:clamp(560px,84vh,880px)}
@media (min-width:900px){.gal{height:clamp(620px,88vh,940px)}}
.gal img{aspect-ratio:3/4}

/* ---------- patient stories: arrows on mobile too ---------- */
.rail__btn{display:inline-flex}
@media (max-width:767px){
  .rail__btn{width:40px;height:40px;font-size:13px;
    box-shadow:var(--sh2);background:#fff;border-color:var(--line)}
  .rail__shell{gap:6px}
  .story{width:66vw;max-width:250px}
}

/* ==========================================================================
   Floating contact. Replaces the full-width rectangular bar at the bottom of
   the phone, which covered content and looked like a system toolbar.
   Circular, bottom right, with a soft brand glow so it draws the eye without
   shouting. Same treatment on desktop, so the site behaves consistently.
   ========================================================================== */
.dock{display:none!important}
.wa-float{display:none!important}

.mp-fab{position:fixed;right:18px;bottom:18px;z-index:890;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  padding-bottom:env(safe-area-inset-bottom,0)}
@media (min-width:768px){.mp-fab{right:26px;bottom:26px;gap:14px}}

.mp-fab__btn{position:relative;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;font-size:24px;
  box-shadow:0 10px 26px -6px rgba(10,42,74,.5);
  transition:transform .2s var(--ez),box-shadow .2s var(--ez)}
@media (min-width:768px){.mp-fab__btn{width:64px;height:64px;font-size:26px}}

.mp-fab__btn:hover,.mp-fab__btn:focus-visible{transform:translateY(-3px) scale(1.05);color:#fff}
.mp-fab__btn:active{transform:scale(.96)}

.mp-fab__btn--wa{background:linear-gradient(145deg,var(--t2),var(--t1));color:var(--n1)}
.mp-fab__btn--call{background:linear-gradient(145deg,#12446F,var(--n1));color:#fff}

/* The glow: a soft ring that breathes, so the eye finds it without a banner. */
.mp-fab__btn::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:inherit;opacity:.42;filter:blur(11px);z-index:-1}
.mp-fab__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 currentColor;animation:mpFabPulse 2.6s var(--ez) infinite;z-index:-1}
.mp-fab__btn--wa::after{color:rgba(18,192,198,.55)}
.mp-fab__btn--call::after{color:rgba(10,42,74,.5)}

@keyframes mpFabPulse{
  0%{box-shadow:0 0 0 0 currentColor}
  70%{box-shadow:0 0 0 16px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* A small label appears on hover for pointer devices. */
.mp-fab__label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--n1);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;
  padding:8px 14px;border-radius:var(--pill);opacity:0;pointer-events:none;
  transition:opacity .18s var(--ez),transform .18s var(--ez);box-shadow:var(--sh2)}
@media (hover:hover){
  .mp-fab__btn:hover .mp-fab__label,.mp-fab__btn:focus-visible .mp-fab__label{opacity:1;transform:translateY(-50%) translateX(0)}
}

/* Content must not hide behind it. */
@media (max-width:767px){body{padding-bottom:96px}}

@media (prefers-reduced-motion:reduce){
  .mp-fab__btn::after{animation:none}
  .mp-fab__btn{transition:none}
}

/* ---------- footer credit ---------- */
.ftr__bottom a{color:var(--t2);font-weight:700}
.ftr__bottom a:hover{color:var(--t1)}

/* ---------- emergency band: feature chips and CTA ---------- */
.legacy .emergency-content{max-width:900px;margin-inline:auto;text-align:center}
.legacy .emergency-title{color:#fff!important}
.legacy .emergency-text{color:#C7DBE8!important;margin-inline:auto;max-width:66ch}

.legacy .emergency-features{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  list-style:none;padding:0;margin:24px 0 26px}
.legacy .emergency-features > *{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:var(--pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  color:#EAF6F9;font-weight:600;font-size:15px;line-height:1}
.legacy .emergency-features i{color:var(--t2);font-size:16px}

.legacy .emergency-cta{display:flex;justify-content:center;margin-top:8px}
.legacy .emergency-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:15px 30px;border-radius:var(--pill);
  background:var(--accent);color:#04262A!important;border:2px solid var(--accent);
  font-weight:700;font-size:16px;text-decoration:none!important;
  box-shadow:var(--sh2);transition:transform .18s var(--ez),background-color .18s var(--ez),color .18s var(--ez)}
.legacy .emergency-btn:hover,.legacy .emergency-btn:focus-visible{
  background:#fff;border-color:#fff;color:var(--n1)!important;transform:translateY(-2px)}

/* ---------- capabilities ---------- */
.legacy .capabilities-header{text-align:center;max-width:66ch;margin:0 auto 32px}
.legacy .capabilities-title{color:var(--ink)}
.legacy .capabilities-subtitle{color:var(--ink2)}
.legacy .accent{color:var(--accent-ink)}
.legacy .capabilities-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.legacy .capability-card{padding:24px;gap:6px}
.legacy .capability-card h3{color:var(--ink);font-size:18px;margin:0 0 6px}

/* ---------- services grid: image cards with an overlay caption ---------- */
.legacy .med-services-grid{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:stretch}

.legacy .med-service{
  position:relative;overflow:hidden;border-radius:var(--r2);
  min-height:210px;padding:0!important;border:1px solid var(--line);
  display:flex;align-items:flex-end;background:var(--n1)}

.legacy .service-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .55s var(--ez);z-index:0}
@media (hover:hover){.legacy .med-service:hover .service-bg{transform:scale(1.07)}}

.legacy .med-service::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,42,74,.05) 30%,rgba(10,42,74,.72) 66%,rgba(6,26,46,.94) 100%)}

.legacy .service-overlay{position:relative;z-index:2;padding:20px;color:#fff;width:100%}
.legacy .service-overlay h3,.legacy .med-service h3{
  color:#fff!important;margin:0 0 5px;font-size:17.5px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.legacy .service-description{
  color:#D7E7F0!important;font-size:14.5px;line-height:1.45;margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}

.legacy .service-badge{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:6px 13px;border-radius:var(--pill);
  background:var(--accent);color:#04262A;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--sh1)}

.legacy .med-service.emergency-highlight{outline:2px solid var(--accent);outline-offset:-2px}

/* Cards that are wrapped in a link inherited the default link colour and
   underline, so headings and body text rendered as blue underlined links. */
.legacy .capability-card,
.legacy .capability-card a,
.legacy .med-feature,
.legacy .med-feature a,
.legacy .med-service a,
.legacy .med-news-card a:not(.med-news-btn){
  text-decoration:none!important;color:inherit}
.legacy .capability-card h3,.legacy .med-feature h3{color:var(--ink)!important}
.legacy .capability-card p,.legacy .med-feature p{color:var(--ink3)!important}
.legacy .capability-card i,.legacy .med-feature i{color:var(--accent-ink);font-size:20px}
.legacy .capability-card:focus-within,.legacy .med-feature:focus-within{
  outline:3px solid var(--accent);outline-offset:2px}


/* ==========================================================================
   Icon centring. Font Awesome glyphs sit on their own baseline inside the
   glyph box, so a flex centre alone leaves them looking low and left. These
   rules zero the line box and centre the glyph itself.
   ========================================================================== */
.mp-fab__btn i,
.ftr__social a i,
.rail__btn i,
.btn i,
.dock a i,
.legacy .med-packages-nav i{
  display:block;line-height:1;font-style:normal;
  width:1em;height:1em;text-align:center}

.mp-fab__btn{line-height:0}
.mp-fab__btn i{font-size:26px;line-height:1;transform:translateY(.5px)}
@media (min-width:768px){.mp-fab__btn i{font-size:27px}}
/* the WhatsApp glyph is drawn slightly low in the font */
.mp-fab__btn--wa i{transform:translateY(1px)}

.ftr__social a{line-height:0;font-size:17px}
.ftr__social a i{font-size:17px;line-height:1}

/* ---------- hero: centred ---------- */
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{max-width:20ch;margin-inline:auto}
.hero__lead{max-width:52ch;margin-inline:auto}
.hero__cta{justify-content:center}
.hero__note{justify-content:center}
.hero__badge,.hero__flag{align-self:center}
@media (min-width:1024px){.hero h1{max-width:22ch}}

/* ==========================================================================
   Patient stories: silent preview that becomes the full clip on tap.
   The preview is a 5 second, audio-free, 540px loop of roughly 200 KB, so it
   can play on its own without costing the visitor anything meaningful.
   ========================================================================== */
.story__preview,
.story__full{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block}
.story__full{opacity:0;pointer-events:none;z-index:2}
.story__preview{z-index:1}

.story.is-playing .story__full{opacity:1;pointer-events:auto}
.story.is-playing .story__preview{opacity:0}

.story__play{z-index:3;flex-direction:column;gap:12px}
.story__hint{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55);opacity:.94}

/* A soft ring while a preview is running, so it reads as live, not as a still. */
.story.is-previewing::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(18,192,198,.75);pointer-events:none;z-index:4}

@media (prefers-reduced-motion:reduce){
  .story__preview{display:none}
}

/* ==========================================================================
   Packages catalogue: auto carousel with visible controls and progress.
   ========================================================================== */
.legacy .med-packages-wrapper{position:relative;padding-bottom:8px}
.legacy .med-packages-carousel{scroll-behavior:smooth}

.legacy .med-packages-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--n1);color:#fff;font-size:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -8px rgba(10,42,74,.55);
  transition:background-color .18s var(--ez),transform .18s var(--ez),opacity .18s var(--ez)}
.legacy .med-packages-nav::before{
  font-family:"Font Awesome 6 Free";font-weight:900;font-size:15px;line-height:1}
.legacy .med-packages-nav.prev{left:-6px}
.legacy .med-packages-nav.prev::before{content:"\f053"}
.legacy .med-packages-nav.next{right:-6px}
.legacy .med-packages-nav.next::before{content:"\f054"}
@media (min-width:1240px){
  .legacy .med-packages-nav.prev{left:-22px}
  .legacy .med-packages-nav.next{right:-22px}
}
.legacy .med-packages-nav:hover{background:var(--t1);color:var(--n1);transform:translateY(-50%) scale(1.07)}
.legacy .med-packages-nav[disabled]{opacity:.3;cursor:default}

/* Progress dots under the rail. */
.mp-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:14px}
.mp-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--n5);cursor:pointer;
  transition:background-color .22s var(--ez),width .22s var(--ez)}
.mp-dots button[aria-current="true"]{width:24px;border-radius:999px;background:var(--t1)}

/* ==========================================================================
   "NEW at MedPark Hospital" announcement glow, using the brand radial device.
   ========================================================================== */
.legacy .med-wellness-packages{position:relative;isolation:isolate}
.legacy .med-wellness-packages::before{
  content:"";position:absolute;left:50%;top:-40px;width:min(720px,90vw);height:340px;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(18,192,198,.30),rgba(18,192,198,0) 72%);
  animation:newGlow 5.5s var(--ez) infinite}

.legacy .med-wellness-packages h2.center{
  display:inline-block;position:relative;padding-inline:6px}
.legacy .med-wellness-packages h2.center::before{
  content:"NEW";position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  background:var(--t1);color:var(--n1);font-size:10.5px;font-weight:800;
  letter-spacing:.16em;padding:4px 12px;border-radius:999px;
  box-shadow:0 0 0 0 rgba(18,192,198,.6);animation:newBadge 2.6s var(--ez) infinite}

@keyframes newGlow{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes newBadge{
  0%{box-shadow:0 0 0 0 rgba(18,192,198,.6)}
  70%{box-shadow:0 0 0 14px rgba(18,192,198,0)}
  100%{box-shadow:0 0 0 0 rgba(18,192,198,0)}}

@media (prefers-reduced-motion:reduce){
  .legacy .med-wellness-packages::before,
  .legacy .med-wellness-packages h2.center::before{animation:none}
}

/* The "most urgent" help card is set apart by weight and a turquoise ring,
   not by a second hue. MedPark's palette is turquoise, navy and white only. */
.help__card--urgent h3{color:var(--n1)}
.help__card--urgent{position:relative}
.help__card--urgent::before{
  content:"Start here";position:absolute;top:-11px;left:20px;
  background:var(--n1);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 11px;border-radius:999px}

/* ==========================================================================
   Corrections, third pass.
   ========================================================================== */

/* The small-icon rule was written as `.legacy .med-service img`, which is more
   specific than `.legacy .service-bg`, so it shrank every service photo to
   46px and left a tiny broken-looking thumbnail. Icons only, never the photo. */
.legacy .med-service img:not(.service-bg),
.legacy .service-card img:not(.service-bg),
.legacy .capability-card img,
.legacy .med-feature img{width:46px;height:46px;object-fit:contain;margin-bottom:6px}

.legacy .med-service .service-bg,
.legacy .service-bg{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;margin:0!important;z-index:0}

/* ---------- orphan cards centre instead of hanging left ----------
   A grid stretches its tracks, so a lone card on the last row sits hard left.
   Flex with a fixed basis wraps and centres the remainder, which is what a
   reader expects. Applied to every card row on the page. */
.legacy .med-services-grid,
.legacy .capabilities-grid,
.legacy .med-features,
.legacy .med-news-grid,
.legacy .hospital-services-grid,
.help__grid,
.svc__grid{
  display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px}

.legacy .med-services-grid > *,
.legacy .capabilities-grid > *,
.legacy .med-features > *,
.legacy .hospital-services-grid > *,
.help__grid > *,
.svc__grid > *{flex:1 1 250px;max-width:340px;min-width:0}

.legacy .med-news-grid > *{flex:1 1 300px;max-width:380px;min-width:0}

@media (min-width:1100px){
  .legacy .med-services-grid > *{flex:0 1 calc(25% - 12px)}
  .legacy .capabilities-grid > *{flex:0 1 calc(33.333% - 11px)}
}

/* ---------- centre the section that lost it ---------- */
.legacy .med-wellness-packages .med-container{text-align:center}
.legacy .med-wellness-packages h2.center{display:inline-block;margin-inline:auto}

/* ---------- packages-for-travellers section ---------- */
.legacy .packages-section .med-container,
.legacy .packages-section .container{text-align:center}
.legacy .packages-title{text-align:center}
.legacy .packages-content p{margin-inline:auto;text-align:center;max-width:70ch}
.legacy .packages-cta{display:flex;justify-content:center;margin-top:18px}
.legacy .packages-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:15px 30px;border-radius:var(--pill);
  background:var(--t1);color:var(--n1)!important;border:2px solid var(--t1);
  font-weight:700;text-decoration:none!important;box-shadow:var(--sh2);
  transition:transform .18s var(--ez),background-color .18s var(--ez)}
.legacy .packages-btn:hover{background:var(--n1);border-color:var(--n1);color:#fff!important;transform:translateY(-2px)}
.legacy .package-item{
  display:inline-flex;align-items:center;gap:9px;padding:10px 18px;
  border-radius:var(--pill);background:var(--t6);color:var(--accent-ink);
  border:1px solid var(--t4);font-weight:600;font-size:15px;list-style:none}
.legacy .packages-content ul,
.legacy .packages-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:0;margin:20px 0}

/* ---------- service tiles: caption pinned to the bottom, readable scrim ----
   The overlay was floating mid-card over the busiest part of the photograph.
   It is now anchored to the bottom over a strong gradient, which is where the
   eye expects a caption and where photographs are usually quietest. */
.legacy .med-service{
  display:block!important;position:relative;overflow:hidden;
  min-height:230px;aspect-ratio:4/3;padding:0!important;
  border-radius:var(--r2);border:1px solid var(--line);background:var(--n1)}

.legacy .med-service::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,42,74,.10) 0%,
    rgba(10,42,74,.30) 42%,
    rgba(8,34,58,.86) 78%,
    rgba(6,26,46,.96) 100%)}

.legacy .service-overlay{
  position:absolute!important;left:0;right:0;bottom:0;z-index:2;
  padding:18px 18px 20px;color:#fff}

.legacy .med-service h3,
.legacy .service-overlay h3{
  margin:0 0 4px;font-size:16.5px;line-height:1.25;color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}

.legacy .service-description{
  margin:0;font-size:14px;line-height:1.45;color:#CFE2EE!important;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.legacy .service-badge{top:12px;left:12px;font-size:10px;padding:5px 11px}

/* Tiles with no photograph get the brand gradient rather than flat navy. */
.legacy .med-service:not(:has(.service-bg)){
  background:linear-gradient(150deg,#0E3A5F 0%,var(--n1) 55%,#08243E 100%)}
.legacy .med-service:not(:has(.service-bg))::after{
  background:radial-gradient(120% 80% at 80% 0%,rgba(18,192,198,.22),transparent 62%)}

@media (hover:hover){
  .legacy .med-service:hover .service-description{-webkit-line-clamp:4}
}

/* ==========================================================================
   Mobile layout pass. Single-column stacks of short items waste the screen and
   make the page feel endless. Anything whose label is a few words goes two up
   on a phone; only items with real sentences stay full width.
   ========================================================================== */
@media (max-width: 639px){

  /* Short-label chips and tiles: two columns. */
  .legacy .med-features,
  .legacy .hospital-services-grid,
  .svc__grid{gap:10px}
  .legacy .med-features > *,
  .legacy .hospital-services-grid > *,
  .svc__grid > *{flex:1 1 calc(50% - 5px)!important;max-width:calc(50% - 5px);min-width:0}

  .legacy .med-feature{padding:14px 12px;text-align:center;align-items:center}
  .legacy .med-feature h3{font-size:13.5px;line-height:1.3;margin:0}
  .legacy .med-feature i{font-size:19px;margin-bottom:2px}
  .legacy .med-feature p{display:none}   /* the label carries the meaning here */

  /* Service tiles: two up, shorter, caption still readable. */
  .legacy .med-services-grid{gap:10px}
  .legacy .med-services-grid > *{flex:1 1 calc(50% - 5px)!important;max-width:calc(50% - 5px)}
  .legacy .med-service{min-height:0;aspect-ratio:3/4}
  .legacy .med-service h3,.legacy .service-overlay h3{font-size:13.5px;line-height:1.25}
  .legacy .service-description{font-size:11.5px;-webkit-line-clamp:2}
  .legacy .service-overlay{padding:12px 11px 13px}
  .legacy .service-badge{font-size:9px;padding:4px 8px;top:8px;left:8px}

  /* Capability cards keep a full row: each carries a real sentence. */
  .legacy .capabilities-grid > *{flex:1 1 100%!important;max-width:100%}
  .legacy .capability-card{padding:16px 18px}

  /* Emergency chips wrap tightly rather than stacking. */
  .legacy .emergency-features{gap:8px}
  .legacy .emergency-features > *{padding:8px 13px;font-size:13.5px}

  /* Triage cards two up. */
  .help__grid{gap:10px}
  .help__grid > *{flex:1 1 calc(50% - 5px)!important;max-width:calc(50% - 5px)}
  .help__card{padding:15px 13px}
  .help__card h3{font-size:15px}
  .help__card p{font-size:12.5px;-webkit-line-clamp:3;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden}
  .help__ico{width:40px;height:40px;font-size:17px;border-radius:11px}
  .help__card--urgent{flex:1 1 100%!important;max-width:100%}

  /* News stays one per row: each is a headline plus a paragraph. */
  .legacy .med-news-grid > *{flex:1 1 100%!important;max-width:100%}
}

@media (min-width:640px) and (max-width:900px){
  .legacy .med-services-grid > *{flex:1 1 calc(33.333% - 11px)!important;max-width:none}
  .legacy .med-features > *{flex:1 1 calc(33.333% - 11px)!important;max-width:none}
}

/* ---------- packages: never crop the price pages on a phone ----------
   A fixed height crops a portrait scan. Aspect ratio keeps the whole page
   visible at any width. */
.legacy .med-package-card{
  height:auto!important;aspect-ratio:3/4;
  width:clamp(230px,72vw,290px)!important}
@media (min-width:768px){
  .legacy .med-package-card{width:270px!important;aspect-ratio:3/4}
}
.legacy .med-package-card img{object-fit:contain!important;background:#fff;object-position:center}

/* ==========================================================================
   Insurance and assistance partners. Rebuilt as a two column band: the
   argument on the left, the illustration on the right, both on one baseline.
   This is the section that answers "what will it cost", so it carries the
   cashless positioning.
   ========================================================================== */
.legacy .med-insurance-section{position:relative;isolation:isolate;overflow:hidden}
.legacy .med-insurance-section::before{
  content:"";position:absolute;right:-140px;top:-120px;width:520px;height:520px;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(18,192,198,.26),rgba(18,192,198,0) 66%)}

.legacy .med-insurance-content-wrapper{
  display:grid;gap:30px;align-items:center;grid-template-columns:1fr;
  max-width:var(--wrap);margin-inline:auto}
@media (min-width:900px){
  .legacy .med-insurance-content-wrapper{grid-template-columns:1.05fr .95fr;gap:48px}
}

.legacy .med-insurance-content{text-align:left}
.legacy .med-insurance-section h2{text-align:left;color:#fff}
.legacy .med-insurance-section h2::after{margin-left:0}
.legacy .med-insurance-content p{
  color:#C7DEEA!important;font-size:16.5px;line-height:1.65;max-width:56ch;margin:0 0 14px}

.legacy .med-insurance-image{
  position:relative;border-radius:var(--r3);overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  padding:22px;display:flex;align-items:center;justify-content:center}
.legacy .med-insurance-image img{
  max-width:100%;width:auto;max-height:320px;margin:0;border-radius:var(--r2)}
.legacy .med-insurance-overlay{display:none}

@media (max-width:899px){
  .legacy .med-insurance-content,
  .legacy .med-insurance-section h2{text-align:center}
  .legacy .med-insurance-section h2::after{margin-inline:auto}
  .legacy .med-insurance-content p{margin-inline:auto;text-align:center}
}

/* ==========================================================================
   "Need Help Now" closing band. This is the last thing a worried visitor sees,
   so it is a single clear panel: one line of reassurance, the number set large
   as the hero of the block, then the actions.
   ========================================================================== */
.legacy .emergency-cta-section{position:relative;isolation:isolate;overflow:hidden}
.legacy .emergency-cta-section::before{
  content:"";position:absolute;left:50%;top:-30%;width:760px;height:760px;
  transform:translateX(-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(18,192,198,.22),rgba(18,192,198,0) 62%)}

.legacy .cta-content{
  max-width:760px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.legacy .cta-title{color:#fff!important;margin-bottom:6px}
.legacy .cta-text{color:#C7DEEA!important;font-size:16.5px;max-width:60ch;margin:0 auto 22px}

/* The phone number is the point of this section. */
.legacy .cta-call{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:6px 0 22px;order:-1}
.legacy .cta-phone{
  font-size:clamp(24px,4.6vw,38px);font-weight:800;letter-spacing:-.02em;
  color:#fff!important;text-decoration:none!important;line-height:1.1}
.legacy .cta-phone:hover{color:var(--t2)!important}

.legacy .cta-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
.legacy .cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:14px 26px;border-radius:var(--pill);
  font-weight:700;font-size:16px;text-decoration:none!important;
  border:2px solid transparent;
  transition:transform .18s var(--ez),background-color .18s var(--ez),color .18s var(--ez)}
.legacy .cta-btn:hover{transform:translateY(-2px)}
.legacy .cta-btn-emergency{background:var(--t1);border-color:var(--t1);color:var(--n1)!important}
.legacy .cta-btn-emergency:hover{background:#fff;border-color:#fff;color:var(--n1)!important}
.legacy .cta-btn-whatsapp{background:transparent;border-color:var(--t1);color:var(--t1)!important}
.legacy .cta-btn-whatsapp:hover{background:var(--t1);color:var(--n1)!important}
.legacy .cta-btn-outline{background:transparent;border-color:rgba(255,255,255,.6);color:#fff!important}
.legacy .cta-btn-outline:hover{background:#fff;color:var(--n1)!important;border-color:#fff}
.legacy .cta-btn.pulse{animation:none}   /* the glow already carries the emphasis */

/* ==========================================================================
   "Plan Your Medical Journey": centred, one measure.
   ========================================================================== */
.legacy #appointment .appointment-content{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.legacy #appointment .appointment-text,
.legacy #appointment .appointment-info{
  text-align:center;margin-inline:auto;max-width:68ch}
.legacy #appointment .appointment-info p,
.legacy #appointment .appointment-text p{margin-inline:auto;text-align:center}
.legacy #appointment h2{text-align:center}
.legacy #appointment .cta-btn,
.legacy #appointment .appointment-form{margin-inline:auto}
.legacy #appointment .cta-btn-whatsapp{
  background:var(--t1);border-color:var(--t1);color:var(--n1)!important}
.legacy #appointment .cta-btn-whatsapp:hover{
  background:var(--n1);border-color:var(--n1);color:#fff!important}

/* ---------- packages-for-travellers trailing line ---------- */
.legacy .packages-section .packages-note,
.legacy .packages-section > .med-container > p:last-child,
.legacy .packages-section > .container > p:last-child{
  margin:16px auto 0;text-align:center;font-size:13.5px;color:var(--ink3);
  max-width:44ch;letter-spacing:.01em}

/* ==========================================================================
   Packages for travellers. Rebuilt from scratch: the four categories are the
   product, so they are cards rather than a row of small chips, and the CTA
   closes the block instead of floating beside a stray line of text.
   ========================================================================== */
.mp-pack{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(52px,7vw,92px);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 10%,var(--bg2) 90%,var(--bg) 100%)}
.mp-pack::before{
  content:"";position:absolute;left:-160px;bottom:-180px;width:560px;height:560px;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(18,192,198,.20),rgba(18,192,198,0) 66%)}

.mp-pack__head{max-width:64ch;margin:0 auto 34px;text-align:center}
.mp-pack__head .eyebrow{justify-content:center}
.mp-pack__head h2{margin-bottom:12px}
.mp-pack__head p{margin-inline:auto;font-size:16.5px;color:var(--ink2)}

.mp-pack__grid{
  list-style:none;margin:0 0 34px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.mp-pack__card{
  flex:1 1 232px;max-width:280px;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r2);
  padding:26px 20px;box-shadow:var(--sh1);
  transition:transform .22s var(--ez),box-shadow .22s var(--ez),border-color .22s var(--ez)}
@media (hover:hover){
  .mp-pack__card:hover{transform:translateY(-6px);box-shadow:var(--sh3);border-color:var(--t3)}
  .mp-pack__card:hover .mp-pack__ico{background:var(--t1);color:var(--n1);transform:scale(1.06)}
}
.mp-pack__ico{
  width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:var(--t6);color:var(--accent-ink);font-size:23px;line-height:0;
  transition:background-color .22s var(--ez),color .22s var(--ez),transform .22s var(--ez)}
.mp-pack__ico i{line-height:1}
.mp-pack__card h3{margin:4px 0 0;font-size:17px;color:var(--ink)}
.mp-pack__card p{margin:0;font-size:14.5px;color:var(--ink3);line-height:1.5}

.mp-pack__cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.mp-pack__note{margin:0;font-size:13.5px;color:var(--ink3);text-align:center}

@media (max-width:639px){
  .mp-pack__grid{gap:10px}
  .mp-pack__card{flex:1 1 calc(50% - 5px);max-width:calc(50% - 5px);padding:18px 12px}
  .mp-pack__ico{width:46px;height:46px;font-size:19px;border-radius:14px}
  .mp-pack__card h3{font-size:14.5px}
  .mp-pack__card p{display:none}
}

/* ==========================================================================
   "Need Help Now": the closing band. The number is the hero of the block,
   sized like a headline, because that is the action we want.
   ========================================================================== */
.mp-help{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(56px,7.5vw,100px);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(18,192,198,.26) 0%,rgba(18,192,198,0) 62%),
    linear-gradient(180deg,#0D3455 0%,var(--n1) 30%,var(--n1) 72%,#08243E 100%)}
.mp-help::before{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(255,255,255,0) 100%)}

.mp-help__inner{position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.mp-help__inner .eyebrow{color:var(--t2)}
.mp-help__inner .eyebrow::before{background:var(--t2)}
.mp-help h2{color:#fff;margin-bottom:12px}
.mp-help__lead{color:#C7DEEA;font-size:17px;max-width:62ch;margin:0 auto 26px}

/* The number, treated as the primary content of the section. */
.mp-help__num{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;margin-bottom:26px;padding:16px 32px;border-radius:var(--r3);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  transition:background-color .2s var(--ez),transform .2s var(--ez),border-color .2s var(--ez)}
.mp-help__num span{font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t2)}
.mp-help__num strong{font-size:clamp(26px,5vw,42px);font-weight:800;letter-spacing:-.02em;
  color:#fff;line-height:1.1}
.mp-help__num:hover,.mp-help__num:focus-visible{
  background:rgba(18,192,198,.14);border-color:var(--t1);transform:translateY(-3px)}

.mp-help__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media (max-width:639px){
  .mp-help__actions{width:100%;flex-direction:column}
  .mp-help__actions .btn{width:100%}
  .mp-help__num{width:100%;padding:14px 20px}
}

/* ==========================================================================
   Insurance and assistance. Rebuilt.
   The supplied illustration is black line art on transparency, which is close
   to invisible on the navy band. It is recoloured to white (/img/insurance-
   light.webp) and set inside a turquoise-tinted disc so it reads as an emblem
   rather than a stray graphic.
   ========================================================================== */
.mp-ins{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(54px,7.5vw,96px);
  background:
    radial-gradient(110% 80% at 88% 8%,rgba(18,192,198,.24) 0%,rgba(18,192,198,0) 60%),
    linear-gradient(180deg,#0D3455 0%,var(--n1) 28%,var(--n1) 74%,#08243E 100%)}
.mp-ins::before{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;pointer-events:none;
  background:linear-gradient(180deg,var(--bg2) 0%,rgba(245,249,251,0) 100%)}

.mp-ins__grid{position:relative;z-index:1;
  display:grid;gap:34px;align-items:center;grid-template-columns:1fr}
@media (min-width:940px){
  .mp-ins__grid{grid-template-columns:1.15fr .85fr;gap:56px}
}

.mp-ins__body .eyebrow{color:var(--t2)}
.mp-ins__body .eyebrow::before{background:var(--t2)}
.mp-ins h2{color:#fff;margin-bottom:14px}
.mp-ins__lead{color:#CFE2EE;font-size:17px;line-height:1.65;max-width:58ch;margin:0 0 20px}

.mp-ins__points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.mp-ins__points li{display:flex;gap:12px;align-items:flex-start;
  color:#DCEAF2;font-size:16px;line-height:1.5}
.mp-ins__points strong{color:#fff;font-weight:700}
.mp-ins__points i{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;margin-top:2px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  background:var(--t1);color:var(--n1);font-size:11px}

.mp-ins__note{color:#9FBFD2;font-size:14.5px;line-height:1.6;max-width:58ch;margin:0 0 22px}
.mp-ins__cta{display:flex;flex-wrap:wrap;gap:12px}

/* The emblem panel. */
.mp-ins__panel{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:34px 26px;border-radius:var(--r3);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.mp-ins__badge{
  width:min(220px,52vw);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(18,192,198,.34),rgba(18,192,198,.06) 70%);
  box-shadow:inset 0 0 0 1px rgba(65,204,209,.35)}
.mp-ins__badge img{width:58%;height:auto;display:block;opacity:.96}
.mp-ins__claim{
  margin:0;text-align:center;font-size:16px;color:#DCEAF2;line-height:1.45;max-width:22ch}
.mp-ins__claim strong{color:var(--t2);font-weight:800}

@media (max-width:939px){
  .mp-ins__body{text-align:center}
  .mp-ins__body .eyebrow{justify-content:center}
  .mp-ins__lead,.mp-ins__note{margin-inline:auto}
  .mp-ins__points{text-align:left;max-width:34rem;margin-inline:auto}
  .mp-ins__cta{justify-content:center}
  .mp-ins__panel{order:-1;padding:26px 20px}
}

/* ==========================================================================
   FINAL PASS. Section seams, equal card heights, trust strip, news, stories.
   ========================================================================== */

/* ---------- 1. the bright line under the hero ----------
   .trust carried a 1px white border-top. Against two navy grounds it read as a
   lit seam. The hero already fades into the strip, so the border goes. */
.trust{border-top:0!important}
.hero::after{height:120px;
  background:linear-gradient(180deg,rgba(10,42,74,0) 0%,rgba(10,42,74,.55) 55%,var(--n1) 100%)}
.trust{background:var(--n1)}

/* ---------- 2. one seam rule for every band ----------
   Dark bands fade to white at both edges, and the sections either side of them
   are white, so the joins disappear. Light bands share one tint. No band ends
   on a hard colour change. */
.mp-ins,
.mp-help,
.legacy .emergency-section{
  background:
    radial-gradient(110% 80% at 70% 6%,rgba(18,192,198,.22) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,
      #FFFFFF 0%, #0E3A5F 7%, var(--n1) 22%,
      var(--n1) 78%, #0B3050 93%, #FFFFFF 100%)!important}
.mp-ins::before,.mp-help::before,.legacy .emergency-section::before{display:none}

/* the sections that touch a dark band are plain white */
.legacy #comprehensive-care,
.legacy .capabilities-section,
.legacy #services,
.mp-pack,
.legacy #med-news{background:#FFFFFF!important}

/* light tinted bands also fade at their edges */
.sec--tint,
.legacy .med-light-bg,
.legacy #wellness-packages{
  background:linear-gradient(180deg,
    #FFFFFF 0%, var(--bg2) 7%, var(--bg2) 93%, #FFFFFF 100%)!important}

/* ---------- 3. equal card heights ----------
   Cards stretch already; it is the copy inside that differs. Descriptions are
   clamped to a fixed number of lines and given a matching min-height, so every
   card in a row ends at the same place and the action sits on one baseline. */
.help__card{justify-content:flex-start}
.help__card p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.5em * 3);margin:0}
.help__card h3{min-height:calc(1.25em * 2);display:flex;align-items:flex-start}
.help__card .go{margin-top:auto;padding-top:12px}

.legacy .capability-card p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.5em * 3);margin:0}
.legacy .capability-card h3{min-height:calc(1.25em * 2)}
.legacy .capability-card{justify-content:flex-start}

.legacy .med-feature{justify-content:center;min-height:104px}
.legacy .med-feature h3{min-height:calc(1.3em * 2);display:flex;align-items:center;
  justify-content:center;text-align:center;margin:0}

.mp-pack__card p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.5em * 2)}

.legacy .med-news-content p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.5em * 3)}
.legacy .med-news-content h3{min-height:calc(1.3em * 2)}

/* ---------- 4. trust strip ----------
   The cashless item had a box around it, which fought the row. It now carries a
   star instead, so it reads as the standout without breaking the rhythm. */
.trust__item--flag{background:transparent!important;box-shadow:none!important;border-radius:0}
.trust__item{gap:13px;padding:18px}
.trust__item i{font-size:19px}
.trust__item b{font-size:14.5px;line-height:1.3;display:flex;align-items:center;gap:7px}
.trust__item--flag b::after{
  content:"\f005";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:11px;color:var(--t1);flex:0 0 auto}
.trust__item span{margin-top:2px}
@media (min-width:860px){
  .trust__item+.trust__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.14)!important}
}

/* ---------- 5. hero note wraps cleanly on a phone ---------- */
.hero__note{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 9px;text-align:center;max-width:38ch;margin-inline:auto}
.hero__note br{display:none}
@media (max-width:520px){
  .hero__note{font-size:13px;line-height:1.45;max-width:30ch}
}

/* ---------- 6. news buttons ---------- */
.legacy .med-news-all-btn-wrapper{
  display:flex;justify-content:center;width:100%;margin-top:26px}
.legacy .med-news-section br{display:none}
.legacy .med-news-all-btn-wrapper + .med-news-all-btn-wrapper{margin-top:12px}

.legacy .med-news-all-btn,
.legacy .med-news-section .cta-btn-whatsapp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:14px 30px;border-radius:var(--pill);
  font-weight:700;font-size:16px;text-decoration:none!important;
  transition:transform .18s var(--ez),background-color .18s var(--ez),color .18s var(--ez)}
.legacy .med-news-all-btn{
  background:var(--t1);border:2px solid var(--t1);color:var(--n1)!important;
  box-shadow:var(--sh2)}
.legacy .med-news-all-btn:hover{
  background:var(--n1);border-color:var(--n1);color:#fff!important;transform:translateY(-2px)}
.legacy .med-news-section .cta-btn-whatsapp{
  background:transparent;border:2px solid var(--n5);color:var(--ink)!important}
.legacy .med-news-section .cta-btn-whatsapp:hover{
  border-color:var(--t1);color:var(--accent-ink)!important;transform:translateY(-2px)}

/* ---------- 7. patient stories: bigger ---------- */
.story{width:min(80vw,300px);max-width:300px}
@media (min-width:768px){.story{width:280px;max-width:280px}}
@media (min-width:1200px){.story{width:300px;max-width:300px}}
.rail{gap:18px;padding-bottom:20px}
.story__play span{width:70px;height:70px;font-size:23px}
.story__hint{font-size:14px}
@media (max-width:639px){
  .story{width:74vw;max-width:290px}
  .story__play span{width:60px;height:60px;font-size:20px}
}

/* The trust strip closes the dark hero block, so it fades out to white the same
   way every other dark band does. Without this the navy meets the next section
   on a hard line. */
.trust{
  background:linear-gradient(180deg,
    var(--n1) 0%, var(--n1) 62%, #0C3252 86%, #FFFFFF 100%)!important;
  padding-bottom:26px}
.trust + .sec{background:#FFFFFF!important}

/* Every section shares one vertical rhythm so the joins land predictably. */
.sec,.mp-pack,.mp-ins,.mp-help,
.legacy .med-section,.legacy .med-news-section,
.legacy .emergency-section,.legacy .capabilities-section{
  padding-block:clamp(54px,7vw,94px)}

/* ==========================================================================
   Consecutive dark bands must flow as one region.
   Each dark band fades to white at both edges, so two of them in a row produced
   a bright white stripe between them. A band that is followed by another dark
   band keeps its bottom dark, and a band that follows one keeps its top dark.
   ========================================================================== */
.mp-ins:has(+ .mp-help){
  background:
    radial-gradient(110% 80% at 70% 6%,rgba(18,192,198,.22) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,#FFFFFF 0%,#0E3A5F 7%,var(--n1) 22%,var(--n1) 100%)!important}

.mp-ins + .mp-help{
  background:
    radial-gradient(120% 80% at 40% 0%,rgba(18,192,198,.20) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,var(--n1) 0%,var(--n1) 74%,#0B3050 92%,#FFFFFF 100%)!important;
  padding-top:clamp(30px,4vw,54px)}

/* Fallback for browsers without :has(): the pair still reads as one block
   because the join sits mid-gradient rather than on a hard edge. */
@supports not selector(:has(*)){
  .mp-ins{background:
    radial-gradient(110% 80% at 70% 6%,rgba(18,192,198,.22) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,#FFFFFF 0%,#0E3A5F 7%,var(--n1) 22%,var(--n1) 100%)!important}
  .mp-help{background:
    linear-gradient(180deg,var(--n1) 0%,var(--n1) 74%,#0B3050 92%,#FFFFFF 100%)!important}
}

/* A soft rule between them, so the two ideas still read as separate blocks. */
.mp-ins + .mp-help::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(760px,84%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(65,204,209,.35),transparent)}

/* ==========================================================================
   Specificity fix. The rebuilt sections live inside the .legacy wrapper, so
   `.legacy p { color: var(--ink2) }` (0,1,1) was beating `.mp-ins__lead` (0,1,0)
   and painting body copy dark navy on a navy ground. Nearly invisible.
   Every text colour in a rebuilt section is re-declared at matching specificity.
   ========================================================================== */
.legacy .mp-ins__lead{color:#CFE2EE}
.legacy .mp-ins__note{color:#9FBFD2}
.legacy .mp-ins__points li{color:#DCEAF2}
.legacy .mp-ins__points strong{color:#fff}
.legacy .mp-ins__claim{color:#DCEAF2}
.legacy .mp-ins__claim strong{color:var(--t2)}
.legacy .mp-ins h2{color:#fff}
.legacy .mp-ins .eyebrow{color:var(--t2)}

.legacy .mp-help__lead{color:#C7DEEA}
.legacy .mp-help h2{color:#fff}
.legacy .mp-help .eyebrow{color:var(--t2)}
.legacy .mp-help__num span{color:var(--t2)}
.legacy .mp-help__num strong{color:#fff}

.legacy .mp-pack__head p{color:var(--ink2)}
.legacy .mp-pack__card p{color:var(--ink3)}
.legacy .mp-pack__card h3{color:var(--ink)}
.legacy .mp-pack__note{color:var(--ink3)}
.legacy .mp-pack .eyebrow{color:var(--accent-ink)}

/* Buttons inside the rebuilt sections must not inherit the legacy link colour. */
.legacy .mp-ins .btn,
.legacy .mp-help .btn,
.legacy .mp-pack .btn{text-decoration:none}
.legacy .mp-ins .btn--urgent,
.legacy .mp-help .btn--urgent,
.legacy .mp-pack .btn--urgent{background:var(--t1);border-color:var(--t1);color:var(--n1)}
.legacy .mp-ins .btn--urgent:hover,
.legacy .mp-help .btn--urgent:hover,
.legacy .mp-pack .btn--urgent:hover{background:#fff;border-color:#fff;color:var(--n1)}
.legacy .mp-help .btn--wa{background:transparent;border-color:var(--t1);color:var(--t1)}
.legacy .mp-help .btn--wa:hover{background:var(--t1);color:var(--n1)}
.legacy .mp-help .btn--ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.legacy .mp-help .btn--ghost:hover{background:#fff;color:var(--n1);border-color:#fff}

/* ==========================================================================
   Patient stories: two rails, wider cards, and a visible signal that the row
   scrolls. A card sized so the next one peeks is the strongest affordance
   there is, stronger than any arrow or caption.
   ========================================================================== */
.rail__shell + .rail__shell{margin-top:18px}

.story{
  width:min(78vw,320px);max-width:320px}
@media (min-width:640px){.story{width:290px;max-width:290px}}
@media (min-width:1100px){.story{width:320px;max-width:320px}}

/* On a phone the card is sized so roughly a quarter of the next one shows. */
@media (max-width:639px){
  .story{width:72vw;max-width:none;scroll-snap-align:center}
  .rail{gap:14px;padding-inline:2px;scroll-padding-inline:16px}
  .rail__shell{gap:0}
  .rail__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:38px;height:38px;font-size:12px;
    background:rgba(255,255,255,.94);border-color:transparent;
    box-shadow:0 6px 18px -6px rgba(10,42,74,.5)}
  .rail__btn[data-dir="-1"]{left:2px}
  .rail__btn[data-dir="1"]{right:2px}
  .rail__shell{position:relative}
}

/* Fade the right edge so a clipped card reads as "there is more". */
.rail__shell::after{
  content:"";position:absolute;top:0;right:0;width:38px;height:100%;
  pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(245,249,251,0),var(--bg2) 88%)}
@media (min-width:768px){.rail__shell::after{width:52px}}

/* The swipe hint. Disappears once the visitor has scrolled either rail. */
.rail__swipe{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:16px 0 0;font-size:14px;font-weight:600;color:var(--accent-ink);
  transition:opacity .3s var(--ez)}
.rail__swipe i{
  font-size:15px;animation:swipeNudge 1.9s var(--ez) infinite}
body.mp-swiped .rail__swipe{opacity:0;pointer-events:none}
@media (min-width:768px){.rail__swipe{display:none}}

@keyframes swipeNudge{
  0%,100%{transform:translateX(0)}
  45%{transform:translateX(-8px)}
  70%{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .rail__swipe i{animation:none}
}

/* ==========================================================================
   Advanced Hospital Capabilities: two columns on a phone.
   Each card carries a sentence, so the description clamps to keep the pair
   level rather than being hidden.
   ========================================================================== */
@media (max-width:639px){
  .legacy .capabilities-grid{gap:10px}
  .legacy .capabilities-grid > *{
    flex:1 1 calc(50% - 5px)!important;max-width:calc(50% - 5px)}
  .legacy .capability-card{padding:15px 13px}
  .legacy .capability-card h3{font-size:14px;line-height:1.3;min-height:calc(1.3em * 2)}
  .legacy .capability-card p{
    font-size:12.5px;line-height:1.45;-webkit-line-clamp:3;min-height:calc(1.45em * 3)}
  .legacy .capability-card i{font-size:17px}
}
@media (min-width:640px) and (max-width:1023px){
  .legacy .capabilities-grid > *{flex:1 1 calc(50% - 9px)!important;max-width:none}
}

/* ==========================================================================
   Tap targets. Footer links were 19px tall, which is a thumb-width miss on a
   phone. Everything interactive now clears 44px, the Apple HIG minimum.
   ========================================================================== */
.ftr ul li a,
.ftr__bottom a,
.drawer nav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding-block:4px;line-height:1.35}
.ftr ul{gap:2px}
.ftr__bottom{align-items:center;row-gap:2px}

.hdr__logo{min-width:44px;min-height:44px;display:inline-flex;align-items:center}

/* Rail arrows: 44px everywhere, sized down only in visual weight. */
@media (max-width:639px){
  .rail__btn{width:44px;height:44px;font-size:13px}
  .rail__btn[data-dir="-1"]{left:0}
  .rail__btn[data-dir="1"]{right:0}
}

/* Any remaining inline link inside a paragraph keeps a comfortable hit area
   without disturbing the text flow. */
.legacy .hospital-contact-info a,
.loc__row a{display:inline-block;padding-block:6px}

/* Last three: footer social discs and the credit line links. */
.ftr__social a{width:44px;height:44px}
.ftr__bottom a,
.ftr__bottom span a{min-height:44px;min-width:44px;justify-content:flex-start}
.hdr__lang a{min-width:44px;min-height:44px}

/* The card carries the poster as a background as well as on the two video
   elements, so a card that has not painted its video yet is never an empty
   navy box while scrolling. */
.story{background-size:cover;background-position:center;background-repeat:no-repeat}

/* "Watch story" sat dead centre, on top of the burned-in subtitles in the
   footage. It moves to the foot of the card, clear of the picture content. */
.story__play{justify-content:center;align-items:center;gap:0;position:absolute;inset:0}
.story__hint{
  position:absolute;left:0;right:0;bottom:14px;margin:0;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;text-align:center;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.story__play span{margin-bottom:0}

/* A slightly stronger foot gradient so the label always has something to sit on. */
.story__play{
  background:linear-gradient(180deg,
    rgba(10,42,74,.06) 0%,rgba(10,42,74,.10) 55%,rgba(6,26,46,.72) 100%)}

/* ==========================================================================
   FINAL: longer, eased section fades.
   A two-stop gradient reads as a band with a visible start and end. These use
   many stops that approximate an ease curve, spread over roughly a fifth of the
   section at each end, so the colour arrives gradually instead of switching.
   Padding grows to match, so no content sits inside the blend.
   ========================================================================== */
.mp-ins,
.mp-help,
.legacy .emergency-section{
  padding-block:clamp(96px,11vw,150px)!important;
  background:
    radial-gradient(110% 70% at 70% 12%,rgba(18,192,198,.20) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,
      #FFFFFF 0%,
      #F4F8FA 3%,
      #DCE9F0 6%,
      #B4CBDA 9%,
      #7FA3BC 13%,
      #4C7A9C 17%,
      #24567D 21%,
      #113C60 25%,
      var(--n1) 31%,
      var(--n1) 69%,
      #113C60 75%,
      #24567D 79%,
      #4C7A9C 83%,
      #7FA3BC 87%,
      #B4CBDA 91%,
      #DCE9F0 94%,
      #F4F8FA 97%,
      #FFFFFF 100%)!important}

.mp-ins:has(+ .mp-help){
  background:
    radial-gradient(110% 70% at 70% 12%,rgba(18,192,198,.20) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,
      #FFFFFF 0%,#F4F8FA 3%,#DCE9F0 6%,#B4CBDA 9%,#7FA3BC 13%,
      #4C7A9C 17%,#24567D 21%,#113C60 25%,var(--n1) 31%,var(--n1) 100%)!important;
  padding-bottom:clamp(60px,7vw,96px)!important}

.mp-ins + .mp-help{
  background:
    radial-gradient(120% 70% at 40% 6%,rgba(18,192,198,.18) 0%,rgba(18,192,198,0) 58%),
    linear-gradient(180deg,
      var(--n1) 0%,var(--n1) 62%,#113C60 70%,#24567D 76%,#4C7A9C 81%,
      #7FA3BC 86%,#B4CBDA 90%,#DCE9F0 94%,#F4F8FA 97%,#FFFFFF 100%)!important;
  padding-top:clamp(50px,6vw,84px)!important}

/* Light tinted bands get the same treatment at a gentler amplitude. */
.sec--tint,
.legacy .med-light-bg,
.legacy #wellness-packages{
  padding-block:clamp(78px,9vw,120px)!important;
  background:linear-gradient(180deg,
    #FFFFFF 0%,
    #FCFDFE 4%,
    #FAFCFD 8%,
    #F8FBFC 12%,
    var(--bg2) 18%,
    var(--bg2) 82%,
    #F8FBFC 88%,
    #FAFCFD 92%,
    #FCFDFE 96%,
    #FFFFFF 100%)!important}

/* The hero hands over to the trust strip across a longer distance too. */
.hero::after{height:190px;
  background:linear-gradient(180deg,
    rgba(10,42,74,0) 0%,
    rgba(10,42,74,.10) 22%,
    rgba(10,42,74,.28) 42%,
    rgba(10,42,74,.52) 60%,
    rgba(10,42,74,.76) 78%,
    rgba(10,42,74,.93) 90%,
    var(--n1) 100%)}

.trust{
  padding-bottom:44px;
  background:linear-gradient(180deg,
    var(--n1) 0%,var(--n1) 46%,#0C3252 66%,#20537A 80%,
    #5C8AAB 88%,#A9C6D8 93%,#E2EDF3 97%,#FFFFFF 100%)!important}

/* ==========================================================================
   "Inside MedPark" height, desktop only.
   Measured: each picture renders 482px tall. The section was 708px, i.e. 1.47
   pictures, which shows no complete image and makes the drift hard to read.
   Set to roughly two pictures: one complete image with real partials above and
   below, which is what makes a marquee legible. Three pictures (about 1450px)
   would exceed a typical laptop viewport, so the section could never be seen
   whole and the opposing columns would read as disorienting rather than calm.
   Mobile is untouched.
   ========================================================================== */
@media (min-width:900px){
  .gal{height:clamp(900px,66vw,1080px)}
}

/* The trust strip is only ~120px of content, so its fade had almost no distance
   to work in. Extra bottom padding gives the gradient room to resolve. */
.trust{
  padding-bottom:clamp(70px,8vw,120px)!important;
  background:linear-gradient(180deg,
    var(--n1) 0%,
    var(--n1) 34%,
    #0C3252 50%,
    #144066 62%,
    #24567D 72%,
    #4C7A9C 80%,
    #7FA3BC 86%,
    #B4CBDA 91%,
    #DCE9F0 95%,
    #F4F8FA 98%,
    #FFFFFF 100%)!important}

/* ==========================================================================
   RESTRAINT LAYER
   Added 2026-09-03 after review feedback.

   The verdict was that the page reads as an AI-generated site rather than a
   professionally designed healthcare site, and that the gradients were the
   main cause. That is fair. There were 71 gradients in this file, 17 of them
   purely decorative radial glows.

   This layer flattens the decoration and keeps only the gradients that do a
   job: scrims that make white text readable over a photograph or video, and
   the mask fades that soften the ends of a scrolling rail. Those are not
   ornament, they are legibility.

   It is deliberately one appended block rather than 71 edits, so the whole
   change can be reviewed in one place and reverted in one line.
   ========================================================================== */

/* ---- section backgrounds become flat ------------------------------------ */
.trust{background:var(--n1)!important}
.trust + .sec{background:var(--bg)!important}
.sec--deep{background:var(--n1)!important}

/* The soft fade strips that blended one section into the next. A healthcare
   site wants a clean edge between sections, not a haze. */
.sec--deep::before,
.sec--deep::after{display:none!important}

/* ---- decorative glows removed ------------------------------------------- */
/* These were large diffuse turquoise orbs bleeding off the edge of the layout.
   Pretty in isolation, and collectively the thing that made the page look
   generated. */
.sec__glow,
.hero__glow,
.sec::before.glow{display:none!important}

/* ---- the floating action buttons match the site's real colours ---------- */
.mp-fab__btn--call{background:var(--urgent)!important;color:#fff!important}
.mp-fab__btn--wa{background:var(--wa)!important;color:#fff!important}
.mp-fab__btn--call::after{color:rgba(230,57,70,.5)!important}
.mp-fab__btn--wa::after{color:rgba(37,211,102,.5)!important}
/* The blurred halo behind each button goes. The colour alone is loud enough. */
.mp-fab__btn::before{display:none!important}

/* ---- hero -----------------------------------------------------------------
   The scrim stays, because white text over video needs it to be readable.
   What goes is the extra tinted wash layered on top of it, which is what made
   the opening section feel heavy. */
.hero__scrim{
  background:linear-gradient(180deg,rgba(6,20,36,.55) 0%,rgba(6,20,36,.62) 55%,rgba(6,20,36,.78) 100%)!important;
}
.hero::before,.hero::after{display:none!important}

/* Typography in the hero, tightened rather than restyled. The wording is
   untouched. */
.hero__inner{max-width:820px}
.hero h1{margin-bottom:.25em}
.hero__lead{font-size:clamp(17px,2.1vw,21px);opacity:.95;max-width:44ch}
.hero__badge{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  backdrop-filter:none!important;
}

/* ---- cards and panels: one flat surface, one hairline ------------------- */
.help__card,.loc,.faq,.sec .card,.story{
  background:var(--bg)!important;
}
.help__card{border:1px solid var(--line-soft)!important; box-shadow:none!important}
.help__card:hover{border-color:var(--t1)!important; box-shadow:var(--sh1)!important}

/* ---- headline face, corrected --------------------------------------------
   h1 was set in Organo. The guideline lists "Helvetica World Bold" FIRST for
   headlines and large text, with Organo as the second option, and on a
   hospital hero Organo reads informal: rounded, lowercase, closer to a
   consumer brand than to a medical one. Helvetica World Bold is the right
   call here and it is what the guideline leads with.

   Organo is kept available for a short display line where its character
   suits, via .mp-display. It is no longer the default for every h1.
   Corrected 2026-09-03. */
h1{font-family:var(--fh)!important;font-weight:700!important;text-transform:none!important}
.hero h1{letter-spacing:-.025em;line-height:1.08}

/* ==========================================================================
   2026-09-03 pass. Requested directly: transparent header that solidifies
   on scroll, a brighter hero video, no gradient band between hero and
   trust, one WhatsApp entry point instead of several, and a working watch
   video button.
   ========================================================================== */

/* ---- 1. header: transparent over the hero, solid once scrolled ----------
   Was permanently solid. JS (v2.js) adds .is-solid once the visitor scrolls
   past roughly the header's own height; everything below is just the two
   states and a transition between them, so the change is a fade rather than
   a snap. */
.hdr{background:transparent!important;backdrop-filter:none!important;
  box-shadow:none!important;
  transition:background-color .32s var(--ez),backdrop-filter .32s var(--ez),
             box-shadow .32s var(--ez)!important}
.hdr.is-solid{background:rgba(10,42,74,.96)!important;
  backdrop-filter:saturate(150%) blur(10px)!important;box-shadow:var(--sh2)!important}
/* Text over a bright video needs a little help even with the scrim behind
   it; a solid header needs none, so the shadow fades out with it. */
.hdr__nav a,.hdr__lang a{text-shadow:0 1px 3px rgba(0,0,0,.35);transition:text-shadow .32s var(--ez)}
.hdr.is-solid .hdr__nav a,.hdr.is-solid .hdr__lang a{text-shadow:none}

/* ---- 2. hero video: brighter, and no longer fighting a heavy scrim ------
   The scrim carried three overlapping dark passes by the time earlier work
   was done (base rule, then two "final pass" overrides). This is the one
   that is actually live, tuned lighter, plus a filter on the video itself
   so the footage reads as bright rather than washed out. The top stays the
   darkest stop on purpose: that is what sits behind the header text. */
.hero__video{filter:brightness(1.18) saturate(1.12)!important}
.hero__scrim{
  background:linear-gradient(180deg,
    rgba(6,20,36,.40) 0%,
    rgba(6,20,36,.24) 32%,
    rgba(6,20,36,.34) 62%,
    rgba(6,20,36,.52) 100%)!important;
}

/* ---- 3. no gradient band between hero and trust --------------------------
   .hero::after was a 120-190px gradient strip inserted purely to blend the
   seam. Removed outright rather than re-tuned, same as .sec--deep::before/
   ::after already were below. The hero's own scrim already resolves toward
   navy at its lower edge, and .trust is a flat fill starting from the same
   navy, so the join does not need a bridge on top of it. */
.hero::after{display:none!important}

/* ---- 4. one WhatsApp button: the floating pill, matching v1 exactly -----
   Every in-page WhatsApp button (hero, drawer, "need help now", the extra
   one near the news list) is removed from the markup; this is the only one
   left. Built to match the live site's floating widget: a labelled pill,
   not an icon circle, bottom right, always visible. */
.mp-wa-float{position:fixed;right:20px;bottom:20px;z-index:890;
  display:flex;align-items:center;gap:10px;
  background:var(--wa);color:#fff;text-decoration:none;
  font-weight:700;font-size:16px;padding:14px 20px;border-radius:var(--pill);
  box-shadow:0 8px 25px -4px rgba(0,0,0,.32);
  transition:transform .2s var(--ez),box-shadow .2s var(--ez),background-color .2s var(--ez);
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0))}
.mp-wa-float i{font-size:20px}
.mp-wa-float:hover,.mp-wa-float:focus-visible{
  background:var(--wa-deep);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 30px -4px rgba(0,0,0,.38)}
.mp-wa-float:active{transform:scale(.97)}
@media (min-width:768px){.mp-wa-float{right:26px;bottom:26px}}

/* ---- 5. video lightbox, for the hero's Watch video button ---------------
   [hidden] already hides it; JS in v2.js toggles the attribute. Video is
   unmuted here on purpose, since watching with sound is the one thing the
   silent autoplay background video cannot offer. */
.mp-video-modal{position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:24px}
.mp-video-modal[hidden]{display:none}
.mp-video-modal__scrim{position:absolute;inset:0;background:rgba(4,12,20,.86)}
.mp-video-modal__box{position:relative;z-index:1;width:100%;max-width:960px;
  aspect-ratio:16/9;background:#000;border-radius:var(--r2);overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.mp-video-modal__video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.mp-video-modal__close{position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.mp-video-modal__close:hover,.mp-video-modal__close:focus-visible{background:rgba(0,0,0,.78)}

/* ==========================================================================
   2026-09-03, second pass. The header starts inside the hero, and the two
   header actions get a real design instead of two competing solid pills.
   ========================================================================== */

/* ---- 1. the header no longer reserves space above the hero --------------
   It was position:sticky, which stays in the document flow, so it occupied
   about 66px at the top of the page. That was invisible while the header was
   solid navy. The moment it went transparent in the last pass, that strip
   started showing the page background as a pale band above the hero video,
   which is the gap that was reported.

   Fixed positioning takes it out of flow entirely: the hero now starts at
   the very top of the page and the header floats over it. */
.hdr{position:fixed!important;left:0;right:0;top:0}

/* Content is centred in a hero 520px tall at its shortest, so on a short
   viewport it could otherwise sit under the header. This clears it. */
.hero__inner{padding-top:clamp(66px,9vh,96px)}

/* A fixed header hides whatever an anchor link jumps to, so every target
   keeps its own clearance. Applies to Book Appointment (#appointment),
   Find us (#locations) and every other in-page link. */
:target,
section[id]{scroll-margin-top:86px}

/* ---- 2. the two header actions -----------------------------------------
   Both were solid pills, red next to white, competing for the same
   attention. Now there is a clear order: red is the emergency action and
   stays the loudest thing in the header; booking is a considered action, so
   it is a glass outline that only fills in on hover.

   Both work on the transparent header over video and on the solid navy one
   after scrolling, which is why the outline is white rather than navy. */
.hdr__cta{display:none}
@media (min-width:600px){.hdr__cta{display:inline-flex}}

.hdr .btn{min-height:44px;padding:11px 20px;font-size:15px;border-width:1.5px}

/* Emergency. Red, lifted off the video by its own shadow rather than a
   border, with a live dot instead of a phone icon: the dot says "open now",
   which is the thing worth saying on a 24 hour hospital. */
.hdr .btn--urgent{
  background:var(--urgent);border-color:var(--urgent);color:#fff;
  box-shadow:0 6px 18px -6px rgba(230,57,70,.75)}
.hdr .btn--urgent:hover,.hdr .btn--urgent:focus-visible{
  background:var(--urgent-deep);border-color:var(--urgent-deep);
  box-shadow:0 10px 24px -6px rgba(230,57,70,.85)}
.btn__live{width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.75);animation:mpLive 2.4s var(--ez) infinite;flex:0 0 auto}
@keyframes mpLive{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){.btn__live{animation:none}}

/* Booking. Glass over the video, filling with the brand turquoise on hover.
   Turquoise rather than white, so the two actions never read as the same
   weight and the brand colour appears in the header at all. */
.btn--book{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%)}
.btn--book:hover,.btn--book:focus-visible{
  background:var(--t1);border-color:var(--t1);color:var(--n1);
  box-shadow:0 8px 22px -8px rgba(18,192,198,.9)}

/* In the drawer the ground is solid navy, so the glass has nothing to blur.
   Same shape, flat fill. */
.drawer .btn--book{background:rgba(255,255,255,.08);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ==========================================================================
   2026-09-03, third pass. Flat section fills, a bigger booking button, and
   the FAQ rebuilt around its five groups.
   ========================================================================== */

/* ---- 1. no more gradient seams between sections -------------------------
   Every band was painted with a six-stop gradient that faded to white at its
   top and bottom edge, so the join into the next section was a soft gradient
   strip rather than a line. That is what was being seen as "gradient lines
   between sections". Each band is now one flat colour and the sections meet
   on a clean edge.

   The turquoise radial wash over the dark bands goes with them: it was the
   other half of the same effect. */
.mp-ins,
.mp-help,
.legacy .emergency-section{
  background:var(--n1)!important}

.sec--tint,
.legacy .med-light-bg,
.legacy #wellness-packages{
  background:var(--bg2)!important}

.legacy #comprehensive-care,
.legacy .capabilities-section,
.legacy #services,
.mp-pack,
.legacy #med-news{background:#FFFFFF!important}

/* Anything still reaching for a fade at a section edge is switched off, so
   there is one rule for this and not three competing ones. */
.mp-ins::before,.mp-ins::after,
.mp-help::before,.mp-help::after,
.legacy .emergency-section::before,
.legacy .emergency-section::after,
.sec--deep::before,.sec--deep::after,
.hero::before,.hero::after{display:none!important}

/* ---- 2. the booking button, sized properly ------------------------------
   It was the same height as a nav link and narrower than its own label
   deserved. Both header actions now share one size, wide enough to read as
   buttons and tall enough to hit on a phone. */
.hdr .btn{
  min-height:46px;
  padding:12px 22px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  border-width:1.5px;
  white-space:nowrap}
.hdr .btn--book{min-width:186px}
.hdr .btn--urgent{min-width:150px}

/* In the drawer they are stacked, so they take the full width instead. */
.drawer .btn{width:100%;min-height:50px;font-size:16px}

/* ---- 3. FAQ groups ------------------------------------------------------
   Twenty questions in one undifferentiated stack is a wall. They arrive
   grouped under the five headings the live site already uses. */
.faq__group{
  margin:30px 0 12px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-ink,#0A7276)}
.faq__group:first-child{margin-top:0}
.faq details{scroll-margin-top:96px}

/* ==========================================================================
   2026-09-03, fourth pass. Hero proportions and breathing room, the
   capability grid on a phone, and the insurance section given a real design.
   ========================================================================== */

/* ---- 1. hero height -----------------------------------------------------
   It was capped at 760px, so on a wide desktop it stopped well short of the
   fold and read as a band rather than an opening. On desktop it now fills
   the screen. Phones keep the existing behaviour, because a full-height
   hero on a phone pushes everything below it out of reach. */
@media (min-width:1024px){
  .hero{min-height:100svh}
}

/* ---- 2. hero spacing ----------------------------------------------------
   Badge, headline, line and buttons were all sitting on near-identical
   margins, so the block read as one dense lump. Each step now gets a gap
   proportional to its weight: most air around the headline, least between
   the two buttons. */
.hero__badge{margin-bottom:clamp(18px,2.4vw,26px)}
.hero h1{margin-bottom:clamp(16px,2.2vw,24px);line-height:1.1}
.hero__lead{margin-bottom:clamp(26px,3.6vw,40px);line-height:1.55}
.hero__cta{gap:14px;row-gap:12px}
@media (min-width:768px){
  .hero__cta{gap:16px}
}

/* ---- 3. capability cards on a phone -------------------------------------
   The six cards were an empty icon slot and a heading each, so they stacked
   as ragged text of very different lengths with nothing to line up against.
   Icons are back in the markup; this gives them one shape, one height and
   one alignment. */
.legacy .capability-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;min-height:76px;
  text-align:left}
.legacy .capability-card__ico{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--t6,#E8F8F9);color:var(--accent-ink);font-size:19px}
.legacy .capability-card h4{
  margin:0;font-size:16px;line-height:1.35;font-weight:700}
.legacy .capability-card h4 .accent{color:inherit}

@media (max-width:640px){
  .legacy .capabilities-grid{grid-template-columns:1fr!important;gap:10px}
  .legacy .capability-card{min-height:68px;padding:14px 16px;gap:12px}
  .legacy .capability-card__ico{width:42px;height:42px;font-size:17px}
  .legacy .capability-card h4{font-size:15.5px}
}

/* ---- 4. international insurance ----------------------------------------
   Switched back on and given a proper two-column layout: the text carries
   the section, the panel beside it holds one clear icon and the claim.
   Collapses to a single column on a phone with the panel first, so the
   section opens on something visual rather than a wall of prose. */
.mp-ins{padding:clamp(56px,7vw,88px) 0;color:#fff}
.mp-ins__grid{
  display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(28px,4vw,56px);align-items:center}
.mp-ins__body h2{color:#fff;margin:0 0 18px;max-width:20ch}
.mp-ins__lead{color:#CFE4EE;font-size:clamp(16px,1.7vw,18px);margin:0 0 26px;max-width:62ch}

.mp-ins__points{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.mp-ins__points li{display:flex;align-items:flex-start;gap:12px;color:#EAF4F8;font-size:15.5px}
.mp-ins__points i{
  flex:0 0 auto;margin-top:2px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;
  background:var(--t1);color:var(--n1)}
.mp-ins__points strong{color:#fff}

.mp-ins__note{color:#A8C4D4;font-size:14.5px;line-height:1.6;margin:0;max-width:62ch}

.mp-ins__panel{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:clamp(26px,3vw,38px) 24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r3)}
.mp-ins__badge{
  width:clamp(96px,9vw,124px);height:clamp(96px,9vw,124px);border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--t1),var(--accent-deep));
  color:var(--n1);font-size:clamp(40px,4.4vw,54px);
  box-shadow:0 14px 34px -12px rgba(18,192,198,.75)}
.mp-ins__claim{
  margin:0;text-align:center;color:#EAF4F8;font-size:16px;line-height:1.45}
.mp-ins__claim strong{color:var(--t1)}

@media (max-width:900px){
  .mp-ins__grid{grid-template-columns:1fr}
  .mp-ins__panel{order:-1;flex-direction:row;justify-content:center;padding:20px}
  .mp-ins__badge{width:76px;height:76px;font-size:34px}
  .mp-ins__claim{text-align:left;max-width:26ch}
}

/* ==========================================================================
   2026-09-03, FINAL GRADIENT REMOVAL. Everything below is last in the file
   on purpose, so it wins outright.

   Twice now a "gradients removed" pass has been undone by rules further down
   the stylesheet re-applying them. Rather than chase them one at a time,
   this block states the rule once: every section is a flat colour, and every
   decorative gradient wash is off.

   The single exception is .hero__scrim, which is a gradient over the hero
   video. That one is not decoration: white text is unreadable over moving
   footage without it.
   ========================================================================== */

/* ---- 1. every band is one flat colour ---------------------------------- */
.mp-ins,
.mp-ins + .mp-help,
.mp-ins:has(+ .mp-help),
.mp-help,
.legacy .emergency-section,
.legacy .emergency-cta-section,
.legacy .med-insurance-section,
.sec--deep,
.trust{background-image:none!important;background:var(--n1)!important}

.sec--tint,
.trust + .sec,
.legacy .med-light-bg,
.legacy #wellness-packages,
.legacy .med-wellness-packages{background-image:none!important;background:var(--bg2)!important}

.legacy #comprehensive-care,
.legacy .capabilities-section,
.legacy #services,
.mp-pack,
.legacy #med-news,
.sec{background-image:none!important}

/* ---- 2. no decorative gradient washes ---------------------------------- */
.mp-ins::before,.mp-ins::after,
.mp-help::before,.mp-help::after,
.mp-pack::before,.mp-pack::after,
.sec--deep::before,.sec--deep::after,
.hero::before,.hero::after,
.legacy .emergency-section::before,
.legacy .emergency-cta-section::before,
.legacy .med-insurance-section::before,
.legacy .med-wellness-packages::before,
.legacy .med-wellness-packages h2.center::before,
.legacy .med-service::after,
.legacy .med-service:not(:has(.service-bg))::after{
  display:none!important;background-image:none!important}

/* ---- 3. the few components that still carried one ---------------------- */
.help__card--urgent{background-image:none!important;background:var(--t6)!important}
.story__play{background-image:none!important;background:var(--t1)!important;color:var(--n1)!important}

/* ---- 4. the insurance section, rebuilt --------------------------------
   Down to exactly the heading and the two paragraphs that were asked for.
   The eyebrow, the four bullets, the side panel and the cashless claim are
   gone from the markup, not hidden. One column, centred, flat navy. */
.mp-ins{padding:clamp(56px,7vw,86px) 0}
.mp-ins__inner{
  max-width:760px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.mp-ins__icon{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  color:var(--t1);font-size:26px}
.mp-ins__inner h2{color:#fff;margin:0 0 20px;max-width:22ch}
.mp-ins__inner p{
  color:#CFE4EE;font-size:clamp(15.5px,1.6vw,17px);line-height:1.7;
  margin:0 0 16px;max-width:66ch}
.mp-ins__inner p:last-child{margin-bottom:0;color:#A8C4D4;font-size:15.5px}

/* ==========================================================================
   2026-09-03, fifth pass. Two corrections.
   ========================================================================== */

/* ---- 1. patient stories: undo the damage --------------------------------
   .story__play is position:absolute inset:0 — it covers the whole card. Its
   background was a translucent scrim so the play icon and the "Watch story"
   label stay readable over moving footage.

   The gradient sweep in the previous pass replaced it with SOLID turquoise,
   which covered every card completely. The preview videos were playing the
   whole time, behind an opaque block.

   Restored as a flat translucent tint: no gradient, and the preview shows
   through again. The lesson: "remove all gradients" cannot be applied to a
   full-bleed overlay without checking what it is covering. */
.story__play{
  background-image:none!important;
  background:rgba(10,42,74,.30)!important;
  color:#fff!important}
.story__play:hover,.story__play:focus-visible{background:rgba(10,42,74,.16)!important}
.story.is-playing .story__play{opacity:0!important;pointer-events:none}

/* ---- 2. insurance section on white --------------------------------------
   Matches the packages section above it. Note the :has() selector: an earlier
   rule sets .mp-ins:has(+ .mp-help) to navy, and that is more specific than a
   bare .mp-ins, so it has to be named here or it wins. */
.mp-ins,
.mp-ins:has(+ .mp-help){
  background-image:none!important;
  background:#FFFFFF!important}

.mp-ins__icon{
  background:var(--t6)!important;
  border:1px solid rgba(18,192,198,.30)!important;
  color:var(--accent-ink)!important}
.mp-ins__inner h2{color:var(--ink)!important}
.mp-ins__inner p{color:var(--ink2,#4A5A66)!important}
.mp-ins__inner p:last-child{color:var(--ink3,#6B7B87)!important}

/* ==========================================================================
   2026-09-03, sixth pass. Review fixes: heading utility, the appointment
   actions, and a hairline where two sections of the same colour meet.
   ========================================================================== */

/* Screen readers and search engines follow the heading order; sighted
   visitors never see this. Used for the help section, whose visible heading
   was removed on request. */
.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The appointment section's actions. */
.appointment-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
@media (max-width:640px){
  .appointment-cta{flex-direction:column}
  .appointment-cta .btn{width:100%}
}

/* Now that every band is flat, two white sections in a row run together with
   no edge at all. Packages into Insurance is the pair that does this. A
   hairline is enough to separate them; anything more would be the gradient
   seam again by another name. */
.mp-ins{border-top:1px solid var(--line)}
.legacy #med-news{border-top:1px solid var(--line)}

/* ==========================================================================
   2026-09-03, seventh pass. The appointment booking form.
   ========================================================================== */

.apt{display:flex;flex-direction:column;gap:16px}
.apt__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}

.apt__f{display:flex;flex-direction:column;gap:7px}
.apt__f > span{
  font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.apt__f > span b{color:var(--urgent);font-weight:700}

.apt__f input,
.apt__f select,
.apt__f textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r1);
  padding:12px 14px;min-height:48px;
  transition:border-color .18s var(--ez),box-shadow .18s var(--ez)}
.apt__f textarea{min-height:96px;resize:vertical;line-height:1.55}
.apt__f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A2A4A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

.apt__f input:focus,
.apt__f select:focus,
.apt__f textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(18,192,198,.22)}

.apt__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.apt__hint{margin:0;font-size:14px;color:var(--accent-ink);font-weight:600}
.apt__hint--bad{color:var(--urgent)}

.apt__urgent{
  margin:0;padding:12px 14px;border-radius:var(--r1);
  background:var(--t6);border:1px solid rgba(18,192,198,.28);
  font-size:14px;line-height:1.55;color:var(--ink2)}
.apt__urgent a{font-weight:700;color:var(--urgent);text-decoration:underline}

@media (max-width:720px){
  .apt__grid{grid-template-columns:1fr}
  .apt__actions{flex-direction:column;align-items:stretch}
  .apt__actions .btn{width:100%}
  .apt__hint{text-align:center}
}

/* ==========================================================================
   2026-09-03, eighth pass. The booking popup and its form.
   ========================================================================== */

.mp-modal{position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:20px}
.mp-modal[hidden]{display:none}
.mp-modal__scrim{position:absolute;inset:0;background:rgba(4,14,24,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

.mp-modal__box{
  position:relative;z-index:1;width:100%;max-width:600px;
  max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:var(--r3);
  padding:clamp(24px,3.4vw,38px);
  box-shadow:0 40px 90px -24px rgba(4,14,24,.62)}

.mp-modal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--bg2);color:var(--ink);font-size:17px;
  display:grid;place-items:center;
  transition:background-color .18s var(--ez),color .18s var(--ez)}
.mp-modal__close:hover,.mp-modal__close:focus-visible{background:var(--urgent);color:#fff}

.mp-modal__head{margin-bottom:22px;padding-right:44px}
.mp-modal__head h2{margin:0 0 8px;font-size:clamp(22px,2.6vw,27px);color:var(--ink);line-height:1.2}
.mp-modal__head p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.55}

/* ---- the form ----------------------------------------------------------- */
.apt{display:flex;flex-direction:column;gap:15px}
.apt__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 15px}

.apt__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.apt__f--wide{grid-column:1 / -1}
.apt__f > span{
  font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;text-transform:uppercase}
.apt__f > span b{color:var(--urgent)}

.apt__f input,
.apt__f select,
.apt__f textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--bg2);border:1.5px solid transparent;border-radius:var(--r1);
  padding:13px 15px;min-height:50px;
  transition:border-color .18s var(--ez),background-color .18s var(--ez),box-shadow .18s var(--ez)}
.apt__f textarea{min-height:88px;resize:vertical;line-height:1.55}
.apt__f input::placeholder{color:var(--ink3)}

.apt__f select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A2A4A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}

.apt__f input:hover,.apt__f select:hover,.apt__f textarea:hover{background:#fff;border-color:var(--line)}
.apt__f input:focus,
.apt__f select:focus,
.apt__f textarea:focus{
  outline:none;background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(18,192,198,.20)}

/* ---- actions ------------------------------------------------------------
   The submit is WhatsApp green because that is genuinely where the request
   goes next, and a green send button is the thing everyone already
   recognises. The brand turquoise stays on the focus rings so the form still
   reads as MedPark's. */
.apt__actions{display:flex;flex-direction:column;gap:10px;margin-top:3px}
.apt .btn--send{
  width:100%;min-height:54px;font-size:16.5px;font-weight:700;
  background:var(--wa);border-color:var(--wa);color:#fff;
  box-shadow:0 10px 26px -10px rgba(37,211,102,.85)}
.apt .btn--send:hover,.apt .btn--send:focus-visible{
  background:var(--wa-deep);border-color:var(--wa-deep);color:#fff;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.95)}
.apt .btn--send i{font-size:20px}

.apt__hint{margin:0;font-size:14px;line-height:1.5;color:var(--accent-ink);font-weight:600;text-align:center}
.apt__hint--bad{color:var(--urgent)}
.apt__hint:empty{display:none}

.apt__urgent{
  margin:2px 0 0;padding:12px 14px;border-radius:var(--r1);
  background:var(--t6);border:1px solid rgba(18,192,198,.26);
  font-size:13.5px;line-height:1.55;color:var(--ink2)}
.apt__urgent a{font-weight:700;color:var(--urgent);text-decoration:underline}

@media (max-width:640px){
  .mp-modal{padding:0;align-items:flex-end}
  .mp-modal__box{
    max-width:none;max-height:94vh;
    border-radius:var(--r3) var(--r3) 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
  .apt__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   2026-09-03, ninth pass. The booking popup redrawn for desktop and phone.

   Everything here is last in the file and deliberately specific, because the
   earlier form styling is still above it and this replaces rather than
   argues with it.
   ========================================================================== */

/* ---- the dialog --------------------------------------------------------- */
.mp-modal{padding:24px}
.mp-modal__scrim{background:rgba(4,14,24,.76)}

.mp-modal__box{
  max-width:620px;
  padding:0;                       /* the sections below own their padding */
  border-radius:22px;
  overflow:hidden;                 /* so the accent bar follows the corners */
  display:flex;flex-direction:column;
  max-height:min(92vh,860px);
  box-shadow:0 30px 80px -20px rgba(4,14,24,.55),0 0 0 1px rgba(10,42,74,.06)}

/* A turquoise hairline across the top: the brand present without a banner. */
.mp-modal__box::before{
  content:"";display:block;height:4px;flex:0 0 auto;
  background:var(--t1)}

.mp-modal__grab{display:none}

.mp-modal__head{
  flex:0 0 auto;padding:26px 30px 20px;margin:0;
  border-bottom:1px solid var(--line-soft,#EDF1F4)}
.mp-modal__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:9px}
.mp-modal__head h2{margin:0 0 7px;font-size:clamp(23px,2.5vw,28px);line-height:1.18;color:var(--ink)}
.mp-modal__head p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2);max-width:46ch}

.mp-modal__close{
  top:18px;right:18px;width:38px;height:38px;
  background:transparent;color:var(--ink3);font-size:16px}
.mp-modal__close:hover,.mp-modal__close:focus-visible{background:var(--bg2);color:var(--ink)}

/* ---- the form ----------------------------------------------------------- */
.apt{gap:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

.apt__grid{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:24px 30px 26px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;align-content:start}

.apt__f{gap:8px}
.apt__f > span{
  font-size:13.5px;font-weight:650;color:var(--ink);
  letter-spacing:0;text-transform:none;
  display:flex;align-items:baseline;gap:7px}
.apt__f > span b{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--t6);
  padding:2px 7px;border-radius:20px}

.apt__f input,
.apt__f select,
.apt__f textarea{
  min-height:52px;padding:14px 16px;font-size:16px;   /* 16px stops iOS zooming on focus */
  background:#fff;border:1.5px solid var(--line);border-radius:13px;
  color:var(--ink)}
.apt__f textarea{min-height:104px;padding-top:13px}
.apt__f input::placeholder,.apt__f textarea::placeholder{color:var(--ink3);opacity:.85}

.apt__f input:hover,.apt__f select:hover,.apt__f textarea:hover{border-color:var(--ink4,#B9C6CF)}
.apt__f input:focus,.apt__f select:focus,.apt__f textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(18,192,198,.16);background:#fff}
.apt__f select{background-position:right 16px center}
.apt__f--wide{grid-column:1 / -1}

/* A date field is the one control browsers all draw differently. Give it the
   same box as the rest and let the native picker do the work inside it. */
.apt__f input[type="date"]{padding-right:12px}
.apt__f input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;transition:opacity .15s var(--ez)}
.apt__f input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* ---- the footer stays put while the fields scroll ----------------------- */
.apt__foot{
  flex:0 0 auto;padding:18px 30px 24px;
  border-top:1px solid var(--line-soft,#EDF1F4);
  background:#fff;
  display:flex;flex-direction:column;gap:12px}

.apt .btn--send{
  width:100%;min-height:56px;font-size:17px;border-radius:14px;
  background:var(--wa);border-color:var(--wa);color:#fff;
  box-shadow:0 12px 26px -12px rgba(37,211,102,.9)}
.apt .btn--send:hover,.apt .btn--send:focus-visible{
  background:var(--wa-deep);border-color:var(--wa-deep);transform:translateY(-1px);
  box-shadow:0 16px 32px -12px rgba(37,211,102,1)}
.apt .btn--send:active{transform:translateY(0)}
.apt .btn--send i{font-size:21px}

.apt__hint{margin:0;font-size:14.5px;line-height:1.5;text-align:center;font-weight:600;color:var(--accent-ink)}
.apt__hint--bad{color:var(--urgent)}
.apt__hint:empty{display:none}

.apt__urgent{
  margin:0;padding:11px 13px;border-radius:11px;
  display:flex;align-items:flex-start;gap:10px;
  background:var(--t6);border:1px solid rgba(18,192,198,.24);
  font-size:13px;line-height:1.5;color:var(--ink2)}
.apt__urgent i{flex:0 0 auto;margin-top:2px;color:var(--urgent);font-size:13px}
.apt__urgent a{font-weight:700;color:var(--urgent)}

/* ---- phone: a sheet that rises from the bottom -------------------------- */
@media (max-width:640px){
  .mp-modal{padding:0;align-items:flex-end}
  .mp-modal__box{
    max-width:none;width:100%;max-height:94vh;
    border-radius:22px 22px 0 0;
    animation:mpSheet .26s var(--ez) both}

  /* The handle says "this can be dragged away" before anyone reads a word. */
  .mp-modal__grab{
    display:block;width:38px;height:4px;border-radius:4px;
    background:var(--line);margin:9px auto 0;flex:0 0 auto}

  .mp-modal__head{padding:14px 20px 16px}
  .mp-modal__head h2{font-size:22px}
  .mp-modal__head p{font-size:14.5px}
  .mp-modal__close{top:12px;right:12px;width:36px;height:36px}

  .apt__grid{grid-template-columns:1fr;gap:15px;padding:18px 20px 20px}
  .apt__foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom))}
  .apt .btn--send{min-height:54px}
  .apt__urgent{font-size:12.5px}
}
@keyframes mpSheet{from{transform:translateY(14%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mp-modal__box{animation:none}}

/* Two columns is right for a laptop, but the very short fields read better
   paired than stretched, so the wide breakpoint keeps the same grid. */
@media (min-width:641px) and (max-width:820px){
  .mp-modal__head{padding:22px 24px 18px}
  .apt__grid{padding:20px 24px 22px;gap:16px}
  .apt__foot{padding:16px 24px 20px}
}

/* ==========================================================================
   2026-09-03, tenth pass. Line breaking, playbook rule 4.

   Where a line ends is a design decision. These two properties let the
   browser do most of the work: balance evens out the lines of a heading,
   pretty stops a single word being left alone on the last line. Both
   degrade to normal wrapping in browsers that do not have them yet, so
   there is nothing to guard.
   ========================================================================== */

h1, h2, h3,
.hero__lead,
.sec-head p,
.mp-modal__head h2,
.legacy .capabilities-title,
.legacy .emergency-title{text-wrap:balance}

p,
.legacy .emergency-text,
.legacy .capabilities-subtitle,
.mp-modal__head p,
.apt__urgent{text-wrap:pretty}

/* A line that runs the full width of a wide screen is hard to read whatever
   its break points are. Body copy is held to a comfortable measure so the
   wraps land somewhere sensible in the first place. */
.legacy .emergency-text{max-width:68ch;margin-inline:auto}
.hero__lead{max-width:32ch}

/* ==========================================================================
   2026-09-03, eleventh pass. The two hospital cards were only clickable on
   their bottom text band.

   The old trick stretched a pseudo-element from the "Learn More" link:

     .med-hospital-card .med-btn-small::before{position:absolute; inset:0}

   position:absolute resolves against the nearest POSITIONED ancestor. The
   button is not positioned, so it climbed to .med-hospital-overlay, which is
   position:absolute and only covers the lower text band. The photograph, most
   of the card, was dead.

   Each card is now wrapped in one real anchor. One link, one tab stop, the
   whole card clickable, and nothing depending on which ancestor happens to be
   positioned. "Learn More" is a span that looks exactly as it did.
   ========================================================================== */

/* The old stretcher is gone with the markup, but kill it by name too, in case
   a copy of the old pattern survives anywhere else in the estate. */
.legacy .med-hospital-card .med-btn-small::before{display:none!important}

.legacy .med-hospital-link{
  display:block;text-decoration:none;color:inherit;
  border-radius:inherit;overflow:hidden}
.legacy .med-hospital-link:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px}

/* The button is a span now, so it needs the hover state driven from the card
   rather than from its own :hover. */
@media (hover:hover){
  .legacy .med-hospital-card:hover .med-btn-small{
    background:#fff;border-color:#fff;color:var(--n1);transform:translateX(3px)}
}
.legacy .med-hospital-link:focus-visible .med-btn-small{
  background:#fff;border-color:#fff;color:var(--n1)}

/* The whole card is the target now, so the cursor should say so everywhere
   on it, not only over the button. */
.legacy .med-hospital-card{cursor:pointer}

/* ==========================================================================
   2026-09-04. Inner pages: healthhub.php and medparkhospital.php.

   Built to the playbook: existing tokens, existing .wrap and .sec rhythm,
   flat bands, hairline surfaces, no gradient seams. Only the patterns that
   did not already exist are defined here.
   ========================================================================== */

/* ---- a page hero, shorter than the home one ----------------------------
   The home hero fills the screen because it is the front door. An inner page
   hero is a header, not an arrival: tall enough to carry a photograph and two
   actions, short enough that the content starts above the fold. */
.hero--page{
  min-height:clamp(380px,52svh,540px);
  background-size:cover;background-position:center;background-repeat:no-repeat}
@media (min-width:1024px){.hero--page{min-height:min(58svh,560px)}}
.hero--page .hero__inner{padding-block:clamp(56px,7vw,84px)}
.hero--page h1{max-width:18ch}
.hero--page .hero__lead{max-width:38ch;margin-bottom:clamp(22px,3vw,32px)}

/* ---- at a glance -------------------------------------------------------
   Address and opening hours, lifted from the contact block at the foot of
   the page to the top, where somebody deciding whether to travel looks. */
.facts{background:var(--n1);color:#fff;padding-block:clamp(20px,2.6vw,28px)}
.facts__grid{display:grid;gap:16px 34px;grid-template-columns:1fr}
@media (min-width:760px){.facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts__item{display:flex;align-items:flex-start;gap:13px}
.facts__item i{
  flex:0 0 auto;margin-top:3px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-size:14px;
  background:rgba(255,255,255,.10);color:var(--t1)}
.facts__item b{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t2);margin-bottom:3px}
.facts__item span{display:block;font-size:15.5px;line-height:1.5;color:#DCEAF2}

/* ---- a single body paragraph ------------------------------------------- */
.prose{max-width:72ch;font-size:clamp(16px,1.7vw,17.5px);line-height:1.75;color:var(--ink2)}
.prose strong{color:var(--ink);font-weight:700}

/* ---- services ----------------------------------------------------------
   Nine names of very different lengths. No icons: inventing a different
   metaphor for each would be decoration carrying no information, which the
   playbook rules out. One flat chip each, equal height, hairline border,
   accent on hover. */
.svc__grid{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:1fr}
@media (min-width:600px){.svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.svc__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc{
  display:flex;align-items:center;min-height:66px;
  padding:16px 20px;border-radius:var(--r2);
  background:#fff;border:1px solid var(--line-soft);
  font-size:16px;font-weight:650;color:var(--ink);line-height:1.35;
  transition:border-color .18s var(--ez),box-shadow .18s var(--ez)}
.svc:hover{border-color:var(--t1);box-shadow:var(--sh1)}

/* ---- gallery rail ------------------------------------------------------
   Replaces the Swiper carousel and its CDN stylesheet and script. Scroll
   snapping, momentum on touch, keyboard scrollable, no library. Breaks out
   of .wrap so the rail runs to the edge and reads as continuing. */
.shots{
  list-style:none;margin:0;padding:4px 20px 14px;
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
@media (min-width:768px){.shots{padding-inline:32px;gap:18px}}
.shots li{flex:0 0 auto;scroll-snap-align:center}
.shots img{
  display:block;width:min(82vw,420px);aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r2);background:var(--bg2)}
@media (min-width:768px){.shots img{width:380px}}

/* A visible, styled scrollbar says the rail scrolls without needing a hint. */
.shots{scrollbar-width:thin;scrollbar-color:var(--n4) transparent}
.shots::-webkit-scrollbar{height:8px}
.shots::-webkit-scrollbar-track{background:transparent}
.shots::-webkit-scrollbar-thumb{background:var(--n5);border-radius:99px}
.shots:hover::-webkit-scrollbar-thumb{background:var(--n4)}

/* ---- contact block on an inner page ------------------------------------
   Reuses the .loc card from the home page's locations section, one column. */
#contact .loc__grid{grid-template-columns:1fr;max-width:960px;margin-inline:auto}
#contact .loc__row b{color:var(--ink);font-weight:700}
#contact .loc__map iframe{width:100%;height:320px;border:0;display:block}

/* ==========================================================================
   2026-09-05. Location pages, rebuilt: healthhub and medparkhospital.

   Written mobile first: every base rule is the phone layout and the media
   queries only ever add. Touch targets 48px, body text 16px minimum, focus
   rings on everything interactive, and all motion behind reduced-motion.
   ========================================================================== */

.loc-page{overflow-x:hidden}

/* ---- hero ---------------------------------------------------------------
   The photograph is an <img> rather than a background image, so it can carry
   fetchpriority and a real intrinsic size. object-fit does the cropping. */
.phero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(400px,68svh,560px);background:var(--n1)}
.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,20,36,.34) 0%,rgba(6,20,36,.30) 40%,rgba(6,20,36,.86) 100%)}
.phero__inner{position:relative;z-index:2;width:100%;
  padding-block:clamp(88px,13vw,72px) clamp(30px,5vw,52px);color:#fff}
.phero h1{color:#fff;font-size:clamp(30px,7vw,52px);line-height:1.08;
  letter-spacing:-.025em;margin:0 0 12px;max-width:16ch;text-wrap:balance}
.phero__lead{color:#DCEAF2;font-size:clamp(16px,4.2vw,20px);line-height:1.5;
  margin:0 0 clamp(22px,5vw,30px);max-width:34ch;text-wrap:balance}
.phero__cta{display:flex;flex-direction:column;gap:10px}
.phero__cta .btn{width:100%;justify-content:center}
@media (min-width:560px){
  .phero__cta{flex-direction:row;flex-wrap:wrap;gap:12px}
  .phero__cta .btn{width:auto}
}
@media (min-width:1024px){.phero{min-height:min(72svh,620px)}}

/* ---- at a glance -------------------------------------------------------- */
.glance{background:var(--n1);color:#fff;padding-block:20px}
.glance__grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.glance__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}}
.glance__item{display:flex;align-items:flex-start;gap:13px}
.glance__item i{flex:0 0 auto;margin-top:2px;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;font-size:14px;
  background:rgba(255,255,255,.10);color:var(--t1)}
.glance__item b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t2);margin-bottom:3px}
.glance__item span{display:block;font-size:16px;line-height:1.5;color:#DCEAF2}

/* ---- about -------------------------------------------------------------- */
.sec__narrow{max-width:760px}
.prose{font-size:17px;line-height:1.75;color:var(--ink2);margin:0;text-wrap:pretty}
.prose strong,.prose .texthosp{color:var(--ink);font-weight:700}

/* ---- video showcase -----------------------------------------------------
   A dark band, so the clip is the only thing on screen. The preview is muted
   and looping; the button opens it full size with sound. */
.sec--dark{background:var(--n1);color:#fff}
.vshow{position:relative;border-radius:var(--r3);overflow:hidden;
  aspect-ratio:16/10;background:#04121F;box-shadow:var(--sh3)}
@media (min-width:768px){.vshow{aspect-ratio:16/9}}
.vshow__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vshow__play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(6,20,36,.34);color:#fff;transition:background-color .22s var(--ez)}
.vshow__play:hover,.vshow__play:focus-visible{background:rgba(6,20,36,.16)}
.vshow__play:focus-visible{outline:3px solid var(--t1);outline-offset:-6px}
.vshow__ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--t1);color:var(--n1);font-size:24px;padding-left:5px;
  box-shadow:0 14px 34px -10px rgba(18,192,198,.85);
  transition:transform .22s var(--ez)}
@media (min-width:768px){.vshow__ring{width:84px;height:84px;font-size:28px}}
.vshow__play:hover .vshow__ring{transform:scale(1.07)}
.vshow__label{font-size:15px;font-weight:700;letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ---- services -----------------------------------------------------------
   A turquoise rule on the leading edge, so nine plain chips read as one set
   rather than nine boxes. Cheaper than nine invented icons and it carries the
   same amount of information, which is none. */
.svc__grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:600px){.svc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (min-width:1000px){.svc__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc{position:relative;display:flex;align-items:center;min-height:64px;
  padding:14px 18px 14px 20px;border-radius:var(--r2);
  background:#fff;border:1px solid var(--line-soft);
  transition:border-color .18s var(--ez),box-shadow .18s var(--ez)}
.svc span{font-size:16px;font-weight:650;color:var(--ink);line-height:1.35}
.svc:hover{border-color:var(--t1);box-shadow:var(--sh1)}
.svc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--t1);opacity:.55}

/* ---- gallery rail ------------------------------------------------------- */
.rail{position:relative}
.rail__track{list-style:none;margin:0;display:flex;gap:12px;
  padding:4px 20px 16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--n4) transparent}
@media (min-width:768px){.rail__track{gap:18px;padding-inline:32px}}
.rail__track::-webkit-scrollbar{height:8px}
.rail__track::-webkit-scrollbar-track{background:transparent}
.rail__track::-webkit-scrollbar-thumb{background:var(--n5);border-radius:99px}
.rail__track li{flex:0 0 auto;scroll-snap-align:center}
.rail__track img{display:block;width:min(84vw,440px);aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r2);background:var(--n6)}
@media (min-width:768px){.rail__track img{width:400px}}

/* Arrows are a pointer convenience. On touch the rail is swiped, so they are
   hidden there rather than sitting over the photographs doing nothing. */
.rail__nav{display:none}
@media (min-width:1024px) and (hover:hover){
  .rail__nav{display:grid;place-items:center;position:absolute;top:calc(50% - 8px);
    transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;
    border:1px solid var(--line);background:#fff;color:var(--n1);cursor:pointer;
    box-shadow:var(--sh2);transition:background-color .18s var(--ez),color .18s var(--ez)}
  .rail__nav:hover{background:var(--t1);color:var(--n1);border-color:var(--t1)}
  .rail__nav:disabled{opacity:.35;cursor:default}
  .rail__nav--prev{left:14px}
  .rail__nav--next{right:14px}
}

/* ---- reviews ------------------------------------------------------------
   The Elfsight widget draws itself. Reserve height so the page does not jump
   when it arrives, then let it size naturally. */
#reviews{padding-block:clamp(40px,6vw,72px)}
#reviews .wrap{min-height:340px}

/* ---- contact ------------------------------------------------------------ */
.cplace{display:grid;gap:0;grid-template-columns:1fr;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r3);
  overflow:hidden;max-width:960px;margin-inline:auto}
@media (min-width:900px){.cplace{grid-template-columns:1.15fr .85fr}}
.cplace__map iframe{width:100%;height:260px;border:0;display:block}
@media (min-width:900px){.cplace__map iframe{height:100%;min-height:400px}}
.cplace__body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:20px}
@media (min-width:900px){.cplace__body{padding:30px;justify-content:center}}
.cplace__rows{display:flex;flex-direction:column;gap:14px}
.cplace__row{display:flex;align-items:flex-start;gap:12px;
  font-size:16px;line-height:1.5;color:var(--ink2)}
.cplace__row i{flex:0 0 auto;margin-top:3px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-size:13px;background:var(--t6);color:var(--accent-ink)}
.cplace__row b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.cplace__row a{color:var(--accent-ink);font-weight:650}
.cplace__cta{display:flex;flex-direction:column;gap:10px}
.cplace__cta .btn{width:100%;justify-content:center}
@media (min-width:560px){
  .cplace__cta{flex-direction:row;flex-wrap:wrap}
  .cplace__cta .btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  .rail__track{scroll-behavior:auto}
  .vshow__ring,.vshow__play{transition:none}
}

/* ==========================================================================
   2026-09-05, second pass on the location pages. All feedback-driven.
   Appended last, so these win over the block above without editing it.
   ========================================================================== */

/* ---- 1. at a glance: a card, not a navy band ---------------------------
   The flat band left two blocks of text floating on navy with nothing
   holding them, which is what looked wrong on a phone. It is a white card
   now, lifted over the join with the hero so it reads as belonging to the
   photograph above it rather than starting a new section.

   The address is a link: an address on a phone is something you act on, not
   something you read and retype. */
.glance{background:transparent;padding-block:0;position:relative;z-index:3;margin-top:-34px}
@media (min-width:900px){.glance{margin-top:-46px}}

.glance__card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r3);
  box-shadow:0 18px 46px -22px rgba(10,42,74,.42);
  display:grid;grid-template-columns:1fr;overflow:hidden}
@media (min-width:820px){.glance__card{grid-template-columns:1.35fr 1fr}}

.glance__item{display:flex;align-items:flex-start;gap:14px;padding:18px 20px}
@media (min-width:820px){.glance__item{padding:22px 26px}}
/* A hairline between the two, horizontal when stacked, vertical when not. */
.glance__item + .glance__item{border-top:1px solid var(--line-soft)}
@media (min-width:820px){
  .glance__item + .glance__item{border-top:0;border-left:1px solid var(--line-soft)}
}

.glance__item i{
  flex:0 0 auto;margin-top:1px;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-size:15px;
  background:var(--t6);color:var(--accent-ink)}
.glance__text{min-width:0}
.glance__text b{
  display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.glance__text span,
.glance__text a{
  display:block;font-size:16px;line-height:1.5;color:var(--ink);font-weight:600;
  text-wrap:pretty}
.glance__text a{
  color:var(--accent-ink);text-decoration:none;
  display:inline-flex;align-items:flex-start;gap:7px}
.glance__text a i{
  all:unset;font-size:11px;margin-top:5px;color:var(--ink3);flex:0 0 auto}
.glance__text a:hover{text-decoration:underline}
.glance__text a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* The hero no longer needs its own bottom padding under the card. */
.phero__inner{padding-bottom:clamp(52px,9vw,72px)}

/* ---- 2. video: lighter band, smaller on desktop ------------------------
   The dark band made a dark video sit inside a dark box. On a light ground
   the clip is the darkest thing on screen, which is where the eye should go.
   Mobile keeps its full width; only desktop is capped, because on a phone
   the video at full width is exactly right. */
.sec--dark{background:var(--bg2)!important;color:var(--ink)!important}
.vshow{max-width:none;margin-inline:auto}
@media (min-width:1024px){
  .vshow{max-width:820px;aspect-ratio:16/9}
}
@media (min-width:1400px){
  .vshow{max-width:900px}
}
/* A hairline and a softer shadow, now that it sits on a light ground. */
.vshow{border:1px solid var(--line-soft);box-shadow:0 26px 60px -28px rgba(10,42,74,.5)}

/* ---- 3. gallery arrows, always ----------------------------------------
   They were behind a min-width:1024px and hover:hover query, so on a laptop
   trackpad or any touch screen they simply were not there. They are a
   control, not a decoration: they show everywhere now, sized for a finger.
   The rail still swipes. */
.rail__nav{
  display:grid!important;place-items:center;position:absolute;z-index:3;
  top:calc(50% - 10px);transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.94);
  color:var(--n1);cursor:pointer;font-size:14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 20px -6px rgba(10,42,74,.45);
  transition:background-color .18s var(--ez),color .18s var(--ez),transform .18s var(--ez)}
@media (min-width:768px){.rail__nav{width:52px;height:52px;font-size:16px}}
.rail__nav:hover{background:var(--t1);color:var(--n1);border-color:var(--t1)}
.rail__nav:active{transform:translateY(-50%) scale(.94)}
.rail__nav:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.rail__nav--prev{left:10px}
.rail__nav--next{right:10px}
@media (min-width:768px){.rail__nav--prev{left:18px}.rail__nav--next{right:18px}}

/* A soft fade at both edges, so the strip reads as continuing past the screen
   rather than being cut off. That is the swipe hint: no words needed. */
.rail::before,
.rail::after{
  content:"";position:absolute;top:0;bottom:16px;width:56px;z-index:2;
  pointer-events:none}
.rail::before{left:0;background:linear-gradient(90deg,var(--bg2),rgba(245,249,251,0))}
.rail::after{right:0;background:linear-gradient(270deg,var(--bg2),rgba(245,249,251,0))}
@media (min-width:768px){.rail::before,.rail::after{width:90px}}

/* The marquee drives scrollLeft every frame, so smooth scrolling would fight
   it. Snapping would too: it drifts continuously rather than landing. */
.rail__track{scroll-snap-type:none;scroll-behavior:auto}
.rail__track li{scroll-snap-align:none}
/* The scrollbar is noise under a rail that moves on its own. */
.rail__track{scrollbar-width:none}
.rail__track::-webkit-scrollbar{display:none}

/* ---- 4. reviews: full width so more fit across ------------------------ */
.wrap--wide{max-width:1420px}
#reviews .wrap--wide{padding-inline:12px}
@media (min-width:768px){#reviews .wrap--wide{padding-inline:24px}}

/* ==========================================================================
   2026-09-05, the four service pages: emergency, urgent care, ICU,
   diagnostics, tourists. Appended last so these win without editing the
   blocks above.

   These pages were a navy hero, a paragraph, and a grid of Font Awesome
   icons over a grey band. The icons carried no information the label did
   not already carry, and two of the four heroes pointed at an image that is
   not on the server, so they rendered as a flat navy block.

   What changes here is presentation only. Every word is the page's own.
   ========================================================================== */

/* ---- breadcrumb inside the hero ---------------------------------------
   The old crumb bar sat on white above the hero, which pushed the
   photograph down the page and gave the eye a strip of nothing to cross
   first. It belongs inside the hero, small and quiet, where it says where
   you are without competing with the heading. */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.02em;margin:0 0 14px;
  color:rgba(255,255,255,.72)}
.crumbs a{color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}
.crumbs a:hover{border-bottom-color:rgba(255,255,255,.8)}
.crumbs a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:3px}
.crumbs span[aria-hidden]{opacity:.55}

/* The service heroes are shorter than a location hero: there is no video
   and no gallery under them, so a full-height photograph would just delay
   the content somebody came for. */
.svc-page .phero__inner{padding-block:clamp(56px,10vw,86px)}
.svc-page .phero__lead{max-width:60ch}

/* ---- feature cards -----------------------------------------------------
   A title and a line of explanation. The icon is gone: five different
   pictograms for five capabilities is decoration, and on a phone it pushed
   the words that matter below the fold. What is left is the hierarchy the
   content already has, set properly.

   The left rule is the only ornament, and it earns its place by giving the
   eye a consistent starting edge down a ragged column of text. */
.feat__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:660px){.feat__grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1040px){.feat__grid{grid-template-columns:repeat(3,1fr);gap:18px}}

.feat{
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--t3);
  border-radius:var(--r1);
  padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:7px;
  transition:border-left-color .18s var(--ez),box-shadow .18s var(--ez),transform .18s var(--ez)}
.feat:hover{
  border-left-color:var(--accent);
  box-shadow:var(--sh2);
  transform:translateY(-2px)}
.feat__t{
  margin:0;font-family:var(--fh);font-size:17px;line-height:1.3;
  font-weight:700;color:var(--ink);text-wrap:balance}
.feat__d{
  margin:0;font-size:15px;line-height:1.6;color:var(--ink2);text-wrap:pretty}

/* On a tinted band the cards need a white ground to stay separate from it. */
.sec--tint .feat{background:#fff}

/* A closing note under a grid, such as the cashless treatment line. */
.feat__note{
  margin:18px auto 0;max-width:64ch;text-align:center;
  font-size:15.5px;line-height:1.6;color:var(--ink2)}

/* ---- the closing call to action ---------------------------------------
   The old version was a heading and a pulsing red button on a plain band.
   The pulse is gone: a control that moves on its own reads as an advert,
   and this is the one control on the page somebody in trouble needs to
   trust. It is red because red is the emergency action here, and green is
   WhatsApp. Both are deliberate and neither is decoration. */
.ctaband{background:var(--n1);color:#fff;position:relative;overflow:hidden}
.ctaband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% 0%,rgba(18,192,198,.20),transparent 62%)}
.ctaband__inner{position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px}
.ctaband__h{
  margin:0;font-family:var(--fd),var(--fh);
  font-size:clamp(23px,3.6vw,33px);line-height:1.2;
  color:#fff;text-wrap:balance;max-width:20ch}
.ctaband__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
@media (max-width:560px){
  /* On a phone the two actions go full width and stack, so neither is a
     small target next to the other. */
  .ctaband__actions{flex-direction:column;align-items:stretch}
  .ctaband__actions .btn{width:100%;justify-content:center}
}

/* The service pages never want the pulsing animation the legacy sheet
   applies to .pulse, in case any of that markup survives a later edit. */
.svc-page .pulse{animation:none}

/* ==========================================================================
   2026-09-05, /services/. Appended after the service-page pass above.

   The live page is thirteen full-width bands, alternating dark and white,
   each with a photograph on one side and text on the other. On a phone that
   is thirteen screens of scrolling before you reach the thirteenth service,
   and the alternating left/right that gives it rhythm on a desktop collapses
   into a single column where the rhythm is invisible.

   It is a card grid here. The same photograph, the same words, but you can
   see six services at once on a laptop and compare them, which is what
   somebody choosing a service is actually trying to do.
   ========================================================================== */

/* A hero with no photograph behind it: this page has no hero image of its
   own, and borrowing one from a service would say that service is the page.
   Brand navy, the heading, and nothing else. */
.phero--flat{background:var(--n1);min-height:0}
.phero--flat .phero__inner{padding-block:clamp(42px,7vw,66px)}
.phero--flat h1{margin:0}

.srv__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:680px){.srv__grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1120px){.srv__grid{grid-template-columns:repeat(3,1fr);gap:22px}}

.srv{
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--r2);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh1);
  transition:box-shadow .2s var(--ez),transform .2s var(--ez)}
.srv:hover{box-shadow:var(--sh2);transform:translateY(-3px)}

/* A fixed ratio so thirteen photographs of different shapes still line up
   into rows. The image is cropped, never squashed. */
.srv__media{position:relative;aspect-ratio:16/10;background:var(--n6);overflow:hidden}
.srv__media img{width:100%;height:100%;object-fit:cover;display:block}

.srv__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.srv__t{
  margin:0;font-family:var(--fh);font-size:18px;line-height:1.28;
  font-weight:700;color:var(--ink);text-wrap:balance}
/* The one-line promise. It is the sentence that tells you whether this is
   the service you want, so it gets the accent and sits directly under the
   name rather than being lost in the paragraph. */
.srv__promise{
  margin:0;font-size:14.5px;line-height:1.45;font-weight:600;
  color:var(--accent-ink);text-wrap:pretty}
.srv__d{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}

/* Actions pinned to the bottom, so cards of different text lengths still
   line their buttons up across a row. */
.srv__actions{
  margin-top:auto;padding-top:14px;
  display:flex;flex-wrap:wrap;gap:9px}
.srv__actions .btn{font-size:14.5px;padding:10px 16px}
@media (max-width:420px){
  .srv__actions{flex-direction:column;align-items:stretch}
  .srv__actions .btn{width:100%;justify-content:center}
}

/* The line under the appointment heading. */
.ctaband__p{
  margin:0;max-width:52ch;font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.82);text-wrap:pretty}

/* ==========================================================================
   2026-09-05, /about/. Appended after the services pass above.
   Presentation only. Every word on that page is its own.
   ========================================================================== */

/* ---- mission and vision ------------------------------------------------
   Two statements of intent that belong together and neither of which
   outranks the other, so: two equal columns on a deep ground, no card
   borders, separated by a hairline rather than boxed. Boxing them would
   make them look like features. They are not features. */
.mv__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:860px){.mv__grid{grid-template-columns:repeat(2,1fr)}}

.mv__box{padding:6px 0}
@media (min-width:860px){
  .mv__box{padding:4px 40px}
  .mv__box:first-child{padding-left:0;border-right:1px solid rgba(255,255,255,.16)}
  .mv__box:last-child{padding-right:0}
}
@media (max-width:859px){
  .mv__box + .mv__box{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
}
.mv__t{
  margin:0 0 12px;font-family:var(--fd),var(--fh);
  font-size:clamp(21px,3vw,27px);line-height:1.2;color:#fff}
.mv__d{
  margin:0;font-size:16px;line-height:1.7;
  color:rgba(255,255,255,.86);text-wrap:pretty}

/* ---- the two hospitals -------------------------------------------------
   The whole card is one anchor. On the home page the equivalent cards were
   only tappable along the bottom band, because a pseudo-element on the
   button resolved against the overlay rather than the card. One anchor
   wrapping everything is the fix that cannot regress. */
.hosp__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:760px){.hosp__grid{grid-template-columns:repeat(2,1fr);gap:24px}}

.hosp__link{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--line-soft);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1);
  transition:box-shadow .2s var(--ez),transform .2s var(--ez)}
.hosp__link:hover{box-shadow:var(--sh3);transform:translateY(-3px)}
.hosp__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.hosp__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--n6)}
.hosp__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ez)}
.hosp__link:hover .hosp__media img{transform:scale(1.035)}

.hosp__body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1}
.hosp__t{
  font-family:var(--fh);font-size:20px;line-height:1.25;
  font-weight:700;color:var(--ink)}
.hosp__d{font-size:15px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.hosp__cta{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--accent-ink)}
.hosp__cta i{transition:transform .18s var(--ez)}
.hosp__link:hover .hosp__cta i{transform:translateX(3px)}

/* ---- board members -----------------------------------------------------
   A portrait beside the text rather than above it. Two people do not fill a
   three-column grid, and a large square photograph of each would give them
   more of the page than the hospitals get. */
.ldr__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.ldr__grid{grid-template-columns:repeat(2,1fr);gap:20px}}

.ldr{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r2);
  padding:20px;display:flex;gap:18px;align-items:flex-start}
.ldr__ph{
  flex:0 0 auto;width:84px;height:84px;border-radius:50%;
  object-fit:cover;object-position:top center;
  border:3px solid var(--t5);background:var(--n6)}
@media (min-width:520px){.ldr__ph{width:104px;height:104px}}
.ldr__body{min-width:0}
.ldr__n{margin:0 0 2px;font-family:var(--fh);font-size:17.5px;line-height:1.25;
  font-weight:700;color:var(--ink);text-wrap:balance}
.ldr__r{
  margin:0 0 9px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink)}
.ldr__b{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}

/* The about page's prose columns read better a touch wider than the default
   narrow column, which was tuned for a single short block. */
.abt-page .sec__narrow{max-width:74ch}
.abt-page .prose p + p{margin-top:14px}

/* ==========================================================================
   2026-09-05, /contact-us/. Appended after the about pass above.
   ========================================================================== */

/* Two branches, one card each. The card is a two-part object: what you do
   on the left, where it is on the right. On a phone the actions come first,
   because the number is the reason somebody opened this page and the map is
   what they look at after they have decided to go. */
.ctc__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.ctc__grid{grid-template-columns:repeat(2,1fr);gap:24px}}

.ctc{
  background:var(--bg);border:1px solid var(--line-soft);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1);
  display:flex;flex-direction:column}

.ctc__body{padding:22px 24px 20px;display:flex;flex-direction:column;gap:10px}
.ctc__t{
  margin:0 0 2px;font-family:var(--fh);font-size:21px;line-height:1.25;
  font-weight:700;color:var(--ink)}
.ctc__row{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.ctc__row strong{color:var(--ink);font-weight:700;margin-right:5px}
.ctc__row a{color:var(--accent-ink);text-decoration:none;overflow-wrap:anywhere}
.ctc__row a:hover{text-decoration:underline}
.ctc__row a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}

.ctc__actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.ctc__actions .btn{font-size:14.5px;padding:10px 16px}
@media (max-width:430px){
  .ctc__actions{flex-direction:column;align-items:stretch}
  .ctc__actions .btn{width:100%;justify-content:center}
}

/* A fixed ratio so the two maps are the same height whatever the text above
   them does, and the two cards line up across the row. */
.ctc__map{margin-top:auto;aspect-ratio:16/10;background:var(--n6);border-top:1px solid var(--line-soft)}
.ctc__map iframe{width:100%;height:100%;border:0;display:block}

/* ==========================================================================
   2026-09-05, second pass on the inner pages. Feedback driven.

   Two corrections to the pass above. The icons were stripped out of the
   service cards and should not have been: they are a second channel for a
   visitor skimming in a language that is not their first, which is most of
   this site's audience. And about, contact and services were given a flat
   navy hero, which threw away a photograph each page already had.
   ========================================================================== */

/* ---- a hero that needs two crops --------------------------------------
   styles.css serves bgab.webp on a phone and bg-about-desc.webp above
   769px. A <picture> keeps both rather than stretching one over the other. */
.phero__pic{position:absolute;inset:0;display:block;z-index:0}
.phero__pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- icons on the feature cards ---------------------------------------
   A tinted square rather than a bare glyph, so the icon reads as a marker
   at the top of the card instead of floating next to the heading. Sized to
   stay clearly secondary to the title. */
.feat{position:relative}
.feat__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:12px;margin-bottom:4px;
  background:var(--t6);color:var(--accent-ink);font-size:17px;
  transition:background-color .18s var(--ez),color .18s var(--ez)}
.feat:hover .feat__ico{background:var(--t5);color:var(--n1)}

/* ---- icons on the name-only list --------------------------------------
   The symptom list on the emergency page. The icon sits inline before the
   label, small, so eight of them read as one list rather than eight cards. */
.svc__grid--ico .svc{display:flex;align-items:center;gap:11px;text-align:left}
.svc__grid--ico .svc i{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-size:14px;
  background:var(--t6);color:var(--accent-ink)}
.svc__grid--ico .svc span{min-width:0}

/* .phero--flat is no longer used by any page. Kept out of the sheet on
   purpose: reintroducing it would mean a page lost its photograph again. */

/* ==========================================================================
   2026-09-05, news index, news articles, and packages. Appended last.
   ========================================================================== */

/* ---- news index cards -------------------------------------------------
   One anchor per card, as with the hospitals on the about page. The live
   page made only the words "Read More" clickable, which on a phone is a
   four-word target under a photograph nobody can tap. */
.nws__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:700px){.nws__grid{grid-template-columns:repeat(2,1fr);gap:22px}}

.nws__link{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--line-soft);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1);
  transition:box-shadow .2s var(--ez),transform .2s var(--ez)}
.nws__link:hover{box-shadow:var(--sh3);transform:translateY(-3px)}
.nws__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.nws__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--n6)}
.nws__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ez)}
.nws__link:hover .nws__media img{transform:scale(1.035)}

.nws__body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1}
.nws__t{font-family:var(--fh);font-size:19px;line-height:1.28;font-weight:700;
  color:var(--ink);text-wrap:balance}
.nws__d{font-size:15px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.nws__cta{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--accent-ink)}
.nws__cta i{transition:transform .18s var(--ez)}
.nws__link:hover .nws__cta i{transform:translateX(3px)}

/* ---- a single article -------------------------------------------------- */
.phero--art .phero__inner{padding-block:clamp(58px,10vw,92px)}
.phero--art h1{max-width:22ch}
.art__meta{
  margin:14px 0 0;font-size:14.5px;color:rgba(255,255,255,.82);
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.art__meta b{font-weight:700;color:#fff;margin-right:4px}

/* A measured column. Long-form prose wants roughly 65 to 75 characters, and
   the default narrow column is tuned tighter than that. */
.art-page .sec__narrow{max-width:70ch}
.art__body p{margin:0 0 16px;font-size:17px;line-height:1.72;color:var(--ink2)}
.art__body p:last-child{margin-bottom:0}
.art__body b,.art__body strong{color:var(--ink);font-weight:700}
.art__body ul{margin:0 0 18px;padding-left:22px}
.art__body li{font-size:17px;line-height:1.65;color:var(--ink2);margin-bottom:9px}
.art__body a{color:var(--accent-ink);text-decoration:underline}

/* ---- packages ---------------------------------------------------------- */
/* The group icon sits with the heading, sized to the heading rather than
   stamped at a fixed size beside it. */
.pkg__gico{
  color:var(--accent);margin-right:10px;font-size:.82em;vertical-align:baseline}

/* The brochure. Twenty portrait posters. A grid shows the shape of the whole
   set at once; each one opens full size. The live page stacked all twenty at
   full width, which on a phone is twenty screens of scrolling. */
.brc__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.brc__grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1000px){.brc__grid{grid-template-columns:repeat(5,1fr);gap:16px}}

.brc__link{
  position:relative;display:block;border-radius:var(--r1);overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--sh1);
  transition:box-shadow .18s var(--ez),transform .18s var(--ez)}
.brc__link:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.brc__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.brc__link img{width:100%;height:auto;display:block;aspect-ratio:1743/2472;object-fit:cover}

/* The page number, so somebody can say "page 14" to reception. */
.brc__n{
  position:absolute;left:8px;bottom:8px;
  min-width:24px;height:24px;padding:0 7px;border-radius:var(--pill);
  display:grid;place-items:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(10,42,74,.82);color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ==========================================================================
   2026-09-05, the German and Polish home pages.
   A native <details> accordion, so the FAQ opens and closes with no
   JavaScript at all and still works if a script fails to load.
   ========================================================================== */
.faq__group{display:grid;gap:10px}
.faq__item{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r1);
  overflow:hidden}
.faq__item summary{
  cursor:pointer;list-style:none;padding:15px 18px;
  font-family:var(--fh);font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:flex-start;gap:12px;text-wrap:pretty}
.faq__item summary::-webkit-details-marker{display:none}
/* The chevron is drawn from the marker so there is no extra element and no
   icon font dependency on a control that must always work. */
.faq__item summary::after{
  content:"";flex:0 0 auto;margin-left:auto;margin-top:6px;
  width:8px;height:8px;border-right:2px solid var(--accent-ink);
  border-bottom:2px solid var(--accent-ink);transform:rotate(45deg);
  transition:transform .18s var(--ez)}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.faq__item[open] summary{border-bottom:1px solid var(--line-soft)}
.faq__item p{
  margin:0;padding:14px 18px 17px;
  font-size:15.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty}