:root {
  --paper: #f2eee3;
  --paper-2: #e9e2d1;
  --paper-3: #fbf8ee;
  --ink: #111711;
  --ink-2: #223028;
  --green: #0b6e4f;
  --green-2: #0f8b62;
  --terracotta: #bc432e;
  --gold: #9a7b2f;
  /* RGB channels for hairlines/borders that flip per theme */
  --ink-rgb: 17, 23, 17;
  --paper-rgb: 242, 238, 227;
  --line: rgba(var(--ink-rgb), 0.14);
  --line-2: rgba(var(--ink-rgb), 0.22);
  --scrim: rgba(0, 0, 0, 0.55);
  --mist: rgba(var(--ink-rgb), 0.1);
  --muted: rgba(var(--ink-rgb), 0.64);
  --white: #ffffff;
  --shadow: 0 18px 60px rgba(17, 23, 17, 0.18);
  --header-h: 76px;
  color-scheme: light;
}

/* ============ SOVEREIGN DARK (dark mode) ============ */
:root[data-theme="dark"] {
  --paper: #0b0f0d;
  --paper-2: #121815;
  --paper-3: #141a17;
  --ink: #f2eee3;
  --ink-2: #cdc9bd;
  --green: #1cba80;
  --green-2: #16a374;
  --terracotta: #d2613f;
  --gold: #c9a44e;
  /* flip migrated hairlines/borders to the light channel */
  --ink-rgb: 242, 238, 227;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --white: #f2eee3;
  color-scheme: dark;
}

/*
 * Always-dark "stage" sections render as dark bands with light text in BOTH
 * themes. The global flip above would invert their text to dark, so re-pin the
 * light-theme palette locally. They then look identical to light mode (verified
 * good) while the rest of the page is Sovereign Dark.
 */
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .fact-band,
:root[data-theme="dark"] .architecture,
:root[data-theme="dark"] .use-cases,
:root[data-theme="dark"] .dos-spine,
:root[data-theme="dark"] .fde,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .mobile-nav,
:root[data-theme="dark"] .intake-aside-panel {
  --paper: #f2eee3;
  --paper-2: #e9e2d1;
  --paper-3: #fbf8ee;
  --ink: #111711;
  --ink-2: #223028;
  --ink-rgb: 17, 23, 17;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", Inter, "Noto Kufi Arabic", system-ui, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}

body[dir="rtl"],
html[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", Inter, system-ui, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  margin: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 1000;
}

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--header-h);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem;
  color: var(--paper-3);
  background: rgba(var(--ink-rgb), 0.28);
  border-bottom: 1px solid rgba(242, 238, 227, 0.18);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(242, 238, 227, 0.92);
  border-bottom-color: var(--mist);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: max-content;
  /* Push the nav + actions cluster to the right edge of the header. */
  margin-inline-end: auto;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-block;
  flex: 0 0 auto;
  /* Match the SVG tile fill so any anti-alias seams from the rotated
     star geometry don't reveal the header background through the mark. */
  background: #0A2A22;
  border-radius: 1px;
  overflow: hidden;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
  line-height: 1.15;
}

.brand-copy strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-copy small {
  font-size: 0.74rem;
  color: currentColor;
  opacity: 0.92;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: block;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.88rem;
}

.desktop-nav a {
  opacity: 0.88;
}

.desktop-nav a:hover {
  opacity: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header-login {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  white-space: nowrap;
}

.header-login:hover {
  opacity: 1;
  text-decoration: underline;
}

.mobile-login-link {
  color: var(--terracotta);
  font-weight: 700;
}

.lang-toggle,
.menu-toggle,
.icon-button,
.chat-launcher,
.chat-chips button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.lang-toggle {
  padding: 0.7rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.82rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.theme-toggle:hover {
  color: var(--green);
}

.theme-toggle-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* Light mode shows a moon (tap to go dark) */
.theme-toggle-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 70% 32%, transparent 52%, #000 53%);
  mask: radial-gradient(circle at 70% 32%, transparent 52%, #000 53%);
}

/* Dark mode shows a sun (tap to go light) */
:root[data-theme="dark"] .theme-toggle-icon::before {
  inset: 3px;
  -webkit-mask: none;
  mask: none;
  box-shadow:
    0 -7px 0 -5px currentColor, 0 7px 0 -5px currentColor,
    -7px 0 0 -5px currentColor, 7px 0 0 -5px currentColor,
    -5px -5px 0 -5px currentColor, 5px -5px 0 -5px currentColor,
    -5px 5px 0 -5px currentColor, 5px 5px 0 -5px currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 6px;
  padding: 0.86rem 1rem;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.9rem;
  min-height: 44px;
  cursor: pointer;
}

.button.is-planning {
  opacity: 1;
  cursor: wait;
}

.button-spinner {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 999px;
  animation: buttonSpin 0.75s linear infinite;
}

@keyframes buttonSpin {
  to { transform: rotate(360deg); }
}

.intake-prep-status.is-working {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--green-2);
  font-weight: 600;
}

.ai-working-spinner {
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid var(--green-2);
  border-block-start-color: transparent;
  border-radius: 999px;
  animation: buttonSpin 0.75s linear infinite;
}

.ai-working-msg {
  animation: aiWorkingPulse 1.6s ease-in-out infinite;
}

@keyframes aiWorkingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.button-dark {
  background: var(--ink);
  color: var(--paper-3);
}

/* Solid gold: Mijhar is the apex instrument, so it wears the instrument
   colour (same gold family as the khatam launcher and the Bayyina seal). */
.assessment-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gold);
  color: #14100a;
  border-color: rgba(242, 192, 137, 0.72);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Internal green bloom — lit from within, fully clipped to the button by
   overflow:hidden so no glow escapes the edges. Breathes on the site's
   ledBreath cadence (opacity 0.40->1.00, 50% peak, 4s ease-in-out). */
.assessment-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    135% 150% at 50% 120%,
    rgba(222, 183, 96, 0.55),
    rgba(201, 164, 78, 0) 68%
  );
  animation: majhirBreath 4s ease-in-out infinite;
}

/* Sheen sweep — a light streak that crosses the button, same 4s cadence */
.assessment-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  animation: majhirSheen 4s ease-in-out infinite;
}

.assessment-cta .cta-arrow {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.assessment-cta:hover {
  background: #b8923f;
  border-color: var(--gold);
  transform: translateY(-2px);
  /* Neutral elevation only — no colored aura outside the button */
  box-shadow: 0 12px 26px -8px rgba(6, 18, 12, 0.45);
}

/* Hold the bloom lit at hover instead of pausing mid-breath */
.assessment-cta:hover::before {
  animation: none;
  opacity: 1;
}

.assessment-cta:hover .cta-arrow {
  transform: translate(2px, -2px);
}

/* Breathing opacity — mirrors ledBreath / madinahPulse */
@keyframes majhirBreath {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@keyframes majhirSheen {
  0%, 64%, 100% {
    transform: translateX(-130%);
  }
  82% {
    transform: translateX(130%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-cta::before {
    animation: none;
    opacity: 0.6;
  }
  .assessment-cta::after {
    display: none;
  }
}

/* Mijhar stays gold at the top of the page too (the old cream at-top state
   pre-dates the gold instrument tier). */
.site-header:not(.is-scrolled) .assessment-cta {
  background: var(--gold);
  color: #14100a;
  border-color: rgba(242, 192, 137, 0.82);
}

.button-light {
  background: var(--paper-3);
  color: var(--ink);
}

.button-ghost-light {
  border-color: rgba(242, 238, 227, 0.64);
  color: var(--paper-3);
}

/* Signal-green primary CTA (design brief, Sovereign Dark) */
.button-accent {
  background: #1cba80;
  color: #06120c;
  border-color: #1cba80;
  font-weight: 700;
}
.button-accent:hover {
  background: #16a374;
  border-color: #16a374;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 6px;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  margin: 4px auto;
}

.mobile-nav {
  display: none;
}

.hero {
  min-height: 86vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sovereign Dark stage (design brief, Option 01). Pin the bright signal
     palette here so the stage reads the same in light + dark themes. */
  background-color: #06120c;
  --green: #1cba80;
  --green-2: #16a374;
  --gold: #c9a44e;
  --terracotta: #bc432e;
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + 4rem) 2rem 5.5rem;
  color: var(--paper-3);
  --hero-ambient: var(--initial-hero-ambient, linear-gradient(120deg, transparent, transparent));
  --hero-bg-filter: var(--initial-hero-bg-filter, brightness(1) saturate(1));
  --hero-left: rgba(17, 23, 17, 0.92);
  --hero-mid: rgba(17, 23, 17, 0.64);
  --hero-right: rgba(17, 23, 17, 0.28);
  --hero-bottom: rgba(17, 23, 17, 0.82);
  --hero-center: rgba(17, 23, 17, 0.08);
  --hero-top: rgba(17, 23, 17, 0.56);
  --hero-top-right-light: 0.055;
  --hero-lower-left-dark: 0.44;
  --hero-lower-right-dark: 0.58;
}

/* Time-of-day wash over the whole stage (above the overlay greens, below the
   flip photos and text): warm red at sunset, amber at dawn, cool at night.
   Driven by --hero-ambient from computeHeroTimeTint / the inline pre-paint. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background: var(--hero-ambient);
  pointer-events: none;
  transition: background 8s ease;
}

/* Ghost Madinah: a faint aerial under the khatam structure, just enough for place. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -6;
  background-image: url("/hero-madinah.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  opacity: 0.30;
  filter: var(--hero-bg-filter) brightness(0.6) saturate(0.66) contrast(0.95);
  animation: heroDrift 28s ease-in-out infinite alternate;
  transition: filter 8s ease;
}
/* Time-of-day colour wash over the Madinah aerial: red at dusk, dark at night. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-bg-tint, var(--initial-hero-bg-tint, transparent));
  mix-blend-mode: multiply;
  transition: background 8s ease;
  pointer-events: none;
}
/* Khatam geometry: faint engineering structure across the stage (brief Option 01). */
.hero-khatam {
  position: absolute;
  inset: 0;
  z-index: -5;
  opacity: 0.10;
  pointer-events: none;
}
.hero-khatam svg { width: 100%; height: 100%; display: block; }

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0.68;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -4;
  /* Sovereign Dark ambient: signal-green glow upper-right, gold lower-left,
     terracotta secondary lower-right; plus legibility pooling under the text. */
  background:
    radial-gradient(120% 80% at 74% 6%, rgba(28, 186, 128, 0.16), transparent 55%),
    radial-gradient(70% 60% at 4% 98%, rgba(201, 164, 78, 0.10), transparent 60%),
    radial-gradient(60% 52% at 96% 94%, rgba(188, 67, 46, 0.10), transparent 60%),
    radial-gradient(135% 130% at 6% 104%, rgba(6, 18, 12, 0.92) 0%, rgba(6, 18, 12, 0.42) 34%, transparent 64%),
    linear-gradient(0deg, rgba(6, 18, 12, 0.85) 0%, rgba(6, 18, 12, 0) 34%),
    linear-gradient(90deg, rgba(6, 18, 12, 0.5) 0%, rgba(6, 18, 12, 0) 48%),
    linear-gradient(0deg, rgba(6, 18, 12, 0.16) 0%, rgba(6, 18, 12, 0.16) 100%);
  transition: background 8s ease;
}
/* RTL mirrors: text sits right, so the pooling + ambient flip horizontally. */
[dir="rtl"] .hero-overlay {
  background:
    radial-gradient(120% 80% at 26% 6%, rgba(28, 186, 128, 0.16), transparent 55%),
    radial-gradient(70% 60% at 96% 98%, rgba(201, 164, 78, 0.10), transparent 60%),
    radial-gradient(60% 52% at 4% 94%, rgba(188, 67, 46, 0.10), transparent 60%),
    radial-gradient(135% 130% at 94% 104%, rgba(6, 18, 12, 0.92) 0%, rgba(6, 18, 12, 0.42) 34%, transparent 64%),
    linear-gradient(0deg, rgba(6, 18, 12, 0.85) 0%, rgba(6, 18, 12, 0) 34%),
    linear-gradient(270deg, rgba(6, 18, 12, 0.5) 0%, rgba(6, 18, 12, 0) 48%),
    linear-gradient(0deg, rgba(6, 18, 12, 0.16) 0%, rgba(6, 18, 12, 0.16) 100%);
}

.hero[data-tod="dawn"] {
  --hero-left: rgba(28, 18, 24, 0.86);
  --hero-mid: rgba(40, 28, 32, 0.60);
  --hero-right: rgba(70, 40, 32, 0.32);
  --hero-bottom: rgba(28, 18, 24, 0.82);
  --hero-center: rgba(70, 50, 60, 0.12);
  --hero-top: rgba(120, 70, 60, 0.36);
  --hero-top-right-light: 0.070;
}
.hero[data-tod="dusk"] {
  --hero-left: rgba(40, 18, 14, 0.88);
  --hero-mid: rgba(60, 30, 20, 0.58);
  --hero-right: rgba(120, 60, 38, 0.32);
  --hero-bottom: rgba(40, 18, 14, 0.82);
  --hero-center: rgba(80, 40, 28, 0.14);
  --hero-top: rgba(140, 80, 56, 0.40);
  --hero-top-right-light: 0.075;
  --hero-lower-right-dark: 0.62;
}
.hero[data-tod="day"] {
  --hero-left: rgba(20, 28, 36, 0.82);
  --hero-mid: rgba(28, 40, 50, 0.50);
  --hero-right: rgba(50, 70, 84, 0.22);
  --hero-bottom: rgba(20, 28, 36, 0.78);
  --hero-center: rgba(40, 60, 76, 0.08);
  --hero-top: rgba(40, 60, 76, 0.40);
  --hero-top-right-light: 0.105;
  --hero-lower-left-dark: 0.40;
  --hero-lower-right-dark: 0.54;
}

html[data-hero-tod="dawn"] .hero:not([data-tod]) {
  --hero-left: rgba(28, 18, 24, 0.86);
  --hero-mid: rgba(40, 28, 32, 0.60);
  --hero-right: rgba(70, 40, 32, 0.32);
  --hero-bottom: rgba(28, 18, 24, 0.82);
  --hero-center: rgba(70, 50, 60, 0.12);
  --hero-top: rgba(120, 70, 60, 0.36);
  --hero-top-right-light: 0.070;
}

html[data-hero-tod="dusk"] .hero:not([data-tod]) {
  --hero-left: rgba(40, 18, 14, 0.88);
  --hero-mid: rgba(60, 30, 20, 0.58);
  --hero-right: rgba(120, 60, 38, 0.32);
  --hero-bottom: rgba(40, 18, 14, 0.82);
  --hero-center: rgba(80, 40, 28, 0.14);
  --hero-top: rgba(140, 80, 56, 0.40);
  --hero-top-right-light: 0.075;
  --hero-lower-right-dark: 0.62;
}

html[data-hero-tod="day"] .hero:not([data-tod]) {
  --hero-left: rgba(20, 28, 36, 0.82);
  --hero-mid: rgba(28, 40, 50, 0.50);
  --hero-right: rgba(50, 70, 84, 0.22);
  --hero-bottom: rgba(20, 28, 36, 0.78);
  --hero-center: rgba(40, 60, 76, 0.08);
  --hero-top: rgba(40, 60, 76, 0.40);
  --hero-top-right-light: 0.105;
  --hero-lower-left-dark: 0.40;
  --hero-lower-right-dark: 0.54;
}

html[dir="rtl"] .hero-overlay {
  /* mirror: text pools lower-right, upper-left stays clear */
  background:
    radial-gradient(135% 130% at 94% 104%, rgba(11, 15, 13, 0.96) 0%, rgba(11, 15, 13, 0.5) 34%, transparent 64%),
    linear-gradient(0deg, rgba(11, 15, 13, 0.92) 0%, rgba(11, 15, 13, 0) 34%),
    linear-gradient(270deg, rgba(11, 15, 13, 0.55) 0%, rgba(11, 15, 13, 0) 50%);
}

.hero-glyph {
  position: absolute;
  inset-inline-end: 1rem;
  top: 7rem;
  z-index: -2;
  font-family: "Noto Kufi Arabic", sans-serif;
  font-size: 25rem;
  line-height: 1;
  color: rgba(242, 238, 227, 0.08);
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
  user-select: none;
}

html.hero-glyph-ready .hero-glyph {
  opacity: 1;
}
/* When the aperture is live it replaces the flat glyph (it renders its own baa). */
html.hero-aperture-on .hero-glyph { display: none; }

/* ---- Hero aperture: baa-as-lightbox that dissolves to cycle Saudi-night
   imagery and resolves back through the baa between each (see initHeroAperture).
   Sits exactly where the flat glyph did, on the imagery (open) side. -------- */
.hero-aperture {
  position: absolute;
  inset-inline-end: 2.5rem;
  top: 8rem;
  z-index: -2;
  /* Larger, so the long graduated edge has room to dissolve over the map. */
  width: clamp(340px, 44vw, 620px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  isolation: isolate;
}
html.hero-aperture-on .hero-aperture { opacity: 1; }

/* Soft gold ambient bloom behind the window, unmasked, so the aperture reads as
   light welling up from the stage rather than a pasted photo. Tied to --gold. */
.hero-aperture::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(201, 164, 78, 0.16), transparent 68%);
  pointer-events: none;
}

/* The two crossfade image layers. Feathered radial mask => no hard edge; the
   image melts into the dark stage. cover + centered; a slow Ken-Burns drift when
   shown. Both start hidden; JS toggles .is-on and alternates A/B. */
.hero-ap-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.0);
  /* Muted + time-of-day matched, exactly like the ghost-Madinah aerial: inherit
     the hero's live --hero-bg-filter (brightness/saturation shifts across the
     day) and mute further so the imagery recedes into ambient texture. */
  filter: var(--hero-bg-filter, brightness(1) saturate(1)) brightness(0.94) saturate(0.85) contrast(1);
  transition: opacity 1600ms ease, transform 8000ms ease-out, filter 8s ease;
  /* A LONG multi-stop graduated falloff: a clear core, then a wide, gentle ramp
     to transparent so the image has no defined edge — it just dissolves into the
     map/stage. closest-side keeps it feathering on all four sides (corners clamp
     to transparent). This is the "no obvious end to the image" treatment. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 47%, #000 16%, rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.6) 56%, rgba(0,0,0,0.28) 76%, rgba(0,0,0,0.08) 90%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 47%, #000 16%, rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.6) 56%, rgba(0,0,0,0.28) 76%, rgba(0,0,0,0.08) 90%, transparent 100%);
}
/* Target opacity: clear enough to read the imagery while shadows still join the
   dark-green stage. Tunable via --hero-ap-strength (0.5 whisper -> 0.75 photo). */
.hero-ap-img.is-on { opacity: var(--hero-ap-strength, 0.7); transform: scale(1.06); }

/* Unifying grade: (1) the SAME time-of-day multiply tint the Madinah aerial
   gets (--hero-bg-tint: warm at dawn/dusk, deep blue at night), (2) a signal-
   green wash matching the hero overlay, (3) an edge vignette deepening the melt.
   Multiply keeps warm highlights alive while shadows join the Sovereign-Dark. */
.hero-ap-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--hero-bg-tint, transparent), var(--hero-bg-tint, transparent)),
    radial-gradient(ellipse closest-side at 50% 47%, transparent 30%, rgba(6, 18, 12, 0.28) 70%, rgba(6, 18, 12, 0.5) 100%),
    linear-gradient(155deg, rgba(28, 186, 128, 0.16), transparent 50%, rgba(6, 18, 12, 0.2));
  mix-blend-mode: multiply;
  /* graduated too, so the tint/vignette never draws its own edge */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 47%, #000 20%, rgba(0,0,0,0.5) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 47%, #000 20%, rgba(0,0,0,0.5) 66%, transparent 100%);
  opacity: 0;
  transition: opacity 1600ms ease, background 8s ease;
}
html.hero-aperture-on .hero-ap-grade.is-on { opacity: 1; }

/* The baa: the brand's breath between images. Centered in the window, faint
   luminous. JS fades it 1 (rest) <-> 0 (image showing). */
.hero-ap-baa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Kufi Arabic", sans-serif;
  font-size: clamp(200px, 26vw, 380px);
  line-height: 1;
  color: rgba(242, 238, 227, 0.10);
  opacity: 1;
  transition: opacity 1500ms ease;
  text-shadow: 0 0 60px rgba(201, 164, 78, 0.12);
}
.hero-ap-baa.is-dim { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-ap-img { transition: opacity 600ms ease; transform: none; }
  .hero-ap-img.is-on { transform: none; }
}

.hero-inner {
  max-width: 940px;
}

/* ---- hero flip mosaic (replaces Madinah bg + node canvas) ---- */
.hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: -3;
  /* transparent so the khatam + ghost-Madinah stage shows through; a tile flips
     a khatam square to a real deployment photo, then flips back. Tiles are
     absolutely positioned onto the khatam squares (see initHeroMosaic). */
  background: transparent;
  overflow: hidden;
}
.hero-mosaic .tile { position: absolute; width: 60px; height: 60px; perspective: 620px; }
.hero-mosaic .tile.lit { z-index: 2; }
.hero-mosaic .flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.hero-mosaic .flip.flipped { transform: rotateY(180deg); }
.hero-mosaic .face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3px;
  background-repeat: no-repeat;
}
.hero-mosaic .front { background: transparent; }
.hero-mosaic .back {
  transform: rotateY(180deg);
  filter: brightness(1.04) saturate(1.04);
  box-shadow: 0 0 0 1px rgba(28, 186, 128, 0.28), 0 6px 18px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .hero-mosaic .flip { transition: none; }
}

/* methodology CTA + lens chips */
.hero-method { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.hero-lens-chips {
  display: flex;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.62);
}
.hero-lens-chips a {
  color: inherit;
  text-decoration: none;
  padding: 0 0.8rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.22);
  transition: color 0.2s ease;
}
.hero-lens-chips a:first-child { padding-inline-start: 0; }
.hero-lens-chips a:last-child { border-inline-end: 0; }
.hero-lens-chips a:hover { color: var(--green-2); }

.eyebrow,
.section-kicker {
  margin: 0 0 1rem;
  color: var(--terracotta);
  font-weight: 800;
  font-size: 0.86rem;
}

.hero .eyebrow {
  color: var(--green);
}

h1,
h2,
h3,
p {
  margin-block-start: 0;
}

h1,
h2 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

h1 {
  font-size: 5.8rem;
  max-width: 11ch;
  margin-block-end: 1.25rem;
}
.hero h1 { font-weight: 900; }

h2 {
  font-size: 3.8rem;
  margin-block-end: 1rem;
}

h3 {
  font-size: 1.05rem;
  margin-block-end: 0.65rem;
}

.hero-lede {
  max-width: 760px;
  color: rgba(251, 248, 238, 0.82);
  font-size: 1.22rem;
  line-height: 1.7;
}

/* Brand slogan — "From intelligence to proof." */
.hero-slogan {
  margin-top: 2rem;
}
.hero-slogan-line {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--green-2);
}
.hero-slogan-strap {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 248, 238, 0.6);
}
[dir="rtl"] .hero-slogan-line { letter-spacing: 0; }
[dir="rtl"] .hero-slogan-strap { letter-spacing: 0.06em; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* three equal primary CTAs */
.hero-cta-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 2.2rem;
  /* Span the full hero width so the trio's right edge (Contact) lines up with
     the right edge of the intel hub below it. */
  max-width: 100%;
}
.hero-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.15rem 1.25rem 1.25rem;
  text-decoration: none;
  border: 1px solid rgba(242, 238, 227, 0.2);
  border-radius: 12px;
  background: rgba(10, 22, 18, 0.42);
  backdrop-filter: blur(6px);
  color: #f2eee3;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}
.hero-cta:hover {
  border-color: var(--green-2);
  background: rgba(28, 186, 128, 0.12);
  transform: translateY(-2px);
}
.hero-cta-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.1;
}
.hero-cta-sub {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: rgba(242, 238, 227, 0.66);
}
.hero-cta-arrow {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  font-size: 0.9rem;
  color: var(--green-2);
  opacity: 0.8;
}
/* Lead CTA carries the verified seal beside its title, and keeps the ↗
   affordance in the top-right like the other two cards. */
.hero-cta-titlerow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-cta-seal {
  width: 22px;
  height: 22px;
  flex: none;
  opacity: 0.95;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero-cta-trio { grid-template-columns: 1fr; max-width: 100%; }
  .hero-cta { flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .hero-cta-sub { margin-inline-start: auto; padding-inline-end: 1.4rem; }
}

.hero-brandsub {
  margin: -0.4rem 0 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #f2c089;
  font-weight: 500;
}

/* Rotating hero statements (this is now the hero headline / h1) */
.hero-carousel {
  margin: 0.4rem 0 1.6rem;
  max-width: 720px;
}

.hero-statement {
  margin: 0;
  max-width: none; /* override the global h1 max-width */
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.14;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--paper);
  /* Cap at three lines, and reserve that height so the hero never jumps */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 3.42em;
  /* Gentle breathing fade, not a flash */
  transition: opacity 650ms ease-in-out;
}

.hero-statement.is-fading {
  opacity: 0;
}

.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}

.hero-carousel-toggle {
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(242, 238, 227, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.hero-carousel-toggle::before {
  content: "❙❙";
  font-size: 0.6rem;
  letter-spacing: -1px;
  line-height: 1;
}

.hero-carousel-toggle.is-paused::before { content: "▶"; }

.hero-carousel-toggle:hover { border-color: var(--paper); }

.hero-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(242, 238, 227, 0.3);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.hero-dot:hover { background: rgba(242, 238, 227, 0.55); }

.hero-dot.is-active {
  background: var(--terracotta);
  transform: scale(1.25);
}

.fact-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  color: var(--paper-3);
  border-block: 1px solid rgba(242, 238, 227, 0.16);
}

.fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 122px;
  padding: 1.5rem 2rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.16);
}

.fact:last-child {
  border-inline-end: 0;
}

.fact-k {
  font-family: Fraunces, serif;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--paper);
}

.fact-l {
  color: rgba(251, 248, 238, 0.7);
  font-size: 0.92rem;
}

.section {
  padding: 6.5rem 2rem;
}

.section-head {
  max-width: 960px;
  margin-bottom: 2.5rem;
}

/* Closing note under a grid: centred with a balanced wrap so it reads as a
   deliberate sign-off instead of a short paragraph stranded on the left. */
.section-foot {
  margin: 2.6rem auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.section-head p,
.section-lede,
.intro-copy p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.intro {
  background: var(--paper-3);
  border-bottom: 1px solid var(--mist);
}

.intro-copy {
  max-width: 720px;
}

.mission-vision {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
}

.mission-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mist);
  border-left: 1px solid var(--mist);
}

html[dir="rtl"] .mission-grid,
html[dir="rtl"] .why-grid {
  border-left: 0;
  border-right: 1px solid var(--mist);
}

.mission-grid article,
.why-grid article {
  min-height: 260px;
  padding: 1.6rem;
  /* Tint keyed to the ink channel so cards read as faint cells on the dark
     band, defined by the hairline grid rather than a washed cream block. */
  background: rgba(var(--ink-rgb), 0.035);
  border-right: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  transition: background 0.25s ease;
}

.mission-grid article:hover,
.why-grid article:hover {
  background: rgba(var(--ink-rgb), 0.06);
}

html[dir="rtl"] .mission-grid article,
html[dir="rtl"] .why-grid article {
  border-right: 0;
  border-left: 1px solid var(--mist);
}

.mission-grid h3,
.why-grid h3 {
  margin-top: 2rem;
  font-size: 1.55rem;
  line-height: 1.2;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-weight: 500;
}

.mission-grid p,
.why-grid p {
  color: var(--muted);
}

.why-grid p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-top: 0.7rem;
}

.why-grid article {
  padding: 2.1rem 1.9rem;
  min-height: 280px;
}

.values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.values-strip span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--mist);
  background: var(--paper-3);
  border-radius: 6px;
  color: var(--ink-2);
  font-weight: 800;
  font-size: 0.84rem;
}

.delivery {
  background: var(--paper);
}

.delivery-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--mist);
  background: var(--paper-3);
}

.delivery-step {
  min-height: 310px;
  padding: 2rem;
  border-inline-end: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
}

.delivery-step:last-child {
  border-inline-end: 0;
}

.step-num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  color: var(--green);
  margin-bottom: auto;
  font-weight: 800;
  font-size: 0.8rem;
}

.delivery-step h3 {
  margin-top: 2rem;
  font-size: 1.35rem;
}

.delivery-step p {
  color: var(--muted);
}

.athr-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--mist);
  background: var(--paper-3);
}

.athr-phase {
  min-height: 230px;
  padding: 2rem;
  border-inline-end: 1px solid var(--mist);
  border-block-start: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
}

.athr-phase:nth-child(-n + 3) {
  border-block-start: 0;
}

.athr-phase:nth-child(3n) {
  border-inline-end: 0;
}

.athr-dur {
  margin-top: 1.1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.athr-phase h3 {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.35rem;
}

.athr-q {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.athr-body {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2, var(--muted));
}

/* === Eight commitments === */
.commit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--mist);
  border: 1px solid var(--mist);
}

.commit-card {
  padding: 1.75rem;
  background: var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.commit-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--green);
}

.commit-card h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

.commit-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* === Brief: categorized signals to confirm === */
.brief-signal-groups {
  display: grid;
  gap: 0.85rem;
}

.brief-signal-group {
  display: grid;
  gap: 0.3rem;
}

.brief-signal-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.brief-signal-list {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 0.2rem;
}

.brief-signal-list li {
  font-size: 0.92rem;
}

/* === Industries chip row === */
.industries {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}

.industries-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-inline-end: 0.5rem;
}

.industries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.industries-list li {
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--mist);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-2);
  background: var(--paper-3);
}

/* === Five commercial models === */
.commercial-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--mist);
  border: 1px solid var(--mist);
}

.commercial-model {
  padding: 1.6rem;
  background: var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commercial-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--green);
}

.commercial-model h3 {
  margin: 0;
  font-size: 1.1rem;
}

.commercial-model p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* === Trust and accountability controls === */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.trust-control {
  padding: 1.75rem;
  border: 1px solid var(--mist);
  border-block-start: 3px solid var(--gold);
  background: var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.trust-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.trust-control h3 {
  margin: 0;
  font-size: 1.2rem;
}

.trust-control p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.delivery-strategy {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--mist);
  border-inline-start: 3px solid var(--green);
  background: var(--paper-3);
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 3fr;
  gap: 1rem 2.5rem;
  align-items: start;
}

.delivery-strategy-label {
  color: var(--green);
  font-weight: 800;
  font-size: 0.86rem;
}

.delivery-strategy p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 720px) {
  .delivery-strategy {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.architecture {
  background: var(--ink);
  color: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.architecture::before {
  content: "";
  position: absolute;
  inset-inline-start: -14rem;
  top: -14rem;
  width: 34rem;
  height: 34rem;
  opacity: 0.16;
  border: 1px solid rgba(242, 238, 227, 0.28);
  background: repeating-conic-gradient(from 22deg, transparent 0deg 14deg, rgba(242, 238, 227, 0.45) 14deg 15deg);
  transform: rotate(45deg);
  animation: geometricTurn 52s linear infinite reverse;
}

.architecture .section-kicker {
  color: #f2c089;
}

.architecture .section-lede {
  color: rgba(251, 248, 238, 0.7);
}

.stack-diagram {
  position: relative;
  display: grid;
  gap: 0.55rem;
}

.stack-layer {
  border: 1px solid rgba(251, 248, 238, 0.18);
  background: rgba(251, 248, 238, 0.08);
  padding: 1.15rem;
  display: grid;
  gap: 0.35rem;
}

.stack-layer span {
  font-weight: 800;
}

.stack-layer small {
  color: rgba(251, 248, 238, 0.62);
}

.stack-secure {
  background: rgba(11, 110, 79, 0.3);
  border-color: rgba(15, 139, 98, 0.7);
}

.solutions {
  background: var(--paper-3);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mist);
  border-left: 1px solid var(--mist);
}

html[dir="rtl"] .solution-grid {
  border-left: 0;
  border-right: 1px solid var(--mist);
}

.solution-card {
  min-height: 320px;
  padding: 2rem 1.9rem 2rem;
  background: var(--paper-3);
  border-right: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  position: relative;
  overflow: hidden;
}

html[dir="rtl"] .solution-card {
  border-right: 0;
  border-left: 1px solid var(--mist);
}

.solution-card::after {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  inset-inline-end: -4rem;
  bottom: -4rem;
  background: radial-gradient(circle, rgba(11, 110, 79, 0.18), transparent 65%);
}

.solution-card--central {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
  padding: 2.6rem 1.9rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(28, 186, 128, 0.12), transparent 70%),
    var(--paper-3);
  border-top: 2px solid rgba(28, 186, 128, 0.55);
}

.solution-card--central::after {
  width: 16rem;
  height: 16rem;
  inset-inline-end: 50%;
  transform: translateX(50%);
  bottom: -10rem;
  background: radial-gradient(circle, rgba(28, 186, 128, 0.18), transparent 65%);
}

.solution-central-label {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-2);
}

.solution-card--central .solution-icon {
  color: var(--green-2);
  border-color: rgba(28, 186, 128, 0.4);
  background: rgba(28, 186, 128, 0.06);
}

.solution-card--central p {
  max-width: 46ch;
}

.solution-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--terracotta);
  border: 1.5px solid rgba(188, 67, 46, 0.35);
  background: rgba(188, 67, 46, 0.04);
  margin-bottom: 1.8rem;
  font-size: 1.85rem;
  line-height: 1;
}

.solution-card h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
}

.solution-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.solution-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--terracotta);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(188, 67, 46, 0.35);
  padding-bottom: 1px;
  white-space: nowrap;
}

.solution-link:hover,
.solution-link:focus-visible {
  border-bottom-color: var(--terracotta);
}

.capability-library {
  background: var(--paper);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mist);
  border-left: 1px solid var(--mist);
}

html[dir="rtl"] .capability-grid {
  border-left: 0;
  border-right: 1px solid var(--mist);
}

.capability-card {
  min-height: 190px;
  padding: 1.35rem;
  /* Token (not a literal paper color) so the card follows Sovereign Dark like
     the solution cards; a hardcoded near-white read as washed-out on dark. */
  background: var(--paper-3);
  border-right: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  /* Hard isolate each card so cap-demo SVGs and reveal transforms can never
     bleed into siblings. Without this, mobile (single-column 1fr) renders
     can show text from later cards behind the focused one. */
  position: relative;
  isolation: isolate;
  contain: layout paint;
  min-width: 0;
}

html[dir="rtl"] .capability-card {
  border-right: 0;
  border-left: 1px solid var(--mist);
}

.capability-group {
  display: inline-flex;
  margin-bottom: 1.1rem;
  color: var(--terracotta);
  font-weight: 800;
  font-size: 0.72rem;
}

.capability-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.55rem;
}

.capability-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.madinah {
  min-height: 680px;
  background: var(--paper-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: 4rem;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.madinah-map {
  margin: 0;
  position: relative;
}

.map-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.55);
  background:
    radial-gradient(circle at 24% 49%, rgba(15, 139, 98, 0.10), transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(var(--ink-rgb), 0.04) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(var(--ink-rgb), 0.04) 23px 24px),
    var(--paper-3);
  padding: 1.25rem 1.25rem 1rem;
  box-shadow:
    inset 0 0 0 4px var(--paper-3),
    inset 0 0 0 5px rgba(var(--ink-rgb), 0.55),
    0 24px 60px rgba(var(--ink-rgb), 0.18);
  transition: background 1200ms ease, box-shadow 1200ms ease;
}

.map-frame::before,
.map-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.7);
  pointer-events: none;
  z-index: 4;
}
.map-frame::before { top: 10px; inset-inline-start: 10px; border-inline-end: 0; border-bottom: 0; }
.map-frame::after  { bottom: 10px; inset-inline-end: 10px; border-inline-start: 0; border-top: 0; }

.map-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  z-index: 1;
}

/* The map was drawn ink-on-paper; on Sovereign Dark the inline rgba(17,23,17)
   strokes vanish. CSS overrides the SVG presentation attributes so the Saudi
   border, landmass, and grid read clearly on the dark frame. */
.map-country-fill { opacity: 1; fill: rgba(28, 186, 128, 0.07); }
.map-country-outline {
  stroke: #1cba80;
  stroke-width: 1.6;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: mapDraw 2.4s ease-out 0.2s forwards;
}
.map-graticule { stroke: rgba(242, 238, 227, 0.1); }
.map-scale line { stroke: rgba(242, 238, 227, 0.5); }

.map-route {
  stroke-dasharray: 0 6;
  opacity: 0;
  animation: mapRoute 1.2s ease-out forwards;
  animation-delay: var(--route-delay, 0s);
}

.madinah-glow-circle {
  transform-origin: 237px 341px;
  animation: madinahPulse 4.6s ease-in-out infinite;
}

.sweep-ring {
  transform-origin: 237px 341px;
  opacity: 0;
  animation: mapSweep 4.2s linear infinite;
}
.sweep-ring-1 { animation-delay: 0s; }
.sweep-ring-2 { animation-delay: 1.4s; }
.sweep-ring-3 { animation-delay: 2.8s; }

.map-cities text {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  fill: rgba(var(--ink-rgb), 0.85);
  pointer-events: none;
}

.map-city-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.map-city-coord {
  font-size: 8.5px;
  letter-spacing: 0.04em;
  fill: rgba(var(--ink-rgb), 0.55);
}

.map-city-primary .map-city-name {
  fill: var(--green);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.map-city circle:nth-of-type(1) {
  transform-origin: center;
  animation: cityRing 3.4s ease-out infinite;
}

.map-city-primary circle:nth-of-type(1) {
  animation-duration: 2.2s;
}

.map-scale-tick {
  font-size: 8px;
  letter-spacing: 0.1em;
  fill: rgba(var(--ink-rgb), 0.6);
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

.map-meta {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.74);
  z-index: 3;
}

.map-meta-tl { top: 1.5rem; inset-inline-start: 1.6rem; }
.map-meta-tr { top: 1.2rem; inset-inline-end: 1.4rem; color: rgba(var(--ink-rgb), 0.6); }
.map-meta-bl { bottom: 1.2rem; inset-inline-start: 1.6rem; }

.map-meta-line {
  font-weight: 700;
}

.map-meta-mono {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.65rem;
  color: rgba(var(--ink-rgb), 0.58);
  letter-spacing: 0.18em;
}

.map-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green-2);
  margin-right: 0.45rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(15, 139, 98, 0.55);
  animation: statusPulse 1.8s ease-out infinite;
}

@keyframes mapDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes mapRoute {
  0%   { opacity: 0; stroke-dasharray: 0 6; }
  60%  { opacity: 0.85; }
  100% { opacity: 0.7; stroke-dasharray: 4 4; }
}

@keyframes madinahPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

@keyframes mapSweep {
  0%   { r: 14; opacity: 0.0; }
  10%  { opacity: 0.55; }
  100% { r: 320; opacity: 0; }
}

/* Older browsers ignore the r interpolation in @keyframes; CSS handles transform fallback */
@supports not (r: 14) {
  .sweep-ring { animation: mapSweepFallback 4.2s linear infinite; }
  @keyframes mapSweepFallback {
    0%   { transform: scale(0.05); opacity: 0; }
    10%  { opacity: 0.55; }
    100% { transform: scale(2.4); opacity: 0; }
  }
}

@keyframes cityRing {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 139, 98, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(15, 139, 98, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 139, 98, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .map-country-outline,
  .map-route,
  .madinah-glow-circle,
  .sweep-ring,
  .map-city circle:nth-of-type(1),
  .map-status-dot {
    animation: none;
  }
  .map-country-outline { stroke-dashoffset: 0; }
  .map-route { opacity: 0.7; stroke-dasharray: 4 4; }
}

.madinah-content {
  max-width: 720px;
}

.madinah-content p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.route-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 2rem;
}

.route-list span {
  padding: 0.95rem 1rem;
  border: 1px solid var(--mist);
  background: rgba(251, 248, 238, 0.58);
  font-weight: 800;
}

.partners {
  background:
    radial-gradient(circle at 6% 0%, rgba(15, 139, 98, 0.05), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(154, 123, 47, 0.06), transparent 40%),
    var(--paper);
  position: relative;
}

.partners-head {
  max-width: 880px;
  margin-bottom: 2.5rem;
}

.partners-tier {
  margin-bottom: 2rem;
  position: relative;
}

.partners-tier-label {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--terracotta);
  padding: 0.32rem 0.6rem;
  border: 1px solid rgba(188, 67, 46, 0.32);
  background: rgba(188, 67, 46, 0.04);
  margin-bottom: 1rem;
}

.partners-grid {
  display: grid;
  gap: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper-3);
}

.partners-grid-cat   { grid-template-columns: repeat(3, 1fr); }
.partners-grid-named { grid-template-columns: repeat(3, 1fr); }

.partner-cell {
  position: relative;
  padding: 1.4rem 1.2rem 1.3rem;
  border-inline-end: 1px solid rgba(var(--ink-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  background: var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: background 0.4s ease, transform 0.3s ease;
}

.partner-cell:hover {
  background: rgba(188, 67, 46, 0.04);
}

/* outer-edge dedup, kill the right border on the rightmost cell of each row */
.partners-grid-cat .partner-cell:nth-child(3n)   { border-inline-end: 0; }
.partners-grid-named .partner-cell:nth-child(3n) { border-inline-end: 0; }
/* kill bottom border on last row */
.partners-grid-cat .partner-cell:nth-last-child(-n+3)   { border-bottom: 0; }
.partners-grid-named .partner-cell:nth-last-child(-n+3) { border-bottom: 0; }

.partner-cell::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 26px;
  height: 2px;
  background: var(--accent, var(--ink));
}

.partner-cat   { --accent: var(--green); }
.partner-named { --accent: var(--terracotta); }

.partner-mark {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.4rem;
  display: inline-block;
}

.partner-cell h4 {
  margin: 0;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}

.partner-cat h4 {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.partner-cell p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.partners-foot {
  margin: 1.6rem 0 0;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 760px;
  border-inline-start: 2px solid var(--terracotta);
  padding: 0.5rem 0 0.5rem 1rem;
}

html[dir="rtl"] .partners-foot {
  padding: 0.5rem 1rem 0.5rem 0;
}

@media (max-width: 1100px) {
  .partners-grid-cat,
  .partners-grid-named { grid-template-columns: repeat(2, 1fr); }
  .partners-grid-cat .partner-cell:nth-child(3n)   { border-inline-end: 1px solid rgba(var(--ink-rgb), 0.14); }
  .partners-grid-cat .partner-cell:nth-child(2n)   { border-inline-end: 0; }
  .partners-grid-named .partner-cell:nth-child(3n) { border-inline-end: 1px solid rgba(var(--ink-rgb), 0.14); }
  .partners-grid-named .partner-cell:nth-child(2n) { border-inline-end: 0; }
}

@media (max-width: 760px) {
  .partners-grid-cat,
  .partners-grid-named { grid-template-columns: 1fr; }
  .partner-cell { border-inline-end: 0 !important; }
}

.use-cases {
  background: var(--ink);
  color: var(--paper-3);
}

.use-cases .section-kicker {
  color: #f2c089;
}

.use-cases .section-head p {
  color: rgba(251, 248, 238, 0.7);
}

.use-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(251, 248, 238, 0.18);
  border-left: 1px solid rgba(251, 248, 238, 0.18);
}

html[dir="rtl"] .use-grid {
  border-left: 0;
  border-right: 1px solid rgba(251, 248, 238, 0.18);
}

.use-grid article {
  min-height: 210px;
  padding: 1.6rem;
  border-right: 1px solid rgba(251, 248, 238, 0.18);
  border-bottom: 1px solid rgba(251, 248, 238, 0.18);
  background: rgba(251, 248, 238, 0.06);
}

html[dir="rtl"] .use-grid article {
  border-right: 0;
  border-left: 1px solid rgba(251, 248, 238, 0.18);
}

.use-grid h3 {
  color: var(--paper-3);
  font-size: 1.12rem;
}

.use-grid p {
  color: rgba(251, 248, 238, 0.66);
}

.why-bost {
  background: var(--paper-3);
}

.why-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Sections with three cards fill the row instead of leaving an empty fourth column. */
.why-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* Editorial two-column header: headline left, intro right, baseline-aligned,
   so the section band reads as deliberate instead of stranding the right half. */
.why-bost .section-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: 3.5rem;
  align-items: end;
  margin-bottom: 3rem;
}

.why-bost .section-head h2 {
  margin: 0;
}

.why-bost .section-head p {
  margin: 0;
  max-width: 46ch;
}

.why-grid article {
  min-height: 220px;
}

.team {
  background: var(--paper);
}

.team-grid {
  display: flex;
  flex-direction: column;
}
/* The top row (Mohammed, Sultan, Mishal) is centered over the bottom four;
   centering also keeps any wrapped card balanced at tablet widths. */
.team-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.team-card {
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  min-height: 360px;
  padding: 1.4rem;
  background: rgba(var(--ink-rgb), 0.035);
  border: 1px solid var(--mist);
  /* Collapse shared edges so adjacent cards read as one seamless matrix. */
  margin-inline-end: -1px;
  margin-bottom: -1px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper-3);
  border-radius: 8px;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.7rem;
  font-weight: 650;
  overflow: hidden;
}

.team-avatar--photo {
  background: var(--paper-3);
}

.team-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card h3 {
  margin: 0;
  font-size: 1.15rem;
}

.team-role {
  margin: -0.55rem 0 0;
  color: var(--terracotta);
  font-weight: 800;
  font-size: 0.85rem;
}

.team-role-secondary {
  display: inline-block;
  margin-top: 0.15rem;
  font-weight: 700;
  opacity: 0.82;
}

.team-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Bio: clamped to five lines until the reader expands it. */
.team-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.team-summary.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.team-more {
  align-self: flex-start;
  margin-top: -0.55rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--terracotta);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.team-more:hover { color: var(--ink); }

.team-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

/* Subtle LinkedIn link replaces the old CV/LinkedIn buttons. */
.team-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.team-linkedin:hover { color: #0a66c2; }

.team-linkedin-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #0a66c2;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.team-linkedin--pending {
  color: var(--ink-faint, #8b927f);
  font-weight: 500;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 0.75fr);
  gap: 4rem;
  background: var(--paper-3);
  align-items: start;
}

.contact-copy p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.contact-lines a,
.contact-lines span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--mist);
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  font-weight: 800;
}

.contact-lines span {
  color: var(--muted);
  background: var(--paper);
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 620ms ease var(--reveal-delay, 0ms),
    transform 620ms ease var(--reveal-delay, 0ms);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--mist);
  background: var(--paper);
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
}

.contact-form label span {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-2);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 6px;
  background: var(--paper-3);
  color: var(--ink);
  padding: 0.75rem;
}

.contact-form textarea {
  resize: vertical;
}

.full {
  grid-column: 1 / -1;
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  background: var(--ink);
  color: var(--paper-3);
  border-top: 1px solid rgba(251, 248, 238, 0.14);
}

.site-footer p,
.footer-meta {
  color: rgba(251, 248, 238, 0.66);
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
}

.footer-meta {
  display: grid;
  gap: 0.25rem;
  text-align: end;
  max-width: 480px;
}

.chatbot {
  position: fixed;
  /* Physical right, not inline-end: KD wants the widget bottom-right on the
     Arabic (RTL) pages too, matching EN. */
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
}

/* bost-chat.js promotes the widget to the top layer (popover="manual") so it can
   float above the methodology <dialog>. Neutralize the popover UA box + centering
   and reset top/left only — right/bottom stay owned by the rules above (and any
   mobile overrides), so positioning is unchanged. is-hidden is the no-popover
   fallback used to suppress the widget during Majhir / Contact. */
.chatbot[popover] {
  /* Physical top/left resets (in RTL, inline-start would resolve to RIGHT and
     cancel the right-pin above). */
  top: auto;
  left: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.chatbot.is-hidden {
  display: none !important;
}

/* When Mijhar / Method is open, bost-chat.js re-homes the widget INSIDE that
   modal <dialog> (a top-layer popover paints above the modal but Chromium lets
   the dialog's own content swallow the clicks). Nested there it keeps its
   viewport pin and just needs to out-stack the dialog's panels. */
.chatbot.is-nested {
  z-index: 2147483000;
}

/* Ask BOST launcher: a khatam medallion (the identity, same at every
   breakpoint) with a quiet caption chip beside it on wider screens. */
.chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  color: var(--gold);
  font-weight: 800;
}

.chat-medal {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
}

.chat-medal svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}

.chat-launcher:hover .chat-medal svg,
.chat-launcher:focus-visible .chat-medal svg {
  transform: rotate(22.5deg);
}

.medal-disc { fill: rgba(11, 15, 13, 0.92); }
.medal-ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.55; }
.medal-star { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linejoin: miter; }
.medal-core { fill: var(--green); }

/* Breathing halo: idle "I'm here" ring, deliberately slow and faint. */
.chat-medal::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 78, 0.6);
  opacity: 0;
  animation: medal-breathe 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes medal-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.02); opacity: 0.5; }
}

/* Signal ping: only fired by real events (.has-signal set from JS). */
.chat-launcher.has-signal .chat-medal::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(28, 186, 128, 0.8);
  animation: medal-ping 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes medal-ping {
  0% { transform: scale(0.85); opacity: 0.9; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-medal::after, .chat-launcher.has-signal .chat-medal::before { animation: none; opacity: 0; }
  .chat-launcher:hover .chat-medal svg, .chat-launcher:focus-visible .chat-medal svg { transform: none; }
}

.chat-launcher-label {
  max-width: 200px;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(201, 164, 78, 0.38);
  border-radius: 999px;
  background: rgba(11, 15, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: max-width 0.45s ease, opacity 0.3s ease, padding 0.45s ease;
}

/* First-impression caption folds into the medallion after a few seconds
   (bost-chat.js adds is-collapsed); hover/focus unfolds it. */
.chat-launcher.is-collapsed { gap: 0; }

.chat-launcher.is-collapsed:not(:hover):not(:focus-visible) .chat-launcher-label {
  max-width: 0;
  opacity: 0;
  padding-inline: 0;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher-label { transition: none; }
}

/* Invitation nudge: the one-per-session teaser above the medallion. */
.chat-nudge {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: max-content;
  max-width: min(260px, calc(100vw - 2.5rem));
  animation: nudge-in 0.45s ease both;
}

@keyframes nudge-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.chat-nudge-text {
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(201, 164, 78, 0.42);
  border-radius: 10px;
  border-end-end-radius: 2px;
  background: rgba(11, 15, 13, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font: inherit;
  font-size: 0.83rem;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.chat-nudge-dismiss {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
  border-radius: 50%;
  background: rgba(11, 15, 13, 0.9);
  color: rgba(var(--ink-rgb), 0.7);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

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

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 4rem;
  width: min(400px, calc(100vw - 2rem));
  max-height: min(680px, calc(100vh - 7rem));
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto auto auto;
  /* Console posture: dark glass instrument, not a support-bot bubble app. */
  background: rgba(11, 15, 13, 0.94);
  color: var(--ink);
  border: 1px solid rgba(201, 164, 78, 0.3);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid rgba(201, 164, 78, 0.2);
}

.chat-title-text {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

/* Subtitle as a console status line: mono, uppercase, live green dot. */
.chat-head small {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
}

.chat-head small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(28, 186, 128, 0.8);
}

.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chat-clear-button {
  height: 38px;
  padding: 0 0.8rem;
  border: 1px solid rgba(var(--ink-rgb), 0.4);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.chat-clear-button:hover,
.chat-clear-button:focus-visible {
  background: rgba(var(--ink-rgb), 0.12);
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 1.2rem;
}

.chat-messages {
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Dispatch-style lines instead of speech bubbles: assistant entries hang off
   a thin gold rule, user entries off a green one. */
.message {
  max-width: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  border: 0;
  border-inline-start: 2px solid rgba(201, 164, 78, 0.6);
  background: rgba(var(--ink-rgb), 0.05);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.message.user {
  align-self: flex-end;
  background: rgba(28, 186, 128, 0.12);
  color: var(--ink);
  border-inline-start-color: var(--green);
}

html[dir="rtl"] .message.user {
  align-self: flex-start;
}

.chat-chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.75rem 1rem 0;
}

.chat-chips button {
  flex: 0 0 auto;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(201, 164, 78, 0.35);
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.05);
  font-size: 0.8rem;
  color: var(--ink);
}

.chat-chips button:hover,
.chat-chips button:focus-visible {
  border-color: var(--gold);
  background: rgba(201, 164, 78, 0.12);
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
}

.chat-form textarea {
  resize: none;
  min-height: 46px;
  max-height: 120px;
  border: 1px solid rgba(201, 164, 78, 0.28);
  border-radius: 6px;
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--ink);
  padding: 0.7rem;
}

.send-button {
  align-self: end;
  background: var(--green);
  color: #06130d;
  border-color: var(--green);
}

.chat-note {
  margin: 0;
  padding: 0 1rem 1rem;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Persistent WhatsApp contact link in the chat footer. */
.chat-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1rem 0.6rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25d366;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.chat-wa:hover {
  background: rgba(37, 211, 102, 0.2);
}
.chat-wa svg { flex: none; }

/* Chat handoff: turn a conversation into a lead (email + engine intake). */
.chat-handoff-toggle {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.6rem 1rem 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--green-2);
  border-radius: 6px;
  background: transparent;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.chat-handoff-toggle:hover {
  background: rgba(28, 186, 128, 0.08);
}

.chat-handoff {
  margin: 0.6rem 1rem 0;
  padding: 0.8rem;
  border: 1px solid var(--green-2);
  border-radius: 8px;
  background: rgba(28, 186, 128, 0.06);
}

.chat-handoff[hidden] {
  display: none;
}

.chat-handoff-lede {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.4;
}

.chat-handoff-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-handoff-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.chat-handoff-form input {
  border: 1px solid var(--mist);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 0.7rem;
  font-size: 0.85rem;
}

.chat-handoff-form .send-button {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.chat-handoff-status {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--green);
}

.chat-handoff-status[hidden] {
  display: none;
}

.chat-handoff-status.is-error {
  color: var(--terracotta, #bc432e);
}

html[dir="rtl"] .desktop-nav,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .contact-lines,
html[dir="rtl"] .chat-chips {
  direction: rtl;
}

@media (max-width: 1100px) {
  .desktop-nav,
  .header-actions .button {
    display: none;
  }

  .menu-toggle {
    display: inline-block;
  }

  .mobile-nav {
    position: fixed;
    top: var(--header-h);
    inset-inline: 0;
    z-index: 70;
    display: none;
    grid-template-columns: 1fr;
    background: rgba(242, 238, 227, 0.96);
    color: var(--ink);
    border-bottom: 1px solid var(--mist);
    padding: 0.5rem 2rem 1rem;
  }

  .mobile-nav.is-open {
    display: grid;
  }

  .mobile-nav a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--mist);
    font-weight: 800;
  }

  .mobile-nav .mobile-assessment-link {
    margin: 0.45rem 0 0.55rem;
    padding: 0.95rem 1rem;
    background: var(--gold);
    color: #14100a;
    border: 1px solid rgba(var(--ink-rgb), 0.16);
    box-shadow: 0 8px 22px rgba(120, 94, 40, 0.2);
  }

  h1 {
    font-size: 4.5rem;
  }

  h2 {
    font-size: 3.1rem;
  }

  .split,
  .madinah,
  .contact {
    grid-template-columns: 1fr;
  }

  /* On narrow viewports the madinah section collapses to one column.
     The map is first in source order; force the title/content above it. */
  .madinah-content { order: 0; }
  .madinah-map { order: 1; }

  .delivery-rail,
  .solution-grid,
  .use-grid,
  .mission-grid,
  .why-grid,
  .commit-grid,
  .trust-grid,
  .commercial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-card {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .why-bost .section-head {
    display: block;
  }

  .why-bost .section-head p {
    max-width: none;
    margin-top: 1.2rem;
  }

  .site-header {
    padding: 0 1rem;
  }

  .brand-copy small {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
  }

  .hero {
    min-height: 88vh;
    padding: calc(var(--header-h) + 2rem) 1rem 3rem;
  }

  .hero-glyph {
    font-size: 13rem;
  }
  /* Aperture on mobile: a smaller ambient wash pinned top-right behind the
     full-width text, dimmed so cycling imagery never fights legibility. */
  html.hero-aperture-on .hero-aperture {
    inset-inline-end: -8%;
    top: 4.5rem;
    width: min(72vw, 340px);
    opacity: 0.5;
  }
  .hero-ap-baa { font-size: clamp(150px, 40vw, 220px); }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.35rem;
  }

  .hero-lede,
  .section-head p,
  .section-lede,
  .intro-copy p,
  .madinah-content p,
  .contact-copy p {
    font-size: 1rem;
  }

  .section {
    padding: 4rem 1rem;
  }

  .fact-band,
  .delivery-rail,
  .athr-rail,
  .commit-grid,
  .trust-grid,
  .commercial-grid,
  .solution-grid,
  .use-grid,
  .mission-grid,
  .why-grid,
  .partner-list,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .athr-phase {
    min-height: auto;
    border-inline-end: 0;
  }

  .athr-phase:nth-child(-n + 3) {
    border-block-start: 1px solid var(--mist);
  }

  .athr-phase:first-child {
    border-block-start: 0;
  }

  .team-card {
    flex-basis: 50%;
    max-width: 50%;
  }

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

  .fact {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(242, 238, 227, 0.16);
  }

  .fact:last-child {
    border-bottom: 0;
  }

  .delivery-step,
  .solution-card,
  .mission-grid article,
  .why-grid article,
  .capability-card,
  .use-grid article {
    min-height: auto;
    border-inline-end: 0;
  }

  .team-card {
    min-height: auto;
  }

  /* Fully opaque on mobile, alpha-blended cards over a 1fr column let
     reveal-animation transforms briefly overlap visually. */
  .capability-card {
    background: var(--paper-3);
  }

  .madinah-map {
    min-height: 360px;
  }

  .contact {
    gap: 2rem;
  }

  .site-footer {
    display: grid;
  }

  .footer-meta {
    text-align: start;
  }

  .chatbot {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  /* Mobile: the medallion alone carries the identity (the button keeps an
     aria-label, set in bost-chat.js, so hiding the caption is safe). */
  .chat-launcher-label { display: none; }
  .chat-medal { width: 48px; height: 48px; }

  /* Panel: keep it clear of the screen edges and never taller than the
     viewport allows above the launcher. */
  .chat-panel {
    width: min(360px, calc(100vw - 1.5rem));
    max-height: min(560px, calc(100vh - 6rem));
    bottom: 3.4rem;
  }
}

@media (max-width: 900px) {
  .fact-band {
    grid-template-columns: 1fr;
  }

  .fact {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(242, 238, 227, 0.16);
  }

  .fact:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .brand {
    gap: 0.55rem;
  }

  .brand-copy small {
    display: none;
  }

  .lang-toggle {
    padding: 0.58rem 0.62rem;
  }
}

@media (max-width: 360px) {
  .brand-copy {
    display: none;
  }
}

@keyframes heroDrift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
    filter: saturate(0.95) contrast(1);
  }
  to {
    transform: scale(1.08) translate3d(-1.6%, 1%, 0);
    filter: saturate(1.08) contrast(1.06);
  }
}

@keyframes geometricTurn {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(405deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .hero-canvas {
    display: none;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Hero mission console HUD === */
.hero-hud {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(242, 238, 227, 0.22);
  background: rgba(10, 14, 11, 0.42);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  pointer-events: none;
}

.hud-cell {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0.55rem 0.95rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.14);
  min-height: 56px;
}

.hud-cell:last-child { border-inline-end: 0; }

/* Anchors hold a fixed width so cycling content never reflows the hub.
   Bases are sized to each cell's widest possible string (longest prayer
   name, full Hijri date, fixed coords). The window cell absorbs the rest. */
.hud-cell-anchor { flex: 0 0 auto; }
.hud-cell-madinah { flex: 0 0 14.5rem; }
.hud-cell-local   { flex: 0 0 12.5rem; }
.hud-cell-prayer  { flex: 0 0 11rem; }
.hud-cell-window  { flex: 1 1 0; min-width: 0; }

.hud-label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(251, 248, 238, 0.5);
  font-weight: 500;
}

.hud-value {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--paper);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-cell-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.hud-cell-stacked .hud-value {
  font-size: 0.78rem;
}

.hud-value-sub {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(251, 248, 238, 0.62);
  font-weight: 500;
  margin-top: 1px;
}

.hud-mobile-cycle {
  display: none;
}

.footer-dates {
  margin: 0.6rem 0 0;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(251, 248, 238, 0.55);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
}

.footer-date-sep { color: rgba(251, 248, 238, 0.3); }

.hud-cell-status .hud-value {
  color: #9be4c5;
}

.hud-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green-2);
  box-shadow: 0 0 0 0 rgba(15, 139, 98, 0.7);
  animation: statusPulse 1.8s ease-out infinite;
}

/* === Cycling HUD cells (ENV / SIGNAL) ============================ */
/* Mac-LED breathing tile that fades between data feeds.            */

.hud-cell-cycle {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
}

.hud-cell-cycle .hud-cycle-stage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  transition: opacity 600ms ease, transform 600ms ease;
  opacity: 1;
  transform: translateY(0);
}

.hud-cell-cycle.is-fading .hud-cycle-stage {
  opacity: 0;
  transform: translateY(-2px);
}

.hud-cell-cycle .hud-label {
  transition: color 600ms ease;
}

.hud-cell-cycle .hud-value {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

/* Window cell: a clipping rail that shows the full feed value. Short items
   sit static; items wider than the rail scroll (hybrid marquee) so nothing
   is ever truncated with an ellipsis. */
.hud-window-value {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.hud-window-text {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.hud-cell-window.is-scrolling .hud-window-text {
  animation: hudMarquee var(--scroll-dur, 4000ms) ease-in-out 1100ms infinite alternate;
}

@keyframes hudMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--scroll-dist, 0)); }
}

.hud-led {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(251, 248, 238, 0.85);
  box-shadow: 0 0 6px rgba(251, 248, 238, 0.55),
              0 0 12px rgba(251, 248, 238, 0.25);
  animation: ledBreath 4s ease-in-out infinite;
}

.hud-cell-cycle:hover .hud-led { animation-play-state: paused; }

@keyframes ledBreath {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-cell-cycle .hud-cycle-stage { transition: opacity 120ms linear; transform: none; }
  .hud-cell-cycle.is-fading .hud-cycle-stage { transform: none; }
  .hud-led { animation: none; opacity: 0.85; }
  .hud-cell-window.is-scrolling .hud-window-text { animation: none; transform: none; }
  /* reduced motion: the wire holds a static list, no upward stepping (JS skips
     startNewsTicker), so headlines simply clip with an ellipsis. */
  .hud-news-list { transform: none !important; transition: none; }
}

/* === Intel console (news-forward hero HUD) ====================== */
/* Two columns: a fixed-width left meta column (local time stacked over a
   market / OSINT signals rail) and a flexible right column carrying a live
   newswire list of 3-5 headlines that fills the remaining width. */
.hero-hud-console {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  position: relative;   /* anchor for the collapse toggle */
}

/* Collapse / expand control — a small chevron pinned to the trailing edge. The
   HUD is pointer-events:none (decorative), so re-enable interaction here. */
.hud-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.5rem;
  transform: translateY(-50%);
  z-index: 3;
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 14, 11, 0.5);
  border: 1px solid rgba(242, 238, 227, 0.2);
  border-radius: 3px;
  color: #9be4c5;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hud-toggle:hover {
  background: rgba(28, 186, 128, 0.16);
  border-color: rgba(28, 186, 128, 0.42);
}
.hud-toggle-glyph {
  display: block;
  line-height: 1;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
/* Expanded: drop the toggle into the bottom-right corner so it sits clear of
   the scrolling headlines (which run along the top rows). A little extra bottom
   padding on the news column reserves a clearance band beneath the last row so
   the corner control never overlaps the wire text. */
.hero-hud-console:not(.is-collapsed) .hud-toggle {
  top: auto;
  bottom: 0.5rem;
  transform: none;
}
.hero-hud-console:not(.is-collapsed) .hud-col-news { padding-bottom: 2.1rem; }
/* Chevron points up once the console is open. */
.hero-hud-console:not(.is-collapsed) .hud-toggle-glyph { transform: rotate(180deg); }

/* Collapsed: fold away the meta rail and the newswire header, leaving a single
   clickable headline. Reserve room on the trailing edge for the toggle. */
.hero-hud-console.is-collapsed .hud-col-meta,
.hero-hud-console.is-collapsed .hud-news-head { display: none; }
.hero-hud-console.is-collapsed .hud-col-news {
  border-inline-start: 0;
  padding-block: 0.35rem;
  padding-inline-end: 2.6rem;
}
.hud-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hud-col-meta { flex: 0 0 16.5rem; }
.hud-col-news {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.6rem 1rem 0.65rem;
  gap: 0.34rem;
  border-inline-start: 1px solid rgba(242, 238, 227, 0.14);
  /* The HUD as a whole is pointer-events:none (decorative), but the newswire is
     interactive — headlines link out, controls/wheel scroll it. Re-enable here. */
  pointer-events: auto;
}

/* Left column: time anchor over the signals rail, divided by a hairline. */
.hud-col-meta .hud-cell { border-inline-end: 0; }
.hud-col-meta .hud-cell-time { border-bottom: 1px solid rgba(242, 238, 227, 0.14); }
.hud-cell-time .hud-value[data-hud-clock] { font-size: 0.92rem; }
.hud-cell-signals { flex: 1 1 auto; }

/* Right column: newswire header + the headline list. */
.hud-news-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}
.hud-news-head .hud-label {
  color: #9be4c5;
  letter-spacing: 0.26em;
}
/* Prev / next controls — revealed on hover, push to the trailing edge. */
.hud-news-nav {
  margin-inline-start: auto;
  display: flex;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.hud-col-news:hover .hud-news-nav { opacity: 1; }
.hud-news-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(242, 238, 227, 0.2);
  border-radius: 3px;
  color: #9be4c5;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hud-news-btn:hover {
  background: rgba(28, 186, 128, 0.16);
  border-color: rgba(28, 186, 128, 0.42);
}
/* Headline links: read like the text, reveal as links on hover. */
a.hud-news-title { cursor: pointer; transition: color 0.15s ease; }
a.hud-news-title:hover {
  color: #9be4c5;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Vertical ticker: a fixed-height clip (height set by JS to an integer number
   of rows) inside which the <ul> translates upward one row per step. */
.hud-news-viewport {
  overflow: hidden;
  position: relative;
}
.hud-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.hud-news-list li {
  display: flex;
  gap: 0.6rem;
  align-items: center;      /* center the tag against a 1- or 2-line title */
  min-width: 0;
  height: 2.7rem;           /* fixed 2-line slot drives a uniform upward step */
}
.hud-news-cat {
  flex: 0 0 6.5rem;
  color: #9be4c5;
  font-size: 0.58rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
.hud-news-title {
  flex: 1 1 0;
  min-width: 0;
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.34;
  letter-spacing: 0.02em;
  /* Wrap to two lines, then clamp — full headlines read down the scroll. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 760px) {
  .hero-hud-console { flex-direction: column; }
  .hud-col-meta { flex: 0 0 auto; }
  .hud-col-news {
    border-inline-start: 0;
    border-top: 1px solid rgba(242, 238, 227, 0.14);
  }
  .hud-news-cat { flex-basis: 5rem; }
}

/* === Prayer progress bar ========================================== */

.hud-prayer-progress {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 4px;
  background: rgba(251, 248, 238, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.hud-prayer-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-2), var(--gold));
  border-radius: 999px;
  transition: width 1s linear;
}

/* === Sovereignty band === */
.sovereignty {
  background:
    radial-gradient(circle at 8% 0%, rgba(15, 139, 98, 0.16), transparent 40%),
    radial-gradient(circle at 96% 100%, rgba(188, 67, 46, 0.14), transparent 40%),
    var(--ink);
  color: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.sovereignty::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(242, 238, 227, 0.04) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(242, 238, 227, 0.04) 31px 32px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}

.sovereignty-head {
  position: relative;
  max-width: 760px;
  margin-bottom: 3rem;
}

.section-kicker-light {
  color: #f2c089;
}

.sovereignty h2 {
  color: var(--paper);
}

.sovereignty-head p {
  color: rgba(251, 248, 238, 0.7);
  font-size: 1.08rem;
  line-height: 1.7;
}

.sov-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(242, 238, 227, 0.18);
  position: relative;
}

.sov-card {
  padding: 1.75rem 1.6rem 1.85rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.12);
  border-bottom: 1px solid rgba(242, 238, 227, 0.12);
  background: rgba(242, 238, 227, 0.02);
  transition: background 0.4s ease;
  position: relative;
}

.sov-card:nth-child(3n) { border-inline-end: 0; }
.sov-card:nth-last-child(-n+3) { border-bottom: 0; }

.sov-card:hover {
  background: rgba(15, 139, 98, 0.07);
}

.sov-tag {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #f2c089;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(242, 192, 137, 0.32);
  margin-bottom: 1.1rem;
}

.sov-card h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 0.7rem;
  font-weight: 500;
}

.sov-card p {
  color: rgba(251, 248, 238, 0.66);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

.sov-note {
  position: relative;
  margin-top: 2.5rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(251, 248, 238, 0.45);
  max-width: 720px;
  border-left: 2px solid rgba(242, 192, 137, 0.45);
  padding: 0.5rem 0 0.5rem 1rem;
}

html[dir="rtl"] .sov-note {
  border-left: 0;
  border-right: 2px solid rgba(242, 192, 137, 0.45);
  padding: 0.5rem 1rem 0.5rem 0;
}

@media (max-width: 1100px) {
  .sov-grid { grid-template-columns: repeat(2, 1fr); }
  .sov-card:nth-child(3n) { border-inline-end: 1px solid rgba(242, 238, 227, 0.12); }
  .sov-card:nth-child(2n) { border-inline-end: 0; }
  .sov-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(242, 238, 227, 0.12); }
  .sov-card:nth-last-child(-n+2) { border-bottom: 0; }

  .hero-hud {
    max-width: 100%;
  }
}

/* === Capability demos === */
.capability-card.has-cap-demo { padding-top: 0; overflow: hidden; }

.cap-demo {
  width: calc(100% + 2.4rem);
  margin: 0 -1.2rem 1rem;
  height: 80px;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.10);
  display: block;
}

.cap-demo svg { width: 100%; height: 100%; display: block; }

/* shared atoms */
.cap-edge   { stroke: rgba(var(--ink-rgb), 0.22); stroke-width: 0.6; }
.cap-node   { fill: var(--ink); }
.cap-frame  { fill: none; stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 0.7; }
.cap-glyph  {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  fill: var(--ink-2);
}

/* AI: pulse traveling left to right */
.cap-pulse-ai {
  fill: var(--terracotta);
  animation: capPulseAi 2.6s linear infinite;
}
@keyframes capPulseAi {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(200px, 0); opacity: 0; }
}

/* Builder: blinking cursor */
.cap-cursor { fill: var(--terracotta); animation: capBlink 1.1s steps(2) infinite; }
@keyframes capBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Data: pipes + flowing tokens */
.cap-pipe { fill: none; stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 1; }
.cap-pipe-out { stroke: var(--terracotta); stroke-width: 1.2; }
.cap-token { fill: var(--terracotta); }
.cap-token-1 { animation: capTok1 3s linear infinite; }
.cap-token-2 { animation: capTok2 3s linear infinite; }
.cap-token-3 { animation: capTok3 3s linear infinite; }
@keyframes capTok1 { 0% { transform: translate(0,0); opacity:0; } 8%{opacity:1;} 50%{transform:translate(100px,22px);} 100%{transform:translate(200px,22px); opacity:0;} }
@keyframes capTok2 { 0% { transform: translate(0,0); opacity:0; } 8%{opacity:1;} 50%{transform:translate(100px,0);}    100%{transform:translate(200px,0);    opacity:0;} }
@keyframes capTok3 { 0% { transform: translate(0,0); opacity:0; } 8%{opacity:1;} 50%{transform:translate(100px,-22px);} 100%{transform:translate(200px,-22px); opacity:0;} }

/* Twin: grid + breathing core */
.cap-grid { stroke: rgba(var(--ink-rgb), 0.10); stroke-width: 0.5; }
.cap-twin-core { fill: var(--green); }
.cap-twin-pulse {
  fill: none;
  stroke: var(--green-2);
  stroke-width: 1;
  transform-origin: 100px 40px;
  animation: capTwin 3s ease-out infinite;
}
@keyframes capTwin { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(4); opacity: 0; } }

/* Vision: bounding boxes appearing */
.cap-vision-frame { stroke: rgba(var(--ink-rgb), 0.4); }
.cap-bbox {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: capBbox 2.4s ease-in-out infinite;
}
@keyframes capBbox {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  20%  { stroke-dashoffset: 0; opacity: 1; }
  60%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { stroke-dashoffset: 200; opacity: 0; }
}

/* Alerts: expanding rings */
.cap-alert-core { fill: var(--terracotta); }
.cap-alert-ring {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1;
  transform-origin: 100px 40px;
  animation: capAlert 1.8s ease-out infinite;
}
@keyframes capAlert {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(8); opacity: 0; }
}

/* Stream: dots flowing in lanes */
.cap-lane { stroke: rgba(var(--ink-rgb), 0.10); stroke-width: 0.5; stroke-dasharray: 2 3; }
.cap-streamdot { fill: var(--green); animation: capStream 2.4s linear infinite; }
@keyframes capStream { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(220px, 0); opacity: 0; } }

/* Pipeline: stages with traveling token */
.cap-stage { fill: none; stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 1; }
.cap-link  { stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 1; }
.cap-pipe-token { fill: var(--terracotta); animation: capPipeTok 3.6s ease-in-out infinite; }
@keyframes capPipeTok {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(46px, 0); }
  50%  { transform: translate(92px, 0); }
  75%  { transform: translate(138px, 0); }
  100% { transform: translate(170px, 0); opacity: 0; }
}

/* Mining: branching with one active path */
.cap-trunk { fill: none; stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 1; }
.cap-branch { fill: none; stroke: rgba(var(--ink-rgb), 0.18); stroke-width: 0.8; }
.cap-active { stroke: var(--green); stroke-width: 1.4; }
.cap-trunk.cap-active, .cap-branch.cap-active { animation: capActive 2.6s ease-in-out infinite; }
@keyframes capActive { 0%, 100% { stroke: var(--green); } 50% { stroke: var(--green-2); } }

/* Dispatch: spokes */
.cap-dispatch-core { fill: var(--ink); }
.cap-spoke { stroke: rgba(var(--ink-rgb), 0.18); stroke-width: 0.8; }
.cap-spoke-end { fill: rgba(var(--ink-rgb), 0.4); }
.cap-spoke.cap-active { stroke: var(--terracotta); stroke-width: 1.4; animation: capActive 1.8s ease-in-out infinite; }

/* Geo: concentric rings + pulsing pins */
.cap-geo-ring { fill: none; stroke: rgba(var(--ink-rgb), 0.18); stroke-width: 0.6; stroke-dasharray: 2 3; }
.cap-geo-center { fill: var(--green); }
.cap-geo-pin { fill: var(--terracotta); animation: capGeoPin 2.4s ease-in-out infinite; }
@keyframes capGeoPin { 0%, 100% { opacity: 0.5; r: 2.5; } 50% { opacity: 1; r: 3.6; } }

/* Governance: lock + scanning bar */
.cap-lock-body, .cap-lock-shackle { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.cap-lock-body { fill: rgba(var(--ink-rgb), 0.04); }
.cap-scan {
  fill: var(--green-2);
  opacity: 0.4;
  animation: capScan 2.6s ease-in-out infinite;
}
@keyframes capScan {
  0%   { transform: translate(0, 0); opacity: 0.5; }
  50%  { transform: translate(0, 24px); opacity: 0.9; }
  100% { transform: translate(0, 0); opacity: 0.5; }
}

/* slow demos by default; intensify on hover */
.cap-demo > svg { animation-play-state: running; }
.capability-card:hover .cap-demo { background: linear-gradient(180deg, rgba(188, 67, 46, 0.06) 0%, transparent 100%); }

/* Consult: lines from center light up in sequence */
.cap-consult-core { fill: var(--ink); }
.cap-consult-figure { fill: var(--terracotta); }
.cap-consult-line {
  stroke: rgba(var(--ink-rgb), 0.18); stroke-width: 0.8;
  animation: capConsultLine 2s ease-in-out infinite;
}
@keyframes capConsultLine {
  0%, 100% { stroke: rgba(var(--ink-rgb), 0.18); }
  20%, 40% { stroke: var(--terracotta); stroke-width: 1.4; }
}

/* Vitals: ECG-style trace */
.cap-vitals-base { stroke: rgba(var(--ink-rgb), 0.12); stroke-width: 0.6; }
.cap-vitals-trace {
  fill: none; stroke: var(--terracotta); stroke-width: 1.2; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: capVitals 2.4s ease-out infinite;
}
.cap-vitals-dot { fill: var(--terracotta); animation: capVitalsDot 2.4s ease-out infinite; }
@keyframes capVitals { 0% { stroke-dashoffset: 600; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }
@keyframes capVitalsDot { 0% { transform: translate(0, 0); } 60% { transform: translate(200px, 0); opacity: 1; } 100% { transform: translate(200px, 0); opacity: 0; } }

/* Reach: concentric arcs from corner */
.cap-reach-arc {
  fill: none; stroke: var(--green-2); stroke-width: 0.8;
  transform-origin: 24px 40px; opacity: 0;
  animation: capReach 2.4s ease-out infinite;
}
.cap-reach-core { fill: var(--green); }
.cap-reach-target { fill: var(--terracotta); animation: capReachTarget 2.4s ease-in-out infinite; }
@keyframes capReach { 0% { transform: scale(0.4); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes capReachTarget { 0%, 60% { opacity: 0.4; } 75% { opacity: 1; } 100% { opacity: 0.4; } }

/* Route: stops with traveling vehicle */
.cap-route-path { fill: none; stroke: rgba(var(--ink-rgb), 0.22); stroke-width: 0.8; stroke-dasharray: 3 3; }
.cap-route-stop { fill: rgba(var(--ink-rgb), 0.4); }
.cap-route-stop.cap-active { fill: var(--terracotta); }
.cap-route-vehicle {
  fill: var(--green); animation: capRouteVeh 4s ease-in-out infinite;
  offset-path: path("M16,40 L60,20 L110,52 L160,28 L196,48");
  offset-rotate: 0deg;
}
@keyframes capRouteVeh {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@supports not (offset-path: path("M0,0 L1,1")) {
  .cap-route-vehicle { animation: capRouteVehFallback 4s ease-in-out infinite; }
  @keyframes capRouteVehFallback { 0% { transform: translate(0,0); } 25% { transform: translate(44px,-20px); } 50% { transform: translate(94px,12px); } 75% { transform: translate(144px,-12px); } 100% { transform: translate(180px,8px); } }
}

/* Stack: bars filling left to right */
.cap-stack-track { stroke: rgba(var(--ink-rgb), 0.12); stroke-width: 1; }
.cap-stack-fill {
  stroke: var(--terracotta); stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: capStack 2.6s ease-in-out infinite;
}
@keyframes capStack {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Scholar: book with a page turning */
.cap-book-base { fill: rgba(var(--ink-rgb), 0.04); stroke: rgba(var(--ink-rgb), 0.32); stroke-width: 0.8; }
.cap-book-spine { stroke: rgba(var(--ink-rgb), 0.4); stroke-width: 0.8; }
.cap-book-line { stroke: rgba(var(--ink-rgb), 0.28); stroke-width: 0.6; }
.cap-book-page {
  fill: rgba(242, 192, 137, 0.4); stroke: var(--terracotta); stroke-width: 0.7;
  transform-origin: 100px 40px;
  animation: capBookPage 3.4s ease-in-out infinite;
}
@keyframes capBookPage {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(-1); }
}

/* Ecosystem: orbit rotation */
.cap-eco-core { fill: var(--green); }
.cap-eco-sat { fill: var(--terracotta); }
.cap-eco-link { stroke: rgba(var(--ink-rgb), 0.18); stroke-width: 0.6; }
.cap-eco-orbit {
  transform-origin: 100px 40px;
  animation: capEcoOrbit 12s linear infinite;
}
@keyframes capEcoOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Center the marketplace if it lands alone in column 1, only on the 3-col desktop grid */
@media (min-width: 1101px) {
  /* The container's side border would dangle full-height down the empty column 1
     when the last card is centered into column 2. Draw the outer edge on the
     row-start cards instead so empty trailing cells leave no stray line, and the
     centered orphan closes into a clean box. */
  .capability-grid {
    border-left: 0;
  }
  html[dir="rtl"] .capability-grid {
    border-right: 0;
  }
  .capability-card:nth-child(3n+1) {
    border-inline-start: 1px solid var(--mist);
  }
  .capability-grid .capability-card:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-demo svg * { animation: none !important; }
}

/* === Dossiers shelf === */
.dossiers {
  background: var(--paper);
  position: relative;
}

.dos-shelf {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.dos-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.dos-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 50px rgba(17, 23, 17, 0.16);
}

.dos-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.dos-spine {
  background: var(--ink);
  color: var(--paper-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.4rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

html[dir="rtl"] .dos-spine {
  writing-mode: vertical-lr;
  transform: none;
}

.dos-spine span:first-child { color: #f2c089; font-weight: 700; }
.dos-spine .map-meta-mono { color: rgba(251, 248, 238, 0.7) !important; }

.dos-body {
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dos-status {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 600;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(188, 67, 46, 0.32);
  background: rgba(188, 67, 46, 0.06);
  align-self: flex-start;
}

.dos-card h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.dos-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
  flex: 1;
}

.dos-meta {
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  color: var(--muted) !important;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.18);
}

.dos-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.22);
}

.dos-foot p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.dos-foot a {
  color: var(--terracotta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-inline-start: 0.4rem;
}

@media (max-width: 1100px) { .dos-shelf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .dos-shelf { grid-template-columns: 1fr; } }

/* === Madinah Operating Center floor plan === */
.moc {
  background: var(--paper-3);
  position: relative;
}

.moc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 1fr);
  gap: 2.4rem;
  margin-top: 2.5rem;
  align-items: start;
}

.moc-floorplan-wrap {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(var(--ink-rgb), 0.32);
  padding: 1.4rem 1.4rem 1rem;
  box-shadow:
    inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px rgba(var(--ink-rgb), 0.32);
}

.moc-meta {
  display: block;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  color: var(--muted) !important;
  margin-bottom: 0.6rem;
}

.moc-floorplan { display: block; width: 100%; height: auto; font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }

.moc-room-rect {
  fill: rgba(var(--ink-rgb), 0.02);
  stroke: rgba(var(--ink-rgb), 0.55);
  stroke-width: 1.2;
  transition: fill 0.3s, stroke 0.3s;
}

.moc-room:hover .moc-room-rect {
  fill: rgba(188, 67, 46, 0.06);
  stroke: var(--terracotta);
  stroke-width: 1.6;
  cursor: pointer;
}

.moc-room-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  fill: var(--terracotta);
  font-weight: 700;
}

.moc-room-name {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 18px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: 0.02em;
}

.moc-room-name-ar {
  font-family: "Noto Naskh Arabic", serif;
  font-size: 14px;
  fill: rgba(var(--ink-rgb), 0.6);
}

.moc-room-area {
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: var(--muted);
}

.moc-desk {
  fill: rgba(var(--ink-rgb), 0.06);
  stroke: rgba(var(--ink-rgb), 0.32);
  stroke-width: 0.6;
}

.moc-chair {
  fill: rgba(var(--ink-rgb), 0.4);
}

.moc-active-chair {
  fill: var(--green);
  animation: capBlink 1.4s steps(2) infinite;
}

.moc-screen,
.moc-videowall {
  fill: rgba(11, 110, 79, 0.18);
  stroke: var(--green);
  stroke-width: 0.8;
}

.moc-vw-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--green);
  font-weight: 700;
}

.moc-door {
  stroke: var(--paper);
  stroke-width: 4;
}

.moc-entrance-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: var(--terracotta);
  font-weight: 700;
}

.moc-rooms {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.moc-card {
  background: var(--paper);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  padding: 1rem 1.1rem;
  border-inline-start: 3px solid var(--terracotta);
  transition: background 0.3s;
}

.moc-card:hover { background: rgba(188, 67, 46, 0.04); }

.moc-card-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
}

.moc-card h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.moc-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.moc-foot {
  margin-top: 1.6rem;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  color: var(--muted) !important;
  max-width: 760px;
}

@media (max-width: 1100px) {
  .moc-stage { grid-template-columns: 1fr; }
}

/* === Operations Watch === */
.ops-watch {
  background:
    radial-gradient(circle at 6% 100%, rgba(15, 139, 98, 0.18), transparent 36%),
    var(--ink);
  color: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.ops-watch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(242, 238, 227, 0.04) 35px 36px);
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 30%, transparent 100%);
}

.ops-watch > * { position: relative; z-index: 1; }

.ops-head { max-width: 760px; margin-bottom: 2rem; }
.ops-watch h2 { color: var(--paper); }
.ops-head p { color: rgba(251, 248, 238, 0.7); font-size: 1rem; line-height: 1.65; }

/* Hide the leftmost two KPIs (commits + FDEs) until they have a real reference.
   Remove .is-hidden once a public BOST GitHub org and first engagement land. */
.ops-cell.is-hidden { display: none; }

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(242, 238, 227, 0.18);
}

.ops-cell {
  padding: 1.4rem 1.2rem 1.5rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.12);
  background: rgba(242, 238, 227, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}

.ops-cell:last-child { border-inline-end: 0; }

.ops-cell::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 24px;
  height: 2px;
  background: var(--green-2);
}

.ops-label {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(251, 248, 238, 0.55);
  font-weight: 500;
}

.ops-value {
  font-family: Fraunces, serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--paper);
  font-weight: 500;
  margin-top: 0.3rem;
}

.ops-value small {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(251, 248, 238, 0.6);
  letter-spacing: 0.1em;
  margin-inline-start: 0.2rem;
}

.ops-sub {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: rgba(251, 248, 238, 0.45);
  margin-top: auto;
}

.ops-cell-uptime::before { background: #f2c089; }

.ops-note {
  margin-top: 1.4rem;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  color: rgba(251, 248, 238, 0.45) !important;
  max-width: 720px;
  line-height: 1.6;
}

@media (max-width: 1100px) { .ops-grid { grid-template-columns: repeat(3, 1fr); } .ops-cell:nth-child(3n) { border-inline-end: 0; } }
@media (max-width: 760px)  { .ops-grid { grid-template-columns: 1fr 1fr; } .ops-cell { border-inline-end: 1px solid rgba(242, 238, 227, 0.12) !important; } .ops-cell:nth-child(2n) { border-inline-end: 0 !important; } }

/* === Forward-Deployed Engineer Manifest === */
.fde {
  background: var(--ink);
  color: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.fde::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 12%, rgba(15, 139, 98, 0.18), transparent 40%),
    radial-gradient(circle at 88% 88%, rgba(188, 67, 46, 0.14), transparent 42%);
  pointer-events: none;
}

.fde-glyph {
  position: absolute;
  font-family: Fraunces, serif;
  font-weight: 500;
  font-size: 28rem;
  line-height: 0.85;
  color: rgba(242, 238, 227, 0.04);
  bottom: -4rem;
  inset-inline-end: -1rem;
  pointer-events: none;
  letter-spacing: -0.04em;
  user-select: none;
}

.fde > * { position: relative; z-index: 1; }

.fde-head { max-width: 880px; margin-bottom: 3rem; }
.fde h2   { color: var(--paper); }
.fde-head p { color: rgba(251, 248, 238, 0.72); font-size: 1.08rem; line-height: 1.7; }

.fde-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0;
  border: 1px solid rgba(242, 238, 227, 0.18);
}

.fde-block {
  padding: 1.8rem 1.6rem 1.8rem;
  border-inline-end: 1px solid rgba(242, 238, 227, 0.12);
  background: rgba(242, 238, 227, 0.02);
}

.fde-block:last-child { border-inline-end: 0; }

.fde-block-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: #f2c089;
  font-weight: 600;
  display: block;
  margin-bottom: 0.85rem;
}

.fde-block h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.32rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--paper);
  line-height: 1.2;
}

.fde-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fde-block ul li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(251, 248, 238, 0.78);
  padding-inline-start: 1rem;
  position: relative;
}

.fde-block ul li::before {
  content: "·";
  position: absolute;
  inset-inline-start: 0;
  color: var(--terracotta);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
  top: -0.05em;
}

.fde-block-charter {
  background: rgba(8, 12, 9, 0.6);
}

.fde-charter-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: charter;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fde-charter-list li {
  counter-increment: charter;
  position: relative;
  padding: 0.55rem 0 0.55rem 2rem;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--paper);
  border-bottom: 1px dashed rgba(242, 238, 227, 0.14);
}

html[dir="rtl"] .fde-charter-list li { padding: 0.55rem 2rem 0.55rem 0; }

.fde-charter-list li:last-child { border-bottom: 0; }

.fde-charter-list li::before {
  content: counter(charter, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.65rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--terracotta);
  font-weight: 700;
}

.fde-charter-sig {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(251, 248, 238, 0.45);
  margin-top: 0.3rem;
}

.fde-cadence {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fde-cadence > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(242, 238, 227, 0.14);
}

.fde-cadence > div:last-child { border-bottom: 0; }

.fde-cadence dt {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #f2c089;
  font-weight: 700;
}

.fde-cadence dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(251, 248, 238, 0.78);
}

.fde-cadence dd strong {
  color: var(--paper);
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  margin-inline-end: 0.4rem;
  font-weight: 700;
}

.fde-foot {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(242, 192, 137, 0.4);
  background: rgba(242, 192, 137, 0.05);
}

.fde-status {
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  color: #f2c089 !important;
  display: block;
  margin-bottom: 0.5rem;
}

.fde-call p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--paper);
}

.fde-call a {
  color: #f2c089;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-inline-start: 0.3rem;
}

.fde-roles {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(251, 248, 238, 0.6);
  line-height: 1.6;
  text-align: end;
}

html[dir="rtl"] .fde-roles { text-align: start; }

@media (max-width: 1100px) {
  .fde-grid { grid-template-columns: 1fr; }
  .fde-block { border-inline-end: 0; border-bottom: 1px solid rgba(242, 238, 227, 0.12); }
  .fde-block:last-child { border-bottom: 0; }
  .fde-foot { grid-template-columns: 1fr; }
  .fde-roles { text-align: start; }
}

@media (max-width: 760px) {
  .fde-glyph { font-size: 14rem; }
}

/* === Field Notes from the Kingdom === */
.field-notes {
  background: var(--paper-2);
  position: relative;
}

.fn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}

.fn-card {
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.fn-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 60px;
  height: 3px;
  background: var(--accent, var(--ink));
}

.fn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(17, 23, 17, 0.12);
}

.fn-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.fn-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--accent, var(--ink));
  color: var(--accent, var(--ink));
}

.fn-tag-health   { --accent: var(--green); }
.fn-tag-cities   { --accent: var(--ink-2); }
.fn-tag-energy   { --accent: var(--gold); }
.fn-tag-hajj     { --accent: var(--terracotta); }
.fn-tag-doctrine { --accent: var(--ink); }

.fn-card.fn-tag-health,
.fn-card:has(.fn-tag-health)   { --accent: var(--green); }
.fn-card:has(.fn-tag-cities)   { --accent: var(--ink-2); }
.fn-card:has(.fn-tag-energy)   { --accent: var(--gold); }
.fn-card:has(.fn-tag-hajj)     { --accent: var(--terracotta); }
.fn-card:has(.fn-tag-doctrine) { --accent: var(--ink); }

.fn-date {
  font-size: 0.66rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.16em !important;
}

.fn-card h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}

.fn-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
  flex: 1;
}

.fn-cta {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--terracotta);
  font-weight: 600;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.18);
}

.fn-foot {
  margin-top: 2rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 720px;
  border-left: 2px solid var(--terracotta);
  padding: 0.5rem 0 0.5rem 1rem;
}

html[dir="rtl"] .fn-foot {
  border-left: 0;
  border-right: 2px solid var(--terracotta);
  padding: 0.5rem 1rem 0.5rem 0;
}

@media (max-width: 1100px) { .fn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .fn-grid { grid-template-columns: 1fr; } }

/* === First Principles doctrine === */
.principles {
  background:
    radial-gradient(circle at 92% 8%, rgba(11, 110, 79, 0.06), transparent 38%),
    var(--paper-3);
  position: relative;
  overflow: hidden;
}

.principles-mark {
  position: absolute;
  top: 1rem;
  inset-inline-end: 2rem;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 22rem;
  line-height: 1;
  color: rgba(var(--ink-rgb), 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

html[dir="rtl"] .principles-mark { transform: scaleX(-1); }

.principles > * { position: relative; z-index: 1; }

.principles-head {
  max-width: 880px;
  margin-bottom: 3rem;
}

.principles-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
  counter-reset: principle;
}

html[dir="rtl"] .principles-grid {
  border-left: 0;
  border-right: 1px solid rgba(var(--ink-rgb), 0.18);
}

.principle {
  position: relative;
  padding: 1.85rem 1.6rem 1.7rem 4.2rem;
  border-right: 1px solid rgba(var(--ink-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper-3);
  transition: background 0.4s ease;
}

html[dir="rtl"] .principle {
  border-right: 0;
  border-left: 1px solid rgba(var(--ink-rgb), 0.18);
  padding: 1.85rem 4.2rem 1.7rem 1.6rem;
}

.principle:hover { background: rgba(var(--ink-rgb), 0.025); }

.principle-num {
  position: absolute;
  top: 1.85rem;
  left: 1.4rem;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 700;
}

html[dir="rtl"] .principle-num { left: auto; right: 1.4rem; }

.principle-rule {
  margin: 0 0 0.7rem;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.32rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

.principle-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principles-mark { font-size: 14rem; top: 0.5rem; right: 1rem; }
}

@media (max-width: 760px) {
  .principle { padding-left: 3.4rem; padding-right: 1.2rem; }
  .principle-rule { font-size: 1.15rem; }
  .principles-mark { display: none; }
}

/* === Intake wizard: First Operating Problem === */
.intake {
  background:
    radial-gradient(circle at 90% 0%, rgba(11, 110, 79, 0.05), transparent 38%),
    var(--paper);
  display: block;
  padding-bottom: 5rem;
}

.intake-head {
  max-width: 820px;
  margin-bottom: 3rem;
}

.intake-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.intake-form {
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  padding: 2rem 2rem 1.6rem;
  position: relative;
  box-shadow: 0 1px 0 rgba(17, 23, 17, 0.06);
  min-width: 0;
}

.intake-doors {
  grid-column: 1 / -1;
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 1px 0 rgba(17, 23, 17, 0.06);
}

.intake-doors[hidden] { display: none; }

.intake-doors-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: var(--ink);
}

.intake-doors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.intake-door {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: start;
  padding: 1.4rem 1.4rem;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.intake-door:hover,
.intake-door:focus-visible {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(17, 23, 17, 0.1);
}

.intake-door-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.intake-door-sub {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.45;
}

.intake-door-link {
  margin-top: 1rem;
  background: transparent;
  border: 0;
  padding: 0.35rem 0;
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.intake-doors-hint {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-2);
  opacity: 0.85;
}

.intake-doorbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.82rem;
}

.intake-doorbar[hidden] { display: none; }

.intake-doorbar-label {
  font-weight: 700;
  color: var(--ink);
}

.intake-doorbar-change {
  background: transparent;
  border: 0;
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.82rem;
}

.intake-strategy {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}

.intake-strategy-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.intake-stakes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
}

.intake-stakes label {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.intake-stakes label:hover { border-color: var(--green); }

.intake-stakes input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.intake-stakes label:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper-3);
}

.intake-stakes input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

.intake-reading-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.intake-reading-check[hidden],
.intake-reading-noted[hidden],
.intake-reading-correct[hidden] { display: none; }

.intake-reading-check-q {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.intake-reading-check-btns { display: inline-flex; gap: 0.4rem; }

.intake-reading-yes,
.intake-reading-no {
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 999px;
  background: var(--paper-3);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.intake-reading-yes:hover { background: var(--green); border-color: var(--green); color: var(--paper-3); }
.intake-reading-no:hover { border-color: var(--green); }

.intake-reading-noted {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
}

.intake-reading-correct {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
}

.intake-reading-correct span { display: block; margin-bottom: 0.3rem; color: var(--ink-2); }

.intake-reading-correct input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: 6px;
  font-size: 0.85rem;
}

.intake-prefill {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.7rem 0.85rem;
  text-align: start;
  border: 1px dashed rgba(11, 110, 79, 0.42);
  border-radius: 8px;
  background: rgba(11, 110, 79, 0.05);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.intake-prefill[hidden] { display: none; }

.intake-prefill:hover { border-color: var(--green); background: rgba(11, 110, 79, 0.09); }

.intake-prefill-tag {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.intake-prefill-text {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.intake-ack {
  margin: 0 0 1.2rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 2px solid var(--green);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

.intake-ack[hidden] { display: none; }

.intake-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.intake-progress-label {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 600;
  white-space: nowrap;
}

.intake-progress-track {
  flex: 1;
  height: 2px;
  background: rgba(var(--ink-rgb), 0.12);
  position: relative;
  overflow: hidden;
}

.intake-progress-bar {
  height: 100%;
  background: var(--ink);
  transition: width 0.45s cubic-bezier(.2,.7,.2,1);
}

.intake-consultant {
  margin: 0 0 1.6rem;
  padding: 1rem;
  border: 1px solid rgba(11, 110, 79, 0.24);
  background: linear-gradient(180deg, rgba(11, 110, 79, 0.055), rgba(251, 248, 238, 0.58));
  display: grid;
  gap: 0.7rem;
}

.intake-consultant-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
}

.intake-consultant p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.intake-consultant-questions {
  display: grid;
  gap: 0.4rem;
}

.intake-consultant-questions span {
  position: relative;
  color: var(--ink-2);
  padding-inline-start: 1rem;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 100%;
  text-align: start;
  cursor: default;
}

.intake-consultant-questions span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.66em;
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid rgba(11, 110, 79, 0.48);
  background: rgba(251, 248, 238, 0.82);
  transform: translateY(-50%);
}

.intake-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.intake-step {
  display: none;
  animation: stepIn 0.4s cubic-bezier(.2,.7,.2,1) both;
}

.intake-step.is-active { display: block; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intake-step-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--terracotta);
  display: inline-block;
  margin-bottom: 0.7rem;
  font-weight: 600;
}

.intake-step h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 1.4rem;
  color: var(--ink);
}

.intake-options {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.intake-options-tight { grid-template-columns: repeat(3, 1fr); }

.intake-options legend.intake-sublegend {
  grid-column: 1 / -1;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.intake-options label {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  column-gap: 0.72rem;
  row-gap: 0.22rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.intake-options label:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.intake-options input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.45);
  border-radius: 0;
  margin: 0.17rem 0 0;
  position: relative;
  transition: border-color 0.2s;
  grid-column: 1;
  grid-row: 1;
}

.intake-options input[type="radio"]:checked {
  border-color: var(--terracotta);
}

.intake-options input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--terracotta);
}

.intake-options label:has(input:checked) {
  border-color: var(--terracotta);
  background: rgba(188, 67, 46, 0.06);
}

.intake-field {
  display: block;
  margin-bottom: 1.2rem;
}

.intake-field-large textarea {
  min-height: 150px;
}

/* KPI / success-metric step */
.intake-step-note {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 60ch;
}

.intake-kpis {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.intake-kpi-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.9rem;
  align-items: end;
}

.intake-kpi-row .intake-field {
  margin-bottom: 0.6rem;
}

.intake-kpi-opt {
  opacity: 0.8;
}

.intake-kpi-fee {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-inline-start: 2px solid var(--terracotta);
  background: rgba(193, 94, 60, 0.06);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .intake-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
  .intake-kpi-row .intake-field:first-child {
    grid-column: 1 / -1;
  }
}

.intake-field > span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.intake-adaptive {
  margin: 0.9rem 0 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(251, 248, 238, 0.66);
  display: grid;
  gap: 0.75rem;
}

.adaptive-head {
  display: grid;
  gap: 0.25rem;
}

.adaptive-head span,
.adaptive-label {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--terracotta);
  font-weight: 700;
  text-transform: uppercase;
}

.adaptive-head strong {
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--ink);
}

.adaptive-questions {
  margin: 0;
  padding-inline-start: 1.05rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.adaptive-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.adaptive-checks label {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.2rem 0.62rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--paper);
  min-height: 100%;
  cursor: pointer;
}

.adaptive-checks input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.45);
  margin: 0.15rem 0 0;
  position: relative;
  grid-column: 1;
  grid-row: 1;
}

.adaptive-checks input[type="checkbox"]:checked {
  border-color: var(--terracotta);
}

.adaptive-checks input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--terracotta);
}

.adaptive-checks label:has(input:checked) {
  border-color: var(--terracotta);
  background: rgba(188, 67, 46, 0.06);
}

.adaptive-checks span,
.intake-options label small {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.adaptive-checks span {
  grid-column: 2;
  min-width: 0;
}

.intake-options label {
  align-items: start;
}

.intake-options label > input {
  grid-column: 1;
  grid-row: 1;
}

.intake-options label > span {
  grid-column: 2;
  padding-inline-start: 0;
  min-width: 0;
}

.intake-options label > small {
  display: block;
  grid-column: 2;
  padding-inline-start: 0;
  color: var(--muted);
}

html[dir="rtl"] .intake-options label > span,
html[dir="rtl"] .intake-options label > small {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.intake-field input,
.intake-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.2s;
}

.intake-field input:focus,
.intake-field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--terracotta);
}

.intake-field.is-invalid input,
.intake-field.is-invalid textarea,
.intake-options.is-invalid {
  border-color: var(--terracotta);
  box-shadow: inset 0 0 0 1px var(--terracotta);
}

.intake-field.is-invalid > span,
.intake-options.is-invalid .intake-sublegend {
  color: var(--terracotta);
}

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.intake-controls {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

.intake-prep-status {
  margin: 0.75rem 0 0;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--green);
  text-transform: uppercase;
}

.intake-prep-status[hidden] {
  display: none;
}

.button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), 0.32);
  color: var(--ink);
  padding: 0.85rem 1.2rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, background 0.2s;
}

.button-ghost:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), 0.04); }
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.button-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.intake-aside-panel {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  background: var(--ink);
  color: var(--paper-3);
  padding: 1.8rem 1.6rem;
  border: 1px solid rgba(var(--ink-rgb), 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.intake-guide {
  padding: 1.1rem 1rem;
  border: 1px solid rgba(242, 238, 227, 0.18);
  background: rgba(251, 248, 238, 0.06);
  display: grid;
  gap: 0.65rem;
}

.intake-guide-step,
.intake-guide-output span {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: #f2c089;
  font-weight: 600;
  text-transform: uppercase;
}

.intake-guide h3 {
  font-size: 1.28rem;
}

.intake-guide p {
  color: rgba(251, 248, 238, 0.82);
}

.intake-guide-output {
  margin-top: 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(242, 238, 227, 0.14);
  display: grid;
  gap: 0.35rem;
}

.intake-guide-output strong {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--paper);
}

.intake-picture {
  padding: 1.1rem 1rem;
  border: 1px solid rgba(242, 238, 227, 0.18);
  background: rgba(11, 110, 79, 0.14);
  display: grid;
  gap: 0.7rem;
}

.intake-picture[hidden] { display: none; }

.intake-picture-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: #f2c089;
  font-weight: 700;
  text-transform: uppercase;
}

.intake-picture-list {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.intake-picture-list dt {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 238, 0.62);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.intake-picture-list dd {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--paper);
}

.intake-aside-panel .intake-picture-empty {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(251, 248, 238, 0.6);
}

.intake-picture-empty[hidden] { display: none; }

.intake-aside-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #f2c089;
  font-weight: 600;
}

.intake-aside-panel h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: var(--paper);
  line-height: 1.2;
}

.intake-aside-panel p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(251, 248, 238, 0.78);
}

.intake-aside-panel .intake-guide h3 {
  font-size: 1.28rem;
}

.intake-aside-panel .intake-guide p {
  color: rgba(251, 248, 238, 0.82);
}

.intake-direct {
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 238, 227, 0.18);
  display: grid;
  gap: 0.45rem;
  font-size: 0.85rem;
}

.intake-direct span:first-child {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(251, 248, 238, 0.55);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.intake-direct a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(242, 192, 137, 0.4);
  text-underline-offset: 3px;
}

/* === Generated brief === */
.intake-brief {
  margin-top: 3rem;
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.32);
  padding: 2.4rem 2.4rem 2rem;
  box-shadow: 0 30px 80px rgba(17, 23, 17, 0.18);
  position: relative;
}

.intake-brief::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 6px;
  background:
    linear-gradient(90deg, var(--green-2) 0% 33.33%, var(--terracotta) 33.33% 66.66%, var(--gold) 66.66% 100%);
}

.intake-brief-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
}

.intake-brief-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
}

.intake-brief-title {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.85rem;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: var(--ink);
}

.intake-brief-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.intake-brief-stamp {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: end;
}

html[dir="rtl"] .intake-brief-stamp { align-items: flex-start; text-align: start; }

.intake-brief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1.5rem;
  margin: 0 0 1.6rem;
}

.intake-brief-grid .full { grid-column: 1 / -1; }

.intake-brief-grid dt {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.intake-brief-grid dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

.intake-brief-platforms {
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.intake-brief-platforms h4 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 1rem;
}

.intake-brief-section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.intake-brief-section-head h4 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}

.intake-brief-section-head p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.intake-brief-section-head .brief-ai-status {
  flex-basis: 100%;
  max-width: none;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--green);
  text-transform: uppercase;
}

.intake-brief-trinity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.intake-brief-card {
  padding: 1.1rem 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper);
  position: relative;
}

.intake-brief-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 100%;
  background: var(--accent, var(--ink));
}

.brief-marsad  { --accent: var(--green-2); }
.brief-maydan  { --accent: var(--terracotta); }
.brief-mashhad { --accent: var(--gold); }

.intake-brief-card-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.intake-brief-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.intake-brief-success {
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.brief-success-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.brief-success-grid article {
  padding: 1rem;
  border: 1px solid rgba(11, 110, 79, 0.22);
  background: linear-gradient(180deg, rgba(11, 110, 79, 0.06), rgba(251, 248, 238, 0.72));
}

.brief-success-grid article.full {
  grid-column: 1 / -1;
}

.brief-success-grid span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-success-grid p,
.brief-success-grid ul {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.58;
}

.brief-success-grid p,
.brief-success-grid li,
.brief-insight-grid p,
.brief-insight-grid li,
.brief-scope-grid p,
.brief-scope-grid li,
.intake-brief-card p {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.brief-success-grid ul {
  padding-inline-start: 1.15rem;
}

.intake-brief-success-table,
.intake-brief-plan,
.intake-brief-synthesis {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.brief-success-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.brief-success-table th,
.brief-success-table td {
  text-align: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.brief-success-table thead th {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(11, 110, 79, 0.06);
}

.brief-success-fee {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(11, 110, 79, 0.22);
  background: linear-gradient(180deg, rgba(11, 110, 79, 0.06), rgba(251, 248, 238, 0.72));
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.58;
}

.brief-success-fee span:first-child {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.brief-plan-grid article,
.brief-engagement article {
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: rgba(251, 248, 238, 0.68);
}

.brief-plan-grid span,
.brief-engagement span,
.brief-synthesis-grid span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-plan-grid ul,
.brief-synthesis-grid p,
.brief-synthesis-grid ul,
.brief-engagement p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.brief-plan-grid ul,
.brief-synthesis-refs {
  padding-inline-start: 1.15rem;
}

.brief-plan-grid li,
.brief-synthesis-grid p,
.brief-synthesis-refs li {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.brief-engagement {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.brief-synthesis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.brief-synthesis-grid article {
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper);
}

.brief-synthesis-refs a {
  color: var(--green);
  text-decoration: underline;
}

.intake-brief-insights {
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.brief-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.brief-insight-grid article {
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: rgba(251, 248, 238, 0.68);
}

.brief-insight-grid article.full {
  grid-column: 1 / -1;
}

.brief-insight-grid span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-insight-grid p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--ink-2);
}

.brief-insight-grid ul {
  margin: 0;
  padding-inline-start: 1.15rem;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.intake-brief-strategy {
  margin: 1.4rem 0;
  padding: 1.3rem;
  border: 1px solid rgba(11, 110, 79, 0.3);
  background: linear-gradient(180deg, rgba(11, 110, 79, 0.07), rgba(251, 248, 238, 0.4));
}

.brief-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.brief-strategy-grid article {
  padding: 1rem;
  border: 1px solid rgba(11, 110, 79, 0.2);
  background: rgba(251, 248, 238, 0.7);
}

.brief-strategy-grid article.full {
  grid-column: 1 / -1;
}

.brief-strategy-grid span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-strategy-grid p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--ink-2);
}

.intake-brief-scope {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.brief-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.brief-scope-grid article {
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: var(--paper);
}

.brief-scope-grid article.full {
  grid-column: 1 / -1;
}

.brief-scope-grid span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--terracotta);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.brief-scope-grid p,
.brief-scope-grid ul {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.brief-scope-grid ul {
  padding-inline-start: 1.15rem;
}

.intake-brief-diagrams {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
}

.brief-diagram-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 0.9rem;
}

.brief-diagram {
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: linear-gradient(180deg, rgba(251, 248, 238, 0.72), rgba(242, 238, 227, 0.44));
}

.brief-diagram figcaption {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.brief-flow,
.brief-cadence {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brief-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  counter-reset: flow;
}

.brief-flow::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  inset-inline: 1rem;
  height: 1px;
  background: linear-gradient(90deg, var(--green-2), var(--terracotta), var(--gold));
  opacity: 0.52;
}

.brief-flow li,
.brief-cadence li {
  position: relative;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: var(--paper);
}

.brief-flow li {
  min-height: 96px;
  padding: 1.05rem 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  counter-increment: flow;
}

.brief-flow li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: -0.15rem;
  inset-inline-start: 0.62rem;
  padding: 0.12rem 0.28rem;
  background: var(--paper-3);
  color: var(--green);
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
}

.brief-flow span,
.brief-cadence span {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.brief-flow strong,
.brief-cadence strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.25;
  word-break: break-word;
}

.brief-cadence {
  display: grid;
  gap: 0.48rem;
  counter-reset: cadence;
}

.brief-cadence li {
  min-height: 52px;
  padding: 0.62rem 0.72rem;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.5rem 0.65rem;
  align-items: center;
  counter-increment: cadence;
}

.brief-cadence li::before {
  content: counter(cadence, decimal-leading-zero);
  grid-row: 1 / span 2;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  color: var(--terracotta);
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.58rem;
}

.brief-cadence span,
.brief-cadence strong {
  grid-column: 2;
}

.intake-brief-foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.intake-brief-foot strong {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.intake-brief-actions {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.22);
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

.intake-brief-primary {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.intake-brief-primary:hover {
  background: var(--green-2);
  border-color: var(--green-2);
}

.intake-brief-note {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 760px;
}

@media (max-width: 1100px) {
  .intake-stage { grid-template-columns: 1fr; }
  .intake-aside-panel { position: static; }
  .intake-options { grid-template-columns: 1fr 1fr; }
  .intake-options-tight { grid-template-columns: 1fr 1fr; }
  .intake-brief-grid { grid-template-columns: 1fr 1fr; }
  .intake-brief-trinity { grid-template-columns: 1fr; }
  .brief-success-grid { grid-template-columns: 1fr; }
  .brief-insight-grid { grid-template-columns: 1fr; }
  .brief-strategy-grid { grid-template-columns: 1fr; }
  .brief-scope-grid { grid-template-columns: 1fr; }
  .brief-diagram-grid { grid-template-columns: 1fr; }
  .brief-plan-grid { grid-template-columns: 1fr; }
  .brief-engagement { grid-template-columns: 1fr; }
  .intake-brief-foot { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .intake-form {
    padding: 1.25rem 1rem;
  }

  .intake-progress {
    gap: 0.7rem;
  }

  .intake-progress-label {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .intake-step h3 {
    font-size: 1.55rem;
  }

  .intake-options,
  .intake-options-tight { grid-template-columns: 1fr; }
  .adaptive-checks { grid-template-columns: 1fr; }
  .intake-grid { grid-template-columns: 1fr; }
  .intake-controls .button,
  .intake-controls .button-ghost {
    width: 100%;
  }
  .intake-brief-grid { grid-template-columns: 1fr; }
  .intake-brief { padding: 1.6rem 1.2rem; }
  .intake-brief-actions .button,
  .intake-brief-actions .button-ghost {
    width: 100%;
  }
  .brief-flow { grid-template-columns: 1fr; }
  .brief-flow::before { display: none; }
  .brief-flow li { min-height: auto; }
  .brief-cadence li { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* Print stylesheet for the brief */
@media print {
  body * { visibility: hidden; }
  .intake-brief, .intake-brief * { visibility: visible; }
  .intake-brief {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 1cm 1.4cm;
    box-shadow: none;
    border: 0;
    font-size: 11pt;
  }
  [data-no-print] { display: none !important; }
}

/* === Intro aside: own the Palantir comparison === */
.intro-aside {
  margin-top: 3rem;
  padding: 1.6rem 1.8rem;
  border-inline-start: 3px solid var(--terracotta);
  background: linear-gradient(180deg, rgba(188, 67, 46, 0.06), rgba(188, 67, 46, 0.02));
  max-width: 920px;
}

html[dir="rtl"] .intro-aside {
  border-inline-start: 0;
  border-inline-end: 3px solid var(--terracotta);
}

.intro-aside-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 600;
  display: block;
  margin-bottom: 0.8rem;
}

.intro-aside p {
  margin: 0;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.intro-aside em {
  font-style: italic;
  color: var(--green);
}

/* === KSA Ontology. Interactive object graph === */
.ontology {
  background:
    radial-gradient(circle at 18% 14%, rgba(15, 139, 98, 0.14), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(154, 123, 47, 0.10), transparent 42%),
    var(--ink);
  color: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.ontology::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 41px, rgba(242, 238, 227, 0.04) 41px 42px),
    repeating-linear-gradient(90deg, transparent 0 41px, rgba(242, 238, 227, 0.04) 41px 42px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 92%);
}

.ontology > * { position: relative; z-index: 1; }

.ontology h2 { color: var(--paper); }

.ontology .section-head p {
  color: rgba(251, 248, 238, 0.72);
}

.ontology-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.ontology-canvas-wrap {
  position: relative;
  background: rgba(8, 12, 9, 0.55);
  border: 1px solid rgba(242, 238, 227, 0.16);
  padding: 1rem 1rem 0.6rem;
  min-height: 540px;
}

.ontology-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(251, 248, 238, 0.55);
}

.ontology-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

.ontology-svg .onto-edge {
  stroke: rgba(242, 238, 227, 0.22);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.25s, stroke-width 0.25s, opacity 0.25s;
}

.ontology-svg .onto-edge-label {
  fill: rgba(251, 248, 238, 0.45);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: fill 0.25s, opacity 0.25s;
}

.ontology-svg.is-selecting .onto-edge { opacity: 0.18; }
.ontology-svg.is-selecting .onto-edge-label { opacity: 0.18; }
.ontology-svg .onto-edge.is-active {
  stroke: #f2c089;
  stroke-width: 1.6;
  opacity: 1;
}
.ontology-svg .onto-edge.is-active + .onto-edge-label,
.ontology-svg .onto-edge-label.is-active {
  fill: #f2c089;
  opacity: 1;
}

.ontology-svg .onto-node {
  cursor: pointer;
  transition: transform 0.25s, opacity 0.25s;
}

.ontology-svg .onto-node-bg {
  fill: rgba(8, 12, 9, 0.85);
  stroke: rgba(242, 238, 227, 0.45);
  stroke-width: 1;
  transition: stroke 0.25s, stroke-width 0.25s, fill 0.25s;
}

.ontology-svg .onto-node-label {
  fill: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.ontology-svg .onto-node-tag {
  fill: rgba(251, 248, 238, 0.5);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  pointer-events: none;
}

.ontology-svg .onto-node-glyph {
  font-family: "Noto Naskh Arabic", "Noto Kufi Arabic", serif;
  fill: rgba(251, 248, 238, 0.7);
  font-size: 11px;
  pointer-events: none;
}

.ontology-svg.is-selecting .onto-node { opacity: 0.28; }
.ontology-svg .onto-node.is-active,
.ontology-svg .onto-node.is-neighbour { opacity: 1; }
.ontology-svg .onto-node.is-active .onto-node-bg {
  stroke: #f2c089;
  stroke-width: 2.2;
  fill: rgba(188, 67, 46, 0.18);
}
.ontology-svg .onto-node.is-neighbour .onto-node-bg {
  stroke: rgba(242, 192, 137, 0.7);
}

/* node type accent stripe */
.ontology-svg .onto-node-stripe { transition: opacity 0.25s; }
.ontology-svg .onto-type-process .onto-node-stripe { fill: var(--green-2); }
.ontology-svg .onto-type-entity  .onto-node-stripe { fill: var(--paper); opacity: 0.65; }
.ontology-svg .onto-type-person  .onto-node-stripe { fill: #f2c089; }
.ontology-svg .onto-type-event   .onto-node-stripe { fill: var(--terracotta); }
.ontology-svg .onto-type-device  .onto-node-stripe { fill: #7fb5b5; }

.ontology-svg .onto-node.is-primary .onto-node-bg {
  stroke: var(--green-2);
  stroke-width: 1.6;
}

.ontology-svg .onto-pulse {
  fill: none;
  stroke: var(--green-2);
  stroke-width: 1;
  opacity: 0;
  animation: ontoPulse 3.6s ease-out infinite;
  pointer-events: none;
}

@keyframes ontoPulse {
  0%   { r: 22; opacity: 0; }
  10%  { opacity: 0.55; }
  100% { r: 80; opacity: 0; }
}

.ontology-panel {
  background: rgba(8, 12, 9, 0.65);
  border: 1px solid rgba(242, 238, 227, 0.16);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 540px;
}

.ontology-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: rgba(242, 192, 137, 0.85);
  display: block;
}

.ontology-panel h3 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1.7rem;
  line-height: 1.15;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
}

.ontology-subtitle {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: rgba(251, 248, 238, 0.6);
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid rgba(242, 238, 227, 0.14);
  padding-bottom: 0.85rem;
  line-height: 1.5;
}

.ontology-block {
  border-left: 2px solid var(--block-color, var(--green-2));
  padding: 0.1rem 0 0.1rem 0.85rem;
}

html[dir="rtl"] .ontology-block {
  border-left: 0;
  border-right: 2px solid var(--block-color, var(--green-2));
  padding: 0.1rem 0.85rem 0.1rem 0;
}

.ontology-block:nth-of-type(1) { --block-color: var(--green-2); }
.ontology-block:nth-of-type(2) { --block-color: var(--terracotta); }
.ontology-block:nth-of-type(3) { --block-color: var(--gold); }

.ontology-block-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--block-color);
  font-weight: 600;
}

.ontology-block h4 {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-size: 1rem;
  font-weight: 500;
  margin: 0.15rem 0 0.4rem;
  color: var(--paper);
}

.ontology-block p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(251, 248, 238, 0.78);
}

.ontology-legend {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(251, 248, 238, 0.55);
}

.legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend-spacer { flex: 1; }
.legend-foot { color: rgba(251, 248, 238, 0.4); }

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 1px;
}
.legend-process { background: var(--green-2); }
.legend-entity  { background: var(--paper); opacity: 0.65; }
.legend-person  { background: #f2c089; }
.legend-event   { background: var(--terracotta); }
.legend-device  { background: #7fb5b5; }

@media (max-width: 1100px) {
  .ontology-stage { grid-template-columns: 1fr; }
  .ontology-canvas-wrap { min-height: 400px; }
  .ontology-panel { min-height: auto; }
}

/* === Product trinity: Marsad / Maydan / Mashhad === */
.trinity {
  background:
    radial-gradient(circle at 12% 18%, rgba(15, 139, 98, 0.06), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(154, 123, 47, 0.07), transparent 40%),
    var(--paper);
  position: relative;
}

.trinity::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(var(--ink-rgb), 0.035) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(var(--ink-rgb), 0.035) 39px 40px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 88%);
  z-index: 0;
}

.trinity > * { position: relative; z-index: 1; }

.trinity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.trinity-card {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  padding: 2rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
  box-shadow: 0 1px 0 rgba(17, 23, 17, 0.08);
}

.trinity-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--accent, var(--ink));
  z-index: 2;
}

.trinity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(17, 23, 17, 0.18);
}

.trinity-marsad   { --accent: var(--green-2); }
.trinity-maydan   { --accent: var(--terracotta); }
.trinity-mashhad  { --accent: var(--gold); }

.trinity-glyph {
  position: absolute;
  inset-inline-end: -0.6rem;
  bottom: -2.5rem;
  font-family: "Noto Naskh Arabic", "Noto Kufi Arabic", serif;
  font-size: 17rem;
  font-weight: 500;
  line-height: 0.85;
  color: var(--accent);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.02em;
}

.trinity-role {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 0.32rem 0.6rem;
  margin-bottom: 1.25rem;
  align-self: flex-start;
}

.trinity-name {
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.trinity-name-ar {
  font-family: "Noto Naskh Arabic", "Noto Kufi Arabic", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  margin-inline-start: 0.5rem;
  vertical-align: middle;
}

.trinity-translit {
  font-family: "Noto Naskh Arabic", "Noto Kufi Arabic", serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}

.trinity-body {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 1.3rem;
  position: relative;
  z-index: 1;
}

.trinity-list {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  z-index: 1;
}

.trinity-list li {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-2);
  padding-inline-start: 1.1rem;
  position: relative;
}

.trinity-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

.trinity-foot {
  margin-top: 2.5rem;
  font-family: Fraunces, "Noto Naskh Arabic", serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 760px;
}

@media (max-width: 1100px) {
  .trinity-grid { grid-template-columns: 1fr; }
  .trinity-card { min-height: auto; }
  .trinity-glyph { font-size: 14rem; bottom: -2rem; }
}

@media (max-width: 760px) {
  .trinity-name { font-size: 2.6rem; }
  .trinity-glyph { font-size: 11rem; opacity: 0.08; }
}

@media (max-width: 760px) {
  .sov-grid { grid-template-columns: 1fr; }
  .sov-card { border-inline-end: 0 !important; border-bottom: 1px solid rgba(242, 238, 227, 0.12) !important; }
  .sov-card:last-child { border-bottom: 0 !important; }

  .hero-hud {
    flex-direction: column;
    margin-top: 1.6rem;
  }
  .hero-hud .hud-cell {
    flex: 0 0 auto;
    width: 100%;
    border-inline-end: 0;
    border-bottom: 1px solid rgba(242, 238, 227, 0.14);
    min-height: 0;
  }
  .hero-hud .hud-cell:last-child { border-bottom: 0; }
  .hero-hud .hud-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
  /* Stacked: the window has full width, so wrap rather than scroll. */
  .hero-hud .hud-window-value { overflow: visible; white-space: normal; }
  .hero-hud .hud-window-text { white-space: normal; animation: none !important; transform: none !important; }

  .map-frame { padding: 1rem 0.7rem; }
  .map-meta { font-size: 0.6rem; letter-spacing: 0.1em; }
  .map-meta-tl { top: 0.7rem; left: 0.8rem; }
  .map-meta-tr { top: 0.5rem; right: 0.6rem; }
  .map-meta-bl { bottom: 0.6rem; left: 0.8rem; }
  .map-cities .map-city-name { font-size: 14px; }
  .map-cities .map-city-coord { font-size: 11px; }
  .map-city-primary .map-city-name { font-size: 16px; }
}

/* Team cards: stack to a single column on very narrow screens. */
@media (max-width: 480px) {
  .team-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}