/* ============================================================
   BASE AGENCY — INTERNATIONAL CORPORATE DIGITAL PLATFORM
   Cinematic homepage stylesheet

   01. Reset
   02. Fonts
   03. Root tokens
   04. Base html / body
   05. Typography primitives
   06. Accessibility helpers
   07. Layout / container
   08. Buttons
   09. Header
   10. Desktop navigation
   11. Divisions mega menu
   12. Language switcher
   13. Menu button + navigation panel
   14. Scroll story shell
   15. Story video + still
   16. Loader
   17. Chapter system
   18. Chapter positioning modifiers
   19. Hero
   20. Featured divisions index
   21. Why Base Agency
   22. Our Process
   23. Story progress indicator
   24. Scroll hint
   25. Outro + footer
   26. Responsive — large desktop
   27. Responsive — laptop
   28. Responsive — tablet
   29. Responsive — mobile
   30. RTL readiness
   31. Reduced motion
   ============================================================ */


/* ============================================================
   01. RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p,
figure, blockquote,
dl, dd, ol, ul { margin: 0; padding: 0; }

ol[class],
ul[class] { list-style: none; }

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

summary { cursor: pointer; }

dialog {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  max-width: none;
  max-height: none;
}


/* ============================================================
   02. FONTS — Base Meridion English (official Base Agency font)
   ============================================================ */
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BaseMeridionEnglish-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BaseMeridionEnglish-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BaseMeridionEnglish-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* The English cut maps Arabic-script ranges to placeholder dots, so the
   Kurdish cut serves those ranges — needed today for the Kurdish Sorani
   and Arabic language labels, and ready for the RTL locales. */
/* Base Meridion Kurdish — the brand's own Arabic-script cut.

   Same family name as the English face and scoped by unicode-range, so
   a page mixing scripts picks the right one per character with no help
   from the markup.

   Cut from BASE-Meridion-Kurdish 1.010 (853 glyphs, 209 in the Arabic
   block, complete Sorani) and subset here to the Arabic ranges only —
   Latin comes from the English face — with all layout features kept.
   GSUB and GPOS are what join Arabic letters into words; subsetting
   without them produces disconnected letterforms, so never drop them.

     Regular 79KB · Medium 104KB · SemiBold 107KB */
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BASEMeridionKurdish-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F,
                 U+2066-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BASEMeridionKurdish-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F,
                 U+2066-2069, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Base Meridion";
  src: url("./assets/fonts/BASEMeridionKurdish-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F,
                 U+2066-2069, U+FB50-FDFF, U+FE70-FEFF;
}


/* ============================================================
   03. ROOT TOKENS
   ============================================================ */
:root {
  /* Brand */
  --navy:        #0D2445;
  --navy-deep:   #091B34;
  --black:       #000000;
  --white:       #FFFFFF;
  --light-grey:  #F5F7FA;
  --soft-grey:   #E6EAF0;
  --charcoal:    #1F2933;
  --muted:       #5F6B7A;
  --gold:        #F2C94C;
  --gold-lit:    #ffcd05;   /* scroll-highlight: the line being read */

  /* Text on the cinematic black stage */
  --ink:         rgba(255, 255, 255, 1);
  --ink-2:       rgba(255, 255, 255, 0.72);
  --ink-3:       rgba(255, 255, 255, 0.46);
  --rule:        rgba(255, 255, 255, 0.14);
  --rule-soft:   rgba(255, 255, 255, 0.08);

  /* Type */
  --font: "Base Meridion", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Metrics */
  --header-height: 86px;
  --container: 1320px;
  --gutter: 48px;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 240ms;

  /* Layers */
  --z-video: 1;
  --z-chapter: 10;
  --z-ambient: 20;
  --z-header: 50;
  --z-mega: 60;
  --z-skip: 200;

  /* Story */
  --story-length: 720;
  --story-progress: 0;
  --col: min(26vw, 500px);
}


/* ============================================================
   04. BASE HTML / BODY
   ============================================================ */
html {
  background: var(--black);
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

html.is-menu-open,
html.is-menu-open body { overflow: hidden; }


/* ============================================================
   05. TYPOGRAPHY PRIMITIVES
   ============================================================ */
.eyebrow {
  margin: 0 0 var(--space-4);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow__sep {
  display: inline-block;
  margin-inline: 0.35em;
  color: var(--gold);
}

.chapter__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.55rem, 1.95vw, 2.35rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.chapter__body {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(0.95rem, 0.86vw, 1.05rem);
  line-height: 1.66;
  color: var(--ink-2);
}

.chapter__statement {
  margin: 0 0 var(--space-6);
  font-size: clamp(1.65rem, 2.15vw, 2.6rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.024em;
  text-wrap: balance;
}


/* ============================================================
   06. ACCESSIBILITY HELPERS
   ============================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: var(--space-3);
  padding: 0.85rem 1.4rem;
  background: var(--white);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-premium);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   07. LAYOUT / CONTAINER
   ============================================================ */
.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}


/* ============================================================
   08. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease-premium),
    border-color var(--dur) var(--ease-premium),
    color var(--dur) var(--ease-premium);
}

.btn--primary {
  background: var(--white);
  color: var(--navy);
}

.btn--primary::after {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-premium);
}

.btn--primary:hover { background: var(--light-grey); }
.btn--primary:hover::after { opacity: 1; }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}

.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

.btn--compact {
  min-height: 44px;
  padding-inline: 20px;
  font-size: 0.82rem;
}


/* ============================================================
   09. HEADER
   ============================================================ */
.site-header {
  position: fixed;
  z-index: var(--z-header);
  inset-block-start: 0;
  inset-inline: 0;
  padding-block-start: env(safe-area-inset-top);
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color 320ms var(--ease-premium),
    border-color 320ms var(--ease-premium),
    backdrop-filter 320ms var(--ease-premium);
}

.is-scrolled .site-header {
  background: rgba(13, 36, 69, 0.72);
  border-block-end-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 44px);
  block-size: var(--header-height);
  padding-inline: var(--gutter);
}

.brand {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  text-decoration: none;
}

.brand__mark {
  inline-size: clamp(118px, 9.4vw, 152px);
  block-size: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  margin-inline-start: auto;
}


/* ============================================================
   10. DESKTOP NAVIGATION
   ============================================================ */
.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.35vw, 26px);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: 10px;
  padding-inline: 0;
  font-size: 0.845rem;
  font-weight: 500;
  letter-spacing: 0.004em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-premium);
}

.nav__link::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: 0;
  background: var(--gold);
  transition: inline-size var(--dur) var(--ease-premium);
}

.nav__link:hover { color: var(--white); }
.nav__link:hover::before { inline-size: 100%; }

.nav__link.is-active { color: var(--white); }
.nav__link.is-active::before { inline-size: 100%; }

.nav__chevron {
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.2px solid currentColor;
  border-block-end: 1.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform var(--dur) var(--ease-premium);
}

[aria-expanded="true"] .nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}


/* ============================================================
   11. DIVISIONS MEGA MENU
   ============================================================ */
.mega {
  position: absolute;
  z-index: var(--z-mega);
  inset-block-start: 100%;
  inset-inline: 0;
  background: var(--navy);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}

.mega[hidden] { display: none; }

.mega__inner {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-7);
}

.mega__label {
  margin: 0 0 var(--space-5);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-7);
}

.mega__grid a {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 15px;
  border-block-end: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-premium);
}

.mega__grid a:hover { border-block-end-color: var(--gold); }

.mega__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-premium);
}

.mega__grid a:hover .mega__num { color: var(--gold); }

.mega__name {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-premium);
}

.mega__grid a:hover .mega__name { color: var(--white); }


/* ============================================================
   12. LANGUAGE SWITCHER
   ============================================================ */
.lang {
  position: relative;
  display: none;
}

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-block-size: 44px;
  padding-inline: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-premium);
}

.lang__trigger:hover { color: var(--white); }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-inline-size: 190px;
  padding: 6px;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.lang__menu[hidden] { display: none; }

.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  font-size: 0.84rem;
  color: var(--ink-3);
  border-radius: 5px;
}

.lang__option em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.lang__option.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.lang__option.is-active em { color: var(--gold); opacity: 1; }

.lang__option[aria-disabled="true"] { opacity: 0.42; }


/* ============================================================
   13. MENU BUTTON + NAVIGATION PANEL
   ============================================================ */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-premium);
}

.menu-btn:hover { color: var(--white); }

.menu-btn__lines {
  display: grid;
  gap: 5px;
  inline-size: 22px;
}

.menu-btn__lines i {
  display: block;
  block-size: 1px;
  background: currentColor;
}

.menu-btn__lines i:last-child { inline-size: 14px; margin-inline-start: auto; }

/* Panel */
.menu {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: var(--navy);
  color: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu::backdrop { background: rgba(9, 27, 52, 0.9); }

.menu:not([open]) { display: none; }

.menu__inner {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: calc(env(safe-area-inset-top) + 22px)
           clamp(20px, 5vw, 48px)
           calc(env(safe-area-inset-bottom) + 28px);
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--rule);
}

.menu__close {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-premium);
}

.menu__close:hover { color: var(--white); }

.menu__nav { flex: 1 1 auto; padding-block: var(--space-4); }

.menu__list > li > a,
.menu__details > summary {
  display: block;
  padding-block: 11px;
  border-block-end: 1px solid var(--rule-soft);
  font-size: clamp(1.08rem, 4.2vw, 1.45rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-premium);
}

.menu__list > li > a:hover,
.menu__details > summary:hover { color: var(--white); }

.menu__details > summary { list-style: none; }
.menu__details > summary::-webkit-details-marker { display: none; }

.menu__details > summary::after {
  content: "";
  float: inline-end;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 0.55em;
  border-inline-end: 1.2px solid currentColor;
  border-block-end: 1.2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.menu__details[open] > summary { color: var(--white); }
.menu__details[open] > summary::after { transform: rotate(-135deg); margin-block-start: 0.75em; }

.menu__sub { padding-block: var(--space-3) var(--space-4); }

.menu__sub a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-2);
  padding-block: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-premium);
}

.menu__sub a:hover { color: var(--white); }
.menu__sub a span { font-size: 0.7rem; font-weight: 600; color: var(--gold); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--rule);
}

.menu__lang { display: flex; gap: 4px; }

.menu__lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 46px;
  min-block-size: 44px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.menu__lang-opt.is-active {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.menu__lang-opt[aria-disabled="true"] { opacity: 0.4; }


/* ============================================================
   14. SCROLL STORY SHELL
   ============================================================ */
.scroll-story {
  position: relative;
  height: calc(var(--story-length) * 1vh);
  height: calc(var(--story-length) * 1svh);
  background: var(--black);
}

.story-stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--black);
}


/* ============================================================
   15. STORY VIDEO + STILL
   ============================================================ */
.story-video,
.story-still {
  position: absolute;
  z-index: var(--z-video);
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.story-still { opacity: 1; }

.story-video {
  opacity: 0;
  transition: opacity 260ms linear;
}

.is-video-ready .story-video { opacity: 1; }

/* If the film cannot load, the opening frame simply remains. */
.no-video .story-video { display: none; }


/* ============================================================
   16. LOADER
   ============================================================ */
.story-loader {
  position: absolute;
  z-index: var(--z-ambient);
  inset-block-end: clamp(28px, 5vh, 52px);
  inset-inline-start: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 1;
  transition: opacity 260ms var(--ease-premium);
}

.story-loader.is-done { opacity: 0; }

.story-loader__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-loader__track {
  position: relative;
  display: block;
  inline-size: 96px;
  block-size: 1px;
  background: var(--rule);
  overflow: hidden;
}

.story-loader__fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inset-inline-start center;
  transform-origin: left center;
  transition: transform 200ms linear;
}


/* ============================================================
   17. CHAPTER SYSTEM
   ============================================================ */
.story-content {
  position: absolute;
  z-index: var(--z-chapter);
  inset: 0;
}

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  padding-block: calc(var(--header-height) + var(--space-5)) clamp(48px, 8vh, 96px);
  padding-inline: var(--gutter);
  opacity: 0;
  will-change: opacity, transform;
}

.chapter.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.chapter__inner {
  inline-size: min(var(--col), 100%);
  pointer-events: auto;
}

.chapter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}


/* ============================================================
   18. CHAPTER POSITIONING MODIFIERS
   Each position is chosen against the negative space of the
   actual film frame that chapter sits on. The directional
   scrim is local — it never covers the whole composition.
   ============================================================ */
.chapter--left  { justify-items: start; }
.chapter--right { justify-items: end; }

.chapter--top    { align-items: start; }
.chapter--center { align-items: center; }
.chapter--bottom { align-items: end; }

/* Column widths are set so the copy always stops short of the
   sculpture at the frames that chapter plays over. */
.chapter--wide { --col: min(42vw, 690px); }
.chapter--hero { --col: min(29vw, 600px); }

/* The scrim is strictly local: it stops at the outer edge of the
   copy column, so it can never reach the sphere or the sculpture. */
.chapter { --scrim-end: calc(var(--col) + var(--gutter)); }

.chapter--left {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.26) calc(var(--scrim-end) * 0.6),
    rgba(0, 0, 0, 0) var(--scrim-end)
  );
}

.chapter--right {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.26) calc(var(--scrim-end) * 0.6),
    rgba(0, 0, 0, 0) var(--scrim-end)
  );
}


/* ============================================================
   19. HERO
   ============================================================ */
.hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.3rem, 3.15vw, 3.7rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.032em;
}

.hero__title .line { display: block; }

/* The hero eyebrow carries the longest label on the page; it is set a
   touch tighter so it holds one line inside the narrow hero column. */
.chapter--hero .eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
}

.hero__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(0.95rem, 0.88vw, 1.08rem);
  line-height: 1.62;
  color: var(--ink-2);
}


/* ============================================================
   20. FEATURED DIVISIONS INDEX
   ============================================================ */
.index { border-block-start: 1px solid var(--rule-soft); }

.index__link {
  display: grid;
  grid-template-columns: 40px 1fr 18px;
  align-items: center;
  gap: var(--space-3);
  padding-block: clamp(13px, 1.5vh, 19px);
  border-block-end: 1px solid var(--rule-soft);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-premium);
}

.index__link:hover { border-block-end-color: rgba(242, 201, 76, 0.55); }

.index__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-premium);
}

.index__link:hover .index__num { color: var(--gold); }

.index__name {
  font-size: clamp(0.94rem, 1.06vw, 1.16rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-premium);
}

.index__link:hover .index__name { color: var(--white); }

.index__arrow {
  position: relative;
  inline-size: 14px;
  block-size: 1px;
  background: var(--ink-3);
  justify-self: end;
  transition:
    transform var(--dur) var(--ease-premium),
    background-color var(--dur-fast) var(--ease-premium);
}

.index__arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -2.5px;
  inline-size: 6px;
  block-size: 6px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  color: inherit;
  transform: rotate(45deg);
}

.index__link:hover .index__arrow {
  background: var(--gold);
  transform: translateX(3px);
}

.index__link:hover .index__arrow::after { color: var(--gold); }


/* ============================================================
   21. WHY BASE AGENCY
   ============================================================ */
.manifesto { display: grid; gap: clamp(6px, 1vh, 12px); }

.manifesto__line {
  font-size: clamp(1.25rem, 1.72vw, 2rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color 320ms var(--ease-premium);
}

.manifesto__line.is-current { color: var(--gold-lit); }


/* ============================================================
   22. OUR PROCESS
   ============================================================ */
.process { border-block-start: 1px solid var(--rule-soft); }

.process__step {
  display: grid;
  grid-template-columns: 34px minmax(96px, auto) 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: clamp(10px, 1.3vh, 16px);
  border-block-end: 1px solid var(--rule-soft);
}

.process__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  transition: color 320ms var(--ease-premium);
}

.process__name {
  font-size: clamp(0.96rem, 1.05vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  transition: color 320ms var(--ease-premium);
}

.process__desc {
  font-size: clamp(0.8rem, 0.78vw, 0.9rem);
  line-height: 1.5;
  color: var(--white);
  transition: color 320ms var(--ease-premium);
}

.process__step.is-current .process__num  { color: var(--gold-lit); }
.process__step.is-current .process__name { color: var(--gold-lit); }
.process__step.is-current .process__desc { color: var(--gold-lit); }


/* ============================================================
   23. STORY PROGRESS INDICATOR
   ============================================================ */
.story-progress {
  position: absolute;
  z-index: var(--z-ambient);
  inset-inline-end: 26px;
  inset-block-start: 50%;
  display: none;
  transform: translateY(-50%);
  opacity: 0;
}

.story-progress__track {
  position: relative;
  display: block;
  inline-size: 1px;
  block-size: 168px;
  background: var(--rule);
}

.story-progress__dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-start: -2px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(calc(var(--story-progress) * 168px - 2px));
}


/* ============================================================
   24. SCROLL HINT
   ============================================================ */
.scroll-hint {
  position: absolute;
  z-index: var(--z-ambient);
  inset-block-end: clamp(28px, 5vh, 52px);
  inset-inline-end: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scroll-hint__label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  writing-mode: vertical-rl;
}

.scroll-hint__rule {
  position: relative;
  display: block;
  inline-size: 1px;
  block-size: 46px;
  background: var(--rule);
}

.scroll-hint__rule i {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -2px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--gold);
}


/* ============================================================
   25. OUTRO + FOOTER
   ============================================================ */
.story-outro {
  block-size: clamp(80px, 12vh, 150px);
  background-image: linear-gradient(to bottom, var(--black) 0%, var(--navy) 100%);
}

.site-footer {
  padding-block: clamp(64px, 9vh, 108px) clamp(28px, 4vh, 40px);
  padding-block-end: calc(clamp(28px, 4vh, 40px) + env(safe-area-inset-bottom));
  background: var(--navy);
  color: var(--white);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vh, 72px);
  padding-block-end: clamp(40px, 6vh, 72px);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand .brand__mark { inline-size: 168px; }

.site-footer__statement {
  margin-block: var(--space-5) var(--space-5);
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
}

.footer-col__title {
  margin: 0 0 var(--space-4);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.footer-col__list { display: grid; gap: 11px; }

.footer-col__list a {
  position: relative;
  display: inline-block;
  font-size: 0.885rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-premium);
}

.footer-col__list a::before {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: 0;
  background: var(--gold);
  transition: inline-size var(--dur) var(--ease-premium);
}

.footer-col__list a:hover { color: var(--white); }
.footer-col__list a:hover::before { inline-size: 100%; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: clamp(24px, 3vh, 34px);
}

.site-footer__copy,
.site-footer__langs {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.46);
}

.site-footer__langs { display: flex; gap: var(--space-4); }
.site-footer__langs .is-active { color: rgba(255, 255, 255, 0.86); }
.site-footer__langs [aria-disabled="true"] { opacity: 0.5; }


/* ============================================================
   26. RESPONSIVE — LARGE DESKTOP
   ============================================================ */
@media (min-width: 1240px) {
  .nav { display: block; }
  .lang { display: block; }
  .story-progress { display: block; }
}

@media (min-width: 1600px) {
  .nav__item--extra { display: block; }
  .menu-btn { display: none; }
}

@media (max-width: 1599px) {
  .nav__item--extra { display: none; }
}


/* ============================================================
   27. RESPONSIVE — LAPTOP / SMALL DESKTOP
   ============================================================ */
@media (max-width: 1439px) {
  :root { --gutter: 40px; }
}

@media (max-width: 1239px) {
  :root {
    --header-height: 78px;
    --gutter: 32px;
  }

  /* Below this width the film fills the viewport edge to edge, so the
     copy columns shrink to the frame's own free bands. */
  :root { --col: min(26vw, 400px); }
  .chapter--hero { --col: min(30vw, 420px); }
  .chapter--wide { --col: min(40vw, 520px); }

  .hero__title { font-size: clamp(1.95rem, 3vw, 3.7rem); }

  .mega { display: none; }
}


/* ============================================================
   28. RESPONSIVE — TABLET AND SHORT/NARROW VIEWPORTS
   The film is 16:9 on an infinite black field. Where the
   viewport is not wide enough for `cover` to keep the
   sculpture whole, it switches to `contain` — the letterbox
   is invisible against the black stage, and the artwork is
   never cropped or distorted.
   ============================================================ */
@media (max-aspect-ratio: 3 / 2) {
  .story-video,
  .story-still {
    object-fit: contain;
    object-position: center 24%;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-height: 74px;
    --gutter: 28px;
  }

  .chapter {
    padding-block: calc(var(--header-height) + var(--space-4)) clamp(40px, 7vh, 72px);
  }

  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--wide { grid-column: 1 / -1; }
  .footer-col__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(260px, 0.85fr) minmax(0, 2.15fr); }
  /* Company · Explore · Legal · Divisions — one architectural row. */
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.75fr); }
  .footer-col--wide { grid-column: 4; grid-row: 1; }
  .footer-col--legal { grid-column: 3; grid-row: 1; }
  .footer-col__list--two { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   29. RESPONSIVE — MOBILE
   Below 900px the composition stacks: the film holds the
   upper field, the black below it becomes the typographic
   band. Chapters are art-directed for that band, not scaled
   down from desktop.
   ============================================================ */
@media (max-width: 899px) {
  :root {
    --header-height: 70px;
    --gutter: 22px;
    --story-length: 640;
    --col: 100%;
  }

  .site-header__cta { display: none; }

  /* The film holds a cinematic band directly under the header; every
     chapter then reads as a caption in the black below it. */
  .story-video,
  .story-still {
    object-fit: contain;
    object-position: center 14%;
  }

  .chapter,
  .chapter--top,
  .chapter--center,
  .chapter--bottom {
    align-items: end;
    justify-items: start;
    padding-block-end: calc(clamp(34px, 6vh, 60px) + env(safe-area-inset-bottom));
  }

  .chapter--hero,
  .chapter--wide { --col: 100%; }

  /* Vertical scrim only: the artwork sits above the copy. */
  .chapter--left,
  .chapter--right {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 34%,
      rgba(0, 0, 0, 0) 62%
    );
  }

  .eyebrow { margin-block-end: var(--space-3); }

  /* Phone display sizes. The wide-viewport ramp was set when the film
     held only the upper third and the copy had the black band to itself;
     with the film now full-bleed the same sizes read as shouting. Each
     drops about a fifth: hero 33.5px -> 26.5px, chapter titles 25.7px ->
     21.1px on a 390px handset. */
  .hero__title {
    margin-block-end: var(--space-3);
    font-size: clamp(1.3rem, 6.8vw, 2.05rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

  .hero__title .line { display: inline; }

  .hero__lede,
  .chapter__body {
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 40ch;
  }

  .chapter__title { font-size: clamp(1.05rem, 5.4vw, 1.7rem); }
  .chapter__statement { font-size: clamp(1.05rem, 5.4vw, 1.7rem); margin-block-end: var(--space-5); }

  .chapter__actions { margin-block-start: var(--space-4); gap: 10px; }
  .btn { min-height: 48px; padding-inline: 20px; font-size: 0.85rem; }

  .index__link { grid-template-columns: 30px 1fr 16px; padding-block: 11px; }
  .index__name { font-size: 0.92rem; }

  .manifesto__line { font-size: clamp(1.15rem, 5.4vw, 1.6rem); }

  /* The seven steps stay as a precise index; the official
     descriptions remain in the accessibility tree. */
  .process__step { grid-template-columns: 30px 1fr; padding-block: 11px; }

  .process__desc {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .scroll-hint {
    inset-inline-start: auto;
    inset-inline-end: var(--gutter);
    inset-block-end: calc(14px + env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    gap: 9px;
  }

  .scroll-hint__label { writing-mode: horizontal-tb; font-size: 0.58rem; }
  .scroll-hint__rule { inline-size: 28px; block-size: 1px; }
  .scroll-hint__rule i { inset-block-end: -2px; inset-inline-start: auto; inset-inline-end: 0; }

  .story-loader { inset-block-start: calc(var(--header-height) + 16px); inset-block-end: auto; }
}


/* ============================================================
   29b. PORTRAIT — THE FILM FILLS THE SCREEN, NEVER LETTERBOXED
   A portrait viewport is the one shape where `contain` strands
   the film in a band with black above and below it. Here it
   covers instead, so the frame is edge to edge and there is no
   black margin at all.

   Which film is being covered is decided by the <source> list in
   index.html, not here: phones tall enough for it (aspect <= 0.62)
   load the vertical cut, whose own aspect is 0.6211, so `cover`
   trims only a sliver off its sides. Shapes between 0.62 and 1
   keep the wide film and are cropped harder — still no black.

   The subject sits at the horizontal centre in both cuts
   (measured: median cx 0.52 vertical, 0.50 wide), so a centred
   crop is the one that keeps it.

   This covers both orientations, not just portrait: a phone held
   sideways was the other shape that showed a black margin.
   ============================================================ */
@media (max-width: 899px) {
  .story-video,
  .story-still {
    object-fit: cover;
    object-position: center center;
  }
}

/* Now that the film reaches every edge, the copy sits on the
   sculpture instead of in a black band beneath it. These are the
   grades that keep it readable without dimming the sculpture where
   it matters: both are weighted to the bottom and fully clear well
   before the head, so the face and the sphere are never touched.

   The hero carries far more copy than any other chapter — eyebrow,
   four-line title, five-line lede, two buttons — so it alone needs
   the taller ramp. Giving every chapter that ramp would have dimmed
   the face at 0.70, where the statue is the whole frame and the type
   sits low. */
@media (max-width: 899px) {
  .chapter,
  .chapter--left,
  .chapter--right {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.74) 22%,
      rgba(0, 0, 0, 0.34) 46%,
      rgba(0, 0, 0, 0) 64%
    );
  }

  .chapter--hero {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.86) 30%,
      rgba(0, 0, 0, 0.66) 52%,
      rgba(0, 0, 0, 0.30) 70%,
      rgba(0, 0, 0, 0) 86%
    );
  }
}

@media (max-width: 599px) {
  :root { --gutter: 20px; }

  .site-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .footer-col__list--two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .brand__mark { inline-size: 112px; }
}

/* Short landscape phones. There is no black band to caption into here —
   the film fills the height — so the composition returns to side
   columns sized to the frame's free flanks. */
@media (max-height: 540px) and (orientation: landscape) {
  :root {
    --header-height: 58px;
    --col: min(31vw, 320px);
  }

  .chapter--hero,
  .chapter--wide { --col: min(35vw, 360px); }

  .chapter { padding-block: calc(var(--header-height) + 10px) 18px; }

  .chapter--left  { justify-items: start; }
  .chapter--right { justify-items: end; }
  .chapter--top    { align-items: start; }
  .chapter--center { align-items: center; }
  .chapter--bottom { align-items: end; }

  .chapter--left {
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.56) 0,
      rgba(0, 0, 0, 0.3) calc(var(--scrim-end) * 0.6),
      rgba(0, 0, 0, 0) var(--scrim-end)
    );
  }

  .chapter--right {
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.56) 0,
      rgba(0, 0, 0, 0.3) calc(var(--scrim-end) * 0.6),
      rgba(0, 0, 0, 0) var(--scrim-end)
    );
  }

  .eyebrow { font-size: 0.6rem; margin-block-end: var(--space-2); }

  .hero__title {
    margin-block-end: var(--space-2);
    font-size: clamp(1.2rem, 4.9vh, 1.7rem);
    line-height: 1.04;
  }

  .hero__title .line { display: block; }

  /* No room for the supporting paragraph beside the sculpture at this
     height; it stays in the accessibility tree and the headline and
     both calls to action carry the composition. */
  .hero__lede {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .chapter__body { font-size: 0.78rem; line-height: 1.45; }

  .chapter__title,
  .chapter__statement { font-size: clamp(1.1rem, 4.4vh, 1.55rem); }

  .chapter__actions { margin-block-start: var(--space-3); }
  .btn { min-height: 40px; padding-inline: 15px; font-size: 0.76rem; }

  .index__link { padding-block: 5px; }
  .index__name { font-size: 0.78rem; line-height: 1.28; }
  .manifesto__line { font-size: clamp(0.95rem, 3.8vh, 1.25rem); }
  .process__step { padding-block: 5px; }
  .process__name { font-size: 0.82rem; }

  .scroll-hint,
  .story-progress { display: none; }
}


/* ============================================================
   30. RTL READINESS
   Layout uses logical properties throughout. Only the
   directional scrims and a handful of visual details need
   explicit mirroring.
   ============================================================ */
[dir="rtl"] .nav__chevron,
[dir="rtl"] .menu__details > summary::after { transform: translateY(-2px) rotate(135deg); }

[dir="rtl"] .index__arrow::after { transform: rotate(-135deg); }

[dir="rtl"] .index__link:hover .index__arrow { transform: translateX(-3px); }

[dir="rtl"] .story-loader__fill { transform-origin: right center; }

[dir="rtl"] .chapter--left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.26) calc(var(--scrim-end) * 0.6),
    rgba(0, 0, 0, 0) var(--scrim-end)
  );
}

[dir="rtl"] .chapter--right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.26) calc(var(--scrim-end) * 0.6),
    rgba(0, 0, 0, 0) var(--scrim-end)
  );
}

@media (max-width: 899px) {
  [dir="rtl"] .chapter--left,
  [dir="rtl"] .chapter--right {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 34%,
      rgba(0, 0, 0, 0) 62%
    );
  }
}


/* ============================================================
   31. REDUCED MOTION
   The cinematic scroll becomes an ordinary document. One
   stable frame of the artwork, then the chapters in normal
   flow — every CTA and link still reachable.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.reduce-motion .scroll-story { height: auto; }

.reduce-motion .story-stage {
  position: relative;
  block-size: auto;
  overflow: visible;
  padding-block-start: var(--header-height);
}

.reduce-motion .story-video { display: none; }

/* One stable frame of the artwork, capped so the first chapter still
   reaches the opening viewport. */
.reduce-motion .story-still {
  position: relative;
  inset: auto;
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(52svh, 520px);
  object-fit: contain;
}

.reduce-motion .story-loader,
.reduce-motion .scroll-hint,
.reduce-motion .story-progress { display: none; }

.reduce-motion .story-content {
  position: relative;
  inset: auto;
}

.reduce-motion .chapter {
  position: relative;
  inset: auto;
  display: block;
  opacity: 1 !important;
  visibility: visible;
  transform: none !important;
  background-image: none;
  padding-block: clamp(48px, 8vh, 88px);
  will-change: auto;
}

.reduce-motion .chapter__inner { inline-size: min(760px, 100%); }

.reduce-motion .chapter--hero,
.reduce-motion .chapter--wide { --col: 100%; }

/* Reduced motion drops the scroll sequencing, so nothing is ever the
   current line here -- every line stays solid white. */
.reduce-motion .manifesto__line { color: var(--white); }

.reduce-motion .process__num  { color: var(--white); }
.reduce-motion .process__name { color: var(--white); }
.reduce-motion .process__desc { color: var(--white); }


/* ============================================================
   32. INTERIOR PAGES
   The homepage is the cinematic black stage. Interior pages open
   on the same sculpture, then hand over to a light editorial
   document — which is where the design system asks white and
   light grey to do the work.

   32.1  Page shell
   32.2  Cinematic page hero
   32.3  Body grid + section rail
   32.4  Sections
   32.5  Index lists
   32.6  Tag lists
   32.7  Process timeline
   32.8  Division grid
   32.9  CTA band
   32.10 Scroll reveal
   32.11 Interior responsive
   32.12 Interior reduced motion
   ============================================================ */

:root { --phero-col: min(29vw, 560px); }

/* ---------------- 32.1 Page shell ---------------- */
.interior {
  background: var(--light-grey);
  color: var(--charcoal);
}

/* interior header scrim — the film behind it can be very bright */
.interior .site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--header-height) + 60px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 1;
  transition: opacity 320ms var(--ease-premium);
  pointer-events: none;
}

.is-scrolled .interior .site-header::after,
.interior.is-scrolled .site-header::after { opacity: 0; }

/* The header opens transparent over the film, then takes its navy
   surface once the reader is into the document. */
.is-scrolled .interior .site-header,
.is-scrolled .site-header {
  background: rgba(13, 36, 69, 0.82);
}


/* ---------------- 32.2 Cinematic page hero ---------------- */
.phero {
  position: relative;
  height: 165vh;
  height: 165svh;
  background: var(--black);
}

.phero__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--black);
}

.phero__video,
.phero__still {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.phero__stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--black);
  opacity: var(--phero-veil, 0);
  pointer-events: none;
}

.phero__video { opacity: 0; transition: opacity 260ms linear; }
.is-video-ready .phero__video { opacity: 1; }
.no-video .phero__video { display: none; }

.phero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-items: end;
  justify-items: start;
  padding-block: calc(var(--header-height) + var(--space-5)) clamp(72px, 12vh, 132px);
  padding-inline: var(--gutter);
  color: var(--white);
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.58) 0,
    rgba(0, 0, 0, 0.3) calc((var(--phero-col) + var(--gutter)) * 0.6),
    rgba(0, 0, 0, 0) calc(var(--phero-col) + var(--gutter))
  );
  will-change: opacity, transform;
}

.phero__inner { inline-size: min(var(--phero-col), 100%); }

.phero__title {
  margin: 0;
  font-size: clamp(1.9rem, 2.9vw, 3.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.phero__lede {
  margin-block-start: var(--space-4);
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.9vw, 1.08rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
}

.phero__cue {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(28px, 5vh, 52px);
  inset-inline-end: var(--gutter);
  inline-size: 1px;
  block-size: 54px;
  background: rgba(255, 255, 255, 0.18);
}

.phero__cue span {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -2px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--gold);
}


/* ---------------- 32.3 Body grid + section rail ---------------- */
.pbody {
  position: relative;
  z-index: 3;
  background: var(--light-grey);
  padding-block: clamp(64px, 10vh, 132px) clamp(64px, 10vh, 120px);
}

.pbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
}

.prail { display: none; }

.prail__title {
  margin: 0 0 var(--space-4);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.prail ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

.prail a {
  position: relative;
  display: block;
  padding: 7px 0 7px 16px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-premium);
}

.prail a::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--soft-grey);
  transition: background-color var(--dur) var(--ease-premium);
}

.prail a:hover { color: var(--charcoal); }

.prail a.is-active { color: var(--navy); font-weight: 500; }
.prail a.is-active::before { background: var(--gold); }


/* ---------------- 32.4 Sections ---------------- */
.psections { display: grid; }

.psec {
  /* Rail and in-page anchors must clear the fixed header. */
  scroll-margin-block-start: calc(var(--header-height) + 28px);
  padding-block: clamp(34px, 5vh, 58px);
  border-block-start: 1px solid var(--soft-grey);
}

.psec:first-child { border-block-start: 0; padding-block-start: 0; }

.psec__label {
  margin: 0 0 var(--space-4);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.psec__title {
  margin: 0 0 var(--space-4);
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.1vw, 2.4rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}

.psec__body p {
  margin: 0 0 var(--space-3);
  max-width: 62ch;
  font-size: clamp(0.95rem, 0.92vw, 1.06rem);
  line-height: 1.72;
  color: var(--charcoal);
}

.psec__body p:last-child { margin-block-end: 0; }

.psec--lead .psec__body p:first-child {
  font-size: clamp(1.05rem, 1.15vw, 1.3rem);
  line-height: 1.62;
  color: var(--navy);
}

.psec--statement {
  padding-inline-start: clamp(18px, 2vw, 28px);
  border-inline-start: 2px solid var(--gold);
}

.psec--statement .psec__body p {
  font-size: clamp(1.05rem, 1.15vw, 1.28rem);
  line-height: 1.6;
  color: var(--navy);
}


/* ---------------- 32.5 Index lists ---------------- */
.ilist {
  display: grid;
  gap: 0 clamp(24px, 3vw, 56px);
  border-block-start: 1px solid var(--soft-grey);
}

.ilist li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: 11px;
  border-block-end: 1px solid var(--soft-grey);
}

.ilist__num {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ilist__name {
  font-size: clamp(0.9rem, 0.95vw, 1.02rem);
  line-height: 1.4;
  color: var(--charcoal);
}


/* ---------------- 32.6 Tag lists ---------------- */
.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.taglist li {
  padding: 8px 14px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--soft-grey);
  border-radius: 6px;
}


/* ---------------- 32.7 Process timeline ---------------- */
.ptl {
  position: relative;
  display: grid;
  gap: clamp(18px, 2.4vh, 30px);
  padding-inline-start: clamp(38px, 4vw, 54px);
}

.ptl__rail {
  position: absolute;
  inset-block: 6px 6px;
  inset-inline-start: 11px;
  inline-size: 1px;
  background: var(--soft-grey);
}

.ptl__fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
}

.ptl__step { position: relative; }

.ptl__step::before {
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: calc(clamp(38px, 4vw, 54px) * -1 + 8px);
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--soft-grey);
  transition: background-color 320ms var(--ease-premium);
}

.ptl__step.is-in::before { background: var(--navy); }

.ptl__num {
  display: block;
  margin-block-end: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ptl__name {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.ptl__desc {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(0.9rem, 0.9vw, 1rem);
  line-height: 1.6;
  color: var(--charcoal);
}


/* ---------------- 32.8 Division grid ---------------- */
.dgrid { display: grid; border-block-start: 1px solid var(--soft-grey); }

.dcard__link {
  display: grid;
  grid-template-columns: 46px 1fr 20px;
  align-items: start;
  gap: var(--space-3);
  padding-block: clamp(18px, 2.4vh, 26px);
  border-block-end: 1px solid var(--soft-grey);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-premium);
}

.dcard__link:hover { border-block-end-color: var(--gold); }

.dcard__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-premium);
}

.dcard__link:hover .dcard__num { color: var(--gold); }

.dcard__body { display: block; }

.dcard__name {
  display: block;
  margin-block-end: 5px;
  font-size: clamp(1.05rem, 1.25vw, 1.4rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.016em;
  color: var(--navy);
}

.dcard__text {
  display: block;
  max-width: 74ch;
  font-size: clamp(0.88rem, 0.88vw, 0.98rem);
  line-height: 1.6;
  color: var(--muted);
}

.dcard__arrow {
  position: relative;
  inline-size: 15px;
  block-size: 1px;
  margin-block-start: 12px;
  background: var(--muted);
  justify-self: end;
  transition:
    transform var(--dur) var(--ease-premium),
    background-color var(--dur-fast) var(--ease-premium);
}

.dcard__arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -2.5px;
  inline-size: 6px;
  block-size: 6px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  color: inherit;
  transform: rotate(45deg);
}

.dcard__link:hover .dcard__arrow {
  background: var(--gold);
  transform: translateX(4px);
}

.dcard__link:hover .dcard__arrow::after { color: var(--gold); }


/* ---------------- 32.9 CTA band ---------------- */
.pcta {
  position: relative;
  z-index: 3;
  padding-block: clamp(64px, 11vh, 128px);
  background: var(--navy);
  color: var(--white);
}

.pcta .eyebrow { color: rgba(255, 255, 255, 0.5); }

.pcta__text {
  margin: 0 0 var(--space-6);
  max-width: 24ch;
  font-size: clamp(1.6rem, 2.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.024em;
  text-wrap: balance;
}


/* ---------------- 32.10 Scroll reveal ---------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 620ms var(--ease-premium),
    transform 620ms var(--ease-premium);
}

.reveal.is-in { opacity: 1; transform: none; }

.ilist li.reveal { transition-duration: 420ms; }
.ptl__step.reveal { transition-duration: 520ms; }


/* ---------------- 32.11 Interior responsive ---------------- */
@media (min-width: 700px) {
  .ilist--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pbody__grid { grid-template-columns: 216px minmax(0, 1fr); }

  .prail {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-height) + 40px);
    align-self: start;
  }
}

@media (max-aspect-ratio: 3 / 2) {
  .phero__video,
  .phero__still { object-fit: contain; object-position: center 30%; }
}

@media (max-width: 1239px) {
  :root { --phero-col: min(46vw, 460px); }
}

@media (max-width: 899px) {
  :root { --phero-col: 100%; }

  .phero { height: 150vh; height: 150svh; }

  .phero__video,
  .phero__still { object-fit: contain; object-position: center 16%; }

  .phero__content {
    padding-block-end: calc(clamp(52px, 9vh, 84px) + env(safe-area-inset-bottom));
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.58) 36%,
      rgba(0, 0, 0, 0) 64%
    );
  }

  /* Matched to the homepage hero above, so the two do not disagree by
     6px on the same handset. */
  .phero__title { font-size: clamp(1.35rem, 6.8vw, 2.15rem); }
  .phero__lede { font-size: 0.92rem; max-width: 42ch; }
  .phero__cue { display: none; }

  .taglist li { font-size: 0.8rem; padding: 7px 12px; }

  .dcard__link { grid-template-columns: 34px 1fr 18px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .phero { height: 190vh; height: 190svh; }

  .phero__content {
    padding-block-end: 22px;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6) 0,
      rgba(0, 0, 0, 0.3) calc((var(--phero-col) + var(--gutter)) * 0.6),
      rgba(0, 0, 0, 0) calc(var(--phero-col) + var(--gutter))
    );
  }

  .phero__title { font-size: clamp(1.3rem, 5.2vh, 1.9rem); }
  .phero__lede { display: none; }
}


/* ---------------- 32.12 Interior reduced motion ---------------- */
.reduce-motion .phero { height: auto; }

.reduce-motion .phero__stage {
  position: relative;
  block-size: auto;
  overflow: visible;
  padding-block-start: var(--header-height);
}

.reduce-motion .phero__video { display: none; }

.reduce-motion .phero__still {
  position: relative;
  inset: auto;
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(50svh, 500px);
  object-fit: contain;
}

.reduce-motion .phero__content {
  position: relative;
  inset: auto;
  opacity: 1 !important;
  transform: none !important;
  background-image: none;
  padding-block: clamp(36px, 6vh, 64px);
}

.reduce-motion .phero__cue { display: none; }

.reduce-motion .ptl__fill { transform: scaleY(1); }
.reduce-motion .ptl__step::before { background: var(--navy); }


/* ============================================================
   33. ATMOSPHERE
   Four oversized soft forms. No filter, no particles, no canvas —
   the softness comes from the gradients themselves, so only
   transform and opacity are ever written. A mask hole keeps every
   vapour pixel clear of the golden sphere.
   ============================================================ */
.story-atmosphere {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--a-op, 0);
  transition: opacity 120ms linear;
}

/* Exclusion zone: clear to ~1.3 sphere diameters, then soft in. */
.story-atmosphere.has-safe {
  -webkit-mask-image: radial-gradient(
    circle var(--sphere-safe, 0px) at var(--sphere-x, 50%) var(--sphere-y, 50%),
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
  mask-image: radial-gradient(
    circle var(--sphere-safe, 0px) at var(--sphere-x, 50%) var(--sphere-y, 50%),
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
}

.vapor {
  position: absolute;
  display: block;
  will-change: transform;
}

/* Broad alabaster ribbon entering from the lower left. */
.vapor--left {
  inline-size: 110vw;
  block-size: 88vh;
  inset-inline-start: -34vw;
  inset-block-end: -22vh;
  background:
    radial-gradient(ellipse 46% 40% at 42% 58%, rgba(228, 236, 246, 0.34) 0%,
                    rgba(228, 236, 246, 0.13) 42%, rgba(228, 236, 246, 0) 74%),
    radial-gradient(ellipse 34% 26% at 66% 34%, rgba(214, 226, 240, 0.2) 0%,
                    rgba(214, 226, 240, 0) 70%);
  transform: translate3d(var(--a-lx, -26vw), var(--a-ly, 10vh), 0) scale(var(--a-ls, 1));
}

/* Its counterpart from the lower right. */
.vapor--right {
  inline-size: 104vw;
  block-size: 82vh;
  inset-inline-end: -30vw;
  inset-block-end: -18vh;
  background:
    radial-gradient(ellipse 44% 38% at 58% 56%, rgba(223, 233, 245, 0.3) 0%,
                    rgba(223, 233, 245, 0.11) 44%, rgba(223, 233, 245, 0) 76%),
    radial-gradient(ellipse 30% 24% at 34% 30%, rgba(210, 223, 238, 0.17) 0%,
                    rgba(210, 223, 238, 0) 72%);
  transform: translate3d(var(--a-rx, 26vw), var(--a-ry, 14vh), 0) scale(var(--a-rs, 1));
}

/* A distant vertical curtain: only present while the sphere is alone. */
.vapor--curtain {
  inline-size: 62vw;
  block-size: 128vh;
  inset-inline-start: 19vw;
  inset-block-start: -18vh;
  background: linear-gradient(
    to right,
    rgba(226, 236, 248, 0) 0%,
    rgba(226, 236, 248, 0.05) 26%,
    rgba(226, 236, 248, 0.085) 50%,
    rgba(226, 236, 248, 0.05) 74%,
    rgba(226, 236, 248, 0) 100%);
  opacity: var(--a-curtain, 0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* The single warm note: a faint reflection low and wide, never a halo. */
.vapor--warm {
  inline-size: 74vw;
  block-size: 46vh;
  inset-inline-start: 13vw;
  inset-block-end: 4vh;
  background: radial-gradient(ellipse 50% 46% at 50% 60%,
    rgba(242, 201, 76, 0.1) 0%, rgba(242, 201, 76, 0.03) 46%, rgba(242, 201, 76, 0) 76%);
  opacity: var(--a-warm, 0);
}


/* ============================================================
   34. SCULPTURE HOTSPOTS
   ============================================================ */
.story-hotspots {
  position: absolute;
  z-index: 15;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  min-inline-size: 44px;
  min-block-size: 44px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hotspot[hidden] { display: none; }

/* The statue's portal is a standing region — head, neck, shoulders,
   upper torso — so it is a soft rectangle. It must never round into
   anything that could read as a second sphere. */
.hotspot--region { border-radius: 16px; }

.hotspot--region .hotspot__flare {
  inset: -14% -30%;
  border-radius: 42% / 22%;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(255, 255, 255, 0) 40%,
    rgba(233, 240, 250, 0.085) 58%,
    rgba(233, 240, 250, 0) 76%);
}

.hotspot--region.is-firing .hotspot__flare {
  background: radial-gradient(ellipse at 50% 42%,
    rgba(242, 201, 76, 0) 40%,
    rgba(242, 201, 76, 0.16) 58%,
    rgba(242, 201, 76, 0) 76%);
}

/* The only feedback is a breath of light in the air around the object —
   never an outline, ring or halo on the artwork itself. */
.hotspot__flare {
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0) 44%,
    rgba(233, 240, 250, 0.1) 62%,
    rgba(233, 240, 250, 0) 78%);
  opacity: 0;
  transition: opacity 190ms var(--ease-premium);
  pointer-events: none;
}

.hotspot:hover .hotspot__flare,
.hotspot:focus-visible .hotspot__flare { opacity: 1; }

.hotspot.is-firing .hotspot__flare {
  opacity: 1;
  background: radial-gradient(circle at 50% 50%,
    rgba(242, 201, 76, 0) 44%,
    rgba(242, 201, 76, 0.2) 60%,
    rgba(242, 201, 76, 0) 78%);
}

.hotspot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

/* Contextual micro-label */
.hotspot-label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(6, 14, 26, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms var(--ease-premium);
}

.hotspot-label.is-on { opacity: 1; }
.hotspot-label.is-firing { color: var(--gold); }

.hotspot-label__dot {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.hotspot-label__arrow {
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.75;
}

/* Touch invitation — stated once, briefly. */
.hotspot-hint {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: calc(96px + env(safe-area-inset-bottom));
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: calc(100% - 40px);
  padding: 9px 14px;
  background: rgba(6, 14, 26, 0.6);
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-premium);
}

.hotspot-hint.is-on { opacity: 1; }

/* Debug (?debugHotspots=1) */
.debug-hotspots .hotspot {
  outline: 1px dashed rgba(242, 201, 76, 0.9);
  background: rgba(242, 201, 76, 0.16);
}

.hotspot-debug {
  position: fixed;
  z-index: 300;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #F2C94C;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}


/* ============================================================
   35. EXPERIENCE SURFACES — shared chrome
   ============================================================ */
.is-experience,
.is-experience body { background: var(--black); }

#experience-root[hidden] { display: none; }

.xheader {
  position: fixed;
  z-index: var(--z-header);
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  block-size: var(--header-height);
  padding-inline: var(--gutter);
  padding-block-start: env(safe-area-inset-top);
  color: var(--white);
}

.xheader::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--header-height) + 56px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.xheader > * { position: relative; }

.xheader__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.xheader__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-inline-start: auto;
}

.xheader__lang {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.52);
}

.xheader__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-block-size: 44px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-premium);
}

.xheader__back:hover { color: var(--white); }

.xheader__back-short { display: none; }

@media (max-width: 899px) {
  .xheader__back-long { display: none; }
  .xheader__back-short { display: inline; }
}

.xheader__back-arrow {
  inline-size: 14px;
  block-size: 1px;
  background: currentColor;
  position: relative;
}

.xheader__back-arrow::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -2.5px;
  inline-size: 6px;
  block-size: 6px;
  border-block-end: 1px solid currentColor;
  border-inline-start: 1px solid currentColor;
  transform: rotate(45deg);
}

.xmain[hidden] { display: none; }

.xfooter {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: clamp(22px, 4vh, 34px) var(--gutter);
  padding-block-end: calc(clamp(22px, 4vh, 34px) + env(safe-area-inset-bottom));
  background: var(--navy);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.xfooter p { margin: 0; }
.xfooter a { color: rgba(255, 255, 255, 0.76); text-decoration: none; }
.xfooter a:hover { color: var(--white); }


/* ============================================================
   36. EDITORIAL EXPERIENCES
   ============================================================ */
.xedit {
  display: grid;
  align-items: center;
  min-block-size: 100svh;
  padding-block: calc(var(--header-height) + clamp(40px, 8vh, 90px)) clamp(48px, 9vh, 100px);
  padding-inline: var(--gutter);
  background:
    radial-gradient(ellipse 70% 60% at 22% 12%, rgba(19, 46, 84, 0.55) 0%, rgba(0, 0, 0, 0) 68%),
    var(--black);
  color: var(--white);
}

.xedit__inner { inline-size: min(940px, 100%); }

.xedit__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(2rem, 3.6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.xedit__lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.05vw, 1.18rem);
  line-height: 1.66;
  color: var(--ink-2);
}

.xedit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.xedit__list {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-6);
  border-block-start: 1px solid var(--rule-soft);
}

.xedit__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2);
  padding-block: 13px;
  border-block-end: 1px solid var(--rule-soft);
  font-size: clamp(0.92rem, 1vw, 1.06rem);
  color: var(--ink-2);
}

.xedit__list span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

.xedit__manifesto { display: grid; gap: clamp(8px, 1.4vh, 16px); }

.xedit__manifesto li {
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.xedit__steps {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-5);
  border-block-start: 1px solid var(--rule-soft);
}

.xedit__steps li {
  display: grid;
  grid-template-columns: 42px minmax(110px, auto) 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 15px;
  border-block-end: 1px solid var(--rule-soft);
}

.xedit__steps span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--gold);
}

.xedit__steps b {
  font-size: clamp(1rem, 1.1vw, 1.16rem);
  font-weight: 600;
  color: var(--white);
}

.xedit__steps em {
  font-style: normal;
  font-size: clamp(0.86rem, 0.9vw, 0.98rem);
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 767px) {
  .xedit__steps li { grid-template-columns: 34px 1fr; row-gap: 3px; }
  .xedit__steps em { grid-column: 2; }
}


/* ============================================================
   37. DIVISIONS EXPERIENCE
   ============================================================ */
.dx {
  position: relative;
  height: 1150vh;
  height: 1150svh;
  background: var(--black);
}

.dx__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--black);
}

.dx__video,
.dx__still {
  position: absolute;
  z-index: 1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.dx__stage::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 62%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.46) 34%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.dx__video { opacity: 0; transition: opacity 320ms linear; }
.dx-ready .dx__video { opacity: 1; }
.dx-no-video .dx__video { display: none; }

/* ---- atmosphere ---- */
.dx__atmos {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--dx-op, 0);
}

.dxv { position: absolute; display: block; will-change: transform; }

.dxv--a {
  inline-size: 96vw;
  block-size: 76vh;
  inset-inline-start: -22vw;
  inset-block-end: -14vh;
  background: radial-gradient(ellipse 44% 40% at 48% 56%,
    rgba(228, 236, 246, 0.4) 0%, rgba(228, 236, 246, 0.12) 44%, rgba(228, 236, 246, 0) 76%);
  transform: translate3d(var(--dx-x, 0), 0, 0) scaleX(var(--dx-stretch, 1));
}

.dxv--b {
  inline-size: 90vw;
  block-size: 66vh;
  inset-inline-end: -20vw;
  inset-block-start: -8vh;
  background: radial-gradient(ellipse 42% 40% at 54% 48%,
    rgba(219, 231, 245, 0.3) 0%, rgba(219, 231, 245, 0.09) 46%, rgba(219, 231, 245, 0) 76%);
  transform: translate3d(calc(var(--dx-x, 0) * -0.7), 0, 0) scaleX(var(--dx-stretch, 1));
}

.dxv--c {
  inline-size: 80vw;
  block-size: 52vh;
  inset-inline-start: 10vw;
  inset-block-end: 0;
  background: radial-gradient(ellipse 48% 46% at 50% 62%,
    rgba(242, 201, 76, 0.12) 0%, rgba(242, 201, 76, 0.035) 48%, rgba(242, 201, 76, 0) 78%);
  opacity: var(--dx-warm, 0.4);
  transform: translate3d(calc(var(--dx-x, 0) * 0.45), 0, 0);
}

/* ---- intro / outro ---- */
.dx__intro,
.dx__outro {
  position: absolute;
  z-index: 12;
  inset-inline: var(--gutter);
  inset-block-end: clamp(80px, 16vh, 190px);
  color: var(--white);
  will-change: opacity, transform;
}

.dx__intro.is-off,
.dx__outro.is-off { visibility: hidden; pointer-events: none; }

.dx__introtitle,
.dx__outrotitle {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.034em;
}

.dx__introtitle span,
.dx__outrotitle span { display: block; }

.dx__cue {
  margin: var(--space-5) 0 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dx__outro .btn { margin-block-start: var(--space-6); }

/* ---- horizontal track ---- */
.dx__track {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  inline-size: 100%;
  will-change: transform;
}

.dx-ch {
  position: relative;
  flex: 0 0 100%;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  align-content: end;
  padding-block: calc(var(--header-height) + var(--space-5)) clamp(84px, 15vh, 180px);
  padding-inline: var(--gutter);
  color: var(--white);
  transform: translate3d(var(--ch-shift, 0), 0, 0);
  will-change: opacity, transform;
}

.dx-ch.is-off { visibility: hidden; pointer-events: none; }

.dx-ch__num {
  margin: 0 0 var(--space-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.dx-ch__num b { color: var(--gold); font-weight: 600; }

.dx-ch__title {
  margin: 0;
  max-inline-size: 19ch;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.dx-ch__title--short  { font-size: clamp(2.4rem, 4.5vw, 5.4rem); }
.dx-ch__title--medium { font-size: clamp(2rem, 3.6vw, 4.3rem); max-inline-size: 22ch; }
.dx-ch__title--long   { font-size: clamp(1.7rem, 2.95vw, 3.5rem); max-inline-size: 26ch; }

.dx-ch__sub {
  margin: var(--space-4) 0 0;
  max-inline-size: 36rem;
  font-size: clamp(1rem, 1.15vw, 1.28rem);
  line-height: 1.46;
  color: rgba(255, 255, 255, 0.8);
  opacity: var(--sub-o, 1);
  transform: translate3d(0, var(--sub-y, 0), 0);
}

.dx-ch__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: var(--space-5);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  opacity: var(--sub-o, 1);
  transition: color var(--dur-fast) var(--ease-premium);
}

.dx-ch__link i {
  inline-size: 15px;
  block-size: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--dur) var(--ease-premium);
}

.dx-ch__link i::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -2.5px;
  inline-size: 6px;
  block-size: 6px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
}

.dx-ch__link:hover { color: var(--gold); }
.dx-ch__link:hover i { transform: translateX(4px); }

/* ---- index ---- */
.dx__return {
  position: absolute;
  z-index: 14;
  inset-inline: 0;
  inset-block-end: clamp(26px, 4.5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 320ms var(--ease-premium);
  pointer-events: none;
}

.dx__return[hidden] { display: none; }
.dx__return.is-on { opacity: 1; }

.dx__return-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.dx__return-track {
  position: relative;
  display: block;
  inline-size: 128px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.dx__return-track i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--return-fill, 0));
  transform-origin: left center;
}

/* The wash that carries the visitor back out. */
.dx-leave {
  position: fixed;
  z-index: 95;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dx-leave__base {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  animation: dxLeaveBase 780ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.dx-leave__film {
  position: absolute;
  inset: -45%;
  inline-size: 190%;
  block-size: 190%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0;
  animation: dxLeaveFilm 900ms cubic-bezier(0.4, 0, 0.7, 0) forwards;
}

@keyframes dxLeaveBase {
  0%   { opacity: 0; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes dxLeaveFilm {
  0%   { transform: scale(1.9) translate3d(-6%, 10%, 0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.25) translate3d(2%, -4%, 0); opacity: 0.85; }
}

.dx-reduced .dx-leave__film { display: none; }

.dx__index {
  position: absolute;
  z-index: 20;
  inset-inline: var(--gutter);
  inset-block-end: clamp(26px, 4.5vh, 48px);
  display: none;
}

.dx__index-rule {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -14px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.dx__index ol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dx__index button {
  position: relative;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.34);
  transition: color var(--dur-fast) var(--ease-premium);
}

.dx__index button::before {
  content: "";
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: 50%;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-start: -2.5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-premium);
}

.dx__index button:hover { color: rgba(255, 255, 255, 0.72); }

.dx__index button.is-active { color: var(--white); }
.dx__index button.is-active::before { opacity: 1; }

@media (min-width: 900px) {
  .dx__return {
  position: absolute;
  z-index: 14;
  inset-inline: 0;
  inset-block-end: clamp(26px, 4.5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 320ms var(--ease-premium);
  pointer-events: none;
}

.dx__return[hidden] { display: none; }
.dx__return.is-on { opacity: 1; }

.dx__return-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.dx__return-track {
  position: relative;
  display: block;
  inline-size: 128px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.dx__return-track i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--return-fill, 0));
  transform-origin: left center;
}

/* The wash that carries the visitor back out. */
.dx-leave {
  position: fixed;
  z-index: 95;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dx-leave__base {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  animation: dxLeaveBase 780ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.dx-leave__film {
  position: absolute;
  inset: -45%;
  inline-size: 190%;
  block-size: 190%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0;
  animation: dxLeaveFilm 900ms cubic-bezier(0.4, 0, 0.7, 0) forwards;
}

@keyframes dxLeaveBase {
  0%   { opacity: 0; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes dxLeaveFilm {
  0%   { transform: scale(1.9) translate3d(-6%, 10%, 0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.25) translate3d(2%, -4%, 0); opacity: 0.85; }
}

.dx-reduced .dx-leave__film { display: none; }

.dx__index { display: block; }
}


/* ============================================================
   38. ENHANCEMENT — RESPONSIVE
   ============================================================ */
@media (max-aspect-ratio: 3 / 2) {
  .dx__video,
  .dx__still { object-fit: contain; object-position: center 34%; }
}

@media (max-width: 899px) {
  .dx { height: 1000vh; height: 1000svh; }

  .dx__video,
  .dx__still { object-fit: contain; object-position: center 20%; }

  /* Covers rather than contains: no black frame around the film.
     The dolly keeps its subject on the centre line the whole way
     through (measured bright-content cx: median 0.499, range
     0.27–0.55), so a centred crop holds the statue in every one of
     the ten divisions. */
  .dx__video,
  .dx__still { object-fit: cover; object-position: center center; }

  .dx-ch { padding-block-end: calc(clamp(48px, 9vh, 90px) + env(safe-area-inset-bottom)); }

  .dx__stage::after {
    block-size: 74%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.62) 40%,
      rgba(0, 0, 0, 0) 100%);
  }

  .dx-ch__title--short  { font-size: clamp(2.1rem, 9.5vw, 3.4rem); line-height: 0.94; }
  .dx-ch__title--medium { font-size: clamp(1.85rem, 8.2vw, 3rem); line-height: 0.96; max-inline-size: none; }
  .dx-ch__title--long   { font-size: clamp(1.6rem, 7vw, 2.6rem); line-height: 0.98; max-inline-size: none; }

  .dx-ch__sub { font-size: 1rem; line-height: 1.45; max-inline-size: none; }

  .dx__intro,
  .dx__outro { inset-block-end: calc(clamp(52px, 10vh, 110px) + env(safe-area-inset-bottom)); }
  .dx__introtitle,
  .dx__outrotitle { font-size: clamp(1.9rem, 8.6vw, 3rem); }

  .xheader__title { display: none; }

  .hotspot-hint { inset-block-end: calc(70px + env(safe-area-inset-bottom)); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .dx-ch { padding-block-end: 28px; }
  .dx-ch__title--short  { font-size: clamp(1.5rem, 5.4vh, 2.2rem); }
  .dx-ch__title--medium { font-size: clamp(1.3rem, 4.8vh, 1.9rem); }
  .dx-ch__title--long   { font-size: clamp(1.15rem, 4.2vh, 1.6rem); }
  .dx-ch__sub { font-size: 0.86rem; }
  .dx-ch__link { margin-block-start: var(--space-3); }
}


/* ============================================================
   39. ENHANCEMENT — REDUCED MOTION
   Divisions becomes an ordinary document: one still frame, then
   the ten divisions in sequence. No pinning, no scrubbing, no
   horizontal movement, no atmosphere.
   ============================================================ */
.dx-reduced .dx { height: auto; }

.dx-reduced .dx__stage {
  position: relative;
  block-size: auto;
  overflow: visible;
  padding-block-start: var(--header-height);
}

.dx-reduced .dx__video,
.dx-reduced .dx__atmos,
.dx-reduced .dx__return {
  position: absolute;
  z-index: 14;
  inset-inline: 0;
  inset-block-end: clamp(26px, 4.5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 320ms var(--ease-premium);
  pointer-events: none;
}

.dx__return[hidden] { display: none; }
.dx__return.is-on { opacity: 1; }

.dx__return-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.dx__return-track {
  position: relative;
  display: block;
  inline-size: 128px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.dx__return-track i {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--return-fill, 0));
  transform-origin: left center;
}

/* The wash that carries the visitor back out. */
.dx-leave {
  position: fixed;
  z-index: 95;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dx-leave__base {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  animation: dxLeaveBase 780ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.dx-leave__film {
  position: absolute;
  inset: -45%;
  inline-size: 190%;
  block-size: 190%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0;
  animation: dxLeaveFilm 900ms cubic-bezier(0.4, 0, 0.7, 0) forwards;
}

@keyframes dxLeaveBase {
  0%   { opacity: 0; }
  60%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes dxLeaveFilm {
  0%   { transform: scale(1.9) translate3d(-6%, 10%, 0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.25) translate3d(2%, -4%, 0); opacity: 0.85; }
}

.dx-reduced .dx-leave__film { display: none; }

.dx__index { display: none; }

.dx-reduced .dx__still {
  position: relative;
  inset: auto;
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(50svh, 500px);
  object-fit: contain;
}

.dx-reduced .dx__intro,
.dx-reduced .dx__outro {
  position: relative;
  inset: auto;
  padding-block: clamp(40px, 7vh, 80px);
  padding-inline: var(--gutter);
}

.dx-reduced .dx__cue { display: none; }

.dx-reduced .dx__track {
  position: relative;
  inset: auto;
  display: block;
  inline-size: 100%;
  transform: none !important;
}

.dx-reduced .dx__stage::after { display: none; }

.dx-reduced .dx-ch {
  display: block;
  inline-size: auto;
  block-size: auto;
  opacity: 1 !important;
  transform: none !important;
  background-image: none;
  border-block-start: 1px solid var(--rule-soft);
  padding-block: clamp(30px, 5vh, 54px);
}

.dx-reduced .dx-ch__sub { opacity: 1 !important; transform: none !important; }
.dx-reduced .dx-ch__link { opacity: 1 !important; }

.reduce-motion .story-atmosphere,
.reduce-motion .story-hotspots { display: none; }


/* ============================================================
   40. NEW PAGE COMPONENTS
   ============================================================ */
.deflist { display: grid; border-block-start: 1px solid var(--soft-grey); }

.deflist li {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--space-3);
  padding-block: 15px;
  border-block-end: 1px solid var(--soft-grey);
}

.deflist b {
  font-size: clamp(0.95rem, 1vw, 1.08rem);
  font-weight: 600;
  color: var(--navy);
}

.deflist span {
  font-size: clamp(0.9rem, 0.9vw, 1rem);
  line-height: 1.6;
  color: var(--charcoal);
}

.contact-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-card {
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--white);
  border: 1px solid var(--soft-grey);
  border-radius: 8px;
}

.contact-card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
}

.contact-card p {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.contact-card a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-block-end: 1px solid var(--gold);
}

.contact-card a:hover { color: var(--charcoal); }

.empty-note {
  padding: clamp(16px, 2vw, 22px);
  background: var(--white);
  border: 1px solid var(--soft-grey);
  border-inline-start: 2px solid var(--gold);
  border-radius: 6px;
  color: var(--muted) !important;
}

.empty-note a { color: var(--navy); font-weight: 600; }

@media (max-width: 599px) {
  .deflist li { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================
   41. SMOKE TRANSITIONS

   Two moments use vapour as the cut:
   the arrival into the ecosystem, and every move between
   divisions. Both are built from a few oversized soft forms —
   no filters, no particles — so they cost transform and opacity
   and nothing else.
   ============================================================ */

/* ---- 41.1 Arrival: the sphere opens into real smoke ----
   The plate is a statue-free crop of the actual vapour in
   divisionss.mp4, levelled so its blacks are zero. Screen blending
   makes those blacks vanish, so what remains on screen is only the
   real smoke. */
.dx-enter {
  position: fixed;
  z-index: 90;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dx-enter__base {
  position: absolute;
  inset: 0;
  background: var(--black);
  animation: dxBase 1250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dx-enter__film {
  position: absolute;
  inset: -45%;
  inline-size: 190%;
  block-size: 190%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0;
  will-change: transform, opacity;
  animation: dxFilm 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dx-enter__film--b {
  animation: dxFilmB 2400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dxBase {
  0%   { opacity: 1; }
  55%  { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes dxFilm {
  0%   { transform: scale(1.35) translate3d(4%, 6%, 0); opacity: 0; }
  16%  { opacity: 1; }
  62%  { opacity: 0.72; }
  100% { transform: scale(1.9) translate3d(-8%, -10%, 0); opacity: 0; }
}

@keyframes dxFilmB {
  0%   { transform: scale(1.6) translate3d(-6%, 4%, 0) rotate(2deg); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: scale(2.3) translate3d(10%, -14%, 0) rotate(-2deg); opacity: 0; }
}

.dx-entering .dx__intro { opacity: 0; }

/* ---- 41.2 Between divisions: vapour is the cut ---- */
.dx__veil {
  position: absolute;
  z-index: 11;
  inset: -12% -22%;
  pointer-events: none;
  opacity: var(--veil-o, 0);
  will-change: opacity;
}

.dx__veil i {
  position: absolute;
  display: block;
  inset-block: -30%;
  inline-size: 78%;
  background-image: url("/assets/media/smoke-plate.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  /* Feathered so the plate has no rectangular edge of its own. */
  -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, #000 26%, transparent 76%);
  mask-image: radial-gradient(ellipse 58% 66% at 50% 50%, #000 26%, transparent 76%);
  will-change: transform;
}

.dx__veil i:nth-child(1) {
  inset-inline-start: -6%;
  transform: translate3d(var(--veil-x1, 0), 0, 0) scaleX(var(--veil-s, 1));
}

.dx__veil i:nth-child(2) {
  inset-inline-start: 44%;
  transform: translate3d(var(--veil-x2, 0), 0, 0) scaleX(var(--veil-s, 1));
}

.dx-reduced .dx-enter,
.dx-reduced .dx__veil { display: none; }


/* ============================================================
   42. GOLD GRAVITY FIELD
   Two canvases between the atmosphere and the typography. The
   layer never takes the pointer — the sphere hotspot above it
   keeps its click.
   ============================================================ */
.gravity-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms linear;
}

.gravity-field.is-live { opacity: 1; }

.gravity-field canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

#gravity-particles { z-index: 3; }

/* The liquid renders at reduced resolution and is scaled up, which
   is what softens it and lets close blobs read as one body. */
#gravity-liquid {
  z-index: 4;
  mix-blend-mode: screen;
}

.reduce-motion .gravity-field { display: none !important; }

.fx-debug {
  position: fixed;
  z-index: 300;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.82);
  color: #F2C94C;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
}


/* ============================================================
   43. THE MIND EXPERIENCE

   A directed cinematic, not a video player. The film fills the
   stage; everything else is one line of type at a time, placed in
   measured negative space.

   The stage publishes the film's real rendered rect as --film-x/y/w/h
   (written by bootMind from videoWidth/Height and the computed
   object-fit), so the end panel can sit beside the composition
   instead of on top of it.
   ============================================================ */
.xmind {
  position: relative;
  display: block;
  background: var(--black);
}

/* The scroll length is the running time. 20.06s at roughly the
   homepage's pace (48svh per second of film) lands just under 1000svh;
   phones get a shorter run so the thumb is not asked for more. */
.mind {
  position: relative;
  height: 950vh;
  height: 950svh;
  background: var(--black);
}

.mind__stage {
  position: sticky;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--black);
}

@media (max-width: 899px) {
  .mind { height: 820vh; height: 820svh; }
}

/* The film's own frame reaches the top and bottom edges of the
   picture — the topmost question mark sits at 2% and the brain
   touches the base — so any crop cuts the artwork. Contain, always.
   On black, the letterbox is not a border; it is just the room. */
.mind__video,
.mind__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center center;
  background: var(--black);
}

.mind__video { z-index: 1; }

.mind__poster {
  z-index: 2;
  opacity: 1;
  transition: opacity 280ms var(--ease-premium);
}

.mind__stage.is-running .mind__poster { opacity: 0; }

/* Loading is a hairline, not a spinner and not a number. */
.mind__load {
  position: absolute;
  z-index: 6;
  inset-block-end: calc(var(--film-y, 0px) + 22px);
  inset-inline: 50%;
  inline-size: 76px;
  margin-inline-start: -38px;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.mind__load[hidden] { display: none; }

.mind__load i {
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  background: var(--gold);
  animation: mind-load 1400ms var(--ease-premium) infinite;
}

@keyframes mind-load {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}

/* ---------- the invitation ----------
   One line, at the foot of the picture, that leaves as soon as the
   visitor does the thing it asks for. */
.mind__cue {
  position: absolute;
  z-index: 8;
  /* The same seat the end panel takes, for the same reason: the
     sculpture stands in the middle of the frame and the marble is
     white. Centred type would land on his chest. */
  inset-block-end: calc(var(--film-y, 0px) + var(--film-h, 100vh) * 0.09);
  inset-inline-start: 20px;
  inline-size: min(300px, calc(var(--film-x, 0px) + var(--film-w, 100vw) * 0.17));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

/* In a deep letterbox band the cue joins the picture's foot, centred,
   because there the black below the film is empty by construction. */
.mind__stage.has-band .mind__cue {
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline: var(--gutter);
  inline-size: auto;
  align-items: center;
  text-align: center;
}

.mind__cue[hidden] { display: none; }

/* A hairline that falls, once, on a slow loop — the direction of
   travel, stated without an arrow glyph. */
.mind__cue i {
  inline-size: 1px;
  block-size: 34px;
  background: linear-gradient(to bottom,
    rgba(242, 201, 76, 0) 0%,
    rgba(242, 201, 76, 0.9) 45%,
    rgba(242, 201, 76, 0) 100%);
  animation: mind-cue 2200ms var(--ease-premium) infinite;
}

@keyframes mind-cue {
  0%   { transform: translateY(-70%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(70%); opacity: 0; }
}

/* ---------- progress: a hairline at the foot of the picture ---------- */
.mind__bar {
  position: absolute;
  z-index: 7;
  inset-block-end: calc(var(--film-y, 0px) + 0px);
  inset-inline: 0;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

.mind__bar i {
  display: block;
  block-size: 100%;
  background: var(--gold);
  opacity: 0.72;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- end state ----------
   Placed in the black beside the brain: the composition occupies the
   middle 45% of the frame at rest, so a panel held inside the first
   quarter of the film width never crosses it. Where the viewport
   leaves a deep letterbox band instead — every phone — the panel
   moves into that band and touches nothing at all. */
.mind__end {
  position: absolute;
  z-index: 9;
  inset-block-end: calc(var(--film-y, 0px) + var(--film-h, 100vh) * 0.09);
  inset-inline-start: 20px;
  /* In this cut the resolved composition begins 21.4% into the film —
     measured across its closing frames, tighter than the previous one —
     so the panel may use that margin plus any letterbox beside it. The
     0.17 keeps real air before the brain's left edge at every size,
     including a short landscape window. */
  inline-size: min(300px, calc(var(--film-x, 0px) + var(--film-w, 100vw) * 0.17));
  color: var(--white);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: mind-end-in 520ms var(--ease-premium) forwards;
}

.mind__end[hidden] { display: none; }

@keyframes mind-end-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.mind__end-label {
  margin: 0 0 10px;
  padding-block-end: 10px;
  border-block-end: 1px solid rgba(242, 201, 76, 0.5);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.mind__end-line {
  margin: 0 0 18px;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}

.mind__acts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mind__act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--white);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: start;
  cursor: pointer;
  transition: color 190ms var(--ease-premium);
}

.mind__act i { font-style: normal; opacity: 0.7; }
.mind__act:hover { color: var(--gold); }
.mind__act--quiet { color: rgba(255, 255, 255, 0.52); }
.mind__act--quiet:hover { color: var(--white); }
.mind__act:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* A deep letterbox band: the panel leaves the picture entirely. */
.mind__stage.has-band .mind__end {
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline: var(--gutter);
  inline-size: auto;
}

.mind__stage.has-band .mind__acts {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 20px;
}


/* ============================================================
   THE VERTICAL CUT (portrait phones)
   `.is-reel` is set by bootMind from the film that actually loaded,
   not from the current viewport, so rotating cannot leave these
   rules grading a film that is not on screen.

   The reel is 0.6211 against a phone's ~0.46, so `cover` trims a
   sliver off its sides and fills the screen: no black frame, which
   is the standing instruction. Nothing is cropped vertically.
   ============================================================ */
.mind__stage.is-reel .mind__video,
.mind__stage.is-reel .mind__poster {
  object-fit: cover;
}

/* With the film covering, `--film-x` goes negative — the picture is
   wider than the stage — and the panel's width formula
   `film-x + film-w * 0.17` collapses to about 22px. There is also no
   letterbox left to move into. So the panel takes the full column at
   the foot, as it does in a deep band, and brings its own scrim. */
.mind__stage.is-reel .mind__end {
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline: var(--gutter);
  inline-size: auto;
}

.mind__stage.is-reel .mind__acts {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* The cue and the end panel now sit on the picture rather than in
   black. One grade at the foot carries both; it clears well before
   the middle, so the figure and the question marks are untouched. */
.mind__stage.is-reel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 46%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0.66) 26%,
    rgba(0, 0, 0, 0.28) 58%,
    rgba(0, 0, 0, 0) 100%
  );
}

.mind__stage.is-reel .mind__cue {
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline: var(--gutter);
  inline-size: auto;
  align-items: center;
  text-align: center;
}

/* ---------- debug (?experience=mind&debugMedia=1) ---------- */
.mind-debug {
  position: fixed;
  z-index: 300;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mind__poster { transition: none; }
  .mind__end { animation: none; opacity: 1; transform: none; }
  .mind__load i { animation: none; inline-size: 100%; opacity: 0.4; }
}

/* The reduced-motion door to the Mind. Hidden entirely while the film
   is scrubbing, because there the statue itself is the link. */
.chapter__quiet-link { display: none; }

.reduce-motion .chapter__quiet-link {
  display: block;
  margin-block-start: var(--space-4, 26px);
}

.reduce-motion .chapter__quiet-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid rgba(242, 201, 76, 0.5);
}

.reduce-motion .chapter__quiet-link a:hover { color: var(--gold); }


/* ============================================================
   44. POINTER

   The system cursor is left alone almost everywhere. It is replaced
   by a thin trailing ring with one small gold dot only over things
   worth looking at — the sculpture's portals, and images.

   The dot is 5px and the ring is an outline that is never filled.
   That restraint is the whole design: the golden sphere in the film
   is the only solid gold circle on this site, and nothing may read
   as a second one, which is why the ring's border warms but the ring
   itself never fills.
   ============================================================ */
.cursor {
  position: fixed;
  z-index: 400;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms var(--ease-premium);
}

.cursor.is-on { opacity: 1; }

.cursor__ring,
.cursor__dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.cursor__ring {
  inline-size: 30px;
  block-size: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  transition: inline-size 220ms var(--ease-premium),
              block-size 220ms var(--ease-premium),
              margin 220ms var(--ease-premium),
              border-color 220ms var(--ease-premium);
}

.cursor__dot {
  inline-size: 5px;
  block-size: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold);
  transition: inline-size 220ms var(--ease-premium),
              block-size 220ms var(--ease-premium),
              margin 220ms var(--ease-premium);
}

/* On the sculpture's portals the ring opens and thins away, so the
   artwork underneath is never competing with a ring drawn over it. */
.cursor.is-portal .cursor__ring {
  inline-size: 52px;
  block-size: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(242, 201, 76, 0.42);
}

.cursor.is-down .cursor__ring {
  inline-size: 22px;
  block-size: 22px;
  margin: -11px 0 0 -11px;
  border-color: rgba(242, 201, 76, 0.9);
}

.cursor.is-down .cursor__dot {
  inline-size: 7px;
  block-size: 7px;
  margin: -3.5px 0 0 -3.5px;
}

/* The system cursor is hidden only while the ring is actually
   standing in for it, and only over the element it is standing on. */
.has-dot-cursor img,
.has-dot-cursor picture,
.has-dot-cursor figure,
.has-dot-cursor .hotspot,
.has-dot-cursor .mind__video,
.has-dot-cursor .dx__video { cursor: none; }

/* Full-bleed scenery is not an object. */
.has-dot-cursor .story-still,
.has-dot-cursor .dx__still,
.has-dot-cursor .phero__still,
.has-dot-cursor .mind__poster,
.has-dot-cursor .story-video { cursor: auto; }

/* Coarse pointers never get it, whatever the script decided. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  .has-dot-cursor img,
  .has-dot-cursor picture,
  .has-dot-cursor figure,
  .has-dot-cursor .hotspot,
  .has-dot-cursor .mind__video,
  .has-dot-cursor .dx__video { cursor: auto; }
}


/* ============================================================
   45. TOUCH SIZING

   Everything a finger has to hit is at least 44px, and no label
   drops below ~11.5px on a phone.

   Scoped to coarse pointers and small screens so the desktop
   composition — where these labels are deliberately fine and the
   cursor is precise — is left exactly as designed.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {

  /* ---------- targets ---------- */
  .brand {
    display: flex;
    align-items: center;
    min-block-size: 44px;
  }

  .btn { min-block-size: 44px; }

  .xheader__back {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The footer's link columns are the densest tap area on the site.
     Padding rather than a taller line, so the type and its gold
     underline keep their proportions; the gold rule is re-anchored to
     the text rather than to the new box. */
  .footer-col__list { gap: 2px; }

  .footer-col__list a {
    display: block;
    padding-block: 12px;
  }

  .footer-col__list a::before { inset-block-end: 10px; }

  .legal-bar a,
  .xfooter a,
  .contact-card a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }

  /* ---------- label type ----------
     These are all letter-spaced uppercase micro-labels. They are meant
     to be small; below about 11px on a phone they stop being small and
     start being unreadable. */
  .eyebrow,
  .psec__label,
  .footer-col__title,
  .story-loader__label,
  .scroll-hint__label,
  .hotspot-hint,
  .hotspot-label,
  .dx__cue,
  .mind__end-label,
  .mind__act,
  .mind__enter { font-size: 0.72rem; }

  /* Narrow phones lose the letter-spacing budget before they lose the
     type size, so the tracking gives way first. */
  @media (max-width: 380px) {
    .eyebrow,
    .psec__label,
    .footer-col__title { letter-spacing: 0.12em; }
    .mind__act { letter-spacing: 0.1em; }
  }
}


/* The Mind under reduced motion: the scroll length collapses, the film
   is replaced by its strongest frame, and the way onward is already
   there. Nothing scrubs and nothing moves. */
.mind-reduced .mind {
  height: auto;
  min-block-size: 100svh;
}

.mind-reduced .mind__stage {
  position: relative;
  block-size: 100svh;
}

.mind-reduced .mind__video,
.mind-reduced .mind__bar,
.mind-reduced .mind__cue,
.mind-reduced .mind__load { display: none; }

.mind-reduced .mind__poster { opacity: 1; }


/* ============================================================
   46. RIGHT-TO-LEFT AND ARABIC SCRIPT

   The stylesheet is written in logical properties throughout — there
   is not one physical left or right in it — so the document mirrors
   on its own. What follows is only the handful of things logic
   cannot mirror: glyphs that point, fills that grow from an edge,
   and the layers whose positions JavaScript computes in physical
   pixels off a film.
   ============================================================ */

/* Arabic script is set in Base Meridion Kurdish, declared above under
   the same family name and selected by unicode-range. These are only
   the fallbacks for a reader whose browser refuses the webfont. */
:root {
  --font-arabic: "Base Meridion", "Segoe UI", "Noto Sans Arabic",
                 "Noto Naskh Arabic", "Geeza Pro", "Al Nile",
                 "Droid Arabic Naskh", "Tahoma", sans-serif;
}

[lang="ar"],
[lang="ckb"],
html[dir="rtl"] body {
  font-family: var(--font-arabic);
  /* Arabic and Kurdish sit lower and need more room between lines than
     the Latin cut is set for. */
  line-height: 1.75;
}

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .psec__label,
html[dir="rtl"] .footer-col__title,
html[dir="rtl"] .mind__end-label,
html[dir="rtl"] .mind__act,
html[dir="rtl"] .mind__cue,
html[dir="rtl"] .hotspot-label,
html[dir="rtl"] .hotspot-hint,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav__link {
  /* Arabic script has no case and letter-spacing damages its joins. */
  text-transform: none;
  letter-spacing: 0;
}

/* Numerals inside an Arabic-script line. */
html[dir="rtl"] .index__num,
html[dir="rtl"] .mega__num,
html[dir="rtl"] .dcard__num,
html[dir="rtl"] .process__num {
  font-feature-settings: "tnum" 1;
}

/* ---- fills that grow from an edge ---- */
[dir="rtl"] .mind__bar i,
[dir="rtl"] .footer-col__list a::before { transform-origin: 100% 50%; }

/* ---- layers positioned by script in physical pixels ----
   measureVideoRect() and measureFilm() resolve where the film lands as
   an offset from the stage's physical left edge, then the hotspots and
   labels are placed with a transform. Anchoring those to the inline
   start would mirror them away from the sculpture they are tracking. */
[dir="rtl"] .hotspot,
[dir="rtl"] .hotspot-label,
[dir="rtl"] .dx__track {
  inset-inline-start: auto;
  left: 0;
}

/* Pinning the track's box was not enough. `.dx__track` is a flex row of
   ten full-width chapters, and render() slides it with a *negative
   physical* translate -- `-dpos * stage.clientWidth`. Under dir="rtl"
   the flex main axis runs right-to-left, so chapters 1-9 stack off the
   left edge and that same negative translate pushes them further out:
   division 01 shows and the other nine never arrive. The axis has to
   stay physical for the script's arithmetic to mean anything, so the
   track is forced back to ltr and each chapter takes its own direction
   back for its own type. */
[dir="rtl"] .dx__track { direction: ltr; }
[dir="rtl"] .dx-ch { direction: rtl; }

/* The pointer ring is placed from viewport coordinates. */
[dir="rtl"] .cursor__ring,
[dir="rtl"] .cursor__dot {
  inset-inline-start: auto;
  left: 0;
}

/* The arrow in a link that opens elsewhere should point the way the
   language reads. */
[dir="rtl"] .mind__act i,
[dir="rtl"] .hotspot-label__arrow { transform: scaleX(-1) rotate(-45deg); }

[dir="rtl"] .xheader__back-arrow::after { transform: rotate(-135deg); }