:root {
  --ink: #170747;
  --blue: #250e62;
  --purple: #7734ac;
  --pink: #e31c79;
  --paper: #f7f5fa;
  --lavender: #e9e6ef;
  --line: rgba(37, 14, 98, 0.16);
  --muted: #676078;
  --white: #fff;
  --font-head: "Aptos Display", "Aptos", Arial, Helvetica, sans-serif;
  --font: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--ink); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--font); }
.lobby {
  height: 100svh;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr) 44px;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #ff81bb; outline-offset: 3px; }
h1, h2, strong { font-family: var(--font-head); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 16px;
  padding: 10px 14px;
  color: var(--blue);
  background: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .18s;
}
.skip-link:focus { transform: none; }
.site-head {
  position: relative;
  z-index: 20;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 68px);
  color: #fff;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.brand svg { width: 104px; height: auto; flex: none; }
.brand svg path { fill: #fff; }
.brand-rule { width: 1px; height: 26px; background: rgba(255,255,255,.35); }
.global-nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 40px); }
.global-nav a {
  position: relative;
  padding: 11px 0;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .18s;
}
.global-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s;
}
.global-nav a:hover { color: #fff; }
.global-nav a:hover::after { transform: scaleX(1); }
.menu-toggle {
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  width: 17px;
  height: 2px;
  background: #fff;
  transition: transform .2s;
}
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.area-menu-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  display: none;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.area-menu-toggle span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: opacity .2s, transform .2s;
}
.area-menu-toggle span:first-child { transform: translateY(-5px); }
.area-menu-toggle span:last-child { transform: translateY(5px); }
.area-menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.area-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.area-menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.lobby main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(400px, 42vw) minmax(0, 1fr);
  overflow: hidden;
  background: var(--paper);
}
.lobby-intro {
  --hero-glow: rgba(227,28,121,.26);
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 118px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 6vw, 88px) clamp(34px, 5vw, 76px);
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 96%, var(--hero-glow), transparent 27%),
    linear-gradient(145deg, var(--ink) 0%, var(--blue) 58%, #45127b 100%);
  background-size: 34px 34px, 34px 34px, auto, auto;
  transition: background .35s;
}
.lobby-intro::before,
.lobby-intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.lobby-intro::before {
  z-index: 1;
  width: 44%;
  aspect-ratio: 1;
  top: -24%;
  right: -14%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(255,255,255,.025),
    0 0 0 64px rgba(255,255,255,.018);
}
.lobby-intro::after {
  width: 2px;
  height: 150%;
  right: -1px;
  bottom: 0;
  background: rgba(255,255,255,.28);
  transform: rotate(8deg);
  transform-origin: bottom;
  box-shadow: 32px 0 70px rgba(23,7,71,.3);
}
.eyebrow { margin: 0 0 14px; color: var(--pink); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.lobby-intro .eyebrow { color: #ff8abd; }
/* The headline is the approved tagline — a full sentence rather than the two
   stacked words it replaced, so it is set at a size a sentence can hold its
   line length at instead of the poster size the old two-word hero used. */
.lobby-intro h1 { position: relative; z-index: 2; max-width: 660px; margin: 0 0 18px; font-size: clamp(26px, 2.2vw, 38px); line-height: 1.06; letter-spacing: -.03em; }
.lobby-intro h1 span { display: block; color: #ff76b5; }
.lobby-intro > p:nth-of-type(2) { position: relative; z-index: 2; max-width: 560px; margin: 0; color: #d9d3e5; font-size: clamp(13px, .95vw, 15px); line-height: 1.55; }
.hero-note {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-note span { width: 28px; height: 1px; background: var(--pink); }
.rotating-suggestion {
  position: relative;
  z-index: 3;
  width: min(100%, 460px);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(22px, 3.5vh, 38px);
  padding: 10px 15px 10px 17px;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(7,0,28,.22);
  transition: transform .2s, box-shadow .2s;
}
.rotating-suggestion:hover {
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(7,0,28,.3);
  transform: translateY(-3px);
}
.rotating-suggestion > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rotating-suggestion em {
  color: var(--pink-ink, #c31b75);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rotating-suggestion strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
}
.rotating-suggestion strong.is-changing {
  opacity: 0;
  transform: translateY(5px);
}
.rotating-suggestion > b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  border-radius: 50%;
  background: var(--pink);
  font-size: 15px;
}
.charlie-portal {
  position: relative;
  z-index: 3;
  max-width: 560px;
  min-height: 142px;
  display: grid;
  grid-template-columns: 94px 1fr;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  margin-top: 14px;
  padding: 20px 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 28px 28px 92px 28px;
  background:
    radial-gradient(circle at 12% 50%, rgba(227,28,121,.34), transparent 30%),
    linear-gradient(125deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  backdrop-filter: blur(12px);
  transition: transform .22s, border-color .22s, background .22s;
}
.charlie-portal::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -74px;
  top: -112px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 56px rgba(255,255,255,.02);
}
.charlie-portal:hover {
  color: #fff;
  border-color: rgba(255,255,255,.54);
  background:
    radial-gradient(circle at 12% 50%, rgba(227,28,121,.4), transparent 32%),
    linear-gradient(125deg, rgba(255,255,255,.15), rgba(119,52,172,.18));
  transform: translateY(-4px);
}
.charlie-orb {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffb5d7, var(--pink) 36%, #5b1a91 78%);
  box-shadow: 0 0 0 10px rgba(227,28,121,.11), 0 16px 34px rgba(8,0,32,.32);
}
.charlie-orb::before,
.charlie-orb::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  animation: portal-pulse 2.8s ease-out infinite;
}
.charlie-orb::after { inset: -20px; animation-delay: .9s; }
.charlie-orb i { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.charlie-orb svg { position: relative; z-index: 1; width: 30px; height: 30px; fill: #fff; }
.charlie-orb svg path { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
@keyframes portal-pulse {
  0% { opacity: .8; transform: scale(.86); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
.charlie-portal-copy { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.charlie-portal-copy small {
  display: block;
  margin-bottom: 5px;
  color: #ff9cc8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.charlie-portal-copy strong { font-size: clamp(24px, 2.2vw, 33px); line-height: 1; }
.charlie-portal-copy > span:not(.charlie-action) { margin-top: 7px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.4; }
.charlie-action {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.38);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.charlie-action b { font-size: 17px; transition: transform .18s; }
.charlie-portal:hover .charlie-action b { transform: translateX(5px); }
.voice-wave {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  height: 28px;
  align-items: center;
  gap: 3px;
  opacity: .3;
}
.voice-wave i { width: 2px; height: 8px; background: #fff; border-radius: 999px; animation: voice-wave 1.4s ease-in-out infinite; }
.voice-wave i:nth-child(2), .voice-wave i:nth-child(6) { height: 14px; animation-delay: .15s; }
.voice-wave i:nth-child(3), .voice-wave i:nth-child(5) { height: 22px; animation-delay: .3s; }
.voice-wave i:nth-child(4) { height: 28px; animation-delay: .45s; }
@keyframes voice-wave { 50% { transform: scaleY(.45); } }
.hero-canvas {
  position: absolute;
  z-index: 1;
  right: -180px;
  bottom: -190px;
  width: min(46vw, 650px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  animation: canvas-turn 28s linear infinite;
}
.hero-canvas::before,
.hero-canvas::after,
.hero-canvas span {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}
.hero-canvas::before { inset: 18%; }
.hero-canvas::after { inset: 36%; background: rgba(227,28,121,.2); }
.hero-canvas span:nth-child(1) { width: 18px; height: 18px; left: 4%; top: 47%; background: var(--pink); border: 0; box-shadow: 0 0 30px rgba(227,28,121,.8); }
.hero-canvas span:nth-child(2) { width: 10px; height: 10px; right: 18%; top: 17%; background: #fff; border: 0; }
.hero-canvas span:nth-child(3) { width: 8px; height: 8px; left: 30%; bottom: 12%; background: #a174cf; border: 0; }
.hero-canvas b {
  position: absolute;
  color: rgba(255,255,255,.56);
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: canvas-counterturn 28s linear infinite;
}
.hero-canvas b:nth-of-type(1) { left: 1%; top: 42%; }
.hero-canvas b:nth-of-type(2) { right: 10%; top: 9%; }
.hero-canvas b:nth-of-type(3) { right: 0; bottom: 31%; }
.hero-canvas b:nth-of-type(4) { left: 24%; bottom: 5%; }
@keyframes canvas-turn { to { transform: rotate(360deg); } }
@keyframes canvas-counterturn { to { transform: rotate(-360deg); } }

.pathways {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background:
    linear-gradient(rgba(37,14,98,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,14,98,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 30px 30px;
}
.pathways-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(390px, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  min-height: clamp(152px, 18vh, 190px);
  overflow: hidden;
  margin: 0;
  padding: clamp(24px, 3vh, 34px) clamp(24px, 4vw, 58px);
  color: #fff;
  background:
    radial-gradient(circle at 78% 120%, rgba(227,28,121,.45), transparent 36%),
    linear-gradient(112deg, #170747 0 58%, #281064 100%);
}
.pathways-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -84px;
  right: -38px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025);
}
.pathways-intro-copy { position: relative; z-index: 2; min-width: 0; }
.pathways-intro .eyebrow { margin: 0 0 8px; color: #ff69b4; writing-mode: initial; transform: none; }
.pathways-intro h2 { margin: 0; font-size: clamp(31px, 3vw, 47px); line-height: .93; letter-spacing: -.045em; }
.pathways-intro h2 em { color: #ff69b4; font-style: normal; }
.pathways-signal {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 12px 1fr 12px 1fr 12px 1fr 12px;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.pathways-signal span {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 3px solid #ff69b4;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255,105,180,.12);
}
.pathways-signal span:nth-of-type(2) { border-color: #e31c79; }
.pathways-signal span:nth-of-type(3) { border-color: #9a67cf; }
.pathways-signal span:nth-of-type(4) { border-color: #fff; }
.pathways-signal i { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.9)); }
.pathways-signal b {
  grid-column: 1 / -1;
  margin-top: 14px;
  color: rgba(255,255,255,.62);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pathways-watermark {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: -27%;
  color: transparent;
  font-size: clamp(86px, 10vw, 160px);
  font-weight: 900;
  letter-spacing: -.08em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.gallery-grid { min-width: 0; flex: 1; display: grid; grid-template-rows: repeat(4, minmax(102px, 1fr)); border-top: 1px solid var(--line); }
.gallery-card {
  --card-accent: var(--purple);
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 48px;
  align-items: center;
  gap: clamp(18px, 3vw, 46px);
  overflow: hidden;
  padding: 0 clamp(24px, 4vw, 58px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  transition: color .22s, background .22s, padding .22s;
}
.gallery-domains { --card-accent: var(--pink-ink, #c31b75); }
.gallery-projects { --card-accent: #522a88; }
.gallery-impact { --card-accent: var(--blue); }
.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.gallery-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--card-accent);
  transform: scaleY(.28);
  transform-origin: bottom;
  transition: transform .28s;
}
.gallery-card:hover { color: #fff; padding-left: clamp(32px, 5vw, 76px); }
.gallery-card:hover::before { transform: scaleX(1); }
.gallery-card:hover::after { background: #fff; transform: scaleY(1); }
.gallery-visual {
  position: absolute;
  z-index: 1;
  right: 7%;
  top: 50%;
  width: 150px;
  height: 150px;
  overflow: hidden;
  opacity: .12;
  transform: translateY(-50%);
  transition: opacity .2s, transform .35s;
}
.gallery-card:hover .gallery-visual { opacity: .28; transform: translateY(-50%) rotate(12deg) scale(1.15); }
.gallery-visual::before,
.gallery-visual::after,
.gallery-visual i {
  content: "";
  position: absolute;
  border: 2px solid var(--card-accent);
}
.gallery-visual::before { width: 96px; height: 96px; left: 24px; top: 24px; border-radius: 50%; }
.gallery-visual::after { width: 76px; height: 76px; right: 22px; top: 34px; transform: rotate(45deg); }
.gallery-visual i { width: 120px; height: 2px; left: 50%; top: 50%; border-width: 2px 0 0; transform: translate(-50%, -50%) rotate(-24deg); }
.gallery-domains .gallery-visual::before { border-radius: 50% 0 50% 50%; transform: rotate(26deg); }
.gallery-projects .gallery-visual::before { border-radius: 8px; transform: rotate(-8deg); }
.gallery-projects .gallery-visual::after { border-radius: 8px; transform: rotate(8deg); }
.gallery-impact .gallery-visual::before { width: 120px; height: 60px; top: 42px; border-radius: 120px 120px 0 0; border-bottom: 0; }
.gallery-impact .gallery-visual::after { border-radius: 50%; }
.gallery-copy { position: relative; z-index: 2; display: contents; }
.gallery-title { position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.gallery-title-icon {
  width: clamp(38px, 3vw, 48px);
  height: clamp(38px, 3vw, 48px);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 32%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent) 8%, white);
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.gallery-title-icon svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gallery-card:hover .gallery-title-icon { color: var(--card-accent); border-color: #fff; background: #fff; transform: rotate(-5deg) scale(1.05); }
.gallery-kicker { color: var(--pink-ink, #c31b75); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.gallery-copy strong { position: relative; z-index: 2; font-size: clamp(34px, 3.8vw, 60px); line-height: .9; letter-spacing: -.055em; }
.gallery-detail { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; gap: 7px; max-width: 520px; }
.gallery-detail > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.45; }
.gallery-card:hover .gallery-kicker, .gallery-card:hover .gallery-detail > span:last-child { color: rgba(255,255,255,.9); }
.gallery-arrow { position: relative; z-index: 2; color: var(--card-accent); }
.gallery-arrow b { display: block; font-size: 26px; line-height: 1; transition: transform .18s; }
.gallery-card:hover .gallery-arrow { color: #fff; }
.gallery-card:hover .gallery-arrow b { transform: translateX(5px); }
.motion-line {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  overflow: hidden;
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.motion-line i { width: clamp(18px, 3vw, 44px); height: 1px; background: var(--line); }

.lobby main:has(.gallery-foundations:hover) .lobby-intro { --hero-glow: rgba(119,52,172,.46); }
.lobby main:has(.gallery-domains:hover) .lobby-intro { --hero-glow: rgba(227,28,121,.42); }
.lobby main:has(.gallery-projects:hover) .lobby-intro { --hero-glow: rgba(154,103,207,.38); }
.lobby main:has(.gallery-impact:hover) .lobby-intro { --hero-glow: rgba(87,53,158,.5); }

footer {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(20px, 4vw, 68px);
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 10px;
}
footer strong { color: var(--blue); }

.area-nav { display: flex; gap: clamp(14px, 2.5vw, 32px); font-size: 11px; font-weight: 700; }
.area-nav a { padding: 8px 0; color: #c9c2d8; border-bottom: 2px solid transparent; }
.area-nav a:hover, .area-nav a[aria-current="page"] { color: #fff; border-color: var(--pink); }
.area-page main {
  min-height: calc(100vh - 118px);
  padding: clamp(20px, 2.2vw, 34px) clamp(20px, 5vw, 78px) clamp(34px, 5vw, 76px);
}
.area-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
/* The title track is sized by the title. `minmax(250px, ...)` floored it at a width
   the longest area name does not fit in — "Foundations" at the top of its clamp is
   wider than 250px — and a single word has no wrapping opportunity, so the heading
   spilled straight over the summary beside it. `min-content` lets the track grow to
   the word instead, and the .8fr keeps the original proportions once it fits. */
.area-intro { display: grid; grid-template-columns: minmax(min-content, .8fr) minmax(300px, 1.2fr) auto; align-items: end; gap: 20px 48px; margin-bottom: clamp(34px, 5vw, 68px); }
.area-intro .eyebrow { grid-column: 1 / -1; margin: 0; }
.area-intro h1 { margin: 0; font-size: clamp(54px, 7.2vw, 110px); line-height: .82; letter-spacing: -.065em; }
.area-intro > p { max-width: 640px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
/* 220px is a floor, not a cap: an explicit min-width replaces the automatic
   minimum size, so on its own it let the grid hand this pill a track narrower
   than the one line of text inside it. */
.charlie-cta { min-width: max(220px, min-content); white-space: nowrap; display: inline-flex; justify-content: space-between; gap: 20px; padding: 14px 18px; color: #fff; background: linear-gradient(135deg, var(--pink), var(--purple)); border-radius: 999px; font-size: 12px; font-weight: 800; }
.charlie-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(119,52,172,.2); }
.area-foundations .area-intro { margin-bottom: 24px; }
/* Foundations and Impact ask their suggested question on the same drafted
   card Domains does. The three strips keep their own inner markup, ids and
   rotation script; only the ground they are drawn on is shared, which is what
   made the three secondary pages look like three different sites. The card
   itself is declared once, with `.domain-question`, further down. */
.foundation-question-signal { position: relative; width: 64px; height: 60px; display: grid; place-items: center; }
.foundation-question-signal i { position: absolute; border: 1px solid color-mix(in srgb, var(--blueprint) 34%, transparent); border-radius: 50%; animation: foundation-signal 3s ease-out infinite; }
.foundation-question-signal i:first-child { width: 60px; height: 60px; }
.foundation-question-signal i:nth-child(2) { width: 46px; height: 46px; animation-delay: .35s; }
.foundation-question-signal i:nth-child(3) { width: 32px; height: 32px; animation-delay: .7s; }
.foundation-question-signal b { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blueprint); font-size: 15px; }
.foundation-question-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.foundation-question-copy small { display: flex; align-items: center; gap: 8px; color: var(--pink-ink, #c31b75); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.foundation-question-copy small > i { width: 7px; height: 7px; border-radius: 50%; background: #39a675; box-shadow: 0 0 0 4px rgba(57,166,117,.12); }
.foundation-question strong { overflow: hidden; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; transition: opacity .18s, transform .18s; }
.foundation-question strong.is-changing { opacity: 0; transform: translateY(5px); }
.foundation-question-copy > span { color: rgba(24,63,115,.85); font-size: 8px; letter-spacing: .04em; }
.foundation-question-action { min-width: 120px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.foundation-question-action small { font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.foundation-question-action b { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--pink); font-size: 16px; transition: transform .2s; }
.foundation-question-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blueprint), var(--pink)); transform-origin: left; animation: foundation-question-progress 4.2s linear infinite; }
.foundation-question:hover .foundation-question-action b { transform: translateX(3px); }
@keyframes foundation-signal {
  0% { opacity: .85; transform: scale(.78); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes foundation-question-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.foundation-system {
  /* The section itself, its heading and its grid are declared with the
     Domains blueprint further down; what is left here is the Foundations
     page's own furniture. */
  isolation: isolate;
}
.foundation-core small { display: flex; align-items: center; gap: 8px; }
.foundation-core small i { width: 7px; height: 7px; background: #39a675; border-radius: 50%; box-shadow: 0 0 0 4px rgba(57,166,117,.12); animation: dashboard-pulse 1.8s ease-in-out infinite; }
@keyframes dashboard-pulse { 50% { opacity: .45; } }
.foundation-pipeline {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 2px 16px;
  color: var(--blueprint);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.foundation-pipeline i { position: relative; height: 1px; overflow: hidden; background: rgba(24,63,115,.24); }
.foundation-pipeline i b { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--pink), transparent); animation: data-run 2.6s linear infinite; }
.foundation-pipeline i:nth-of-type(2) b { animation-delay: .6s; }
.foundation-pipeline i:nth-of-type(3) b { animation-delay: 1.2s; }
@keyframes data-run { to { left: 110%; } }
/* The card is a blueprint room, declared with `.domain-room`. What stays here
   is the part Domains has no equivalent of: the published figures each
   foundation carries, which are the evidence on the card and are kept rather
   than dropped to make the two pages match. */
.foundation-visual { position: relative; z-index: 1; width: 100%; height: 94px; display: flex; gap: 7px; overflow: hidden; margin-top: auto; padding: 11px; border: 1px solid rgba(24,63,115,.2); background: rgba(255,255,255,.72); transition: color .2s, border-color .2s, background .2s; }
.foundation-visual::before { content: ""; position: absolute; inset: 0; opacity: .5; background: linear-gradient(rgba(24,63,115,.07) 1px, transparent 1px); background-size: 100% 18px; }
.foundation-card:hover .foundation-visual { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.14); }
.foundation-metric { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding-right: 5px; border-right: 1px solid rgba(24,63,115,.14); }
.foundation-card:hover .foundation-metric { border-right-color: rgba(255,255,255,.28); }
.foundation-metric:last-child { border-right: 0; }
.foundation-metric b { color: var(--accent); font-size: clamp(20px, 1.7vw, 28px); line-height: 1; }
.foundation-metric small { margin-top: 6px; color: rgba(24,63,115,.72); font-size: 6px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.foundation-card:hover .foundation-metric b,
.foundation-card:hover .foundation-phase-count { color: #fff; }
.foundation-card:hover .foundation-metric small,
.foundation-card:hover .foundation-trait,
.foundation-card:hover .foundation-visual-housing-production > small { color: rgba(255,255,255,.9); }
.foundation-visual-mission-driven-innovation { align-items: center; flex-direction: column; justify-content: center; }
.foundation-trait { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; color: rgba(24,63,115,.85); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.foundation-trait i { width: 8px; height: 8px; flex: none; border: 2px solid var(--pink); border-radius: 50%; box-shadow: 0 0 0 4px rgba(227,28,121,.08); }
.foundation-visual-hgi-lab { align-items: stretch; }
.foundation-visual-hgi-lab .foundation-metric b { font-size: clamp(30px, 2.4vw, 42px); }
.foundation-visual-housing-production { flex-direction: column; justify-content: center; }
.foundation-phase-count { position: relative; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.foundation-phases { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.foundation-phases i { height: 7px; background: linear-gradient(90deg, var(--purple), var(--pink)); }
.foundation-visual-housing-production > small { position: relative; overflow: hidden; color: rgba(24,63,115,.72); font-size: 6px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
dialog { width: min(620px, calc(100vw - 32px)); padding: clamp(28px, 5vw, 54px); color: var(--ink); border: 0; border-radius: 24px; box-shadow: 0 24px 70px rgba(23,7,71,.26); }
dialog::backdrop { background: rgba(23,7,71,.74); backdrop-filter: blur(5px); }
dialog h2 { margin: 0 44px 18px 0; padding-block: .08em; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.045em; overflow-wrap: anywhere; }
dialog > p:not(.eyebrow) { color: #49425b; font-size: 16px; line-height: 1.65; }
dialog > small { display: block; margin-top: 28px; color: var(--muted); }
.dialog-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px; }
.modal-dialog-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.modal-charlie-head-link {
  --charlie-accent: var(--pink-ink, #c31b75);
  --charlie-accent-soft: #ffd4e8;
  position: relative;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px 9px 13px;
  overflow: hidden;
  color: var(--ink);
  border: 2px solid #fff;
  border-radius: 18px;
  background: linear-gradient(110deg, #fff 0%, #fff8fc 62%, var(--charlie-accent-soft) 130%);
  box-shadow: 0 0 0 4px rgba(227,28,121,.14), 0 15px 30px rgba(0,0,0,.22);
  transition: transform .2s, box-shadow .2s;
}
.modal-charlie-head-link::after { position: absolute; right: -28px; bottom: -48px; width: 120px; height: 120px; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--charlie-accent) 28%, transparent), transparent 68%); pointer-events: none; }
.modal-charlie-head-link:hover { color: var(--ink); box-shadow: 0 0 0 5px rgba(227,28,121,.2), 0 20px 38px rgba(0,0,0,.28); transform: translateY(-3px) scale(1.01); }
.modal-charlie-head-mark { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: linear-gradient(145deg, var(--charlie-accent), #6c1a91); box-shadow: 0 0 0 5px color-mix(in srgb, var(--charlie-accent) 14%, transparent), 0 8px 18px color-mix(in srgb, var(--charlie-accent) 35%, transparent); font-size: 17px; font-weight: 900; }
.modal-charlie-head-mark::before { position: absolute; inset: -7px; content: ""; border: 1px solid color-mix(in srgb, var(--charlie-accent) 46%, transparent); border-radius: 50%; animation: modal-charlie-signal 2.4s ease-out infinite; }
.modal-charlie-head-link > span:nth-child(2) { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.modal-charlie-head-link small { color: var(--charlie-accent); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.modal-charlie-head-link strong { font-size: 13px; line-height: 1.1; white-space: nowrap; }
.modal-charlie-head-link > b { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 7px 14px rgba(37,14,98,.22); font-size: 16px; transition: transform .2s; }
.modal-charlie-head-link:hover > b { transform: translateX(2px); }
.modal-charlie-head-impact { --charlie-accent: #17866d; --charlie-accent-soft: #c9f7e9; box-shadow: 0 0 0 4px rgba(81,216,179,.14), 0 15px 30px rgba(0,0,0,.22); }
.modal-charlie-head-impact .modal-charlie-head-mark { background: linear-gradient(145deg, #34cda7, #0c6858); }
@keyframes modal-charlie-signal {
  0% { opacity: .8; transform: scale(.72); }
  75%, 100% { opacity: 0; transform: scale(1.22); }
}
.area-foundations dialog {
  width: min(1360px, calc(100vw - 32px));
  max-height: min(820px, calc(100svh - 32px));
  padding: 0;
  overflow: auto;
  border-radius: 26px;
}
.foundation-dialog-head {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(25px, 4vw, 42px) clamp(24px, 5vw, 54px) 22px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 90% 0, rgba(227,28,121,.3), transparent 32%),
    linear-gradient(135deg, #170747, #250e62);
}
.foundation-dialog-head .eyebrow { margin-bottom: 10px; color: #ff9cc8; }
.foundation-dialog-head > div:first-child { min-width: 0; }
.foundation-dialog-head h2 { max-width: 760px; margin: 0; padding-block: .08em; font-size: clamp(34px, 5vw, 62px); line-height: 1.06; overflow-wrap: anywhere; }
.foundation-dialog-head .dialog-close { position: static; flex: none; color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.foundation-dialog-lede { width: 100%; max-width: none; margin: 0; padding: 28px clamp(24px, 5vw, 54px) 22px; box-sizing: border-box; color: #49425b; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; }
.modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 clamp(24px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.modal-stats div {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.modal-stats div:nth-child(4n) { border-right: 0; }
.modal-stats div:nth-last-child(-n+3) { border-bottom: 0; }
.modal-stats strong { color: var(--purple); font-size: clamp(28px, 4vw, 48px); line-height: .9; }
.modal-stats span { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.modal-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 clamp(24px, 5vw, 54px);
}
.modal-flow div { position: relative; min-height: 164px; padding: 28px 20px 20px; border: 1px solid var(--line); border-right: 0; background: #fff; }
.modal-flow div:first-child { border-radius: 16px 0 0 16px; }
.modal-flow div:last-child { border-right: 1px solid var(--line); border-radius: 0 16px 16px 0; }
.modal-flow div::after { content: "→"; position: absolute; z-index: 2; top: 20px; right: -11px; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--pink); font-size: 11px; }
.modal-flow div:last-child::after { display: none; }
.modal-flow div > span { width: 10px; height: 10px; display: block; margin-bottom: 28px; border: 3px solid var(--pink); border-radius: 50%; box-shadow: 0 0 0 7px rgba(227,28,121,.08); }
.modal-flow strong { display: block; font-size: 16px; line-height: 1.1; }
.modal-flow small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.modal-feedback { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px clamp(24px, 5vw, 54px) 0; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.modal-feedback span { font-size: 18px; }
.modal-network {
  min-height: 300px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  margin: 0 clamp(24px, 5vw, 54px);
  padding: 28px;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(135deg, #170747, #35106f);
  background-size: 24px 24px, 24px 24px, auto;
}
.modal-network-core { position: relative; width: 170px; height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-self: center; text-align: center; color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #9b55ce, #4a197f 68%); box-shadow: 0 0 0 14px rgba(255,255,255,.035); }
.modal-network-core::after { content: ""; position: absolute; left: 100%; width: clamp(32px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, #ff76b5, rgba(255,255,255,.15)); }
.modal-network-core strong { font-size: 30px; }
.modal-network-core span { max-width: 110px; margin-top: 6px; color: rgba(255,255,255,.86); font-size: 9px; line-height: 1.35; }
.modal-network-functions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-network-functions div { min-height: 100px; padding: 15px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.07); }
.modal-network-functions strong { display: block; color: #ff9cc8; font-size: 12px; }
.modal-network-functions small { display: block; margin-top: 7px; color: rgba(255,255,255,.6); font-size: 9px; line-height: 1.4; }
.modal-regions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px clamp(24px, 5vw, 54px) 0; }
.modal-regions span { padding: 8px 11px; color: var(--purple); border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 9px; font-weight: 800; }
.modal-regions span:last-child { color: #fff; border-color: var(--pink-ink, #c31b75); background: var(--pink-ink, #c31b75); }
.modal-lifecycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 clamp(24px, 5vw, 54px);
}
.modal-lifecycle div { position: relative; min-height: 150px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lifecycle-node { width: 12px; height: 12px; margin-bottom: 18px; border: 3px solid var(--pink); border-radius: 50%; box-shadow: 0 0 0 6px rgba(227,28,121,.08); }
.modal-lifecycle strong { font-size: 14px; line-height: 1.1; }
.modal-lifecycle small { margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.modal-lifecycle b { margin-top: auto; padding-top: 12px; color: var(--purple); font-size: 9px; line-height: 1.3; }
.modal-lifecycle em { margin-top: 6px; color: var(--pink-ink, #c31b75); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.modal-more {
  margin: 22px clamp(24px, 5vw, 54px) 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.modal-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  color: var(--purple);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  list-style: none;
  text-transform: uppercase;
}
.modal-more > summary::-webkit-details-marker { display: none; }
.modal-more > summary span { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--purple); font-size: 15px; transition: transform .2s; }
.modal-more[open] > summary span { transform: rotate(45deg); }
.modal-more > section { padding: 0 18px 18px; }
.modal-more > section + section { padding-top: 18px; border-top: 1px solid var(--line); }
.modal-more h3 { margin: 0 0 12px; color: var(--ink); font-size: 15px; }
/* minmax(0, 1fr), not 1fr: a plain 1fr track cannot shrink below the longest
   word in it, so on a narrow phone the columns pushed out past the dialog. */
.modal-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.modal-evidence-grid div { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; border-radius: 10px; background: #f4f1f8; }
.modal-evidence-grid strong { color: var(--purple); font-size: 17px; line-height: 1.05; overflow-wrap: break-word; }
.modal-evidence-grid span { margin-top: 7px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.foundation-dialog-takeaway { margin: 24px clamp(24px, 5vw, 54px) 0; padding: 18px 20px; border-left: 4px solid var(--pink); background: #f1edf7; }
.foundation-dialog-takeaway small { color: var(--pink-ink, #c31b75); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.foundation-dialog-takeaway p { margin: 7px 0 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.foundation-evidence-details { margin-top: 20px; padding: 0 clamp(24px, 5vw, 54px) 18px; color: var(--muted); font-size: 8px; }
.foundation-evidence-details summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--purple); font-weight: 800; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.foundation-evidence-details summary::-webkit-details-marker { display: none; }
.foundation-evidence-details summary::before { content: "+"; width: 17px; height: 17px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--purple); font-size: 11px; }
.foundation-evidence-details[open] summary::before { content: "−"; }
.foundation-evidence-details cite { display: block; margin-top: 8px; padding-left: 24px; font-style: normal; }

.area-domains .area-intro { margin-bottom: 24px; }
/* ---------- one drafted secondary page, drawn three times ----------

   Foundations, Domains and Impact are the same kind of page — a suggested
   question, a titled section, and a grid of rooms that each open an evidence
   dialog — and until now each was drawn in its own palette: a purple dashboard
   on Foundations, this blueprint on Domains, a teal flywheel on Impact. The
   three read as three different sites.

   The blueprint is the one the three now share, and it is declared once here
   rather than copied twice. Each page keeps its own class names, so its own
   markup, tests and presenter cues are untouched; what is shared is the
   drawing. Anything genuinely local to a page — Foundations' published
   figures, Impact's stage labels — stays with that page above and below. */
.domain-question,
.foundation-question,
.impact-question {
  --blueprint: #183f73;
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 13px 18px 13px 13px;
  overflow: hidden;
  color: var(--blueprint);
  border: 2px solid var(--blueprint);
  border-radius: 0;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(24,63,115,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,63,115,.045) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: 8px 8px 0 rgba(24,63,115,.1);
}
.domain-question-stamp { height: 60px; display: grid; grid-template-rows: auto 1fr; place-items: center; padding: 7px; color: #fff; background: var(--blueprint); }
.domain-question-stamp small { font-size: 6px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.domain-question-stamp b { font-size: 27px; line-height: 1; }
.domain-question-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.domain-question-copy > small { display: flex; gap: 10px; color: var(--pink-ink, #c31b75); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.domain-question-copy strong { overflow: hidden; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; transition: opacity .18s, transform .18s; }
.domain-question-copy strong.is-changing { opacity: 0; transform: translateX(8px); }
.domain-question-copy > span { color: rgba(24,63,115,.85); font-size: 8px; letter-spacing: .04em; }
.domain-question-send { display: flex; align-items: center; gap: 12px; }
.domain-question-send small { font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.domain-question-send b { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--pink); font-size: 16px; transition: transform .2s; }
.domain-question:hover,
.foundation-question:hover,
.impact-question:hover { color: var(--blueprint); transform: translate(-2px, -2px); box-shadow: 12px 12px 0 rgba(24,63,115,.12); }
.domain-question:hover .domain-question-send b { transform: translateX(3px); }
.domain-question-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blueprint), var(--pink)); transform-origin: left; animation: domain-question-progress 4.6s linear infinite; }
@keyframes domain-question-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.domain-blueprint,
.foundation-system,
.impact-exchange {
  --blueprint: #183f73;
  position: relative;
  padding: clamp(24px, 4vw, 54px);
  overflow: hidden;
  color: var(--blueprint);
  border: 1px solid rgba(24,63,115,.3);
  border-radius: 0;
  background-color: #f7f9f8;
  background-image:
    linear-gradient(rgba(24,63,115,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,63,115,.055) 1px, transparent 1px),
    linear-gradient(rgba(24,63,115,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,63,115,.025) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  box-shadow: 0 18px 45px rgba(24,63,115,.1);
}
.domain-blueprint::before, .domain-blueprint::after,
.foundation-system::before, .foundation-system::after,
.impact-exchange::before, .impact-exchange::after { position: absolute; z-index: 0; width: 30px; height: 30px; content: ""; border-color: var(--pink); opacity: .8; }
.domain-blueprint::before,
.foundation-system::before,
.impact-exchange::before { top: 13px; left: 13px; border-top: 2px solid; border-left: 2px solid; }
.domain-blueprint::after,
.foundation-system::after,
.impact-exchange::after { right: 13px; bottom: 13px; border-right: 2px solid; border-bottom: 2px solid; }
.domain-blueprint-head,
.foundation-core,
.impact-exchange-head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px clamp(24px, 4vw, 64px); padding-bottom: clamp(28px, 4vw, 48px); }
.domain-blueprint-head > div,
.foundation-core > div,
.impact-exchange-head > div { grid-column: 1; grid-row: 1; }
.domain-blueprint-head small,
.foundation-core small,
.impact-exchange-head small { color: var(--blueprint); font-size: 7px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.domain-blueprint-head h2,
.foundation-core h2,
.impact-exchange-head h2 { max-width: none; margin: 13px 0 0; color: var(--blueprint); font-size: clamp(45px, 5vw, 76px); line-height: .92; letter-spacing: -.055em; white-space: nowrap; }
.domain-blueprint-head h2 em,
.foundation-core h2 em,
.impact-exchange-head h2 em { color: var(--pink); font-style: normal; }
.domain-blueprint-head p,
.foundation-core p,
.impact-exchange-head p { max-width: 720px; grid-column: 1; grid-row: 2; margin: 0; padding-bottom: 4px; color: var(--blueprint); font-size: 13px; line-height: 1.55; }
.domain-blueprint-head > span,
.foundation-core > span,
.impact-exchange-head > span { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 9px; padding-bottom: 6px; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.domain-blueprint-head > span i,
.foundation-core > span i,
.impact-exchange-head > span i { width: 7px; height: 7px; border-radius: 50%; background: #39a675; box-shadow: 0 0 0 4px rgba(57,166,117,.12); }
.domain-plan,
.foundation-grid,
.impact-flywheel { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(245px, auto)); gap: 0; margin-top: 0; border: 2px solid var(--blueprint); background: rgba(255,255,255,.74); }
/* Base room counts. The existing cascade below overrides Impact to two
   columns even on desktop, matching the Domains reference. Keep that layout
   here; repairing the pre-existing 1100px media-query boundary is separate. */
.foundation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(260px, auto)); }
.impact-flywheel { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(285px, auto); }
.domain-plan-axis { position: absolute; z-index: 3; top: 50%; left: 50%; padding: 5px 10px; color: #fff; background: var(--blueprint); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-90deg); }
.domain-room,
.foundation-card,
.impact-stage {
  --accent: var(--purple);
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* A button sizes itself to its content, so a room whose visual holds one
     unbroken line of text pushed past the wall it was drawn in as soon as the
     grid stacked. The room takes the width it is given, and what it contains
     is free to be narrower than its longest word. */
  width: 100%;
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  overflow: hidden;
  color: var(--blueprint);
  border-right: 2px solid var(--blueprint);
  border-bottom: 2px solid var(--blueprint);
  background: rgba(255,255,255,.62);
  transition: color .2s, background .2s;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.domain-room-1 { grid-column: 1 / 6; }
.domain-room-2 { grid-column: 6 / 10; }
.domain-room-3 { grid-column: 10 / 13; border-right: 0; }
.domain-room-4 { grid-column: 1 / 7; border-bottom: 0; }
.domain-room-5 { grid-column: 7 / 13; border-right: 0; border-bottom: 0; }
/* The outer wall of the grid is the container's own border, so the rooms on
   the right-hand column and the bottom row give theirs up. Written as
   positions in the grid rather than as room numbers: Domains states five
   named rooms above because their spans are drawn, but Foundations and Impact
   have no fixed plan, and a card added to either has to land in the next cell
   with its walls right rather than doubling a line. */
.foundation-card:nth-of-type(2n) { border-right: 0; }
.foundation-card:nth-last-of-type(-n+2) { border-bottom: 0; }
.impact-stage { border-bottom: 0; }
.impact-stage:last-of-type { border-right: 0; }
.domain-room::before,
.foundation-card::before,
.impact-stage::before { position: absolute; inset: 10px; content: ""; border: 1px dashed rgba(24,63,115,.22); pointer-events: none; }
.domain-room::after,
.foundation-card::after,
.impact-stage::after { position: absolute; right: -52px; bottom: -64px; width: 190px; height: 190px; content: ""; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 50%; pointer-events: none; }
.domain-room:hover,
.foundation-card:hover,
.impact-stage:hover { color: #fff; background: var(--accent); }
.domain-room:hover::before,
.foundation-card:hover::before,
.impact-stage:hover::before { border-color: rgba(255,255,255,.28); }
.domain-room-meta,
.foundation-card-head,
.impact-stage-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.domain-room-icon,
.foundation-mark,
.impact-stage-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, #fff); border-radius: 0; background: color-mix(in srgb, var(--accent) 8%, #fff); }
.domain-room-icon svg,
.foundation-mark svg,
.impact-stage-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.domain-room-meta small,
.foundation-card-head small,
.impact-stage-meta small { color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-align: right; }
.domain-room:hover .domain-room-icon,
.foundation-card:hover .foundation-mark,
.impact-stage:hover .impact-stage-icon { color: #fff; border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.12); }
.domain-room:hover .domain-room-meta small,
.foundation-card:hover .foundation-card-head small,
.impact-stage:hover .impact-stage-meta small { color: rgba(255,255,255,.9); }
.domain-room > strong,
.foundation-card > strong,
.impact-stage > strong { position: relative; z-index: 1; max-width: 520px; margin: auto 0 14px; font-size: clamp(27px, 3vw, 48px); line-height: .92; letter-spacing: -.05em; }
.domain-room > p,
.foundation-card > p,
.impact-stage > p { position: relative; z-index: 1; max-width: 570px; margin: 0; color: rgba(24,63,115,.72); font-size: 10px; line-height: 1.5; }
.domain-room:hover > p,
.foundation-card:hover > p,
.impact-stage:hover > p { color: rgba(255,255,255,.9); }
.domain-room-open,
.foundation-card-action,
.impact-stage-open { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.domain-room-open b,
.foundation-card-action b,
.impact-stage-open b { width: 27px; height: 27px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--accent); font-size: 12px; transition: color .2s, background .2s, transform .2s; }
.domain-room:hover .domain-room-open b,
.foundation-card:hover .foundation-card-action b,
.impact-stage:hover .impact-stage-open b { color: var(--accent); background: #fff; transform: rotate(8deg); }
.domain-room-door { position: absolute; z-index: 2; right: -2px; bottom: 28px; width: 17px; height: 32px; border: 2px solid var(--blueprint); border-right: 0; background: #f7f9f8; }
.domain-room-3 .domain-room-door, .domain-room-5 .domain-room-door { right: auto; left: -2px; border-right: 2px solid var(--blueprint); border-left: 0; }
.domain-room:hover .domain-room-door { background: var(--accent); border-color: #fff; }
.domain-blueprint-key,
.foundation-system-key,
.impact-exchange-key { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.domain-blueprint-key span,
.foundation-system-key span,
.impact-exchange-key span { display: flex; align-items: center; gap: 9px; }
.domain-blueprint-key span i,
.foundation-system-key span i,
.impact-exchange-key span i { width: 28px; height: 2px; background: var(--pink); }
/* A Domains room holds a name and a sentence, so its name can take the room.
   A foundation card carries its published figures underneath, and an impact
   card a longer note, so both are set a step down from the blueprint's own
   display size rather than being allowed to crowd what is below them. */
.foundation-card > strong { margin: 20px 0 9px; font-size: clamp(24px, 2.4vw, 36px); line-height: .96; }
.foundation-card > p { margin-bottom: 14px; }
.impact-stage > strong { margin: auto 0 12px; font-size: clamp(24px, 2.2vw, 34px); line-height: .96; }
.domain-dossier {
  --blueprint: #183f73;
  width: min(1480px, calc(100vw - 36px));
  height: min(920px, calc(100svh - 36px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #f7f9f8;
}
.domain-dossier[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.domain-dossier-head {
  --accent: var(--purple);
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px 16px 28px;
  color: #fff;
  border-bottom: 5px solid var(--accent);
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--accent) 38%, transparent), transparent 30%),
    var(--ink);
}
.domain-dossier-head > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.domain-dossier-head > span > small { color: #ff9cc8; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.domain-dossier-head > span > strong { padding-block: .08em; overflow: visible; font-size: clamp(25px, 3vw, 42px); line-height: 1.08; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.domain-dossier-head .dialog-close { position: static; flex: none; color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.domain-dossier-body { min-height: 0; overflow: auto; padding: clamp(20px, 3vw, 38px); }
.domain-dossier-overview { padding-bottom: 28px; border-bottom: 1px solid rgba(24,63,115,.18); }
.domain-dossier-overview > p { width: 100%; max-width: none; margin: 0; color: var(--ink); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; }
.domain-dossier-projects { padding-top: 28px; }
.domain-dossier-projects > header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.domain-dossier-projects > header small { color: var(--pink-ink, #c31b75); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.domain-dossier-projects > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.domain-dossier-projects article { overflow: hidden; border: 1px solid rgba(24,63,115,.17); background: #fff; }
.domain-dossier-projects article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.domain-project-intro { min-height: 150px; padding: 22px 22px 18px; border-bottom: 1px solid rgba(24,63,115,.13); background: linear-gradient(135deg, #fff 55%, rgba(197,38,116,.07)); }
.domain-project-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.domain-dossier-projects h3 { margin: 12px 0 7px; color: var(--ink); font-size: clamp(21px, 2vw, 30px); line-height: 1; }
.domain-project-tagline { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.domain-project-map { padding: 20px 22px 22px; }
.domain-project-node { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.domain-project-node:last-child { padding-bottom: 0; }
.domain-project-node:not(:last-child)::before { position: absolute; top: 42px; bottom: 0; left: 20px; width: 2px; content: ""; background: rgba(24,63,115,.16); }
.domain-project-node > span { z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; color: var(--blueprint); border: 1px solid rgba(24,63,115,.2); border-radius: 50%; background: #f8f9fc; }
.domain-project-node svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.domain-project-node small { display: block; margin: 2px 0 6px; color: var(--pink-ink, #c31b75); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.domain-project-node p { margin: 0; color: #49425b; font-size: 14px; line-height: 1.6; }
.domain-project-findings > span { color: #fff; border-color: var(--purple); background: var(--purple); }
.domain-project-findings strong { display: block; padding: 12px 14px; color: var(--purple); border-left: 3px solid var(--pink); background: #f4f1f8; font-size: 17px; line-height: 1.45; }
.domain-project-network > span { color: #fff; border-color: var(--pink); background: var(--pink); }
.domain-dossier-projects ul { margin: 12px 0 0; padding: 0; list-style: none; }
.domain-dossier-projects li { position: relative; margin-top: 8px; padding-left: 16px; color: #49425b; font-size: 13px; line-height: 1.55; }
.domain-dossier-projects li::before { position: absolute; top: .55em; left: 0; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--pink); }

.area-projects .area-intro { margin-bottom: 24px; }
.project-question {
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  margin-bottom: 24px;
  padding: 16px clamp(18px, 2.5vw, 32px);
  overflow: hidden;
  color: #fff;
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% -40%, rgba(255,124,185,.4), transparent 42%),
    linear-gradient(120deg, #170747, #32106f 58%, #5d247e);
  box-shadow: 0 18px 42px rgba(37,14,98,.2);
}
.project-question::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; content: ""; background: var(--pink); }
.project-question-mark { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.project-question-mark i { position: absolute; inset: 0; border: 1px dashed rgba(255,255,255,.4); border-radius: 18px; transform: rotate(8deg); }
.project-question-mark b { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); border-radius: 12px; background: #fff; font-size: 18px; box-shadow: 0 0 24px rgba(255,156,200,.35); }
.project-question-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.project-question-copy small { color: #ff9cc8; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.project-question-copy strong { overflow: hidden; font-size: clamp(18px, 2vw, 28px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; transition: opacity .18s, transform .18s; }
.project-question-copy strong.is-changing { opacity: 0; transform: translateY(5px); }
.project-question-copy > span { color: rgba(255,255,255,.62); font-size: 9px; }
.project-question-send { min-width: 120px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.project-question-send small { color: rgba(255,255,255,.72); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.project-question-send b { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: #fff; font-size: 18px; transition: transform .2s; }
.project-question:hover { color: #fff; transform: translateY(-2px); }
.project-question:hover .project-question-send b { transform: translate(2px, -2px) rotate(7deg); }
.project-question-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--pink), #a06ede, #73f1ba); transform-origin: left; animation: foundation-question-progress 4.4s linear infinite; }
.project-portfolio {
  position: relative;
  padding: clamp(24px, 4vw, 52px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(227,28,121,.14), transparent 30%),
    linear-gradient(rgba(37,14,98,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,14,98,.035) 1px, transparent 1px),
    #f4f1f8;
  background-size: auto, 28px 28px, 28px 28px, auto;
  box-shadow: 0 24px 58px rgba(37,14,98,.13);
}
.project-portfolio-head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
.project-portfolio-head small { color: var(--pink-ink, #c31b75); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.project-portfolio-head h2 { margin: 10px 0 0; color: var(--ink); font-size: clamp(46px, 5vw, 78px); line-height: .9; letter-spacing: -.055em; }
.project-portfolio-head h2 em { color: var(--pink); font-style: normal; }
.project-portfolio-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.project-portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portfolio-card,
.project-dossier {
  --project-accent: #7734ac;
  --project-tint: rgba(119,52,172,.1);
}
.cat-construction { --project-accent: #287a64; --project-tint: rgba(40,122,100,.1); }
.cat-timber { --project-accent: #8b693d; --project-tint: rgba(139,105,61,.11); }
.cat-ai { --project-accent: #ad3974; --project-tint: rgba(173,57,116,.1); }
.cat-permitting { --project-accent: #3765cf; --project-tint: rgba(55,101,207,.1); }
.cat-modular { --project-accent: #a56a32; --project-tint: rgba(165,106,50,.1); }
.cat-indigenous { --project-accent: #b54b39; --project-tint: rgba(181,75,57,.1); }
.cat-workforce { --project-accent: #6c3db3; --project-tint: rgba(108,61,179,.1); }
.portfolio-card {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  border: 1px solid rgba(37,14,98,.14);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.portfolio-card::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; content: ""; background: var(--project-accent); }
.portfolio-card::after { position: absolute; right: -45px; bottom: -45px; width: 130px; height: 130px; content: ""; border-radius: 50%; background: var(--project-tint); transition: transform .25s; }
.portfolio-card:hover { z-index: 1; border-color: var(--project-accent); box-shadow: 0 18px 34px rgba(37,14,98,.14); transform: translateY(-5px); }
.portfolio-card:hover::after { transform: scale(1.3); }
.portfolio-card-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: var(--project-accent); }
.portfolio-card-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-card-category { margin-top: 20px; color: var(--project-accent); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-card > strong { margin-top: 8px; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.05; }
.portfolio-card > p { margin: 10px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.portfolio-card-open { z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: auto; color: var(--ink); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-card-open b { color: var(--project-accent); font-size: 16px; transition: transform .2s; }
.portfolio-card:hover .portfolio-card-open b { transform: translate(3px, -3px); }
.project-dossier {
  width: min(1500px, calc(100vw - 32px));
  height: min(940px, calc(100svh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 35px 95px rgba(20,4,57,.38);
}
.project-dossier[open] { display: block; }
.project-dossier-shell { position: relative; height: 100%; display: grid; grid-template-columns: minmax(330px, 36%) minmax(0, 64%); overflow: hidden; }
.project-dossier-shell > .dialog-close { z-index: 5; top: 18px; right: 18px; color: var(--ink); border-color: rgba(37,14,98,.18); background: rgba(255,255,255,.9); }
.project-dossier-identity {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 4vw, 58px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 20%, var(--project-accent), transparent 32%),
    linear-gradient(145deg, #170747, #31106d 70%, #46156e);
}
.project-dossier-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.project-dossier-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-dossier-identity > small { margin-top: 30px; color: #ff9cc8; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.project-dossier-identity h2 { max-width: 520px; margin: 10px 0 0; padding-block: .08em; font-size: clamp(42px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -.055em; overflow-wrap: anywhere; }
.project-dossier-identity > p { max-width: 460px; margin: 20px 0 0; color: rgba(255,255,255,.72); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; }
.project-identity-graphic { position: relative; width: min(28vw, 330px); aspect-ratio: 1; margin: auto auto 24px; }
.project-identity-graphic i { position: absolute; inset: 50%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%, -50%); }
.project-identity-graphic i:first-child { width: 100%; height: 100%; }
.project-identity-graphic i:nth-child(2) { width: 72%; height: 72%; }
.project-identity-graphic i:nth-child(3) { width: 44%; height: 44%; }
.project-identity-graphic::before, .project-identity-graphic::after { position: absolute; top: 50%; left: 50%; content: ""; background: rgba(255,255,255,.16); transform: translate(-50%, -50%); }
.project-identity-graphic::before { width: 100%; height: 1px; }
.project-identity-graphic::after { width: 1px; height: 100%; }
.project-identity-graphic b { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; border: 7px solid rgba(255,255,255,.3); border-radius: 50%; background: var(--project-accent); box-shadow: 0 0 0 16px rgba(255,255,255,.06); transform: translate(-50%, -50%); }
.project-charlie-link { position: relative; width: 100%; min-height: 104px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 44px; align-items: center; gap: 16px; margin-top: 28px; padding: 15px 16px; overflow: hidden; color: var(--ink); border: 3px solid #ff8fc3; border-radius: 24px; background: linear-gradient(112deg, #fff 0%, #fff7fb 58%, #ffd9eb 145%); box-shadow: 0 0 0 6px rgba(227,28,121,.12), 0 22px 42px rgba(0,0,0,.26); transition: transform .2s, box-shadow .2s; }
.project-charlie-link::after { position: absolute; right: -42px; bottom: -70px; width: 170px; height: 170px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(227,28,121,.2), transparent 67%); pointer-events: none; }
.project-charlie-link:hover { color: var(--ink); transform: translateY(-5px) scale(1.01); box-shadow: 0 0 0 7px rgba(227,28,121,.18), 0 28px 50px rgba(0,0,0,.32); }
.project-charlie-mark { position: relative; z-index: 1; width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: linear-gradient(145deg, #f02d8a, #821a91); box-shadow: 0 0 0 7px rgba(227,28,121,.11), 0 10px 22px rgba(130,26,145,.28); font-size: 20px; font-weight: 900; }
.project-charlie-mark::before { position: absolute; inset: -9px; content: ""; border: 1px solid rgba(255,143,195,.65); border-radius: 50%; animation: modal-charlie-signal 2.4s ease-out infinite; }
.project-charlie-copy { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.project-charlie-copy small { color: var(--pink-ink, #c31b75); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.project-charlie-copy strong { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.12; }
.project-charlie-link > b { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 9px 18px rgba(37,14,98,.25); font-size: 19px; transition: transform .2s; }
.project-charlie-link:hover > b { transform: translateX(3px); }
.project-dossier-content { min-height: 0; display: block; padding: clamp(28px, 4vw, 52px); overflow: auto; background: #f8f7fa; }
.project-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(37,14,98,.14);
}
.project-brief article { min-width: 0; }
.project-brief small, .project-signal-board small, .project-team small { color: var(--project-accent); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.project-brief h3, .project-signal-board h3 { margin: 7px 0 12px; color: var(--ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.project-brief p { margin: 0; color: #49425b; font-size: 14px; line-height: 1.65; }
.project-signal-board { padding: 32px 0; border-bottom: 1px solid rgba(37,14,98,.14); }
.project-signal-board > header { margin-bottom: 18px; }
.project-signal-board > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.project-signal-board article { position: relative; min-height: 112px; display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 14px; align-items: center; padding: 17px; overflow: hidden; background: #fff; }
.project-signal-board article i { width: 5px; height: 100%; border-radius: 999px; background: var(--project-accent); }
.project-signal-board article p { margin: 0; color: #49425b; font-size: 14px; line-height: 1.45; }
.project-signal-board article strong { display: block; margin-bottom: 5px; color: var(--project-accent); font-size: clamp(26px, 3vw, 40px); line-height: .9; letter-spacing: -.04em; }
.project-team { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 15px; margin-top: 24px; padding: 18px; background: var(--project-tint); }
.project-team > span { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--project-accent); }
.project-team svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-team p { margin: 5px 0 0; color: #49425b; font-size: 13px; line-height: 1.5; }
.project-evidence-map { margin-top: 24px; padding: clamp(20px, 2.5vw, 30px); background: #fff; }
.project-evidence-map > header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.project-evidence-map > header > span { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: #fff; border-radius: 14px; background: var(--project-accent); }
.project-evidence-map > header svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-evidence-map > header small { display: block; color: var(--project-accent); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.project-evidence-map h3 { margin: 3px 0 0; color: var(--ink); font-size: clamp(20px, 2vw, 28px); }
.project-evidence-map > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.project-evidence-item { min-width: 0; display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 11px; padding: 13px; border: 1px solid rgba(37,14,98,.11); background: #f8f7fa; }
.project-evidence-item > span { width: 5px; height: 100%; min-height: 34px; border-radius: 999px; background: var(--project-accent); }
.project-evidence-item > div { min-width: 0; }
.project-evidence-item strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.project-evidence-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.area-impact .area-intro { margin-bottom: 24px; }
/* The Impact question strip is the shared drafted card declared with
   `.domain-question`; these are the parts only this page has. */
.impact-question::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; content: ""; background: var(--purple); }
.impact-question-orbit { position: relative; width: 60px; height: 60px; display: grid; place-items: center; }
.impact-question-orbit i { position: absolute; border: 1px solid color-mix(in srgb, var(--blueprint) 34%, transparent); border-radius: 50%; animation: impact-orbit 4s linear infinite; }
.impact-question-orbit i:first-child { width: 58px; height: 58px; }
.impact-question-orbit i:nth-child(2) { width: 42px; height: 42px; animation-direction: reverse; animation-duration: 3s; }
.impact-question-orbit b { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blueprint); font-size: 15px; }
.impact-question-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.impact-question-copy small { color: var(--pink-ink, #c31b75); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.impact-question-copy strong { overflow: hidden; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; transition: opacity .18s, transform .18s; }
.impact-question-copy strong.is-changing { opacity: 0; transform: translateY(5px); }
.impact-question-copy > span { color: rgba(24,63,115,.85); font-size: 8px; letter-spacing: .04em; }
.impact-question-send { min-width: 110px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.impact-question-send small { font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.impact-question-send b { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--pink); font-size: 16px; transition: transform .2s; }
.impact-question:hover .impact-question-send b { transform: translateX(3px); }
.impact-question-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blueprint), var(--pink)); transform-origin: left; animation: impact-question-progress 4.5s linear infinite; }
@keyframes impact-orbit { to { transform: rotate(360deg); } }
@keyframes impact-question-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.impact-dialog {
  width: min(1320px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100svh - 36px);
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #f5f8f8;
  box-shadow: 0 35px 95px rgba(4,24,35,.4);
}
.impact-dialog-head { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px 18px 30px; color: #fff; background: radial-gradient(circle at 80% 0, rgba(81,216,179,.28), transparent 28%), linear-gradient(120deg, #071f2f, #114e59); }
.impact-dialog-head > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.impact-dialog-head > span > small { color: #79eccb; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.impact-dialog-head > span > strong { padding-block: .08em; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.08; overflow-wrap: anywhere; }
.impact-dialog-head .dialog-close { position: static; color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.impact-dialog-body { max-height: calc(100svh - 136px); padding: clamp(24px, 4vw, 48px); overflow: auto; }
.impact-dialog-lede { width: 100%; max-width: none; margin: 0 0 30px; color: #344b54; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; }
.impact-dialog-body section > header small { color: #17866d; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.impact-dialog-body section > header h3 { margin: 7px 0 20px; color: #071f2f; font-size: clamp(26px, 3vw, 42px); line-height: 1.05; }
.impact-conversations > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.impact-conversations a { min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; color: #071f2f; border: 1px solid rgba(7,31,47,.15); background: #fff; transition: transform .2s, border-color .2s; }
.impact-conversations a:hover { border-color: #17866d; transform: translateY(-4px); }
.impact-conversations a > span { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #17866d; }
.impact-conversations a small { margin-top: 24px; color: #17866d; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.impact-conversations a strong { margin-top: 8px; font-size: 21px; line-height: 1.2; }
.impact-conversations a b { margin-top: auto; color: #17866d; font-size: 10px; text-transform: uppercase; }
.impact-investment-map { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px); padding: 28px; background: #fff; }
.impact-investment-core { position: relative; width: 210px; height: 210px; display: grid; place-content: center; justify-self: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #51d8b3, #0d6556 72%); box-shadow: 0 0 0 14px rgba(81,216,179,.09); }
.impact-investment-core i { position: absolute; inset: -18px; border: 1px dashed rgba(23,134,109,.32); border-radius: 50%; animation: impact-orbit 20s linear infinite; }
.impact-investment-core i:nth-child(2) { inset: -34px; animation-direction: reverse; animation-duration: 28s; }
.impact-investment-core svg { width: 42px; height: 42px; justify-self: center; margin-bottom: 10px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.impact-investment-core strong { color: #fff; font-size: 21px; line-height: 1; }
.impact-investment-core span { margin-top: 10px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.impact-investment-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.impact-investment-groups article { position: relative; min-height: 112px; display: grid; grid-template-columns: 1fr; align-items: center; padding: 18px 20px; border: 1px solid rgba(7,31,47,.12); background: #f5f8f8; }
.impact-investment-groups article::before { position: absolute; top: 50%; right: 100%; width: 18px; height: 1px; content: ""; background: rgba(23,134,109,.25); }
.impact-investment-groups article strong { color: #071f2f; font-size: 17px; }
.impact-investment-groups article p { margin: 6px 0 0; color: #51636a; font-size: 10px; line-height: 1.45; }
.impact-adoption-flow { display: block; padding: 28px; background: #fff; }
.impact-adoption-source { position: relative; min-height: 108px; display: flex; align-items: center; justify-content: flex-start; padding: 22px 28px; color: #fff; border-radius: 18px; background: linear-gradient(120deg, #0a4b42, #17866d); overflow: visible; }
.impact-adoption-source::after { position: absolute; top: 100%; left: 50%; width: 1px; height: 34px; content: ""; background: linear-gradient(#17866d, rgba(23,134,109,.15)); }
.impact-adoption-source > span { width: 52px; height: 52px; display: grid; place-items: center; flex: none; margin-right: 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.impact-adoption-source svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.impact-adoption-source strong { font-size: 23px; }
.impact-adoption-source small { margin-left: 10px; color: rgba(255,255,255,.66); font-size: 9px; text-transform: uppercase; }
.impact-adoption-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; padding-top: 18px; }
.impact-adoption-lanes > section { overflow: hidden; border: 1px solid rgba(7,31,47,.13); background: #f5f8f8; }
.impact-adoption-lanes > section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; color: #fff; background: #17866d; }
.impact-adoption-lanes > section:last-child > header { background: #7734ac; }
.impact-adoption-lanes > section > header strong { font-size: 21px; }
.impact-adoption-lanes > section > header span { font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.impact-adoption-lanes article { display: grid; grid-template-columns: minmax(0, .8fr) 34px minmax(0, 1.2fr); align-items: center; gap: 10px; margin: 12px; padding: 15px; background: #fff; }
.impact-adoption-lanes article > span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #17866d; text-align: center; font-size: 16px; }
.impact-adoption-lanes section:last-child article > span { color: #fff; background: #7734ac; }
.impact-adoption-lanes article small { color: #17866d; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.impact-adoption-lanes section:last-child article small { color: #7734ac; }
.impact-adoption-lanes article strong { display: block; margin-top: 4px; color: #071f2f; font-size: 13px; line-height: 1.35; }
.impact-adoption-lanes article p { margin: 4px 0 0; color: #51636a; font-size: 11px; line-height: 1.45; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.related-links a { padding: 11px 16px; color: var(--purple); border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; }

/* The roomy hero needs about 940px of height to seat the Charlie card. Below
   that the column over-constrains, and because it is a fixed-height flex
   column the card is the item that shrinks — slicing "Talk with Charlie" in
   half rather than overflowing visibly. The second query catches the laptop
   band (1280–1440 x ~900), which cleared the original 850px threshold but
   still has no room for the full-size hero. */
@media (min-width: 1101px) and (max-height: 850px),
       (min-width: 1101px) and (max-width: 1500px) and (max-height: 930px) {
  .lobby-intro {
    justify-content: flex-start;
    padding: 28px clamp(34px, 5vw, 72px) 24px;
  }
  .lobby-intro .eyebrow { margin-bottom: 9px; }
  .lobby-intro h1 {
    max-width: 560px;
    margin-bottom: 12px;
    font-size: clamp(23px, 3vh, 29px);
  }
  .lobby-intro > p:nth-of-type(2) { font-size: 13px; line-height: 1.45; }
  .hero-note { margin-top: 22px; }
  .charlie-portal {
    min-height: 116px;
    grid-template-columns: 68px 1fr;
    gap: 16px;
    margin-top: 20px;
    padding: 15px 18px;
    border-radius: 20px;
  }
  .charlie-orb { width: 62px; height: 62px; }
  .charlie-orb::after { display: none; }
  .charlie-portal-copy strong { font-size: 26px; }
  .charlie-portal-copy > span:not(.charlie-action) { margin-top: 4px; font-size: 9px; }
  .charlie-action { margin-top: 9px; }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .gallery-card {
    grid-template-columns: max-content minmax(0, 1fr) 30px;
    gap: 18px;
    padding-right: 34px;
    padding-left: 34px;
  }
  .gallery-copy strong { font-size: clamp(34px, 3vw, 42px); }
  .gallery-title { gap: 14px; }
  .gallery-title-icon { width: 42px; height: 42px; }
  .gallery-detail > span:last-child { font-size: 10px; }
}

@media (max-width: 1100px) {
  /* One screen while one screen holds it. The lobby is locked to the window
     above this width; here it keeps the same composition but stops cutting
     into it — when the hero and the four cards together need more room than
     the window has, the page scrolls the difference instead of clipping it.
     At 900x660 the cards were down to 67% of their own names. */
  .lobby {
    height: auto;
    min-height: 100svh;
    grid-template-rows: 64px minmax(0, 1fr);
    overflow: visible;
  }
  .lobby .site-head { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .lobby footer { display: none; }
  .lobby main {
    grid-template-columns: 1fr;
    /* The hero row takes the height its own content needs and the four cards
       take the rest. At a fixed 48% the column was 190px short of its own
       copy between 660px and 900px of window height, and with the column
       clipping, "Talk with Charlie" - the one control the lobby has - was cut
       in half or lost entirely. The cards keep a floor of their own below. */
    grid-template-rows: min-content minmax(0, 1fr);
    overflow: visible;
  }
    /* The hero row takes the height its own content needs and the four cards
       take the rest. At a fixed 48% the column was 190px short of its own
       copy between 660px and 900px of window height, and with the column
       clipping, "Talk with Charlie" - the one control the lobby has - was cut
       in half or lost entirely. The cards keep a floor of their own below. */
    grid-template-rows: min-content minmax(0, 1fr);
    overflow: hidden;
  }
  .lobby-intro {
    min-height: 0;
    /* `safe` keeps the centring when it fits but falls back to the start edge
       when it does not, so the eyebrow and headline are never clipped off the
       top of the column. */
    justify-content: safe center;
    padding: 18px clamp(26px, 6vw, 52px);
  }
  .lobby-intro .eyebrow { margin-bottom: 8px; }
  .lobby-intro h1 { max-width: 680px; margin-bottom: 12px; font-size: clamp(24px, 3.6vw, 34px); }
  .lobby-intro > p:nth-of-type(2) { max-width: 52ch; font-size: 12px; line-height: 1.4; }
  .hero-note { display: none; }
  .hero-canvas { width: 340px; opacity: .6; }

  .hero-canvas b { display: none; }
  .charlie-portal {
    width: min(100%, 460px);
    /* A floor, not a height: below 1100px the hero column is capped at 48% of
       the window, and at 761x820 that cap squeezed the card to exactly this
       floor while its copy needed 123px — so "Talk with Charlie", the one
       control on the lobby, was cut in half by the card's own clip. The
       shorter-window rule below sheds the sentence between the name and the
       call to action; until it does, the card keeps the height its copy
       needs. */
    min-height: max(100px, max-content);
    grid-template-columns: 64px 1fr;
    gap: 16px;
    margin-top: 16px;
    padding: 13px 18px;
    border-radius: 18px;
  }
  .charlie-orb { width: 58px; height: 58px; }
  .charlie-orb::after { display: none; }
  .charlie-portal-copy strong { font-size: 24px; }
  .charlie-portal-copy > span:not(.charlie-action) { margin-top: 4px; font-size: 10px; }
  .charlie-action { margin-top: 8px; }
  .voice-wave { display: none; }
  .pathways { min-height: 0; padding-top: 0; }
  .pathways-intro { grid-template-columns: minmax(300px, 1.1fr) minmax(220px, .9fr); min-height: 108px; padding: 15px 28px; }
  .pathways-intro h2 { font-size: clamp(26px, 4vw, 36px); }
  .pathways-signal b { margin-top: 9px; font-size: 7px; }
  .gallery-grid { min-height: 0; grid-template-rows: repeat(4, minmax(min-content, 1fr)); }
  .gallery-card { min-height: 0; padding: 8px 28px; }
  .gallery-copy strong { font-size: clamp(27px, 4vw, 42px); }
  .gallery-detail > span:last-child { font-size: 10px; line-height: 1.3; }
  .motion-line { display: none; }
  .area-intro { grid-template-columns: 1fr 1fr; }
  .area-intro .charlie-cta { grid-column: 1 / -1; justify-self: start; }
  /* Foundations used to carry its own section padding here, from when it was a
     full-height dark panel rather than a sheet of the same blueprint paper as
     Domains and Impact. Left in place it printed the one page of the three on
     a narrower margin. The blueprint sets the margin for all three. */
  .foundation-system { min-height: 0; }
  .foundation-core,
  .domain-blueprint-head,
  .impact-exchange-head { grid-template-columns: 1fr; }
  .foundation-core > span,
  .domain-blueprint-head > span,
  .impact-exchange-head > span { display: none; }
  .foundation-grid { grid-template-rows: repeat(2, minmax(240px, auto)); }
  .domain-plan { grid-template-rows: repeat(3, minmax(230px, auto)); }
  .domain-room-1 { grid-column: 1 / 7; }
  .domain-room-2 { grid-column: 7 / 13; border-right: 0; }
  .domain-room-3 { grid-column: 1 / 5; }
  .domain-room-4 { grid-column: 5 / 13; border-right: 0; border-bottom: 2px solid var(--blueprint); }
  .domain-room-5 { grid-column: 1 / 13; }
  .domain-plan-axis { display: none; }
  .project-portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
  /* One stage per row is right on a phone and wasteful on a tablet or a short
     laptop window, where three 800px-wide cards each hold two lines of text.
     Three across is too tight for the note each stage carries at this width,
     so the third takes the width of the row below the first two — the same
     move the blueprint makes with its fifth room. */
  .impact-flywheel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(240px, auto)); }
  .impact-stage:nth-of-type(2n) { border-right: 0; }
  .impact-stage:nth-of-type(-n+2) { border-bottom: 2px solid var(--blueprint); }
  .impact-stage:last-of-type { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .impact-conversations > div { grid-template-columns: 1fr; }
  .impact-adoption-lanes { grid-template-columns: 1fr; }
}
/* The lobby locks to the viewport, and below 1100px the hero column is capped
   at 48% of it. Under ~800px of height that cap cannot seat the full hero, so
   the supporting line steps back and the headline tightens — the same order in
   which the rest of the site sheds detail. */
@media (max-width: 1100px) and (max-height: 800px) {
  .lobby-intro > p:nth-of-type(2) { display: none; }
  .lobby-intro h1 { margin-bottom: 10px; font-size: clamp(34px, 5.6vw, 46px); }
  .lobby-intro .eyebrow { margin-bottom: 6px; }
  .charlie-portal { min-height: 88px; margin-top: 12px; }
  /* The card keeps its name and its call to action; the sentence between them
     is the part that will not fit, so it steps back rather than being sliced. */
  .charlie-portal-copy > span:not(.charlie-action) { display: none; }
  .charlie-action { margin-top: 9px; }
}

@media (max-width: 700px) {
  .site-head { min-height: 64px; padding-right: 18px; padding-left: 18px; }
  .brand { max-width: 100%; font-size: 9px; }
  .brand svg { width: 96px; }
  .brand-rule,
  .brand > span:last-child { display: none; }
  .menu-toggle { position: relative; z-index: 2; display: grid; flex: none; }
  .global-nav {
    position: absolute;
    top: 63px;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 10px 18px 18px;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 30px rgba(15,2,46,.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .18s, transform .18s;
  }
  .global-nav[data-open="true"] { opacity: 1; pointer-events: auto; transform: none; }
  .global-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; }
  .global-nav a:last-child { border-bottom: 0; }
  .global-nav a::after { display: none; }
  .area-page .site-head {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .area-page .brand { width: max-content; }
  .area-menu-toggle { z-index: 2; display: grid; }
  .area-page .area-nav {
    position: absolute;
    top: 63px;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 18px 18px;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 30px rgba(15,2,46,.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .area-page .area-nav[data-open="true"] { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
  .area-page .area-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; }
  .area-page .area-nav a:last-child { border-bottom: 0; }
  /* Same reason as the tablet band above: the hero takes the height its copy
     needs, the cards take the rest, and the page scrolls the difference. At
     320x660 the fixed 48% cut the end off "Talk with Charlie". */
  .lobby main { grid-template-rows: min-content minmax(0, 1fr); }
  .lobby-intro { min-width: 0; padding: 12px 20px; }
  .lobby-intro h1 { max-width: 330px; margin-bottom: 9px; font-size: clamp(26px, 8vw, 34px); }
  /* The hero lead is a paragraph a visitor is meant to read, not a caption:
     at 10px it was below the size anything else on the site is set at, and
     the page scrolls here, so it is given a reading size and the room it
     needs. */
  .lobby-intro > p:nth-of-type(2) { width: 100%; max-width: 38ch; font-size: 12.5px; line-height: 1.45; overflow-wrap: break-word; }
  .hero-canvas { width: 280px; }
  .charlie-portal { width: 100%; max-width: 350px; min-height: max(88px, max-content); grid-template-columns: 52px 1fr; gap: 13px; margin-top: 11px; padding: 10px 13px; }
  .charlie-orb { width: 48px; height: 48px; box-shadow: 0 0 0 6px rgba(227,28,121,.1); }
  .charlie-orb::before { display: none; }
  .charlie-orb svg { width: 24px; height: 24px; }
  .charlie-portal-copy small { margin-bottom: 2px; font-size: 7px; }
  .charlie-portal-copy strong { font-size: 20px; }
  .charlie-portal-copy > span:not(.charlie-action) { display: none; }
  .rotating-suggestion {
    width: 100%;
    min-height: 48px;
    margin-top: 13px;
    padding: 8px 10px 8px 12px;
    border-radius: 12px;
  }
  .rotating-suggestion strong { font-size: 11px; }
  .rotating-suggestion > b { width: 28px; height: 28px; }
  .charlie-action { margin-top: 6px; font-size: 7px; }
  .pathways { min-width: 0; padding-top: 0; }
  .pathways-intro { min-width: 0; grid-template-columns: 1fr; align-items: center; min-height: 64px; padding: 8px 20px; }
  .pathways-intro .eyebrow { display: none; }
  .pathways-intro h2 { max-width: 350px; font-size: clamp(20px, 5.4vw, 24px); line-height: .95; overflow-wrap: break-word; }
  .pathways-intro h2 br { display: none; }
  .pathways-signal, .pathways-watermark { display: none; }
  .gallery-grid { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .gallery-card { min-height: 0; grid-template-columns: 1fr 28px; gap: 12px; padding: 6px 20px; }
  .gallery-copy { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .gallery-title { gap: 10px; }
  .gallery-title-icon { width: 30px; height: 30px; }
  .gallery-copy strong { font-size: clamp(22px, 6vw, 27px); }
  .gallery-detail { gap: 2px; }
  .gallery-detail > span:last-child { display: none; }
  .gallery-kicker { font-size: 7px; }
  .gallery-arrow { grid-column: 2; grid-row: 1; align-self: center; }
  .gallery-visual { display: none; }
  .area-intro { grid-template-columns: 1fr; }
  .area-intro .eyebrow, .area-intro .charlie-cta { grid-column: auto; }
  .foundation-question { min-height: 92px; grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 11px; padding: 11px; box-shadow: 5px 5px 0 rgba(24,63,115,.1); }
  .foundation-question-signal { width: 42px; height: 42px; }
  .foundation-question-signal i:first-child { width: 42px; height: 42px; }
  .foundation-question-signal i:nth-child(2) { width: 33px; height: 33px; }
  .foundation-question-signal i:nth-child(3) { width: 25px; height: 25px; }
  .foundation-question-signal b { width: 23px; height: 23px; font-size: 12px; }
  .foundation-question strong { overflow: visible; font-size: 13px; line-height: 1.25; text-overflow: clip; white-space: normal; }
  .foundation-question-copy > span { display: none; }
  .foundation-question-action { min-width: 0; }
  .foundation-question-action small { display: none; }
  .foundation-question-action b { width: 32px; height: 32px; font-size: 14px; }
  .foundation-system { padding: 18px; }
  .foundation-core h2 { font-size: clamp(40px, 13vw, 56px); white-space: normal; }
  .foundation-core p { font-size: 11px; }
  .foundation-pipeline { grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 14px; }
  .foundation-pipeline i { display: none; }
  .foundation-grid { display: block; border-width: 2px; }
  .foundation-card {
    min-height: 235px;
    border-right: 0;
    border-bottom: 2px solid var(--blueprint);
  }
  .foundation-card:last-of-type { border-bottom: 0; }
  .foundation-card > strong { font-size: clamp(26px, 8.5vw, 36px); }
  .foundation-system-key { align-items: flex-start; flex-direction: column; }
  .area-foundations dialog { width: calc(100vw - 20px); max-height: calc(100svh - 20px); border-radius: 18px; }
  .foundation-dialog-head { padding: 22px 18px 18px; }
  .foundation-dialog-head h2 { font-size: 31px; }
  .foundation-dialog-lede { padding: 20px 18px 16px; font-size: 14px; }
  .modal-stats { grid-template-columns: 1fr 1fr; margin: 0 18px; }
  .modal-stats div { min-height: 110px; padding: 14px; }
  .modal-stats div:nth-child(2n) { border-right: 0; }
  .modal-stats div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .modal-stats div:last-child { border-bottom: 0; }
  .modal-flow { grid-template-columns: 1fr; gap: 8px; margin: 0 18px; }
  .modal-flow div { min-height: 110px; border: 1px solid var(--line); border-radius: 12px !important; }
  .modal-flow div::after { top: auto; right: 14px; bottom: -14px; content: "↓"; }
  .modal-flow div > span { margin-bottom: 15px; }
  .modal-feedback { margin-right: 18px; margin-left: 18px; }
  .modal-network { grid-template-columns: 1fr; gap: 26px; margin: 0 18px; padding: 20px 14px; }
  .modal-network-core { width: 140px; height: 140px; }
  .modal-network-core::after { display: none; }
  .modal-network-functions { grid-template-columns: 1fr; }
  .modal-regions { margin-right: 18px; margin-left: 18px; }
  .modal-lifecycle { grid-template-columns: 1fr 1fr; margin: 0 18px; }
  .modal-lifecycle div { min-height: 145px; padding: 14px; }
  .modal-more { margin-right: 18px; margin-left: 18px; }
  .modal-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-evidence-grid div { min-height: 84px; }
  .foundation-dialog-takeaway { margin-right: 18px; margin-left: 18px; }
  .modal-dialog-actions { gap: 7px; }
  .modal-charlie-head-link { min-height: 48px; grid-template-columns: 30px auto; gap: 8px; padding: 6px 9px; border-radius: 13px; box-shadow: 0 0 0 3px rgba(227,28,121,.13), 0 10px 22px rgba(0,0,0,.2); }
  .modal-charlie-head-mark { width: 30px; height: 30px; font-size: 13px; }
  .modal-charlie-head-mark::before { inset: -5px; }
  .modal-charlie-head-link > span:nth-child(2) strong, .modal-charlie-head-link > b { display: none; }
  .modal-charlie-head-link small { font-size: 7px; white-space: nowrap; }
  .foundation-evidence-details { padding-right: 18px; padding-left: 18px; }
  .domain-blueprint { padding: 18px; }
  .domain-question { min-height: 92px; grid-template-columns: 50px minmax(0, 1fr) 34px; gap: 11px; padding: 11px; box-shadow: 5px 5px 0 rgba(24,63,115,.1); }
  .domain-question-stamp { width: 46px; height: 56px; }
  .domain-question-copy strong { overflow: visible; font-size: 13px; line-height: 1.25; text-overflow: clip; white-space: normal; }
  .domain-question-copy > span { display: none; }
  .domain-question-send small { display: none; }
  .domain-question-send b { width: 32px; height: 32px; font-size: 14px; }
  .domain-blueprint-head { grid-template-columns: 1fr; }
  .domain-blueprint-head h2 { font-size: clamp(40px, 13vw, 56px); white-space: normal; }
  .domain-blueprint-head p { font-size: 11px; }
  .domain-plan { display: block; border-width: 2px; }
  .domain-room, .domain-room-3, .domain-room-4 {
    min-height: 235px;
    border-right: 0;
    border-bottom: 2px solid var(--blueprint);
  }
  .domain-room-5 { border-bottom: 0; }
  .domain-room > strong { font-size: clamp(30px, 10vw, 42px); }
  .domain-room-door { display: none; }
  .domain-blueprint-key { align-items: flex-start; flex-direction: column; }
  .domain-dossier { width: calc(100vw - 12px); height: calc(100svh - 12px); border-radius: 14px; }
  .domain-dossier-head { min-height: 68px; padding: 10px 12px 10px 16px; }
  .domain-dossier-head > span > strong { font-size: 21px; }
  .domain-dossier-body { padding: 16px; }
  .domain-dossier-projects > div { grid-template-columns: 1fr; }
  .project-question { min-height: 94px; grid-template-columns: 46px minmax(0, 1fr) 34px; gap: 11px; padding: 12px; border-radius: 16px; }
  .project-question-mark { width: 42px; height: 42px; }
  .project-question-mark b { width: 30px; height: 30px; font-size: 14px; }
  .project-question-copy strong { overflow: visible; font-size: 13px; line-height: 1.3; text-overflow: clip; white-space: normal; }
  .project-question-copy > span, .project-question-send small { display: none; }
  .project-question-send { min-width: 0; }
  .project-question-send b { width: 32px; height: 32px; font-size: 14px; }
  .project-portfolio { padding: 18px; border-radius: 18px; }
  .project-portfolio-head { grid-template-columns: 1fr; gap: 14px; }
  .project-portfolio-head h2 { font-size: clamp(40px, 13vw, 56px); }
  .project-portfolio-head p { font-size: 12px; }
  .project-portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card { min-height: 240px; }
  .project-dossier { width: calc(100vw - 12px); height: calc(100svh - 12px); border-radius: 14px; }
  .project-dossier-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .project-dossier-shell > .dialog-close { top: 10px; right: 10px; }
  .project-dossier-identity { min-height: 280px; padding: 24px; }
  .project-dossier-icon { width: 46px; height: 46px; border-radius: 13px; }
  .project-dossier-icon svg { width: 22px; height: 22px; }
  .project-dossier-identity > small { margin-top: 16px; }
  .project-dossier-identity h2 { max-width: calc(100% - 38px); font-size: 36px; }
  .project-dossier-identity > p { margin-top: 10px; font-size: 13px; }
  .project-identity-graphic { display: none; }
  .project-charlie-link { width: 100%; min-height: 88px; grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 12px; margin-top: 20px; padding: 11px 12px; border-radius: 18px; }
  .project-charlie-mark { width: 44px; height: 44px; font-size: 17px; }
  .project-charlie-mark::before { inset: -6px; }
  .project-charlie-copy strong { font-size: 16px; }
  .project-charlie-link > b { width: 36px; height: 36px; font-size: 16px; }
  .project-dossier-content { padding: 20px 16px; }
  .project-brief { grid-template-columns: 1fr; gap: 24px; }
  .project-signal-board > div { grid-template-columns: 1fr; }
  .project-signal-board article { min-height: 92px; }
  .project-evidence-map { padding: 16px; }
  .project-evidence-map > div { grid-template-columns: 1fr; }
  .impact-question { min-height: 92px; grid-template-columns: 46px minmax(0, 1fr) 34px; gap: 11px; padding: 11px; box-shadow: 5px 5px 0 rgba(24,63,115,.1); }
  .impact-question-orbit { width: 42px; height: 42px; }
  .impact-question-orbit i:first-child { width: 42px; height: 42px; }
  .impact-question-orbit i:nth-child(2) { width: 30px; height: 30px; }
  .impact-question-copy strong { overflow: visible; font-size: 13px; line-height: 1.3; text-overflow: clip; white-space: normal; }
  .impact-question-copy > span, .impact-question-send small { display: none; }
  .impact-question-send { min-width: 0; }
  .impact-question-send b { width: 32px; height: 32px; font-size: 14px; }
  .impact-exchange { padding: 18px; }
  .impact-exchange-head h2 { font-size: clamp(40px, 13vw, 56px); white-space: normal; }
  .impact-exchange-head p { font-size: 12px; }
  .impact-flywheel { display: block; border-width: 2px; }
  .impact-stage,
  .impact-stage:nth-of-type(-n+2) {
    min-height: 235px;
    border-right: 0;
    border-bottom: 2px solid var(--blueprint);
  }
  .impact-stage:last-of-type { border-bottom: 0; }
  .impact-stage > strong { font-size: clamp(26px, 8.5vw, 36px); }
  .impact-exchange-key { align-items: flex-start; flex-direction: column; }
  .impact-dialog { width: calc(100vw - 12px); max-height: calc(100svh - 12px); border-radius: 14px; }
  .impact-dialog-head { min-height: 78px; padding: 12px 14px 12px 18px; }
  .impact-dialog-head > span > strong { font-size: 28px; }
  .impact-dialog-body { max-height: calc(100svh - 90px); padding: 20px 16px; }
  .impact-investment-map, .impact-adoption-flow { grid-template-columns: 1fr; padding: 18px; }
  .impact-investment-core { width: 160px; height: 160px; margin: 18px 0; }
  .impact-investment-groups, .impact-adoption-lanes { grid-template-columns: 1fr; }
  .impact-investment-groups article::before, .impact-adoption-source::after { display: none; }
  .impact-adoption-source { width: 100%; height: auto; min-height: 100px; margin: 0; padding: 18px; }
  .impact-adoption-lanes article { grid-template-columns: 1fr; gap: 5px; }
  .impact-adoption-lanes article > span { transform: rotate(90deg); }
  .area-page footer { min-height: 52px; }
}

/* ---------- when the window is shorter than the lobby ----------

   The lobby is a locked one-screen composition: `100svh`, `overflow: hidden`,
   a hero column over a four-card grid. That holds while the window has the
   height it was drawn for. In a short landscape window - a phone turned
   sideways, a laptop with a call docked over half the screen - it does not:
   at 844x390 the suggested question, "Start a conversation" and every one of
   the four area names were cut off by the lock, with no scrollbar to say that
   anything was missing.

   Below this height the lobby stops locking and becomes an ordinary scrolling
   page. Nothing is hidden and nothing shrinks past legibility; the visitor
   scrolls, which is what a short window is for. Placed after the width
   queries so it wins for a window that is both narrow and short. */
@media (max-height: 620px) {
  .lobby {
    height: auto;
    min-height: 100svh;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }
  .lobby main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .lobby-intro {
    min-height: 0;
    padding: 22px clamp(20px, 5vw, 52px) 26px;
  }
  .pathways { overflow: visible; }
  .gallery-grid { grid-template-rows: none; }
  .gallery-card { min-height: 96px; }
  .hero-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .foundation-question-signal i, .foundation-question-progress, .domain-question-progress,
  .project-question-progress, .impact-question-orbit i, .impact-question-progress,
  .impact-investment-core i { animation: none; }
  .hero-canvas, .hero-canvas b, .foundation-core small i,
  .foundation-pipeline i b, .modal-charlie-head-mark::before, .project-charlie-mark::before { animation: none; }
}

/* Charlie embeds the same modal the visitor just left rather than maintaining
   a second, stale project card. Only page chrome and recursive Charlie controls
   stand down; the current dossier markup and its responsive design stay intact. */
.is-embedded {
  min-width: 0;
  overflow: hidden;
  background: #fff;
}
.is-embedded .site-head,
.is-embedded .area-back,
.is-embedded .area-intro,
.is-embedded main > a,
.is-embedded .domain-blueprint,
.is-embedded .project-portfolio,
.is-embedded .impact-exchange,
.is-embedded footer {
  display: none !important;
}
.is-embedded main {
  min-height: 100svh;
  padding: 0;
}
.is-embedded .foundation-system,
.is-embedded .foundation-grid {
  display: contents;
}
/* A `display: contents` box still draws its own generated content, so the
   blueprint's corner marks were left floating over an exhibit that no longer
   has a section for them to mark. */
.is-embedded .foundation-system::before,
.is-embedded .foundation-system::after {
  display: none;
}
.is-embedded .foundation-core,
.is-embedded .foundation-pipeline,
.is-embedded .foundation-system-key,
.is-embedded .foundation-grid > :not(dialog) {
  display: none !important;
}
.is-embedded dialog {
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  border-radius: 0 !important;
}
.area-foundations.is-embedded dialog {
  height: 100svh !important;
}
.area-domains.is-embedded .domain-dossier {
  height: 100svh !important;
}
.area-projects.is-embedded .project-dossier {
  height: 100svh !important;
}
.area-impact.is-embedded .impact-dialog {
  height: 100svh !important;
}
.is-embedded dialog::backdrop { background: #f8f7fa; }
.is-embedded .modal-charlie-head-link,
.is-embedded .project-charlie-link,
.is-embedded .dialog-close {
  display: none !important;
}
.is-embedded .foundation-dialog-head,
.is-embedded .domain-dossier-head,
.is-embedded .impact-dialog-head {
  padding-right: clamp(18px, 3vw, 34px);
}
.is-embedded .project-dossier-shell { height: 100%; }
.is-embedded .impact-dialog-body { max-height: calc(100svh - 100px); }

/* In Charlie, project identity is a compact banner rather than a tall rail.
   This gives the evidence most of the iframe at every viewport shape. */
.area-projects.is-embedded .project-dossier-shell {
  grid-template-columns: 1fr;
  grid-template-rows: 128px minmax(0, 1fr);
}
.area-projects.is-embedded .project-dossier-identity {
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(220px, .7fr) minmax(280px, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 20px;
  padding: 18px clamp(24px, 3vw, 42px);
  border-bottom: 5px solid var(--project-accent);
  box-shadow: 0 12px 30px rgba(23, 7, 71, .16);
}
.area-projects.is-embedded .project-dossier-icon {
  width: 58px;
  height: 58px;
  grid-row: 1 / 3;
  border-radius: 17px;
}
.area-projects.is-embedded .project-dossier-icon svg {
  width: 29px;
  height: 29px;
}
.area-projects.is-embedded .project-dossier-identity > small {
  grid-column: 2;
  align-self: end;
  margin-top: 0;
}
.area-projects.is-embedded .project-dossier-identity h2 {
  grid-column: 2;
  align-self: start;
  margin-top: 3px;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1;
}
.area-projects.is-embedded .project-dossier-identity > p {
  grid-column: 3;
  grid-row: 1 / 3;
  margin-top: 0;
  padding-left: clamp(20px, 2.5vw, 34px);
  border-left: 1px solid rgba(255,255,255,.28);
  font-size: 13px;
  line-height: 1.4;
}
.area-projects.is-embedded .project-identity-graphic {
  display: none;
}
.area-projects.is-embedded .project-dossier-content {
  min-height: 0;
  padding: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 700px) {
  .area-projects.is-embedded .project-dossier-shell {
    grid-template-rows: 184px minmax(0, 1fr);
  }
  .area-projects.is-embedded .project-dossier-identity {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 2px 12px;
    padding: 16px;
  }
  .area-projects.is-embedded .project-dossier-icon {
    width: 44px;
    height: 44px;
    grid-row: 1 / 4;
  }
  .area-projects.is-embedded .project-dossier-identity h2 {
    font-size: clamp(24px, 8vw, 30px);
  }
  .area-projects.is-embedded .project-dossier-identity > p {
    grid-column: 2;
    grid-row: 3;
    margin-top: 5px;
    padding-left: 0;
    border-left: 0;
    font-size: 11px;
  }
}

/* ---------- The lobby, inside Charlie's panel ----------

   Charlie can take a visitor down: from the four areas into one of them, and
   from that area into a single card. Until this there was no way back up. The
   panel's one control was a close button, which takes the whole thing away
   rather than stepping out of it, so a visitor deep inside Foundations could
   reach the rest of the program only by dismissing her page and starting
   again from the site behind her.

   This is the lobby's own pathways grid rather than a second copy of it, on
   the same reasoning as the area overview below: four cards written once
   cannot drift into two disagreeing sets of four. What stands down is what
   the panel has no room for or should not repeat — the hero, the invitation
   to start a conversation with the guide already on screen beside it, and the
   page chrome. */
.lobby.is-embedded {
  height: 100svh;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}
.lobby.is-embedded .skip-link,
.lobby.is-embedded .site-head,
.lobby.is-embedded .lobby-intro,
.lobby.is-embedded .pathways-signal,
.lobby.is-embedded .pathways-watermark,
.lobby.is-embedded .motion-line,
.lobby.is-embedded footer {
  display: none !important;
}
.lobby.is-embedded main {
  grid-template-columns: minmax(0, 1fr);
  /* Fills the frame when the cards do not, so a short hub is one surface
     rather than a band of pathway paper above a band of bare page. */
  grid-template-rows: minmax(min-content, 1fr);
  overflow: auto;
}
.lobby.is-embedded .pathways-intro {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 20px clamp(16px, 4vw, 26px) 18px;
}
.lobby.is-embedded .pathways-intro::before { display: none; }
.lobby.is-embedded .pathways-intro h2 { font-size: clamp(25px, 5vw, 36px); }

/* The four cards are a row apiece on the full page, where each has the width
   of the viewport to fill. In the panel they are tiles, as many across as the
   panel is wide: the name and its arrow on one line, what the area covers
   under both.

   These rules also have to undo the phone layout, and that is the whole
   reason they are stated as fully as they are. The page's narrow breakpoint
   fires on viewport width, and the frame is a third of a page wide at every
   size — so a hub in the panel of a desktop browser was being handed the
   phone's two-column card with its summary line switched off. A frame is
   narrow without being a phone, and this is the difference. */
.lobby.is-embedded .gallery-grid {
  flex: none;
  grid-template-rows: none;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.lobby.is-embedded .gallery-card {
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  align-content: start;
  gap: 11px;
  padding: 18px clamp(15px, 4vw, 21px);
  border-right: 1px solid var(--line);
}
.lobby.is-embedded .gallery-copy { display: contents; }
/* The name takes the row. Sharing it with the arrow left "Foundations" — the
   longest of the four, and the first one anybody reads — running out of its
   own track and over the top of the arrow beside it. The arrow drops to the
   foot of the tile, where it has the width to itself. */
.lobby.is-embedded .gallery-title { grid-column: 1 / -1; grid-row: 1; }
.lobby.is-embedded .gallery-detail { grid-column: 1; grid-row: 2; gap: 5px; }
.lobby.is-embedded .gallery-arrow { grid-column: 2; grid-row: 2; align-self: end; }
/* The full-page card slides right under the cursor. Four tiles side by side
   that each jump on hover is motion for its own sake in a space this small. */
.lobby.is-embedded .gallery-card:hover { padding-left: clamp(15px, 4vw, 21px); }
.lobby.is-embedded .gallery-visual { display: none; }
.lobby.is-embedded .gallery-copy strong { font-size: 25px; }
.lobby.is-embedded .gallery-detail > span:last-child {
  display: block;
  font-size: 11px;
  line-height: 1.45;
}
.lobby.is-embedded .gallery-arrow b { font-size: 20px; }

/* ---------- The area overview, inside Charlie's panel ----------

   Opening Charlie from an area used to leave a visitor either inside one part
   of it — whichever part her opening line happened to name — or, on Projects,
   looking at nothing. The overview is the area whole instead: every foundation,
   every domain, all fourteen projects, each stage of the impact loop, with the
   dialog behind each still one click away.

   It is the page's own grids rather than a second copy of them, so the cards
   here cannot drift from the cards on the page the visitor just left. All that
   changes is the fit: the panel is roughly a third of a page wide, so the
   sections give up their full-bleed headings and decoration and stack into a
   single column. */
.is-overview { overflow: auto; }
.is-overview main { min-height: 0; padding: 0 0 26px; }

/* Undo the exhibit embed's "one dialog and nothing else" — here everything but
   the page chrome is the point. */
.is-overview .domain-blueprint,
.is-overview .project-portfolio,
.is-overview .impact-exchange { display: block !important; }
.is-overview .foundation-system { display: block; }
.is-overview .foundation-grid { display: grid; }
.is-overview .foundation-grid > button { display: flex !important; }

/* The heading the overview leads with, kept in view while the cards scroll
   under it so the visitor always knows which area Charlie is holding. */
.area-overview-head {
  position: sticky;
  z-index: 6;
  top: 0;
  /* This once reserved a corner for the panel's close button, which used to
     float over the frame. It does not any more: the panel carries a head row
     above the frame in every mode, because that is where the trail out of a
     page has to live. Nothing overlaps this heading, so it uses its width. */
  padding: 20px clamp(16px, 4vw, 26px) 15px;
  background: #fff;
  border-bottom: 1px solid rgba(37, 14, 98, .1);
}
.area-overview-head .eyebrow { margin: 0; }
.area-overview-head h1 {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: clamp(30px, 6vw, 46px);
  line-height: .95;
  letter-spacing: -.05em;
}
.area-overview-summary { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.area-overview-note {
  display: inline-block;
  margin: 11px 0 0;
  padding: 6px 13px;
  color: var(--ink);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(227, 28, 121, .13), rgba(119, 52, 172, .13));
  font-size: 11px;
  font-weight: 800;
}

/* Section chrome that only makes sense at full width: its own oversized
   heading, the pipeline diagram, and each blueprint's axis and key. */
.is-overview .foundation-core,
.is-overview .foundation-pipeline,
.is-overview .foundation-system-key,
.is-overview .domain-blueprint-head,
.is-overview .domain-blueprint-key,
.is-overview .domain-plan-axis,
.is-overview .project-portfolio-head,
.is-overview .impact-exchange-head,
.is-overview .impact-exchange-key { display: none !important; }

.is-overview .foundation-system,
.is-overview .domain-blueprint,
.is-overview .project-portfolio,
.is-overview .impact-exchange {
  min-height: 0;
  margin: 0;
  padding: clamp(14px, 3.5vw, 22px);
  border-radius: 0;
  box-shadow: none;
}

/* One column is right for a narrow panel and wasteful in a wide one. A card
   holding a title and three figures does not need the full width of the frame
   to itself, and fourteen of them stacked one per row is a great deal of
   scrolling for a visitor who only wanted to see what an area contains.
   `auto-fit` measures the grid, not the viewport, so the count follows the
   panel's own width: one column in a narrow panel, two or three in a wide
   one, without a breakpoint that has to be kept in step with the panel's. */
.is-overview .foundation-grid,
.is-overview .project-portfolio-grid,
.is-overview .impact-flywheel {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

/* The blueprint grids are stacked blocks at the page's own narrow breakpoint,
   and the panel is narrow at every size — so the three of them are restated
   here as the same measured grid, with the rooms taking whichever column they
   land in rather than the whole width. Domains was the plainest case: its
   rooms stayed one full-width column in a frame wide enough for three. */
.is-overview .foundation-grid,
.is-overview .domain-plan,
.is-overview .impact-flywheel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  grid-template-rows: none;
  gap: 0;
  margin-top: 0;
}
.is-overview .domain-room,
.is-overview .foundation-card,
.is-overview .impact-stage {
  grid-column: auto;
  border-right: 1px solid var(--blueprint);
  border-bottom: 2px solid var(--blueprint);
}
.is-overview .domain-room:last-of-type,
.is-overview .foundation-card:last-of-type,
.is-overview .impact-stage:last-of-type { border-bottom: 0; }

/* Cards written to fill a page column are far taller than they need to be when
   the column is the panel and there are fourteen of them. */
.is-overview .foundation-card,
.is-overview .portfolio-card,
.is-overview .impact-stage { min-height: 0; }
.is-overview .foundation-card > strong { min-height: 0; margin: 13px 0 8px; font-size: 22px; }
.is-overview .foundation-visual { height: 72px; }
.is-overview .domain-room,
.is-overview .foundation-card,
.is-overview .impact-stage { padding: 18px; }
.is-overview .domain-room::after,
.is-overview .foundation-card::after,
.is-overview .impact-stage::after { display: none; }
/* The blueprint "door" hangs on the wall of a room drawn across the page. In
   the panel the rooms sit side by side, so each door became a stray notch on
   the line between two of them — the same reason the room's other blueprint
   decoration already stands down here. */
.is-overview .domain-room-door { display: none; }


/* Card headings are sized against a page column; in the panel they are sized
   against a panel, so they stop scaling with the frame and are simply set. */
.is-overview .domain-room > strong { margin: 12px 0 8px; font-size: 22px; }
.is-overview .domain-room > p { font-size: 12px; line-height: 1.5; }
.is-overview .portfolio-card > strong { font-size: 20px; }
.is-overview .portfolio-card > p { font-size: 12px; }
.is-overview .impact-stage > strong { margin: 12px 0 8px; font-size: 20px; }
.is-overview .impact-stage > p { font-size: 12px; }
.is-overview .foundation-card > p { font-size: 12px; }