/* Shree Prannath Hospital: corporate theme, version 3
   Layout modelled on the client's reference (large multi speciality hospital site):
   two-tier header, full-width banner slider, side quick tabs, info cards,
   about + stat grid, accreditations, plan-style price cards, big footer.
   Colours stay logo-led: royal blue, diya saffron, cross red. */
:root{
  --blue:#1F2FC4; --blue-deep:#141F86; --navy:#0B1350; --blue-50:#EFF1FD; --blue-100:#DDE2FA;
  --saffron:#F28C18; --saffron-deep:#C86A06; --saffron-50:#FFF5E8;
  --red:#E31E24; --red-50:#FDEBEC;
  --ink:#1A1D3A; --ink-2:#555A78; --ink-3:#8488A3;
  --bg:#FFFFFF; --tint:#F7F8FC; --line:#E7E9F2;
  --r:14px;
  --shadow:0 14px 40px -20px rgba(11,19,80,.3);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15.5px;line-height:1.75;color:var(--ink-2);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.25;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
.container{max-width:1240px;margin-inline:auto;padding-inline:24px}
@media (max-width:520px){.container{padding-inline:16px}}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:200}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;font-weight:600;font-size:14px;letter-spacing:.02em;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:16px;height:16px;flex:none}
.btn--sm{padding:8px 16px;font-size:12.5px}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-deep)}
.btn--accent{background:var(--saffron);color:#fff}
.btn--accent:hover{background:var(--saffron-deep)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#B8161B}
.btn--outline{border-color:var(--blue);color:var(--blue);background:#fff}
.btn--outline:hover{background:var(--blue);color:#fff}
.btn--light{background:#fff;color:var(--blue-deep)}
.btn--white{background:#fff;color:var(--red)}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

.section{padding-block:90px}
.section--tint{background:var(--tint)}
.section--blue{background:linear-gradient(135deg,var(--navy),var(--blue-deep));color:#D7DBF8}
@media (max-width:760px){.section{padding-block:60px}}
.k-kicker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-deep)}
.k-head{text-align:center;max-width:780px;margin:0 auto 48px;display:grid;gap:10px;justify-items:center}
.k-head h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;position:relative;padding-bottom:16px}
.k-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--saffron))}
.k-head p{font-size:16px}
.k-head--light h2{color:#fff}
.k-head--light .k-kicker{color:#FFC27A}
.k-center{margin-top:36px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.k-link{color:var(--blue);font-weight:600;text-decoration:underline}

/* two-tier header */
.k-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:#fff;box-shadow:0 6px 20px -14px rgba(11,19,80,.45)}
.k-top__in{display:flex;align-items:center;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand img{width:76px;height:auto;flex:none}
/* the wordmark matches the blue in the crest exactly (#0000FF sampled from
   logo.png, 18,869 px of it) rather than the site token --blue-deep */
.brand b{display:block;font-size:26px;font-weight:700;color:#0000FF;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
/* the trust line takes the red from the crest (#FF0000, 6,299 px of it)
   rather than the saffron token */
.brand small{display:block;font-size:13px;font-weight:500;color:#FF0000;letter-spacing:.04em;white-space:nowrap}
.k-top__right{display:flex;align-items:center;gap:22px}
.k-contact{display:flex;align-items:center;gap:10px;white-space:nowrap}
.k-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.k-ic svg{width:19px;height:19px}
.k-ic--blue{background:var(--blue-50);color:var(--blue);box-shadow:0 0 0 4px rgba(31,47,196,.08)}
.k-ic--red{background:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(227,30,36,.15)}
.k-contact small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.2}
.k-contact b{font-size:15.5px;color:var(--ink);line-height:1.3}
.menu-btn{display:none;background:var(--blue-50);border:0;border-radius:8px;padding:9px;cursor:pointer;color:var(--blue-deep)}
.menu-btn svg{width:24px;height:24px;display:block}
.k-nav{background:var(--blue)}
.k-nav__in{display:flex;justify-content:space-between}
.k-nav a{display:inline-flex;align-items:center;gap:4px;padding:13px 8px;font-size:14px;font-weight:500;color:#fff;white-space:nowrap;border-bottom:3px solid transparent}
.k-nav a svg{width:14px;height:14px;opacity:.8}
.k-nav a:hover,.k-nav a[aria-current]{border-bottom-color:var(--saffron);background:rgba(255,255,255,.06)}
@media (max-width:1180px){.k-nav{display:none}.menu-btn{display:block}.k-contact:first-child{display:none}}
@media (max-width:760px){.k-contact{display:none}.brand b{font-size:19px}.brand small{display:none}.brand img{width:60px}}
@media (max-width:380px){.brand img{width:50px}.brand b{font-size:17px}.k-top__in{gap:12px}}
@media (max-width:420px){.k-donate{display:none}}
.drawer{border-top:1px solid var(--line);background:#fff}
.drawer .container{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;padding-block:10px}
.drawer a{padding:12px;font-weight:500;border-radius:8px}
.drawer a:hover{background:var(--blue-50)}

/* side quick tabs + help pill */
.side-tabs--left{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:55;display:grid;gap:8px}
.side-tab{display:flex;align-items:center;gap:8px;writing-mode:vertical-rl;transform:rotate(180deg);padding:16px 10px;font-size:13px;font-weight:600;color:#fff;border-radius:0 10px 10px 0;box-shadow:var(--shadow)}
.side-tabs--left .side-tab{border-radius:10px 0 0 10px}
.side-tab svg{width:16px;height:16px;transform:rotate(90deg)}
.side-tab--blue{background:var(--blue)}
.side-tab--navy{background:var(--navy)}
.side-tab--saffron{background:var(--saffron)}
.side-tabs--right{position:fixed;right:0;top:50%;transform:translateY(-50%) rotate(180deg);z-index:55;border-radius:10px 0 0 10px}
.help-pill{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:56;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#25D366;color:#fff;font-weight:600;font-size:14px;box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
.help-pill svg{width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(255,255,255,.2)}
/* The tabs are fixed to the viewport edges while content is capped at 1240px
   with 24px gutters, so below ~1292px the container fills the window and the
   tabs sit on top of the copy (measured: they clipped the banner headline at
   1024px). Hide them until there is real margin to sit in. */
@media (max-width:1300px){.side-tabs--left,.side-tabs--right{display:none}}
@media (max-width:1000px){.help-pill{display:none}}

/* banner slider */
.k-banner{position:relative;overflow:hidden;background:var(--navy);height:clamp(420px,52vw,600px)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero__slide.is-active{opacity:1;pointer-events:auto}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-banner__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,19,80,.93) 0%,rgba(11,19,80,.88) 32%,rgba(11,19,80,.66) 54%,rgba(11,19,80,.22) 76%,rgba(11,19,80,0) 92%)}
/* Between the phone layout and a roomy desktop the 620px caption column runs
   past the horizontal scrim and onto the bright building wall, where white
   type measured 1.21:1. Flatten the scrim across this band. */
@media (min-width:761px) and (max-width:1180px){.k-banner__shade{background:linear-gradient(90deg,rgba(11,19,80,.94) 0%,rgba(11,19,80,.9) 50%,rgba(11,19,80,.78) 76%,rgba(11,19,80,.55) 100%)}}
.k-banner__cap{position:relative;height:100%;display:grid;align-content:center;gap:16px;color:#fff;max-width:1240px}
.k-banner__cap>*{max-width:620px}
.k-banner__tag{justify-self:start;display:inline-block;padding:6px 14px;border-radius:6px;background:var(--saffron);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.k-banner h1,.k-banner h2{font-size:clamp(30px,4.4vw,54px);font-weight:700;color:#fff;letter-spacing:-.01em}
.k-banner p{font-size:clamp(15.5px,1.6vw,18px);color:#DDE1FA}
.k-banner__btns{display:flex;gap:12px;flex-wrap:wrap}
.k-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--blue-deep);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.k-arrow svg{width:20px;height:20px}
.k-arrow--prev{left:22px}
.k-arrow--next{right:22px}
/* The prev arrow is pinned 22px from the viewport edge and is 46px wide, so
   it clears the caption only once the 1240px container has ~76px of outer
   margin, i.e. from 1344px up. Below that it sat on the first characters of
   the headline (measured 1.21:1 against white type). Dots and autoplay still
   drive the slider, so both arrows come out together rather than leaving an
   odd single arrow. */
@media (max-width:1343px){.k-arrow{display:none}}
.k-dots{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.k-dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0}
.k-dots button[aria-current="true"]{background:var(--saffron);border-color:var(--saffron)}
@media (max-width:760px){.k-banner{height:auto;min-height:520px}.hero__slide{position:absolute}.hero__slide.is-active{position:relative;min-height:520px}.k-banner__cap{padding-block:48px 130px;height:auto;min-height:520px;align-content:end}.k-banner__shade{background:linear-gradient(0deg,rgba(11,19,80,.95) 0%,rgba(11,19,80,.86) 42%,rgba(11,19,80,.62) 72%,rgba(11,19,80,.3) 100%)}.k-arrow{display:none}.k-dots{bottom:96px}.k-banner__btns{display:grid;grid-template-columns:1fr;width:100%}}

/* info cards (overlap banner) */
.k-info{position:relative;z-index:4;margin-top:-72px}
.k-info__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.k-info__card{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);border-bottom:4px solid var(--blue)}
.k-info__card:nth-child(1){border-bottom-color:var(--red)}
.k-info__card:nth-child(3){border-bottom-color:var(--saffron)}
.k-info__ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--blue-50);color:var(--blue)}
.k-info__ic svg{width:26px;height:26px}
.k-info__ic--red{background:var(--red-50);color:var(--red)}
.k-info__ic--saffron{background:var(--saffron-50);color:var(--saffron-deep)}
.k-info__card h3{font-size:17px;font-weight:600;color:var(--blue-deep)}
.k-info__card p{font-size:14px;margin:2px 0 12px}
@media (max-width:900px){.k-info__grid{grid-template-columns:1fr}.k-info{margin-top:-64px}.k-info__card{padding:18px}}

/* about */
.k-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.k-about__media{position:relative;padding:20px}
.k-about__ring{position:absolute;inset:0 40px 40px 0;border:2px dashed var(--saffron);border-radius:24px}
.k-about__media img{position:relative;border-radius:20px;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}
.k-about__badge{position:absolute;right:0;bottom:30px;display:grid;justify-items:center;width:150px;height:150px;border-radius:50%;background:var(--blue);color:#fff;text-align:center;align-content:center;box-shadow:0 0 0 8px #fff,var(--shadow)}
.k-about__badge b{font-size:40px;line-height:1;font-weight:700}
.k-about__badge span{font-size:12.5px;line-height:1.3;padding-inline:14px;margin-top:4px}
.k-about__text{display:grid;gap:16px}
.k-about__text h2{font-size:clamp(24px,2.8vw,34px);font-weight:700}
.k-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.k-stat{padding:18px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -16px rgba(11,19,80,.35);display:grid;gap:2px}
.k-stat__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--saffron-50);color:var(--saffron-deep);margin-bottom:6px}
.k-stat__ic svg{width:20px;height:20px}
.k-stat b{font-size:24px;font-weight:700;color:var(--blue-deep);line-height:1.2;font-variant-numeric:tabular-nums}
.k-stat small{font-size:12.5px;line-height:1.4}
@media (max-width:980px){.k-about{grid-template-columns:minmax(0,1fr);gap:40px}.k-about__media{max-width:480px;margin-inline:auto}}
@media (max-width:560px){.k-stats{grid-template-columns:1fr 1fr}.k-about__badge{width:112px;height:112px}.k-about__badge b{font-size:30px}.k-about__badge span{font-size:11px}}

/* leadership */
.k-leaders{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.k-leader{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:auto 1fr}
.k-leader__ph{aspect-ratio:16/12;max-width:100%;overflow:hidden;background:var(--blue-100)}
.k-leader__ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.k-leader__body{padding:28px 30px 30px;display:grid;gap:12px;align-content:start;position:relative}
.k-leader__role{justify-self:start;margin-top:-50px;padding:8px 16px;border-radius:8px;background:var(--saffron);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.k-leader h3{font-size:22px;font-weight:700;color:var(--blue-deep)}
.k-leader blockquote{margin:0;padding:14px 18px;border-radius:10px;background:var(--blue-50);border-left:4px solid var(--blue);font-style:italic;color:var(--ink);font-size:15.5px}
.k-leader p{font-size:14.5px}
.k-leader__stats{display:flex;gap:28px;padding-top:14px;border-top:1px solid var(--line)}
.k-leader__stats span{display:grid;font-size:12.5px}
.k-leader__stats b{font-size:24px;font-weight:700;color:var(--blue);line-height:1.2}
@media (max-width:900px){.k-leaders{grid-template-columns:1fr}.k-leader__body{padding:22px}}

/* accreditations */
.k-certs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.k-cert{text-align:center;padding:34px 22px 28px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);box-shadow:0 10px 26px -20px rgba(11,19,80,.4);display:grid;gap:8px;justify-items:center;transition:transform .2s,box-shadow .2s}
.k-cert:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.k-cert__medal{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#fff,var(--saffron-50));border:3px solid var(--saffron);color:var(--saffron-deep);margin-bottom:8px}
.k-cert__medal svg{width:34px;height:34px}
.k-cert h3{font-size:16.5px;font-weight:600;color:var(--blue-deep)}
.k-cert p{font-size:13.5px}
@media (max-width:980px){.k-certs{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.k-certs{gap:12px}.k-cert{padding:22px 12px 18px}.k-cert__medal{width:58px;height:58px}.k-cert__medal svg{width:26px;height:26px}.k-cert h3{font-size:14.5px}.k-cert p{font-size:12.5px}}

/* specialities */
.k-spec{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.k-spec__card{position:relative;padding:28px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid;gap:10px;align-content:start;overflow:hidden;transition:transform .2s,box-shadow .2s}
.k-spec__card::before{content:"";position:absolute;left:0;top:0;right:0;height:0;background:var(--blue);transition:height .3s;z-index:0}
.k-spec__card>*{position:relative;z-index:1}
.k-spec__card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.k-spec__card:hover::before{height:100%}
.k-spec__card:hover h3,.k-spec__card:hover p,.k-spec__card:hover .k-more{color:#fff}
.k-spec__card:hover .k-spec__ic{background:rgba(255,255,255,.16);color:#fff}
.k-spec__ic{width:60px;height:60px;border-radius:50%;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;transition:background .2s,color .2s}
.k-spec__ic svg{width:28px;height:28px}
.k-spec__card h3{font-size:17px;font-weight:600;transition:color .2s}
.k-spec__card p{font-size:13.5px;line-height:1.6;transition:color .2s}
.k-more{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--saffron-deep);text-transform:uppercase;letter-spacing:.04em;transition:color .2s}
.k-more svg{width:14px;height:14px}
.k-spec__card--all{background:var(--saffron-50);border-color:#F7DDBD}
@media (max-width:1000px){.k-spec{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.k-spec{gap:12px}.k-spec__card{padding:18px 14px}.k-spec__ic{width:46px;height:46px}.k-spec__ic svg{width:22px;height:22px}.k-spec__card h3{font-size:15px}.k-spec__card p{font-size:12.5px}}

/* plans + rates */
.k-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.k-plan{position:relative;padding:30px 24px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-align:center;display:grid;gap:8px;justify-items:center;box-shadow:0 10px 26px -20px rgba(11,19,80,.4)}
.k-plan__lbl{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.k-plan b{font-size:38px;font-weight:700;color:var(--blue-deep);line-height:1.1;font-variant-numeric:tabular-nums}
.k-plan p{font-size:13.5px;min-height:44px}
.k-plan--hl{background:linear-gradient(160deg,var(--blue),var(--blue-deep));border-color:transparent;color:#D8DCF9}
.k-plan--hl::before{content:"Most used";position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:999px;background:var(--saffron);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.05em;white-space:nowrap}
.k-plan--hl .k-plan__lbl{color:#FFC27A}
.k-plan--hl b{color:#fff}
.k-rates{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.k-rate{border-radius:var(--r);background:var(--tint);border:1px solid var(--line);padding:24px 26px}
.k-rate h3{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--blue-deep);padding-bottom:12px;border-bottom:2px solid var(--blue-100);margin-bottom:6px}
.k-rate h3 span{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--saffron-deep);white-space:nowrap}
.k-rate li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.k-rate li:last-child{border-bottom:0}
.k-rate li b{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.k-note{margin-top:22px;text-align:center;font-size:14.5px}
@media (max-width:1000px){.k-plans{grid-template-columns:1fr 1fr}.k-rates{grid-template-columns:1fr}}
@media (max-width:480px){.k-plans{gap:12px}.k-plan{padding:24px 12px 18px}.k-plan b{font-size:28px}.k-plan p{font-size:12.5px;min-height:0}.k-plan .btn{width:100%}.k-rate{padding:18px}}

/* schemes on blue */
.k-schemes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.k-scheme{padding:26px 22px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);display:grid;gap:8px;align-content:start}
.k-scheme__tag{justify-self:start;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.k-scheme__tag--free{background:var(--saffron)}
.k-scheme h3{font-size:17px;font-weight:600;color:#fff}
.k-scheme p{font-size:14px}
.k-why{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.k-why>div{padding:26px;border-radius:var(--r);background:#fff;color:var(--ink-2)}
.k-why h3{font-size:19px;font-weight:700;color:var(--blue-deep);margin-bottom:12px}
.k-why li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14.5px;padding:5px 0}
.k-why svg{width:20px;height:20px;color:var(--saffron-deep);margin-top:3px}
@media (max-width:1000px){.k-schemes{grid-template-columns:1fr 1fr}.k-why{grid-template-columns:1fr}}
@media (max-width:480px){.k-schemes{grid-template-columns:1fr}}

/* seva cards */
.k-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.k-card{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 12px 30px -22px rgba(11,19,80,.5);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr}
.k-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.k-card>div{padding:20px;display:grid;gap:6px;align-content:start;border-top:3px solid var(--saffron)}
.k-card h3{font-size:16.5px;font-weight:600;color:var(--blue-deep)}
.k-card p{font-size:13.5px}
@media (max-width:1000px){.k-cards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.k-cards{gap:12px}.k-card>div{padding:14px}.k-card h3{font-size:14.5px}.k-card p{font-size:12.5px}}
.k-inst{margin-top:56px;padding:40px;border-radius:20px;background:var(--tint);border:1px solid var(--line)}
.k-inst__head{text-align:center;display:grid;gap:6px;margin-bottom:28px}
.k-inst__head h3{font-size:clamp(22px,2.6vw,28px);font-weight:700}
.k-inst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.k-inst__item{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.k-inst__item img{width:110px;height:90px;object-fit:cover;border-radius:10px}
.k-inst__item b{display:block;font-size:14.5px;color:var(--blue-deep);line-height:1.35}
.k-inst__item small{font-size:12.5px}
.k-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.k-chips li{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink)}
.k-pinjrat{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 26px;border-radius:14px;background:linear-gradient(120deg,var(--saffron),#F6A84A);color:#fff}
.k-pinjrat span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.k-pinjrat b{display:block;font-size:20px;color:#fff}
.k-pinjrat small{display:block;font-size:14px;max-width:640px}
.k-pinjrat .btn{background:#fff;color:var(--saffron-deep)}
@media (max-width:1000px){.k-inst__grid{grid-template-columns:1fr}}
@media (max-width:560px){.k-inst{padding:20px 14px}.k-inst__item{grid-template-columns:88px 1fr}.k-inst__item img{width:88px;height:74px}.k-chips li{font-size:12px;padding:6px 11px}.k-pinjrat{padding:18px}.k-pinjrat .btn{width:100%}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.gallery button{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--blue-100)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery button:hover img{transform:scale(1.07)}
.gallery span{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(11,19,80,.85));color:#fff;font-size:13.5px;font-weight:500;text-align:left}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}.gallery span{font-size:12px;padding:20px 10px 8px}}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,10,40,.92);display:grid;place-items:center;padding:24px}
.lightbox figure{margin:0;display:grid;gap:10px;max-width:min(1100px,100%)}
.lightbox img{max-height:80vh;width:auto;margin-inline:auto;border-radius:10px}
.lightbox figcaption{color:#fff;text-align:center;font-weight:500}
.lightbox__close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:24px;cursor:pointer}

/* reviews */
.k-reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.k-review{padding:24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -20px rgba(11,19,80,.4);display:grid;gap:12px;align-content:start}
.k-review__top{display:flex;gap:12px;align-items:center}
.k-av{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600}
.k-review__top b{display:block;font-size:15px;color:var(--ink)}
.stars{color:var(--saffron);letter-spacing:2px;font-size:14px}
.k-review p{font-size:13.5px;font-style:italic;color:var(--ink-3)}
.k-vid{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--navy));display:grid;place-items:center;color:#fff}
.k-vid svg{width:48px;height:48px}
.k-vid em{position:absolute;left:10px;top:10px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--saffron);padding:3px 8px;border-radius:4px}
.k-review--video b{font-size:15px;color:var(--ink)}
.k-review--video small{font-size:13px;margin-top:-10px}
@media (max-width:1000px){.k-reviews{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.k-reviews{grid-template-columns:1fr}}

/* donate */
.k-donate-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.k-donate__text{display:grid;gap:16px}
.k-donate__text h2{font-size:clamp(24px,3vw,36px);font-weight:700}
.k-donate__btns{display:flex;gap:12px;flex-wrap:wrap}
.k-donate__meta{font-size:13px;color:var(--ink-3)}
.k-gives{display:grid;gap:14px}
.k-give{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:20px 24px;border-radius:var(--r);background:#fff;border-left:5px solid var(--saffron);box-shadow:0 10px 26px -20px rgba(11,19,80,.45)}
.k-give b{font-size:26px;font-weight:700;color:var(--blue-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.k-give p{font-size:14.5px}
@media (max-width:900px){.k-donate-wrap{grid-template-columns:minmax(0,1fr);gap:28px}.k-give{grid-template-columns:1fr;gap:2px;padding:16px 18px}.k-donate__btns{display:grid;grid-template-columns:1fr}}

/* faq */
.k-faq{max-width:900px;margin-inline:auto;display:grid;gap:12px}
.k-faq details{border-radius:12px;border:1px solid var(--line);background:#fff;overflow:hidden}
.k-faq details[open]{border-color:var(--blue-100);box-shadow:0 10px 26px -20px rgba(11,19,80,.45)}
.k-faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 58px 18px 22px;font-weight:600;font-size:15.5px;color:var(--ink)}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq details[open] summary{background:var(--blue);color:#fff}
.k-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:6px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;font-size:20px;line-height:1}
.k-faq details[open] summary::after{content:"\2212";background:var(--saffron);color:#fff}
.k-faq details p{padding:16px 22px 20px;font-size:15px}
@media (max-width:520px){.k-faq summary{font-size:14.5px;padding:15px 52px 15px 16px}.k-faq details p{padding:14px 16px 16px;font-size:14px}}

/* emergency cta */
.k-cta{background:linear-gradient(120deg,var(--red),#B5151A);color:#fff}
.k-cta__in{display:flex;justify-content:space-between;align-items:center;gap:18px 30px;flex-wrap:wrap;padding-block:34px}
.k-cta h2{font-size:clamp(20px,2.6vw,28px);font-weight:700;color:#fff}
.k-cta p{color:#FFD9DA;font-size:14.5px}
.k-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.k-cta .btn--white{font-size:17px;letter-spacing:.02em}
@media (max-width:640px){.k-cta__in{text-align:center;justify-content:center}.k-cta__btns{display:grid;grid-template-columns:1fr;width:100%}}

/* footer */
.k-footer{background:var(--navy);color:#B7BDE8;font-size:14px}
.k-footer__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:32px;padding-block:64px 40px}
.k-footer__brand{display:grid;gap:14px;align-content:start}
.k-footer__brand .lg{display:flex;align-items:center;gap:12px}
.k-footer__brand img{width:72px;background:#fff;border-radius:50%;padding:4px}
.k-footer__brand b{color:#fff;font-size:21px}
.k-footer__nums b{color:#fff}
.k-footer h4{font-size:14px;font-weight:600;color:#fff;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--saffron);display:inline-block}
.k-footer ul{display:grid;gap:8px}
.k-footer a:hover{color:#fff}
.k-footer__bot{background:rgba(0,0,0,.2)}
.k-footer__bot .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-block:18px;font-size:13px}
.k-footer__bot nav{display:flex;gap:18px}
.k-footer__bot b{color:#fff}
@media (max-width:1000px){.k-footer__cols{grid-template-columns:1fr 1fr}.k-footer__brand{grid-column:1/-1}}
@media (max-width:520px){.k-footer__cols{gap:26px 18px;padding-block:44px 28px}.k-footer__cols>div:last-child{grid-column:1/-1}.k-footer__bot .container{flex-direction:column}}

/* mobile action bar */
.action-bar{display:none}
@media (max-width:1000px){
  .action-bar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 24px -16px rgba(11,19,80,.4)}
  .action-bar a{display:grid;justify-items:center;gap:2px;padding:9px 4px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
  .action-bar svg{width:21px;height:21px}
  .action-bar .ab-em{color:var(--red)}
  .action-bar .ab-wa{color:#128C4A}
  .action-bar .ab-book{color:var(--blue)}
  .action-bar .ab-don{color:var(--saffron-deep)}
  body{padding-bottom:64px}
}
@media (max-width:640px){body{font-size:14.5px}.k-head{margin-bottom:32px}.k-head p{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* === INNER PAGES :: build-inner-pages.py === */
/* The header is sticky, so a jump to #surgical-sciences (or any home page
   anchor) landed with the heading hidden behind it. Measured header height is
   141px desktop, 87px tablet, 74px phone. */
html{scroll-padding-top:170px}
@media (max-width:900px){html{scroll-padding-top:112px}}
@media (max-width:560px){html{scroll-padding-top:96px}}

.page-hero{background:var(--navy);color:#fff;padding:52px 0 56px}
/* the global h1,h2,h3,h4 rule sets var(--ink), which is invisible on navy */
.page-hero h1{color:#fff;margin:.2rem 0 .7rem;font-size:clamp(28px,4.2vw,46px);line-height:1.12;letter-spacing:-.02em}
.page-hero p{margin:0;max-width:64ch;color:#C5CBF0;font-size:16.5px;line-height:1.65}
.crumbs{font-size:13px;color:#9AA2D8}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{padding:0 .45rem;opacity:.55}

.prose{max-width:72ch}
/* wide enough for a two column tick list, still short enough to read: a full
   1240px measure is roughly 150 characters a line */
.prose--wide{max-width:980px;margin-inline:auto;margin-top:28px}
.prose p{color:var(--ink-2);font-size:15.5px;line-height:1.78;margin:0 0 1rem}
.prose h3{font-size:18px;font-weight:600;color:var(--blue-deep);margin:2rem 0 .7rem}
.prose h3:first-child{margin-top:0}
.prose b{color:var(--ink);font-weight:600}

.ticks{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:10px}
.ticks--2{grid-template-columns:1fr 1fr}
.ticks li{position:relative;padding-left:30px;color:var(--ink-2);font-size:15px;line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--saffron-50);border:1.5px solid var(--saffron)}
.ticks li::after{content:"";position:absolute;left:5px;top:.72em;width:5px;height:8px;border:solid var(--saffron-deep);border-width:0 2px 2px 0;transform:rotate(45deg)}

.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start;margin-top:28px}
.contact-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--tint)}
.contact-map iframe{display:block;width:100%;height:420px;border:0}

/* The info cards are a home page component sized around short button labels
   ("Call Now"). Inner pages use longer ones, and a grid item will not shrink
   below its min-content, so at 320px the card pushed 2px past the viewport.
   Letting the item and its text column shrink, and the label wrap, fixes it
   for any label length rather than just the ones written today. */
.k-info__card{min-width:0}
.k-info__card>div{min-width:0}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:26px}
  .contact-map iframe{height:320px}
  .ticks--2{grid-template-columns:1fr}
  .page-hero{padding:38px 0 42px}
}
@media (max-width:420px){
  .k-info__card .btn{white-space:normal;text-align:left}
}
/* === end inner pages === */

/* === COVERAGE HIGHLIGHT :: coverage.py === */
.cov{background:var(--navy);padding-block:26px}
.cov__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cov__item{
  /* grid rather than flex so the label sits above its caption, with the
     icon spanning both rows */
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  column-gap:14px;min-width:0;
  padding:16px 18px;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.cov__ic{grid-row:1 / span 2}
.cov__item b,.cov__item span:last-child{grid-column:2}
.cov__item--hl{background:rgba(242,140,24,.18);border-color:var(--saffron)}
.cov__ic{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:var(--marigold,#FFC87A);
}
.cov__item--hl .cov__ic{background:var(--saffron);color:#fff}
.cov__ic svg{width:23px;height:23px}
.cov__item b{display:block;font-size:17px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.01em}
.cov__item span:last-child{display:block;font-size:12.5px;color:#C5CBF0;margin-top:2px}
.cov__item--hl span:last-child{color:#FFE6C4}
@media (max-width:1000px){.cov__list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .cov{padding-block:18px}
  .cov__list{grid-template-columns:1fr;gap:10px}
  .cov__item{padding:13px 14px;gap:12px}
  .cov__ic{width:40px;height:40px}
  .cov__ic svg{width:20px;height:20px}
  .cov__item b{font-size:15.5px}
}
/* === end coverage highlight === */

/* === COVERAGE BAND MOTION :: covanim.py === */
/* hover + focus, always on (a transform is cheap and does not disorient) */
.cov__item{transition:transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.cov__ic{transition:transform .25s ease}
/* the reveal rule below is .cov[data-anim].is-in .cov__item -> (0,4,0) and sets
   transform:none, so the hover has to be scoped to win on specificity. Both
   forms are listed so hover still works when JS never set data-anim. */
.cov__item:hover,.cov__item:focus-within,
.cov[data-anim].is-in .cov__item:hover,
.cov[data-anim].is-in .cov__item:focus-within{
  transform:translateY(-3px);
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.32);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.65);
}
.cov__item:hover .cov__ic,.cov__item:focus-within .cov__ic,
.cov[data-anim].is-in .cov__item:hover .cov__ic{transform:scale(1.09)}
.cov__item--hl:hover,.cov__item--hl:focus-within,
.cov[data-anim].is-in .cov__item--hl:hover{
  background:rgba(242,140,24,.27);border-color:var(--saffron);
}

@media (prefers-reduced-motion:no-preference){
  /* staggered reveal. Only JS sets data-anim, so no-JS keeps the tiles visible */
  .cov[data-anim] .cov__item{opacity:0;transform:translateY(16px)}
  .cov[data-anim].is-in .cov__item{
    opacity:1;transform:none;
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1);
  }
  .cov[data-anim].is-in .cov__item:nth-child(1){transition-delay:.00s}
  .cov[data-anim].is-in .cov__item:nth-child(2){transition-delay:.09s}
  .cov[data-anim].is-in .cov__item:nth-child(3){transition-delay:.18s}
  .cov[data-anim].is-in .cov__item:nth-child(4){transition-delay:.27s}

  /* the accredited tile keeps a slow halo so the eye lands on it */
  .cov[data-anim].is-in .cov__item--hl .cov__ic{
    animation:covHalo 3.4s ease-in-out 1.1s infinite;
  }
  @keyframes covHalo{
    0%,100%{box-shadow:0 0 0 0 rgba(242,140,24,.55)}
    50%    {box-shadow:0 0 0 11px rgba(242,140,24,0)}
  }
}
/* === end coverage band motion === */