/* Dr. Varada's Skin & Hair Center — page layout
 *
 * This file is layout only. Every colour, radius, type size and band class comes from
 * design-system.css. If you find yourself typing a hex value here, the token is missing
 * from the design system — add it there instead. build.py enforces this: raw colour
 * values outside this :root block fail the build.
 */

/* Component tokens local to this site — candidates for promotion into the design
 * system once a second surface needs them. The deep greens are contrast inks picked
 * for text sitting directly on the --mint band. */
:root {
  --booking-ink:   #06352C;
  --booking-ink-2: #0B4A3E;
  --booking-line:  rgba(6, 53, 44, .25);
  --header-scrim:  rgba(248, 245, 243, .88);   /* --ground at 88% for blur */
  --crumb-line:    rgba(18, 32, 47, .07);      /* --ink at 7% */
  --on-dark-card:  rgba(255, 255, 255, .06);   /* quote cards on dark bands */
  --dock-scrim:    rgba(255, 255, 255, .92);   /* mobile booking dock */
  --photo-label:   rgba(255, 255, 255, .88);   /* before/after chip over a photo */
}

* { box-sizing: border-box; }

/* Skip link — visible only when focused, so a keyboard user can jump the
 * utility bar and the whole navigation to reach the page's own content. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; box-shadow: var(--shadow);
  text-decoration: none; font-weight: 600; }
.skip:focus { left: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
html { scroll-behavior: smooth; }
/* anchor targets land below the sticky header instead of under it */
section[id], div[id] { scroll-margin-top: 86px; }

/* ── utility bar — dark 1 of 3 ──────────────────────────────────── */
.utility { background: var(--dark); color: var(--on-dark); font-size: 13px; }
.utility .wrap { display: flex; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-block: 10px; }
.utility b { color: var(--on-dark-str); font-weight: 600; }
.utility a { text-decoration: none; }

/* ── header ─────────────────────────────────────────────────────── */
.head { position: sticky; top: 0; z-index: 20; background: var(--header-scrim);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.head .wrap { display: flex; align-items: center; gap: 26px; padding-block: 13px; }
.head .logo { width: 214px; flex: none; }
.head .logo img { display: block; width: 100%; height: auto; }
.head nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }

/* EVERY top-level item, including the ones that open a panel.
 *
 * This used to read `.head nav > a`, which is a direct-child selector — and a
 * dropdown trigger is `nav > .menu > a`, one level deeper. So it styled the two
 * plain items and none of the six with panels, which kept the browser's default
 * underline and link colour. The mixed header was not a design choice.
 *
 * A label must also never wrap: left alone "The doctor" breaks after "The" and
 * drops its caret onto a second line. Forbidding the wrap makes the failure
 * honest — too many items now overflow, and verify.py fails the build for it. */
.head nav > a,
.head nav > .menu > a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  text-decoration: none; font-size: 15px; color: var(--ink-2);
  padding-block: 10px;                  /* a taller hover target than the text */
}
.head nav > a:hover,
.head nav > .menu > a:hover,
.menu:hover > a, .menu:focus-within > a { color: var(--ink); }

/* dropdowns are CSS-only: hover on pointer devices, :focus-within for keyboards */
.menu { position: relative; }

/* A drawn chevron, not the "⌄" glyph. That character is U+2304, its size and
 * baseline are whatever the body font decides, and here it sat small and low
 * against the label. Two borders on an empty box are the same mark at a size
 * we control, aligned by flex, and it can rotate to show the panel is open. */
.menu > a::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg); opacity: .5;
  transition: transform .16s ease, opacity .16s ease;
}
.menu:hover > a::after, .menu:focus-within > a::after {
  transform: translateY(3px) rotate(-135deg); opacity: 1;
}

.menu .panel { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 304px;
  /* 304px because 268 wrapped the longest item — "Vitiligo treatment in
   * Secunderabad" — onto two lines. A menu item that wraps reads as a
   * mistake rather than a long name. */
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 10px; display: none; }

/* The panel hangs 10px below the trigger, and that 10px was dead ground: moving
 * the pointer towards the menu left `.menu`, `:hover` went false, and the panel
 * closed before it could be reached. This strip bridges the gap so the hover
 * region is continuous. It exists only while the menu is open, so it can never
 * swallow a click on the page underneath the header. */
.menu:hover::after, .menu:focus-within::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}

.menu:hover .panel, .menu:focus-within .panel {
  display: block; animation: menu-in .14s ease both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px); } }

/* The rightmost menu opens leftwards, or a 268px panel anchored to a trigger
 * that sits beside the CTA runs off the edge of the page. */
.head nav > .menu:last-of-type .panel { left: auto; right: -18px; }
.menu .panel a { display: block; text-decoration: none; font-size: 14.5px;
  padding: 9px 12px; border-radius: 9px; color: var(--ink); }
.menu .panel a:hover { background: var(--ground); }
.menu .panel small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.menu .panel .grp { font: 600 11px/1 var(--body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 12px 12px 6px; }
.menu .panel .grp:first-child { margin-top: 6px; }
/* ── mobile menu — a <details> disclosure, no JavaScript ─────────── */
.mnav { display: none; margin-left: auto; }
/* 44px square — the minimum comfortable touch target — with the bars centred
 * inside rather than defining the box. The three bars morph into a cross when
 * the sheet is open, so the control says how to close it. */
.mnav > summary { list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: grid; place-content: center; gap: 5px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper);
  transition: background .16s ease, border-color .16s ease; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary span { display: block; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .16s ease; }
.mnav[open] > summary { background: var(--ground); border-color: var(--line-2); }
.mnav[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mnav[open] > summary span:nth-child(2) { opacity: 0; }
.mnav[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav > nav { position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 10px 20px 16px; max-height: 82vh;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; display: grid; gap: 0; }
.mnav > nav > a, .mnav > nav summary { font-size: 15.5px; font-weight: 600; }
/* Top-level links (Results, The doctor) carry the same weight as the group
 * headings beside them. Left at the default they read as disabled — "Results"
 * looked greyed out next to a bold "Hair". */
.mnav > nav > a { text-decoration: none; padding: 11px 2px; color: var(--ink);
  border-bottom: 1px solid var(--line); }
.mnav > nav details > summary { cursor: pointer; padding: 11px 2px;
  border-bottom: 1px solid var(--line); list-style: none;
  display: flex; align-items: center; justify-content: space-between; }
/* A drawn +/− rather than a floated glyph: `float: right` took the mark out of
 * flow, so it sat on its own baseline and the row height came from the text. */
.mnav > nav details > summary::after { content: "+"; color: var(--ink-3);
  font-size: 19px; font-weight: 400; line-height: 1; }
.mnav > nav details[open] > summary::after { content: "\2212"; }

/* `[open]` matters more than it looks. With `display: grid` set unconditionally,
 * the panel of a CLOSED <details> is still laid out — the browser's own hiding
 * of closed content is an author-overridable display rule, and setting one
 * defeats it. Every collapsed group was reserving 87px instead of 46px for a
 * 549px panel nobody could see, which is why the menu felt so loosely spaced. */
.mnav > nav details:not([open]) > div { display: none; }
.mnav > nav details[open] > div { display: grid; gap: 1px;
  padding: 2px 0 10px 12px; }
.mnav > nav details a { text-decoration: none; font-size: 14.5px; padding: 8px 4px;
  color: var(--ink-2); font-weight: 400; border-radius: 7px; }
.mnav > nav details a:hover, .mnav > nav details a:focus-visible {
  color: var(--ink); background: var(--ground); }

/* Deliberately NOT sticky. Pinned to the bottom of the sheet it covered the
 * last two items ("The doctor", "Visit") until you scrolled to the very end —
 * and the fixed dock already keeps Book on WhatsApp and Call on screen at all
 * times, so a second pinned copy bought nothing and hid two links. */
.mnav .btn { margin-top: 14px; justify-content: center; }

/* The desktop nav now carries eight top-level items plus the booking CTA, and
 * at 1040px that no longer fits — the CTA was running off the right edge. The
 * hamburger takes over earlier rather than the nav being thinned, because
 * every one of those items is a section people search for by name. */
@media (max-width: 1200px) {
  .head nav[aria-label="Main"] { display: none; }
  .mnav { display: block; }
  .head .wrap { position: relative; }
}

/* ── breadcrumb ─────────────────────────────────────────────────── */
.crumbs { font-size: 13px; color: var(--ink-3); padding-block: 18px 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 7px; }

/* ── page head ──────────────────────────────────────────────────── */
.phead .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: start; }
.phead.solo .wrap { grid-template-columns: 1fr; max-width: 900px; }
.phead h1 { margin-top: 16px; }
.phead h1 em { font-style: normal; color: var(--mint-dp); }
.phead .lede { margin-top: 20px; font-size: 18px; max-width: 58ch; }
.phead .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.creds span { font-size: 13px; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; }

/* the at-a-glance panel that rides beside the H1 on pillar and hub pages */
.glance { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; }
.glance h2 { font: 600 11.5px/1 var(--body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.glance dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 11px 18px;
  font-size: 14.5px; }
.glance dt { color: var(--ink-3); white-space: nowrap; }
.glance dd { margin: 0; }
@media (max-width: 900px) { .phead .wrap { grid-template-columns: 1fr; } }

/* ── ticker (from home-v3) ──────────────────────────────────────── */
.ticker { background: var(--paper); border-block: 1px solid var(--line);
  padding: 16px 0; overflow: hidden; }
.ticker .row { display: flex; gap: 40px; width: max-content;
  animation: slide 46s linear infinite; }
.ticker span { font-family: var(--display); font-size: 16.5px; font-weight: 500;
  white-space: nowrap; color: var(--ink-2); }
.ticker i { color: var(--mint-dp); font-style: normal; margin-inline: 20px; opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .row { animation: none; } }

/* ── stories / social proof (from home-v3) ──────────────────────── */
/* Two platforms side by side. Each is a link to its own review page, because a
 * score you cannot go and check is a score nobody believes. */
.scores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.score { display: grid; grid-template-columns: auto auto; gap: 2px 12px;
  align-items: center; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 20px 14px 16px; }
.band.paper .score { background: var(--ground); }
.score:hover { border-color: var(--mint-dp); }
.score .src { grid-column: 1 / -1; }
.score .n { font-family: var(--display); font-weight: 700; font-size: 30px;
  line-height: 1; }
.score .s { color: var(--gold); letter-spacing: 2px; font-size: 13px; }
.score .c { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.src { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; color: var(--ink-2); }
.src i { display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 5px; color: var(--paper); font-style: normal; font-weight: 700;
  font-size: 11px; }

.rating { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.rating .big { font-family: var(--display); font-weight: 700; font-size: 56px;
  letter-spacing: -.04em; line-height: 1; }
.rating .meta { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.rating .stars { color: var(--gold); letter-spacing: 3px; }
.rating a { color: var(--mint-dp); font-weight: 600; text-decoration: none;
  display: inline-block; margin-top: 4px; }
/* Two platform links sat flush against each other and read as one
 * sentence. They are separate destinations, so they get separate space. */
.rating a + a { margin-left: 22px; }
/* A moving strip rather than a grid: a clinic with sixty-five reviews should
 * show far more than the three that fit a row, and a wall of forty cards is
 * worse than a strip that brings them to you. It scrolls on its own and stops
 * under the cursor, so reading one never becomes a chase.
 *
 * The track holds the cards twice. `-50%` alone would land half a gap short —
 * the track is `2S + gap` wide and the loop has to travel `S + gap` — so the
 * keyframe subtracts the remaining half-gap and the seam lands exactly. */
.quotes { margin-top: 30px; overflow: hidden;
  /* soften the two edges, so cards arrive and leave instead of being sliced.
   * The colour is irrelevant — a mask reads alpha — but it has to be a token
   * to stay inside the stylesheet's own no-raw-colour rule. 44px of fade ate
   * the first card's border and the first letter of four lines, which reads as
   * a rendering fault rather than a soft edge; 22px softens the slice without
   * ghosting anything legible. */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 22px,
    var(--ink) calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 22px,
    var(--ink) calc(100% - 22px), transparent); }
.quotes:focus-visible { outline: 2px solid var(--mint-dp); outline-offset: 4px; }
.quotes .track { display: flex; gap: 16px; width: max-content; padding-bottom: 4px;
  animation: quotes-roll var(--quotes-dur, 72s) linear infinite; }
.quotes .set { display: flex; gap: 16px; }
@keyframes quotes-roll { to { transform: translateX(calc(-50% - 8px)); } }
/* The pause is the whole point of an auto-scroller: nothing that moves on its
 * own should move while someone is trying to read it. `focus-within` is not
 * decoration either — the cards hold no links, so the container itself takes
 * the tab stop, and that is what lets a keyboard stop the motion. */
.quotes:hover .track, .quotes:focus-within .track { animation-play-state: paused; }
.q { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px;
  flex: 0 0 auto; width: min(340px, 80vw); scroll-snap-align: start;
  display: flex; flex-direction: column; }
.band.paper .q { background: var(--ground); }
.q p { font-size: 15px; }
/* `margin-top: auto` pins the attribution to the bottom, so cards holding
 * quotes of different lengths still line their footers up. */
.q footer { margin-top: auto; padding-top: 14px; font-size: 12.5px;
  color: var(--ink-3); background: none; }
.q .stars { color: var(--gold); letter-spacing: 2px; margin-right: 6px; }
/* Only reduced-motion gets the strip back. This used to read
 * `(prefers-reduced-motion: reduce), (hover: none)` — the second clause was
 * meant for phones, where the hover pause can never fire. It also matched
 * every Chromium webview, VS Code's Simple Browser among them, which report
 * `hover: none` and `pointer: coarse` regardless of the hardware. The result
 * was a carousel that sat still on a desktop with a mouse attached. Hover
 * capability is not a reliable proxy for anything, so nothing is gated on it
 * now: the marquee runs everywhere, and a phone sees every story go past
 * rather than pausing on one.
 *
 * Someone who asked their OS for less motion still gets no animation, and the
 * duplicate set is hidden for them — flicking through the same nine reviews
 * twice reads as a bug. */
@media (prefers-reduced-motion: reduce) {
  .quotes { overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding: 2px; padding-bottom: 10px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    -webkit-mask-image: none; mask-image: none; }
  .quotes::-webkit-scrollbar { height: 8px; }
  .quotes::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
  .quotes::-webkit-scrollbar-track { background: transparent; }
  .quotes .track { animation: none; }
  .quotes .set + .set { display: none; }
}

/* ── before/after strip (from home-v3; consented placeholders) ──── */
.ba { display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ba figure { margin: 0; }
.ba .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba .ph { aspect-ratio: 4/5; border-radius: var(--r-sm);
  background: linear-gradient(170deg, var(--lil-sf), var(--mint-sf));
  display: grid; place-items: center; font-size: 12.5px; color: var(--ink-3);
  position: relative; }
.ba .ph em { position: absolute; top: 10px; left: 12px; font-style: normal;
  font: 600 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); }
.ba figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.ba figcaption b { display: block; font-family: var(--display); font-size: 15px;
  color: var(--ink); }

/* ── shared section furniture ───────────────────────────────────── */
.head-block { max-width: 64ch; }
.head-block h2 { margin-top: 10px; }
.head-block p { margin-top: 14px; }
.prose { max-width: 68ch; margin-top: 22px; display: grid; gap: 15px; }
.prose ul, .prose ol { margin: 4px 0; padding-left: 22px; color: var(--ink-2); display: grid; gap: 9px; }
.prose li strong { color: var(--ink); }
.cols { display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cols.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card h3 + p, .card .eyebrow + h3 { margin-top: 8px; }
.card p { margin-top: 10px; font-size: 14.5px; }
.card ul { list-style: none; padding: 0; margin: 14px 0 0; }
.card li { font-size: 14.5px; padding: 7px 0; border-top: 1px solid var(--crumb-line);
  color: var(--ink-2); }
.card li:first-child { border-top: 0; }

/* ── chips (symptom finder / quick links) ───────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 13px 19px; font-size: 15px; color: var(--ink);
  transition: transform .16s ease, border-color .16s ease; }
.band.paper .chip { background: var(--paper); }
.chip:hover { transform: translateY(-1px); border-color: var(--line-2); }
.chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ── pillar cards (from home-v3) ────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 940px) { .bento { grid-template-columns: 1fr; } }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 32px 30px 28px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease; }
.band.paper .pcard { background: var(--ground); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.ptag { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 19px; margin-bottom: 20px; }
.pcard h3 { font-size: 25px; font-weight: 700; margin-bottom: 9px; }
.pcard > p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.pcard ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: 15px; }
.pcard li { padding: 9px 0; border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; gap: 10px; align-items: center; }
.pcard li a { text-decoration: none; font-weight: 600; color: var(--ink); }
.pcard li a:hover { color: var(--mint-dp); }
.flag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--mint-sf);
  color: var(--mint-dp); flex: none; }
.pcard .go { margin-top: auto; font-weight: 700; font-size: 15px; text-decoration: none; }

/* ── steps ──────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; }
.band.paper .step { background: var(--ground); }
.step::before { counter-increment: s; content: counter(s);
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--mint-dp);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint-sf); }
.step h3 { margin-top: 16px; }
.step p { margin-top: 7px; font-size: 14.5px; }

/* ── dark spotlight — dark 2 of 3, at most one per page ─────────── */
.spot .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.spot p { color: var(--on-dark); }
.spot .qcard { background: var(--on-dark-card); border: 1px solid var(--dark-line);
  border-radius: var(--r); padding: 26px; }
.spot .qcard h3 { color: var(--on-dark-str); }
.spot .qcard p { margin-top: 8px; font-size: 14.5px; }
.spot .aside { display: grid; gap: 14px; align-content: start; }
@media (max-width: 900px) { .spot .wrap { grid-template-columns: 1fr; } }

/* ── table ──────────────────────────────────────────────────────── */
.tablewrap { margin-top: 30px; overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); }
.band.paper .tablewrap { background: var(--ground); }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14.5px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
th { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.tnote { margin-top: 14px; font-size: 13px; color: var(--ink-3); max-width: 70ch; }

/* ── checklist ──────────────────────────────────────────────────── */
.checks { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.checks li { position: relative; padding-left: 34px; font-size: 15px; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--mint-sf); }
.checks li::after { content: ""; position: absolute; left: 6.5px; top: 9px; width: 7px; height: 3.5px;
  border-left: 2px solid var(--mint-dp); border-bottom: 2px solid var(--mint-dp);
  transform: rotate(-45deg); }
.checks li b { color: var(--ink); }

/* ── callout ────────────────────────────────────────────────────── */
.callout { margin-top: 30px; border-left: 3px solid var(--mint); background: var(--mint-sf);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 22px 26px; max-width: 74ch; }
.callout h4 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0;
  color: var(--mint-dp); }
.callout p { margin-top: 8px; font-size: 14.5px; color: var(--ink); }
.callout.warn { border-left-color: var(--apricot); background: var(--apr-sf); }
.callout.warn h4 { color: var(--apr-dp); }
/* A callout authored before any section leads its band, so it has nothing to be
 * spaced away from — the 30px would read as a stray gap under the breadcrumb. */
.wrap > .callout:first-child { margin-top: 0; margin-bottom: 42px; }

/* ── quote ──────────────────────────────────────────────────────── */
.quote { margin-top: 34px; max-width: 74ch; }
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.32; letter-spacing: -.02em; }
.quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 14px;
  color: var(--ink-3); }

/* ── stats ──────────────────────────────────────────────────────── */
.stats { display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stats .card { padding: 24px; }
.stats .stat { font-size: 42px; }

/* ── icons ──────────────────────────────────────────────────────── */
/* One size, one weight, one colour source. The tinted plate is what stops a
 * stroke icon reading as a stray line drawing on a card that has no other
 * graphic on it. */
.ic { display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--mint-sf); color: var(--mint-dp);
  margin-bottom: 14px; }
.ic svg { width: 20px; height: 20px; display: block; }
.card.apricot .ic { background: var(--apr-sf); color: var(--apr-dp); }
.card.lilac .ic { background: var(--lil-sf); color: var(--lil-dp); }
.stats p { margin-top: 6px; font-size: 13.5px; }

/* ── media placeholder — never a stock photo ───────────────────── */
.media { border-radius: var(--r); background: linear-gradient(170deg, var(--lil-sf), var(--mint-sf));
  display: grid; place-items: center; aspect-ratio: 4/5; position: relative; }
.media.wide { aspect-ratio: 16/9; }

/* A filled slot keeps the placeholder's exact box — same aspect ratio, same
 * radius — so supplying a photograph never reflows the page around it.
 * The image is clipped by its own inherited radius rather than by the
 * container's overflow, because the stat chips in the hero are positioned to
 * hang outside that container on purpose and must not be cut off. */
.media.has-img, .ba .ph.has-img { background: var(--ground); }
/* A cut-out figure is transparent, so it keeps the placeholder's panel instead
 * of the flat surface a full-bleed photograph needs. `contain` rather than
 * `cover`: the export is already composed to this box, and cover would crop a
 * head off the moment the box's aspect ratio is ever changed. */
.media.has-cutout { background: linear-gradient(170deg, var(--lil-sf), var(--mint-sf)); }
.media.has-cutout img.fill { object-fit: contain; object-position: bottom center; }
img.fill { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }
.ba .ph.has-img em { z-index: 1; background: var(--photo-label);
  padding: 3px 7px; border-radius: 5px; }
.media p { font-size: 13px; color: var(--ink-3); text-align: center; padding: 0 30px; max-width: 34ch; }
.float { position: absolute; background: var(--paper); border-radius: 18px; padding: 14px 18px;
  box-shadow: var(--shadow); }
.float .stat { font-size: 26px; }
.float .stars { display: block; color: var(--gold); font-size: 13px;
  letter-spacing: 2px; margin-top: -2px; }
.float small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.float.a { top: 9%; left: -30px; }
.float.b { bottom: 13%; right: -26px; }
/* The third sits low on the left, so the set reads as a triangle around the
 * portrait rather than a stack down one edge. Clear of `.a` above it (which
 * ends around 25%) and of `.b` diagonally opposite. */
.float.c { bottom: 30%; left: -34px; }
@media (max-width: 900px) {
  .phead .media { max-width: 380px; }
  .float.a, .float.b, .float.c { left: auto; right: 0; }
}
/* On a phone all three hang off the same edge, and three stacked cards over a
 * 380px-wide portrait covers the face they are meant to sit beside. The rating
 * and the patient count carry the proof; the years are already in the lede and
 * the credentials line directly below, so this is the one to drop. */
@media (max-width: 640px) {
  .float.c { display: none; }
}

/* ── faq ────────────────────────────────────────────────────────── */
.faq { max-width: 78ch; }
/* Scoped to `.faq`, all of it.
 *
 * These rules were written bare — `details`, `details summary`, `details p` —
 * and the mobile menu is also built from <details>. Because this block sits
 * BELOW the .mnav rules in the file, equal specificity meant it won: every menu
 * group inherited `padding: 20px 0` (84px-tall rows for a 43px label), the
 * display font, and a "+" marker drawn on the hamburger itself. Two of the
 * three things reported as wrong with the mobile menu came from this one block
 * of unscoped selectors. */
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details summary { cursor: pointer; list-style: none; font-family: var(--display);
  font-size: 19px; font-weight: 600; line-height: 1.3; display: flex;
  justify-content: space-between; gap: 20px; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after { content: "+"; color: var(--ink-3); font-weight: 500; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 12px; font-size: 15px; }
.faq details p + p { margin-top: 10px; }

/* ── byline / review stamp — the E-E-A-T spine ─────────────────── */
.byline { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.byline b { color: var(--ink); font-weight: 600; }
.byline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }

/* ── related reading ────────────────────────────────────────────── */
.related a { display: block; text-decoration: none; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
  transition: transform .16s ease, border-color .16s ease; }
.band.paper .related a { background: var(--ground); }
.related a:hover { transform: translateY(-2px); border-color: var(--line-2); }
.related h3 { font-size: 18px; }
.related p { margin-top: 8px; font-size: 14px; }
.related .go { margin-top: 14px; font-size: 13.5px; color: var(--mint-dp); font-weight: 600; }

/* ── booking band ───────────────────────────────────────────────── */
.booking { background: var(--mint); padding-block: var(--band-pad); text-align: center; }
.booking h2 { color: var(--booking-ink); }
.booking p { margin: 14px auto 0; color: var(--booking-ink-2); }
.booking .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.booking .btn-dark { background: var(--mint-dp); color: var(--paper); }
.booking .btn-line { border-color: var(--booking-line); color: var(--booking-ink); }

/* ── footer — dark 3 of 3 ───────────────────────────────────────── */
/* Scoped to the page footer. This was a bare `footer` element selector, and
 * every quote card ends with a <footer> holding its attribution — so each
 * one rendered as a dark 66px-padded block. The site footer is a child of
 * body; nothing else should ever match. */
body > footer { background: var(--dark); color: var(--on-dark); padding-block: 66px 34px; }
/* The brand block used to be the first cell of this grid, so the template read
 * `1.5fr 1fr 1fr 1fr 1fr` — brand plus four columns. A fifth link group made
 * six children, and the sixth wrapped onto a row of its own with four empty
 * cells beside it. The template could not say "as many as there are", so the
 * fix is structural: the brand sits in its own band above, and `.cols` counts
 * only link columns. This lives here rather than as an inline style on the
 * element — an inline grid-template wins over every stylesheet rule, so the
 * media queries below silently did nothing and every page scrolled sideways
 * on a phone. */
.foot-top { display: grid; grid-template-columns: 1.7fr 1.15fr .95fr; gap: 20px 44px;
  align-items: start; padding-bottom: 40px;
  border-bottom: 1px solid var(--dark-line); }
/* The row gap is large because it only ever applies when the five columns have
 * wrapped. At 900px "Across India" landed 16px under "Consult online" and read
 * as a sixth item in the Vitiligo list rather than a new heading. */
body > footer .cols { grid-template-columns: repeat(5, 1fr); margin-top: 38px;
  gap: 36px 24px; }
/* the logo must be allowed to shrink, or it sets a floor no column can meet */
body > footer .logo { width: min(210px, 100%); }
/* `height: auto` is doing real work here, not tidying up.
 *
 * The <img> carries width="1227" height="460" so the browser can reserve the
 * box before the file arrives (no layout shift). But `img, svg { max-width:
 * 100% }` only constrains the WIDTH — the height attribute still applies, so
 * the box became 210x460: a 78px-tall logo floating in a 460px-tall element,
 * with ~190px of dead space above and below it. That is what made the footer
 * look broken, and it appeared the moment the dimension attributes were added
 * for CLS. The header logo already had this rule, which is why only the footer
 * showed it. Any image given intrinsic dimensions needs `height: auto` unless
 * something else sizes it. */
body > footer .logo img { display: block; width: 100%; height: auto; }
.foot-brand p { margin-top: 16px; font-size: 14.5px; max-width: 34ch;
  color: var(--on-dark); }
body > footer h4 { font: 600 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-3); margin: 0 0 14px; }
body > footer a { display: block; text-decoration: none; font-size: 14.5px; padding: 5px 0;
  color: var(--on-dark); }
body > footer a:hover { color: var(--on-dark-str); }
/* Name, address, phone. The footer carried none of it, on a site whose whole
 * job is getting someone to one building in Karkhana. */
.foot-nap { font-style: normal; }
.foot-nap a { max-width: 30ch; line-height: 1.55; }
.foot-nap span { display: block; padding-top: 8px; font-size: 14.5px;
  color: var(--on-dark-3); }
/* `body > footer a` is (0,1,2) and would out-specify `.btn`, flattening the
 * button back into a plain block link. Same trap as the .cols one above. */
body > footer .btn-primary { display: inline-flex; width: auto; padding: 12px 20px;
  font-size: 14.5px; }
/* Separators were "·" on `a + a::before`. Three numbers do not fit one line,
 * and the dot went with the number that wrapped — leaving it hanging at the
 * start of the second line, in front of nothing. Gaps do not wrap. */
.foot-tel { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 12px; }
.foot-tel a { padding: 4px 0; font-size: 14px; color: var(--on-dark-3); }
/* Script alternates, not a topic. One line, clearly labelled. */
.foot-langs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 20px;
  margin-top: 34px; }
.foot-langs h4 { margin: 0; }
.foot-langs a { padding: 0; }
.legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--dark-line);
  font-size: 12.5px; color: var(--on-dark-3); display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
/* These must carry the same `body >` prefix as the rules they override. Without
 * it `footer .cols` (0,1,1) loses to `body > footer .cols` (0,1,2) and the
 * five-column desktop footer stays five columns on a phone — 534px of content
 * in a 390px viewport. verify.py caught it; specificity did not announce it. */
/* Five columns need about 200px each before "Travelling for treatment" wraps,
 * so they step down before the old 820px break rather than at it. */
@media (max-width: 1040px) { body > footer .cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { body > footer .cols { grid-template-columns: 1fr 1fr; } }
/* Two columns, not one, for the same reason the rest of the site went to two on
 * a phone: five stacked groups of six links is a 1,100px scroll of footer, and
 * nobody reaches "Visit us". The longest label here is "Travelling for
 * treatment" — it wraps to two lines at this width, which is fine, where a
 * third column would truncate it. */
@media (max-width: 560px) {
  body > footer .cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
}
/* Below 380px two columns of link text stop being readable — the same floor the
 * chips and card grids use. */
@media (max-width: 379px) {
  body > footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .foot-top { grid-template-columns: 1fr; }
  /* Three numbers on one line just fit a 390px screen — flush to the edge,
   * with nothing to spare. Stacked they stay inside the gutter and each one
   * is a bigger tap target. */
  .foot-tel { flex-direction: column; gap: 0; }
}

/* ── mobile dock ────────────────────────────────────────────────── */
.dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none;
  gap: 10px; background: var(--dock-scrim); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px;
  box-shadow: var(--shadow); }
.dock .btn { flex: 1; justify-content: center; padding: 13px 18px; }
@media (max-width: 720px) { .dock { display: flex; } body { padding-bottom: 84px; } }

/* ══════════════════════════════════════════════════════════════════
   MOBILE — density pass
   ══════════════════════════════════════════════════════════════════
   Everything below 640px was a single column of full-width pills and
   cards, so the phone build was enormously tall: "What brings you in?"
   alone ran sixteen rows, and the two review cards stacked when they are
   narrow enough to sit side by side. The rule applied here is that any
   element whose content is SHORT (a pill, a stat, a review score, a
   button) goes two-up, and only genuinely long-form blocks stay full
   width. Type and padding step down with it, or two columns just
   reintroduces the height as wrapped lines.
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* The dark bar was three lines tall before any content: address, hours
   * and the former name wrapped, then the rating went to its own row. On
   * a 390px screen that is a fifth of the first viewport spent on a strip
   * nobody came for. The hours and the former name live on the contact
   * and location pages; here they are dropped and the bar is one line. */
  .utility { font-size: 12px; }
  .utility .wrap { flex-wrap: nowrap; gap: 10px; padding-block: 7px;
    align-items: center; }
  .utility .u-hours, .utility .u-former, .utility .u-pat { display: none; }
  /* `min-width: 0` on both children, or a flex item refuses to shrink below
   * its content and pushes the DOCUMENT wider than the viewport — which is
   * what happened on the first attempt: a nowrap bar clipped the H1 and every
   * card on the page. The left span truncates, the rating never wraps. */
  .utility .wrap > span { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .utility .wrap > a { flex: none; white-space: nowrap; }

  /* Hero: the two calls to action side by side, and the credential pills
   * two-up. Four full-width pills was four rows for four short phrases. */
  .phead .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .phead .acts .btn { justify-content: center; padding-inline: 12px;
    font-size: 14.5px; }
  .creds { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .creds span { font-size: 11.5px; padding: 6px 10px; text-align: center; }

  /* The symptom finder — the longest block on the home page. */
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 22px; }
  .chip { padding: 10px 12px; font-size: 12.5px; gap: 7px;
    border-radius: var(--r-sm); line-height: 1.25; }
  .chip i { width: 7px; height: 7px; }

  /* Review scores side by side — they are a logo, a number and a line of
   * text, which fits a half-width card comfortably. */
  .scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .score { padding: 12px 12px 12px 10px; gap: 2px 8px; }
  .score .n { font-size: 25px; }
  .score .src { font-size: 11.5px; }

  /* Card grids: two-up, with the type stepped down to match. */
  .cols, .stats, .steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card, .step { padding: 16px 14px; border-radius: var(--r-sm); }
  .card h3, .step h3 { font-size: 16px; }
  .card p, .step p { font-size: 13px; margin-top: 7px; }
  .card ul { margin-top: 10px; }
  .card li { font-size: 12.5px; padding: 5px 0; }
  .stats .card { padding: 16px 14px; }
  .stats .stat { font-size: 30px; }
  .card .icon, .card svg { width: 28px; height: 28px; }

  /* A card carrying a paragraph AND a list is too dense at half width, so
   * anything that opts into `.wide` stays full width. */
  .cols .card.wide { grid-column: 1 / -1; }

  /* Pillars keep one column — their lists are full sentences — but lose a
   * third of their padding, and the link list goes two-up where it can. */
  .pcard { padding: 20px 18px 18px; }
  .ptag { width: 36px; height: 36px; border-radius: 12px; font-size: 15px;
    margin-bottom: 12px; }
  .pcard h3 { font-size: 19px; }
  .pcard > p { font-size: 13px; }
  .pcard ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .pcard li a { font-size: 13px; }
  .pcard .flag { display: none; }

  .bento { gap: 10px; margin-top: 22px; }
  .band { padding-block: 40px; }
}

/* Below 380px two columns of pills stop being readable — the labels wrap to
 * three lines each and the saving is lost. The narrow tier goes back to one
 * column for text-heavy grids while keeping the compact type. */
@media (max-width: 379px) {
  .chips, .cols, .steps { grid-template-columns: 1fr; }
  .pcard ul { grid-template-columns: 1fr; }
}

/* ── references ─────────────────────────────────────────────────────
 * A citation list has to look checkable rather than decorative, so this
 * borrows the byline's muted register instead of the card treatment used
 * everywhere else: numbered, quiet, and clearly the end of the argument.
 * Two columns on wide screens keeps a six-item list from reading as filler. */
.refs { max-width: 900px; }
.refs-note { color: var(--ink-3); font-size: 14px; max-width: 62ch;
  margin: 12px 0 0; }
.refs ol { margin: 22px 0 0; padding: 0 0 0 20px;
  columns: 2; column-gap: 40px; }
.refs li { break-inside: avoid; margin-bottom: 14px; padding-left: 4px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.refs li a { color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2); }
.refs li a:hover { color: var(--ink); border-bottom-color: var(--ink-3); }
.refs li span { display: block; color: var(--ink-3); font-size: 12.5px;
  opacity: .85; margin-top: 2px; }

@media (max-width: 900px) {
  .refs ol { columns: 1; }
}