/* ==========================================================================
   GLOBAL TOKENS, RESET & SHARED UTILITIES
   Applies to all QDE pages. Page-specific overrides follow in each section.
   ========================================================================== */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-raised: #ffffff;
  --bg-inverse: #1a2540;
  --ink: #1a2540;
  --ink-70: rgba(26, 37, 64, 0.72);
  --ink-55: rgba(26, 37, 64, 0.58);
  --ink-40: rgba(26, 37, 64, 0.42);
  --ink-25: rgba(26, 37, 64, 0.25);
  --ink-10: rgba(26, 37, 64, 0.12);
  --ink-05: rgba(26, 37, 64, 0.06);
  --accent: #2c3e6a;
  --accent-soft: #5b6f99;
  --surface: rgba(26, 37, 64, 0.03);
  --invert-bg: #f4f3ef;
  --invert-ink: #ffffff;
  --invert-ink-70: rgba(255, 255, 255, 0.72);
  --invert-ink-40: rgba(255, 255, 255, 0.42);
}

/* ── Base reset ──────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
  --qde-zoom: 1;
}

body {
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: clip so position:sticky descendants still work. */
  overflow-x: hidden;
  overflow-x: clip;
  transition: background-color 0.45s ease, color 0.45s ease;
}

/* ── Shared typography utility ───────────────────────────────────────────── */
.mono-label {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* ── Layout container ────────────────────────────────────────────────────── */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .wrap {
    padding: 0 48px;
  }
}

@media (min-width: 1200px) {
  .wrap {
    padding: 0 64px;
  }
}

/* ── Scroll reveal animations ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1),
    transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 {
  transition-delay: 0.08s;
}

.reveal.delay-2 {
  transition-delay: 0.16s;
}

.reveal.delay-3 {
  transition-delay: 0.24s;
}

.reveal.delay-4 {
  transition-delay: 0.32s;
}

/* ── Split-text animation ────────────────────────────────────────────────── */
.split-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.2, 0, 0, 1),
    opacity 1s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, opacity;
}

.split.in .split-word {
  transform: translateY(0);
  opacity: 1;
}

/* ── Section layout utilities ────────────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 72px;
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
  }
}

.section-label {
  margin-bottom: 16px;
}

.section-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  padding-bottom: 0.05em;
  color: var(--ink);
}

.section-title em {
  font-style: normal;
  color: #a8b3cc;
  font-weight: 700;
  white-space: nowrap;
}

.section-body,
.section-body p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 56ch;
  text-align: left;
}

/* ============ HERO (forced dark, text on left, video on right) ============ */

/* === GLOBAL_PHASE3 — shared components extracted phase 3 === */

.section {
  padding: 40px 0;
  position: relative;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 24px;
  padding: 72px 0;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.stat-value {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.stat-value em {
  font-style: normal;
  color: #a8b3cc;
  font-weight: 500;
}

.stat-label {
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.45;
  max-width: 26ch;
}

.sticky-story {
  position: relative;
  background: var(--bg-inverse);
  color: #fff;
}

.sticky-story-inner {
  display: grid;
  grid-template-columns: 1fr;
}

.sticky-slide {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 0;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.feature-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 32px;
  max-width: 48ch;
}

.tier-cta {
  margin-top: auto;
  padding-top: 16px;
}

.news-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.news-card-meta {
  font-size: 12px;
  color: var(--ink-55);
  margin-top: 4px;
}

.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--ink-10);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.card {
  background: var(--bg);
  padding: 48px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: background-color 0.4s ease;
}

.card-num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
}

.card-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.card-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-10);
}

.benefit {
  background: var(--bg);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.3s ease;
}

.benefit-ico {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 16px;
}

.apply {
  background: var(--bg-inverse);
  color: #fff;
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
}

.apply-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  max-width: 16ch;
  text-wrap: balance;
  padding-bottom: 0.05em;
}

.apply-lede {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin: 0 0 48px;
}

.tier-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-10);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.doc-icon {
  width: 44px;
  height: 56px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  border-radius: 4px 8px 4px 4px;
  flex-shrink: 0;
  overflow: hidden;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.affiliate {
  background: var(--bg);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.3s ease;
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 28px 0;
}

.marquee-track {
  display: flex;
  gap: 72px;
  animation: marquee 40s linear infinite;
  width: max-content;
}

.kicker-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 14px;
}

.vault-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

/* === END GLOBAL_PHASE3 === */

/* === GLOBAL_PHASE3B — base+override patterns === */

.sticky-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #05080f;
}

@media (min-width: 900px) {
  .sticky-media {
    position: sticky;
    top: 0;
    height: calc(100vh / var(--qde-zoom, 1));
    aspect-ratio: auto;
  }
}

.sticky-copy {
  padding: 120px 32px 60px;
}

@media (min-width: 900px) {
  .sticky-copy {
    padding: 220px 56px 80px;
  }
}

.sticky-counter {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.sticky-counter {
  top: 100px;
  right: 32px;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.feature-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}

.feature-title {
  line-height: 1.12;
  padding-bottom: 0.04em;
}

.benefit-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}

.benefit-title {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.benefit-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

.benefit-body {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  line-height: 1.6;
}

.news-card-media {
  aspect-ratio: 16 / 10;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.news-card-media {
  flex-shrink: 0;
}

.news-card-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.news-card-title {
  color: var(--ink);
}

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-10);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.tiers {
  gap: 16px;
  background: none;
  border-top: none;
  border-bottom: none;
}

.tier {
  background: var(--bg);
  padding: 48px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background-color 0.4s ease;
}

.tier {
  position: relative;
  padding: 40px 32px 36px;
  background: rgba(15, 21, 34, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.tier-name {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.tier-name {
  color: #fff;
}

.tier-price {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  color: var(--ink-55);
  margin: 0;
}

.tier-price {
  color: rgba(255, 255, 255, 0.55);
}

.tier-list {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--ink-10);
}

.tier-list {
  border-top-color: rgba(255, 255, 255, 0.10);
}

.doc {
  background: var(--bg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
  position: relative;
}

.doc {
  background: var(--bg-raised);
  padding: 0;
  gap: 0;
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

.doc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}

.doc-eyebrow {
  font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-55);
}

.doc-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.doc-title {
  font-size: 16px;
  line-height: 1.32;
}

.doc-meta {
  font-size: 12px;
  color: var(--ink-55);
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-meta {
  font-size: inherit;
  color: inherit;
  margin-top: 0;
  padding: 18px 18px 20px;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  text-align: center;
}

.affiliate {
  background: var(--bg);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.3s ease;
}

.affiliate {
  flex: 0 0 280px;
  border: 1px solid var(--ink-10);
  padding: 28px 24px 24px;
}

/* === END GLOBAL_PHASE3B === */

.hero {
  position: relative;
  padding: 200px 0 120px;
  background: #0a0f1a;
  color: #e6ecf5;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(10, 15, 26, 0.5) 60%,
      #0a0f1a 100%);
  z-index: 3;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero {
    padding: 220px 0 120px;
  }
}

@media (min-width: 1200px) {
  .hero {
    padding: 240px 0 120px;
  }
}

.hero>.wrap {
  width: 100%;
}

.hero-glow {
  position: absolute;
  top: 30%;
  right: 20%;
  width: 60vw;
  max-width: 800px;
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
      rgba(180, 200, 240, 0.08) 0%,
      rgba(180, 200, 240, 0.03) 40%,
      transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 64px;
  }
}

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

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: rgba(230, 236, 245, 0.62) !important;
}

.hero-eyebrow .mono-label {
  color: rgba(230, 236, 245, 0.62) !important;
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7a8aae;
  box-shadow: 0 0 12px rgba(122, 138, 174, 0.6);
  animation: dotPulse 2.4s ease-in-out infinite;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}

.hero-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: #fff;
}

.hero-line {
  display: block;
}

.hero-title em {
  font-style: normal;
  font-weight: 500;
  color: #a8b3cc;
}

@media (min-width: 900px) {
  .hero-title {
    white-space: nowrap;
  }
}

.hero-section--home .hero-lede {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 40px;
}
.hero-lede {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 40px;
}
.hero-cta,
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-cta .btn,
.hero-ctas .btn {
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.hero-cta .btn-ghost,
.hero-ctas .btn-ghost {
  color: #e6ecf5 !important;
  border: 1px solid rgba(230, 236, 245, 0.32);
  background: rgba(230, 236, 245, 0.04);
}

.hero-cta .btn-ghost:hover,
.hero-ctas .btn-ghost:hover {
  border-color: rgba(230, 236, 245, 0.7);
  background: rgba(230, 236, 245, 0.08);
  transform: translateY(-1px);
}

.hero-cta .btn-primary,
.hero-section--home .hero-ctas .btn-primary {
  background: #ffffff;
  color: #0a0f1a !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

.hero-cta .btn-primary:hover,
.hero-section--home .hero-ctas .btn-primary:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}

/* ============ SCROLL ANIMATIONS ============ */
.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
  padding-right: 0.12em;
  margin-right: -0.12em;
  line-height: inherit;
}

/* ============ SECTIONS ============ */

@media (min-width: 768px) {
  .section {
    padding: 80px 0;
  }
}

@media (min-width: 1200px) {
  .section {
    padding: 100px 0;
  }
}

/* ============ STATS ============ */

@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============ ECOSYSTEM ============ */
/* Three pillars of the exchange, presented as a vertical stack
         of full-width editorial cards. Each card is a quiet rectangle
         on the paper bg with a hairline border. Hover lifts the card
         and brightens its border. Dwelling on a card for >=1s commits
         it as the active state: a thin gold rule appears on the left
         edge and the eyebrow takes the gold accent. Click and focus
         commit immediately for keyboard / touch parity.

         Layout inside each card: number column on the left (small
         monoline label and the numeral 01/02/03 in display weight),
         then the title, body, and a small inline link. Generous
         whitespace between cards (32px gap) so they read as discrete
         objects, not a list. */

.ecosystem-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.eco-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

@media (min-width: 760px) {

  .eco-stack {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

}

@media (min-width: 1100px) {

  .eco-stack {
    gap: 28px;
  }

}

.eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px 32px 32px;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.5s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.3s ease,
    box-shadow 0.5s cubic-bezier(0.2, 0, 0, 1),
    background 0.3s ease;
}

@media (min-width: 1100px) {

  .eco-card {
    padding: 44px 40px 36px;
  }

}

/* Hover effect mirrors the membership-tier hover: subtle bg tint
         shift, brighter border, and a small 2px lift. */
.eco-card:hover {
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--ink) 8%);
  border-color: var(--ink-25);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -16px rgba(26, 37, 64, 0.18);
}


/* Top-of-card row: eyebrow sits at the top-left in normal flow.
         The numeral floats to the top-right corner of the card using
         absolute positioning so it reads as a kicker mark, not as
         part of the headline group. */
.eco-card-num {
  display: flex;
  align-items: baseline;
}

.eco-card-eyebrow {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  transition: color 0.3s ease;
}

.eco-card:hover .eco-card-eyebrow {
  color: #7a8aae;
}

.eco-card-numeral {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-25);
  transition: color 0.4s cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.eco-card:hover .eco-card-numeral {
  color: var(--ink);
}

@media (min-width: 1100px) {

  .eco-card-numeral {
    top: 36px;
    right: 40px;
  }

}

/* Body column: title + supporting copy. */
.eco-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.eco-card-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 1.7vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  min-height: 2.36em;
  /* reserve two lines so cards align */
}

.eco-card-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-70);
  margin: 0;
}

/* Action: bottom-aligned link inside the card. */
.eco-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-55);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
  margin-top: auto;
  padding-top: 4px;
}

.eco-card:hover .eco-card-action {
  color: var(--ink);
}

.eco-card-action .arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.eco-card:hover .eco-card-action .arrow {
  transform: translate(3px, -3px);
}

/* Mobile: stack at full width; allow title to flex naturally. */
@media (max-width: 759px) {
  .eco-card {
    padding: 32px 24px;
    gap: 18px;
  }

  .eco-card-numeral {
    font-size: 32px;
    top: 24px;
    right: 20px;
  }

  .eco-card-title {
    min-height: 0;
  }
}

/* ============ BENEFITS ============ */
/* 3×2 card grid mirroring the vault-stored "what we store"
         pattern: glass pane with icon + title + short body. No
         numeric watermark — the icon carries the visual weight. */
.benefits-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.benefits-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 80% 10%,
      rgba(122, 138, 174, 0.08) 0%,
      rgba(122, 138, 174, 0) 55%),
    linear-gradient(180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 92%, var(--accent) 8%) 100%);
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}

@media (min-width: 700px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1080px) {
  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.benefit-card {
  position: relative;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 12px;
  cursor: default;
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 14px 44px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

html[data-theme="light"] .benefit-card {
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.25), transparent 70%),
    rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(26, 37, 64, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    0 14px 44px rgba(26, 37, 64, 0.14);
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 22px 60px rgba(0, 0, 0, 0.32);
}

html[data-theme="light"] .benefit-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(26, 37, 64, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(255, 255, 255, 0.6),
    0 22px 60px rgba(26, 37, 64, 0.2);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  color: #a8b3cc;
}

.benefit-icon svg,
.benefit-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

[data-theme="light"] .benefit-icon {
  color: #5b6f99;
}

/* ============ STICKY STORY ============ */

/* In dark theme, the page bg is already dark — flipping the
         story to bg-inverse (off-white) would create a jarring white
         band. Override to a slightly raised navy panel so the
         section reads as a distinct "interlude" without going light. */

@media (min-width: 900px) {

  .sticky-story-inner {
    grid-template-columns: 1fr 1fr;
  }

}

@media (min-width: 900px) {}

.sticky-media .frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1);
}

.sticky-media .frame.active {
  opacity: 1;
}

.sticky-media .ph {
  width: 100%;
  height: 100%;
}

.sticky-media .frame img.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sticky-media .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
}

@media (min-width: 900px) {}

.sticky-slide .num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  /* Warm gold reads on the dark navy story panel in both themes. */
  color: #a8b3cc;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.story-section .sticky-slide h3 {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
}

.sticky-slide p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0;
}

/* Slide counter — pinned inside the sticky-media region so it
         remains visible while scrolling through all four chapters.
         Top offset accounts for the nav so the counter doesn't sit
         behind the navbar when the user scrolls into the section.
         Higher contrast + larger size + gold active state so it's
         readable against any frame's content. */

.sticky-counter span {
  width: 28px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  transition: background 0.4s ease, width 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s ease;
}

.sticky-counter span.active {
  background: #a8b3cc;
  width: 36px;
  box-shadow: 0 0 12px rgba(122, 138, 174, 0.45);
}

/* ============ VAULT SECTION ============ */
/* Standalone, editorial vault feature. Leans on the gold accent
         and a warm gradient background to give the section presence
         distinct from the surrounding light page bg. The layout is a
         large hero media panel paired with a stacked typographic
         block: oversized title, eyebrow, supporting paragraph, a
         row of three spec callouts, and a CTA. */

/* Wrapper that paints a single continuous gradient/atmosphere
         across BOTH the .vault-section and the #vault-stored sections
         that sit inside it. This guarantees no seam between them
         since they share one painted background. */
.vault-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.vault-panel::before {
  /* Section-level atmosphere: soft slate-blue radials over a
           subtle vertical gradient. Shared across the whole panel. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 30% at 80% 12%,
      rgba(122, 138, 174, 0.18) 0%,
      transparent 60%),
    radial-gradient(50% 25% at 15% 88%,
      rgba(64, 50, 30, 0.10) 0%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 92%, #a8b3cc 8%) 0%,
      color-mix(in srgb, var(--bg) 80%, #a8b3cc 20%) 50%,
      color-mix(in srgb, var(--bg) 92%, #a8b3cc 8%) 100%);
}

/* Large oversized kite watermark behind the layout — same shape
         language as the rest of the site. Sits behind everything as
         a luxe textural element. Anchored to the top of the panel. */
.vault-panel::after {
  content: "";
  position: absolute;
  right: -260px;
  top: -180px;
  width: 880px;
  height: 1000px;
  z-index: -1;
  background: linear-gradient(140deg,
      rgba(122, 138, 174, 0.20) 0%,
      rgba(122, 138, 174, 0.05) 40%,
      transparent 65%);
  clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}

.vault-section {
  position: relative;
  padding: 100px 0 100px;
  isolation: isolate;
  overflow: hidden;
}

/* Background atmosphere — applied directly to the section because the
         .vault-panel wrapper that was designed for it never appears in the
         Drupal render chain (paragraphs render without that wrapper class).
         The original .vault-panel::before / ::after rules above are kept for
         reference but have no effect (selector never matches in production). */
.vault-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 30% at 80% 12%,
      rgba(122, 138, 174, 0.18) 0%,
      transparent 60%),
    radial-gradient(50% 25% at 15% 88%,
      rgba(64, 50, 30, 0.10) 0%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 92%, #a8b3cc 8%) 0%,
      color-mix(in srgb, var(--bg) 80%, #a8b3cc 20%) 50%,
      color-mix(in srgb, var(--bg) 92%, #a8b3cc 8%) 100%);
  pointer-events: none;
}

/* Oversized kite watermark behind the layout — mirrors .vault-panel::after */
.vault-section::after {
  content: "";
  position: absolute;
  right: -260px;
  top: -180px;
  width: 880px;
  height: 1000px;
  z-index: -1;
  background: linear-gradient(140deg,
      rgba(122, 138, 174, 0.20) 0%,
      rgba(122, 138, 174, 0.05) 40%,
      transparent 65%);
  clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}

@media (min-width: 980px) {

  .vault-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 96px;
  }

}

.vault-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 30px 80px -20px rgba(64, 50, 30, 0.35),
    0 50px 120px -40px rgba(64, 50, 30, 0.20);
}

@media (min-width: 980px) {
  .vault-media {
    aspect-ratio: 4 / 5;
  }
}

.vault-media .ph,
.vault-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s cubic-bezier(0.2, 0, 0, 1);
}

.vault-media:hover .ph,
.vault-media:hover img {
  transform: scale(1.04);
}

/* Subtle gold rim along the media panel — a one-pixel inner
         glow that catches the eye and ties it to the gold theme. */
.vault-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(122, 138, 174, 0.18);
  border-radius: 18px;
  pointer-events: none;
}

.vault-copy {
  position: relative;
}

.vault-eyebrow {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #7a8aae;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.vault-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.vault-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 18px 0 24px;
  text-wrap: balance;
  padding-bottom: 0.05em;
  color: var(--ink);
}

.vault-title em {
  font-style: normal;
  color: #a8b3cc;
  font-weight: 700;
}

.vault-lede,
.vault-lede p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0 0 36px;
  max-width: 48ch;
}

/* Three spec callouts laid out in a row — same big-number type
         language used elsewhere on the site (stats section). */
.vault-specs {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 60px;
  margin: 0 0 40px;
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, #7a8aae 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #7a8aae 35%, transparent);
  text-align: center;
}

.vault-spec-value {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

.vault-spec-value em {
  font-style: normal;
  color: #7a8aae;
  font-weight: 500;
}

.vault-spec-label {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-55);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Vault specs — collapse Drupal field wrapper chain ────────────────
       * content.field_vault_specs (entity_reference_revisions, multiple,
       * label_hidden) renders via field.html.twig as:
       *   .vault-specs
       *     div          ← outer field wrapper   (no CSS class)
       *       div        ← per-item wrapper        (no CSS class)
       *         div      ← paragraph template outer div  ← grid item
       *           .vault-spec-value
       *           .vault-spec-label
       * Levels 1–2 get display:contents so the paragraph div becomes the
       * direct grid child of .vault-specs.
       * ─────────────────────────────────────────────────────────────────── */
.vault-specs>div:not([class]) {
  display: contents;
}

.vault-specs>div:not([class])>div {
  display: contents;
}

/* Hide the specs wrapper when there are no spec paragraphs */
.vault-specs:not(:has(> div)) {
  display: none;
}

/* Capability list — small kite-bullet items reflecting the
         site shape language. Positioned just above the CTA. */
.vault-features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}

.vault-features li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-70);
}

.vault-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 11px;
  background: #7a8aae;
  clip-path: polygon(50% 0%, 99.6% 30%, 50% 100%, 0.4% 30%);
}

/* CTA: a richer treatment than .btn-ghost — gold-bordered. */
.vault-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, #7a8aae 70%, transparent);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.vault-cta:hover {
  background: #7a8aae;
  border-color: #7a8aae;
  color: #fff;
  transform: translateY(-1px);
}

.vault-cta .arrow {
  transition: transform 0.25s ease;
}

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

/* On smaller viewports collapse spec strip to two columns. */
@media (max-width: 760px) {
  .vault-specs {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .vault-features {
    grid-template-columns: 1fr;
  }
}

/* ============ FEATURE ROW ============ */

@media (min-width: 900px) {

  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .feature-row.reverse .feature-media {
    order: 2;
  }

}

@media (min-width: 900px) {}

/* ============ HORIZONTAL SCROLL ============ */
@media (min-width: 768px) {}

@media (min-width: 1200px) {}

/* News index — masthead-style editorial list. Each row is a
         hairline-separated item with a date column on the left, a
         small kicker, the headline, and a quiet read-time on the
         right. Hover lifts the row's headline weight + reveals an
         arrow indicator. No imagery; the list is the entire UI. */
.news-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-index li {
  border-top: 1px solid var(--ink-10);
}

.news-index li:last-child {
  border-bottom: 1px solid var(--ink-10);
}

.news-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 28px 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding 0.4s cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 760px) {

  .news-row {
    grid-template-columns: 140px 140px 1fr 100px 28px;
    gap: 32px;
    align-items: baseline;
    padding: 32px 0;
  }

}

.news-date {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.news-kicker {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.3s ease;
}

.news-row-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  transition: font-weight 0.3s ease;
}

.news-readtime {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  color: var(--ink-55);
}

.news-arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
  color: var(--ink-55);
  align-self: center;
}

.news-row:hover .news-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
}

.news-row:hover .news-kicker {
  color: var(--ink);
}

.news-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.news-row:hover::before {
  transform: scaleX(1);
}

@media (max-width: 759px) {

  .news-date,
  .news-kicker {
    font-size: 10px;
  }

  .news-row-title {
    font-size: 18px;
  }

  .news-readtime,
  .news-arrow {
    display: none;
  }

}

.news-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
}

.news-card-media .ph,
.news-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
}

.news-card:hover .news-card-media .ph,
.news-card:hover .news-card-media img {
  transform: scale(1.06);
}

/* Card date label sits above the title. Small uppercase mono in
         soft slate so it reads as metadata, not a header. */
/* .news-card-date {
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
  display: block;
} */
.news-card-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-55);
    display: block;
}
/* Dissolve Drupal Views wrappers so .news-card is a direct grid child */
.news-row-grid .views-element-container,
.news-row-grid .views-row {
  display: contents;
}

/* News row grid (homepage): four cards across, image + headline only */
.news-row-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 720px) {

  .news-row-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

}

@media (min-width: 1080px) {

  .news-row-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

}

.news-row-grid .news-card-body {
  padding: 20px 22px 22px;
}

.news-row-grid .news-card-title {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.3;
}

.news-row-grid .news-card-media {
  aspect-ratio: 4 / 3;
}

/* Unify the placeholder thumbnails with a navy-toned monochrome
         filter so they read as a consistent editorial set rather than
         the mismatched browns/greys of the raw placeholder JPEGs.
         When real photography ships, drop the rule. */
.news-row-grid .news-card-media .ph,
.news-row-grid .news-card-media img {
  filter: grayscale(1) brightness(0.75) contrast(1.05) sepia(0.4) hue-rotate(190deg) saturate(0.8);
}

/* ============ TESTIMONIALS ============ */
/* A single large pull-quote occupies the section. Three quotes
         cycle through on a timer; only one is visible at a time. The
         opening glyph is an oversized typographic mark in the
         display serif, sitting in negative space to the left. The
         attribution sits below the quote in a small caps line. The
         section is intentionally quiet — no card, no border, just
         editorial typography on the paper background. */
/* Testimonials: card visual is a single designed image
         (photo + diamond glass overlay + quote + attribution baked
         in). The HTML section header above the card stays as real
         text for accessibility/SEO. When real photos arrive for
         additional members, replace this with a proper carousel. */
/* ============ TESTIMONIALS CAROUSEL ============
         One testimonial visible at a time. Auto-advances every ~7s,
         pauses on hover, and exposes prev/next arrows and dot
         indicators for manual navigation. Layout: portrait on the
         left, quote+attribution on the right. Slides are absolutely
         positioned in a relative track so they fade-cross-cleanly
         without layout thrash. */
.testimonials-carousel {
  position: relative;
  margin-top: 16px;
}

.testimonials-track {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
}

.testimonial-slide {
  display: grid;
  grid-template-columns: 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.testimonial-slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0s linear 0s;
  position: relative;
  z-index: 1;
}

.testimonial-slide:not([data-active="true"]) {
  position: absolute;
  inset: 0;
}

@media (min-width: 900px) {

  .testimonial-slide {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: stretch;
  }

}

.testimonial-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}

@media (min-width: 900px) {

  .testimonial-portrait {
    /* On desktop the portrait is a flex/grid item that stretches
             to match the quote column's height (grid default
             align-items: stretch). aspect-ratio: auto lets it match
             the row height; min-height keeps it tall enough to read. */
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }

}

.testimonial-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source image is already a tight face crop, so default centring
           keeps the face in frame. No leftward bias needed. */
  object-position: center top;
  display: block;
}

.testimonial-quote {
  margin: 0;
  padding: 80px 28px 32px;
  /* 3-row grid: top spacer (for the decorative glyph above),
           the quote text (centered vertically in the remaining space),
           and the attribution pinned to the bottom. This is what
           gives the quote its vertical centring even though the
           glyph eats the top padding. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
}

@media (min-width: 900px) {

  .testimonial-quote {
    padding: 110px 56px 48px;
  }

}

/* Decorative opening quotation mark - the original curly-quote
         glyph (Poppins serif-style curl), faded heavily so it reads
         as atmospheric editorial flourish, not a competing element.
         Sized to fit naturally above the quote text. */
/* .testimonial-quote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 14px;
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  color: rgba(26, 37, 64, 0.08);
  pointer-events: none;
  user-select: none;
} */

.testimonial-quote::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 14px;
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 600;
    font-size: 140px;
    line-height: 1;
    color: rgba(26, 37, 64, 0.08);
    pointer-events: none;
    user-select: none;
}
.testimonial-quote p {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    align-self: center;
    grid-row: 2;
}


@media (min-width: 900px) {

  .testimonial-quote::before {
    top: 18px;
    left: 36px;
    font-size: 200px;
  }

}


.testimonial-attr {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 32px;
  border-top: none;
}

/* .testimonial-name {
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
} */
.testimonial-name {
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
/* .testimonial-role {
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
} */
.testimonial-role {
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-55);
}
/* Carousel controls: prev/next arrows and dot indicators. */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 16px;
}

.testimonials-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.testimonials-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--ink-25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.testimonials-dot:hover {
  background: var(--ink-55);
}

.testimonials-dot[aria-current="true"] {
  background: var(--ink);
  transform: scale(1.2);
}

.testimonials-arrows {
  display: flex;
  gap: 8px;
}

.testimonials-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-10);
  background: var(--bg-raised);
  color: var(--ink-70);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.testimonials-arrow:hover {
  border-color: var(--ink-25);
  color: var(--ink);
}

.testimonials-arrow:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.testimonials-arrow svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 600px) {

  .testimonial-quote {
    padding: 28px 24px 24px;
    gap: 20px;
  }

}

/* ============ QUOTES (legacy, retained for fallback) ============ */

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============ HIGH VALUE SECTION ============
         Light-background feature grid. Title + lead note in the
         standard section-head pattern, then a 2-column grid of
         full-bleed image cards with the title overlaid at the bottom. */

.high-value-section {
  background: #f2f4f7;
}

.hv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}

@media (min-width: 640px) {
  .hv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Full-bleed card: image fills the card, title sits over it */
.hv-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2.3 / 1;
  background: #1a2540;
  transition: transform 0.3s ease;
}

.hv-card:hover {
  transform: scale(1.015);
}

.hv-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hv-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient scrim so white title reads against any image */
.hv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.18) 50%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hv-card__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
  padding: 20px 24px 22px;
}


/* ============ CTA STRIP ============
   Dark navy band above the footer on every page. Copy on the left,
   CTA or newsletter form on the right/below. On the news page the
   strip wraps an inline newsletter form (id="newsletter"). */
.cta-strip {
  background: #0e1424;
  color: #fff;
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cta-strip-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 20px;
}

.cta-strip-title em {
  font-style: normal;
  color: #a8b3cc;
  font-weight: 500;
}

.cta-strip-lede {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 32px;
  max-width: 60ch;
}
.cta-strip-lede p {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 60ch;
}

/* Two-column layout: copy left, CTA/form right. */
.cta-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .cta-strip-inner {
    grid-template-columns: 1fr auto;
    gap: 64px;
  }
}

/* News/webform variant: single column, form below copy. */
.cta-strip-inner--full {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Webform inside cta-strip: pill container wrapping input + submit. */
.cta-strip-webform .form-item {
  display: none;
}

.cta-strip-webform .webform-submission-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 540px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 6px 6px 8px;
}

.cta-strip-webform .form-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin: 0;
}

.cta-strip-webform .form-item label {
  display: none;
}

.cta-strip-webform .form-email {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 0;
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-size: 15px;
  color: #fff;
  box-shadow: none;
  border-radius: 0;


}


.webform-submission-newsletter-form .webform-type-email .form-email {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 14px;
  color: #fff;
  outline: none;
}

.webform-submission-newsletter-form {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 6px 6px 8px;
}

.cta-strip-webform .form-email::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.cta-strip-webform .form-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.cta-strip-webform .webform-button--submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: #ffffff;
  color: #0a0f1a;
  border: none;
  border-radius: 999px;
  font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}

.cta-strip-webform .webform-button--submit:hover {
  background: #f0f2f5;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .cta-strip-webform .webform-submission-form {
    flex-direction: column;
    border-radius: 16px;
    padding: 16px;
    gap: 12px;
  }

  .cta-strip-webform .form-email {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
  }

  .cta-strip-webform .webform-button--submit {
    justify-content: center;
  }
}

/* CTA actions wrapper */
.cta-strip-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* Button overrides for dark strip context */
.cta-strip .btn-primary {
  background: #ffffff;
  color: #0a0f1a !important;
  border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

.cta-strip .btn-primary:hover {
  background: #f0f2f5;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}

.cta-strip .btn-ghost {
  color: #e6ecf5 !important;
  border: 1px solid rgba(230, 236, 245, 0.32);
  background: rgba(230, 236, 245, 0.04);
}

.cta-strip .btn-ghost:hover {
  border-color: rgba(230, 236, 245, 0.7);
  background: rgba(230, 236, 245, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .cta-strip {
    padding: 72px 0;
  }
}

@media (max-width: 480px) {
  .cta-strip {
    padding: 56px 0;
  }
}

/* ============ PLACEHOLDER IMAGERY ============ */
/* Two flavors of placeholder are used:
         - .ph-gold / .ph-news-* use file-based JPEGs
           (stylised PIL compositions) so feature and news cards
           feel populated. Fallback background-color reads if the
           file doesn't load.
         - .ph-story-* use pure CSS radial+linear gradients. The
           story section is shown over a dark navy panel and the
           gradients give it a more abstract, "atmosphere" feel
           than a literal placeholder photograph would. */
.ph[class*="ph-"] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ph-gold {
  background-image: url('../assets/placeholders/ph-gold.jpg');
  background-color: #2a2620;
}

.ph-news-1 {
  background-image: url('../assets/placeholders/ph-news-1.jpg');
  background-color: #2a2620;
}

.ph-news-2 {
  background-image: url('../assets/placeholders/ph-news-2.jpg');
  background-color: #2a2418;
}

.ph-news-3 {
  background-image: url('../assets/placeholders/ph-news-3.jpg');
  background-color: #2a2418;
}

.ph-news-4 {
  background-image: url('../assets/placeholders/ph-news-4.jpg');
  background-color: #2a2418;
}

.ph-news-5 {
  background-image: url('../assets/placeholders/ph-news-5.jpg');
  background-color: #2a2418;
}

/* Sticky-story chapter images. Photographic frames, one per
         chapter, that crossfade as the user scrolls past the four
         chapters. Source files live in assets/story/. The .shade
         overlay on each .frame adds a soft bottom vignette so the
         chapter text stays legible regardless of the underlying
         frame's brightness. */
.ph-story-1 {
  background-image: url('../assets/story/story-1.jpg');
  background-color: #0e1424;
}

.ph-story-2 {
  background-image: url('../assets/story/story-2.jpg');
  background-color: #0a1020;
}

.ph-story-3 {
  background-image: url('../assets/story/story-3.jpg');
  background-color: #0d1224;
}

.ph-story-4 {
  background-image: url('../assets/story/story-4.jpg');
  background-color: #05080f;
}

/* ============ MEMBERSHIP TIERS ============ */
/* The tiers section sits on top of a graded close-up of a diamond
         interior. The video is the section background; cards float on
         it as glassy panels. data-tone="dark" so the spotlight shifts
         to its warm-light variant in here and the nav lightens. */
.tiers-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: 100px 0;
}

.tiers-section .section-head {
  margin-bottom: 88px;
  padding-top: 8px;
}

.tiers-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.tiers-bg video,
.tiers-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tighter brightness range than before — peaks don't blow out
           and crush text contrast on the cards. Slight desaturation
           keeps the section feeling silvery rather than oversaturated. */
  filter: brightness(1.12) contrast(0.95) saturate(0.7);
}

/* Vignette + gradient overlay: top fades to bg color (joining
         the section above), bottom does the same. Reads as a "window"
         into the diamond rather than a solid block. */
.tiers-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Hold the top and bottom edges to the page bg color so the
           tier section blends into its neighbours. The middle band
           is mostly transparent so the brightened video shows
           through cleanly. */
  background:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(15, 21, 34, 0.10) 14%,
      rgba(15, 21, 34, 0.12) 50%,
      rgba(15, 21, 34, 0.10) 86%,
      var(--bg) 100%);
  pointer-events: none;
}

/* Edge vignette: a mild side falloff so attention stays
         centred. Light enough that the video texture is not lost. */
.tiers-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
      transparent 0%,
      rgba(15, 21, 34, 0.06) 65%,
      rgba(15, 21, 34, 0.18) 100%);
  pointer-events: none;
}

.tiers-section .section-head {
  color: #fff;
}

.tiers-section .section-title {
  color: #fff;
}

.tiers-section .section-title em {
  color: #a8b3cc;
}

.tiers-section .section-body {
  /* Higher contrast + heavier weight so the lead-in copy is
           clearly readable against the dark video background. */
  color: rgba(255, 255, 255, 0.95);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  max-width: 50ch;
  padding-top: 8px;
}

.tiers-section .mono-label {
  color: rgba(255, 255, 255, 0.55);
}

.tiers-section .section-label::before {
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 900px) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.tiers-section .tier:hover {
  background: rgba(15, 21, 34, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.tiers-section .tier-list li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  padding-left: 22px;
}

.tiers-section .tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid rgba(255, 245, 220, 0.55);
  border-bottom: 1.5px solid rgba(255, 245, 220, 0.55);
  transform: rotate(-45deg);
}

.tiers-section .tier-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.tier-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ============ STORED-IN-VAULT GRID (brought from vault page) ============
         6-card grid showcasing what The Vault accommodates: diamonds,
         gold, jewellery, coloured stones, watches, private collections.
         Each card is Variant B glass to match the tier cards / nav.
         No background of its own — the parent .vault-panel paints a
         continuous gradient across both this section and the
         .vault-section above. */
#vault-stored {
  position: relative;
  padding-top: 92px;
  padding-bottom: 88px;
}

/* Two-column section head: title on the left, body copy on the
         right, matching the rest of the page's section-head pattern.
         The default .section-head 1fr/1.3fr grid handles desktop;
         margin-bottom tightened so the 6-card grid sits closer to
         the intro and the whole section fits more tightly in view. */
#vault-stored .section-head {
  margin-bottom: 44px;
}

#vault-stored .stored-grid {
  margin-top: 36px;
}

/* Section eyebrow above the title, mirroring the holding-page
         "Launching in 2026" treatment: thin rules either side of a
         small uppercase mono label. */
.stored-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "JetBrains Mono", ui-monospace, "IBM Plex Sans Arabic", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 8px;
}

.stored-eyebrow::before,
.stored-eyebrow::after {
  content: "";
  flex: 0 0 36px;
  height: 1px;
  background: color-mix(in srgb, #7a8aae 50%, transparent);
}

/* ============ STORED ITEMS GRID ============ */
/* 3x2 grid of image cards. Each card is a full-bleed crop from
         the unified vault tableau photograph (lighting + walnut frame
         + marble inlay shared across all six). A soft black gradient
         at the bottom of each card holds the title overlay legibly. */
.stored-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}

@media (min-width: 700px) {
  .stored-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1080px) {
  .stored-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.stored-item {
  position: relative;
  aspect-ratio: 2.3 / 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
  background-color: #0e1424;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 1px 2px rgba(26, 37, 64, 0.08),
    0 14px 40px -16px rgba(26, 37, 64, 0.32);
  transition: box-shadow 0.4s cubic-bezier(0.2, 0, 0, 1),
    transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.stored-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65%;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.stored-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26, 37, 64, 0.08),
    0 28px 60px -20px rgba(26, 37, 64, 0.45);
}

.stored-title {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

@media (min-width: 1080px) {

  .stored-title {
    left: 28px;
    right: 28px;
    bottom: 24px;
    font-size: 22px;
  }

}

/* ============ DOCUMENTS HUB ============ */
/* Card grid of documents. Each card shows a thumbnail of the
         PDF's cover page (or a placeholder for documents that aren't
         yet available), a small meta strip, and the title. Hovering
         a card lifts it and brightens the thumbnail. Categories switch
         the visible set via the .docs-filter chips above the grid. */
.docs-canvas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 96px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      var(--surface) 0%,
      transparent 75%),
    var(--bg);
}

/* Atmospheric backdrop (same as before — kept for continuity
         with the rest of the site's compositional language). */
.docs-canvas::before,
.docs-canvas::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
  filter: blur(2px);
  pointer-events: none;
}

.docs-canvas::before {
  right: -220px;
  top: 80px;
  width: 760px;
  height: 860px;
  background: linear-gradient(140deg,
      rgba(26, 37, 64, 0.04) 0%,
      rgba(26, 37, 64, 0.012) 40%,
      transparent 65%);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 22%,
      #000 55%,
      #000 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 22%,
      #000 55%,
      #000 100%);
}

.docs-canvas::after {
  left: -180px;
  bottom: -140px;
  width: 540px;
  height: 620px;
  background: linear-gradient(320deg,
      rgba(26, 37, 64, 0.025) 0%,
      rgba(26, 37, 64, 0.008) 40%,
      transparent 65%);
}

.docs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}

.docs-filter {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--ink-10);
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  position: relative;
  white-space: nowrap;
}

.docs-filter:hover {
  color: var(--ink);
  border-color: var(--ink-40);
}

.docs-filter.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

/* Card grid. No max-width so the grid spans the full .wrap
         width: cards' left edge aligns with the section header above. */
.docs-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 1100px) {

  .docs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

}

@media (max-width: 780px) {

  .docs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

}

@media (max-width: 480px) {

  .docs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}

/* Filter dimming: when a filter is active, non-matching cards
         are hidden entirely (cleaner reflow than fading). */
.docs-grid.filtered .doc:not(.match) {
  display: none;
}

.doc:hover {
  transform: translateY(-4px);
  border-color: var(--ink-25);
  box-shadow: 0 12px 32px -16px rgba(26, 37, 64, 0.18);
}

/* Disable hover lift + click for placeholder cards (no PDF yet) */
.doc.is-placeholder {
  cursor: default;
}

.doc.is-placeholder:hover {
  transform: none;
  box-shadow: none;
}

/* Thumbnail area: fixed height so cards align on a row regardless
         of source aspect ratio. Real thumbs use object-fit: contain so
         portrait covers (QDE branded A4) and landscape covers (WDC SoW
         16:9) both fit fully — they sit on a tinted backplate which
         reads as a document being held against a surface. */
.doc-thumb {
  position: relative;
  width: 100%;
  height: 220px;
  background:
    linear-gradient(180deg, rgba(26, 37, 64, 0.04) 0%, rgba(26, 37, 64, 0.08) 100%),
    var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-thumb img {
  max-width: 78%;
  max-height: 86%;
  object-fit: contain;
  box-shadow:
    0 1px 2px rgba(26, 37, 64, 0.08),
    0 8px 22px -8px rgba(26, 37, 64, 0.24);
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.4s ease;
  background: #fff;
}

.doc:hover .doc-thumb img {
  transform: scale(1.03);
  box-shadow:
    0 1px 2px rgba(26, 37, 64, 0.12),
    0 14px 30px -10px rgba(26, 37, 64, 0.32);
}

/* Placeholder thumb: stylized "coming soon" sheet, same dimensions
         as a real PDF cover so the grid stays aligned. Visually clearly
         a placeholder — diagonal hatch background, dashed border on the
         sheet, neutral typography. */
.doc-thumb.placeholder {
  background:
    repeating-linear-gradient(-45deg,
      rgba(26, 37, 64, 0.025) 0px,
      rgba(26, 37, 64, 0.025) 8px,
      transparent 8px,
      transparent 16px),
    linear-gradient(180deg, rgba(26, 37, 64, 0.04) 0%, rgba(26, 37, 64, 0.08) 100%),
    var(--surface);
}

.doc-thumb-placeholder-sheet {
  width: 64%;
  height: 78%;
  border: 1.5px dashed var(--ink-25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
}

.doc-thumb-placeholder-label {
  font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}

.doc-thumb-placeholder-note {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.4;
  max-width: 90%;
}

/* Card meta area below the thumbnail */

.doc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  color: var(--ink-55);
}

.doc-foot-size {
  letter-spacing: 0.02em;
}

.doc-foot-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
  transition: color 0.25s ease, transform 0.3s ease;
}

.doc-foot-action svg {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.doc:hover .doc-foot-action svg {
  transform: translateY(2px);
}

.doc.is-placeholder .doc-foot-action {
  color: var(--ink-40);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
}

/* ============ AFFILIATES ============ */
/* AFFILIATES: two-row continuous ribbon. Larger logo tiles with
         text label centred underneath each logo (not beside). The
         section uses the same deep navy as the Exchange Story so the
         two dark panels feel continuous in the page rhythm. */
.affiliates-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-inverse);
  color: #e6ecf5;
}

.affiliates-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 70% 40%,
      rgba(122, 138, 174, 0.10) 0%,
      transparent 55%);
  pointer-events: none;
}

.affiliates-section .section-title {
  color: #e6ecf5;
}

.affiliates-section .section-title em {
  color: #a8b3cc;
}

.affiliates-section .section-body {
  color: rgba(230, 236, 245, 0.72);
}

.affiliates-section .mono-label {
  color: rgba(230, 236, 245, 0.55);
}

.ribbon-viewport {
  position: relative;
  margin-top: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox: hide scrollbar, keep scroll */
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ribbon-viewport::-webkit-scrollbar {
  display: none;
}

/* Fewer than 4 affiliates: JS skips cloning/auto-scroll, so drop the
   scroll-edge fade and center the single static row instead. */
.ribbon-viewport--static {
  overflow-x: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.ribbon-viewport--static .ribbon-track {
  justify-content: center;
  width: 100%;
}

/* Chrome/Safari */
.ribbon-track {
  display: flex;
  gap: 64px;
  width: max-content;
}

/* Auto-scroll + infinite manual scroll are both driven from a
         single JS rAF loop on the viewport's scrollLeft (see the
         AFFILIATES RIBBON script). The duplicate set in the markup
         lets the loop wrap seamlessly in either direction. */
.ribbon-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 12px 28px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  min-width: 220px;
}

.ribbon-item:hover {
  opacity: 0.85;
}

/* Logo tile — larger now that the label sits beneath. Each logo
         sits inside a white rounded tile so coloured marks read cleanly
         on the dark navy section. Logos designed white-on-dark (RJC)
         get the inverse: a navy tile via data-tile="dark". */
.ribbon-item-logo {
  flex: 0 0 auto;
  width: 160px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ribbon-item-logo[data-tile="dark"] {
  background: #0a0f1a;
  box-shadow: 0 0 0 1px rgba(230, 236, 245, 0.12);
}

.ribbon-item-logo img,
.ribbon-item-logo svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.ribbon-item-logo img.invert {
  filter: brightness(0) invert(1);
}

.ribbon-item-name {
  display: none;
  /* Logos only — entity names hidden per design. */
}

@media (max-width: 760px) {

  .ribbon-viewport {
    gap: 28px;
  }

  .ribbon-item {
    min-width: 160px;
    padding: 10px 18px;
    gap: 12px;
  }

  .ribbon-item-logo {
    width: 120px;
    height: 76px;
    padding: 10px 12px;
  }

  .ribbon-item-name {
    font-size: 11px;
  }

  .ribbon-track {
    gap: 36px;
  }

}

/* Stacked-navigator layout. Two-column composition on desktop:
         a vertical list of partner rows on the left, a wide detail
         panel on the right. The active row is committed via the
         same dwell-to-lock pattern used in member benefits — hover
         briefly to preview, hover for >=1.2s to lock as the new
         sticky selection. Click and keyboard focus commit instantly.

         Resting state shows the full list at rest with the first
         partner active. The list communicates value without any
         click; the panel gives detail with breathing room. Mobile
         stacks the panel beneath the list.

         The system is the same dwell-to-lock metaphor used in the
         eco section and member benefits — which keeps the
         interaction language consistent across the site, even
         though each instance looks different. */
.affiliates-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
}

@media (min-width: 900px) {

  .affiliates-nav {
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
  }

}

.affiliates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink-10);
}

.affiliate-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 18px 16px 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--ink-10);
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: background 0.3s ease, padding-left 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.affiliate-row:hover {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Active row: gold left rule + slightly indented content. */
.affiliate-row[data-active] {
  padding-left: 24px;
}

.affiliate-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #7a8aae;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1);
  border-radius: 2px;
}

.affiliate-row[data-active]::after {
  opacity: 1;
}

.affiliate-row[data-dwelling]::after {
  opacity: 0.35;
}

.affiliate-row[data-active][data-dwelling]::after {
  opacity: 1;
}

.affiliate-row-mark {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink-55);
  transition: color 0.3s ease;
}

.affiliate-row[data-active] .affiliate-row-mark {
  color: var(--ink);
}

.affiliate-row-name {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-70);
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.affiliate-row[data-active] .affiliate-row-name {
  color: var(--ink);
}

/* Detail pane. Sits on the right (or below on mobile). Cross-
         fades content when the active row changes. The pane is
         tall enough to hold the longest description; absolute
         positioning of the inner blocks lets us swap without layout
         shift. */
.affiliate-pane {
  position: relative;
  min-height: 260px;
  padding: 8px 0;
}

.affiliate-pane-eyebrow {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 18px;
}

.affiliate-pane-eyebrow .gold {
  color: #7a8aae;
}

.affiliate-pane-stack {
  position: relative;
}

.affiliate-pane-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 1, 1),
    transform 0.4s cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 0.3s;
  pointer-events: none;
}

.affiliate-pane-card[data-active] {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.45s cubic-bezier(0.2, 0, 0, 1) 0.18s,
    transform 0.5s cubic-bezier(0.2, 0, 0, 1) 0.18s,
    visibility 0s linear 0.18s;
  pointer-events: auto;
}

.affiliate-pane-mark {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}

.affiliate-pane-name {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}

.affiliate-pane-role {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 24px;
}

.affiliate-pane-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-70);
  margin: 0 0 28px;
  max-width: 56ch;
}

.affiliate-pane-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.affiliate-pane-link .arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.affiliate-pane-link:hover .arrow {
  transform: translate(3px, -3px);
}

/* Original ribbon styles retained but unused (DOM swapped). */
.affiliates-ribbon {
  position: relative;
  margin-top: 40px;
  /* Mask edges so cards fade into the section bg at the ends.
           Use a horizontal mask gradient that's transparent for the
           first and last 60px. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.affiliates-viewport {
  overflow: hidden;
  position: relative;
}

.affiliates-track {
  display: flex;
  gap: 16px;
  padding: 4px 60px;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
  touch-action: pan-y;
  /* allow vertical page scroll on touch */
}

.affiliates-track.dragging {
  transition: none;
}

.affiliate::before {
  /* Top-right facet highlight — same diamond visual language */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--surface) 0%, transparent 70%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

.affiliate:hover {
  background: var(--bg-raised);
  border-color: var(--ink-40);
  transform: translateY(-3px);
}

.affiliate-mark {
  width: 48px;
  height: 48px;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  flex-shrink: 0;
}

.affiliate-abbr {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.affiliate-name {
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.45;
  margin: 0;
}

.affiliate-tag {
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
}

/* Edge markers: tiny abstract chevrons at the ribbon edges that
         hint at hidden content. They fade in/out based on scrollable
         room: hidden when at the corresponding edge, visible when
         there's more in that direction. */
.ribbon-edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

.ribbon-edge.left {
  left: 4px;
}

.ribbon-edge.right {
  right: 4px;
}

.ribbon-edge.visible {
  opacity: 0.55;
}

.ribbon-edge svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Ribbon controls below the viewport */
.ribbon-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 28px;
  gap: 16px;
}

.ribbon-progress {
  flex: 1;
  height: 1px;
  background: var(--ink-10);
  position: relative;
  overflow: hidden;
  max-width: 200px;
  margin-right: 4px;
}

.ribbon-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--ink);
  transition: width 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.ribbon-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ribbon-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink-40);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  padding: 0;
}

.ribbon-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}

.ribbon-arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ============ APPLY MODAL ============ */
.modal {
  background: var(--bg-raised);
  color: var(--ink);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {}

.modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
  margin-bottom: 14px;
}

.modal-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 28px;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {

  .modal-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Inline label with help-icon trigger. The icon sits right of the
         label text, opens a small popover on hover/focus/click. */
.form-help-trigger:hover .form-help-icon,
.form-help-trigger:focus .form-help-icon,
/* Floating popover — uses position: fixed so it escapes the
         modal's overflow-y: auto scroll container. The popover is
         hidden by default. Position is set via JS (top/left in
         viewport coordinates) when the trigger is clicked. The
         arrow nub points up at the trigger. */
.form-field input,
.form-field select,
.form-disclaimer {
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.5;
  margin: 0;
}

/* ============ HERO PARALLAX ============ */
.hero-copy {
  transform: translateY(calc(var(--hero-parallax, 0) * -40px));
  opacity: calc(1 - var(--hero-parallax, 0) * 0.6);
  transition: none;
}

.hero-media {
  transform: translateY(calc(var(--hero-parallax, 0) * 20px));
  opacity: calc(1 - var(--hero-parallax, 0) * 0.5);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy {
    transform: none;
    opacity: 1;
  }

  .hero-media {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============ HERO MEDIA (still image, right) ============ */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-media .hero-photo,
.hero-media .hero-video,
.hero-media .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

@media (min-width: 900px) {

  .hero-media .hero-photo,
  .hero-media .hero-video,
  .hero-media .hero-image {
    transform: translateX(8%) scale(1.06);
    transform-origin: right center;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
      rgba(10, 15, 26, 1) 0%,
      rgba(10, 15, 26, 0.88) 12%,
      rgba(10, 15, 26, 0.65) 32%,
      rgba(10, 15, 26, 0.30) 52%,
      rgba(10, 15, 26, 0) 72%);
  pointer-events: none;
}

@media (max-width: 899px) {
  .hero-media {
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 25%,
        #000 50%,
        rgba(0, 0, 0, 0.6) 75%,
        transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 25%,
        #000 50%,
        rgba(0, 0, 0, 0.6) 75%,
        transparent 100%);
  }

  .hero::before {
    background: none;
  }

  .hero::after {
    display: none;
  }
}


/* ============ CURSOR ============ */
/* Single unified dart shape with an internal animated glow.
         The shape and glow move together as one body; only the
         glow's center point drifts within the silhouette to give a
         "light moving inside the gem" effect. Two color variants
         (dark fill for light bgs, light fill for dark bgs) swap
         via body.over-dark. */
.cursor-pointer {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
  width: 23px;
  height: 21px;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  /* Very faint drop-shadow for ambient lift. The silhouette
           edges are already softened via the SVG Gaussian blur so we
           don't need a strong shadow on top. */
  filter:
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.10));
}

.cursor-pointer>svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pointer-light,
.pointer-dark {
  transition: opacity 0.4s ease;
}

.pointer-light {
  opacity: 0;
}

.pointer-dark {
  opacity: 1;
}

html body.over-dark .pointer-light,
html body.over-dark .pointer-dark
/* In dark theme, when cursor is over a light-toned section
         (apply CTA on dark bg etc. don't apply here since dark theme
         flips most sections), keep light variant. */

/* Force every element to keep cursor:none so the OS pointer
         never reappears — including links, buttons, form fields. */
@media (pointer: fine) {
  /* custom cursor reverted */
}

@media (max-width: 768px) {

  .cursor-pointer {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .cursor-pointer {
    display: none;
  }

}

/* ============ UTILITIES (replace former inline style= attributes) ============
   These use !important deliberately: an inline style always beats stylesheet
   rules, so to faithfully replace inline styles a utility must override
   component CSS the same way. This is the standard convention for utilities. */
.u-media-cover {
  object-fit: cover !important;
  display: block !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-nowrap {
  white-space: nowrap !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-mb-32 {
  margin-bottom: 32px !important;
}

.u-mt-24-lh {
  margin-top: 24px !important;
  line-height: 1.6 !important;
}

.u-flex-row-24 {
  display: flex !important;
  gap: 24px !important;
  align-items: center !important;
}

.u-flex-end {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.u-text-white {
  color: #fff !important;
}

.u-text-slate {
  color: #a8b3cc !important;
}

.u-story-lede {
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 24px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   SCOPED STYLES FOR KIMBERLEY.CSS ()
   ========================================================================== */

.split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: inherit;
}

/* ============ SECTIONS ============ */

@media (min-width: 768px) {
  .section {
    padding: 140px 0;
  }
  .section-padding {
    padding: 80px 0 !important;
  }
}

@media (min-width: 1200px) {
  .section {
    padding: 180px 0;
  }
  .section-padding {
    padding: 100px 0 !important;
  }
}

/* ============ STATS ============ */

@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============ ECOSYSTEM CARDS ============ */

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card:hover {
  background: var(--bg-raised);
}

.card-link {
  margin-top: auto;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

/* ============ BENEFITS ============ */

@media (min-width: 700px) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefit:hover {
  background: var(--bg-raised);
}

.benefit-ico svg {
  width: 100%;
  height: 100%;
}

/* ============ STICKY STORY ============ */

@media (min-width: 900px) {

  .sticky-story-inner {
    grid-template-columns: 1fr 1fr;
  }

}

@media (min-width: 900px) {}

.sticky-media .frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  transform: scale(1.04);
}

.sticky-media .frame.active {
  opacity: 1;
  transform: scale(1);
}

.sticky-media .ph {
  width: 100%;
  height: 100%;
}

.sticky-media .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
}

@media (min-width: 900px) {}

.sticky-slide .num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  color: var(--accent);
  font-size: 15px;
}

.sticky-slide h3 {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

.sticky-slide p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0;
}

/* Slide counter (fixed to the sticky media) */

.sticky-counter span {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.4s ease;
}

.sticky-counter span.active {
  background: var(--accent);
}

/* ============ FEATURE ROW ============ */

@media (min-width: 900px) {

  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .feature-row.reverse .feature-media {
    order: 2;
  }

}

@media (min-width: 900px) {}

/* ============ HORIZONTAL SCROLL ============ */
@media (min-width: 768px) {}

@media (min-width: 1200px) {}

.news-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
}

.news-card-media .ph {
  width: 100%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
}

.news-card:hover .news-card-media .ph {
  transform: scale(1.06);
}

/* ============ QUOTES ============ */

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============ APPLY ============ */

.apply-title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

.apply .btn-primary {
  background: #fff;
  color: #0c0c0c;
}

.apply .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.apply .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
}

/* ============ MARQUEE ============ */

.marquee-item {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink-55);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 72px;
}

.marquee-item::after {
  content: "✦";
  font-style: normal;
  color: var(--accent);
  font-size: 16px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ============ PLACEHOLDER IMAGERY ============ */
/* Placeholder imagery: file-based JPEGs for vault/event/news,
         CSS gradients for story slides. */
.ph[class*="ph-"] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ph-gold {
  background-image: url('../assets/placeholders/ph-gold.jpg');
  background-color: #2a2620;
}

.ph-news-1 {
  background-image: url('../assets/placeholders/ph-news-1.jpg');
  background-color: #2a2620;
}

.ph-news-2 {
  background-image: url('../assets/placeholders/ph-news-2.jpg');
  background-color: #2a2418;
}

.ph-news-3 {
  background-image: url('../assets/placeholders/ph-news-3.jpg');
  background-color: #2a2418;
}

.ph-news-4 {
  background-image: url('../assets/placeholders/ph-news-4.jpg');
  background-color: #2a2418;
}

.ph-news-5 {
  background-image: url('../assets/placeholders/ph-news-5.jpg');
  background-color: #2a2418;
}

.ph-story-1 {
  background: radial-gradient(ellipse at 30% 30%, rgba(122, 138, 174, 0.55), transparent 60%), linear-gradient(140deg, #2a2620, #0a0908);
}

.ph-story-2 {
  background: radial-gradient(ellipse at 70% 30%, rgba(122, 138, 174, 0.5), transparent 55%), linear-gradient(140deg, #1a1712, #050404);
}

.ph-story-3 {
  background: radial-gradient(ellipse at 50% 70%, rgba(122, 138, 174, 0.6), transparent 60%), linear-gradient(140deg, #2f2a20, #100d08);
}

.ph-story-4 {
  background: radial-gradient(ellipse at 40% 40%, rgba(122, 138, 174, 0.65), transparent 55%), linear-gradient(140deg, #3a3225, #120f0a);
}

/* ============ DOCUMENTS HUB ============ */

@media (min-width: 700px) {
  .docs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .docs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.doc:hover {
  background: var(--bg-raised);
}

.doc-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--ink-10);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.doc-icon::after {
  content: "PDF";
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--accent);
}

.doc-meta .arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.doc:hover .doc-meta .arrow {
  transform: translate(2px, -2px);
}

/* ============ AFFILIATES ============ */
.affiliates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-10);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

@media (min-width: 700px) {
  .affiliates {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .affiliates {
    grid-template-columns: repeat(4, 1fr);
  }
}

.affiliate:hover {
  background: var(--bg-raised);
}

.affiliate-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.affiliate-abbr {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

.affiliate-name {
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.4;
  margin: 0;
}

/* ============ APPLY MODAL ============ */
.modal {
  background: var(--bg-raised);
  color: var(--ink);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {}

.modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
  margin-bottom: 14px;
}

.modal-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 28px;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {

  .modal-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-help-trigger:hover .form-help-icon,
.form-help-trigger:focus .form-help-icon,
.form-field input,
.form-field select,
.form-disclaimer {
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.5;
  margin: 0;
}

/* ============ CURSOR ============ */
/* Single unified dart shape with an internal animated glow.
         The shape and glow move together as one body; only the
         glow's center point drifts within the silhouette to give a
         "light moving inside the gem" effect. Two color variants
         (dark fill for light bgs, light fill for dark bgs) swap
         via body.over-dark. */
.cursor-pointer {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
  width: 23px;
  height: 21px;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  /* Very faint drop-shadow for ambient lift. The silhouette
           edges are already softened via the SVG Gaussian blur so we
           don't need a strong shadow on top. */
  filter:
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.10));
}

.cursor-pointer>svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pointer-light,
.pointer-dark {
  transition: opacity 0.4s ease;
}

.pointer-light {
  opacity: 0;
}

.pointer-dark {
  opacity: 1;
}

html body.over-dark .pointer-light,
html body.over-dark .pointer-dark
/* Force every element to keep cursor:none so the OS pointer
         never reappears — including links, buttons, form fields. */
@media (pointer: fine) {
  /* custom cursor reverted */
}

@media (max-width: 768px) {

  .cursor-pointer {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .cursor-pointer {
    display: none;
  }

}

/* ============ NEWS PAGE ============ */
/* Editorial, light-theme newsroom layout. Three rhythms:
         1. Hero — eyebrow + italic-em headline + lede + search/filter row
         2. Featured pair — pinned story + most recent story, side by side
         3. Archive — horizontal-row list of remaining stories, each with
            a pin toggle that re-promotes any story to the pinned slot.
         Visual language matches qde_qa.html: navy ink, off-white bg,
         Poppins italics for "the unfolding" emphasis, white raised cards
         with 1px ink-10 borders and 16px radius, hover lifts. */

/* ----- News hero ----- */
.news-hero {
  position: relative;
  padding: 140px 0 48px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

@media (min-width: 768px) {
  .news-hero {
    padding: 180px 0 56px;
  }
}

@media (min-width: 1200px) {
  .news-hero {
    padding: 200px 0 64px;
  }
}

/* Hero glow lifted from the homepage (.hero-glow) but re-positioned
         and recoloured to sit on the light bg without washing out. */
.news-hero .hero-glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 70vw;
  max-width: 880px;
  aspect-ratio: 1;
  background: radial-gradient(circle at center,
      rgba(91, 111, 153, 0.16) 0%,
      rgba(91, 111, 153, 0.06) 40%,
      transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.news-hero>.wrap {
  position: relative;
  z-index: 1;
}

.news-hero-eyebrow {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.news-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.news-hero-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  max-width: 16ch;
  color: var(--ink);
}

.news-hero-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--accent-soft);
}

.news-hero .hero-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 56ch;
  margin: 0 0 40px;
}

@media (min-width: 768px) {

  .news-hero .hero-lede {
    font-size: 19px;
    margin-bottom: 48px;
  }

}

/* Search + filter row sits at the bottom of the hero, anchoring
         the page's interactive controls to the editorial intro. */
.news-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

@media (min-width: 900px) {

  .news-controls {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

}

.news-search {
  position: relative;
  width: 100%;
  max-width: 460px;
}

.news-search input {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 14px 44px 14px 46px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-search input::placeholder {
  color: var(--ink-40);
}

.news-search input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(91, 111, 153, 0.12);
}

.news-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-40);
  pointer-events: none;
}

.news-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--ink-10);
  color: var(--ink-70);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}

.news-search-clear:hover {
  background: var(--ink-25);
  color: var(--ink);
}

.news-search.has-value .news-search-clear {
  display: inline-flex;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 899px) {

  /* Mobile: single-line scroll so the row never wraps to 3 lines. */
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .filter-pills::-webkit-scrollbar {
    display: none;
  }

}

.pill {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.pill:hover {
  color: var(--ink);
  border-color: var(--ink-25);
  background: rgba(255, 255, 255, 0.5);
}

.pill.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.pill.active:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ----- Result count strip ----- */
.news-result-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
}

.news-result-bar .count {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}

.news-result-bar .count strong {
  color: var(--ink);
  font-weight: 600;
}

.news-result-bar .sort-note {
  font-size: 13px;
  color: var(--ink-40);
  font-style: italic;
}

/* ----- Featured pair (pinned + latest) ----- */
.featured-pair-section {
  padding: 56px 0 40px;
}

@media (min-width: 1200px) {
  .featured-pair-section {
    padding: 72px 0 56px;
  }
}

.featured-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1200px) {

  .featured-pair {
    gap: 40px;
  }

}

/* When the pinned story IS the latest story, collapse to one big
         card across the row. */
.featured-pair.solo {
  grid-template-columns: 1fr;
}

.featured-pair.solo .feature-card {
  max-width: 100%;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

.feature-card-media {
  aspect-ratio: 16 / 10;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

/* Solo featured-card gets a wider, more cinematic crop. */
.featured-pair.solo .feature-card-media {
  aspect-ratio: 21 / 9;
}

.feature-card-media .ph {
  width: 100%;
  height: 100%;
  transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
}

.feature-card:hover .feature-card-media .ph {
  transform: scale(1.05);
}

/* Top-left badge that identifies whether this slot is "Pinned" or
         "Latest". Visual label only — pinning is an editorial decision
         made on the backend, not a user-facing control. NO
         backdrop-filter (per landing-page handoff guidance — small
         rounded elements with backdrop-filter risk halo artefacts).
         Solid translucent navy + a 1px white inner border gives enough
         chip definition over any image. */
.feature-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: rgba(15, 23, 38, 0.85);
  border-radius: 999px;
  color: #fff;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.feature-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.feature-badge.solo {
  background: rgba(15, 23, 38, 0.92);
}

.feature-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

@media (min-width: 768px) {
  .feature-card-body {
    padding: 28px 28px 32px;
  }
}

.feature-card-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature-card-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.featured-pair.solo .feature-card-title {
  font-size: clamp(28px, 3.4vw, 44px);
}

.feature-card-excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
}

.feature-card-meta {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-55);
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-25);
}

/* ----- Archive list ----- */
.archive-section {
  padding: 24px 0 96px;
}

.archive-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}

.archive-heading {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}

.archive-heading em {
  font-style: normal;
  font-weight: 700;
  color: #a8b3cc;
}

.archive-head .view-header {
  margin: 0;
}

.archive-list {
  display: flex;
  flex-direction: column;
}

.archive-row:first-of-type {
  border-top: 1px solid var(--ink-10);
}

/* Each archive-row is a clickable link. Internal layout is a grid
         that stacks on mobile and goes to thumb | text | aside on desktop. */
.archive-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-10);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease;
}

@media (min-width: 700px) {

  .archive-row {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 28px;
    padding: 28px 16px;
    margin: 0 -16px;
    align-items: center;
  }

}

@media (min-width: 1100px) {

  .archive-row {
    grid-template-columns: 240px minmax(0, 1fr) 200px;
    gap: 36px;
  }

}

.archive-row-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.archive-row-thumb .ph {
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 699px) {

  /* On mobile, shrink the thumb so the row reads as text-led. */
  .archive-row-thumb {
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }

}

.archive-row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.archive-row-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.archive-row-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.2s ease;
}

.archive-row:hover .archive-row-title {
  color: var(--accent);
}

.archive-row-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 4px 0 0;
  /* Clamp to two lines so rows stay rhythmic. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-row-aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 700px) {

  .archive-row-aside {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    text-align: right;
  }

}

.archive-row-meta {
  font-size: 12px;
  color: var(--ink-55);
  white-space: nowrap;
}

.archive-row-meta .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-25);
  vertical-align: middle;
  margin: 0 6px;
}

/* Share button — sits in the aside column, optically aligned with
         the row's right edge. Click stops propagation so it doesn't open
         the article. Uses navigator.share when available, falls back to
         copying the article URL to the clipboard with a brief flash to
         confirm. */
.share-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink-10);
  background: var(--bg-raised);
  color: var(--ink-55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  position: relative;
}

/* Brief confirmation state after a clipboard fallback succeeds.
         Driven by JS adding/removing .copied for ~1.4s. */
/* ----- Pagination -----
         Sits below the archive list. Numeric pages plus prev/next
         arrow controls. Active page reverses to ink-on-bg. Disabled
         arrows fade to muted ink with no pointer. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pagination-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ink-25);
  background: rgba(255, 255, 255, 0.5);
}

.pagination-btn[aria-current="page"] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  cursor: default;
}

/* Empty state when search/filter has no matches. */
.archive-empty {
  padding: 80px 24px;
  text-align: center;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  display: none;
}

/* ----- Newsletter strip (re-styled to render properly on dark tone) ----- */
.newsletter-strip {
  background: var(--bg-inverse);
  color: rgba(255, 255, 255, 0.85);
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {

  .newsletter-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }

}

.newsletter-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
}

.newsletter-title em {
  font-style: normal;
  font-weight: 500;
  color: #a8b3cc;
}

.newsletter-lede {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 48ch;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 600px) {

  .newsletter-form {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 6px 6px 8px;
  }

  .newsletter-form input {
    background: transparent;
    border: none;
    padding: 0 16px;
  }

  .newsletter-form button {
    flex-shrink: 0;
  }

}

.newsletter-form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 14px;
  color: #fff;
  outline: none;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-form input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

@media (min-width: 600px) {

  .newsletter-form input:focus {
    border: none;
    box-shadow: none;
  }

}

/* ====================================================================
         KP PAGE MODULE
         Scoped to .kp-page wrapper. Reuses .wrap, .reveal, .btn from base.
         ==================================================================== */

/* Hero. Light tone, paired media on the right.
         Typography mirrors the homepage .hero-title / .mono-label
         standards exactly (Poppins 500, clamp 36/4.5vw/76, line-height
         1.08, letter-spacing -0.035em; Inter 11px 0.18em eyebrow). The
         only difference vs the homepage hero is the colour scheme:
         this hero sits on the light off-white background, so we
         override the dark-tone colours (which are set with
         !important on the homepage for over-video legibility) back
         to ink/accent-soft for legibility on light. */
/* Hero: dark tone. Full-bleed atmospheric image of a rough diamond
         on dark navy stone. Text occupies the left third over a soft
         gradient veil that guarantees legibility regardless of viewport
         width. The image carries a slow Ken Burns drift to feel alive
         without being gimmicky. */
.kp-hero {
  position: relative;
  overflow: hidden;
  background: #0b1426;
  /* Fills the viewport so there is no light section visible on
           first paint. Matches the homepage .hero treatment. dvh
           handles the mobile address-bar collapse; vh is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 200px 0 120px;
}

@media (min-width: 768px) {
  .kp-hero {
    padding: 220px 0 120px;
  }
}

@media (min-width: 1200px) {
  .kp-hero {
    padding: 240px 0 120px;
  }
}

.kp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/kp/kp-hero-diamond.jpg");
  background-size: cover;
  background-position: center;
  will-change: transform;
  animation: kpHeroDrift 28s ease-in-out infinite alternate;
}

.kp-hero-bg-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes kpHeroDrift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.08) translate3d(-1.2%, -0.6%, 0);
  }
}

/* Legibility veil: strong on the left where the text sits, fading
         to a transparent middle and beyond so the diamond reads clean
         on the right. Two stacked gradients: horizontal for the text
         column shadow, vertical to deepen the floor so the page's
         next section transitions gracefully. */
.kp-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11, 20, 38, 0.85) 0%,
      rgba(11, 20, 38, 0.6) 28%,
      rgba(11, 20, 38, 0.25) 48%,
      rgba(11, 20, 38, 0) 68%),
    linear-gradient(180deg,
      rgba(11, 20, 38, 0) 60%,
      rgba(11, 20, 38, 0.55) 100%);
}

.kp-hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* KP hero uses the standard centred .wrap so the title left edge
         aligns with every body section header on the page. width: 100%
         is required because .kp-hero is a flex container; without it
         the wrap shrinks to its content's max-content width. The
         .kp-hero-grid below places copy in the left column of a 2-col
         grid so the right half is reserved for the diamond image. */
.kp-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 980px) {

  .kp-hero-grid {
    grid-template-columns: minmax(0, 540px) 1fr;
    column-gap: 80px;
  }

  .kp-hero-grid>div:first-child {
    grid-column: 1;
  }

}

/* At very wide viewports the diamond drifts further right; we
         want text capped narrower so it doesn't reach the gem. */
@media (min-width: 1400px) {
  .kp-hero-grid {
    grid-template-columns: minmax(0, 580px) 1fr;
  }
}

.kp-hero .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.kp-hero .hero-eyebrow .mono-label {
  color: rgba(230, 236, 245, 0.6);
}

.kp-hero .hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8b3cc;
  box-shadow: 0 0 14px rgba(168, 179, 204, 0.7);
  animation: dotPulse 2.4s ease-in-out infinite;
}

.kp-hero .hero-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: #fff;
}

.kp-hero .hero-title em {
  font-style: normal;
  font-weight: 500;
  color: #a8b3cc;
  white-space: nowrap;
}

.kp-hero .hero-line {
  display: block;
}

.kp-hero .hero-lede {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 40px;
}

.kp-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Ghost button restyled for dark hero (matches tenders-hero-ctas
         treatment from tenders.html) */
.kp-hero-cta .btn-ghost {
  color: #f4f3ef;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.kp-hero-cta .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
}

/* On narrow viewports, push the diamond off the right edge and
         layer a top-down veil so the headline reads cleanly over the
         full bg image. */
@media (max-width: 720px) {
  .kp-hero-bg {
    background-position: 78% center;
  }

  .kp-hero-veil {
    background:
      linear-gradient(180deg,
        rgba(11, 20, 38, 0.55) 0%,
        rgba(11, 20, 38, 0.78) 40%,
        rgba(11, 20, 38, 0.92) 100%);
  }
}

/* Stats strip — three numbers, full width */
/* Stats strip. Borrows the homepage .stat-value / .stat-label
         system exactly: Poppins 500 at clamp(40,5vw,72), tight -0.03em
         tracking, accent-coloured em for suffixes (% / + / hr).
         Below we rename .kp-stat-* -> .stat-* in the markup so the
         site-wide count-up animation picks these elements up too. */
.kp-stats {
  padding: 72px 0;
  background: var(--bg);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.kp-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 24px;
}

@media (min-width: 900px) {

  .kp-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* Site-wide stat-value / stat-label patterns. Identical to the
         homepage rules; ported here so the KP page is self-contained
         (no dependence on the homepage stylesheet). */
.stat-label {
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.45;
  max-width: 26ch;
}

/* Editorial blocks — used for "What is KP" and "Qatar's KP story" */
.kp-editorial {
  padding: 88px 0;
}

@media (min-width: 768px) {
  .kp-editorial {
    padding: 112px 0;
  }
}

.kp-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {

  .kp-editorial-grid {
    grid-template-columns: 460px 1fr;
    gap: 120px;
  }

}

/* Eyebrow + editorial heading: align with the homepage
         .section-label / .section-title typography exactly so the KP
         page reads as part of the same family. The eyebrow mirrors
         .mono-label (Inter 11px, --ink-55, 0.18em letter-spacing). The
         heading mirrors .section-title (Poppins 700, clamp 36/5vw/64,
         line-height 1.1, letter-spacing -0.03em, em recoloured to
         accent at same weight). */
.kp-editorial-label {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 16px;
}

.kp-editorial-heading {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  padding-bottom: 0.05em;
}

.kp-editorial-heading em {
  font-style: normal;
  font-weight: 700;
  color: #a8b3cc;
  white-space: nowrap;
}

.kp-editorial-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-70);
  margin: 0 0 20px;
}

.kp-editorial-body p:last-child {
  margin-bottom: 0;
}

.kp-editorial-body p strong {
  color: var(--ink);
  font-weight: 500;
}

/* Pull quote — used on Qatar's KP story */
.kp-pullquote {
  border-left: 2px solid var(--accent-soft);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
}

.kp-pullquote blockquote {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
}

.kp-pullquote cite {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-55);
  letter-spacing: 0.02em;
}

.kp-pullquote cite strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
         Qatar's KP journey — manual horizontal rail.

         Architecture (no sticky, no scroll-jacking):
           .kp-timeline (normal section, natural height)
             .kp-timeline-head (heading + lede + nav arrow buttons)
             .kp-timeline-stage (overflow-x: auto, scroll-snap)
               .kp-timeline-track (flex row of milestones)
                 .kp-milestone × 4
             .kp-timeline-progress (thin progress line + dots below)

         User navigates via drag, swipe (touch), keyboard arrows,
         arrow buttons in the head, or by clicking a progress dot.
         Active state derived from which milestone is closest to the
         stage centre when the user scrolls horizontally.
         ============================================================ */
.kp-timeline {
  background: var(--bg-raised);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 72px 0 80px;
  position: relative;
}

@media (min-width: 768px) {
  .kp-timeline {
    padding: 88px 0 80px;
  }
}

.kp-timeline-head {
  max-width: 1360px;
  margin: 0 auto 32px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {

  .kp-timeline-head {
    padding: 0 48px;
  }

}

@media (min-width: 1080px) {

  .kp-timeline-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }

}

@media (min-width: 1200px) {

  .kp-timeline-head {
    padding: 0 64px;
  }

}

.kp-timeline-head-text {
  max-width: 720px;
}

.kp-timeline-head-text .kp-editorial-heading {
  margin: 0 0 16px;
}

.kp-timeline-head-text .kp-timeline-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 60ch;
  margin: 0;
}

.kp-timeline-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.kp-timeline-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* No persistent highlight from mouse focus — only keyboard nav
         gets a visible ring (via :focus-visible). */
.kp-timeline-nav-btn:focus {
  outline: none;
}

.kp-timeline-nav-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kp-timeline-nav-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.kp-timeline-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.kp-timeline-nav-btn:disabled:hover {
  background: var(--bg);
  border-color: var(--ink-10);
  color: var(--ink);
}

.kp-timeline-nav-btn svg {
  width: 16px;
  height: 16px;
}

.kp-timeline-stage {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.kp-timeline-stage::-webkit-scrollbar {
  display: none;
}

.kp-timeline-stage[data-dragging="true"] {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* Track padding on left/right equals (stage width - milestone width)/2
         so that snap-align: center can centre each milestone in the
         viewport. The actual values are tuned in JS at runtime since
         stage and milestone widths are responsive. */
.kp-timeline-track {
  display: flex;
  padding: 0 0 16px;
  gap: 56px;
  min-width: max-content;
}

@media (min-width: 1080px) {

  .kp-timeline-track {
    padding: 0 0 24px;
    gap: 80px;
    min-width: max-content;
  }

}

.kp-milestone {
  flex-shrink: 0;
  width: clamp(320px, 60vw, 560px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  opacity: 0.35;
  transition: opacity 0.45s ease;
}

.kp-milestone[data-active="true"] {
  opacity: 1;
}

.kp-milestone[data-near="true"] {
  opacity: 0.6;
}

.kp-milestone-year {
  font-family: 'Poppins', "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #a8b3cc;
  margin: 0 0 18px;
  position: relative;
  display: inline-block;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
}

/* Faded years (non-active milestones) inherit the parent .kp-milestone
         opacity (0.35 default, 0.6 when near). The active year reads at
         full light-blue; the others fade in tone with the rest of the
         card content. */
.kp-milestone-year .kp-milestone-marker {
  position: absolute;
  bottom: 8px;
  left: calc(100% + 14px);
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-55);
  text-transform: uppercase;
  white-space: nowrap;
}

.kp-milestone-title {
  font-family: 'Poppins', "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 30ch;
}

.kp-milestone-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
  max-width: 54ch;
}

/* Progress rail. Dots are perfectly round (no transform scaling).
         Active state uses an outer soft ring rendered via ::after so
         the dot itself stays a true circle. */
.kp-timeline-progress {
  position: relative;
  max-width: 1360px;
  margin: 40px auto 0;
  padding: 0 24px;
}

@media (min-width: 768px) {

  .kp-timeline-progress {
    padding: 0 48px;
  }

}

@media (min-width: 1080px) {

  .kp-timeline-progress {
    margin-top: 48px;
  }

}

@media (min-width: 1200px) {

  .kp-timeline-progress {
    padding: 0 64px;
  }

}

.kp-timeline-progress-track {
  position: relative;
  height: 1px;
  background: linear-gradient(to right,
      transparent 0,
      transparent 14px,
      var(--ink-10) 14px,
      var(--ink-10) calc(100% - 14px),
      transparent calc(100% - 14px),
      transparent 100%);
}

.kp-timeline-progress-fill {
  position: absolute;
  top: 0;
  left: 14px;
  height: 1px;
  background: var(--ink);
  width: 0;
  transition: width 0.35s cubic-bezier(0.2, 0, 0, 1);
}

.kp-timeline-progress-nodes {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.kp-timeline-progress-node {
  position: relative;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.kp-timeline-progress-node::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--ink-25);
  transition: background 0.25s ease, border-color 0.25s ease;
  position: relative;
  z-index: 1;
}

.kp-timeline-progress-node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.kp-timeline-progress-node[data-reached="true"]::before {
  background: var(--ink);
  border-color: var(--ink);
}

.kp-timeline-progress-node[data-active="true"]::after {
  opacity: 0.1;
  transform: translate(-50%, -50%) scale(1);
}

.kp-timeline-progress-node-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-55);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

.kp-timeline-progress-node[data-active="true"] .kp-timeline-progress-node-label {
  color: var(--ink);
  font-weight: 500;
}

.kp-timeline-progress-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-55);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.45s ease;
  margin-right: 16px;
}

.kp-timeline-progress-hint[data-hidden="true"] {
  opacity: 0;
}

.kp-timeline-progress-hint .kp-hint-arrow {
  animation: kpHintNudge 1.6s ease-in-out infinite;
}

@keyframes kpHintNudge {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}

@media (max-width: 720px) {

  .kp-milestone-year {
    font-size: clamp(56px, 16vw, 88px);
  }

  .kp-milestone-title {
    font-size: 19px;
  }

  .kp-milestone-body {
    font-size: 14.5px;
  }

  .kp-milestone-marker {
    display: none;
  }

  .kp-timeline-nav {
    display: none;
  }

  .kp-timeline-progress-hint {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .kp-milestone,
  .kp-timeline-progress-fill,
  .kp-timeline-progress-node::before,
  .kp-timeline-progress-node::after,
  .kp-timeline-progress-hint {
    transition: none;
  }

  .kp-timeline-progress-hint .kp-hint-arrow {
    animation: none;
  }

}

/* ============================================================
         Trader compliance journey — vertical sticky-rail.

         Structure:
           .kp-process (relative container, comfortable padding)
             .kp-process-head (top intro, normal flow)
             .kp-process-body (2-column grid: rail | steps)
               .kp-process-rail (sticky to viewport on desktop)
                 vertical line + N nodes that fill as steps activate
               .kp-process-steps (column of steps; each step has its
                 own anchor zone for active state detection)
                 .kp-step × N

         On mobile, rail collapses to inline numbers per step (no
         sticky), or simply hidden — steps stand alone with their
         numerals.
         ============================================================ */
.kp-process {
  padding: 88px 0;
  position: relative;
}

@media (min-width: 768px) {
  .kp-process {
    padding: 120px 0;
  }
}

.kp-process-head {
  max-width: 760px;
  margin: 0 0 64px;
}

.kp-process-head .kp-editorial-heading {
  margin: 0 0 16px;
}

.kp-process-head .kp-process-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 64ch;
  margin: 0;
}

.kp-process-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

@media (min-width: 980px) {

  .kp-process-body {
    grid-template-columns: 240px 1fr;
    gap: 64px;
  }

}

/* The rail column: sticky on desktop. Renders a vertical line
         with N nodes, and a "fill" line that grows top-down as we
         progress through steps. */
.kp-process-rail {
  position: relative;
  display: none;
  /* hidden on mobile */
}

@media (min-width: 980px) {

  .kp-process-rail {
    display: block;
    position: sticky;
    top: 120px;
    height: max-content;
    align-self: start;
  }

}

.kp-process-rail-inner {
  position: relative;
  min-height: 360px;
  padding: 8px 0;
}

/* Track + fill removed per design directive: no connecting line,
         no progress fill. Only numbered dots remain, with active
         highlighted and the rest dimmed. */
.kp-process-rail-track,
.kp-process-rail-fill {
  display: none;
}

.kp-process-rail-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.kp-process-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
}

.kp-process-rail-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink-25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-55);
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Active dot: solid dark, white number, soft halo. All others
         stay in the default dimmed treatment regardless of whether
         they've been "reached" — only the current step is highlighted. */
.kp-process-rail-item[data-active="true"] .kp-process-rail-dot {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(26, 37, 64, 0.08);
}

.kp-process-rail-label {
  font-family: 'Inter', "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-55);
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}

.kp-process-rail-item[data-active="true"] .kp-process-rail-label {
  color: var(--ink);
  font-weight: 500;
}

/* Steps column */
.kp-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kp-step {
  position: relative;
  padding: 80px 0;
  border-bottom: 1px solid var(--ink-10);
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

.kp-step:first-child {
  padding-top: 0;
}

.kp-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kp-step[data-active="true"] {
  opacity: 1;
}

.kp-step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 20px;
}

.kp-step-num {
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-55);
  text-transform: uppercase;
  min-width: 60px;
}

.kp-step-meta {
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  text-transform: uppercase;
}

.kp-step-title {
  font-family: 'Poppins', "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 22ch;
}

.kp-step-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
  max-width: 56ch;
}

.kp-step-body strong {
  color: var(--ink);
  font-weight: 500;
}

.kp-step-extras {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kp-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink-05);
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-70);
  text-transform: uppercase;
}

.kp-step-tag svg,
.kp-step-tag img {
  width: 11px;
  height: 11px;
  color: var(--accent-soft);
  flex-shrink: 0;
  object-fit: contain;
}

/* Mobile: show inline step number, no rail */
@media (max-width: 979px) {
  .kp-step {
    padding: 48px 0;
    opacity: 1;
  }

  .kp-step-head {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  .kp-step-title {
    font-size: clamp(22px, 5.5vw, 28px);
  }

  .kp-step-body {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .kp-step,
  .kp-process-rail-fill,
  .kp-process-rail-dot {
    transition: none;
  }

}

/* Value matrix — four audience cards */
.kp-value {
  padding: 88px 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

.kp-value-head {
  max-width: 720px;
  margin: 0 0 56px;
}

.kp-value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 720px) {

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

}

@media (min-width: 1080px) {

  .kp-value-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

}

.kp-value-card {
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

.kp-value-audience {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 20px;
}

.kp-value-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kp-value-list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-70);
  padding: 12px 0;
  border-top: 1px solid var(--ink-10);
}

.kp-value-list li:first-child {
  padding-top: 0;
  border-top: none;
}

.kp-value-list strong {
  color: var(--ink);
  font-weight: 500;
}

/* Application form — tab toggle, multi-section */
.kp-apply {
  padding: 88px 0;
}

@media (min-width: 768px) {
  .kp-apply {
    padding: 112px 0;
  }
}

.kp-apply-head {
  max-width: 720px;
  margin: 0 0 40px;
}

.kp-apply-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: var(--surface);
  border-radius: 999px;
  margin: 0 0 40px;
}

.kp-tab {
  background: transparent;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-55);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.kp-tab[aria-selected="true"] {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(26, 37, 64, 0.08);
}

.kp-tab:hover {
  color: var(--ink);
}

.kp-form-shell {
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
}

.kp-form-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--ink-10);
  background: var(--bg);
}

@media (max-width: 600px) {
  .kp-form-meta {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.kp-form-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-55);
}

.kp-form-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent-soft);
}

.kp-form-body {
  padding: 32px;
}

@media (max-width: 600px) {
  .kp-form-body {
    padding: 24px 20px;
  }
}

.kp-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 40px;
}

.kp-fieldset:last-child {
  margin-bottom: 0;
}

.kp-fieldset-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 24px;
  padding: 0;
}

.kp-fieldset-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
}

.kp-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 720px) {

  .kp-field-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
  }

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

}

.kp-field {
  display: flex;
  flex-direction: column;
}

.kp-field-stock-year {
  max-width: 320px;
  margin-bottom: 28px;
}

.kp-field label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}

.kp-field label .req {
  color: var(--accent-soft);
  font-weight: 400;
  margin-left: 4px;
}

.kp-field input,
.kp-field select,
.kp-field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}

.kp-field input:focus,
.kp-field select:focus,
.kp-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-raised);
}

.kp-field textarea {
  min-height: 96px;
  resize: vertical;
}

.kp-field-hint {
  font-size: 12px;
  color: var(--ink-55);
  margin: -8px 0 20px;
}

/* File upload tiles */
.kp-uploads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px) {

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

}

.kp-upload {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border: 1px dashed var(--ink-25);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.kp-upload:hover {
  border-color: var(--accent);
  background: var(--bg-raised);
}

.kp-upload input[type="file"] {
  display: none;
}

.kp-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.kp-upload-text {
  flex: 1;
  min-width: 0;
}

.kp-upload-name {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp-upload-hint {
  font-size: 12px;
  color: var(--ink-55);
  margin: 0;
}

/* Declaration checkbox row */
.kp-declaration {
  margin: 24px 0 0;
  padding: 20px;
  background: var(--surface);
  border-radius: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.kp-declaration input[type="checkbox"] {
  margin: 2px 0 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.kp-declaration label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  cursor: pointer;
}

/* Submit row */
.kp-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-top: 1px solid var(--ink-10);
  background: var(--bg);
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .kp-form-foot {
    padding: 20px;
  }
}

.kp-form-foot .save-link {
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--ink-55);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kp-form-foot .save-link:hover {
  color: var(--ink);
}

/* Stock registration table
         3-column grid: particulars label, carat input, USD input.
         On narrow viewports the table collapses to stacked rows. */
.kp-stock-table {
  margin: 0;
  border-top: 1px solid var(--ink-10);
}

.kp-stock-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-10);
  align-items: center;
}

@media (min-width: 720px) {

  .kp-stock-row {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    padding: 14px 0;
  }

}

.kp-stock-row>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kp-stock-row [role="rowheader"] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.kp-stock-row strong {
  font-weight: 500;
  color: var(--ink);
}

.kp-stock-sub {
  font-size: 11px;
  color: var(--ink-55);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

.kp-stock-head {
  padding-top: 8px;
  padding-bottom: 12px;
  background: transparent;
  border-bottom: 1px solid var(--ink-10);
}

.kp-stock-head>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp-stock-row input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  text-align: right;
}

.kp-stock-row input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-raised);
}

.kp-stock-row input[readonly] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  cursor: default;
}

.kp-stock-total {
  background: var(--surface);
  padding: 16px 12px;
  border-bottom: none;
  border-radius: 8px;
  margin-top: 4px;
}

@media (min-width: 720px) {

  .kp-stock-total {
    padding: 16px 12px;
  }

}

/* ── Drupal form element normalisation inside kp-field wrappers ────────── */

/* Strip Drupal's .form-item wrapper margin/padding so our kp-field controls spacing */
.page-kimberley .kp-field .form-item,
.page-kimberley .kp-field .js-form-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Show Drupal's .form-required asterisk styled to match the prototype's .req span. */
.page-kimberley .kp-field .form-required::after,
.page-kimberley .kp-field label .form-required::after {
  content: '*';
  color: var(--accent-soft);
  font-weight: 400;
  margin-left: 4px;
  background: none;
}

/* Drupal description text below fields */
.page-kimberley .kp-field .form-item--description,
.page-kimberley .kp-field .description {
  font-size: 11px;
  color: var(--ink-55);
  margin: 4px 0 0;
}

/* Stretch Drupal inputs to fill the kp-field container */
.page-kimberley .kp-field .form-text,
.page-kimberley .kp-field .form-tel,
.page-kimberley .kp-field .form-email,
.page-kimberley .kp-field .form-number,
.page-kimberley .kp-field .form-date,
.page-kimberley .kp-field .form-select,
.page-kimberley .kp-field .form-textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Stock table: strip form-item margin around number inputs */
.page-kimberley .kp-stock-row .form-item,
.page-kimberley .kp-stock-row .js-form-item {
  margin: 0;
}

.page-kimberley .kp-stock-row .form-item label,
.page-kimberley .kp-stock-row .js-form-item label {
  display: none;
}

/* File upload tiles — compact Drupal managed_file widget */
.page-kimberley .kp-upload-field {
  margin-left: auto;
  flex-shrink: 0;
}

.page-kimberley .kp-upload-field .form-item,
.page-kimberley .kp-upload-field .js-form-item {
  margin: 0;
}

/* Hide the Drupal file field label (we use kp-upload-text instead) */
.page-kimberley .kp-upload-field label {
  display: none;
}

/* Hide Drupal's description and size-limit text inside upload tiles */
.page-kimberley .kp-upload-field .form-item--description,
.page-kimberley .kp-upload-field .description,
.page-kimberley .kp-upload-field .file-upload-help {
  display: none;
}

/* Managed file widget layout */
.page-kimberley .kp-upload-field .js-form-managed-file,
.page-kimberley .kp-upload-field .form-managed-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Override the hide-file-input rule from the static design — Drupal needs a real input */
.page-kimberley .kp-upload .kp-upload-field input[type="file"] {
  display: block;
  font-size: 11px;
  color: var(--ink-55);
  max-width: 130px;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Style Drupal's "Remove" ajax button */
.page-kimberley .kp-upload-field .button,
.page-kimberley .kp-upload-field button[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.page-kimberley .kp-upload-field .button:hover,
.page-kimberley .kp-upload-field button[type="submit"]:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* Declaration checkbox: strip .form-type-checkbox wrapper margins */
.page-kimberley .kp-declaration .form-item,
.page-kimberley .kp-declaration .js-form-item {
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Submit button in kp-form-foot */
.kp-form-foot .form-actions,
.kp-form-foot .webform-actions {
  margin: 0;
}

.kp-form-foot .webform-button--submit,
.kp-form-foot [data-drupal-selector="edit-actions-submit"],
.kp-form-foot button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s ease;
}

.kp-form-foot .webform-button--submit:hover,
.kp-form-foot [data-drupal-selector="edit-actions-submit"]:hover,
.kp-form-foot button[type="submit"]:hover {
  transform: translateY(-1px);
}

.kp-form-foot .webform-button--submit .arrow,
.kp-form-foot [data-drupal-selector="edit-actions-submit"] .arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.kp-form-foot .webform-button--submit:hover .arrow,
.kp-form-foot [data-drupal-selector="edit-actions-submit"]:hover .arrow {
  transform: translate(2px, -2px);
}

/* ── Drupal form element normalisation inside kp-field wrappers ────────── */

/* Strip Drupal's .form-item wrapper margin/padding so our kp-field controls spacing */
.page-kimberley .kp-field .form-item,
.page-kimberley .kp-field .js-form-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Show Drupal's .form-required asterisk styled to match the prototype's .req span. */
.page-kimberley .kp-field .form-required::after,
.page-kimberley .kp-field label .form-required::after {
  content: '*';
  color: var(--accent-soft);
  font-weight: 400;
  margin-left: 4px;
  background: none;
}

/* Drupal description text below fields */
.page-kimberley .kp-field .form-item--description,
.page-kimberley .kp-field .description {
  font-size: 11px;
  color: var(--ink-55);
  margin: 4px 0 0;
}

/* Stretch Drupal inputs to fill the kp-field container */
.page-kimberley .kp-field .form-text,
.page-kimberley .kp-field .form-tel,
.page-kimberley .kp-field .form-email,
.page-kimberley .kp-field .form-number,
.page-kimberley .kp-field .form-date,
.page-kimberley .kp-field .form-select,
.page-kimberley .kp-field .form-textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Stock table: strip form-item margin around number inputs */
.page-kimberley .kp-stock-row .form-item,
.page-kimberley .kp-stock-row .js-form-item {
  margin: 0;
}

.page-kimberley .kp-stock-row .form-item label,
.page-kimberley .kp-stock-row .js-form-item label {
  display: none;
}

/* File upload tiles — compact Drupal managed_file widget */
.page-kimberley .kp-upload-field {
  margin-left: auto;
  flex-shrink: 0;
}

.page-kimberley .kp-upload-field .form-item,
.page-kimberley .kp-upload-field .js-form-item {
  margin: 0;
}

/* Hide the Drupal file field label (we use kp-upload-text instead) */
.page-kimberley .kp-upload-field label {
  display: none;
}

/* Hide Drupal's description and size-limit text inside upload tiles */
.page-kimberley .kp-upload-field .form-item--description,
.page-kimberley .kp-upload-field .description,
.page-kimberley .kp-upload-field .file-upload-help {
  display: none;
}

/* Managed file widget layout */
.page-kimberley .kp-upload-field .js-form-managed-file,
.page-kimberley .kp-upload-field .form-managed-file {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Override the hide-file-input rule from the static design — Drupal needs a real input */
.page-kimberley .kp-upload .kp-upload-field input[type="file"] {
  display: block;
  font-size: 11px;
  color: var(--ink-55);
  max-width: 130px;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Style Drupal's "Remove" ajax button */
.page-kimberley .kp-upload-field .button,
.page-kimberley .kp-upload-field button[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.page-kimberley .kp-upload-field .button:hover,
.page-kimberley .kp-upload-field button[type="submit"]:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* Upload tile: full-tile click target matching the static prototype.
   The native file input stretches across the whole .kp-upload card,
   invisible, so clicking anywhere on the tile opens the file picker.
   The Drupal "Upload" button is positioned off-screen but stays in the
   DOM so JS can programmatically click it on file change. */
.page-kimberley .kp-upload {
  position: relative;
}

.page-kimberley .kp-upload .kp-upload-field {
  margin: 0;
}

.page-kimberley .kp-upload .kp-upload-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  border: 0;
  background: transparent;
  max-width: none;
  z-index: 2;
}

.page-kimberley .kp-upload .kp-upload-field input[type="submit"][value="Upload"],
.page-kimberley .kp-upload .kp-upload-field .form-submit[value="Upload"] {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Multi-file selection checkboxes and the "Remove selected" / "Remove" button
   must sit above the invisible file-input overlay (z-index: 2) — otherwise
   the overlay swallows their clicks and they appear unresponsive. */
.page-kimberley .kp-upload-field input[type="checkbox"],
.page-kimberley .kp-upload-field input[type="submit"]:not([value="Upload"]),
.page-kimberley .kp-upload-field .form-submit:not([value="Upload"]),
.page-kimberley .kp-upload-field .button:not([value="Upload"]) {
  position: relative;
  z-index: 3;
}

/* Re-show per-row filename labels next to each removal checkbox so the user
   can tell which file they are about to remove. Truncate with ellipsis so
   long names don't push the tile out of shape. */
.page-kimberley .kp-upload-field .js-form-managed-file label,
.page-kimberley .kp-upload-field .form-managed-file label {
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  z-index: 3;
}

/* When a file has been uploaded, the file row + Remove button replace
   the file input. Show them on the right side of the tile so the user
   can see what's uploaded. */
.page-kimberley .kp-upload-field .file {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-70);
}

/* Upload validation error (wrong extension, oversize file, server-side
   rejection, etc.): anchor it to .kp-upload (position: relative) so the
   long message renders as a full-width strip directly below the tile
   instead of overflowing across the tile text. */
.page-kimberley .kp-upload .messages--error,
.page-kimberley .kp-upload .file-upload-js-error,
.page-kimberley .kp-upload .form-item--error-message,
.page-kimberley .kp-upload .form-item__error-message,
.page-kimberley .kp-upload .error-summary,
.page-kimberley .kp-upload details.error,
.page-kimberley .kp-upload [role="alert"] {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 3;
  background: #fdf2f2;
  color: #9b2c2c;
  border: 1px solid #f4c2c2;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  text-align: start;
  margin: 0;
}

.page-kimberley .kp-upload .messages--error em.placeholder,
.page-kimberley .kp-upload .file-upload-js-error em.placeholder,
.page-kimberley .kp-upload .form-item--error-message em.placeholder,
.page-kimberley .kp-upload .form-item__error-message em.placeholder,
.page-kimberley .kp-upload .error-summary em.placeholder {
  font-style: normal;
  font-weight: 600;
  background: none;
}

/* Tighten the bullet list inside the absolute-positioned summary so it
   doesn't add extra vertical bulk below the tile. */
.page-kimberley .kp-upload .messages--error ul,
.page-kimberley .kp-upload .error-summary ul,
.page-kimberley .kp-upload details.error ul,
.page-kimberley .kp-upload [role="alert"] ul {
  margin: 4px 0 0;
  padding-inline-start: 18px;
}

/* Inline confirmation banner shown in place of the submit row after a
   successful submission. Mirrors the prototype's kpFlipToSuccess() block:
   a navy-circle checkmark on the left, Poppins-500 title (15px) and ink-55
   subtitle (13px) stacked to the right. The banner sits INSIDE
   .kp-form-foot, which already supplies padding/background/border-top —
   so no card chrome is added here (would double-pad it). */
.page-kimberley .webform-confirmation {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--ink);
}

.page-kimberley .webform-confirmation::before {
  content: '\2713';
  grid-row: span 2;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.page-kimberley .webform-confirmation__title,
.page-kimberley .webform-confirmation h2 {
  grid-column: 2;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.page-kimberley .webform-confirmation__message {
  grid-column: 2;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-55);
  margin: 2px 0 0;
  line-height: 1.4;
}

.page-kimberley .webform-confirmation__back {
  display: none;
}

/* When the success banner takes over .kp-form-foot, flatten the foot so
   the banner appears as a single tight strip (no flex justify-content
   space-between, no centered alignment for a multi-line block). */
.page-kimberley .kp-form-foot:has(.webform-confirmation) {
  justify-content: flex-start;
  align-items: flex-start;
}

.page-kimberley .kp-form-foot .webform-confirmation {
  flex: 1;
}

/* Declaration checkbox: strip .form-type-checkbox wrapper margins */
.page-kimberley .kp-declaration .form-item,
.page-kimberley .kp-declaration .js-form-item {
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Submit button in kp-form-foot — duplicate block removed (see above) */

/* ============================================================
         FAQ — search-driven, two-column scannable, expand-in-place.

         Structure:
           .kp-faq (section)
             .kp-faq-head (heading + lede, single column at top)
             .kp-faq-toolbar (search input + topic chips + result count)
             .kp-faq-columns (CSS columns layout; each .kp-faq-item is
                              break-inside-avoid so expanded items just
                              get taller within their column)
             .kp-faq-empty (no-results state)

         Open-state behaviour is one-at-a-time, driven by JS.
         ============================================================ */
.kp-faq {
  padding: 88px 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

@media (min-width: 768px) {
  .kp-faq {
    padding: 120px 0;
  }
}

.kp-faq-head {
  max-width: 760px;
  margin: 0 0 40px;
  text-align: left;
}

.kp-faq-head h2 {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
  padding-bottom: 0.05em;
}

.kp-faq-head h2 em {
  font-style: normal;
  font-weight: 700;
  color: #a8b3cc;
  white-space: nowrap;
}

.kp-faq-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
  max-width: 60ch;
}

/* Toolbar: search input + chip filters + result count.
         On mobile they stack; on desktop they flow horizontally. */
.kp-faq-toolbar {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kp-faq-search {
  position: relative;
}

.kp-faq-search-input {
  width: 100%;
  font-family: 'Inter', "IBM Plex Sans Arabic", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 16px 52px 16px 52px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.kp-faq-search-input::placeholder {
  color: var(--ink-55);
}

.kp-faq-search-input:focus {
  outline: none;
  border-color: var(--ink-25);
  background: var(--bg-raised);
  box-shadow: 0 0 0 4px rgba(26, 37, 64, 0.05);
}

.kp-faq-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-55);
  pointer-events: none;
}

.kp-faq-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-05);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ink-55);
  transition: background 0.2s ease, color 0.2s ease;
}

.kp-faq-search-clear:hover {
  background: var(--ink-10);
  color: var(--ink);
}

.kp-faq-search[data-has-query="true"] .kp-faq-search-clear {
  display: flex;
}

/* Chip filters */
.kp-faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.kp-faq-chip {
  font-family: 'Inter', "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.kp-faq-chip:hover {
  border-color: var(--ink-25);
  color: var(--ink);
}

.kp-faq-chip[data-active="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.kp-faq-chip-count {
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  color: inherit;
  opacity: 0.6;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

.kp-faq-status {
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  text-transform: uppercase;
  text-align: center;
  min-height: 16px;
}

/* Two-column FAQ list using CSS columns.
         break-inside-avoid keeps each item intact within a column. */
.kp-faq-columns {
  margin: 0;
  column-gap: 40px;
  column-count: 1;
}

@media (min-width: 900px) {

  .kp-faq-columns {
    column-count: 2;
  }

}

.kp-faq-item {
  display: block;
  break-inside: avoid;
  border-bottom: 1px solid var(--ink-10);
  margin-bottom: 0;
  /* prevent column-break inside an item */
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.kp-faq-item[data-hidden="true"] {
  display: none;
}

.kp-faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 0;
  text-align: left;
  font-family: 'Poppins', "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.kp-faq-question:hover .kp-faq-q-text {
  color: var(--accent);
}

.kp-faq-q-text {
  flex: 1;
  transition: color 0.2s ease;
}

.kp-faq-q-text mark {
  background: rgba(168, 179, 204, 0.35);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 1px;
}

.kp-faq-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
}

.kp-faq-toggle::before,
.kp-faq-toggle::after {
  content: '';
  position: absolute;
  background: var(--ink-55);
  top: 50%;
  left: 50%;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), background 0.2s ease;
}

.kp-faq-toggle::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.kp-faq-toggle::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.kp-faq-item[data-open="true"] .kp-faq-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.kp-faq-item[data-open="true"] .kp-faq-toggle::before {
  background: var(--ink);
}

.kp-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.2, 0, 0, 1);
}

.kp-faq-item[data-open="true"] .kp-faq-answer {
  max-height: 1200px;
}

.kp-faq-answer-inner {
  padding: 0 0 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-70);
}

.kp-faq-answer-inner p {
  margin: 0 0 12px;
}

.kp-faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.kp-faq-answer-inner strong {
  color: var(--ink);
  font-weight: 500;
}

.kp-faq-answer-inner ul {
  margin: 0 0 12px;
  padding: 0 0 0 18px;
}

.kp-faq-answer-inner li {
  margin-bottom: 6px;
}

.kp-faq-answer-inner a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.kp-faq-answer-inner a:hover {
  color: var(--ink);
}

.kp-faq-item-cat {
  display: inline-block;
  font-family: 'JetBrains Mono', "IBM Plex Sans Arabic", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* No-results empty state */
.kp-faq-empty {
  max-width: 480px;
  margin: 60px auto 0;
  text-align: center;
  padding: 40px 24px;
  display: none;
}

.kp-faq-empty[data-show="true"] {
  display: block;
}

.kp-faq-empty-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  color: var(--ink-25);
}

.kp-faq-empty h3 {
  font-family: 'Poppins', "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 8px;
}

.kp-faq-empty p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 16px;
}

.kp-faq-empty-cta {
  font-family: 'Inter', "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.kp-faq-empty-cta:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {

  .kp-faq-answer,
  .kp-faq-toggle::before,
  .kp-faq-toggle::after,
  .kp-faq-search-input,
  .kp-faq-chip {
    transition: none;
  }

}

/* CTA strip - dark navy band above the footer, unified across
         all pages (homepage uses id="apply", tenders uses id="host",
         this page uses id="kp-contact"). Single primary CTA on the
         right; eyebrow/title/lede on the left. */
/* ============ UTILITIES (replace former inline style= attributes) ============
   These use !important deliberately: an inline style always beats stylesheet
   rules, so to faithfully replace inline styles a utility must override
   component CSS the same way. This is the standard convention for utilities. */
.u-media-cover {
  object-fit: cover !important;
  display: block !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-nowrap {
  white-space: nowrap !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-mb-32 {
  margin-bottom: 32px !important;
}

.u-mt-24-lh {
  margin-top: 24px !important;
  line-height: 1.6 !important;
}

.u-flex-row-24 {
  display: flex !important;
  gap: 24px !important;
  align-items: center !important;
}

.u-flex-end {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.u-text-white {
  color: #fff !important;
}

.u-text-slate {
  color: #a8b3cc !important;
}

.u-story-lede {
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 24px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   SCOPED STYLES FOR TENDERS.CSS ()
   ========================================================================== */

/* QDE — tenders page styles (complete, in original order).
   Self-contained: this is the only stylesheet each page needs.
   Asset url() paths use ../assets because this file lives in css/. */

/* ============ TOKENS ============ */
/html body,
html body,
html body {
  overflow-x: hidden;
}

*============LAYOUT============*/ .split-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: inherit;
}

/* ============ SECTIONS ============ */

@media (min-width: 768px) {
  .section {
    padding: 140px 0;
  }
}

@media (min-width: 1200px) {
  .section {
    padding: 180px 0;
  }
}

/* ============ STATS ============ */

@media (min-width: 900px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============ ECOSYSTEM CARDS ============ */

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card:hover {
  background: var(--bg-raised);
}

.card-link {
  margin-top: auto;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

/* ============ BENEFITS ============ */

@media (min-width: 700px) {
  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefit:hover {
  background: var(--bg-raised);
}

.benefit-ico svg {
  width: 100%;
  height: 100%;
}

/* ============ STICKY STORY ============ */

@media (min-width: 900px) {

  .sticky-story-inner {
    grid-template-columns: 1fr 1fr;
  }

}

@media (min-width: 900px) {}

.sticky-media .frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  transform: scale(1.04);
}

.sticky-media .frame.active {
  opacity: 1;
  transform: scale(1);
}

.sticky-media .ph {
  width: 100%;
  height: 100%;
}

.sticky-media .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
}

@media (min-width: 900px) {}

.sticky-slide .num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  color: var(--accent);
  font-size: 15px;
}

.sticky-slide h3 {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

.sticky-slide p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0;
}

/* Slide counter (fixed to the sticky media) */

.sticky-counter span {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.4s ease;
}

.sticky-counter span.active {
  background: var(--accent);
}

/* ============ FEATURE ROW ============ */

@media (min-width: 900px) {

  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .feature-row.reverse .feature-media {
    order: 2;
  }

}

@media (min-width: 900px) {}

/* ============ HORIZONTAL SCROLL ============ */
@media (min-width: 768px) {}

@media (min-width: 1200px) {}

.news-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--bg-raised);
  border: 1px solid var(--ink-10);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
}

.news-card-media .ph {
  width: 100%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
}

.news-card:hover .news-card-media .ph {
  transform: scale(1.06);
}

/* ============ QUOTES ============ */

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============ APPLY ============ */

/* 2-column layout: headline + CTAs on the left, QDE logo on the
         right (same recipe as homepage). */
.apply-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {

  .apply-row {
    grid-template-columns: 1fr auto;
  }

}

.apply-logo {
  height: 88px;
  width: auto;
  opacity: 0.95;
  display: block;
}

.apply-title em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

.apply .btn-primary {
  background: #fff;
  color: #0c0c0c;
}

.apply .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.apply .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
}

/* ============ VAULT HERO (round 32: full-bleed photo, dark scrim,
         left-aligned text overlay with spec strip).
         A separate visual register from the homepage hero \u2014 photo over
         video, doc-style spec strip, no big marketing copy. */
.vault-hero {
  position: relative;
  min-height: 92vh;
  background: #050709;
  color: #e6ecf5;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 80px;
}

@media (min-width: 900px) {
  .vault-hero {
    padding: 160px 0 100px;
    min-height: 96vh;
  }
}

.vault-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vault-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  filter: contrast(1.1) brightness(0.85);
}

.vault-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 7, 9, 0.95) 0%, rgba(5, 7, 9, 0.7) 35%, rgba(5, 7, 9, 0.35) 65%, transparent 100%),
    linear-gradient(180deg, rgba(5, 7, 9, 0.55) 0%, transparent 30%, transparent 60%, rgba(5, 7, 9, 0.85) 100%);
  pointer-events: none;
}

.vault-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}

.vault-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(230, 236, 245, 0.65);
}

.vault-hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8b3cc;
  box-shadow: 0 0 12px rgba(168, 179, 204, 0.55);
}

.vault-hero-eyebrow .mono-label {
  color: rgba(230, 236, 245, 0.7);
}

.vault-hero-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 7.5vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0;
  color: #e6ecf5;
}

.vault-hero-title em {
  font-style: normal;
  color: #a8b3cc;
}

.vault-hero-title .hero-line {
  display: block;
}

.vault-hero-lede {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  max-width: 52ch;
  color: rgba(230, 236, 245, 0.78);
  margin: 0;
}

.vault-hero-specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 28px 0;
  border-top: 1px solid rgba(230, 236, 245, 0.18);
  border-bottom: 1px solid rgba(230, 236, 245, 0.18);
  max-width: 640px;
}

@media (max-width: 640px) {

  .vault-hero-specs {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}

.vault-hero-spec-value {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #e6ecf5;
  margin-bottom: 6px;
}

.vault-hero-spec-value em {
  font-style: normal;
  color: #a8b3cc;
  font-size: 0.55em;
  margin-left: 2px;
}

.vault-hero-spec-label {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(230, 236, 245, 0.6);
}

.vault-hero-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0f1a;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vault-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}

.vault-hero-cta .arrow {
  transition: transform 0.25s ease;
}

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

/* ============ STORED ITEMS (round 32: line-art icons in cards) ============ */
/* Kite/diamond watermarks: same recipe as the homepage's
         benefits and ecosystem sections, positioned to mirror that
         visual rhythm on the vault page. */
#vault-stored {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#vault-stored::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -200px;
  width: 760px;
  height: 860px;
  z-index: -1;
  background: linear-gradient(140deg,
      color-mix(in srgb, var(--accent) 14%, transparent) 0%,
      transparent 65%);
  clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
  filter: blur(2px);
  opacity: 0.32;
  pointer-events: none;
}

#vault-tiers {
  position: relative;
  isolation: isolate;
}

#vault-tiers::after {
  content: "";
  position: absolute;
  left: -120px;
  top: -80px;
  width: 640px;
  height: 720px;
  z-index: -1;
  background: linear-gradient(220deg,
      color-mix(in srgb, var(--accent) 14%, transparent) 0%,
      transparent 65%);
  clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
  filter: blur(2px);
  opacity: 0.28;
  pointer-events: none;
}

.stored-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}

@media (min-width: 700px) {
  .stored-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1080px) {
  .stored-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.stored-item {
  position: relative;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 12px;
  cursor: default;
  /* Variant B glass (matches tier cards / nav). */
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 14px 44px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stored-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

html[data-theme="light"] .stored-item {
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.25), transparent 70%),
    rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(26, 37, 64, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    0 14px 44px rgba(26, 37, 64, 0.14);
}

.stored-item:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 22px 60px rgba(0, 0, 0, 0.32);
}

html[data-theme="light"] .stored-item:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(26, 37, 64, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px 0 0 rgba(255, 255, 255, 0.6),
    0 22px 60px rgba(26, 37, 64, 0.2);
}

.stored-icon {
  width: 56px;
  height: 56px;
  color: #a8b3cc;
}

.stored-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

[data-theme="light"] .stored-icon {
  color: #5b6f99;
}

/* .stored-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
} */

.stored-body {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
}

/* ============ TIERS CAROUSEL (round 32: hover-to-grow) ============
         Three tiers laid out as a flex row. Each tier shrinks slightly
         by default (scale 0.92) and the hovered/focused one scales to
         1.04, lifting it forward. The non-focused ones fade slightly.
         Click on any tier sets it as the persistent focus. */
.tiers-carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  margin-top: 56px;
}

@media (min-width: 900px) {

  .tiers-carousel {
    flex-direction: row;
    gap: 20px;
    padding: 32px 0;
  }

}

.tier-card {
  position: relative;
  flex: 1 1 0;
  border-radius: 16px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  will-change: transform;
  /* Variant B glass recipe (matches nav). Layered radial highlights
           for the curvature sheen, low-blur backdrop, four-sided inset
           border simulating a pane edge. No opacity dimming on the card
           itself \u2014 that was muddying the text on hover. */
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.30), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(115%) contrast(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 14px 44px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  border-radius: 0;
  pointer-events: none;
}

/* Light mode: re-tint the radial highlights toward white-on-paper
         so the glass reads on an off-white page. */
html[data-theme="light"] .tier-card {
  background:
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 400px 80px at 80% 100%, rgba(255, 255, 255, 0.25), transparent 70%),
    rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(26, 37, 64, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    0 14px 44px rgba(26, 37, 64, 0.14);
}

@media (min-width: 900px) {

  .tier-card {
    transform: scale(0.94);
  }

  .tier-card.is-focused {
    transform: scale(1.04);
    z-index: 2;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      inset 1px 0 0 rgba(255, 255, 255, 0.06),
      inset -1px 0 0 rgba(255, 255, 255, 0.06),
      0 30px 80px -25px rgba(0, 0, 0, 0.55);
  }

  html[data-theme="light"] .tier-card.is-focused {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(26, 37, 64, 0.05),
      inset 1px 0 0 rgba(255, 255, 255, 0.5),
      inset -1px 0 0 rgba(255, 255, 255, 0.5),
      0 30px 80px -25px rgba(26, 37, 64, 0.25);
  }

  .tiers-carousel:hover .tier-card:not(:hover) {
    transform: scale(0.92);
  }

  .tiers-carousel .tier-card:hover {
    transform: scale(1.04);
    z-index: 3;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      inset 1px 0 0 rgba(255, 255, 255, 0.06),
      inset -1px 0 0 rgba(255, 255, 255, 0.06),
      0 30px 80px -25px rgba(0, 0, 0, 0.6);
  }

  html[data-theme="light"] .tiers-carousel .tier-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(26, 37, 64, 0.05),
      inset 1px 0 0 rgba(255, 255, 255, 0.5),
      inset -1px 0 0 rgba(255, 255, 255, 0.5),
      0 30px 80px -22px rgba(26, 37, 64, 0.28);
  }

}

.tier-card-eyebrow {
  font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8b3cc;
}

.tier-card-name {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.tier-card-tagline {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0;
  min-height: 2.5em;
}

.tier-card-list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ink-10);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tier-card-list li {
  position: relative;
  padding-left: 18px;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-70);
}

.tier-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: #a8b3cc;
}

.tier-card-cta {
  margin-top: auto;
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  color: var(--ink);
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  /* Old navbar Variant B glass recipe: radial highlights + four-sided
           inset border, no opacity dimming on text. */
  background:
    radial-gradient(ellipse 240px 40px at 50% 0%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 200px 30px at 80% 100%, rgba(255, 255, 255, 0.10), transparent 70%),
    rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tier-card-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 50%);
  pointer-events: none;
}

.tier-card-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.10),
    0 12px 36px rgba(0, 0, 0, 0.32);
}

.tier-card-cta .arrow {
  transition: transform 0.25s ease;
  position: relative;
  z-index: 1;
}

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

/* ============ MEMBERSHIP TIERS ============ */

@media (min-width: 900px) {}

.tier:hover {
  background: var(--bg-raised);
}

.tier-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-70);
  position: relative;
  padding-left: 22px;
}

.tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ============ DOCUMENTS HUB ============ */

@media (min-width: 700px) {
  .docs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .docs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.doc:hover {
  background: var(--bg-raised);
}

.doc-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--ink-10);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.doc-icon::after {
  content: "PDF";
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--accent);
}

.doc-meta .arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.doc:hover .doc-meta .arrow {
  transform: translate(2px, -2px);
}

/* ============ AFFILIATES ============ */
.affiliates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-10);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}

@media (min-width: 700px) {
  .affiliates {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .affiliates {
    grid-template-columns: repeat(4, 1fr);
  }
}

.affiliate:hover {
  background: var(--bg-raised);
}

.affiliate-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.affiliate-abbr {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

.affiliate-name {
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.4;
  margin: 0;
}

/* ============ APPLY MODAL ============ */
.modal {
  background: var(--bg-raised);
  color: var(--ink);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {}

.modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
  margin-bottom: 14px;
}

.modal-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 0 0 28px;
}

.modal-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {

  .modal-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-help-trigger:hover .form-help-icon,
.form-help-trigger:focus .form-help-icon,
.form-field input,
.form-field select,
.form-disclaimer {
  font-size: 11px;
  color: var(--ink-40);
  line-height: 1.5;
  margin: 0;
}

/* will-change: transform; */
/* will-change: transform; */
/* Very faint drop-shadow for ambient lift. The silhouette
           edges are already softened via the SVG Gaussian blur so we
           don't need a strong shadow on top. */
/* filter: sdrop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.10)); */


.cursor-pointer>svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pointer-light,
.pointer-dark {
  transition: opacity 0.4s ease;
}

.pointer-light {
  opacity: 0;
}

.pointer-dark {
  opacity: 1;
}

html body.over-dark .pointer-light,
html body.over-dark .pointer-dark
/* Force every element to keep cursor:none so the OS pointer
         never reappears — including links, buttons, form fields. */
@media (pointer: fine) {
  /* custom cursor reverted */
}

@media (max-width: 768px) {

  .cursor-pointer {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .cursor-pointer {
    display: none;
  }

}

/* ============ VAULT PAGE — cover-style register ============
         The vault interior page mirrors the homepage's vault cover
         section directly. Same atmospheric backdrop, same typography,
         same layout language. The cover and the interior are one
         continuous experience. */

@media (min-width: 980px) {

  .vault-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 96px;
  }

}

.vault-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 30px 80px -20px rgba(64, 50, 30, 0.35),
    0 50px 120px -40px rgba(64, 50, 30, 0.20);
}

.vault-media .ph {
  width: 100%;
  height: 100%;
  transition: transform 1.6s cubic-bezier(0.2, 0, 0, 1);
}

.vault-media:hover .ph {
  transform: scale(1.04);
}

.vault-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(122, 138, 174, 0.18);
  border-radius: 18px;
  pointer-events: none;
}

.vault-copy {
  position: relative;
}

.vault-eyebrow {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #7a8aae;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.vault-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.vault-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 18px 0 24px;
  text-wrap: balance;
  padding-bottom: 0.05em;
  color: var(--ink);
}

.vault-title em {
  font-style: normal;
  color: #7a8aae;
  font-weight: 700;
}

.vault-lede,
.vault-lede p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0 0 36px;
  max-width: 48ch;
}

.vault-specs {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 60px;
  margin: 0 0 40px;
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, #7a8aae 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #7a8aae 35%, transparent);
}

.vault-spec-value {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

.vault-spec-value em {
  font-style: normal;
  color: #7a8aae;
  font-weight: 500;
}

.vault-spec-label {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-55);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.vault-features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}

.vault-features li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-70);
}

.vault-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 11px;
  background: #7a8aae;
  clip-path: polygon(50% 0%, 99.6% 30%, 50% 100%, 0.4% 30%);
}

.vault-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, #7a8aae 70%, transparent);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.vault-cta:hover {
  background: #7a8aae;
  border-color: #7a8aae;
  color: #fff;
  transform: translateY(-1px);
}

.vault-cta .arrow {
  transition: transform 0.25s ease;
}

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

@media (max-width: 760px) {

  .vault-section {
    padding: 80px 0 100px;
  }

  .vault-specs {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .vault-features {
    grid-template-columns: 1fr;
  }

}

/* Section titles + stat values use the lighter slate-blue across the page. */
.vault-page .section-title em,
.vault-page .feature-title em {
  color: #a8b3cc;
}

.vault-page .stat-value em {
  color: #a8b3cc;
}

.vault-page .section-label .mono-label {
  color: rgba(122, 138, 174, 0.85);
}

/* Tighter section spacing between consecutive editorial sections. */
.vault-page .section+.section {
  padding-top: 60px;
}

/* Apply CTA — gold-warm dark in both themes for vault page. */
.vault-page .apply {
  background: #14110b !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.vault-page .apply::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 80% 20%,
      rgba(122, 138, 174, 0.15) 0%,
      rgba(122, 138, 174, 0.03) 40%,
      transparent 65%),
    linear-gradient(180deg, #14110b 0%, #0e0a06 100%);
  pointer-events: none;
}

.vault-page .apply>* {
  position: relative;
  z-index: 1;
}

.vault-page .apply-title em {
  color: #a8b3cc;
}

/* =========================================================
         TENDERS PAGE
         A schedule of upcoming and recent rough/polished tenders,
         viewable as either a horizontal gantt-style monthly
         calendar or a vertical list of detail cards. Filter chips
         narrow by tender type; a segmented control flips between
         the two views.
         ========================================================= */

/* Hero — same dark navy tone treatment as the other interior
         pages. Big title, lede, two CTAs (member portal + host a
         tender). */
.tenders-hero {
  position: relative;
  background: #0e1424;
  color: #fff;
  padding: 200px 0 120px;
  overflow: hidden;
  /* Fills the viewport so there is no light section visible on
           first paint. Matches the homepage .hero treatment. dvh
           handles the mobile address-bar collapse; vh is the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .tenders-hero {
    padding: 220px 0 120px;
  }
}

@media (min-width: 1200px) {
  .tenders-hero {
    padding: 240px 0 120px;
  }
}

/* Background image layer: the photographic hero (tenders-hero.jpg).
         The image is composed so its tray of diamonds sits in the right
         portion of the frame, leaving deep navy negative space on the
         left for the headline copy. The legibility veil below
         (.tenders-hero-veil) provides any additional left-side fade.
         transform-origin biases the slow drift toward the right so the
         tray stays anchored in frame as the image breathes.

         On narrow viewports (<900px) the photo is held back and the
         page falls back to the layered radial-gradient atmosphere. At
         those widths the available space is too narrow for the photo
         and copy to spatially separate, so the diamonds end up
         crowding the title. Mobile keeps the same dark visual identity
         via the gradient. */
.tenders-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 80% at 75% 40%,
      rgba(122, 138, 174, 0.28) 0%,
      rgba(70, 88, 130, 0.14) 35%,
      transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 70%,
      rgba(168, 179, 204, 0.10) 0%,
      transparent 55%),
    radial-gradient(circle at 90% 35%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 25%),
    linear-gradient(140deg, #0a0f1f 0%, #0e1424 50%, #131b30 100%);
  animation: tendersHeroDrift 32s ease-in-out infinite alternate;
  transform-origin: right center;
  will-change: transform;
}

@media (min-width: 900px) {

  .tenders-hero-bg {
    background:
      #0a0f1f url('../assets/tenders/tenders-hero.jpg') right center / cover no-repeat;
  }

}

@keyframes tendersHeroDrift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.08) translate3d(-1%, -0.5%, 0);
  }
}

/* Legibility veil over the bg, biased to the left where text
         sits. Holds at high opacity through ~55% of the width so the
         title and lede stay legible across the photographic backdrop
         at all viewport sizes; tapers smoothly to transparent on the
         right where the tray of diamonds sits, so the photo subject
         reads cleanly. The bottom-edge fade gives the hero a soft
         transition into the controls strip below. */
.tenders-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(10, 15, 31, 0.92) 0%,
      rgba(10, 15, 31, 0.88) 30%,
      rgba(10, 15, 31, 0.7) 50%,
      rgba(10, 15, 31, 0.35) 72%,
      rgba(10, 15, 31, 0) 100%),
    linear-gradient(180deg,
      rgba(10, 15, 31, 0) 60%,
      rgba(10, 15, 31, 0.55) 100%);
}

.tenders-hero>.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Tenders hero uses the standard centred .wrap so its title left
         edge aligns with every body section header on the page. width:
         100% is required because .tenders-hero is a flex container.
         The tenders-hero-title and lede have max-width constraints so
         the copy stays in the left half, leaving the right portion of
         the hero image (tray of diamonds) clear. */
.tenders-hero-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 28px;
}

.tenders-hero-title em {
  font-style: normal;
  color: #a8b3cc;
  font-weight: 500;
}

.tenders-hero-title .hero-line {
  display: block;
  white-space: nowrap;
}

.tenders-hero-lede {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 40px;
}

.tenders-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.tenders-hero-ctas .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}

.tenders-hero-ctas .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* Controls strip — filter chips on the left, view toggle on
         the right. Sits above the tender content as a static row;
         scrolls with the page rather than being pinned, which
         conflicted visually with the floating glass nav. */
.tenders-controls {
  background: var(--bg);
  border-bottom: 1px solid var(--ink-10);
  padding: 32px 0;
}

.tenders-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tenders-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenders-filter {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--ink-10);
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.tenders-filter:hover {
  color: var(--ink);
  border-color: var(--ink-40);
}

.tenders-filter.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.tenders-view-toggle {
  display: inline-flex;
  border: 1px solid var(--ink-10);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg);
}

.tenders-view-toggle button {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 0;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tenders-view-toggle button+button {
  border-left: 1px solid var(--ink-10);
}

.tenders-view-toggle button:hover {
  color: var(--ink);
}

.tenders-view-toggle button.active {
  color: var(--bg);
  background: var(--ink);
}

.tenders-view-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Main tender content section */
.tenders-content {
  padding: 80px 0 120px;
  min-height: 60vh;
}

/* View visibility toggling — only one view shows at a time. */
.tenders-view {
  display: none;
}

.tenders-view.active {
  display: block;
}

/* ============ CALENDAR VIEW (gantt-style) ============
         One "month-row" per month, with days running left to right
         across the row and tender bars sized/positioned to span
         their viewing window. Bars stack vertically when there are
         simultaneous tenders. Coloured by tender type. */
.calendar-months {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.month-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
}

.month-label {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-top: 28px;
}

.month-label .year {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.month-grid {
  position: relative;
}

/* Day-number header row. Each day occupies one fractional unit
         of the parent's width. */
.month-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--ink-10);
  margin-bottom: 8px;
}

.month-day {
  text-align: center;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-40);
  padding: 6px 0;
  letter-spacing: 0.04em;
}

.month-day.is-weekend {
  color: var(--ink-25);
}

.month-day.is-today {
  color: var(--ink);
  font-weight: 600;
}

/* The bar lanes — each .lane is one horizontal row across the
         month, and contains absolutely-positioned tender bars. */
.month-lanes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.month-lane {
  position: relative;
  /* Lane sizes up to fit its tallest bar (which may wrap onto
           2-3 lines for long titles in narrow date ranges). */
  min-height: 32px;
}

/* Today vertical guide — a faint line through the calendar at
         today's column. */
.month-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink-25);
  pointer-events: none;
  z-index: 0;
}

.tender-bar {
  position: absolute;
  top: 0;
  min-height: 28px;
  border-radius: 0;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  /* Allow titles to wrap across lines when the bar is narrow.
           No ellipsis: the bar grows in height instead. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 1;
}

.tender-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(26, 37, 64, 0.35);
  z-index: 2;
}

/* Type-based colouring. */
.tender-bar[data-type="rough"] {
  background: #1a2540;
}

.tender-bar[data-type="polished"] {
  background: #7a8aae;
}

.tender-bar[data-type="coloured"] {
  background: #3a6b6e;
}

.tender-bar[data-type="lab"] {
  background: #a37e3e;
}

.tender-bar.is-past {
  opacity: 0.4;
}

.tender-bar.is-live::after {
  /* Pulsing dot indicates a tender currently in viewing. */
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: tender-pulse 1.8s infinite;
}

@keyframes tender-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Calendar legend — small key under the month rows showing
         what each colour means. */
.calendar-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-10);
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  color: var(--ink-55);
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar-legend-swatch {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.calendar-legend-swatch.rough {
  background: #1a2540;
}

.calendar-legend-swatch.polished {
  background: #7a8aae;
}

.calendar-legend-swatch.coloured {
  background: #3a6b6e;
}

.calendar-legend-swatch.lab {
  background: #a37e3e;
}

/* Responsive: collapse calendar to single column on narrow viewports,
         month label above its grid. Day labels also tighten. */
@media (max-width: 900px) {
  .month-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .month-label {
    padding-top: 0;
  }

  .month-day {
    font-size: 9px;
  }

  .tender-bar {
    font-size: 11px;
    padding: 0 8px;
    height: 26px;
  }

  .month-lane {
    height: 30px;
  }
}

@media (max-width: 600px) {

  /* Below this width, even the gantt becomes hard to read.
           Hide day numbers and rely on hover/tap for bar detail. */
  .month-days {
    display: none;
  }

  .month-lanes {
    padding-top: 0;
  }

}

/* ============ LIST VIEW ============
         Detail cards stacked vertically. Each card is a wide
         landscape rectangle with a status pill, the tender title
         and goods summary on the left, viewing dates and location
         centred, and the Register CTA on the right. */
.tenders-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-10);
}

.tenders-list.filtered .tender-card:not(.match) {
  display: none;
}

/* Each tender row mirrors the news archive-row pattern: a single
         clickable link with a photo thumb on the left, text in the
         middle (status pill, organiser eyebrow, title, summary) and an
         aside column on the right (closing-date meta + Register CTA).
         Stacks on mobile and goes to thumb | text | aside on desktop. */
.tender-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-10);
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background 0.25s ease;
}

.tender-card:hover {
  background: var(--surface);
}

.tender-card:hover .tender-card-thumb .ph {
  transform: scale(1.06);
}

@media (min-width: 700px) {

  .tender-card {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 28px;
    padding: 28px 16px;
    margin: 0 -16px;
    align-items: center;
  }

}

@media (min-width: 1100px) {

  .tender-card {
    grid-template-columns: 240px minmax(0, 1fr) 220px;
    gap: 36px;
  }

}

/* Photo thumbnail. Uses the same .ph[class*="ph-"] placeholder
         system as the news cards so per-tender photography is not
         required for the demo. Real assets can replace the placeholder
         .ph-tender-* class definitions further down. */
.tender-card-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  position: relative;
}

.tender-card-thumb .ph {
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 699px) {

  .tender-card-thumb {
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }

}

/* Text column: status pill, organiser eyebrow, title, summary. */
.tender-card-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Aside column: status meta + closing-date meta + Register CTA. */
.tender-card-aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 700px) {

  .tender-card-aside {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    text-align: right;
  }

}

.tender-card-meta {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-55);
  white-space: normal;
}

.tender-card-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: block;
  margin-bottom: 2px;
}

.tender-card-meta-value {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

/* Register CTA. Compact ghost button that fills on card hover so
         the entire row feels like a single primary affordance. */
.tender-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 16px;
  border: 1px solid var(--ink-25);
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg-raised);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.tender-card:hover .tender-card-action {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.tender-card-action svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Status pill above the title, colour-coded by lifecycle stage. */
.tender-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 2px;
}

.tender-status[data-status="upcoming"] {
  color: #1a2540;
  background: rgba(26, 37, 64, 0.08);
}

.tender-status[data-status="live"] {
  color: #fff;
  background: #1a2540;
}

.tender-status[data-status="live"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: tender-pulse 1.8s infinite;
}

.tender-status[data-status="closed"] {
  color: var(--ink-55);
  background: var(--ink-05);
}

.tender-organiser {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.tender-title {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  transition: color 0.2s ease;
}

.tender-card:hover .tender-title {
  color: var(--accent);
}

.tender-summary {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  margin: 4px 0 0;
  /* Clamp to two lines so rows stay rhythmic. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Per-type placeholder thumbnails. Reuses the news placeholder
         JPEGs so the demo has real photographic imagery without
         shipping tender-specific assets. To swap in real tender
         photography later, replace the background-image URL for each
         class with the production asset. */
.page-tenders .ph-tender-rough {
  background-image: url('../dist/assets/placeholders/ph-news-1.jpg');
}
.page-tenders .ph-tender-rough {
  background-image: url('../dist/assets/placeholders/ph-news-1.jpg');
  background-color: #2a2620;
}

.page-tenders .ph-tender-polished {
  background-image: url('../dist/assets/placeholders/ph-news-2.jpg');
}
.page-tenders .ph-tender-polished {
  background-image: url('../dist/assets/placeholders/ph-news-2.jpg');
  background-color: #2a2418;
}

.ph-tender-coloured {
  background-image: url('../dist/assets/placeholders/ph-news-3.jpg');
}
  .page-tenders .ph-tender-coloured {
    background-image: url('../dist/assets/placeholders/ph-news-3.jpg');
    background-color: #1f2a2c;
  }

  .page-tenders .ph-tender-coloured {
    background-image: url('../dist/assets/placeholders/ph-news-3.jpg');
    background-color: #1f2a2c;
  }

  .page-tenders .ph-tender-lab {
    background-image: url('../dist/assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }
  .page-tenders .ph-tender-lab {
    background-image: url('../dist/assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }

  /* Make sure the per-tender .ph classes use the same fit rules as
  /* Make sure the per-tender .ph classes use the same fit rules as
         the news placeholders (the global rule already covers anything
         that matches [class*="ph-"], but defining it here makes the
         intent local to this section). */
  .tender-card-thumb .ph[class*="ph-tender-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .tender-card-thumb .ph[class*="ph-tender-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Pagination. Numeric pagination bar appears below the list when
  /* Pagination. Numeric pagination bar appears below the list when
         there are more matched tenders than ARCHIVE_PAGE_SIZE. Cards
         that don't belong to the current page get .out-of-page from JS
         and the rule below hides them. */
  .tender-card.out-of-page {
    display: none;
  }
  .tender-card.out-of-page {
    display: none;
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
  }

.pagination-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }
  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }

  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }
  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }

  /* ============ HOST A TENDER strip ============
  /* ============ HOST A TENDER strip ============
         Bottom-of-page CTA strip for prospective tender organisers
         who want to bring their sale to QDE. */
  /* Empty state for when filters hide every tender. */
  .tenders-empty {
    display: none;
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-55);
    font-size: 15px;
  }
  /* Empty state for when filters hide every tender. */
  .tenders-empty {
    display: none;
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-55);
    font-size: 15px;
  }

  .tenders-empty.visible {
    display: block;
  }
  .tenders-empty.visible {
    display: block;
  }

  /* ============ UTILITIES (replace former inline style= attributes) ============
  /* ============ UTILITIES (replace former inline style= attributes) ============
   These use !important deliberately: an inline style always beats stylesheet
   rules, so to faithfully replace inline styles a utility must override
   component CSS the same way. This is the standard convention for utilities. */
  .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }
  .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }

  .u-pt-0 {
    padding-top: 0 !important;
  }
  .u-pt-0 {
    padding-top: 0 !important;
  }

  .u-nowrap {
    white-space: nowrap !important;
  }
  .u-nowrap {
    white-space: nowrap !important;
  }

  .u-m-0 {
    margin: 0 !important;
  }
  .u-m-0 {
    margin: 0 !important;
  }

  .u-mb-32 {
    margin-bottom: 32px !important;
  }
  .u-mb-32 {
    margin-bottom: 32px !important;
  }

  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .u-text-white {
    color: #fff !important;
  }
  .u-text-white {
    color: #fff !important;
  }

  .u-text-slate {
    color: #a8b3cc !important;
  }
  .u-text-slate {
    color: #a8b3cc !important;
  }

  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  /* ==========================================================================
  /* ==========================================================================
   SCOPED STYLES FOR NEWS.CSS ()
   ========================================================================== */

  .split-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
    padding-right: 0.12em;
    margin-right: -0.12em;
    line-height: inherit;
  }
  .split-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
    padding-right: 0.12em;
    margin-right: -0.12em;
    line-height: inherit;
  }

  /* ============ SECTIONS ============ */
  /* ============ SECTIONS ============ */

  @media (min-width: 768px) {
    .section {
      padding: 140px 0;
    }
  }
  @media (min-width: 768px) {
    .section {
      padding: 140px 0;
    }
  }

  @media (min-width: 1200px) {
    .section {
      padding: 180px 0;
    }
  }
  @media (min-width: 1200px) {
    .section {
      padding: 180px 0;
    }
  }

  /* ============ STATS ============ */
  /* ============ STATS ============ */

  @media (min-width: 900px) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 900px) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ============ ECOSYSTEM CARDS ============ */
  /* ============ ECOSYSTEM CARDS ============ */

  @media (min-width: 900px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 900px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .card:hover {
    background: var(--bg-raised);
  }
  .card:hover {
    background: var(--bg-raised);
  }

  .card-link {
    margin-top: auto;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
  }
  .card-link {
    margin-top: auto;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
  }

  /* ============ BENEFITS ============ */
  /* ============ BENEFITS ============ */

  @media (min-width: 700px) {
    .benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 700px) {
    .benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .benefit:hover {
    background: var(--bg-raised);
  }
  .benefit:hover {
    background: var(--bg-raised);
  }

  .benefit-ico svg {
    width: 100%;
    height: 100%;
  }
  .benefit-ico svg {
    width: 100%;
    height: 100%;
  }

  /* ============ STICKY STORY ============ */
  /* ============ STICKY STORY ============ */

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .sticky-story-inner {
      grid-template-columns: 1fr 1fr;
    }
    .sticky-story-inner {
      grid-template-columns: 1fr 1fr;
    }

  }
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  .sticky-media .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
    transform: scale(1.04);
  }
  .sticky-media .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
    transform: scale(1.04);
  }

  .sticky-media .frame.active {
    opacity: 1;
    transform: scale(1);
  }
  .sticky-media .frame.active {
    opacity: 1;
    transform: scale(1);
  }

  .sticky-media .ph {
    width: 100%;
    height: 100%;
  }
  .sticky-media .ph {
    width: 100%;
    height: 100%;
  }

  .sticky-media .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
  }
  .sticky-media .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

.sticky-slide .num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  color: var(--accent);
  font-size: 15px;
}

  .sticky-slide h3 {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .sticky-slide h3 {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
  }

  .sticky-slide p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    margin: 0;
  }
  .sticky-slide p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    margin: 0;
  }

  /* Slide counter (fixed to the sticky media) */
  /* Slide counter (fixed to the sticky media) */

  .sticky-counter span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.4s ease;
  }
  .sticky-counter span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.4s ease;
  }

  .sticky-counter span.active {
    background: var(--accent);
  }
  .sticky-counter span.active {
    background: var(--accent);
  }

  /* ============ FEATURE ROW ============ */
  /* ============ FEATURE ROW ============ */

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .feature-row {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }
    .feature-row {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }

    .feature-row.reverse .feature-media {
      order: 2;
    }
    .feature-row.reverse .feature-media {
      order: 2;
    }

  }
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  /* ============ HORIZONTAL SCROLL ============ */
  @media (min-width: 768px) {}
  /* ============ HORIZONTAL SCROLL ============ */
  @media (min-width: 768px) {}

  @media (min-width: 1200px) {}
  @media (min-width: 1200px) {}

  .news-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
  }
  .news-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
  }

  .news-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
  }
  .news-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
  }

  .news-card:hover .news-card-media .ph {
    transform: scale(1.06);
  }
  .news-card:hover .news-card-media .ph {
    transform: scale(1.06);
  }

  /* ============ QUOTES ============ */
  /* ============ QUOTES ============ */

  @media (min-width: 900px) {
    .quotes {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 900px) {
    .quotes {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ============ APPLY ============ */
  /* ============ APPLY ============ */

  .apply-title em {
    font-style: normal;
    color: var(--accent);
    font-weight: 500;
  }
  .apply-title em {
    font-style: normal;
    color: var(--accent);
    font-weight: 500;
  }

  .apply .btn-primary {
    background: #fff;
    color: #0c0c0c;
  }
  .apply .btn-primary {
    background: #fff;
    color: #0c0c0c;
  }

  .apply .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .apply .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .apply .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
  }
  .apply .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
  }

  /* ============ MARQUEE ============ */
  /* ============ MARQUEE ============ */

.marquee-item {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink-55);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 72px;
}

  .marquee-item::after {
    content: "✦";
    font-style: normal;
    color: var(--accent);
    font-size: 16px;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  /* ============ PLACEHOLDER IMAGERY ============ */
  /* Placeholder imagery: file-based JPEGs for vault/event/news,
         CSS gradients for story slides. */
  .ph[class*="ph-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .ph[class*="ph-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .ph-gold {
    background-image: url('../assets/placeholders/ph-gold.jpg');
    background-color: #2a2620;
  }
  .ph-gold {
    background-image: url('../assets/placeholders/ph-gold.jpg');
    background-color: #2a2620;
  }

  .ph-news-1 {
    background-image: url('../assets/placeholders/ph-news-1.jpg');
    background-color: #2a2620;
  }
  .ph-news-1 {
    background-image: url('../assets/placeholders/ph-news-1.jpg');
    background-color: #2a2620;
  }

  .ph-news-2 {
    background-image: url('../assets/placeholders/ph-news-2.jpg');
    background-color: #2a2418;
  }
  .ph-news-2 {
    background-image: url('../assets/placeholders/ph-news-2.jpg');
    background-color: #2a2418;
  }

  .ph-news-3 {
    background-image: url('../assets/placeholders/ph-news-3.jpg');
    background-color: #2a2418;
  }
  .ph-news-3 {
    background-image: url('../assets/placeholders/ph-news-3.jpg');
    background-color: #2a2418;
  }

  .ph-news-4 {
    background-image: url('../assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }
  .ph-news-4 {
    background-image: url('../assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }

  .ph-news-5 {
    background-image: url('../assets/placeholders/ph-news-5.jpg');
    background-color: #2a2418;
  }
  .ph-news-5 {
    background-image: url('../assets/placeholders/ph-news-5.jpg');
    background-color: #2a2418;
  }

  .ph-story-1 {
    background: radial-gradient(ellipse at 30% 30%, rgba(122, 138, 174, 0.55), transparent 60%), linear-gradient(140deg, #2a2620, #0a0908);
  }
  .ph-story-1 {
    background: radial-gradient(ellipse at 30% 30%, rgba(122, 138, 174, 0.55), transparent 60%), linear-gradient(140deg, #2a2620, #0a0908);
  }

  .ph-story-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(122, 138, 174, 0.5), transparent 55%), linear-gradient(140deg, #1a1712, #050404);
  }
  .ph-story-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(122, 138, 174, 0.5), transparent 55%), linear-gradient(140deg, #1a1712, #050404);
  }

  .ph-story-3 {
    background: radial-gradient(ellipse at 50% 70%, rgba(122, 138, 174, 0.6), transparent 60%), linear-gradient(140deg, #2f2a20, #100d08);
  }
  .ph-story-3 {
    background: radial-gradient(ellipse at 50% 70%, rgba(122, 138, 174, 0.6), transparent 60%), linear-gradient(140deg, #2f2a20, #100d08);
  }

  .ph-story-4 {
    background: radial-gradient(ellipse at 40% 40%, rgba(122, 138, 174, 0.65), transparent 55%), linear-gradient(140deg, #3a3225, #120f0a);
  }
  .ph-story-4 {
    background: radial-gradient(ellipse at 40% 40%, rgba(122, 138, 174, 0.65), transparent 55%), linear-gradient(140deg, #3a3225, #120f0a);
  }

  /* ============ MEMBERSHIP TIERS ============ */
  /* ============ MEMBERSHIP TIERS ============ */

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  .tier:hover {
    background: var(--bg-raised);
  }
  .tier:hover {
    background: var(--bg-raised);
  }

  .tier-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
    position: relative;
    padding-left: 22px;
  }
  .tier-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
    position: relative;
    padding-left: 22px;
  }

  .tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }
  .tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }

  /* ============ DOCUMENTS HUB ============ */
  /* ============ DOCUMENTS HUB ============ */

  @media (min-width: 700px) {
    .docs {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 700px) {
    .docs {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .docs {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .docs {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .doc:hover {
    background: var(--bg-raised);
  }
  .doc:hover {
    background: var(--bg-raised);
  }

  .doc-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ink-10);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  .doc-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ink-10);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  .doc-icon::after {
    content: "PDF";
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 8px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
  }
  .doc-icon::after {
    content: "PDF";
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 8px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
  }

  .doc-meta .arrow {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }
  .doc-meta .arrow {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }

  .doc:hover .doc-meta .arrow {
    transform: translate(2px, -2px);
  }
  .doc:hover .doc-meta .arrow {
    transform: translate(2px, -2px);
  }

  /* ============ AFFILIATES ============ */
  .affiliates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ink-10);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
  }
  /* ============ AFFILIATES ============ */
  .affiliates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ink-10);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
  }

  @media (min-width: 700px) {
    .affiliates {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 700px) {
    .affiliates {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .affiliates {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .affiliates {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .affiliate:hover {
    background: var(--bg-raised);
  }
  .affiliate:hover {
    background: var(--bg-raised);
  }

.affiliate-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.affiliate-abbr {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

  .affiliate-name {
    font-size: 13px;
    color: var(--ink-55);
    line-height: 1.4;
    margin: 0;
  }
  .affiliate-name {
    font-size: 13px;
    color: var(--ink-55);
    line-height: 1.4;
    margin: 0;
  }

  /* ============ APPLY MODAL ============ */
  .modal {
    background: var(--bg-raised);
    color: var(--ink);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
  }
  /* ============ APPLY MODAL ============ */
  .modal {
    background: var(--bg-raised);
    color: var(--ink);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 600px) {}
  @media (max-width: 600px) {}

  .modal-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
    margin-bottom: 14px;
  }
  .modal-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
    margin-bottom: 14px;
  }

  .modal-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 28px;
  }
  .modal-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 28px;
  }

  .modal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .modal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 600px) {
  @media (min-width: 600px) {

    .modal-form .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .modal-form .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

  }
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-help-trigger:hover .form-help-icon,
  .form-help-trigger:focus .form-help-icon,
  .form-field input,
  .form-field select,
  .form-disclaimer {
    font-size: 11px;
    color: var(--ink-40);
    line-height: 1.5;
    margin: 0;
  }
  .form-help-trigger:hover .form-help-icon,
  .form-help-trigger:focus .form-help-icon,
  .form-field input,
  .form-field select,
  .form-disclaimer {
    font-size: 11px;
    color: var(--ink-40);
    line-height: 1.5;
    margin: 0;
  }

  /* ============ CURSOR ============ */
  /* Single unified dart shape with an internal animated glow.
  /* ============ CURSOR ============ */
  /* Single unified dart shape with an internal animated glow.
         The shape and glow move together as one body; only the
         glow's center point drifts within the silhouette to give a
         "light moving inside the gem" effect. Two color variants
         (dark fill for light bgs, light fill for dark bgs) swap
         via body.over-dark. */
  .cursor-pointer {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
    width: 23px;
    height: 21px;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    /* Very faint drop-shadow for ambient lift. The silhouette
  .cursor-pointer {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
    width: 23px;
    height: 21px;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    /* Very faint drop-shadow for ambient lift. The silhouette
           edges are already softened via the SVG Gaussian blur so we
           don't need a strong shadow on top. */
    filter:
      drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.10));
  }
  .cursor-pointer>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .cursor-pointer>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .pointer-light,
  .pointer-dark {
    transition: opacity 0.4s ease;
  }
  .pointer-light,
  .pointer-dark {
    transition: opacity 0.4s ease;
  }

  .pointer-light {
    opacity: 0;
  }
  .pointer-light {
    opacity: 0;
  }

  .pointer-dark {
    opacity: 1;
  }
  .pointer-dark {
    opacity: 1;
  }

  html body.over-dark .pointer-light,
  html body.over-dark .pointer-dark

  /* Force every element to keep cursor:none so the OS pointer
  html body.over-dark .pointer-light,
  html body.over-dark .pointer-dark

  /* Force every element to keep cursor:none so the OS pointer
         never reappears — including links, buttons, form fields. */
  @media (pointer: fine) {
    /* custom cursor reverted */
  }
  @media (pointer: fine) {
    /* custom cursor reverted */
  }

  @media (max-width: 768px) {
  @media (max-width: 768px) {

    .cursor-pointer {
      display: none;
    }
    .cursor-pointer {
      display: none;
    }

  }
  }

  @media (prefers-reduced-motion: reduce) {
  @media (prefers-reduced-motion: reduce) {

    .cursor-pointer {
      display: none;
    }
    .cursor-pointer {
      display: none;
    }

  }
  }

  /* ============ NEWS PAGE ============ */
  /* Editorial, light-theme newsroom layout. Three rhythms:
  /* ============ NEWS PAGE ============ */
  /* Editorial, light-theme newsroom layout. Three rhythms:
         1. Hero — eyebrow + italic-em headline + lede + search/filter row
         2. Featured pair — pinned story + most recent story, side by side
         3. Archive — horizontal-row list of remaining stories, each with
            a pin toggle that re-promotes any story to the pinned slot.
         Visual language matches qde_qa.html: navy ink, off-white bg,
         Poppins italics for "the unfolding" emphasis, white raised cards
         with 1px ink-10 borders and 16px radius, hover lifts. */

  /* ----- News hero ----- */
  .news-hero {
    position: relative;
    background: #0e1424;
    color: #fff;
    padding: 200px 0 120px;
    overflow: hidden;
    isolation: isolate;
    /* Fills the viewport so there is no light section visible on
  /* ----- News hero ----- */
  .news-hero {
    position: relative;
    background: #0e1424;
    color: #fff;
    padding: 200px 0 120px;
    overflow: hidden;
    isolation: isolate;
    /* Fills the viewport so there is no light section visible on
           first paint. Matches the homepage .hero treatment. dvh
           handles the mobile address-bar collapse; vh is the fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }

  @media (min-width: 768px) {
    .news-hero {
      padding: 220px 0 120px;
    }
  }
  @media (min-width: 768px) {
    .news-hero {
      padding: 220px 0 120px;
    }
  }

  @media (min-width: 1200px) {
    .news-hero {
      padding: 240px 0 120px;
    }
  }
  @media (min-width: 1200px) {
    .news-hero {
      padding: 240px 0 120px;
    }
  }

  /* Background image layer: the photographic hero (news-hero.jpg).
  /* Background image layer: the photographic hero (news-hero.jpg).
         The image is composed so its editorial workspace (lamp, desk,
         notebook) sits in the right portion of the frame, leaving deep
         navy negative space on the left for the headline copy. The
         legibility veil below (.news-hero-veil) handles any additional
         left-side darkening. transform-origin biases the slow drift
         toward the right so the desk stays anchored as the image
         breathes.

         On narrow viewports (<900px) the photo is held back and the
         page falls back to the layered radial-gradient atmosphere.
         At those widths the available space is too narrow for the
         photo and copy to spatially separate. Mobile keeps the same
         dark visual identity via the gradient. */
  .news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at 75% 40%,
        rgba(122, 138, 174, 0.28) 0%,
        rgba(70, 88, 130, 0.14) 35%,
        transparent 70%),
      radial-gradient(ellipse 50% 60% at 85% 70%,
        rgba(168, 179, 204, 0.10) 0%,
        transparent 55%),
      radial-gradient(circle at 90% 35%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 25%),
      linear-gradient(140deg, #0a0f1f 0%, #0e1424 50%, #131b30 100%);
    animation: newsHeroDrift 32s ease-in-out infinite alternate;
    transform-origin: right center;
    will-change: transform;
  }
  .news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at 75% 40%,
        rgba(122, 138, 174, 0.28) 0%,
        rgba(70, 88, 130, 0.14) 35%,
        transparent 70%),
      radial-gradient(ellipse 50% 60% at 85% 70%,
        rgba(168, 179, 204, 0.10) 0%,
        transparent 55%),
      radial-gradient(circle at 90% 35%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 25%),
      linear-gradient(140deg, #0a0f1f 0%, #0e1424 50%, #131b30 100%);
    animation: newsHeroDrift 32s ease-in-out infinite alternate;
    transform-origin: right center;
    will-change: transform;
  }

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .news-hero-bg {
      background:
        #0a0f1f url('../assets/news/news-hero.jpg') right center / cover no-repeat;
    }
    .news-hero-bg {
      background:
        #0a0f1f url('../assets/news/news-hero.jpg') right center / cover no-repeat;
    }

  }
  }

  @keyframes newsHeroDrift {
    from {
      transform: scale(1.02) translate3d(0, 0, 0);
    }
  @keyframes newsHeroDrift {
    from {
      transform: scale(1.02) translate3d(0, 0, 0);
    }

    to {
      transform: scale(1.08) translate3d(-1%, -0.5%, 0);
    }
  }
    to {
      transform: scale(1.08) translate3d(-1%, -0.5%, 0);
    }
  }

  /* Legibility veil over the bg, biased to the left where text
  /* Legibility veil over the bg, biased to the left where text
         sits. Holds at high opacity through ~55% of the viewport
         width so the title and lede stay legible across the
         photographic backdrop at all viewport sizes; tapers smoothly
         to transparent on the right where the desk and lamp sit, so
         the photo subject reads cleanly. */
  .news-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(10, 15, 31, 0.92) 0%,
        rgba(10, 15, 31, 0.88) 30%,
        rgba(10, 15, 31, 0.7) 50%,
        rgba(10, 15, 31, 0.35) 72%,
        rgba(10, 15, 31, 0) 100%),
      linear-gradient(180deg,
        rgba(10, 15, 31, 0) 60%,
        rgba(10, 15, 31, 0.55) 100%);
  }
  .news-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(10, 15, 31, 0.92) 0%,
        rgba(10, 15, 31, 0.88) 30%,
        rgba(10, 15, 31, 0.7) 50%,
        rgba(10, 15, 31, 0.35) 72%,
        rgba(10, 15, 31, 0) 100%),
      linear-gradient(180deg,
        rgba(10, 15, 31, 0) 60%,
        rgba(10, 15, 31, 0.55) 100%);
  }

  .news-hero>.wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .news-hero>.wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* News hero uses the standard centred .wrap so its title left
  /* News hero uses the standard centred .wrap so its title left
         edge aligns with every body section header on the page. width:
         100% is required because .news-hero is a flex container. The
         news-hero-title and lede have max-width constraints so the
         copy stays in the left half, leaving the right portion of the
         hero clear for imagery. */
  .news-hero-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
    color: #fff;
  }
  .news-hero-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
    color: #fff;
  }

  .news-hero-title em {
    font-style: normal;
    font-weight: 500;
    color: #a8b3cc;
  }
  .news-hero-title em {
    font-style: normal;
    font-weight: 500;
    color: #a8b3cc;
  }

  .news-hero-title .hero-line {
    display: block;
    white-space: nowrap;
  }
  .news-hero-title .hero-line {
    display: block;
    white-space: nowrap;
  }

  .news-hero .hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 0 40px;
  }
  .news-hero .hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 0 40px;
  }

  @media (min-width: 768px) {
  @media (min-width: 768px) {

    .news-hero .hero-lede {
      margin-bottom: 48px;
    }
    .news-hero .hero-lede {
      margin-bottom: 48px;
    }

  }
  }

  /* Hero CTAs: matches the Tenders pattern - primary pill + ghost
  /* Hero CTAs: matches the Tenders pattern - primary pill + ghost
         pill with white-on-dark border. */
  .news-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .news-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .news-hero-ctas .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
  }
  .news-hero-ctas .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
  }

  .news-hero-ctas .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }
  .news-hero-ctas .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }

  /* Controls strip - sits between the hero and the featured pair,
  /* Controls strip - sits between the hero and the featured pair,
         with the same .wrap as everything else so the search and pill
         filters align with the section headings below. */
  .news-controls-strip {
    background: var(--bg);
    padding: 40px 0 8px;
    border-bottom: 1px solid var(--ink-10);
  }
  .news-controls-strip {
    background: var(--bg);
    padding: 40px 0 8px;
    border-bottom: 1px solid var(--ink-10);
  }

  @media (min-width: 768px) {
    .news-controls-strip {
      padding: 56px 0 16px;
    }
  }
  @media (min-width: 768px) {
    .news-controls-strip {
      padding: 56px 0 16px;
    }
  }

  /* Search + filter row sits at the bottom of the hero, anchoring
  /* Search + filter row sits at the bottom of the hero, anchoring
         the page's interactive controls to the editorial intro. */
  .news-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }
  .news-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .news-controls {
      flex-direction: row;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .news-controls {
      flex-direction: row;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }

  }
  }

  .news-search {
    position: relative;
    width: 100%;
    max-width: 460px;
  }
  .news-search {
    position: relative;
    width: 100%;
    max-width: 460px;
  }

  .news-search input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 999px;
    padding: 14px 44px 14px 46px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .news-search input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 999px;
    padding: 14px 44px 14px 46px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .news-search input::placeholder {
    color: var(--ink-40);
  }
  .news-search input::placeholder {
    color: var(--ink-40);
  }

  .news-search input:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(91, 111, 153, 0.12);
  }
  .news-search input:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(91, 111, 153, 0.12);
  }

  .news-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-40);
    pointer-events: none;
  }
  .news-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-40);
    pointer-events: none;
  }

  .news-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--ink-10);
    color: var(--ink-70);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
  }
  .news-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--ink-10);
    color: var(--ink-70);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
  }

  .news-search-clear:hover {
    background: var(--ink-25);
    color: var(--ink);
  }
  .news-search-clear:hover {
    background: var(--ink-25);
    color: var(--ink);
  }

  .news-search.has-value .news-search-clear {
    display: inline-flex;
  }
  .news-search.has-value .news-search-clear {
    display: inline-flex;
  }

  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  @media (max-width: 899px) {
  @media (max-width: 899px) {

    /* Mobile: single-line scroll so the row never wraps to 3 lines. */
    .filter-pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 4px;
      margin: 0 -24px;
      padding-left: 24px;
      padding-right: 24px;
    }
    /* Mobile: single-line scroll so the row never wraps to 3 lines. */
    .filter-pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 4px;
      margin: 0 -24px;
      padding-left: 24px;
      padding-right: 24px;
    }

    .filter-pills::-webkit-scrollbar {
      display: none;
    }
    .filter-pills::-webkit-scrollbar {
      display: none;
    }

  }
  }

.pill {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.pill:hover {
  color: var(--ink);
  border-color: var(--ink-25);
  background: rgba(255, 255, 255, 0.5);
}

.pill.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.pill.active:hover {
  background: var(--ink);
  color: var(--bg);
}

  /* ----- Result count strip ----- */
  .news-result-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
  }
  /* ----- Result count strip ----- */
  .news-result-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
  }

.news-result-bar .count {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}

  .news-result-bar .count strong {
    color: var(--ink);
    font-weight: 600;
  }
  .news-result-bar .count strong {
    color: var(--ink);
    font-weight: 600;
  }

  .news-result-bar .sort-note {
    font-size: 13px;
    color: var(--ink-40);
    font-style: italic;
  }
  .news-result-bar .sort-note {
    font-size: 13px;
    color: var(--ink-40);
    font-style: italic;
  }

  /* ----- Featured pair (pinned + latest) ----- */
  .featured-pair-section {
    padding: 56px 0 40px;
  }
  /* ----- Featured pair (pinned + latest) ----- */
  .featured-pair-section {
    padding: 56px 0 40px;
  }

  @media (min-width: 1200px) {
    .featured-pair-section {
      padding: 72px 0 56px;
    }
  }
  @media (min-width: 1200px) {
    .featured-pair-section {
      padding: 72px 0 56px;
    }
  }

  .featured-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .featured-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  @media (min-width: 980px) {
  @media (min-width: 980px) {

    .featured-pair {
      grid-template-columns: 1fr 1fr;
    }
    .featured-pair {
      grid-template-columns: 1fr 1fr;
    }

  }
  }

  @media (min-width: 1200px) {
  @media (min-width: 1200px) {

    .featured-pair {
      gap: 40px;
    }
    .featured-pair {
      gap: 40px;
    }

  }
  }

  /* When the pinned story IS the latest story, collapse to one big
  /* When the pinned story IS the latest story, collapse to one big
         card across the row. */
  .featured-pair.solo {
    grid-template-columns: 1fr;
  }
  .featured-pair.solo {
    grid-template-columns: 1fr;
  }

  .featured-pair.solo .feature-card {
    max-width: 100%;
  }
  .featured-pair.solo .feature-card {
    max-width: 100%;
  }

  .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
      border-color 0.3s ease,
      box-shadow 0.4s ease;
  }
  .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
      border-color 0.3s ease,
      box-shadow 0.4s ease;
  }

  .feature-card-media {
    aspect-ratio: 16 / 10;
    background: var(--surface);
    position: relative;
    overflow: hidden;
  }
  .feature-card-media {
    aspect-ratio: 16 / 10;
    background: var(--surface);
    position: relative;
    overflow: hidden;
  }

  /* Solo featured-card gets a wider, more cinematic crop. */
  .featured-pair.solo .feature-card-media {
    aspect-ratio: 21 / 9;
  }
  /* Solo featured-card gets a wider, more cinematic crop. */
  .featured-pair.solo .feature-card-media {
    aspect-ratio: 21 / 9;
  }

  .feature-card-media .ph,
  .feature-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
  }
  .feature-card-media .ph,
  .feature-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
  }

  .feature-card:hover .feature-card-media .ph,
  .feature-card:hover .feature-card-media img {
    transform: scale(1.05);
  }
  .feature-card:hover .feature-card-media .ph,
  .feature-card:hover .feature-card-media img {
    transform: scale(1.05);
  }

  /* Top-left badge that identifies whether this slot is "Pinned" or
  /* Top-left badge that identifies whether this slot is "Pinned" or
         "Latest". Visual label only — pinning is an editorial decision
         made on the backend, not a user-facing control. NO
         backdrop-filter (per landing-page handoff guidance — small
         rounded elements with backdrop-filter risk halo artefacts).
         Solid translucent navy + a 1px white inner border gives enough
         chip definition over any image. */
.feature-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: rgba(15, 23, 38, 0.85);
  border-radius: 999px;
  color: #fff;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

  .feature-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .feature-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .feature-badge.solo {
    background: rgba(15, 23, 38, 0.92);
  }
  .feature-badge.solo {
    background: rgba(15, 23, 38, 0.92);
  }

  .feature-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .feature-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }

  @media (min-width: 768px) {
    .feature-card-body {
      padding: 28px 28px 32px;
    }
  }
  @media (min-width: 768px) {
    .feature-card-body {
      padding: 28px 28px 32px;
    }
  }

.feature-card-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

  .feature-card-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .feature-card-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }

  .featured-pair.solo .feature-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
  }
  .featured-pair.solo .feature-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
  }

  .feature-card-excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }
  .feature-card-excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }

  .feature-card-meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-55);
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .feature-card-meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-55);
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .feature-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
  }
  .feature-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
  }

  /* ----- Archive list ----- */
  .archive-section {
    padding: 24px 0 96px;
  }
  /* ----- Archive list ----- */
  .archive-section {
    padding: 24px 0 96px;
  }

  .archive-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }
  .archive-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }

  .archive-head .section-title {
    margin: 0;
  }
  .archive-head .section-title {
    margin: 0;
  }

.archive-head .news-result-bar,
.archive-head .view-header {
  margin: 0;
}

.archive-list {
  display: flex;
  flex-direction: column;
}

.archive-row:first-of-type {
  border-top: 1px solid var(--ink-10);
}

  /* Each archive-row is a clickable link. Internal layout is a grid
  /* Each archive-row is a clickable link. Internal layout is a grid
         that stacks on mobile and goes to thumb | text | aside on desktop. */
  .archive-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ink-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease;
  }
  .archive-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ink-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease;
  }

  @media (min-width: 700px) {
  @media (min-width: 700px) {

    .archive-row {
      grid-template-columns: 200px minmax(0, 1fr) auto;
      gap: 28px;
      padding: 28px 16px;
      margin: 0 -16px;
      align-items: center;
    }
    .archive-row {
      grid-template-columns: 200px minmax(0, 1fr) auto;
      gap: 28px;
      padding: 28px 16px;
      margin: 0 -16px;
      align-items: center;
    }

  }
  }

  @media (min-width: 1100px) {
  @media (min-width: 1100px) {

    .archive-row {
      grid-template-columns: 240px minmax(0, 1fr) 200px;
      gap: 36px;
    }
    .archive-row {
      grid-template-columns: 240px minmax(0, 1fr) 200px;
      gap: 36px;
    }

  }
  }

  .archive-row-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }
  .archive-row-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }

  .archive-row-thumb .ph,
  .archive-row-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  }
  .archive-row-thumb .ph,
  .archive-row-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  }

  .archive-row-thumb {
    position: relative;
  }
  .archive-row-thumb {
    position: relative;
  }

  @media (max-width: 699px) {
  @media (max-width: 699px) {

    /* On mobile, shrink the thumb so the row reads as text-led. */
    .archive-row-thumb {
      aspect-ratio: 16 / 9;
      max-width: 100%;
    }
    /* On mobile, shrink the thumb so the row reads as text-led. */
    .archive-row-thumb {
      aspect-ratio: 16 / 9;
      max-width: 100%;
    }

  }
  }

  .archive-row-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .archive-row-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

.archive-row-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

  .archive-row-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
    transition: color 0.2s ease;
  }
  .archive-row-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
    transition: color 0.2s ease;
  }

  .archive-row:hover .archive-row-title {
    color: var(--accent);
  }
  .archive-row:hover .archive-row-title {
    color: var(--accent);
  }

  .archive-row-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 4px 0 0;
    /* Clamp to two lines so rows stay rhythmic. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .archive-row-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 4px 0 0;
    /* Clamp to two lines so rows stay rhythmic. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-row-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .archive-row-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  @media (min-width: 700px) {
  @media (min-width: 700px) {

    .archive-row-aside {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
      text-align: right;
    }
    .archive-row-aside {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
      text-align: right;
    }

  }
  }

  .archive-row-date,
  .archive-row-meta {
    font-size: 12px;
    color: var(--ink-55);
    white-space: nowrap;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    letter-spacing: 0.04em;
  }
  .archive-row-date,
  .archive-row-meta {
    font-size: 12px;
    color: var(--ink-55);
    white-space: nowrap;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    letter-spacing: 0.04em;
  }

  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
    vertical-align: middle;
    margin: 0 6px;
  }
  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
    vertical-align: middle;
    margin: 0 6px;
  }

  /* Share button — sits in the aside column, optically aligned with
  /* Share button — sits in the aside column, optically aligned with
         the row's right edge. Click stops propagation so it doesn't open
         the article. Uses navigator.share when available, falls back to
         copying the article URL to the clipboard with a brief flash to
         confirm. */
  .share-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ink-10);
    background: var(--bg-raised);
    color: var(--ink-55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    position: relative;
  }
  .share-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ink-10);
    background: var(--bg-raised);
    color: var(--ink-55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    position: relative;
  }

  /* Brief confirmation state after a clipboard fallback succeeds.
  /* Brief confirmation state after a clipboard fallback succeeds.
         Driven by JS adding/removing .copied for ~1.4s. */
  /* ----- Pagination -----
  /* ----- Pagination -----
         Sits below the archive list. Numeric pages plus prev/next
         arrow controls. Active page reverses to ink-on-bg. Disabled
         arrows fade to muted ink with no pointer. */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
  }

.pagination-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }
  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }

  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }
  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }

  .pagination-btn:disabled,
  .pagination-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .pagination-btn:disabled,
  .pagination-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Empty state when search/filter has no matches. */
  .archive-empty {
    padding: 80px 24px;
    text-align: center;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
    display: none;
  }
  /* Empty state when search/filter has no matches. */
  .archive-empty {
    padding: 80px 24px;
    text-align: center;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
    display: none;
  }

  These use !important deliberately: an inline style always beats stylesheet rules,
  so to faithfully replace inline styles a utility must override component CSS the same way. This is the standard convention for utilities. */ .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }
  These use !important deliberately: an inline style always beats stylesheet rules,
  so to faithfully replace inline styles a utility must override component CSS the same way. This is the standard convention for utilities. */ .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }

  .u-pt-0 {
    padding-top: 0 !important;
  }
  .u-pt-0 {
    padding-top: 0 !important;
  }

  .u-nowrap {
    white-space: nowrap !important;
  }
  .u-nowrap {
    white-space: nowrap !important;
  }

  .u-m-0 {
    margin: 0 !important;
  }
  .u-m-0 {
    margin: 0 !important;
  }

  .u-mb-32 {
    margin-bottom: 32px !important;
  }
  .u-mb-32 {
    margin-bottom: 32px !important;
  }

  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .u-text-white {
    color: #fff !important;
  }
  .u-text-white {
    color: #fff !important;
  }

  .u-text-slate {
    color: #a8b3cc !important;
  }
  .u-text-slate {
    color: #a8b3cc !important;
  }

  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  /* ==========================================================================
  /* ==========================================================================
   SCOPED STYLES FOR RESOURCES.CSS ()
   ========================================================================== */

  .split-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    line-height: inherit;
  }
  .split-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    line-height: inherit;
  }

  /* ============ SECTIONS ============ */
  /* ============ SECTIONS ============ */

  @media (min-width: 768px) {
    .section {
      padding: 140px 0;
    }
  }
  @media (min-width: 768px) {
    .section {
      padding: 140px 0;
    }
  }

  @media (min-width: 1200px) {
    .section {
      padding: 180px 0;
    }
  }
  @media (min-width: 1200px) {
    .section {
      padding: 180px 0;
    }
  }

  /* ============ STATS ============ */
  /* ============ STATS ============ */

  @media (min-width: 900px) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 900px) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ============ ECOSYSTEM CARDS ============ */
  /* ============ ECOSYSTEM CARDS ============ */

  @media (min-width: 900px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 900px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .card:hover {
    background: var(--bg-raised);
  }
  .card:hover {
    background: var(--bg-raised);
  }

  .card-link {
    margin-top: auto;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
  }
  .card-link {
    margin-top: auto;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
  }

  /* ============ BENEFITS ============ */
  /* ============ BENEFITS ============ */

  @media (min-width: 700px) {
    .benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 700px) {
    .benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .benefit:hover {
    background: var(--bg-raised);
  }
  .benefit:hover {
    background: var(--bg-raised);
  }

  .benefit-ico svg {
    width: 100%;
    height: 100%;
  }
  .benefit-ico svg {
    width: 100%;
    height: 100%;
  }

  /* ============ STICKY STORY ============ */
  /* ============ STICKY STORY ============ */

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .sticky-story-inner {
      grid-template-columns: 1fr 1fr;
    }
    .sticky-story-inner {
      grid-template-columns: 1fr 1fr;
    }

  }
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  .sticky-media .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
    transform: scale(1.04);
  }
  .sticky-media .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1), transform 0.9s cubic-bezier(0.2, 0, 0, 1);
    transform: scale(1.04);
  }

  .sticky-media .frame.active {
    opacity: 1;
    transform: scale(1);
  }
  .sticky-media .frame.active {
    opacity: 1;
    transform: scale(1);
  }

  .sticky-media .ph {
    width: 100%;
    height: 100%;
  }
  .sticky-media .ph {
    width: 100%;
    height: 100%;
  }

  .sticky-media .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
  }
  .sticky-media .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

.sticky-slide .num {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  color: var(--accent);
  font-size: 15px;
}

  .sticky-slide h3 {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .sticky-slide h3 {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
  }

  .sticky-slide p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    margin: 0;
  }
  .sticky-slide p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    margin: 0;
  }

  /* Slide counter (fixed to the sticky media) */
  /* Slide counter (fixed to the sticky media) */

  .sticky-counter span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.4s ease;
  }
  .sticky-counter span {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.4s ease;
  }

  .sticky-counter span.active {
    background: var(--accent);
  }
  .sticky-counter span.active {
    background: var(--accent);
  }

  /* ============ FEATURE ROW ============ */
  /* ============ FEATURE ROW ============ */

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .feature-row {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }
    .feature-row {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }

    .feature-row.reverse .feature-media {
      order: 2;
    }
    .feature-row.reverse .feature-media {
      order: 2;
    }

  }
  }

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  /* ============ HORIZONTAL SCROLL ============ */
  @media (min-width: 768px) {}
  /* ============ HORIZONTAL SCROLL ============ */
  @media (min-width: 768px) {}

  @media (min-width: 1200px) {}
  @media (min-width: 1200px) {}

  .news-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
  }
  .news-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
  }

  .news-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
  }
  .news-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0, 1);
  }

  .news-card:hover .news-card-media .ph {
    transform: scale(1.06);
  }
  .news-card:hover .news-card-media .ph {
    transform: scale(1.06);
  }

  /* ============ QUOTES ============ */
  /* ============ QUOTES ============ */

  @media (min-width: 900px) {
    .quotes {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 900px) {
    .quotes {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ============ APPLY ============ */
  /* ============ APPLY ============ */

  .apply-title em {
    font-style: normal;
    color: var(--accent);
    font-weight: 500;
  }
  .apply-title em {
    font-style: normal;
    color: var(--accent);
    font-weight: 500;
  }

  .apply .btn-primary {
    background: #fff;
    color: #0c0c0c;
  }
  .apply .btn-primary {
    background: #fff;
    color: #0c0c0c;
  }

  .apply .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .apply .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .apply .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
  }
  .apply .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
  }

  /* ============ MARQUEE ============ */
  /* ============ MARQUEE ============ */

.marquee-item {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink-55);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 72px;
}

  .marquee-item::after {
    content: "✦";
    font-style: normal;
    color: var(--accent);
    font-size: 16px;
  }
  .marquee-item::after {
    content: "✦";
    font-style: normal;
    color: var(--accent);
    font-size: 16px;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }
    to {
      transform: translateX(-50%);
    }
  }

  /* ============ PLACEHOLDER IMAGERY ============ */
  /* Placeholder imagery: file-based JPEGs for vault/event/news,
  /* ============ PLACEHOLDER IMAGERY ============ */
  /* Placeholder imagery: file-based JPEGs for vault/event/news,
         CSS gradients for story slides. */
  .ph[class*="ph-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .ph[class*="ph-"] {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .ph-gold {
    background-image: url('../assets/placeholders/ph-gold.jpg');
    background-color: #2a2620;
  }
  .ph-gold {
    background-image: url('../assets/placeholders/ph-gold.jpg');
    background-color: #2a2620;
  }

  .ph-news-1 {
    background-image: url('../assets/placeholders/ph-news-1.jpg');
    background-color: #2a2620;
  }
  .ph-news-1 {
    background-image: url('../assets/placeholders/ph-news-1.jpg');
    background-color: #2a2620;
  }

  .ph-news-2 {
    background-image: url('../assets/placeholders/ph-news-2.jpg');
    background-color: #2a2418;
  }
  .ph-news-2 {
    background-image: url('../assets/placeholders/ph-news-2.jpg');
    background-color: #2a2418;
  }

  .ph-news-3 {
    background-image: url('../assets/placeholders/ph-news-3.jpg');
    background-color: #2a2418;
  }
  .ph-news-3 {
    background-image: url('../assets/placeholders/ph-news-3.jpg');
    background-color: #2a2418;
  }

  .ph-news-4 {
    background-image: url('../assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }
  .ph-news-4 {
    background-image: url('../assets/placeholders/ph-news-4.jpg');
    background-color: #2a2418;
  }

  .ph-news-5 {
    background-image: url('../assets/placeholders/ph-news-5.jpg');
    background-color: #2a2418;
  }
  .ph-news-5 {
    background-image: url('../assets/placeholders/ph-news-5.jpg');
    background-color: #2a2418;
  }

  .ph-story-1 {
    background: radial-gradient(ellipse at 30% 30%, rgba(122, 138, 174, 0.55), transparent 60%), linear-gradient(140deg, #2a2620, #0a0908);
  }
  .ph-story-1 {
    background: radial-gradient(ellipse at 30% 30%, rgba(122, 138, 174, 0.55), transparent 60%), linear-gradient(140deg, #2a2620, #0a0908);
  }

  .ph-story-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(122, 138, 174, 0.5), transparent 55%), linear-gradient(140deg, #1a1712, #050404);
  }
  .ph-story-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(122, 138, 174, 0.5), transparent 55%), linear-gradient(140deg, #1a1712, #050404);
  }

  .ph-story-3 {
    background: radial-gradient(ellipse at 50% 70%, rgba(122, 138, 174, 0.6), transparent 60%), linear-gradient(140deg, #2f2a20, #100d08);
  }
  .ph-story-3 {
    background: radial-gradient(ellipse at 50% 70%, rgba(122, 138, 174, 0.6), transparent 60%), linear-gradient(140deg, #2f2a20, #100d08);
  }

  .ph-story-4 {
    background: radial-gradient(ellipse at 40% 40%, rgba(122, 138, 174, 0.65), transparent 55%), linear-gradient(140deg, #3a3225, #120f0a);
  }
  .ph-story-4 {
    background: radial-gradient(ellipse at 40% 40%, rgba(122, 138, 174, 0.65), transparent 55%), linear-gradient(140deg, #3a3225, #120f0a);
  }

  /* ============ MEMBERSHIP TIERS ============ */
  /* ============ MEMBERSHIP TIERS ============ */

  @media (min-width: 900px) {}
  @media (min-width: 900px) {}

  .tier:hover {
    background: var(--bg-raised);
  }
  .tier:hover {
    background: var(--bg-raised);
  }

  .tier-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
    position: relative;
    padding-left: 22px;
  }
  .tier-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
    position: relative;
    padding-left: 22px;
  }

  .tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }
  .tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(-45deg);
  }

  /* ============ DOCUMENTS HUB ============ */
  /* ============ DOCUMENTS HUB ============ */

  @media (min-width: 700px) {
    .docs {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 700px) {
    .docs {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .docs {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .docs {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .doc:hover {
    background: var(--bg-raised);
  }
  .doc:hover {
    background: var(--bg-raised);
  }

  .doc-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ink-10);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  .doc-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: var(--ink-10);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }

  .doc-icon::after {
    content: "PDF";
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 8px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
  }
  .doc-icon::after {
    content: "PDF";
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 8px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
  }

  .doc-meta .arrow {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }
  .doc-meta .arrow {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }

  .doc:hover .doc-meta .arrow {
    transform: translate(2px, -2px);
  }
  .doc:hover .doc-meta .arrow {
    transform: translate(2px, -2px);
  }

  /* ============ AFFILIATES ============ */
  .affiliates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ink-10);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
  }
  /* ============ AFFILIATES ============ */
  .affiliates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--ink-10);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
  }

  @media (min-width: 700px) {
    .affiliates {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 700px) {
    .affiliates {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .affiliates {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 1100px) {
    .affiliates {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .affiliate:hover {
    background: var(--bg-raised);
  }
  .affiliate:hover {
    background: var(--bg-raised);
  }

.affiliate-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.affiliate-abbr {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

  .affiliate-name {
    font-size: 13px;
    color: var(--ink-55);
    line-height: 1.4;
    margin: 0;
  }
  .affiliate-name {
    font-size: 13px;
    color: var(--ink-55);
    line-height: 1.4;
    margin: 0;
  }

  /* ============ APPLY MODAL ============ */
  .modal {
    background: var(--bg-raised);
    color: var(--ink);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
  }
  /* ============ APPLY MODAL ============ */
  .modal {
    background: var(--bg-raised);
    color: var(--ink);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 600px) {}
  @media (max-width: 600px) {}

  .modal-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
    margin-bottom: 14px;
  }
  .modal-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
    margin-bottom: 14px;
  }

  .modal-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 28px;
  }
  .modal-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 28px;
  }

  .modal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .modal-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 600px) {
  @media (min-width: 600px) {

    .modal-form .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .modal-form .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

  }
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-help-trigger:hover .form-help-icon,
  .form-help-trigger:focus .form-help-icon,
  .form-field input,
  .form-field select,
  .form-disclaimer {
    font-size: 11px;
    color: var(--ink-40);
    line-height: 1.5;
    margin: 0;
  }
  .form-help-trigger:hover .form-help-icon,
  .form-help-trigger:focus .form-help-icon,
  .form-field input,
  .form-field select,
  .form-disclaimer {
    font-size: 11px;
    color: var(--ink-40);
    line-height: 1.5;
    margin: 0;
  }

  /* ============ CURSOR ============ */
  /* Single unified dart shape with an internal animated glow.
  /* ============ CURSOR ============ */
  /* Single unified dart shape with an internal animated glow.
         The shape and glow move together as one body; only the
         glow's center point drifts within the silhouette to give a
         "light moving inside the gem" effect. Two color variants
         (dark fill for light bgs, light fill for dark bgs) swap
         via body.over-dark. */
  .cursor-pointer {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
    width: 23px;
    height: 21px;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    /* Very faint drop-shadow for ambient lift. The silhouette
  .cursor-pointer {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
    width: 23px;
    height: 21px;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    /* Very faint drop-shadow for ambient lift. The silhouette
           edges are already softened via the SVG Gaussian blur so we
           don't need a strong shadow on top. */
    filter:
      drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.10));
  }

  .cursor-pointer>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .cursor-pointer>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .pointer-light,
  .pointer-dark {
    transition: opacity 0.4s ease;
  }
  .pointer-light,
  .pointer-dark {
    transition: opacity 0.4s ease;
  }

  .pointer-light {
    opacity: 0;
  }
  .pointer-light {
    opacity: 0;
  }

  .pointer-dark {
    opacity: 1;
  }
  .pointer-dark {
    opacity: 1;
  }

  html body.over-dark .pointer-light,
  html body.over-dark .pointer-dark

  /* Force every element to keep cursor:none so the OS pointer
  html body.over-dark .pointer-light,
  html body.over-dark .pointer-dark

  /* Force every element to keep cursor:none so the OS pointer
         never reappears — including links, buttons, form fields. */
  @media (pointer: fine) {
    /* custom cursor reverted */
  }
  @media (pointer: fine) {
    /* custom cursor reverted */
  }

  @media (max-width: 768px) {
  @media (max-width: 768px) {

    .cursor-pointer {
      display: none;
    }
    .cursor-pointer {
      display: none;
    }

  }
  }

  @media (prefers-reduced-motion: reduce) {
  @media (prefers-reduced-motion: reduce) {

    .cursor-pointer {
      display: none;
    }
    .cursor-pointer {
      display: none;
    }

  }
  }

  /* ============ NEWS PAGE ============ */
  /* Editorial, light-theme newsroom layout. Three rhythms:
  /* ============ NEWS PAGE ============ */
  /* Editorial, light-theme newsroom layout. Three rhythms:
         1. Hero — eyebrow + italic-em headline + lede + search/filter row
         2. Featured pair — pinned story + most recent story, side by side
         3. Archive — horizontal-row list of remaining stories, each with
            a pin toggle that re-promotes any story to the pinned slot.
         Visual language matches qde_qa.html: navy ink, off-white bg,
         Poppins italics for "the unfolding" emphasis, white raised cards
         with 1px ink-10 borders and 16px radius, hover lifts. */

  /* ----- News hero ----- */
  .news-hero {
    position: relative;
    background: #0e1424;
    color: #fff;
    padding: 200px 0 120px;
    overflow: hidden;
    isolation: isolate;
    /* Fills the viewport so there is no light section visible on
  /* ----- News hero ----- */
  .news-hero {
    position: relative;
    background: #0e1424;
    color: #fff;
    padding: 200px 0 120px;
    overflow: hidden;
    isolation: isolate;
    /* Fills the viewport so there is no light section visible on
           first paint. Matches the homepage .hero treatment. dvh
           handles the mobile address-bar collapse; vh is the fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }

  @media (min-width: 768px) {
    .news-hero {
      padding: 220px 0 120px;
    }
  }
  @media (min-width: 768px) {
    .news-hero {
      padding: 220px 0 120px;
    }
  }

  @media (min-width: 1200px) {
    .news-hero {
      padding: 240px 0 120px;
    }
  }
  @media (min-width: 1200px) {
    .news-hero {
      padding: 240px 0 120px;
    }
  }

  /* Background image layer: the photographic hero (news-hero.jpg).
  /* Background image layer: the photographic hero (news-hero.jpg).
         The image is composed so its editorial workspace (lamp, desk,
         notebook) sits in the right portion of the frame, leaving deep
         navy negative space on the left for the headline copy. The
         legibility veil below (.news-hero-veil) handles any additional
         left-side darkening. transform-origin biases the slow drift
         toward the right so the desk stays anchored as the image
         breathes.

         On narrow viewports (<900px) the photo is held back and the
         page falls back to the layered radial-gradient atmosphere.
         At those widths the available space is too narrow for the
         photo and copy to spatially separate. Mobile keeps the same
         dark visual identity via the gradient. */
  .news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at 75% 40%,
        rgba(122, 138, 174, 0.28) 0%,
        rgba(70, 88, 130, 0.14) 35%,
        transparent 70%),
      radial-gradient(ellipse 50% 60% at 85% 70%,
        rgba(168, 179, 204, 0.10) 0%,
        transparent 55%),
      radial-gradient(circle at 90% 35%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 25%),
      linear-gradient(140deg, #0a0f1f 0%, #0e1424 50%, #131b30 100%);
    animation: newsHeroDrift 32s ease-in-out infinite alternate;
    transform-origin: right center;
    will-change: transform;
  }
  .news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at 75% 40%,
        rgba(122, 138, 174, 0.28) 0%,
        rgba(70, 88, 130, 0.14) 35%,
        transparent 70%),
      radial-gradient(ellipse 50% 60% at 85% 70%,
        rgba(168, 179, 204, 0.10) 0%,
        transparent 55%),
      radial-gradient(circle at 90% 35%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 25%),
      linear-gradient(140deg, #0a0f1f 0%, #0e1424 50%, #131b30 100%);
    animation: newsHeroDrift 32s ease-in-out infinite alternate;
    transform-origin: right center;
    will-change: transform;
  }

  /* Resources hero bg: archive vault photograph (assets/docs/docs-hero.jpg).
  /* Resources hero bg: archive vault photograph (assets/docs/docs-hero.jpg).
         Heavy left-side darkness in the photo composition matches the
         site's "subject on the right, text on the left" hero pattern,
         so the existing veil layer keeps the title legible. */
  @media (min-width: 900px) {
    .news-hero-bg {
      background:
        #0a0f1f url('../assets/docs/docs-hero.jpg') right center / cover no-repeat;
    }
  }
  @media (min-width: 900px) {
    .news-hero-bg {
      background:
        #0a0f1f url('../assets/docs/docs-hero.jpg') right center / cover no-repeat;
    }
  }

  @keyframes newsHeroDrift {
    from {
      transform: scale(1.02) translate3d(0, 0, 0);
    }
  @keyframes newsHeroDrift {
    from {
      transform: scale(1.02) translate3d(0, 0, 0);
    }

    to {
      transform: scale(1.08) translate3d(-1%, -0.5%, 0);
    }
  }
    to {
      transform: scale(1.08) translate3d(-1%, -0.5%, 0);
    }
  }

  /* Legibility veil over the bg, biased to the left where text
  /* Legibility veil over the bg, biased to the left where text
         sits. Holds at high opacity through ~55% of the viewport
         width so the title and lede stay legible across the
         photographic backdrop at all viewport sizes; tapers smoothly
         to transparent on the right where the desk and lamp sit, so
         the photo subject reads cleanly. */
  .news-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(10, 15, 31, 0.92) 0%,
        rgba(10, 15, 31, 0.88) 30%,
        rgba(10, 15, 31, 0.7) 50%,
        rgba(10, 15, 31, 0.35) 72%,
        rgba(10, 15, 31, 0) 100%),
      linear-gradient(180deg,
        rgba(10, 15, 31, 0) 60%,
        rgba(10, 15, 31, 0.55) 100%);
  }
  .news-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        rgba(10, 15, 31, 0.92) 0%,
        rgba(10, 15, 31, 0.88) 30%,
        rgba(10, 15, 31, 0.7) 50%,
        rgba(10, 15, 31, 0.35) 72%,
        rgba(10, 15, 31, 0) 100%),
      linear-gradient(180deg,
        rgba(10, 15, 31, 0) 60%,
        rgba(10, 15, 31, 0.55) 100%);
  }

  .news-hero>.wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .news-hero>.wrap {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* News hero uses the standard centred .wrap so its title left
  /* News hero uses the standard centred .wrap so its title left
         edge aligns with every body section header on the page. width:
         100% is required because .news-hero is a flex container. The
         news-hero-title and lede have max-width constraints so the
         copy stays in the left half, leaving the right portion of the
         hero clear for imagery. */
  .news-hero-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
    color: #fff;
  }
  .news-hero-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 28px;
    color: #fff;
  }

  .news-hero-title em {
    font-style: normal;
    font-weight: 500;
    color: #a8b3cc;
  }
  .news-hero-title em {
    font-style: normal;
    font-weight: 500;
    color: #a8b3cc;
  }

  .news-hero-title .hero-line {
    display: block;
    white-space: nowrap;
  }
  .news-hero-title .hero-line {
    display: block;
    white-space: nowrap;
  }

  .news-hero .hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 0 40px;
  }
  .news-hero .hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 56ch;
    margin: 0 0 40px;
  }

  @media (min-width: 768px) {
  @media (min-width: 768px) {

    .news-hero .hero-lede {
      margin-bottom: 48px;
    }
    .news-hero .hero-lede {
      margin-bottom: 48px;
    }

  }
  }

  /* Hero CTAs: matches the Tenders pattern - primary pill + ghost
  /* Hero CTAs: matches the Tenders pattern - primary pill + ghost
         pill with white-on-dark border. */
  .news-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .news-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .news-hero-ctas .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
  }
  .news-hero-ctas .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
  }

  .news-hero-ctas .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }
  .news-hero-ctas .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
  }

  /* Controls strip - sits between the hero and the featured pair,
  /* Controls strip - sits between the hero and the featured pair,
         with the same .wrap as everything else so the search and pill
         filters align with the section headings below. */
  .news-controls-strip {
    background: var(--bg);
    padding: 40px 0 8px;
    border-bottom: 1px solid var(--ink-10);
  }
  .news-controls-strip {
    background: var(--bg);
    padding: 40px 0 8px;
    border-bottom: 1px solid var(--ink-10);
  }

  @media (min-width: 768px) {
    .news-controls-strip {
      padding: 56px 0 16px;
    }
  }
  @media (min-width: 768px) {
    .news-controls-strip {
      padding: 56px 0 16px;
    }
  }

  /* Search + filter row sits at the bottom of the hero, anchoring
  /* Search + filter row sits at the bottom of the hero, anchoring
         the page's interactive controls to the editorial intro. */
  .news-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }
  .news-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
  }

  @media (min-width: 900px) {
  @media (min-width: 900px) {

    .news-controls {
      flex-direction: row;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .news-controls {
      flex-direction: row;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }

  }
  }

  .news-search {
    position: relative;
    width: 100%;
    max-width: 460px;
  }
  .news-search {
    position: relative;
    width: 100%;
    max-width: 460px;
  }

  .news-search input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 999px;
    padding: 14px 44px 14px 46px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .news-search input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 999px;
    padding: 14px 44px 14px 46px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .news-search input::placeholder {
    color: var(--ink-40);
  }
  .news-search input::placeholder {
    color: var(--ink-40);
  }

  .news-search input:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(91, 111, 153, 0.12);
  }
  .news-search input:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 4px rgba(91, 111, 153, 0.12);
  }

  .news-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-40);
    pointer-events: none;
  }
  .news-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-40);
    pointer-events: none;
  }

  .news-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--ink-10);
    color: var(--ink-70);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
  }
  .news-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--ink-10);
    color: var(--ink-70);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
  }

  .news-search-clear:hover {
    background: var(--ink-25);
    color: var(--ink);
  }
  .news-search-clear:hover {
    background: var(--ink-25);
    color: var(--ink);
  }

  .news-search.has-value .news-search-clear {
    display: inline-flex;
  }
  .news-search.has-value .news-search-clear {
    display: inline-flex;
  }

  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  @media (max-width: 899px) {
  @media (max-width: 899px) {

    /* Mobile: single-line scroll so the row never wraps to 3 lines. */
    .filter-pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 4px;
      margin: 0 -24px;
      padding-left: 24px;
      padding-right: 24px;
    }
    /* Mobile: single-line scroll so the row never wraps to 3 lines. */
    .filter-pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 4px;
      margin: 0 -24px;
      padding-left: 24px;
      padding-right: 24px;
    }

    .filter-pills::-webkit-scrollbar {
      display: none;
    }
    .filter-pills::-webkit-scrollbar {
      display: none;
    }

  }
  }

.pill {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.pill:hover {
  color: var(--ink);
  border-color: var(--ink-25);
  background: rgba(255, 255, 255, 0.5);
}

.pill.active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.pill.active:hover {
  background: var(--ink);
  color: var(--bg);
}

  /* ----- Result count strip ----- */
  .news-result-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
  }
  /* ----- Result count strip ----- */
  .news-result-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
  }

.news-result-bar .count {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}

  .news-result-bar .count strong {
    color: var(--ink);
    font-weight: 600;
  }
  .news-result-bar .count strong {
    color: var(--ink);
    font-weight: 600;
  }

  .news-result-bar .sort-note {
    font-size: 13px;
    color: var(--ink-40);
    font-style: italic;
  }
  .news-result-bar .sort-note {
    font-size: 13px;
    color: var(--ink-40);
    font-style: italic;
  }

  /* ----- Featured pair (pinned + latest) ----- */
  .featured-pair-section {
    padding: 56px 0 40px;
  }
  /* ----- Featured pair (pinned + latest) ----- */
  .featured-pair-section {
    padding: 56px 0 40px;
  }

  @media (min-width: 1200px) {
    .featured-pair-section {
      padding: 72px 0 56px;
    }
  }
  @media (min-width: 1200px) {
    .featured-pair-section {
      padding: 72px 0 56px;
    }
  }

  .featured-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .featured-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  @media (min-width: 980px) {
  @media (min-width: 980px) {

    .featured-pair {
      grid-template-columns: 1fr 1fr;
    }
    .featured-pair {
      grid-template-columns: 1fr 1fr;
    }

  }
  }

  @media (min-width: 1200px) {
  @media (min-width: 1200px) {

    .featured-pair {
      gap: 40px;
    }
    .featured-pair {
      gap: 40px;
    }

  }
  }

  /* When the pinned story IS the latest story, collapse to one big
  /* When the pinned story IS the latest story, collapse to one big
         card across the row. */
  .featured-pair.solo {
    grid-template-columns: 1fr;
  }
  .featured-pair.solo {
    grid-template-columns: 1fr;
  }

  .featured-pair.solo .feature-card {
    max-width: 100%;
  }
  .featured-pair.solo .feature-card {
    max-width: 100%;
  }

  .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
      border-color 0.3s ease,
      box-shadow 0.4s ease;
  }
  .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--ink-10);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
      border-color 0.3s ease,
      box-shadow 0.4s ease;
  }

  .feature-card-media {
    aspect-ratio: 16 / 10;
    background: var(--surface);
    position: relative;
    overflow: hidden;
  }
  .feature-card-media {
    aspect-ratio: 16 / 10;
    background: var(--surface);
    position: relative;
    overflow: hidden;
  }

  /* Solo featured-card gets a wider, more cinematic crop. */
  .featured-pair.solo .feature-card-media {
    aspect-ratio: 21 / 9;
  }
  /* Solo featured-card gets a wider, more cinematic crop. */
  .featured-pair.solo .feature-card-media {
    aspect-ratio: 21 / 9;
  }

  .feature-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
  }
  .feature-card-media .ph {
    width: 100%;
    height: 100%;
    transition: transform 1.4s cubic-bezier(0.2, 0, 0, 1);
  }

  .feature-card:hover .feature-card-media .ph {
    transform: scale(1.05);
  }
  .feature-card:hover .feature-card-media .ph {
    transform: scale(1.05);
  }

  /* Top-left badge that identifies whether this slot is "Pinned" or
  /* Top-left badge that identifies whether this slot is "Pinned" or
         "Latest". Visual label only — pinning is an editorial decision
         made on the backend, not a user-facing control. NO
         backdrop-filter (per landing-page handoff guidance — small
         rounded elements with backdrop-filter risk halo artefacts).
         Solid translucent navy + a 1px white inner border gives enough
         chip definition over any image. */
.feature-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: rgba(15, 23, 38, 0.85);
  border-radius: 999px;
  color: #fff;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

  .feature-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .feature-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .feature-badge.solo {
    background: rgba(15, 23, 38, 0.92);
  }
  .feature-badge.solo {
    background: rgba(15, 23, 38, 0.92);
  }

  .feature-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }
  .feature-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }

  @media (min-width: 768px) {
    .feature-card-body {
      padding: 28px 28px 32px;
    }
  }
  @media (min-width: 768px) {
    .feature-card-body {
      padding: 28px 28px 32px;
    }
  }

.feature-card-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

  .feature-card-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .feature-card-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }

  .featured-pair.solo .feature-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
  }
  .featured-pair.solo .feature-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
  }

  .feature-card-excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }
  .feature-card-excerpt {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }

  .feature-card-meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-55);
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .feature-card-meta {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-55);
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .feature-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
  }
  .feature-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
  }

  /* ----- Archive list ----- */
  .archive-section {
    padding: 24px 0 96px;
  }
  /* ----- Archive list ----- */
  .archive-section {
    padding: 24px 0 96px;
  }

.archive-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}

.archive-list {
  display: flex;
  flex-direction: column;
}

.archive-row:first-of-type {
  border-top: 1px solid var(--ink-10);
}

  /* Each archive-row is a clickable link. Internal layout is a grid
  /* Each archive-row is a clickable link. Internal layout is a grid
         that stacks on mobile and goes to thumb | text | aside on desktop. */
  .archive-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ink-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease;
  }
  .archive-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ink-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease;
  }

  @media (min-width: 700px) {
  @media (min-width: 700px) {

    .archive-row {
      grid-template-columns: 200px minmax(0, 1fr) auto;
      gap: 28px;
      padding: 28px 16px;
      margin: 0 -16px;
      align-items: center;
    }
    .archive-row {
      grid-template-columns: 200px minmax(0, 1fr) auto;
      gap: 28px;
      padding: 28px 16px;
      margin: 0 -16px;
      align-items: center;
    }

  }
  }

  @media (min-width: 1100px) {
  @media (min-width: 1100px) {

    .archive-row {
      grid-template-columns: 240px minmax(0, 1fr) 200px;
      gap: 36px;
    }
    .archive-row {
      grid-template-columns: 240px minmax(0, 1fr) 200px;
      gap: 36px;
    }

  }
  }

  .archive-row-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }
  .archive-row-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }

  .archive-row-thumb .ph {
    width: 100%;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  }
  .archive-row-thumb .ph {
    width: 100%;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
  }

  @media (max-width: 699px) {
  @media (max-width: 699px) {

    /* On mobile, shrink the thumb so the row reads as text-led. */
    .archive-row-thumb {
      aspect-ratio: 16 / 9;
      max-width: 100%;
    }
    /* On mobile, shrink the thumb so the row reads as text-led. */
    .archive-row-thumb {
      aspect-ratio: 16 / 9;
      max-width: 100%;
    }

  }
  }

  .archive-row-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .archive-row-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

.archive-row-tag {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

  .archive-row-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
    transition: color 0.2s ease;
  }
  .archive-row-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
    transition: color 0.2s ease;
  }

  .archive-row:hover .archive-row-title {
    color: var(--accent);
  }
  .archive-row:hover .archive-row-title {
    color: var(--accent);
  }

  .archive-row-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 4px 0 0;
    /* Clamp to two lines so rows stay rhythmic. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .archive-row-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 4px 0 0;
    /* Clamp to two lines so rows stay rhythmic. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .archive-row-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .archive-row-aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  @media (min-width: 700px) {
  @media (min-width: 700px) {

    .archive-row-aside {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
      text-align: right;
    }
    .archive-row-aside {
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
      text-align: right;
    }

  }
  }

  .archive-row-meta {
    font-size: 12px;
    color: var(--ink-55);
    white-space: nowrap;
  }
  .archive-row-meta {
    font-size: 12px;
    color: var(--ink-55);
    white-space: nowrap;
  }

  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
    vertical-align: middle;
    margin: 0 6px;
  }
  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-25);
    vertical-align: middle;
    margin: 0 6px;
  }

  /* Share button — sits in the aside column, optically aligned with
  /* Share button — sits in the aside column, optically aligned with
         the row's right edge. Click stops propagation so it doesn't open
         the article. Uses navigator.share when available, falls back to
         copying the article URL to the clipboard with a brief flash to
         confirm. */
  .share-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ink-10);
    background: var(--bg-raised);
    color: var(--ink-55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    position: relative;
  }
  .share-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ink-10);
    background: var(--bg-raised);
    color: var(--ink-55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    position: relative;
  }

  /* Brief confirmation state after a clipboard fallback succeeds.
  /* Brief confirmation state after a clipboard fallback succeeds.
         Driven by JS adding/removing .copied for ~1.4s. */
  /* ----- Pagination -----
  /* ----- Pagination -----
         Sits below the archive list. Numeric pages plus prev/next
         arrow controls. Active page reverses to ink-on-bg. Disabled
         arrows fade to muted ink with no pointer. */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
  }

.pagination-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
  background: transparent;
  border: 1px solid var(--ink-10);
  border-radius: 999px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }
  .pagination-btn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-25);
    background: rgba(255, 255, 255, 0.5);
  }

  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }
  .pagination-btn[aria-current="page"] {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
    cursor: default;
  }

  /* Empty state when search/filter has no matches. */
  .archive-empty {
    padding: 80px 24px;
    text-align: center;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
    display: none;
  }
  /* Empty state when search/filter has no matches. */
  .archive-empty {
    padding: 80px 24px;
    text-align: center;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
    display: none;
  }

/* DOCUMENTS LIBRARY (resources page) — filter chips+flat card grid. Same layout previously used on the homepage; */

/* the filter chips above the grid switch which cards are visible via the .docs-filter JS controller. Cards open the PDF preview modal on click. */  */
.docs-canvas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 100px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      var(--surface) 0%,
      transparent 75%),
    var(--bg);
}

  .docs-canvas::before,
  .docs-canvas::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.5;
  }
  .docs-canvas::before,
  .docs-canvas::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.5;
  }

  .docs-canvas::before {
    right: -220px;
    top: 80px;
    width: 760px;
    height: 860px;
    background: linear-gradient(140deg,
        rgba(26, 37, 64, 0.04) 0%,
        rgba(26, 37, 64, 0.012) 40%,
        transparent 65%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 22%,
        #000 55%,
        #000 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 22%,
        #000 55%,
        #000 100%);
  }
  .docs-canvas::before {
    right: -220px;
    top: 80px;
    width: 760px;
    height: 860px;
    background: linear-gradient(140deg,
        rgba(26, 37, 64, 0.04) 0%,
        rgba(26, 37, 64, 0.012) 40%,
        transparent 65%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 22%,
        #000 55%,
        #000 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 22%,
        #000 55%,
        #000 100%);
  }

  .docs-canvas::after {
    left: -180px;
    bottom: -140px;
    width: 540px;
    height: 620px;
    background: linear-gradient(320deg,
        rgba(26, 37, 64, 0.025) 0%,
        rgba(26, 37, 64, 0.008) 40%,
        transparent 65%);
  }
  .docs-canvas::after {
    left: -180px;
    bottom: -140px;
    width: 540px;
    height: 620px;
    background: linear-gradient(320deg,
        rgba(26, 37, 64, 0.025) 0%,
        rgba(26, 37, 64, 0.008) 40%,
        transparent 65%);
  }

  .docs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
  }
  .docs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 2;
  }

.docs-filter {
  font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink-55);
  background: transparent;
  border: 1px solid var(--ink-10);
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  position: relative;
  white-space: nowrap;
}

  .docs-filter:hover {
    color: var(--ink);
    border-color: var(--ink-40);
  }
  .docs-filter:hover {
    color: var(--ink);
    border-color: var(--ink-40);
  }

  .docs-filter.active {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
  }
  .docs-filter.active {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
  }

  .docs-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .docs-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  @media (max-width: 1100px) {
  @media (max-width: 1100px) {

    .docs-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .docs-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

  }
  }

  @media (max-width: 780px) {
  @media (max-width: 780px) {

    .docs-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    .docs-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

  }
  }

  @media (max-width: 480px) {
  @media (max-width: 480px) {

    .docs-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .docs-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

  }
  }

  /* Collapse Drupal's views wrapper so .doc cards are direct grid children. */
  .docs-grid .views-element-container {
    display: contents;
  }
  /* Collapse Drupal's views wrapper so .doc cards are direct grid children. */
  .docs-grid .views-element-container {
    display: contents;
  }

  /* When a filter is active, non-matching cards are hidden. */
  .docs-grid.filtered .doc:not(.match) {
    display: none;
  }
  /* When a filter is active, non-matching cards are hidden. */
  .docs-grid.filtered .doc:not(.match) {
    display: none;
  }

  .doc:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -8px rgba(26, 37, 64, 0.16);
  }
  .doc:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -8px rgba(26, 37, 64, 0.16);
  }

  .doc:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
  }
  .doc:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
  }

  .doc.is-placeholder {
    cursor: default;
  }
  .doc.is-placeholder {
    cursor: default;
  }

  .doc.is-placeholder:hover {
    transform: none;
    box-shadow: 0 2px 16px rgba(26, 37, 64, 0.08);
  }
  .doc.is-placeholder:hover {
    transform: none;
    box-shadow: 0 2px 16px rgba(26, 37, 64, 0.08);
  }

  .doc-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(26, 37, 64, 0.04) 0%, rgba(26, 37, 64, 0.08) 100%), var(--surface);
  }
  .doc-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(26, 37, 64, 0.04) 0%, rgba(26, 37, 64, 0.08) 100%), var(--surface);
  }

  .doc-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(26, 37, 64, 0.08),
      0 8px 22px -8px rgba(26, 37, 64, 0.24);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1),
      box-shadow 0.4s ease;
  }
  .doc-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(26, 37, 64, 0.08),
      0 8px 22px -8px rgba(26, 37, 64, 0.24);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1),
      box-shadow 0.4s ease;
  }

  .doc:hover .doc-thumb img {
    transform: scale(1.03);
    box-shadow:
      0 1px 2px rgba(26, 37, 64, 0.12),
      0 14px 30px -10px rgba(26, 37, 64, 0.32);
  }
  .doc:hover .doc-thumb img {
    transform: scale(1.03);
    box-shadow:
      0 1px 2px rgba(26, 37, 64, 0.12),
      0 14px 30px -10px rgba(26, 37, 64, 0.32);
  }

  .doc-thumb-placeholder-sheet {
    width: 60%;
    height: 72%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 16px;
    opacity: 0.4;
  }
  .doc-thumb-placeholder-sheet {
    width: 60%;
    height: 72%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 16px;
    opacity: 0.4;
  }

.doc-thumb-placeholder-label {
  font-family: "JetBrains Mono", "IBM Plex Sans Arabic", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
}

.doc-thumb-placeholder-note {
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 10px;
  color: var(--ink-40);
  line-height: 1.4;
  max-width: 90%;
}

.doc-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 16px;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
  font-size: 11px;
  color: var(--ink-55);
}

  .doc-foot-size {
    letter-spacing: 0.02em;
  }
  .doc-foot-size {
    letter-spacing: 0.02em;
  }

  .doc-foot-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 11px;
    text-transform: uppercase;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    transition: color 0.25s ease;
  }
  .doc-foot-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 11px;
    text-transform: uppercase;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    transition: color 0.25s ease;
  }

  .doc:hover .doc-foot-action {
    color: var(--accent, #1a2540);
  }
  .doc:hover .doc-foot-action {
    color: var(--accent, #1a2540);
  }

  .doc-foot-action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .doc-foot-action svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

.doc.is-placeholder .doc-foot-action {
  color: var(--ink-40);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
}

  /* ============================================================
  /* ============================================================
         PDF PREVIEW MODAL
         Fixed overlay with iframe-loaded PDF. Veil covers the page;
         the modal card contains a header (title + Download + Close)
         and the PDF frame fills the rest of the card height.
         ============================================================ */
  .pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
  }
  .pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
  }

  .pdf-modal[hidden] {
    display: none;
  }
  .pdf-modal[hidden] {
    display: none;
  }

  .pdf-modal-veil {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 26, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
  }
  .pdf-modal-veil {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 26, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
  }

  .pdf-modal-card {
    position: relative;
    z-index: 1;
    background: var(--bg-raised);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.5);
  }
  .pdf-modal-card {
    position: relative;
    z-index: 1;
    background: var(--bg-raised);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.5);
  }

  .pdf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ink-10);
    flex-shrink: 0;
  }
  .pdf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ink-10);
    flex-shrink: 0;
  }

  .pdf-modal-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pdf-modal-title {
    font-family: "Poppins", "IBM Plex Sans Arabic", sans-serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .pdf-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .pdf-modal-close {
    background: transparent;
    border: 1px solid var(--ink-10);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .pdf-modal-close {
    background: transparent;
    border: 1px solid var(--ink-10);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .pdf-modal-close:hover {
    background: var(--surface);
    border-color: var(--ink-25);
  }
  .pdf-modal-close:hover {
    background: var(--surface);
    border-color: var(--ink-25);
  }

  .pdf-modal-actions .btn-primary:hover {
    color: var(--bg);
  }
  .pdf-modal-actions .btn-primary:hover {
    color: var(--bg);
  }

  .pdf-modal-frame-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #f4f3ef;
  }
  .pdf-modal-frame-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #f4f3ef;
  }

  .pdf-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .pdf-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (max-width: 700px) {
  @media (max-width: 700px) {

    .pdf-modal {
      padding: 0;
    }
    .pdf-modal {
      padding: 0;
    }

    .pdf-modal-card {
      border-radius: 0;
      max-width: none;
    }
    .pdf-modal-card {
      border-radius: 0;
      max-width: none;
    }

    .pdf-modal-head {
      padding: 14px 16px;
    }
    .pdf-modal-head {
      padding: 14px 16px;
    }

    .pdf-modal-title {
      font-size: 15px;
    }
    .pdf-modal-title {
      font-size: 15px;
    }

  }
  }

  /* When modal is open, prevent body scroll. Set on body via JS. */
  html body[data-modal-open="true"] {
    overflow: hidden;
  }
  /* When modal is open, prevent body scroll. Set on body via JS. */
  html body[data-modal-open="true"] {
    overflow: hidden;
  }

  /* ============ UTILITIES (replace former inline style= attributes) ============
  /* ============ UTILITIES (replace former inline style= attributes) ============
   These use !important deliberately: an inline style always beats stylesheet
   rules, so to faithfully replace inline styles a utility must override
   component CSS the same way. This is the standard convention for utilities. */
  .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }
  .u-media-cover {
    object-fit: cover !important;
    display: block !important;
  }

  .u-pt-0 {
    padding-top: 0 !important;
  }
  .u-pt-0 {
    padding-top: 0 !important;
  }

  .u-nowrap {
    white-space: nowrap !important;
  }
  .u-nowrap {
    white-space: nowrap !important;
  }

  .u-m-0 {
    margin: 0 !important;
  }
  .u-m-0 {
    margin: 0 !important;
  }

  .u-mb-32 {
    margin-bottom: 32px !important;
  }
  .u-mb-32 {
    margin-bottom: 32px !important;
  }

  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-mt-24-lh {
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .u-flex-row-24 {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
  .u-flex-end {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .u-text-white {
    color: #fff !important;
  }
  .u-text-white {
    color: #fff !important;
  }

  .u-text-slate {
    color: #a8b3cc !important;
  }
  .u-text-slate {
    color: #a8b3cc !important;
  }

  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }
  .u-story-lede {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 24px !important;
    line-height: 1.6 !important;
  }

  /* ==========================================================================
  /* ==========================================================================
   SCOPED STYLES FOR COMING-SOON ()
   ========================================================================== */

  html.page--coming-soon[data-theme="light"] {
    --bg: #101a30;
    --bg-deep: #0a1224;
    --ink: #e6ecf5;
    --ink-soft: rgba(230, 236, 245, 0.78);
    --ink-mute: rgba(230, 236, 245, 0.55);
    --ink-faint: rgba(230, 236, 245, 0.16);
    --accent: #a8b3cc;
    --accent-deep: #7a8aae;
  }
  html.page--coming-soon[data-theme="light"] {
    --bg: #101a30;
    --bg-deep: #0a1224;
    --ink: #e6ecf5;
    --ink-soft: rgba(230, 236, 245, 0.78);
    --ink-mute: rgba(230, 236, 245, 0.55);
    --ink-faint: rgba(230, 236, 245, 0.16);
    --accent: #a8b3cc;
    --accent-deep: #7a8aae;
  }

/* body.page--coming-soon * {
  margin: 0;
  padding: 0;
} */

  html.page--coming-soon,
  html.page--coming-soon body {
    height: 100%;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
  }
  html.page--coming-soon,
  html.page--coming-soon body {
    height: 100%;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
  }

  html.page--coming-soon body {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  html.page--coming-soon body {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  html body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 90% 60% at 70% 30%,
        rgba(122, 138, 174, 0.18) 0%,
        transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    pointer-events: none;
  }
  html body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 90% 60% at 70% 30%,
        rgba(122, 138, 174, 0.18) 0%,
        transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    pointer-events: none;
  }

  .kite {
    position: absolute;
    right: -22vw;
    bottom: -18vw;
    width: 110vw;
    height: 130vw;
    max-width: 1280px;
    max-height: 1480px;
    z-index: 0;
    background: linear-gradient(140deg,
        rgba(168, 179, 204, 0.20) 0%,
        rgba(168, 179, 204, 0.06) 38%,
        transparent 72%);
    clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
    filter: blur(2px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 32%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 32%, #000 100%);
  }
  .kite {
    position: absolute;
    right: -22vw;
    bottom: -18vw;
    width: 110vw;
    height: 130vw;
    max-width: 1280px;
    max-height: 1480px;
    z-index: 0;
    background: linear-gradient(140deg,
        rgba(168, 179, 204, 0.20) 0%,
        rgba(168, 179, 204, 0.06) 38%,
        transparent 72%);
    clip-path: polygon(50% 0%, 99.6% 15%, 50% 100%, 0.4% 15%);
    filter: blur(2px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 32%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 8%, #000 32%, #000 100%);
  }

  .frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    height: 100vh;
    height: 100dvh;
    padding: 28px 20px 20px;
    text-align: center;
  }
  .frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    height: 100vh;
    height: 100dvh;
    padding: 28px 20px 20px;
    text-align: center;
  }

  @media (min-width: 600px) {
    .frame {
      padding: 36px 32px 28px;
    }
  }
  @media (min-width: 600px) {
    .frame {
      padding: 36px 32px 28px;
    }
  }

  @media (min-width: 768px) {
    .frame {
      padding: 48px 56px 40px;
    }
  }
  @media (min-width: 768px) {
    .frame {
      padding: 48px 56px 40px;
    }
  }

  @media (max-height: 600px) {
    .frame {
      padding: 16px 24px 14px;
    }
  }
  @media (max-height: 600px) {
    .frame {
      padding: 16px 24px 14px;
    }
  }

.top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* 
.brand-logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
} */
.brand-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
}

@media (max-width: 600px) {
  .brand-logo { height: 32px; }
}

@media (max-width: 380px) {
  .brand-logo { height: 28px; }
}

.coming-soon .brand-logo {
    height: 44px;
    width: auto;
    display: block;
}
 @media (min-width: 768px) {
    .coming-soon .brand-logo {
        height: 64px;
    }
}


.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 0 32px;
  max-width: 720px;
  width: 100%;
}

  @media (min-width: 768px) {
    .center {
      gap: 28px;
      padding: 64px 0 48px;
    }
  }
  @media (min-width: 768px) {
    .center {
      gap: 28px;
      padding: 64px 0 48px;
    }
  }

  @media (max-height: 600px) {
    .center {
      gap: 14px;
      padding: 12px 0;
    }
  }
  @media (max-height: 600px) {
    .center {
      gap: 14px;
      padding: 12px 0;
    }
  }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", "SF Mono", monospace;  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

  .eyebrow .rule {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--accent);
  }
  .eyebrow .rule {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--accent);
  }

  @media (max-width: 480px) {
    .eyebrow {
      gap: 10px;
      font-size: 10px;
      letter-spacing: 0.18em;
    }
  @media (max-width: 480px) {
    .eyebrow {
      gap: 10px;
      font-size: 10px;
      letter-spacing: 0.18em;
    }

    .eyebrow .rule {
      width: 24px;
    }
  }
    .eyebrow .rule {
      width: 24px;
    }
  }

  @media (max-height: 480px) {
    .eyebrow {
      font-size: 9.5px;
    }
  }
  @media (max-height: 480px) {
    .eyebrow {
      font-size: 9.5px;
    }
  }

.title {
  font-family: "Poppins", sans-serif;  
  font-weight: 500;
  font-size: clamp(28px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 16ch;
}

  @media (max-height: 600px) {
    .title {
      font-size: clamp(24px, 4.5vw, 44px);
    }
  }
  @media (max-height: 600px) {
    .title {
      font-size: clamp(24px, 4.5vw, 44px);
    }
  }

  .title .light {
    color: var(--ink);
    display: block;
  }
  .title .light {
    color: var(--ink);
    display: block;
  }

  .title .accent {
    color: var(--accent);
    display: block;
  }
  .title .accent {
    color: var(--accent);
    display: block;
  }

.lede {
font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
  padding: 0 8px;
}

  @media (max-height: 480px) {
    .lede {
      display: none;
    }
  }
  @media (max-height: 480px) {
    .lede {
      display: none;
    }
  }

  .capture,
  .capture form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin-top: 8px;
  }
  .capture,
  .capture form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin-top: 8px;
  }

  @media (min-width: 600px) {
  @media (min-width: 600px) {

    .capture,
    .capture form {
      flex-direction: row;
      align-items: stretch;
      gap: 8px;
    }
  }
    .capture,
    .capture form {
      flex-direction: row;
      align-items: stretch;
      gap: 8px;
    }
  }

  @media (max-height: 600px) {
  @media (max-height: 600px) {

    .capture,
    .capture form {
      margin-top: 4px;
      gap: 8px;
      flex-direction: row;
    }
  }
    .capture,
    .capture form {
      margin-top: 4px;
      gap: 8px;
      flex-direction: row;
    }
  }

  .capture label {
    position: absolute;
    left: -9999px;
  }
  .capture label {
    position: absolute;
    left: -9999px;
  }

  /* Drupal wrapper handling to keep inputs inline */
  .capture .form-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  /* Drupal wrapper handling to keep inputs inline */
  .capture .form-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .capture .form-item input[type="email"] {
    width: 100%;
  }
  .capture .form-item input[type="email"] {
    width: 100%;
  }

  .capture .form-actions {
    display: flex;
    align-items: stretch;
    margin: 0;
  }
  .capture .form-actions {
    display: flex;
    align-items: stretch;
    margin: 0;
  }

  .capture .form-actions button,
  .capture .form-actions input[type="submit"] {
    width: 100%;
    height: 100%;
  }
  .capture .form-actions button,
  .capture .form-actions input[type="submit"] {
    width: 100%;
    height: 100%;
  }

  .capture input[type="email"] {
    flex: 1;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .capture input[type="email"] {
    flex: 1;
    padding: 14px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
  }

  .capture input[type="email"]::placeholder {
    color: var(--ink-mute);
  }
  .capture input[type="email"]::placeholder {
    color: var(--ink-mute);
  }

  .capture input[type="email"]:hover {
    border-color: rgba(255, 255, 255, 0.28);
  }
  .capture input[type="email"]:hover {
    border-color: rgba(255, 255, 255, 0.28);
  }

  .capture input[type="email"]:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
  }
  .capture input[type="email"]:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
  }

  .capture button,
  .capture input[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: none;
    border-radius: 999px;
    color: var(--ink);
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05),
      0 8px 32px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .capture button,
  .capture input[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: none;
    border-radius: 999px;
    color: var(--ink);
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05),
      0 8px 32px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }

  .capture button:hover,
  .capture input[type="submit"]:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      0 12px 40px rgba(0, 0, 0, 0.32);
  }
  .capture button:hover,
  .capture input[type="submit"]:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06),
      0 12px 40px rgba(0, 0, 0, 0.32);
  }

  .capture button .arrow,
  .capture input[type="submit"] .arrow {
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
  }
  .capture button .arrow,
  .capture input[type="submit"] .arrow {
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
  }

  .capture button:hover .arrow,
  .capture input[type="submit"]:hover .arrow {
    transform: translate(2px, -2px);
  }
  .capture button:hover .arrow,
  .capture input[type="submit"]:hover .arrow {
    transform: translate(2px, -2px);
  }

  .capture-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-mute);
    padding: 0 8px;
  }
  .capture-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-mute);
    padding: 0 8px;
  }

  @media (max-height: 600px) {
    .capture-note {
      display: none;
    }
  }
  @media (max-height: 600px) {
    .capture-note {
      display: none;
    }
  }

  .capture-note a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .capture-note a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

.capture-success {
  display: none;
  margin-top: 8px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(168, 179, 204, 0.32);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 480px;
}

.capture-success.show {
  display: block;
}

.capture .webform-confirmation {
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid rgba(168, 179, 204, 0.32);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.capture .webform-confirmation__message {
  margin: 0;
}

.capture .webform-confirmation__back {
  display: none;
}

  .foot {
    width: 100%;
    max-width: 920px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .foot {
    width: 100%;
    max-width: 920px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  @media (min-width: 700px) {
    .foot {
      flex-direction: row;
      justify-content: space-between;
      gap: 24px;
      font-size: 10.5px;
      letter-spacing: 0.18em;
      margin-top: 32px;
      padding-top: 20px;
    }
  @media (min-width: 700px) {
    .foot {
      flex-direction: row;
      justify-content: space-between;
      gap: 24px;
      font-size: 10.5px;
      letter-spacing: 0.18em;
      margin-top: 32px;
      padding-top: 20px;
    }

    .foot>* {
      flex: 1;
    }
    .foot>* {
      flex: 1;
    }

    .foot> :first-child {
      text-align: left;
    }
    .foot> :first-child {
      text-align: left;
    }

    .foot> :nth-child(2) {
      text-align: center;
    }
    .foot> :nth-child(2) {
      text-align: center;
    }

    .foot> :last-child {
      text-align: right;
    }
  }
    .foot> :last-child {
      text-align: right;
    }
  }

  @media (max-width: 480px) {
    .foot> :nth-child(2) {
      display: none;
    }
  }
  @media (max-width: 480px) {
    .foot> :nth-child(2) {
      display: none;
    }
  }

  @media (max-height: 600px) {
    .foot {
      margin-top: 12px;
      padding-top: 10px;
      font-size: 9px;
    }
  }
  @media (max-height: 600px) {
    .foot {
      margin-top: 12px;
      padding-top: 10px;
      font-size: 9px;
    }
  }

  .foot a {
    color: var(--ink-mute);
    text-decoration: none;
  }
  .foot a {
    color: var(--ink-mute);
    text-decoration: none;
  }

  .foot a:hover {
    color: var(--ink);
  }
  .foot a:hover {
    color: var(--ink);
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }

  .intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  .intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .intro.is-out {
    opacity: 0;
    pointer-events: none;
  }
  .intro.is-out {
    opacity: 0;
    pointer-events: none;
  }

  .intro video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in;
  }
  .intro video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in;
  }

  .intro.is-playing video {
    opacity: 1;
  }
  .intro.is-playing video {
    opacity: 1;
  }

  .intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(5, 7, 13, 0.5) 70%, rgba(5, 7, 13, 0.85) 100%);
    pointer-events: none;
  }
  .intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(5, 7, 13, 0.5) 70%, rgba(5, 7, 13, 0.85) 100%);
    pointer-events: none;
  }

  .intro-skip {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(230, 236, 245, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease 0.8s;
  }
  .intro-skip {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(230, 236, 245, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease 0.8s;
  }

  .intro.is-playing .intro-skip {
    opacity: 1;
  }
  .intro.is-playing .intro-skip {
    opacity: 1;
  }

  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  html body.is-revealed .reveal {
    opacity: 1;
    transform: translateY(0);
  }
  html body.is-revealed .reveal {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .intro {
      display: none;
    }
  @media (prefers-reduced-motion: reduce) {
    .intro {
      display: none;
    }

    .reveal {
      opacity: 1;
      transform: none;
    }
  }
    .reveal {
      opacity: 1;
      transform: none;
    }
  }

  /* ── Dynamic menu wrappers ─────────────────────────────────────────────────
  /* ── Dynamic menu wrappers ─────────────────────────────────────────────────
 * menu--main.html.twig outputs both .nav-desktop (for the desktop bar) and
 * .nav-mobile-sections (for the mobile drawer) in one render.
 * Hide whichever half is in the wrong context.
 * ------------------------------------------------------------------------ */

  /* Desktop nav bar: show only the desktop wrapper, hide mobile sections */
  .nav-links .nav-desktop {
    display: contents;
  }
  /* Desktop nav bar: show only the desktop wrapper, hide mobile sections */
  .nav-links .nav-desktop {
    display: contents;
  }

  /* transparent passthrough */
  .nav-links .nav-mobile-sections {
    display: none !important;
  }
  /* transparent passthrough */
  .nav-links .nav-mobile-sections {
    display: none !important;
  }

  /* Mobile drawer: show only the mobile sections, hide desktop wrapper */
  .mobile-nav .nav-desktop {
    display: none !important;
  }
  /* Mobile drawer: show only the mobile sections, hide desktop wrapper */
  .mobile-nav .nav-desktop {
    display: none !important;
  }

  .mobile-nav .nav-mobile-sections {
    display: contents;
  }
  .mobile-nav .nav-mobile-sections {
    display: contents;
  }

  /* transparent passthrough */
  /* transparent passthrough */

  /* ── Coming Soon — Drupal system wrapper transparency ────────────────────────
  /* ── Coming Soon — Drupal system wrapper transparency ────────────────────────
 * Drupal injects two wrapper divs between <body> and the component output:
 *   1. .dialog-off-canvas-main-canvas — the off-canvas page wrapper
 *      (off-canvas-page-wrapper.html.twig, required for contextual dialogs)
 *   2. #block-qde-content — the system main-content block wrapper
 * The coming-soon layout depends on .frame being a flex child of <body>
 * (body is display:flex flex-direction:column). `display:contents` makes each
 * wrapper invisible to layout so .frame inherits the body flex context.
 * This is safe on the coming-soon page because there are no off-canvas dialogs.
 * ─────────────────────────────────────────────────────────────────────────── */
  .page--coming-soon .dialog-off-canvas-main-canvas {
    display: contents;
  }
  .page--coming-soon .dialog-off-canvas-main-canvas {
    display: contents;
  }

  .page--coming-soon #block-qde-content {
    display: contents;
  }
  .page--coming-soon #block-qde-content {
    display: contents;
  }

  /* Ensure the .highlighted region (Drupal status messages) does not push
  /* Ensure the .highlighted region (Drupal status messages) does not push
   the frame down on the coming-soon page. It is visually hidden anyway
   but takes block space without this rule. */
  .highlighted:empty,
  .highlighted:has(.hidden:only-child) {
    display: none;
  }
  .highlighted:empty,
  .highlighted:has(.hidden:only-child) {
    display: none;
  }

  /* ── Coming Soon — collapse the node→paragraph render wrapper chain ──────────
  /* ── Coming Soon — collapse the node→paragraph render wrapper chain ──────────
 * The coming-soon content is a Basic Page node whose field_reference holds
 * one Coming Soon paragraph. Drupal's render pipeline wraps this in:
 *
 *   #block-qde-content (already display:contents above)
 *     span.kite      ← node--page.html.twig decorative kite — HIDE (component
 *                       renders its own)
 *     div            ← field wrapper  (no CSS class — field.html.twig renders
 *       div          ← "Reference" label  bare divs when Attributes object is
 *       div          ← multiple-items wrapper  empty; target structurally)
 *         div        ← per-item wrapper
 *           .intro / .kite / .frame  ← actual component elements
 *
 * All intermediate divs get display:contents so .frame inherits body's flex
 * context (flex:1 fills the viewport). .intro is position:fixed so it is
 * unaffected by nesting depth.
 * ─────────────────────────────────────────────────────────────────────────── */

  /* 1. Hide the extra kite rendered by node--page.html.twig before the field.
  /* 1. Hide the extra kite rendered by node--page.html.twig before the field.
      The coming-soon SDC component renders its own .kite in the right place. */
  .page--coming-soon #block-qde-content>.kite {
    display: none;
  }
  .page--coming-soon #block-qde-content>.kite {
    display: none;
  }

  /* 2. Collapse the bare field wrapper div (direct div child of the block;
  /* 2. Collapse the bare field wrapper div (direct div child of the block;
      field_reference renders without class attributes so class selector would
      not match — use :not([class]) to target only truly classless divs). */
  .page--coming-soon #block-qde-content>div:not([class]) {
    display: contents;
  }
  .page--coming-soon #block-qde-content>div:not([class]) {
    display: contents;
  }

  /* 3. Hide the "Reference" label (first bare-div child of the field wrapper) */
  .page--coming-soon #block-qde-content>div:not([class])>div:first-child {
    display: none;
  }
  /* 3. Hide the "Reference" label (first bare-div child of the field wrapper) */
  .page--coming-soon #block-qde-content>div:not([class])>div:first-child {
    display: none;
  }

  /* 4. Collapse the multiple-items container (last div child of field wrapper) */
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child {
    display: contents;
  }
  /* 4. Collapse the multiple-items container (last div child of field wrapper) */
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child {
    display: contents;
  }

  /* 5. Collapse each per-item paragraph wrapper inside the items container */
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child>div {
    display: contents;
  }
  /* 5. Collapse each per-item paragraph wrapper inside the items container */
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child>div {
    display: contents;
  }

  /* ── News listing page (page-news) Drupal integration ─────────────────────
  /* ── News listing page (page-news) Drupal integration ─────────────────────
   Collapses Drupal field/block wrappers so the SDC component markup is the
   direct layout parent.  Scoped strictly to to avoid bleed.
   ─────────────────────────────────────────────────────────────────────────── */

  /* Collapse the field_reference wrapper and its children (coming-soon only) */
  .page--coming-soon #block-qde-content>div:not([class]) {
    display: contents;
  }
  /* Collapse the field_reference wrapper and its children (coming-soon only) */
  .page--coming-soon #block-qde-content>div:not([class]) {
    display: contents;
  }

  .page--coming-soon #block-qde-content>div:not([class])>div:first-child {
    display: none;
  }
  .page--coming-soon #block-qde-content>div:not([class])>div:first-child {
    display: none;
  }

  .page--coming-soon #block-qde-content>div:not([class])>div:last-child {
    display: contents;
  }
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child {
    display: contents;
  }

  .page--coming-soon #block-qde-content>div:not([class])>div:last-child>div {
    display: contents;
  }
  .page--coming-soon #block-qde-content>div:not([class])>div:last-child>div {
    display: contents;
  }

  /* Collapse Views block wrapper divs injected by block system.
  /* Collapse Views block wrapper divs injected by block system.
   buildRenderable wraps output in .views-element-container > .views-row.
   We collapse those so flex/grid parents see .feature-card and .archive-row directly. */
  .featured-pair .views-element-container,
  .featured-pair .views-row {
    display: contents;
  }
  .featured-pair .views-element-container,
  .featured-pair .views-row {
    display: contents;
  }

  .archive-list .views-element-container,
  .archive-list .views-row {
    display: contents;
  }
  .archive-list .views-element-container,
  .archive-list .views-row {
    display: contents;
  }

  /* Also collapse any stray block wrappers */
  .featured-pair>div:not(article):not(.archive-empty) {
    display: contents;
  }
  /* Also collapse any stray block wrappers */
  .featured-pair>div:not(article):not(.archive-empty) {
    display: contents;
  }

  .archive-list>div:not(article):not(.archive-empty):not(.pagination) {
    display: contents;
  }
  .archive-list>div:not(article):not(.archive-empty):not(.pagination) {
    display: contents;
  }

  /* Views AJAX pager hook wrapper — layout-transparent */
  .pagination .js-pager__items {
    display: contents;
  }
  /* Views AJAX pager hook wrapper — layout-transparent */
  .pagination .js-pager__items {
    display: contents;
  }

  /* Map Drupal's pager to the design's .pagination-btn classes */
  .pagination ul.pager__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Map Drupal's pager to the design's .pagination-btn classes */
  .pagination ul.pager__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pagination .pager__item {
    list-style: none;
  }
  .pagination .pager__item {
    list-style: none;
  }

  .pagination .pager__item a,
  .pagination .pager__item.is-active a,
  .pagination .pager__item.is-active span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid rgba(13, 19, 32, 0.15);
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .pagination .pager__item a,
  .pagination .pager__item.is-active a,
  .pagination .pager__item.is-active span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid rgba(13, 19, 32, 0.15);
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .pagination .pager__item a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .pagination .pager__item a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .pagination .pager__item.is-active a,
  .pagination .pager__item.is-active span {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    pointer-events: none;
  }
  .pagination .pager__item.is-active a,
  .pagination .pager__item.is-active span {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    pointer-events: none;
  }

  .pagination .pager__item--first a,
  .pagination .pager__item--last a,
  .pagination .pager__item--previous a,
  .pagination .pager__item--next a {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
  }
  .pagination .pager__item--first a,
  .pagination .pager__item--last a,
  .pagination .pager__item--previous a,
  .pagination .pager__item--next a {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
  }

  /* Strip the inner Drupal <nav> wrapper — only style the list */
  .pagination .pager {
    display: contents;
  }
  /* Strip the inner Drupal <nav> wrapper — only style the list */
  .pagination .pager {
    display: contents;
  }

  /* News archive exposed form — hidden because filtering is handled by JS URL params.
  /* News archive exposed form — hidden because filtering is handled by JS URL params.
   Scoped to the news listing context only; other pages (e.g. documents) use the form. */
  .page-news .views-exposed-form {
    display: none !important;
  }
  .page-news .views-exposed-form {
    display: none !important;
  }

  /* Image placeholder tiles for news without images */
  .feature-card-media-placeholder,
  .archive-row-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2540 0%, #243353 100%);
    display: block;
  }
  /* Image placeholder tiles for news without images */
  .feature-card-media-placeholder,
  .archive-row-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2540 0%, #243353 100%);
    display: block;
  }

  /* Share button feedback state */
  .share-btn--copied {
    background: var(--accent, #c8a96e) !important;
    color: #fff !important;
  }
  /* Share button feedback state */
  .share-btn--copied {
    background: var(--accent, #c8a96e) !important;
    color: #fff !important;
  }

  /* Views field wrappers inside archive rows — flatten them */
  .archive-row .views-field,
  .feature-card .views-field {
    display: contents;
  }
  /* Views field wrappers inside archive rows — flatten them */
  .archive-row .views-field,
  .feature-card .views-field {
    display: contents;
  }

  /* Ensure description text is clamped to 3 lines in archive rows */
  .archive-row-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  /* Ensure description text is clamped to 3 lines in archive rows */
  .archive-row-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

/* Description: max 4 lines, and always reserve those 4 lines so a shorter
   description still occupies the same space — keeps pinned/latest cards the
   same size regardless of content length. line-height here is 1.55. */
.feature-card-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  min-height: calc(4 * 1.55em);
}

/* Title: max 2 lines, with the 2-line height reserved by default so a 1-line
   title still aligns with a 2-line one. line-height here is 1.15. When JS
   detects BOTH cards' titles fit on a single line, it adds
   .featured-pair--titles-single to drop the reserved second line. */
.feature-card-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(2 * 1.15em);
}

.featured-pair--titles-single .feature-card-title {
  min-height: 0;
}

  .feature-card-title a,
  .archive-row-title a {
    color: var(--ink);
    text-decoration: none;
  }
  .feature-card-title a,
  .archive-row-title a {
    color: var(--ink);
    text-decoration: none;
  }

  .feature-card-meta .dot,
  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    margin: 0 6px;
  }
  .feature-card-meta .dot,
  .archive-row-meta .dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    margin: 0 6px;
  }

  /* ── Newsletter webform inside CTA strip (page-news only) ───────────────── */
  .cta-newsletter {
    width: 100%;
    max-width: 560px;
  }
  /* ── Newsletter webform inside CTA strip (page-news only) ───────────────── */
  .cta-newsletter {
    width: 100%;
    max-width: 560px;
  }

  .cta-newsletter .webform-submission-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cta-newsletter .webform-submission-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  @media (min-width: 600px) {
    .cta-newsletter .webform-submission-form {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      padding: 6px 6px 6px 8px;
    }
  }
  @media (min-width: 600px) {
    .cta-newsletter .webform-submission-form {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      padding: 6px 6px 6px 8px;
    }
  }

  .cta-newsletter .form-item {
    flex: 1;
    margin: 0;
  }
  .cta-newsletter .form-item {
    flex: 1;
    margin: 0;
  }

  .cta-newsletter .form-item label {
    display: none;
  }
  .cta-newsletter .form-item label {
    display: none;
  }

  .cta-newsletter input[type="email"] {
    width: 100%;
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 14px 20px;
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    outline: none;
    box-sizing: border-box;
  }
  .cta-newsletter input[type="email"] {
    width: 100%;
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 14px 20px;
    font-family: inherit;
    font-size: 14px;
    color: #fff;
    outline: none;
    box-sizing: border-box;
  }

  @media (min-width: 600px) {
    .cta-newsletter input[type="email"] {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0 16px;
    }
  }
  @media (min-width: 600px) {
    .cta-newsletter input[type="email"] {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0 16px;
    }
  }

  .cta-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  .cta-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }

  .cta-newsletter input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.3);
  }
  .cta-newsletter input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.3);
  }

  @media (min-width: 600px) {
    .cta-newsletter input[type="email"]:focus {
      border: none;
      box-shadow: none;
    }
  }
  @media (min-width: 600px) {
    .cta-newsletter input[type="email"]:focus {
      border: none;
      box-shadow: none;
    }
  }

  .cta-newsletter .form-actions {
    flex-shrink: 0;
    margin: 0;
  }
  .cta-newsletter .form-actions {
    flex-shrink: 0;
    margin: 0;
  }

  .cta-newsletter .form-actions .button,
  .cta-newsletter .form-actions [type="submit"] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .cta-newsletter .form-actions .button,
  .cta-newsletter .form-actions [type="submit"] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
  }

  .cta-newsletter .webform-confirmation {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    padding: 14px 0;
  }
  .cta-newsletter .webform-confirmation {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    padding: 14px 0;
  }

  /* ── Pinned card title link colour ──────────────────────────────────────── */
  .feature-card--pinned .feature-card-title a {
    color: var(--ink);
    text-decoration: none;
  }
  /* ── Pinned card title link colour ──────────────────────────────────────── */
  .feature-card--pinned .feature-card-title a {
    color: var(--ink);
    text-decoration: none;
  }

  .vault-section {
    padding-bottom: 0;
  }
  .vault-section {
    padding-bottom: 0;
  }

  @media (min-width:768px) {
    .high-value-section {
      padding-block: 92px 80px;
      background: none;
    }
  @media (min-width:768px) {
    .high-value-section {
      padding-block: 92px 80px;
      background: none;
    }

    .section.vault-section {
      padding-top: 100px;
    }
    .section.vault-section {
      padding-top: 100px;
    }

    .section.vault-section:before {
      background: none;
    }
  }
    .section.vault-section:before {
      background: none;
    }
  }

  /* ----- News archive heading + count (news-listing-page component) ----- */
  .news-count {
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
  }
  /* ----- News archive heading + count (news-listing-page component) ----- */
  .news-count {
    font-family: "Inter", -apple-system, system-ui, "IBM Plex Sans Arabic", sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
  }

  .news-count strong {
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
  }
  .news-count strong {
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
  }

  /* Hide Drupal AJAX loader/throbber globally */
  .ajax-progress,
  .ajax-progress-throbber,
  .ajax-progress-bar,
  .ajax-progress--throbber,
  .ajax-progress--fullscreen {
    display: none !important;
  }
  /* Hide Drupal AJAX loader/throbber globally */
  .ajax-progress,
  .ajax-progress-throbber,
  .ajax-progress-bar,
  .ajax-progress--throbber,
  .ajax-progress--fullscreen {
    display: none !important;
  }

  /* Footer address CKEditor output normalisation
  /* Footer address CKEditor output normalisation
   CKEditor wraps content in <p> tags; strip all extra spacing so the
   rendered output matches a hand-written address block. */
  .footer-address-body p,
  .footer-address-body ul,
  .footer-address-body ol,
  .footer-address-body li {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .footer-address-body p,
  .footer-address-body ul,
  .footer-address-body ol,
  .footer-address-body li {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-address-body p+p,
  .footer-address-body ul+p,
  .footer-address-body p+ul {
    margin-top: 4px;
  }
  .footer-address-body p+p,
  .footer-address-body ul+p,
  .footer-address-body p+ul {
    margin-top: 4px;
  }

  .footer-address-body strong,
  .footer-address-body b {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
  }
  .footer-address-body strong,
  .footer-address-body b {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
  }

  .footer-address-body a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
  }
  .footer-address-body a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
  }

.footer-address-body a:hover {
  color: #fff;
}

.footer-address-body p:last-of-type {
    margin-top: 12px;
}

.kp-step-body-section {
  font-size: 16px;
    line-height: 1.6;
    color: var(--ink-70);
    margin: 16px 0 0;
    max-width: 64ch;
}


.tender-bar.is-narrow {
  max-height: 28px;
  overflow: hidden;
  overflow-wrap: unset;
  white-space: nowrap;
  font-size: 0;
}
.tender-bar.is-narrow:hover {
  overflow: visible;
  z-index: 10;
  min-width: 180px;
  white-space: normal;
  font-size: 12px;
}

.p-0 {
  padding: 0 !important;
}
.m-0 {
  margin: 0 !important;
}
.mb-24 {
  margin-bottom: 24px !important;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.mobile-nav-section h6 a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 14px;
  font-weight: 500;
}
 
.brand-logo-light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.brand-logo-dark {
  opacity: 1;
  transition: opacity 0.45s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}