/* 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; }

:root {
  --ground:#0f0d0b; --card:#1a1714; --line:#3a342e; --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;
  --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; }
.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:.08em; text-transform:uppercase; 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; }
.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; }
.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; opacity:.55; cursor:not-allowed; }
.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; }
.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 { 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; height:48px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; padding:0; }
.devices-line { color:var(--muted); font-size:var(--fs-small); line-height:20px; }
.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; }
.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; }
.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; }
.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); }
.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 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; }
.prov .when,.prov b,.prov 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); }
.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; }
.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-dim); margin-top:var(--s1); }
.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(--bg); color:var(--bone); }
.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); border-radius:8px; background:rgba(234,179,8,0.1); color:#eab308; font-size:var(--fs-small); }
.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(--s6); }
.results-tally { margin:0; color:var(--muted); font-size:var(--fs-small); line-height:1.385; }
.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); }
.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); }
[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"] .result-card h3 { line-height:32px; height:64px; }
[dir="rtl"] .eyebrow { color:var(--bone); letter-spacing:0; text-transform:none; }
[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 { display: grid; grid-template-columns: 1fr auto; 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; height:244px; 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:183px; } }
.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:1fr; gap:var(--s3); }
.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; }
.faq-list { display:grid; gap:var(--s2); max-width:75ch; }
.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); }
.faq-list summary { min-height:48px; display:flex; align-items:center; cursor:pointer; font-size:var(--fs-body); line-height:1.5; }
.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); }
.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); }
/* 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 */
.concern > 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);
}
.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: 36px;
  max-height: 72px;
}
.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);
}
.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);
}
.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; } }
@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, women's-health link on the Doctors card (page CSS is inline on /womens-health/) */
a.chip { text-decoration:none; }
.doctor-wh a { display:inline-flex; align-items:center; min-height:44px; color:var(--gold); }
/* 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:center; gap:var(--s2); }
.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,html:not([dir="rtl"]) .faq-list { max-width:48.075em; }

/* 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); }
/* 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; }