/* ==========================================================================
   Sections — each chapter of the story has its own composition
   ========================================================================== */

/* Sections that always sit on photography / brand navy keep the night palette */
.hero,
.contact {
  --text-primary: #eef4f7;
  --text-secondary: #bccbd6;
  --text-muted: #8ea3b4;
  --accent: #f2a53d;
  --accent-strong: #ffb957;
  --accent-3: #83c7e6;
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
}

/* ======================= 1. HERO ======================= */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(620px, 94svh, 980px);
  padding-block: calc(var(--nav-h) + var(--space-8)) clamp(4.5rem, 3rem + 5vw, 7.5rem);
  background: #03182b;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform-origin: 50% 60%;
}

.hero__topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(242, 165, 61, 0.16), transparent 60%),
    var(--photo-veil);
}

:root[dir="rtl"] .hero__veil {
  background:
    radial-gradient(90% 70% at 15% 10%, rgba(242, 165, 61, 0.16), transparent 60%),
    var(--photo-veil);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8);
}

.hero__copy {
  max-width: 780px;
}

.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-6);
}

:root[lang="en"] .hero__title {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
}

.hero__title .line__in {
  display: inline-block;
}

.line__in--accent {
  color: transparent;
  background: linear-gradient(100deg, #ffc774 0%, #f2a53d 45%, #e07b1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lede {
  max-width: 54ch;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin-block-end: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.hero__social {
  display: flex;
  gap: var(--space-3);
}

.hero__compass {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.compass {
  width: clamp(200px, 20vw, 280px);
  height: auto;
  overflow: visible;
}

.compass__ring {
  fill: rgba(3, 24, 43, 0.35);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}

.compass__ring--dash {
  fill: none;
  stroke-dasharray: 2 6;
  stroke: rgba(255, 255, 255, 0.3);
}

.compass__ticks line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

.compass__ticks line.major {
  stroke: #fff;
  stroke-width: 1.5;
}

.compass__letters text {
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
}

.compass__letters text:first-child {
  fill: var(--accent);
}

.compass__needle {
  transform-origin: 160px 160px;
  transform-box: view-box;
}

.compass__needle-n {
  fill: var(--accent);
}

.compass__needle-s {
  fill: rgba(255, 255, 255, 0.85);
}

.compass__pin {
  fill: #03182b;
  stroke: #fff;
  stroke-width: 2;
}

.compass__readout {
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-2);
}

.compass__deg {
  color: var(--accent);
  min-width: 4ch;
  direction: ltr;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  inset-inline-start: 50%;
  translate: 50% 0;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  color: var(--text-secondary);
}

:root[dir="ltr"] .hero__scroll {
  translate: -50% 0;
}

.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--accent), transparent);
  transform-origin: top;
}

/* ======================= 2. ABOUT ======================= */
.about {
  background: var(--bg-primary);
}

.about__statement {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.45;
  font-weight: 500;
  max-width: 28em;
  margin-block-end: clamp(3rem, 2rem + 4vw, 6rem);
}

:root[lang="en"] .about__statement {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.about__statement mark {
  font-weight: 700;
}

.about__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.about__photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.about__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.about__photo figcaption {
  position: absolute;
  inset-inline-start: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: rgba(3, 24, 43, 0.7);
  color: #eef4f7;
  border-radius: var(--radius-xs);
  backdrop-filter: blur(6px);
}

.about__global {
  display: grid;
  gap: var(--space-5);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-5) 0 var(--space-5);
  padding-inline-end: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.stat:nth-child(odd) {
  border-inline-end: 1px solid var(--border);
}

.stat:nth-child(even) {
  padding-inline-start: var(--space-5);
}

.stat dt {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.stat__num,
.y1__num,
.gauge__num {
  font-family: var(--font-display-en);
  font-stretch: 118%;
  font-weight: 700;
  font-size: var(--fs-num);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.about__agent {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 2px solid var(--accent-2);
  background: var(--accent-2-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

:root[dir="rtl"] .about__agent {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Why we are here — ascending steps */
.why {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
}

.why__title {
  font-size: var(--fs-lg);
  margin-block-end: var(--space-6);
}

.why__steps {
  display: grid;
  gap: var(--space-4);
  align-items: end;
}

.why__step {
  --step-color: var(--brand-slate);
  position: relative;
  padding: var(--space-6);
  padding-top: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  overflow: hidden;
}

.why__step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--step-color);
}

.why__step--2 {
  --step-color: var(--accent-3);
}

.why__step--3 {
  --step-color: var(--accent-2);
}

.why__tag {
  display: block;
  color: var(--text-primary);
  margin-block-end: var(--space-4);
}

:root[lang="ar"] .why__tag {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}

/* ======================= 3. APPROACH ======================= */
.approach {
  background:
    radial-gradient(60% 50% at 50% 0%, var(--accent-3-soft), transparent 70%),
    var(--bg-secondary);
}

.venn-wrap {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.venn {
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}

.venn__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.venn__c {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill var(--dur-short) var(--ease-out), stroke var(--dur-short) var(--ease-out), transform var(--dur-medium) var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

.venn__c.is-active {
  fill: var(--accent-3-soft);
  stroke: var(--accent-3);
  stroke-width: 1.6;
}

.venn__core {
  fill: var(--accent);
  transition: filter var(--dur-short);
  pointer-events: none;
}

.venn__label {
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.venn__mini {
  fill: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  text-anchor: middle;
  pointer-events: none;
}

.venn__core-label {
  fill: #1b1206;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.venn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.venn-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
  font-weight: 500;
  transition: color var(--dur-micro), box-shadow var(--dur-micro), background-color var(--dur-micro);
}

.venn-tab:hover {
  color: var(--text-primary);
}

.venn-tab.is-active {
  color: var(--text-primary);
  background: var(--accent-3-soft);
  box-shadow: inset 0 0 0 1px var(--accent-3);
}

.venn-tab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-3);
  opacity: 0.4;
}

.venn-tab.is-active .venn-tab__dot {
  opacity: 1;
}

.venn-panel {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  animation: panel-in var(--dur-medium) var(--ease-out);
}

.connect {
  margin-top: clamp(4rem, 3rem + 5vw, 7rem);
  display: grid;
  gap: var(--space-6);
}

.connect__head p {
  color: var(--text-secondary);
  margin-top: var(--space-3);
  max-width: 52ch;
}

.connect__list {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.connect__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.connect__item svg {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.connect__item:nth-child(2) svg {
  stroke: var(--accent-3);
}

.connect__item:nth-child(3) svg {
  stroke: var(--accent-2);
}

/* ======================= 4. JOURNEY ======================= */
.journey {
  background: var(--bg-primary);
  overflow: hidden;
}

.journey__bg {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 38px, var(--contour) 39px 40px),
    repeating-radial-gradient(circle at 85% 80%, transparent 0 46px, var(--contour) 47px 48px);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 27px;
  width: 2px;
  background-image: linear-gradient(var(--border-strong) 50%, transparent 50%);
  background-size: 2px 12px;
}

.timeline__progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--accent), var(--accent-2));
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.tl-item__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: 0.8125rem;
  transition: background-color var(--dur-medium) var(--ease-out), color var(--dur-medium), box-shadow var(--dur-medium);
}

.tl-item.is-reached .tl-item__marker {
  background: var(--accent);
  color: #1b1206;
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.tl-item--final.is-reached .tl-item__marker {
  background: var(--accent-2);
  box-shadow: 0 0 0 6px var(--accent-2-soft);
}

.tl-item__card {
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: grid;
  gap: var(--space-3);
  transition: border-color var(--dur-short), background-color var(--dur-short), transform var(--dur-short) var(--ease-out);
}

.tl-item__card:hover {
  border-color: var(--border-strong);
  background: var(--surface-strong);
}

.tl-item__phase {
  color: var(--accent);
}

:root[lang="ar"] .tl-item__phase {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  font-weight: 600;
}

.tl-item__title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.tl-item__quotes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tl-item__quotes q {
  quotes: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  border-start-start-radius: var(--radius-xs);
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

/* ======================= 5. PROGRAMS ======================= */
.programs {
  background: var(--bg-secondary);
  padding-bottom: 0;
}

.sites {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.sites__map {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(70% 60% at 50% 45%, var(--accent-3-soft), transparent 70%),
    var(--bg-primary);
}

.ksa-map {
  width: 100%;
  height: auto;
  overflow: visible;
}

.ksa-map__grid line {
  stroke: var(--border);
  stroke-width: 0.6;
}

.ksa-map__grid text {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 7px;
}

.ksa-map__land {
  fill: var(--surface-strong);
  stroke: var(--accent-3);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-dasharray: var(--land-len, 0);
  stroke-dashoffset: 0;
}

.map-pin {
  cursor: pointer;
}

.map-pin__core {
  fill: var(--accent);
  stroke: var(--bg-primary);
  stroke-width: 1.5;
  transition: r var(--dur-short) var(--ease-spring);
}

.map-pin__halo {
  fill: var(--accent);
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
}

.map-pin--soon .map-pin__core {
  fill: var(--bg-primary);
  stroke: var(--accent-2);
  stroke-width: 2;
}

.map-pin--soon .map-pin__halo {
  fill: var(--accent-2);
}

.map-pin__label {
  fill: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--bg-primary);
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: fill var(--dur-short);
}

.map-pin.is-active .map-pin__core {
  r: 7;
}

.map-pin.is-active .map-pin__label {
  fill: var(--text-primary);
}

.sites__note {
  margin-top: var(--space-3);
  color: var(--text-muted);
  text-align: center;
}

:root[lang="ar"] .sites__note {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.sites__list {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.sites__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

.site-list {
  display: grid;
}

.site {
  position: relative;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.3;
  transition: color var(--dur-short), padding var(--dur-short) var(--ease-out);
  cursor: default;
}

.site::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-medium) var(--ease-out);
}

:root[dir="ltr"] .site::after {
  transform-origin: left;
}

.site:hover,
.site.is-active {
  color: var(--accent);
  padding-inline-start: var(--space-3);
}

.site:hover::after,
.site.is-active::after {
  transform: scaleX(1);
}

.site-list--soon .site {
  color: var(--text-secondary);
}

.site-list--soon .site:hover,
.site-list--soon .site.is-active {
  color: var(--accent-2);
}

.site-list--soon .site::after {
  background: var(--accent-2);
}

/* Activities kit list */
.kit {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
  display: grid;
  gap: var(--space-6);
}

.kit__head p {
  color: var(--text-secondary);
  margin-top: var(--space-3);
  max-width: 52ch;
}

.kit__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr));
  border-top: 1px solid var(--border);
}

.kit__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}

.kit__check {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  transition: background-color var(--dur-short), box-shadow var(--dur-short);
}

.kit__check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #1b1206;
  border-bottom: 2px solid #1b1206;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-short) var(--ease-spring) 120ms;
}

.kit__list li.is-in .kit__check,
.no-reveal .kit__check {
  background: var(--accent);
  box-shadow: none;
}

.kit__list li.is-in .kit__check::after,
.no-reveal .kit__check::after {
  transform: rotate(45deg) scale(1);
}

.kit__aims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: center;
}

.kit__aims li {
  padding: var(--space-3) var(--space-2);
  color: #fff;
}

.kit__aims li:nth-child(1) {
  background: var(--brand-slate);
}

.kit__aims li:nth-child(2) {
  background: #c9791d;
}

.kit__aims li:nth-child(3) {
  background: var(--brand-blue);
}

/* Field journal (horizontal showcase) */
.field {
  margin-top: clamp(4rem, 3rem + 5vw, 7rem);
  padding-bottom: var(--section-pad);
}

.field__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.field__controls {
  display: flex;
  gap: var(--space-2);
}

.field__track {
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --shot-h: clamp(300px, 22rem + 8vw, 540px);
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-inline: var(--edge);
  padding-bottom: var(--space-5);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.field__track:focus-visible {
  outline-offset: -2px;
}

.shot {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  gap: var(--space-4);
  width: calc(var(--shot-h) * 1.45);
  max-width: 82vw;
}

.shot--tall {
  width: calc(var(--shot-h) * 0.72);
}

.shot__btn {
  position: relative;
  display: block;
  width: 100%;
  height: var(--shot-h);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
}

.shot__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out), filter var(--dur-long);
  filter: saturate(0.92);
}

.shot__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.shot__btn:hover img,
.shot__btn:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.shot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.shot__meta h4 {
  font-size: var(--fs-md);
}

/* ======================= 6. OUTCOMES ======================= */
.outcomes {
  background: var(--bg-primary);
}

.wheel-wrap {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.wheel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.wheel__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.wheel__orbit {
  fill: none;
  stroke: var(--border);
}

.wheel__orbit--dash {
  stroke-dasharray: 2 7;
}

.wheel-seg {
  cursor: pointer;
}

.wheel-seg path {
  fill: var(--seg-color);
  fill-opacity: 0.22;
  stroke: var(--seg-color);
  stroke-width: 1.2;
  transition: fill-opacity var(--dur-short), transform var(--dur-medium) var(--ease-out);
  transform-box: view-box;
  transform-origin: 250px 250px;
}

.wheel-seg text {
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.wheel-seg.is-active path {
  fill-opacity: 0.9;
  transform: scale(1.04);
}

.wheel-seg.is-active text {
  fill: #fff;
}

.wheel-seg--self {
  --seg-color: var(--accent);
}

.wheel-seg--self.is-active text {
  fill: #1b1206;
}

.wheel-seg--others {
  --seg-color: #2f86b8;
}

.wheel-seg--world {
  --seg-color: var(--accent-2);
}

.wheel__rim text {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.wheel__rim .orbit-dot {
  fill: var(--accent);
}

.wheel__hub {
  position: absolute;
  inset: 35.2%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
  color: var(--text-primary);
}

.wheel__hub svg {
  width: 72%;
  height: auto;
  aspect-ratio: 1133 / 1186;
  fill: currentColor;
}

.outcome-list {
  display: grid;
  gap: var(--space-2);
}

.outcome {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  text-align: start;
  border-radius: var(--radius-sm);
  border-inline-start: 2px solid var(--border);
  color: var(--text-secondary);
  transition: background-color var(--dur-short), border-color var(--dur-short), color var(--dur-short);
}

.outcome:hover {
  background: var(--surface);
}

.outcome.is-active {
  background: var(--surface-strong);
  border-inline-start-color: var(--accent);
  color: var(--text-primary);
}

.outcome[data-group="others"].is-active {
  border-inline-start-color: #2f86b8;
}

.outcome[data-group="world"].is-active {
  border-inline-start-color: var(--accent-2);
}

.outcome__group {
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.outcome__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.outcome__def {
  font-size: var(--fs-sm);
}

/* ======================= 7. PHILOSOPHY / PILLARS / SAFETY ======================= */
.pillars {
  background: var(--bg-secondary);
}

.philosophy {
  max-width: 1080px;
  margin-block-end: clamp(4rem, 3rem + 5vw, 8rem);
}

.philosophy__text {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-secondary);
}

:root[lang="en"] .philosophy__text {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
}

.philosophy__text .hl {
  color: var(--text-primary);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-repeat: no-repeat;
  background-size: var(--hl, 100%) 100%;
  background-position: var(--hl-pos, right) center;
  transition: background-size 900ms var(--ease-out);
  padding-inline: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:root[dir="ltr"] .philosophy__text .hl {
  --hl-pos: left;
}

.pillars__title {
  font-size: var(--fs-lg);
  margin-block-end: var(--space-6);
}

.pillar-grid {
  display: grid;
  border-top: 1px solid var(--border);
}

.pillar {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.pillar h4 {
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.pillar__icon {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--accent-3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-block-end: var(--space-2);
  transition: transform var(--dur-medium) var(--ease-spring);
}

.pillar:hover .pillar__icon {
  transform: translateY(-4px) rotate(-4deg);
}

.safety {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.safety__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.safety__photo img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: 60% 30%;
}

.safety__body {
  display: grid;
  gap: var(--space-5);
}

.safety__body .eyebrow {
  margin: 0;
}

.tick-list--cols {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4) var(--space-6);
  font-size: var(--fs-md);
}

.tick-list--cols li {
  color: var(--text-primary);
}

.motto {
  margin-top: clamp(4rem, 3rem + 6vw, 9rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25em 0.4em;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

:root[lang="en"] .motto {
  font-stretch: 122%;
  letter-spacing: -0.03em;
}

.motto span:first-child {
  color: var(--accent-2);
}

.motto__eq {
  color: var(--accent);
  font-family: var(--font-display-en);
}

/* ======================= 8. IMPACT ======================= */
.impact {
  background: var(--bg-primary);
}

.gauges {
  display: grid;
  border-top: 1px solid var(--border);
}

.gauge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  padding: var(--space-6) 0 var(--space-7);
}

.gauge__num {
  color: var(--accent);
  display: flex;
  align-items: baseline;
}

.gauge:nth-child(even) .gauge__num {
  color: var(--accent-3);
}

.gauge__pct {
  font-size: 0.5em;
  margin-inline-start: 0.05em;
}

.gauge__body {
  display: grid;
  gap: var(--space-2);
  max-width: 62ch;
}

.gauge__body h3 {
  font-size: var(--fs-lg);
}

.gauge__body p {
  color: var(--text-primary);
}

.gauge__body .gauge__ctx {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.gauge__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
}

.gauge__bar span {
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  height: 3px;
  width: calc(var(--val, 0) * 1%);
  background: currentColor;
  color: var(--accent);
  border-radius: 3px;
  transition: width 1400ms var(--ease-out);
}

.gauge:nth-child(even) .gauge__bar span {
  color: var(--accent-3);
}

.year-one {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 0% 0%, var(--accent-3-soft), transparent 60%),
    var(--bg-secondary);
  border: 1px solid var(--border);
}

.year-one__title {
  font-size: var(--fs-xl);
  margin-block-end: var(--space-7);
}

.year-one__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.y1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
}

.y1 dt {
  order: 2;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.y1 dd {
  order: 1;
}

.year-one__note {
  margin-top: var(--space-7);
  color: var(--accent-2);
  font-weight: 500;
}

.voice {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.voice__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.voice__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.voice__body {
  display: grid;
  gap: var(--space-5);
}

.voice__mark {
  width: 44px;
  fill: var(--accent);
}

:root[dir="rtl"] .voice__mark {
  transform: scaleX(-1);
}

.voice blockquote {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.8;
}

.voice figcaption {
  display: grid;
  gap: var(--space-1);
}

.voice__name {
  font-weight: 600;
  font-family: var(--font-display-en);
  font-stretch: 112%;
}

.voice__role {
  color: var(--text-muted);
}

:root[lang="ar"] .voice__role {
  font-family: var(--font-body);
  letter-spacing: 0;
  font-size: var(--fs-xs);
}

.partners {
  margin-top: clamp(4rem, 3rem + 5vw, 8rem);
}

.partners__title {
  font-size: var(--fs-lg);
  margin-block-end: var(--space-6);
}

.marquee {
  display: grid;
  gap: var(--space-3);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__row {
  display: flex;
  width: max-content;
}

:root[dir="rtl"] .marquee {
  --marquee-shift: 50%;
}

.marquee__row li {
  flex: none;
  margin-inline-end: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--dur-micro), border-color var(--dur-micro);
}

.marquee__row li:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.partners__soon {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.partners__soon-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--text-secondary);
}

.partners__soon-list li + li::before {
  content: "·";
  margin-inline-end: var(--space-5);
  color: var(--text-muted);
}

/* ======================= 9. CONTACT ======================= */
.contact {
  position: relative;
  padding-block: clamp(6rem, 4rem + 8vw, 12rem);
  background: #062340;
  overflow: hidden;
  isolation: isolate;
}

.contact__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(52%, 780px);
  z-index: -1;
}

.contact__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  mask-image: linear-gradient(90deg, #000 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 95%);
}

:root[dir="ltr"] .contact__media img {
  mask-image: linear-gradient(270deg, #000 0%, transparent 95%);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 95%);
}

.contact__inner {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.contact__inner .eyebrow {
  margin: 0;
  max-width: 44ch;
}

.contact__title {
  font-size: var(--fs-3xl);
  line-height: 1.05;
  font-weight: 700;
  max-width: 12ch;
}

:root[lang="en"] .contact__title {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

.contact__lede {
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: var(--fs-md);
}

.contact__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.channel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  min-width: 200px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.channel svg {
  grid-row: span 2;
  color: var(--accent);
}

.channel__label {
  color: var(--text-muted);
  font-size: 0.6875rem;
}

:root[lang="ar"] .channel__label {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.channel__value {
  font-weight: 500;
}

.is-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* ======================= FOOTER ======================= */
.footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding-block: var(--space-7) calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.footer__logo {
  width: 110px;
  height: auto;
  aspect-ratio: 1589 / 1036;
  fill: currentColor;
  color: var(--text-primary);
}

.footer__agent {
  flex: 1 1 320px;
}

.footer__meta {
  direction: ltr;
}