/**
 * About page styles.
 *
 * The approved design was supplied as Tailwind utility classes from the play CDN,
 * plus the Material Symbols icon font. Both are replaced here: the design is
 * reproduced as plain CSS and the icons are inline SVG, so the page costs two
 * font requests rather than a 400KB JavaScript compiler and an icon font.
 *
 * Loaded on the About page only (see dmd_assets()). Every selector is prefixed
 * .ab- and scoped under body.dmd-about, so it cannot reach the shared header,
 * footer, homepage, or the procedure pages.
 *
 * @package Dr_Muhibullah_Dawar
 */

body.dmd-about{
  --ab-950:#07131f;
  --ab-900:#0b1b2b;
  --ab-800:#0f2438;
  --ab-700:#183654;
  --ab-accent:#146583;
  --ab-accent-hover:#0f4e67;
  --ab-ink:#334155;             /* body copy - was eight loose literals */
  --ab-sky-tint:#eaf4f9;        /* accent on a light ground */
  --ab-gold:#a9874c;            /* the mark this site uses on hover */
  --ab-hover-ground:#faf7f1;    /* the same warm cream as the homepage */
  --ab-hover-line:#c2a877;
  --ab-wa:#17664e;              /* the homepage's WhatsApp green, not a second one */
  --ab-sky:#eaf4f9;
  --ab-line:#e2e8f0;
  --ab-muted:#64748b;
  --ab-text:#1e293b;
  --ab-bg:#f8fafd;
  --ab-slate-50:#f8fafc;
  --ab-slate-100:#f1f5f9;
  --ab-slate-300:#cbd5e1;
  --ab-slate-400:var(--ab-muted);
  --ab-slate-600:#475569;
  --ab-display:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  --ab-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#fff;
}

.ab{font-family:var(--ab-sans);color:var(--ab-text);-webkit-font-smoothing:antialiased}
.ab ::selection{background:var(--ab-accent);color:#fff}
.ab-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.ab-wrap--narrow{max-width:820px}
.ab h1,.ab h2,.ab h3,.ab h4{font-family:var(--ab-display);color:var(--ab-900);font-weight:600;letter-spacing:-.02em;margin:0}
.ab p{margin:0}
.ab a{color:inherit;text-decoration:none}
.ab ul{list-style:none;margin:0;padding:0}
.ab svg{flex:none}

/* section heads */
.ab-sec{padding:56px 0}
.ab-sec--tint{background:rgba(248,250,252,.6);border-top:1px solid var(--ab-line);border-bottom:1px solid var(--ab-line)}
.ab-sec--line{border-top:1px solid var(--ab-line)}
.ab-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--ab-line)}
.ab-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ab-accent)}
.ab-head h2{font-size:28px;margin-top:4px}
.ab-head__note{font-size:13.5px;line-height:1.7;color:var(--ab-muted);max-width:44ch}

/* ---------- hero ---------- */
.ab-hero{padding:48px 0}
.ab-crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ab-slate-400);margin-bottom:24px}
.ab-crumb a:hover{color:var(--ab-slate-600)}
.ab-crumb b{font-weight:500;color:var(--ab-ink)}
.ab-hero__grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.ab-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ab-muted)}
.ab-eyebrow::before{content:"";width:24px;height:1.5px;background:var(--ab-slate-400)}
.ab-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.18;margin:20px 0 0}
.ab-prose{margin-top:22px;display:grid;gap:16px;font-size:15.5px;line-height:1.75;color:var(--ab-slate-600)}
.ab-byline{margin-top:22px;padding-top:14px;border-top:1px solid var(--ab-slate-100);display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--ab-muted)}
.ab-byline strong{color:var(--ab-ink);font-weight:600}
.ab-byline span.sep{color:var(--ab-slate-300)}
.ab-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:8px;font-size:14px;font-weight:600;transition:background-color .18s,border-color .18s,color .18s}
.ab-btn svg{width:17px;height:17px}
.ab-btn--accent{background:var(--ab-accent);color:#fff;border:1px solid var(--ab-accent);box-shadow:0 1px 2px rgba(11,27,43,.08)}
.ab-btn--accent:hover{background:var(--ab-accent-hover);border-color:var(--ab-accent-hover)}
.ab-btn--plain{background:#fff;border:1px solid var(--ab-slate-300);color:var(--ab-ink)}
.ab-btn--plain svg{color:var(--ab-wa)}
.ab-btn--plain:hover{background:var(--ab-hover-ground);border-color:var(--ab-hover-line)}

/* portrait */
.ab-portrait{display:flex;justify-content:center}
.ab-portrait__frame{position:relative;width:100%;max-width:420px;padding:16px;border-radius:24px;
  border:1px solid rgba(226,232,240,.8);box-shadow:0 1px 2px rgba(11,27,43,.05);
  background:linear-gradient(to top right,rgba(224,242,254,.5),var(--ab-slate-50) 55%,rgba(255,251,235,.4))}
.ab-portrait__img{position:relative;overflow:hidden;border-radius:16px;background:#fff;border:1px solid rgba(226,232,240,.6)}
.ab-portrait__img img{display:block;width:100%;height:auto}
.ab-portrait__badge{position:absolute;left:16px;right:16px;bottom:16px;padding:14px;border-radius:12px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(4px);border:1px solid rgba(226,232,240,.7);
  box-shadow:0 1px 2px rgba(11,27,43,.06)}
.ab-portrait__badge b{display:block;font-family:var(--ab-sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ab-accent)}
.ab-portrait__badge span{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--ab-900)}

/* ---------- qualification badges ---------- */
.ab-quals{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab-qual{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;padding:20px;border:1px solid var(--ab-line);border-radius:12px;text-align:center;
  transition:border-color .18s}
.ab-qual:hover{border-color:var(--ab-hover-line)}
.ab-qual__icon{width:40px;height:40px;border-radius:50%;background:var(--ab-sky-tint);color:var(--ab-accent);display:flex;align-items:center;justify-content:center}
.ab-qual__icon svg{width:20px;height:20px}
.ab-qual b{display:block;font-family:var(--ab-sans);font-size:14px;font-weight:700;color:var(--ab-900)}
.ab-qual span:not(.ab-qual__icon){display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--ab-muted)}

/* ---------- quote ---------- */

/* ---------- duo cards ---------- */
.ab-duo{display:grid;grid-template-columns:1fr;gap:24px}
.ab-card{background:#fff;padding:28px;border:1px solid var(--ab-line);border-radius:16px;box-shadow:0 1px 2px rgba(11,27,43,.04)}
.ab-card h3{font-size:20px;padding-bottom:10px;border-bottom:1px solid var(--ab-slate-100);margin-bottom:16px}
.ab-card p{font-size:14px;line-height:1.75;color:var(--ab-ink)}
.ab-card p+p{margin-top:14px}

/* ---------- philosophy ---------- */

/* ---------- procedures grid ---------- */
.ab-procs{display:grid;grid-template-columns:1fr;gap:20px}
.ab-proc{display:block;position:relative;padding:22px;border-radius:12px;background:#fff;border:1px solid var(--ab-line);
  box-shadow:0 1px 2px rgba(11,27,43,.04);transition:border-color .18s,transform .18s}
.ab-proc:hover{border-color:var(--ab-hover-line);transform:translateY(-2px)}
.ab-proc b{display:block;font-family:var(--ab-sans);font-size:14px;font-weight:700;color:var(--ab-accent);margin-bottom:6px}
.ab-proc span{display:block;font-size:12.5px;line-height:1.65;color:var(--ab-slate-600)}

/* ---------- cities ---------- */
.ab-cities{display:grid;grid-template-columns:1fr;gap:24px}
.ab-city{background:#fff;border:1px solid var(--ab-line);border-radius:16px;padding:26px;
  box-shadow:0 1px 2px rgba(11,27,43,.04);display:flex;flex-direction:column;justify-content:space-between}
.ab-city h3{font-size:20px}
.ab-city__area{margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ab-slate-400)}
.ab-city__addr{margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--ab-slate-600)}
.ab-city__days{margin-top:16px;padding-top:12px;border-top:1px solid var(--ab-slate-100);font-size:12px}
.ab-city__label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ab-slate-400);margin-bottom:8px}
.ab-city__row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ab-ink);padding:3px 0}
.ab-city__row b{font-family:var(--ab-sans);font-weight:600;color:var(--ab-900)}
.ab-city__foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--ab-slate-100);font-size:12px;color:var(--ab-slate-400)}
.ab-city__tag{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--ab-sky-tint);color:var(--ab-accent);font-size:11px;font-weight:600;letter-spacing:.04em}

/* ---------- callout banner ---------- */

/* ---------- trust pillars & partners ---------- */
.ab-lead{max-width:70ch;margin-bottom:36px;font-size:14px;line-height:1.75;color:var(--ab-slate-600)}

/* ---------- closing appointment block ---------- */
.ab-appt{padding:32px;border-radius:16px;border:1px solid var(--ab-line);background:#fff;
  box-shadow:0 1px 2px rgba(11,27,43,.04);text-align:center}
.ab-appt h3{font-size:26px;margin:10px 0 14px}
.ab-appt p{font-size:14px;line-height:1.75;color:var(--ab-slate-600);max-width:60ch;margin:0 auto}
.ab-appt__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .ab-quals{grid-template-columns:repeat(3,1fr)}
  .ab-duo{grid-template-columns:1fr 1fr}
  .ab-procs{grid-template-columns:1fr 1fr}
  
  .ab-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  
  
  
  
  
}
@media (min-width:1024px){
  .ab-sec{padding:64px 0}
  .ab-hero{padding:56px 0}
  .ab-hero__grid{grid-template-columns:7fr 5fr;gap:48px}
  .ab-quals{grid-template-columns:repeat(6,1fr)}
  .ab-procs{grid-template-columns:repeat(4,1fr)}
  .ab-cities{grid-template-columns:repeat(3,1fr)}
  
}
@media (prefers-reduced-motion:reduce){
  .ab *,.ab *::before,.ab *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =========================================================================
   Hover and focus
   -------------------------------------------------------------------------
   This page had nine hover rules against the homepage's fifty-two, and no
   :focus-visible at all - so a keyboard user got nothing back from any card,
   link or button on it.

   The vocabulary is the homepage's, so the two pages behave alike: a surface
   that is not a link warms to the same cream and takes the gold hairline; a
   real link may also move its text to the accent. Nothing that is not
   clickable changes text colour, and nothing that is not a box lifts.
   ========================================================================= */

.ab-qual,.ab-card,.ab-pillar,.ab-city,.ab-quote{
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease}
.ab-qual:hover,.ab-card:hover,.ab-pillar:hover,.ab-city:hover,
.ab-qual:focus-within,.ab-card:focus-within,.ab-pillar:focus-within,.ab-city:focus-within{
  background:var(--ab-hover-ground);border-color:var(--ab-hover-line)}

/* real links: these are boxes and they do go somewhere, so they lift too */
.ab-proc,.ab-partner{
  transition:background-color .28s ease,border-color .28s ease,
             box-shadow .28s ease,transform .28s ease}
.ab-proc:hover,.ab-partner:hover,.ab-proc:focus-within,.ab-partner:focus-visible{
  background:var(--ab-hover-ground);border-color:var(--ab-hover-line);
  transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(11,27,43,.35)}
.ab-proc h3,.ab-proc strong,.ab-partner strong{transition:color .24s ease}
.ab-proc:hover h3,.ab-proc:hover strong,.ab-partner:hover strong{color:var(--ab-accent)}

/* buttons keep their own colour logic; they only needed the focus half */
.ab-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,
        transform .2s ease,box-shadow .2s ease}
.ab-btn:hover{transform:translateY(-1px)}
.ab-btn:focus-visible,.ab-banner__btn:focus-visible,.ab-banner__wa:focus-visible,
.ab-crumb a:focus-visible,.ab-banner__phone a:focus-visible{
  outline:2px solid var(--ab-accent);outline-offset:3px;border-radius:6px}
.ab-proc:focus-within,.ab-partner:focus-visible{
  outline:2px solid var(--ab-accent);outline-offset:3px}

/* on the navy banner the cream would disappear, so it warms with white instead
   and the gold hairline carries the same idea against the dark ground */

@media(prefers-reduced-motion:reduce){
  .ab-proc:hover,.ab-partner:hover,.ab-btn:hover,
  .ab-banner__btn:hover,.ab-banner__wa:hover{transform:none!important}
}

.ab-btn .ab-wa{width:17px;height:17px;flex:none}

/* ---- buttons must out-rank `.ab a` -------------------------------------
   `.ab a{color:inherit}` is (0,0,1,1); a single-class button rule is (0,0,1,0)
   and loses to it, so every colour these buttons set for themselves was being
   discarded and they inherited body text instead. On the accent fill that
   produced dark navy on dark teal - roughly 2.3:1, and unreadable.

   Qualifying each with `.ab` takes them to (0,0,2,0), which wins on class
   count, and states the colour once in the place that actually applies. */

.ab .ab-btn--accent{color:#fff}
.ab .ab-btn--plain{color:var(--ab-ink)}
.ab .ab-btn--plain svg{color:var(--ab-wa)}

.ab .ab-crumb a{color:var(--ab-muted)}
.ab .ab-crumb a:hover{color:var(--ab-accent)}
.ab .ab-proc:hover h3,.ab .ab-proc:hover strong,.ab .ab-partner:hover strong{color:var(--ab-accent)}

.ab .ab-qual{align-items:center}
.ab .ab-qual__icon{display:flex;align-items:center;justify-content:center;
  margin-left:auto;margin-right:auto;flex:none}

/* ---- about: three practice areas, and the sub-heading above the bodies ----
   .ab-procs was built for a long directory of eighteen small cards, so it packs
   them tight. Three area cards carrying a sentence each need room and an equal
   share of the row, hence the explicit three-column track. */

.ab-procs--areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-procs--areas .ab-proc{display:flex;flex-direction:column;gap:10px}
.ab-procs--areas .ab-proc span{font-size:13.5px;line-height:1.65;color:var(--ab-slate-600)}
.ab-procs--areas .ab-proc em{margin-top:auto;font-style:normal;font-size:13px;
  font-weight:600;color:var(--ab-accent)}
/* The call to action is the link; its hit area covers the card. */
.ab-procs .ab-proc .ab-proc__link{color:inherit;text-decoration:none}
.ab-proc__link::after{content:"";position:absolute;inset:0;border-radius:inherit}

.ab-sec .ab-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

@media(max-width:1023px){
  .ab-procs--areas{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ab-procs--areas{grid-template-columns:1fr}
}