@charset "utf-8";
/* ==========================================================================
   Dr. Rizwan Niazi - Diabesity Solutions, DHA Phase 4, Lahore
   DESIGN LANGUAGE: "READOUT"   (2026, v4)

   Deliberately unrelated to anything built for this client before:
     - the old WP site was blue + Oswald/Poppins Elementor blocks
     - the earlier static redesign was sage + brass + Fraunces, a paper look
     - the first pass of this build was bone paper + clay + hard offset shadow

   READOUT goes somewhere else entirely:
     ground     cool porcelain, soft and clinical, plenty of air
     ink        deep plum-charcoal, warm enough to avoid corporate navy
     accent     electric violet for action, amber for attention. Never both
                on the same element.
     type       ONE geometric sans (Manrope) carrying everything, with a
                mono (DM Mono) reserved for data, labels and units. No serif
                anywhere. The discipline is the statement.
     geometry   large radii, pill controls, rounded photo masks, soft layered
                shadows. No borders doing decorative work.
     motif      the READOUT: a mono key above a value, and cards that float
                up over the block beneath them. Sections are separated by air
                and by the floating vitals rail, never by ruled lines.

   One stylesheet, no framework, no build step.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* Manrope, self-hosted (19 Sep, local SEO audit PF-1): one variable Latin file, no request to Google Fonts */
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme: light;

  --bg:        #F4F5FA;   /* cool porcelain */
  --bg-2:      #ECEDF6;   /* recessed panels */
  --surface:   #FFFFFF;
  --hair:      #E3E4F0;
  --hair-2:    #EFF0F8;

  --ink:       #191428;   /* deep plum-charcoal */
  --ink-2:     #33304A;
  --ink-3:     #56526E;
  --muted:     #6F6B87;
  --muted-2:   #918DA6;

  /* action. white on #5B3BE8 is 6.4:1 */
  --violet:      #5B3BE8;
  --violet-deep: #4326C9;
  --violet-lift: #7A5FF0;
  --violet-wash: #EEEAFE;
  --violet-glow: rgba(91,59,232,.16);

  /* attention. amber is a FILL colour, never small text on white */
  --amber:      #FFA426;
  --amber-ink:  #A85B04;
  --amber-wash: #FFF2DE;

  --ok:        #12805C;
  --ok-wash:   #E1F4EE;

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;  /* was DM Mono; owner 19 Sep: one font */
  /* Urdu: self-hosted Jameel Noori Nastaleeq (shape-verified subset, see _build/subset_font.py).
     Latin words inside Urdu fall through to Manrope because the font face is limited by unicode-range. */
  --urdu: "Jameel Noori Nastaleeq", "Manrope", "Noto Nastaliq Urdu", "Urdu Typesetting", serif;

  --wrap:  1180px;
  --prose: 44rem;   /* article reading measure ~704px, about 68-72 characters (owner, 27 Sep) */

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --pill: 999px;

  --sh-1: 0 1px 2px rgba(25,20,40,.06), 0 8px 22px -10px rgba(25,20,40,.20);   /* 22 Sep: was too faint, cards looked flat until hovered */
  --sh-2: 0 2px 6px rgba(25,20,40,.05), 0 18px 44px -22px rgba(25,20,40,.28);
  --sh-3: 0 4px 10px rgba(25,20,40,.06), 0 34px 70px -30px rgba(25,20,40,.36);
  --sh-v: 0 18px 40px -18px rgba(91,59,232,.55);

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4.5rem; --s9:6.5rem;

  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-deep);text-decoration:none}
a:hover{color:var(--ink)}
button{font:inherit}
h1,h2,h3,h4,h5{
  font-family:var(--sans);color:var(--ink);margin:0;
  font-weight:800;line-height:1.1;letter-spacing:-.03em;
}
h1{font-size:clamp(2.35rem,5.2vw,3.8rem);letter-spacing:-.04em;line-height:1.04}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.035em}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.02em;font-weight:700}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.012em}
p{margin:0 0 var(--s4)}
ul,ol{margin:0 0 var(--s4);padding-left:1.15em}
li{margin-bottom:.4em}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}

/* ----------------------------------------------------------------- helpers */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec{padding:var(--s8) 0}
.sec-tight{padding:var(--s7) 0}
.center{text-align:center}
.lead{font-size:1.16rem;line-height:1.62;color:var(--ink-3)}
h1+.lead,h2+.lead{margin-top:1.05rem}
:where(h1,h2)+p{margin-top:1.05rem}
.intro{max-width:46rem;margin-left:auto;margin-right:auto;text-align:center}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0;top:0}

/* --------------------------------------------------- THE READOUT (the motif)
   A mono key above a value. Every stat, section opener and data point on the
   site is set this way. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violet-deep);
  background:var(--violet-wash);border-radius:var(--pill);
  padding:.42rem .9rem;margin:0 0 var(--s4);
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet);flex:none}
.eyebrow--amber{color:var(--amber-ink);background:var(--amber-wash)}
.eyebrow--amber::before{background:var(--amber)}
.eyebrow--dark{color:#CFC7F5;background:rgba(255,255,255,.09)}
.eyebrow--dark::before{background:var(--violet-lift)}

.readout__k{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.45rem;
}
.readout__v{display:block;font-size:1.85rem;font-weight:800;letter-spacing:-.045em;color:var(--ink);line-height:1}
.readout__v em{font-style:normal;color:var(--violet)}
.readout__n{display:block;margin-top:.5rem;font-size:.88rem;color:var(--muted);line-height:1.45}

/* one hand-drawn stroke under a phrase, drawn as SVG so it reads as a line */
.swash{position:relative;white-space:nowrap;display:inline-block}
.swash::after{
  content:"";position:absolute;left:0;right:0;bottom:-.16em;height:.2em;
  background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8.5C34 4 64 3 98 4.2c30 1 62 3.4 100 1.4' fill='none' stroke='%23FFA426' stroke-width='5' stroke-linecap='round'/></svg>");
}
.swash--violet::after{bottom:-.2em;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8.5C34 4 64 3 98 4.2c30 1 62 3.4 100 1.4' fill='none' stroke='%237A5FF0' stroke-width='5' stroke-linecap='round'/></svg>")}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--pill);padding:.38rem .8rem;
}
.chip--violet{color:var(--violet-deep);background:var(--violet-wash);border-color:transparent}
.chip--amber{color:var(--amber-ink);background:var(--amber-wash);border-color:transparent}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:700;font-size:.98rem;letter-spacing:-.012em;
  padding:.95rem 1.6rem;border-radius:var(--pill);border:1.5px solid transparent;
  cursor:pointer;line-height:1.15;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.btn svg{flex:none}
.btn--primary{background:var(--violet);color:#fff;box-shadow:var(--sh-v)}
.btn--primary:hover{background:var(--violet-deep);color:#fff;transform:translateY(-2px);box-shadow:0 22px 46px -18px rgba(67,38,201,.62)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--hair);box-shadow:var(--sh-1)}
.btn--ghost:hover{color:var(--ink);border-color:var(--violet);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--onDark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(0,0,0,.45)}
.btn--sm{padding:.62rem 1.15rem;font-size:.9rem}
.btn--wide{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

.micro{
  font-family:var(--mono);font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;gap:.5rem;margin:var(--s4) 0 0;letter-spacing:.02em;
}
.micro::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px var(--ok-wash)}

/* -------------------------------------------------------------- topbar/nav */
/* plain sans here, not the mono face: a phone number in a monospace font reads like code */

.hdr{position:sticky;top:0;z-index:60;background:rgba(244,245,250,.96);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--hair)}
.hdr__in{display:flex;align-items:center;gap:1.3rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.65rem;flex:none}
.brand__logo{width:52px;height:52px;flex:none;display:block;border-radius:50%}
.ft__brand .brand__logo{width:64px;height:64px}
.brand__t{display:block;font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.03em;line-height:1.15}
.brand__s{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}

.nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.nav a:not(.btn){font-weight:600;font-size:.93rem;color:var(--ink-3);padding:.5rem .85rem;border-radius:var(--pill)}
.nav a:not(.btn):hover{color:var(--ink);background:var(--surface)}
.nav a:not(.btn)[aria-current]{color:var(--violet-deep);background:var(--violet-wash)}
.nav__cta{margin-left:.5rem}
.nav a:not(.btn){white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){
  .nav a:not(.btn){padding:.5rem .5rem;font-size:.88rem}
  .nav__cta{margin-left:.25rem;padding-left:1rem;padding-right:1rem}
  .brand__logo{width:46px;height:46px}
  .hdr__in{gap:.8rem}
}

.burger{display:none;margin-left:auto;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--hair);border-radius:var(--pill);padding:.55rem 1rem;box-shadow:var(--sh-1);cursor:pointer;font-weight:700;font-size:.9rem;color:var(--ink)}
.burger span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}

.mnav{display:none;background:var(--bg);border-top:1px solid var(--hair)}
.mnav.open{display:block}
.mnav a{display:block;font-weight:600;padding:.85rem 0;border-bottom:1px solid var(--hair-2);color:var(--ink-2)}
.mnav .btn{margin:1.1rem 0 1.3rem}

/* --------------------------------------------------------------- mobile bar */
.dock{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;max-width:calc(100vw - 24px);box-sizing:border-box;
  background:rgba(25,20,40,.95);border-radius:var(--pill);box-shadow:0 18px 40px -12px rgba(25,20,40,.6);
}
.dock a{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem .3rem;border-radius:var(--pill);color:#fff;font-weight:700;font-size:.85rem;min-width:0;white-space:nowrap;overflow:hidden}
/* the hero already carries the booking form and both CTAs, so this bar stays out of the way until
   the reader scrolls past it, instead of covering the page from the first second */
.dock{transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.dock.is-on{transform:none;opacity:1;pointer-events:auto}
.dock a.is-primary{background:var(--violet)}
.dock svg{width:17px;height:17px}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;padding:var(--s8) 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 82% 8%,var(--violet-glow),rgba(91,59,232,0) 70%);
}
.hero__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s7);align-items:center}
.hero h1{margin:0 0 var(--s4)}
.hero .lead{max-width:33rem;margin-bottom:var(--s5)}
.hero__creds{display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--s6) 0 0;padding:0;list-style:none}
.hero__creds li{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface);border-radius:var(--pill);
  padding:.42rem .85rem;box-shadow:var(--sh-1);margin:0;
}

/* the portrait sits on a violet field, with two readout cards breaking out */
.hero__stage{position:relative;padding-bottom:2.4rem}
.hero__field{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(158deg,#6B4DEC 0%,#4B2ED2 58%,#3A1FAE 100%);
  box-shadow:0 40px 80px -34px rgba(67,38,201,.65);
}
.hero__field::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 78% at 50% 112%,rgba(255,255,255,.24),transparent 60%)}
.hero__field img{position:relative;z-index:1;width:100%;max-width:430px;margin:0 auto;display:block}
.hero__badge{position:absolute;z-index:2;right:-8px;top:26px;background:var(--surface);border-radius:var(--r);padding:.8rem 1.05rem;box-shadow:var(--sh-3)}
.hero__badge .readout__v{font-size:1.5rem}
.hero__card{
  position:absolute;z-index:2;left:-10px;bottom:0;background:var(--surface);border-radius:var(--r);
  padding:1rem 1.2rem;box-shadow:var(--sh-3);display:flex;align-items:center;gap:.9rem;max-width:19.5rem;
}
.hero__card svg{flex:none;color:var(--ok)}
.hero__card b{display:block;font-size:.94rem;color:var(--ink);letter-spacing:-.02em}
.hero__card span{display:block;font-size:.83rem;color:var(--muted);line-height:1.4}

/* -------------------------------------------------------------- vitals rail
   the signature move: a card that floats up over the block beneath it */
.rail{position:relative;z-index:3;margin-top:calc(-1 * var(--s6))}
.rail__in{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rail__i{padding:1.7rem 1.6rem;border-right:1px solid var(--hair-2)}
.rail__i:last-child{border-right:0}

/* -------------------------------------------------------- condition router */
.router{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.rcard{display:block;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.rcard__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.rcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rcard:hover .rcard__img img{transform:scale(1.06)}
.rcard__b{display:block;padding:1.3rem 1.4rem 1.45rem}
.rcard h3{margin:0 0 .4rem;color:var(--ink)}
.rcard p{font-size:.97rem;color:var(--muted);margin:0 0 .95rem;line-height:1.55}
.rcard__go{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep);transition:gap .2s var(--ease)}
.rcard:hover .rcard__go{gap:.75rem}

/* ------------------------------------------------------------------ ladder */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);position:relative;margin-top:var(--s7)}
.ladder::before{content:"";position:absolute;left:11px;right:11px;top:11px;height:2px;background:linear-gradient(90deg,var(--violet) 0%,var(--violet-lift) 52%,rgba(227,228,240,.9) 76%,rgba(227,228,240,0) 100%)}
.rung{position:relative;padding-top:3.1rem;margin:0}
.rung::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--violet);border:5px solid var(--bg);box-shadow:0 0 0 2px var(--violet)}
.rung:nth-child(2)::before{background:var(--violet-lift);box-shadow:0 0 0 2px var(--violet-lift)}
.rung:nth-child(3)::before{background:var(--surface);box-shadow:0 0 0 2px var(--hair)}
.rung__k{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.5rem}
.rung h3{margin:0 0 .5rem}
.rung p{color:var(--ink-3);margin:0;font-size:1rem}

/* ---------------------------------------------------------------- dark spot */
.spot{position:relative;background:var(--ink);color:#C9C4DE;overflow:hidden;border-radius:var(--r-xl);padding:var(--s8) var(--s7)}
/* the glow covers the whole panel. A part-width box left a hard vertical edge on phones (two-tone) */
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 85% at 12% 18%,rgba(122,95,240,.42),rgba(122,95,240,0) 72%)}
.spot__in{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s7);align-items:center}
.spot h2,.spot h3{color:#fff}
.spot h2+p{margin-top:1.45rem}
.spot p{color:#D8D3EC}
/* links on the dark panel: light lavender, underlined, so the "written about" line reads clearly (27 Sep) */
.spot a{color:#CFC3FF;text-decoration:underline;text-underline-offset:2px}
.spot a:hover{color:#fff}
/* the why panel keeps a designed glow but moves it to the empty top-right, off the left-aligned heading and lead */
.spot--why::before{background:radial-gradient(120% 85% at 84% 6%,rgba(122,95,240,.30),rgba(122,95,240,0) 66%)}
.spot__list{list-style:none;padding:0;margin:var(--s5) 0 var(--s6);display:grid;gap:.85rem}
.spot__list li{position:relative;padding-left:2.1rem;color:#DAD5EC;font-size:1rem;margin:0}
.spot__list li::before{content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;border-radius:50%;background:rgba(122,95,240,.3);box-shadow:inset 0 0 0 2px var(--violet-lift)}
.spot__pic{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}

/* -------------------------------------------------------------- doctor bio */
.bio{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--s7);align-items:center}
.bio__pic{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(158deg,#6B4DEC,#3A1FAE);box-shadow:var(--sh-2)}
.bio__pic img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:50% 6%}
/* home About (27 Sep): the only real photo is a speaking shot, framed tighter on Dr. Rizwan; a clean intro and
   qualification badges instead of a bordered box */
.bio__c{align-self:center}
.bio__c>.lead{margin-top:1.05rem}
/* the only real photo is a wide speaking shot; a square crop framed on his head and upper body trims the empty
   lower half and the busy edges, so the block reads more like a portrait (27 Sep). object-fit keeps the image at
   the card's width, so nothing spills past the phone edge. */
.bio__pic--talk{aspect-ratio:1/1}
.bio__pic--talk img{aspect-ratio:1/1;object-position:50% 12%}
.bio__creds{margin:var(--s5) 0 var(--s5)}
.bio__creds-k{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .7rem}
.qchips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.qchip{display:inline-flex;align-items:center;font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--violet-deep);background:var(--violet-wash);border-radius:var(--pill);padding:.5rem 1rem;line-height:1.2}
.creds{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:.7rem}
.creds li{position:relative;padding-left:2rem;color:var(--ink-2);font-size:1rem;margin:0}
.creds li::before{content:"";position:absolute;left:0;top:.24em;width:19px;height:19px;border-radius:50%;background:var(--violet-wash)}
.creds li::after{content:"";position:absolute;left:5.5px;top:.55em;width:8px;height:4px;border-left:2px solid var(--violet-deep);border-bottom:2px solid var(--violet-deep);transform:rotate(-45deg)}

/* ----------------------------------------------------------------- q cards */
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.qcard{background:var(--surface);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh-1)}
.qcard h4{margin:0 0 .45rem;color:var(--ink)}
.qcard p{margin:0;font-size:.97rem;color:var(--muted);line-height:1.55}

/* -------------------------------------------------------------------- urdu
   Rules that keep Nastaleeq joined: no letter-spacing anywhere inside Urdu (it pulls the joined letters
   apart, which is what made words look broken), no synthetic bold or italic, no uppercase, generous
   line height for the tall ascenders and descenders, and Urdu set larger than the English around it. */
@font-face{
  font-family:"Jameel Noori Nastaleeq";
  src:url("/assets/fonts/jameel-noori-nastaleeq.059a23fd73.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020,U+00A0,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F;
}
[lang="ur"]{font-family:var(--urdu);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0!important;word-spacing:normal;text-transform:none!important}
[lang="ur"] *{letter-spacing:0!important;text-transform:none!important;font-synthesis:none;font-style:normal}
/* Urdu card: the design the judge picked on 19 Sep (proposal A, with the runners-up's best ideas). A violet-wash
   to white surface with a faint girih lattice in the top-left corner, the corner the right-aligned Urdu leaves
   empty; set apart by a shadow and an equal neutral hairline on all four sides. Owner's rules: never a line or
   bar on any single edge (19 Sep, "never ever"), no dark panel, no highlighter behind the heading. */
.urdu{position:relative;isolation:isolate;padding:3rem 3.4rem 2.8rem;color:var(--ink);
  background:radial-gradient(115% 95% at 0% 0%,var(--violet-wash) 0%,rgba(238,234,254,.55) 40%,rgba(255,255,255,0) 72%),linear-gradient(180deg,#FBFAFF 0%,var(--surface) 100%);
  border:1px solid rgba(25,20,40,.07);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.urdu::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:min(24rem,36%);height:min(22rem,86%);
  border-top-left-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%235B3BE8' stroke-width='1.1' stroke-linejoin='round'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 0L17 17M56 0L39 17M0 56L17 39M56 56L39 39M28 0V12.4M28 43.6V56M0 28H12.4M43.6 28H56'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px;background-position:-6px -6px;opacity:.34;
  -webkit-mask-image:radial-gradient(100% 100% at 0% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
  mask-image:radial-gradient(100% 100% at 0% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%)}
/* the Urdu reads as one paragraph (owner, 19 Sep: 'write it as a paragraph so it looks compact'): the three live
   paragraphs run on inline, one size, the closing call to act in violet */
.urdu__in{position:relative;direction:rtl;text-align:justify;text-align-last:right;max-width:46rem;margin-left:auto;
  font-family:var(--urdu);font-size:clamp(1.3rem,1.6vw,1.42rem);line-height:2.1}
.urdu .ur-h{font-family:var(--urdu);font-weight:400;font-size:clamp(1.8rem,2.5vw,2.1rem);line-height:1.85;color:var(--violet-deep);margin:0 0 .55rem;text-wrap:balance}
/* a small amber eight-point star where the heading starts: an ornament, not a box and not a line */
.urdu .ur-h::before{content:"";display:inline-block;width:.66em;height:.66em;margin-left:.45em;vertical-align:.02em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FFA426'%3E%3Crect x='5.5' y='5.5' width='13' height='13'/%3E%3Crect x='5.5' y='5.5' width='13' height='13' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.urdu .ur-p{display:inline;font-family:var(--urdu);font-weight:400;margin:0;color:var(--ink-2)}
.urdu .ur-p + .ur-p::before{content:" "}
.urdu .ur-p + .ur-p:last-child{color:var(--violet-deep)}  /* the closing call to act, only when it follows other text */
/* one WhatsApp contact button, right-aligned to fit the RTL card; it sits outside the Urdu block, in English/LTR (27 Sep) */
.urdu__wa{position:relative;display:flex;justify-content:flex-end;margin-top:1.7rem}
.urdu__wa-btn{gap:.5rem}
.urdu__cta{position:relative;display:flex;justify-content:flex-start;margin-top:1.5rem}
@media (max-width:1180px){.urdu::before{height:7.5rem}}
@media (max-width:900px){
  .urdu{padding:2.4rem 2rem 2.2rem;border-radius:var(--r-lg)}
  .urdu::before{width:min(18rem,55%)}
  .urdu__cta{justify-content:flex-end}
}
@media (max-width:620px){
  .urdu{padding:2.2rem 1.25rem 1.4rem}
  .urdu::before{width:70%;height:7rem;background-size:44px 44px;background-position:-5px -5px;opacity:.16}
  .urdu .ur-h{font-size:1.6rem;line-height:1.9;margin-bottom:.45rem}
  .urdu__in{font-size:1.25rem;line-height:2.05;text-align:right}
  .urdu__wa{margin-top:1.3rem}
  .urdu__wa-btn{width:100%;white-space:nowrap;justify-content:center}
  .urdu__cta{margin-top:1.2rem}
  .urdu__cta .btnrow,.urdu__cta .btn{width:100%}
  .urdu__cta .btn{white-space:normal;text-align:center;justify-content:center}
}
@media (max-width:360px){.urdu__cta .btn{font-size:.94rem;padding-left:.9rem;padding-right:.9rem;gap:.45rem}}
/* an Urdu phrase inside an English sentence: kept on one line so the two directions never split it,
   and a little word spacing, because next to English the tight Nastaleeq spacing reads as one word */
.ur-inline{font-family:var(--urdu);font-weight:400;font-size:1.14em;line-height:1;letter-spacing:0!important;word-spacing:.2em;white-space:nowrap;font-synthesis:none;text-transform:none}

/* -------------------------------------------------------------------- book */
.book{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.form{background:var(--surface);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--sh-2)}
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bg);border:1.5px solid transparent;border-radius:var(--r-sm);padding:.82rem .95rem;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);background:#fff;outline:none}
.field textarea{min-height:96px;resize:vertical}
.form__note{font-size:.85rem;color:var(--muted);margin:.9rem 0 0;line-height:1.55}

.visit{list-style:none;padding:0;margin:var(--s5) 0 0}
.visit li{display:flex;gap:1.1rem;padding:.95rem 0;border-bottom:1px solid var(--hair);margin:0}
.visit li:last-child{border-bottom:0}
.visit b{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep);flex:none;width:5.2rem;padding-top:.32rem}
.visit span{color:var(--ink-2);font-size:1rem}
.mapbox{margin-top:var(--s5);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.mapbox iframe{display:block;width:100%;height:260px;border:0;filter:saturate(.62) contrast(1.03)}

/* --------------------------------------------------------------------- faq */
.faq{max-width:var(--prose);margin:0 auto}
.faq details{background:var(--surface);border-radius:var(--r);margin-bottom:.7rem;box-shadow:var(--sh-1);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 3.4rem 1.15rem 1.45rem;position:relative;font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.022em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.3rem;top:1.1rem;width:26px;height:26px;border-radius:50%;background:var(--violet-wash)}
.faq summary::before{content:"";position:absolute;z-index:1;right:1.72rem;top:1.62rem;width:9px;height:9px;border-right:2px solid var(--violet-deep);border-bottom:2px solid var(--violet-deep);transform:translateY(-3px) rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::before{transform:translateY(1px) rotate(-135deg)}
.faq__a{padding:0 1.45rem 1.35rem;color:var(--ink-3);font-size:1rem}
.faq__a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ ribbon */
.ribbon{
  position:relative;overflow:hidden;border-radius:var(--r-xl);text-align:center;
  background:linear-gradient(150deg,#6B4DEC 0%,#4B2ED2 55%,#37199F 100%);
  color:#E7E2FF;padding:var(--s8) var(--s6);box-shadow:0 40px 80px -36px rgba(67,38,201,.7);
}
.ribbon::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 120%,rgba(255,255,255,.2),transparent 60%)}
.ribbon>*{position:relative}
.ribbon .eyebrow{margin-left:auto;margin-right:auto}
.ribbon h2{color:#fff;max-width:20ch;margin:0 auto var(--s4)}
.ribbon p{color:#D6CDFF;max-width:46ch;margin:0 auto var(--s5)}
.ribbon .btnrow{justify-content:center}
.ribbon .micro{color:#D6CDFF;justify-content:center}
.ribbon .micro::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}

/* ------------------------------------------------------------------ footer */
.ft{background:var(--ink);color:#918DA6;padding:var(--s8) 0 var(--s5);font-size:.95rem;margin-top:var(--s8)}
.ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s6)}
.ft h4{color:#fff;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:-.01em;text-transform:none;margin:0 0 1.1rem}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:.6rem}
.ft a{color:#918DA6}
.ft a:hover{color:#fff}
.ft a.btn--primary,.ft a.btn--primary:hover{color:#fff}  /* the footer link colour was greying the button text */
.ft__brand .brand__t{color:#fff}
.ft__brand p{color:#7C7794;margin:1.1rem 0 0;max-width:30ch;font-size:.94rem}
.ft__soc{display:flex;gap:.5rem;margin-top:1.2rem}
.ft__soc a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#B7B2CE}
.ft__soc a:hover{background:var(--violet);color:#fff}
.ft__end{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;font-family:var(--sans);font-size:.85rem;letter-spacing:0;color:#7C7794}

/* --------------------------------------------------------------- sub-pages */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:1.4rem 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--violet-deep)}
.crumb span{margin:0 .5rem;color:var(--hair)}
.crumb span[aria-current]{margin:0;color:var(--ink-3)}   /* the page you are on reads clearly (19 Sep) */

.phero{position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 82% 10%,var(--violet-glow),rgba(91,59,232,0) 70%)}
.phero__in{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s7);align-items:center;padding:var(--s5) 0 var(--s8)}
.phero__pic{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}

.answer{background:var(--surface);border-radius:var(--r-lg);padding:1.7rem 1.8rem;box-shadow:var(--sh-2)}
.answer h2,.answer h3{font-size:1.1rem;margin:0 0 .6rem}
.answer p:last-child{margin-bottom:0}
.answer__k{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.6rem}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.panel{background:var(--surface);border-radius:var(--r-lg);padding:1.7rem;box-shadow:var(--sh-1)}
.panel--sand{background:var(--bg-2);box-shadow:none}
.panel h3{margin:0 0 1rem}
.chk{list-style:none;padding:0;margin:0}
.chk li{position:relative;padding-left:2.1rem;margin-bottom:.8rem;color:var(--ink-2);font-size:1rem}
.chk li::before{content:"";position:absolute;left:0;top:.16em;width:21px;height:21px;border-radius:50%;background:var(--ok-wash)}
.chk li::after{content:"";position:absolute;left:6px;top:.5em;width:9px;height:4px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.chk--no li::before{background:var(--bg-2)}
.chk--no li::after{width:9px;height:2px;background:var(--muted-2);border:0;transform:none;left:6px;top:.72em}

.incl{list-style:none;counter-reset:i;padding:0;margin:0;display:grid;gap:1.25rem}
.incl li{position:relative;padding-left:3.5rem;counter-increment:i;margin:0}
.incl li::before{content:counter(i,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-size:.8rem;color:var(--violet-deep);background:var(--violet-wash);width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%}
.incl b{display:block;font-size:1.04rem;font-weight:700;color:var(--ink);margin-bottom:.2rem;letter-spacing:-.022em}
.incl span{color:var(--ink-3);font-size:1rem}

.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.tbl th,.tbl td{text-align:left;padding:.95rem 1.25rem;font-size:.98rem}
.tbl th{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:var(--bg-2);color:var(--ink-3)}
.tbl td{border-top:1px solid var(--hair-2)}
.tbl td:first-child{font-weight:700;color:var(--ink)}
.tblwrap{overflow-x:auto}

/* ------------------------------------------------------------------- blog */
.bhero{position:relative;overflow:hidden;padding:var(--s7) 0 var(--s6)}
.bhero::before{content:"";position:absolute;top:-70%;left:28%;width:52vw;height:52vw;max-width:720px;max-height:720px;background:radial-gradient(circle at 50% 50%,var(--violet-glow),transparent 62%)}
.bhero>*{position:relative}
.bhero h1{max-width:17ch}

.feat{display:grid;grid-template-columns:1.1fr .9fr;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden;align-items:center}
.feat__pic{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.feat__pic img{width:100%;height:100%;object-fit:cover}
.feat__b{padding:var(--s6)}
.feat h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:.8rem 0 .8rem}
.feat h2 a{color:var(--ink)}
.feat h2 a:hover{color:var(--violet-deep)}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin:0}
.meta>span{display:inline-flex;align-items:center;gap:.38rem}
.meta svg{width:15px;height:15px;flex:none;color:var(--muted-2)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--hair);flex:none}

.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.pcard{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:transform .22s var(--ease),box-shadow .22s var(--ease);display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.pcard__pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.pcard__pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard__pic img{transform:scale(1.06)}
.pcard__b{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:1.09rem;margin:.75rem 0 .45rem;line-height:1.25}
.pcard h3 a{color:var(--ink)}
.pcard h3 a:hover{color:var(--violet-deep)}
.pcard p{font-size:.95rem;color:var(--muted);margin:0 0 1rem;line-height:1.5}
.pcard__b p{margin-bottom:0}
.pcard__end{margin-top:auto;padding-top:1rem;border-top:1px solid var(--hair-2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem}
.pcard__b h3+p{margin-bottom:1rem}

.topics{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.topics li{margin:0}
.topics a{display:inline-block;font-weight:600;font-size:.9rem;color:var(--ink-2);background:var(--surface);border-radius:var(--pill);padding:.5rem 1.05rem;box-shadow:var(--sh-1)}
.topics a:hover{color:#fff;background:var(--violet)}

.hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.hub{background:var(--surface);border-radius:var(--r-lg);padding:1.6rem 1.7rem 1.7rem;box-shadow:var(--sh-1)}
.hub h3{margin:0 0 .3rem}
.hub>p{font-size:.94rem;color:var(--muted);margin:0 0 1.1rem}
.hub ul{list-style:none;padding:0;margin:0}
.hub li{margin:0;border-top:1px solid var(--hair-2)}
.hub li a{display:block;padding:.62rem 0;font-size:.94rem;font-weight:500;color:var(--ink-2)}
.hub li a:hover{color:var(--violet-deep);padding-left:.35rem}

.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.shelf a{display:block;background:rgba(255,255,255,.08);border-radius:var(--r);padding:1rem 1.2rem;font-family:var(--urdu);font-size:1rem;line-height:2.2;color:#fff;direction:rtl;text-align:right}
.shelf a:hover{background:#fff;color:var(--ink)}

.ask{background:var(--surface);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--sh-2);display:grid;grid-template-columns:1.35fr .65fr;gap:var(--s5);align-items:center}
.ask h3{font-size:1.45rem;margin:0 0 .5rem}
.ask p{color:var(--muted);margin:0;font-size:1rem}

/* ------------------------------------------------------------ blog article */
/* The article body is a centred reading measure with balanced gutters on both sides. The measure lives
   in the middle track and never widens; the contents column stays put as the page scrolls (owner, 27 Sep:
   the body used to lose its side margins and run full width). The table of contents sits in the left gutter. */
.art{display:grid;grid-template-columns:minmax(0,1fr) min(100%,var(--prose)) minmax(0,1fr);column-gap:var(--s6);align-items:start;padding:var(--s5) 0 var(--s8)}
.art>*{grid-column:2;min-width:0}
.art__side{grid-column:1;justify-self:end;width:100%;max-width:15rem}
.toc{position:sticky;top:110px;background:var(--surface);border-radius:var(--r);padding:1.35rem 1.3rem 1.25rem;box-shadow:var(--sh-1)}
.toc h4{font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 .7rem;padding:0 .75rem}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.toc li{margin:0}
.toc a{display:block;font-size:.9rem;font-weight:500;color:var(--ink-3);padding:.55rem .75rem;border-radius:var(--r-sm);line-height:1.4;transition:background .15s var(--ease),color .15s var(--ease)}
.toc a:hover{background:var(--bg-2);color:var(--ink)}
.toc a.on{background:var(--violet-wash);color:var(--violet-deep);font-weight:700}

.prose{font-size:1.08rem;line-height:1.72;color:var(--ink-2);max-width:var(--prose);margin-inline:auto}
.prose h2{font-size:1.6rem;margin:var(--s7) 0 var(--s3);scroll-margin-top:120px}
.prose h3{font-size:1.15rem;margin:var(--s6) 0 var(--s3)}
.prose p{margin:0 0 1.15rem}
.prose>p:first-of-type{font-size:1.2rem;line-height:1.6;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--violet)}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--violet-lift)}
.prose a.btn{text-decoration:none}  /* buttons inside an article are not text links (owner, 19 Sep) */
.prose figure{margin:var(--s6) 0}
.prose figure img{border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.prose figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--muted-2);margin-top:.8rem;text-align:center}

.pull{margin:var(--s7) 0;padding:1.6rem 1.8rem;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);font-size:1.28rem;font-weight:700;line-height:1.32;letter-spacing:-.03em;color:var(--ink)}
.callout{background:var(--violet-wash);border-radius:var(--r-lg);padding:1.4rem 1.55rem;margin:var(--s6) 0}
.callout h4{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--violet-deep);margin:0 0 .8rem}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout--amber{background:var(--amber-wash)}
.callout--amber h4{color:var(--amber-ink)}

.inline-cta{position:relative;overflow:hidden;margin:var(--s7) 0;border-radius:var(--r-lg);padding:1.9rem;background:linear-gradient(150deg,#6B4DEC,#4326C9);color:#DCD5FF;box-shadow:var(--sh-v)}
.inline-cta h3{color:#fff;font-size:1.3rem;margin:0 0 .55rem}
.inline-cta p{color:#CFC7F5;margin:0 0 1.2rem;font-size:1rem}

.author{display:flex;gap:1.3rem;align-items:flex-start;margin:var(--s7) 0 0;padding:var(--s5);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.author img{width:84px;height:84px;object-fit:cover;object-position:top center;border-radius:50%;background:var(--violet-wash);flex:none}
.author h4{margin:0 0 .3rem}
.author p{font-size:.95rem;color:var(--muted);margin:0 0 .7rem;line-height:1.5}

.disclaim{margin-top:var(--s6);font-size:.87rem;color:var(--muted-2);background:var(--bg-2);border-radius:var(--r);padding:1.1rem 1.3rem;line-height:1.55}

.share{display:flex;align-items:center;gap:.5rem;margin:var(--s6) 0 0}
.share span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-right:.3rem}
.share a{width:36px;height:36px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);display:grid;place-items:center;color:var(--ink-3)}
.share a:hover{background:var(--violet);color:#fff}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .router,.plist,.hubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art{grid-template-columns:1fr}
  .art>*{grid-column:1;max-width:var(--prose);width:100%;margin-inline:auto}
  .art__side{display:none}
  .ft__g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rail__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rail__i:nth-child(2){border-right:0}
  .rail__i:nth-child(-n+2){border-bottom:1px solid var(--hair-2)}
  .shelf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .hero__in,.spot__in,.bio,.book,.phero__in,.feat,.ask{grid-template-columns:1fr}
  .hero{padding-top:var(--s6)}
  .hero__stage{max-width:400px;margin:0 auto;padding-bottom:3.4rem}
  .hero__badge{top:14px;right:0}
  .hero__card{left:0;max-width:17rem}
  /* the rail overlaps the hero on desktop only; stacked, it would sit on
     top of the credential card and swallow its last line */
  .rail{margin-top:var(--s5)}
  .ladder{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s6)}
  .ladder::before{display:none}
  .rung{padding-top:0;padding-left:3.3rem;min-height:2.4rem}
  .cols2,.qgrid{grid-template-columns:1fr}
  .spot,.ribbon{padding-left:var(--s5);padding-right:var(--s5);border-radius:var(--r-lg)}
  .feat__b{padding:var(--s5)}
  .feat__pic{aspect-ratio:16/9}
  .dock{display:grid}
  body{padding-bottom:76px}
  html{scroll-padding-top:90px}
}
@media (max-width:620px){
  .router,.plist,.hubs,.shelf{grid-template-columns:1fr}
  .rail__in{grid-template-columns:1fr}
  .rail__i{border-right:0;border-bottom:1px solid var(--hair-2)}
  .rail__i:last-child{border-bottom:0}
  .ft__g{grid-template-columns:1fr;gap:var(--s5)}
  .sec{padding:var(--s7) 0}
  .author{flex-direction:column}
  .spot,.ribbon{padding:var(--s6) 1.2rem}
}

/* ==========================================================================
   LIVE-CONTENT BUILD (2026-09-17): components for the copy that is on the live site
   ========================================================================== */

/* Nothing may grow wider than its column: a grid child defaults to min-width:auto, so one long word,
   a table or a larger phone font setting can push the whole page sideways. */
.rail__in>*,.svcs>*,.wgrid>*,.tcards>*,.mini>*,.qgrid>*,.plist>*,.hubs>*,.router>*,.duo>*,.ft__g>*,
.hero__in>*,.phero__in>*,.book>*,.bio>*,.spot__in>*,.art>*,.ask>*,.feat>*,.qform>*{min-width:0}
.tblwrap,.tbl{max-width:100%}
.readout__v--txt,.rail__i,.wcard,.mini__i,.qcard{overflow-wrap:anywhere}
/* the header must keep the menu button on screen, whatever the brand line is set in */
.brand,.brand>span{min-width:0}
@media (max-width:900px){.brand{flex:0 1 auto}}  /* the base rule is flex:none, which cannot shrink */
.brand>span:last-child{overflow:hidden}
.brand__t,.brand__s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{flex:none}
@media (max-width:400px){
  .hdr__in{gap:.6rem}
  .burger{padding:.55rem .8rem}
  .brand__logo{width:42px;height:42px}
}

/* icons: Healthicons (MIT), one per card, picked for the condition it sits on */
.ic{width:26px;height:26px;display:block;fill:currentColor}
.ictile{width:46px;height:46px;border-radius:14px;background:var(--violet-wash);color:var(--violet-deep);display:grid;place-items:center;flex:none}
.ictile--sm{width:38px;height:38px;border-radius:11px}
.ictile--sm .ic{width:22px;height:22px}
.ictile--dark{background:rgba(122,95,240,.22);color:#D9D2FB}
.ictile--amber{background:var(--amber-wash);color:var(--amber-ink)}
.svc__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.wcard__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.mini__i{display:flex;gap:.9rem;align-items:flex-start}
.qcard__top,.tcard__top{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}

/* nav dropdowns (the live menu has children under Weight Loss, Diabetes, Thyroid, Contact) */
.navi{position:relative}
.navi>a{display:inline-flex;align-items:center;gap:.4rem}
.navi__car{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.navi::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.dd{position:absolute;top:calc(100% + 10px);left:-.4rem;min-width:15.5rem;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-3);padding:.5rem;display:none;z-index:80}
.navi:hover .dd,.navi:focus-within .dd{display:block}
.nav .dd a{display:block;padding:.52rem .8rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;color:var(--ink-3)}
.nav .dd a:hover{background:var(--bg-2);color:var(--ink)}
.nav .dd a.dd__p{font-weight:700;color:var(--ink)}
.mnav a.mnav__c{padding:.6rem 0 .6rem 1.1rem;font-weight:500;font-size:.95rem;color:var(--muted)}

/* hero with the quick booking rail. Desktop: copy left, picture right, the form floats over the
   bottom edge across both columns. Phone: the form sits straight under the H1. */
.hero--book .hero__in,.phero--book .phero__in{
  display:grid;grid-template-columns:1.06fr .94fr;column-gap:var(--s7);row-gap:0;align-items:start;
  grid-template-areas:"eyebrow stage" "h1 stage" "copy stage" "form form";
}
.phero--book .phero__in{padding:var(--s4) 0 0}
.hero__eyebrow{grid-area:eyebrow;justify-self:start;margin-top:var(--s4)}
.hero__h1{grid-area:h1;font-size:clamp(2.1rem,4.3vw,3.3rem);line-height:1.06;margin:0 0 var(--s4)}
.hero__copy{grid-area:copy}
.hero__copy .lead{max-width:34rem;margin-bottom:var(--s4)}
.hero__copy .chk{margin:0 0 var(--s5)}
.hero__stage{grid-area:stage;align-self:end}
.hero--book .hero__stage{padding-bottom:3.4rem}
.hero__form{grid-area:form;position:relative;z-index:4;margin-top:calc(-1 * var(--s6))}
.h1-pre{display:block;font-size:.46em;font-weight:700;letter-spacing:-.02em;color:var(--ink-3);margin-bottom:.5rem}
.h1-acc{color:var(--violet)}
.h1-sep{display:none}
.h1-by{display:block;font-size:.46em;font-weight:700;letter-spacing:-.02em;color:var(--ink-3);margin-top:.7rem}
/* on desktop the booking rail floats up over the bottom of the hero, so the copy keeps clear of it */
.hero--book .hero__copy,.phero--book .hero__copy{padding-bottom:calc(var(--s6) + 1.6rem)}
.ur-x{font-family:var(--sans)}
.phero--book .hero__stage{padding-bottom:3.4rem}
.phero__pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:901px){
  .hero--book .hero__in,.phero--book .phero__in{grid-template-rows:auto auto 1fr auto}
  .hero__eyebrow{margin-top:0}
  .hero--book .hero__stage,.phero--book .hero__stage{align-self:stretch;display:flex;flex-direction:column}
  .hero--book .hero__field{flex:1;display:flex;align-items:flex-end;justify-content:center}
  .phero--book .phero__pic{flex:1;position:relative;min-height:320px}
  .phero--book .phero__pic img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}

.qform{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:1.25rem 1.4rem 1rem;
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr) auto;gap:.6rem 1rem;align-items:end;
}
.qform__k{grid-column:1;align-self:center;margin:0 .4rem 0 0;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--violet-deep);display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.qform__k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-wash)}
.qform__f label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.qform__f input,.qform__f select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--bg);
  border:1.5px solid transparent;border-radius:var(--r-sm);padding:.78rem .9rem;height:3.05rem;
}
.qform__f input:focus,.qform__f select:focus{border-color:var(--violet);background:#fff;outline:none}
.qform .btn{height:3.05rem;padding-top:0;padding-bottom:0}
.qform__note,.qform__ok{grid-column:2 / -1;margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}
.qform__ok{color:var(--ok);font-weight:600}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.svc{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);padding:1.5rem 1.55rem 1.4rem;box-shadow:var(--sh-1);color:var(--ink-2);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-3);color:var(--ink-2)}
.svc h3{margin:0 0 .45rem}
.svc p{color:var(--muted);font-size:.97rem;line-height:1.55;margin:0 0 1.1rem}
.svc__go{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep);transition:gap .2s var(--ease)}
.svc:hover .svc__go,.tcard:hover .svc__go{gap:.8rem}

/* why patients choose */
.spot--why{padding:var(--s8) var(--s7)}
.spot__head{position:relative;max-width:46rem;margin:0 0 var(--s6)}
.spot__head h2{margin-top:.2rem}
.wgrid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.wcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:1.35rem 1.2rem}
.wcard h3{color:#fff;font-size:1.03rem;letter-spacing:-.02em;margin:.7rem 0 .5rem}
.wcard p{color:#E4E1F3;font-size:.92rem;line-height:1.52;margin:0}

/* call-to-action band */
.band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);background:var(--ink);border-radius:var(--r-xl);padding:var(--s6) var(--s7)}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 90% at 88% 16%,rgba(122,95,240,.4),rgba(122,95,240,0) 70%)}
.band>*{position:relative}
.band__t{color:#fff;font-weight:800;font-size:clamp(1.45rem,2.5vw,1.95rem);letter-spacing:-.03em;line-height:1.15;margin:0 0 .45rem}
.band__s{color:#A9A3C6;margin:0}
.band .btnrow{flex:none}

.topics--center{justify-content:center;max-width:64rem;margin:var(--s6) auto 0}

/* credentials rail with five readouts */
.rail--4{margin-top:var(--s6)}  /* four cells since the Speciality cell went, 19 Sep */
.rail--4 .rail__in{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair-2);overflow:hidden}
.rail--4 .rail__i{background:var(--surface);border:0;padding:1.45rem 1.35rem}
.readout__v--txt{font-size:1.1rem;letter-spacing:-.02em;line-height:1.25}
.pipe{color:var(--violet-lift);font-weight:400;margin:0 .1em}

/* image + text sections */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.duo__pic{order:2}
.duo--flip .duo__pic{order:0}
.duo__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.duo--tall .duo__pic img{aspect-ratio:4/5;max-height:640px}
.duo__txt h2{margin-bottom:var(--s4)}
.duo__txt .btnrow{margin-top:var(--s5)}
.mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;margin-top:var(--s5)}
.mini__i{background:var(--surface);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh-1)}
.mini__i h3{font-size:1.02rem;margin:0 0 .35rem}
.mini__i p{font-size:.93rem;color:var(--muted);margin:0;line-height:1.5}
.duo .tblwrap{margin:var(--s5) 0 var(--s3)}
.tbl td:empty,.tbl td strong:empty{display:inline}

/* injection type cards */
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.tcard{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);padding:1.5rem 1.5rem 1.35rem;box-shadow:var(--sh-1);color:var(--ink-2);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3);color:var(--ink-2)}
.tcard__k{align-self:flex-start;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-wash);border-radius:var(--pill);padding:.3rem .7rem}
.tcard h3{font-size:1.4rem;margin:.95rem 0 .45rem}
.tcard p{color:var(--muted);font-size:.95rem;line-height:1.52;margin:0 0 1.1rem}

.note{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;line-height:1.5;color:var(--ink-3);background:var(--amber-wash);border-radius:var(--r);padding:.85rem 1.05rem;margin:var(--s4) 0 0}
.note svg{flex:none;color:var(--amber-ink);margin-top:.12rem}
.note--center{max-width:50rem;margin:var(--s5) auto 0}

.qgrid{margin-top:var(--s6)}
@media (min-width:901px){.ask{grid-template-columns:1fr auto}}
.ask__h{font-size:clamp(1.45rem,2.5vw,1.85rem);margin:0 0 .5rem}
.ribbon__t{color:#fff;font-weight:800;font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.035em;line-height:1.1;max-width:22ch;margin:0 auto var(--s4)}
.ribbon .micro{margin-top:var(--s5)}

/* blog */
.pcard__go{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--violet-deep)}
.pcard__go svg{width:15px;height:15px}
.feat__b .meta{margin:.1rem 0 1.2rem}
.feat__b .btn{margin-top:.4rem}
.bhero .crumb{padding-top:0;margin-bottom:var(--s5)}

/* article */
.ahero{padding:var(--s2) 0 var(--s4)}
.ahero h1{font-size:clamp(2rem,4.3vw,3.15rem);line-height:1.08;margin:.9rem 0 1.1rem;max-width:24ch}
.meta--by{font-size:.95rem;gap:.5rem .9rem}
.ahero__pic{margin-top:var(--s6);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:var(--bg-2)}
.ahero__pic img{width:100%;aspect-ratio:21/9;object-fit:cover}
.toc-m{display:none}
.author .btnrow{margin-top:.2rem}

/* footer. These live in a min-width query on purpose: this block sits AFTER the responsive section,
   so a plain rule here would beat the phone rules above and leave the footer four columns wide. */
@media (min-width:1081px){.ft__g{grid-template-columns:1.35fr .75fr 1fr 1.55fr}}
.ft__brand .btn{margin-top:1.3rem}
.ft__specs{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.ft__end a{color:#B7B2CE}

@media (max-width:1080px){
  .wgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail--4 .rail__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc-m{display:block;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-1);padding:1rem 1.2rem;margin:0 0 var(--s5)}
  .toc-m summary{cursor:pointer;font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
  .toc-m ol{margin:.8rem 0 0;padding:0;list-style:none;font-size:.95rem}
  .toc-m ol a{color:var(--ink-3)}
  .qform{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto}
  .qform__k{grid-column:1 / -1}
  .qform__note,.qform__ok{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero--book .hero__in,.phero--book .phero__in{grid-template-columns:1fr;grid-template-areas:"eyebrow" "h1" "form" "copy" "stage"}
  .hero__form{margin:0 0 var(--s6)}
  .hero--book .hero__copy,.phero--book .hero__copy{padding-bottom:var(--s5)}
  .hero__stage{max-width:420px;width:100%;margin:0 auto}
  .phero--book .hero__stage{max-width:none;padding-bottom:0}
  .hero--book .hero__stage{padding-bottom:1rem}
  .hero__eyebrow{font-size:.62rem;letter-spacing:.1em;padding:.42rem .8rem}
  .hero__h1{font-size:clamp(1.85rem,7.2vw,2.4rem);line-height:1.14}
  .h1-acc{display:block}
  .h1-pre{font-size:.52em;margin-bottom:.35rem}
  .qform{grid-template-columns:1fr;padding:1.2rem}
  .qform .btn{width:100%}
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{flex-direction:column;align-items:flex-start;padding:var(--s6) var(--s5)}
  .duo{grid-template-columns:1fr;gap:var(--s5)}
  .duo__pic,.duo--flip .duo__pic{order:0}
  /* 23 Sep, owner: on a phone the hero already ends on a photo, so the section right after it puts its photo
     under the text instead of stacking two photos; and the form above already sends to WhatsApp, so the hero's
     second WhatsApp button goes (the call button stays) */
  .phero + .sec > .duo > .duo__pic,.hero + .sec > .duo > .duo__pic{order:2}
  .hero--book .hero__copy .btnrow a[href*="wa.me"],.phero--book .hero__copy .btnrow a[href*="wa.me"]{display:none}
  .spot--why{padding:var(--s7) var(--s5)}
  .ask{grid-template-columns:1fr}
}
/* phone: nothing a thumb has to hit should be under 44px, and no sentence under 14px */
@media (max-width:900px){
  .topics a{padding:.72rem 1.15rem}
  .ft li a,.ft__end a{display:inline-block;padding:.55rem 0}
  .ft__soc a{width:44px;height:44px}
  .crumb a{display:inline-block;padding:.7rem 0}
  .btn--sm{padding:.78rem 1.25rem}
  .pcard__go,.svc__go,.rcard__go{display:inline-block;padding:.8rem 0}
  .ft__end span{display:inline-block}
  .toc-m ol a{display:inline-block;padding:.35rem 0}
  .qform__note,.qform__ok,.form__note,.micro{font-size:.9rem}
  .ft__end{font-size:.85rem}
  .faq summary{padding-top:1.3rem;padding-bottom:1.3rem}
  .toc-m summary{padding:.35rem 0}
}
@media (max-width:620px){
  .svcs,.wgrid,.tcards{grid-template-columns:1fr}
  .rail--4 .rail__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ft__specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ahero__pic img{aspect-ratio:16/10}
  .svc,.wcard,.mini__i,.tcard,.qcard{text-align:center}
  .svc{align-items:center}
  .svc__top,.wcard__top,.tcard__top,.qcard__top{justify-content:center}
  .qcard__top{flex-direction:column;gap:.6rem}
  .mini__i{flex-direction:column;align-items:center;gap:.7rem}
  .pcard__b,.feat__b,.rail__i{text-align:center}
  .pcard__end,.feat__b .meta,.pcard__b .meta{justify-content:center}
  .band{align-items:center;text-align:center}
  .band .btnrow{justify-content:center}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.hdr,.dock,.ribbon,.inline-cta,.form,.qform{display:none}body{background:#fff}}

/* ------------------------------------------------------------------ whole site (19 Sep 2026)
   Components for the other 45 pages, drawn from the same tokens. No line or bar on any single edge (owner's
   standing rule), one type family, no numbers on cards. Phone rules sit in max-width queries after the base rules. */
.phero--solo .phero__in{grid-template-columns:minmax(0,1fr)}
.phero--solo .hero__copy,.phero--solo .hero__h1,.phero--solo .hero__eyebrow{max-width:46rem}
.qgrid{margin-top:var(--s6)}
.qgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qgrid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qcard h3{font-size:1.06rem;letter-spacing:-.02em;line-height:1.3;margin:0;color:var(--ink)}
.qcard p+p{margin-top:.55rem}
.qcard .btnrow{margin-top:1rem}
.qcard--link{display:block;color:inherit;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.qcard--link:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.qcard--form .qform{box-shadow:none;padding:0;grid-template-columns:minmax(0,1fr);background:none}
.qcard--form .qform__k{display:none}
.kv{display:grid;gap:.15rem;margin:0 0 .75rem}
.kv b{font-size:.8rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.chk--sm li{font-size:.94rem;margin-bottom:.45rem;padding-left:1.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.6rem 0 0}
.chips li{background:var(--surface);border-radius:var(--pill);padding:.5rem .95rem;font-size:.92rem;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1);margin:0}
.listbox{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s6) var(--s7)}
.listbox .intro{text-align:left;margin:0 0 var(--s4);max-width:none}
.listbox .chk{columns:2;column-gap:var(--s6);margin:0}
.listbox .chk li{break-inside:avoid}
.alert{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;background:var(--amber-wash);border-radius:var(--r-lg);padding:var(--s5) var(--s6)}
.alert>svg{flex:none;color:var(--amber-ink);margin-top:.2rem}
.alert p{flex:1 1 20rem;margin:0;color:var(--ink-2)}
.wide-fig{margin:var(--s6) auto 0;max-width:62rem;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.wide-fig img{width:100%;height:auto;display:block}
.prose-sec{max-width:46rem;margin:0 auto}
.prose-sec h2{margin:0 0 var(--s4)}
.prose-sec h2:not(:first-child){margin-top:var(--s6)}
.prose-sec p{color:var(--ink-2);line-height:1.7}
.duo__txt h3{font-size:1.2rem;margin:var(--s5) 0 .5rem}
.mapbox iframe{display:block;width:100%;height:420px;border:0;border-radius:var(--r-xl)}
.mapbox{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
@media (max-width:1080px){
  .qgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .qgrid--2,.qgrid--3,.qgrid--4{grid-template-columns:minmax(0,1fr)}
  .listbox{padding:var(--s5) 1.25rem}
  .listbox .chk{columns:1}
  .alert{padding:var(--s5) 1.25rem}
  .mapbox iframe{height:320px}
  .kv{justify-items:center}
}

/* H1 without the brand (local SEO audit H-1): the "Dr. Rizwan Niazi" by-line sits under the H1, outside it */
.hero__h1wrap{grid-area:h1}
.hero__h1wrap .hero__h1{margin:0 0 .3rem}
.hero__h1wrap .h1-by{display:block;font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.02em;color:var(--ink-3);margin:0 0 var(--s4)}

/* articles on a treatment page, and the treatment card at the end of an article (local SEO audit IL-1) */
.plist--rel{margin-top:var(--s6)}
.relcard{display:flex;align-items:center;gap:1rem;margin:var(--s6) 0 0;padding:1.1rem 1.3rem;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);color:var(--ink);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.relcard:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.relcard>span{flex:1;display:grid;gap:.15rem}
.relcard__k{font-size:.8rem;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.relcard__t{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.relcard>svg{flex:none;color:var(--violet-deep)}
.prose .relcard{text-decoration:none}

.qcard--map{padding:0;overflow:hidden;min-height:360px}
.qcard--map iframe{display:block;width:100%;height:100%;min-height:360px;border:0}

/* contact card on phones: its button centred like the rest of the card; the map tile tinted while it loads */
.qcard--map{background:var(--violet-wash)}
@media (max-width:620px){
  .qcard .btnrow{justify-content:center}
}

/* ---------------------------------------------------- the 20 Sep review (six reviewers, 26 pages, 77 notes) */
/* the hero kept no side gutter on the phone: its own padding was wiping .wrap's 22px */
.phero__in,.phero--book .phero__in,.phero--solo .phero__in,.hero--book .hero__in{padding-left:22px;padding-right:22px}
/* the glow over the hero was swallowing taps on the breadcrumb links */
.phero::before{pointer-events:none}
.phero>.wrap{position:relative;z-index:2}
.crumb__i{white-space:nowrap}
.crumb .crumb__i{margin:0}
.crumb__s{margin:0 .5rem;color:var(--hair)}
/* a heading needs air above the block it introduces (the FAQ sat on its first question) */
.intro+.faq,.intro+.topics,.intro+.plist,.intro+.tblwrap,.intro+.svcs,.intro+.qgrid{margin-top:var(--s6)}
/* link-card grids: the column count leaves no card alone on the last row */
.svcs--1{grid-template-columns:minmax(0,34rem);justify-content:center}
.svcs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svcs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svcs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qgrid--1{grid-template-columns:minmax(0,34rem);justify-content:center}
/* mini cards: the heading sits level with the icon, and three fit across instead of two and an orphan */
.duo__txt .mini h3,.mini__i h3{margin:0 0 .35rem}
.mini{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.mini--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mini--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* a diagram is shown whole; only a photo of a person is cropped to the frame */
.duo__pic--nat img,.fig--nat img{aspect-ratio:auto;object-fit:contain;height:auto}
.fig--nat{margin:var(--s5) 0 0}
.fig--nat img{border-radius:var(--r-lg)}
/* a hero with no picture uses the whole width, and its booking box sits under the text, not over the heading */
.phero--solo .phero__in{grid-template-areas:"eyebrow" "h1" "copy" "form"}
.phero--solo .hero__copy{padding-bottom:0}
.phero--solo .hero__form{margin-top:var(--s5)}
@media (max-width:1080px){
  .svcs--3,.svcs--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .svcs--1,.svcs--2,.svcs--3,.svcs--4,.qgrid--1,.mini{grid-template-columns:minmax(0,1fr)}
  .svc__top{flex-direction:column;align-items:center;gap:.6rem}
  .tcard__k{align-self:center;text-align:center}
  .qcard .chk,.mini__i .chk,.svc .chk{display:inline-block;text-align:left}
  /* a wide table scrolls on its own, and says so */
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap::after{content:"Scroll sideways to read the whole table";display:block;margin:.6rem 0 0;font-size:.82rem;color:var(--muted-2);text-align:center}
}
@media (max-width:420px){
  .btn{padding:.85rem 1.05rem;font-size:.92rem}
}
.h1-by span{display:block}
.h1-by span+span{margin-top:.15rem}
/* the breadcrumb wraps between its steps, never inside one (found at 1.3x text on a 375px screen) */
.crumb{display:flex;flex-wrap:wrap;align-items:center;row-gap:.2rem}
/* the line and button that close a card section read as part of it, centred like the heading above */
.qextra{margin-top:var(--s6);text-align:center}
.qextra .btnrow,.btnrow--center{justify-content:center}
.qextra p{max-width:46rem;margin-left:auto;margin-right:auto}
.btnrow--center{display:flex;margin-top:var(--s5)}

/* ------------------------------------------- the 21 Sep review, second pass (six reviewers, 93 notes) */
/* small cards inside a text column beside a picture: never three squeezed columns with words broken in half */
.duo__txt .mini,.duo__txt .mini--2,.duo__txt .mini--3{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.mini__i h3,.qcard h3,.svc h3{overflow-wrap:normal;word-break:normal;hyphens:none}
/* a diagram is shown whole, and a tall scan does not run away with the page */
.duo__pic--nat img{max-height:520px;object-position:center}
/* a part-filled last row of post cards is centred instead of hugging the left edge */
@media (min-width:1081px){.plist>:last-child:nth-child(3n+1){grid-column:2}}
.plist:has(>:only-child){grid-template-columns:minmax(0,26rem);justify-content:center}
.plist:has(>:only-child)>:last-child{grid-column:auto}
/* exactly two post cards: same width as a three-up card, the pair centred */
@media (min-width:1081px){.plist:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,calc((100% - 2 * var(--s5)) / 3));justify-content:center}}
/* a card that is itself a link says so */
.qcard__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-deep)}
.qcard--link{display:flex;flex-direction:column}
/* the eyebrow keeps its dot on the first line when the label wraps */
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.42em}
/* a list box reads centred on the phone like every other card */
@media (max-width:620px){
  .listbox{text-align:center}
  .listbox .intro{text-align:center}
  .listbox .chk{display:inline-block;text-align:left}
}
/* a wide table inside an article scrolls instead of crushing its columns, and says so only when it scrolls */
.prose .tbl,.post__body .tbl{min-width:38rem}
.tblwrap::after{content:none}
.tblwrap[data-scrollable]::after{content:"Scroll sideways to read the whole table";display:block;margin:.6rem 0 0;font-size:.82rem;color:var(--muted-2);text-align:center}
/* the contents box on the phone uses our own chevron, not the browser's black triangle */
.toc-m summary{list-style:none;position:relative;padding-right:2rem}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"";position:absolute;right:.35rem;top:.35rem;width:9px;height:9px;border-right:2px solid var(--violet-deep);border-bottom:2px solid var(--violet-deep);transform:rotate(45deg);transition:transform .22s var(--ease)}
.toc-m[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
@media (min-width:901px){
  /* a hero with no picture: the booking box fills the right half instead of leaving it empty */
  .phero--solo .phero__in{grid-template-columns:1.05fr .95fr;grid-template-areas:"eyebrow form" "h1 form" "copy form";column-gap:var(--s7)}
  .phero--solo .hero__form{align-self:center;margin-top:0}
  .phero--solo .hero__copy{padding-bottom:var(--s5)}
}
.hero__h1wrap{margin-bottom:.2rem}
/* in a narrow column a lone last card fills the row instead of leaving a gap */
.duo__txt .mini>:last-child:nth-child(odd):not(:only-child){grid-column:1/-1}
/* on a narrow phone the date line stays inside its card (found at 320px and at 1.3x text) */
@media (max-width:620px){
  .pcard__end{justify-content:center}
  .pcard__b,.feat__b{min-width:0}
  .meta{justify-content:center;max-width:100%}
}
/* a hero with no picture puts the booking box in its right half, so the box uses its stacked layout there
   (21 Sep: in its one-row layout the labels broke one word per line and the fields shrank to slivers) */
@media (min-width:901px){
  .phero--solo .qform{grid-template-columns:minmax(0,1fr);row-gap:.85rem;padding:1.5rem 1.6rem 1.4rem}
  .phero--solo .qform__k{grid-column:1 / -1}
  .phero--solo .qform .btn{width:100%}
  .phero--solo .qform__note,.phero--solo .qform__ok{grid-column:1 / -1}
}

/* 22 Sep (owner): the booking box and the Urdu card ran into each other. Each gets a clear edge and a tighter
   shadow that stays under it, and the Urdu section sits further below the hero. */
.hero__form .qform{border:1px solid var(--hair);box-shadow:0 1px 2px rgba(25,20,40,.06),0 14px 30px -16px rgba(25,20,40,.34)}
.urdu{border-color:rgba(91,59,232,.16);box-shadow:0 1px 2px rgba(25,20,40,.05),0 12px 28px -18px rgba(25,20,40,.26)}
/* the hero crops what hangs below it (overflow:hidden, for its glow), which cut the booking box's shadow off in a
   straight line; the hero now ends 2rem below the box so the whole shadow shows */
.hero--book .hero__in,.phero--book .phero__in{padding-bottom:2rem}
/* 22 Sep: an Urdu card with a single line and no heading reads as one statement, set a size larger */
.urdu--solo .ur-p{font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:2.1;margin:0}
/* two cards of very different length keep their own heights instead of leaving one half empty */
.qgrid--top{align-items:start}

/* ------------------------------------------------ 22 Sep (owner): cards looked plain until hovered, site-wide.
   Every card now has a hairline edge and a resting shadow (--sh-1, strengthened above); hover still lifts it. */
.rcard,.qcard,.panel,.pcard,.hub,.toc,.pull,.author,.svc,.tcard,.mini__i,.toc-m,.listbox,.relcard,.faq details,.mapbox,.feat,.rail__in{
  border:1px solid rgba(25,20,40,.09)}
.tcard{box-shadow:var(--sh-1)}
.qcard--map{border:1px solid rgba(25,20,40,.09)}

/* the booking box: each field has a visible outline so it reads as a place to tap, a darker edge on hover and a
   violet ring on focus; the label never shrinks under its own text (it was cut to "BOOK YOUR VISI") */
.qform__f input,.qform__f select{background:#fff;border:1.5px solid #A9ACC5;box-shadow:inset 0 1px 2px rgba(25,20,40,.05)}
.qform__f input:hover,.qform__f select:hover{border-color:#8084A3}
.qform__f input:focus,.qform__f select:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(91,59,232,.15);background:#fff}
.qform__f input::placeholder{color:#8C8FA8;opacity:1}
.qform__k{min-width:max-content}
/* 22 Sep (owner): the "Treatment at the clinic" card stretched its icon into a wide bar (the rule meant for the text
   column also caught the icon tile). The icon is a square tile again and the arrow sits in a round button. */
.relcard{padding:1.1rem 1.25rem;gap:1.1rem}
.relcard>.ictile{flex:none;width:3rem;height:3rem;display:grid;place-items:center}
.relcard>span:not(.ictile){flex:1;min-width:0}
.relcard>svg{flex:none;width:2.4rem;height:2.4rem;padding:.62rem;border-radius:50%;background:var(--violet-wash);color:var(--violet-deep);transition:background .2s var(--ease),color .2s var(--ease)}
.relcard:hover>svg{background:var(--violet);color:#fff}

/* 22 Sep (owner): the clean hero (Mounjaro first). The heading breaks into two even lines and keeps its own space
   above the paragraph now that no grey line sits under it. */
.phero--clean .hero__h1{text-wrap:balance}
.phero--clean .hero__h1wrap .hero__h1{margin-bottom:var(--s4)}
/* About: qualifications grouped (23 Sep, owner) - one card, three columns on desktop, stacked on phones */
.prose-sec:has(.creds){max-width:none}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);margin:var(--s4) 0 0}
.creds__g{background:var(--surface);padding:1.6rem 1.7rem}
.creds__k{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .8rem}
.creds__g ul{list-style:none;margin:0;padding:0}
.creds__g li{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.4;margin:0;padding:.5rem 0;border-top:1px solid var(--hair-2)}
.creds__g li:first-child{border-top:0;padding-top:0}
@media (max-width:900px){
  .creds{grid-template-columns:1fr}
  .creds__g{padding:1.2rem 1.25rem}
}
.creds__h{margin:0}
.creds__g li::before,.creds__g li::after{content:none;display:none}
.creds__g li{padding-left:0}
/* credentials rail, 23 Sep (owner): one-line values, a readable label; on phones a label | value list
   instead of a 2x2 grid of narrow centred cells */
.rail--4 .rail__i{padding:1.5rem 1.5rem}
.rail--4 .readout__k{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ink-3);margin-bottom:.5rem}
.rail--4 .readout__v--txt{font-size:1.12rem}
.rail--4 .readout__n{font-size:.86rem;margin-top:.4rem}
@media (max-width:620px){
  .rail--4 .rail__in{grid-template-columns:1fr}
  .rail--4 .rail__i{display:grid;grid-template-columns:6.6rem minmax(0,1fr);column-gap:.9rem;text-align:left;padding:1rem 1.15rem}
  .rail--4 .readout__k{grid-row:1 / span 2;margin:0;padding-top:.28rem;font-size:.68rem}
  .rail--4 .readout__v--txt{font-size:1.02rem}
  .rail--4 .readout__n{margin-top:.2rem;font-size:.82rem}
}
/* credentials rail, 23 Sep (owner): each cell reads as its own section - a tinted tile with a soft shadow
   inside the white card, and a separator line between the label and the value */
.rail--4 .rail__in{background:var(--surface);gap:.7rem;padding:.7rem;overflow:visible}
.rail--4 .rail__i{background:var(--bg);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair),0 8px 18px -12px rgba(25,20,40,.22);padding:1.15rem 1.25rem 1.25rem}
.rail--4 .readout__k{padding-bottom:.6rem;border-bottom:1px solid var(--hair);margin-bottom:.75rem}
@media (max-width:620px){
  .rail--4 .rail__in{gap:.55rem;padding:.55rem}
  .rail--4 .rail__i{padding:.9rem 1rem;column-gap:.85rem}
  .rail--4 .readout__k{padding:.28rem .85rem 0 0;margin:0;border-bottom:0;border-right:1px solid var(--hair);align-self:stretch}
}
@media (max-width:620px){
  .rail--4 .rail__i{grid-template-columns:7.4rem minmax(0,1fr)}
  .rail--4 .readout__k{overflow-wrap:normal;word-break:keep-all;letter-spacing:.05em;font-size:.64rem}
}
@media (max-width:360px){
  .rail--4 .rail__i{grid-template-columns:1fr}
  .rail--4 .readout__k{grid-row:auto;border-right:0;border-bottom:1px solid var(--hair);padding:0 0 .5rem;margin-bottom:.6rem}
}

/* ==========================================================================
   PHASE 2 COPY PAGES (23 Sep 2026): blocks the copy files add (Website/src/COPY-SCHEMA.md).
   Owner rules kept: one font, no side accent lines, no numbers on cards or steps, visible card edges,
   cards centred on phones.
   ========================================================================== */
.cp-prose{max-width:46rem;margin:var(--s6) auto 0}
.cp-prose p{color:var(--ink-2);line-height:1.7}
.cp-prose .note{margin-top:var(--s4)}
.cp-sec>p:first-of-type{color:var(--ink-2)}
.cp-list{margin:0 0 1.1rem;padding-left:1.25em}
.cp-list li{margin-bottom:.5em;color:var(--ink-2);line-height:1.6}
.cp-list li::marker{color:var(--violet)}
.note>span{min-width:0}
.sec .wrap>.tblwrap{max-width:62rem;margin:var(--s6) auto 0}
.cp-tbl{border:1px solid rgba(25,20,40,.09)}
.cp-tblfig{max-width:62rem;margin:var(--s6) auto 0}
.cp-tblfig>figcaption{font-weight:700;color:var(--ink);margin:0 0 .7rem}
.duo__txt .cp-tblfig{margin-top:var(--s5)}
.cp-wfig{max-width:46rem}
.cp-steps{list-style:none;padding:0;margin:var(--s6) auto 0;max-width:46rem;display:grid;gap:.8rem}
.duo__txt .cp-steps{margin-top:var(--s5)}
.cp-step{background:var(--surface);border:1px solid rgba(25,20,40,.09);border-radius:var(--r);padding:1.15rem 1.35rem;box-shadow:var(--sh-1)}
.cp-step h3{font-size:1.05rem;letter-spacing:-.02em;margin:0 0 .35rem}
.cp-step p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.55}
.cp-rev{border:1px solid rgba(25,20,40,.09)}   /* the same hairline edge as every card (22 Sep) */
.cp-links{max-width:62rem;margin:var(--s6) auto 0}
.duo__txt .cp-links{margin-top:var(--s5)}
.cp-links__h{font-size:1.1rem;margin:0 0 .8rem}
.cp-links ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,19rem));justify-content:center;gap:.7rem}
.cp-links__h{text-align:center}
.duo__txt .cp-links ul{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.duo__txt .cp-links__h{text-align:left}
.cp-links li{margin:0}
.cp-links a{display:flex;flex-direction:column;gap:.2rem;height:100%;background:var(--surface);border:1px solid rgba(25,20,40,.09);border-radius:var(--r);padding:.95rem 1.15rem;box-shadow:var(--sh-1);color:var(--ink);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.cp-links a:hover{border-color:var(--violet);transform:translateY(-2px);color:var(--ink)}
.cp-links__t{font-weight:700;line-height:1.3}
.cp-links__d{font-size:.92rem;color:var(--muted);line-height:1.45}
.cp-rel__h{font-size:1.35rem;text-align:center;margin:0 0 var(--s4)}
.cp-fig{margin:var(--s5) 0 0}
.cp-fig img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.cp-fig figcaption,.wide-fig figcaption,.cp-cap{font-size:.86rem;color:var(--muted);text-align:center;margin:.6rem 0 0}
.wide-fig figcaption{background:var(--surface);margin:0;padding:.7rem 1rem}
.cp-map{margin-top:var(--s6)}
.cp-plist{margin-top:var(--s6)}
.cp-feat{margin-top:var(--s7)}
.cp-feat h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.4rem 0 .8rem}
.cp-feat h3 a{color:var(--ink)}
.cp-rev__rating{text-align:center;font-weight:700;color:var(--ink);margin:var(--s5) 0 0}
.cp-revs{columns:3 17rem;column-gap:1rem;margin-top:var(--s5)}
.cp-rev{break-inside:avoid;display:inline-block;width:100%;margin:0 0 1rem;background:var(--surface);border-radius:var(--r);padding:1.15rem 1.3rem;box-shadow:var(--sh-1)}
.cp-rev__stars{display:flex;gap:2px;color:var(--amber);margin:0 0 .55rem}
.cp-rev__q{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.6;overflow-wrap:anywhere}
.cp-rev__q p{margin:0 0 .5rem}
.cp-rev__q p:last-child{margin:0}
.cp-rev__by{margin-top:.7rem;font-size:.88rem;color:var(--muted)}
.cp-rev__by span{font-weight:700;color:var(--ink)}
.cp-more{margin-top:.2rem}
.cp-more>summary{list-style:none;cursor:pointer;display:table;margin:0 auto;font-weight:700;font-size:.95rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--hair);border-radius:var(--pill);padding:.75rem 1.4rem;box-shadow:var(--sh-1)}
.cp-more>summary::-webkit-details-marker{display:none}
.cp-more>summary:hover{border-color:var(--violet)}
.cp-more[open]>summary{margin-bottom:.4rem}
@media (max-width:620px){
  .cp-step,.cp-links a,.cp-rev{text-align:center}
  .cp-links a{align-items:center}
  .cp-rev__stars{justify-content:center}
  .cp-revs{columns:1}
  .cp-links ul{grid-template-columns:1fr}
}
/* click-to-load map (23 Sep): a static card until the visitor asks for the Google map */
.mapcard{margin-top:var(--s5);border-radius:var(--r-xl);overflow:hidden;background:var(--violet-wash);border:1px solid rgba(25,20,40,.09);min-height:260px;display:flex;align-items:center;justify-content:center;text-align:center}
.mapcard__b{padding:2rem 1.25rem;max-width:34rem}
.mapcard__pin{display:inline-flex;width:3rem;height:3rem;border-radius:50%;align-items:center;justify-content:center;background:var(--surface);color:var(--violet);box-shadow:var(--sh-1);margin-bottom:.75rem}
.mapcard__name{font-weight:700;margin:0 0 .25rem}
.mapcard__addr{margin:0 0 .5rem;overflow-wrap:anywhere}
.mapcard__note{font-size:.875rem;opacity:.75;margin:0 0 1rem}
.mapcard .btnrow{justify-content:center}
.mapcard.is-loaded{display:block;background:none;border:0}
.mapcard.is-loaded iframe{display:block;width:100%;height:420px;border:0}
.mapcard__dir{display:flex;justify-content:center;padding:var(--s4) 0 0}
.qcard--map .mapcard{margin-top:0;height:100%;min-height:360px;border:0;border-radius:0}
@media (max-width:640px){.mapcard.is-loaded iframe{height:320px}.mapcard .btnrow .btn{width:100%;justify-content:center}}

/* ==========================================================================
   Design pass, 24 Sep 2026 (owner: the home page read as bare text and plain boxes).
   Icon link cards, tinted bands on alternate sections, prose split, home index panel.
   One font, no side accent lines, no numbers on cards, visible edges, centred on phones.
   ========================================================================== */
.sec--tint{background:var(--bg-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec--tint+.sec-tight,.sec--tint+.sec{margin-top:0}
.svc{border:1px solid rgba(25,20,40,.08)}
.cp-links--ic{max-width:none}
.cp-links--ic .cp-links__h{font-size:1.2rem;margin:0 0 var(--s4)}
.lk-big{margin-top:0;margin-bottom:var(--s4)}
.lk-big.svcs--2{max-width:52rem;margin-left:auto;margin-right:auto}
.cp-links .lgrid,.lgrid{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.lgrid>li{margin:0;flex:0 1 calc((100% - 1.6rem)/3);min-width:0}
.cp-links a.lcard,.lcard{display:flex;flex-direction:row;align-items:center;gap:.85rem;height:100%;background:var(--surface);border:1px solid rgba(25,20,40,.09);border-radius:var(--r);padding:.8rem 1rem;box-shadow:var(--sh-1);color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(91,59,232,.35);color:var(--ink)}
.lcard .ictile{flex:none}
.lcard__t{font-weight:700;line-height:1.3;flex:1 1 auto;min-width:0}
.lcard__go{flex:none;color:var(--violet);display:inline-flex;transition:transform .2s var(--ease)}
.lcard:hover .lcard__go{transform:translateX(3px)}
.lgrid--4>li{flex-basis:calc((100% - 2.4rem)/4)}
.duo__txt .lgrid>li{flex-basis:calc((100% - .8rem)/2)}
/* prose section: heading and answer on one side, the paragraphs in a card on the other */
.cp-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);align-items:start}
.cp-split__h h2{margin:0}
.cp-split__h .lead{margin-top:1.05rem;margin-bottom:0}
.cp-split__h .eyebrow{margin-bottom:.9rem}
.cp-split__b{background:var(--surface);border:1px solid rgba(25,20,40,.08);border-radius:var(--r-lg);padding:1.7rem 1.9rem;box-shadow:var(--sh-1)}
.cp-split__b>:last-child{margin-bottom:0}
.cp-split__b p{color:var(--ink-2);line-height:1.7}
.cp-split__b .note{margin-top:var(--s4)}
.cp-split__b .cp-links,.cp-split__b .qgrid,.cp-split__b .cp-steps{margin-top:var(--s4)}
/* home: why panel points */
.spot__lead{color:#ECEAF7!important;font-size:1.1rem;line-height:1.6;max-width:44rem}
.wcard--pt{display:flex;flex-direction:column;gap:.9rem}
.wcard--pt p{color:#EAE7F6;font-size:.98rem;line-height:1.6}
.spot a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.spot a:hover{color:#fff;text-decoration-color:#fff}
/* home: diabetes split + links */
.duo--home{margin-bottom:var(--s7)}
.duo--home .duo__pic img{aspect-ratio:5/4}
.duo--home .lead{margin-bottom:var(--s4)}
.duo__txt>.eyebrow{margin-bottom:.9rem}
.hm-note{max-width:46rem;margin:var(--s6) auto 0}
.hm-note .note{margin:0}
/* home: the hormone index, one row per area with its pages as chips */
.hidx{margin:var(--s6) auto 0;max-width:62rem;background:var(--surface);border:1px solid rgba(25,20,40,.08);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:.4rem 1.6rem}
.hidx__r{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--hair-2)}
.hidx__r:first-child{border-top:0}
.hidx__k{display:flex;align-items:center;gap:.7rem;margin:0;font-weight:700;color:var(--ink)}
.hidx__cs{display:flex;flex-wrap:wrap;gap:.5rem}
.hidx__c{display:inline-flex;align-items:center;padding:.42rem .85rem;border-radius:var(--pill);background:var(--violet-wash);color:var(--violet-deep);font-weight:600;font-size:.92rem;line-height:1.3;transition:background .2s var(--ease),color .2s var(--ease)}
.hidx__c:hover{background:var(--violet);color:#fff}
/* home: first visit points */
.ipts{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.ipts li{display:flex;gap:1rem;align-items:flex-start;margin:0}
.ipts .ictile{flex:none}
.ipts p{margin:0;color:var(--ink-2);line-height:1.65}
/* home: about */
.bio .lead{margin-bottom:var(--s4)}
.bio>div>.eyebrow{margin-bottom:.9rem}
.bio__q{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);border:1px solid rgba(25,20,40,.08);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--sh-1);margin:0 0 var(--s4)}
.bio__q p{margin:0;display:flex;flex-direction:column;gap:.15rem;color:var(--ink-2)}
.bio__q b{color:var(--ink)}
@media (max-width:1080px){
  .lgrid>li,.lgrid--4>li{flex-basis:calc((100% - .8rem)/2)}
}
@media (max-width:900px){
  .cp-split{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .hidx__r{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .duo--home{margin-bottom:var(--s6)}
}
@media (max-width:620px){
  .lgrid>li,.lgrid--4>li,.duo__txt .lgrid>li{flex-basis:calc((100% - .6rem)/2)}
  .cp-links .lgrid,.lgrid{gap:.6rem}
  .cp-links a.lcard,.lcard{flex-direction:column;justify-content:flex-start;text-align:center;gap:.5rem;padding:.9rem .6rem}
  .lcard__t{flex:0 1 auto;font-size:.95rem}
  .lcard__go{display:none}
  .cp-split__h{text-align:center}
  .cp-split__h .eyebrow{margin-left:auto;margin-right:auto}
  .cp-split__b{padding:1.3rem 1.2rem}
  .ipts li{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
  .hidx{padding:.4rem 1.1rem}
  .hidx__r{text-align:center}
  .hidx__k,.hidx__cs{justify-content:center}
  .wcard--pt{align-items:center;text-align:center}
  .spot__head{text-align:center}
  .bio__q{flex-direction:column;align-items:center;text-align:center}
  .bio>div{text-align:center}
  .bio>div>.eyebrow{margin-left:auto;margin-right:auto}
  .duo--home .duo__txt{text-align:center}
  .duo--home .duo__txt>.eyebrow{margin-left:auto;margin-right:auto}
}
.plist+.cp-prose{text-align:center}
.cp-prose--panel{max-width:52rem;background:var(--surface);border:1px solid rgba(25,20,40,.08);border-radius:var(--r-lg);padding:1.6rem 1.9rem;box-shadow:var(--sh-1)}
.cp-prose--panel>:last-child{margin-bottom:0}
.cp-links--more .lcard__t,.cp-links--rel .lcard__t{font-size:.97rem}
@media (max-width:620px){.cp-prose--panel{padding:1.3rem 1.2rem}}
.qgrid+.cp-prose:not(.cp-prose--panel),.cp-links+.cp-prose:not(.cp-prose--panel){text-align:center}
@media (max-width:620px){.qcard--link{align-items:center}}
.wgrid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:54rem}
.spot__more{position:relative;margin:var(--s5) 0 0;color:#E4E1F3!important;font-size:.98rem}
@media (max-width:620px){.wgrid--2{grid-template-columns:minmax(0,1fr)}.spot__more{text-align:center}}

/* 24 Sep: on phones a wide table keeps readable columns and scrolls inside its own box (no word per line) */
@media (max-width:620px){.tblwrap .tbl{min-width:560px}}

/* ------------------------------------------------------------ blog index (owner, 27 Sep)
   The topic navigation reads as a tidy row of pills rather than a run of middot-separated links.
   The paragraph carries the links inline with a middot between each; setting the paragraph to
   font-size:0 collapses the middots and the spaces to nothing, so only the pills show, and each pill
   sets its own size back. */
#topics .cp-prose{max-width:58rem;margin-top:var(--s5)}
#topics .cp-prose p{font-size:0;line-height:0;text-align:center;margin:0}
#topics .cp-prose a{display:inline-block;font-size:.92rem;font-weight:600;line-height:1.2;color:var(--ink-2);background:var(--surface);border:1px solid var(--hair);border-radius:var(--pill);padding:.62rem 1.15rem;margin:.32rem;box-shadow:var(--sh-1);transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
#topics .cp-prose a:hover{color:#fff;background:var(--violet);border-color:var(--violet)}

/* a pull quote inside an article: a soft panel, never a coloured stripe down one side */
.prose blockquote{margin:var(--s6) 0;background:var(--bg-2);border-radius:var(--r);padding:1.3rem 1.6rem;color:var(--ink-2);font-size:1.06rem;line-height:1.65}
.prose blockquote>:last-child{margin-bottom:0}

/* phone: the topic pills stay a comfortable tap target */
@media (max-width:900px){
  #topics .cp-prose a{font-size:.95rem;padding:.85rem 1.2rem;margin:.3rem}
}

/* phone: the featured post is a slightly larger normal card, not a full-screen hero (owner, 27 Sep).
   Desktop is untouched. The photo is capped and the title, excerpt, meta and button sit at normal
   card sizes so the card does not fill the viewport and the topic sections start higher up. */
@media (max-width:680px){
  .cp-feat .feat__pic{aspect-ratio:16/9;max-height:200px}
  .cp-feat .feat__b{padding:1.25rem 1.35rem 1.4rem}
  .cp-feat h3{font-size:1.2rem;line-height:1.28;margin:.1rem 0 .5rem}
  .cp-feat .feat__b>p{font-size:.95rem;line-height:1.5;color:var(--muted);margin:0 0 1rem;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .cp-feat .feat__b .meta{margin:.1rem 0 1rem}
  .cp-feat .feat__b .btn{margin-top:.2rem}
}