/* =====================================================================
   theme.css — Advance Cosmetic Skin Clinic v0.3 design system
   Port of approved mock C2 "Beam, living gradient"
   (spec: research/fable-gradient-analysis.md §3; tokens: data/facts.json palette)

   One number drives the accent colours: --phase ∈ [0.1, 0.9]
     0 = female side of the logo (magenta)   1 = male side (mint)
   --phase = clamp(0.1, --intent + (--drift + --scroll) * --amp, 0.9)
     --intent : theme.js from [data-intent] / ?audience= / localStorage (850ms transition)
     --drift  : 40s triangle wave ±0.15, steps(160) → 4 repaints/s
     --scroll : (scroll progress − .5) × .3, native scroll timeline or theme.js rAF
     --amp    : 1 for Everyone, 0 when a side is chosen (lean, no motion)
   Accents are color-mix(in oklch) between logo stops; the shorter hue path
   magenta → orange → gold → lime → mint is the logo's own vine and leaves.

   CONTRAST RULES (binding):
   - Text is bone (or muted) on ground/card ONLY. Text never sits on a gradient.
   - --acc-a is the ONLY accent allowed on text (oklch L .66–.84 → ≥5.6:1 on ground).
   - --acc-b: borders, UI, ≥24px text. --acc-d: glows/surfaces, never text.
   - Urdu is always bone. Primary CTA (WhatsApp) is fixed gold, never themed.

   Load order in <head>: fonts.css, theme.css, then theme.js (sync, no defer;
   it sets the intent before first paint and binds by delegation).

   CLASS API for pages (all optional, compose freely):
   layout   .wrap .section .head .rule .eyebrow .muted .tiny .acc .serif .ur .en .ltr .sr-only .skip
   header   header.site > .wrap > a.brand(.mark>img, b, small) + nav.main + .pills>button[data-intent][aria-pressed] + a.lang
   buttons  .btn .btn-primary (gold WhatsApp) .btn-ghost (gradient ring) .btn svg
   hero     .hero > .photo>img + .veil + .glow.a + .glow.b + .wrap(> div + aside.bookcard) ; .cta .facts
   doors    .doors > .wrap > .grid > a.door[data-intent](img, span>.ur+.en, .go)
   strip    .strip (renewal / announcement band)
   concerns .grid-cards or .scroller > a.concern(img, .in>.ur+h3+p+.dev)
   ledger   ol.ledger > li.entry(img|picture, .meta>time+.dev, p.expect, a.src)
   reels    .reels > a.reel(img, .cap)
   doctor   section.doctor > .grid > .frame(img,.halo) + div(h2, ul.quotes>li>.ur+small)
   proven.  .devices>.device(b,span,i) ; ul.prov>li(.when, b, span, a)
   place    .place > figure(img, figcaption>b)
   results  .results-note
   visit    section.visit > .grid > .card(address,.hours) + .map
   form     form.form > .field(label, input|select|textarea, .hint) ; fieldset.choice>label>input[type=radio]+span ;
            .hp (honeypot) ; .form-status[data-state=ok|err|offline] ; .offline-note
   footer   footer.site > .wrap
   float    a.float (gold WhatsApp, fixed)
   modes    [data-only="m|f|n"] shown only when html[data-audience] matches
   ===================================================================== */

@property --intent { syntax: '<number>'; inherits: true; initial-value: 0.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 {
  /* ---- fixed base: facts.palette */
  --ground: #0F0D0B; --card: #1A1714; --line: #3A342E;
  --bone: #ECE6DA;   --muted: #A9A196; --gold: #C9A45A; --wa: #25D366;
  /* ---- measured logo stops: facts.palette.logo_stops */
  --f2: #E65693; --f3: #D11877; --f4: #872B55;
  --m2: #6DE1C2; --m3: #35B490; --m4: #1E6B58;
  --leaf1: #9AE699; --leaf2: #D2E293;

  /* ---- derived surfaces (mixes of palette only; no new literals) */
  --card-2: color-mix(in srgb, var(--card) 92%, var(--bone));
  --gold-hi: color-mix(in oklch, var(--gold) 85%, var(--bone));
  --gold-deep: color-mix(in oklch, var(--gold) 62%, var(--ground));
  --on-gold: color-mix(in srgb, var(--ground) 94%, var(--gold));   /* CTA label, ≈#141008 per spec, ≥8:1 */
  --scrim: color-mix(in srgb, var(--ground) 93%, transparent);
  --shadow: color-mix(in srgb, var(--ground) 60%, transparent);

  /* ---- engine */
  --phase: clamp(0.1, calc(var(--intent) + (var(--drift) + var(--scroll)) * var(--amp)), 0.9);
  --pm: calc(var(--phase) * 100%);
  --acc-a: color-mix(in oklch, var(--m2) var(--pm), var(--f2));   /* text-safe accent */
  --acc-b: color-mix(in oklch, var(--m3) var(--pm), var(--f3));   /* borders, UI, large text */
  --acc-d: color-mix(in oklch, var(--m4) var(--pm), var(--f4));   /* glows, surfaces only */
  --acc-x: color-mix(in oklch, var(--f2) var(--pm), var(--m2));   /* fleck of the other side */
  --acc-l: color-mix(in oklch, var(--m2) calc(clamp(0, var(--phase) - 0.35, 1) * 100%), var(--f2));
  --acc-r: color-mix(in oklch, var(--m2) calc(clamp(0, var(--phase) + 0.35, 1) * 100%), var(--f2));
  --grad: linear-gradient(135deg, var(--acc-l) 0%, var(--acc-a) 28%, var(--gold) 52%, var(--acc-r) 78%, var(--acc-x) 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--acc-l) 18%, var(--acc-a) 38%, var(--gold) 58%, var(--acc-r) 78%, transparent);

  /* ---- type + shape */
  --font: "Clinic Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ur: "Clinic Nastaliq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --font-serif: "Clinic Serif", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 18px;

  transition: --intent 850ms var(--ease), --amp 850ms var(--ease);
  animation: acsc-drift 40s steps(160, jump-none) infinite;
  color-scheme: dark;
}
@keyframes acsc-drift { 0% { --drift: -0.15; } 50% { --drift: 0.15; } 100% { --drift: -0.15; } }

/* native scroll-driven phase; theme.js adds .js-scroll when unsupported and drives --scroll itself */
@supports (animation-timeline: scroll()) {
  :root { animation: acsc-drift 40s steps(160, jump-none) infinite, acsc-scroll linear both; animation-timeline: auto, scroll(root); }
  :root.js-scroll { animation: acsc-drift 40s steps(160, jump-none) infinite; animation-timeline: auto; }
}
@keyframes acsc-scroll { from { --scroll: -0.15; } to { --scroll: 0.15; } }

/* tab hidden → drift paused (battery) */
:root.acsc-paused { animation-play-state: paused; }

/* reduced motion: static theme, instant intent switch, nothing moves */
@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; }
}

/* no color-mix → static gold accents, nothing breaks */
@supports not (color: color-mix(in oklch, red 50%, blue)) {
  :root {
    --acc-a: var(--gold); --acc-b: var(--gold); --acc-d: var(--card); --acc-x: var(--gold);
    --acc-l: var(--gold); --acc-r: var(--gold);
    --card-2: var(--card); --gold-hi: var(--gold); --gold-deep: var(--line); --on-gold: var(--ground);
    --scrim: var(--ground); --shadow: var(--ground);
  }
}

/* ===================================================================== base */
*, *::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: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; color: var(--bone); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.1rem; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--acc-a); outline-offset: 3px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section, .section { padding: 84px 0 20px; position: relative; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.head .ur { font-size: 1.3rem; line-height: 1.8; margin: 0; }
.rule { height: 1px; background: var(--line); background: var(--grad-rule); opacity: .9; margin: 0 0 22px; }
.eyebrow { display: inline-block; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.muted { color: var(--muted); }
.tiny { font-size: .8rem; color: var(--muted); }
.acc { color: var(--acc-a); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.en { font-family: var(--font); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 60; background: var(--gold); color: var(--on-gold); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Urdu: Nastaliq needs tall line boxes; never letter-spaced, never uppercased, never italic, always bone */
.ur, :lang(ur) { font-family: var(--font-ur); line-height: 2.1; letter-spacing: 0 !important; text-transform: none !important; font-style: normal; }
.ur { direction: rtl; font-size: 1.15em; color: var(--bone); }
.ur.lead { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 2; }

/* audience-specific content: shown only in its mode (Everyone shows [data-only="n"]) */
html[data-audience="m"] [data-only]:not([data-only~="m"]),
html[data-audience="f"] [data-only]:not([data-only~="f"]),
html[data-audience="n"] [data-only]:not([data-only~="n"]) { display: none !important; }

/* ===================================================================== header */
header.site { position: sticky; top: 0; z-index: 30; background: var(--ground); background: color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); }
.brand .mark { position: relative; width: 42px; height: 48px; flex: none; }
.brand .mark img { width: 42px; height: 48px; object-fit: contain; position: relative; z-index: 1; }
/* theme shows as a halo BEHIND the logo; the logo keeps its true colours */
.brand .mark::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc-a) 38%, transparent), transparent 70%); }
.brand b { display: block; font-weight: 500; font-size: .98rem; line-height: 1.15; }
.brand small { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
nav.main { margin-inline-start: auto; display: flex; gap: 22px; align-items: center; }
nav.main a { text-decoration: none; font-size: .92rem; color: var(--bone); opacity: .85; padding: 6px 0; border-bottom: 1px solid transparent; }
nav.main a:hover, nav.main a[aria-current="page"] { opacity: 1; border-bottom-color: var(--acc-a); }
nav.main .ur, .lang.ur { font-size: 1rem; line-height: 1.4; }
.lang { text-decoration: none; color: var(--bone); font-size: .92rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
.lang:hover { border-color: var(--acc-b); }

/* intent pills: segmented; the active pill carries the gradient as a RING (text stays bone on card) */
.pills { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); gap: 2px; }
.pills button { appearance: none; border: 1.5px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: color .3s, border-color .3s; }
.pills button:hover { color: var(--bone); }
.pills button[aria-pressed="true"] { color: var(--bone); border-color: var(--gold); background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }

/* ===================================================================== buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font: inherit; font-weight: 500; font-size: .98rem; line-height: 1; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: background-color .25s, transform .25s; }
.btn svg { width: 18px; height: 18px; flex: none; }
/* primary = WhatsApp booking: fixed gold, never themed */
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-hi); }
/* ghost: living gradient as border ring; label bone on ground */
.btn-ghost { color: var(--bone); border-color: var(--acc-b); background: linear-gradient(var(--ground), var(--ground)) padding-box, var(--grad) border-box; }
.btn-ghost:hover { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
.card .btn-ghost, .bookcard .btn-ghost, .results-note .btn-ghost, .map .btn-ghost { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ===================================================================== hero */
.hero { position: relative; min-height: 88dvh; display: grid; align-items: end; overflow: hidden; isolation: isolate; padding: 0; }
.hero .photo { position: absolute; inset: 0; z-index: -2; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; opacity: .62; }
.hero .veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 30%, transparent), var(--ground) 92%), linear-gradient(90deg, color-mix(in srgb, var(--ground) 75%, transparent) 0%, transparent 60%); }
/* glows: pre-soft radials, no filter:blur(); ambient only */
.glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; contain: paint; }
.glow.a { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; inset-inline-start: -20vw; bottom: -30vw; background: radial-gradient(circle, color-mix(in srgb, var(--acc-d) 70%, transparent) 0%, color-mix(in srgb, var(--acc-b) 18%, transparent) 35%, transparent 68%); }
.glow.b { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; inset-inline-end: -12vw; top: -8vw; background: radial-gradient(circle, color-mix(in srgb, var(--acc-x) 22%, transparent) 0%, transparent 65%); }
.hero .wrap { position: relative; padding-top: 120px; padding-bottom: 56px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: .98; }
.hero h1 .serif { display: block; color: var(--bone); }
.hero h1 .acc { font-size: .55em; display: block; margin-top: .35em; font-weight: 400; letter-spacing: .01em; }
.hero .lede { max-width: 36em; color: var(--muted); margin: 18px 0 4px; }
.hero .ur.lead { margin: 10px 0 0; }
.facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: .86rem; color: var(--muted); }
.facts b { display: block; color: var(--bone); font-weight: 500; font-size: .98rem; }
.bookcard { background: var(--card); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 20px; padding: 22px; position: relative; }
.bookcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 20px 20px 0 0; background: var(--grad); }
.bookcard h3 { font-size: 1.05rem; margin-bottom: 4px; }
.bookcard .ur { font-size: 1.05rem; margin: 2px 0 12px; }
.bookcard .row { display: grid; gap: 10px; }
.bookcard .btn { width: 100%; }
.bookcard small { display: block; color: var(--muted); font-size: .78rem; margin-top: 10px; }

/* ===================================================================== doors (intent entry) */
.doors { margin-top: -10px; position: relative; z-index: 2; }
.doors .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-decoration: none; color: var(--bone); position: relative; overflow: hidden; cursor: pointer; transition: border-color .35s, transform .25s; }
.door img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; }
.door::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--grad-rule); }
.door:hover { transform: translateY(-3px); }
.door[data-intent="m"]:hover { border-color: var(--m3); }
.door[data-intent="f"]:hover { border-color: var(--f2); }
.door .ur { display: block; font-size: 1.05rem; line-height: 1.9; }
.door .en { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.door .go { position: absolute; inset-inline-end: 16px; top: 14px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-a); }

/* ===================================================================== strip (renewal / notice band) */
.strip { background: var(--card); border-block: 1px solid var(--line); padding: 14px 0; position: relative; }
.strip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--grad-rule); }
.strip .wrap { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: .92rem; }
.strip .ur { font-size: 1rem; line-height: 1.9; }

/* ===================================================================== concern cards */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 0 22px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 12px 0 22px; }
.concern { scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--bone); display: grid; grid-template-rows: 200px auto; position: relative; cursor: pointer; transition: transform .25s ease, border-color .35s; }
.concern:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc-b) 70%, var(--line)); }
.concern img { width: 100%; height: 200px; object-fit: cover; object-position: 50% 62%; filter: saturate(.9) contrast(1.04); }
.concern .in { padding: 16px 16px 18px; }
.concern .ur { font-size: 1.02rem; line-height: 1.8; margin: 0; }
.concern h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.concern p { margin: 0; color: var(--muted); font-size: .86rem; }
.concern .dev, .dev { display: inline-block; margin-top: 10px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-a); border: 1px solid color-mix(in srgb, var(--acc-b) 55%, transparent); padding: 4px 9px; border-radius: 999px; }
.concern::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); opacity: .9; z-index: 1; }

/* ===================================================================== ledger (per-service, newest first) */
.ledger { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ledger .entry { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; position: relative; }
.ledger .entry::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 2px; border-radius: 2px; background: var(--acc-b); }
.ledger .entry img { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; }
.ledger .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .8rem; color: var(--muted); }
.ledger .meta time { font-variant-numeric: tabular-nums; }
.ledger .meta .dev { margin-top: 0; }
.ledger .expect { margin: 8px 0 6px; color: var(--bone); font-size: .95rem; }
.ledger .src { font-size: .82rem; color: var(--acc-a); text-decoration: none; }
.ledger .src:hover { text-decoration: underline; }
.ledger-empty { color: var(--muted); font-size: .9rem; }

/* ===================================================================== reels tiles */
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 18px; }
.reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--bone); transition: transform .25s, border-color .35s; }
.reel:hover { transform: translateY(-3px); border-color: var(--acc-b); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel::before { content: ""; position: absolute; top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--scrim); border: 1px solid var(--acc-b); }
.reel::after { content: ""; position: absolute; top: 23px; inset-inline-end: 22px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--bone); }
.reel .cap { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; background: linear-gradient(180deg, transparent, var(--scrim) 55%); font-size: .84rem; line-height: 1.35; }
.reel .cap .ur { font-size: .98rem; line-height: 1.9; display: block; }

/* ===================================================================== doctor */
.doctor .grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center; }
.doctor .frame { position: relative; border-radius: 22px; overflow: hidden; }
.doctor .frame img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.doctor .frame::after { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--acc-b) 45%, var(--line)); pointer-events: none; }
.doctor .frame .halo { position: absolute; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--acc-d) 55%, transparent), transparent 70%); pointer-events: none; }
.doctor h2 { font-size: clamp(2rem, 4vw, 3rem); }
.doctor h2 .serif { color: var(--acc-a); }
.quotes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.quotes li { border-inline-start: 2px solid var(--acc-b); padding-block: 2px; padding-inline-start: 16px; }
.quotes .ur { font-size: 1rem; line-height: 1.9; margin: 0; }
.quotes small { display: block; color: var(--muted); font-size: .84rem; }

/* ===================================================================== provenance: devices + seen-on/trained-at */
.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.device { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 20px; position: relative; }
.device::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: 1px; background: var(--grad-rule); }
.device b { display: block; font-weight: 500; font-size: 1rem; }
.device span { display: block; color: var(--muted); font-size: .84rem; margin-top: 6px; }
.device i { display: block; margin-top: 10px; font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.prov { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prov li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; position: relative; overflow: hidden; }
.prov li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); }
.prov .when { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.prov b { display: block; font-weight: 500; margin-top: 6px; }
.prov span { display: block; color: var(--muted); font-size: .86rem; margin-top: 4px; }
.prov a { display: inline-block; margin-top: 10px; font-size: .84rem; color: var(--acc-a); text-decoration: none; }
.prov a:hover { text-decoration: underline; }

/* ===================================================================== place strip */
.place { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.place figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.place img { width: 100%; height: 100%; object-fit: cover; }
.place figcaption { position: absolute; inset: auto 0 0 0; padding: 36px 14px 14px; background: linear-gradient(180deg, transparent, var(--scrim)); font-size: .82rem; color: var(--bone); }
.place figcaption b { display: block; font-weight: 500; font-size: .95rem; }

/* ===================================================================== results note */
.results-note { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-top: 18px; }
.results-note p { margin: 0; }
.results-note .ur { font-size: 1rem; line-height: 1.9; }

/* ===================================================================== visit */
.visit .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.visit address { font-style: normal; line-height: 1.6; }
.visit .hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0; font-size: .95rem; }
.visit .hours b { font-weight: 500; }
.visit .map { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; min-height: 260px; text-align: center; padding: 24px; color: var(--muted); overflow: hidden; }
.visit .map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; border-radius: 12px; }
.visit .map .btn { margin-top: 14px; }

/* ===================================================================== form (request-to-confirm booking) */
.form { display: grid; gap: 16px; }
.form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .choice legend { font-size: .9rem; color: var(--bone); font-weight: 500; }
.field .hint { font-size: .8rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--bone); background: var(--ground);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px;
  transition: border-color .25s; appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--acc-b) 40%, var(--line)); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--acc-a); outline-offset: 1px; border-color: var(--acc-b); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid, .field [aria-invalid="true"] { border-color: var(--f3); }
.field .err { font-size: .82rem; color: var(--bone); border-inline-start: 2px solid var(--f3); padding-inline-start: 8px; }
.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choice legend { width: 100%; margin-bottom: 6px; padding: 0; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--ground); color: var(--muted); font-size: .9rem; transition: color .25s, border-color .25s; }
.choice input:checked + span { color: var(--bone); border-color: var(--gold); background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
.choice input:focus-visible + span { outline: 2px solid var(--acc-a); outline-offset: 2px; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .92rem; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-inline-start-width: 3px; color: var(--bone); }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { border-inline-start-color: var(--gold); }
.form-status[data-state="err"] { border-inline-start-color: var(--f3); }
.form-status[data-state="offline"], .offline-note { border-inline-start-color: var(--muted); color: var(--bone); }
.offline-note { font-size: .88rem; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-inline-start-width: 3px; }

/* ===================================================================== footer */
footer.site, body > footer { margin-top: 70px; border-top: 1px solid var(--line); padding: 30px 0 110px; color: var(--muted); font-size: .86rem; position: relative; }
footer.site::before, body > footer::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--grad-rule); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--bone); }

/* ===================================================================== floating WhatsApp (gold, fixed; never themed) */
.float { position: fixed; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 30px var(--shadow); }
.float:hover { background: var(--gold-hi); }
.float::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 2px var(--on-gold); flex: none; }

/* ===================================================================== RTL (Urdu tree: html[dir=rtl][lang=ur]) */
[dir="rtl"] body { font-family: var(--font-ur); line-height: 2.1; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-ur); line-height: 1.9; letter-spacing: 0; font-weight: 400; }
[dir="rtl"] .hero h1 { line-height: 1.7; font-size: clamp(2rem, 4.8vw, 4rem); }
[dir="rtl"] .hero h1 .acc { line-height: 2; }
[dir="rtl"] .serif { font-family: var(--font-ur); font-style: normal; }
[dir="rtl"] .eyebrow, [dir="rtl"] .brand small, [dir="rtl"] .door .go, [dir="rtl"] .dev, [dir="rtl"] .device i, [dir="rtl"] .prov .when { letter-spacing: 0; text-transform: none; font-size: .86rem; }
[dir="rtl"] .btn { line-height: 1.6; padding-block: 10px; }
[dir="rtl"] .pills button { line-height: 1.8; padding-block: 2px; }
[dir="rtl"] .hero .veil { background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 30%, transparent), var(--ground) 92%), linear-gradient(270deg, color-mix(in srgb, var(--ground) 75%, transparent) 0%, transparent 60%); }
[dir="rtl"] .reel::after { border-width: 6px 10px 6px 0; border-color: transparent var(--bone) transparent transparent; }
[dir="rtl"] .field input[type="tel"], [dir="rtl"] .ltr, [dir="rtl"] time, [dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .field select { background-position: 15px 21px, 20px 21px; }
[dir="rtl"] .en, [dir="rtl"] [lang="en"] { font-family: var(--font); line-height: 1.55; }
[dir="rtl"] .ur { font-size: 1em; }

/* ===================================================================== responsive */
@media (max-width: 900px) {
  header.site .wrap { min-height: 0; padding-block: 10px; flex-wrap: wrap; gap: 10px; }
  nav.main { display: flex; flex-wrap: wrap; font-size: .88rem; }
  .brand b { font-size: .9rem; } .brand small { font-size: .62rem; }
  .pills { margin-inline-start: auto; padding: 2px; }
  .pills button { font-size: .72rem; padding: 5px 9px; }
  .hero .wrap { grid-template-columns: 1fr; padding-top: 80px; }
  .doors .grid, .doctor .grid, .visit .grid, .form .row-2 { grid-template-columns: 1fr; }
  .place { grid-template-columns: 1fr 1fr; }
  .results-note { grid-template-columns: 1fr; }
  .door .go { display: none; }
  section, .section { padding-top: 64px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .facts { gap: 16px; }
  .door { grid-template-columns: 84px 1fr; gap: 14px; }
  .door img { width: 84px; height: 84px; }
  .ledger .entry { grid-template-columns: 72px 1fr; }
  .ledger .entry img { width: 72px; height: 90px; }
  .reels { grid-template-columns: 1fr 1fr; }
}
@media (hover: none) { .concern:hover, .door:hover, .reel:hover { transform: none; } }
@media print { :root { animation: none; } header.site, .float, .pills, .glow { display: none; } body { background: none; color: var(--ground); } }

/* v0.3.2 breakpoint repair: header = logo row + pills row + nav row */
@media (max-width: 900px) {
  header.site .wrap { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  header.site .logo { justify-content: center; }
  .pills, [role="group"][aria-label*="Show treatments"], [role="group"][aria-label*="علاج"] {
    width: 100%; justify-content: center; margin: 0 !important; flex-wrap: wrap; gap: 6px;
  }
  .pills button, [role="group"] button { min-height: 34px; padding: 6px 12px; }
  nav.main { width: 100%; justify-content: center; margin: 0 !important; font-size: .85rem; gap: 12px; }
  .hero .ur { text-wrap: balance; }
}
/* service page: Urdu title anchored under H1, not floating right */
.page-head, .shead { display: block; }
.page-head .ur, .shead .ur { display: block; text-align: start; margin-top: 4px; }
/* v0.4.1: editorial serif on all page H1s (about/services/results/contact) */
main h1, .page h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
/* v0.5: social + review links in footer (≥24px targets) */
footer .social { display: flex; flex-wrap: wrap; gap: 4px 6px; }
footer .social a { color: var(--bone); text-decoration: none; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; }
footer .social a:hover { border-color: var(--acc-b); }