/* ==========================================================================
   Bones & Joints Clinic — site.css
   Design system aligned to Aescora Brand Identity v1.0
   Midnight Navy #082B4C · Clinical Teal #00A6A6 · Warm Gold #E6AD3C
   Heritage Sage #6BAF92 carried over from the B&J clinic logo.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy:        #082B4C;
  --navy-deep:   #04192E;
  --navy-soft:   #1B4269;
  --teal:        #00A6A6;
  --teal-dark:   #00807F;
  --teal-wash:   #E6F5F5;
  --sage:        #6BAF92;
  --sage-wash:   #EDF5F1;
  --gold:        #E6AD3C;
  --amber:       #B26A00;   /* red-flag rule + heading; passes AA on the wash */
  --amber-wash:  #FDF3E0;

  /* Surface + ink */
  --paper:       #F4F7F8;
  --white:       #FFFFFF;
  --ink:         #10222F;
  --ink-soft:    #4C6070;
  --ink-faint:   #7C8E9A;
  --rule:        #DCE6E9;

  /* Type */
  --display: "Montserrat", "Avenir Next", Arial, sans-serif;
  --body:    "Noto Sans", "Noto Sans Devanagari", "Segoe UI", Arial, sans-serif;

  /* Scale (minor third, mobile-first) */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.15rem;
  --t-lg:   1.4rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.15rem;
  --t-3xl:  2.6rem;

  /* Space */
  --gap:    1rem;
  --gap-2:  1.5rem;
  --gap-3:  2.25rem;
  --gap-4:  3.5rem;
  --gap-5:  5rem;

  --wrap: 1140px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 6px 18px rgba(8,43,76,.07);
  --shadow-md: 0 18px 50px rgba(8,43,76,.11);
  --ease: cubic-bezier(.2,.75,.25,1);
}

@media (min-width: 900px) {
  :root {
    --t-xl:  2rem;
    --t-2xl: 2.9rem;
    --t-3xl: 3.6rem;
  }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal-dark); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 .6em;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
p  { margin: 0 0 1em; max-width: 68ch; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section--tight { padding-block: var(--gap-3); }
.section--navy { background: var(--navy); color: #D6E2EA; }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--white { background: var(--white); }
.section > .wrap > h2 { max-width: 18ch; }
.lede { font-size: var(--t-md); color: var(--ink-soft); max-width: 60ch; }
.section--navy .lede { color: #A9C0D1; }
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--navy); padding: .7rem 1rem;
  font-weight: 700; z-index: 99;
}
.skip:focus { left: 0; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  min-height: 46px; padding: .8rem 1.35rem; border-radius: 999px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 1px 0 rgba(8,43,76,.08);
  transition: transform .18s var(--ease), box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--call   { background: var(--teal); color: #fff; }
.btn--call:hover   { background: var(--teal-dark); }
.btn--wa     { background: #148A5F; color: #fff; }
.btn--wa:hover { background: #0F6E4B; }
.btn--ghost  { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--onnavy { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--onnavy:hover { background: #fff; color: var(--navy); }
.btn--gold   { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: #D19B2C; }

/* ---------- 5. Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 rgba(8,43,76,.02);
}
.site-header__bar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--navy); line-height: 1.1; letter-spacing: -.01em;
}
.brand__tag { font-size: .72rem; color: var(--sage); font-weight: 600; letter-spacing: .02em; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  padding: .5rem 0 1.1rem;
  border-top: 1px solid var(--rule);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .65rem .2rem;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  color: var(--navy); text-decoration: none; position: relative;
}
.site-nav a[aria-current="page"] { color: var(--teal-dark); }
.header-call { display: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav ul { display: flex; gap: 1.5rem; }
  .site-nav a { padding: .3rem 0; }
  .site-nav a:hover { color: var(--teal-dark); }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem;
    height: 2px; border-radius: 2px; background: var(--teal);
    transition: right .2s var(--ease);
  }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
  .header-call { display: inline-flex; margin-left: 1.5rem; }
}

/* ---------- 6. Hero + body map (signature element) ---------- */
.hero {
  background: linear-gradient(110deg, var(--white) 0%, var(--white) 58%, #F8FBFB 100%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__grid { display: grid; gap: var(--gap-3); }
.hero__copy { position: relative; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1rem; font-family: var(--display); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark);
}
.hero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); }
.hero h1 { margin-bottom: .45em; }
.hero__sub { font-size: var(--t-md); color: var(--ink-soft); max-width: 46ch; }
.hero__local { font-size: var(--t-sm, .95rem); color: var(--ink-soft); max-width: 52ch; margin: -.4rem 0 1rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: var(--t-sm); color: var(--ink-soft);
  padding-top: .9rem; margin-top: .3rem; border-top: 1px solid var(--rule);
}
.hero__meta b { color: var(--navy); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }

.bodymap {
  background: rgba(244,247,248,.92); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1.25rem 1rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.bodymap__prompt {
  font-family: var(--display); font-weight: 600; font-size: var(--t-md);
  color: var(--navy); margin: 0 0 .2rem; text-align: center;
}
.bodymap__hint { font-size: var(--t-xs); color: var(--ink-faint); text-align: center; margin: 0 0 .6rem; }
.bodymap__figure { max-width: 250px; margin-inline: auto; }

.fig-limb  { stroke: #C9D8DD; stroke-width: 17; stroke-linecap: round; fill: none; }
.fig-mass  { fill: #C9D8DD; }
.spot circle.hit { fill: transparent; }
.spot circle.dot {
  fill: var(--white); stroke: var(--navy-soft); stroke-width: 2.5;
  transition: fill .15s ease, stroke .15s ease, r .15s ease;
}
.spot { cursor: pointer; }
.spot:hover circle.dot { fill: var(--teal-wash); stroke: var(--teal); }
.spot.is-active circle.dot { fill: var(--teal); stroke: var(--navy); r: 12; }
.spot:focus-visible { outline: none; }
.spot:focus-visible circle.dot { stroke: var(--gold); stroke-width: 4; }

.chiprow { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1rem; }
.chip {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--white); color: var(--navy-soft);
  min-height: 38px; cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s ease, background-color .16s ease, color .16s ease;
}
.chip:hover { transform: translateY(-1px); border-color: var(--teal); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

.region-panel {
  margin-top: 1.1rem; background: var(--white);
  border: 1px solid var(--rule); border-left: 5px solid var(--teal);
  border-radius: var(--radius); padding: 1.1rem 1.15rem;
}
.region-panel h3 { margin-bottom: .35rem; font-size: var(--t-md); }
.region-panel ul { margin-bottom: .9rem; }
.region-panel li { font-size: var(--t-sm); color: var(--ink-soft); }
.region-panel__note { font-size: var(--t-xs); color: var(--ink-faint); margin: 0; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); align-items: center; gap: clamp(3rem, 6vw, 5.5rem); }
  .hero__copy { padding-block: 2rem; }
  .hero__copy::after {
    content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    left: -150px; bottom: -190px; border: 42px solid var(--sage-wash); opacity: .75; pointer-events: none;
  }
  .bodymap { padding: 1.75rem 1.5rem 2rem; }
}

/* ---------- 7. Visit steps (a real sequence, so numbered) ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; align-items: start; }
.step__n {
  counter-increment: step;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--display); font-weight: 700;
}
.step__n::before { content: counter(step); }
.step h3 { font-size: var(--t-base); margin-bottom: .25rem; color: var(--white); }
.step p { font-size: var(--t-sm); margin: 0; color: #A9C0D1; }
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .step { padding: .25rem 2rem .25rem 0; }
  .step + .step { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.14); }
}

/* ---------- 8. Services — hairline list, not a card grid ---------- */
.svc-list { border-top: 1px solid var(--rule); }
.svc {
  display: grid; gap: .3rem 1.5rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
}
.svc { transition: background-color .18s ease, padding-inline .18s var(--ease); }
.svc:hover { background: var(--paper); padding-inline: .85rem; }
.svc h3 { margin: 0; font-size: var(--t-md); }
.svc p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
@media (min-width: 780px) {
  .svc { grid-template-columns: 15rem 1fr; align-items: baseline; }
}

/* ---------- 9. Doctor ---------- */
.doctor { display: grid; gap: var(--gap-2); }
.doctor__photo {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--sage-wash); max-width: 340px; box-shadow: var(--shadow-sm);
}
.doctor__photo img { width: 100%; height: auto; }
.creds { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.creds li {
  padding-left: 1.4rem; position: relative;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.creds li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--sage);
}
@media (min-width: 860px) {
  .doctor { grid-template-columns: 340px 1fr; gap: var(--gap-3); align-items: start; }
}

/* ---------- 10. Clinic panels ---------- */
.clinics { display: grid; gap: var(--gap-2); }
.clinic {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--rule); overflow: hidden;
  display: grid; grid-template-columns: 8px 1fr;
}
.clinic { transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease; }
.clinic:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #CADADC; }
.clinic__rail { background: var(--sage); }
.clinic__body { padding: 1.5rem 1.35rem; }
.clinic h3 { font-size: var(--t-lg); margin-bottom: .1rem; }
.clinic__area { font-size: var(--t-xs); color: var(--sage); font-weight: 700; margin: 0 0 .8rem; }
.clinic address { font-style: normal; font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: .9rem; }
.clinic__hours {
  font-size: var(--t-sm); color: var(--navy); border-top: 1px dashed var(--rule);
  padding-top: .8rem; margin-bottom: 1rem;
}
.clinic__hours b { font-weight: 600; }
.clinic__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.clinic__map { margin-top: 1rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
.clinic__map iframe { width: 100%; height: 230px; border: 0; display: block; }
@media (min-width: 880px) { .clinics { grid-template-columns: 1fr 1fr; } }

/* ---------- 11. FAQ ---------- */
.faq { display: grid; gap: .65rem; max-width: 820px; }
.faq details { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); overflow: clip; }
.faq details[open] { border-color: #BDD7D7; box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; padding: 1.05rem 3rem 1.05rem 1.15rem; position: relative;
  font-family: var(--display); font-weight: 600; color: var(--navy);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1rem; top: .8rem;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-wash); font-size: 1.35rem; color: var(--teal-dark); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { font-size: var(--t-sm); color: var(--ink-soft); padding: 0 1.15rem 1.1rem; }

/* ---------- 12. Call band ---------- */
.callband { background: var(--teal); color: #fff; }
.callband .wrap { display: grid; gap: 1rem; padding-block: var(--gap-3); }
.callband h2 { color: #fff; margin-bottom: .2em; }
.callband p { color: #DEF5F5; margin: 0; }
.callband__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.callband .btn--gold { border-color: var(--gold); }
.callband .btn--onnavy:hover { color: var(--teal-dark); }
@media (min-width: 820px) {
  .callband .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--navy-deep); color: #A9C0D1; padding-block: clamp(3rem, 6vw, 4.5rem) var(--gap-2); font-size: var(--t-sm); }
.site-footer h4 { color: #fff; font-size: var(--t-sm); margin-bottom: .7rem; }
.site-footer a { color: #C6DCEA; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration-color: var(--teal); text-underline-offset: 4px; }
.footer-grid { display: grid; gap: var(--gap-2); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .4rem; }
.footer-bottom {
  margin-top: var(--gap-2); padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: var(--t-xs); color: #7794AA;
}
.footer-bottom p { max-width: 80ch; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* ---------- 14. Sticky mobile action bar ---------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(8,43,76,.97); border-top: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 -8px 24px rgba(4,25,46,.16);
}
.actionbar a {
  padding: .85rem .5rem; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm); color: #fff;
}
.actionbar a + a { border-left: 1px solid rgba(255,255,255,.18); }
body { padding-bottom: 56px; }
@media (min-width: 900px) { .actionbar { display: none; } body { padding-bottom: 0; } }

/* ---------- 15. Page header (inner pages) ---------- */
.pagehead {
  background: linear-gradient(125deg, var(--navy-deep), var(--navy) 72%, var(--navy-soft));
  color: #C6DCEA; padding-block: clamp(2.75rem, 6vw, 4.75rem); position: relative; overflow: hidden;
}
.pagehead::after {
  content: ""; position: absolute; right: -70px; top: -105px; width: 250px; height: 250px;
  border-radius: 50%; border: 42px solid rgba(107,175,146,.09); pointer-events: none;
}
.pagehead h1 { color: #fff; margin-bottom: .3em; }
.pagehead p { color: #A9C0D1; max-width: 60ch; margin: 0; }
.pagehead .pagehead__local { margin-top: .6rem; font-size: var(--t-sm, .95rem); }
.crumbs { font-size: var(--t-xs); color: #7794AA; margin-bottom: .9rem; }
.crumbs a { color: #A9C0D1; text-decoration: none; }

/* ---------- 16. Prose blocks ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-xl); margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.callout {
  background: var(--sage-wash); border-left: 4px solid var(--sage);
  padding: 1rem 1.15rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: 1.4rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- 17. Conditions ---------- */
/* Deliberately reuses .svc / .svc-list from section 8 so the conditions index
   reads as the same hairline list as Treatments, and does not compete with the
   body map on the homepage. */
.chiprow--left { justify-content: flex-start; margin-bottom: var(--gap-3); }
.chiprow a.chip { display: inline-flex; align-items: center; text-decoration: none; }
.chiprow a.chip:hover { color: var(--teal-dark); }

.cond-group + .cond-group { margin-top: var(--gap-3); }
.cond-group h2 { font-size: var(--t-lg); margin-bottom: .6rem; }
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a:hover { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }

/* "Also treated" — the conditions whose page is a signpost to an exercise
   sheet and some guides rather than a full write-up. Set quieter than the
   .svc cards above it and as running text rather than a list, because there
   are more of these than there are write-ups and a card each would bury the
   pages that have something to say. */
.cond-more__h { font-size: var(--t-sm); text-transform: uppercase;
                letter-spacing: .06em; color: var(--ink-faint);
                margin: var(--gap-2) 0 .4rem; }
.cond-more { font-size: var(--t-sm); line-height: 1.9; color: var(--ink-faint); }
.cond-more a { color: var(--ink); text-decoration: none; }
.cond-more a:hover { color: var(--teal-dark); text-decoration: underline;
                     text-underline-offset: 3px; }

/* "Also called" — the words patients actually use, including Marathi where we
   have it. Never machine-translated; empty stays empty. */
.alsocalled { font-size: var(--t-sm); color: var(--ink-faint); margin-top: -.4rem; }

/* "Come in sooner if" — clinical safety copy, so it has to look different from
   the sage .callout used for ordinary asides. */
.redflag {
  background: var(--amber-wash); border-left: 4px solid var(--amber);
  padding: 1.1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.8rem 0;
}
.prose .redflag h2 {
  margin-top: 0; margin-bottom: .35rem;
  font-size: var(--t-md); color: var(--amber);
}
.redflag p { margin: 0; color: var(--ink); }

.ex-list { margin: 0 0 .7rem; padding-left: 1.3rem; }
.ex-list li { margin-bottom: .3rem; }
.ex-note { font-size: var(--t-sm); color: var(--ink-soft); }

.dl { margin-top: 1.8rem; margin-bottom: .5rem; }
.dl .btn { max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; }
.dl-note { font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: 0; }

.footnote {
  font-size: var(--t-sm); color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.8rem;
}
.backlink { margin-top: var(--gap-2); font-size: var(--t-sm); }
.backlink a { color: var(--navy); text-underline-offset: 3px; }

/* Condition links under each service on the Treatments page (A5). */
.svc-links { font-size: var(--t-sm); color: var(--ink-soft); margin: .7rem 0 0; }
.svc-links a { color: var(--navy); text-underline-offset: 3px; }

/* The way out of the body map, into the matching region of the index. */
.region-panel__more { font-size: var(--t-sm); margin: 0 0 .6rem; }
.region-panel__more a { color: var(--teal-dark); font-weight: 600; text-underline-offset: 3px; }

/* ---------- 18. Research and publications ---------- */
/* Same hairline rhythm as .svc-list, so /research belongs to the same system.
   The plain-English summary is deliberately secondary to the citation. */
.pub-list { border-top: 1px solid var(--rule); max-width: 75ch; }
.pub { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.pub h3 { margin: 0 0 .45rem; font-size: var(--t-md); line-height: 1.35; }
.pub h3 a { color: inherit; text-decoration: none; }
.pub h3 a:hover { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.pub__authors { font-size: var(--t-sm); color: var(--ink); margin: 0 0 .25rem; }
.pub__authors b { font-weight: 600; color: var(--navy); }
.pub__meta { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 .25rem; }
.pub__affil { font-size: var(--t-xs); color: var(--ink-faint); margin: 0 0 .25rem; }
.pub__doi { font-size: var(--t-xs); margin: 0 0 .6rem; }
.pub__doi a { color: var(--teal-dark); text-underline-offset: 3px; word-break: break-word; }
.pub__summary {
  font-size: var(--t-sm); color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding-left: .9rem; margin: 0 0 .7rem;
}
.pub__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.tag {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink-soft);
}
.tag--oa { background: var(--sage-wash); border-color: var(--sage); color: #2F6B51; }

/* ---------- 19. The hidden attribute ---------- */
/* Load-bearing: .section and other display rules would otherwise reveal an
   element that is meant to stay hidden (the "not translated" note, for one). */
[hidden] { display: none !important; }

/* ---------- 21. Patient library ---------- */
/* Conditions, exercise sheets, procedure explainers and the guide PDFs.
   Built from the same tokens as everything above it — nothing here is carried
   over from the content bundle the library arrived in. */

/* Language switch. Each label is written in its own script, so a patient who
   cannot read the interface language can still find their own. */
.langbar { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.2rem; }
.langbar__b {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  padding: .4rem .9rem; border-radius: 999px; min-height: 38px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: transparent; color: #C6DCEA;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.langbar__b:hover { border-color: var(--sage); }
.langbar__b[aria-pressed="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }

/* Shown when the page has no checked translation in the chosen language. It is
   quiet rather than alarming — nothing is wrong, the translation is simply not
   ready — and it must never be confused with the amber safety box. */
.langnote {
  background: var(--teal-wash); border-left: 4px solid var(--teal);
  padding: .85rem 1.05rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm); color: var(--ink); margin: 0 0 1.4rem;
}

/* The red-flag box. Distinct from .redflag, which holds one paragraph: this one
   carries a list, and it is the first thing on the page for a reason — one
   patient in two hundred needs to be seen tonight and must not have to scroll
   to find that out. */
.stopbox {
  background: var(--amber-wash); border-left: 4px solid var(--amber);
  padding: 1.15rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1.8rem;
}
.stopbox h2 { font-size: var(--t-md); color: var(--amber); margin: 0 0 .35rem; }
.stopbox__sub { font-size: var(--t-sm); color: var(--ink); margin: 0 0 .7rem; font-weight: 600; }
.stopbox ul { margin: 0; padding-left: 1.15rem; }
.stopbox li { font-size: var(--t-sm); color: var(--ink); margin-bottom: .4rem; }
.stopbox li:last-child { margin-bottom: 0; }
.stopbox__foot { font-size: var(--t-sm); color: var(--ink); margin: .8rem 0 0; }

/* What to do and what to avoid, side by side on a wide screen and stacked on a
   phone. The avoid column keeps its refusals — no scan in the first six weeks,
   no keyhole washout for arthritis — so it is given equal weight, not treated
   as an afterthought under the do list. */
.doavoid { display: grid; gap: 1.2rem; margin: 0 0 2rem; }
@media (min-width: 820px) { .doavoid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.doavoid__col { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.25rem; background: var(--white); }
.doavoid__col h2 { font-size: var(--t-md); margin: 0 0 .7rem; }
.doavoid__col ul { margin: 0; padding-left: 1.15rem; }
.doavoid__col li { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: .5rem; }
.doavoid__col li:last-child { margin-bottom: 0; }
.doavoid__col li b { color: var(--ink); }
.doavoid--do { border-top: 3px solid var(--teal); }
.doavoid--avoid { border-top: 3px solid var(--sage); }

/* The cost note. Same six lines on all thirty condition pages — the repetition
   is deliberate, so nothing here varies it. */
.cost { margin-top: 2rem; }

/* Guide PDFs. The link follows the chosen language: a Marathi reader must be
   handed COND-05_mr.pdf, never COND-05_en.pdf. The three small language links
   are the fallback for a reader with JavaScript off. */
.guides { margin: 2rem 0; }
.guides > h2 { font-size: var(--t-xl); margin-bottom: .3rem; }
.guides__sub { font-size: var(--t-sm); color: var(--ink-soft); max-width: 60ch; margin-bottom: 1rem; }
.guide-list { border-top: 1px solid var(--rule); }
.guide {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
  justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--rule);
}
.guide__t { font-family: var(--display); font-weight: 600; color: var(--navy); text-decoration: none; }
.guide__t:hover { color: var(--teal-dark); text-decoration: underline; }
.guide__t::before { content: "\2193"; margin-right: .5rem; color: var(--teal); font-weight: 700; }
.guide__langs { display: flex; gap: .3rem; font-size: var(--t-xs); }
.guide__langs a {
  padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--ink-soft); text-decoration: none; min-height: 30px; display: inline-flex; align-items: center;
}
.guide__langs a:hover { border-color: var(--teal); color: var(--teal-dark); }
.guide__langs a[aria-current="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* One exercise: the illustration, what to do, the dose printed on the sheet,
   and what it should and should not feel like. The dose comes from the sheet
   data and is shown as written there — nothing is inferred. */
.exercise { display: grid; gap: .75rem 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .exercise { grid-template-columns: 200px 1fr; align-items: start; } }
.exercise__fig { margin: 0; }
.exercise__fig img { width: 100%; height: auto; border-radius: var(--radius); background: var(--paper); display: block; }
.exercise h3 { margin: 0 0 .35rem; font-size: var(--t-md); }
.exercise__how { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }
.exercise__dose { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .7rem 0 0; padding: 0; }
.exercise__dose li {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  background: var(--teal-wash); color: var(--teal-dark);
  padding: .3rem .7rem; border-radius: 999px;
}
.exercise__feel { font-size: var(--t-sm); margin: .7rem 0 0; color: var(--ink-soft); }
.exercise__feel span { display: block; }
.exercise__feel b { color: var(--ink); }

/* An exercise with no illustration: the text takes the full width rather than
   leaving a 200px hole where a picture would have been. */
.exercise--noimg { grid-template-columns: 1fr; }

/* A procedure, minute by minute. Deliberately plain: the point of these pages
   is that nothing about the room is a surprise. */
.proc-steps { counter-reset: pstep; border-top: 1px solid var(--rule); margin: 1.2rem 0 0; }
.proc-step { display: grid; grid-template-columns: 38px 1fr; gap: .35rem 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.proc-step__n {
  counter-increment: pstep; grid-row: span 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-wash); color: var(--teal-dark);
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
}
.proc-step__n::before { content: counter(pstep); }
.proc-step h3 { margin: 0; font-size: var(--t-base); }
.proc-step__time { font-size: var(--t-xs); color: var(--teal-dark); font-family: var(--display); font-weight: 600; }
.proc-step p { font-size: var(--t-sm); color: var(--ink-soft); margin: .2rem 0 0; grid-column: 2; }

/* Index cards for the library hub. Reuses the hairline rhythm of .svc-list. */
.lib-meta { font-size: var(--t-sm); color: var(--ink-soft); margin: .2rem 0 0; }
.lib-back { font-size: var(--t-sm); margin-top: 1.6rem; }

/* The one-line answer, then the explanation under it. */
.faq .faq__a { font-weight: 600; color: var(--ink); padding-bottom: .3rem; }

/* The set of exercises on a sheet, on the same hairline rhythm as .svc-list. */
.ex-set { border-top: 1px solid var(--rule); margin-top: 1.6rem; }

/* Staged (post-operative) sheets. Each stage is its own card: the label is the
   heading, the weight line is the thing a patient must not miss, so it sits in
   a bar of its own. Flat sheets use none of this. */
.stage { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); margin: 1.6rem 0 0; padding: 1.2rem 1.2rem .4rem; }
.stage__head { margin: 0 0 .8rem; }
.stage__label { margin: 0; font-size: var(--t-md); color: var(--navy); }
.stage__goal { margin: .25rem 0 0; font-size: var(--t-sm); color: var(--ink-soft); }
.stage__wb { background: var(--teal-wash); border-left: 5px solid var(--teal-dark); border-radius: var(--radius); padding: .7rem 1rem; margin: 0 0 .4rem; }
.stage__wb p { margin: .15rem 0; font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.stage__wb b { color: var(--teal-dark); font-family: var(--display); margin-right: .35rem; }
.stage .ex-set { margin-top: .6rem; }
.stage__notyet { margin: .8rem 0 .8rem; padding: .6rem 1rem; background: var(--amber-wash); border-left: 5px solid var(--amber); border-radius: var(--radius); font-size: var(--t-sm); color: var(--ink); }
.stage__notyet b { color: var(--amber); margin-right: .35rem; }
.stage__gate { margin: .8rem 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); text-align: center; }
.stage--block ul { margin: .4rem 0 .8rem; padding-left: 1.15rem; }
.stage--block li { font-size: var(--t-sm); color: var(--ink); margin-bottom: .4rem; }
.exercise__fig--pending { min-height: 150px; border-radius: var(--radius); background: var(--paper); border: 1px dashed var(--rule); }

/* The language switch, on every page, above the header. A patient who reads
   only Marathi has to be able to see it on the page they land on. */
.langstrip { background: var(--navy-deep); padding: .3rem 0; }
.langstrip .wrap { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.langstrip .langbar { margin-top: 0; }
.langstrip .langbar__b { min-height: 32px; padding: .25rem .7rem; }
.langstrip .langnote { flex: 1 1 20rem; margin: .3rem 0; }

/* Held back for the moment it takes to swap a stored Hindi or Marathi choice
   in, so that language never sees English flash past first. The head script
   sets this and lang.js clears it; a timeout there clears it regardless, so a
   script that never runs cannot leave the page blank. */
html[data-lang-pending] body { visibility: hidden; }


/* ---------- 20. Small-screen finish ---------- */
@media (max-width: 899px) {
  .site-header__bar { min-height: 64px; }
  .site-nav.is-open { max-height: calc(100vh - 64px); overflow-y: auto; }
  .site-nav a { min-height: 46px; display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
  .hero h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .hero__actions .btn { flex: 1 1 10rem; justify-content: center; }
  .bodymap__figure { max-width: 220px; }
  .clinic__actions .btn { flex: 1 1 9rem; justify-content: center; }
  .callband__actions .btn { flex: 1 1 10rem; justify-content: center; }
}

@media (max-width: 520px) {
  body { line-height: 1.6; }
  .section { padding-block: 3.4rem; }
  .brand__tag { display: none; }
  .brand__name { font-size: .92rem; }
  .brand img { width: 42px; height: 42px; }
  .hero { padding-block: 2.25rem 3rem; }
  .hero__meta { display: grid; gap: .55rem; }
  .bodymap { margin-inline: -.15rem; padding-inline: .8rem; }
  .chiprow { gap: .35rem; }
  .chip { padding-inline: .68rem; }
  .region-panel { padding: 1rem; }
  .clinic__body { padding: 1.3rem 1.1rem; }
  /* The download label carries Devanagari and is long. Full width, wrapping,
     so it can never push the page sideways on a 360px screen. */
  .dl .btn { width: 100%; padding-inline: 1rem; }
  .footer-grid { gap: 2rem; }
  .footer-bottom { padding-bottom: .25rem; }
}