/* Dr Ibrahim Abdelraof — "Surgical Atlas".
 *
 * ── The design problem ──────────────────────────────────────────────────────
 * This surgeon may not show a single result. No before/after, no outcomes, no
 * testimonials (Egypt Decree 238/2003 Art. 10). Every conventional cosmetic-surgery
 * site is built from exactly the material we are forbidden, so trust has to come from
 * somewhere else: knowledge, rigour, and register.
 *
 * Hence the atlas. This is set as an anatomical plate book — the one form that has been
 * authoritative about the human body for four centuries WITHOUT ever needing a photograph
 * of a patient. It is also the surgeon's own instinct elevated: he asked for «صور الكتب
 * ك صور توضيحية», textbook-style images. So the site becomes the textbook.
 *
 * ── What that means concretely ──────────────────────────────────────────────
 *   · Plates, not cards — AMENDED 2026-08-23. Andrew's brief: "light glass green
 *     effects in every possible place, buttons, etc — futuristic". The atlas keeps
 *     the typography, the illustrations and the annotation logic; the SURFFACE
 *     language is now luminous light-green glass (see the GLASS LIGHT layer at the
 *     end of this sheet, which deliberately overrides flat-square rules above).
 *     Illustrations always sit on OPAQUE ground — backdrop blur destroys 1.6px
 *     strokes, so glass is reserved for UI chrome and never layered over line art.
 *   · Figure legends under every illustration, in letterspaced small caps.
 *   · Amiri for Arabic — a revival of the Bulaq Press naskh, an actual Arabic BOOK face,
 *     not the safe UI sans. Paired with EB Garamond so both scripts share one century.
 *   · Oxidised red is used ONLY for anatomical annotation — plate numerals, leader lines,
 *     figure marks, the risk rule — exactly as old atlases reserved red for arteries.
 *     It is never a button, never a hover fill, never decoration.
 *
 * Logical properties throughout. Arabic is primary, English mirrors it, one sheet serves
 * both. Do not reintroduce left/right.
 */

:root {
  /* GREEN. This is the original palette (commit 65d997f) and it should not have been
     replaced. The "surgical atlas" pass swapped it for beige + oxidised red to escape
     looking generic, and lost the thing that actually worked.
     It is also the category convention: the closest comparable Kuwait surgeon
     (Dr Khaled Altarrah) uses teal, and a survey of surgeon sites found "clean whites
     with minimal accent colours (teals, browns)". Deep green reads clinical, calm and
     credible — which is the register this site needs. Do not swap it out again. */
  --paper: #f3f6f4;     /* deepened from #faf8f4 — the near-white read washed out */
  --paper-2: #e7efec;   /* soft green-tinted ground for the bands */
  --ink: #10201d;       /* green-black, not neutral black */
  --ink-2: #33443f;
  --muted: #5f6f6a;
  --rule: #d5e0dc;
  --rule-soft: #e6eeeb;
  --annot: #0f6b5c;     /* the accent: buttons, markers, group headings */
  --annot-soft: #e6f0ec;

  /* Deep greens for the INVERTED bands. A page that is one ground colour from top to
     bottom reads flat no matter how good the type is; alternating light and deep
     sections is what gives it rhythm and makes the accent feel deliberate. */
  --deep: #0b4f44;
  --deep-2: #12796a;
  --on-deep: #eaf3f0;
  --on-deep-2: #a9cbc3;

  --max: 66rem;
  --measure: 36rem;

  --f-ar: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --f-en: "EB Garamond", Georgia, serif;
  --f-label: "Reem Kufi", "EB Garamond", serif;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --step-1: clamp(1.3rem, 1.18rem + 0.55vw, 1.6rem);
  --step-2: clamp(1.65rem, 1.4rem + 1.1vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
}

/* This site COMMITS TO LIGHT — deliberately, not by omission.
 *
 * There was a dark scheme here (near-black #16130f, "the plate on a dark table").
 * On a machine set to dark it turned the whole site almost black, which for a
 * cosmetic-surgery clinic reads like a bar, not a consulting room. The warm ivory
 * IS the identity here: clean, clinical, unhurried. Inverting it does not produce
 * a darker version of that feeling, it produces a different and worse one.
 *
 * `color-scheme: light` tells the browser to keep form controls and scrollbars
 * light too, so a dark-mode visitor gets a coherent page rather than light content
 * framed by dark chrome. Do not reintroduce a dark block without redesigning for
 * it properly. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ar);
  font-size: var(--step-0);
  line-height: 1.9;
  text-rendering: optimizeLegibility;
}
html[lang="en"] body { font-family: var(--f-en); line-height: 1.72; }

h1, h2, h3 { font-family: var(--f-ar); font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; text-wrap: balance; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-family: var(--f-en); }
h1 { font-size: var(--step-3); font-weight: 400; }
h2 { font-size: var(--step-2); font-weight: 400; }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; }

a { color: var(--ink); text-decoration-color: var(--annot-soft); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--annot); }
:focus-visible { outline: 2px solid var(--annot); outline-offset: 3px; }

.wrap { max-inline-size: var(--max); margin-inline: auto; padding-inline: 1.5rem; }

/* The engraved caption hand: plate numerals, figure legends, running heads. */
.label {
  font-family: var(--f-label);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
html[lang="en"] .label { font-variant-caps: all-small-caps; letter-spacing: 0.14em; text-transform: none; }

.skip { position: absolute; inset-block-start: -100%; inset-inline-start: 1rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { inset-block-start: 0; }

/* ---------- header ---------- */
/* Dark masthead. The site most often cited for "dark elegance" in this category
   (The Maercks Institute) is in fact a predominantly LIGHT page — the dark is spent
   on the navigation bar and the type hierarchy, not the ground. That is the move
   copied here: weight where the eye lands first, light everywhere the reading
   happens. A fully dark page would cost legibility for no gain. */
.site-head { background: var(--deep); color: var(--on-deep); border-block-end: none; }
.site-head .brand-name { color: #fff; }
.site-head .brand-title { color: var(--on-deep-2); }
.site-head .site-nav a { color: var(--on-deep); }
.site-head .site-nav a:hover { color: #fff; }
.site-head .site-nav a[aria-current="page"] { text-decoration-color: #fff; }
.site-head .lang-switch { color: var(--on-deep-2); border-color: rgb(255 255 255 / 0.35); }
.site-head .lang-switch:hover { color: #fff; border-color: #fff; }
.head-inner { display: flex; align-items: baseline; gap: 1.5rem; padding-block: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none; color: inherit; }
/* A plate mark, not a logo. There is no logo for this doctor and inventing one is
   not our call — his record carries logo: null and clinicName "Private clinic". */
.brand-mark {
  font-family: var(--f-en);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--annot);
  border: 1px solid var(--annot-soft);
  padding: 0.15rem 0.5rem;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-name { font-size: var(--step-0); }
.brand-title { font-size: var(--step--2); color: var(--muted); letter-spacing: 0.04em; }

.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-inline-start: auto; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: var(--step--1); }
.site-nav a:hover { color: var(--annot); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--annot); text-underline-offset: 0.3em; }

.lang-switch { font-size: var(--step--2); letter-spacing: 0.1em; color: var(--muted); text-decoration: none; border-block-end: 1px solid var(--rule); }
.lang-switch:hover { color: var(--annot); border-color: var(--annot); }

/* ---------- hero ----------
 * Replaces the "title page" opening. That version led with a plate numeral and put
 * a small bordered portrait beside fine-print credentials, with no action anywhere
 * on the first screen. It read as an archive entry rather than a surgeon, and it
 * gave a convinced patient nothing to do. This leads with the face, states the two
 * credentials that actually persuade, and puts booking above the fold. */
.hero {
  position: relative; overflow: hidden;
  border-block-end: 1px solid var(--rule);
  background: linear-gradient(160deg, var(--annot-soft), var(--paper) 58%);
}
/* The background motif is one of the anatomical plates, oversized and nearly
   invisible. It is the one decorative element this site can justify: the plates
   exist BECAUSE patient photography is forbidden, so using one as a watermark
   reinforces the whole premise instead of being ornament for its own sake.
   Kept under 0.06 opacity — at anything higher it competes with the portrait. */
.hero-motif {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -14%; inset-inline-start: -8%;
  inline-size: min(44rem, 62%);
  color: var(--annot); opacity: 0.055;
}
.hero-motif svg { inline-size: 100%; block-size: auto; }
.hero-inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
}
/* Portrait first in the source so it leads on narrow screens, where the face is
   the fastest trust signal; on wide screens it sits in the trailing column so the
   name still opens the reading order in both scripts. */
/* Columns are 1fr THEN the portrait: with .hero-copy pulled to the first cell the
   text takes the flexible column and the portrait the fixed one. Writing this as
   `20rem 1fr` put the portrait in the flexible column and it swallowed the viewport. */
@media (min-width: 54rem) {
  /* 20rem read as a thumbnail beside the tall copy card (Andrew, #381) — the
     face is the page's strongest trust signal, give it a real column */
  .hero-inner { grid-template-columns: 1fr 26rem; }
  .hero-copy { order: -1; }
}

.portrait { margin: 0; }
.portrait img {
  inline-size: 100%; block-size: auto; display: block;
  max-block-size: 32rem; object-fit: cover; object-position: 50% 22%;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(28 25 23 / 0.10), 0 12px 28px -8px rgb(28 25 23 / 0.22);
}
/* On narrow screens the portrait leads, so keep it a band rather than a full page. */
@media (max-width: 53.99rem) {
  .portrait img { max-block-size: 20rem; }
}

.hero-copy h1 { margin-block-end: 0.12em; }

.creds {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem;
}
.creds li {
  font-family: var(--f-label); font-size: var(--step--1);
  color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-radius: 2px;
  padding: 0.3rem 0.7rem;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block-start: 1.6rem; }
.btn {
  font-family: var(--f-label); font-size: var(--step-0);
  background: var(--annot); color: var(--paper);
  padding: 0.62em 1.5em; border-radius: 2px; text-decoration: none;
  border: 1px solid var(--annot);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--annot); }
.btn-ghost {
  font-family: var(--f-en); font-size: var(--step-0);
  color: var(--ink-2); text-decoration: none;
  border-block-end: 1px solid var(--rule);
  padding-block-end: 0.15em;
}
.btn-ghost:hover { color: var(--annot); border-color: var(--annot); }

/* ---------- credentials band ----------
 * Stands in for the before/after gallery and testimonial wall every competitor
 * leads on and this surgeon may not use. Numbered so it reads as a record. */
.band { position: relative; overflow: hidden; background: var(--deep); color: var(--on-deep); }
/* A fine dot grid, the texture of squared paper. At 8% white on deep green it is
   felt rather than seen — it stops a large flat colour block looking like a
   placeholder without introducing a pattern anyone has to look at. */
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.band > .wrap { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4rem); }
.band h2 { margin-block-start: 0; font-size: var(--step-1); color: #fff; }
.quals { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: 0.8rem; max-inline-size: 46rem; }
.quals li { color: var(--on-deep); }
.quals li::marker { color: var(--deep-2); font-family: var(--f-en); }
.band .band-note { color: var(--on-deep-2); border-block-start: 1px solid rgb(255 255 255 / 0.16); padding-block-start: 1.1rem; }
.band-note { margin-block-end: 0; margin-block-start: 1.4rem; color: var(--muted); font-size: var(--step--1); max-inline-size: 46rem; }

/* ---------- procedures, grouped by body area ---------- */
.groups { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); margin-block-start: 1.75rem; }
@media (min-width: 60rem) { .groups { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.group h3 {
  margin: 0 0 0.4rem; font-family: var(--f-label); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--annot);
  border-block-end: 1px solid var(--rule); padding-block-end: 0.4rem;
}
html[lang="en"] .group h3 { font-variant-caps: all-small-caps; text-transform: none; }

/* The flat index laid each row out as name | dotted-leader | description, which works
   across a full-width page. Inside a three-column grid there is no horizontal room for
   it and the description collapsed to ONE CHARACTER PER LINE. Stack instead, and drop
   the leader — a dotted rule that spans 2rem communicates nothing. */
.group .plate-index a {
  display: flex; align-items: flex-start; gap: 0.85rem; padding-block: 0.85rem;
}
.group .pi-dots { display: none; }
.group .pi-text { display: block; min-inline-size: 0; }
.group .pi-name { display: block; }
.group .pi-desc {
  display: block; margin-block-start: 0.2rem;
  font-size: var(--step--1); color: var(--muted); line-height: 1.5;
}

/* Line-diagram icons at row scale.
 *
 * These are the ORIGINAL set, restored. The "engraved plate" versions that briefly
 * replaced them are drawn on a 200x210 viewBox with 0.75-1.5px strokes — beautiful
 * at figure size, and at 2.6rem they collapse into invisible hairlines. Andrew could
 * not see them at all. The originals use a 120x120 box with a 1.6 stroke, which is
 * proportionally more than twice as heavy and stays legible when small.
 *
 * `currentColor` throughout, so they take the green with no per-icon work. */
.pi-icon {
  flex: none; inline-size: 3rem; block-size: 3rem;
  color: var(--annot);
  display: grid; place-items: center;
  border: 1px solid var(--rule-soft); border-radius: 2px;
  background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pi-icon svg { inline-size: 100%; block-size: 100%; display: block; }
.plate-index a:hover .pi-icon { border-color: var(--annot); background: var(--annot-soft); }

/* ---------- closing booking band ---------- */
/* The closing band is the page's loudest colour on purpose — it is the last thing
   before the footer and the only place a decision gets made. White button on deep
   green is the highest contrast pairing available in this palette. */
.book-band { background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: var(--on-deep); }
.book-inner {
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
  display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 48rem) { .book-inner { grid-template-columns: 1fr auto; } }
.book-inner h2 { margin: 0 0 0.35rem; font-size: var(--step-1); color: #fff; }
.book-inner .band-note { color: var(--on-deep-2); margin-block-start: 0; }
.book-inner .cta-row { margin-block-start: 0; }
.book-band .btn { background: #fff; color: var(--deep); border-color: #fff; }
.book-band .btn:hover { background: transparent; color: #fff; }
.book-band .btn-ghost { color: var(--on-deep); border-color: rgb(255 255 255 / 0.4); }
.book-band .btn-ghost:hover { color: #fff; border-color: #fff; }

/* ---------- title page (retained: used by the About page) ---------- */
.titlepage { border-block-end: 1px solid var(--rule); }
.titlepage-inner { padding-block: clamp(2.5rem, 6vw, 5rem); display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 54rem) { .titlepage-inner { grid-template-columns: 1fr 18rem; } }

.platemark { display: flex; align-items: baseline; gap: 0.9rem; margin-block-end: 1.5rem; }
.platemark::after { content: ""; flex: 1; border-block-end: 1px solid var(--rule); translate: 0 -0.3em; }
.plate-numeral { font-family: var(--f-en); font-size: var(--step--1); color: var(--annot); letter-spacing: 0.14em; }

.titlepage h1 { margin-block-end: 0.15em; }
.tp-sub { font-size: var(--step-1); color: var(--ink-2); margin-block-end: 1.5rem; max-inline-size: var(--measure); }

/* Credentials as a book's imprint block. */
.colophon { margin-block-start: 1.8rem; border-block-start: 1px solid var(--rule); padding-block-start: 1.1rem; display: grid; gap: 0.5rem; max-inline-size: var(--measure); }
.col-row { display: flex; gap: 0.9rem; align-items: baseline; font-size: var(--step--1); }
.col-k { color: var(--muted); font-family: var(--f-label); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; flex: none; min-inline-size: 8rem; }
html[lang="en"] .col-k { font-variant-caps: all-small-caps; text-transform: none; }
.col-v { color: var(--ink-2); }

/* Portrait as a mounted plate. */
.plate-portrait { margin: 0; }
.plate-portrait img {
  inline-size: 100%; block-size: auto; display: block;
  border: 1px solid var(--rule);
  padding: 0.5rem;
  background: var(--paper-2);
  filter: saturate(0.85) contrast(1.03);
}
.plate-portrait figcaption { margin-block-start: 0.7rem; text-align: center; }

/* ---------- index of plates ---------- */
.index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-block-end: 2px solid var(--ink); padding-block-end: 0.5rem; }
.index-head h2 { margin: 0; font-size: var(--step-1); }

.plate-index { list-style: none; margin: 0; padding: 0; }
.plate-index li { border-block-end: 1px solid var(--rule-soft); }
.plate-index a { display: flex; align-items: baseline; gap: 0.8rem; padding-block: 0.9rem; text-decoration: none; color: var(--ink); }
.plate-index a:hover { background: var(--paper-2); }
.plate-index a:hover .pi-name { color: var(--annot); }
.pi-num { font-family: var(--f-en); color: var(--annot); font-size: var(--step--1); letter-spacing: 0.1em; flex: none; min-inline-size: 3.4rem; }
.pi-name { font-size: var(--step-0); flex: none; }
/* The dotted leader is the device that makes this read as a list of figures rather
   than a nav menu. It fills whatever is left between title and description. */
.pi-dots { flex: 1; border-block-end: 1px dotted var(--rule); translate: 0 -0.35em; min-inline-size: 1.5rem; }
.pi-desc { color: var(--muted); font-size: var(--step--1); max-inline-size: 21rem; text-align: end; display: none; }
@media (min-width: 48rem) { .pi-desc { display: block; } }

/* ---------- plate page ---------- */
.plate-head { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.runninghead { display: flex; align-items: baseline; gap: 0.8rem; margin-block-end: 1.3rem; }
.runninghead::after { content: ""; flex: 1; border-block-end: 1px solid var(--rule); translate: 0 -0.3em; }
.runninghead a { color: var(--muted); text-decoration: none; }
.runninghead a:hover { color: var(--annot); }

.layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
  .layout { grid-template-columns: 12rem 1fr; }
  .toc { position: sticky; inset-block-start: 1.5rem; }
}
.toc { padding-block-start: 0.4rem; }
.toc-head { margin-block-end: 0.7rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: toc; }
.toc li { counter-increment: toc; display: flex; gap: 0.5rem; align-items: baseline; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-en); font-size: var(--step--2); color: var(--annot); flex: none; }
html[lang="ar"] .toc li::before { content: counter(toc, arabic-indic); }
.toc a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--annot); }

.article { min-inline-size: 0; }
.article .sec { padding-block: 1.8rem; border-block-start: 1px solid var(--rule-soft); }
.article .sec:first-of-type { border-block-start: 0; padding-block-start: 0.4rem; }
.article h2 { font-size: var(--step-1); }
.article p, .article .ticks { max-inline-size: var(--measure); }

/* ---------- the plate ---------- */
.plate {
  margin: 0 0 2rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 2px var(--rule-soft);
}
.plate-art { color: var(--ink); inline-size: min(100%, 22rem); margin-inline: auto; display: block; }
.plate-art svg { inline-size: 100%; block-size: auto; display: block; }
.plate figcaption { margin-block-start: 1.1rem; text-align: center; }
.fig-mark { color: var(--annot); font-family: var(--f-en); letter-spacing: 0.1em; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ticks li { position: relative; padding-inline-start: 1.5rem; }
.ticks li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--annot-soft); }

/* The one place the annotation red does structural work: honest complication
   disclosure is the spine of the whole approach, so it gets the anatomical rule. */
.risk-note { border-inline-start: 2px solid var(--annot); padding-inline-start: 1rem; margin-block-end: 1.2rem; color: var(--ink-2); font-size: var(--step--1); max-inline-size: var(--measure); }

/* ---------- questions ---------- */
.faqs { display: grid; max-inline-size: var(--measure); border-block-start: 1px solid var(--rule-soft); }
.faq { border-block-end: 1px solid var(--rule-soft); }
.faq summary { cursor: pointer; list-style: none; padding-block: 0.9rem; display: flex; gap: 0.7rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--annot); font-family: var(--f-en); flex: none; }
.faq[open] summary::before { content: "–"; }
.faq-a { padding-block: 0 1rem; padding-inline-start: 1.4rem; color: var(--ink-2); }
.faq-a p:last-child { margin-block-end: 0; }

/* ---------- misc ---------- */
/* NOTE: a second `.band { background: var(--paper-2) }` used to live here, left over
   from an earlier layout. It sat AFTER the credentials-band rules, so at equal
   specificity it won — the band rendered light while its white text stayed white and
   the qualifications became invisible. Only the credentials section uses `.band`, so
   the duplicate is gone. Do not reintroduce a generic `.band` utility. */
.sec { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.lede { font-size: var(--step-1); color: var(--ink-2); max-inline-size: var(--measure); }
.prose p { max-inline-size: var(--measure); }
.more { margin-block-start: 1.5rem; }
.more a { font-size: var(--step--1); text-decoration: none; color: var(--annot); }
.more a:hover { text-decoration: underline; }

.bio-grid { display: grid; gap: 2.5rem; align-items: start; }
/* wider media column now that the desk figure (a real portrait crop, not a
   14rem thumbnail) leads the page — Andrew, #385 */
@media (min-width: 48rem) { .bio-grid { grid-template-columns: 19rem 1fr; } }
.bio-grid .photo-bio { max-inline-size: 19rem; }

.contact-dl { display: grid; gap: 0.5rem 1.5rem; max-inline-size: var(--measure); margin: 0; }
@media (min-width: 34rem) { .contact-dl { grid-template-columns: 8rem 1fr; } }
.contact-dl dt { color: var(--muted); font-family: var(--f-label); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="en"] .contact-dl dt { font-variant-caps: all-small-caps; text-transform: none; }
.contact-dl dd { margin: 0 0 0.5rem; color: var(--ink-2); }

.page-disclaimer { margin-block-start: 2.5rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--rule); font-size: var(--step--1); color: var(--muted); max-inline-size: var(--measure); }

/* ---------- colophon footer ---------- */
/* Dark footer to bookend the dark masthead — it gives the page a floor instead of
   fading out into the same ground it started on. No top margin: it now butts
   straight onto the deep-green booking band, so the page closes on one dark mass. */
.site-foot { background: var(--deep); color: var(--on-deep); margin-block-start: 0; padding-block: 3rem; }
.site-foot .foot-name { color: #fff; }
.site-foot .foot-line { color: var(--on-deep-2); }
.site-foot .foot-line a { color: var(--on-deep); }
.site-foot .foot-line a:hover { color: #fff; }
.site-foot .foot-licence { color: var(--on-deep-2); border-block-start-color: rgb(255 255 255 / 0.18); }
.site-foot .foot-disclaimer { color: var(--on-deep-2); }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1fr 1.5fr; } }
.foot-name { font-size: var(--step-0); margin-block-end: 0.2rem; }
.foot-line { font-size: var(--step--1); color: var(--muted); margin-block-end: 0.2rem; }
.foot-line a { color: var(--ink-2); text-decoration: none; }
.foot-line a:hover { color: var(--annot); }
.foot-licence { font-size: var(--step--1); color: var(--ink-2); margin-block-start: 1rem; padding-block-start: 0.8rem; border-block-start: 1px solid var(--rule); }
.foot-disclaimer { font-size: var(--step--1); color: var(--muted); }
.foot-disc-head { margin-block-end: 0.4rem; }
.foot-disclaimer p:last-child { margin-block-end: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * CLINICAL AURORA — the light-glass-green layer (Andrew's brief, 2026-08-23).
 *
 * Spec by the design pass, hardened against the adversarial review before a
 * line was written. The load-bearing decisions, so nobody unwinds them blind:
 *
 *   · ONE LIGHT MODEL. A key light directly above, a mint bounce off the
 *     ground below. Every highlight is a block-start inset, every shadow falls
 *     block-end, every gradient is 180deg — which is also why the whole system
 *     mirrors between Arabic and English with zero RTL overrides. The only
 *     directional rule in the file is the button sheen, mirrored explicitly.
 *   · NO DECORATIVE GLOW. Hover/focus feedback is a spread-only ring
 *     (compositor-friendly); there is not one 0-0-N bloom shadow here.
 *   · GLASS NEVER TOUCHES LINE ART. The plates and icons sit on fully opaque
 *     cards — backdrop blur destroys 1.6px strokes (the exact failure the
 *     comment above the icon rules documents from last time).
 *   · TWO DEPTH TIERS ONLY: chrome (nav, booking band) and content surfaces.
 *     Buttons and chips are solid: a backdrop-filter nested inside a glass
 *     panel samples only the parent's flat fill — pure cost, zero effect.
 *   · ALPHAS ARE SET BY A CONTRAST TABLE, NOT TASTE. System worst case is
 *     --muted on Tier-2 glass over the darkest aurora = 5.48:1. The old
 *     --muted (#5f6f6a) FAILED at 4.28:1 — do not put it back.
 *   · The licence line is excluded from every animation and muted tone;
 *     it is deliberately the most readable text on the site (Kuwait Art. 15).
 * ═════════════════════════════════════════════════════════════════════════ */

/* ---------- self-hosted fonts (OFL; subsets fetched from Google Fonts once,
 * served from /assets/fonts — zero third-party requests at runtime) ---------- */
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Amiri-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Amiri-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Amiri-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Amiri-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/EBGaramond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/EBGaramond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. tokens ---------- */
:root {
  /* ground + aurora */
  --ground:   #eef7f2;
  --ground-2: #ddeee5;
  --aurora-a: #7fe6c4;
  --aurora-b: #35b697;
  --aurora-c: #a9e6f0;

  /* glass */
  --glass:        rgba(255,255,255,0.58);
  --glass-strong: rgba(255,255,255,0.72);
  --glass-nav:    rgba(255,255,255,0.78);
  --glass-solid:  rgba(252,254,253,0.96);
  --glass-line:   rgba(11,86,73,0.34);
  --key:          rgba(255,255,255,0.92);
  --bounce:       rgba(127,230,196,0.34);

  /* solid + recessed surfaces */
  --solid:   #f7fcfa;
  --solid-2: #eaf6f0;
  --recess:  #e6f3ed;

  /* ink + accent (contrast-table values — see the header note) */
  --ink:       #0c1f1b;
  --ink-2:     #26443d;
  --muted:     #47615b;
  --accent:    #0a6455;
  --accent-hi: #12a487;
  --deep-ink:  #063f36;
  --glow:      rgba(18,164,135,0.38);

  /* sweep the OLD token names into the new family so every un-overridden rule
     above inherits the corrected values (the old --muted failed AA on glass) */
  --paper: #f7fcfa;
  --paper-2: #eaf6f0;
  --annot: #0a6455;
  --annot-soft: #dff0e9;
  --rule: rgba(11,86,73,0.18);
  --rule-soft: rgba(11,86,73,0.10);

  --r-lg: 22px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);

  --f-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-ui-ar: "SF Arabic", "Geeza Pro", "Segoe UI", "Dubai", var(--f-ar);
  --step-4: clamp(2.55rem, 1.75rem + 3.4vw, 4.4rem);
}
html[lang="ar"] { --f-ui: var(--f-ui-ar); }

/* ---------- 3. the aurora field + engineering grid (zero markup) ---------- */
body {
  background: linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 52%, var(--ground) 100%) fixed;
  color: var(--ink);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42rem 34rem at 82% -8%,  rgba(127,230,196,0.50), transparent 62%),
    radial-gradient(38rem 30rem at  2% 14%,  rgba( 53,182,151,0.30), transparent 66%),
    radial-gradient(54rem 42rem at 96% 48%,  rgba(169,230,240,0.34), transparent 64%),
    radial-gradient(46rem 36rem at  6% 78%,  rgba(127,230,196,0.42), transparent 68%),
    radial-gradient(60rem 40rem at 50% 108%, rgba( 53,182,151,0.22), transparent 70%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(10,100,85,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,100,85,0.055) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(125% 92% at 50% 0%, #000 0%, transparent 70%);
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.4%, 1.6%, 0) scale(1.055); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
  body::before { animation: auroraDrift 46s ease-in-out infinite; will-change: transform; }
}

/* ---------- 2a. Tier 2 — content surfaces ---------- */
.hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.68) 0%,
    rgba(255,255,255,0.52) 55%,
    rgba(226,246,238,0.56) 100%);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0  1px 0 var(--key),
    inset 0 -1px 0 var(--bounce),
    0  1px 0     rgba(255,255,255,0.70),
    0  2px 4px   rgba(9,64,55,0.06),
    0 16px 34px -18px rgba(9,64,55,0.22);
}
/* long Arabic runs get a calmer backdrop */
.article, .faqs {
  background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.66) 55%, rgba(226,246,238,0.68) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
.article { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.faqs { padding-inline: clamp(1rem, 3vw, 1.5rem); border-block-start: 1px solid var(--glass-line); }
.toc { padding: 1.1rem; border-radius: var(--r-md); }
.contact-dl { padding: clamp(1.25rem, 3vw, 1.75rem); }

/* ---------- 2b. Tier 1 — chrome: sticky glass nav ---------- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.70) 100%);
  border-block-end: 1px solid rgba(11,86,73,0.18);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
          backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(255,255,255,0.60),
    0 10px 28px -22px rgba(9,64,55,0.30);
  color: var(--ink);
}
.site-head.is-scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.80));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.60), 0 8px 26px -16px rgba(9,64,55,0.26);
}
.head-inner { padding-block: 0.8rem; }
.site-head .brand-name { color: var(--ink); font-weight: 500; }
.site-head .brand-title { color: var(--muted); font-family: var(--f-ui); }
.site-head .site-nav a { color: var(--ink-2); font-family: var(--f-ui); }
.site-head .site-nav a:hover { color: var(--accent); }
.site-head .site-nav a[aria-current="page"] {
  text-decoration: none;
  background: rgba(255,255,255,0.80); border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  box-shadow: inset 0 1px 0 var(--key), 0 0 0 1px rgba(11,86,73,0.18);
}
.site-head .lang-switch {
  color: var(--ink-2); border: 1px solid rgba(10,100,85,0.34);
  border-radius: var(--r-pill); padding: 0.3rem 0.8rem; border-block-end-width: 1px;
}
.site-head .lang-switch:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 4b. hero: the three-layer composition ---------- */
.hero { background: none; border-block-end: 0; }
.hero-inner { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 6rem); }
/* Andrew (#384): the copy card read oversized — a wall of green with a giant
   name. Tighter padding, a smaller h1, and a width cap so the text column stops
   ballooning to fill the 1fr track. */
.hero-copy { z-index: 2; padding: clamp(1.4rem, 3vw, 2rem); max-inline-size: 34rem; }
.hero-copy h1 { font-size: var(--step-3); line-height: 1.12; }
@media (min-width: 54rem) { .hero-inner { justify-content: space-between; } .hero-copy { justify-self: start; } }

.hero-motif {
  position: absolute; z-index: 3; pointer-events: none;
  inset-block-start: auto; inset-block-end: -18%; inset-inline-start: auto; inset-inline-end: -7%;
  inline-size: min(46rem, 60%);
  color: var(--accent);
  opacity: 0.38;
  /* softer mask than round 1 — at 46/78% cutoffs the drawing lost its identity
     and read as a stray scribble; the signature has to survive its own fade */
  -webkit-mask-image: linear-gradient(to inline-start, #000 0%, rgba(0,0,0,0.5) 58%, transparent 94%);
          mask-image: linear-gradient(to inline-start, #000 0%, rgba(0,0,0,0.5) 58%, transparent 94%);
}
@media (max-width: 53.99rem) {
  .hero-motif { inset-block-end: auto; inset-block-start: 1%; inset-inline-end: -18%; inline-size: 62%; opacity: 0.22; }
}

/* portrait: solid card, colour-graded into the mint family.
   mix-blend-mode: color keeps the photograph's own luminance — a real grade,
   not the sepia+hue-rotate remap that turns skin green. isolation is mandatory:
   without it the blend grades the aurora behind the figure too. */
.portrait {
  position: relative; z-index: 3; isolation: isolate;
  padding: 0.7rem;
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
  border: 1px solid rgba(11,86,73,0.20);
  border-radius: var(--r-md);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(127,230,196,0.28),
    0 1px 2px rgba(9,64,55,0.06),
    0 8px 18px -12px rgba(9,64,55,0.20);
}
/* Grade history, so nobody retries the failed recipes: (1) grayscale(.55) +
   0.30-alpha `color` blend → read as a B/W photo; (2) stronger alpha on the same
   blend → still grey, because an ALPHA-WEIGHTED color blend mostly strips
   saturation rather than donating the overlay's hue. What works: keep most of
   the photo's own colour and lay a SOLID-colour soft-light wash over it —
   soft-light tints the midtones green while luminance and skin stay believable. */
.portrait img {
  border-radius: calc(var(--r-md) - 5px);
  filter: grayscale(0.15) saturate(0.72) contrast(1.05) brightness(1.02);
  box-shadow: 0 1px 2px rgba(9,64,55,0.10), 0 10px 22px -14px rgba(9,64,55,0.28);
}
.portrait::after {
  content: ""; position: absolute; inset: 0.7rem; pointer-events: none;
  border-radius: calc(var(--r-md) - 5px);
  background: linear-gradient(180deg, #9feed4 0%, #0d6d5c 100%);
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

.creds li {
  font-family: var(--f-ui); color: var(--ink-2);
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
  border: 1px solid rgba(11,86,73,0.20);
  border-radius: var(--r-pill);
  padding: 0.34rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(127,230,196,0.28), 0 1px 2px rgba(9,64,55,0.06);
}

/* ---------- 2d + 4h. the recessed plaque: credentials + licence ---------- */
.colophon {
  margin-block-start: 1.75rem;
  padding: 1.1rem 1.15rem;
  border: 0; border-block-start: 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--recess) 0%, #eef8f3 100%);
  box-shadow:
    inset 0  1px 2px rgba(9,64,55,0.10),
    inset 0 -1px 0   rgba(255,255,255,0.90),
    0 1px 0 rgba(255,255,255,0.80);
}
.trust-card .col-row { align-items: center; padding-block: 0.5rem; }
.trust-card .col-row + .col-row { border-block-start: 1px solid rgba(11,86,73,0.10); }
.col-icon {
  flex: none; inline-size: 2.1rem; block-size: 2.1rem;
  display: grid; place-items: center;
  color: var(--accent);
  background: linear-gradient(180deg, var(--solid), var(--solid-2));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(11,86,73,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
}
.col-icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
.col-k { font-family: var(--f-ui); color: var(--muted); }
.col-v { color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.col-row:last-child .col-v { color: var(--ink); font-weight: 500; }

/* ---------- 4c. credentials band: the primary trust card, now light ---------- */
.band {
  inline-size: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  overflow: hidden;
  color: var(--ink);
}
.band > .wrap { padding-block: 0; }
.band::before {
  background-image: radial-gradient(rgba(10,100,85,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
.band h2 { color: var(--ink); }
.quals { padding-inline-start: 1.4rem; }
.quals li { color: var(--ink-2); }
.quals li::marker { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.band .band-note { color: var(--muted); border-block-start-color: rgba(11,86,73,0.20); }

/* ---------- 4d. procedures ---------- */
.group { padding: clamp(1.25rem, 3vw, 1.75rem); }
.group h3 {
  font-family: var(--f-ui); color: var(--accent);
  border-block-end: 0; padding-block-end: 0.55rem;
  background-image: linear-gradient(to inline-end, rgba(10,100,85,0.40), rgba(10,100,85,0));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
}
.plate-index li { border-block-end: 1px solid rgba(11,86,73,0.12); }
.plate-index li:last-child { border-block-end: 0; }
.plate-index a {
  border-radius: var(--r-md);
  padding-inline: 0.6rem; margin-inline: -0.6rem;
  transition: background 200ms var(--ease);
}
.plate-index a:hover, .group .plate-index a:hover {
  background: linear-gradient(to inline-end, rgba(255,255,255,0.66), rgba(255,255,255,0));
}
.pi-icon {
  inline-size: 3.25rem; block-size: 3.25rem;
  color: var(--accent);
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
  border: 1px solid rgba(11,86,73,0.20);
  border-radius: var(--r-md);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(127,230,196,0.28),
    0 1px 2px rgba(9,64,55,0.06);
  transition: transform 200ms var(--ease), border-color 200ms linear, box-shadow 200ms var(--ease), color 200ms linear;
}
.plate-index a:hover .pi-icon {
  color: var(--accent-hi);
  transform: translateY(-1px);
  border-color: rgba(18,164,135,0.42);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(127,230,196,0.40),
    0 6px 14px -8px rgba(9,64,55,0.26);
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
}
/* incised-line effect: the far wall of the groove catches the key light */
.pi-icon svg, .plate-art svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,0.95)); }
.index-head {
  border-block-end: 0;
  background-image: linear-gradient(to inline-end, var(--accent), rgba(10,100,85,0) 88%);
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
  padding-block-end: 0.5rem;
}

/* ---------- 4e. FAQ ---------- */
.faq { border-block-end: 1px solid rgba(11,86,73,0.14); }
.faq:last-child { border-block-end: 0; }
.faq summary::before {
  content: "+"; display: inline-grid; place-items: center;
  inline-size: 1.5rem; block-size: 1.5rem; flex: none;
  font-family: var(--f-ui); font-size: var(--step--1); line-height: 1;
  color: var(--accent); border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--solid), var(--solid-2));
  box-shadow: inset 0 0 0 1px rgba(11,86,73,0.20), inset 0 1px 0 rgba(255,255,255,0.95);
  transition: transform 260ms var(--ease), color 200ms linear;
}
.faq[open] summary::before { content: "+"; transform: rotate(135deg); color: var(--accent-hi); }
@supports selector(details::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .faq::details-content {
      block-size: 0; overflow: hidden; opacity: 0;
      transition: block-size 340ms var(--ease), content-visibility 340ms allow-discrete, opacity 260ms linear;
    }
    .faq[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* ---------- 4f. booking band: the page's one anchor of weight ---------- */
.book-band {
  position: relative;
  inline-size: min(100% - 2.5rem, var(--max));
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,100,85,0.90) 0%, rgba(6,72,62,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.36),
    inset 0 -1px 0 rgba(127,230,196,0.30),
    0 20px 44px -24px rgba(6,60,52,0.46);
}
.book-band::before { content: none; }
.book-inner h2 { color: #fff; }
.book-inner .band-note { color: rgba(255,255,255,0.88); }

/* ---------- 4g. footer: solid, light, the floor ---------- */
.site-foot {
  margin-block-start: clamp(3rem, 7vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block-start: 1px solid rgba(11,86,73,0.18);
  background: linear-gradient(180deg, #f4fbf8 0%, #e9f5ef 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  color: var(--ink-2);
}
.site-foot .foot-name { color: var(--ink); }
.site-foot .foot-line { color: var(--muted); }
.site-foot .foot-line a { color: var(--ink-2); }
.site-foot .foot-line a:hover { color: var(--accent); }
/* Kuwait MD 87/2023 Art. 15. Legally required — never muted, never animated. */
.site-foot .foot-licence {
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  margin-block-start: 1.1rem; padding: 0.8rem 1rem;
  border: 0; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--recess) 0%, #eef8f3 100%);
  box-shadow: inset 0 1px 2px rgba(9,64,55,0.10), inset 0 -1px 0 rgba(255,255,255,0.90);
  opacity: 1;
}
.site-foot .foot-disclaimer { color: var(--muted); font-size: var(--step--2); line-height: 1.7; max-inline-size: 42rem; }
.foot-disc-head { font-family: var(--f-ui); color: var(--muted); margin-block-end: 0.4rem; }

/* ---------- 4i. procedure page ---------- */
.plate {
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
  border: 1px solid rgba(11,86,73,0.20);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(127,230,196,0.28),
    0 1px 2px rgba(9,64,55,0.06),
    0 8px 18px -12px rgba(9,64,55,0.20);
}
.plate-art { inline-size: min(100%, 26rem); }
.risk-note {
  background: linear-gradient(to inline-end, rgba(18,164,135,0.09), transparent 70%);
  border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
  padding-block: 0.6rem;
}
.ticks li::before { color: rgba(18,164,135,0.7); }
.plate-portrait {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--solid) 0%, var(--solid-2) 100%);
  border: 1px solid rgba(11,86,73,0.20);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 18px -12px rgba(9,64,55,0.20);
}
.plate-portrait img { border-radius: calc(var(--r-md) - 6px); filter: grayscale(0.55) contrast(1.05) brightness(1.03); }
.plate-portrait::after {
  content: ""; position: absolute; inset: 0.5rem; pointer-events: none;
  border-radius: calc(var(--r-md) - 6px);
  background: linear-gradient(180deg, rgba(127,230,196,0.30) 0%, rgba(10,100,85,0.30) 100%);
  mix-blend-mode: color;
}
.platemark::after, .runninghead::after {
  border-block-end: 0; block-size: 1px;
  background-image: linear-gradient(to inline-end, rgba(10,100,85,0.40), rgba(10,100,85,0));
}

/* ---------- 5. buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-ui); font-size: var(--step-0);
  font-weight: 500; letter-spacing: 0.012em; line-height: 1;
  color: #fff; text-decoration: none;
  padding: 0.78em 1.65em;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(11,100,85,0.90) 0%, rgba(6,72,62,0.92) 100%);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0  2px  6px rgba(6,60,52,0.20),
    0 10px 24px -10px rgba(6,60,52,0.42),
    0 0 0 0 var(--glow);
  transition: box-shadow 280ms var(--ease), transform 200ms var(--ease), background 240ms linear;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.30) 48%, transparent 66%);
  translate: -145% 0;
  /* opacity-gated: without it the parked sheen rectangle is VISIBLE beside the
     button at rest (no overflow:hidden by design — Safari radius-clip bug) */
  opacity: 0;
  transition: translate 640ms var(--ease), opacity 120ms linear;
}
.btn:hover::after, .btn:focus-visible::after { opacity: 1; }
.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(180deg, rgba(14,116,98,0.92) 0%, rgba(8,84,72,0.94) 100%);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.54),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    0  3px  8px rgba(6,60,52,0.22),
    0 16px 34px -12px rgba(6,60,52,0.46),
    0 0 0 6px rgba(18,164,135,0.16);
}
.btn:hover::after, .btn:focus-visible::after { translate: 145% 0; }
.btn:active {
  transform: translateY(0.5px) scale(0.988);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.20), 0 1px 2px rgba(6,60,52,0.18), 0 0 0 4px rgba(18,164,135,0.12);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--f-ui); font-size: var(--step--1);
  font-weight: 500; line-height: 1;
  color: var(--ink-2); text-decoration: none;
  padding: 0.72em 1.25em;
  border: 1px solid rgba(10,100,85,0.70);
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 2px rgba(9,64,55,0.06);
  transition: box-shadow 280ms var(--ease), transform 200ms var(--ease), border-color 200ms linear, color 200ms linear;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--accent); border-color: var(--accent-hi);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 6px 18px -8px rgba(9,64,55,0.24), 0 0 0 5px rgba(18,164,135,0.14);
}
.btn-ghost:active { transform: translateY(0.5px) scale(0.99); box-shadow: inset 0 2px 4px rgba(9,64,55,0.10); }
.book-band .btn {
  color: var(--deep-ink);
  border-color: rgba(255,255,255,0.85);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(233,250,244,0.90));
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(3,40,34,0.25), 0 14px 30px -12px rgba(3,40,34,0.45);
}
.book-band .btn:hover { background: #fff; color: var(--deep-ink); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(3,40,34,0.28), 0 20px 40px -14px rgba(3,40,34,0.5), 0 0 0 6px rgba(255,255,255,0.18); }
.book-band .btn-ghost { color: rgba(255,255,255,0.94); border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.10); border-block-end: 1px solid rgba(255,255,255,0.55); padding-block-end: 0.72em; }
.book-band .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.18); }
[dir="rtl"] .btn::after { translate: 145% 0; }
[dir="rtl"] .btn:hover::after, [dir="rtl"] .btn:focus-visible::after { translate: -145% 0; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: var(--r-sm); }

/* ---------- 7. typography ---------- */
h1, h2, h3 { font-weight: 500; }
h1 { font-weight: 400; }
p, li { text-wrap: pretty; }
html[lang="en"] h1 { letter-spacing: -0.020em; line-height: 1.14; }
html[lang="en"] h2 { letter-spacing: -0.014em; line-height: 1.20; }
html[lang="en"] h3 { letter-spacing: -0.008em; }
html[lang="ar"] h1 { line-height: 1.48; }
html[lang="ar"] h2 { line-height: 1.52; }
html[lang="ar"] h3 { line-height: 1.60; }
.label, .brand-title, .col-k, .contact-dl dt, .group h3, .toc-head, .site-nav a { font-family: var(--f-ui); font-weight: 500; }
.col-v, .foot-licence, .pi-num, .plate-numeral, .quals li::marker { font-variant-numeric: tabular-nums lining-nums; }

/* 🚨 Arabic is a JOINED script: tracking pulls connected letterforms apart at the
   kashida and the word disintegrates. The base rules above only ever overrode
   these for English, so Arabic was rendering with 0.10-0.16em letter-spacing —
   a live bug, most visible on the figure legends. Never track Arabic. */
html[lang="ar"] .label,
html[lang="ar"] .col-k,
html[lang="ar"] .contact-dl dt,
html[lang="ar"] .group h3,
html[lang="ar"] .lang-switch,
html[lang="ar"] .brand-title,
html[lang="ar"] .plate-numeral {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--step--1);
  font-weight: 500;
}

/* ---------- 6. motion ---------- */
@keyframes headIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn  { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translate3d(0,26px,0) scale(0.986); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* .site-head animates OPACITY ONLY — a transform on position:sticky detaches it */
  .site-head  { animation: headIn  520ms var(--ease) both; }
  .hero-copy  { animation: panelIn 720ms var(--ease) both; animation-delay:  60ms; }
  .portrait   { animation: panelIn 720ms var(--ease) both; animation-delay: 180ms; }
  .hero-motif { animation: riseIn 1100ms var(--ease) both; animation-delay: 300ms; }
  .hero-copy > h1        { animation: riseIn 620ms var(--ease) both; animation-delay: 220ms; }
  .hero-copy > .tp-sub   { animation: riseIn 620ms var(--ease) both; animation-delay: 290ms; }
  .hero-copy > .creds    { animation: riseIn 620ms var(--ease) both; animation-delay: 360ms; }
  .hero-copy > .lede     { animation: riseIn 620ms var(--ease) both; animation-delay: 430ms; }
  .hero-copy > .cta-row  { animation: riseIn 620ms var(--ease) both; animation-delay: 500ms; }
  .hero-copy > .colophon { animation: riseIn 620ms var(--ease) both; animation-delay: 570ms; }

  .js:not(.no-anim) :is(.band, .group, .faqs, .book-band, .plate, .toc, .article, .contact-dl, .plate-portrait) {
    opacity: 0; transform: translate3d(0, 22px, 0);
    transition: opacity 680ms var(--ease) var(--d, 0ms), transform 680ms var(--ease) var(--d, 0ms);
  }
  .js:not(.no-anim) :is(.band, .group, .faqs, .book-band, .plate, .toc, .article, .contact-dl, .plate-portrait).in {
    opacity: 1; transform: none;
  }
}

/* ---------- 2e. fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl { background: var(--glass-solid); }
  .site-head { background: rgba(255,255,255,0.97); }
  .btn       { background: linear-gradient(180deg, #0b6455 0%, #064a3f 100%); }
  .book-band { background: linear-gradient(180deg, #0d6d5c 0%, #073f36 100%); }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl, .site-head {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--glass-solid);
    box-shadow: inset 0 0 0 1px rgba(11,86,73,0.22), 0 1px 2px rgba(9,64,55,0.06);
  }
  .site-head { background: #fbfefd; }
  body::before { opacity: 0.35; }
}

/* ---------- the reduced-motion contract, second layer ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * DEEP GLASS — Andrew's art direction, 2026-08-23 (screenshot #380):
 * "make all boxes in the website dark green and transparent frosted glass."
 *
 * Every content box flips from white-frost to deep-green frosted glass — the
 * booking band's material, promoted to the whole system. The PAGE stays the
 * light aurora field, so the dark cards float on light instead of the page
 * going dark (the "sooo dark" complaint was about dark GROUNDS, not dark
 * objects). Light model unchanged: key above, mint bounce below.
 * Illustrations keep opaque ground — now solid deep green with mint strokes.
 * ═════════════════════════════════════════════════════════════════════════ */
:root {
  --glass-deep-a: rgba(13,104,88,0.84);
  --glass-deep-b: rgba(6,66,57,0.90);
  --on-glass:   #f2faf7;   /* body text on deep glass  ~12:1  */
  --on-glass-2: #d5e9e2;   /* secondary                ~9:1   */
  --on-glass-3: #b2d3c9;   /* muted                    ~6.3:1 */
  --mint-pop:   #7fe6c4;   /* links/accents on dark    ~7:1   */
}

/* ---------- the boxes ---------- */
.hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl {
  background: linear-gradient(180deg, var(--glass-deep-a) 0%, var(--glass-deep-b) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  border-block-end-color: rgba(0,0,0,0.30);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(127,230,196,0.26),
    0  2px  6px rgba(6,60,52,0.18),
    0 22px 46px -22px rgba(6,60,52,0.50);
  color: var(--on-glass);
}
.article, .faqs { background: linear-gradient(180deg, rgba(11,92,78,0.90) 0%, rgba(6,60,52,0.94) 100%); }

/* ---------- type on deep glass ---------- */
.hero-copy h1, .hero-copy .tp-sub,
.band h2, .book-inner h2,
.article h2, .article h3,
.faqs .faq summary, .toc-head, .toc a,
.contact-dl dd { color: #fff; }
.hero-copy .tp-sub, .article h3 { color: var(--on-glass-2); }
.hero-copy .lede, .article p, .article li, .faq-a, .faq-a p,
.quals li, .group .pi-name, .contact-dl dd { color: var(--on-glass); }
.band .band-note, .group .pi-desc, .article .band-note,
.contact-dl dt, .col-k, .toc li::before { color: var(--on-glass-3); }
.quals li::marker, .fig-mark, .pi-num, .plate-numeral { color: var(--mint-pop); }
.group h3 { color: var(--mint-pop);
  background-image: linear-gradient(to inline-end, rgba(255,255,255,0.35), rgba(255,255,255,0)); }
.article a, .faq-a a, .band a { color: var(--mint-pop); text-decoration-color: rgba(127,230,196,0.5); }
/* .more sits on the LIGHT page ground outside the panels — mint dies there */
.more a { color: var(--accent); }
.risk-note { color: var(--on-glass-2); border-inline-start-color: var(--mint-pop);
  background: linear-gradient(to inline-end, rgba(127,230,196,0.12), transparent 70%); }
.ticks li::before { color: rgba(127,230,196,0.8); }
.runninghead a { color: var(--on-glass-3); }
.runninghead a:hover { color: var(--mint-pop); }

/* ---------- inner elements on deep glass ---------- */
.creds li {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.40);
  border-block-end-color: rgba(0,0,0,0.25);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(6,60,52,0.20);
}
.colophon {
  background: rgba(0,0,0,0.20);
  box-shadow:
    inset 0  1px 2px rgba(0,0,0,0.30),
    inset 0 -1px 0   rgba(255,255,255,0.16),
    0 1px 0 rgba(255,255,255,0.14);
}
.trust-card .col-row + .col-row { border-block-start-color: rgba(255,255,255,0.12); }
.col-v { color: var(--on-glass); }
.col-row:last-child .col-v { color: #fff; }
.col-icon {
  color: var(--mint-pop);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ghost buttons inside dark panels read as white glass */
.btn-ghost {
  color: #fff;
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.55);
  border-block-end-color: rgba(255,255,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(6,60,52,0.18);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: #fff; border-color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px -8px rgba(6,60,52,0.4), 0 0 0 5px rgba(127,230,196,0.20);
}
/* primary button pops off the dark panel with a lit rim */
.btn { border-color: rgba(255,255,255,0.50); }

/* ---------- FAQ rows ---------- */
.faq { border-block-end-color: rgba(255,255,255,0.14); }
.faq summary::before {
  color: var(--mint-pop);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.faq:hover { box-shadow: 0 8px 22px rgba(6,60,52,0.30); }

/* ---------- procedures: icons + plates stay OPAQUE, now deep ---------- */
.pi-icon {
  color: #9feed4;
  background: linear-gradient(180deg, #0e5c4e 0%, #084438 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 1px 2px rgba(6,60,52,0.20);
}
.plate-index a:hover .pi-icon {
  color: #c8f5e4;
  border-color: rgba(127,230,196,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.30), 0 6px 14px -8px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #0e5c4e 0%, #084438 100%);
}
.plate-index a { color: var(--on-glass); }
.plate-index a:hover, .group .plate-index a:hover {
  background: linear-gradient(to inline-end, rgba(255,255,255,0.10), rgba(255,255,255,0));
}
.plate-index li { border-block-end-color: rgba(255,255,255,0.12); }
/* incised-line highlight is a LIGHT-ground trick; on deep ground the groove
   shadow goes below-dark instead */
.pi-icon svg, .plate-art svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45)); }

.plate {
  background: linear-gradient(180deg, #0d5a4c 0%, #073f36 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 2px 6px rgba(6,60,52,0.2),
    0 18px 40px -20px rgba(6,60,52,0.55);
}
.plate-art { color: #cfeee2; }
.plate figcaption { color: var(--on-glass-3); }

/* ---------- band dot grid back to light-on-dark ---------- */
.band::before {
  /* 10% white vanished on the deep saturated fill (adversary round-2 measured
     regression) — the squared-paper texture needs ~2x the alpha to survive it */
  background-image: radial-gradient(rgba(255,255,255,0.20) 1.2px, transparent 1.2px);
}
.band .band-note { border-block-start-color: rgba(255,255,255,0.16); }

/* ---------- portrait frame joins the material ---------- */
.portrait {
  background: linear-gradient(180deg, rgba(13,104,88,0.72) 0%, rgba(6,66,57,0.80) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.34);
  border-block-end-color: rgba(0,0,0,0.30);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(127,230,196,0.24),
    0 18px 40px -18px rgba(6,60,52,0.55);
}

/* ---------- fallbacks follow the material ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl, .portrait, .photo-fig {
    background: linear-gradient(180deg, #0d6153 0%, #06463c 100%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl, .portrait, .photo-fig {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(180deg, #0d6153 0%, #06463c 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 1px 2px rgba(6,60,52,0.2);
  }
}

/* ---------- mobile: same material, tuned ---------- */
@media (max-width: 47.99rem) {
  /* lighter blur where mobile GPUs pay for every pass; the high-alpha deep
     fill carries the look, blur is garnish here */
  .hero-copy, .band, .group, .faqs, .article, .toc, .contact-dl, .portrait, .photo-fig {
    -webkit-backdrop-filter: blur(9px) saturate(140%);
            backdrop-filter: blur(9px) saturate(140%);
  }
  .hero-copy { padding: 1.25rem 1.1rem; }
  .band, .book-band { inline-size: min(100% - 1.5rem, var(--max)); }
  .group { padding: 1rem 0.95rem; }
  .head-inner { row-gap: 0.3rem; }
}

/* ---------- fit + composition fixes (Andrew, screenshots #381-382) ---------- */
/* Anchor jumps and short scrolls were hiding headings under the sticky glass
   nav — reserve its height. */
html { scroll-padding-block-start: 5.5rem; }

/* The ask/contact content was measure-locked to the inline-start edge, leaving
   half the viewport as empty aurora — a floating column reads composed only
   when it is CENTRED in the field. */
.page-head { max-inline-size: 48rem; margin-inline: auto; }
.faqs { margin-inline: auto; max-inline-size: min(100%, 46rem); }
.contact-dl { margin-inline: auto; max-inline-size: min(100%, 46rem); }
/* home page: centre the FAQ teaser + its read-more with the panel */
.sec.wrap > .faqs + .more, .more { max-inline-size: 46rem; margin-inline: auto; }

/* ---------- procedures INDEX page (Andrew, #383): the standalone plate-index
   sat on the LIGHT ground while the deep-glass layer painted its text light —
   near-invisible names. The list becomes its own deep-glass card, so the
   light-text rules above are correct everywhere they apply. ---------- */
main .plate-index:not(.group *) {
  background: linear-gradient(180deg, var(--glass-deep-a) 0%, var(--glass-deep-b) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.28);
  border-block-end-color: rgba(0,0,0,0.30);
  border-radius: var(--r-lg);
  padding: 0.9rem 1.3rem;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(127,230,196,0.24),
    0 22px 46px -22px rgba(6,60,52,0.50);
}
main .plate-index:not(.group *) .pi-dots { border-color: rgba(255,255,255,0.30); }
main .plate-index:not(.group *) .pi-desc { color: var(--on-glass-3); }

/* ---------- hover states inside deep panels (Andrew, #384): the base layer's
   hover colour is the DARK accent, which vanishes on the dark glass exactly
   when the cursor arrives. Every interactive hover inside a deep panel goes
   mint. ---------- */
.toc a:hover { color: var(--mint-pop); }
.plate-index a:hover .pi-name { color: var(--mint-pop); }
.article a:hover, .faq-a a:hover, .band a:hover { text-decoration-color: var(--mint-pop); }

/* ---------- procedures master–detail showcase (Andrew, #386) ---------- */
.proc-showcase { display: grid; gap: 1.25rem; margin-block-start: 1.75rem; }
@media (min-width: 54rem) {
  /* columns STRETCH (Andrew: "make the left panel fit the size") — the detail
     box fills the full row height set by the list, content vertically centred,
     instead of floating short over dead space */
  .proc-showcase { grid-template-columns: minmax(15rem, 0.72fr) 1.45fr; }
  .ps-stack { block-size: 100%; }
  .ps-detail:not([hidden]) { block-size: 100%; align-content: stretch; }
}
.ps-list {
  background: linear-gradient(180deg, var(--glass-deep-a) 0%, var(--glass-deep-b) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.28);
  border-block-end-color: rgba(0,0,0,0.30);
  border-radius: var(--r-lg);
  padding: 1rem 0.9rem;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(127,230,196,0.24),
    0 22px 46px -22px rgba(6,60,52,0.50);
}
.ps-group {
  font-family: var(--f-ui); font-size: var(--step--2); font-weight: 500;
  color: var(--mint-pop); margin: 0.9rem 0.4rem 0.35rem;
}
.ps-group:first-child { margin-block-start: 0.1rem; }
.ps-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ps-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--r-sm);
  border-inline-start: 2px solid transparent;
  color: var(--on-glass); text-decoration: none;
  font-size: var(--step--1);
  transition: background 150ms linear, border-color 150ms linear, color 150ms linear;
}
.ps-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.ps-item[aria-current="true"] {
  background: rgba(255,255,255,0.11);
  border-inline-start-color: var(--mint-pop);
  color: #fff;
}
.ps-ico {
  flex: none; inline-size: 2.1rem; block-size: 2.1rem;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #0e5c4e 0%, #084438 100%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9px;
  color: #9feed4;
}
.ps-ico svg { inline-size: 1.5rem; block-size: 1.5rem; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45)); }
.ps-name { min-inline-size: 0; }

.ps-detail {
  background: linear-gradient(180deg, var(--glass-deep-a) 0%, var(--glass-deep-b) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.28);
  border-block-end-color: rgba(0,0,0,0.30);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(127,230,196,0.26),
    0 22px 46px -22px rgba(6,60,52,0.50);
  display: grid; gap: 1.25rem;
}
@media (min-width: 42rem) {
  .ps-detail { grid-template-columns: minmax(12rem, 19rem) 1fr; align-items: stretch; }
  .ps-detail .ps-body { align-self: center; }
}
.ps-detail[hidden] { display: none; }
/* the plate stays OPAQUE — line art never sits over blur */
.ps-plate {
  background: linear-gradient(180deg, #0d5a4c 0%, #073f36 100%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r-md);
  padding: 1.1rem;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.35);
}
.ps-plate svg { inline-size: min(100%, 17rem); block-size: auto; color: #cfeee2; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45)); }
.ps-kicker { font-family: var(--f-ui); font-size: var(--step--2); color: var(--mint-pop); margin-block-end: 0.3rem; }
.ps-detail h3 { color: #fff; margin-block-end: 0.35em; }
.ps-desc { color: var(--on-glass); margin-block-end: 1.1em; }
@media (prefers-reduced-motion: no-preference) {
  .ps-detail:not([hidden]) { animation: riseIn 320ms var(--ease) both; }
}

/* grid-cell wrappers of the showcase; min-inline-size:0 lets long Arabic wrap
   inside the grid instead of forcing overflow */
.ps-stack { min-inline-size: 0; }
.ps-body { min-inline-size: 0; }

/* nav anchor to #procedures scrolls smoothly (reduced-motion users get a jump) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- AI doctor figures (v34) ----------
   Same card material as the hero portrait: deep-glass frame, the photograph kept
   OPAQUE inside it (blur belongs to the frame, never the image), and the same
   soft-light mint grade so a synthetic photo and his real portrait sit in one
   colour world. The .ai-note disclosure inside the caption is load-bearing —
   lintPage fails any page that shows one of these without it. */
.photo-fig {
  position: relative; z-index: 3; isolation: isolate;
  margin: 0;
  padding: 0.7rem;
  background: linear-gradient(180deg, rgba(13,104,88,0.72) 0%, rgba(6,66,57,0.80) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.34);
  border-block-end-color: rgba(0,0,0,0.30);
  border-radius: var(--r-md);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(127,230,196,0.24),
    0 18px 40px -18px rgba(6,60,52,0.55);
}
.photo-fig img {
  inline-size: 100%; block-size: auto; display: block;
  border-radius: calc(var(--r-md) - 5px);
  filter: grayscale(0.15) saturate(0.72) contrast(1.05) brightness(1.02);
  box-shadow: 0 1px 2px rgba(9,64,55,0.10), 0 10px 22px -14px rgba(9,64,55,0.28);
}
.photo-fig::after {
  /* the grade wash covers the IMAGE box only — not the caption below it */
  content: ""; position: absolute; inset-inline: 0.7rem; inset-block-start: 0.7rem;
  aspect-ratio: 870 / 1080; pointer-events: none;
  border-radius: calc(var(--r-md) - 5px);
  background: linear-gradient(180deg, #9feed4 0%, #0d6d5c 100%);
  mix-blend-mode: soft-light;
  opacity: 0.85;
}
.photo-fig figcaption {
  margin-block-start: 0.6rem; padding-inline: 0.2rem;
  text-align: center; color: var(--on-glass, #f2faf7);
}
.photo-fig .ai-note { opacity: 0.62; font-size: 0.85em; }

/* qualifications band: figure beside the list on wide screens, stacked under it
   on narrow ones (figure LAST on mobile — credentials outrank atmosphere) */
.band-media { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; }
.band-media .photo-fig { max-inline-size: 22rem; margin-inline: auto; order: 2; }
@media (min-width: 48rem) {
  .band-media { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .band-media .photo-fig { order: 0; margin-inline: 0; }
}

/* standalone figures (About, Contact): centred, never full-bleed — a portrait
   crop blown to column width reads as a billboard, not a reference work */
.photo-solo { max-inline-size: 24rem; margin-inline: auto; margin-block-start: 1.5rem; }

/* contact: details card + figure share the row on wide screens (Andrew, #380).
   align-items CENTER, not stretch — stretching the figure would desync the
   aspect-ratio-positioned grade wash from the image it tints */
@media (min-width: 54rem) {
  .contact-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 1.75rem; align-items: center; }
  .contact-duo .contact-dl { margin-inline: 0; max-inline-size: none; }
  .contact-duo .photo-solo { margin-block-start: 0; max-inline-size: 26rem; }
}

/* the AI-imagery disclosure line in the footer (replaces per-image captions) */
.site-foot .ai-note { opacity: 0.6; font-size: 0.85em; margin-block-start: 0.4rem; }