/* ─────────────────────────────────────────────────────────────
   CoreOnco design system · Mash Media · v1 (from approved prototype)
   Committed single light identity — no dark mode, by decision.
   Tonal ladder: paper → mist → mist-2 · gold-wash (hope) · one deep
   teal anchor (decision point). See BLUEPRINT §9.
   ───────────────────────────────────────────────────────────── */

/* Self-hosted type. Google Fonts made first paint wait on a stylesheet from
   one origin that named files on a second origin — two connection setups on
   slow mobile before any text drew (Lighthouse: ~3.4 s of LCP render delay).
   These are the same families and the same weight ranges the site rendered
   before, subset to the characters it actually uses. Folding ₹ into the main
   file also stops pricing pages downloading Google's latin-ext files (+100 KB)
   for a single glyph. Characters outside unicode-range fall back to the next
   font in the stack, never to a missing-glyph box. Preloaded in the head with
   the exact same URLs — change one, change both, or the font downloads twice.
   Licence: SIL OFL 1.1, assets/fonts/OFL.txt. */
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20B9,U+2122}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20B9,U+2190-2193,U+2122}

/* ─────────────────────────────────────────────────────────────
   Committed single light identity. No dark mode, by decision:
   a frightened patient must never land on an interface we did
   not deliberately choose. Ground is white with a mint bias
   (neutral pulled toward the accent). Marigold carries hope and
   affordability — the warmest, brightest part of the page.
   ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  /* Tonal ladder — each step is a visible interval, not a rounding error.
     paper → mist → mist-2, plus gold-wash and one deep anchor. */
  --paper:#FFFFFF;
  --mist:#E8F2EE;
  --mist-2:#D7E8E2;
  --rule:#C9DBD5;
  --rule-soft:#E2EDE9;
  --ink:#123141;
  --ink-2:#44606E;
  /* Was #75919F: 3.33:1 on white, 2.91:1 on mist — below the 4.5:1 that
     small supporting text needs (CTO audit D02). Same hue, darker. */
  --ink-3:#537080;
  --navy:#12507F;
  --teal:#0F7A72;
  --teal-deep:#0B5E58;
  --teal-wash:#E3F1EF;
  --gold:#B96F16;        /* accent: rules, fills, stars, large italic — not small text */
  --gold-text:#9C5C10;   /* gold as TEXT: 5.3:1 on white, 4.9:1 on gold-wash (D02) */
  --gold-wash:#FDF4E6;
  --gold-line:#EFCE9C;
  --red:#B3271C;
  --dark:#14424A;
  --dark-2:#1B535C;
  --on-dark:#EDF6F4;
  --on-dark-2:#A7C7C3;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Manrope,system-ui,-apple-system,sans-serif;
  font-size:17.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
/* height:auto is what makes the width/height attributes safe (img_dims()).
   With it, the attributes only give the browser the aspect ratio, so space
   is reserved before the image loads. Without it, any rule that sets width
   but not height falls back to the attribute's pixel height — the doctor
   portraits were stretched to 338x1018. Rules that set a height (cover
   panels, the logo) are more specific and still win. */
img{max-width:100%;height:auto;display:block}
.w{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.w{padding:0 20px}}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ============ site header ============ */
.top{background:var(--mist);color:var(--ink-2);font-size:12.5px;border-bottom:1px solid var(--rule)}
.top .w{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px}
.top .l{display:flex;gap:22px;align-items:center}
.top b{color:var(--ink);font-weight:600}
.top .em{color:var(--red);display:flex;align-items:center;gap:7px;font-weight:700}
.top .em i{width:6px;height:6px;border-radius:50%;background:var(--red);display:block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.top .lang{display:flex;gap:8px}
.top .lang span{opacity:.6}
.top .lang b{color:var(--teal)}
@media (max-width:820px){.top .l span.hide{display:none}}

header.site{position:sticky;top:0;z-index:150;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
header.site .w{display:flex;align-items:center;gap:30px;height:74px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:Newsreader,Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.018em;color:var(--ink)}
.brand em{font-style:normal;color:var(--teal)}
.brand small{font-family:Manrope,sans-serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
nav.main{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500}
nav.main a{color:var(--ink-2);padding:6px 0;border-bottom:1.5px solid transparent;transition:.18s}
nav.main a:hover{color:var(--teal);border-color:var(--teal)}
@media (max-width:1000px){nav.main{display:none}}
.btn{
  font-family:inherit;font-weight:600;font-size:14px;padding:11px 21px;border-radius:3px;
  border:1px solid transparent;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:var(--teal-deep)}
.btn-o{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn-o:hover{border-color:var(--teal);color:var(--teal)}
.btn-g{background:var(--gold);color:#231703}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:1.6px;background:var(--ink);margin:4.5px 0}
@media (max-width:1000px){.burger{display:block}header.site .w{gap:12px}.brand{margin-right:auto}}

/* ============ type ============ */
.display{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.028em;line-height:1.02;text-wrap:balance}
h1.display{font-size:clamp(40px,6.1vw,74px)}
h2.display{font-size:clamp(30px,3.9vw,48px);line-height:1.06}
h3.display{font-size:clamp(22px,2.4vw,29px);line-height:1.14}
.eyebrow{
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:var(--teal);
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--teal);flex:none}
.eyebrow.g{color:var(--gold-text)}.eyebrow.g::before{background:var(--gold)}
.eyebrow.l{color:var(--teal-deep)}
.lede{font-size:19px;line-height:1.58;color:var(--ink-2);max-width:56ch}
p{margin:0 0 16px}

/* ============ hero ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:0;align-items:stretch}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-copy{padding:82px 56px 120px 0}
@media (max-width:960px){.hero-copy{padding:52px 0 44px}}
.hero h1{margin:0 0 24px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .lede{margin-bottom:34px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:38px}
.hero-chips{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);padding-top:22px}
.chip{padding-right:26px;margin-right:26px;border-right:1px solid var(--rule)}
.chip:last-child{border:0;margin:0;padding:0}
.chip b{display:block;font-family:Newsreader,serif;font-size:27px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.chip span{font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);font-weight:600;text-transform:uppercase}
.hero-media{position:relative;min-height:520px;background:var(--mist)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(107deg,var(--paper) 0%,transparent 34%)}
@media (max-width:960px){.hero-media{min-height:400px;margin:0 -20px}.hero-media::after{background:linear-gradient(to top,var(--paper) 0%,transparent 30%)}}
.cred-card{
  position:absolute;left:-58px;bottom:34px;z-index:3;background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--teal);padding:19px 24px;max-width:310px;
  box-shadow:0 24px 50px -24px rgba(8,32,47,.32);
}
@media (max-width:960px){.cred-card{left:0;bottom:20px;max-width:270px}}
.cred-card .n{font-family:Newsreader,serif;font-size:20px;font-weight:500;letter-spacing:-.015em}
.cred-card .r{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.cred-card .q{font-size:11px;color:var(--teal);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-soft)}

/* ============ ribbon ============ */
.ribbon{background:var(--mist);color:var(--ink);border-bottom:1px solid var(--rule)}
.ribbon .w{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:800px){.ribbon .w{grid-template-columns:repeat(2,1fr)}}
.ribbon .i{padding:34px 36px;border-right:1px solid var(--rule)}
.ribbon .i:first-child{padding-left:0}
.ribbon .i:last-child{border-right:0;padding-right:0}
@media (max-width:800px){
  .ribbon .i:nth-child(2){border-right:0}
  .ribbon .i{padding:22px 20px}
  .ribbon .i:nth-child(odd){padding-left:0}
}
.ribbon .k{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:9px}
.ribbon .v{font-family:Newsreader,serif;font-size:19px;font-weight:400;line-height:1.28;letter-spacing:-.01em}
.ribbon .v small{display:block;font-family:Manrope,sans-serif;font-size:12.5px;color:var(--ink-3);margin-top:5px;font-weight:500}

/* ============ sections ============ */
section.band{padding:100px 0}
@media (max-width:700px){section.band{padding:64px 0}}
.band-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:52px}
@media (max-width:860px){.band-head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}}
.band-head p{margin:0;color:var(--ink-2);font-size:16.5px}

/* editorial list */
.elist{border-top:1px solid var(--rule)}
.elist a{display:grid;grid-template-columns:38px 1fr auto;gap:22px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--rule);transition:.2s}
.elist a:hover{background:var(--mist);padding-left:14px}
.elist .no{font-size:11.5px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.elist .ti{display:block;font-family:Newsreader,serif;font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.elist .su{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px}
.elist .ar{color:var(--teal);font-size:18px;opacity:0;transform:translateX(-6px);transition:.2s}
.elist a:hover .ar{opacity:1;transform:none}
@media (max-width:640px){.elist a{grid-template-columns:26px 1fr;gap:14px}.elist .ar{display:none}.elist .ti{font-size:19px}}

/* doctors */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media (max-width:860px){.docs{grid-template-columns:1fr}}
.doc{border:1px solid var(--rule);background:var(--paper);display:grid;grid-template-columns:190px 1fr;transition:.22s}
.doc:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 26px 46px -28px rgba(8,32,47,.3)}
@media (max-width:520px){.doc{grid-template-columns:1fr}}
.doc-img{background:var(--mist);position:relative;min-height:238px}
.doc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.doc-img.ph{display:flex;align-items:center;justify-content:center;font-family:Newsreader,serif;font-size:46px;color:var(--ink-3);background:linear-gradient(150deg,var(--mist),var(--mist-2))}
.doc-b{padding:26px 26px 24px}
.doc-b h3{margin:0 0 4px;font-family:Newsreader,serif;font-size:24px;font-weight:500;letter-spacing:-.018em}
.doc-role{font-size:13px;color:var(--teal);font-weight:600;margin-bottom:14px;line-height:1.4}
.doc-q{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.doc-q span{font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 9px;background:var(--mist);color:var(--ink-2);border-radius:2px}
.doc-b p{font-size:14px;color:var(--ink-2);margin:0 0 16px;line-height:1.58}
.doc-l{font-size:13px;font-weight:700;color:var(--teal);display:inline-flex;gap:7px;align-items:center}

/* affordability */
.afford{background:var(--gold-wash);color:var(--ink);position:relative;overflow:hidden;border-block:1px solid var(--gold-line)}
.afford::before{
  content:"";position:absolute;top:-180px;right:-140px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 68%);
}
.afford .w{position:relative}
.afford-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:start}
@media (max-width:900px){.afford-grid{grid-template-columns:1fr;gap:40px}}
.afford h2{margin:0 0 20px}
.afford h2 em{font-style:italic;color:var(--gold)}
.afford .lede{color:var(--ink-2);max-width:none}
.schemes{display:grid;gap:1px;background:var(--gold-line);border:1px solid var(--gold-line)}
.scheme{background:var(--paper);padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;transition:.2s}
.scheme:hover{background:#FFFBF4}
.scheme .nm{font-family:Newsreader,serif;font-size:19px;font-weight:500;letter-spacing:-.012em}
.scheme .ds{font-size:13px;color:var(--ink-2);margin-top:3px}
.scheme .tag{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-text);border:1px solid var(--gold-line);background:var(--gold-wash);padding:5px 10px;white-space:nowrap}
.afford-note{margin-top:22px;font-size:13.5px;color:var(--ink-2);border-left:2px solid var(--gold);padding-left:16px;line-height:1.6}

/* stories */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:900px){.stories{grid-template-columns:1fr}}
.story{border-top:2px solid var(--teal);padding-top:24px}
.story .qt{font-family:Newsreader,serif;font-size:20px;line-height:1.46;letter-spacing:-.012em;margin-bottom:20px;color:var(--ink)}
.story .who{font-size:12.5px;font-weight:700;letter-spacing:.03em}
.story .cond{font-size:12px;color:var(--ink-3);margin-top:2px}
.stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:12px}

/* locations */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} /* 6 centres = 2 clean rows */
@media (max-width:900px){.locs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.locs{grid-template-columns:1fr}}
.loc{background:var(--paper);padding:28px 24px 26px;transition:.2s;position:relative}
.loc:hover{background:var(--mist)}
.loc.pri::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal)}
.loc .ct{font-family:Newsreader,serif;font-size:24px;font-weight:500;letter-spacing:-.018em;margin-bottom:3px}
.loc .hn{font-size:13px;color:var(--teal);font-weight:600;margin-bottom:12px}
.loc .ad{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
.loc .hr{font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule-soft);padding-top:11px}
.loc .badge{position:absolute;top:16px;right:18px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}

/* CTA */
/* The single dark moment on the page — the decision point, and a step down
   into the footer. One anchor gives rhythm; three made a mausoleum. */
.cta{background:var(--dark-2);color:var(--on-dark)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center}
@media (max-width:800px){.cta-grid{grid-template-columns:1fr;gap:28px}}
.cta h2{margin:0 0 12px;color:var(--on-dark)}
.cta p{color:var(--on-dark-2);margin:0;max-width:52ch}
.cta .eyebrow{color:#8FDCD2}
.cta .eyebrow::before{background:#8FDCD2}
.cta .btn-p{background:#fff;color:var(--teal-deep)}
.cta .btn-p:hover{background:#DFF2EE}
.cta .btn-o{border-color:rgba(255,255,255,.42);color:var(--on-dark)}
.cta .btn-o:hover{border-color:#8FDCD2;color:#8FDCD2}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* footer */
footer.site{background:var(--dark);color:var(--on-dark-2);padding:64px 0 30px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.f-grid{grid-template-columns:1fr}}
footer.site h5,footer.site h3.h5,footer.site h2.h5{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);margin:0 0 16px;font-weight:700}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer.site a:hover{color:#8FDCD2}
.f-bot{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#6E8494}

/* ===== inner page bits ===== */
.crumb{font-size:12.5px;color:var(--ink-3);padding:20px 0;border-bottom:1px solid var(--rule-soft)}
.crumb a:hover{color:var(--teal)}
.crumb span{margin:0 8px;opacity:.5}

.dp{display:grid;grid-template-columns:340px 1fr;gap:60px;padding:56px 0 0}
@media (max-width:900px){.dp{grid-template-columns:1fr;gap:34px}}
.dp-photo{position:relative}
.dp-photo img{width:100%;border:1px solid var(--rule)}
.dp-meta{border:1px solid var(--rule);border-top:0;padding:20px}
.dp-meta .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.dp-meta .row:last-child{border:0}
.dp-meta .row b{font-weight:600}
.dp-meta .row span{color:var(--ink-3);flex:none}
.rev{background:var(--teal-wash);border-left:3px solid var(--teal);padding:14px 18px;font-size:13px;color:var(--ink-2);margin:26px 0}
.rev b{color:var(--ink)}
.prose p{font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:64ch}
/* Primary sections are h2 (they follow the page's h1); h3 is for genuine
   sub-sections. Templates used to jump h1→h3 (CTO audit D05). */
.prose h2{font-family:Newsreader,serif;font-size:25px;font-weight:500;letter-spacing:-.018em;margin:36px 0 12px;color:var(--ink);line-height:1.2}
.prose h3{font-family:Newsreader,serif;font-size:20px;font-weight:500;letter-spacing:-.012em;margin:28px 0 10px;color:var(--ink)}
.credlist{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:12px;max-width:64ch}
.credlist li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--rule-soft);font-size:14.5px}
.credlist .yr{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.04em;padding-top:3px;white-space:nowrap}
.credlist b{display:block;font-weight:600;color:var(--ink)}
.credlist small{color:var(--ink-3);font-size:13px}

.tocbox{border:1px solid var(--rule);background:var(--mist);padding:22px 24px;margin:30px 0}
.tocbox h5,.tocbox h3.h5,.tocbox h2.h5{margin:0 0 12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tocbox ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.tocbox a:hover{color:var(--teal)}

.faq{border-top:1px solid var(--rule);margin-top:14px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-size:19px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;color:var(--ink-2);font-size:15px;max-width:64ch}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:30px 0}
@media (max-width:640px){.statgrid{grid-template-columns:1fr}}
.statgrid div{background:var(--paper);padding:22px 20px}
.statgrid b{display:block;font-family:Newsreader,serif;font-size:32px;font-weight:500;letter-spacing:-.022em;font-variant-numeric:tabular-nums;line-height:1}
.statgrid span{font-size:12.5px;color:var(--ink-3);margin-top:7px;display:block}

.mapfake{height:280px;background:
  linear-gradient(var(--rule-soft) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px) 0 0/40px 40px,
  var(--mist);
  border:1px solid var(--rule);position:relative;display:flex;align-items:center;justify-content:center}
.mapfake .pin{width:16px;height:16px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 8px rgba(14,124,134,.18),0 0 0 18px rgba(14,124,134,.08)}
.mapfake .lbl{position:absolute;bottom:16px;left:16px;background:var(--paper);border:1px solid var(--rule);padding:9px 14px;font-size:12.5px;font-weight:600}


@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---------- forms (book-appointment, contact) ---------- */
.form{margin-top:26px;display:flex;flex-direction:column;gap:18px;max-width:640px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;padding:12px 14px;width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash);
}
.form label.bad input{border-color:var(--red);box-shadow:0 0 0 3px #F6DDDA}
.form textarea{resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.f2{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-9999px!important;height:1px;overflow:hidden}
.f-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.f-note{font-size:12.5px;color:var(--ink-3);max-width:40ch;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════
   v2 · PREMIUM LAYER — mobile-first elevation pass.
   Same identity; deeper execution: shadow system, motion, thumb-reach
   actions, full-screen nav. Appended last so it wins the cascade.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(18,49,65,.05),0 2px 10px -2px rgba(18,49,65,.07);
  --shadow-md:0 2px 4px rgba(18,49,65,.05),0 14px 34px -10px rgba(18,49,65,.16);
  --shadow-lg:0 4px 10px rgba(18,49,65,.06),0 30px 70px -18px rgba(18,49,65,.25);
}
::selection{background:var(--teal);color:#fff}
@media (min-width:900px){
  ::-webkit-scrollbar{width:13px}
  ::-webkit-scrollbar-thumb{background:var(--rule);border:4px solid var(--paper);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
}
body{font-size:17px}
@media (min-width:900px){body{font-size:17.5px}}
section.band{padding:clamp(64px,9vw,104px) 0}

/* — buttons: weight, light, press — */
.btn{padding:13px 24px;border-radius:4px;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;min-height:48px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-p{box-shadow:0 8px 22px -8px rgba(15,122,114,.55)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(15,122,114,.6)}
@media (max-width:640px){.hero-cta{gap:10px}.hero-cta .btn{flex:1 1 100%;justify-content:center}}

/* — header: quiet until scrolled — */
header.site{transition:box-shadow .3s var(--ease)}
header.site .w{transition:height .3s var(--ease)}
header.site.scrolled{box-shadow:var(--shadow-md)}
header.site.scrolled .w{height:62px}
@media (max-width:480px){.brand small{display:none}.brand{font-size:23px}}
@media (max-width:1000px){header.site .btn{display:none}} /* mobile: bottom bar owns the CTA */

/* — scroll reveal (JS adds .wr, then .in; no JS = no hiding) — */
.wr{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wr.in{opacity:1;transform:none}

/* — cards: depth + optics — */
.doc{box-shadow:var(--shadow-sm)}
.doc:hover{box-shadow:var(--shadow-lg)}
.doc-img{overflow:hidden}
.doc-img img{transition:transform .9s var(--ease)}
.doc:hover .doc-img img{transform:scale(1.045)}
.loc{position:relative}
.loc:hover{background:var(--paper);box-shadow:var(--shadow-md);z-index:2}
.scheme:hover .nm{color:var(--gold-text)}
.story .qt{hanging-punctuation:first}
/* Credential card: overlaps the image edge by design — the container must
   never clip it (overflow:hidden here once sliced the card's left edge). */
.hero-media{overflow:visible}
.cred-card{
  box-shadow:var(--shadow-lg);
  padding:22px 26px;
  max-width:330px;
  border-left-width:4px;
}
.cred-card .n{font-size:22px;white-space:nowrap}
.cred-card .r{font-size:13px;margin-top:5px}
.cred-card .q{letter-spacing:.08em;white-space:nowrap}
@media (max-width:960px){
  .cred-card{left:16px;right:16px;bottom:16px;max-width:none;padding:16px 20px}
  .cred-card .n{font-size:19px}
}

/* — tap targets & mobile type comfort — */
@media (max-width:640px){
  .elist a{padding:18px 4px}
  .elist .ti{font-size:20px}
  .top{font-size:12px}
  .lede{font-size:17.5px}
  .statgrid div{padding:18px 16px}
  .dp-meta .row{padding:11px 0}
}

/* ── mobile action bar: call · WhatsApp · book, always in thumb reach ── */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:180;display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(18px);
  border-top:1px solid var(--rule);box-shadow:0 -8px 30px -12px rgba(18,49,65,.18)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13px;
  min-height:46px;padding:8px 6px;border-radius:6px;border:1px solid var(--rule);color:var(--ink);letter-spacing:.01em}
.mbar a:active{transform:scale(.98)}
.mbar svg{width:15px;height:15px;flex:none}
.mbar .wa{color:var(--teal-deep);border-color:color-mix(in srgb,var(--teal) 35%,var(--rule))}
.mbar .bk{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 8px 18px -8px rgba(15,122,114,.55)}
@media (min-width:900px){.mbar{display:none}}
@media (max-width:899px){body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}

/* ── full-screen mobile navigation ── */
.mnav{position:fixed;inset:0;z-index:300;background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;padding:18px 26px calc(30px + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);overflow-y:auto}
html.menu-open .mnav{opacity:1;pointer-events:auto}
html.menu-open{overflow:hidden}
.mnav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex:none}
.mnav-close{background:none;border:1px solid rgba(255,255,255,.25);color:var(--on-dark);width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
.mnav-close:hover{border-color:#8FDCD2;color:#8FDCD2}
.mnav nav{display:flex;flex-direction:column}
.mnav a.link{display:flex;gap:16px;align-items:baseline;text-decoration:none;color:var(--on-dark);
  font-family:Newsreader,Georgia,serif;font-weight:400;font-size:clamp(27px,7.5vw,36px);letter-spacing:-.02em;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s}
.mnav a.link:hover{color:#8FDCD2}
html.menu-open .mnav a.link{opacity:1;transform:none}
.mnav a.link:nth-child(1){transition-delay:.05s}.mnav a.link:nth-child(2){transition-delay:.1s}
.mnav a.link:nth-child(3){transition-delay:.15s}.mnav a.link:nth-child(4){transition-delay:.2s}
.mnav a.link:nth-child(5){transition-delay:.25s}.mnav a.link:nth-child(6){transition-delay:.3s}
.mnav a.link:nth-child(7){transition-delay:.35s}.mnav a.link:nth-child(8){transition-delay:.4s}
.mnav .no{font-family:Manrope,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;color:#8FDCD2}
.mnav-foot{margin-top:auto;padding-top:28px;flex:none}
.mnav-foot .em{color:#F0938A;font-weight:700;font-size:14px;letter-spacing:.02em;margin-bottom:6px;display:block}
.mnav-foot a{color:var(--on-dark);font-weight:700;font-size:19px;text-decoration:none}
.mnav-foot small{display:block;color:var(--on-dark-2);font-size:12.5px;margin-top:12px;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .wr,.mnav a.link{opacity:1!important;transform:none!important;transition:none!important}
  .doc-img img,.btn{transition:none!important}
}

/* — compact top bar on small screens — */
@media (max-width:640px){
  .top{font-size:11.5px}
  .top .w{height:34px;gap:10px}
  .top .em{white-space:nowrap;letter-spacing:0}
  .top .em i{width:5px;height:5px}
  .top .lang{flex:none}
}
@media (max-width:400px){.top .em{font-size:11px}}

/* — mobile collapse must beat per-page inline column styles — */
@media (max-width:900px){
  .dp{grid-template-columns:1fr!important}
  .stories{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  .statgrid{grid-template-columns:1fr!important}
}
.g2{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
@media (max-width:700px){.g2{grid-template-columns:1fr!important}}

/* ═══════════════════════════════════════════════════════════════
   Hero v3 — the portrait plate.
   The floating credential card is retired: the portrait is now a
   framed editorial plate on an offset mount, with the credentials
   as an attached nameplate below the image. One composed object —
   nothing overlaps, nothing can clip, at any viewport.
   ═══════════════════════════════════════════════════════════════ */
.hero-media{
  min-height:0;background:transparent;
  display:flex;align-items:center;justify-content:flex-end;
  padding:76px 0 76px 48px;
}
.hero-media::after{display:none}
.hero-copy{padding:76px 56px 76px 0}

.plate{position:relative;width:min(430px,100%);margin:0;box-shadow:var(--shadow-lg);z-index:1}
.plate::before{ /* the gallery mount — one quiet layer of depth */
  content:"";position:absolute;top:26px;left:26px;width:100%;height:100%;
  background:var(--mist-2);z-index:-1;
}
.plate-img{aspect-ratio:4/5;overflow:hidden;background:var(--mist);border:1px solid var(--rule);border-bottom:0}
.hero-media .plate-img img{position:static;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.plate-cap{background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--teal);padding:20px 24px 22px}
.pc-k{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
.plate-cap .n{font-family:Newsreader,Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.018em;line-height:1.08}
.plate-cap .r{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:6px;max-width:34ch}
.plate-cap .q{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-soft);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep)}

@media (max-width:960px){
  .hero-media{margin:0;padding:6px 0 30px;justify-content:stretch}
  .hero-copy{padding:48px 0 30px}
  .plate{width:100%}
  .plate::before{top:14px;left:14px}
  .plate-img{aspect-ratio:1/1}
  .hero-media .plate-img img{object-position:50% 12%}
  .plate-cap{padding:18px 20px 20px}
  .plate-cap .n{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════════
   Hero v4 — cinematic theatre panel (per client reference).
   Real photo of the surgeon operating, run full-bleed to the
   viewport's right edge, feathered into the paper ground on its
   exposed edges (paint-over gradients — the ground is solid, so
   this is a bulletproof mask). Credentials in a frosted glass
   panel over the image. Content unchanged.
   ═══════════════════════════════════════════════════════════════ */
.hero-media{position:relative;min-height:600px;padding:0;display:block}
.plate{display:none}
.cine{
  position:absolute;top:0;bottom:0;left:-24px;
  /* bleed beyond the container, but capped — on ultra-wide screens the
     panel must not pile all its mass against the right viewport edge */
  right:max(-150px, calc((1240px - 100vw)/2 - 32px));
}
.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:39% 50%}
.cine::after{ /* feather: left+top into paper, bottom into the mist ribbon below.
                 ::after, not ::before — it must paint OVER the positioned img */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,var(--paper) 0%,var(--paper) 5%,rgba(255,255,255,0) 36%),
    linear-gradient(270deg,var(--paper) 0%,rgba(255,255,255,0) 14%),
    linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 18%),
    linear-gradient(0deg,var(--mist) 0%,rgba(232,242,238,0) 13%);
}
.cine-cap{
  position:absolute;right:40px;bottom:44px;max-width:330px;z-index:2;
  background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.65);border-top:3px solid var(--teal);
  padding:20px 24px 22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}
.cine-cap .n{font-family:Newsreader,Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.018em;line-height:1.08}
.cine-cap .r{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:6px;max-width:34ch}
.cine-cap .q{margin-top:14px;padding-top:13px;border-top:1px solid rgba(18,49,65,.14);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep)}

@media (max-width:960px){
  .hero-media{min-height:0;margin:0 -20px;padding:0}
  .cine{position:relative;inset:auto;left:0;right:0;height:560px}
  .cine img{object-position:39% 45%}
  .cine::after{
    background:
      linear-gradient(180deg,var(--paper) 0%,rgba(255,255,255,0) 12%),
      linear-gradient(0deg,var(--mist) 0%,rgba(232,242,238,0) 12%);
  }
  .cine-cap{left:16px;right:16px;bottom:16px;max-width:none;padding:14px 18px 15px}
  .cine-cap .n{font-size:20px}
  .cine-cap .r{font-size:12px;margin-top:4px}
  .cine-cap .q{margin-top:10px;padding-top:9px;font-size:10px}
}

/* ═══ hero fold-fit: the full composition must land above the fold.
   Height-aware tiers — laptops tighten rhythm, big monitors keep scale. ═══ */
@media (min-width:961px) and (max-height:960px){
  .hero-copy{padding:46px 56px 46px 0}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{margin-bottom:18px}
  h1.display{font-size:clamp(38px,4.7vw,58px)}
  .hero .lede{font-size:17.5px;margin-bottom:24px;max-width:52ch}
  .hero-cta{margin-bottom:26px}
  .hero-chips{padding-top:16px}
  .chip b{font-size:23px}
  .hero-media{min-height:520px}
  .cine-cap{bottom:32px;padding:16px 20px 18px;max-width:300px}
  .cine-cap .n{font-size:22px}
}
@media (min-width:961px) and (max-height:830px){
  .hero-copy{padding:32px 56px 32px 0}
  h1.display{font-size:clamp(34px,4.1vw,48px)}
  .hero .lede{font-size:16.5px;margin-bottom:20px}
  .hero-cta{margin-bottom:20px}
  .hero-media{min-height:460px}
  .cine-cap{bottom:24px}
  .cine-cap .r{display:none} /* tightest fold: name + credential carry it */
}

/* — hero stat chips: one line on mobile, never a broken second row — */
@media (max-width:640px){
  .hero-chips{flex-wrap:nowrap;justify-content:space-between;gap:0}
  .chip{padding-right:12px;margin-right:12px;flex:0 1 auto}
  .chip:last-child{padding-right:0;margin-right:0}
  .chip b{font-size:21px}
  .chip span{font-size:9.5px;letter-spacing:.04em;white-space:nowrap}
}
@media (max-width:360px){
  .chip span{font-size:8.5px}
  .chip b{font-size:19px}
}

/* — official logo in the header: floats clean on the page, no plate,
     no rules. Typeset signature remains on dark surfaces (footer, menu)
     until the client supplies a white knockout version. — */
.brand-logo{display:flex;align-items:center}
.brand-logo img{display:block;height:44px;width:auto;transition:height .3s var(--ease)}
header.site.scrolled .brand-logo img{height:38px}
@media (max-width:640px){.brand-logo img{height:34px}}
@media (max-width:360px){.brand-logo img{height:30px}}

/* — symptom cue on the cancer index rows: the one warning sign that
     defines each cancer, right-aligned as quiet metadata. Fills the
     wide-screen void with the thing visitors actually scan for. — */
.elist a{grid-template-columns:38px 1fr auto auto}
.elist .cue{text-align:right;max-width:240px;line-height:1.45}
.elist .cue i{display:block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
.elist .cue{font-size:13px;color:var(--ink-2)}
.elist a:hover .cue{color:var(--ink)}
@media (max-width:900px){
  .elist a{grid-template-columns:26px 1fr}
  .elist .cue{grid-column:2;text-align:left;max-width:none;margin-top:6px}
  .elist .cue i{display:inline;margin-right:7px}
}

/* — embedded Google Maps: framed like our photography, lazy-loaded — */
.gmap{border:1px solid var(--rule);background:var(--mist)}
.gmap iframe{display:block;width:100%;height:250px;border:0}
.gmap-l{display:block;padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--teal);border-top:1px solid var(--rule)}
.gmap-l:hover{color:var(--teal-deep)}

/* — cost tables: numbers deserve typographic care — */
.tbl{overflow-x:auto;border:1px solid var(--rule);background:var(--paper);margin:18px 0}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tbl thead th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:var(--mist);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tbl td.free{color:var(--teal-deep);font-weight:700;white-space:nowrap}
.tbl tbody tr:hover{background:var(--mist)}

/* — Google reviews badge: real listing numbers, honest social proof — */
.gbadge{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--rule);padding:9px 14px;border-radius:4px;box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease)}
.gbadge:hover{box-shadow:var(--shadow-md)}
.gbadge svg{width:18px;height:18px;flex:none}
.gbadge .gb-r{font-weight:800;font-size:14.5px}
.gbadge .gb-s{color:#FBBC05;font-size:12.5px;letter-spacing:1px}
.gbadge .gb-c{font-size:12.5px;color:var(--ink-2);font-weight:600}

/* — Google Preferred Sources opt-in button — */
.psrc{display:inline-flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--rule);padding:12px 18px;border-radius:5px;box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.psrc:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.psrc svg{width:20px;height:20px;flex:none}
.psrc b{display:block;font-size:14px;letter-spacing:.01em}
.psrc small{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-top:1px}
.psrc i{font-style:normal;color:#FBBC05;font-size:16px}

/* — staging preview bar (never renders in production) — */
.stagebar{background:#B96F16;color:#fff;font-size:12.5px;text-align:center;padding:7px 16px;line-height:1.45}
.stagebar b{font-weight:800;letter-spacing:.02em}

/* — gallery grid — */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gal{grid-template-columns:1fr}}
.gal-i{margin:0;border:1px solid var(--rule);background:var(--mist);overflow:hidden;position:relative}
.gal-i img,.gal-i video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .9s var(--ease)}
.gal-i:hover img,.gal-i:hover video{transform:scale(1.04)}
.gal-i figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(10,26,34,.82),transparent)}

/* ─────────────────────────────────────────────────────────────────────────
   हिन्दी — Devanagari typography
   Only loaded on /hi/ pages (see partials/header.php).

   Substituting the fonts is not enough. Devanagari sits on a headline
   (शिरोरेखा) and carries conjuncts and matras above and below the line, so
   settings tuned for Latin actively damage it:
     · negative letter-spacing breaks conjunct ligatures apart
     · the Latin line-heights clip matras (ि ी ु ू े ै ो ौ ं ँ)
     · uppercase + wide tracking is meaningless — Devanagari has no case
   The rules below undo each of those for Hindi pages only; the English
   design is untouched.
   ───────────────────────────────────────────────────────────────────────── */
html[lang="hi"] body            { font-family:Mukta,"Noto Sans Devanagari",system-ui,sans-serif; line-height:1.75; }
html[lang="hi"] .display,
html[lang="hi"] .brand,
html[lang="hi"] .chip b,
html[lang="hi"] .cred-card .n,
html[lang="hi"] .ribbon .v,
html[lang="hi"] .elist .ti     { font-family:"Noto Serif Devanagari",Mukta,serif; }
/* Devanagari needs its tracking left alone and more room above the line. */
html[lang="hi"] .display        { letter-spacing:0; line-height:1.32; }
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] .elist .ti,
html[lang="hi"] .cred-card .n,
html[lang="hi"] .ribbon .v      { letter-spacing:0; line-height:1.45; }
/* No case in Devanagari: uppercasing an eyebrow does nothing but add tracking
   that pulls conjuncts apart. */
html[lang="hi"] .eyebrow,
html[lang="hi"] .brand small    { text-transform:none; letter-spacing:.02em; }
/* The brand mark and phone numbers stay Latin even in Hindi: "CoreOnco" is a
   name, not a word to translate, and a number you are meant to dial belongs in
   the digits on the keypad. */
html[lang="hi"] .brand          { font-family:Newsreader,Georgia,serif; }
html[lang="hi"] a[href^="tel:"] { font-family:Manrope,system-ui,sans-serif; font-variant-numeric:tabular-nums; }

/* Three surgeons, one row — homepage, About and the doctors hub.
   .docs is a 2-up grid, which with three doctors left the third orphaned
   beside an empty cell. Three across, each card is ~370px: too narrow for
   the side-by-side portrait/text split, so the card turns vertical —
   portrait on top, credentials beneath.
   Grid stretch keeps the three cards the same height whatever the bio
   length, and the profile link is pushed to the bottom so the three sit on
   one line rather than wherever their paragraph happens to end. */
.docs.row3{grid-template-columns:repeat(3,1fr);gap:24px}
.docs.row3 .doc{grid-template-columns:1fr}
.docs.row3 .doc-img{min-height:0;aspect-ratio:4/3}
.docs.row3 .doc-img.ph{font-size:38px}
.docs.row3 .doc-b{padding:22px 22px 20px;display:flex;flex-direction:column}
.docs.row3 .doc-b .doc-l{margin-top:auto}
/* Below three-across, fall back to the wide row card, then to stacked. */
@media (max-width:980px){
  .docs.row3{grid-template-columns:1fr}
  .docs.row3 .doc{grid-template-columns:220px 1fr}
  .docs.row3 .doc-img{aspect-ratio:auto;min-height:230px}
}
@media (max-width:560px){
  .docs.row3 .doc{grid-template-columns:1fr}
  .docs.row3 .doc-img{aspect-ratio:4/3;min-height:0}
}

/* ── skip link + modal menu support (CTO audit D03) ── */
.skip{position:absolute;left:16px;top:-60px;z-index:400;background:var(--teal);color:#fff;padding:10px 16px;border-radius:3px;font-weight:600}
.skip:focus{top:12px}
[inert]{pointer-events:none;user-select:none}
/* The closed menu must be out of the tab order, not merely invisible. */
.mnav:not(.open){visibility:hidden}

/* ── claim-level references (CTO audit F12) ── */
.refs{padding-left:20px;margin:0 0 28px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.refs li{margin-bottom:12px}
.refs a{color:var(--teal);font-weight:600;word-break:break-word}
.refs small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}

/* Translated patient quote. A testimonial is somebody's own words; where the
   Hindi site shows a rendering of them, it says so rather than putting Hindi
   in quotation marks under the author's name. */
.qt-tr{margin-top:8px;font-size:12.5px;letter-spacing:.02em;color:var(--ink-3);font-style:italic}

/* Devanagari has no italic. Browsers fake one by shearing the glyphs, which
   skews the conjuncts and the शिरोरेखा and closes up the space after the
   emphasised run — on the homepage it ran "स्तर" straight into "की". Hindi
   marks emphasis with colour and weight instead, so that is what /hi/ gets.
   Weight carries it as well as colour, for readers who do not separate the
   two hues. The English italics are untouched. */
html[lang="hi"] em              { font-style:normal; }
html[lang="hi"] .hero h1 em,
html[lang="hi"] .afford h1 em,
html[lang="hi"] .afford h2 em   { font-style:normal; font-weight:700; }