/* One variable file covers 200 to 800. It used to be declared six times as six
   byte-identical copies, so the browser fetched it six times and swapped six times. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/PlusJakartaSans-latin.woff2) format('woff2')}

:root{
  --head-h:76px;
  --bg:        oklch(0.985 0.004 170);
  --panel:     oklch(1 0 0);
  --tint:      oklch(0.962 0.020 178);
  --tint-deep: oklch(0.928 0.038 178);
  --line:      oklch(0.918 0.008 180);
  --ink:       oklch(0.255 0.020 200);
  --ink-2:     oklch(0.415 0.018 200);
  --muted:     oklch(0.510 0.014 195);
  --brand:     oklch(0.649 0.114 183);
  --brand-ink: oklch(0.470 0.088 185);
  --brand-dk:  oklch(0.395 0.072 186);
  --on-brand:  oklch(0.995 0.004 180);
  --amber:     oklch(0.780 0.130 75);
  --deep:      oklch(0.300 0.055 186);
  --deep-2:    oklch(0.420 0.072 184);
  --on-deep:   oklch(0.985 0.006 180);

  --f: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --s--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --s-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --s-1:  clamp(1.20rem, 1.10rem + 0.45vw, 1.45rem);
  --s-2:  clamp(1.55rem, 1.32rem + 1.05vw, 2.30rem);
  --s-3:  clamp(2.05rem, 1.60rem + 2.00vw, 3.30rem);
  --s-4:  clamp(2.05rem, 1.45rem + 3.30vw, 4.60rem);

  --r:   14px;
  --r-l: 22px;
  --r-xl:30px;
  --pad: clamp(1.15rem, 4vw, 2.75rem);
  --wrap:78rem;

  --sh-s: 0 1px 2px oklch(0.30 0.02 200 / .06), 0 2px 8px oklch(0.30 0.02 200 / .05);
  --sh-m: 0 2px 6px oklch(0.30 0.02 200 / .06), 0 12px 28px oklch(0.30 0.02 200 / .08);
  --sh-b: 0 10px 24px oklch(0.45 0.09 184 / .16), 0 3px 8px oklch(0.45 0.09 184 / .12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:calc(var(--head-h) + .5rem)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:var(--s-0);line-height:1.65;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased
}
img{max-inline-size:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.022em;font-weight:300;text-wrap:balance}
h1{font-size:var(--s-4);font-weight:200;letter-spacing:-.028em;line-height:1.06}
h2{font-size:var(--s-3)}
h3{font-size:var(--s-1);font-weight:600;letter-spacing:-.02em;line-height:1.3}
p{margin:0}
a{color:var(--brand-ink)}
:focus-visible{outline:3px solid var(--brand-ink);outline-offset:3px;border-radius:8px}
.has-hero .top:not(.stuck) :focus-visible{outline-color:#fff}
/* inside overflow:hidden containers a positive offset is clipped to nothing */
.qa summary:focus-visible,.hub a:focus-visible,.map-load:focus-visible{outline-offset:-4px}
.skip{position:absolute;inset-block-start:-100vh;inset-inline-start:0;background:var(--brand);color:var(--on-brand);padding:.9rem 1.4rem;z-index:99;border-radius:0 0 var(--r) 0}
.skip:focus{inset-block-start:0}

.wrap{inline-size:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,8vw,7rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--tint);color:var(--brand-dk);
  font-size:var(--s--1);font-weight:700;
  padding:.5rem 1rem;border-radius:999px;margin-block-end:1.25rem
}
.eyebrow::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--brand)}
.lead{font-size:var(--s-1);color:var(--ink-2);line-height:1.6;max-inline-size:41em}
.sub{color:var(--muted);max-inline-size:45em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-block-size:52px;padding:.9rem 1.6rem;border:0;border-radius:999px;
  background:var(--brand-ink);color:var(--on-brand);text-decoration:none;
  font-family:var(--f);font-size:var(--s-0);font-weight:700;letter-spacing:-.01em;
  box-shadow:var(--sh-b);cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease
}
.btn:hover{background:var(--brand-dk);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-2{background:var(--panel);color:var(--ink);box-shadow:var(--sh-s);border:1px solid var(--line)}
.btn-2:hover{background:var(--tint);border-color:var(--brand);color:var(--brand-dk)}

/* ---------------- header ---------------- */
.top{position:sticky;inset-block-start:0;z-index:40;background:oklch(0.985 0.004 170 / .88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block-end:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
/* Only a page with the teal hero behind the header gets the light-on-dark
   treatment. Inner pages have a pale ground and would render white on white. */
.has-hero .top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.has-hero .top .brand{color:var(--on-deep)}
.has-hero .top .brand i{color:oklch(0.900 0.030 178)}
.has-hero .top .brand .gl{background:var(--on-deep)}
.has-hero .top .nav a{color:oklch(0.940 0.016 178)}
.has-hero .top .nav a:hover{background:oklch(1 0 0 / .16);color:var(--on-deep)}
.has-hero .top #navCall{background:var(--panel);color:var(--brand-dk);box-shadow:0 8px 20px oklch(0.20 0.04 190 / .20)}
.has-hero .top #navCall:hover{background:oklch(0.965 0.014 178);color:var(--brand-dk)}
.top.stuck{background:oklch(0.985 0.004 170 / .88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.top.stuck .brand{color:var(--ink)}
.top.stuck .brand i{color:var(--muted)}
.top.stuck .brand .gl{background:var(--brand)}
.top.stuck .nav a{color:var(--ink-2)}
.top.stuck .nav a:hover{background:var(--tint);color:var(--brand-dk)}
.top.stuck #navCall{background:var(--brand-ink);color:var(--on-brand);box-shadow:var(--sh-b)}
.top.stuck{border-block-end-color:var(--line);box-shadow:var(--sh-s)}
.top .wrap{display:flex;align-items:center;gap:1.25rem;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);margin-inline-end:auto}
.brand .gl{inline-size:42px;block-size:36px;flex:none;background:var(--brand);-webkit-mask:url(logo-mask.png) center/contain no-repeat;mask:url(logo-mask.png) center/contain no-repeat}
.brand b{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.03em;line-height:1.15}
.brand i{display:block;font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600}
/* The short label exists only for phones; declared before the phone block so
   the phone block can turn it on. */
.top .btn .short{display:none}
@media (max-width:430px){
  .brand b{font-size:.88rem}
  .brand i{display:none}
  .brand .gl{inline-size:34px;block-size:29px}
  .top .wrap{gap:.6rem}
  .top #navCall{padding-inline:.95rem;font-size:.82rem}
  .top .wrap .btn{white-space:nowrap}
  .top .btn .full{display:none}
  .top .btn .short{display:inline}
  .lang-sw{padding-inline:.6rem}
}
.nav{display:flex;gap:.35rem}
.nav a{font-size:.94rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:.7rem .85rem;border-radius:999px;display:inline-flex;align-items:center;min-block-size:44px;transition:background .18s ease,color .18s ease}
.nav a:hover{background:var(--tint);color:var(--brand-dk)}
@media (max-width:1100px){.nav{display:none}}
@media (min-width:1101px){.brand b,.nav a,.lang-sw,#navCall{white-space:nowrap}}
/* The language switch sits outside .nav on purpose. The nav collapses below
   1000px and the Telugu audience is overwhelmingly on phones, so a Telugu link
   that only survives in the footer is a Telugu link nobody finds. */
.lang-sw{font-size:.92rem;font-weight:700;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:.55rem .8rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
  display:inline-flex;align-items:center;min-block-size:44px;transition:background .18s ease,color .18s ease}
.lang-sw:hover{background:var(--tint);color:var(--brand-dk)}
.has-hero .top .lang-sw{color:oklch(0.940 0.016 178);box-shadow:inset 0 0 0 1px oklch(1 0 0 / .35)}
.has-hero .top .lang-sw:hover{background:oklch(1 0 0 / .16);color:var(--on-deep)}
.has-hero .top.stuck .lang-sw{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:560px){.lang-sw{padding-inline:.65rem;font-size:.86rem}}
@media (max-width:560px){.top .wrap .btn{padding-inline:1.1rem;font-size:var(--s--1);min-block-size:46px}}

/* ---------------- hero ---------------- */
.hero{
  position:relative;isolation:isolate;
  margin-block-start:calc(-1 * var(--head-h));
  padding-block:calc(var(--head-h) + min(clamp(2rem,4vw,3.5rem), 4svh)) 0;
  background:linear-gradient(176deg,
    var(--deep) 0%, var(--deep-2) 26%,
    oklch(0.640 0.072 181) 52%, oklch(0.870 0.030 176) 76%, var(--bg) 100%);
  color:var(--on-deep)
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(oklch(1 0 0 / .18) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
  mask-image:linear-gradient(180deg,#000,transparent 62%)
}
.hero .wrap{display:grid;gap:clamp(2rem,4vw,3rem);align-items:end}
@media (min-width:980px){.hero .wrap{grid-template-columns:1.02fr .98fr}}
.hero-copy{padding-block-end:min(clamp(2.5rem,6vw,5rem), 4svh)}
/* Everything in the hero takes the smaller of its width-based size and a
   height-based cap, so a short viewport shrinks it without any breakpoint.
   The headline runs to three lines, hence the divide by roughly that. */
.hero h1{font-size:min(var(--s-4), 7.6svh)}
.hero .lead{font-size:min(var(--s-1), 2.9svh);line-height:1.5}
.hero-cta{margin-block-start:min(2.25rem, 3.2svh)}
.hero-note{margin-block-start:min(2rem, 2.8svh)}
.hero .eyebrow{margin-block-end:min(1.25rem, 2.6svh)}
.hero h1{margin-block-end:min(1.5rem, 3svh)}
/* Landscape phone only needs the column change; the sizes below handle themselves. */
@media (max-height:560px) and (min-width:600px){
  .hero .wrap{grid-template-columns:1.15fr .85fr;align-items:center;gap:1.5rem}
  .hero .eyebrow{display:none}
}

@media (max-width:520px){
  /* get a call button inside the first screen on a small phone */
  .hero{padding-block-start:calc(var(--head-h) + 1.25rem)}
  .hero h1{margin-block-end:1rem;line-height:1.04}
  .hero .lead{font-size:1.02rem;line-height:1.5}
  .hero-cta{margin-block-start:1.5rem;gap:.6rem}
  .hero-cta .btn{inline-size:100%}
  .hero-note{margin-block-start:1.25rem}
  .eyebrow{margin-block-end:1rem;font-size:.8rem;padding:.45rem .85rem}
  .hero h1{font-weight:300}
  .hero h1 em{font-weight:400}
}
.hero h1{margin-block-end:1.5rem;color:var(--on-deep);max-inline-size:11.7em}
.hero h1 em{font-style:normal;font-weight:300;color:oklch(0.900 0.055 178)}
.hero .lead{color:oklch(0.972 0.010 178);max-inline-size:35em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:2.25rem}
.hero .btn{background:var(--panel);color:var(--brand-dk);box-shadow:0 10px 26px oklch(0.20 0.04 190 / .22)}
.hero .btn:hover{background:oklch(0.965 0.014 178);color:var(--brand-dk)}
.hero .btn-2{background:oklch(0.300 0.055 186 / .80);color:var(--on-deep);border:1px solid oklch(1 0 0 / .34);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn-2:hover{background:oklch(0.300 0.055 186 / .92);color:var(--on-deep);border-color:oklch(1 0 0 / .55)}
/* a chip, because low in the hero the gradient is too pale for light text */
.hero-note{
  display:inline-flex;align-items:center;gap:.55rem;margin-block-start:2rem;
  background:var(--panel);color:var(--brand-dk);
  padding:.6rem 1.1rem;border-radius:999px;box-shadow:var(--sh-m);
  font-size:var(--s--1);font-weight:600;max-inline-size:100%
}
.hero-note .pulse{background:var(--brand);box-shadow:0 0 0 0 oklch(0.649 0.114 183 / .5)}

/* the figure, with hotspots on the joints he operates on */
.anat{position:relative;margin:0 auto;inline-size:fit-content;max-inline-size:100%}
.anat picture{display:block}
.anat img{
  block-size:min(55svh,40rem);inline-size:auto;max-inline-size:100%;display:block;
  filter:drop-shadow(0 24px 48px oklch(0.20 0.04 190 / .22))
}
@media (max-width:979px){.anat img{block-size:min(52svh,26rem)}}
@media (max-width:520px){.anat img{block-size:min(40svh,20rem)}}
.spot{
  position:absolute;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--panel);border:1px solid oklch(0 0 0 / .06);border-radius:999px;
  padding:.32rem .95rem .32rem .32rem;color:var(--brand-dk);transform:translateY(-50%);
  box-shadow:var(--sh-m);
  font-size:.82rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;min-block-size:44px;transition:background .18s ease
}
.spot:hover{background:var(--tint)}
.spot b{
  inline-size:24px;block-size:24px;border-radius:50%;background:var(--brand-ink);color:var(--on-brand);
  display:grid;place-items:center;font-size:.95rem;font-weight:600;line-height:1;flex:none
}
.spot-1{inset-block-start:23%;inset-inline-end:82%}   /* shoulder */
.spot-2{inset-block-start:43%;inset-inline-start:84%}  /* elbow    */
.spot-3{inset-block-start:52%;inset-inline-end:86%}    /* hip      */
.spot-4{inset-block-start:72%;inset-inline-start:80%}  /* knee     */
@media (max-width:900px){
  .spot{font-size:.8rem;padding-inline-end:.75rem}
  .spot-1{inset-inline-end:74%}.spot-2{inset-inline-start:76%}
  .spot-3{inset-inline-end:78%}.spot-4{inset-inline-start:72%}
}
.pulse{inline-size:9px;block-size:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 oklch(0.649 0.114 183 / .5);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 12px oklch(0.649 0.114 183 / 0)}100%{box-shadow:0 0 0 0 oklch(0.649 0.114 183 / 0)}}

.shot{position:relative;isolation:isolate}
.shot .frame{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--tint);box-shadow:var(--sh-m);aspect-ratio:4/4.5}
.shot .frame img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 14%}
.blob{position:absolute;inset-block-start:-5%;inset-inline-end:-7%;inline-size:56%;aspect-ratio:1;border-radius:50%;background:var(--tint-deep);z-index:-1}
.chip-float{position:absolute;background:var(--panel);border-radius:var(--r);box-shadow:var(--sh-m);padding:.8rem 1rem;display:flex;align-items:center;gap:.7rem}
.chip-float b{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--brand-ink)}
.chip-float i{font-style:normal;font-size:.75rem;color:var(--muted);font-weight:600;line-height:1.3}
.chip-a{inset-block-end:1.25rem;inset-inline-start:-.6rem}
.chip-b{inset-block-start:1.5rem;inset-inline-end:-.6rem}
@media (max-width:600px){.chip-a{inset-inline-start:.4rem}.chip-b{inset-inline-end:.4rem}}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media (min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{background:var(--panel);padding:1.5rem 1.25rem;text-align:center}
.stats b{display:block;font-size:var(--s-2);font-weight:800;letter-spacing:-.04em;color:var(--brand-ink);line-height:1}
.stats i{display:block;font-style:normal;margin-block-start:.45rem;font-size:var(--s--1);color:var(--muted);font-weight:600}

/* ---------------- cards ---------------- */
.head{max-inline-size:34em;margin-block-end:clamp(2rem,4vw,3rem)}
.head p{margin-block-start:.9rem}
.grid{display:grid;gap:1.15rem}
@media (min-width:660px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:var(--tint-deep)}
.card .ic{inline-size:48px;block-size:48px;border-radius:14px;background:var(--tint);display:grid;place-items:center;margin-block-end:.5rem;color:var(--brand-dk)}
.card .ic svg{inline-size:25px;block-size:25px;display:block}
.card p{color:var(--muted);font-size:.98rem}
.card .tag{margin-block-start:auto;padding-block-start:.9rem;font-size:.78rem;font-weight:700;color:var(--brand-ink)}
/* On a phone the icon sits beside the text rather than above it: seven cards
   go from three screens to under two, and nothing is cut. */
@media (max-width:659px){
  .card{padding:1.1rem 1.2rem;display:grid;grid-template-columns:40px 1fr;column-gap:.85rem;row-gap:.2rem}
  .card .ic{inline-size:40px;block-size:40px;margin:0;grid-row:1/4;border-radius:11px}
  .card .ic svg{inline-size:22px;block-size:22px}
  .card h3,.card p,.card .tag{grid-column:2}
  .card p{font-size:.92rem}
  .card .tag{padding-block-start:.4rem}
}

/* ---------------- router ---------------- */
.router{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:1.75rem}
.router button{
  font-family:var(--f);font-size:.92rem;font-weight:600;
  background:var(--panel);color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:.6rem 1.15rem;min-block-size:46px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease
}
.router button:hover{border-color:var(--brand);color:var(--brand-dk);box-shadow:var(--sh-s)}
.router button[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand);box-shadow:var(--sh-b)}
.card[hidden]{display:none}

/* ---------------- explainers ---------------- */
.posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin:0;padding:0;list-style:none}
@media (min-width:760px){.posts{grid-template-columns:repeat(2,1fr)}}
.posts li{background:var(--panel);transition:background .18s ease}
.posts li:hover{background:var(--tint)}
.posts a{display:grid;gap:.25rem;padding:1.15rem 1.35rem;text-decoration:none;color:var(--ink)}
.posts a:hover .what{text-decoration:underline}
.posts .when{font-size:.8rem;font-weight:700;color:var(--brand-ink)}
.posts .what{font-weight:600;letter-spacing:-.015em;line-height:1.4}

/* ---------------- week ---------------- */
.week{background:var(--tint)}
.days{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:0;margin:0;list-style:none}
@media (min-width:600px){.days{grid-template-columns:repeat(4,1fr)}}
/* seven across only once each cell can hold "Apollo, Hyderabad" without spilling */
@media (min-width:1040px){.days{grid-template-columns:repeat(7,1fr)}}
@media (min-width:600px) and (max-width:1039px){.day:last-child{grid-column:span 2}}
.week-call{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:1.75rem}
.day{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1rem .85rem;min-block-size:8.5rem;min-inline-size:0;display:flex;flex-direction:column;gap:.35rem}
.day .dc{overflow-wrap:anywhere}
.day .dn{font-size:.8rem;font-weight:700;color:var(--muted)}
.day .dc{font-weight:700;font-size:.95rem;line-height:1.25;letter-spacing:-.02em}
.day .dh{margin-block-start:auto;font-size:.8rem;color:var(--muted);font-weight:600}
.day.today{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand);box-shadow:var(--sh-b)}
.day.today .dn,.day.today .dh{color:var(--on-brand);opacity:.92}
.day.shut .dc{color:var(--muted);font-weight:600}
/* Phones get the seven day initials in one strip with today filled, and one
   sentence underneath. The five identical Hyderabad cards said nothing the H2
   did not already say. */
.week-line{display:none;margin-block-start:1rem;font-size:.95rem}
@media (max-width:599px){
  .days{grid-template-columns:repeat(7,1fr);gap:.35rem}
  .day{min-block-size:0;padding:.7rem .15rem;align-items:center;text-align:center;border-radius:10px}
  .day .dc,.day .dh{display:none}
  .day .dn{font-size:.8rem}
  .week-line{display:block}
}

/* ---------------- timeline ---------------- */
.tl{display:grid;gap:0;margin:0;padding:0}
.tl li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;padding-block:1.05rem;border-block-end:1px solid var(--line)}
@media (min-width:720px){.tl li{grid-template-columns:10rem 1fr;align-items:baseline}}
.tl .yr{font-size:.86rem;font-weight:700;color:var(--brand-ink)}
.tl .wt{font-weight:700;letter-spacing:-.02em}
.tl .wh{color:var(--muted);font-size:.95rem}
.tl li.key{background:var(--tint);border-radius:var(--r);padding-inline:1rem;border-block-end-color:transparent}

/* ---------------- about ---------------- */
.about{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:start}
@media (min-width:900px){.about{grid-template-columns:20rem 1fr}}
.face{position:relative;margin:0;isolation:isolate;max-inline-size:22rem}
.face .blob{position:absolute;inset-block-start:-7%;inset-inline-start:-9%;inline-size:62%;aspect-ratio:1;border-radius:50%;background:var(--tint-deep);z-index:-1}
@media (max-width:899px){.face .blob{inset-block-start:0}}
.face picture{display:block;border-radius:var(--r-xl);overflow:hidden;background:var(--tint);box-shadow:var(--sh-m)}
.face img{inline-size:100%;block-size:auto;display:block}
.face figcaption{margin-block-start:1rem}
.face figcaption b{display:block;font-weight:700;letter-spacing:-.02em}
.face figcaption span{display:block;font-size:.86rem;color:var(--muted);margin-block-start:.15rem}

/* ---------------- reviews ---------------- */
.quotes{display:grid;gap:1.15rem}
@media (min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:1.6rem;display:flex;flex-direction:column;gap:.9rem;margin:0}
.stars{color:var(--amber);font-size:1.05rem;letter-spacing:.12em;line-height:1}
.quote p{font-size:1.02rem;color:var(--ink-2)}
.quote cite{font-style:normal;font-size:.8rem;color:var(--muted);font-weight:600;margin-block-start:auto}


/* ---------------- faq ---------------- */
.qas{display:grid;gap:.85rem}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.qa[open]{border-color:var(--tint-deep);box-shadow:var(--sh-s)}
.qa summary{
  list-style:none;cursor:pointer;padding:1.25rem 3.25rem 1.25rem 1.5rem;position:relative;
  font-weight:700;font-size:var(--s-0);letter-spacing:-.02em;color:var(--ink);line-height:1.45
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;inset-inline-end:1.4rem;inset-block-start:1.55rem;
  inline-size:11px;block-size:11px;border-inline-end:2px solid var(--brand);border-block-end:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .25s ease
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa summary:hover{color:var(--brand-ink)}
.qa > div{padding:0 1.5rem 1.4rem;color:var(--muted);max-inline-size:51em}

/* ---------------- booking ---------------- */
.book{background:var(--tint)}
.bookgrid{display:grid;gap:1.5rem}
@media (min-width:960px){.bookgrid{grid-template-columns:1.15fr .85fr;align-items:start}}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2rem);display:grid;gap:1.25rem;box-shadow:var(--sh-s)}
.steps{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.steps li{font-size:.8rem;font-weight:700;color:var(--muted);background:var(--tint);padding:.4rem .8rem;border-radius:999px}
.steps li.on{background:var(--brand-ink);color:var(--on-brand)}
.fs{border:0;padding:0;margin:0;display:grid;gap:.7rem;transition:opacity .25s ease}
.fs.off{opacity:.6}
.fs legend{font-size:.8rem;font-weight:700;color:var(--ink-2);padding:0;margin-block-end:.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips.scroll{max-block-size:none;overflow:visible}
.chip{font-family:var(--f);font-size:.86rem;font-weight:600;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;min-block-size:48px;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;line-height:1.3;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.chip small{color:var(--muted);font-size:.8rem;font-weight:600}
.chip:hover{border-color:var(--brand);box-shadow:var(--sh-s)}
.chip[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.chip[aria-pressed="true"] small{color:var(--on-brand);opacity:.9}
.two{display:grid;gap:.7rem}
@media (min-width:540px){.two{grid-template-columns:1fr 1fr}}
label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-2);margin-block-end:.35rem}
input{inline-size:100%;font:inherit;font-size:var(--s-0);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;min-block-size:50px}
input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px oklch(0.649 0.114 183 / .16)}
.summary{font-size:.92rem;color:var(--muted);font-weight:600;padding-block-start:.9rem;border-block-start:1px solid var(--line)}
.summary b{color:var(--brand-ink)}
.fine{font-size:.82rem;color:var(--muted)}
#go[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

.places{display:grid;gap:1.15rem}
.place{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:1.5rem;display:grid;gap:.7rem}
.place .when{font-size:.78rem;font-weight:700;color:var(--brand-ink)}
.place address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.55}
.place address a{color:var(--brand-ink);font-weight:700;text-decoration:none}
.place .map{block-size:8.5rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0}
.place .map iframe{inline-size:100%;block-size:100%;border:0;display:block}
.map-load{
  inline-size:100%;block-size:100%;border:0;cursor:pointer;background:var(--tint);text-decoration:none;
  display:grid;place-content:center;gap:.15rem;font-family:var(--f);color:var(--brand-dk);
  transition:background .18s ease
}
.map-load:hover{background:var(--tint-deep)}
.map-load .mi{font-size:1.4rem;line-height:1}
.map-load .mt{font-weight:700;font-size:.94rem}
.map-load .ms{font-size:.8rem;color:var(--muted)}
.place .row{display:flex;flex-wrap:wrap;gap:.6rem}
.place .row .btn{min-block-size:46px;padding:.7rem 1.15rem;font-size:.9rem}

/* ---------------- footer ---------------- */
.foot{background:var(--panel);border-block-start:1px solid var(--line);padding-block:clamp(2.5rem,6vw,4rem) 2rem}
.fgrid{display:grid;gap:1.75rem}
@media (min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
.foot h4{font-size:.78rem;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-block-end:.7rem}
.foot address{font-style:normal;color:var(--muted);font-size:.95rem;line-height:1.65}
.foot a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.foot address a{display:inline-block;min-block-size:44px;line-height:44px;padding-inline-end:.35rem}
.foot a:hover{text-decoration:underline}
.colophon{margin-block-start:2.25rem;padding-block-start:1.25rem;border-block-start:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.82rem;color:var(--muted)}

/* ---------------- motion ---------------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .pulse{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{.js .rv{opacity:1;transform:none}}

/* ---------- Telugu ---------- */
/* No webfont: every Indian phone and Windows machine ships a Telugu face
   already, and a subset of a conjunct script is both large and easy to break.
   Zero bytes, correct shaping. */
:lang(te),[lang="te"]{font-family:'Nirmala UI','Noto Sans Telugu','Gautami','Pothana2000',
  'Telugu Sangam MN',var(--f),system-ui,sans-serif;line-height:1.75}
:lang(te) :is(h1,h2,h3){letter-spacing:0;line-height:1.35;text-wrap:balance}
:lang(te) .art-head h1{font-weight:400;line-height:1.3}
:lang(te) .hero h1{font-weight:400}
:lang(te) .callout .mono{letter-spacing:0;text-transform:none;font-size:.85rem}

/* ---------- article pages ---------- */
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--muted);margin-block-end:1.25rem;flex-wrap:wrap}
.crumb a{color:var(--brand-ink);text-decoration:none;font-weight:600}
.crumb a:hover{text-decoration:underline}
.article{padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem)}
.article .wrap{display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
.art-head{max-inline-size:36rem}
.art-head h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:300;letter-spacing:-.028em;line-height:1.1}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--muted);font-size:.86rem;font-weight:600;margin-block-start:1rem}
.art-meta .pill{background:var(--tint);color:var(--brand-dk);padding:.25rem .7rem;border-radius:99px}
.byline{margin-block-start:.6rem;font-size:.9rem;color:var(--muted)}
.byline a{color:var(--ink);font-weight:700;text-decoration:none}
.byline a:hover{color:var(--brand-ink)}
.author{display:grid;grid-template-columns:4rem 1fr;gap:1.1rem;align-items:start;max-inline-size:40em;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:1.25rem}
.author picture{display:block;inline-size:4rem;block-size:4rem;border-radius:50%;overflow:hidden;background:var(--tint)}
.author img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 12%}
.author b{display:block;font-weight:700;letter-spacing:-.02em;margin-block-end:.25rem}
.author p{color:var(--muted);font-size:.92rem;margin-block-end:.5rem}
.author a{color:var(--brand-ink);font-weight:700;text-decoration:none;font-size:.9rem}
.prose{max-inline-size:40em;display:grid;gap:1.75rem}
.prose > p{color:var(--ink-2);font-size:1.06rem}
.prose h2{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;margin-block-start:.5rem}
.prose ul{margin:0;padding-inline-start:1.15rem;display:grid;gap:.7rem;color:var(--ink-2)}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--ink);font-weight:700}
.callout{background:var(--tint);border-inline-start:4px solid var(--brand-ink);border-radius:0 var(--r) var(--r) 0;padding:1.15rem 1.35rem;display:grid;gap:.4rem}
.callout .mono{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dk);font-weight:700}
.callout p{color:var(--ink-2);margin:0}
.review-flag{background:var(--amber-wash,#F7EDDD);border:1px dashed #B98B3A;border-radius:var(--r);padding:1rem 1.25rem;display:grid;gap:.3rem;color:#7A5410}
.review-flag .mono{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.review-flag code{font-family:ui-monospace,monospace;font-size:.86em;background:rgba(0,0,0,.05);padding:.1em .35em;border-radius:4px}
.art-cta{background:var(--tint);border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.25rem);display:grid;gap:1rem;max-inline-size:40em}
.art-cta h2{font-size:var(--s-1);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.art-cta p{color:var(--ink-2)}
.art-cta .row{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:560px){.art-cta .row .btn{inline-size:100%}}
.art-cta .fine a{color:var(--brand-ink);font-weight:700;text-decoration:none}
.more{border-block-start:1px solid var(--line);padding-block-start:1.75rem;display:grid;gap:1rem;max-inline-size:40em}
.more h2{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.more ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.more a{color:var(--ink);text-decoration:none;font-weight:600}
.more a:hover{color:var(--brand-ink)}
.more span{display:block;color:var(--muted);font-weight:400;font-size:.8rem}

/* ---------- article hub ---------- */
.hub{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media (min-width:820px){.hub{grid-template-columns:repeat(2,1fr)}}
.hub a{background:var(--panel);padding:1.4rem 1.5rem;display:grid;gap:.45rem;text-decoration:none;color:var(--ink);transition:background .18s ease}
.hub a:hover{background:var(--tint)}
.hub .t{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;line-height:1.35}
.hub .t::after{content:" →";color:var(--brand)}
.hub .d{color:var(--muted);font-size:.94rem}
.hub .m{font-size:.82rem;color:var(--brand-ink);font-weight:700}

/* ---------- clinic pages ---------- */
.clinic-hero{background:var(--tint);padding-block:clamp(2.5rem,6vw,4rem)}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;max-inline-size:52rem}
.facts div{background:var(--panel);padding:1.1rem 1.35rem;display:grid;gap:.2rem}
@media (min-width:640px){.facts div{grid-template-columns:11rem 1fr;gap:1.25rem;align-items:baseline}}
.facts dt,.facts .k{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.facts .v{color:var(--ink-2)}

/* ---------- Telugu landing ---------- */
/* The Telugu front page uses the same hero component as the English one. */
.te-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media (min-width:640px){.te-grid{grid-template-columns:repeat(2,1fr)}.te-grid div:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:960px){.te-grid{grid-template-columns:repeat(3,1fr)}}
.te-grid div{background:var(--panel);padding:1.2rem 1.35rem;display:grid;gap:.3rem}
.te-grid b{font-weight:700;color:var(--ink)}
.te-grid span{color:var(--muted);font-size:.94rem}
.facts a{color:var(--brand-ink);text-decoration:none;font-weight:600}
.map.big{block-size:16rem;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);margin:0;max-inline-size:52rem}
.map.big iframe{inline-size:100%;block-size:100%;border:0;display:block}
.sees{max-inline-size:40em}