/* ==========================================================================
   CUEARABIA
   RTL-first (Arabic default). Logical properties throughout so the layout
   mirrors correctly when the EN/AR toggle flips <html dir>.
   Palette: Forest / Golden Wheat / Deep Umber only — no neutral grey.
   ========================================================================== */

:root {
  --bg: #002623;
  --panel: #054239;
  --panel-2: #0b3d35;
  --border: rgba(237, 235, 224, 0.14);
  --border-strong: rgba(237, 235, 224, 0.26);
  --text: #edebe0;
  --text-muted: #b9a779;
  --text-faint: rgba(237, 235, 224, 0.65);   /* 6.4:1 on Forest Deep, 5:1 on Forest Mid */
  --border-input: rgba(237, 235, 224, 0.5);  /* form-control edge, 3:1 or better */
  --text-soft: rgba(237, 235, 224, 0.82);   /* running text: cream, softened */

  --go: #428177;
  --standby: #b9a779;
  --live: #6b1f2a;

  --font-display: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 7rem;

  --radius: 4px;
  --inline-start: right;
  --inline-end: left;
  --content-width: 1180px;
  --header-h: 80px;

  color-scheme: dark;   /* native pickers, selects and scrollbars follow the dark page */
}

html[lang="en"] {
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
}
html[dir="ltr"] {
  --inline-start: left;
  --inline-end: right;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="en"] body { line-height: 1.6; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; font-weight: 600; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -0.015em; }

p { margin: 0; color: var(--text-soft); max-width: 62ch; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

:focus-visible { outline: 2px solid var(--standby); outline-offset: 3px; }
main:focus { outline: none; }   /* the skip link parks focus here; nothing to ring */

/* Skip link: first thing a keyboard user reaches, invisible until focused */
.skip-link {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 0.75em 1.1em;
  background: var(--standby);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Ambient background ---------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.ambient .a1 {
  width: 60vw; height: 60vw; max-width: 640px; max-height: 640px;
  background: rgba(66, 129, 119, 0.25);
  top: -14%; inset-inline-end: -18%;
  animation: drift1 26s ease-in-out infinite;
}
.ambient .a2 {
  width: 55vw; height: 55vw; max-width: 560px; max-height: 560px;
  background: rgba(185, 167, 121, 0.12);
  bottom: -12%; inset-inline-start: -16%;
  animation: drift2 32s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-5vw, 6vh) scale(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(5vw, -6vh) scale(1.1); }
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ---------- Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal] > * { transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal="stagger"] > * { opacity: 0; transform: translateY(14px); }
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.22s; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient span { animation: none; }
  [data-reveal], [data-reveal="stagger"] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .tally-dot { animation: none !important; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85em 1.5em;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.12s ease, box-shadow 0.25s ease;
}
.btn-primary { background: var(--standby); color: var(--bg); box-shadow: 0 0 0 rgba(185,167,121,0); }
.btn-primary:hover { background: var(--text); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(185,167,121,0.28); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-small { padding: 0.6em 1.1em; font-size: 0.85rem; min-height: 40px; }
@media (pointer: coarse) { .btn-small, .lang-toggle { min-height: 44px; } }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(0, 38, 35, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  margin-inline-end: auto;
}
.wordmark img { width: 46px; height: 46px; flex-shrink: 0; }
.wordmark .wm-text { font-size: 1.4rem; font-weight: 700; letter-spacing: 0; }
html[lang="en"] .wordmark .wm-text { letter-spacing: -0.02em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: nowrap;
  padding: 0.7em 0.15em;   /* taller hit area, same look */
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 0.5em 0.75em;
  min-width: 44px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  direction: ltr;
  line-height: 1;
}
.lang-toggle:hover { color: var(--text); border-color: var(--text-muted); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  inset-inline-start: 13px;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (lives inside the stage, so the scene is the first thing seen) ---------- */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
  direction: ltr;
}

.tally-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px rgba(107, 31, 42, 0.7);
  animation: pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-tagline {
  margin-top: 0.7em;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  direction: ltr;
  text-align: start;
}

.hero-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Sections ---------- */

section { padding: var(--space-5) 0; }
/* sections are also .wrap — keep their vertical breathing room */
section.wrap { padding-block: var(--space-5); }

/* Headline and description always stack — never side by side */
.section-head {
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}
.section-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.4; max-width: 22ch; }
html[lang="en"] .section-head h2 { line-height: 1.2; }
.section-head .desc { margin-top: 0.8em; max-width: 52ch; font-size: 0.95rem; }

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.role-card {
  background: var(--panel);
  padding: var(--space-4) var(--space-3) var(--space-3);
  position: relative;
  transition: background 0.25s ease;
}
.role-card::before {
  content: "";
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  background: var(--go);
  transform: scaleX(0);
  transform-origin: var(--origin, right);
  transition: transform 0.35s ease;
}
html[dir="ltr"] .role-card::before { --origin: left; }
.role-card:hover::before { transform: scaleX(1); }
.role-card:hover { background: var(--panel-2); }

.role-icon { width: 52px; height: 52px; color: var(--standby); }
.role-icon svg { width: 100%; height: 100%; display: block; }
.role-code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); margin-top: 1.1em; direction: ltr; }
.role-card h3 { margin-top: 0.3em; font-size: 1.55rem; line-height: 1.3; }
.role-card .role-detail dt { font-size: 0.8rem; }
.role-card .role-detail dd { font-size: 1.02rem; line-height: 1.75; color: var(--text); }
.role-card .role-def { margin-top: 1.1em; }

.role-detail { margin: 0.9em 0 0; }
.role-detail dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--standby);
  margin-top: 0.9em;
  direction: ltr;
}
.role-detail dt:first-child { margin-top: 0; }
.role-detail dd { margin: 0.3em 0 0; font-size: 0.86rem; color: var(--text-soft); line-height: 1.7; }

/* a card shows its definition; the rest opens on demand */
.role-def { margin-top: 0.9em; }
.role-more { margin-top: var(--space-2); border-top: 1px solid var(--border); }
.role-more summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85em 0 0.3em;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}
.role-more summary::-webkit-details-marker { display: none; }
.role-more summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--standby);
  flex-shrink: 0;
}
.role-more[open] summary::after { content: "\2212"; color: var(--standby); }
.role-more summary:focus-visible { outline: 2px solid var(--standby); outline-offset: 3px; border-radius: 2px; }
.role-more .role-detail { margin-top: 0.7em; }

.section-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.section-note p { font-size: 0.9rem; }

/* ---------- Specializations ---------- */

.spec-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.spec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.7em 1.25em;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.spec-tag:hover { border-color: var(--border-strong); background: var(--panel-2); }
.spec-tag .spec-icon { width: 18px; height: 18px; color: var(--go); flex-shrink: 0; }
.spec-tag .spec-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Purpose / diagram ---------- */

.purpose { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-5); align-items: center; }

.diagram-frame {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
}
.diagram-frame svg { width: 100%; height: auto; display: block; }

.purpose-body p + p { margin-top: 1.1em; }

/* ---------- Story ---------- */

.story-body { max-width: 60ch; }
.story-body p + p { margin-top: 1.1em; }
.story-quote {
  margin-top: var(--space-4);
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--live);
  font-size: 1.05rem;
  color: var(--text);
  max-width: 46ch;
}

/* ---------- Process ---------- */

.process-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.process-step { border-top: 2px solid var(--border); padding-top: var(--space-2); }
.process-step.is-active { border-top-color: var(--go); }
.process-step .step-tc { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); direction: ltr; }
.process-step h3 { margin-top: 0.5em; font-size: 1.02rem; }
.process-step p { margin-top: 0.5em; font-size: 0.9rem; }

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--standby);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--standby); }
.faq-item p { padding-bottom: var(--space-2); font-size: 0.92rem; }

/* ---------- Forms ---------- */

.split-panel { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: start; }
.split-panel .info h2 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.4; max-width: 18ch; }
html[lang="en"] .split-panel .info h2 { line-height: 1.2; }
.split-panel .info .lede { margin-top: var(--space-2); }

.contact-channels { margin-top: var(--space-4); display: flex; flex-direction: column; }
.contact-channel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  flex-wrap: wrap;
}
.contact-channel .ch-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); direction: ltr; }
.contact-channel .ch-value { color: var(--text); direction: ltr; }

.form-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-4);
}
.field { margin-bottom: var(--space-3); }
.field:last-of-type { margin-bottom: var(--space-2); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: 0.55em;
  direction: ltr;
  text-align: start;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 0.8em 0.9em;
  min-width: 0;                /* a date/select can't force its column wider than the grid */
  max-width: 100%;
  transition: border-color 0.18s ease;
}
.field input, .field select { height: 3.1rem; }
/* Safari/iPad draws its own taller, wider date box; flatten it so it matches the others */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  line-height: 1.4;
  text-align: start;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: start; min-height: 1.4em; margin: 0; }
.field input[type="date"]::-webkit-datetime-edit { padding: 0; }
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--standby); outline: 2px solid var(--standby); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--text); }
.field .req { color: var(--standby); }
.field-error {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.3em 0.7em;
  background: var(--live);       /* Deep Umber is the alert colour: cream text on it is 9:1 */
  color: var(--text);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.5;
}
.form-note { margin-bottom: var(--space-3); font-size: 0.82rem; color: var(--text-faint); }
.field input::placeholder, .field textarea::placeholder { color: rgba(237, 235, 224, 0.58); }
.field .hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.45em; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.form-status { margin-top: var(--space-2); font-size: 0.88rem; min-height: 1.4em; }
.form-status.ok { color: var(--text); border-inline-start: 3px solid var(--go); padding-inline-start: 0.7em; }
.form-status.err { color: var(--text); background: var(--live); padding: 0.45em 0.8em; border-radius: var(--radius); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: var(--space-4) 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.footer-row .copy { font-size: 0.8rem; color: var(--text-faint); direction: ltr; }
.footer-links { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.footer-links a { display: inline-block; padding: 0.65em 0.2em; font-size: 0.8rem; color: var(--text-faint); text-decoration: none; }
.footer-links a:hover { color: var(--text-muted); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1040px) {
  .nav-links { gap: var(--space-2); }
  .nav-links a { font-size: 0.82rem; }
}

@media (max-width: 900px) {
  :root { --space-5: 3.5rem; --space-6: 4rem; }

  /* Nav collapses into a real panel — no zooming required */
  .nav-links {
    position: fixed;
    top: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--space-3) var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-toggle { display: block; }

  .purpose { grid-template-columns: 1fr; gap: var(--space-4); }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .split-panel { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 620px) {
  :root { --space-3: 1.5rem; --header-h: 70px; }

  .wordmark .wm-text { font-size: 1.15rem; }
  .wordmark img { width: 40px; height: 40px; }
  .wordmark { gap: 0.6rem; }

  .hero-actions .btn { flex: 1 1 auto; }

  .card-grid { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; }
  .form-panel { padding: var(--space-3); }

  .section-note { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  html[lang="en"] .wordmark img { width: 34px; height: 34px; }
  html[lang="en"] .wordmark .wm-text { font-size: 1.02rem; }
}

@media (max-width: 380px) {
  html[lang="en"] .wordmark img { width: 30px; height: 30px; }
  html[lang="en"] .wordmark .wm-text { font-size: 0.95rem; }
  .lang-toggle { padding: 0.45em 0.6em; font-size: 0.75rem; }
  .nav-actions .btn { padding: 0.7em 0.9em; font-size: 0.85rem; }
}

/* Very narrow phones (320px): tighten the header so the English labels fit */
@media (max-width: 350px) {
  .nav { gap: 0.4rem; }
  .wordmark { gap: 0.4rem; }
  .wordmark img { width: 32px; height: 32px; }
  .wordmark .wm-text { font-size: 0.98rem; }
  html[lang="en"] .wordmark img { width: 28px; height: 28px; }
  html[lang="en"] .wordmark .wm-text { font-size: 0.9rem; }
  .nav-actions { gap: 0.35rem; }
  .nav-actions .btn { padding: 0.6em 0.65em; font-size: 0.78rem; }
  .lang-toggle { padding: 0.4em 0.5em; }
}

/* ==========================================================================
   HEADLINE ACCENTS
   A key phrase per headline picks up a brand colour, echoing the two-tone
   wordmark. Purely typographic — no weight or size change.
   ========================================================================== */

.accent-go { color: var(--go); }
.accent-gold { color: var(--standby); }

/* ==========================================================================
   PURPOSE DIAGRAM — interactive nodes
   ========================================================================== */

.diagram-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: var(--space-2);
  direction: ltr;
}

.diagram-node { cursor: pointer; }
.diagram-node circle { transition: stroke-width 0.2s ease, filter 0.2s ease; }
.diagram-node text { transition: fill-opacity 0.2s ease; user-select: none; }
.diagram-node:hover circle,
.diagram-node:focus-visible circle {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(66, 129, 119, 0.5));
}
.diagram-node:focus-visible circle { stroke: var(--text); stroke-width: 4; }   /* cream ring: distinct from the gold and teal circles around it */
.diagram-node:focus,
.diagram-node:focus-visible { outline: none; }
.diagram-node[aria-pressed="true"] circle { fill: var(--go); }
/* only the number inside the circle inverts; the caption below stays readable */
.diagram-node[aria-pressed="true"] text:first-of-type { fill: var(--bg) !important; fill-opacity: 1 !important; }
.diagram-node[aria-pressed="true"] text:last-of-type { fill-opacity: 1 !important; }

.diagram-detail {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  animation: detailIn 0.25s ease;
}
@keyframes detailIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.diagram-detail-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.diagram-detail-num {
  font-size: 0.72rem;
  color: var(--standby);
  direction: ltr;
}
.diagram-detail-head h4 {
  flex: 1;
  font-size: 1rem;
  font-family: var(--font-display);
  margin: 0;
}
.diagram-detail-close {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.diagram-detail-close::before { content: ""; position: absolute; inset: -6px; }   /* 44px hit area */
.diagram-detail-close:hover { color: var(--text); border-color: var(--text-muted); }
.diagram-detail .role-detail { margin-top: 0.8em; }

@media (prefers-reduced-motion: reduce) {
  .diagram-detail { animation: none; }
}

/* ==========================================================================
   ARABIC LABELS
   Small labels are set in the mono face for English. Arabic has no mono
   letterforms, so on the Arabic page they use the Arabic display face and
   read right-to-left, aligned with the text they introduce.
   ========================================================================== */

html[lang="ar"] .role-detail dt,
html[lang="ar"] .field label,
html[lang="ar"] .diagram-hint,
html[lang="ar"] .stage-hint span:first-child {
  direction: rtl;
  font-family: var(--font-display);
  letter-spacing: 0;
}
html[lang="ar"] .role-detail dt { font-size: 0.78rem; }
html[lang="ar"] .field label { font-size: 0.82rem; }
html[lang="ar"] .diagram-hint { font-size: 0.8rem; }
html[lang="ar"] .stage-hint span:first-child { font-size: 0.82rem; }

/* ==========================================================================
   STAGE — one cue starts the whole show
   A scroll-driven scene. JS sets a few custom properties (--t on the lamp,
   screen and cue-light groups, --f for the finale, --rail for the golden
   line); everything below is pure CSS reacting to them. Defaults describe the
   finished state, so without JS (or with reduced motion) the visitor simply
   sees the lit stage.
   ========================================================================== */

section.stage { padding: 0; }

.stage { --f: 1; --rail: 1; }
.stage [data-lamp],
.stage [data-sound],
.stage [data-screen],
.stage [data-tc] { --t: 1; }

.stage-pin { padding: var(--space-3) 0; }
.stage-wrap { width: 100%; }

.stage-head { text-align: start; margin-bottom: var(--space-3); }
.stage-head .hero-eyebrow { margin-bottom: var(--space-2); }
.stage-head h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.38; max-width: 20ch; }
html[lang="en"] .stage-head h1 { line-height: 1.12; }
.stage-head .hero-tagline { margin-top: 0.6em; }

.stage-intro .lede { font-size: 0.95rem; max-width: 46ch; }
.stage-intro .hero-actions { margin-top: var(--space-2); }

/* --- The stage picture --- */

.stage-art {                     /* the light is never framed: no box, no background of its own */
  --art-h: clamp(180px, calc(100vh - var(--header-h) - 462px), 430px);
  position: relative;
  width: min(100%, calc(var(--art-h) * 2.381));
  aspect-ratio: 1000 / 420;
  margin-inline: auto;
  overflow: hidden;
}
.stage-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The beams may reach a little past the drawing's own edge */
.stage-art > svg { overflow: visible; }

/* --- Photo grading for the sections below (same look as the stage) --- */
.photo-grade {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #001a18;
}
.photo-grade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.95);
  opacity: 0.85;
}
.photo-grade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #428177;
  mix-blend-mode: color;
}
.photo-grade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(120% 100% at 50% 45%, rgba(0, 38, 35, 0) 35%, rgba(0, 38, 35, 0.75) 100%);
}
.photo-band { aspect-ratio: 3.4 / 1; margin-bottom: var(--space-4); }
.photo-band img { object-position: 50% 62%; }
.photo-side { aspect-ratio: 4 / 3; }
.story-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: center; }
#contact { position: relative; }
#contact .split-panel { position: relative; z-index: 1; }
.photo-backdrop {                  /* a faint venue behind the contact heading, fading out before the form */
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 420px;
  z-index: 0;
  border: 0;
  border-radius: 0;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 45%, #000 20%, transparent 100%);
}
.photo-backdrop::after { display: none; }
@media (max-width: 899px) {
  .story-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .photo-band { aspect-ratio: 2.2 / 1; }
  .photo-backdrop { height: 260px; opacity: 0.2; }
}
@media (forced-colors: active) { .photo-grade, .stage-haze { display: none; } }

.speaker rect { fill: #001a18; stroke: rgba(185, 167, 121, 0.75); stroke-width: 1.4; }
.speaker circle { fill: none; stroke: rgba(185, 167, 121, 0.7); stroke-width: 1.3; }

/* sound: speakers light up and ripple */
.woofer-on { fill: rgba(185, 167, 121, 0.28); stroke: #b9a779; stroke-width: 2.5; opacity: var(--t); transform-box: fill-box; transform-origin: center; }
.tweeter-on { fill: rgba(185, 167, 121, 0.28); stroke: #b9a779; stroke-width: 2; opacity: var(--t); }
.sound-wave {
  fill: none;
  stroke: #b9a779;
  stroke-width: 1.3;
  stroke-opacity: 0.7;
  opacity: var(--t);
  transform-box: fill-box;
  transform-origin: center;
}

.floor-edge { stroke: rgba(185, 167, 121, 0.55); stroke-width: 1.3; }

/* screen: a frameless LED panel with a soft shadow behind it */
.screen-glass { fill: #021f1b; }
.screen-halo { opacity: calc(var(--t) * (0.55 + 0.45 * var(--f))); }
.screen-arcs circle { fill: none; stroke: #988561; stroke-opacity: 0.45; stroke-width: 1.5; }
.screen-arcs circle:nth-child(2) { stroke: #428177; stroke-opacity: 0.6; }
.screen-ring { fill: none; stroke: #b9a779; stroke-width: 2; stroke-opacity: 0.7; transform-box: fill-box; transform-origin: center; }
.eq-bar { fill: #428177; opacity: 0.9; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.35); }
.eq-bar.alt { fill: #b9a779; }
.screen-cover {
  fill: #021f1b;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 - var(--t)));
}
.screen-scan {
  transform: translateY(calc(var(--t) * 172px));
  opacity: calc(var(--t) * (1 - var(--t)) * 4);
}

/* truss and lamps */
.hanger { stroke: #988561; stroke-width: 1.4; stroke-opacity: 0.6; }
.rod { stroke: #988561; stroke-width: 2; }
.lamp-body { fill: #0b3d35; stroke: rgba(185, 167, 121, 0.6); stroke-width: 1.5; }
.lamp-body-on { fill: #b9a779; opacity: var(--t); }
.lamp-lens { fill: #edebe0; fill-opacity: calc(0.22 + 0.78 * var(--t)); }
.lens-glow { opacity: var(--t); }
/* the beams cross in front of the screen while it is dark, and slip behind it as it comes on */
.beams-front { opacity: calc(1 - var(--screen, 1)); }
.stage.is-live .beams-front { visibility: hidden; }
.fan.vis { opacity: calc(var(--t) * (0.6 + 0.4 * var(--f))); }
.pool { opacity: calc(var(--t) * (0.45 + 0.55 * var(--f))); }

/* cue readout: the show caller's view of the moment */
.tc { opacity: var(--t); }
.tc-box { fill: rgba(0, 26, 24, 0.88); stroke: rgba(185, 167, 121, 0.7); stroke-width: 1; }
.tc text { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; direction: ltr; unicode-bidi: isolate; }
.tc-a { fill: #edebe0; text-anchor: start; }
.tc-b { fill: #b9a779; text-anchor: end; font-weight: 700; letter-spacing: 0.06em; }

@media (max-width: 899px) { .tc { display: none; } }   /* too small to read on a phone-sized stage */

/* haze: what a haze machine does, not clouds. A fine, even veil that fills the air and makes the
   beams read as shafts of light. Two transparent textures (brand colours, the alpha is the haze)
   built by a helper script; each layer is three tiles wide and slides one tile, so the loop never
   shows a seam. They are plain HTML layers: the compositor moves them, the drawing is never
   repainted. */
.stage-haze {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--lit, 1);
}
.haze {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 150%;
  background-repeat: repeat-x;
  background-size: 33.3334% 100%;
  opacity: var(--hi);
  will-change: transform;
}
.haze-a { --lo: 0.7; --hi: 1; background-image: url(../assets/stage/haze-a.webp); }
.haze-b { --lo: 0.6; --hi: 1; background-image: url(../assets/stage/haze-b.webp); }
@media (max-width: 899px) {
  .stage-haze { left: 0; width: 100%; margin-left: 0; }
}

/* dust drifting through the light */
.art-dust { pointer-events: none; opacity: var(--lit, 1); }
.mote { fill: #edebe0; fill-opacity: var(--o, 0.4); }

.wash { opacity: var(--f); }
.audience circle { fill: #00110f; }



/* looping life — from the moment the lamps come on, and for as long as the page is open */
@media (prefers-reduced-motion: no-preference) {
  .stage.has-lit .fan {
    animation: coneSweep var(--dur, 7s) ease-in-out var(--delay, 0s) infinite var(--dir, alternate);
  }
  .stage.has-lit .haze-a { animation: hazeLeft 210s linear infinite, hazeBreath 23s ease-in-out -6s infinite alternate; }
  .stage.has-lit .haze-b { animation: hazeRight 150s linear infinite, hazeBreath 31s ease-in-out -14s infinite alternate; }
  /* the fringe of the Sadu bar sways all the time, each thread at its own pace */
  .strand-swing { animation: strandSwing var(--sw, 4s) ease-in-out var(--swd, 0s) infinite alternate; }
  .strand { animation: strandRipple var(--rp, 2.4s) ease-in-out var(--rpd, 0s) infinite alternate; }
  .stage.has-lit .mote {
    animation: moteDrift var(--s, 9s) ease-in-out var(--d, 0s) infinite alternate;
  }
  .stage.has-sound .sound-wave {
    animation: soundPulse 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.5s);
  }
  .stage.has-sound .woofer-on { animation: wooferBeat 0.8s ease-in-out infinite alternate; }
  .stage.has-video .eq-bar {
    animation: eqBar 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.14s);
  }
  .stage.has-video .screen-ring { animation: ringPulse 2.4s ease-in-out infinite; }

  /* the loops rest while the stage is out of view */
  .stage.is-offscreen .fan,
  .stage.is-offscreen .haze,
  .stage.is-offscreen .mote,
  .stage.is-offscreen .sound-wave,
  .stage.is-offscreen .woofer-on,
  .stage.is-offscreen .eq-bar,
  .stage.is-offscreen .screen-ring,
  .stage.is-offscreen .sky-star,
  .stage.is-offscreen .sky-spark,
  .stage.is-offscreen .strand-swing,
  .stage.is-offscreen .strand { animation-play-state: paused; }
}
@keyframes hazeLeft {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3334%, 0, 0); }
}
@keyframes hazeRight {
  from { transform: translate3d(-33.3334%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes hazeBreath {
  from { opacity: var(--lo); }
  to   { opacity: var(--hi); }
}
@keyframes strandSwing {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}
@keyframes strandRipple {
  from { transform: skewY(-3.5deg); }
  to   { transform: skewY(3.5deg); }
}
@keyframes moteDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}
@keyframes coneSweep {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}
@keyframes soundPulse {
  0%, 100% { transform: scale(0.9);  stroke-opacity: 0.25; }
  50%      { transform: scale(1.1);  stroke-opacity: 0.8; }
}
@keyframes wooferBeat {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}
@keyframes eqBar {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1);    stroke-opacity: 0.45; }
  50%      { transform: scale(1.14); stroke-opacity: 0.9; }
}

/* --- The cue line: five stations on a golden rail --- */

.stage-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-3) auto 0;
  padding: 0;
  max-width: 1100px;
}

.flow-rail {
  position: absolute;
  top: 18px;
  inset-inline: calc(100% / 10);
  height: 2px;
  background: var(--border-strong);
  border-radius: 2px;
  list-style: none;
}
.rail-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(to var(--inline-end), var(--go), var(--standby));
  transform: scaleX(var(--rail));
  transform-origin: var(--inline-start) center;
}
.rail-tip {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--rail) * 100%);
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 4px rgba(185, 167, 121, 0.25), 0 0 16px 2px rgba(185, 167, 121, 0.75);
}

.flow-node { position: relative; padding-top: 52px; text-align: center; }
.node-link { display: none; }   /* phones only: the length of line between two stations */

.node-dot {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  margin-inline-start: -19px;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  direction: inherit;
  font-size: 0.75rem;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  color: var(--text-faint);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.node-term {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-faint);
  transition: color 0.3s ease;
}
.node-cap {
  margin: 0.3em auto 0;
  max-width: 20ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-faint);
  transition: color 0.3s ease;
}
.node-state {
  display: inline-flex;
  margin-top: 0.7em;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.node-state span { display: none; }
.flow-node[data-state="standby"] .s-standby,
.flow-node[data-state="go"] .s-go,
.flow-node[data-state="done"] .s-done,
.flow-node:not([data-state]) .s-go { display: inline; }

.flow-node[data-state="go"] .node-dot {
  background: var(--standby);
  border-color: var(--standby);
  color: var(--bg);
  box-shadow: 0 0 0 6px rgba(185, 167, 121, 0.18), 0 0 22px rgba(185, 167, 121, 0.45);
}
.flow-node[data-state="go"] .node-term { color: var(--text); }
.flow-node[data-state="go"] .node-cap { color: var(--text-muted); }
.flow-node[data-state="go"] .node-state { color: var(--text); }

.flow-node[data-state="done"] .node-dot,
.stage:not(.js-stage) .node-dot {
  background: var(--panel);
  border-color: var(--standby);
  color: var(--standby);
}
.flow-node[data-state="done"] .node-term,
.stage:not(.js-stage) .node-term { color: var(--text); }
.flow-node[data-state="done"] .node-cap,
.stage:not(.js-stage) .node-cap { color: var(--text-muted); }
.flow-node[data-state="done"] .node-state { color: var(--standby); }

.stage-hint {
  margin: var(--space-3) auto 0;
  max-width: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7em;
  font-size: 0.72rem;
  color: var(--text-faint);
  transition: opacity 0.4s ease;
}
.hint-arrow { color: var(--standby); animation: hintNudge 1.6s ease-in-out infinite; }
@keyframes hintNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.stage.is-started .stage-hint,
.stage:not(.js-stage) .stage-hint,
.stage.is-static .stage-hint { opacity: 0; visibility: hidden; }

/* Wide screens: pin the scene while the cue travels */
@media (min-width: 900px) {
  .stage-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    grid-template-areas: "head intro" "art art" "flow flow" "hint hint";
    column-gap: var(--space-5);
    align-items: end;
  }
  .stage-head { grid-area: head; margin-bottom: var(--space-2); }
  .stage-head h1 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); max-width: 28ch; }
  .stage-head .hero-eyebrow { margin-bottom: 0.6rem; }
  .stage-head .hero-tagline { margin-top: 0.4em; }
  .stage-intro { grid-area: intro; margin-bottom: var(--space-2); }
  .stage-art-wrap { grid-area: art; }
  .stage-art { overflow: visible; }   /* the beams may spill past the drawing's edge */
  .stage-flow { grid-area: flow; justify-self: center; width: 100%; }
  .stage-hint { grid-area: hint; }

  .stage.js-stage:not(.is-static) { height: 360vh; }   /* scroll run per station kept the same after going from six stations to five */
  .stage.js-stage:not(.is-static) .stage-pin {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    display: flex;
    align-items: stretch;
  }
  /* While pinned, the scene takes whatever height the headline and the cue
     line leave over, so the first screen always fits. */
  .stage.js-stage:not(.is-static) .stage-wrap {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }
  .stage.js-stage:not(.is-static) .stage-art-wrap {
    min-height: 200px;
    align-self: stretch;
    display: grid;
    place-items: center;
    container-type: size;
  }
  .stage.js-stage:not(.is-static) .stage-art {
    width: min(100cqw, calc(100cqh * 2.381));
  }
}

/* Shorter laptop screens: trade small extras for a bigger stage */
@media (min-width: 900px) and (max-height: 820px) {
  .stage-head .hero-tagline,
  .stage .node-state { display: none; }
  .stage-pin { padding: var(--space-2) 0; }
  .stage-flow { margin-top: var(--space-2); }
  .stage-hint { margin-top: var(--space-2); }
  .flow-node { padding-top: 48px; }
}

/* Narrow screens: the stage stays pinned at the top, edge to edge and with no box around it,
   and the cue line runs down the middle of the list beneath it */
@media (max-width: 899px) {
  .stage-pin { padding: var(--space-4) 0 var(--space-3); }

  .stage-art-wrap {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    margin-inline: calc(-1 * var(--space-3));
    padding: 4px 0 26px;
    /* the list slides out of sight under a soft fade, not under a hard edge */
    background: linear-gradient(to bottom, var(--bg) 0, var(--bg) calc(100% - 26px), rgba(0, 38, 35, 0) 100%);
  }
  .stage-art {
    width: min(100%, 70vh);
    aspect-ratio: 17 / 10;
  }

  .stage-flow {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: var(--space-3) 0 0;
    padding-bottom: 14vh;
  }
  .flow-rail { display: none; }
  /* each station: the dot on the centre line, its words under it, then a short length of line down to
     the next dot. The numbers below (204, 156, 48, 19) must match these sizes. */
  .flow-node { height: 204px; padding-top: 52px; }
  .node-cap { max-width: 30ch; }
  .node-link {
    /* how far the cue has come along this link: the front follows the line 44px under the stage,
       which is where js/main.js measures the cue (dot centre at 19px, link from 156px to 204px) */
    --fill: clamp(0, calc((19 + (var(--rail) * 4 - var(--k)) * 204 - 156) / 48), 1);
    display: block;
    position: absolute;
    top: 156px;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--border-strong);
  }
  .node-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--go), var(--standby));
    transform: scaleY(var(--fill));
    transform-origin: top center;
  }
  .node-link::after {
    content: "";
    position: absolute;
    top: calc(var(--fill) * 100%);
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 4px rgba(185, 167, 121, 0.25), 0 0 16px 2px rgba(185, 167, 121, 0.75);
    opacity: clamp(0, calc(min(var(--fill), 1 - var(--fill)) * 14), 1);
  }
  .stage-hint { display: none; }
  .stage-intro { padding-top: var(--space-3); }
}

/* Reduced motion / finished state: no pinning, no waiting */
.stage.is-static .stage-art-wrap { position: static; }
.stage.is-static .stage-flow { padding-bottom: 0; }

/* Honeypot field for the booking form — invisible to people */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ==========================================================================
   BACKDROP — a theatre ceiling of stars
   The stars are drawn on one fixed canvas (js/backdrop.js), with a few more
   inside the stage illustration.
   ========================================================================== */

.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* stars inside the stage scene: a separate small layer behind the drawing,
   so their twinkle never makes the big illustration repaint */
.art-stars { pointer-events: none; }
.sky-star {
  fill: #edebe0;
  fill-opacity: calc(var(--o, 0.5) * (0.35 + 0.65 * var(--f, 1)));
}
.sky-star.gold { fill: #b9a779; }
.sky-spark {
  fill: none;
  stroke: #edebe0;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-opacity: calc(0.25 + 0.6 * var(--f, 1));
}
@media (prefers-reduced-motion: no-preference) {
  .sky-star { animation: skyTwinkle var(--s, 3s) ease-in-out var(--d, 0s) infinite; }
  .sky-spark { animation: skyTwinkle var(--s, 4s) ease-in-out var(--d, 0s) infinite; }
}
@keyframes skyTwinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}


/* ==========================================================================
   SADU WEAVING
   The bar the lamps hang from is a finished Sadu cloth, still from the first
   moment: an image with its fringe drawn beside it, in its own layer of the
   stage drawing. A thin ribbon runs down the page edge and weaves as you
   scroll: a canvas made by js/sadu.js (without JavaScript it is simply absent).
   ========================================================================== */

.stage-pin { position: relative; }
.stage-wrap { position: relative; z-index: 1; }

.art-band { pointer-events: none; }
.sadu-bar, .art-fringe > g, .hanger { transform-box: view-box; transform-origin: 500px 0; }
/* drawn for the Arabic page, finished end on the left; mirrored on the English one */
html[dir="ltr"] .sadu-bar { transform: scale(-1, 1); }
.art-fringe { pointer-events: none; }
.strand-swing, .strand { transform-box: view-box; }
.strand { fill: none; stroke-width: 1.05; stroke-linecap: round; stroke-opacity: 0.8; }
.strand.cream { stroke: #edebe0; }
.strand.gold  { stroke: #b9a779; }
/* the drawing is cropped at the sides on a phone: draw the Sadu bar a little shorter (its cords
   follow), so the whole bar and the fringe at both ends stay in view */
@media (max-width: 899px) {
  .sadu-bar { transform: scale(0.8, 1); }
  html[dir="ltr"] .sadu-bar { transform: scale(-0.8, 1); }
  .art-fringe > g { transform: scale(0.8, 1); }
  .hanger { transform: scale(0.86, 1); }
}

.sadu-rail {
  position: fixed;
  inset-inline-start: 0;
  z-index: 5;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.sadu-rail.is-clickable { pointer-events: auto; cursor: pointer; }


/* ==========================================================================
   FORCED COLOURS (Windows High Contrast): keep controls and focus visible
   ========================================================================== */

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
  .btn, .lang-toggle, .nav-toggle, .diagram-detail-close { border: 1px solid ButtonText; }
  .field input, .field select, .field textarea { border-color: ButtonText; }
  .skip-link { background: Canvas; color: LinkText; border: 1px solid LinkText; }
}