/*
Theme Name: Sreshta 2026
Theme URI: https://sreshtamultispecialityhospitals.com/
Author: Sreshta Multi Speciality Hospitals
Description: Custom theme for Sreshta Multi Speciality Hospitals. Implements the 2026 redesign on the existing WordPress content and URL structure. Keeps Contact Form 7, TeleCRM, analytics and Elementor landing pages working unchanged.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: sreshta2026
Tags: custom-menu, featured-images, translation-ready
*/

/* =====================================================================
   SRESHTA MULTI SPECIALITY HOSPITALS — site stylesheet v3.0
   Palette sampled from the brand logo.
   Written for readers who are not comfortable in English:
   large type, short lines, big tap targets, icons beside every label.
   ===================================================================== */

:root{
  --navy:#062E5C; --navy-800:#0A3D75;
  --blue:#0257A8; --blue-bright:#0289DD;
  --cyan:#17B9D6; --turquoise:#0ACCCA;
  --mint:#28EBB3; --leaf:#6ADD96;
  --violet:#5D43DC; --purple:#9925E2;

  --paper:#F3F8FB; --mist:#E4F3F5; --mist-deep:#C9E6EC;
  --violet-mist:#EEEBFC; --white:#FFFFFF;
  --ink:#0B2239; --muted:#556A7B; --line:#DBE7EE;
  --red:#D92D20; --amber:#B7791F; --amber-mist:#FEF6E7;

  --grad:linear-gradient(120deg,#0257A8 0%,#0289DD 26%,#0ACCCA 58%,#28EBB3 82%,#6ADD96 100%);
  --grad-soft:linear-gradient(120deg,#0289DD 0%,#17B9D6 40%,#28EBB3 72%,#6ADD96 100%);
  --grad-violet:linear-gradient(120deg,#5D43DC 0%,#9925E2 100%);

  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --maxw:1220px; --measure:62ch;
  --section-y:clamp(52px,6vw,88px);
  --shadow:0 16px 38px -20px rgba(6,46,92,.45);
  --shadow-soft:0 10px 26px -18px rgba(6,46,92,.4);
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.18;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.02em}
h2{font-size:clamp(26px,3.3vw,38px)}
h3{font-size:21px}
h4{font-size:15px;font-weight:700;margin:0 0 .5em;letter-spacing:.02em}
p{margin:0 0 1em;max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
/*
 * The reading measure above is for prose. A list used as navigation or as a
 * layout row is not prose, and capping it has broken real layouts more than
 * once: the doctor rail, the FAQ column, and the legacy Elementor header,
 * whose menu collapsed to zero width because --measure does not resolve
 * inside the plugin's own subtree. Lists that are structure, not text, opt
 * out here rather than each one patching itself afterwards.
 */
nav ul,nav ol,
header ul,header ol,
footer ul,footer ol,
.menu,.sub-menu,
[class*="elementor"] ul,[class*="elementor"] ol,
[class*="hfe-"] ul,[class*="hfe-"] ol,
[class*="wpr-"] ul,[class*="wpr-"] ol{max-width:none}
img,svg{display:block;max-width:100%}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto}
.section{padding:var(--section-y) 0;position:relative}
.section--white{background:var(--white)}
.section--mist{background:linear-gradient(180deg,var(--mist) 0%,#F0FAFA 100%)}
.section--navy{background:var(--navy);color:#CFE3F2;position:relative;overflow:hidden}
.section--navy::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 340px at 82% 12%,rgba(23,185,214,.26),transparent 62%),
             radial-gradient(520px 320px at 8% 92%,rgba(93,67,220,.24),transparent 60%)}
.section--navy .wrap{position:relative}
.section--navy h2{color:#fff}

.grad-rule{width:64px;height:5px;border-radius:3px;background:var(--grad);margin-bottom:20px}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head h2{margin-bottom:.35em}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);line-height:1.62;max-width:56ch}
.section--navy .lede{color:#9FBEDA}

.ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:32px;height:32px;stroke-width:1.4}
.ico-sm{width:17px;height:17px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 26px;border-radius:var(--r-sm);
  font:600 17px/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),filter .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--grad{background:var(--grad);color:#fff;box-shadow:0 10px 24px -12px rgba(2,87,168,.95)}
.btn--grad:hover{filter:saturate(1.12) brightness(1.06)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-bright)}
.btn--green{background:#12894F;color:#fff}
.btn--green:hover{background:#15A05C}
.btn--ghost{background:transparent;color:var(--blue);border-color:var(--mist-deep)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--blue-bright)}
.btn--onnavy{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.38)}
.btn--onnavy:hover{background:#fff;color:var(--navy)}
.btn--sm{min-height:46px;padding:11px 20px;font-size:15.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-quiet{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:var(--blue);font-weight:600;font-size:16px;text-decoration:none}
.link-quiet u{text-decoration-thickness:1px;text-underline-offset:4px}
.link-quiet .ico{width:17px;height:17px;transition:transform .2s var(--ease)}
.link-quiet:hover .ico{transform:translateX(4px)}

/* ---------------- top bar ---------------- */
.topbar{background:var(--navy);color:#BFD8EC;font-size:14.5px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;
  justify-content:space-between;padding:9px 24px}
.topbar .live{display:inline-flex;align-items:center;gap:11px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(217,45,32,.85);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.55);opacity:1}70%,100%{transform:scale(1.45);opacity:0}}
.em-pill{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  padding:5px 15px;border-radius:100px;font-weight:700;text-decoration:none;white-space:nowrap}
.em-pill:hover{background:#EC3B2E}
.em-pill .ico{width:15px;height:15px}

/* ---------------- header + navigation ---------------- */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease)}
.site-header.stuck{box-shadow:0 10px 28px -20px rgba(6,46,92,.6)}
.site-header .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{margin-right:auto;display:block;line-height:0}
.brand img{height:46px;width:auto}

.nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:var(--navy);text-decoration:none;
  font-size:16px;font-weight:600;padding:12px 13px;border-radius:var(--r-sm);
  background:none;border:0;font-family:var(--sans);cursor:pointer}
.nav-link .ico{width:14px;height:14px;transition:transform .2s var(--ease)}
.nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:3px;
  border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease)}
.nav-item:hover .nav-link::after,.nav-link.current::after{transform:scaleX(1)}
.nav-link.current{color:var(--blue)}

.drop{position:absolute;top:100%;left:0;min-width:288px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;line-height:1.35}
.drop a .ico{width:20px;height:20px;color:var(--cyan);flex:none}
.drop a:hover{background:var(--mist);color:var(--blue)}
.drop a small{display:block;font-size:13px;color:var(--muted);font-weight:400}
.drop .sep{height:1px;background:var(--line);margin:8px 6px}

.hdr-phone{display:inline-flex;align-items:center;gap:8px;color:var(--navy);text-decoration:none;
  font-weight:700;font-size:15.5px;padding:11px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line)}
.hdr-phone:hover{border-color:var(--cyan);background:var(--mist)}
.hdr-phone .ico{color:var(--cyan);width:17px;height:17px}

.burger{display:none;width:52px;height:52px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);align-items:center;justify-content:center;cursor:pointer;color:var(--navy)}
.burger .ico{width:26px;height:26px}

.drawer{position:fixed;inset:0;z-index:300;display:none}
.drawer.open{display:block}
.drawer .veil{position:absolute;inset:0;background:rgba(6,34,57,.55)}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);background:#fff;
  overflow-y:auto;padding:18px 20px 40px;box-shadow:-20px 0 50px -30px rgba(0,0,0,.7)}
.drawer .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drawer .head img{height:40px}
.drawer .close{width:48px;height:48px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:15px 12px;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-size:17px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer nav a .ico{width:21px;height:21px;color:var(--cyan)}
.drawer nav a:hover{background:var(--mist)}
.drawer .grp{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;margin:22px 0 6px;padding-left:12px}
.drawer nav a.sub{font-weight:500;font-size:16px;padding-left:22px}
.drawer .cta{margin-top:24px;display:grid;gap:10px}

/* ---------------- page hero (inner pages) ---------------- */
.phero{background:linear-gradient(135deg,#062E5C 0%,#064B93 42%,#0A8FA6 76%,#12A88B 100%);
  color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 400px at 88% 4%,rgba(40,235,179,.26),transparent 60%),
             radial-gradient(520px 340px at 6% 98%,rgba(153,37,226,.24),transparent 62%)}
.phero .wrap{position:relative;padding-top:clamp(32px,4vw,52px);padding-bottom:clamp(40px,5vw,66px)}
.phero h1{color:#fff;margin-bottom:16px;max-width:19ch}
.phero .lede{color:#C4DDEB;max-width:52ch;margin-bottom:24px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14.5px;
  color:#9FBEDA;margin-bottom:22px}
.crumbs a{color:#CFE3F2;text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs span{opacity:.6}
.phero .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:#D5EBF3;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:8px 14px;border-radius:100px}
.badge .ico{width:16px;height:16px;color:var(--mint)}

/* ---------------- generic cards ---------------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 24px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  display:block;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
a.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .28s var(--ease)}
a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--mist-deep)}
a.card:hover::before{transform:scaleY(1)}
.card .ic{width:54px;height:54px;border-radius:15px;background:var(--mist);color:var(--blue);
  display:grid;place-items:center;margin-bottom:16px;
  transition:background .24s var(--ease),color .24s var(--ease)}
a.card:hover .ic{background:var(--grad);color:#fff}
.card b.t{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:6px}
.card em.d{font-style:normal;font-size:16px;color:var(--muted);line-height:1.5;display:block;margin-bottom:14px}
.card .go{font-size:15px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.card .go .ico{width:15px;height:15px;transition:transform .2s var(--ease)}
a.card:hover .go .ico{transform:translateX(4px)}
.card[hidden]{display:none}

/* ---------------- prose blocks ---------------- */
.prose{max-width:var(--measure)}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.2em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--cyan)}

.checklist{list-style:none;padding:0;margin:0 0 1.4em}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--line);margin:0;font-size:17px}
.checklist li .ico{width:22px;height:22px;color:var(--turquoise);margin-top:4px}
.checklist.warn li .ico{color:var(--red)}

.callout{background:var(--mist);border-left:5px solid var(--cyan);padding:20px 24px;
  border-radius:0 var(--r-md) var(--r-md) 0;margin:0 0 26px}
.callout p:last-child{margin-bottom:0}
.callout h4{color:var(--blue)}
.callout--violet{background:var(--violet-mist);border-color:var(--violet)}
.callout--violet h4{color:#4A32C4}
.callout--amber{background:var(--amber-mist);border-color:var(--amber)}
.callout--amber h4{color:var(--amber)}
.callout--red{background:#FDECEA;border-color:var(--red)}
.callout--red h4{color:var(--red)}

/* placeholder the hospital must fill in before going live */
.fillin{border:2px dashed var(--mist-deep);background:#fff;border-radius:var(--r-md);
  padding:18px 22px;margin:0 0 24px;color:var(--muted);font-size:16px}
.fillin b{color:var(--blue);display:block;font-size:14px;letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:6px}

/* cost table */
.cost{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;margin:0 0 26px}
.cost .topline{height:5px;background:var(--grad)}
.cost .inner{padding:24px}
.cost table{width:100%;border-collapse:collapse;font-size:16.5px}
.cost th,.cost td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.cost th{font-weight:600;color:var(--muted);width:48%}
.cost tr:last-child th,.cost tr:last-child td{border-bottom:0}
.cost td{font-weight:600}

/* steps / timeline */
.timeline{list-style:none;padding:0;margin:0 0 26px}
.timeline li{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.timeline li:first-child{border-top:1px solid var(--line)}
.timeline .when{font-weight:700;color:var(--blue);font-size:16px}
.timeline .what{font-size:17px;color:var(--ink);margin:0}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;top:25px;left:8%;right:8%;height:3px;
  border-radius:2px;background:var(--grad-soft);opacity:.4;z-index:0}
.step{position:relative;z-index:1}
.step .n{width:52px;height:52px;border-radius:50%;border:3px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  color:var(--blue);display:grid;place-items:center;font:600 20px/1 var(--serif);margin-bottom:18px}
.step h3{font-size:19px;margin-bottom:6px}
.step p{font-size:16px;color:var(--muted);margin:0}

/* FAQ */
/* Full width. The rows, the dividers and the open/close control span the
   whole container; only the answer text keeps a measure, because a line of
   prose 1,200px long is not readable however wide the box is. */
.faq{border-top:1px solid var(--line);max-width:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 0;position:relative;
  font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:14px;top:29px;width:11px;height:11px;
  border-right:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq .a{padding:0 0 22px;color:var(--muted);font-size:17px;max-width:92ch}
.faq .a p:last-child{margin-bottom:0}

/* doctor + photo placeholders */
.ph{aspect-ratio:4/5;position:relative;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,#E4F3F5 0%,#D6ECF6 55%,#DCF6EA 100%)}
.ph svg{width:100%;height:100%}
.ph .cap{position:absolute;bottom:9px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--blue);opacity:.75}
.doc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.doc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.doc .ph{border-radius:0}
.doc .body{padding:22px 24px}
.doc .name{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:5px}
.doc .role{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
  color:var(--blue);margin-bottom:11px}
.doc .qual{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.55;margin-bottom:6px}
.doc .reg{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:14px}

/* blog */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post .art{height:130px}
.post .art svg{width:100%;height:100%}
.post .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:20px;margin-bottom:8px}
.post p{font-size:16px;color:var(--muted);flex:1;margin-bottom:14px}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  background:var(--violet-mist);color:#4A32C4;font-size:13px;font-weight:700;
  padding:5px 12px;border-radius:100px;margin-bottom:12px}
.tag .ico{width:14px;height:14px}
.tag--mist{background:var(--mist);color:var(--blue)}
.meta{font-size:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}

/* downloads */
.dl{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.dl:hover{border-color:var(--cyan);box-shadow:var(--shadow-soft)}
.dl .ic{width:54px;height:54px;border-radius:15px;background:var(--grad-violet);color:#fff;
  display:grid;place-items:center;margin-bottom:16px;box-shadow:var(--shadow-soft)}
.dl h3{font-size:20px;margin-bottom:8px}
.dl p{font-size:16px;color:var(--muted);flex:1;margin-bottom:14px}
.dl .spec{font-size:13.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:16px}
.dl .spec span{display:inline-flex;align-items:center;gap:5px}
.dl .spec .ico{width:14px;height:14px;color:var(--cyan)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trust .cell{display:flex;gap:14px;align-items:flex-start}
.trust .ic{width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow-soft)}
.trust b{display:block;font-family:var(--serif);font-size:19px;font-weight:600}
.trust em{display:block;font-style:normal;font-size:15px;color:var(--muted);line-height:1.45}

/* facts list */
.facts{list-style:none;margin:0;padding:0;max-width:none}
.facts li{display:grid;grid-template-columns:44px 170px 1fr;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.facts li:first-child{border-top:1px solid var(--line)}
.facts .ic{width:38px;height:38px;border-radius:11px;background:var(--mist);color:var(--blue);
  display:grid;place-items:center}
.facts .k{color:var(--muted);font-size:15px;padding-top:6px}
.facts .v{font-weight:600;font-size:16.5px;padding-top:6px}
.facts .v a{color:var(--blue);text-decoration:none}
.facts .v a:hover{text-decoration:underline}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{padding-left:22px;position:relative}
.stat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
  border-radius:2px;background:var(--grad-soft);opacity:.85}
.stat b{font-family:var(--serif);font-size:clamp(32px,4.2vw,50px);font-weight:600;
  color:#fff;display:block;line-height:1;letter-spacing:-.02em}
.stat em{font-style:normal;font-size:15px;color:#9FBEDA;display:block;margin-top:8px}

/* forms */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0 0 30px;box-shadow:var(--shadow);overflow:hidden}
.form .topline{height:5px;background:var(--grad)}
.form .inner{padding:28px 30px 0}
.field{margin-bottom:18px}
.field label{display:block;font-size:15.5px;font-weight:600;margin-bottom:7px}
.field input,.field select{width:100%;min-height:54px;padding:13px 14px;
  font:400 17px/1.4 var(--sans);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-sm)}
.field input:focus,.field select:focus{outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(23,185,214,.16)}
.field .help{font-size:14px;color:var(--muted);margin-top:6px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;font-size:15.5px}
.consent input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--blue)}
.form-note{font-size:14.5px;color:var(--muted);margin:16px 0 0}

/* help band — repeated bottom CTA */
.help-band{background:var(--navy);color:#CFE3F2;position:relative;overflow:hidden}
.help-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 360px at 85% 10%,rgba(23,185,214,.24),transparent 62%)}
.help-band .wrap{position:relative;padding:46px 24px;display:flex;flex-wrap:wrap;
  gap:24px;align-items:center;justify-content:space-between}
.help-band h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px;color:#fff}
.help-band p{margin:0;color:#9FBEDA;max-width:46ch}

/* map */
.mapbox{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.mapbox .cap{padding:16px 20px;font-size:14.5px;color:var(--muted);border-top:1px solid var(--line)}

/* footer */
.site-footer{background:var(--navy);color:#9FBEDA;padding:58px 0 0;font-size:16px;
  position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 320px at 88% 0%,rgba(23,185,214,.18),transparent 62%)}
.site-footer .wrap{position:relative}
.site-footer a{color:#CFE3F2;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:42px}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px;font-size:15.5px}
.site-footer address{font-style:normal;font-size:15.5px;line-height:1.65;margin:16px 0}
.flogo{background:#fff;border-radius:var(--r-md);padding:12px 16px;display:inline-block;line-height:0}
.flogo img{height:42px;width:auto}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#CFE3F2}
.social a:hover{background:var(--grad);color:#fff;border-color:transparent}
.legal{border-top:1px solid rgba(255,255,255,.16);padding:22px 0 28px;font-size:14px;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}

/* mobile action bar */
.actionbar{display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:1140px){
  .nav{display:none}
  .burger{display:flex}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .trust,.stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:820px){
  body{font-size:17px;padding-bottom:66px}
  .hdr-phone{display:none}
  .brand img{height:38px}
  .topbar .wrap{justify-content:center;font-size:13.5px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:20px}
  .frow{grid-template-columns:1fr}
  .facts li{grid-template-columns:38px 1fr;gap:12px}
  .facts .k{grid-column:2;padding-top:0;font-size:14px}
  .facts .v{grid-column:2;padding-top:0}
  .fgrid{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .form .inner{padding:22px 22px 0}
  .actionbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:var(--navy);box-shadow:0 -4px 20px rgba(6,46,92,.4)}
  .actionbar a{flex:1;min-height:66px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;color:#fff;text-decoration:none;font-size:13px;
    font-weight:700;border-right:1px solid rgba(255,255,255,.16)}
  .actionbar a .ico{width:22px;height:22px}
  .actionbar a:last-child{border-right:0;background:#12894F}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.topbar,.actionbar,.drawer,.help-band{display:none}
  body{background:#fff}
}

/* =====================================================================
   MEDIA + MOTION  (v3.1)
   Images, video frames, and the animation layer. All motion is switched
   off wholesale by the prefers-reduced-motion rule at the end.
   ===================================================================== */

/* ---- images ---- */
.figimg,.coverimg,.ph-img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:center top;
  background:linear-gradient(110deg,var(--mist) 0%,#EFF8FB 50%,var(--mist) 100%);
  background-size:220% 100%;animation:shimmer 1.6s linear infinite}
.figimg[src],.coverimg[src],.ph-img[src]{animation:none}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

.ph .ph-img{position:absolute;inset:0}
.post .art{overflow:hidden}
.coverimg{aspect-ratio:16/9}

.shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--mist);
  border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.shot .figimg{aspect-ratio:3/2}
.shot figcaption{padding:12px 16px;font-size:14px;color:var(--muted);background:#fff;
  border-top:1px solid var(--line)}

.shotgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shotgrid .shot--wide{grid-column:1/-1}
.shotgrid .shot .figimg{aspect-ratio:4/3}
.shotgrid .shot--wide .figimg{aspect-ratio:21/9}

.media-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.media-split--rev .shot{order:-1}
@media (max-width:900px){.media-split{grid-template-columns:1fr;gap:30px}
  .media-split--rev .shot{order:0}.shotgrid{grid-template-columns:1fr}}

/* ---- video ---- */
.videoframe{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--navy);box-shadow:var(--shadow)}
.videoframe video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:var(--navy)}
.videoframe figcaption{padding:13px 18px;font-size:14px;color:var(--muted);background:#fff;
  border-top:1px solid var(--line)}
.vidcard{width:100%;aspect-ratio:16/9;border-radius:var(--r-md);margin-bottom:16px;
  display:block;background:var(--navy)}
.vidph{border:1px dashed var(--mist-deep)}

/* ---- ken burns: a slow push-in on hover, so photos feel alive ---- */
.kenburns{transition:transform 1.1s var(--ease),filter .5s var(--ease)}
.shot:hover .kenburns,.ph:hover .kenburns,.post:hover .kenburns,
a.card:hover .kenburns,.doc:hover .kenburns{transform:scale(1.06)}

/* ---- hero: the brand gradient drifts slowly ---- */
.hero,.phero{background-size:180% 180%;animation:drift 22s ease-in-out infinite}
@keyframes drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- buttons: a light sweeps across on hover ---- */
.btn--grad,.btn--blue,.btn--green{position:relative;overflow:hidden;isolation:isolate}
.btn--grad::after,.btn--blue::after,.btn--green::after{content:"";position:absolute;top:0;bottom:0;
  width:44%;left:-60%;z-index:-1;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}
.btn--grad:hover::after,.btn--blue:hover::after,.btn--green:hover::after{animation:sweep .75s var(--ease)}
@keyframes sweep{to{left:120%}}

/* ---- section rule draws itself in ---- */
.reveal .grad-rule,.grad-rule.reveal{transform-origin:left;animation:rule .7s var(--ease) both}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- dropdown items arrive one after another ---- */
.nav-item:hover .drop a,.nav-item:focus-within .drop a{animation:dropin .32s var(--ease) both}
.drop a:nth-child(1){animation-delay:.02s}.drop a:nth-child(2){animation-delay:.05s}
.drop a:nth-child(3){animation-delay:.08s}.drop a:nth-child(4){animation-delay:.11s}
.drop a:nth-child(5){animation-delay:.14s}.drop a:nth-child(6){animation-delay:.17s}
.drop a:nth-child(7){animation-delay:.2s}.drop a:nth-child(8){animation-delay:.23s}
.drop a:nth-child(9){animation-delay:.26s}.drop a:nth-child(10){animation-delay:.29s}
@keyframes dropin{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---- drawer slides in from the right ---- */
.drawer.open .panel{animation:slidein .32s var(--ease) both}
.drawer.open .veil{animation:fadein .32s var(--ease) both}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---- floating cards on the hero ---- */
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty-2{animation:floaty 6s ease-in-out infinite;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---- play icon breathes ---- */
.playbig{animation:breathe 2.6s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.11);opacity:.85}}

/* ---- reading progress bar on article pages ---- */
.progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:400;background:var(--grad);
  transition:width .1s linear}

/* ---- icon chips lift with their card ---- */
a.card .ic,.dl .ic{transition:transform .28s var(--ease),background .24s var(--ease),color .24s var(--ease)}
a.card:hover .ic,.dl:hover .ic{transform:translateY(-3px) rotate(-4deg)}

/* ---- checklist ticks draw in when revealed ---- */
.reveal.in .checklist li{animation:tick .45s var(--ease) both}
.checklist li:nth-child(1){animation-delay:.04s}.checklist li:nth-child(2){animation-delay:.09s}
.checklist li:nth-child(3){animation-delay:.14s}.checklist li:nth-child(4){animation-delay:.19s}
.checklist li:nth-child(5){animation-delay:.24s}.checklist li:nth-child(6){animation-delay:.29s}
@keyframes tick{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hero,.phero{animation:none}
  .figimg,.coverimg,.ph-img{animation:none}
  .kenburns{transition:none}
  .reveal .grad-rule,.drop a,.playbig,.floaty,.floaty-2,.checklist li{animation:none!important}
  .progress{display:none}
}


/* =====================================================================
   MEETING CHANGES (v3.2) — blue-to-green, pictorial departments,
   equipment on the home page, testimonials, insurance.
   ===================================================================== */

/* the claim line above the main heading */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#EAFBF3;border-radius:100px;padding:9px 18px;font:700 14px/1.2 var(--sans);
  letter-spacing:.02em}
.eyebrow .ico{width:17px;height:17px;color:var(--mint)}
.eyebrow b{background:var(--mint);color:#06322A;border-radius:100px;padding:3px 10px;font-size:12.5px}

/* department card with its own picture */
.deptcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.deptcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--mist-deep)}
.deptcard .pic{aspect-ratio:16/9;overflow:hidden;background:var(--mist);position:relative}
.deptcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.deptcard .pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad)}
.deptcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.deptcard .ic{width:46px;height:46px;border-radius:13px;background:var(--grad);color:#fff;
  display:grid;place-items:center;margin:-46px 0 14px;box-shadow:var(--shadow-soft);position:relative}
.deptcard b.t{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:6px}
.deptcard em.d{font-style:normal;font-size:16px;color:var(--muted);line-height:1.5;flex:1;margin-bottom:14px}
.deptcard .go{font-size:15px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.deptcard .go .ico{width:15px;height:15px;transition:transform .2s var(--ease)}
.deptcard:hover .go .ico{transform:translateX(4px)}
.deptcard[hidden]{display:none}

/* equipment card with a picture */
.kitcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.kitcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
/* Equipment photographs are product shots — portrait or square, between
   0.80 and 1.00 — and the frame was 16:9. Cropping to fill cut the machines
   in half. They are shown whole on a tinted ground instead, which is how a
   product shot is meant to sit. */
.kitcard .pic{
  aspect-ratio:4/3;overflow:hidden;
  display:grid;place-items:center;padding:16px;
  background:linear-gradient(140deg,#FFFFFF 0%,var(--mist) 60%,var(--mist-deep) 100%)}
.kitcard .pic img{
  /* max-* rather than height:100%: inside a centred grid the item is sized
     by its content, so a percentage height has nothing to resolve against
     and the image collapses to nothing. */
  display:block;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain}

/* The hover lift belongs to the card, not a zoom inside the frame. */
.kitcard:hover .pic img{transform:none}
.kitcard .body{padding:22px 24px 24px}
.kitcard h3{font-size:20px;margin-bottom:4px}
.kitcard .what{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:10px}
.kitcard p{font-size:16px;color:var(--muted);margin:0}

/* insurance */
.insurers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 24px}
.insurers span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:15px;font-weight:600;color:var(--navy);text-align:center;padding:10px 14px}
.insurers span .ico{width:17px;height:17px;color:var(--turquoise);flex:none}
@media (max-width:900px){.insurers{grid-template-columns:repeat(2,1fr)}}

/* doctor / speciality / surgery table */
.doctable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;font-size:16px}
.doctable th,.doctable td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);
  vertical-align:top}
.doctable thead th{background:var(--navy);color:#fff;font:700 14px/1.3 var(--sans);
  letter-spacing:.03em;border-bottom:0}
.doctable tbody tr:last-child td{border-bottom:0}
.doctable .who{display:flex;gap:13px;align-items:center;min-width:210px}
.doctable .who img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.doctable .who b{display:block;font-family:var(--serif);font-size:18px;font-weight:600}
.doctable .who span{display:block;font-size:13px;color:var(--muted);font-weight:300}
.doctable .qual{font-size:14px;color:var(--muted);font-weight:300}
@media (max-width:900px){
  .doctable,.doctable tbody,.doctable tr,.doctable td{display:block;width:100%}
  .doctable thead{display:none}
  .doctable tr{border-bottom:1px solid var(--line);padding:6px 0}
  .doctable td{border-bottom:0;padding:8px 18px}
  .doctable td[data-l]::before{content:attr(data-l);display:block;font-size:12.5px;
    font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:4px}
}

/* consultant slot not yet filled */
.slot{border:2px dashed var(--mist-deep);border-radius:var(--r-md);background:#fff;padding:26px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:240px}
.slot .ic{width:52px;height:52px;border-radius:14px;background:var(--mist);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 14px}
.slot b{font-family:var(--serif);font-size:19px;font-weight:600;display:block;margin-bottom:6px}
.slot p{font-size:15px;color:var(--muted);margin:0 auto;max-width:34ch}

/* department page banner picture */
.deptbanner{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  margin:0 0 30px;background:var(--mist)}
.deptbanner img{width:100%;aspect-ratio:16/6;object-fit:cover;display:block}

/* =====================================================================
   LIVE-SITE ALIGNMENT (v4) — about band, trust pills, five counters,
   taller specialities menu.
   ===================================================================== */

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pills span{display:inline-flex;align-items:center;gap:8px;background:var(--mist);
  border:1px solid var(--mist-deep);color:var(--navy);border-radius:100px;
  padding:9px 16px;font-size:15px;font-weight:600}
.pills span .ico{width:16px;height:16px;color:var(--turquoise);flex:none}
.section--navy .pills span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#EAF6FB}

.stats--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1140px){.stats--5{grid-template-columns:repeat(3,1fr);gap:28px}}
@media (max-width:820px){.stats--5{grid-template-columns:repeat(2,1fr)}}

/* eleven specialities need a two-column menu so it fits on screen */
.drop--tall{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop--tall .sep{grid-column:1/-1}
.drop--tall a:last-child{grid-column:1/-1}

/* four "why choose us" cards read better with a little more air */
.grid.g4 .dl{padding:26px 24px}


/* real patient testimonials: photograph beside live text */
.quotes--3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote--photo{display:flex;gap:18px;align-items:flex-start;padding:24px}
.quote--photo .avimg{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid var(--white);box-shadow:var(--shadow-soft)}
.quote--photo .qbody{flex:1}
.quote--photo .qm{margin-bottom:8px}
.quote--photo p{font-size:16px;margin-bottom:14px}
.quote--photo .who{display:block;font-size:14px;color:var(--muted)}
.quote--photo .who b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink)}
@media (max-width:1080px){.quotes--3{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.quotes--3{grid-template-columns:1fr}
  .quote--photo{flex-direction:column;align-items:center;text-align:center}
  .quote--photo .avimg{width:96px;height:96px}}

/* =====================================================================
   HOME PAGE HERO + CARE FINDER
   These lived in an inline <style> on the old homepage and were lost when
   the page was rebuilt. They belong in the shared sheet.
   ===================================================================== */

.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#062E5C 0%,#064B93 38%,#0A8FA6 72%,#12A88B 100%);
  background-size:180% 180%;animation:drift 22s ease-in-out infinite}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 86% 6%,rgba(40,235,179,.28),transparent 60%),
             radial-gradient(560px 380px at 10% 96%,rgba(153,37,226,.26),transparent 62%),
             radial-gradient(500px 300px at 52% 40%,rgba(23,185,214,.18),transparent 65%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:52px;
  align-items:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(56px,6vw,88px)}
.hero h1{color:#fff;max-width:15ch;margin-bottom:18px}
.hero .lede{color:#BBD8E8;margin-bottom:26px;max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero-art{position:relative}
.hero-art>svg{width:100%;height:auto;filter:drop-shadow(0 26px 48px rgba(0,0,0,.4))}

.finder{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  border:1px solid var(--line);margin-top:-46px;position:relative;z-index:5;overflow:hidden}
.finder .inner{padding:22px 24px 24px}
.finder .topline{height:5px;background:var(--grad)}
.finder-input{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:0 16px}
.finder-input:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(23,185,214,.16)}
.finder-input .ico{color:var(--cyan)}
.finder-input input{flex:1;width:100%;border:0;outline:0;background:transparent;
  font:400 18px/1.4 var(--sans);color:var(--ink);padding:16px 0;min-height:56px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{background:var(--mist);color:var(--blue);border:1px solid var(--mist-deep);
  border-radius:100px;padding:8px 16px;font-size:15px;font-weight:600;text-decoration:none}
.chip:hover{background:var(--grad);color:#fff;border-color:transparent}
.finder-empty{font-size:15px;color:var(--muted);margin:14px 0 0;display:none}

@media (max-width:1080px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero h1{max-width:18ch}}
@media (max-width:820px){.finder{margin-top:-28px}.finder .inner{padding:18px}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}

/* keep nav labels on one line */
.nav-link{white-space:nowrap}


/* real photograph in the hero, in place of the illustration */
.hero-shot{margin:0;border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18)}
.hero-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.hero-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,46,92,0) 58%,rgba(6,46,92,.28) 100%)}
.hero-shot:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.hero-shot img{transition:none}}

/* =====================================================================
   HOME HERO — the plasma-laser claim line
   Larger, and given a slow sheen so the eye lands on it before the
   headline. Motion is gentle on purpose: it sits above an H1, and a
   fast animation there fights the heading for attention.
   ===================================================================== */

/* The priority claim. It was a translucent mint tint on a navy hero, which
   is close to the hero's own colours and read as decoration. Solid gold on
   navy is the strongest contrast available in this palette and is the
   convention for a "first / award" distinction, so the one thing the
   hospital most wants seen is now the first thing the eye lands on. */
.hero .eyebrow{
  position:relative;overflow:hidden;isolation:isolate;
  font-size:clamp(16px,1.45vw,21px);line-height:1.3;font-weight:700;
  padding:14px 28px;margin-bottom:26px;letter-spacing:.01em;
  color:#3A2400;
  background:linear-gradient(118deg,#FFE9A8 0%,#F7C948 42%,#E8A317 100%);
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 10px 26px -10px rgba(232,163,23,.75),0 0 0 0 rgba(247,201,72,.5);
  animation:claimPulse 3.4s ease-in-out infinite}
.hero .eyebrow .ico{width:clamp(18px,1.6vw,23px);height:clamp(18px,1.6vw,23px);
  color:#7A4E00;stroke-width:2;
  animation:claimSpark 3.4s ease-in-out infinite}
.hero .eyebrow::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;z-index:-1;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:claimSheen 4.6s ease-in-out infinite}

@keyframes claimPulse{
  0%,100%{box-shadow:0 10px 26px -10px rgba(232,163,23,.7),0 0 0 0 rgba(247,201,72,.45)}
  50%{box-shadow:0 10px 26px -10px rgba(232,163,23,.8),0 0 26px 3px rgba(247,201,72,.45)}}
@keyframes claimSpark{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.18);opacity:1}}
@keyframes claimSheen{
  0%{left:-40%}
  55%,100%{left:130%}}

@media (max-width:820px){.hero .eyebrow{padding:11px 18px}}
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero .eyebrow .ico,.hero .eyebrow::after{animation:none!important}
  .hero .eyebrow{box-shadow:0 10px 26px -10px rgba(232,163,23,.75)}}

/* =====================================================================
   THEME ADDITIONS (not part of the original static design)
   Everything above this line is the approved design stylesheet, verbatim.
   Everything below was added when the design became a WordPress theme.
   ===================================================================== */

/* ---------------------------------------------------------------------
   The consultants rail.
   The design showed six doctors on the home page and sent you elsewhere
   for the rest. The hospital asked for the whole team to be reachable
   from the home page, so the remaining six live in a horizontal rail:
   a swipe on a phone instead of a page of vertical scrolling.
   Scroll-snap makes each card settle in place rather than drifting.
   --------------------------------------------------------------------- */
.docrail-head{
  font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);
  font-weight:600;color:var(--navy);margin:44px 0 2px}
.docrail-hint{margin:0 0 16px;font-size:15px;color:var(--muted)}

.docrail{
  /* ul,ol carry a prose reading measure (62ch). This is a layout rail, not
     prose, and without this it was squeezed to about 555px of a 1172px
     column — the same reason .facts sets max-width:none. */
  max-width:none;
  display:flex;gap:18px;margin:0;padding:4px 4px 18px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--mist-deep) transparent}
.docrail::-webkit-scrollbar{height:9px}
.docrail::-webkit-scrollbar-track{background:var(--mist);border-radius:99px}
.docrail::-webkit-scrollbar-thumb{background:var(--mist-deep);border-radius:99px}
.docrail::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

.docrail li{flex:0 0 232px;scroll-snap-align:start}
.docrail a{
  display:block;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.docrail a:hover,.docrail a:focus-visible{
  transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow)}
.docrail a:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
.docrail img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center top;background:var(--mist)}
.docrail b{display:block;padding:13px 15px 0;font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--navy)}
.docrail em{display:block;padding:5px 15px 16px;font-style:normal;font-size:14px;line-height:1.45;color:var(--muted)}

@media (max-width:600px){
  .docrail li{flex:0 0 76%}
}

/* ---------------------------------------------------------------------
   Contact Form 7, styled onto the design's own form furniture.
   CF7 emits its own markup and its own validation messages; the theme
   dresses them rather than replacing them, so the plugin's behaviour
   and the TeleCRM hook that rides on it stay exactly as they are.
   --------------------------------------------------------------------- */
.form .wpcf7{margin:0}
.form .wpcf7-form p{margin:0 0 18px}
.form .wpcf7-form label{display:block;font-weight:600;color:var(--navy);margin-bottom:7px;font-size:16.5px}
.form .wpcf7-form-control-wrap{display:block}
.form input[type=text],.form input[type=tel],.form input[type=email],
.form input[type=date],.form select,.form textarea,
.form .wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=radio]){
  width:100%;font:400 17px/1.5 var(--sans);color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  min-height:54px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.form select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556A7B' stroke-width='2'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:20px;padding-right:48px}
.form .wpcf7-form-control:focus{outline:0;border-color:var(--blue-bright);box-shadow:0 0 0 4px rgba(2,137,221,.16)}
.form .wpcf7-submit{
  width:100%;min-height:56px;border:0;cursor:pointer;color:#fff;font:600 17.5px var(--sans);
  background:var(--grad);border-radius:999px;padding:16px 26px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.form .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.form .wpcf7-not-valid-tip{color:var(--red);font-size:15px;font-weight:600;margin-top:6px}
.form .wpcf7-not-valid{border-color:var(--red)}
.form .wpcf7-response-output{
  margin:18px 0 0;padding:14px 18px;border-radius:var(--r-sm);font-size:16px;
  border:1.5px solid var(--line);background:var(--mist)}
.form .wpcf7-mail-sent-ok{border-color:var(--leaf);background:#EDFBF3;color:#14532D}
.form .wpcf7-validation-errors,.form .wpcf7-acceptance-missing{
  border-color:var(--amber);background:var(--amber-mist);color:var(--amber)}
.form .wpcf7-spinner{margin:12px auto 0}

/* ---------------------------------------------------------------------
   WordPress core classes the static design never had to deal with:
   editor alignment, captions, the admin bar, and comment-free pages.
   --------------------------------------------------------------------- */
.prose img{max-width:100%;height:auto;border-radius:var(--r-md)}
.prose .alignleft{float:left;margin:6px 26px 18px 0}
.prose .alignright{float:right;margin:6px 0 18px 26px}
.prose .aligncenter{display:block;margin-inline:auto}
.prose .wp-caption{max-width:100%}
.prose .wp-caption-text,.prose figcaption{font-size:15px;color:var(--muted);margin-top:8px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;margin:0;clip:auto;
  padding:14px 22px;background:#fff;color:var(--blue);font-weight:600;z-index:100000}
body.admin-bar .site-header.stuck{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header.stuck{top:46px}}

/* Pagination on the blog index. */
.pager{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;align-items:center}
.pager .page-numbers{
  display:grid;place-items:center;min-width:48px;min-height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  color:var(--navy);text-decoration:none;font-weight:600}
.pager .page-numbers:hover{border-color:var(--cyan)}
.pager .page-numbers.current{background:var(--grad);color:#fff;border-color:transparent}

/* ---------------------------------------------------------------------
   YouTube cards (click-to-load facade).
   The button is sized by aspect-ratio rather than a padding hack so the
   thumbnail never jumps as it decodes, and the play badge turns YouTube
   red on hover the way people expect.
   --------------------------------------------------------------------- */
.ytcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.ytcard:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow)}

.ytlite,.ytframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--navy)}
.ytlite{position:relative;padding:0;cursor:pointer;overflow:hidden}
.ytlite img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),filter .35s var(--ease)}
.ytlite:hover img{transform:scale(1.04);filter:brightness(.88)}
.ytlite:focus-visible{outline:3px solid var(--blue-bright);outline-offset:-3px}

.ytplay{position:absolute;inset:0;display:grid;place-items:center}
.ytplay svg{width:68px;height:48px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.ytplay .ytplay-bg{fill:#1E2A38;fill-opacity:.82;transition:fill .25s var(--ease),fill-opacity .25s var(--ease)}
.ytlite:hover .ytplay .ytplay-bg,
.ytlite:focus-visible .ytplay .ytplay-bg{fill:#FF0000;fill-opacity:1}

.ytbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.ytbody h3{margin:0;font-family:var(--serif);font-size:18.5px;line-height:1.35;color:var(--navy)}
.ytbody .spec{display:flex;flex-wrap:wrap;gap:14px;font-size:14.5px;color:var(--muted);margin-top:auto}
.ytbody .spec span{display:inline-flex;align-items:center;gap:6px}
.ytbody .link-quiet{margin-top:4px}

/* Featured video: wider type, used where one video leads a section. */
.ytcard--big .ytbody h3{font-size:22px}

/* ---------------------------------------------------------------------
   Google reviews.
   A summary band — score, stars, count — above the plugin's own widget.
   The band is a flex row that wraps, so on a phone the score sits above
   the button rather than being squeezed beside it.
   --------------------------------------------------------------------- */
.greview-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 28px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 26px;margin-bottom:26px;
  box-shadow:var(--shadow-soft)}
.greview-score{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.greview-score b{
  font-family:var(--serif);font-size:clamp(34px,4vw,44px);line-height:1;
  color:var(--navy);font-weight:700}
.greview-score em{font-style:normal;font-size:16px;color:var(--muted);font-weight:500}
.greview-cta{flex-shrink:0}

.gstars{display:inline-flex;gap:3px;font-size:25px;line-height:1}
.gstar{color:var(--mist-deep)}
.gstar.is-full{color:#F5A623}
/* A half star is painted by clipping a filled star over the empty one. */
.gstar.is-half{position:relative;color:var(--mist-deep)}
.gstar.is-half::before{
  content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:#F5A623}

/* The plugin paints its own widget; keep it from overflowing the column
   and let its slider breathe. */
.greview-widget{max-width:100%;overflow:hidden}
.greview-widget .ti-widget{margin:0!important}

@media (max-width:600px){
  .greview-head{padding:18px 18px;gap:14px}
  .greview-cta,.greview-cta .btn{width:100%}
  .gstars{font-size:22px}
}

/* =====================================================================
   The booking form's own grid.

   Contact Form 7 form 1832 was written for the previous theme, which
   loaded Bootstrap: its markup is .row / .form-group.col-md-6 / .col-12
   with a .th-btn submit button. This theme does not load Bootstrap, so
   without the rules below every field stacked full width and the submit
   button fell back to the browser's default grey button.

   The form body is stored in the database, not in this repo, and it is
   wired to Contact Form 7's validation and to the TeleCRM hook. Supplying
   the few layout classes it expects is therefore the safe fix — editing
   the form to suit the theme would risk both.
   ===================================================================== */
.form .row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 18px;margin:0}
.form .row > *{min-width:0}
.form .form-group,.form .form-btn{margin-bottom:18px}
.form .col-md-6{grid-column:span 1}
.form .col-12{grid-column:1 / -1}

/* Contact Form 7 wraps every control in its own <p>. Two of the design's
   base rules then apply to those wrappers by accident:
     - p{max-width:var(--measure)} is a reading measure for prose, and was
       capping the note field and the submit row at about 555px inside a
       758px form;
     - p{margin-bottom:1em} added a second, uneven gap under each field.
   Neither is wanted around a form control. */
.form .wpcf7-form p{max-width:none;margin:0}

/* The row that holds the submit button, so the button and CF7's spinner sit
   on one line. It is the <p> inside .form-btn that has to carry this, since
   that <p> is what CF7 puts the button in. */
.form .form-btn > p{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%}

/* rows="10" makes this much taller than the rest of the form. */
.form textarea,
.form .wpcf7-form-control.wpcf7-textarea{height:140px;min-height:140px;resize:vertical}

/* The submit button. CF7 only adds .wpcf7-submit to inputs it generates
   itself; this form uses a hand-written <button class="th-btn btn-fw">,
   which is why the earlier .wpcf7-submit rule never matched it. */
.form .th-btn,
.form button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 34px;border:0;cursor:pointer;
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:.01em;
  color:#fff;border-radius:var(--r-sm);
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-bright) 55%,var(--cyan) 100%);
  box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)}
.form .th-btn:hover,.form button[type=submit]:hover{
  transform:translateY(-2px);box-shadow:var(--shadow);filter:saturate(1.08)}
.form .th-btn:focus-visible,.form button[type=submit]:focus-visible{
  outline:3px solid var(--blue-bright);outline-offset:3px}
.form .th-btn:disabled,.form button[type=submit]:disabled{
  opacity:.6;cursor:progress;transform:none}
.form .btn-fw{width:100%}

.form .form-btn .wpcf7-spinner{margin:0}

/* A leftover from the previous theme: an empty paragraph the old JS wrote
   status text into. Nothing fills it now, and it is not :empty (it holds a
   newline), so it has to be hidden outright rather than with :empty. */
.form .form-messages{display:none}

@media (max-width:640px){
  .form .row{grid-template-columns:1fr}
  .form .col-md-6{grid-column:1 / -1}
}

/* =====================================================================
   Google review cards.

   Read from the Trustindex plugin's own table, so the words, the names and
   the dates are the hospital's real reviews. Laid out as a masonry-ish
   column flow because review lengths vary wildly — a strict grid leaves
   tall gaps under the short ones.
   ===================================================================== */
.rvgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;margin-top:26px;align-items:stretch}

/* Each card is a column so that however long the review is, the stars line
   up across a row and the hospital's reply sits on the card's bottom edge
   rather than floating under a short review. */
.rv{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 20px;box-shadow:var(--shadow-soft);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.rv:hover{box-shadow:var(--shadow);border-color:var(--mist-deep)}

.rv-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv-ava{
  position:relative;flex:none;width:46px;height:46px;border-radius:50%;
  overflow:hidden;background:var(--mist);display:grid;place-items:center}
.rv-ini{
  font-family:var(--serif);font-size:17px;font-weight:600;color:var(--blue);
  line-height:1;user-select:none}
.rv-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rv-who{flex:1;min-width:0}
.rv-who b{
  display:block;font-family:var(--serif);font-size:17px;font-weight:600;
  color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-who time{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.rv-src{flex:none;display:grid;place-items:center;width:20px;height:20px}
.rv-src .ico{width:18px;height:18px}

.rv .gstars{font-size:15px;letter-spacing:1px}

/* Reviews here run from one line to a full paragraph. Clamped to keep the
   cards comparable, and expandable because truncating somebody's review
   and offering no way to read the rest is not an acceptable default. */
.rv-text{margin-top:9px}
.rv-text p{
  margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;
  overflow:hidden}
.rv.is-open .rv-text p{-webkit-line-clamp:unset;overflow:visible}

.rv-more{
  margin-top:8px;align-self:flex-start;
  padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--blue);
  text-decoration:underline;text-underline-offset:3px}
.rv-more:hover{color:var(--blue-bright)}
.rv-more:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px;border-radius:4px}

/* The reply follows the review it answers. It was pinned to the card's
   bottom edge, which on equal-height cards stranded the "Read more" link
   on its own in the middle of the card, visually detached from the text it
   belongs to. Trailing whitespace at the foot of a short card is far less
   odd than a floating link. */
.rv-reply{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rv-reply summary{
  cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);
  list-style:none}
.rv-reply summary::-webkit-details-marker{display:none}
.rv-reply summary::before{content:"↳ ";color:var(--cyan)}
.rv-reply summary:hover{color:var(--blue)}
.rv-reply summary:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px;border-radius:4px}
.rv-reply p{
  margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);
  padding-left:14px;border-left:2px solid var(--mist-deep)}

.rvmore{margin-top:4px;font-size:15px;color:var(--muted)}
.rvmore a{color:var(--blue);font-weight:600}

@media (max-width:1080px){.rvgrid{columns:2}}
@media (max-width:720px){.rvgrid{columns:1}}

/* A photograph on a treatment card, where the database has one. The icon
   block stays the fallback for treatments with no photograph yet. */
.post .art--photo{aspect-ratio:16/9;padding:0;background:var(--mist)}
.post .art--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* =====================================================================
   Emergency.

   This was a pale box with a left border — the same furniture as every
   other callout on the site, which made the one genuinely urgent message
   look like a footnote. It now reads as its own thing: a deep crimson
   panel, a siren that breathes, and the number as the largest, most
   tappable element in the block, because on a phone that is the only part
   anyone is going to use.
   ===================================================================== */
.emgy{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  margin:0 0 26px;padding:22px 26px;border-radius:var(--r-lg);
  background:linear-gradient(118deg,#8E1008 0%,#C32316 42%,#E03A22 100%);
  color:#fff;
  box-shadow:0 14px 34px -12px rgba(201,35,22,.55),0 2px 10px rgba(11,34,57,.12)}

/* A soft light bloom behind the siren, so the panel is not a flat slab. */
.emgy::before{
  content:"";position:absolute;top:-60%;left:-6%;width:340px;height:340px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 68%)}

.emgy > *{position:relative}

.emgy-ic{
  flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3)}
/* A 1.6 hairline disappears against the crimson; this one has to read at a
   glance. */
.emgy-ic .ico{width:30px;height:30px;color:#fff;stroke-width:1.9}

/* The siren pulse. Two rings so it reads as a beacon rather than a blink. */
.emgy-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:emgy-ring 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes emgy-ring{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.65);opacity:0}
  100%{transform:scale(1.65);opacity:0}}

.emgy-title{
  display:block;font-family:var(--serif);font-size:clamp(19px,2vw,22px);
  font-weight:600;line-height:1.25;margin-bottom:5px;color:#fff}
.emgy-body p{
  margin:0;max-width:52ch;font-size:15.5px;line-height:1.55;color:#FFEAE6}

/* The number. White on crimson so it is the obvious thing to press. */
.emgy-call{
  flex:none;display:inline-flex;align-items:center;gap:12px;
  padding:13px 22px;border-radius:100px;text-decoration:none;
  background:#fff;color:#A3140B;white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.emgy-call:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(0,0,0,.48)}
.emgy-call:focus-visible{outline:3px solid #fff;outline-offset:3px}
.emgy-call .ico{width:20px;height:20px;color:#C32316}
.emgy-call em{
  display:block;font-style:normal;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#C0392B;opacity:.85}
.emgy-call b{
  display:block;font-size:19px;font-weight:700;letter-spacing:.01em;color:#8E1008;
  line-height:1.2}

@media (max-width:860px){
  .emgy{grid-template-columns:auto 1fr;gap:16px 18px;padding:20px}
  .emgy-call{grid-column:1 / -1;justify-content:center}
}
@media (max-width:460px){
  .emgy{grid-template-columns:1fr;text-align:center;justify-items:center}
  .emgy-body p{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .emgy-ic::after{animation:none;opacity:.5}
}

/* The booking page centres the emergency panel over the form below it. */
.emgy-wrap{max-width:900px;margin:0 auto 34px}

/* =====================================================================
   The hospital's own photographs, on the facilities page.

   The source photographs are a mix of landscape and portrait straight off
   a camera, so every tile is given one ratio and the image is cropped to
   it — otherwise the grid staircases.
   ===================================================================== */
.gal{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}
.gal-i{
  margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--mist);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gal-i:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gal-i img{
  display:block;width:100%;height:100%;aspect-ratio:4/3;
  object-fit:cover;object-position:center}

@media (max-width:1080px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}}

/* The finder's live result count. The cards it filters are far down the
   page, so without this the box looks like it is doing nothing. */
.finder-count{
  margin:10px 0 0;font-size:14.5px;font-weight:600;color:var(--blue)}

/* A facility whose page has no photograph yet: a tinted panel with the
   icon, so it occupies the same space as a card that does have one. */
.deptcard .pic--icon{
  display:grid;place-items:center;
  background:linear-gradient(130deg,var(--mist) 0%,#EAF7FA 50%,var(--violet-mist) 100%)}
.deptcard .pic--icon .ico{width:46px;height:46px;color:var(--blue);stroke-width:1.3}

/* =====================================================================
   Reviews as a swipeable rail (home page).

   Nine full review cards stacked in a grid pushed the rest of the home
   page a long way down. As a rail the section is one screen tall, and on
   a phone reading the next review is a flick rather than a scroll.
   ===================================================================== */
.rvrail-hint{margin:22px 0 10px;font-size:15px;color:var(--muted)}

.rvrail{
  display:flex;gap:20px;margin:0;padding:4px 4px 18px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--mist-deep) transparent;
  /* ul/p carry a prose reading measure; this is layout, not prose. */
  max-width:none}
.rvrail::-webkit-scrollbar{height:9px}
.rvrail::-webkit-scrollbar-track{background:var(--mist);border-radius:99px}
.rvrail::-webkit-scrollbar-thumb{background:var(--mist-deep);border-radius:99px}
.rvrail::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
.rvrail:focus-visible{outline:3px solid var(--blue-bright);outline-offset:4px;border-radius:var(--r-md)}

/* Fixed card width so the rail reads as a row of equal cards, and a fixed
   height so one long review does not make every card tall. */
.rvrail > .rv{
  flex:0 0 352px;scroll-snap-align:start;
  min-height:330px}

/* In the rail a review is clamped shorter — the card is a taster, and
   "Read more" opens it in place. */
.rvrail .rv-text p{-webkit-line-clamp:6}

@media (max-width:600px){
  .rvrail > .rv{flex:0 0 84%}
}

/* =====================================================================
   Second-anniversary band.

   Navy ground so the gold badge carries it, placed where it reads as a
   milestone rather than an advertisement.
   ===================================================================== */
.anniv{
  background:linear-gradient(118deg,var(--navy) 0%,var(--navy-800) 55%,#0C4A86 100%);
  color:#fff;position:relative;overflow:hidden}
.anniv::before{
  content:"";position:absolute;top:-45%;right:-8%;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(247,201,72,.18) 0%,transparent 68%)}

.anniv-in{
  position:relative;display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:40px}

.anniv-badge{flex:none;width:clamp(150px,16vw,210px)}
/* The badge supplied by the hospital is a PNG on a solid white background,
   not a cut-out, so on this navy band it arrived as a white square. Rounding
   it into a medallion makes that white deliberate — the artwork inside is
   circular, so nothing is cropped. */
.anniv-badge img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:50%;background:#fff;
  border:3px solid rgba(247,201,72,.55);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.06)}

/* Fallback when the badge image is not in the media library. */
.anniv-num{
  display:grid;place-items:center;width:clamp(150px,16vw,210px);
  aspect-ratio:1;border-radius:50%;
  background:linear-gradient(118deg,#FFE9A8,#F7C948 45%,#E8A317);
  color:#3A2400;box-shadow:0 12px 30px -10px rgba(247,201,72,.6)}
.anniv-num b{font-family:var(--serif);font-size:clamp(54px,6vw,76px);line-height:1}
.anniv-num em{font-style:normal;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}

.anniv-kicker{
  display:inline-block;margin-bottom:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#F7C948}
.anniv-body h2{color:#fff;margin-bottom:14px}
.anniv-body p{color:#BBD8E8;max-width:56ch;margin:0}
.anniv-cta{margin-top:22px !important}
.anniv .btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.anniv .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#F7C948;color:#fff}

@media (max-width:760px){
  .anniv-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .anniv-body p{max-width:none}
}

/* A single facility or machine: its copy, with the photograph and the
   booking card alongside. */
.facpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:46px;align-items:start}
@media (max-width:980px){.facpage{grid-template-columns:1fr;gap:34px}}

/* A facility with no photograph of its own. The icon was floating small in
   a large panel and read as a failed image; at this size, centred on a
   tinted ground with a ring, it reads as a deliberate symbol. */
.deptcard .pic--icon{position:relative}
.deptcard .pic--icon .ico{
  width:72px;height:72px;stroke-width:1.1;color:var(--blue);
  padding:16px;border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 22px -10px rgba(6,46,92,.35),inset 0 0 0 1px var(--mist-deep)}

/* =====================================================================
   Images recovered from a flattened Elementor grid.

   These pages were built with their pictures four across. Flattened into
   stored content they became one image per row, which left a column of
   thumbnails down the left of an otherwise empty page. This puts them back
   into a grid wherever two or more sit together.
   ===================================================================== */
.prose-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;margin:22px 0;align-items:start}
.prose-grid a,.prose-grid img{display:block;width:100%;height:auto;margin:0}
.prose-grid img{
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--mist);
  aspect-ratio:1;object-fit:cover}
.prose-grid a{
  border-radius:var(--r-sm);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.prose-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}

/* Condition cards lifted out of that grid, where each picture had a label. */
.faccards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;margin:26px 0 0;list-style:none;padding:0;max-width:none}
.faccards a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.faccards a:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:var(--shadow)}
.faccards img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--mist)}
.faccards b{
  display:block;padding:12px 14px 14px;font-family:var(--serif);font-size:16px;
  font-weight:600;line-height:1.3;color:var(--navy)}

/* =====================================================================
   Prose recovered from the page builder.

   The builder wrapped each list item's text in its own <p>. That <p> then
   picked up the global paragraph margin, so every bullet sat on one line
   with its text on the next and a full line space after it — a list of
   nine items became a column of gaps.
   ===================================================================== */
.prose li > p{margin:0}
.prose li > p + p{margin-top:.5em}
.prose li{margin-bottom:.45em}

/* Headings the builder emitted as a bare <h5>/<h6> label above a block. */
.prose h5,.prose h6{
  margin:1.6em 0 .5em;font-family:var(--serif);font-size:18px;
  font-weight:600;color:var(--navy)}
.prose h5:first-child,.prose h6:first-child{margin-top:0}

/* On a facility page the column is already a comfortable measure, so the
   62ch cap only left a band of white down the middle of the page. */
.facpage .prose{max-width:none}

/* Department and treatment pages lay the copy in a column beside the booking
   card. That column is already a comfortable 786px, so the 62ch reading
   measure on .prose was capping it at 555px and leaving a 230px band of
   white down the right of every page reached from a "Read more". */
.dept-cols .prose{max-width:none}

/* =====================================================================
   Hero slideshow — the building and the logo, alternating.

   Both slides occupy the same box so the hero never changes height as it
   cycles. The first slide is visible from the markup, so the hero is
   complete before any script runs.
   ===================================================================== */
/* Portrait frame. The logo is square and the building shot reads well
   upright, so the hero panel stands rather than lies. Capped by height as
   well as ratio so it never pushes the booking buttons off a laptop screen. */
.heroslides{position:relative;aspect-ratio:4/5;max-height:min(78vh,620px);
  margin-inline:auto;width:100%}

/* The breathe: each slide fades in while easing back from a slight zoom,
   and drifts very slowly while it is shown, so the change reads as the
   panel inhaling rather than a hard cut. */
.heroslide{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.045);
  transition:opacity 1.5s var(--ease),transform 1.5s var(--ease);
  display:grid;place-items:center}
.heroslide.is-on{opacity:1;transform:scale(1)}
.heroslide img{width:100%;height:100%;object-fit:cover;display:block}

/* The frontage, upright. The photograph is now portrait, so it fills the
   frame on its own — no blurred filler, nothing cropped off the sides.
   Anchored to the top so the signage stays in view if the frame is ever
   shorter than the picture. */
.heroslide--photo{overflow:hidden;background:var(--navy)}
.heroslide--photo img{
  width:100%;height:100%;object-fit:cover;object-position:center top}

/* The logo is a wide transparent mark, not a photograph: it sits on the
   brand's own light ground at a readable size instead of being cropped to
   fill a 3:2 frame. */
.heroslide--logo{
  background:#fff;
  padding:clamp(22px,4vw,46px)}
.heroslide--logo img{
  width:100%;height:auto;max-height:100%;object-fit:contain}

/* No hover zoom here — it fought the breathing transition. */

@media (prefers-reduced-motion:reduce){
  .heroslide{transition:none}
}

/* =====================================================================
   The "1st" emblem.

   The hospital's whole positioning is that it is the first in South India
   for this technology, and its building signage leads with the numeral as
   a solid, moulded object rather than as flat type. Two stacked copies of
   the glyphs do that here: the lower one is offset repeatedly to build the
   extruded side, the upper one carries the lit face.
   ===================================================================== */
.hero .eyebrow .first-mark{
  position:relative;flex:none;
  display:block;isolation:isolate;
  /* .eyebrow b is a mint pill by default; the emblem is not a pill. */
  background:none;border-radius:0;
  font-family:var(--serif);font-weight:700;font-style:normal;
  font-size:clamp(34px,3.6vw,48px);line-height:.92;letter-spacing:-.02em;
  /* Room for the extrusion and its cast shadow, which sit outside the glyph box. */
  padding:2px 7px 7px 2px}

.hero .eyebrow .first-mark i{
  font-style:normal;font-size:.52em;vertical-align:super;letter-spacing:0}

.hero .eyebrow .fm-depth,
.hero .eyebrow .fm-face{display:block;white-space:nowrap}

/* The moulded side. Each step is one slice of the extrusion, darkening as
   it recedes, finished with a soft contact shadow under the numeral. */
.hero .eyebrow .fm-depth{
  position:absolute;inset:2px 7px 7px 2px;z-index:-1;
  color:#6E0D05;
  text-shadow:
    1px 1px 0 #6B0C05, 2px 2px 0 #670C05, 3px 3px 0 #620B04,
    4px 4px 0 #5D0A04, 5px 5px 0 #570904, 6px 6px 0 #500803,
    7px 8px 10px rgba(74,8,3,.5)}

/* The lit face: brightest at the top left, deepening into the shadow side. */
.hero .eyebrow .fm-face{
  background:linear-gradient(158deg,
    #FF8E70 0%, #F4573B 26%, #DC3421 48%, #BE2317 70%, #951309 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* A thin lip along the top edge, which is what reads as moulded rather
     than merely coloured. */
  filter:drop-shadow(0 -1px 0 rgba(255,214,200,.75))}

.hero .eyebrow .eyebrow-text{flex:1;min-width:0}

/* The badge was built around a small leading icon; the numeral is taller
   and sits proud of it, so the padding tightens to keep it optically set. */
.hero .eyebrow{padding-left:clamp(10px,1.2vw,14px);gap:clamp(12px,1.3vw,18px);align-items:center}

@media (max-width:520px){
  .hero .eyebrow .first-mark{font-size:27px}
  .hero .eyebrow .fm-depth{
    text-shadow:
      1px 1px 0 #6B0C05, 2px 2px 0 #670C05, 3px 3px 0 #620B04,
      4px 4px 0 #5D0A04, 5px 6px 8px rgba(74,8,3,.5)}
}

/* The extrusion is decoration; flat type is the honest fallback where a
   gradient cannot be clipped to text. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .eyebrow .fm-face{color:#C2271A;-webkit-text-fill-color:#C2271A}
}

/* =====================================================================
   A card row that does not leave a hole.

   Eleven departments in a three-column grid left the last row two-thirds
   empty, which read as a large gap down the right of the page. Flex with
   grow lets a short final row spread across the full width instead.
   ===================================================================== */
.cardflow{
  display:flex;flex-wrap:wrap;gap:18px;align-items:stretch;
  /* A short final row sits centred rather than hard left, so the leftover
     space is balanced instead of reading as a gap down one side. */
  justify-content:center}

/* Cards keep one width at each breakpoint. Capping the width as well as
   setting the basis stops a lone card on the last row from stretching to
   double the size of its neighbours. */
.cardflow > *{min-width:0;flex-grow:0;flex-shrink:1}

@media (min-width:1081px){
  .cardflow > *{flex-basis:calc((100% - 36px) / 3);max-width:calc((100% - 36px) / 3)}
}
@media (max-width:1080px) and (min-width:641px){
  .cardflow > *{flex-basis:calc((100% - 18px) / 2);max-width:calc((100% - 18px) / 2)}
}
@media (max-width:640px){
  .cardflow > *{flex-basis:100%;max-width:100%}
}

/* =====================================================================
   Card rows that hug their contents.

   A department with one doctor rendered that card into a three-column grid
   and left two thirds of the page blank beside it. The row is capped to the
   width its cards actually need, and the cards keep their normal size by
   sizing against that capped row rather than against the full page.
   ===================================================================== */
.cardflow--per2{--cols:2}
.cardflow--per3{--cols:3}

@media (min-width:1081px){
  /* One card: the row is one card wide, and the card fills it. */
  .cardflow--fit1{max-width:calc((100% - (var(--cols) - 1) * 18px) / var(--cols))}
  .cardflow--fit1 > *{flex-basis:100%;max-width:100%}

  /* Two cards: the row is two cards wide, each taking half of it. */
  .cardflow--fit2{max-width:calc(((100% - (var(--cols) - 1) * 18px) / var(--cols)) * 2 + 18px)}
  .cardflow--fit2 > *{flex-basis:calc((100% - 18px) / 2);max-width:calc((100% - 18px) / 2)}

  /* Three in a two-up row is a full row of two. */
  .cardflow--per2.cardflow--fit2{max-width:none}
}

/* A capped row starts under its heading rather than floating mid-page. */
.cardflow[class*="--fit"]{margin-inline:0;justify-content:flex-start}

@media (max-width:1080px){
  .cardflow[class*="--fit"]{max-width:none}
  .cardflow--fit1 > *,.cardflow--fit2 > *{flex-basis:calc((100% - 18px) / 2);max-width:calc((100% - 18px) / 2)}
}
@media (max-width:640px){
  .cardflow--fit1 > *,.cardflow--fit2 > *{flex-basis:100%;max-width:100%}
}

/* =====================================================================
   Insurance asterisk and its caution line.

   "All types of insurance accepted" reads as a guarantee on its own, and
   what a policy actually covers is the insurer's call. The asterisk carries
   the condition with the claim everywhere the claim appears.
   ===================================================================== */
.astk{color:var(--red,#c8372d);font-weight:700;margin-left:1px}
sup.astk{font-size:.7em;top:-.45em;position:relative;line-height:0}

span.caution,
.caution{
  display:flex;align-items:flex-start;gap:8px;
  margin:10px 0 0;max-width:none;
  font-size:.82rem;line-height:1.45;
  color:var(--ink-3,#5b6472)
}
.caution .caution-ico{
  flex:0 0 auto;width:15px;height:15px;margin-top:2px;
  color:var(--amber,#d08700)
}
.caution .astk{margin-left:0}

/* The claim and its condition are one unit: the caution sits immediately
   under the sentence it qualifies, inside the same badge, rather than
   floating below the badge row as a line of its own. */
.ins-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ins-block .caution{margin:0;font-size:.74rem;font-weight:500}
.ins-block .caution .caution-ico{width:13px;height:13px;margin-top:1px}

/* The badge has to stack to hold both lines. */
.badge:has(.ins-block){align-items:flex-start;padding-top:9px;padding-bottom:9px}

.phero .caution{color:rgba(255,255,255,.8)}
.phero .caution .caution-ico{color:rgba(255,255,255,.9)}
.phero .caution .astk{color:#ffd9d4}

/* On the dark hero the red star disappears; the badge keeps it legible. */
.hero-badges .astk,.phero .badge .astk{color:#ffc9c2}
.ins-claim{white-space:normal}

/* Under a section heading it should not inherit the heading's centring. */
.sec-head .astk{color:var(--red,#c8372d)}

/* In the contact list the value cell stacks claim over caution. */
.infolist .v .caution{margin-top:6px}

/* The alternative number is published, not dialable — see sreshta_phone_pair(). */
.num-alt{white-space:nowrap}
.num-sep{margin-left:-2px}
.facts .num-alt{color:inherit}

/* =====================================================================
   Legacy Elementor header: stop the helpline block escaping the page.

   The pages still served by the old Theme Builder header put the "24/7
   Appointment Helpline" block in a nowrap flex row that cannot shrink, so
   it ran 120px past the right edge of the viewport and gave every one of
   those pages a horizontal scrollbar. Letting the row wrap and the block
   shrink keeps it inside without touching the shared header's own data.
   ===================================================================== */
/* Elementor writes flex-wrap into its own per-post stylesheet, which loads
   after this file, so the override has to be explicit. */
header .elementor-element-b717e4c > .e-con-inner,
header .elementor-element-b717e4c{flex-wrap:wrap !important}
header .elementor-element-427f167{min-width:0;flex-shrink:1;max-width:100%}
header .appointmenthelpline_num{min-width:0;margin:0;padding:0}
header .appointmenthelpline_num li,
header .appointmenthelpline_num p{min-width:0;overflow-wrap:anywhere}

/* =====================================================================
   Consultants in the department sidebar.

   Moved under the booking card so that "who would I be seeing?" is
   answered beside the symptoms list that raises it. The full portrait
   card is built for a three-up row and would run the sidebar to roughly
   a thousand pixels for two people, so inside the sidebar the same card
   lays out as a compact row: small square photograph, name and role
   beside it.
   ===================================================================== */
.deptside{display:grid;gap:22px;align-content:start}

.docside .docstack{display:grid;gap:14px}

.docside .doc{
  display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  border-top:1px solid var(--line,#e6edf2)
}
.docside .docstack > .doc:first-child{border-top:0}
.docside .doc:not(:first-child){padding-top:14px}

.docside .doc .ph{
  aspect-ratio:1/1;width:76px;border-radius:12px;overflow:hidden;margin:0
}
.docside .doc .ph-img{width:100%;height:100%;object-fit:cover;object-position:center top}

.docside .doc .body{padding:0}
.docside .doc .name{font-size:16px;line-height:1.25;margin-bottom:3px}
.docside .doc .role{font-size:13px;margin-bottom:2px}
.docside .doc .qual{font-size:13px;color:var(--muted);margin:0 0 4px;max-width:none}
.docside .doc .link-quiet{font-size:13px}

/* The sidebar stacks under the prose on narrow screens, where the cards
   have the full width again and the compact row would look sparse. */
@media (max-width:980px){
  .docside .doc{grid-template-columns:92px 1fr}
  .docside .doc .ph{width:92px}
}