/* =========================================================
   Dr. Abdeen Shaker — design system.
   Implements BRAND_IDENTITY.md v1.1: navy and white, gold as a rationed
   credential accent, IBM Plex Sans across both scripts.
   ========================================================= */
:root{
  /* colour — BRAND_IDENTITY.md §1. Navy and white carry the identity;
     gold is the rationed credential accent and appears in four places only. */
  --navy:#1B4F72; --navy-deep:#153F5B; --blue:#2874A6;
  --blue-soft:#8CB6D4; --blue-pale:#A8C4D9;
  --white:#FFFFFF; --tint:#EBF5FB;
  --ink:#24323F; --muted:#5F6C7B; --line:#DCE5EC;
  /* gold: #B98A1E on light only, #E5B863 on navy only — never swapped */
  --gold:#B98A1E; --gold-light:#E5B863; --gold-tint:#F7EFDA;
  /* WhatsApp brand green — the floating action button only, nowhere else */
  --whatsapp:#25D366;

  /* form — §5: 4px small controls, 8px cards and panels, 999px pills only */
  --r-sm:4px; --r:8px; --r-lg:8px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(27,79,114,.06);
  --shadow:0 2px 12px rgba(27,79,114,.10);
  --shadow-lg:0 8px 28px rgba(27,79,114,.16);
  --container:1140px; --gutter:clamp(16px,4vw,24px); --section-y:clamp(56px,8vw,96px);
  /* one step above h1; the home hero's name is the only thing that may use it */
  --fs-display:clamp(2.4rem,1.7rem + 2.9vw,3.5rem);
  --fs-small:.875rem; --fs-micro:13px;

  /* type — §2. One superfamily across both scripts. */
  --font:"IBM Plex Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI",Tahoma,sans-serif;
}

/* ---- reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Arabic renders optically smaller than Latin at the same size, so it goes up ~10%,
   with looser leading for the deeper descenders. */
:lang(ar) body,[dir="rtl"] body{font-family:var(--font-ar);font-size:18.7px;line-height:1.8}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{
  font-family:var(--font-ar);letter-spacing:0;font-weight:700}
/* Letter-spacing breaks the cursive joins and makes Arabic look defective, so it is
   cancelled wholesale rather than per component -- one guard, no future regressions. */
html[lang="ar"] *{letter-spacing:normal !important}
/* Scale is BRAND_IDENTITY §2's own numbers -- 44 / 32 / 24 -- on a perfect fourth.
   The page previously ran h1 to 58px and h2 to 41px, which pushed every level into the
   same band and left nothing to dominate. --fs-display is the one step above h1 and is
   spent once per site, on the doctor's name in the home hero. */
h1{font-size:clamp(1.95rem,1.5rem + 1.8vw,2.75rem);line-height:1.12;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.2;letter-spacing:-.014em}
h3{font-size:1.5rem;font-weight:600;letter-spacing:0;line-height:1.3}
h4{font-size:1.0625rem;font-weight:600;letter-spacing:0;line-height:1.35}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy-deep)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
/* Blazor's FocusOnNavigate focuses the page <h1>; don't show a ring on non-interactive targets */
[tabindex="-1"]:focus,h1:focus,h2:focus{outline:none}

/* ---- layout helpers ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
/* Reading measure for a single case or publication: full-bleed clinical photos at container
   width are wider than the eye can compare across. */
.container--narrow{max-width:56rem}
.section--tint{background:var(--tint)}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
:lang(ar) .eyebrow,[dir="rtl"] .eyebrow{letter-spacing:0}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink);max-width:46rem}
/* The rule -- a 46x2 bar under headings, carried from the business card.
   Signature element, so it is applied by pseudo-element and used consistently. */
.rule::after,
.hero h1::after,
.section-head h2::after,
.about-block h2::after{content:"";display:block;width:46px;height:2px;background:var(--blue);
  margin-top:.85rem}
/* Heroes other than the home split hero centre their type, so the rule centres with it. */
.hero:not(.hero--split) h1::after,
.center .rule::after{margin-inline:auto}

.center{text-align:center}
.center .lead{margin-inline:auto}
.stack-sm>*+*{margin-top:.6rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font);
  font-weight:600;font-size:15px;letter-spacing:.02em;border:0;border-radius:var(--r-sm);cursor:pointer;
  padding:14px 28px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
  /* wrap + cap to the container so a long label never spills past a rounded edge on mobile */
  text-decoration:none;text-align:center;max-width:100%}
:lang(ar) .btn,[dir="rtl"] .btn{font-family:var(--font-ar)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--navy);color:var(--white)}
.btn--primary:hover{background:var(--navy-deep);color:var(--white)}
.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--ghost:hover{background:var(--tint);color:var(--navy-deep)}
/* WhatsApp CTAs are navy like any other primary button. The green is reserved for
   the floating action button alone, where it reads as a platform affordance. */
.btn--wa{background:var(--navy);color:var(--white)}
.btn--wa:hover{background:var(--navy-deep);color:var(--white)}
.btn--onDark{background:var(--white);color:var(--navy)}
.btn--onDark:hover{background:var(--tint);color:var(--navy-deep)}
.btn--lg{padding:16px 32px;font-size:16px}
/* tighten oversized buttons on phones so wide labels stay on one comfortable line */
@media (max-width:560px){
  .btn{padding:13px 20px}
  .btn--lg{padding:14px 24px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.btn,.card,.wa-float{transition:none}}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__bar{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;
  font-size:1.15rem;color:var(--navy);letter-spacing:-.02em;white-space:nowrap;min-width:0}
.brand>span:last-child{overflow:hidden;text-overflow:ellipsis}
:lang(ar) .brand,[dir="rtl"] .brand{font-family:var(--font-ar)}
/* The mark is a monogram over a smile arc set in a circle. The circle is part of
   the mark, so it stays a full round rather than a rounded square. */
.brand__mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy);color:var(--white)}
.brand__mark svg{width:20px;height:20px}
.brand__mark{flex:none}
.nav{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.nav a{color:var(--navy);font-weight:500;font-size:.97rem;padding:.5rem .8rem;border-radius:8px}
.nav a:hover{background:var(--tint);color:var(--navy)}
.nav__cta{display:none}
.header-actions{display:flex;align-items:center;gap:.7rem}

/* language switch — a segmented control: both languages visible, current one highlighted */
.lang-switch{display:inline-flex;align-items:center;gap:.15rem;padding:.22rem .3rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white)}
.lang-switch__icon{display:grid;place-items:center;width:24px;height:24px;color:var(--muted);flex:none}
.lang-switch__icon svg{width:16px;height:16px}
.lang-switch__opts{display:inline-flex;align-items:center;gap:.1rem}
.lang-switch__opt{display:inline-flex;align-items:center;justify-content:center;height:30px;
  padding:0 .75rem;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;line-height:1;
  color:var(--muted);white-space:nowrap;
  transition:background-color .16s ease,color .16s ease}
a.lang-switch__opt:hover{background:var(--tint);color:var(--navy)}
.lang-switch__opt.is-active{background:var(--navy);color:var(--white)}
.lang-switch__opt[lang="ar"]{font-family:var(--font-ar)}
.lang-switch__opt[lang="en"]{font-family:var(--font)}
.lang-switch__short{display:none}
@media (max-width:1080px){
  .lang-switch__full{display:none}
  .lang-switch__short{display:inline}
  .lang-switch__opt{padding:0 .6rem;min-width:34px}
}
@media (max-width:400px){.lang-switch__icon{display:none}}
@media (prefers-reduced-motion:reduce){.lang-switch__opt{transition:none}}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.nav-toggle{display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);
  background:var(--white);border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;
  color:var(--navy)}
.nav-toggle svg{width:22px;height:22px}

@media (max-width:900px){
  /* backdrop-filter would make the header the containing block for its fixed drawer,
     anchoring the drawer to the 64px header instead of the viewport. */
  :root{--header-h:64px}
  .site-header{background:var(--white);backdrop-filter:none}
  .site-header__bar{gap:.5rem;min-height:var(--header-h)}

  .brand{font-size:1rem}
  .brand__mark{width:30px;height:30px}
  .brand__mark svg{width:18px;height:18px}

  /* the drawer leaves the flow, so the actions take over pushing to the inline end */
  .header-actions{margin-inline-start:auto}
  .nav-toggle{display:inline-flex;position:relative;z-index:2}

  /* opens below the bar, so brand and language switch stay visible and tappable */
  .nav{position:fixed;inset-block:var(--header-h) 0;inset-inline-end:0;width:min(84vw,320px);z-index:1;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin:0;
    padding:.75rem 1.2rem 1.5rem;background:var(--white);box-shadow:var(--shadow-lg);
    overflow-y:auto;overscroll-behavior:contain;
    /* hidden, not just translated: an off-screen visible panel widens the document */
    visibility:hidden;transform:translateX(100%);
    transition:transform .25s ease,visibility 0s linear .25s}
  [dir="rtl"] .nav{transform:translateX(-100%)}
  .nav a{padding:.95rem .5rem;font-size:1.05rem;border-bottom:1px solid var(--line);border-radius:0}
  /* .nav a wins on specificity over .btn--wa, so restate the button's colours here */
  .nav a.nav__cta{display:inline-flex;justify-content:center;margin-top:1.4rem;border-bottom:0;
    border-radius:var(--r-sm);background:var(--navy);color:var(--white);font-size:15px}
  .nav a.nav__cta:hover{background:var(--navy-deep);color:var(--white)}

  body.nav-open{overflow:hidden}
  body.nav-open .nav{visibility:visible;transform:translateX(0);transition:transform .25s ease}
  body.nav-open::after{content:"";position:fixed;inset:var(--header-h) 0 0;background:rgba(21,63,91,.5);z-index:40}
  /* the float would otherwise sit on top of the open drawer */
  body.nav-open .wa-float{opacity:0;pointer-events:none}
}

/* the booking CTA duplicates the WhatsApp float once the bar gets tight */
@media (max-width:560px){.header-actions .btn{display:none}}

@media (prefers-reduced-motion:reduce){.nav{transition:none}}

/* ---- hero ---- */
/* Alternate white and tint down the page, flat fills only. */
.hero{background:var(--tint);position:relative;overflow:hidden}
.hero__inner{padding-block:clamp(3.5rem,8vw,6.5rem);text-align:center}
.hero h1{margin-bottom:.6rem}
.hero .lead{margin-inline:auto;margin-bottom:2rem}
/* Heroes with no CTA under the lead were doubling the lead's bottom margin onto the
   band's own padding, leaving a tall empty slab of tint. */
.hero .lead:last-child{margin-bottom:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---- credential chips (gold dot = credential) ---- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem .7rem;justify-content:center;margin-bottom:1.6rem;
  list-style:none;padding:0}
.chips--start{justify-content:start}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--navy);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .95rem}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* ---- grids / cards ---- */
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;transition:border-color .18s ease}
/* §5 asks for hairlines over shadows, so hover moves the keyline, not the card. A 3px
   lift plus a shadow on every card in the page was doing the opposite. */
.card:hover{border-color:var(--navy)}
/* The 46x2 rule is the identity's signature (§5) and stays under page and section
   headings. It used to repeat inside every card too, which put it on screen six times
   at once and turned a signature into wallpaper. */
.card h3{margin-bottom:.55rem;font-size:1.25rem}
.card p{color:var(--ink);margin:0}
.card__icon{width:44px;height:44px;border-radius:var(--r);background:var(--tint);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1rem}
.card__icon svg{width:24px;height:24px}
.card--link{display:flex;flex-direction:column}
.card--link .more{margin-top:1rem;font-weight:600;color:var(--blue)}

/* ---- section heading ---- */
/* Every section head used to be centred, so the page had no vertical edge to travel down
   and the two moments that should read as emphatic -- the hero and the navy band -- looked
   like everything else. Heads are start-aligned; centring is now opt-in. It also gives the
   Arabic build a strong right edge instead of an accidentally symmetrical column. */
.section-head{max-width:46rem;margin-bottom:2.4rem}
.section-head p{color:var(--ink);margin-bottom:0}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center h2::after{margin-inline:auto}

/* ---- dark CTA ---- */
/* A full-width navy band for the booking section, flat solid with no gradient.
   This is the one place the rule runs in gold-light, once per page. */
.cta-dark{background:var(--navy);color:var(--blue-pale);border-radius:var(--r-lg);
  text-align:center;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter)}
.cta-dark h2{color:var(--white);margin-bottom:0}
.cta-dark h2::after{content:"";display:block;width:46px;height:2px;background:var(--gold-light);
  margin:.9rem auto 1.4rem}
.cta-dark p{color:var(--blue-pale);max-width:40rem;margin-inline:auto;margin-bottom:1.8rem}

/* ---- consent note ---- */
.consent{font-size:.9rem;color:var(--muted);border-inline-start:3px solid var(--gold);
  padding-inline-start:.9rem;margin:0}
/* own line inside a centered section, but the note itself stays start-aligned */
.consent-wrap{width:max-content;max-width:100%;margin:1.6rem auto 0;text-align:start}

/* ---- WhatsApp float ---- */
.wa-float{position:fixed;bottom:1.4rem;inset-inline-end:1.4rem;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--whatsapp);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(27,79,114,.28);transition:transform .16s ease,opacity .2s ease}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px;fill:var(--white)}

/* ---- footer ---- */
/* no margin-top: the preceding .section already ends with a full --section-y of padding */
/* Muted grey never goes on navy -- it fails at 1.6:1. Secondary text is blue-pale (4.8:1). */
.site-footer{background:var(--navy-deep);color:var(--blue-pale);padding-block:3rem 2rem}
.site-footer a{color:var(--blue-pale)}
.site-footer a:hover{color:var(--white)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr}}
.site-footer .brand{color:var(--white);margin-bottom:.8rem}
.footer-col h2{color:var(--white);font-size:.95rem;letter-spacing:0;margin-bottom:.9rem}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.5rem}
.footer-col h2.footer-col__label{color:var(--blue-pale);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin:1.5rem 0 .7rem}
:lang(ar) .footer-col h2.footer-col__label,[dir="rtl"] .footer-col h2.footer-col__label{letter-spacing:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.3rem;
  font-size:.85rem;color:var(--blue-pale)}

/* ---- social profiles ---- */
/* icon row — light by default, inverted inside the dark footer */
.social-icons{display:flex;gap:.6rem;margin-top:.4rem}
.social-icons a{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);border:1px solid transparent;color:var(--navy);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.social-icons a:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.social-icons svg{width:18px;height:18px;fill:currentColor}
.site-footer .social-icons a{background:rgba(255,255,255,.08);border-color:transparent;color:var(--blue-pale)}
.site-footer .social-icons a:hover{background:var(--white);color:var(--navy)}

/* labelled list — one row per network with its handle (Contact page) */
.social-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:780px){.social-list{grid-template-columns:1fr}}
.social-list a{display:flex;align-items:center;gap:.9rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;color:var(--navy);
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.social-list a:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--navy) 35%,var(--line))}
.social-list__icon{width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy)}
.social-list__icon svg{width:20px;height:20px;fill:currentColor}
.social-list__text{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.social-list__name{font-weight:600}
.social-list__handle{font-size:.87rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-list__go{margin-inline-start:auto;color:var(--muted);display:grid;place-items:center}
.social-list__go svg{width:18px;height:18px}
[dir="rtl"] .social-list__go svg{transform:scaleX(-1)}
/* feature cards — the Home "Follow & verify" section */
.social-cards{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.social-cards{grid-template-columns:1fr}}
.social-card{display:flex;flex-direction:column;align-items:flex-start;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem 1.6rem;box-shadow:var(--shadow-sm);color:var(--navy);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.social-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--navy);
  border-color:color-mix(in srgb,var(--navy) 35%,var(--line))}
.social-card__icon{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy);margin-bottom:1.1rem;
  transition:background-color .18s ease,color .18s ease}
.social-card:hover .social-card__icon{background:var(--navy);color:var(--white)}
.social-card__icon svg{width:24px;height:24px;fill:currentColor}
.social-card__name{font-family:var(--font-head);font-weight:600;font-size:1.15rem;letter-spacing:0;color:var(--navy)}
.social-card__desc{color:var(--ink);margin-top:.2rem}
.social-card__handle{margin-top:.85rem;font-size:.88rem;color:var(--muted);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;
  font-weight:600;font-size:.92rem;color:var(--blue)}
.social-card__go svg{width:16px;height:16px}
[dir="rtl"] .social-card__go svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){
  .social-list a,.social-icons a,.social-card,.social-card__icon{transition:none}
}

/* ---- breadcrumbs ---- */
.breadcrumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1rem;
  font-size:.85rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--blue)}

/* ---- About: sticky aside + CV ---- */
.about-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem}
.portrait{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--tint)}
.portrait img{width:100%;height:100%;object-fit:cover}
.about-aside__actions{display:flex;flex-direction:column;gap:.7rem}
.about-aside__actions .btn{justify-content:center}
.about-aside__social{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem}
.about-aside__social .social-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
  gap:.7rem;margin-top:0}
.about-aside__social .social-icons a{width:auto;min-width:0;height:68px;border-radius:var(--r);
  background:var(--tint);border:1px solid var(--line);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.about-aside__social .social-icons a:hover{background:var(--navy);
  border-color:var(--navy);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow)}
.about-aside__social .social-icons a:focus-visible{transform:translateY(-2px)}
.about-aside__social .social-icons svg{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){
  .about-aside__social .social-icons a,.about-aside__social .social-icons a:hover{transition:none;transform:none}
}
.about-aside__label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .8rem}
:lang(ar) .about-aside__label,[dir="rtl"] .about-aside__label{letter-spacing:0}
/* mobile: social + contact actions come first, full-width and centered */
@media (max-width:900px){
  .about-aside{position:static;gap:.9rem}
  .about-aside .portrait{max-width:260px;margin-inline:auto}
  .about-aside__social{padding:1rem 1.1rem}
  .about-aside__label{margin:0 0 .75rem;text-align:center}
  .about-aside__social .social-icons{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.6rem}
  .about-aside__social .social-icons a{height:64px}
  .about-aside__actions{flex-direction:row;flex-wrap:wrap}
  .about-aside__actions .btn{flex:1 1 13rem}
}
@media (max-width:480px){
  .about-aside__social .social-icons a{height:60px;border-radius:14px}
  .about-aside__social .social-icons svg{width:28px;height:28px}
}
.about-main h1{margin-bottom:1.1rem}
.about-block{margin-top:2.8rem}
.about-block h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:1.3rem}
.prose{max-width:68ch}
.prose p{margin-bottom:1.1rem}

/* ---- CV timeline ---- */
.timeline{list-style:none;margin:0;padding:0;padding-inline-start:1.75rem;position:relative}
.timeline::before{content:"";position:absolute;inset-block:.5rem 0;inset-inline-start:5px;
  width:2px;background:var(--line)}
.timeline__item{position:relative;padding-bottom:1.7rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;inset-inline-start:-1.75rem;top:.45rem;
  width:12px;height:12px;border-radius:var(--r-sm);background:var(--white);border:2px solid var(--blue)}
.timeline__when{display:block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
:lang(ar) .timeline__when,[dir="rtl"] .timeline__when{letter-spacing:0;text-transform:none}
.timeline__role{font-size:1.05rem;margin:.2rem 0 .15rem}
.timeline__where{margin:0;color:var(--muted)}

/* ---- license card (gold bar = credential) ---- */
/* Credential panel: gold keyline and gold-tint fill, text in ink and navy.
   Reserved for licence and registration, never for testimonials. */
.license-card{background:var(--gold-tint);border:1px solid var(--line);border-inline-start:4px solid var(--gold);
  border-radius:var(--r);padding:1.1rem 1.3rem}
.license-card__org{font-size:1rem;margin:0 0 .25rem}
.license-card__detail{margin:0;color:var(--muted);font-size:.93rem}

/* ---- contact cards ---- */
.contact-card__list{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.7rem}
.contact-card__label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
:lang(ar) .contact-card__label,[dir="rtl"] .contact-card__label{letter-spacing:0;text-transform:none}
.contact-card__actions{margin:1.1rem 0 0}
.contact-card__muted{color:var(--muted);font-size:.9rem;margin-top:.6rem}

/* ---- checklist (treatment pages, used later) ---- */
.checklist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 2rem;max-width:60rem;
  /* section heads are start-aligned now, so the list shares their spine */
  margin-inline:0}
@media (max-width:600px){.checklist{grid-template-columns:1fr}}
.checklist li{position:relative;padding-inline-start:2rem;color:var(--navy);font-weight:500}
.checklist li::before{content:"";position:absolute;inset-inline-start:0;top:.15em;width:20px;height:20px;
  border-radius:50%;background:var(--navy)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---- upcoming event (Home) ---- */
/* Poster beside the details; navy and blue only -- an event is not a credential,
   so no gold anywhere in here. */
.event{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);align-items:center;
  gap:clamp(1.3rem,4vw,2.6rem);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow-sm)}
@media (max-width:860px){.event{grid-template-columns:1fr}}
.event__poster{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.event__poster img{width:100%;height:auto}
.event__body{min-width:0}
.event__who{color:var(--muted);font-size:.95rem;margin-bottom:1.1rem}
.event__intro{color:var(--ink);margin-bottom:.4rem}
.event__title{position:relative;padding-top:.9rem;margin-bottom:.7rem}
.event__title::before{content:"";position:absolute;top:0;inset-inline-start:0;width:46px;height:2px;
  background:var(--blue)}
.event__meta{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem 2.4rem}
.event__label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
:lang(ar) .event__label,[dir="rtl"] .event__label{letter-spacing:0;text-transform:none}
.event__value{font-weight:600;color:var(--navy)}
.event__close{margin:1.3rem 0 0;font-weight:600;color:var(--navy)}

/* ---- Blazor error UI ---- */
/* The template markup ships in MainLayout but the stylesheet never styled it, so
   "An unhandled error has occurred." rendered as plain body text at the foot of every
   page. Blazor sets display:block inline when it actually fires. */
#blazor-error-ui{display:none;position:fixed;inset-inline:0;bottom:0;z-index:1000;
  background:var(--navy);color:var(--white);padding:.9rem var(--gutter);
  font-size:var(--fs-small);box-shadow:var(--shadow-lg)}
#blazor-error-ui a{color:var(--white);text-decoration:underline}
#blazor-error-ui .dismiss{cursor:pointer;margin-inline-start:.6rem}

/* ---- home hero: portrait beside the name ---- */
/* The hero was a 500px slab of flat tint with centred type. For a solo practitioner the
   most characteristic thing on the page is the practitioner, so it leads. */
.hero--split .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;text-align:start;
  padding-block:clamp(3rem,6vw,5.5rem)}
@media (max-width:900px){
  .hero--split .hero__inner{grid-template-columns:1fr;gap:2.2rem}
  .hero__portrait{order:-1;max-width:17rem}
}
.hero__name{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.028em;margin-bottom:1.2rem}
.hero--split .lead{margin-bottom:1.6rem}
.hero--split .hero__cta{justify-content:start}
.hero__portrait{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--white)}
.hero__portrait img{width:100%;height:auto;display:block}

/* ---- professional engagement ("in the field") ---- */
/* Photographs earn their place by carrying a caption that names a real, printed event.
   Without the caption these are decoration; with it they are the evidence behind the
   "internationally licensed / academic" claims made one section earlier. */
.field__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.4rem}
@media (max-width:900px){.field__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.field__grid{grid-template-columns:1fr}}
.field__item,.field__fig{margin:0}
.field__shot{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--tint)}
.field__shot img{width:100%;height:100%;object-fit:cover}
.field__cap{margin:.85rem 0 0}
.field__event{display:block;font-weight:600;color:var(--navy);line-height:1.35}
.field__where{display:block;color:var(--muted);font-size:var(--fs-small);margin-top:.15rem}

/* ---- treatments as an index, not a card grid ---- */
/* Five treatments in a three-column grid leaves a permanent orphan hole, and five
   identical cards rank nothing. Rows read like a table of contents and use the full
   measure, so each entry can carry a real sentence. */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tlist__row{border-bottom:1px solid var(--line)}
.tlist__link{display:grid;grid-template-columns:auto minmax(0,20rem) minmax(0,1fr) auto;
  align-items:center;gap:.35rem 1.5rem;padding:1.35rem .5rem;color:var(--navy);
  transition:background-color .16s ease}
.tlist__link:hover{background:var(--tint);color:var(--navy)}
.tlist__icon{width:40px;height:40px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--tint);color:var(--navy);transition:background-color .16s ease,color .16s ease}
.tlist__link:hover .tlist__icon{background:var(--navy);color:var(--white)}
.tlist__icon svg{width:22px;height:22px}
.tlist__title{font-family:var(--font-head);font-size:1.1875rem;font-weight:600;line-height:1.3}
:lang(ar) .tlist__title,[dir="rtl"] .tlist__title{font-family:var(--font-ar)}
.tlist__blurb{color:var(--ink);font-size:var(--fs-small);line-height:1.55;margin:0}
.tlist__go{color:var(--blue);display:grid;place-items:center;flex:none}
.tlist__go svg{width:20px;height:20px}
[dir="rtl"] .tlist__go svg{transform:scaleX(-1)}
@media (max-width:860px){
  .tlist__link{grid-template-columns:auto minmax(0,1fr) auto;padding:1.2rem .35rem;align-items:start}
  .tlist__icon{grid-column:1;grid-row:1}
  .tlist__title{grid-column:2;grid-row:1}
  .tlist__go{grid-column:3;grid-row:1}
  .tlist__blurb{grid-column:2/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.tlist__link,.tlist__icon{transition:none}}

/* ---- credential record ---- */
/* Replaces a grid of eight gold-tinted panels. BRAND_IDENTITY §1: gold reads as authority
   only while it is scarce -- "if it appears twice in the same viewport, one of them is
   wrong". One gold keyline now marks the whole credentials region (§5 use 2), and the rows
   inside are separated by hairlines. */
.record{border-inline-start:3px solid var(--gold);padding-inline-start:clamp(1rem,2vw,1.4rem)}
.record__group+.record__group{margin-top:1.9rem}
.record__label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem}
:lang(ar) .record__label,[dir="rtl"] .record__label{letter-spacing:0;text-transform:none;
  font-size:var(--fs-small)}
.record__list{list-style:none;margin:0;padding:0}
.record__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.15rem 1.5rem;
  padding-block:.75rem;border-bottom:1px solid var(--line)}
.record__row:last-child{border-bottom:0}
.record__org{font-weight:600;color:var(--navy)}
.record__detail{color:var(--muted);font-size:var(--fs-small)}
@media (max-width:600px){.record__row{grid-template-columns:1fr;gap:.1rem}}

/* Languages are not qualifications, so they take the chip without the gold credential dot. */
.chips--plain .chip::before{display:none}
.chips--plain .chip{color:var(--ink);font-weight:500}
.tlist__note{margin:1.4rem 0 0;color:var(--muted);font-size:var(--fs-small)}

/* ---- Before/after slider -------------------------------------------------- */
/* --pos is the visible width of the "after" image. The clip is mirrored under RTL so the
   handle and the reveal travel together; site.js flips the pointer maths to match. */
.ba{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  margin:0;background:var(--tint);touch-action:none;user-select:none;cursor:ew-resize}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The divider sits at --pos and the "after" image occupies the far side of it, so the pills match
   what is actually under them: before on the inline-start side, after on the inline-end side. */
.ba__img--after{clip-path:inset(0 0 0 var(--pos))}
[dir="rtl"] .ba__img--after{clip-path:inset(0 var(--pos) 0 0)}

.ba__pill{position:absolute;top:.7rem;z-index:2;font-size:.78rem;font-weight:600;
  padding:.25rem .6rem;border-radius:999px;background:rgba(21,63,91,.82);color:var(--white);
  backdrop-filter:blur(4px);pointer-events:none}
.ba__pill--before{inset-inline-start:.7rem}
.ba__pill--after{inset-inline-end:.7rem}

.ba__handle{position:absolute;top:0;bottom:0;z-index:3;width:44px;
  inset-inline-start:var(--pos);translate:-50% 0;
  display:grid;place-items:center;cursor:ew-resize;background:transparent;border:0}
[dir="rtl"] .ba__handle{translate:50% 0}
/* The visible seam. A pseudo-element keeps the hit area 44px wide without a fat line. */
.ba__handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--white);
  box-shadow:0 0 0 1px rgba(21,63,91,.25)}
.ba__grip{position:relative;width:34px;height:34px;border-radius:50%;background:var(--white);
  color:var(--navy);display:grid;place-items:center;box-shadow:0 2px 10px rgba(21,63,91,.28)}
.ba__grip svg{width:17px;height:17px}
.ba__handle:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.ba.is-dragging{cursor:grabbing}
.ba--portrait{max-width:24rem;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .ba,.ba__img,.ba__handle,.ba__grip{transition:none!important}
}

/* ---- Case figures --------------------------------------------------------- */
.case-media>*+*{margin-top:1.2rem}
.case-figs{display:grid;gap:1.2rem}
.case-fig{margin:0}
.case-fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.case-fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.55}
.case-fig__stage{display:inline-block;font-size:.78rem;font-weight:600;color:var(--navy);
  background:var(--tint);border-radius:999px;padding:.2rem .6rem;margin-bottom:.4rem}
@media (min-width:760px){ .case-figs--multi{grid-template-columns:1fr 1fr} }

/* ---- Case cards ----------------------------------------------------------- */
.case-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0}
@media (max-width:900px){ .case-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .case-grid{grid-template-columns:1fr} }
.case-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;height:100%}
.case-card:hover{border-color:var(--navy)}
.case-card__media{aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.case-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* No consent-cleared image yet: the DESIGN-SYSTEM §7 placeholder block, never stock photography. */
.case-card__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--line)}
.case-card__ph svg{width:44px;height:44px}
.case-card__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.case-card__tag{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--blue)}
.case-card__title{font-family:var(--font-head);font-size:1.02rem;line-height:1.35;color:var(--navy);margin:0}

/* ---- Filter pills --------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.pill{display:inline-flex;align-items:center;font-size:.9rem;font-weight:500;color:var(--navy);
  padding:.44rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--white)}
.pill:hover{background:var(--tint);color:var(--navy)}
.pill.is-active{background:var(--navy);color:var(--white);border-color:var(--navy)}
.pill.is-active:hover{background:var(--navy-deep);color:var(--white)}

/* ---- Facts grid ----------------------------------------------------------- */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:1.8rem 0}
@media (min-width:640px){ .facts{grid-template-columns:repeat(2,1fr)} }
.facts__item{background:var(--white);padding:.9rem 1.1rem}
.facts__item dt{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem}
.facts__item dd{margin:0;color:var(--ink);line-height:1.5}

/* ---- Research ------------------------------------------------------------- */
.pub-list{display:grid;gap:1.2rem;list-style:none;padding:0;margin:0}
.pub-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem}
.pub-card:hover{border-color:var(--navy)}
.pub-card__kind{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
/* Gold marks credentials only. A granted patent is one; the posters are not, and this page has
   no consent note competing for the accent. */
.pub-card__kind--patent{color:var(--gold)}
.pub-card__title{font-family:var(--font-head);font-size:1.12rem;line-height:1.35;color:var(--navy);margin:0 0 .5rem}
.pub-card__meta{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}

.pub-section{margin-top:2rem}
.pub-section h2{font-size:1.2rem;margin-bottom:.5rem}
.pub-section p{margin:0 0 .8rem;max-width:46rem}
.pub-note{font-size:.9rem;color:var(--muted);border-inline-start:3px solid var(--line);
  padding-inline-start:.9rem;margin:1.4rem 0}
.pub-figs{display:grid;gap:1.6rem;margin-top:2.4rem}
.pub-fig{margin:0}
.pub-fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);
  background:var(--white)}
.pub-fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.55rem;line-height:1.55}