/* ==========================================================================
   UBM — page-home.css
   Only what the home page adds on top of base.css + sections.css.

   Load order on this page:
     fonts → tokens → base → chrome → sections → rtl → motion → page-home

   House rules, same as sections.css
   · Tokens only. No raw hex, no raw ms, no hand-rolled cubic-bezier.
     Alpha variants come from color-mix() on a token, never rgba().
     The single exception is a mask stencil, where only the alpha channel is
     read — there `black` is an opacity keyword, not a design colour.
   · Logical properties only. Nothing here knows what "left" means.
   · Nothing re-declares a button, a card shell or a type scale.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   The section shell, scrim, cue and toggle all come from sections.css §1.
   This file adds: the poster/video bed stack, the orbit rings behind the
   headline, and the domain ticker pinned to the bottom edge.
   ========================================================================== */

.home-hero {
  --home-ticker-h: 3.5rem;
  /* room for the ticker under the CTAs */
  padding-block-end: calc(var(--sp-10) + var(--home-ticker-h));
}

/* --- bed: poster always painted, film layered over it --------------------- */
.home-hero__poster,
.home-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* sections.css sets `.hero__bed img { opacity: .46; filter: saturate(…) }`,
   which is one specificity point above a bare class — the type selector wins.
   The poster plate is a designed drawing, not photography, so it needs the
   brighter unfiltered treatment; matching specificity lets load order decide. */
img.home-hero__poster { opacity: .72; filter: none; }
.home-hero__video  { z-index: 1; }

/* --- orbit rings behind the headline -------------------------------------- */
.home-hero__rings {
  position: absolute;
  z-index: -1;                      /* above .hero__scrim, below .hero__inner */
  inset-block-start: 44%;
  inset-inline-start: 30%;
  inline-size: min(88svh, 48rem);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  color: var(--c-signal-400);
  opacity: .45;
  pointer-events: none;
}
[dir="rtl"] .home-hero__rings { transform: translate(50%, -50%); }

/* transform-box makes transform-origin resolve against the viewBox, which is
   what .anim-spin-slow assumes. */
.home-hero__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.home-hero__ring--gold { color: var(--gold); }

@media (max-width: 47.99rem) {
  .home-hero { --home-ticker-h: 2.75rem; }
  .home-hero__rings { inset-inline-start: 52%; inset-block-start: 38%; opacity: .3; }
}

/* --- play / pause affordance ---------------------------------------------- */
.home-hero__toggle { inset-block-end: calc(var(--home-ticker-h) + var(--sp-4)); }

.home-hero__toggle-glyph {
  inline-size: 9px;
  block-size: 10px;
  border-inline-start: 3px solid currentColor;
  border-inline-end: 3px solid currentColor;
  flex: none;
}
.home-hero__toggle[data-state="paused"] .home-hero__toggle-glyph {
  inline-size: 0;
  block-size: 0;
  border-inline-end: 0;
  border-inline-start: 8px solid currentColor;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
}
.home-hero__toggle-off { display: none; }
.home-hero__toggle[data-state="paused"] .home-hero__toggle-on  { display: none; }
.home-hero__toggle[data-state="paused"] .home-hero__toggle-off { display: inline; }

/* --- scroll cue sits above the ticker ------------------------------------- */
.home-hero__cue { inset-block-end: calc(var(--home-ticker-h) + var(--sp-4)); }

/* Arabic is never set vertically. The hairline still runs down; the word
   stays horizontal above it. */
[lang="ar"] .home-hero__cue .hero__cue-label {
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

/* --- the six-domain ticker ------------------------------------------------ */
.home-ticker {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  block-size: var(--home-ticker-h);
  border-block-start: var(--bw) solid var(--line);
  background: color-mix(in srgb, var(--c-ink-950) 74%, transparent);
  backdrop-filter: blur(10px);
}
.home-ticker__rail {
  inline-size: 100%;
  --marquee-gap: var(--sp-8);
}
.home-ticker__track { align-items: center; }
.home-ticker__item { flex: none; }

.home-ticker__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  white-space: nowrap;
  transition: color var(--d-base) var(--e-out);
}
.home-ticker__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.home-ticker__name {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--d-base) var(--e-out);
}
.home-ticker__tag {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}
.home-ticker__tag::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  inline-size: 16px;
  block-size: 1px;
  margin-inline-end: var(--sp-3);
  background: var(--line-gold);
}
.home-ticker__link:hover .home-ticker__name { color: var(--text-strong); }
.home-ticker__link:hover .home-ticker__dot  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }


/* ==========================================================================
   2. POSITIONING STRIP
   ========================================================================== */

.positioning__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 62rem) {
  .positioning__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-9);
    align-items: end;
  }
}

.positioning__head  { display: grid; gap: var(--sp-4); }
.positioning__aside { display: grid; gap: var(--sp-4); align-content: end; }
.positioning__statement { max-inline-size: 18ch; }
.positioning__aside .t-lead { max-inline-size: 44ch; }

.positioning__note {
  margin-block: var(--sp-10) var(--sp-4);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}


/* ==========================================================================
   3. SIX DOMAINS — index rail + orbit figure
   ========================================================================== */

/* The softened texture mask used to live here as a `.home-texture` override.
   It now lives on `.grid-texture` itself in base.css, so every one of the
   twenty sections that carry the texture gets the same edge — not just this
   one. Nothing to add on this page. */

/* Two columns only from 75rem. The orbit labels are absolutely placed as a
   percentage of the figure, so a narrow figure column pushes the widest label
   ("Artificial Intelligence") past its own edge. Below 75rem the figure gets
   the full shell and every label has room. The single column is
   minmax(0, 1fr), not auto, so no item can widen the page past the screen. */
.domains__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-9); }
@media (min-width: 75rem) {
  .domains__grid {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: center;
  }
}

.domains__intro { display: grid; gap: var(--sp-4); align-content: start; }
.domains__intro .t-lead { max-inline-size: 42ch; }

.domains__index {
  margin-block-start: var(--sp-4);
  border-block-start: var(--bw) solid var(--line);
}
.domains__row {
  position: relative;
  border-block-end: var(--bw) solid var(--line);
}
.domains__row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--e-out);
}
.domains__row:hover::before,
.domains__row:focus-within::before { transform: scaleY(1); }

.domains__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-4);
  padding-inline-start: var(--sp-4);
  transition: padding-inline-start var(--d-base) var(--e-out);
}
.domains__row:hover .domains__link { padding-inline-start: var(--sp-5); }

.domains__num {
  flex: none;
  min-inline-size: 1.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xs);
  letter-spacing: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.domains__dot {
  flex: none;
  align-self: center;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.domains__name {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
  transition: color var(--d-base) var(--e-out);
}
.domains__row:hover .domains__name { color: var(--accent-text); }
.domains__tag {
  flex: 1 1 15rem;
  min-inline-size: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.domains__cta { margin-block-start: var(--sp-4); }

/* --- the figure ----------------------------------------------------------- */
.domains__figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); min-inline-size: 0; }
.domains__caption { margin-inline: auto; }

/* --- the static SVG. It is the finished drawing; WebGL only replaces it. --- */
.orbit-figure__fallback { color: var(--c-silver-500); }

.orb-guide { color: var(--c-silver-500); }
.orb-tie   { color: var(--c-silver-500); }

.orb-arc--gold   { stroke: var(--gold);            stroke-opacity: .62; }
.orb-arc--signal { stroke: var(--c-signal-400);    stroke-opacity: .34; }
.orb-arc--faint  { stroke: var(--c-silver-500);    stroke-opacity: .20; }

.orb-core-stop { stop-color: var(--gold); }
.orb-core-ring { color: var(--gold); }
.orb-core      { fill: var(--gold); }

.orb-node__dot  { fill: var(--accent); }
.orb-node__halo { stroke: var(--accent); stroke-opacity: .38; }

/* On mobile the labels become a stacked list under the drawing, so the
   drawing keeps a square of its own and the list takes the space below.
   The WebGL layer takes the same square; stretched over the whole figure it
   drew the orbit behind the list. */
@media (max-width: 47.99rem) {
  .orbit-figure__fallback { position: relative; block-size: auto; aspect-ratio: 1 / 1; }
  .orbit-figure__layer { inset-block-end: auto; block-size: auto; aspect-ratio: 1 / 1; }
  .domains__caption { margin-inline: 0; }
}


/* ==========================================================================
   4. SCROLL-DRAWN INFRASTRUCTURE
   Everything visual lives in sections.css §4. The heading block just needs
   to clear the sticky stage.
   ========================================================================== */

.scrollytell .section-head { margin-block-end: var(--sp-9); }


/* ==========================================================================
   5. PROOF BAND
   ========================================================================== */

.proof__note {
  margin-block-start: var(--sp-7);
  padding-inline-start: var(--sp-5);
  border-inline-start: 2px solid var(--line-gold);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 62ch;
}

.proof__industries { margin-block-start: var(--sp-11); }
.proof__industries .eyebrow { margin-block-end: var(--sp-3); display: flex; }

.industry-list {
  margin-block-start: var(--sp-6);
  border-block-start: var(--bw) solid var(--line);
}
.industry-list__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-5);
  border-block-end: var(--bw) solid var(--line);
}
.industry-list__num {
  grid-row: 1 / span 2;
  padding-block-start: .3em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-2xs);
  letter-spacing: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.industry-list__name { font-size: var(--fs-lg); }
.industry-list__desc { font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: 60ch; }

@media (min-width: 62rem) {
  .industry-list__item {
    grid-template-columns: 2.25rem minmax(0, 17rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-3) var(--sp-6);
  }
  .industry-list__num  { grid-row: 1; }
  .industry-list__desc { grid-column: 3; }
}

.proof__foot-note {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- partner wall --------------------------------------------------------- */
.proof__partners {
  display: grid;
  gap: var(--sp-8);
  margin-block-start: var(--sp-11);
  padding-block: var(--sp-9);
  background: var(--surface-sunken);
  border-block: var(--bw) solid var(--line);
}
.proof__partners-head { display: grid; gap: var(--sp-4); }
.proof__partners-head .eyebrow { display: flex; margin-block-end: var(--sp-3); }
@media (min-width: 62rem) {
  .proof__partners-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: end;
  }
}
.proof__partners-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 54ch;
}
.proof__partners .logo-wall__wordmark { color: var(--text-faint); }
.proof__partners .logo-wall__item:hover .logo-wall__wordmark { color: var(--text-strong); }


/* ==========================================================================
   6. SERVICE MODEL
   ========================================================================== */

.service__gov {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  max-inline-size: 64ch;
}


/* ==========================================================================
   7. PEOPLE
   ========================================================================== */

.people-grid {
  display: grid;
  gap: var(--sp-7) var(--sp-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 25rem) {
  .people-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 62rem) {
  .people-grid { grid-template-columns: repeat(var(--people-cols, 3), minmax(0, 1fr)); }
}

/* Until a person has line art, the ruled frame carries their monogram —
   a designed placeholder, not an empty grey box. */
.person-card__monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
  letter-spacing: var(--tr-display);
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  user-select: none;
}

.people__empty { margin-block-start: var(--sp-4); }

/* Working languages — a stated fact about reach, set as a ruled register
   beside its explanation, never a row of flag emoji.
   <div class="langs"><p class="langs__label">…</p>
     <ul class="langs__list"><li class="langs__item">…</li>…</ul>
     <p class="langs__body">…</p></div>                                   */
.langs {
  display: grid;
  gap: var(--sp-4);
  margin-block-end: var(--sp-8);
  padding-block-start: var(--sp-5);
  border-block-start: 2px solid var(--line-gold);
}
@media (min-width: 62rem) {
  .langs {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--sp-5) var(--sp-8);
    align-items: start;
  }
  .langs__label { grid-column: 1; }
  .langs__list  { grid-column: 1; }
  .langs__body  { grid-column: 2; grid-row: 1 / span 2; }
}

.langs__label {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.langs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.langs__item {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
  padding-inline-start: var(--sp-4);
}
.langs__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.langs__body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-inline-size: 58ch;
}


/* ==========================================================================
   8. LATEST INSIGHTS
   .post-rail (sections.css §9) already gives a scroll-snap row on small
   screens and a three-column grid from 62rem. This only teaches it to hold
   one or two posts without leaving a hole.
   ========================================================================== */

@media (min-width: 62rem) {
  .insights__rail { grid-template-columns: repeat(var(--rail-cols, 3), minmax(0, 1fr)); }
}
.insights__rail:focus-visible { outline-offset: 6px; }

.post-card__mark {
  inline-size: 100%;
  block-size: 100%;
  color: var(--gold);
  opacity: .55;
}
.post-card__media:has(.post-card__mark) {
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--line);
}

.insights__empty { margin-block-start: var(--sp-4); }


/* ==========================================================================
   9. CTA BAND
   ========================================================================== */

.cta-band__phone {
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cta-band__note {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}


/* ==========================================================================
   10. SHARED
   ========================================================================== */

/* A section-foot whose only child is the trailing link. flex-end follows the
   writing direction, so this is direction-safe. */
.section-foot--end { justify-content: flex-end; }


/* ==========================================================================
   11. REDUCED MOTION
   tokens.css collapses the durations and motion.css kills the loops. What is
   left is the work this page has to do itself: drop the film back to the
   poster, retire the control that would have paused it, and stop the ticker
   from reflowing into a wrapped block inside a fixed-height strip.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .home-hero__video,
  .home-hero__toggle { display: none; }

  img.home-hero__poster { opacity: .8; }

  .home-ticker { block-size: auto; min-block-size: var(--home-ticker-h); }
  .home-ticker__track { flex-wrap: nowrap; inline-size: max-content; }
  .home-ticker__rail { overflow-x: auto; }
}


/* ==========================================================================
   12. THE FIRST PAINT
   Before its first paint the browser laid out the whole home page, all nine
   sections. On a mid-range phone the Arabic page painted about 0.4 s after
   the English one, most of it in that one layout (Arabic text shaping).
   Until the first screen has been painted, every section after the hero is
   skipped (content-visibility: auto); app.js then sets <html data-painted>
   and the page is laid out whole, so anchors, the scroll position restored
   on Back and the scrollbar behave as they always did. Each section has its
   own padding, so the containment this brings for that moment changes
   nothing. See "The first paint" in page-insights.css.
   ========================================================================== */

.js:not([data-painted]):not(:has(:target)) .page-home #main > section + section {
  content-visibility: auto;
  contain-intrinsic-block-size: 1400px;
}
.js:not([data-painted]):not(:has(:target)) .page-home #main > .scrollytell { contain-intrinsic-block-size: 400vh; }