*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body { min-height: 100vh; }

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

button, input { font: inherit; color: inherit; background: none; border: 0; }

button { cursor: pointer; }

ul { list-style: none; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-size: inherit; font-weight: inherit; text-wrap: balance; }

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}
:root {
  /* ---- colour: four values, nothing else ---- */
  --white:  #ffffff;
  --navy:   #1f1459;
  --orange: #ff8f1d;
  --pink:   #e32275;

  /* ---- typeface: one family ---- */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- type scale ---- */
  --fs-mark:    clamp(4rem, 18.5vw, 21rem);
  --fs-display: clamp(2.9rem, 10.5vw, 11rem);
  --fs-sub:     clamp(2.4rem, 8vw, 8.5rem);
  --fs-row:     clamp(1.9rem, 5.2vw, 4.6rem);
  --fs-state:   clamp(1.85rem, 5.2vw, 5.8rem);
  --fs-body:    clamp(1rem, 0.86rem + 0.5vw, 1.3rem);
  --fs-small:   clamp(0.9rem, 0.82rem + 0.3vw, 1.05rem);
  --fs-label:   clamp(0.66rem, 0.62rem + 0.16vw, 0.78rem);

  /* ---- type behaviour ---- */
  --track-display: -0.055em;
  --track-sub:     -0.04em;
  --track-label:    0.17em;
  --lh-display:     0.855;
  --lh-body:        1.55;

  /* ---- rhythm ---- */
  --gutter:    clamp(1.35rem, 5vw, 6.5rem);
  --measure:   44ch;
  --pad-y:     clamp(7rem, 15vw, 17rem);
  --pad-y-lg:  clamp(9rem, 20vw, 24rem);
  --hair:      rgba(31, 20, 89, 0.16);
  --hair-on-navy: rgba(255, 255, 255, 0.2);

  /* ---- dimming ----
     Muted text is navy or white at reduced opacity rather than a fifth colour.
     These are the lowest values that still clear WCAG AA (4.5:1) for the small
     uppercase labels they are used on. Measured, not guessed:
       navy  @ 0.65 on white -> 5.3:1   (0.60 lands at 4.5 and misses)
       white @ 0.50 on navy  -> 5.0:1   (0.45 lands at 4.3 and misses)
     Do not lower these without re-measuring. */
  --dim-on-white: 0.65;
  --dim-on-navy:  0.5;

  /* Resting state of a word the read-along reveal has not reached yet. Low
     enough that the lit words clearly lead, high enough that the rest of the
     sentence is still legible if the reader stops mid-scroll. */
  --word-dim: 0.17;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.62s;
}
html {
  scroll-behavior: auto;
  background: var(--white);
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--navy);
  background: var(--white);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- primitives ---------- */

.pink { color: var(--pink); }

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
}

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

.skip {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  padding: 1rem 1.4rem;
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translateY(-110%);
  transition: transform 0.24s var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ---------- shared section frame ---------- */

section {
  position: relative;
  padding-inline: var(--gutter);
}

/* mask-reveal unit used by the text splitter and the hero.

   A mask is only as wide as its glyph's advance, and negative tracking shrinks
   that further — so at display sizes the overflow shaves the ink off the right
   of nearly every letter. The inline padding widens the window without moving
   anything: the negative margin gives the space straight back to layout. */
.ch, .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-inline: 0.09em;
  margin-inline: -0.09em;
}
.ch > i, .word > span {
  display: inline-block;
  font-style: normal;
  will-change: transform;
}

/* Descenders would otherwise be eaten by the mask's overflow. Word spacing
   comes from real space characters between masks, not from margin. */
.word {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* Pre-animation state. Removed wholesale under reduced motion. */
.js .ch > i,
.js .word > span { transform: translateY(110%); }
.js [data-fade],
.js [data-fade-row] { opacity: 0; }

/* Flow words take the same masked lift as every other word, but they rise into
   a dim state rather than a solid one — the lift puts them on the page, and a
   second pass lights them as the reader arrives. They are never fully hidden
   after that: the statement is a paragraph, so a reader who stops mid-scroll
   must still be able to read the part they have not reached. */
.js .word--flow > span { opacity: var(--word-dim); }

@media (prefers-reduced-motion: reduce) {
  .js .ch > i,
  .js .word > span { transform: none !important; }
  .js .word--flow > span { opacity: 1 !important; }
  .js [data-fade],
  .js [data-fade-row] { opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* ============================ NAV ============================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) var(--gutter);
  mix-blend-mode: normal;
  transition: color 0.45s var(--ease);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav--light { color: var(--white); }

/* Tracking and line-height match the hero wordmark rather than sitting where
   they look best alone: the hero mark flies into this slot and swaps with it,
   and the swap is only invisible if the two are identical up to scale. */
.nav__mark {
  /* Set explicitly rather than inherited from .nav, so the mark stays the logo
     when the nav flips light over the navy fields — and, more importantly, so
     it is pixel-identical to the hero mark it swaps with mid-flight. */
  color: var(--orange);
  font-size: calc(var(--fs-small) * 2);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 0.8;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
/* The static path: no morph, so the mark just fades in with the nav. */
.nav--revealed .nav__mark { opacity: 1; transform: none; }

/* The morph path: the scrub owns this mark's opacity outright, and the reveal
   would only fight it. */
.nav--handoff .nav__mark { transform: none; transition: none; }

/* A page with no hero has no wordmark of its own, so the nav carries it from
   first paint. Written as :has() rather than a JS class for two reasons: it
   holds with JavaScript disabled, where nothing would ever add the class, and
   it re-evaluates by itself when the router swaps a hero page in or out. */
:root:not(:has(.hero)) .nav__mark { opacity: 1; transform: none; }

.nav__list {
  position: relative;
  display: flex;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
  align-items: center;
}

.nav__link {
  position: relative;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding-block: 0.4rem;
  transition: letter-spacing 0.4s var(--ease), opacity 0.4s var(--ease);
  opacity: var(--dim-on-white);
}
.nav__link:hover { opacity: 1; letter-spacing: calc(var(--track-label) + 0.05em); }
.nav__link[data-active] { opacity: 1; }

/* the pink dot that marks the active section */
.nav__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px; height: 5px;
  margin-top: -0.95rem;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.35s var(--ease);
}
.nav__dot[data-on] { opacity: 1; }

/* Below this the wordmark and four links cannot share a line. The hero already
   carries the wordmark, so the links win the space. */
@media (max-width: 760px) {
  .nav { justify-content: flex-end; }
  .nav__mark { display: none; }

  /* Except where the hero is not there to carry it. The toggle is a single
     word, so the mark and it share the line comfortably at 390px. */
  :root:not(:has(.hero)) .nav { justify-content: space-between; }
  :root:not(:has(.hero)) .nav__mark { display: block; }
  .nav__list { gap: clamp(0.7rem, 3.4vw, 1.4rem); }
  .nav__link { letter-spacing: 0.09em; font-size: 0.62rem; }
  .nav__dot { margin-top: -0.8rem; width: 4px; height: 4px; }
}

/* ========================== CURSOR ========================== */

/* A lagging ring. The native cursor stays visible on purpose: hiding it
   costs more in usability than it returns in atmosphere. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition:
    opacity 0.3s var(--ease),
    width 0.34s var(--ease),
    height 0.34s var(--ease),
    margin 0.34s var(--ease),
    border-color 0.34s var(--ease),
    background-color 0.34s var(--ease);
}
.cursor[data-on] { opacity: 0.5; }
.cursor[data-light] { border-color: var(--white); }

.cursor[data-hot] {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--pink);
  background: rgba(227, 34, 117, 0.07);
  opacity: 1;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}

/* ========================== ROUTER ========================== */

/* The field that crosses the viewport between pages. Transform-only, so it
   never triggers layout while a fetch is in flight. */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

.wipe[data-busy] { pointer-events: auto; }

/* ======================= MOBILE MENU ======================= */

.nav__toggle {
  display: none;
  align-items: center;
  /* 44px floor on both axes. The label is ~13px tall, so without this the
     button lands around 29px and fails the tap-target audit. */
  min-height: 44px;
  min-width: 44px;
  justify-content: flex-end;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  padding: var(--gutter);
  background: var(--navy);
}

.menu[hidden] { display: none; }

.menu__list {
  display: flex;
  flex-direction: column;
}

/* The padding carries the rhythm rather than a gap, so the spacing between
   rows is also the tap target. Text is ~32px; this brings each row past 44. */
.menu__link {
  display: block;
  padding-block: 0.42rem;
  color: var(--white);
  font-size: var(--fs-row);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.04;
}

/* Orange reaches 7.2:1 here, which is why it is allowed on this field and
   nowhere on white below display scale. */
.menu__link[aria-current="page"] { color: var(--orange); }

@media (max-width: 760px) {
  .nav__list { display: none; }
  .nav__toggle { display: flex; }
}

@media (min-width: 761px) {
  .menu { display: none; }
}
/* =========================================================
   ABOUT SUBMENU — DESKTOP + MOBILE
   ========================================================= */

/* Desktop */
.nav__group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 170px;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid rgba(39, 27, 105, 0.12);
  box-shadow: 0 12px 28px rgba(39, 27, 105, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 1200;
}

.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sublink {
  display: block;
  padding: 10px 16px;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav__sublink:hover {
  color: var(--pink);
  background: rgba(239, 63, 120, 0.04);
}


/* Mobile */
.menu__sublist {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px 20px;
  margin-top: -2px;
}

.menu__sublink {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.menu__sublink:hover {
  color: var(--orange);
}


/* Desktop only */
@media (min-width: 761px) {
  .nav__group {
    height: 100%;
  }
}


/* Mobile only */
@media (max-width: 760px) {
  .nav__submenu {
    display: none;
  }
}
/* =========================================================
   ABOUT SUBMENU — DESKTOP + MOBILE
   ========================================================= */

/* Desktop */
.nav__group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 170px;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid rgba(39, 27, 105, 0.12);
  box-shadow: 0 12px 28px rgba(39, 27, 105, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 1200;
}

.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sublink {
  display: block;
  padding: 10px 16px;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav__sublink:hover {
  color: var(--pink);
  background: rgba(239, 63, 120, 0.04);
}


/* Mobile */
.menu__sublist {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px 20px;
  margin-top: -2px;
}

.menu__sublink {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.menu__sublink:hover {
  color: var(--orange);
}


/* Desktop only */
@media (min-width: 761px) {
  .nav__group {
    height: 100%;
  }
}


/* Mobile only */
@media (max-width: 760px) {
  .nav__submenu {
    display: none;
  }
}
/* ========================= 00 · HERO ========================= */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(1.6rem, 4vh, 3rem);
}

.hero__mark {
  align-self: center;
  font-size: var(--fs-mark);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 0.8;
  /* The logo as the brand actually draws it: orange field, pink dot, pink `i`.
     This overrides the earlier navy decision, which traded fidelity for the
     4.5:1 orange-on-white miss. It survives here on the display-scale exemption
     — the mark is a logo at 21rem, and the h1 carries its own aria-label, so
     nothing is read off the colour. */
  color: var(--orange);
  white-space: nowrap;

  /* It travels out of the hero and over the manifesto, so it needs to sit above
     later sections but below the nav. Transforms move hit-testing with them:
     without pointer-events it would land on top of the nav link it hands over
     to and swallow the clicks. */
  position: relative;
  z-index: 5;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.hero__mark .ch {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero__mark .ch--dot > i,
.hero__mark .ch--i > i { color: var(--pink); }

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--hair);
  padding-top: clamp(1rem, 2vw, 1.6rem);
}

.hero__line {
  font-size: var(--fs-small);
  max-width: 32ch;
  opacity: 0.7;
}

.hero__cue {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: var(--dim-on-white);
  white-space: nowrap;
}
.hero__cue-rule {
  display: block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(0.3); opacity: 0.4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

@media (max-width: 640px) {
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

/* ======================= 01 · MANIFESTO ====================== */

.manifesto {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--pad-y);
}

/* A statement, not a headline. It keeps the weight of display type but takes a
   line-height it can be read at, because there are now forty words here rather
   than three.

   It runs the full grid measure, gutter to gutter. Because the size is set in
   vw and the column is too, the line stays around 35 characters at every width
   — the block keeps its proportions instead of reflowing into a different
   shape on every screen. The ch cap only engages past ~2000px, where the
   column would otherwise outrun any sane measure. */
.manifesto__type {
  font-size: var(--fs-state);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 40ch;
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* ======================== 02 · STRANDS ======================= */

.strands { padding-block: var(--pad-y); }

.strands__label { margin-bottom: clamp(3rem, 8vw, 7rem); opacity: var(--dim-on-white); }

/* The hairlines draw themselves in on scroll. They are pseudo-elements scaled
   by a custom property so GSAP can drive them; a real border cannot be scaled.
   With motion reduced the `js` class is absent, so --line stays at 1 and every
   rule is simply present. */
.strand {
  position: relative;
  --line: 1;
}
.strand::before,
.strand:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(var(--line));
  transform-origin: left;
}
.strand::before { top: 0; }
.strand:last-child::after { bottom: 0; }

.js .strand { --line: 0; }

.strand__head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 3rem);
  width: 100%;
  text-align: left;
  padding-block: clamp(1.3rem, 3.2vw, 2.6rem);
  color: inherit;
}

.strand__num {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
  opacity: var(--dim-on-white);
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
  align-self: start;
  padding-top: 0.55em;
}

.strand__name {
  font-size: var(--fs-row);
  font-weight: 500;
  letter-spacing: var(--track-sub);
  line-height: 1;
  transition: transform 0.55s var(--ease);
}

.strand__rule {
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease), background-color 0.4s var(--ease);
}

.strand__sign {
  position: relative;
  width: 13px; height: 13px;
  flex: none;
}
.strand__sign::before,
.strand__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  opacity: var(--dim-on-white);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.strand__sign::after { transform: rotate(90deg); }

.strand__body { overflow: hidden; height: 0; }
.strand__body p {
  max-width: var(--measure);
  padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem);
  padding-left: calc(var(--fs-label) + clamp(0.9rem, 3vw, 3rem));
  opacity: 0.72;
  font-size: var(--fs-small);
}

/* hover / open states */
@media (hover: hover) {
  .strand__head:hover .strand__rule { transform: scaleX(1); }
  .strand__head:hover .strand__num  { color: var(--orange); opacity: 1; }
  .strand__head:hover .strand__name { transform: translateX(clamp(4px, 0.9vw, 14px)); }
  .strand__head:hover .strand__sign::before,
  .strand__head:hover .strand__sign::after { opacity: 1; }
}
.strand__head[aria-expanded="true"] .strand__rule { transform: scaleX(1); background: var(--orange); }
.strand__head[aria-expanded="true"] .strand__num  { color: var(--orange); opacity: 1; }
.strand__head[aria-expanded="true"] .strand__sign::after { transform: rotate(0deg); }

@media (max-width: 620px) {
  .strand__head { grid-template-columns: auto 1fr auto; }
  .strand__rule { display: none; }
}

/* ======================== 03 · NETWORK ======================= */

.network {
  position: relative;
  min-height: 100svh;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.network__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.3rem;
  max-width: min(34rem, 100%);
  margin-top: clamp(4rem, 9vh, 7rem);
}

.network__label {
  position: relative;
  z-index: 2;
  opacity: var(--dim-on-navy);
  margin: 0;
}

.network__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.network__readout {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  pointer-events: auto;
  text-decoration: none;
  opacity: 0;
  white-space: nowrap;
  /* Vertical placement is computed in JS so the panel can flip below the node
     when sitting above it would collide with the fixed nav. The few pixels of
     lift are the only part of the movement CSS owns — enough that the panel
     resolves out of the field rather than switching on over it. */
  transform: translate(-50%, 7px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  will-change: transform;
}
.network__readout[data-on] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Duotone: the frame is navy, the image is desaturated and screened over it,
   so blacks land on navy and whites stay white. That keeps the photography
   inside the three-colour system and, at this scale, makes documentary frames
   of uneven quality read as deliberate rather than as weak photographs. */
.network__thumb {
  position: relative;
  isolation: isolate;
  width: clamp(148px, 14vw, 216px);
  aspect-ratio: 3 / 2;
  margin-bottom: 0.95em;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(255, 143, 29, 0.42);
  opacity: 0;
  /* The frame opens as the panel arrives. Gated on data-on rather than on
     data-has, which is set once and never changes while a member is named —
     the image should answer the hover, not the presence of a file. */
  transform: scale(0.93);
  transform-origin: 50% 100%;
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
}
.network__readout[data-on] .network__thumb[data-has] {
  opacity: 1;
  transform: none;
}

.network__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Square headshots cropped to a 3:2 frame lose the top of the head on a
     centre crop, so the window is biased upward. Near-neutral for the
     landscape event frames. */
  object-position: center 34%;
  filter: grayscale(1) contrast(1.14);
  mix-blend-mode: screen;
  opacity: 0;
  /* Asymmetric on purpose. Screened portraits crossfading at equal rates sum
     to a bright flare through the middle of the swap, so the outgoing frame
     clears faster than the incoming one arrives and the pass dips instead. */
  transition: opacity 0.24s var(--ease);
}
.network__thumb img[data-on] {
  opacity: 0.94;
  transition-duration: 0.52s;
}

.network__who {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--orange);
}

.network__where {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.58;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  text-transform: none;
}

.network .join__submit {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 0.1rem;
}

.network__support {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 30rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}

.network__support-title {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--white);
}

.network__support-copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
  opacity: 0.8;
}

.network__support-link {
  width: fit-content;
  padding-inline: 1rem;
  margin-top: 0.1rem;
}

/* ======================= 04 · CREAPOLIS ====================== */

.creapolis {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--pad-y-lg);
}

.creapolis__label { opacity: var(--dim-on-navy); margin-bottom: clamp(2.4rem, 6vw, 5rem); }

.creapolis__type {
  font-size: var(--fs-sub);
  font-weight: 500;
  letter-spacing: var(--track-sub);
  line-height: 1.02;
}
.creapolis__row { display: block; }
.creapolis__row em {
  font-style: normal;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

section[data-section="stay-connected"] .creapolis__type {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.08;
}

section[data-section="stay-connected"] .creapolis__row:first-child {
  font-size: 1.1em;
  margin-bottom: 0.35em;
}

section[data-section="stay-connected"] .creapolis__row:last-child {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  max-width: 38rem;
  opacity: 0.9;
}

.creapolis__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(3.5rem, 9vw, 8rem);
  padding-top: clamp(1.2rem, 2.4vw, 2rem);
  border-top: 1px solid var(--hair-on-navy);
}

.creapolis__body {
  max-width: var(--measure);
  font-size: var(--fs-small);
  opacity: 0.72;
}

.creapolis__meta {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}

/* ====================== 05 · MEMBERSHIP ====================== */

.member { padding-block: var(--pad-y); }

.member__label { opacity: var(--dim-on-white); margin-bottom: clamp(2.2rem, 5vw, 4rem); }

.member__type {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  max-width: 15ch;
  margin-bottom: clamp(4rem, 10vw, 9rem);
}
.member__list {
  display: grid;
  gap: 0;
  max-width: 62ch;
  margin-left: auto;
}

.member__item {
  position: relative;
  --line: 1;
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding-block: clamp(1rem, 2.2vw, 1.6rem);
  font-size: var(--fs-small);
  transition: color 0.4s var(--ease);
}
.member__item::before,
.member__item:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(var(--line));
  transform-origin: left;
}
.member__item::before { top: 0; }
.member__item:last-child::after { bottom: 0; }

.js .member__item { --line: 0; }

.member__arrow {
  color: var(--pink);
  flex: none;
  transition: transform 0.5s var(--ease);
}

@media (hover: hover) {
  .member__item:hover .member__arrow { transform: translateX(0.5rem); }
}

/* ========================= 06 · JOIN ========================= */

.join {
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--pad-y);
}

.join__type {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  max-width: 13ch;
  margin-bottom: clamp(3rem, 8vw, 6rem);
}
.join__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 46rem;
}

.join__input {
  flex: 1;
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  padding-block: 0.7em 0.55em;
  color: var(--navy);
}
.join__input::placeholder { color: var(--navy); opacity: var(--dim-on-white); }
.join__input:focus { outline: none; }

.join__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair);
}
.join__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.join__form:focus-within .join__rule::after { transform: scaleX(1); }

.join__submit {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color 0.4s var(--ease);
}
.join__submit:hover { background: rgba(227, 34, 117, 0.09); }

/* the dot, returned from the hero */
.join__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform 0.45s var(--ease);
}
.join__submit:hover .join__dot { transform: scale(1.35); }

.join__note {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--pink);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.join__note[data-on] { opacity: 1; }

/* ======================== 07 · FOOTER ======================== */

.foot {
  background: var(--navy);
  color: var(--white);
  padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(1.6rem, 3vw, 2.6rem);
}

.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.foot__col .label { opacity: var(--dim-on-navy); margin-bottom: 0.9rem; }

.foot__text,
.foot__link {
  font-size: var(--fs-small);
  display: inline-block;
}

.foot__link {
  position: relative;
  padding-bottom: 2px;
}
.foot__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.foot__link:hover::after { transform: scaleX(1); transform-origin: left; }

.foot__base {
  border-top: 1px solid var(--hair-on-navy);
  padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: var(--dim-on-navy);
}

/* ======================= PAGE HEAD ======================= */

.page-head {
  padding: var(--pad-y-lg) var(--gutter) var(--pad-y);
}

/* Runs the full grid measure, gutter to gutter, on the manifesto's logic: the
   size is set in vw and so is the column, so the block keeps its proportions
   at every width instead of reflowing into a different shape. The ch cap only
   engages past ~2000px, where the column would outrun any sane measure. */
.page-head__type {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  max-width: 22ch;
  margin-top: 1.6rem;
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* ========================= CREED ========================= */

.creed {
  padding: 0 var(--gutter) var(--pad-y);
  display: grid;
  gap: 1.1rem;
}

.creed__line {
  font-size: var(--fs-state);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 40ch;
  text-wrap: pretty;
  hanging-punctuation: first last;
}

/* ====================== GOVERNANCE ====================== */

.gov {
  padding: var(--pad-y) var(--gutter);
  border-top: 1px solid var(--hair);
}

.gov__label { margin-bottom: clamp(3rem, 8vw, 6rem); }

/* Containing block for the portrait panel, which is placed against this box
   rather than the viewport so it holds still while the page scrolls. */
.gov__armature { position: relative; display: grid; gap: clamp(3rem, 7vw, 6rem); }

.gov__tier { position: relative; padding-top: 1.6rem; }

/* The armature itself. scaleX is driven from governance.js. */
.gov__rule {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--navy);
  opacity: 0.28;
  transform-origin: left center;
}

.gov__name {
  font-size: var(--fs-sub);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1;
}

.gov__count {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  vertical-align: super;
  opacity: var(--dim-on-white);
}

.gov__note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  margin-top: 1rem;
  opacity: var(--dim-on-white);
}

.gov__roster {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.55rem 2rem;
  font-size: var(--fs-small);
}

.gov__roster--roles li { display: grid; gap: 0.15rem; }
.gov__roster--roles span {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: var(--dim-on-white);
}

/* ========================= FACTS ========================= */

.facts {
  padding: var(--pad-y) var(--gutter) var(--pad-y-lg);
  border-top: 1px solid var(--hair);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.4rem;
}

.facts__grid dd { font-size: var(--fs-body); margin-top: 0.7rem; }

/* Hovering a name raises that portrait. Navy frame, desaturated and screened
   over it, so blacks land on navy and whites stay white: the same duotone the
   network canvas uses, so the two reveals read as one device. */
.gov__roster li[data-portrait] { cursor: default; transition: opacity 0.3s var(--ease); }

.portrait {
  position: absolute;
  z-index: 5;
  width: 168px;
  height: 210px;
  margin-top: -105px;
  padding: 1px;
  background: var(--navy);
  border-top: 1px solid var(--orange);
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity 0.34s var(--ease), transform 0.44s var(--ease);
}

.portrait[data-on] { opacity: 1; transform: translateY(0); }

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: screen;
}

/* No hover, no panel. Touch gets the names, which is the substance anyway. */
@media (hover: none) {
  .portrait { display: none; }
}

/* ======================== EDITIONS ======================== */

.editions { padding: var(--pad-y) var(--gutter); border-top: 1px solid var(--hair); }
.editions__label { margin-bottom: clamp(3rem, 8vw, 6rem); }

.edition { position: relative; padding-top: 1.6rem; }
.edition + .edition { margin-top: clamp(4rem, 9vw, 8rem); }

.edition__rule {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--navy);
  opacity: 0.28;
  transform-origin: left center;
}

.edition__state {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: var(--dim-on-white);
  margin-bottom: 1.1rem;
}

.edition__type {
  font-size: var(--fs-sub);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.edition__type em { font-style: normal; font-weight: 500; opacity: var(--dim-on-white); }

.edition__note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  margin-top: 1.2rem;
  opacity: var(--dim-on-white);
}

.edition__facts {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.8rem;
}
.edition__facts dd { font-size: var(--fs-small); margin-top: 0.6rem; }

/* ====================== ELIGIBILITY ====================== */

/* One slot, swapped through. The visible word is aria-hidden and the full list
   sits in a visually-hidden span beside it, so assistive tech gets every
   category at once rather than whichever one the scroll happens to be on. */
.slot {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  color: var(--pink);
  overflow: hidden;
  transition: width 0.5s var(--ease);
}
.slot__word { display: inline-block; white-space: nowrap; }

.gains { padding: var(--pad-y) var(--gutter); border-top: 1px solid var(--hair); }
.gains__label { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.gains__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 2rem);
  font-size: var(--fs-row);
  font-weight: 500;
  letter-spacing: var(--track-sub);
  line-height: 1.1;
  padding-block: clamp(0.8rem, 1.8vw, 1.4rem);
  border-bottom: 1px solid var(--hair);
}
.gains__item .member__arrow { transition: transform 0.45s var(--ease); flex: none; }
@media (hover: hover) {
  .gains__item:hover .member__arrow { transform: translateX(clamp(4px, 1vw, 14px)); color: var(--orange); }
}

.apply { padding: var(--pad-y) var(--gutter) var(--pad-y-lg); border-top: 1px solid var(--hair); }
.apply__type {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}
.apply__note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  margin-top: 1.6rem;
  opacity: var(--dim-on-white);
}
.apply__link {
  display: inline-block;
  margin-top: 2rem;
  font-size: var(--fs-row);
  font-weight: 500;
  letter-spacing: var(--track-sub);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.15em;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.apply__link:hover { color: var(--pink); border-color: var(--pink); }

/* ========================= INDEX ========================= */

.index { position: relative; padding: var(--pad-y) var(--gutter) var(--pad-y-lg); border-top: 1px solid var(--hair); }
.index__label { margin-bottom: 2rem; }
.index__list { margin-bottom: clamp(3.5rem, 8vw, 6rem); }

.entry { border-top: 1px solid var(--hair); }
.entry:last-child { border-bottom: 1px solid var(--hair); }

.entry__link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: clamp(0.8rem, 2.4vw, 2.4rem);
  padding-block: clamp(1rem, 2.4vw, 1.8rem);
  color: inherit;
}

.entry__who {
  font-size: var(--fs-row);
  font-weight: 500;
  letter-spacing: var(--track-sub);
  line-height: 1.08;
  transition: transform 0.5s var(--ease);
}
.entry__org {
  font-size: var(--fs-small);
  opacity: var(--dim-on-white);
  text-align: right;
}
.entry__go { font-size: var(--fs-small); opacity: var(--dim-on-white); transition: color 0.35s var(--ease), opacity 0.35s var(--ease); }

@media (hover: hover) {
  .entry__link:hover .entry__who { transform: translateX(clamp(4px, 1vw, 14px)); }
  .entry__link:hover .entry__go { color: var(--orange); opacity: 1; }
}

.index__more { font-size: var(--fs-small); opacity: var(--dim-on-white); max-width: var(--measure); }
.index__out { border-bottom: 1px solid var(--hair); }
.index__out:hover { color: var(--pink); border-color: var(--pink); }

@media (max-width: 620px) {
  .entry__link { grid-template-columns: 1fr auto; }
  .entry__org { grid-column: 1 / -1; text-align: left; margin-top: 0.4rem; }
}

/* ---------- Governance Introduction ---------- */

.governance-intro {
    padding-top: 170px;
    padding-bottom: 90px;
}

.governance-intro__title {
    margin: 0 0 40px;
    font-size: clamp(70px, 8vw, 130px);
    line-height: .9;
    letter-spacing: -0.05em;
}

.governance-intro__copy {
    max-width: 760px;
}

.governance-intro__copy p {
    margin-bottom: 22px;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 400;
}
#community-main .governance-intro {
  padding-top: 120px;
  padding-bottom: 80px;
}

#community-main .governance-intro + .governance-intro {
  padding-top: 80px;
  border-top: 1px solid var(--hair);
}

#community-main .governance-intro__title {
  margin-bottom: 40px;
}

#community-main .governance-intro__copy p {
  margin-bottom: 22px;
}

.community-cta{
  padding:120px var(--page-pad) 140px;
  text-align:center;
}

.community-cta .governance-intro__title{
  max-width:900px;
  margin:0 auto 50px;
}

.community-cta__actions{
  display:flex;
  justify-content:center;
}

/* ---------- Visions contribution ---------- */

.contribution-head {
  padding: 170px var(--page-pad) 90px;
}

.contribution-head__name {
  margin: 0;
  font-size: clamp(64px, 9vw, 140px);
  line-height: .9;
  letter-spacing: -.05em;
}

.contribution-head__org {
  margin-top: 28px;
  font-size: 20px;
}

.contribution-content {
  padding: 80px var(--page-pad);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
}

.contribution-image img {
  display: block;
  width: 100%;
  height: auto;
}

.contribution-article {
  max-width: 760px;
}

.contribution-article > p {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.7;
}

.contribution-meta {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
  line-height: 1.6;
}

.contribution-back {
  padding: 70px var(--page-pad) 120px;
  border-top: 1px solid var(--hair);
}

@media (max-width: 760px) {

  .contribution-content {
    grid-template-columns: 1fr;
  }

  .contribution-head__name {
    font-size: clamp(54px, 17vw, 90px);
  }

  .contribution-article > p {
    font-size: 16px;
  }

}
/* ---------- Explore editions CTA ---------- */

.community-cta__actions {
  margin-top: 36px;
}

.community-cta__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;

  border: 1px solid var(--pink);
  border-radius: 999px;

  color: var(--pink);
  font-weight: 700;
  text-decoration: none;

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.community-cta__actions .btn::after {
  content: "↗";
  transition: transform .25s ease;
}

.community-cta__actions .btn:hover {
  background: var(--pink);
  color: #fff;
  transform: translateY(-2px);
}

.community-cta__actions .btn:hover::after {
  transform: translate(3px, -3px);
}
/* ---------- VISIONS ARTICLE ---------- */

.visions-article {
  padding: 40px clamp(32px, 5vw, 72px) 90px;
}
/* =========================================================
   GOVERNANCE — subtle b.creative colour refinement
   ========================================================= */

#network-main .governance-intro .label {
  color: #ff4f9a;
}

/* Introductory copy: preserve typography, add a subtle accent */
#network-main .governance-intro__copy {
  position: relative;
}

#network-main .governance-intro__copy::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 28px;
  background: linear-gradient(
    90deg,
    #ff4f9a 0%,
    #ff4f9a 50%,
    #ff8a21 50%,
    #ff8a21 100%
  );
}


/* HOW IT IS GOVERNED */
#network-main .gov__label,
#network-main .gov__eyebrow {
  color: #ff4f9a;
}


/* Small numbers beside Board / Office */
#network-main .gov__count {
  color: #ff4f9a;
  font-weight: 700;
}


/* Alternate the section counters subtly */
#network-main .gov__block:nth-of-type(even) .gov__count {
  color: #ff8a21;
}


/* Office roles */
#network-main .gov__office span {
  color: #ff4f9a;
}

#network-main .gov__office li:nth-child(even) span {
  color: #ff8a21;
}


/* Keep existing dividers but make them slightly more distinctive */
#network-main .gov__block {
  border-color: rgba(40, 27, 105, 0.22);
}


/* Very subtle hover identity — no structural change */
#network-main .gov__office li,
#network-main .gov__board li {
  transition: color 0.2s ease;
}

#network-main .gov__office li:hover,
#network-main .gov__board li:hover {
  color: #ff4f9a;
}
/* =========================================================
   GOVERNANCE — stronger colour accents
   ========================================================= */

/* Subtle colour field in the opening section */
#network-main .governance-intro {
  background:
    linear-gradient(
      135deg,
      rgba(246, 242, 255, 0.85) 0%,
      rgba(255, 255, 255, 1) 62%
    );
}


/* Stronger identity for HOW IT IS GOVERNED */
#network-main .gov__label,
#network-main .gov__eyebrow {
  color: #ff4f9a;
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* Accent on the large governance titles */
#network-main .gov__name {
  position: relative;
}

#network-main .gov__name::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 20px;
  background: linear-gradient(
    90deg,
    #ff4f9a 0%,
    #ff4f9a 50%,
    #ff8a21 50%,
    #ff8a21 100%
  );
}


/* Board / Office numbers become visible badges */
#network-main .gov__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  margin-left: 10px;

  border-radius: 999px;

  background: #ff4f9a;
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  vertical-align: middle;
}


/* Alternate Office count in orange */
#network-main .gov__office .gov__count {
  background: #ff8a21;
}


/* More visible Office roles */
#network-main .gov__office li span {
  color: #ff4f9a;
  font-weight: 700;
}

#network-main .gov__office li:nth-child(even) span {
  color: #ff8a21;
}


/* Board names gain a subtle coloured interaction */
#network-main .gov__board li {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

#network-main .gov__board li:hover {
  color: #ff4f9a;
  transform: translateX(3px);
}


/* Office names use the same interaction */
#network-main .gov__office li {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

#network-main .gov__office li:hover {
  color: #ff8a21;
  transform: translateX(3px);
}
/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.highlights-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(420px, 52%);
  gap: 28px;

  width: 100%;
  padding-bottom: 28px;

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;

  scrollbar-width: none;
}

.highlights-slider::-webkit-scrollbar {
  display: none;
}

.highlight-card {
  position: relative;
  min-height: 470px;

  scroll-snap-align: start;

  border: 1px solid rgba(40, 27, 105, 0.16);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(246, 242, 255, 0.95) 0%,
      rgba(255, 255, 255, 1) 60%,
      rgba(255, 244, 236, 0.75) 100%
    );

  overflow: hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.highlight-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 6px;

  background: linear-gradient(
    90deg,
    #ff4f9a 0%,
    #ff4f9a 52%,
    #ff8a21 52%,
    #ff8a21 100%
  );
}

.highlight-card::after {
  content: "";

  position: absolute;
  right: -90px;
  bottom: -90px;

  width: 220px;
  height: 220px;

  border: 1px solid rgba(255, 79, 154, 0.22);
  border-radius: 50%;

  transition:
    transform 0.5s ease,
    border-color 0.5s ease;
}

.highlight-card:hover {
  transform: translateY(-8px);

  border-color: rgba(255, 79, 154, 0.45);

  box-shadow:
    0 24px 55px rgba(40, 27, 105, 0.10);
}

.highlight-card:hover::after {
  transform: scale(1.18);

  border-color: rgba(255, 138, 33, 0.5);
}

.highlight-card__link {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  height: 100%;
  min-height: 470px;

  padding: 36px 38px 36px;

  color: #281b69;
  text-decoration: none;
}

.highlight-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  margin-bottom: 54px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.highlight-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  border-radius: 999px;

  background: #ff4f9a;
  color: #ffffff;
}

.highlight-card__date {
  color: #ff8a21;
}

.highlight-card__title {
  max-width: 620px;

  margin: 0 0 30px;

  font-size: clamp(40px, 4vw, 62px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.045em;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.highlight-card__excerpt {
  max-width: 600px;

  margin: 0 0 42px;

  font-size: 18px;
  line-height: 1.5;

  color: rgba(40, 27, 105, 0.82);
}

.highlight-card__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;

  margin-top: auto;

  padding: 12px 18px;

  border: 1px solid #ff4f9a;
  border-radius: 999px;

  color: #ff4f9a;

  font-size: 14px;
  font-weight: 700;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.highlight-card:hover .highlight-card__title {
  color: #ff4f9a;
  transform: translateX(4px);
}

.highlight-card:hover .highlight-card__read {
  background: #ff4f9a;
  color: #ffffff;

  transform: translateX(4px);
}

@media (max-width: 800px) {
  .highlights-slider {
    grid-auto-columns: 90%;
  }

  .highlight-card,
  .highlight-card__link {
    min-height: 430px;
  }

  .highlight-card__link {
    padding: 30px 26px;
  }

  .highlight-card__title {
    font-size: clamp(34px, 9vw, 50px);
  }
}
/* =========================================================
   HOME — LATEST HIGHLIGHTS SPACING
   ========================================================= */

.home-highlights {
  padding: 110px 0 120px;
}

.home-highlights__inner {
  width: calc(100% - 144px);
  max-width: 1296px;
  margin: 0 auto;
}

.home-highlights__head {
  margin-bottom: 64px;
}

.home-highlights__footer {
  margin-top: 44px;
  padding-bottom: 10px;
}

@media (max-width: 800px) {
  .home-highlights {
    padding: 80px 0 90px;
  }

  .home-highlights__inner {
    width: calc(100% - 40px);
  }

  .home-highlights__head {
    margin-bottom: 44px;
  }
}
/* HOME — Explore all Highlights CTA */

.home-highlights__footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 24px;

  border: 1px solid #ff8a21;
  border-radius: 999px;

  color: #ff8a21;
  background: transparent;

  font-weight: 700;
  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.home-highlights__footer .btn:hover {
  background: #ff8a21;
  color: #ffffff;
  transform: translateY(-2px);
}
/* =========================================================
   HOME — MEMBERSHIP LAYOUT REFINEMENT
   ========================================================= */

.member {
  position: relative;
  overflow: hidden;
}

.member__intro {
  max-width: 620px;
  margin: 30px 0 56px;

  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;

  color: rgba(40, 27, 105, 0.78);
}

.member__list {
  width: min(100%, 980px);
  margin: 52px auto 0 !important;

  padding: 12px 30px;

  border: 1px solid rgba(40, 27, 105, 0.14);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(246, 242, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.96) 55%,
      rgba(255, 244, 236, 0.68) 100%
    );
}

.member__item {
  min-height: 76px;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.member__item:hover {
  transform: translateX(6px);
  color: #ff4f9a;
}

.member__item:nth-child(even):hover {
  color: #ff8a21;
}

.member__arrow {
  color: #ff4f9a;
}

.member__item:nth-child(even) .member__arrow {
  color: #ff8a21;
}

@media (max-width: 800px) {
  .member__list {
    width: 100%;
    padding: 8px 20px;
    margin-top: 40px !important;
  }

  .member__intro {
    margin-bottom: 40px;
  }
}
/* =========================================================
   HOME — MEMBERSHIP FINAL ALIGNMENT
   ========================================================= */

/* Preserve the large editorial title, but improve hierarchy */
.member__type {
  max-width: 1100px;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.92;
}

/* Intro becomes easier to read */
.member__intro {
  max-width: 650px;
  margin: 36px 0 52px;

  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.5;
}

/* Bring benefits back to the same visual axis */
.member__list {
  width: min(100%, 900px);
  margin: 44px 0 0 !important;
}

/* Slightly increase benefit readability */
.member__item {
  min-height: 80px;
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.4;
}

@media (max-width: 800px) {
  .member__type {
    font-size: clamp(58px, 16vw, 90px);
  }

  .member__list {
    width: 100%;
    margin-top: 36px !important;
  }
}
/* =========================================================
   MEMBERSHIP — TYPES
   ========================================================= */

.membership-types {
  padding: 100px 4.8% 120px;
  border-top: 1px solid rgba(40, 27, 105, 0.16);
}

.membership-types__intro {
  max-width: 980px;
  margin-bottom: 70px;
}

.membership-types__intro .label {
  color: #ff4f9a;
  margin-bottom: 24px;
}

.membership-types__title {
  max-width: 1050px;
  margin: 0 0 32px;

  color: #281b69;

  font-size: clamp(58px, 7vw, 105px);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.membership-types__copy {
  max-width: 720px;
  margin: 0;

  color: rgba(40, 27, 105, 0.78);

  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.5;
}

.membership-types__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;

  max-width: 1296px;
  margin: 0 auto;
}

.membership-type {
  position: relative;
  min-height: 560px;

  padding: 38px 40px 44px;

  border: 1px solid rgba(40, 27, 105, 0.15);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(246, 242, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.98) 58%,
      rgba(255, 244, 236, 0.72) 100%
    );

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.membership-type::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 6px;
}

.membership-type--associated::before {
  background: #ff8a21;
}

.membership-type--full::before {
  background: #ff4f9a;
}

.membership-type:hover {
  transform: translateY(-7px);

  box-shadow:
    0 22px 50px rgba(40, 27, 105, 0.09);
}

.membership-type--associated:hover {
  border-color: rgba(255, 138, 33, 0.5);
}

.membership-type--full:hover {
  border-color: rgba(255, 79, 154, 0.5);
}

.membership-type__number {
  margin: 0 0 56px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.membership-type--associated .membership-type__number {
  color: #ff8a21;
}

.membership-type--full .membership-type__number {
  color: #ff4f9a;
}

.membership-type__name {
  margin: 0 0 18px;

  color: #281b69;

  font-size: clamp(42px, 4vw, 64px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.membership-type__tagline {
  max-width: 480px;
  margin: 0 0 42px;

  color: rgba(40, 27, 105, 0.7);

  font-size: 20px;
  line-height: 1.45;
}

.membership-type__benefits {
  margin: 0;
  padding: 0;

  list-style: none;
}

.membership-type__benefits li {
  position: relative;

  padding: 18px 0 18px 28px;

  border-top: 1px solid rgba(40, 27, 105, 0.12);

  color: #281b69;

  font-size: 18px;
  line-height: 1.4;
}

.membership-type__benefits li::before {
  content: "→";

  position: absolute;
  left: 0;
  top: 18px;
}

.membership-type--associated .membership-type__benefits li::before {
  color: #ff8a21;
}

.membership-type--full .membership-type__benefits li::before {
  color: #ff4f9a;
}

@media (max-width: 850px) {
  .membership-types {
    padding: 80px 20px 90px;
  }

  .membership-types__grid {
    grid-template-columns: 1fr;
  }

  .membership-type {
    min-height: 0;
    padding: 32px 26px 36px;
  }

  .membership-type__number {
    margin-bottom: 38px;
  }
}
/* =========================================================
   MOBILE — ABOUT CONTENT VISIBILITY
   ========================================================= */

@media (max-width: 800px) {

  #about-main .governance-intro {
    min-height: auto !important;
    height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 55px !important;
  }

  #about-main .visions-article {
    min-height: auto !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 75px !important;
  }

  #about-main .governance-intro__copy {
    display: block !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #about-main [data-fade],
  #about-main [data-fade-row] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #about-main .governance-intro__copy p {
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* =========================================================
   MOBILE — CREAPOLIS EDITIONS
   ========================================================= */

@media (max-width: 800px) {

  .creapolis-edition-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 72px !important;
    box-sizing: border-box;
  }

  .creapolis-edition-card > a,
  .creapolis-edition-card > img,
  .creapolis-edition-card > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .creapolis-edition-card img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .creapolis-edition-card .project-section__title {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }

  .creapolis-edition-card .governance-intro__copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .creapolis-edition-card [data-fade],
  .creapolis-edition-card [data-fade-row] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

}
/* =========================================================
   MOBILE — FIXED HEADER
   ========================================================= */

@media (max-width: 800px) {
  .nav {
    background: #ffffff !important;
    z-index: 1000 !important;

    border-bottom: 1px solid rgba(40, 27, 105, 0.08);
  }
}
/* =========================================================
   HOMEPAGE — STAY CONNECTED SPACING
   ========================================================= */

.stay-connected {
  position: relative;
  min-height: auto !important;
  padding-top: 110px !important;
  padding-bottom: 120px !important;
  border-top: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    #ff4f9a,
    #ff8a21,
    rgba(255, 138, 33, 0)
  ) 1;
}

@media (max-width: 800px) {
  .stay-connected {
    padding-top: 75px !important;
    padding-bottom: 85px !important;
  }
}
/* =========================================================
   VISIONS CONTRIBUTORS — tighter editorial spacing
   ========================================================= */

#contribution-main > .governance-intro:first-of-type {
  padding-bottom: 30px;
}

#contribution-main > .governance-intro:first-of-type + .governance-intro {
  padding-top: 45px;
  padding-bottom: 25px;
}

#contribution-main > .governance-intro:first-of-type + .governance-intro + .visions-article {
  padding-top: 25px;
}