/* ==========================================================================
   Section: Vision, Mission & Values — cinematic manifesto
   Full-bleed darkened photo; vision and mission as large editorial
   statements whose words light up in reading order with scroll
   ([data-words] in motion.js); values as a strip along the bottom.
   ========================================================================== */

.manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
}

/* ---------- Background ---------- */
.manifesto__media { position: absolute; inset: 0; z-index: -1; }
.manifesto__parallax { position: absolute; inset: -12% 0; }
.manifesto__parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(.85);
}
.manifesto__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--surface-page) 0%, rgba(8,7,14,.82) 14%, rgba(8,7,14,.86) 55%, rgba(8,7,14,.96) 100%),
    radial-gradient(60% 50% at 80% 30%, rgba(211,157,53,.10), transparent 70%);
}
/* Film grain for the cinematic feel (pure CSS, tiny SVG noise) */
.manifesto__grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Content ---------- */
.manifesto__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 140px);
  padding-block: var(--section-pad) clamp(72px, 9vw, 140px);
}

.manifesto__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.manifesto__heading {
  font: var(--weight-extra) clamp(20px, 2vw, 26px)/1.4 var(--font-arabic);
  color: var(--text-secondary);
}

.manifesto__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
}
@media (min-width: 1024px) {
  .manifesto__block { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  /* second statement steps in from the other side for rhythm */
  .manifesto__block--alt { margin-inline-start: auto; }
}

.manifesto__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: .6em;
}
.manifesto__num {
  font-family: var(--font-display-latin);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold-500);
}
.manifesto__rule { width: 40px; height: 2px; background: var(--gold-500); flex: none; }
.manifesto__label-text {
  font: var(--weight-extra) 16px/1.4 var(--font-arabic);
  color: var(--white);
  letter-spacing: .02em;
}

/* The statement itself */
.manifesto__statement {
  position: relative;
  font: var(--weight-extra) clamp(24px, 3.4vw, 46px)/1.55 var(--font-arabic);
  color: var(--white);
  text-wrap: pretty;
}
html[lang="en"] .manifesto__statement { line-height: 1.35; letter-spacing: -.01em; }
/* Oversized gold quote mark hanging at the start */
.manifesto__statement::before {
  content: "\201D";
  position: absolute;
  inset-block-start: -.42em;
  inset-inline-start: -.08em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.2em;
  line-height: 1;
  color: var(--gold-500);
  opacity: .25;
  pointer-events: none;
}
[dir="ltr"] .manifesto__statement::before { content: "\201C"; }

/* Word-by-word lighting (only when motion.js drives it) */
.manifesto__statement.is-wording .word {
  color: rgba(255,255,255,.16);
  transition: color 420ms var(--ease-standard), text-shadow 600ms var(--ease-standard);
}
.manifesto__statement.is-wording .word.is-lit { color: var(--white); }
/* the most recently lit words glow gold for a moment */
.manifesto__statement.is-wording .word.is-head {
  color: var(--gold-300);
  text-shadow: 0 0 24px rgba(211,157,53,.35);
}

/* ---------- Values strip ---------- */
.manifesto__values {
  position: relative;
  background: rgba(15,17,28,.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border-subtle);
}
.manifesto__hazard { --hazard-h: 6px; --stripe: 6px; position: absolute; inset-block-start: -6px; inset-inline: 0; }

.manifesto__values .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-10);
}
@media (min-width: 1024px) {
  .manifesto__values .container { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); align-items: center; }
}
.manifesto__values-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--weight-extra) 18px/1.4 var(--font-arabic);
}

.manifesto__values-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .manifesto__values-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.manifesto__value {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.manifesto__value::before {
  content: "";
  position: absolute;
  inset-block: var(--space-4);
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-500), rgba(211,157,53,0));
  transform-origin: top;
  transition: transform 600ms var(--ease-out);
}
.manifesto__value:hover { background: rgba(211,157,53,.06); }
.manifesto__value:hover::before { transform: scaleY(1.15); }
@media (max-width: 767px) {
  .manifesto__value { padding-inline: var(--space-5); }
  .manifesto__value + .manifesto__value { border-block-start: 1px solid var(--border-subtle); }
}
.manifesto__value .fa-solid {
  margin-block-start: 4px;
  width: 20px;
  color: var(--gold-500);
  font-size: 17px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.manifesto__value:hover .fa-solid { transform: rotate(-10deg) scale(1.15); }
.manifesto__value strong { display: block; font-weight: var(--weight-extra); font-size: 17px; color: var(--white); margin-block-end: 4px; }
.manifesto__value span { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }