/* Faculty Paper — drwaleedismail.com
   Design tokens and component layer. Built from the approved handoff.
   Arabic is the primary language; the [lang="ar"] blocks are not an afterthought layer. */

:root{
  --fp-ink:#101820;
  --fp-navy:#1B3557;
  --fp-brass:#8A6A2F;
  /* Brass as TEXT, not as a rule. #8A6A2F measures 4.6:1 on Paper but 4.49:1 on
     Sand and 4.09:1 on brass tint, so an 11px eyebrow fails AA on two of the
     three light grounds it actually sits on. #7A5D28 is 5.99 / 5.49 / 4.99 on
     Paper, Sand and brass tint. Rules, borders and underlines keep --fp-brass;
     only text moves. */
  --fp-brass-text:#7A5D28;
  --fp-brass-on-dark:#C79A45;
  --fp-stone:#6E6A63;
  --fp-brass-tint:#F0E7D5;
  --fp-sand:#F5F2EC;
  --fp-rule:#E2DED6;
  --fp-paper:#FDFCFA;
  --fp-error:#9C332B;
  /* The same signal on Ink and Navy. #9C332B is designed against Paper and
     measures 2.49:1 on Ink, which is an AA failure at any size. #E39289 is
     7.4:1 on Ink and 5.2:1 on Navy, so it passes at body size on both. */
  --fp-error-on-dark:#E39289;
  /* Ground-aware tokens. Everything that has to contrast with whatever it sits
     on reads these rather than a fixed colour, and the single list of dark
     grounds below re-points all three at once. Adding a dark panel means adding
     one selector there, not remembering every element that might land on it. */
  --fp-tbc-ink:#9C332B;
  --fp-on-ground:var(--fp-ink);
  --fp-rule-on-ground:var(--fp-brass);
  --fp-body:#26303A;
  --fp-muted:#4A4740;
  --fp-ghost:#F2EEE5;
  --fp-disabled-bg:#EDEAE3;
  --fp-disabled-ink:#A9A49A;
  --fp-field-line:#C9C3B8;

  --fp-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --fp-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fp-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fp-ar-display:'Tajawal','Cairo',sans-serif;
  --fp-ar-body:'Cairo','Tajawal',sans-serif;

  --fp-4:4px;  --fp-8:8px;   --fp-16:16px; --fp-24:24px; --fp-32:32px;
  --fp-44:44px;--fp-64:64px; --fp-96:96px; --fp-128:128px;

  --fp-section-y:64px;
  --fp-gutter:48px;
  --fp-measure:66ch;
  --fp-tilt:56px;
  --fp-radius:0;
}
@media (max-width:1024px){ :root{ --fp-tilt:24px; --fp-gutter:32px; } }
@media (max-width:768px){  :root{ --fp-section-y:44px; --fp-gutter:20px; } }

/* ---------- ground and base type ---------- */

body.fp{
  background:var(--fp-paper);
  color:var(--fp-body);
  font-family:var(--fp-sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.fp[lang="ar"],
[lang="ar"] body.fp{ font-family:var(--fp-ar-body); font-size:18px; line-height:1.92; color:#1F2830; }

.fp h1,.fp h2,.fp h3,.fp h4,.fp .fp-serif{
  font-family:var(--fp-serif);
  font-weight:600;
  color:var(--fp-ink);
  margin:0;
}
[lang="ar"] .fp h1,[lang="ar"] .fp h2,[lang="ar"] .fp h3,[lang="ar"] .fp h4,[lang="ar"] .fp-serif{
  font-family:var(--fp-ar-display); font-weight:700;
}

.fp h1,.fp-h1{ font-size:clamp(30px,4vw,58px); line-height:1.1; letter-spacing:-0.02em; }
.fp h2,.fp-h2{ font-size:clamp(26px,2.4vw,34px); line-height:1.2; }
.fp h3,.fp-h3{ font-size:clamp(20px,1.7vw,26px); line-height:1.3; }

[lang="ar"] .fp h1,[lang="ar"] .fp-h1{ font-size:clamp(30px,3.9vw,56px); line-height:1.32; letter-spacing:0; }
[lang="ar"] .fp h2,[lang="ar"] .fp-h2{ font-size:clamp(25px,2.3vw,33px); line-height:1.35; }
[lang="ar"] .fp h3,[lang="ar"] .fp-h3{ font-size:clamp(19px,1.65vw,24px); line-height:1.5; }

.fp p{ max-width:var(--fp-measure); }
.fp-lede{ font-size:19px; line-height:1.65; color:var(--fp-body); }
[lang="ar"] .fp-lede{ font-size:20px; line-height:1.9; }

/* Meta / eyebrow — mono, uppercase, tracked. Arabic is never uppercased or aggressively tracked. */
.fp-meta,.fp-eyebrow{
  font-family:var(--fp-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fp-brass-text);
}
[lang="ar"] .fp-meta,[lang="ar"] .fp-eyebrow{
  font-family:var(--fp-ar-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:none;
}
.fp-meta--stone{ color:var(--fp-stone); }
.fp-meta--on-dark{ color:var(--fp-brass-on-dark); }

.fp-small{ font-size:13px; line-height:1.6; color:var(--fp-stone); }
[lang="ar"] .fp-small{ font-size:14.5px; line-height:1.85; }

/* Latin runs inside Arabic text: phone numbers, DOIs, URLs, society acronyms. */
.fp-ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; font-family:var(--fp-mono); }

/* An unconfirmed figure. Never fill these with an invented value.
   The colour comes from --fp-tbc-ink rather than --fp-error directly, so a
   bracketed value does not need to know where it sits: every dark ground
   re-points the variable below and the marker stays legible. This replaced a
   fix that had been scoped to one header row, and so stayed behind when the
   profile links moved to the footer and failed at 2.49:1 there. */
.fp-tbc{ color:var(--fp-tbc-ink); font-style:normal; }

/* Every Ink or Navy ground on the site. Add to this list when a new dark
   ground is introduced - that is the whole mechanism. */
.fp-footer,
#footer.ct-footer,
.fp-band,
.fp-band--flat,
.fp-section--ink,
.fp-panel--ink,
.fp-onink,
#header [data-row="top"]{
  --fp-tbc-ink:var(--fp-error-on-dark);
  --fp-on-ground:var(--fp-paper);
  --fp-rule-on-ground:var(--fp-brass-on-dark);
}

/* ---------- rules ---------- */

.fp-rule{ border:0; border-top:1px solid var(--fp-rule); margin:0; }
.fp-rule--chapter{ border-top:2px solid var(--fp-ink); }
.fp-rule--brass{ border-top:3px solid var(--fp-brass); }

/* ---------- links ---------- */

.fp a{ color:var(--fp-navy); text-decoration:none; }
.fp a:hover{ text-decoration:underline; text-decoration-color:var(--fp-brass); text-underline-offset:4px; }
.fp :focus-visible{ outline:3px solid var(--fp-brass); outline-offset:2px; }
.fp-on-dark :focus-visible{ outline-color:var(--fp-brass-on-dark); }

/* ---------- buttons ---------- */

.fp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px;
  font-family:var(--fp-sans); font-size:15px; font-weight:500; line-height:1;
  border-radius:var(--fp-radius); border:1px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease;
}
[lang="ar"] .fp-btn{ font-family:var(--fp-ar-body); font-size:16px; font-weight:600; }

.fp-btn--primary{ background:var(--fp-navy); color:#fff; }
.fp-btn--primary:hover{ background:var(--fp-ink); box-shadow:inset 0 -2px 0 var(--fp-brass-on-dark); text-decoration:none; }

.fp-btn--secondary{ background:transparent; color:var(--fp-ink); border-color:var(--fp-ink); }
.fp-btn--secondary:hover{ background:var(--fp-ink); color:var(--fp-paper); text-decoration:none; }

.fp-btn--on-dark{ background:var(--fp-paper); color:var(--fp-ink); }
.fp-btn--on-dark:hover{ background:#fff; box-shadow:inset 0 -2px 0 var(--fp-brass); text-decoration:none; }

.fp-btn--outline-dark{ background:transparent; color:var(--fp-paper); border-color:rgba(253,252,250,0.45); }
.fp-btn--outline-dark:hover{ border-color:var(--fp-brass-on-dark); background:rgba(253,252,250,0.06); text-decoration:none; }

.fp-btn--tertiary{
  min-height:0; padding:0 0 3px; background:none; border:0;
  border-bottom:1px solid var(--fp-rule-on-ground);
  font-family:var(--fp-serif); font-size:17px; font-weight:600; color:var(--fp-on-ground);
}
[lang="ar"] .fp-btn--tertiary{ font-family:var(--fp-ar-display); font-weight:700; font-size:18px; }
.fp-btn--tertiary:hover{ color:var(--fp-rule-on-ground); text-decoration:none; }

.fp-btn[disabled],.fp-btn--disabled{ background:var(--fp-disabled-bg); color:var(--fp-disabled-ink); border-color:transparent; cursor:not-allowed; }

/* ---------- chips ---------- */

.fp-chip{
  /* 44px, not 40: chips are touch targets - the filter chips on the list pages
     and the CV jump row on mobile - and the accessibility floor is 44px. */
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  background:var(--fp-sand); color:var(--fp-ink);
  font-family:var(--fp-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid var(--fp-rule); border-radius:var(--fp-radius);
}
[lang="ar"] .fp-chip{ font-family:var(--fp-ar-body); font-size:14px; letter-spacing:0; text-transform:none; }
.fp-chip[aria-current="true"],.fp-chip--active{ background:var(--fp-brass-tint); border-color:var(--fp-brass); }

/* ---------- cards ---------- */

.fp-card{ display:block; background:transparent; border-radius:var(--fp-radius); transition:background-color 140ms ease; }
.fp-card:hover{ background:var(--fp-sand); text-decoration:none; }
.fp-card__title{ font-family:var(--fp-serif); font-weight:600; color:var(--fp-ink); }
[lang="ar"] .fp-card__title{ font-family:var(--fp-ar-display); font-weight:700; }
.fp-card:hover .fp-card__title{ text-decoration:underline; text-decoration-color:var(--fp-brass); text-underline-offset:4px; }

/* A card with no image is a designed state, not a gap. */
.fp-card__typeblock{
  display:flex; align-items:center; justify-content:center;
  background:var(--fp-sand); border-top:2px solid var(--fp-ink);
  font-family:var(--fp-serif); font-size:22px; color:var(--fp-ink); text-align:center; padding:24px;
}

/* ---------- image placeholder — client photography not yet shot ---------- */

.fp-shot{
  position:relative; display:flex; align-items:flex-end;
  border:1px solid var(--fp-rule);
  color:var(--fp-stone);
  font-family:var(--fp-mono); font-size:11px; line-height:1.5; letter-spacing:0.06em;
  padding:12px; text-transform:uppercase;
}
.fp-shot::after{ content:''; display:block; }
/* The stripes are painted by a pseudo-element, not by the container's own
   background, and that is not stylistic. Elementor's container lazy-load sets
   "background-image:none !important" on every .e-con until it marks the element
   .e-lazyloaded, so a placeholder built on an Elementor container had no ground
   at all - 15 of 17 on Home were blank boxes with a hairline and a label, which
   reads as deliberate and so went unnoticed for six sessions. No specificity can
   beat !important; a pseudo-element sidesteps it entirely and keeps working for
   every shot added later, with no per-container opt-out class to remember. */
.fp-shot.fp-shot::before{
  /* The doubled class is load-bearing. Elementor's .e-con::before declares
     content:var(--background-overlay) for its own overlay feature; the variable
     is unset on a plain container, so the declaration is invalid at computed
     value time and content resolves to none - and a pseudo-element with
     content:none generates no box at all. It matches at the same specificity as
     a single class and loads later, so it won this outright.
     background-image computed correctly throughout, which is exactly why this
     read as fixed twice: the declaration existed, the box did not. The assertion
     that catches it is content !== "none", never background-image. */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,#EFEBE2 0 10px,#F6F3EC 10px 20px);
}
.fp-shot > *{ position:relative; z-index:1; }

/* ---------- forms ---------- */

.fp-field{ display:block; margin-bottom:24px; }
.fp-field label{ display:block; font-size:13px; font-weight:500; color:var(--fp-ink); margin-bottom:6px; }
[lang="ar"] .fp-field label{ font-size:14.5px; }
.fp-field input,.fp-field select,.fp-field textarea{
  width:100%; min-height:48px; padding:8px 0;
  background:transparent; color:var(--fp-ink);
  border:0; border-bottom:1px solid var(--fp-field-line); border-radius:var(--fp-radius);
  font-family:inherit; font-size:16px;
}
.fp-field textarea{ min-height:120px; resize:vertical; }
.fp-field input:focus,.fp-field select:focus,.fp-field textarea:focus{ outline:none; border-bottom:2px solid var(--fp-brass); }
.fp-field--error input,.fp-field--error textarea{ border-bottom:2px solid var(--fp-error); }
.fp-field__error{ display:block; margin-top:6px; font-size:12px; color:var(--fp-error); }
.fp-field select{ appearance:none; background-image:none; }
.fp-field--select{ position:relative; }
.fp-field--select::after{ content:'▾'; position:absolute; inset-inline-end:0; bottom:14px; color:var(--fp-stone); pointer-events:none; }

/* ---------- counters ---------- */

.fp-counter{ border-top:1px solid rgba(253,252,250,0.28); padding-top:16px; }
.fp-counter__figure{ font-family:var(--fp-serif); font-weight:600; font-size:clamp(34px,3.4vw,50px); line-height:1; color:var(--fp-paper); }
[lang="ar"] .fp-counter__figure{ font-family:var(--fp-ar-display); font-weight:700; }
.fp-counter__label{ margin-top:10px; font-size:13px; color:rgba(253,252,250,0.72); }
[lang="ar"] .fp-counter__label{ font-size:14.5px; }
.fp-counter--on-paper{ border-top-color:var(--fp-rule); }
.fp-counter--on-paper .fp-counter__figure{ color:var(--fp-ink); }
.fp-counter--on-paper .fp-counter__label{ color:var(--fp-stone); }

/* ---------- sections ---------- */

.fp-section{ padding:var(--fp-section-y) var(--fp-gutter); }
.fp-section--sand{ background:var(--fp-sand); }
.fp-section--ink{ background:var(--fp-ink); color:rgba(253,252,250,0.86); }
.fp-section--ink h1,.fp-section--ink h2,.fp-section--ink h3{ color:var(--fp-paper); }

/* The navy figure band, angled top and bottom. The tilt flips in RTL. */
.fp-band{
  background:var(--fp-navy); color:var(--fp-paper);
  padding:152px var(--fp-gutter) 148px;
  clip-path:polygon(0 0,100% var(--fp-tilt),100% 100%,0 calc(100% - var(--fp-tilt)));
}
[dir="rtl"] .fp-band{ clip-path:polygon(0 var(--fp-tilt),100% 0,100% calc(100% - var(--fp-tilt)),0 100%); }
@media (max-width:1024px){ .fp-band{ padding:96px var(--fp-gutter) 92px; } }

/* Ghost word behind a section heading. Three per site, no more. */
.fp-ghost{ position:relative; z-index:0; }
.fp-ghost__word{
  position:absolute; z-index:-1; top:-0.32em; inset-inline-start:-0.06em;
  font-family:var(--fp-serif); font-weight:600; font-size:clamp(72px,10vw,150px);
  line-height:1; color:var(--fp-ghost); pointer-events:none; user-select:none;
}
[lang="ar"] .fp-ghost__word{ font-family:var(--fp-ar-display); font-weight:700; }
@media (max-width:768px){ .fp-ghost__word{ display:none; } }

/* Elements that cross a section edge. Every one collapses below 1024px. */
.fp-cross{ position:relative; z-index:3; }
.fp-cross--up-104{ margin-top:-104px; border:8px solid var(--fp-sand); }
.fp-cross--up-76{ margin-top:-76px; border:6px solid var(--fp-paper); }
.fp-cross--up-56{ margin-top:-56px; border-top:8px solid var(--fp-paper); }
.fp-cross--down-72{ margin-bottom:-72px; }
@media (max-width:1024px){
  .fp-cross--up-104,.fp-cross--up-76,.fp-cross--up-56,.fp-cross--down-72{ margin:0; border-width:0; }
}

/* ---------- cross-site block ---------- */

.fp-crosssite{
  background:var(--fp-brass-tint);
  border-top:3px solid var(--fp-brass);
  padding:44px var(--fp-gutter);
}
.fp-crosssite__statement{ font-family:var(--fp-serif); font-weight:600; font-size:clamp(24px,2.2vw,30px); line-height:1.2; color:var(--fp-ink); }
[lang="ar"] .fp-crosssite__statement{ font-family:var(--fp-ar-display); font-weight:700; line-height:1.4; }
@media (max-width:768px){ .fp-crosssite .fp-btn{ width:100%; } }

/* ---------- video poster facade ---------- */

.fp-poster{ position:relative; display:block; }
.fp-poster__play{
  position:absolute; inset:0; margin:auto;
  width:84px; height:84px; display:grid; place-items:center;
  background:rgba(16,24,32,0.72); color:#fff; font-size:26px; line-height:1;
  border:0; border-radius:var(--fp-radius); cursor:pointer;
  transition:background-color 140ms ease;
}
.fp-poster:hover .fp-poster__play{ background:rgba(16,24,32,0.9); }
.fp-poster__duration{
  position:absolute; inset-inline-end:12px; bottom:12px;
  background:var(--fp-ink); color:var(--fp-paper);
  font-family:var(--fp-mono); font-size:11px; padding:4px 8px;
}
/* The ▶ glyph never mirrors. */
[dir="rtl"] .fp-poster__play,[dir="rtl"] .fp-play-glyph{ transform:scaleX(1); }

/* ---------- lists ---------- */

.fp-rows{ list-style:none; margin:0; padding:0; }
.fp-rows > li{ border-top:1px solid var(--fp-rule); }
.fp-rows > li:first-child{ border-top:2px solid var(--fp-ink); }
.fp-row-link{ display:grid; gap:24px; padding:20px 0; transition:background-color 140ms ease; }
.fp-row-link:hover{ background:var(--fp-sand); text-decoration:none; }

/* ---------- empty state ---------- */

.fp-empty{ background:var(--fp-sand); border:1px solid var(--fp-rule); padding:44px; }
.fp-empty__rule{ width:40px; border-top:3px solid var(--fp-brass); margin-bottom:20px; }
.fp-empty__line{ font-family:var(--fp-serif); font-size:24px; color:var(--fp-ink); margin-bottom:8px; }
[lang="ar"] .fp-empty__line{ font-family:var(--fp-ar-display); font-weight:700; }

/* ---------- header ---------- */

.fp-utility{ background:var(--fp-ink); color:#B9B3A7; font-size:12.5px; min-height:44px; }
.fp-utility a{ color:#B9B3A7; }
.fp-utility a:hover{ color:var(--fp-brass-on-dark); }
.fp-lockup{ font-family:var(--fp-serif); font-weight:600; font-size:27px; line-height:1.15; color:var(--fp-ink); }
[lang="ar"] .fp-lockup{ font-family:var(--fp-ar-display); font-weight:700; font-size:28px; line-height:1.4; }
.fp-lockup__sub{ font-size:13.5px; color:var(--fp-stone); }
[lang="ar"] .fp-lockup__sub{ font-size:15px; }

.fp-nav a{ font-size:14.5px; color:var(--fp-ink); padding:14px 0; border-bottom:2px solid transparent; }
[lang="ar"] .fp-nav a{ font-size:16px; }
.fp-nav a:hover{ text-decoration:none; border-bottom-color:var(--fp-rule); }
.fp-nav .current-menu-item > a,.fp-nav a[aria-current="page"]{ border-bottom-color:var(--fp-brass); }

/* Language switcher — a header element in every state, never inside the menu. */
.fp-lang{ display:inline-flex; align-items:center; gap:10px; font-size:13px; }
.fp-lang a{ color:inherit; padding-bottom:2px; border-bottom:1px solid transparent; }
.fp-lang .current-lang > a,.fp-lang a[aria-current="true"]{ border-bottom-color:var(--fp-brass); }
@media (max-width:1024px){ .fp-lang a{ min-height:48px; min-width:48px; display:inline-flex; align-items:center; justify-content:center; } }

.fp-sticky{ box-shadow:0 1px 0 rgba(16,24,32,0.06); background:var(--fp-paper); }

/* Transparent-over-hero: rules lighten, the CTA becomes an outline. */
.fp-header--transparent .fp-utility{ background:rgba(16,24,32,0.55); }
.fp-header--transparent .fp-rule{ border-color:rgba(255,255,255,0.28); }
.fp-header--transparent .fp-nav a,.fp-header--transparent .fp-lockup{ color:var(--fp-paper); }
.fp-header--transparent .fp-lockup__sub{ color:rgba(253,252,250,0.76); }

/* Mobile drawer rows */
.fp-drawer a{ display:flex; align-items:center; min-height:56px; font-family:var(--fp-serif); font-size:19px; border-inline-start:3px solid transparent; padding-inline-start:16px; }
[lang="ar"] .fp-drawer a{ font-family:var(--fp-ar-display); font-weight:700; font-size:20px; }
.fp-drawer a[aria-current="page"]{ border-inline-start-color:var(--fp-brass); }

/* ---------- footer ---------- */

.fp-footer{ background:var(--fp-ink); color:rgba(253,252,250,0.74); padding:64px var(--fp-gutter) 44px; }
.fp-footer a{ color:rgba(253,252,250,0.74); }
.fp-footer a:hover{ color:var(--fp-brass-on-dark); text-decoration:none; }
.fp-footer__name{ font-family:var(--fp-serif); font-size:21px; color:var(--fp-paper); }
.fp-footer__name-ar{ font-family:var(--fp-ar-display); font-weight:700; font-size:20px; color:rgba(253,252,250,0.82); }
.fp-footer__head{ font-family:var(--fp-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fp-brass-on-dark); }
[lang="ar"] .fp-footer__head{ font-family:var(--fp-ar-body); font-size:13px; letter-spacing:0; text-transform:none; }

/* ---------- reveals — every animation has a static equivalent ---------- */

.fp-reveal{ opacity:0; transform:translateY(12px); transition:opacity 240ms ease,transform 240ms ease; }
.fp-reveal.is-in{ opacity:1; transform:none; }
/* If the script never runs, the content is simply visible. */
.no-js .fp-reveal,html:not(.fp-js) .fp-reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .fp *,.fp *::before,.fp *::after{ animation:none !important; transition:none !important; }
  .fp-reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- print: the CV is read on the page, and printed from it ---------- */

@media print{
  .fp-utility,.fp-nav,.fp-lang,.fp-crosssite,.fp-footer,.fp-poster,.fp-shot{ display:none !important; }
  .fp{ background:#fff; color:#000; }
  .fp a::after{ content:' (' attr(href) ')'; font-size:10px; }
}

/* ---------- language variable swap ----------
   Arabic is the primary language, so the display and body roles repoint at the
   Arabic faces on the body element. Every .fp-* component that uses var(--fp-serif)
   or var(--fp-sans) follows automatically, with no duplicated rule. */
body.fp-ar{
  --fp-serif:'Tajawal','Cairo',sans-serif;
  --fp-sans:'Cairo','Tajawal',sans-serif;
}
/* Elementor writes its global typography onto widget classes; these keep the
   Arabic faces winning on Arabic pages without touching Elementor's own output. */
body.fp-ar .elementor-heading-title,
body.fp-ar .elementor-widget-heading .elementor-heading-title{ font-family:var(--fp-ar-display); font-weight:700; }
body.fp-ar .elementor-widget-text-editor,
body.fp-ar .elementor-widget-text-editor p{ font-family:var(--fp-ar-body); }

/* ==========================================================================
   Header — three rows, four states, on Blocksy's markup
   ========================================================================== */

/* Row 1 — utility, 44px on Ink */
#header [data-row="top"]{ background:var(--fp-ink); }
#header [data-row="top"] > .ct-container{ min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
#header [data-row="top"],
#header [data-row="top"] .entry-content{ color:#B9B3A7; font-size:12.5px; line-height:1.4; }
[lang="ar"] #header [data-row="top"]{ font-size:13.5px; color:#C6C0B4; }
#header [data-row="top"] a{ color:inherit; text-decoration:none; }
#header [data-row="top"] a:hover{ color:var(--fp-brass-on-dark); text-decoration:none; }
#header [data-row="top"] [data-column="end"] > [data-items]{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.fp-utility__profiles{ display:inline-flex; gap:14px; }

/* Row 2 — masthead */
#header [data-row="middle"]{ background:var(--fp-paper); }
#header [data-row="middle"] > .ct-container{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:24px; padding-bottom:24px; }
.fp-lockup-wrap{ display:block; text-decoration:none; }
.fp-lockup-wrap:hover{ text-decoration:none; }
.fp-lockup-wrap .fp-lockup{ display:block; }
.fp-lockup-wrap .fp-lockup__sub{ display:block; margin-top:4px; }

/* Row 3 — menu */
#header [data-row="bottom"]{ background:var(--fp-paper); border-top:1px solid var(--fp-rule); }
/* The menu row used to be the tightest thing on the site: eleven items plus
   the CTA against a container that is 1290px at 1440 and less below it. Three
   constraints keep it honest, and none of them is "shrink until it fits at
   1440". The menu column may shrink (min-width:0 - without it a flex item
   refuses to go below its content width and simply overflows); the CTA column
   may not (flex-shrink:0), so the menu can never run underneath it; and the
   gap and type size are fluid across the 1025-1440 band rather than fixed at
   the widest. The navigation now carries eight top-level items with three
   dropdowns, so collapse_non_fitting_menu_items is switched off: nothing needs
   collapsing, and a collapse running over a menu that already fits is a second
   implementation waiting to disagree with the first. */
#header [data-row="bottom"] > .ct-container{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:56px; }
#header [data-row="bottom"] [data-column="start"]{ min-width:0; flex:1 1 auto; }
#header [data-row="bottom"] [data-column="end"]{ flex:0 0 auto; }
#header [data-row="bottom"] [data-column="start"] > [data-items]{ display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); min-width:0; }
#header [data-row="bottom"] [data-column="end"] > [data-items]{ display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); flex-shrink:0; }
#header [data-row="bottom"] .menu{
  display:flex; margin:0; padding:0; list-style:none; min-width:0;
  /* Back to the design's flat 22px. The clamp existed to squeeze eleven items
     into the row; with eight top-level items there is room to spare at every
     width down to 1083, so the compromise is no longer needed. The floor stays
     as insurance against a longer translation. */
  gap:clamp(16px,1.53vw,22px);
  /* nowrap keeps the row one line high. Nothing collapses any more - the
     navigation carries eight top-level items and they fit at every width from
     1083 up, in both languages, with 82px to spare at the worst measured
     point. */
  flex-wrap:nowrap;
}
#header [data-row="bottom"] .menu > li{ flex-shrink:0; }
#header [data-row="bottom"] .menu > li > a{
  display:inline-flex; align-items:center; min-height:44px; white-space:nowrap;
  font-family:var(--fp-sans); font-size:14.5px; font-weight:400; color:var(--fp-ink);
  text-transform:none; letter-spacing:normal;
  text-decoration:none; border-bottom:2px solid transparent;
}
[lang="ar"] #header [data-row="bottom"] .menu > li > a{ font-family:var(--fp-ar-body); font-size:16px; }
#header [data-row="bottom"] .menu > li > a:hover{ border-bottom-color:var(--fp-rule); text-decoration:none; }
#header [data-row="bottom"] .menu > li.current-menu-item > a,
#header [data-row="bottom"] .menu > li.current_page_item > a{ border-bottom-color:var(--fp-brass); }
.fp-cta-patients{ min-height:44px; padding:0 20px; font-size:14px; flex-shrink:0; white-space:nowrap; }

/* ---- State 3: sticky after 120px ----
   The utility and masthead rows go, one 56px row remains carrying a shortened
   lockup, the switcher and the CTA. Solid paper, never transparent. */
.fp-sticky-lockup,
.fp-sticky-lang{ display:none; }
.fp-sticky-lockup a{ font-family:var(--fp-serif); font-weight:600; font-size:19px; color:var(--fp-ink); text-decoration:none; }
[lang="ar"] .fp-sticky-lockup a{ font-family:var(--fp-ar-display); font-weight:700; font-size:20px; }

@media (min-width:1025px){
  body.fp-stuck #header{ position:fixed; top:0; left:0; right:0; z-index:900; }
  body.fp-stuck #header [data-row="top"],
  body.fp-stuck #header [data-row="middle"]{ display:none; }
  body.fp-stuck #header [data-row="bottom"]{
    background:var(--fp-paper);
    border-top:0;
    box-shadow:0 1px 0 rgba(16,24,32,0.06);
  }
  body.fp-stuck #header [data-row="bottom"] > .ct-container{ min-height:64px; }
  body.fp-stuck .fp-sticky-lockup,
  body.fp-stuck .fp-sticky-lang{ display:inline-flex; align-items:center; }
  /* The design asked for eight items in the sticky row and eleven in the
     default row. The navigation now carries eight top level items everywhere,
     so there is nothing left to drop and the rule that hid the ninth onwards
     is gone with it. */
  body.fp-stuck{ padding-top:var(--fp-stuck-pad,0); }
}

/* ---- State 2: transparent over the hero, Home only, desktop only ----
   The utility row keeps a scrim so its small text stays legible over a
   photograph; the masthead and menu rows go clear and the CTA becomes an
   outline. The whole state is gated at 1025px: below that the header loses
   transparency and returns to Paper, because the mobile bar has no room to
   sit over the hero. Blocksy's own transparent_behaviour is set to desktop
   only to match, and the reset below covers the 1000-1024 band where Blocksy
   still counts the viewport as desktop. */
/* Every rule here is scoped to body:not(.fp-stuck). The sticky state is solid
   Paper and never transparent, and the reliable way to say that is to stop the
   transparent rules matching once the header sticks, rather than to write a
   second set of rules that has to out-specify them. */
@media (min-width:1025px){
  body:not(.fp-stuck) #header [data-row="top"][data-transparent-row]{ background:rgba(16,24,32,0.55); }
  body:not(.fp-stuck) #header [data-row="middle"][data-transparent-row],
  body:not(.fp-stuck) #header [data-row="bottom"][data-transparent-row]{ background:transparent; border-top-color:rgba(255,255,255,0.28); }
  body:not(.fp-stuck) #header [data-row="middle"][data-transparent-row] .fp-lockup,
  body:not(.fp-stuck) #header [data-row="bottom"][data-transparent-row] .menu > li > a{ color:var(--fp-paper); }
  body:not(.fp-stuck) #header [data-row="middle"][data-transparent-row] .fp-lockup__sub{ color:rgba(253,252,250,0.78); }
  body:not(.fp-stuck) #header [data-transparent-row] .fp-cta-patients{ background:transparent; color:var(--fp-paper); border:1px solid rgba(253,252,250,0.5); }
  body:not(.fp-stuck) #header [data-transparent-row] .fp-cta-patients:hover{ background:rgba(253,252,250,0.08); border-color:var(--fp-brass-on-dark); }
  body:not(.fp-stuck) #header [data-transparent-row] .fp-lang a{ color:var(--fp-paper); }
}
@media (max-width:1024px){
  #header [data-row="top"][data-transparent-row]{ background:var(--fp-ink); }
  #header [data-row="middle"][data-transparent-row]{ background:var(--fp-paper); }
  #header [data-row="bottom"][data-transparent-row]{ background:var(--fp-paper); border-top-color:var(--fp-rule); }
}

/* ---- State 4: mobile ---- */
@media (max-width:1024px){
  #header [data-row="top"] > .ct-container{ min-height:36px; }
  #header [data-row="middle"] > .ct-container{ min-height:60px; padding-top:0; padding-bottom:0; }
  .fp-lockup--bar a{ font-family:var(--fp-serif); font-weight:600; font-size:18px; color:var(--fp-ink); text-decoration:none; }
  [lang="ar"] .fp-lockup--bar a{ font-family:var(--fp-ar-display); font-weight:700; font-size:19px; }
}

/* Drawer rows are 56px, the active one carries a 3px brass inline-start border.
   The panel opens from the left in English and the right in Arabic - the
   inline-start side in both, which is what side_panel_position "start" gives. */
#offcanvas .menu > li > a,
#offcanvas .mobile-menu > li > a{
  min-height:56px; display:flex; align-items:center;
  font-family:var(--fp-serif); font-weight:600; font-size:19px;
  border-inline-start:3px solid transparent; padding-inline-start:16px;
}
[lang="ar"] #offcanvas .menu > li > a,
[lang="ar"] #offcanvas .mobile-menu > li > a{ font-family:var(--fp-ar-display); font-weight:700; font-size:20px; }
#offcanvas .menu > li.current-menu-item > a{ border-inline-start-color:var(--fp-brass); }
.fp-drawer-foot{ display:flex; flex-direction:column; gap:16px; padding:24px 16px 0; margin-top:24px; border-top:1px solid var(--fp-rule); }
.fp-drawer-foot .fp-btn{ width:100%; }
.fp-lang--pair{ display:flex; gap:12px; }
.fp-lang--pair a{ flex:1; min-height:48px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--fp-rule); border-bottom-width:1px; }
.fp-lang--pair a[aria-current="true"]{ border-color:var(--fp-brass); background:var(--fp-brass-tint); }
.fp-lang--pair .fp-lang__sep{ display:none; }

/* ==========================================================================
   Footer — Ink, four columns, the Arabic name beneath the lockup
   ========================================================================== */

#footer .fp-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
@media (max-width:1024px){ #footer .fp-footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:768px){ #footer .fp-footer-grid{ grid-template-columns:1fr; gap:28px; } }
.fp-footer__col ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.fp-footer__col li a{ font-size:14.5px; }
[lang="ar"] .fp-footer__col li a{ font-size:16px; }
.fp-footer__legal{ margin-top:44px; padding-top:20px; border-top:1px solid rgba(253,252,250,0.14); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:rgba(253,252,250,0.55); }

/* ==========================================================================
   Page content — the pieces Elementor's own controls cannot express
   Layout (grids, gaps, padding, order) is built with Elementor containers.
   Only identity lives here: grounds, faces and the states that need a
   language or a dark ground to resolve correctly.
   ========================================================================== */

/* The Latin name lockup never swaps to the Arabic face. body.fp-ar repoints
   --fp-serif at Tajawal, which is right everywhere except here: the Latin
   name form carries the search identity and must render in the Latin serif
   in both languages. */
.fp-footer__name{ font-family:'Source Serif 4',Georgia,'Times New Roman',serif; }

/* Ink and Navy grounds on a block rather than a whole section: the hero
   headline card, the referring-physicians panel, the closing bands on
   Training and Talks. .fp-section--ink stays for full-width sections. */
.fp-onink{ background:var(--fp-ink); color:rgba(253,252,250,0.86); }
.fp-onnavy{ background:var(--fp-navy); color:rgba(253,252,250,0.86); }
.fp-onink h1,.fp-onink h2,.fp-onink h3,.fp-onink .fp-serif,
.fp-onnavy h1,.fp-onnavy h2,.fp-onnavy h3,.fp-onnavy .fp-serif{ color:var(--fp-paper); }
.fp-onink a,.fp-onnavy a{ color:var(--fp-paper); }
.fp-onink .fp-meta,.fp-onink .fp-eyebrow,
.fp-onnavy .fp-meta,.fp-onnavy .fp-eyebrow{ color:var(--fp-brass-on-dark); }

/* The unconfirmed-value colour on a dark ground. #9C332B measures 1.7:1 on
   Navy, so it lightens to #E08A80 (4.7:1 on Navy, 6.7:1 on Ink) while
   staying unmistakably the same warning red. */
.fp-band .fp-tbc,.fp-onink .fp-tbc,.fp-onnavy .fp-tbc,.fp-section--ink .fp-tbc{ color:#E08A80; }

/* Referral note — the small card at the hero's opposite top corner. Paper at
   94% so the photograph behind it stays faintly present. */
.fp-note{ background:rgba(253,252,250,0.94); padding:20px 22px; }
.fp-note__head{ font-family:var(--fp-mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--fp-brass-text); }
[lang="ar"] .fp-note__head{ font-family:var(--fp-ar-body); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; }
.fp-note__body{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--fp-muted); }
[lang="ar"] .fp-note__body{ font-size:15px; line-height:1.8; }

/* A record cell: mono brass label over a serif value. Home's record split,
   the CV facts row, the clinical-scope "at a glance" panel. */
.fp-cell{ border-top:1px solid var(--fp-rule); padding-top:14px; }
.fp-cell__label{ display:block; font-family:var(--fp-mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--fp-brass-text); }
[lang="ar"] .fp-cell__label{ font-family:var(--fp-ar-body); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; }
.fp-cell__value{ display:block; margin-top:8px; font-size:15px; line-height:1.6; color:var(--fp-body); }
[lang="ar"] .fp-cell__value{ font-size:16px; line-height:1.85; }

/* Two-column rule list — the nine hospitals on Home, the procedure lists on
   Clinical scope. Rows are hairline-separated and the first takes the 2px
   chapter rule, exactly as .fp-rows does for linked rows. */
.fp-list{ list-style:none; margin:0; padding:0; }
.fp-list > li{ border-top:1px solid var(--fp-rule); padding:14px 0; font-size:16.5px; color:var(--fp-body); }
.fp-list > li:first-child{ border-top:2px solid var(--fp-ink); }
[lang="ar"] .fp-list > li{ font-size:17.5px; line-height:1.85; }
.fp-list__sub{ display:block; margin-top:4px; font-size:13px; color:var(--fp-stone); }
[lang="ar"] .fp-list__sub{ font-size:14.5px; }

/* The poster facade sits over a placeholder ground rather than a still,
   because no video has been shot yet. The play target is deliberately not a
   control: there is nothing to open until the host URL is confirmed. */
.fp-poster__play[aria-hidden="true"]{ cursor:default; }

/* ---------- footer, bound to Blocksy's markup ----------
   Blocksy renders <footer id="footer" class="ct-footer"> and puts the widget
   area inside a .ct-container, so the Ink ground is bound to the footer element
   itself: full-bleed ground, grid still on the 1440 measure. Same approach as
   the header rows above. .fp-footer stays for any hand-built footer. */
#footer.ct-footer{ background:var(--fp-ink); color:rgba(253,252,250,0.74); }
#footer.ct-footer a{ color:rgba(253,252,250,0.74); text-decoration:none; }
#footer.ct-footer a:hover{ color:var(--fp-brass-on-dark); text-decoration:underline; text-decoration-color:var(--fp-brass-on-dark); text-underline-offset:4px; }
#footer [data-row="middle"] > .ct-container{ padding-top:64px; padding-bottom:44px; }
#footer .widget{ margin:0; padding:0; }
/* Blocksy colours the widget wrapper, so #footer.ct-footer's colour never
   reached bare text: the address lines are plain <li> with no class and no <a>,
   and fell through to rgb(58,79,102) - a cool blue-grey the system bans, at
   2.12:1 on Ink. Setting the colour on the wrapper restores inheritance for
   anything unclassed; elements with their own colour rule (the brass heads, the
   Paper name, .fp-tbc) still win over inheritance. */
#footer.ct-footer .widget,
#footer.ct-footer .textwidget,
#footer.ct-footer .ct-widget{ color:rgba(253,252,250,0.74); }
#footer .widget-title{ display:none; }
.fp-footer__name-ar{ display:block; margin-top:8px; }
.fp-footer__col > p{ margin:14px 0 0; max-width:none; font-size:14px; line-height:1.8; color:rgba(253,252,250,0.6); }
[lang="ar"] .fp-footer__col > p{ font-size:15px; line-height:1.9; }
.fp-footer__col--office ul{ gap:6px; }

/* ---------- component sizes the base layer left open ---------- */

/* The hero card's headline is an h1 for document structure but sits at 40px,
   not the page-title scale, because it lives inside a 760px card. Elementor
   puts the widget class on the wrapper, so the size is set on the title. */
.fp-h1--card .elementor-heading-title{ font-size:clamp(28px,2.9vw,40px); line-height:1.15; letter-spacing:-0.015em; }
[lang="ar"] .fp-h1--card .elementor-heading-title{ font-size:clamp(27px,2.8vw,38px); line-height:1.4; letter-spacing:0; }

/* Card titles. The base rule sets the face; these set the two sizes the design
   uses — the grid card, and the lead item on Press and Home. */
.fp-card__title{ display:block; font-size:20px; line-height:1.3; }
[lang="ar"] .fp-card__title{ font-size:21px; line-height:1.5; }
.fp-card__title--lead{ font-size:clamp(22px,1.9vw,28px); }
[lang="ar"] .fp-card__title--lead{ font-size:clamp(21px,1.85vw,27px); line-height:1.45; }

/* Buttons travel in pairs on almost every page. */
.fp-btnrow{ display:flex; flex-wrap:wrap; gap:16px; }
@media (max-width:768px){ .fp-btnrow{ flex-direction:column; } .fp-btnrow .fp-btn{ width:100%; } }

/* A photograph that crosses a section edge carries a frame in the ground it
   crosses into, so the edge stays legible where the two grounds meet. The
   frame is defined with the other crossing offsets under "Cascade
   corrections" below, because it has to be stated mobile-first to survive
   Elementor's container border properties. */

/* ==========================================================================
   Cascade corrections — Elementor's frontend CSS is enqueued after this file
   Its base rules (.e-con, .elementor-widget) carry the same specificity as the
   component classes, so on a tie Elementor wins on source order. Each rule
   below restates an existing component declaration at one step more
   specificity. Nothing new is designed here.
   ========================================================================== */

/* .elementor-widget sets position:relative, which pins the ghost word into the
   flow instead of behind the heading. */
.fp-ghost__word.fp-ghost__word{ position:absolute; }

/* .e-con sets z-index from its own custom property, which drops the crossing
   elements behind the section they are meant to cross into. */
.fp-cross.fp-cross{ position:relative; z-index:3; }

/* .fp a sets link colour with (0,1,1) and beats the button variants at (0,1,0),
   which renders navy text on a navy button. This also fixes the header CTA. */
.fp .fp-btn--primary{ color:#fff; }
.fp .fp-btn--secondary{ color:var(--fp-ink); }
.fp .fp-btn--on-dark{ color:var(--fp-ink); }
.fp .fp-btn--outline-dark{ color:var(--fp-paper); }
.fp .fp-btn--tertiary{ color:var(--fp-on-ground); border-bottom-color:var(--fp-rule-on-ground); }
.fp .fp-btn--tertiary:hover{ color:var(--fp-rule-on-ground); }
.fp .fp-btn--primary:hover,.fp .fp-btn--secondary:hover{ color:var(--fp-paper); }
.fp .fp-btn[disabled],.fp .fp-btn--disabled{ color:var(--fp-disabled-ink); }

/* The frames and the crossing offsets are stated mobile-first, so the frame
   exists only where the overlap it belongs to exists. Elementor writes border
   width onto .e-con from custom properties, and a shorthand that is added and
   then removed loses that exchange; adding it only at the wide breakpoint does
   not depend on the order of the two files. */
.fp-frame-paper,.fp-frame-sand{ border-style:solid; border-width:0; }
.fp-frame-paper{ border-color:var(--fp-paper); }
.fp-frame-sand{ border-color:var(--fp-sand); }
.fp-cross--up-104,.fp-cross--up-76,.fp-cross--up-56{ border-style:solid; border-width:0; }
.fp-cross--up-104{ border-color:var(--fp-sand); }
.fp-cross--up-76,.fp-cross--up-56{ border-color:var(--fp-paper); }
@media (min-width:1025px){
  .fp-frame-paper.fp-frame-paper{ border-width:6px; }
  .fp-frame-sand.fp-frame-sand{ border-width:8px; }
  .fp-cross--up-104.fp-cross--up-104{ border-width:8px; }
  .fp-cross--up-76.fp-cross--up-76{ border-width:6px; }
  .fp-cross--up-56.fp-cross--up-56{ border-width:8px 0 0; }
}

/* The tertiary link is a rule under type, so its box is only as tall as the
   type — 22px against a 44px minimum target. The target is expanded with a
   pseudo-element so the brass rule stays tight to the text where it belongs.
   Inline links inside a paragraph keep the WCAG inline exception. */
.fp-btn--tertiary{ position:relative; }
.fp-btn--tertiary::after{ content:''; position:absolute; inset:-12px -8px; }

/* ==========================================================================
   TEMPORARY — hero scrim while the photography is still a placeholder
   Transparent-over-hero assumes a dark photograph behind it. Until the shoot
   lands, every hero is a cream stripe field, and Paper text on it is
   unreadable. This scrim carries the masthead and menu rows to 6.4:1 for the
   15px subline and the 16px menu, which is the smallest type in those rows.
   REMOVE THIS WHOLE BLOCK, and the fp-hero-placeholder body class in
   faculty-paper.php, on the day real hero photography is in the library.
   ========================================================================== */
@media (min-width:1025px){
  body.fp-hero-placeholder:not(.fp-stuck) #header [data-row="middle"][data-transparent-row],
  body.fp-hero-placeholder:not(.fp-stuck) #header [data-row="bottom"][data-transparent-row]{
    background:rgba(16,24,32,0.68);
  }
  body.fp-hero-placeholder:not(.fp-stuck) #header [data-row="bottom"][data-transparent-row]{
    border-top-color:rgba(255,255,255,0.18);
  }
}

/* Elementor's boxed container carries its padding on the outer element, so an
   absolutely positioned child resolves against the padding box rather than the
   content column. Without this the ghost word's optical offset lands outside
   the viewport instead of beside the heading. */
.fp-ghost__word.fp-ghost__word{ inset-inline-start:calc(var(--fp-gutter) - 0.06em); }

/* The referral note sits at the hero's opposite top corner. On the artboard the
   header stands above the hero, so 24px of clearance is enough; in the built
   page the transparent header overlays the hero, so the note is offset past it
   instead. The photographs still run up behind the header, which is the whole
   point of the transparent state. --fp-header-h is measured and published by
   the header script; the fallback is the tallest measured header so the note
   never starts underneath it. Below 1025px the header is back in the flow and
   the offset is not wanted. */
@media (min-width:1025px){
  /* Doubled for specificity: .e-con sets margin from its own custom property
     and Elementor's stylesheet is enqueued after this one. */
  .fp-note--hero.fp-note--hero{ margin-top:calc(var(--fp-header-h,290px) - 16px); }
}

/* ==========================================================================
   Dropdowns - the first on the site, so this sets the pattern
   Hairline box on Paper, zero radius, no shadow, a 2px Ink topper like a
   chapter rule, and brass on the inline-start edge for hover and the current
   page. Blocksy renders its own aria-haspopup button beside the parent link,
   which is what makes the grouping label reachable from the keyboard.
   ========================================================================== */
#header .sub-menu{
  min-width:214px; margin:0; padding:6px 0; list-style:none;
  background:var(--fp-paper);
  border:1px solid var(--fp-rule);
  border-top:2px solid var(--fp-ink);
  border-radius:0; box-shadow:none;
}
#header .sub-menu > li > a{
  display:flex; align-items:center; min-height:44px; padding:0 18px;
  font-family:var(--fp-sans); font-size:14.5px; font-weight:400; color:var(--fp-ink);
  text-decoration:none; white-space:nowrap;
  border-inline-start:2px solid transparent;
  transition:background-color 140ms ease,border-color 140ms ease;
}
[lang="ar"] #header .sub-menu > li > a{ font-family:var(--fp-ar-body); font-size:16px; }
#header .sub-menu > li > a:hover{ background:var(--fp-sand); border-inline-start-color:var(--fp-brass); text-decoration:none; }
#header .sub-menu > li.current-menu-item > a{ border-inline-start-color:var(--fp-brass); background:var(--fp-sand); }
/* A parent whose child is the current page keeps the brass underline. */
#header [data-row="bottom"] .menu > li.current-menu-ancestor > a,
#header [data-row="bottom"] .menu > li.current-menu-parent > a{ border-bottom-color:var(--fp-brass); }
/* The chevron is Blocksy's inline SVG, not an icon library, so it costs no
   request. It only needs to sit at Stone and turn brass with its parent. */
#header .ct-toggle-dropdown-desktop{ display:inline-flex; margin-inline-start:6px; }
#header .ct-toggle-dropdown-desktop .ct-icon{ fill:var(--fp-stone); transition:fill 140ms ease; }
#header .menu > li:hover > a .ct-toggle-dropdown-desktop .ct-icon{ fill:var(--fp-brass); }
/* Mobile drawer submenus: same hairline logic, no box. */
#offcanvas .sub-menu{ border:0; padding:0 0 0 16px; background:transparent; min-width:0; }
#offcanvas .sub-menu > li > a{ min-height:48px; font-size:16px; }

/* ==========================================================================
   The sticky row has its own width budget
   It carries the shortened lockup and the language switcher as well as the
   menu and the CTA, so roughly 120px less is available to the menu than in the
   default row - measured 870px against 982px at 1280. Both the lockup and the
   switcher are specified for every state, so neither is dropped; the menu
   tightens instead, which suits a compact utility bar anyway.
   ========================================================================== */
@media (min-width:1025px){
  body.fp-stuck #header [data-row="bottom"] .menu{ gap:clamp(9px,0.85vw,14px); }
  body.fp-stuck.fp-stuck #header [data-row="bottom"] .menu > li > a{ font-size:clamp(13px,0.98vw,14px); }
  [lang="ar"] body.fp-stuck.fp-stuck #header [data-row="bottom"] .menu > li > a{ font-size:clamp(13.5px,1.05vw,15px); }
  body.fp-stuck .fp-sticky-lockup a{ font-size:18px; }
  [lang="ar"] body.fp-stuck .fp-sticky-lockup a{ font-size:19px; }
}

/* The pressure valve, and a knowing deviation from "shortened lockup in every
   state". Below 1366 the sticky row's spare space falls to 28px in both
   languages, and with the overflow collapse switched off there is no backstop:
   one longer menu label and it becomes a silent overlap. The lockup is the
   107px element causing the squeeze, and the name is already in the tab title,
   in the masthead above and in the footer below, so dropping it on a narrow
   laptop costs less than an overlap would. Measured: +28px at 1280 with the
   lockup, +135px without. */
@media (min-width:1025px) and (max-width:1365px){
  body.fp-stuck .fp-sticky-lockup{ display:none; }
}

/* ==========================================================================
   Curriculum vitae - the document of record
   No download anywhere on this page: the print stylesheet above is what
   handles paper. Everything applied to an Elementor container carries its
   class twice, because .e-con matches at the same specificity and Elementor's
   frontend CSS is enqueued after this file.
   ========================================================================== */

/* ---- masthead: text column beside a 520px portrait ---- */
.fp-cv-masthead.fp-cv-masthead{ display:grid; grid-template-columns:1fr 520px; gap:56px; align-items:start; }
@media (max-width:1024px){ .fp-cv-masthead.fp-cv-masthead{ grid-template-columns:1fr; gap:32px; } }
.fp-cv-masthead .fp-shot{ aspect-ratio:4/5; min-height:480px; }
@media (max-width:1024px){ .fp-cv-masthead .fp-shot{ aspect-ratio:3/2; min-height:0; } }

.fp-cv-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px; }
.fp-cv-facts > div{ border-top:1px solid var(--fp-rule); padding-top:12px; }
.fp-cv-facts .fp-meta{ display:block; margin-bottom:6px; }
.fp-cv-fact{ display:block; font-size:15px; color:var(--fp-ink); line-height:1.45; }
[lang="ar"] .fp-cv-fact{ font-size:16.5px; line-height:1.7; }
@media (max-width:768px){ .fp-cv-facts{ grid-template-columns:1fr 1fr; gap:20px; } }

/* The academic profile links live here and in the footer, nowhere else. */
.fp-cv-profiles{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px; padding-top:16px; border-top:1px solid var(--fp-rule); }
.fp-cv-profiles .fp-meta{ width:100%; }
.fp-cv-nodl{ margin-top:24px; font-size:13px; color:var(--fp-stone); }
[lang="ar"] .fp-cv-nodl{ font-size:14.5px; }

/* ---- body: sticky index beside the chapters ---- */
.fp-cv-body.fp-cv-body{ display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; }
@media (max-width:1024px){ .fp-cv-body.fp-cv-body{ grid-template-columns:1fr; gap:24px; } }

/* The index sticks below the sticky header rather than under it. */
.fp-cv-index.fp-cv-index{ position:sticky; top:88px; display:block; }
@media (max-width:1024px){ .fp-cv-index.fp-cv-index{ display:none; } }

/* The index is a hand-built list of anchor links, not Elementor's Table of
   Contents widget. The widget failed the design contract three ways at once:
   it renders only a spinner server-side so the index is a dead end without
   JavaScript; it draws a bordered panel in rgb(157,165,174), which is both a
   box and a cool grey in a system that bans both; and its active-item tracking
   stops updating once every heading is above the viewport, leaving the marker
   pointing at the wrong chapter. A plain list of real links is server-rendered,
   costs no widget handler, and lets the active state be driven from one place.
   Its scroll tracking lives in faculty-paper.php. */
.fp-cv-index__label{
  display:block; margin-bottom:14px;
  font-family:var(--fp-mono); font-size:11px; font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fp-brass-text);
}
[lang="ar"] .fp-cv-index__label{ font-family:var(--fp-ar-body); font-size:13px; letter-spacing:0; text-transform:none; }
.fp-cv-index__nav ul{ list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--fp-rule); }
.fp-cv-index__nav li{ margin:0; }
.fp-cv-index__nav a{
  display:block; padding:10px 0; padding-inline-start:16px;
  margin-inline-start:-1px; border-inline-start:2px solid transparent;
  font-family:var(--fp-sans); font-size:15px; line-height:1.35; color:var(--fp-muted);
  text-decoration:none; transition:color 140ms ease,border-color 140ms ease;
}
[lang="ar"] .fp-cv-index__nav a{ font-family:var(--fp-ar-body); font-size:16px; }
.fp-cv-index__nav a:hover{ color:var(--fp-ink); text-decoration:none; }
/* The active item. The class sits on the anchor itself, so the selector targets
   the anchor itself - that is exactly what went wrong with the widget version. */
.fp-cv-index__nav a.is-current{ border-inline-start-color:var(--fp-brass); color:var(--fp-ink); font-weight:500; }

/* Jump chips: the mobile index, and the no-JS index at every width. The list
   inside the Table of Contents is built client side, so without scripting the
   widget is a bare spinner - these anchors are real links and always work. */
.fp-jump{ display:none; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
@media (max-width:1024px){ .fp-jump{ display:flex; } }
/* The hand-built index is real markup, so it works without scripting; only the
   active marker needs JS. The chips stay as the mobile index. */
html:not(.fp-js) .fp-jump{ display:flex; }

/* ---- chapters: 2px Ink rule, serif H2, rows on 150px / 1fr ---- */
.fp-cv-chapter.fp-cv-chapter{ display:block; border-top:2px solid var(--fp-ink); padding-top:24px; margin-top:64px; }
.fp-cv-chapters > .fp-cv-chapter:first-of-type,
.fp-cv-chapter.fp-cv-chapter:first-child{ margin-top:0; }
.fp-cv-chapter > .elementor-widget-heading .elementor-heading-title{ font-size:clamp(26px,2.2vw,30px); line-height:1.2; }
.fp-cv-chapter .elementor-widget{ margin-bottom:0; }

.fp-cv-rows{ list-style:none; margin:0; padding:0; }
.fp-cv-rows > li{ display:grid; grid-template-columns:150px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--fp-rule); }
.fp-cv-rows > li:first-child{ border-top:0; }
.fp-cv-date{ font-family:var(--fp-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fp-brass-text); padding-top:5px; }
[lang="ar"] .fp-cv-date{ font-family:var(--fp-ar-body); font-size:14px; letter-spacing:0; text-transform:none; }
.fp-cv-title{ display:block; font-family:var(--fp-serif); font-weight:600; font-size:21px; line-height:1.3; color:var(--fp-ink); }
[lang="ar"] .fp-cv-title{ font-family:var(--fp-ar-display); font-weight:700; font-size:22px; line-height:1.5; }
.fp-cv-detail{ display:block; font-size:15px; line-height:1.6; color:var(--fp-muted); margin-top:5px; }
[lang="ar"] .fp-cv-detail{ font-size:16.5px; line-height:1.8; }
@media (max-width:768px){
  .fp-cv-rows > li{ grid-template-columns:1fr; gap:6px; }
  .fp-cv-date{ padding-top:0; }
}

/* Fellowship training: three cards with hospital exteriors. */
.fp-cv-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.fp-cv-card .fp-shot{ aspect-ratio:3/2; margin-bottom:16px; }
.fp-cv-card .fp-cv-date{ display:block; padding-top:0; margin-bottom:6px; }
@media (max-width:768px){ .fp-cv-cards{ grid-template-columns:1fr; gap:24px; } }

/* A caption on a 2px brass inline-start rule. */
.fp-cv-chapters .fp-shot--still,
.fp-cv-chapters > .e-con .fp-shot{ aspect-ratio:21/9; }
.fp-caption{ border-inline-start:2px solid var(--fp-brass); padding-inline-start:16px; margin-top:16px; font-size:13px; line-height:1.6; color:var(--fp-stone); }
[lang="ar"] .fp-caption{ font-size:14.5px; line-height:1.8; }

/* ==========================================================================
   Clinical scope - written for a referring colleague
   Procedure names and case categories only. No outcome figures, percentages,
   survival data or volumes appear on this page under any circumstances, and
   nothing added here may be readable as one.
   ========================================================================== */
.fp-scope-top.fp-scope-top{ display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:start; }
@media (max-width:1024px){ .fp-scope-top.fp-scope-top{ grid-template-columns:1fr; gap:32px; } }

.fp-glance{ background:var(--fp-sand); border:1px solid var(--fp-rule); padding:28px; }
.fp-glance__title{ display:block; font-family:var(--fp-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fp-brass-text); margin-bottom:18px; }
[lang="ar"] .fp-glance__title{ font-family:var(--fp-ar-body); font-size:13px; letter-spacing:0; text-transform:none; }
.fp-glance dl{ margin:0; }
.fp-glance dt{ font-size:13px; color:var(--fp-stone); padding-top:14px; border-top:1px solid var(--fp-rule); }
.fp-glance dt:first-of-type{ border-top:0; padding-top:0; }
.fp-glance dd{ margin:3px 0 14px; font-size:16px; line-height:1.45; color:var(--fp-ink); }
[lang="ar"] .fp-glance dt{ font-size:14.5px; }
[lang="ar"] .fp-glance dd{ font-size:17.5px; line-height:1.7; }

.fp-scope-lists.fp-scope-lists{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:768px){ .fp-scope-lists.fp-scope-lists{ grid-template-columns:1fr; gap:40px; } }
.fp-scope-list__head{ border-top:2px solid var(--fp-ink); padding-top:16px; margin-bottom:4px; }
.fp-scope-list__sub{ display:block; margin-top:8px; font-family:var(--fp-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fp-stone); }
[lang="ar"] .fp-scope-list__sub{ font-family:var(--fp-ar-body); font-size:13px; letter-spacing:0; text-transform:none; }
.fp-scope-rows{ list-style:none; margin:0; padding:0; }
.fp-scope-rows > li{ border-top:1px solid var(--fp-rule); padding:14px 0; font-size:16.5px; line-height:1.5; color:var(--fp-body); }
.fp-scope-rows > li:first-child{ border-top:0; }
[lang="ar"] .fp-scope-rows > li{ font-size:18px; line-height:1.75; }

/* The full-bleed strip: one photograph per page, a breath between blocks. */
.fp-strip.fp-strip{ padding-left:0; padding-right:0; }
.fp-strip .fp-shot{ aspect-ratio:21/9; }

/* The two closing panels: what this service refers on, and what to send. */
.fp-panels.fp-panels{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch; }
@media (max-width:768px){ .fp-panels.fp-panels{ grid-template-columns:1fr; gap:24px; } }
.fp-panel.fp-panel{ display:block; padding:36px; }
.fp-panel--sand.fp-panel--sand{ background:var(--fp-sand); border-top:3px solid var(--fp-brass); }
.fp-panel--ink.fp-panel--ink{ background:var(--fp-ink); border-top:3px solid var(--fp-brass-on-dark); color:rgba(253,252,250,0.86); }
.fp-panel--ink .elementor-heading-title{ color:var(--fp-paper); }
.fp-panel--ink a{ color:var(--fp-brass-on-dark); }
.fp-panel p{ font-size:15.5px; line-height:1.7; }
[lang="ar"] .fp-panel p{ font-size:17px; line-height:1.9; }

/* ==========================================================================
   Training and fellowships
   ========================================================================== */
.fp-tr-intro.fp-tr-intro{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; }
@media (max-width:1024px){ .fp-tr-intro.fp-tr-intro{ grid-template-columns:1fr; gap:32px; } }
.fp-tr-intro .fp-shot{ aspect-ratio:3/2; }

/* The timeline: date, the post, and an optional image. A row with no image
   simply loses the third column rather than leaving a gap where one was. */
.fp-timeline{ list-style:none; margin:0; padding:0; }
.fp-timeline > li{ display:grid; grid-template-columns:130px 1fr 300px; gap:32px; align-items:start; padding:28px 0; border-top:1px solid var(--fp-rule); }
.fp-timeline > li:first-child{ border-top:2px solid var(--fp-ink); }
.fp-timeline > li.fp-tl--noimg{ grid-template-columns:130px 1fr; }
.fp-tl__date{ font-family:var(--fp-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fp-brass-text); padding-top:7px; }
[lang="ar"] .fp-tl__date{ font-family:var(--fp-ar-body); font-size:14px; letter-spacing:0; text-transform:none; }
.fp-tl__title{ display:block; font-family:var(--fp-serif); font-weight:600; font-size:clamp(21px,1.8vw,26px); line-height:1.25; color:var(--fp-ink); }
[lang="ar"] .fp-tl__title{ font-family:var(--fp-ar-display); font-weight:700; line-height:1.45; }
.fp-tl__body{ display:block; margin-top:8px; font-size:15.5px; line-height:1.65; color:var(--fp-muted); }
[lang="ar"] .fp-tl__body{ font-size:17px; line-height:1.85; }
.fp-tl__shot .fp-shot{ aspect-ratio:3/2; }
@media (max-width:1024px){
  .fp-timeline > li,.fp-timeline > li.fp-tl--noimg{ grid-template-columns:130px 1fr; gap:24px; }
  .fp-tl__shot{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .fp-timeline > li,.fp-timeline > li.fp-tl--noimg{ grid-template-columns:1fr; gap:8px; }
  .fp-tl__date{ padding-top:0; }
}

/* The closing Navy band: three columns, flat. The angled clip-path band is
   Home's figure band and stays unique to it. */
.fp-band--flat.fp-band--flat{ background:var(--fp-navy); color:var(--fp-paper); clip-path:none; padding:var(--fp-64) var(--fp-gutter); }
.fp-band-cols.fp-band-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; align-items:start; }
@media (max-width:768px){ .fp-band-cols.fp-band-cols{ grid-template-columns:1fr; gap:32px; } }
.fp-band-col__head{ display:block; font-family:var(--fp-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fp-brass-on-dark); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(253,252,250,0.28); }
[lang="ar"] .fp-band-col__head{ font-family:var(--fp-ar-body); font-size:13px; letter-spacing:0; text-transform:none; }
.fp-band-col p{ margin:0; font-size:15.5px; line-height:1.7; color:rgba(253,252,250,0.86); }
[lang="ar"] .fp-band-col p{ font-size:17px; line-height:1.9; }

/* A publication citation with no DOI. The CV records journal, year, volume and
   pages but no DOI or publisher URL for any paper, so the row carries its full
   citation instead of a "Full text" link that would not resolve. That is a
   designed state, not a missing link. */
.fp-cv-locator{ display:block; margin-top:6px; font-family:var(--fp-mono); font-size:12px; letter-spacing:0.04em; color:var(--fp-stone); }
[lang="ar"] .fp-cv-locator{ font-size:12.5px; }

/* ==========================================================================
   Record lists - publications, talks, hospitals
   Filters are real links carrying a query parameter, so a filtered view is
   shareable, crawlable and works with scripting off. The active chip is marked
   with aria-current rather than a class, which is what .fp-chip already styles.
   ========================================================================== */

.fp-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.fp-count{ display:block; margin:0 0 24px; }

/* ---- publications: 90px / 1fr / 140px ---- */
.fp-pub-row{ display:grid; grid-template-columns:90px 1fr 140px; gap:24px; align-items:start; padding:22px 0; }
.fp-rows.fp-pub-rows > li{ transition:background-color 140ms ease; }
.fp-rows.fp-pub-rows > li:hover{ background:var(--fp-sand); }
.fp-pub-year{ font-family:var(--fp-mono); font-size:12px; letter-spacing:0.1em; color:var(--fp-brass-text); padding-top:6px; }
[lang="ar"] .fp-pub-year{ font-family:var(--fp-ar-body); font-size:14px; letter-spacing:0; }
.fp-pub-title{ display:block; font-family:var(--fp-serif); font-weight:600; font-size:22px; line-height:1.3; color:var(--fp-ink); }
[lang="ar"] .fp-pub-title{ font-family:var(--fp-ar-display); font-weight:700; font-size:22px; line-height:1.5; }
.fp-pub-authors{ display:block; margin-top:6px; font-size:15px; line-height:1.6; color:var(--fp-muted); }
[lang="ar"] .fp-pub-authors{ font-size:16.5px; line-height:1.8; }
.fp-pub-link{ padding-top:6px; }
/* The absence of a link is a designed state, not a gap: none of the seven
   papers carries a DOI on record, so the row ends in a plain statement of that
   rather than a "Full text" link that would resolve nowhere. */
.fp-nolink{ display:block; font-style:normal; }

/* ---- talks: 80px / 1fr / 150px ---- */
.fp-talk-row{ display:grid; grid-template-columns:80px 1fr 150px; gap:24px; align-items:start; padding:20px 0; }
.fp-rows.fp-talk-rows > li{ transition:background-color 140ms ease; }
.fp-rows.fp-talk-rows > li:hover{ background:var(--fp-sand); }
.fp-talk-year{ font-family:var(--fp-mono); font-size:12px; letter-spacing:0.1em; color:var(--fp-brass-text); padding-top:5px; }
[lang="ar"] .fp-talk-year{ font-family:var(--fp-ar-body); font-size:14px; letter-spacing:0; }
.fp-talk-title{ display:block; font-family:var(--fp-serif); font-weight:600; font-size:20px; line-height:1.3; color:var(--fp-ink); }
[lang="ar"] .fp-talk-title{ font-family:var(--fp-ar-display); font-weight:700; font-size:21px; line-height:1.5; }
.fp-talk-venue{ display:block; margin-top:5px; font-size:15px; line-height:1.6; color:var(--fp-muted); }
[lang="ar"] .fp-talk-venue{ font-size:16.5px; line-height:1.8; }
.fp-talk-link{ padding-top:5px; }

@media (max-width:768px){
  .fp-pub-row,.fp-talk-row{ grid-template-columns:1fr; gap:6px; }
  .fp-pub-year,.fp-talk-year,.fp-pub-link,.fp-talk-link{ padding-top:0; }
}

/* ---- hospitals: two columns of rule-separated rows ---- */
.fp-hosp-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.fp-hosp-list > li{ border-top:1px solid var(--fp-rule); padding:16px 0; }
.fp-hosp-list > li:first-child,
.fp-hosp-list > li:nth-child(2){ border-top:2px solid var(--fp-ink); }
.fp-hosp-name{ display:block; font-family:var(--fp-serif); font-weight:600; font-size:19px; line-height:1.3; color:var(--fp-ink); }
[lang="ar"] .fp-hosp-name{ font-family:var(--fp-ar-display); font-weight:700; font-size:20px; line-height:1.5; }
.fp-hosp-district{ display:block; margin-top:4px; font-size:13px; color:var(--fp-stone); }
[lang="ar"] .fp-hosp-district{ font-size:14.5px; }
.fp-hosp-note{ display:block; margin-top:10px; font-size:15px; line-height:1.65; color:var(--fp-muted); }
[lang="ar"] .fp-hosp-note{ font-size:16.5px; line-height:1.85; }
@media (max-width:768px){
  .fp-hosp-list{ grid-template-columns:1fr; }
  .fp-hosp-list > li:nth-child(2){ border-top-width:1px; }
}

/* The Al Araby entry stands alone, so it is a single-column list inside a Sand
   panel rather than a tenth row in the grid above. */
.fp-hosp-single .fp-hosp-list{ grid-template-columns:1fr; }
.fp-hosp-single .fp-hosp-list > li{ border-top:0; padding:0; }

/* ---- the static map: an image placeholder until the tile is produced ---- */
.fp-map .fp-shot{ aspect-ratio:4/3; }
.fp-hosp-split.fp-hosp-split{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
@media (max-width:1024px){ .fp-hosp-split.fp-hosp-split{ grid-template-columns:1fr; gap:32px; } }