/* Phase 2 visual system. --phase remains the single adaptive accent input.
   CONTRAST RULES (binding):
   - Text is bone or muted on ground/card; never place body text on a gradient.
   - --acc-a is the only accent used for text.
   - --acc-b is for borders/UI; --acc-d is for glows/surfaces only.
   - Urdu text is bone. The WhatsApp CTA is fixed gold. */
@property --intent { syntax:"<number>"; inherits:true; initial-value:.5; }
@property --drift { syntax:"<number>"; inherits:true; initial-value:0; }
@property --scroll { syntax:"<number>"; inherits:true; initial-value:0; }
@property --amp { syntax:"<number>"; inherits:true; initial-value:1; }

/* THEME-2 (clinic ACCEPT 084942Z; docs/research/dark-theme-borders-2026-10-26.md, Option A): dark edges to
   >= 3:1 (WCAG 2.2 SC 1.4.11) without touching text or gold. --line #3a342e -> #726858 (inputs, chips,
   dividers; card edges re-derive via the existing acc-b 35% mix, no formula change), plus a second edge
   step --line-hi #7e7464 for the three borders on lighter fills: .test-details, .modal-close (below) and
   .hs-otp-fallback-notice — the --card/-hi pair mirrors --card/--card-2 and --gold/--gold-hi. Light keeps
   its THEME-1 values; its --line-hi aliases --line, so light renders exactly as before. */
:root {
  --ground:#0f0d0b; --card:#1a1714; --line:#726858; --line-hi:#7e7464; --bone:#ece6da;
  --muted:#a9a196; --gold:#c9a45a; --wa:#25d366;
  --f2:#e65693; --f3:#d11877; --f4:#872b55;
  --m2:#6de1c2; --m3:#35b490; --m4:#1e6b58;
  --phase:clamp(.1,calc(var(--intent) + (var(--drift) + var(--scroll)) * var(--amp)),.9);
  --pm:calc(var(--phase) * 100%);
  --acc-a:color-mix(in oklch,var(--m2) var(--pm),var(--f2));
  --acc-b:color-mix(in oklch,var(--m3) var(--pm),var(--f3));
  --acc-d:color-mix(in oklch,var(--m4) var(--pm),var(--f4));
  --ramp-left:var(--f2); --ramp-right:var(--m2);
  --grad:linear-gradient(135deg,var(--ramp-left),var(--ramp-right));
  --grad-rule:linear-gradient(90deg,transparent,var(--ramp-left),var(--ramp-right),transparent);
  --card-2:color-mix(in srgb,var(--card) 92%,var(--bone));
  --gold-hi:color-mix(in oklch,var(--gold) 85%,var(--bone));
  --on-gold:color-mix(in srgb,var(--ground) 94%,var(--gold));
  --shadow:color-mix(in srgb,var(--ground) 60%,transparent);
  --scrim:color-mix(in srgb,var(--ground) 78%,transparent);
  --header-height:56px;
  --r:16px;
  --font:"Clinic Grotesk","Clinic Grotesk Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ur:"Clinic Nastaliq","Clinic Nastaliq Fallback","Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --font-serif:"Clinic Serif","Clinic Serif Fallback",Georgia,serif;
  --fs-display:36px; --fs-h1:28px; --fs-h2:22px;
  --fs-h3:18px; --fs-body:16px; --fs-small:13px;
  --fs-skip:16px; /* FIX 033221Z item 1: the one WIDTH-CONSTANT type token (every --fs-* above shifts at >=1024; the skip link must not) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px;
  --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --ease:cubic-bezier(.16,1,.3,1);
  transition:--intent 600ms var(--ease),--amp 600ms var(--ease);
  animation:none;
  color-scheme:dark;
}
html[data-audience="m"] { --ramp-left:var(--m3); --ramp-right:var(--m2); }
html[data-audience="f"] { --ramp-left:var(--f3); --ramp-right:var(--f2); }
html[data-audience="n"] { --ramp-left:var(--f2); --ramp-right:var(--m2); }
@keyframes acsc-drift { 0%,100% { --drift:-.15; } 50% { --drift:.15; } }
@keyframes acsc-scroll { from { --scroll:-.15; } to { --scroll:.15; } }
@keyframes spin { to { transform:rotate(360deg); } }
@supports (animation-timeline:scroll()) {
}
:root.acsc-paused { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  :root { animation:none!important; transition:none!important; --drift:0; --scroll:0; --amp:0; }
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
@supports not (color:color-mix(in oklch,red 50%,blue)) {
  :root { --acc-a:var(--gold); --acc-b:var(--gold); --acc-d:var(--card); --card-2:var(--card); --gold-hi:var(--gold); --on-gold:var(--ground); --shadow:var(--ground); --scrim:var(--ground); }
}

*,*::before,*::after { box-sizing:border-box; }
html { background:var(--ground); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--bone); font-family:var(--font); font-size:var(--fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
img,picture,video { display:block; max-width:100%; height:auto; }
/* r32: hero <picture> (AVIF + WebP) adds no box, so the hero's "img" rules lay it out as before */
picture.pic { display:contents; }
a { color:inherit; }
p { margin:0 0 var(--s3); }
h1,h2,h3,h4 { margin:0; color:var(--bone); font-weight:500; }
h1 { font-family:var(--font-serif); font-size:var(--fs-h1); line-height:1.214; }
h2 { font-size:var(--fs-h2); line-height:1.273; }
h3 { font-size:var(--fs-h3); line-height:1.333; }
::selection { background:var(--gold); color:var(--on-gold); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
/* a11y (lane c3): keyboard skip link — offscreen until focused, then pinned above the sticky header
   (z-index 60 > header 30). Logical inset only, so RTL needs no override; fs-body (16px, was 1rem) keeps Nastaliq legible. */
.skip-link { position:fixed; inset-inline-start:-100vw; top:0; z-index:60; background:var(--gold); color:var(--on-gold); font-size:var(--fs-skip); line-height:1.6; padding:var(--s2) var(--s3); text-decoration:none; border-radius:0 0 var(--r) var(--r); } /* FIX 033221Z item 1: var(--fs-skip) = 16px at every width (var(--fs-body) is 17px at >=1024, which changed the skip link on every desktop page) */
.skip-link:focus { inset-inline-start:0; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding-inline:var(--s3); }
section { padding-block:var(--s6); position:relative; }
.head { display:flex; align-items:end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2); }
.rule { height:1px; background:var(--grad-rule); margin:0 0 var(--s4); }
.eyebrow { display:inline-block; font-size:var(--fs-small); line-height:1.385; letter-spacing:0; text-transform:none; font-weight:600; color:var(--acc-a); }
.muted,.tiny { color:var(--muted); }
.tiny { font-size:var(--fs-small); line-height:1.385; }
.num { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
html[data-audience="m"] [data-only]:not(.photo):not([data-only~="m"]),
html[data-audience="f"] [data-only]:not(.photo):not([data-only~="f"]),
html[data-audience="n"] [data-only]:not(.photo):not([data-only~="n"]) { display:none!important; }

header.site { position:sticky; inset-block-start:0; z-index:30; height:56px; background:color-mix(in srgb,var(--ground) 92%,transparent); border-bottom:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); backdrop-filter:blur(12px); }
header.site .wrap { height:100%; display:flex; align-items:center; gap:var(--s2); }
.brand { display:flex; align-items:center; gap:var(--s2); text-decoration:none; min-width:0; min-height:44px; }
.mark,.mark img { width:36px; height:40px; object-fit:contain; flex:none; }
.wordmark b { font-size:var(--fs-small); line-height:1.385; font-weight:500; white-space:nowrap; }
.brand-full { display:none; }
.header-actions { margin-inline-start:auto; display:flex; align-items:center; gap:var(--s2); }
.menu-toggle { display:none; min-width:44px; min-height:44px; padding:var(--s2); border:1px solid var(--acc-b); background:var(--card); border-radius:8px; flex-direction:column; justify-content:center; gap:var(--s1); color:var(--bone); }
.menu-toggle>span:not(.menu-label) { display:block; width:100%; height:1px; background:currentColor; }
.menu-label { position:absolute; width:1px; height:1px; overflow:hidden; }
nav.main { margin-inline-start:auto; display:flex; align-items:center; gap:var(--s3); }
nav.main a { min-height:32px; display:inline-flex; align-items:center; text-decoration:none; border-bottom:1px solid transparent; font-size:var(--fs-small); line-height:1.385; }
nav.main a[aria-current="page"],nav.main a:hover { border-bottom-color:var(--acc-a); }
nav.main .lang { display:none; }
.lang-slot { display:inline-flex; }
/* WCAG 2.4.3: DOM order is brand, header-actions (menu toggle), nav; `order` keeps the visual order brand, nav, actions */
header.site nav.main { order:2; }
header.site .header-actions { order:3; }
.lang { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 var(--s2); border:1px solid var(--acc-b); border-radius:999px; text-decoration:none; font-size:var(--fs-small); line-height:1.385; }
html:not(.js) header.site { height:auto; min-height:56px; }
html:not(.js) header.site .wrap { height:auto; flex-wrap:wrap; padding-block:var(--s1); }
html:not(.js) nav.main { flex-wrap:wrap; gap:var(--s2); }
.js .menu-toggle { display:flex; }
.js header.site nav.main { display:none; position:absolute; inset-inline:0; inset-block-start:56px; margin:0; padding:var(--s3); background:var(--ground); border-bottom:1px solid var(--acc-b); box-shadow:0 16px 32px var(--shadow); }
.js header.site.menu-open nav.main { display:grid; grid-template-columns:1fr; gap:var(--s1); }
.js header.site.menu-open nav.main a { padding:var(--s2); }

.filter-toolbar { position:sticky; top:var(--header-height, 56px); z-index:10; background:color-mix(in srgb,var(--ground) 94%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-block-end:1px solid var(--line); padding-block:var(--s2); }
.filter-scroll { display:flex; align-items:center; gap:var(--s2); overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-inline:var(--s1); }
.filter-scroll.has-overflow { --fade-s:0px; --fade-e:0px; mask-image:linear-gradient(to right,transparent,black var(--fade-s),black calc(100% - var(--fade-e)),transparent); -webkit-mask-image:linear-gradient(to right,transparent,black var(--fade-s),black calc(100% - var(--fade-e)),transparent); }
[dir="rtl"] .filter-scroll.has-overflow { mask-image:linear-gradient(to left,transparent,black var(--fade-s),black calc(100% - var(--fade-e)),transparent); -webkit-mask-image:linear-gradient(to left,transparent,black var(--fade-s),black calc(100% - var(--fade-e)),transparent); }
/* u2-ux: fade only the side that has more chips, wide enough to read as "scroll for more" */
.filter-scroll.fade-start { --fade-s:var(--s7); }
.filter-scroll.fade-end { --fade-e:var(--s7); }
.filter-scroll::-webkit-scrollbar { display:none; }
.chip { min-height:40px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex-shrink:0; padding:0 var(--s3); border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--bone); font:inherit; font-size:var(--fs-small); cursor:pointer; transition:all 180ms ease; }
.chip.slot-chip { min-height:44px; min-width:44px; }
.chip.slot-chip-unavailable { min-height:44px; min-width:44px; color:var(--muted); border-style:dashed; cursor:not-allowed; } /* THEME-2: the 0.55 opacity dim is dropped in dark too (mirrors THEME-1 light) — at .55 the border measured 1.21 and the text 3.01 on card; the dashed border + muted text at full opacity carry "unavailable" */
.chip.slot-chip-unavailable:hover { border-color:var(--line); color:var(--muted); }
.chip:hover { border-color:var(--acc-b); color:var(--gold); }
.chip[aria-pressed="true"] { background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:600; }
/* G5-B: on the services/home toolbar the 'Showing N of N' line is redundant while All is active (the chip already carries N); kept in the a11y tree so a filter change is still announced */
.filter-toolbar[data-count-quiet]:has(.chip[data-category="all"][aria-pressed="true"]) .filter-count { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:767px) { [data-reel-filter] .filter-count { margin-top:0.75rem; } } /* G5 merge4: the "Showing N of N videos" line sat tight under the chips */
.filter-count { margin-top:var(--s1); color:var(--muted); font-size:var(--fs-small); line-height:1.385; white-space:nowrap; }

.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); padding:var(--s2) var(--s4); border:1px solid transparent; border-radius:999px; text-decoration:none; font:inherit; font-size:var(--fs-body); font-weight:500; cursor:pointer; }
.btn-primary { background:var(--gold); color:var(--on-gold); box-shadow:0 0 0 1px var(--gold); }
.btn-primary:hover { background:var(--gold-hi); box-shadow:0 0 0 2px var(--gold-hi); }
.btn-ghost { color:var(--bone); border-color:var(--acc-b); background:var(--ground); }
.btn-ghost:hover { box-shadow:0 0 0 2px var(--acc-b); }
.btn[disabled],.btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.cta { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); }
.text-link,.src,.more-link { color:var(--acc-a); text-underline-offset:4px; }
.text-link,.more-link { min-height:44px; display:inline-flex; align-items:center; }

.hero { position:relative; min-height:calc(100svh - 56px); display:grid; align-items:end; overflow:hidden; isolation:isolate; padding:0; }
.hero .photo { position:absolute; inset:0; z-index:-2; opacity:1; transition:opacity 600ms var(--ease); }
.hero .photo[data-only] { display:block!important; opacity:0; }
html[data-audience="m"] .hero .photo[data-only~="m"],
html[data-audience="f"] .hero .photo[data-only~="f"],
html[data-audience="n"] .hero .photo[data-only~="n"] { opacity:1; }
.hero .photo img { width:100%; height:100%; }
.hero .photo img { object-fit:cover; object-position:center; }
.hero .veil { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,color-mix(in srgb,var(--ground) 92%,var(--acc-d)) 0%,color-mix(in srgb,var(--ground) 70%,transparent) 58%,transparent 100%); }
.hero .wrap { padding-block:var(--s5); }
.hero .wrap>div { max-width:680px; }
.hero h1 { max-width:14ch; font-size:var(--fs-display); line-height:1.111; text-wrap:balance; }
.hero p { max-width:60ch; margin-top:var(--s3); color:var(--bone); }


.grid-cards { display:grid; grid-template-columns:1fr; align-items:stretch; gap:var(--s3); padding-block:0; }
.concern { min-width:0; display:flex; flex-direction:column; height:100%; background:var(--card); border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; overflow:hidden; text-decoration:none; position:relative; transition:box-shadow 600ms var(--ease),border-color 600ms var(--ease); }
.concern:hover { border-color:var(--acc-b); box-shadow:0 0 0 2px var(--acc-b); }
.concern>img,.concern>picture img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.concern .in { flex:1; display:flex; flex-direction:column; padding:var(--s3); }
.concern h3 { font-size:var(--fs-h3); line-height:24px; height:48px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; margin:0; padding:0; }
.concern .what { margin:var(--s2) 0 0; color:var(--muted); font-size:var(--fs-body); line-height:24px; min-height:72px; display:block; padding:0; } /* G5-B: card blurbs are cut at sentence/clause boundaries by the build (card_blurb), so no CSS line clamp: nothing is ever cut mid-phrase */
.devices-line { color:var(--muted); font-size:var(--fs-small); line-height:20px; }
:is(.prose,.devices-list) .devices-line { font-size:max(0.95rem,var(--fs-small)); line-height:1.6; }
.concern .devices-line { margin:var(--s1) 0 0; line-height:20px; height:40px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; padding:0; }
.concern-actions { margin-top:auto; padding-top:var(--s3); display:flex; flex-direction:column; }
.concern-actions .btn { width:100%; justify-content:center; text-align:center; }
.card-link { color:inherit; text-decoration:none; }
/* title = its own line height at every width (no reserved second line); the 44 px tap target is padding cancelled by negative margin, so it adds no layout height */
.concern h3 { display:flow-root; height:auto; -webkit-line-clamp:unset; overflow:visible; text-overflow:clip; }
.concern h3 .card-link { display:block; min-height:0; padding-block:10px; margin-block:-10px; }
@media (max-width:480px) {
  .concern .what { min-height:0; }
  .concern .devices-line { height:auto; }
} /* G5-B: no reserved title/blurb/tag lines on phones (single-column cards need no row alignment) */
/* G5-B tap target: the title link is a 44 px row (top-aligned, so the text does not move inside the fixed-height h3) */
.concern h3 .card-link { display:inline-flex; align-items:flex-start; min-height:44px; max-width:100%; }
.card-link:hover { text-decoration:underline; text-decoration-color:var(--acc-b); text-underline-offset:4px; }
.card-link:focus-visible { outline:2px solid var(--acc-a); outline-offset:2px; border-radius:4px; }
.nw { white-space:nowrap; }
/* G5 merge4: four doctor cards never leave one alone on row 2 (3 columns did): 2x2 below 1280 px, one row of 4 from 1280 px */
@media (min-width:768px) { .grid-cards.doctor-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* G5 merge8 (judged doctors 4): 4 columns only where each is >= 300 px (the .wrap widens to 1400 px for this grid), else 2x2 */
/* r9 (judged doctors 3): the grid stays in the shared 1132 px container (no wider .wrap); 4 columns from 1280 px, 2 below */
@media (min-width:1280px) { .grid-cards.doctor-cards { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ph-line { display:block; }
.result-card { display:flex; flex-direction:column; height:100%; }
.result-card .in { flex:1; display:flex; flex-direction:column; min-height:112px; }
.result-card h3 { font-size:var(--fs-h3); line-height:24px; height:48px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; margin:0; padding:0; }
.src { min-height:24px; display:inline-flex; align-items:center; margin-top:auto; font-size:var(--fs-small); line-height:1.385; }

.prose { max-width:75ch; }
/* G5 merge4 (judged: section left edges alternated between 154 and 335 px at 1440): a prose section keeps the full container start edge; only its text measure is capped */
.wrap.prose, html:not([dir="rtl"]) .wrap.prose { max-width:1180px; }
.wrap.prose > * { max-width:75ch; }
html:not([dir="rtl"]) .wrap.prose > * { max-width:48.075em; }
.prose p { color:var(--muted); }
.ledger { list-style:none; padding:0; margin:var(--s4) 0 0; display:grid; grid-template-columns:1fr; gap:var(--s3); }
.entry { overflow:hidden; background:var(--card); border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; }
.entry img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.entry .src { margin:0; padding:var(--s3); }
.entry .consent-label { margin:var(--s2) var(--s3) 0; }
.more-link { margin-top:var(--s3); }
.booking-cta { border-block:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); }
.booking-cta .wrap,.results-note { display:grid; grid-template-columns:1fr; gap:var(--s3); align-items:center; }
.results-note { padding:var(--s4); background:var(--card); border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; }

.doctor .grid,.visit .grid { display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:center; }
.doctor .frame { position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; }
.doctor .frame img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.halo { position:absolute; inset:auto 0 0; height:32%; background:linear-gradient(0deg,color-mix(in srgb,var(--acc-d) 45%,transparent),transparent); }
.quotes,.prov { list-style:none; padding:0; margin:var(--s4) 0 0; display:grid; gap:var(--s3); }
.quotes li { border-inline-start:2px solid var(--acc-b); padding-inline-start:var(--s3); }
.quotes p { margin:0; }
.quotes small,.prov li > span { color:var(--muted); font-size:var(--fs-small); line-height:1.385; }
.prov { grid-template-columns:1fr; }
.prov li,.card { padding:var(--s4); background:var(--card); border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; }
/* G5 merge4: only the card's own direct spans are lines; the .num / lang=en spans INSIDE a sentence stayed inline (the years rendered as block lines) */
.prov .when,.prov b,.prov li > span { display:block; }
.prov a { min-height:24px; display:inline-flex; align-items:center; margin-top:var(--s2); color:var(--acc-a); font-size:var(--fs-small); }
.visit address { font-style:normal; }
.map { overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.map iframe { width:100%; min-height:320px; border:0; }

.form { display:grid; gap:var(--s3); }
.row-2 { display:grid; grid-template-columns:1fr; gap:var(--s3); }
.field { display:grid; gap:var(--s2); }
.field label,.choice legend { font-size:var(--fs-body); }
.field input,.field select,.field textarea { width:100%; min-height:48px; padding:var(--s2) var(--s3); border:1px solid var(--line); border-radius:8px; background:var(--ground); color:var(--bone); font:inherit; font-size:var(--fs-body); }
.field textarea { min-height:112px; resize:vertical; }
.field-error { color:var(--f2); font-size:var(--fs-small); line-height:1.4; margin-top:calc(var(--s1) * -0.5); }
.field-error[hidden] { display:none; }
.form-summary { color:var(--f2); font-size:var(--fs-small); line-height:1.4; margin-bottom:var(--s2); font-weight:500; }
.form-summary[hidden] { display:none; }
:is(.field input, .field select, .field textarea)[aria-invalid="true"] { border-color:var(--f2); }
.choice { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.choice legend { width:100%; margin-bottom:var(--s2); padding:0; }
.choice label { position:relative; }
.choice input { position:absolute; opacity:0; inset:0; margin:0; }
.choice label > span,.chip { min-height:44px; display:inline-flex; align-items:center; padding:0 var(--s3); border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--bone); font:inherit; font-size:var(--fs-small); }
/* G5 merge5: the chip label is a flex container, which drops the spaces between Urdu words and the .num digit runs ("صبح10تا"); the margin restores them */
.choice label > span .num { margin-inline:.25em; }
.choice input:checked+span,.chip:hover { border-color:var(--acc-b); }
.choice input:focus-visible+span { outline:2px solid var(--gold); outline-offset:3px; }
.hp { position:absolute!important; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.turnstile-container { min-height:65px; margin-block:var(--s2); display:flex; justify-content:flex-start; }
/* G5 merge8 (judged my 4): the portal login widget is interaction-only, so no 65 px band is reserved while it is invisible; the widget sizes the box when a challenge shows */
#portal-turnstile { min-height:0; margin-block:0; }
#portal-turnstile:empty { display:none; }
.form-status { padding:var(--s2) var(--s3); border-inline-start:3px solid var(--acc-b); background:var(--card); font-size:var(--fs-small); }
.form-status:empty { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s2); }
.hs-slot-picker { display:grid; gap:var(--s2); margin-top:var(--s2); margin-bottom:var(--s2); }
.hs-slot-picker[hidden] { display:none; }
.hs-status { font-size:var(--fs-small); color:var(--bone); margin-top:var(--s1); } /* THEME-2: was var(--bone-dim), an undefined token — it fell back to inherited bone; pinned to the real token it always rendered as */
.hs-otp-section { display:block; margin-block:var(--s3); padding:var(--s3); border:1px solid var(--line); border-radius:12px; background:var(--card); }
.hs-otp-section[hidden], .hs-otp-step-send[hidden], .hs-otp-step-verify[hidden], .hs-otp-verified-badge[hidden], .hs-otp-fallback-notice[hidden] { display:none!important; }
.hs-otp-title { margin:0 0 var(--s1); font-size:var(--fs-body); font-weight:600; color:var(--bone); }
.hs-otp-desc { margin:0 0 var(--s2); font-size:var(--fs-small); color:var(--muted); line-height:1.4; }
.hs-otp-action-row, .hs-otp-input-row, .hs-otp-resend-row { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.hs-otp-input { max-width:140px; min-height:44px; font-size:var(--fs-h3); font-family:monospace; letter-spacing:0.25em; text-align:center; padding-inline:var(--s2); border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--bone); } /* THEME-2: was var(--bg), undefined — painted transparent over the --card section behind; pinned to the token it rendered as */
.hs-otp-verified-badge { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border:1px solid #86efac; border-radius:8px; background:rgba(34,197,94,0.1); color:#22c55e; font-size:var(--fs-small); font-weight:600; }
.hs-otp-fallback-notice { padding:var(--s2) var(--s3); border:1px solid var(--line-hi); border-radius:8px; background:rgba(234,179,8,0.1); color:#eab308; font-size:var(--fs-small); } /* THEME-2: edge on the amber tint needs the --line-hi step (--line measured 1.20 here) */
.hs-otp-fallback-text { margin:0; line-height:1.4; }
.hs-otp-note { margin-block-start:var(--s1); margin-block-end:0; color:var(--muted); }
.btn.is-busy { opacity:.7; cursor:progress; }
.form-status[data-state="busy"]::before { content:""; display:inline-block; width:12px; height:12px; margin-inline-end:var(--s2); border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
.load-more-actions { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); padding:var(--s4) 0 var(--s3); }
.results-tally { margin:0; color:var(--muted); font-size:var(--fs-small); line-height:1.385; }
/* G5-B: the sticky toolbar's .filter-count already shows the same count (theme.js keeps both in sync); the second line under the button was a duplicate */
.results-tally { display:none; }
.js .result-card[data-hidden="true"],.js .concern[data-hidden="true"] { display:none!important; }
.hero-text { min-height:480px; background:color-mix(in srgb,var(--card) 85%,var(--acc-d)); }

footer.site { margin-top:var(--s7); padding-block:var(--s5); border-top:1px solid transparent; border-image:var(--grad-rule) 1; color:var(--muted); font-size:var(--fs-small); line-height:1.385; }
footer .wrap { display:grid; gap:var(--s3); }
/* G5-B tap target: footer links are 44 px rows */
footer.site .nap a { display:inline-flex; align-items:center; min-height:44px; }
/* phones: the footer items stack as rows (each link >= 44 px), the dot separators are hidden; >= 768 px keeps the dotted line */
@media (max-width:767px) { #services { padding-block-start:var(--s3); } /* G5-B: tighter gap under the home hero CTA */
  footer.site .nap { display:flex; flex-direction:column; align-items:flex-start; } footer.site .nap .sep { display:none; } [dir="rtl"] footer.site .nap > span:not(.sep) { line-height:2; } }
.nap { margin:0; max-width:75ch; }
.nap a { min-height:24px; display:inline-flex; align-items:center; }
.social { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); }
.social a { min-height:44px; display:inline-flex; align-items:center; padding:var(--s1) var(--s2); border:1px solid var(--line); border-radius:999px; color:var(--bone); text-decoration:none; font-size:var(--fs-small); }
.social a:hover { border-color:var(--acc-b); }

[dir="rtl"] body { font-family:var(--font-ur); font-size:var(--fs-h3); line-height:2; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4 { font-family:var(--font-ur); font-weight:400; line-height:1.9; }
[dir="rtl"] .hero h1 { font-size:var(--fs-display); line-height:1.9; padding-block-start:var(--s2); margin-block-start:.3em; } /* G5 merge5: the کیل kaf stroke rose into the eyebrow at 1440 */
[dir="rtl"] .wordmark b { font-size:var(--fs-body); line-height:1.6; }
[dir="rtl"] .concern h3 { line-height:32px; height:64px; }
/* Urdu descriptions are never clamped: Nastaliq ascenders/descenders overflow the line box, so any clip cuts glyphs (qa_rtl check 3). Two-line minimum keeps rows level; the full text shows. */
[dir="rtl"] .concern .what { display:block; -webkit-line-clamp:unset; overflow:visible; text-overflow:clip; line-height:32px; height:auto; min-height:calc(64px + var(--s2)); padding-block:var(--s1); }
[dir="rtl"] .concern .devices-line { line-height:26px; height:52px; }
[dir="rtl"] .concern:not(.result-card) h3 { min-height:0; } /* G5 merge4: no 60 px gap under a one-line Urdu hub title */
[dir="rtl"] .result-card h3 { line-height:32px; height:64px; }
[dir="rtl"] .eyebrow { color:var(--bone); letter-spacing:0; text-transform:none; font-weight:400; font-size:max(0.95rem,var(--fs-small)); line-height:2; }
/* G5 merge4 (urdu-copy §5): Nastaliq captions and the page-head sublines are never below 0.95rem, with room for the descenders under the h1 */
[dir="rtl"] :is(.result-card .case-count,.result-card .consent-label,.page-head .consent-note,.page-head p,.consent-label) { font-size:max(0.95rem,var(--fs-small)); line-height:2; }
[dir="rtl"] .page-head h1 { margin-block-end:0.5rem; }
[dir="rtl"] .btn,[dir="rtl"] .chip { line-height:1.8; }
[dir="rtl"] .en,[dir="rtl"] [lang="en"] { font-family:var(--font); line-height:1.5; }
[dir="rtl"] input[type="tel"],[dir="rtl"] time,[dir="rtl"] .num { direction:ltr; unicode-bidi:isolate; }

/* r6-mobile: Urdu names/titles never clipped (Nastaliq ink overflows the line box); tools/ur_vclip.mjs */
[dir="rtl"] .doctor-card h2,[dir="rtl"] .doctor-card h3 { display:block; -webkit-line-clamp:unset; overflow:visible; text-overflow:clip; max-height:none; line-height:2.2; padding-block:var(--s1); }
[dir="rtl"] .doctor-card .doctor-role,[dir="rtl"] .modal-main .doctor-role,[dir="rtl"] .doctor-profile-info .doctor-role { line-height:2.3; padding-block:var(--s1) 0; }
[dir="rtl"] .doctor-card .doctor-spec { display:block; -webkit-line-clamp:unset; overflow:visible; text-overflow:clip; max-height:none; line-height:2.1; }
[dir="rtl"] .concern h3,[dir="rtl"] .result-card h3 { display:block; -webkit-line-clamp:unset; overflow:visible; text-overflow:clip; height:auto; min-height:calc(72px + 2 * var(--s1)); line-height:36px; padding-block:var(--s1); }

@media (max-width:374px) {
  .wordmark { display:none; }
}
@media (min-width:376px) {
  .wrap { padding-inline:var(--s4); }
}
@media (min-width:768px) {
  :root { --header-height:96px; }
  header.site { height:96px; }
  header.site .wrap { display:grid; grid-template-columns:1fr auto; grid-template-rows:48px 48px; }
  .brand-full { display:block; }
  .brand-short { display:none; }
  .menu-toggle { display:none!important; }
  .header-actions,.lang-slot { grid-column:2; grid-row:1; }
  header.site nav.main,.js header.site nav.main { grid-column:1/-1; grid-row:2; position:static; display:flex; justify-content:center; margin:0; padding:0; border:0; box-shadow:none; background:transparent; gap:var(--s4); }
  nav.main a { font-size:var(--fs-small); }
  .hero { min-height:60vh; }
  .grid-cards,.ledger,.prov { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .doctor .grid,.visit .grid,.row-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .booking-cta .wrap,.results-note { grid-template-columns:1fr auto; }
  .filter-toolbar .wrap { flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s3); }
  .filter-count { margin-top:0; }
}
@media (min-width:1024px) {
  :root { --header-height:64px; --fs-display:60px; --fs-h1:40px; --fs-h2:28px; --fs-body:17px; }
  header.site { height:64px; }
  header.site .wrap { display:flex; }
  .header-actions,.lang-slot { margin-inline-start:0; order:3; }
  header.site nav.main,.js header.site nav.main { order:2; margin-inline-start:auto; gap:var(--s4); }
  [dir="rtl"] header.site nav.main,[dir="rtl"] .js header.site nav.main { margin-inline:auto; }
  .brand { order:1; }
  nav.main a { font-size:var(--fs-body); }
  section { padding-block:var(--s6); }
  .hero { min-height:640px; align-items:center; }
  .hero .veil { background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 92%,var(--acc-d)) 0%,color-mix(in srgb,var(--ground) 72%,transparent) 42%,transparent 70%); }
  [dir="rtl"] .hero .veil { background:linear-gradient(270deg,color-mix(in srgb,var(--ground) 92%,var(--acc-d)) 0%,color-mix(in srgb,var(--ground) 72%,transparent) 42%,transparent 70%); }
  .hero .wrap { padding-block:var(--s6); }
  .grid-cards,.ledger { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); }
}
@media (min-width:1440px) {
  :root { --header-height:68px; }
  header.site { height:68px; }
}
@media (hover:none) {
  .concern:hover { box-shadow:none; }
}
@media print {
  :root { animation:none; }
  header.site,.filter-toolbar { display:none; }
  body { background:none; color:var(--ground); }
}
/* review block (contact) + 2-line card description */
.review .btn { white-space: nowrap; }
.review { display: grid; grid-template-columns: 1fr; justify-items: start; /* G5 merge4: stacked, the button no longer wraps beside the QR */ gap: var(--s3); align-items: center; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.review-sub { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-small); }
/* QR 61px (quiet zone incl.) x4 / x3 */
.review img { width:244px; max-width:100%; height:auto; aspect-ratio:1 / 1; border-radius: var(--s2); background: var(--bone); image-rendering:crisp-edges; image-rendering:pixelated; }
@media (max-width: 480px) { .review { grid-template-columns: 1fr; } .review img { width:183px; height:auto; } }
.map-ph { display: grid; gap: var(--s2); justify-items: start; }
.map-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.map-frame { display: grid; gap: var(--s2); }
.map-frame[hidden] { display: none; }
.map-frame .map-actions { padding: var(--s3); }
/* RFC 001 corrections (2026-10-13): static theme per audience; "Everyone" never orange; desktop hero split */
:root { --drift: 0; --scroll: 0; animation: none !important; }
html[data-audience="n"] { --acc-a: var(--gold); --acc-b: var(--gold); --acc-d: color-mix(in srgb, var(--gold) 30%, var(--card)); --grad: linear-gradient(135deg, var(--f2), var(--m2)); --grad-rule: linear-gradient(90deg, transparent, var(--f2) 30%, var(--m2) 70%, transparent); }
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 45fr 55fr; align-items: center; min-height: 640px; }
  .hero .wrap { grid-column: 1; }
  .hero .photo { inset-inline-start: 45%; }
  .hero .photo img { object-position: 50% 18%; }
  .hero .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, transparent 22%); }
  [dir="rtl"] .hero .photo::after { background: linear-gradient(270deg, var(--ground) 0%, transparent 22%); }
  .hero .veil { display: none; }
}
/* rubric A5 (2026-10-13): hero photo never upscaled — framed at native size on the audience-gradient backdrop from 768 up */
@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 600px; }
  .hero .wrap { grid-column: 1; }
  .hero .photo { position: absolute; inset: 0; inset-inline-start: 50%; display: grid; place-items: center; padding: var(--s5); background: linear-gradient(color-mix(in srgb, var(--ground) 72%, transparent), color-mix(in srgb, var(--ground) 72%, transparent)), var(--grad); }
  .hero .photo img { width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; border-radius: var(--s3); border: 1px solid var(--line); box-shadow: 0 var(--s4) var(--s6) var(--shadow); }
  .hero .photo::after { display: none; }
  .hero .veil { display: none; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 45fr 55fr; min-height: 640px; }
  .hero .photo { inset-inline-start: 45%; }
}
/* rubric A5: figures never upscale */
.place img, figure img { max-width: min(100%, 506px); width: auto; height: auto; display: block; margin-inline: auto; }
/* hero execution fixes (2026-10-13): text column keeps the container gutter; portrait never clipped */
@media (min-width: 768px) {
  .hero .wrap { grid-column: 1 / -1; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--s4); box-sizing: border-box; position: relative; z-index: 1; }
  .hero .wrap > div { max-width: 44%; }
  .hero .photo img { max-height: calc(600px - var(--s5) * 2); }
}
@media (min-width: 1024px) { .hero .photo img { max-height: calc(640px - var(--s5) * 2); } }
/* about: portrait frame never wider than its source */
.doctor .frame { max-width: 506px; justify-self: center; width: 100%; }
/* RTL header: language pill never collides with the nav */
[dir="rtl"] header.site .wrap { gap: var(--s3); }
[dir="rtl"] header.site .lang { margin-inline-start: var(--s3); }
header.site nav.main { gap: var(--s4); }
/* Urdu display type: Nastaliq needs air (rubric C3) */
[dir="rtl"] .hero p, [dir="rtl"] .lead { line-height: 2.1; }
header.site .lang { white-space: nowrap; flex: none; }

/* Generated doctor page and results highlights. */
.visit-steps,.credentials-list,.devices-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); } /* we-qa-rtl: minmax(0,1fr), not 1fr — a bare 1fr track has an auto minimum, so one nowrap device name wider than the track (TRI-BEAM Premium Q-Switched Nd:YAG at 320px in Urdu) grew the track past .wrap and scrolled /ur/about/ sideways (332 vs 320); matches the 2-column rule below */
.visit-steps .card,.credentials-list .card,.devices-list .card { padding:var(--s3); }
.visit-steps p,.credentials-list,.devices-list p { margin:var(--s2) 0 0; color:var(--muted); }
.media-training b { font-weight:500; }
.media-training bdi { white-space:nowrap; }
.faq-list { display:grid; gap:var(--s2); } /* G5 merge5: full container width (the 75ch cap left half the About container empty at 1440) */
.faq-list details { background:var(--card); border:1px solid color-mix(in srgb,var(--acc-b) 35%,var(--line)); border-radius:16px; padding-inline:var(--s3); }
/* L7b (clinic 065114Z): About hero — Nastaliq H1 descenders need room above the lede (item 1, scoped to the
   About hero page-head; the shared .page-head h1 rule stays as-is for the image-backed heroes); the double
   s6 section padding read as a ~250px empty band under the lede (item 2, scoped adjacency); FAQ open-state
   gap between the question and its answer (item 5, all pages). */
[dir="rtl"] .about-hero h1 { line-height:1.9; padding-block-end:var(--s2); }
.about-hero + section { padding-block-start:var(--s2); }
.faq-list details p { margin-top:var(--s2); }
.faq-list summary { min-height:48px; display:block; position:relative; list-style:none; cursor:pointer; font-size:var(--fs-body); line-height:1.5; padding-block:12px; padding-inline-end:36px; } /* FIX 044838Z item 2: two-line questions (EN+UR) touched the border */
[dir="rtl"] .faq-list summary { line-height:1.75; padding-block:var(--s2); }
/* we-qa-rtl (was G5 merge5 physical right/bottom): logical inline-end/block-end borders + a mirrored rotation under [dir="rtl"] keep the chevron pointing down (closed) and up (open) in both directions; LTR values unchanged */
/* G5 merge4: block summary (a flex summary trimmed the space between Urdu and a Latin device-name run: "میںHIFU"); the expand chevron sits at the inline end and turns when open */
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:""; position:absolute; inset-inline-end:2px; inset-block-start:50%; width:8px; height:8px; border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor; transform:translateY(-70%) rotate(45deg); transition:transform .2s ease; pointer-events:none; }
.faq-list details[open] > summary::after { transform:translateY(-30%) rotate(-135deg); }
[dir="rtl"] .faq-list summary::after { transform:translateY(-70%) rotate(-45deg); } /* inline-end is the LEFT border in RTL: the corner is bottom-left, so the rotation mirrors to keep it pointing down */
[dir="rtl"] .faq-list details[open] > summary::after { transform:translateY(-30%) rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition:none; } }
.dev, [dir="rtl"] :is(.hero,.prose,.page-head,.faq-list,.card,.concern) span[lang="en"][dir="ltr"] { white-space:nowrap; }
@media (max-width:359px) { [dir="rtl"] .devices-list .devices-line span[lang="en"][dir="ltr"] { white-space:normal; } } /* we-qa-rtl: at 320px the card text box is 254px and "TRI-BEAM Premium Q-Switched Nd:YAG" is ~282px; nowrap cannot hold, so on the narrowest phones a device name in the About devices list may wrap at its own spaces (the span is bidi-isolated, word order stays LTR); 360px+ keeps nowrap */ /* a device name never breaks across lines in Urdu body text ("Sylfirm" / "X") */ /* urdu-copy section 5: Nastaliq needs 1.6-1.8; 1.5 clipped ascenders; two-line UR questions need the s2 padding to clear the border */
.faq-list details p { color:var(--muted); padding:0 0 var(--s3); margin:0; }
.visit-strip address { margin-top:var(--s3); font-style:normal; }
.result-card.is-panels img { object-fit:contain; background:var(--ground); }
.result-card .case-count { font-size:var(--fs-small); color:var(--muted); margin-top:var(--s1); }
.concern .card-consent { margin:0 0 var(--s1); }
.hero .hero-consent { margin:0 0 var(--s2); }
@media (min-width:768px) { .hero .hero-consent { color:var(--bone); } }
.modal-consent { margin:0; padding:var(--s1) var(--s3); }
.consent-label,.consent-note { font-size:var(--fs-small); line-height:1.385; color:var(--muted); margin-top:var(--s1); }
.footnote { font-size:var(--fs-small); line-height:1.385; color:var(--muted); margin-top:var(--s2); }
.visit-branches { display:grid; grid-template-columns:1fr; gap:var(--s3); margin-top:var(--s3); }
@media (min-width:768px) {
  .visit-branches { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.branch h3 { font-size:var(--fs-body); margin:0 0 var(--s1); }
@media (min-width:768px) {
  .devices-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
  .visit-steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
  .credentials-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
}
header.site .lang { width: auto; min-width: 44px; min-height: 44px; padding-inline: var(--s2); display: inline-flex; align-items: center; justify-content: center; }
/* results cards share one 4:5 aspect ratio and equal card heights in a row */
/* landscape media box: panel crops median 1.62 (10 at 700x433, 3 at 700x525); contain bars stay < 12%; photos cover */
.result-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 30%; background: var(--card); height: auto; max-height: none; }
.map-ph { padding: var(--s3); }
/* panel-1 fixes (2026-10-13): keep both faces at phone widths; device line clamps to 2 lines, never mid-word ellipsis; strip labels readable */
@media (max-width: 767px) { .hero .photo img { object-position: 50% 28%; } }

.visit .grid { align-items: start; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* panel-2 execution pass (2026-10-14) */
/* phones: hero stacks — photo above, text on ground below; faces never under the veil */
@media (max-width: 767px) {
  .hero { display: block; min-height: 0; }
  .hero .photo { position: relative; inset: auto; height: 52vh; z-index: 0; }
  .hero .photo img { object-position: 50% 22%; }
  .hero .veil { display: none; }
  .hero .wrap { padding-block: var(--s4); }
  .cta .btn, .doctor-actions .btn, .map-actions .btn { width: 100%; }
  .doctor-actions .text-link, .card .cta .text-link, .visit .cta .text-link { width: 100%; justify-content: center; text-align: center; }
}
/* rhythm (v2-cards 2026-10-18): one token, var(--s6), for every section and page head at every width, so the
   gap between two sections is twice that everywhere. The hero is a painted band with no bottom padding of its
   own, so the section after it takes the whole gap. A filter toolbar belongs to the list below it: it tucks
   under a page head (var(--s3)); after any other section it takes the remaining rhythm so the gap matches.
   Guarded by qa_ui section-gap-irregular. */
section, .page-head { padding-block: var(--s6); }
.hero + section { padding-block-start: var(--s7); }
section:not(.page-head) + .filter-toolbar { margin-block-start: var(--s5); }
.page-head:has(+ .filter-toolbar) { padding-block-end: var(--s3); }
@media (min-width: 768px) { .hero + section { padding-block-start: var(--s8); } }
.head { margin-bottom: var(--s3); }
.rule { margin: 0 0 var(--s4); }
.results-group h2, .group h2, section > .wrap > h2 { margin: 0 0 var(--s3); }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2) var(--s4); }
.service-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line); width: 100%; }
.service-list a:hover { border-color: var(--acc-b); }
/* G5 residual: .service-list has margin 0, so whatever follows it inside .prose (next h2, address line) abutted the last link rule */
.prose .service-list + :is(h2,p) { margin-top: var(--s5); }
/* phones: the three audience layers share one 52vh frame (cross-fade kept), text flows below it */
@media (max-width: 767px) {
  .hero { position: relative; }
  .hero::before { content: ""; display: block; height: 52vh; }
  .hero .photo { position: absolute; inset-block-start: 0; inset-inline: 0; inset-block-end: auto; height: 52vh; }
}
@media (max-width: 360px) { .hero::before, .hero .photo { height: 38vh; } .hero .wrap { padding-block: var(--s3) var(--s4); } }
@media (max-width: 767px) { [dir="rtl"] .hero::before, [dir="rtl"] .hero .photo { height: 44vh; } [dir="rtl"] .hero .wrap { padding-block: var(--s3) var(--s4); } }
@media (max-width: 360px) { [dir="rtl"] .hero::before, [dir="rtl"] .hero .photo { height: 34vh; } }
@media (max-width: 360px) { [dir="rtl"] .hero .wrap { padding-block: var(--s2) var(--s3); } [dir="rtl"] .hero p { line-height: 1.9; } }
@media (max-width: 767px) and (max-height: 600px) {
  .hero::before, .hero .photo { height: 26vh; }
  .hero .wrap { padding-block: var(--s2) var(--s3); }
  .hero p { margin-top: var(--s2); }
  [dir="rtl"] .hero::before, [dir="rtl"] .hero .photo { height: 26vh; }
  [dir="rtl"] .hero .wrap { padding-block: var(--s2) var(--s3); }
  [dir="rtl"] .hero h1 { padding-block-start: 0; line-height: 1.6; }
  [dir="rtl"] .hero p { margin-top: var(--s2); line-height: 1.7; }
}

/* sweep-glm accepted findings 5, 6, and 9; RFC 031: companions for card <picture> wrap (RFC 031 item 1) */
.concern > img.portrait, .concern > picture img.portrait, .result-card img.portrait { object-position: 50% 20%; }
@media (max-width: 375px) {
  .result-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: 50% 30%; background: var(--card); height: auto; max-height: none; }
}

/* Doctor portrait frame: gold hairline + dark mat, dark-gold theme (owner ruling 2026-10-16) */
.doctor-frame {
  position: relative;
  display: block;
  background: var(--card);
  padding: var(--s1);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  box-shadow: 0 12px 32px -8px var(--shadow);
  overflow: hidden;
}
.doctor-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--r) - var(--s1));
}
.doctor-card {
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  gap: var(--s3);
  transition: box-shadow 600ms var(--ease), border-color 600ms var(--ease);
}
/* hover/focus affordance (founder QA 2026-10-23): the same ring .concern:hover gives every other card, so a
   doctor card reads as interactive on desktop too. :has(:focus-visible) lights the card while the name link or
   Book button is keyboard-focused (engines without :has keep the .card-link:focus-visible outline at line 165);
   border-color + box-shadow only, so nothing reflows, and prefers-reduced-motion kills the transition globally. */
.doctor-card:hover,
.doctor-card:has(:focus-visible) { border-color: var(--acc-b); box-shadow: 0 0 0 2px var(--acc-b); }
@media (hover:none) {
  .doctor-card:hover { box-shadow: none; }
}
.doctor-card .doctor-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1 0 auto;
}
.doctor-card h2, .doctor-card h3 {
  font-size: var(--fs-h2);
  color: var(--bone);
  line-height: 28px;
  max-height: 56px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
[dir="rtl"] .doctor-card h2, [dir="rtl"] .doctor-card h3 {
  line-height: 1.8; /* G5 merge5 (judged doctors 6): the wrapped "خان" descender touched the gold role line */
  max-height: none;
  margin-block-end: .35em;
}
.doctor-card .doctor-role {
  font-size: var(--fs-body);
  color: var(--gold);
  font-weight: 600;
  margin: 0;
}
.doctor-card .doctor-spec {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 20px;
  max-height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
[dir="rtl"] .doctor-card .doctor-spec {
  line-height: 26px;
  max-height: 52px;
}
.doctor-card .doctor-creds {
  font-size: var(--fs-small);
  color: var(--bone);
  margin: 0;
}
.doctor-card .doctor-schedule {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  white-space: pre-line; /* G5 merge5: schedule_html puts each branch on its own line with a newline */
}
[dir="rtl"] .doctor-card .doctor-schedule { font-size: var(--fs-body); line-height: 1.9; }
.doctor-card .doctor-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s2);
}
.doctor-card .doctor-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.founder-badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--s1) var(--s2);
  background: color-mix(in srgb, var(--gold) 20%, var(--card));
  color: var(--gold-hi);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--s1);
}
.doctor-section-head {
  border-top: 1px solid var(--line);
}
.doctor-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 768px) {
  .doctor-profile-grid {
    grid-template-columns: 320px 1fr;
    gap: var(--s5);
  }
}

/* Public Lab Test Directory */
.test-card {
  min-height: 100%;
}
.test-card .in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s3);
}
.test-header {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-block-end: var(--s2);
}
.test-badge {
  display: inline-block;
  align-self: flex-start;
  padding: var(--s1) var(--s2);
  background: color-mix(in srgb, var(--acc-b) 20%, var(--card));
  color: var(--bone);
  border: 1px solid color-mix(in srgb, var(--acc-b) 45%, var(--line));
  border-radius: var(--r);
  font-size: var(--fs-small);
}
.test-title {
  font-size: var(--fs-h3);
  color: var(--bone);
  line-height: 24px;
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
[dir="rtl"] .test-title {
  line-height: 32px;
  height: 64px;
}
.test-purpose {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 24px;
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  margin-block-end: var(--s3);
  padding: 0;
}
[dir="rtl"] .test-purpose {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  line-height: 32px;
  height: auto;
  min-height: calc(64px + var(--s2));
  padding-block: var(--s1);
}
.test-details {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: 0;
  margin-block-end: var(--s4);
  padding: var(--s2);
  background: var(--card-2);
  border-radius: var(--s2);
  border: 1px solid var(--line-hi); /* THEME-2: this box fills with --card-2, where --line measured 1.19 — the worst static row on the site; the --line-hi step holds 3.19 */
}
.test-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--fs-small);
}
.test-meta dt {
  color: var(--bone);
  font-weight: 600;
}
.test-meta dd {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
[dir="rtl"] .test-meta dd {
  line-height: 1.9;
}
.test-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-block-start: auto;
  padding-block-start: var(--s2);
}
.test-cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* hero text never reaches the photo panel (owner report 2026-10-18): the text column ends a full gap before the panel edge at every width */
@media (min-width: 768px) {
  .hero { --hero-split: 50vw; }
  .hero .wrap > div { max-width: calc(var(--hero-split) - max(0px, (100vw - 1180px) / 2) - var(--s4) - var(--s5)); }
}
@media (min-width: 1024px) { .hero { --hero-split: 45vw; } }

/* u2-ux 2026-10-18 audit fixes (see tools/qa_ui.mjs for the guarding checks) */
html { scroll-padding-top:calc(var(--header-height, 56px) + var(--s3)); }
html:has(.filter-toolbar) { scroll-padding-top:calc(var(--header-height, 56px) + var(--toolbar-height, 96px) + var(--s3)); }
.filter-toolbar + section { padding-block-start:var(--s4); }
.prose > :last-child { margin-block-end:0; }
.btn + .tiny, .cta + .tiny { margin-block-start:var(--s2); }
[dir="rtl"] .social a { padding-block:var(--s1); line-height:1.8; }
[dir="rtl"] .test-badge { padding-block:var(--s2); line-height:1.9; }
@media (max-width: 767px) { .src { min-height:44px; } }
/* wave-final publicweb (AUDIT a11y, 1440): desktop nav links (32 px) and results "View on Instagram" (.src, 24 px) reach the
   DESIGN GATE 44 px tap bar at every width; the mobile .src rule above stays for its cascade order. */
@media (min-width: 768px) { nav.main a, .src { min-height:44px; } }
@media (min-width: 1024px) {
  footer .wrap { grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:var(--s6); }
  footer .wrap > :not(.nap):not(.social) { grid-column:1 / -1; }
}
.nf-ur { margin-block-start:var(--s5); }
.map-ph > .map-actions { justify-self:stretch; }
/* modal triggers + scroll lock (modal.css itself loads on first open) */
html.modal-locked { overflow:hidden; }
html.modal-locked.modal-gutter { scrollbar-gutter:stable; }
[data-modal-card] { cursor:pointer; }
[data-modal-card] :is(.case-count,.test-badge,.doctor-next-slot,.eyebrow) { cursor:default; }
[data-modal-focus]:focus-visible { outline:2px solid var(--acc-a); outline-offset:2px; }
.modal-title-btn { display:block; width:100%; min-height:44px; padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; line-height:inherit; text-align:start; cursor:pointer; }

/* RFC 025 hero A (owner 2026-10-18): contained split, home only. Card inside the 1180 wrap, never upscaled; height follows content; grid mirrors in RTL. */
.hero.hero-split { display:block; min-height:0; overflow:visible; padding-block:var(--s3) 0; }
.hero.hero-split::before { content:none; }
.hero.hero-split .wrap { padding-block:0; }
.hero.hero-split .wrap > .hero-grid { max-width:none; display:grid; gap:var(--s4); grid-template-areas:"media" "text"; }
.hero-split .hero-copy { grid-area:text; min-width:0; }
.hero-split .hero-media { grid-area:media; position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; max-height:40svh; width:100%; box-shadow:0 var(--s4) var(--s6) var(--shadow); }
.hero-split .hero-media img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
.hero.hero-split h1 { max-width:16ch; }
.hero.hero-split p { max-width:46ch; }
@media (max-width: 767px) { .hero-split .cta .btn { width:100%; } .hero.hero-split { padding-block:var(--s3) var(--s5); } }
@media (max-width: 767px) and (max-height: 600px) { .hero-split .hero-media { max-height:26svh; } .hero.hero-split .wrap > .hero-grid { gap:var(--s3); } }
@media (min-width: 768px) {
  .hero.hero-split { padding-block:var(--s6) 0; }
  .hero.hero-split .wrap > .hero-grid { grid-template-areas:"text media"; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:var(--s6); }
  .hero-split .hero-media { aspect-ratio:4/5; max-height:none; max-width:440px; justify-self:end; }
}
@media (min-width: 1024px) { .hero.hero-split { padding-block:var(--s7) 0; } }

/* RFC 025: link chip on Treatments (P1-D-3: the women's-health link rule is gone with the page; card-templates keeps the dormant code path) */
a.chip { text-decoration:none; }
/* Icons (RFC 025 §1): Tabler outline 3.49.0 sprite, one 1em box, weight tuned for the dark ground. Icons never change a
   box's height or the text baseline: hosts space them with the flex gap token, never a margin on the icon. */
.i { width:1em; height:1em; flex:none; display:inline-block; vertical-align:-0.125em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.btn .i { width:1.125em; height:1.125em; }
[dir="rtl"] .i--dir { transform:scaleX(-1); }
.i-spin { animation:spin .9s linear infinite; }
@media (prefers-reduced-motion:reduce) { .i-spin { animation:none; } }
.social a { gap:var(--s1); }
.field > label:has(> .i):not([hidden]), .choice > legend:has(> .i), .hs-slot-picker > label:has(> .i):not([hidden]) { display:flex; align-items:center; gap:var(--s2); }
.field > label > .i, .choice > legend > .i, .hs-slot-picker > label > .i { color:var(--acc-a); }
.case-count .i, .doctor-schedule .i { color:var(--acc-a); margin-inline-end:var(--s1); }
.branch h3 > .i, .branch b > .i { color:var(--acc-a); margin-inline-end:var(--s1); }
.form-status:has(> .i), .hs-status:has(> .i) { display:flex; align-items:flex-start; gap:var(--s2); }
/* THEME-1 gate fix: was 0.15em (1.95px at fs-small / 2.4px at fs-body) — calc(var(--s1) * .6) = 2.4px,
   exact in the ok state's 16px context, +0.45px in the 13px states; sub-pixel, no layout effect */
.form-status > .i { flex:0 0 auto; margin-block-start:calc(var(--s1) * .6); }
.form-status-body { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.form-status-title { display:block; font-size:var(--fs-body); font-weight:600; margin-block-end:var(--s1); }
.form-status[data-state="ok"] { font-size:var(--fs-body); line-height:1.5; padding:var(--s3); border-inline-start-color:var(--m2); }
[dir="rtl"] .form-status[data-state="ok"] { line-height:2; }
.form-status[data-state="ok"] > .i { width:22px; height:22px; }
.form-status:focus { outline:2px solid var(--m2); outline-offset:2px; }
.form-status:focus:not(:focus-visible) { outline:none; }
.form-status[data-state="ok"] > .i { color:var(--m2); }
.form-status:is([data-state="err"],[data-state="offline"]) > .i, .hs-status.is-error > .i { color:var(--acc-a); }
/* Measure caps in em, not ch, for LTR text. `ch` is the "0" advance of the first AVAILABLE font, so while the web
   fonts load it is the fallback's "0" and the column narrows or widens when they swap (Space Grotesk "0" = 0.641em,
   adjusted Arial 0.596em: prose columns jumped 760->818px at swap; Instrument Serif "0" = 0.461em). Values = N x the
   web font's "0" advance (tools/font_fallback_metrics.py), so the loaded layout is unchanged. Urdu keeps ch: its first
   available font is the local Nastaliq in both states (Clinic Nastaliq's unicode-range has no U+0020/U+0030). */
html:not([dir="rtl"]) .hero h1 { max-width:6.454em; }
html:not([dir="rtl"]) .hero.hero-split h1 { max-width:7.376em; }
html:not([dir="rtl"]) .hero p { max-width:38.46em; }
html:not([dir="rtl"]) .hero.hero-split p { max-width:29.486em; }
html:not([dir="rtl"]) .prose,html:not([dir="rtl"]) .nap,.faq-list { max-width:48.075em; } [dir="rtl"] .faq-list { max-width:817px; } /* r9 (judged about 6): the UR FAQ list takes the same cap */

/* iPhone Safari (owner report 2026-10-20): the phone hero photo box rendered empty. aspect-ratio + max-height with
   an img at height:100% can collapse in WebKit, so give the box an explicit height and pin the image inside it. */
@media (max-width: 767px) {
  .hero-split .hero-media { aspect-ratio:auto; height:min(40svh, calc((100vw - 32px) * 0.75)); max-height:none; }
  .hero-split .hero-media img { position:absolute; inset:0; width:100%; height:100%; }
}
@media (max-width: 767px) and (max-height: 600px) { .hero-split .hero-media { height:26svh; } }

/* Room for the fixed chat launcher, reserved before chat.js (deferred) mounts it: html.js is set in <head> by theme.js.
   chat.js sets the same value inline. Set late, it shrank the 404 page's min-height:100svh flex body and moved the
   footer up 66px (CLS 0.0147, docs/research/cls-contact-2026-10-18.md). Moved here from chat.css, which now loads late.
   = chat.js PAD (48px + 18px + env(safe-area-inset-bottom)); the inset is 0 here (no viewport-fit=cover). */
.js body { padding-block-end: calc(var(--s6) + 18px); }
/* P1-A (site review 2026-10-25 §4.9, ux-review: /ur/ laser at 375): the fixed chat launcher covered hero lede
   words. Two offsets, one per phone hero layout: (1) the bottom-aligned grid hero (≥768) got its wrap lifted
   clear of the 66px launcher zone; (2) on phones the hero text flows below the vh-sized photo frame, so no
   bottom padding can keep the fold off the lede — instead the lede's lines stop short of the launcher's column
   (a 60px inline-end gutter = launcher 48px + inset 18px, mirrored automatically in RTL), and the wrap keeps
   clearance under the CTA. Mid-scroll FAB coverage of other body text is inherent and moves with P1-U's bar. */
@media (max-width: 767px) {
  .hero .wrap, [dir="rtl"] .hero .wrap { padding-block-end: var(--s5); } /* G5 merge4: the launcher floats over content, no extra clearance under the CTA */
  /* G5 merge4: no inline-end launcher gutter on the lede; the 44 px launcher floats over the content (symmetric 16 px gutters) */
}
/* The site-wide [hidden] guard (theme rules like .btn{display:inline-flex} would otherwise beat the UA rule) was in
   chat.css; it must apply at first paint or hidden buttons show and then vanish (CLS 0.18 when chat.css loaded late). */
[hidden] { display: none !important; }

/* ==================================================================================================================
   RFC 032 Phase 2 lane L10 (P4): light theme + visitor toggle.
   Dark stays the DEFAULT: these blocks only match an explicit data-theme set by the head boot (no-flash snippet in
   tools/build_pages.py THEME_BOOT) or web/assets/theme.js, from the visitor's localStorage choice or the owner's
   /api/site-config default. Every colour token the dark :root defines for surfaces/text/accents gets a light value;
   --acc-a/--acc-b/--acc-d/--card-2/--gold-hi re-derive automatically because they are color-mix() of the tokens
   overridden here, and the audience ramps (html[data-audience] above) are plain var() references to the same hues.
   Contrast proven by tools/test_theme_contrast.mjs (WCAG 2.1): body 14.3:1, muted-on-card 6.0:1, acc-a ≥5.5:1 on
   ground and card in every audience, gold focus ring 5.5:1, white-on-gold buttons 5.8:1 (light) — dark unchanged.
   The [data-theme="auto"] block repeats the token list inside @media so `auto` resolves via prefers-color-scheme;
   both copies must stay identical (the test asserts it). */
:root[data-theme="light"] {
  /* THEME-1 (clinic ORDER 224317Z; tokens INFO 224610Z with CORRECTION 224641Z, docs/research/light-theme-tone-2026-10-25.md):
     warm parchment ground + never-white card kill the white glare; --line #8a7c60 holds 3:1 on both surfaces
     (WCAG 1.4.11; the first draft #a99c82 measured 2.4:1 and was corrected). Text/gold tokens unchanged.
     THEME-2: light keeps ONE line tone — --line-hi aliases --line so the base rules' card-2/tinted edges
     (test-details, OTP notice) render exactly the light value they had before the dark two-step landed. */
  --ground:#efe9dd; --card:#f7f2e8; --line:#8a7c60; --line-hi:var(--line); --bone:#2b2419;
  --muted:#6b6255; --gold:#7f5f1e; --wa:#25d366;
  --f2:#a11a5c; --f3:#8f1256; --f4:#5e1d3a;
  --m2:#0d7d63; --m3:#0a6b52; --m4:#094d3d;
  /* explicit (not derived): near-white text on the darker gold clears 4.5:1 where the ground-mix would not;
     light shadows/scrim must darken, not tint toward the now-light ground */
  --on-gold:#fffdf6;
  --shadow:color-mix(in srgb,#4a4136 22%,transparent);
  --scrim:color-mix(in srgb,#241f18 78%,transparent);
  /* THEME-1 overlay disc (ORDER 224406Z item 6): #f7f2e8 translucent — every control that floats over
     media/blur takes it in light with the dark (bone) glyph; dark keeps the base rules' --scrim/--card
     disc + light glyph. Measured against a saturated-red reel frame, 85% gave 2.86:1 disc-vs-video, so the
     disc was tuned UPWARD (the card's only tuning direction) to 92% = 3.2:1 with the glyph at 10.8:1. */
  --overlay-disc:rgba(247,242,232,.92);
  color-scheme:light;
}
:root[data-theme="auto"] { color-scheme:light dark; }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --ground:#efe9dd; --card:#f7f2e8; --line:#8a7c60; --line-hi:var(--line); --bone:#2b2419;
    --muted:#6b6255; --gold:#7f5f1e; --wa:#25d366;
    --f2:#a11a5c; --f3:#8f1256; --f4:#5e1d3a;
    --m2:#0d7d63; --m3:#0a6b52; --m4:#094d3d;
    --on-gold:#fffdf6;
    --shadow:color-mix(in srgb,#4a4136 22%,transparent);
    --scrim:color-mix(in srgb,#241f18 78%,transparent);
    --overlay-disc:rgba(247,242,232,.92);
    color-scheme:light;
  }
  /* THEME-1 auto+light: the same control grammar as the [data-theme="light"] rules above, so `auto` visitors
     on a light-preference OS get the identical theme. Inside this media block only: auto+dark keeps dark. */
  :root[data-theme="auto"] .chip:not(.slot-chip-unavailable):hover { background:color-mix(in srgb,var(--gold) 10%,var(--card)); }
  :root[data-theme="auto"] .chip[aria-pressed="true"]:hover { background:var(--gold-hi); border-color:var(--gold-hi); }
  :root[data-theme="auto"] .choice input:checked+span { background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:600; }
  :root[data-theme="auto"] .chip.slot-chip-unavailable { opacity:1; }
  :root[data-theme="auto"] .reel-play,
  :root[data-theme="auto"] .modal-vbtn,
  :root[data-theme="auto"] .modal-close,
  :root[data-theme="auto"] .c-launcher,
  :root[data-theme="auto"] .theme-toggle,
  :root[data-theme="auto"] .lang { background:var(--overlay-disc); }
  :root[data-theme="auto"] .reel-play,
  :root[data-theme="auto"] .modal-vbtn { border-color:var(--bone); }
  :root[data-theme="auto"] .reel-play { color:var(--bone); }
  :root[data-theme="auto"] .c-launcher:hover { background:rgba(239,233,221,.92); }
  :root[data-theme="auto"] .modal-close:hover,
  :root[data-theme="auto"] .modal-close:focus-visible { background:rgba(239,233,221,.92); }
}
/* two pre-dark badges hardcoded in the OTP block (theme.css above) are unreadable on the paper ground: darker text */
:root[data-theme="light"] .hs-otp-verified-badge,
:root[data-theme="auto"] .hs-otp-verified-badge { border-color:#15803d; background:rgba(21,128,61,.08); color:#166534; }
:root[data-theme="light"] .hs-otp-fallback-notice,
:root[data-theme="auto"] .hs-otp-fallback-notice { background:rgba(161,22,92,.06); color:#8a1408; }

/* THEME-1 (clinic ORDER 224317Z + ORDER 224406Z item 6): light-theme control grammar, scoped to the light and
   auto-light blocks only — base component rules and every dark token above stay untouched, so dark renders
   exactly as before. Selected chips fill like the primary button (gold #7f5f1e + --on-gold #fffdf6, 5.8:1);
   unselected chip hover is a light gold wash; the dashed unavailable slot chip drops the 0.55 opacity dim (it
   cut its muted text to ~2.3:1 on the new card) and reads as unavailable through the dashed border alone.
   Overlay controls that float over media/blur (reel play badge + player buttons, dialog close ring, chat
   launcher, theme/language pills) sit on --overlay-disc with the dark bone glyph: glyph >= 3:1 vs the disc in
   both worst-case composites, and the disc (92%) carries 3:1 vs the video frame, with the on-video controls
   additionally ringed in bone. Dark keeps the base rules: dark disc (--scrim/--card/--card-2) + light glyph. */
:root[data-theme="light"] .chip:not(.slot-chip-unavailable):hover { background:color-mix(in srgb,var(--gold) 10%,var(--card)); }
:root[data-theme="light"] .chip[aria-pressed="true"]:hover { background:var(--gold-hi); border-color:var(--gold-hi); }
:root[data-theme="light"] .choice input:checked+span { background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:600; }
:root[data-theme="light"] .chip.slot-chip-unavailable { opacity:1; }
:root[data-theme="light"] .reel-play,
:root[data-theme="light"] .modal-vbtn,
:root[data-theme="light"] .modal-close,
:root[data-theme="light"] .c-launcher,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .lang { background:var(--overlay-disc); }
/* controls that sit ON the video get the dark (bone) border in light — the mirror of dark's bright gold
   border: it holds >= 3:1 against bright reel frames where the gold acc-b measured 1.46:1 on red */
:root[data-theme="light"] .reel-play,
:root[data-theme="light"] .modal-vbtn { border-color:var(--bone); }
/* G5 merge6: the play triangle is drawn with currentColor and reels.css fixes color:#f4efe6 (near-white on the cream disc); light takes the dark bone glyph */
:root[data-theme="light"] .reel-play { color:var(--bone); }
:root[data-theme="light"] .c-launcher:hover { background:rgba(239,233,221,.92); }
:root[data-theme="light"] .modal-close:hover,
:root[data-theme="light"] .modal-close:focus-visible { background:rgba(239,233,221,.92); }
/* THEME-2 dark edge step for the dialog close ring: it sits on the --card-2 disc, where --line falls to
   2.68; --line-hi holds 3.19. Dark is the attribute-less :root default, so the dark scope is "not light".
   :where() keeps specificity at (0,2,0): it beats modal.css's base .modal-close border no matter which
   sheet loads first, while modal.css's own :hover/:focus-visible border (acc-b, same specificity, later
   sheet) still wins on interaction exactly as before. Light and auto-light are value-identical — their
   --line-hi aliases --line. */
:root:where(:not([data-theme="light"])) .modal-close { border-color:var(--line-hi); }

/* header visitor toggle (web/assets/theme.js injects it into .header-actions): same pill grammar as .lang */
.theme-toggle { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 var(--s2); border:1px solid var(--acc-b); background:var(--card); color:var(--bone); border-radius:999px; cursor:pointer; }
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.theme-toggle .i { width:1.125em; height:1.125em; }
[dir="rtl"] .theme-toggle .i { margin-block-start:calc(var(--s1) / 3); } /* FIX 033221Z item 2: /3 = 1.333px — the parent's exact .1em at the toggle's 13.333px context (* .45 measured 1.8px, a real shift); Nastaliq line box sits low; keep the glyph centred */

/* owner notice strip (site:config banner, rendered by theme.js on the home pages only, RFC 027 A7 client fallback) */
.site-banner { background:var(--card); border-bottom:1px solid var(--line); color:var(--bone); font-size:var(--fs-small); }
.site-banner .wrap { display:flex; align-items:center; gap:var(--s2); padding-block:var(--s1); }
.site-banner p { margin:0; flex:1 1 auto; min-width:0; }
.site-banner .banner-close { flex:none; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 var(--s1); border:0; background:none; color:var(--muted); border-radius:8px; cursor:pointer; }
.site-banner .banner-close:hover { color:var(--bone); }
[dir="rtl"] .site-banner p { line-height:1.9; }
/* G5-B: Urdu cards get the same phone behaviour as English (no reserved title/blurb/tag heights; Nastaliq line-heights kept; tap area 44 px) */
@media (max-width:480px) {
  [dir="rtl"] .concern h3 { display:flow-root; height:auto; min-height:0; padding-block:0; line-height:32px; }
  [dir="rtl"] .concern h3 .card-link { display:block; min-height:0; padding-block:6px; margin-block:-6px; }
  [dir="rtl"] .concern .what { min-height:0; }
  [dir="rtl"] .concern .devices-line { height:auto; }
}

/* G5-B: the floating chat launcher is docked 44 px at the inline end (chat.css sets 48 px at 18 px). G5 merge4: it floats over the content
   (no reserved text gutter); the page keeps symmetric 16 px gutters and its bottom padding. */
@media (max-width:480px) {
  html:root .c-launcher, html:root[dir] .c-launcher { width:44px; height:44px; min-width:44px; min-height:44px; inset-inline-end:calc(12px + env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  [dir="rtl"] .c-launcher { inset-inline-end:calc(12px + env(safe-area-inset-left, 0px)); }
  /* G5 merge4 (judged: lopsided 16 px / 60 px columns): symmetric 16 px gutters; the launcher floats over the content and the body
     keeps its bottom padding (.js body above) so the last block clears it */
  .filter-toolbar { padding-block:var(--s1); }
  .filter-scroll { gap:6px; }
  .filter-scroll .chip { padding-inline:14px; }
}

/* CLAIMS-IMG-1: photos with a burnt-in logo/watermark outside the card crop render as the card's 4:3 crop on the treatment-page hero and in the pop-up */
.modal-mediabox.is-crop { height:auto; aspect-ratio:4/3; padding:0; width:100%; }
.modal-mediabox.is-crop img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
html .hero .photo.photo-crop { height:auto; aspect-ratio:4/3; }
html .hero .photo.photo-crop img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; border-radius:0; border:0; box-shadow:none; }
@media (min-width:768px) {
  html .hero .photo.photo-crop { aspect-ratio:auto; height:auto; }
  html .hero .photo.photo-crop img { width:100%; max-width:560px; height:auto; aspect-ratio:4/3; border-radius:var(--s3); border:1px solid var(--line); }
}
@media (max-width:767px) { html .hero:has(.photo-crop)::before { height:auto; aspect-ratio:4/3; } } /* the space reserved above the hero text matches the 4:3 crop */
@media (min-width:768px) { dialog.modal-dialog.has-aside .modal-aside .modal-mediabox.is-crop { width:var(--mbox-w, 100%); height:auto; aspect-ratio:4/3; } } /* desktop pop-up: the 4:3 crop, not the 4:5 box */
.modal-consent-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; } /* image + its consent label stack inside the pop-up's image column */
.modal-consent-wrap > .modal-consent { align-self:stretch; }
html:root .c-launcher, html:root[dir] .c-launcher { border-color:var(--line-hi); } /* edge >= 3:1 on card and ground in both themes (tools/test_theme_contrast.mjs) */

/* G5-B chip rail: below 1024 px the rail scrolls — a wider inline-end fade plus snap-to-chip so it always rests on a whole-chip boundary with the next chip peeking; from 1024 px every chip is visible (wraps to a second row) */
.filter-scroll { scroll-snap-type:x proximity; scroll-padding-inline:var(--s1); }
.filter-scroll .chip { scroll-snap-align:start; }
.filter-scroll.fade-end { --fade-e:var(--s8); }
@media (min-width:1024px) {
  html .filter-scroll, html .filter-scroll.has-overflow { flex-wrap:wrap; overflow:visible; mask-image:none; -webkit-mask-image:none; white-space:normal; }
}

/* G5 merge5: no one-word last line (contact-ur "ہے۔" alone) */
.visit p, .facts-name { text-wrap: pretty; }

/* G5 merge5 (judged about 4+5): the About "What the clinic treats" list spans the whole card grid (it sat in one ~250px track), 3 columns from 1024px;
   list rows share one height so underlines align; the facts card's h3 clears its first item. */
.grid-cards > .service-list { grid-column: 1 / -1; }
@media (min-width:1024px) { .grid-cards > .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service-list li { display: flex; }
.service-list a { flex: 1; }
.visit-strip .card > h3 { margin-block-end: .5rem; }

/* G5 merge6 (judged results 1-4): ONE rule for every result poster. Same 3:2 box (the 4:3 the judge named left 17-18% empty bars on the 1.62 landscape panels, over qa_ui card-media-letterbox 15%; at 3:2 they are ~7% and each half of a 2-up pair is exactly 3:4) on every card (no per-card letterbox or dark strip: the image
   height is the box height); photos and upright panels cover from the top, landscape panels (contain-fit) sit centred on the card colour, never
   white; a 2-photo Before/After post shows both photos 2-up in the box (never a half-face cover crop). */
.result-card > img, .result-card > picture img, .result-card > .pair { display:block; width:100%; height:auto; max-height:none; flex:none; aspect-ratio:3/2; object-fit:cover; object-position:50% 0; background:var(--card); }
.result-card.is-panels > img { object-fit:contain; object-position:50% 50%; background:var(--edge,#fff); }
.result-card.is-panels > img.portrait { object-fit:cover; object-position:50% 0; }
.result-card > .pair { display:grid; grid-template-columns:1fr 1fr; gap:2px; overflow:hidden; }
.result-card > .pair img { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 50%; background:var(--card); }
.photo-count { white-space:nowrap; }
/* G5 merge8 (judged results 3): each meta item is nowrap and carries its own leading separator, so no line ends with "·" */
.mi { white-space:nowrap; unicode-bidi:isolate; }
.msep { display:inline-block; margin-inline:.35em; } /* r9 (judged results 1): the separator is its own span with margin, not a collapsible space ("3·Exovex") */
.result-card .result-meta { margin-block-start:.5rem; } /* r9 (judged results 2): fixed gap under the title, whether it wraps or not */

/* G5 merge6 (judged about 5): the About panel's phone and WhatsApp are tap links, one per line, 44 px tall, underlined like the footer phone */
.facts-phones { margin:var(--s2) 0 0; display:flex; flex-direction:column; align-items:flex-start; }
.ph-link { display:inline-flex; align-items:center; min-height:44px; color:var(--bone); text-decoration:underline; text-underline-offset:3px; }
.ph-link:hover { color:var(--acc-a); }

/* G5 merge7 (judged results/doctors/about): a contained poster sits on white (the poster's own edge colour), never a card-colour strip;
   times stay whole (the .num inline-block is an atomic inline that allowed a break before "بجے", so inside schedule lines it is plain inline);
   the label colon gets a gap (inline-flex drops the trailing space); Phone block and Doctors heading keep one 16 px rhythm. */
.result-card.is-panels > img, .result-card.is-panels > picture img { background:var(--edge,#fff); }
.doctor-schedule .num, .doctor-next-slot .num, .doctor-next-slot-wrap .num { display:inline; }
/* G5 merge8 (judged about 6/7): the whole row is ONE underline (a block with a real space, the number inline so the line runs under it), 44 px tall */
.ph-link { display:block; width:fit-content; line-height:44px; min-height:44px; }
.ph-link .num { display:inline; }
.facts-phones { margin-block-start:var(--s3); }
.facts-phones + h3 { margin-block-start:var(--s3); }
[dir="rtl"] .results-tally, [dir="rtl"] .filter-count { padding-block-end:8px; }
/* G5 merge8 (judged results 1): the 2-photo pair fills the shared 3:2 media box like every single image (cover, centre 30%), on the card colour: no white bars in either theme */
.result-card > .pair { background:var(--card); }
.result-card > .pair img, .result-card > .pair img.portrait { object-fit:cover; object-position:50% 30%; background:var(--card); }
/* judged results 2: the white rounded "tab" is baked into the bottom ~2% of the 2-photo source frames (a screen-recording card edge, not markup); the image runs 104% tall from the top and the pair clips it */
.result-card > .pair img { height:104%; align-self:start; }