/* ==========================================================================
   WFDSA — Homepage V2 hi-fi
   Ported 1:1 from Figma "WFDSA - Internal" › 🎨 Homepage V2 (node 7166:3981).
   Design canvas: 1600px desktop / 375px mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colour */
  --navy:            #133567;
  --navy-deep:       #162E69;
  --blue-700:        #1E3A8A;
  --blue-400:        #479DFF;
  --ink:             #0F172A;
  --slate:           #64748B;
  --hairline:        #E5E5E5;

  /* Text */
  --text-body:       rgba(0, 0, 0, .56);
  --text-strong:     rgba(0, 0, 0, .80);
  --text-muted:      rgba(0, 0, 0, .52);
  --text-soft:       rgba(0, 0, 0, .65);
  --text-faint:      rgba(0, 0, 0, .60);
  --text-grey:       #333333;
  --on-dark:         rgba(255, 255, 255, .80);
  --on-dark-soft:    rgba(255, 255, 255, .65);
  --on-dark-strong:  rgba(255, 255, 255, .88);

  /* Gradients */
  --grad-flame:      linear-gradient(90deg, #FF2A00 0%, #FFA100 100%);
  --grad-coral:      linear-gradient(90deg, #F17B66 0%, #EDB65D 25%, #FFFFFF 100%);
  --grad-coral-soft: linear-gradient(90deg, #FFA090 0%, #FFC973 36%, rgba(255,255,255,0) 100%);
  --grad-coral-full: linear-gradient(90deg, #FFA090 0%, #FFC973 36%, #FFFFFF 100%);
  --grad-ice:        linear-gradient(90deg, #CCD4FF 0%, #FFFFFF 100%);
  --grad-chip-grey:  linear-gradient(90deg, #6A6966 0%, rgba(255,255,255,0) 100%);

  /* Section backgrounds */
  --bg-ice:          linear-gradient(135deg, #F2F8FF 0%, #FBFDFF 100%);
  --bg-cream:        linear-gradient(152deg, #FFFFFF 0%, #FFFCF5 100%);
  --bg-cream-warm:   linear-gradient(108deg, #FFFFFF 0%, #FFF9EB 100%);
  --bg-ocean:        linear-gradient(307deg, #479DFF 0%, #163677 76%);
  --bg-ocean-card:   linear-gradient(0deg, #387FE0 32%, #162E69 84%);
  --cream-flat:      #FFFCF5;
  --cream-white:     #FFFEFC;

  /* Type */
  --font-display: "Rethink Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --gutter:    112px;
  --container: 1376px;
  --radius:    12px;
  --radius-sm: 10px;

  /* Rules used by the newsroom / footer grid overlays */
  --rule: linear-gradient(90deg, rgba(102,102,102,0) 0%, rgba(102,102,102,.56) 20%,
                          rgba(102,102,102,.56) 80%, rgba(102,102,102,0) 100%);
  --rule-v: linear-gradient(180deg, rgba(102,102,102,0) 0%, rgba(102,102,102,.56) 20%,
                            rgba(102,102,102,.56) 86%, rgba(102,102,102,0) 100%);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-body);
  background: #FFFFFF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul  { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; font-family: var(--font-display); }
figure, blockquote, dl, dd { margin: 0; }
p   { margin: 0; }

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

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.section { position: relative; width: 100%; overflow: hidden; }

.container {
  position: relative;
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* A fixed-height canvas used where the Figma layout is free-form rather than
   auto-layout. Children are absolutely placed on the 1376px content grid. */
.stage { position: relative; margin-inline: auto; width: var(--container); }

/* --------------------------------------------------------------------------
   4. Type utilities (named for the Figma styles they mirror)
   -------------------------------------------------------------------------- */
.t-eyebrow {                       /* Geist Mono 500 16/26 ls1 upper */
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 16px; line-height: 26px; letter-spacing: 1px;
  text-transform: uppercase; color: #000;
}
.t-eyebrow::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor;
}
.t-eyebrow--nodot::before { display: none; }

.t-body   { font-size: 18px; line-height: 26px; color: var(--text-body); }
.t-body-s { font-size: 16px; line-height: 24px; color: var(--text-body); }
.t-meta   { font-size: 10px; line-height: 13px; letter-spacing: 0; text-transform: uppercase; }

.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 72px; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 60px; line-height: 66px; letter-spacing: -1.2px; }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 42px; line-height: 46px; }
.t-h4 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 38px; }
.t-stat { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 56px; color: var(--navy); }

/* Flame-gradient text run */
.g-flame {
  background: var(--grad-flame);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   5. Button — Figma component `button-*`
      Shape is a 12px radius with a square top-right corner.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 66px; padding: 20px 32px;
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 16px; line-height: 26px; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap; color: #000;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-radius: 50%; background: currentColor;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(0); }

.btn--coral      { background: var(--grad-coral); }
.btn--coral-soft { background: var(--grad-coral-soft); }
.btn--coral-full { background: var(--grad-coral-full); }
.btn--ice        { background: var(--grad-ice); color: var(--navy); }
.btn--ghost      { background: rgba(255,255,255,.001); color: var(--navy); }

/* Gradient hairline border, drawn as a mask so the fill stays transparent. */
.btn--outline {
  position: relative; background: transparent; color: #000;
  border-radius: var(--radius);
}
.btn--outline::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(90deg, #FF2A00 0%, #FFA100 49%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn--on-dark { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   6. Site header (in-flow over the hero)
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute; inset: 20px 0 auto; z-index: 30;
  height: 66px;
}
.site-header .container { display: flex; align-items: center; height: 66px; }

.brand {
  position: relative; z-index: 2; display: block; width: 149px;
  flex: 0 0 auto; align-self: flex-start; margin-top: 1px;
}
.brand img { width: 149px; height: 123px; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 8px; margin-left: 187px; }
.site-nav a {
  padding: 10px; font-size: 16px; line-height: 26px; white-space: nowrap;
  color: var(--on-dark); transition: color .18s ease;
}
.site-nav .header-actions { display: none; }
.site-nav a:hover { color: #FFFFFF; }

.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.header-actions .btn { min-height: 66px; }

.nav-toggle { display: none; width: 44px; height: 44px; margin-left: auto; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: #FFFFFF; transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. §1 Hero
   -------------------------------------------------------------------------- */
.hero { height: 800px; background: #000; }
.hero__media { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero > .stage { position: relative; z-index: 1; height: 800px; pointer-events: none; }
.hero > .stage .hero__dots { pointer-events: auto; }

.hero__title {
  position: absolute; left: 0; top: 576px; width: 672px;
  color: #FFFFFF;
}
.hero__aside {
  position: absolute; left: 821px; top: 412px; width: 379px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.hero__aside p { color: var(--on-dark); font-size: 18px; line-height: 26px; }

.hero__dots {
  position: absolute; left: 1436px; top: 400px;
  display: flex; flex-direction: column; gap: 22px;
}
.hero__dots button {
  width: 12px; height: 12px; padding: 0;
  border-radius: 50%; background: #FFFFFF; opacity: .5;
  transition: opacity .2s ease;
}
.hero__dots button[aria-current="true"] { opacity: 1; }
/* Timer pager (studio comment #17): the active dot grows into a pill that
   reaches the next dot over one slide's dwell. --dot/--gap match the layout
   (vertical on desktop, horizontal below 1024px). */
.hero__dots { --dot: 12px; --gap: 22px; }
.hero__dots button { position: relative; }
.hero__dots.is-timing button[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--dot); height: var(--dot); border-radius: calc(var(--dot) / 2);
  background: #FFFFFF; animation: dot-timer-v var(--dwell, 6000ms) linear forwards;
}
.hero__dots.is-paused button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes dot-timer-v { to { height: calc(var(--dot) * 2 + var(--gap)); } }
@keyframes dot-timer-h { to { width: calc(var(--dot) * 2 + var(--gap)); } }

/* --------------------------------------------------------------------------
   8. §2 "55" intro
   -------------------------------------------------------------------------- */
/* Rob, 2026-10-05: the label, copy and photographs stay where they are, and
   the 55 comes in below them with its caption. The earlier sequence (Figma
   7395:3243 → 7395:3254) cleared the copy and photographs so the 55 could take
   their place, which read as the number replacing the text. The section is
   taller by the room the 55 and caption need under the lower photograph. */
.intro {
  height: 1368px; background: var(--bg-ice);
  /* no bottom rule: Jamie, studio comment #18 (2026-09-30), overrides #2 */
}
.intro .stage { height: 1368px; width: min(1364px, 100% - 240px); }

.intro__head {
  position: absolute; left: 0; top: 120px; width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.intro__label { display: inline-flex; align-items: center; gap: 12px; }
.intro__label span {
  font-weight: 500; font-size: 16px; line-height: 26px;
  letter-spacing: 1px; text-transform: uppercase; color: #000;
}
.intro__label i { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }

.intro__copy {
  width: 613px; padding-left: 24px; border-left: 1px solid var(--navy);
  font-size: 18px; line-height: 26px; color: var(--text-grey);
}
.intro__copy .is-dim { color: rgba(51,51,51,.5); }

.intro__photo-a {
  position: absolute; left: 0; top: 191px; width: 327px; height: 327px;
  border-radius: var(--radius-sm); object-fit: cover;
}
.intro__photo-b {
  position: absolute; left: 945px; top: 395px; width: 242px; height: 281px;
  border-radius: var(--radius); object-fit: cover; z-index: 2;
}
/* The caption sits under the 55 at the spacing of the design's end frame
   (7395:3254). */
.intro__caption {
  position: absolute; left: 332px; top: 1212px; width: 700px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; line-height: 48px; text-align: center; color: var(--text-strong);
}
.js-anim .intro__figure { will-change: transform; }

.intro__figure {
  position: absolute; left: 328px; top: 620px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 600px; line-height: 600px; letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   9. §3 About
   -------------------------------------------------------------------------- */
.about { height: 800px; background: var(--bg-ice); }
.about .stage { height: 800px; }

.about__photo {
  position: absolute; left: 0; top: 165px; width: 275px; height: 308px;
  border-radius: var(--radius); object-fit: cover;
}
.about__label { position: absolute; left: 288px; top: 346px; }
.about__label i { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }

.about__lede {
  position: absolute; left: 0; top: 434px; width: 907px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 42px; line-height: 50px; color: var(--text-strong);
  text-indent: 278px;                /* first line clears the photo above */
}

.about__stats {
  position: absolute; left: 939px; top: 346px;
  display: flex; gap: 31px;
}
.stat-card {
  width: 203px; height: 287px; padding: 20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,.2) 100%);
  border-radius: var(--radius);
}
.stat-card img { width: 163px; height: 163px; border-radius: var(--radius-sm); object-fit: cover; }
.stat-card p { font-size: 16px; line-height: 24px; color: var(--text-body); }

.about__source {
  position: absolute; left: 959px; top: 708px; width: 417px;
  font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--navy);
}

/* --------------------------------------------------------------------------
   10. §4 Policy & research
   -------------------------------------------------------------------------- */
.policy { height: 623px; background: var(--bg-ice); }
.policy__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 650px)); gap: 80px;
  align-items: end; padding: 120px 0; min-height: 623px;
}

/* Two pages of four figures; the pager beside them has exactly two dots.
   Page 2 is Figma 7166:4114, drawn on the globe frame and hidden there. */
.stat-deck { display: grid; }
.stat-deck > .stat-grid { grid-area: 1 / 1; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px 32px; }
.js-anim .stat-deck > .stat-grid { transition: opacity 420ms var(--anim-ease); }
.js-anim .stat-deck > .stat-grid[hidden] { display: grid; opacity: 0; pointer-events: none; }
.js-anim .stat-deck > .stat-grid.is-current { opacity: 1; }
.stat-grid > div { padding-left: 32px; border-left: 1px solid var(--navy); }
.stat-grid dt { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 56px; color: var(--navy); }
.stat-grid dd {
  margin: 8px 0 0; font-size: 16px; line-height: 24px; color: #000;
}

.dots { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }
.policy .dots { width: 343px; margin-inline: auto; }
.dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--navy); }
.dots button[aria-current="true"] { background: var(--grad-flame); }

.policy__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 6px; }
.policy__head { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.policy__copy .t-eyebrow {
  font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: 2.4px; color: #1E1312;
}
.policy__copy h2 { color: var(--navy); }
.policy__lede { max-width: 650px; font-size: 18px; line-height: 26px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. §5 Globe
   -------------------------------------------------------------------------- */
.globe { height: 1195px; background: var(--bg-ocean); color: #FFFFFF; }
/* Figma composites this frame with a SCREEN blend so the black video plate drops out. */
.globe__media {
  /* Centred on the section rather than pinned to the design's left offset, so
     it stays put in a narrower preview pane (studio comment #4). */
  position: absolute; left: 50%; margin-left: -886px; top: -201px;
  width: 1773px; height: 1163px; mix-blend-mode: screen;
}
/* Placement derived from the Figma fill transform on node 7166:4088. */
.globe__media img { position: absolute; left: 7px; top: 422px; width: 1760px; height: 778px; }

.globe__title {
  position: relative; z-index: 2; width: 772px; margin: 47px auto 0;
  text-align: center; color: #FFFFFF;
}

/* Markers sit on the 1604-wide section, not the 1376 container. */
/* the layer passes the pointer through to the globe (drag to spin, studio
   comment #19); only the region buttons themselves take clicks */
.globe__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.globe__markers .marker { pointer-events: auto; }
.marker {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.marker span { font-size: 18px; line-height: 26px; color: #FFFFFF; white-space: pre; text-align: center; }
.marker i {
  position: relative; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.marker i::after {
  content: ""; position: absolute; left: 7px; top: 7px;
  width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF;
}
.marker--af { left: 886px; top: 550px; width: 125px; }   /* Europe/Africa */
.marker--eu { left: 896px; top: 369px; width: 152px; }
.marker--sa { left: 592px; top: 737px; width: 140px; }   /* Latin America */
.marker--na { left: 577px; top: 497px; width: 141px; }
/* Asia Pacific sits on the far side at rest; globe.js places it (and every pin)
   from its coordinates, so without JS it stays hidden rather than misplaced */
.marker--ap { left: 1006px; top: 429px; width: 120px; }
html:not(.js-anim) .marker--ap { display: none; }

.portal-bar {
  position: absolute; left: 0; right: 0; margin-inline: auto;
  bottom: 80px; z-index: 3;
  width: min(1380px, 100% - 224px); min-height: 100px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(4px);
}
.portal-bar__text { display: flex; align-items: center; gap: 16px; }
.portal-bar__icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
}
.portal-bar__narrow { display: none; }
.portal-bar h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 20px;
  text-transform: uppercase; color: var(--on-dark-strong);
}
.portal-bar p { margin-top: 2px; font-size: 16px; line-height: 24px; color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   12. §6 Annual report
   -------------------------------------------------------------------------- */
.report { min-height: 619px; background: var(--cream-white); }
.report__inner {
  display: flex; align-items: center; justify-content: center; gap: 80px;
  padding: 80px 0; min-height: 619px;
}
.report__copy { width: 371px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.report__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.1);
}
.report__copy h2 { color: var(--navy); font-size: 42px; line-height: 46px; }
.report__copy p  { font-size: 18px; line-height: 26px; color: var(--text-soft); }
.report__copy .btn { color: var(--navy); }

.report__collage { position: relative; width: 545px; height: 459px; flex: 0 0 auto; }
.report__collage img { position: absolute; border-radius: var(--radius); object-fit: cover; }
.report__collage img:nth-child(1) { left: 224px; top: 0;   width: 322px; height: 257px; }
.report__collage img:nth-child(2) { left: 224px; top: 277px; width: 204px; height: 182px; }
.report__collage img:nth-child(3) { left: 0;   top: 75px;  width: 204px; height: 182px; }
.report__collage img:nth-child(4) { left: 85px; top: 277px; width: 119px; height: 142px; }

/* --------------------------------------------------------------------------
   13. §7 Membership
   -------------------------------------------------------------------------- */
.membership { min-height: 1247px; background: var(--bg-cream); }
.membership__inner { padding: 83px 0 83px; display: flex; flex-direction: column; gap: 48px; }
.membership .partner-program { margin-top: 49px; }

.membership__head { display: flex; align-items: flex-end; gap: 64px; }
.membership__head > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
.membership__tag {
  display: inline-flex; align-items: center; align-self: flex-start; height: 26px;
  padding-left: 12px; border-left: 1px solid #FF5A00;
  font-weight: 500; font-size: 16px; line-height: 26px;
  letter-spacing: 1px; text-transform: uppercase;
}
.membership__lede {
  font-family: var(--font-display); font-weight: 500;
  font-size: 30px; line-height: 36px; color: var(--text-strong);
}
.membership__head .btn { flex: 0 0 auto; }

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 24px; }
.partner-card {
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.partner-card__top {
  padding: 22px 12px 12px; min-height: 210px;
  display: flex; flex-direction: column;
  background: #F0F4FF;
  border-bottom: 1px solid var(--hairline);
}
.partner-card__tier { font-size: 16px; line-height: 24px; color: var(--text-faint); }
.partner-card__logo { flex: 1 1 auto; display: grid; place-items: center; padding: 28px 0; }
.partner-card__logo img { max-height: 72px; width: auto; }
.partner-card__body {
  flex: 1 1 auto; padding: 22px; background: #F8FAFF;
  display: flex; flex-direction: column; gap: 12px;
}
.partner-card__body h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 28px; letter-spacing: -.5px; color: var(--ink);
}
.partner-card__body p:first-of-type { font-size: 18px; line-height: 26px; color: var(--text-grey); }
.partner-card__body p:last-of-type  { font-size: 16px; line-height: 24px; color: var(--slate); }

.partner-program {
  display: flex; gap: 64px; align-items: stretch;
  padding-right: 24px; border-right: 1px solid var(--navy);   /* studio comment #6 */
}
.partner-program img {
  width: 644px; height: 250px; flex: 0 0 auto;
  border-radius: var(--radius); object-fit: cover;
}
.partner-program > div {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  gap: 32px; align-items: flex-start;
}
.partner-program p { font-size: 18px; line-height: 26px; color: var(--text-strong); }

/* --------------------------------------------------------------------------
   14. §8 Stories
   -------------------------------------------------------------------------- */
.stories { min-height: 819px; background: var(--cream-flat); }
.stories__inner { padding: 80px 0; display: flex; flex-direction: column; gap: 64px; }

.stories__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; }
.quote {
  width: 709px; margin: 0; display: flex; gap: 24px; align-items: center;
  border-left: 1px solid var(--navy); padding-left: 24px;
}
.quote > div { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.quote__mark { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 16px; color: var(--navy); }
.quote blockquote { margin: 0; font-size: 24px; line-height: 24px; color: var(--text-body); }
.quote__by {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 16px; height: 24px; border-radius: 100px;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  font-size: 16px; line-height: 24px; color: var(--navy);
}
.quote__by i { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); }

.stories__body { display: flex; gap: 64px; align-items: flex-end; }
.stories__lede { width: 511px; flex: 0 0 auto; color: var(--navy); }
.stories__media { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.stories__media img { width: 100%; height: 397px; border-radius: var(--radius); object-fit: cover; }

/* Stories slider (Rob, 2026-10-05): four slides, one line per slide. The
   current line fills over the dwell time, then the next slide takes over. */
.stories__frame { position: relative; height: 397px; border-radius: var(--radius); overflow: hidden; }
.stories__media .stories__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
  opacity: 0; transition: opacity 700ms cubic-bezier(.4, 0, .2, 1);
}
.stories__media .stories__frame img.is-current { opacity: 1; }

.progress { display: flex; align-items: center; gap: 12px; }
.progress__track {
  position: relative; flex: 1 1 0; height: 22px; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.progress__track::before,
.progress__track::after { content: ""; position: absolute; left: 0; top: 10px; height: 2px; background: var(--navy); }
.progress__track::before { width: 100%; opacity: .2; }
.progress__track[aria-current="true"]::before { opacity: .45; }
.progress__track::after { width: 0; }
.progress__track[aria-current="true"]::after { width: 100%; }
.progress.is-timing .progress__track[aria-current="true"]::after { animation: story-timer var(--story-dwell, 6s) linear forwards; }
/* hovering the quote or the lines, or scrolling the section away, holds the
   timer where it is */
.stories.is-paused .progress.is-timing .progress__track[aria-current="true"]::after,
.stories.is-offscreen .progress.is-timing .progress__track[aria-current="true"]::after { animation-play-state: paused; }
@keyframes story-timer { from { width: 0; } to { width: 100%; } }

.js-anim .quote blockquote,
.js-anim .quote__by { transition: opacity 260ms cubic-bezier(.4, 0, .2, 1); }
.js-anim .stories.is-swapping .quote blockquote,
.js-anim .stories.is-swapping .quote__by { opacity: 0; }

/* --------------------------------------------------------------------------
   15. §9 Newsroom
   -------------------------------------------------------------------------- */
.newsroom { height: 847px; background: var(--bg-ice); }
.newsroom__grid { position: absolute; inset: 0; pointer-events: none; }
.newsroom__grid .v { position: absolute; top: 0; width: 1px; height: 100%; background: var(--rule-v); opacity: .5; }
.newsroom__grid .h { position: absolute; left: 0; width: 100%; height: 1px; background: var(--rule); opacity: .5; }

.newsroom .stage { height: 847px; }
.newsroom__label { position: absolute; left: -4px; top: 100px; }
.newsroom__intro {
  position: absolute; left: 277px; top: 100px; width: 589px;
  font-size: 18px; line-height: 26px; color: var(--text-strong);
}

.newsroom__slide-a {
  position: absolute; left: 488px; top: 231px;
  width: 663px; height: 468px; border-radius: var(--radius); object-fit: cover;
}
.newsroom__slide-b {
  position: absolute; left: 1199px; top: 269px;
  width: 566px; height: 393px; border-radius: var(--radius); object-fit: cover;
}

.newsroom__lead {
  position: absolute; left: -4px; top: 311px; width: 721px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.newsroom__lead > div {
  display: flex; gap: 24px; align-items: center;
  border-left: 1px solid var(--navy); padding-left: 24px;
}
.newsroom__lead time {
  display: block; font-size: 10px; line-height: 13px;
  text-transform: uppercase; color: var(--navy);
}
.newsroom__lead h2 {
  /* The slide image starts at x=600 and the headline block at x=132, so a long
     title would run underneath it (studio comment #12). Figma's own titles all
     wrap inside this width, so capping it changes nothing on the drawn slide. */
  margin-top: 7px; max-width: 460px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 60px; line-height: 66px; color: var(--navy);
}
.newsroom .dots { position: absolute; left: 648px; top: 737px; width: 343px; margin: 0; }

/* --------------------------------------------------------------------------
   16. §10 Events
   -------------------------------------------------------------------------- */
.events { min-height: 950px; background: var(--bg-cream-warm); }
.events__inner { display: grid; grid-template-columns: 437px 1fr; gap: 0; padding: 146px 0 59px; }

.events__copy { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.events__block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.events__copy h2 { color: var(--navy); font-size: 42px; line-height: 46px; }
.events__copy time { font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--text-body); }
.events__copy p { font-size: 16px; line-height: 24px; color: var(--text-body); }
.events__copy img { width: 437px; height: 280px; border-radius: var(--radius); object-fit: cover; }

/* The calendar is a 2x4 cell grid with hairlines between the cells. */
.calendar {
  position: relative; display: grid;
  grid-template-columns: repeat(2, 417px); grid-auto-rows: 132px;
  width: 834px; margin: 41px 0 0 116px;
}
.calendar__cell { position: relative; padding: 32px 0 0 42px; }
.calendar__cell::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule);
}
.calendar__cell::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule-v);
}
.event { display: flex; gap: 16px; }
.event__date {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 16px; border-radius: 100px;
  background: var(--grad-chip-grey);
  font-weight: 500; font-size: 10px; line-height: 26px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-body);
}
.event--next .event__date { background: var(--grad-coral-soft); color: #32504A; }
.event__body { width: 203px; }
.event__body h3 { font-family: var(--font-mono); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--text-body); }
.event__body span { display: block; margin-top: 7px; font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--text-body); }

.calendar__actions { grid-column: 2; display: flex; justify-content: flex-start; padding: 52px 0 0 42px; }

/* --------------------------------------------------------------------------
   17. §11 Member community
   -------------------------------------------------------------------------- */
.community { min-height: 1066px; background: var(--bg-cream-warm); padding: 13px 10px 19px; }
.community__card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: 1034px; background: var(--bg-ocean-card); color: #FFFFFF;
}
.community__media { position: absolute; left: -40px; top: 90px; width: calc(100% + 80px); height: 874px; }
.community__media img { width: 100%; height: 100%; object-fit: cover; }

.community__inner { position: relative; z-index: 2; padding: 70px 103px 0; }

.tabs {
  display: flex; gap: 8px; width: 735px; margin: 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.tabs button {
  padding: 13px 6px; flex: 0 0 auto;
  font-family: "Roboto", var(--font-mono); font-weight: 600;
  font-size: 16px; line-height: 24px; text-align: center;
  color: #FFFFFF; opacity: .6; border-bottom: 1px solid transparent;
  margin-bottom: -1px; transition: opacity .2s ease;
}
.tabs button[aria-selected="true"] {
  opacity: 1; border-bottom-color: #FFFFFF; border-bottom-width: 2px;
  margin-bottom: -2px;          /* studio comment #14: thicker under the active tab */
}

/* Member Community strip, measured off Figma 7166:4501 (studio comment #14):
   the four tabs are fixed-width cells spread across the whole 735px line with
   their labels centred, the line is a 2px white-to-cream gradient, and the
   active tab carries a 3px white bar drawn over it. Desktop and tablet only;
   below 1024px the strip becomes the mobile pill dropdown. */
@media (min-width: 1024px) {
  .community .tabs {
    width: 735px; max-width: 100%; gap: 0; justify-content: space-between;
    border-bottom: 0; overflow: visible;
    background: linear-gradient(90deg, #FFFFFF, #FFF9EB) left bottom / 100% 2px no-repeat;
  }
  .community .tabs button {
    padding: 13px 0 14px; margin: 0; border: 0;
    box-shadow: inset 0 -3px 0 transparent;
  }
  .community .tabs button:nth-child(1) { width: 159px; }
  .community .tabs button:nth-child(2),
  .community .tabs button:nth-child(3) { width: 205px; }
  .community .tabs button:nth-child(4) { width: 143px; }
  .community .tabs button[aria-selected="true"] { margin: 0; box-shadow: inset 0 -3px 0 #FFFFFF; }
}

.community__panel {
  width: 797px; margin: 336px auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.community__panel .t-eyebrow { color: var(--on-dark); }
.community__panel p[data-panel] {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 34px; color: #FFFFFF;
}

.community__cta {
  position: absolute; left: 103px; right: 103px; bottom: 51px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 114px; padding: 18px; border-radius: var(--radius);
  background: var(--navy); border: 1px solid rgba(255,255,255,.09);
}
.community__cta h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 20px;
  color: var(--on-dark-strong);
}
.community__cta p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--on-dark-soft); max-width: 538px; }

/* --------------------------------------------------------------------------
   18. §12 FAQs
   -------------------------------------------------------------------------- */
.faq { min-height: 925px; background: var(--bg-ice); }
.faq .stage { min-height: 925px; }
.faq__label { position: absolute; left: -9px; top: 100px; }
.faq__photo-a {
  position: absolute; left: -9px; top: 539px; width: 299px; height: 327px;
  border-radius: var(--radius-sm); object-fit: cover;
}
.faq__photo-b {
  position: absolute; left: 1171px; top: 64px; width: 214px; height: 281px;
  border-radius: var(--radius); object-fit: cover;
}
.faq__main {
  position: absolute; left: 350px; top: 145px; width: 760px;
  display: flex; flex-direction: column; gap: 32px;
}
.faq .tabs { width: 100%; margin: 0; border-bottom: 1px solid rgba(19,53,103,.5); }
.faq .tabs button { flex: 1 1 0; color: var(--navy); border-bottom-color: transparent; }
.faq .tabs button[aria-selected="true"] { border-bottom-color: var(--navy); }

.accordion__item { border-top: 1px solid; border-image: linear-gradient(90deg, #6D7E96 0%, rgba(255,255,255,0) 100%) 1; padding: 23px 0 24px; }
.accordion__item:first-child { border-top: 0; padding-top: 24px; }
.accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 46px; text-align: left;
  font-family: var(--font-display); font-weight: 500;
  font-size: 42px; line-height: 46px; color: var(--navy);
}
.accordion__icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.accordion__icon::before,
.accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--slate);
  transform: translate(-50%, -50%); transition: opacity .2s ease, transform .2s ease;
}
.accordion__icon::before { width: 18px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 18px; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-top: 12px; font-size: 16px; line-height: 24px; color: var(--text-body); }
.accordion__panel p.is-placeholder { font-style: italic; opacity: .72; }
.accordion[hidden] { display: none; }

/* --------------------------------------------------------------------------
   19. §13 Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; min-height: 785px; background: var(--bg-ice); padding: 80px 0; }
.site-footer .stage { min-height: 625px; padding-top: 51px; }

.footer__grid {
  display: grid; grid-template-columns: 237px 467px 1fr; align-items: start;
  border-top: 1px solid; border-image: var(--rule) 1;
  padding-top: 41px;
}
.footer__col { padding-top: 0; }
.footer__col--divide { border-left: 1px solid; border-image: var(--rule-v) 1; padding-left: 32px; }
.footer__grid a, .footer__grid p {
  display: flex; align-items: center; height: 66px; padding: 10px;
  font-size: 16px; line-height: 26px; color: var(--navy);
}
.footer__nav, .footer__contact, .footer__social { display: flex; flex-direction: column; gap: 8px; }
.footer__nav a { transition: opacity .18s ease; }
.footer__nav a:hover { opacity: .6; }
.footer__contact { border-bottom: 1px solid; border-image: var(--rule) 1; padding-bottom: 21px; }
.footer__contact p:last-child { height: 72px; }
.footer__social { padding-top: 22px; }
.footer__social a:last-child { height: 46px; }
.footer__map { position: relative; }
.footer__map img { width: 671px; height: 491px; border-radius: var(--radius); object-fit: cover; margin-left: auto; }
.footer__pin { position: absolute; left: 290px; top: 111px; width: 73px; height: 92px; }

/* --------------------------------------------------------------------------
   20. Chat widget
   -------------------------------------------------------------------------- */
.chat-fab {
  position: fixed; right: 80px; bottom: 60px; z-index: 60;
  display: grid; place-items: center; width: 80px; height: 80px;
  border-radius: 100px; background: var(--grad-flame);
  box-shadow: 0 20px 60px rgba(221, 122, 0, .43);
  transition: transform .2s ease;
}
.chat-fab:hover { transform: scale(1.05); }
.chat-fab svg { width: 24px; height: 24px; }

.chat-panel {
  position: fixed; right: 40px; bottom: 140px; z-index: 60;
  width: 450px; max-width: calc(100vw - 32px);
  border-radius: var(--radius); overflow: hidden; background: #FFFFFF;
  box-shadow: 0 30px 80px rgba(16, 38, 74, .28);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.chat-panel__head {
  position: relative; padding: 32px 32px 36px;
  background: linear-gradient(120deg, #17337A 0%, #2F6FD0 55%, #79B4FF 100%);
  color: #FFFFFF;
}
.chat-panel__avatar {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; background: #FFFFFF; color: var(--blue-700);
}
.chat-panel__head h2 { margin-top: 20px; font-size: 26px; line-height: 32px; font-weight: 600; }
.chat-panel__head p  { margin-top: 6px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.88); font-family: var(--font-display); }
.chat-panel__close {
  position: absolute; right: 24px; top: 24px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.22); color: #FFFFFF;
}

.chat-log { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; max-height: 320px; overflow-y: auto; }
.chat-msg { display: flex; gap: 14px; }
.chat-msg__avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: #EAF1FF; color: var(--blue-700);
}
.chat-msg__body { flex: 1 1 auto; font-family: var(--font-display); }
.chat-msg__who { font-size: 15px; font-weight: 600; color: var(--ink); }
.chat-msg__bubble {
  display: inline-block; margin-top: 8px; padding: 12px 16px;
  border-radius: 10px; background: #EEF3FB; color: var(--ink); font-size: 15px; line-height: 22px;
}
.chat-msg__time { display: block; margin-top: 6px; font-size: 12px; color: var(--slate); text-align: right; }
.chat-msg--me { justify-content: flex-end; }
.chat-msg--me .chat-msg__bubble {
  background: linear-gradient(110deg, #17337A 0%, #3B7BD8 100%); color: #FFFFFF; max-width: 320px;
}
.chat-msg--me .chat-msg__time { text-align: left; }
.chat-typing { display: inline-flex; gap: 6px; padding: 14px 16px; border-radius: 10px; background: #EEF3FB; }
.chat-typing i { width: 9px; height: 9px; border-radius: 50%; background: #A9C6EE; animation: chat-bounce 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { opacity: .45; } 30% { opacity: 1; } }

.chat-form { display: flex; align-items: center; gap: 12px; padding: 18px 20px 18px 28px; border-top: 1px solid #ECF0F6; }
.chat-form input {
  flex: 1 1 auto; border: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink);
}
.chat-form input::placeholder { color: var(--slate); }
.chat-form button {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; background: var(--navy); color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1599px) {
  :root { --gutter: 64px; }
}

@media (max-width: 1520px) {
  /* Figma's hard break only reads at the design width; narrower it leaves an
     orphaned line (studio comment #5). */
  .membership__lede br, .hero__aside p br { display: none; }
  /* Below the design width the nav can no longer sit on its fixed 448px
     offset, so it shares the remaining space instead. */
  .site-nav { margin-left: auto; }
  .site-nav a { padding: 10px 6px; }
  .header-actions { gap: 12px; margin-left: 24px; }
  .header-actions .btn { padding: 20px 22px; }
}

@media (max-width: 1440px) {
  :root { --gutter: 48px; }
  .stage, .intro .stage { width: 100%; }
  .hero__title { left: 0; }
  .hero__aside { left: auto; right: 180px; }
  .hero__dots { left: auto; right: 0; }
  .about__stats { left: auto; right: 0; }
  .about__source { left: auto; right: 0; }
  .intro__photo-b { left: auto; right: 180px; }
  .intro__figure { left: 22%; }
  .intro__caption { left: calc(22% + 4px); }   /* stays centred under the 55 */
  .newsroom__slide-b { left: auto; right: -160px; }
  .faq__main { left: auto; right: 0; }
  .faq__photo-b { right: -40px; }
}

@media (max-width: 1199px) {
  /* The full nav no longer fits once the container drops below ~1200px. */
  .site-nav {
    position: fixed; inset: 0 0 auto; z-index: 40;
    flex-direction: column; align-items: flex-start; gap: 0;
    margin: 0; padding: 88px 24px 32px;
    background: rgba(10, 20, 40, .96); backdrop-filter: blur(10px);
    transform: translateY(-100%); transition: transform .3s ease;
  }
  .site-nav.is-open { transform: none; }
  .site-nav a { width: 100%; padding: 14px 0; font-size: 20px; }
  .site-header > .container > .header-actions { display: none; }
  .site-nav .header-actions {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; margin: 16px 0 0; gap: 12px;
  }
  .nav-toggle { display: block; }
}

@media (max-width: 1200px) {
  .policy__inner { grid-template-columns: 1fr; gap: 56px; }
  .policy__lede { width: auto; }
  /* the mobile frame (7166:5402) leads with the copy, figures underneath */
  .policy__inner > :first-child { order: 2; }
  .policy__copy { order: 1; }
  .stat-grid { max-width: 650px; }
  .membership__head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .partner-program { flex-direction: column; padding: 0 0 32px; gap: 32px; }
  .partner-program img { width: 100%; }
  .partner-program > div { padding: 0 32px; }
  .stories__head { flex-direction: column; gap: 32px; }
  .quote { width: 100%; }
  .stories__body { flex-direction: column; align-items: stretch; gap: 32px; }
  .stories__lede { width: 100%; }
  .events__inner { grid-template-columns: 1fr; gap: 0; padding: 60px 0; }
  .events__copy img { width: 100%; height: 280px; }
  .community__inner { padding: 56px 40px 0; }
  .community__cta { left: 40px; right: 40px; }
  .tabs { max-width: 100%; overflow-x: auto; }
  .community .tabs { margin-inline: auto; }
  .footer__grid { grid-template-columns: 220px 1fr; }
  .footer__map { grid-column: 1 / -1; margin-top: 24px; }
  .footer__map img { width: 100%; max-width: 671px; height: auto; margin-left: 0; }
  .footer__pin { left: 43%; top: 22%; }
}

/* Below 1024 the free-form desktop stages give way to the mobile stack that
   matches the Figma "Homepage Mobile" frame (375px). */
@media (max-width: 1023px) {
  :root { --gutter: 16px; }

  .site-header { inset: 16px 0 auto; height: 48px; }
  .site-header .container { height: 48px; }
  .brand, .brand img { width: 62px; }
  .hero, .hero .stage { height: 800px; }
  .hero__title { top: 152px; width: 100%; font-size: 44px; line-height: 54px; }
  .hero__aside { position: absolute; top: 344px; left: 0; width: 100%; padding-top: 0; }
  .hero__dots { left: 50%; top: auto; bottom: 30px; transform: translateX(-50%); flex-direction: row; gap: 8px; }
  .hero__dots button { width: 6px; height: 6px; }
  .hero__dots { --dot: 6px; --gap: 8px; }
  .hero__dots.is-timing button[aria-current="true"]::after { animation-name: dot-timer-h; }

  .intro, .intro .stage,
  .about, .about .stage,
  .newsroom, .newsroom .stage,
  .policy, .policy__inner, .report, .report__inner,
  .membership, .stories, .events, .community, .faq,
  .faq .stage, .site-footer, .site-footer .stage { height: auto; min-height: 0; }

  .intro .stage, .about .stage, .newsroom .stage, .faq .stage, .site-footer .stage { display: flex; flex-direction: column; }
  .intro__head, .intro__copy, .intro__photo-a, .intro__photo-b, .intro__figure,
  .about__photo, .about__label, .about__lede, .about__stats, .about__source,
  .newsroom__label, .newsroom__intro, .newsroom__slide-a, .newsroom__slide-b,
  .newsroom__lead, .newsroom .dots,
  .faq__label, .faq__photo-a, .faq__photo-b, .faq__main {
    position: static; left: auto; top: auto; right: auto; width: 100%;
  }

  .intro { padding: 60px 0 61px; }
  .intro__head { flex-direction: column; gap: 24px; }
  .intro__copy { width: 100%; padding-left: 17px; }
  .intro__photo-a { height: 260px; margin: 24px 0 0; order: 2; }
  .intro__photo-b { height: 240px; margin: 24px 0 0; order: 4; }
  .intro__figure { margin: 8px 0 0; order: 3; font-size: 160px; line-height: 160px; text-align: center; }
  .intro__head { order: 1; }

  .about { padding: 56px 0; }
  .about__photo { height: 240px; margin-bottom: 24px; }
  .about__lede { text-indent: 0; margin: 16px 0 42px; }
  .about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-card { width: 100%; height: auto; padding: 12px; }
  .stat-card img { width: 100%; height: 140px; }
  .about__source { margin-top: 22px; }
  .about { padding: 60px 0; }

  .policy__inner { padding: 56px 0; gap: 40px; }
  .stat-grid { gap: 28px 16px; }
  .stat-grid > div { padding-left: 16px; }
  .t-h2 { font-size: 34px; line-height: 40px; letter-spacing: -.5px; }
  .t-h1 { font-size: 44px; line-height: 50px; }
  .t-h3 { font-size: 28px; line-height: 34px; }

  /* Figma draws a separate mobile globe frame (7166:4991, 375x969): the title
     goes left-aligned at 44/48, the render bleeds past both edges, the pins
     shrink to 9px, and the portal bar gets its own copy. */
  .globe { height: 969px; padding: 0;
    background: linear-gradient(272deg, #479DFF 0%, #163677 76%); }
  .globe__title {
    position: absolute; left: 16px; top: 60px; width: 343px; margin: 0;
    text-align: left; font-size: 44px; line-height: 48px; letter-spacing: -1px;
  }
  .globe__media {
    position: absolute; left: -269px; top: 236px; width: 913px; height: 401px;
  }
  .globe__media img { left: 0; top: 0; width: 913px; height: 401px; }
  /* the spinning globe stays down to the tablet breakpoint; only true mobile
     falls back to the still (studio comment #4) */
  .globe__media { left: 50%; margin-left: -456px; }

  .globe__markers { display: block; }
  .marker span { font-size: 9px; line-height: 13px; }
  .marker i { width: 14px; height: 14px; }
  .marker i::after { left: 3.5px; top: 3.5px; width: 7px; height: 7px; }
  .marker--af { left: 248px; top: 422px; width: 64px; }
  .marker--eu { left: 245px; top: 310px; width: 78px; }
  .marker--sa { left: 84px;  top: 515px; width: 72px; }
  .marker--na { left: 78px;  top: 372px; width: 73px; }
  .marker--ap { left: 306px; top: 358px; width: 62px; }

  .portal-bar {
    position: absolute; left: 16px; right: 16px; top: 717px; bottom: auto;
    width: auto; min-height: 192px; padding: 17px 25px;
    flex-direction: column; align-items: flex-start; gap: 22px;
  }
  .portal-bar__wide { display: none; }
  .portal-bar__narrow { display: block; }
  .portal-bar__icon { display: none; }       /* hidden on the mobile frame (7166:5029) */
  .portal-bar__text { align-items: flex-start; gap: 0; }

  .report__inner { flex-direction: column; gap: 40px; padding: 56px 0; }
  .report__copy { width: 100%; }
  .report__collage { width: 100%; max-width: 420px; height: 380px; }
  .report__collage img:nth-child(1) { left: 40%; width: 60%; height: 200px; }
  .report__collage img:nth-child(2) { left: 40%; top: 215px; width: 38%; height: 150px; }
  .report__collage img:nth-child(3) { left: 0; top: 60px; width: 38%; height: 150px; }
  .report__collage img:nth-child(4) { left: 14%; top: 215px; width: 24%; height: 120px; }

  .membership__inner { padding: 56px 0; gap: 32px; }
  .membership__head p { font-size: 22px; line-height: 30px; }
  .partner-grid { grid-template-columns: 1fr; }

  .stories__inner { padding: 56px 0; gap: 32px; }
  .quote blockquote { font-size: 18px; line-height: 26px; }

  .newsroom { padding: 60px 0; }
  .newsroom__grid { display: none; }
  .newsroom .stage { gap: 0; }
  .newsroom__intro { margin: 16px 0 0; }
  .newsroom__lead { margin-top: 32px; gap: 24px; }
  .newsroom__slide-a { height: 260px; margin: 32px 0 0; }
  .newsroom .dots { margin-top: 30px; }

  /* the mobile frame (7166:5191) lists three events in one column */
  .calendar { grid-template-columns: 1fr; grid-auto-rows: auto; width: auto; margin: 64px 0 0; }
  .calendar__cell--empty, .calendar__cell--wide-only { display: none; }
  .events__inner { grid-template-columns: minmax(0, 1fr); }
  .events__copy, .events__block { width: 100%; min-width: 0; }
  .events__copy, .events__block, .stat-grid > div { min-width: 0; }
  .calendar__cell { padding: 20px 0 20px 20px; }
  .calendar__actions { grid-column: 1; padding-left: 20px; }

  .community { padding: 0; min-height: 916px; }
  .community__card { min-height: 916px; border-radius: 0; display: block; }
  .community__inner { padding: 32px 20px 0; }
  .community__media { left: -20px; width: calc(100% + 40px); height: 320px; top: 140px; }
  .community__panel { width: 100%; margin-top: 300px; }
  .community__panel p { font-size: 20px; line-height: 28px; }
  .community__cta { position: static; margin: 40px 20px 24px; flex-direction: column; align-items: flex-start; }

  .faq { padding: 56px 0; }
  .faq__main { gap: 24px; margin: 24px 0; }
  .accordion__btn { font-size: 24px; line-height: 30px; }
  .faq__photo-a, .faq__photo-b { height: 240px; margin-bottom: 16px; }

  .site-footer { padding: 56px 0; }
  /* footer (7166:5298): one column, rows on a 66px pitch, no rule above */
  .site-footer { padding: 0; }
  .site-footer .stage { padding-top: 0; min-height: 0; }
  .footer__grid {
    grid-template-columns: 1fr; gap: 0;
    border-top: 0; padding-top: 60px;
  }
  .footer__nav, .footer__contact, .footer__social { gap: 0; }
  .footer__col--divide { border-left: 0; padding-left: 0; }
  .footer__contact { padding-bottom: 0; }
  .footer__social { padding-top: 0; }
  .footer__map { margin-top: 40px; }
  .footer__map img { width: 100%; height: 300px; }
  .footer__pin { left: 45%; top: 32%; width: 40px; height: 50px; }

  /* Long CTA labels are wider than a 375px gutter, so let them wrap. */
  .btn { padding: 18px 20px; white-space: normal; text-align: center; }


  /* ---- Figma's mobile frame is a different composition, not a restack ----
     Homepage Mobile (7166:4943) consistently drops the decorative imagery and
     leads with the headline. These follow it section by section. */

  /* intro (7166:4963): the oversized 55 is a desktop flourish; mobile shows
     the two photographs side by side instead */
  .intro__figure { display: none; }
  .intro__photo-a, .intro__photo-b {
    order: 2; width: calc(50% - 5px); height: 200px; margin: 42px 0 0;
  }
  .intro__photo-b { order: 3; }
  .intro .stage { flex-flow: row wrap; gap: 0 10px; }
  .intro__head { order: 1; flex: 1 0 100%; }

  /* about (7166:4974): no photograph above the lede */
  .about__photo { display: none; }

  /* report (7166:5736): copy only, the collage is dropped */
  .report__collage { display: none; }

  /* stories (7166:5120): label, lede, pull quote, photograph, pager. The two
     wrappers dissolve so all five can be ordered in one column. */
  .stories__inner { display: flex; flex-direction: column; gap: 42px; padding: 60px 0; }
  .stories__head, .stories__body { display: contents; }
  .stories__head > .t-eyebrow { order: 1; }
  .stories__lede { order: 2; font-size: 24px; line-height: 30px; }
  .quote { order: 3; margin-bottom: -20px; }
  .stories__media { order: 4; }
  .stories__frame { height: 260px; }

  /* newsroom (7166:5149): one slide, and the story sits above its image */
  .newsroom__slide-b { display: none; }
  .newsroom .stage { display: flex; flex-direction: column; }
  .newsroom__label { order: 1; }
  .newsroom__intro { order: 2; }
  .newsroom__lead { order: 3; }
  .newsroom__slide-a { order: 4; }
  .newsroom .dots { order: 5; }

  /* faq (7166:5249): tabs and questions only */
  .faq__photo-a, .faq__photo-b { display: none; }

  /* community (7166:5234): the arc sits at the top, the copy is body size and
     ranged left, and the tab strip scrolls rather than clipping its last tab.
     Figma draws a dropdown here — see FIGMA-ANIMATIONS.md. */
  .community__card { display: flex; flex-direction: column; }
  .community__media {
    position: absolute; left: 3px; top: -18px;
    width: 370px; height: 468px; margin: 0; overflow: hidden;
  }
  .community__media img { width: 100%; height: 100%; object-fit: fill; }
  .community__inner { position: relative; z-index: 2; padding: 200px 16px 0; }
  .community__panel {
    width: 100%; margin: 0; text-align: left; align-items: flex-start; gap: 18px;
  }
  /* the pill dropdown stands in for the eyebrow on the mobile frame */
  .community__panel .t-eyebrow { display: none; }
  .community__panel p[data-panel] { font-size: 16px; line-height: 24px; }
  /* Figma draws the four membership tabs as a pill dropdown on mobile
     (7166:5234), not a strip — a strip clips its last tab at 375px. */
  .community .tabs {
    position: relative; display: block; width: auto; margin: 0 0 20px;
    border: 0; align-self: flex-start;
  }
  .community .tabs button {
    display: none; width: 100%; padding: 8px 34px 8px 16px; opacity: 1;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: 100px;
    font-family: var(--font-mono); font-size: 13px; line-height: 20px;
    text-align: left; white-space: nowrap; background: rgba(255, 255, 255, .1);
  }
  .community .tabs button[aria-selected="true"] { display: block; }
  .community .tabs button[aria-selected="true"]::after {
    content: ""; position: absolute; right: 14px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px; border: solid #FFFFFF;
    border-width: 0 1.4px 1.4px 0; transform: rotate(45deg);
  }
  .community .tabs.is-open button { display: block; margin-bottom: 6px; }
  .community .tabs.is-open button::after { display: none; }
  .community__cta { position: absolute; left: 16px; right: 16px; top: 598px; bottom: auto; min-height: 258px; margin: 0; padding: 23px; }

  /* ---- mobile type scale, read off Homepage Mobile (7166:4943) ----------
     Figma re-sizes almost every run at this breakpoint; these are its values,
     not interpolations. */
  .t-h1 { font-size: 54px; line-height: 54px; }
  .btn  { font-size: 14px; }

  .hero__title { top: 164px; }
  .hero__aside { top: 358px; }
  .hero__aside p { font-size: 16px; line-height: 24px; }

  .intro__copy { font-size: 18px; line-height: 26px; }

  .about__lede { font-size: 32px; line-height: 38px; }
  .stat-card p { font-size: 16px; line-height: 24px; }

  .policy__copy h2 { font-size: 32px; line-height: 35px; font-weight: 400; }
  .policy__lede { font-size: 18px; line-height: 26px; }
  .stat-grid dt { font-size: 36px; line-height: 56px; }
  .stat-grid dd { font-size: 16px; line-height: 24px; }

  .report__copy h2 { font-size: 32px; line-height: 35px; }
  .report__copy p  { font-size: 18px; line-height: 26px; }

  .membership__lede { font-size: 24px; line-height: 29px; }
  .partner-program p { font-size: 18px; line-height: 26px; }

  .stories__lede { font-size: 32px; line-height: 35px; }
  .quote blockquote { font-size: 22px; line-height: 22px; }
  .quote__by { font-size: 14px; line-height: 24px; }

  .newsroom__intro { font-size: 18px; line-height: 26px; }
  .newsroom__lead h2 { font-size: 32px; line-height: 35px; }

  .events__copy h2 { font-size: 42px; line-height: 46px; }
  .events__copy p  { font-size: 16px; line-height: 24px; }

  .community__panel p[data-panel] {
    font-family: var(--font-display); font-weight: 500;
    font-size: 18px; line-height: 22px;
  }

  .accordion__btn { font-size: 32px; line-height: 35px; }
  .accordion__panel p { font-size: 16px; line-height: 24px; }

  .chat-fab { right: 16px; bottom: 16px; width: 60px; height: 60px; }
  .chat-panel { right: 16px; left: 16px; bottom: 92px; width: auto; }
}

@media (max-width: 767px) {
  .globe__canvas { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   22. Motion
   Figma specifies motion two ways: a prototype chain of ON_CLICK
   SMART_ANIMATE links (2000ms, EASE_IN_AND_OUT) between the section frames,
   and "staging" copies of each neighbouring section parked off-frame at
   opacity .1 — the from-state those Smart Animates tween out of. On the web
   that reads as scroll-triggered reveals, which is what this does.
   Everything here is additive: with JS off, or with reduced motion on, the
   page renders in its final state.
   -------------------------------------------------------------------------- */
:root {
  --anim-dur: 900ms;
  --anim-ease: cubic-bezier(.4, 0, .2, 1);   /* Figma EASE_IN_AND_OUT */
}

.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-from, 28px));
  transition: opacity var(--anim-dur) var(--anim-ease),
              transform var(--anim-dur) var(--anim-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Depth pass. "The image and the 55 … having a slightly different scrolling
   speed gives you a sense of depth" — Jamie Attfield, 2026-08-14 hi-fi review. */
.js-anim [data-parallax] { will-change: transform; }

/* Hero slide sequence. Figma V1 chains the hero frames with SMART_ANIMATE on
   ON_CLICK and AFTER_TIMEOUT; the transition is a vertical wipe, the incoming
   plate riding up over the outgoing one. V2 carries two plates and five dots. */
.hero__media { overflow: hidden; }
/* A slide is the plate *and* its copy: Figma's animation frames move the
   headline, lede and CTA up with the image, not just the photograph. */
.hero__slide { position: absolute; inset: 0; }
.hero__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Slide 4 is the "gradient blue" treatment: Figma stacks the particle plate over a
   blue gradient with a LINEAR_DODGE (additive) blend, so the particles light it up
   instead of sitting on black. plus-lighter is the additive blend; screen is the
   fallback where it is missing. */
.hero__slide--blue { background: linear-gradient(296.565deg, #479DFF 0%, #163677 100%); isolation: isolate; }
.hero__slide--blue > img { mix-blend-mode: screen; }
@supports (mix-blend-mode: plus-lighter) {
  .hero__slide--blue > img { mix-blend-mode: plus-lighter; }
}
.hero__slide .stage { position: relative; z-index: 1; height: 800px; }
.js-anim .hero__slide {
  z-index: 1; transform: translateY(100%);
  transition: transform 1400ms var(--anim-ease);
}
.js-anim .hero__slide.is-current { z-index: 2; transform: none; }

.hero__dots button { position: relative; }

/* Map markers. The design draws each marker as a solid core inside a 50%
   halo — the halo is the resting frame of a locator ping. */
.js-anim .marker i::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45); opacity: 0;   /* keyframes own opacity */
  animation: marker-ping 2.6s var(--anim-ease) infinite;
}
.js-anim .marker:nth-child(2) i::before { animation-delay: .4s; }
.js-anim .marker:nth-child(3) i::before { animation-delay: .8s; }
.js-anim .marker:nth-child(4) i::before { animation-delay: 1.2s; }
.js-anim .marker:nth-child(5) i::before { animation-delay: 1.6s; }
@keyframes marker-ping {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* The globe turns for real once the canvas is up: the still stays as the
   no-JS / reduced-motion frame and as the canvas's own backdrop-free base. */
.globe__canvas {
  /* left/top/width/height are set from the still's box by globe.js, so the
     canvas lands correctly in the desktop and the mobile layouts alike. */
  position: absolute; pointer-events: none;
}
.globe--live img { opacity: 0; pointer-events: none; }   /* the still must not start a native image drag */
.globe--live { -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.globe--live { cursor: grab; pointer-events: auto; }
.globe--live.is-grabbing { cursor: grabbing; }
.globe__markers .marker { transition: opacity 180ms linear; }

/* The member-community ring. Figma ships a screen recording of cards orbiting;
   this is the orbit itself, a 3D carousel laid out and turned by
   js/wfdsa.js. The recorded still stays
   underneath for reduced motion and no-JS. */
.community__ring { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.community--orbit .community__ring { display: block; }
.community__spin {
  position: absolute; left: 50%; top: 564px; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
}
.community__ring .community__card-img {
  position: absolute; left: 0; top: 0;
  width: 247px; height: 245px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 24, 56, .30);
}
.community__ring img { width: 100%; height: 100%; object-fit: cover; }
.community--orbit .community__media { opacity: 0; }

/* Member community arc. "This copy would simply refresh. This animation would
   sort of sustain in this area" — Jamie Attfield, 2026-08-14. The arc keeps
   turning while the tab copy swaps underneath it. */
.js-anim .community__media img { animation: arc-drift 36s ease-in-out infinite; }
@keyframes arc-drift {
  0%, 100% { transform: translateX(0)     scale(1); }
  50%      { transform: translateX(-14px) scale(1.018); }
}
.community__panel p[data-panel] { transition: opacity 260ms var(--anim-ease); }
.community__panel p[data-panel].is-swapping { opacity: 0; }

/* Counters hold their final width so the layout never jumps while ticking. */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js-anim [data-parallax] { transform: none !important; }
  .js-anim .hero__slide { transition: none; }
  .hero__dots button::after { display: none; }
  .js-anim .marker i::before,
  .js-anim .community__media img { animation: none; }
}

/* --------------------------------------------------------------------------
   23. Globe drill-down
   From Figma Animation › Globe (7376:2879 → 3002 → 3057 → 2932): choose a
   region, then a country, then read its figures. The stat grid and the
   deeper portal copy belong to the drilled-in states, which is why they sit
   hidden on the resting frame.
   -------------------------------------------------------------------------- */
.marker { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.marker span { transition: opacity .3s var(--anim-ease); }
.globe.is-drilled .marker:not(.is-active) { opacity: 0 !important; pointer-events: none; }
.marker.is-active i { width: 34px; height: 34px; }
.marker.is-active i::after { left: 9px; top: 9px; width: 16px; height: 16px; }
.marker.is-active span { opacity: 0; }

.globe__stats {
  position: absolute; left: 116px; top: 502px; z-index: 3;
  display: grid; grid-template-columns: repeat(2, 316px); gap: 32px;
  margin: 0; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--anim-ease);
}
.globe.is-drilled .globe__stats { opacity: 1; }
.globe__stats > div { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .9); }
.globe__stats dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: 36px; line-height: 56px; color: #FFFFFF;
}
.globe__stats dd { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: #FFFFFF; }

.globe__drill {
  /* the design puts the region panel and its table at x=871 on the 1604 frame */
  position: absolute; left: 50%; margin-left: 71px; top: 528px; z-index: 4;
  width: 560px; color: #FFFFFF;
  padding: 18px 22px 22px; border-radius: var(--radius);
  background: rgba(8, 26, 62, .34); backdrop-filter: blur(3px);
}
.globe__back {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--on-dark-soft);
}
.globe__back:hover { color: #FFFFFF; }
.globe__region {
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 30px;
}
.globe__countries { margin-top: 10px; border-left: 1px solid rgba(255, 255, 255, .35); }
.globe__countries li { margin: 0; }
.globe__countries button {
  display: flex; align-items: center; justify-content: space-between;
  width: 250px; padding: 9px 0 9px 18px;
  font-size: 18px; line-height: 26px; color: var(--on-dark-strong);
  transition: color .2s ease;
}
.globe__countries button:hover { color: #FFFFFF; }
.globe__countries button::after { content: "›"; opacity: .7; font-size: 20px; }
.globe__countries button[disabled] { opacity: .45; cursor: default; }
.globe__countries button[disabled]::after { content: ""; }

.globe__table { margin-top: 14px; }
.globe__table table { width: 530px; border-collapse: collapse; }
.globe__table th, .globe__table td {
  padding: 9px 0; text-align: left; font-weight: 400;
  font-size: 13px; line-height: 18px; color: var(--on-dark-strong);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.globe__table th:first-child, .globe__table td:first-child { width: 224px; color: var(--on-dark); }
.globe__table td:not(:first-child), .globe__table th:not(:first-child) { width: 153px; }
.globe__table thead th { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.globe__table .is-empty { padding-top: 16px; font-style: italic; color: var(--on-dark-soft); }

@media (max-width: 1023px) {
  .globe__stats { display: none; }
  .globe__drill { position: static; width: auto; margin: 24px 16px 0; }
  .globe__table table, .globe__countries button { width: 100%; }
}