/* SettleVIA — institutional system
   White ground · deep forest anchor for full-bleed bands and footer · VIAGreen for actions and the proof seal.
   Cal Sans display, Poppins text. Benchmarked against 15 UN-ecosystem sites (work/bench-un2/).
   Motion lives at the end of this file and runs only under html.motion (no reduced-motion preference). */

:root {
  --ink: #101A14;
  --ink-2: #44514A;          /* secondary text on white: 8.4:1 */
  --ink-3: #5E6A63;          /* captions and meta on white: 5.6:1 */
  --paper: #FFFFFF;
  --mist: #F2F5F0;
  --line: #D9E0D8;
  --line-2: #C3CCC2;
  --forest: #0F2E1F;
  --forest-2: #17402C;
  --forest-line: #2B5640;
  --on-forest: #FFFFFF;
  --on-forest-2: #C4D6C9;    /* secondary text on forest: 9.6:1 */
  --green: #2D6A1E;          /* links and marks on white: 6.6:1 */
  --green-deep: #1E4A12;
  --via: #7BC043;            /* VIAGreen: actions and the proof seal */
  --via-hover: #8DCF55;
  --via-wash: rgba(123, 192, 67, .22);
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --band: clamp(64px, 9vw, 120px);
  --header-h: 76px;
  --radius: 4px;
  --font-body: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Cal Sans", "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --shadow-lift: 0 1px 2px rgba(16,26,20,.08), 0 24px 48px -12px rgba(16,26,20,.28);
  --shadow-soft: 0 1px 2px rgba(16,26,20,.06), 0 24px 48px -20px rgba(16,26,20,.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 72px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s, text-decoration-thickness .2s; }
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.forest :focus-visible, .site-footer :focus-visible { outline-color: var(--via); }
:root { caret-color: var(--green); accent-color: var(--green); scrollbar-color: var(--line-2) transparent; }
::selection { background: var(--via-wash); color: var(--ink); }

h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: 0; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.375rem, 4.6vw, 3.75rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.i { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; transition: transform .35s var(--ease); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 8px; }
.skip:hover, .skip:focus { color: #fff; }
.proto { background: #FFF4CC; color: #4A3B00; font-size: .8125rem; line-height: 1.4; text-align: center; padding: 7px var(--gutter); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ============ Header ============ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease), border-color .3s; view-transition-name: site-header; }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); } }
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line), 0 12px 32px -18px rgba(16,26,20,.35); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { height: 28px; width: auto; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav ul a { display: block; position: relative; padding: 12px; color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.nav ul a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--via); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav ul a:hover { color: var(--ink); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav ul a[aria-current="page"]::after { background: var(--green); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 9px 14px; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.menu-btn:hover { border-color: var(--ink); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), background-color .2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.nav-open .menu-icon { background: transparent; }
.nav-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(16,26,20,.25); padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 16px; }
  .nav-open .nav { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
  .nav ul a::after { left: 0; right: auto; width: 32px; bottom: -1px; }
  .nav .btn { align-self: flex-start; }
}

/* ============ Buttons and links ============ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--via); color: var(--ink); font: inherit; font-size: .9875rem; font-weight: 600; line-height: 1.2; padding: 12px 24px; border-radius: var(--radius); text-decoration: none; border: 0; cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s, transform .12s var(--ease); }
.btn:hover { background: var(--via-hover); color: var(--ink); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.ghost.on-dark { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn.ghost.on-dark:hover { background: #fff; color: var(--forest); }
.btn .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(16,26,20,.25); border-top-color: var(--ink); }
.btn[aria-busy="true"] .spinner { display: block; animation: spin .7s linear infinite; }
.btn[aria-busy="true"] .btn-label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 0; }
.actions.end { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.more:hover .i, .route:hover .i { transform: translateX(4px); }
.more.on-dark { color: #fff; }
.more.on-dark:hover { color: var(--via); }

/* ============ Bands ============ */
.band { padding: var(--band) 0; }
.band.flush { padding-top: 0; }
.mist { background: var(--mist); }
.forest { background: var(--forest); color: var(--on-forest); }
.forest p, .forest li { color: var(--on-forest-2); }
.forest a:not(.btn) { color: #fff; }
.section-head { max-width: 52rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { margin-bottom: 0; }
.section-head .lead { margin-top: 20px; margin-bottom: 0; }
.split-head { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ============ Photography ============ */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--line); border-radius: var(--radius); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; right: 0; bottom: 0; z-index: 1; background: rgba(16,26,20,.72); color: #fff; font-size: .6875rem; line-height: 1.3; letter-spacing: .01em; padding: 5px 9px; border-top-left-radius: var(--radius); max-width: 80%; }
.photo.tall, .photo.frame { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 21 / 9; }
.photo.card { aspect-ratio: 3 / 2; border-radius: var(--radius) var(--radius) 0 0; }
.photo.card figcaption { display: none; }
@media (max-width: 700px) { .photo.wide { aspect-ratio: 4 / 3; } }

/* ============ Hero (home) ============ */
.hero { padding: clamp(40px, 6vw, 88px) 0 0; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); } }
.hero-copy h1 em { font-style: normal; color: var(--green); }
.ink-line { background: linear-gradient(var(--via), var(--via)) 0 92% / 100% .09em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .02em; }
.hero-copy .lead { margin-top: 24px; }
.trust { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; color: var(--ink-3); font-size: .9375rem; }
.trust::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%232D6A1E' stroke-width='1.6'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3' fill='none' stroke='%232D6A1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero-media { position: relative; }
.hero-media .photo.tall { max-height: 640px; aspect-ratio: 4 / 4.6; }
.hero-media .photo img { object-position: 55% 50%; }
.hero-media .photo figcaption { top: 0; bottom: auto; border-radius: 0 0 0 var(--radius); }
.hero-media .receipt.float { position: absolute; left: -48px; bottom: -40px; width: min(380px, 80%); box-shadow: var(--shadow-lift); }
.hero-media .receipt.float .ext { display: none; }
@media (max-width: 1180px) { .hero-media .receipt.float { left: -24px; } }
@media (max-width: 959px) {
  .hero-media .receipt.float { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 16px 0; }
  .hero-media .photo.tall { aspect-ratio: 4 / 3.4; }
}

/* Partners strip */
.partners { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 40px; margin-top: clamp(72px, 9vw, 112px); padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners .label { font-size: .875rem; color: var(--ink-3); font-weight: 500; margin-right: 8px; }
.partners ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 48px; }
.partners .wordmark { font-weight: 600; font-size: 1rem; color: var(--ink-2); letter-spacing: -.005em; }
.prose .partners { margin: 32px 0 0; }

/* ============ The signed decision (the site's proof object) ============ */
.receipt { margin: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px 20px; font-size: .875rem; line-height: 1.45; position: relative; }
.receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.receipt .label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.receipt .seal { width: 34px; height: 34px; color: var(--via); flex: none; }
.receipt dl { margin: 0; display: grid; gap: 7px; }
.receipt .row { display: grid; grid-template-columns: 7.5em 1fr; gap: 18px; }
.receipt dt { color: var(--ink-3); }
.receipt dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.verdict { display: inline-block; font-weight: 600; letter-spacing: .06em; background: var(--via-wash); color: var(--green-deep); padding: 1px 8px; border-radius: 3px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.checks li { display: flex; align-items: center; gap: 7px; }
.ck { width: 15px; height: 15px; color: var(--green); flex: none; }
.ck path { stroke-dasharray: 16; stroke-dashoffset: 0; }

/* ============ Home: Ana's week ============ */
.story-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(56px, 7vw, 112px); align-items: start; } .story-intro { position: sticky; top: calc(var(--header-h) + 36px); } }
.story-photo { position: relative; margin-bottom: 36px; }
.story-photo .photo { aspect-ratio: 3 / 2; }
.story-photo .photo img { object-position: 30% 40%; }
.story-photo .tag { position: absolute; left: 16px; top: 16px; z-index: 2; background: var(--paper); color: var(--ink); font-size: .8125rem; font-weight: 600; padding: 5px 10px; border-radius: 3px; }
.journey { list-style: none; margin: 0; padding: 0; counter-reset: j; }
.journey li { counter-increment: j; position: relative; padding: 0 0 36px 72px; }
.journey li::before { content: counter(j); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--forest); color: var(--forest); font-family: var(--font-head); font-size: 1.125rem; display: grid; place-items: center; z-index: 1; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.journey li::after { content: ""; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1.5px; background: var(--line-2); transform-origin: top; }
.journey li:last-child { padding-bottom: 0; }
.journey li:last-child::after { display: none; }
.journey li:last-child::before { background: var(--forest); color: #fff; }
.journey p { margin: 0; color: var(--ink-2); }
.journey strong { color: var(--ink); font-weight: 600; }
.tech { position: absolute; left: 22px; top: 50px; z-index: 2; transform: translateX(-50%); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; line-height: 1.6; color: var(--forest); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 6px; border-radius: 3px; white-space: nowrap; }
.journey li:has(.tech) { padding-bottom: 52px; }

/* ============ Media split on forest ============ */
.media-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 112px); } }
.media-split .photo img { object-position: 45% 50%; }
.media-text p { font-size: 1.0625rem; }
.hl { color: #fff; font-weight: 500; background: linear-gradient(var(--via), var(--via)) 0 100% / 100% 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 2px; }
.hl-ink { background: linear-gradient(var(--via-wash), var(--via-wash)) 0 88% / 100% .5em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ============ Outcomes with SDG chips ============ */
.outcome-cols { display: grid; gap: 48px; }
@media (min-width: 900px) { .outcome-cols { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); } }
.outcome-col h3 { padding-bottom: 18px; margin-bottom: 0; border-bottom: 2px solid var(--forest); }
.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.outcomes p { margin: 0; color: var(--ink-2); }
.outcome-foot { margin-top: 48px; display: grid; grid-template-columns: 112px 1fr; gap: 28px; align-items: center; }
@media (min-width: 700px) { .outcome-foot { grid-template-columns: 140px 1fr; gap: 40px; } }
.outcome-foot .actions { margin-top: 20px; }
.outcomes .source { margin: 10px 0 0; }
.thumb { display: block; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,26,20,.12), 0 14px 28px -12px rgba(16,26,20,.35); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.thumb img { width: 100%; height: auto; }
.thumb:hover { transform: translateY(-4px) rotate(-.8deg); box-shadow: 0 1px 2px rgba(16,26,20,.12), 0 24px 40px -14px rgba(16,26,20,.42); }
.thumb:not(a):hover { transform: none; }
/* Request-the-brief gate: the PDF is never downloadable, visitors ask for it by email instead. */
.brief-form { max-width: 460px; }
#brief { scroll-margin-top: calc(var(--header-h) + 24px); }
.note { font-size: 1.0625rem; color: var(--ink); margin: 0; }
.source { font-size: .8125rem; color: var(--ink-3); margin: 0; }


/* ============ Full-bleed feature ============ */
.feature { position: relative; padding: 0; background: var(--forest); overflow: hidden; }
.feature .photo.bleed { position: absolute; inset: 0; border-radius: 0; }
.feature .photo.bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,46,31,.55) 0%, rgba(15,46,31,0) 60%); }
.feature .wrap { position: relative; padding-top: clamp(96px, 14vw, 200px); padding-bottom: clamp(96px, 14vw, 200px); }
.feature-panel { background: var(--paper); max-width: 640px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.feature-panel .lead { color: var(--ink); }
.feature-panel p { color: var(--ink-2); }
.feature-panel p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .feature { background: var(--paper); }
  .feature .photo.bleed { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .feature .photo.bleed::after { display: none; }
  .feature .photo.bleed figcaption { top: 0; bottom: auto; border-radius: 0 0 0 var(--radius); }
  .feature .wrap { padding-top: 0; padding-bottom: 0; margin-top: -48px; }
  .feature-panel { box-shadow: none; padding: 28px 22px 40px; border-radius: var(--radius) var(--radius) 0 0; }
}

/* ============ Principles ============ */
.principles { display: grid; gap: 40px 48px; }
@media (min-width: 720px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .principles.four { grid-template-columns: repeat(4, 1fr); } .principles.three { grid-template-columns: repeat(3, 1fr); } }
.principle { padding-top: 24px; border-top: 1px solid var(--line-2); }
.forest .principle { border-top-color: var(--forest-line); }
.principles.four .principle { border-top: 0; padding-top: 0; }
.principle h3 { font-size: 1.375rem; margin-bottom: 12px; }
.principle p { margin: 0; color: var(--ink-2); }
.forest .principle p { color: var(--on-forest-2); }
.forest .principle h3::before { content: ""; display: block; width: 28px; height: 3px; background: rgba(255,255,255,.35); margin-bottom: 20px; }

/* ============ Audience routes ============ */
.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 640px) { .routes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .routes { grid-template-columns: repeat(4, 1fr); } }
.route { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); background: linear-gradient(var(--via), var(--via)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.route .photo img { transition: transform .9s var(--ease), filter .5s var(--ease); }
.route:hover { color: var(--ink); background-size: 100% 2px; }
.route:hover .photo img { transform: scale(1.04); }
.route h3 { margin: 22px 0 10px; font-size: 1.375rem; }
.go { margin-top: auto; padding-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; font-size: .9375rem; }

/* ============ Publication feature ============ */
.pub { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .pub { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); } }
.cover { display: flex; flex-direction: column; aspect-ratio: 210 / 297; max-width: 340px; width: 100%; background: var(--paper); text-decoration: none; color: var(--ink); border-radius: 2px; box-shadow: 0 1px 2px rgba(16,26,20,.1), 0 18px 40px -12px rgba(16,26,20,.3); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.cover:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 1px 2px rgba(16,26,20,.1), 0 32px 60px -16px rgba(16,26,20,.4); color: var(--ink); }
.cover.pdf { display: block; aspect-ratio: auto; background: #fff; }
.cover.pdf img { width: 100%; height: auto; }
.pub-text .lead { margin-bottom: 0; }
@media (max-width: 859px) { .pub .cover { max-width: 260px; } .doc-hero .cover { order: 2; } }

/* ============ Inner page hero ============ */
.page-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: 24px; }
.page-hero .hero-grid { align-items: center; }
.crumbs ol { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--green); }
.page-hero h1.statement { font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1.14; max-width: 1040px; }
.wide-photo { margin-top: clamp(48px, 6vw, 80px); }
.thesis { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--ink); max-width: 40em; margin: 28px 0 0; }

/* On-page index (How it works) */
.onpage { position: sticky; top: var(--header-h); z-index: 40; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
@supports (backdrop-filter: blur(8px)) { .onpage { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(10px); } }
.onpage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 32px; }
.onpage a { position: relative; display: block; padding: 16px 0; color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: color .2s; }
.onpage a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--via); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.onpage a:hover { color: var(--ink); }
.onpage a:hover::after { transform: scaleX(1); }
.onpage a[aria-current="true"] { color: var(--ink); }
.onpage a[aria-current="true"]::after { transform: scaleX(1); background: var(--forest); }
@media (max-width: 700px) {
  .onpage { position: static; }
  .onpage ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .onpage a { padding: 12px 0; font-size: .875rem; }
}

/* ============ Two-column text ============ */
.two-col { display: grid; gap: 24px 48px; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.two-col > h2 { margin: 0; }
.prose { max-width: 42rem; }
.prose p { color: var(--ink-2); }
.prose .first { font-size: 1.1875rem; line-height: 1.65; color: var(--ink); }
.forest .prose p { color: var(--on-forest-2); }
.forest .prose .first { color: #fff; }
.measure { max-width: 44rem; }
.pair { display: grid; gap: 36px 48px; }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair h3 { margin-bottom: 10px; }
.pair p { margin: 0; }
.columns { display: grid; gap: 40px 56px; }
@media (min-width: 900px) { .columns.three { grid-template-columns: repeat(3, 1fr); } .columns.two { grid-template-columns: 1fr 1fr; } }
.columns > div { padding-top: 24px; border-top: 1px solid var(--line-2); }
.columns.two > div { border-top: 2px solid var(--forest); }
.columns h3 { margin-bottom: 12px; }
.columns p { color: var(--ink-2); margin: 0; }
.columns.two h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* ============ How it works: engines ============ */
.engines { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .engines { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.engines li { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 32px 28px 28px; }
@media (min-width: 900px) {
  .engines li + li { border-left: 0; }
  .engines li:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .engines li:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
  .engines li + li::before { content: ""; position: absolute; left: -14px; top: 38px; width: 26px; height: 26px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='%230F2E1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--line); border-radius: 50%; z-index: 1; }
}
.verb { display: block; font-family: var(--font-head); font-size: 1.625rem; line-height: 1.1; margin-bottom: 16px; color: var(--forest); }
.engines p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.binding { display: flex; gap: 20px; align-items: center; margin: 24px 0 0; padding: 24px 28px; background: var(--forest); color: #fff; border-radius: var(--radius); font-family: var(--font-head); font-size: clamp(1.125rem, 1.9vw, 1.375rem); line-height: 1.4; }
.binding .seal { width: 44px; height: 44px; flex: none; color: var(--via); }

.evidence { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .evidence { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 112px); } .evidence .receipt { position: sticky; top: calc(var(--header-h) + 88px); } }
.evidence .receipt { box-shadow: var(--shadow-soft); }

.ai-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .ai-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 112px); } .ai-grid .flow { position: sticky; top: calc(var(--header-h) + 88px); } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; }
.flow li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; padding: 22px 0; border-top: 1px solid var(--forest-line); }
.flow li:last-child { border-bottom: 1px solid var(--forest-line); }
.flow .node { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--forest); background: var(--via); border-radius: 3px; padding: 4px 10px; justify-self: start; transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.flow li:first-child .node { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.flow p { margin: 0; color: #fff; }
@media (max-width: 520px) { .flow li { grid-template-columns: 88px 1fr; gap: 14px; } }

/* ============ Countries ============ */
.systems { margin-top: clamp(56px, 7vw, 96px); }
.systems .layer { background: var(--forest); border-radius: var(--radius) var(--radius) 0 0; padding: 18px; display: grid; place-items: center; position: relative; }
.systems .layer img { height: 20px; width: auto; }
.systems ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.systems li { padding: 22px 16px; text-align: center; font-weight: 500; font-size: .9375rem; position: relative; }
.systems li + li { border-left: 1px solid var(--line); }
.systems li::before { content: ""; display: block; width: 1.5px; height: 18px; background: var(--via); margin: -22px auto 12px; transform-origin: top; }
@media (max-width: 640px) { .systems ul { grid-template-columns: 1fr 1fr; } .systems li:nth-child(odd) { border-left: 0; } .systems li { border-top: 1px solid var(--line); } .systems li:nth-child(-n+2) { border-top: 0; } .systems li:last-child { grid-column: 1 / -1; border-left: 0; } }
.big { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.1; max-width: 22ch; }
.big span { display: block; }
.big span:last-child { color: var(--via); }
.big-follow { max-width: 42rem; font-size: 1.1875rem; margin: 36px 0 0; }

.path { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: s; display: grid; }
.path li { counter-increment: s; position: relative; padding: 0 0 28px 64px; color: var(--ink-2); }
.path li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--forest); background: var(--mist); color: var(--forest); display: grid; place-items: center; font-family: var(--font-head); font-size: 1.0625rem; z-index: 1; transition: background-color .4s var(--ease), color .4s var(--ease); }
.path li::after { content: ""; position: absolute; left: 19.5px; top: 36px; bottom: 0; width: 1.5px; background: var(--line-2); transform-origin: top; }
.path li:last-child::before { background: var(--forest); color: #fff; }
.path li:last-child::after { display: none; }
.path strong { display: block; color: var(--ink); font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; margin-bottom: 6px; }
@media (min-width: 960px) {
  .path { grid-template-columns: repeat(5, 1fr); gap: 32px; }
  .path li { padding: 64px 0 0; }
  .path li::after { top: 19.5px; left: 48px; right: -24px; bottom: auto; width: auto; height: 1.5px; transform-origin: left; }
}

/* ============ The brief ============ */
.doc-hero .pub { align-items: start; }
.doc-hero .pub-text .lead { margin-bottom: 1em; }
.pub-meta { font-size: .9375rem; color: var(--ink-3); margin: -4px 0 0; }
.doc-hero .pub-text > p:not(.lead):not(.pub-meta) { color: var(--ink-2); max-width: 40em; }

/* ============ Contact ============ */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(56px, 7vw, 112px); } }
.contact-meta { font-size: .9375rem; color: var(--ink-3); margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-panel { background: var(--mist); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); }
form.contact { display: grid; gap: 20px; }
@media (min-width: 640px) { form.contact { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: .9375rem; }
.req { font-size: .75rem; font-weight: 500; color: var(--ink-3); }
form.contact input, form.contact select, form.contact textarea { font: inherit; font-size: 1rem; padding: 12px 14px; min-height: 48px; border: 1px solid #7C877F; border-radius: var(--radius); width: 100%; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
form.contact input:hover, form.contact select:hover, form.contact textarea:hover { border-color: var(--ink); }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,106,30,.25); }
form.contact [aria-invalid="true"], form.contact [aria-invalid="true"]:focus, form.contact [aria-invalid="true"]:hover { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.18); }
form.contact textarea { min-height: 140px; resize: vertical; }
form.contact select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8' fill='none' stroke='%23101A14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; cursor: pointer; }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .875rem; font-weight: 500; color: #B3261E; }
.field-error::before { content: ""; width: 14px; height: 14px; flex: none; margin-top: .3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23B3261E' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4M8 11v.5' stroke='%23B3261E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.notice { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 20px 0 0; }
.notice:focus { outline: 3px solid var(--green); outline-offset: 2px; }

/* ============ News ============ */
.news { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--forest); }
.news li { display: grid; gap: 6px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .news li { grid-template-columns: 260px 1fr; } }
.news .kind { font-size: .9375rem; font-weight: 600; color: var(--ink-3); }
.news p { margin: 0; font-family: var(--font-head); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.34; max-width: 36em; }
.news .lead-item p { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.32; }
.news .lead-item .kind { color: var(--green); }

/* ============ Footer ============ */
.site-footer { background: var(--forest); color: var(--on-forest-2); font-size: .9375rem; padding: clamp(56px, 7vw, 88px) 0 32px; }
.foot-top { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 860px) { .foot-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.foot-brand img { height: 30px; width: auto; margin-bottom: 24px; }
.foot-line { font-family: var(--font-head); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; color: #fff; max-width: 18em; margin-bottom: 10px; }
.foot-tag { color: rgba(255,255,255,.72); font-weight: 500; margin: 0; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.site-footer h2 { font-family: var(--font-body); font-size: .875rem; font-weight: 600; color: #fff; margin: 0 0 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer ul a { display: inline-block; padding: 6px 0; color: var(--on-forest-2); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-custody { display: flex; align-items: center; gap: 12px; margin: 0; padding: 22px 0; border-top: 1px solid var(--forest-line); border-bottom: 1px solid var(--forest-line); color: #fff; }
.seal-i { width: 22px; height: 22px; color: var(--via); flex: none; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; font-size: .8125rem; color: var(--on-forest-2); }

/* =====================================================================
   MOTION
   One authored moment: the decision is signed (hero). Supporting motion
   carries order (DGI → VETO → Threads, scope → hand over), arrival
   (Ana's steps reached as you read) and the reveal of evidence (photos).
   Everything below is gated by html.motion; without it the page is static
   and complete.
   ===================================================================== */

/* Cross-page continuity: the header holds still, the page cross-fades. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Focal moment: the decision is signed ---- */
  .motion .hero-home .photo.tall { animation: unveil 1.1s var(--ease) .05s both; }
  .motion .hero-home .photo.tall img { animation: settle 1.6s var(--ease) .05s both; }
  .motion .hero-home .ink-line { animation: ink .9s var(--ease) 1.0s both; }
  @media (min-width: 960px) { .motion .hero-home .ink-line { animation-delay: 2.3s; } }
  .motion .hero-home .receipt.float { animation: land .8s var(--ease) .45s both; }
  .motion .hero-home .receipt.float .receipt-head,
  .motion .hero-home .receipt.float .row { animation: row .5s var(--ease) both; animation-delay: calc(.5s + var(--r, 0) * 70ms); }
  .motion .hero-home .receipt.float .row:nth-child(1) { --r: 1; }
  .motion .hero-home .receipt.float .row:nth-child(2) { --r: 2; }
  .motion .hero-home .receipt.float .row:nth-child(5) { --r: 3; }
  .motion .hero-home .receipt.float .row:nth-child(6) { --r: 4; }
  .motion .hero-home .receipt.float .row:nth-child(9) { --r: 5; }
  .motion .hero-home .receipt.float .checks li:nth-child(1) .ck path { animation: tick .35s var(--ease) 1.0s both; }
  .motion .hero-home .receipt.float .checks li:nth-child(2) .ck path { animation: tick .35s var(--ease) 1.2s both; }
  .motion .hero-home .receipt.float .checks li:nth-child(3) .ck path { animation: tick .35s var(--ease) 1.4s both; }
  .motion .hero-home .receipt.float .verdict { animation: stamp .55s var(--ease) 1.7s both; }
  .motion .hero-home .receipt.float .seal { animation: seal .7s var(--ease) 1.85s both; }
  .motion .hero-home .photo.tall figcaption { animation: row .4s var(--ease) 1.1s both; }
  .motion .hero-home .receipt.float.wait, .motion .hero-home .receipt.float.wait *, .motion .hero-home .receipt.float.wait ~ * { animation-play-state: paused; }

  /* ---- The same signing, replayed when a specimen scrolls into view ---- */
  .reveal [data-reveal="sign"] .row { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .reveal [data-reveal="sign"] .ck path { stroke-dashoffset: 16; transition: stroke-dashoffset .35s var(--ease); }
  .reveal [data-reveal="sign"] .seal { opacity: 0; transform: scale(.6) rotate(-40deg); transition: opacity .5s var(--ease), transform .7s var(--ease); }
  .reveal [data-reveal="sign"] .verdict { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .reveal [data-reveal="sign"].is-in .row { opacity: 1; transform: none; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(2) { transition-delay: 70ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(3) { transition-delay: 140ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(4) { transition-delay: 210ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(5) { transition-delay: 280ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(6) { transition-delay: 350ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(7) { transition-delay: 420ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(8) { transition-delay: 490ms; }
  .reveal [data-reveal="sign"].is-in .row:nth-child(9) { transition-delay: 560ms; }
  .reveal [data-reveal="sign"].is-in .ck path { stroke-dashoffset: 0; }
  .reveal [data-reveal="sign"].is-in .checks li:nth-child(1) .ck path { transition-delay: .55s; }
  .reveal [data-reveal="sign"].is-in .checks li:nth-child(2) .ck path { transition-delay: .75s; }
  .reveal [data-reveal="sign"].is-in .checks li:nth-child(3) .ck path { transition-delay: .95s; }
  .reveal [data-reveal="sign"].is-in .seal { opacity: 1; transform: none; transition-delay: 1.15s; }
  .reveal [data-reveal="sign"].is-in .verdict { animation: stamp .55s var(--ease) 1.05s both; }

  /* ---- Evidence unveiled: photographs open from a crop ---- */
  .reveal [data-reveal="photo"] { clip-path: inset(7% 5% 7% 5% round var(--radius)); transition: clip-path 1.1s var(--ease); }
  .reveal [data-reveal="photo"] img { transform: scale(1.1); transition: transform 1.6s var(--ease); }
  .reveal [data-reveal="photo"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
  .reveal [data-reveal="photo"].is-in img { transform: none; }

  /* ---- Ana's week: each step is reached in turn ---- */
  .reveal [data-reveal="journey"] li::after { transform: scaleY(0); transition: transform .9s var(--ease) .15s; }
  .reveal [data-reveal="journey"] li.is-reached::after { transform: scaleY(1); }
  .reveal [data-reveal="journey"] li:not(:last-child).is-reached::before { background: var(--forest); color: #fff; }
  .reveal [data-reveal="journey"] li:last-child::before { background: var(--paper); color: var(--forest); }
  .reveal [data-reveal="journey"] li:last-child.is-reached::before { background: var(--via); border-color: var(--via); color: var(--forest); }
  .reveal [data-reveal="journey"] .tech { transition: background-color .5s var(--ease), color .5s var(--ease); }
  .reveal [data-reveal="journey"] li.is-reached .tech { background: var(--via); box-shadow: none; }

  /* ---- Order made visible: sequences light one after another ---- */
  .reveal [data-reveal="seq"] > li,
  .reveal [data-reveal="seq"] > ul > li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 180ms); }
  .reveal [data-reveal="seq"].is-in > li,
  .reveal [data-reveal="seq"].is-in > ul > li { opacity: 1; transform: none; }
  .reveal .engines li + li::before { transform: scale(0); transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 180ms + 120ms); }
  .reveal .engines.is-in li + li::before { transform: none; }
  .reveal .flow .node { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); transition-delay: calc(var(--i, 0) * 260ms + 300ms); }
  .reveal .flow.is-in li:not(:first-child) .node { background: var(--via); color: var(--forest); box-shadow: none; }
  .reveal .systems .layer { opacity: 0; transform: translateY(-14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal .systems.is-in .layer { opacity: 1; transform: none; }
  .reveal .systems li::before { transform: scaleY(0); transition: transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 450ms); }
  .reveal .systems.is-in li::before { transform: none; }
  .reveal .systems > ul > li { transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
  .reveal .path li::after { transform: scaleX(0); transition: transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 180ms + 250ms); }
  @media (max-width: 959px) { .reveal .path li::after { transform: scaleY(0); } }
  .reveal .path.is-in li::after { transform: none; }

  /* ---- Statements: lines rise from their own baseline ---- */
  .reveal [data-reveal="lines"] span { clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
  .reveal [data-reveal="lines"] span:nth-child(2) { transition-delay: .14s; }
  .reveal [data-reveal="lines"] span:nth-child(3) { transition-delay: .28s; }
  .reveal [data-reveal="lines"].is-in span { clip-path: inset(0 0 -10% 0); transform: none; }

  /* ---- Highlights: the line is drawn under the words that matter ---- */
  .reveal .hl[data-reveal="mark"] { background-size: 0 2px; transition: background-size 1s var(--ease) .2s; }
  .reveal .hl[data-reveal="mark"].is-in { background-size: 100% 2px; }
  .reveal .hl-ink[data-reveal="mark"] { background-size: 0 .5em; transition: background-size 1.1s var(--ease) .2s; }
  .reveal .hl-ink[data-reveal="mark"].is-in { background-size: 100% .5em; }
  .reveal [data-reveal="stamp"] .seal { opacity: 0; transform: scale(.6) rotate(-40deg); transition: opacity .5s var(--ease), transform .7s var(--ease); }
  .reveal [data-reveal="stamp"].is-in .seal { opacity: 1; transform: none; transition-delay: .2s; }

  /* ---- Mobile menu opens as a sheet ---- */
  .nav-open .nav { animation: sheet .32s var(--ease) both; }

  /* ---- The landscape band drifts against the scroll ---- */
  @supports (animation-timeline: view()) {
    .feature .photo.bleed img { height: 116%; margin-top: -8%; animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    @media (max-width: 700px) { .feature .photo.bleed img { height: 100%; margin-top: 0; animation: none; } }
  }
}

@keyframes unveil { from { clip-path: inset(0 0 0 100% round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes ink { from { background-size: 0 .09em; } to { background-size: 100% .09em; } }
@keyframes land { from { opacity: 0; transform: translateY(28px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tick { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes stamp { 0% { transform: scale(1.35); box-shadow: 0 0 0 0 rgba(123,192,67,.55); opacity: 0; } 55% { transform: scale(.96); opacity: 1; } 100% { transform: none; box-shadow: 0 0 0 10px rgba(123,192,67,0); } }
@keyframes seal { from { opacity: 0; transform: scale(.5) rotate(-60deg); } to { opacity: 1; transform: none; } }
@keyframes sheet { from { clip-path: inset(0 0 100% 0); opacity: .6; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }

/* Reduced motion: no travel, no zoom. Colour and state changes stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .route:hover .photo img, .cover:hover, .thumb:hover, .cover:hover .cover-img img, .btn:active { transform: none; }
  .more:hover .i, .route:hover .i { transform: none; }
}

@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-reveal], [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .site-footer h2, .site-footer p, .site-footer .foot-custody, .site-footer .legal, .foot-line, .foot-tag { color: #111 !important; }
  .site-footer img, .systems .layer img { filter: brightness(0); }
  .systems .layer { background: #fff !important; box-shadow: inset 0 0 0 1.5px #111; }
  .systems li, .path li, .path strong { color: #111 !important; }
  .big span:last-child { color: #111; }
  .proto, .nav, .menu-btn, .actions, .skip, .onpage { display: none !important; }
  .site-header { position: static; }
  .band { padding: 24px 0; }
  .forest, .mist, .site-footer { background: #fff !important; color: #111 !important; }
  .forest p, .forest li, .site-footer a { color: #111 !important; }
}

/* =====================================================================
   PROOF IN MOTION: impact layer (Steve, 5 Oct 2026: "extreme visual impact")
   Same brand, turned up: VIAGreen owns whole fields, forest becomes a lit
   gradient, display type goes to full scale, buttons carry light and motion,
   photography is graded to the forest and opens to full colour.
   ===================================================================== */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
:root {
  --mesh: radial-gradient(70% 90% at var(--mx) var(--my), rgba(123,192,67,.34), rgba(123,192,67,0) 62%),
          radial-gradient(60% 80% at 8% 105%, rgba(45,106,30,.75), rgba(45,106,30,0) 60%),
          linear-gradient(160deg, #0F2E1F 0%, #123826 55%, #0C2619 100%);
  --via-field: linear-gradient(135deg, #8DCF55 0%, #7BC043 45%, #6CB236 100%);
  --btn-face: linear-gradient(180deg, #8DCF55 0%, #7BC043 55%, #70B83A 100%);
  --btn-face-hover: linear-gradient(180deg, #9BD964 0%, #86C94C 55%, #7BC043 100%);
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5.5 15.5 10 11 14.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Display type at full strength ---- */
.hero-copy h1 { font-size: clamp(3rem, 7.2vw, 6rem); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.01em; }
.page-hero h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1; letter-spacing: -.02em; }
.page-hero h1.statement { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.1; }

/* ---- Buttons: light, direction, weight ---- */
.btn { min-height: 56px; padding: 14px 22px 14px 26px; border-radius: 6px; gap: 12px; overflow: hidden; isolation: isolate;
  background: var(--btn-face); color: var(--forest);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(15,46,31,.18), 0 10px 24px -12px rgba(94,158,46,.9);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), color .2s; }
.btn::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: -60%; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.btn::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transition: transform .35s var(--ease); }
.btn:hover { background: var(--btn-face-hover); color: var(--forest); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(15,46,31,.18), 0 16px 32px -12px rgba(94,158,46,1); }
.btn:hover::before { left: 120%; }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn[type="submit"]::after { display: none; }
.btn.ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 2px var(--forest);
  background-image: linear-gradient(var(--forest), var(--forest)); background-repeat: no-repeat; background-size: 0 100%;
  transition: background-size .45s var(--ease), color .3s var(--ease), transform .25s var(--ease); }
.btn.ghost::before { display: none; }
.btn.ghost:hover { background-color: transparent; background-size: 100% 100%; color: #fff; box-shadow: inset 0 0 0 2px var(--forest); }
.btn.ghost.on-dark, .page-hero .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); background-image: linear-gradient(var(--via), var(--via)); }
.btn.ghost.on-dark:hover, .page-hero .btn.ghost:hover { color: var(--forest); box-shadow: inset 0 0 0 2px var(--via); }
.site-header .btn { min-height: 46px; padding: 10px 16px 10px 20px; }
.site-header .btn::after { width: 16px; height: 16px; }
.forest .btn:not(.ghost), .page-hero .btn:not(.ghost) { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(15,46,31,.18), 0 12px 30px -10px rgba(123,192,67,.65); }

/* ---- Lit forest: every forest field becomes a living gradient ---- */
.forest, .site-footer, .page-hero, .binding, .systems .layer { background: var(--mesh); background-color: var(--forest); }
.mesh-live { animation: mesh-drift 22s ease-in-out infinite alternate; }
@keyframes mesh-drift { 0% { --mx: 82%; --my: 12%; } 50% { --mx: 58%; --my: 30%; } 100% { --mx: 88%; --my: 55%; } }

/* ---- Inner page heroes: drenched forest, white type ---- */
.page-hero { color: #fff; padding-bottom: clamp(64px, 8vw, 112px); }
.page-hero .lead, .page-hero p { color: var(--on-forest-2); }
.page-hero .thesis { color: #fff; }
.page-hero .crumbs ol, .page-hero .crumbs a { color: var(--on-forest-2); }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .crumbs li + li::before { color: var(--forest-line); }
.page-hero :focus-visible { outline-color: var(--via); }
.page-hero .pub-meta { color: var(--via); }
.page-hero .photo { box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.page-hero .systems ul { border-color: var(--forest-line); }
.page-hero .systems li { color: #fff; }
.page-hero .systems li + li { border-left-color: var(--forest-line); }
@media (max-width: 640px) { .page-hero .systems li { border-top-color: var(--forest-line); } }
.page-hero .systems .layer { background: var(--via-field); }
.page-hero .systems .layer img { filter: brightness(0) saturate(100%) invert(12%) sepia(23%) saturate(1500%) hue-rotate(105deg); }
.page-hero .systems li::before { background: var(--via); }
.contact-hero .form-panel { background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.contact-hero .form-panel p.notice { color: var(--ink); }
.contact-hero .field-error { color: #B3261E; }
.cover.pdf { box-shadow: 0 40px 70px -24px rgba(0,0,0,.6); }

/* ---- Hero: a lit field behind the evidence ---- */
.hero-media { isolation: isolate; }
.hero-media::before { content: ""; position: absolute; z-index: -1; inset: 48px -64px -72px 64px; border-radius: 8px; background: var(--mesh); background-color: var(--forest); }
.hero-media .receipt.float { width: min(420px, 86%); }
.hero-media .receipt .seal { width: 42px; height: 42px; }
@media (max-width: 1180px) { .hero-media::before { right: -24px; } }
@media (max-width: 959px) { .hero-media::before { inset: 32px -12px -24px 32px; } .hero-media .receipt.float { width: auto; } }

/* ---- VIAGreen owns whole fields ---- */
.feature-panel { background: var(--via-field); color: var(--forest); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.feature-panel h2, .feature-panel .lead, .feature-panel p { color: var(--forest); }
.feature-panel .lead { font-weight: 500; }
.feature .photo.bleed::after { background: linear-gradient(90deg, rgba(15,46,31,.75) 0%, rgba(15,46,31,.15) 55%, rgba(15,46,31,0) 80%); }
.story-band { background: linear-gradient(180deg, var(--mist) 0%, #E4F0D9 100%); }

/* ---- Photography graded to the forest, full colour on approach ---- */
.media-split .photo::after, .route .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,46,31,0) 40%, rgba(15,46,31,.55) 100%), rgba(45,106,30,.28); mix-blend-mode: multiply; transition: opacity .7s var(--ease); pointer-events: none; }
.route:hover .photo::after, .route:focus-visible .photo::after { opacity: 0; }
.media-split .photo img, .route .photo img { filter: saturate(.85) contrast(1.06); transition: filter .7s var(--ease), transform .9s var(--ease); }
.route:hover .photo img { filter: none; }
.route h3 { font-size: clamp(1.375rem, 1.8vw, 1.75rem); }
.route .go { font-size: 1rem; }

/* ---- What proof makes possible: weighted and balanced ---- */
.outcome-cols.weighted { gap: clamp(40px, 5vw, 80px); }
@media (min-width: 900px) { .outcome-cols.weighted { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.outcomes.grid2 { display: grid; column-gap: clamp(32px, 4vw, 56px); }
@media (min-width: 640px) { .outcomes.grid2 { grid-template-columns: 1fr 1fr; } }
.outcomes li { padding: 26px 0; }
.outcomes p { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.outcomes .source { font-size: .8125rem; color: var(--ink-3); }
.outcome-col h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--forest), var(--via)) 1; }

/* ---- Principles and statements on lit forest ---- */
.forest .principle h3 { font-size: clamp(1.375rem, 1.7vw, 1.625rem); }
.forest .principle h3::before { width: 40px; height: 4px; background: var(--via); border-radius: 2px; }
.binding { box-shadow: 0 30px 60px -30px rgba(15,46,31,.8); }
.engines li { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.engines li:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(15,46,31,.35); z-index: 2; }
.verb { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.big { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }

/* ---- Footer: the line at scale ---- */
.foot-line { font-size: clamp(1.75rem, 3vw, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  .mesh-live { animation: none; }
  .btn::before { display: none; }
  .btn:hover::after, .engines li:hover { transform: none; }
}
@media print {
  .page-hero { background: #fff !important; color: #111 !important; }
  .page-hero h1, .page-hero p, .page-hero .crumbs a, .page-hero .systems li { color: #111 !important; }
  .feature-panel { background: #fff !important; box-shadow: none; }
  .hero-media::before { display: none; }
  .btn::before, .btn::after { display: none; }
}

/* Impact layer fixes */
.field-error[hidden] { display: none; }
.contact-hero .form-panel { color: var(--ink); }
.contact-hero .form-panel label { color: var(--ink); }
.contact-hero .form-panel .req { color: var(--ink-3); }
.page-hero .hero-grid h1 { font-size: clamp(2.5rem, 4.8vw, 4.25rem); }
.page-brief main { padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero h1.statement { max-width: 1180px; }
.hero-copy .subhead { margin: 28px 0 0; font-family: var(--font-head); font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; color: var(--forest); max-width: 22em; text-wrap: balance; }
.hero-copy .subhead + .lead { margin-top: 16px; }

/* =====================================================================
   Proof in motion — review round 1
   ===================================================================== */
/* 6: flat, confident button face; light and motion carry the impact */
:root { --btn-face: #7BC043; --btn-face-hover: #8DCF55; }
.btn, .btn:hover { box-shadow: 0 10px 24px -12px rgba(94,158,46,.9); }
.btn:hover { box-shadow: 0 16px 32px -12px rgba(94,158,46,1); }
.forest .btn:not(.ghost), .page-hero .btn:not(.ghost) { box-shadow: 0 12px 30px -10px rgba(123,192,67,.65); }

/* 3: open the word gaps at display sizes */
.hero-copy h1, .page-hero h1, .page-hero h1.statement, h2, .big { letter-spacing: -.01em; word-spacing: .06em; }

/* 4: lit fields only where placed; everything else is flat forest */
.forest, .site-footer, .binding, .systems .layer { background: var(--forest); }
.forest.lit { background: var(--mesh); background-color: var(--forest); }
.page-hero .systems .layer { background: var(--via-field); }
.lit.mesh-live { animation: none; }

/* 2: VIAGreen owns whole bands */
.band.via { background: var(--via-field); color: var(--forest); }
.band.via h2, .band.via h3, .band.via p, .band.via li, .band.via strong, .band.via .lead, .band.via .prose p, .band.via .prose .first { color: var(--forest); }
.band.via .btn:not(.ghost) { background: var(--forest); color: #fff; box-shadow: 0 14px 30px -14px rgba(15,46,31,.8); }
.band.via .btn:not(.ghost):hover { background: #17402C; color: #fff; }
.band.via .btn.ghost { box-shadow: inset 0 0 0 2px var(--forest); }
.band.via .path li::before { background: var(--via); border-color: var(--forest); }
.band.via .path li:last-child::before { background: var(--forest); color: #fff; }
.band.via .path li::after { background: rgba(15,46,31,.35); }
.band.via .receipt { box-shadow: 0 40px 70px -30px rgba(15,46,31,.65); border-color: transparent; }
.band.via :focus-visible { outline-color: var(--forest); }
.band.via a:not(.btn) { color: var(--forest); }

/* 2: Home outcomes — the state's column becomes a VIAGreen field so two hold the mass of four */
.outcome-cols.weighted > .outcome-col:first-child { background: var(--via-field); color: var(--forest); padding: clamp(28px, 3.5vw, 48px); border-radius: 6px; align-self: stretch; }
.outcome-cols.weighted > .outcome-col:first-child h3 { border-image: none; border-bottom: 3px solid var(--forest); }
.outcome-cols.weighted > .outcome-col:first-child .outcomes li { border-bottom-color: rgba(15,46,31,.25); }
.outcome-cols.weighted > .outcome-col:first-child .outcomes li:last-child { border-bottom: 0; }
.outcome-cols.weighted > .outcome-col:first-child .outcomes p { font-family: var(--font-head); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.25; color: var(--forest); }

/* 1 + 5: the decision is the hero object; a full-bleed lit field carries it */
.hero-home { position: relative; isolation: isolate; overflow: hidden; }
.hero-media::before { display: none; }
@media (min-width: 960px) {
  .hero-home .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .hero-home::before { content: ""; position: absolute; z-index: -1; top: clamp(72px, 8vw, 120px); right: 0; bottom: clamp(150px, 14vw, 190px); width: 46vw; border-radius: 10px 0 0 10px; background: var(--mesh); background-color: var(--forest); }
  .hero-media .photo.tall { aspect-ratio: 4 / 4.2; margin-left: 12%; }
  .hero-media .receipt.float { left: -8%; bottom: -56px; width: min(520px, 82%); padding: 28px 30px 26px; font-size: 1rem; }
  .hero-media .receipt .row { grid-template-columns: 8.5em 1fr; }
  .hero-media .receipt .label { font-size: .9375rem; }
}
.hero-media .receipt .seal { width: 60px; height: 60px; }
.hero-media .receipt .verdict { font-size: 1.0625rem; padding: 2px 10px; }
@media (max-width: 959px) {
  .hero-media { display: flex; flex-direction: column-reverse; }
  .hero-media .receipt.float { margin: 0 0 -28px; position: relative; z-index: 2; }
}

/* 7: commit to the grade — forest duotone that releases to full colour */
.media-split .photo::after, .route .photo::after { background: #1F5A34; mix-blend-mode: color; opacity: .55; }
.reveal .media-split [data-reveal="photo"].is-in::after { opacity: 0; transition: opacity 1.4s var(--ease) 1s; }
.route .photo img { filter: contrast(1.05); }
@media (hover: none) { .route .photo::after { opacity: 0; } }
.page-news .page-hero, .page-accessibility .page-hero { padding-bottom: clamp(40px, 5vw, 64px); }
/* hero fit: headline, subhead and both actions inside a 1440×900 first screen */
@media (min-width: 960px) {
  .hero-home { padding-top: clamp(32px, 4vw, 64px); }
  .hero-home .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .hero-copy h1 { font-size: clamp(3rem, 5.4vw, 5.25rem); }
  .hero-copy .subhead { margin-top: 22px; font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
  .hero-copy .lead { font-size: 1.1875rem; }
  .hero-copy .actions { margin-top: 26px; }
  .hero-media .photo.tall { margin-left: 8%; }
  .hero-media .receipt.float { left: -10%; bottom: -40px; width: min(500px, 86%); }
}
/* Proof in motion — review round 2 */
.media-split .photo::after, .route .photo::after { background: #1F5A34; mix-blend-mode: soft-light; opacity: .7; }
@media (min-width: 960px) {
  .hero-copy h1 { font-size: clamp(3rem, 6vw, 5.75rem); }
  .hero-copy .subhead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.25; margin-top: 18px; }
  .hero-copy .subhead + .lead { margin-top: 12px; }
  .hero-media .photo.tall { margin-left: 0; }
  .hero-media .receipt.float { left: -14%; }
}
@media (max-width: 959px) { .hero-media .photo figcaption { top: auto; bottom: 0; border-radius: var(--radius) 0 0 0; } }
@media (min-width: 960px) { .hero-home::before { width: 43vw; } }
.page-hero .pub-meta { color: #fff; font-weight: 500; }
.section-head + .outcome-foot { margin-top: 0; }
/* Navigation restructure */
.foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .foot-nav { grid-template-columns: 1fr 1fr; } }
.site-footer .foot-sub { margin-top: 28px; }
@media (min-width: 1081px) and (max-width: 1240px) { .nav { gap: 20px; } .nav ul a { padding: 12px 9px; font-size: .9rem; } .nav ul a::after { left: 9px; right: 9px; } }
/* AI flow on a VIAGreen band (For industry) */
.band.via .flow li { border-color: rgba(15,46,31,.3); }
.band.via .flow p { color: var(--forest); }
.band.via .flow .node, .reveal .band.via .flow.is-in li:not(:first-child) .node { background: var(--forest); color: #fff; box-shadow: none; }
.band.via .flow li:first-child .node, .reveal .band.via .flow .node { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.reveal .band.via .flow.is-in li:not(:first-child) .node { background: var(--forest); color: #fff; box-shadow: none; }

/* =====================================================================
   Inner-page visuals: authored diagrams and documentary mosaics
   ===================================================================== */
.dg { margin: 0; }
.dg svg { width: 100%; height: auto; overflow: visible; }
.dg text { font-family: var(--font-body); }
.dg .t-lg { font-family: var(--font-head); font-size: 26px; fill: #fff; }
.dg .t-md { font-size: 17px; fill: var(--on-forest-2); }
.dg .t-sm { font-size: 15px; font-weight: 500; fill: #fff; }
.dg .t-xs { font-size: 13px; font-weight: 600; fill: var(--via); }
.dg .ink { fill: var(--forest); }
.dg .dark { fill: var(--ink-2); }
.dg .ln { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.6; }
.dg .ln.spine { stroke: var(--via); stroke-width: 2.5; }
.dg .pill { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.45); stroke-width: 1.4; }
.dg .pill.wide { fill: rgba(123,192,67,.12); stroke: var(--via); }
.dg .node { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.dg .doc { fill: #fff; filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
.dg .docline { stroke: #C3CCC2; stroke-width: 4; stroke-linecap: round; }
.dg .ln.dash { stroke: var(--via); stroke-width: 2; stroke-dasharray: 4 6; }
.dg .tok { fill: #fff; opacity: 0; offset-path: path("M67 105 L 196 105 L 296 105 L 296 241 L 296 387 L 296 466"); offset-rotate: 0deg; filter: drop-shadow(0 0 8px rgba(123,192,67,.9)); }
.diagram-hero { align-items: center; }
.diagram-hero .dg { max-width: 560px; justify-self: end; width: 100%; }
@media (max-width: 959px) { .diagram-hero .dg { justify-self: stretch; margin-top: 8px; } }

/* Engines carry their glyph */
.engines .glyph { width: 52px; height: 52px; margin-bottom: 22px; }

/* Governments: the stack */
.dg-stack { max-width: 540px; justify-self: end; width: 100%; }
.dg-stack .pl-top { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.55); stroke-width: 1.3; }
.dg-stack .pl-side.l { fill: rgba(255,255,255,.12); }
.dg-stack .pl-side.r { fill: rgba(255,255,255,.04); }
.dg-stack .pl-via { fill: #8DCF55; }
.dg-stack .pl-via-side.l { fill: #6CB236; }
.dg-stack .pl-via-side.r { fill: #5E9E2E; }
.dg-stack .lead { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 4; }
.dg-stack .top { filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
@media (max-width: 959px) { .dg-stack { justify-self: stretch; } }

/* Governments: census and library on white */
.dg-census, .dg-library { margin-top: 36px; }
.dg-census .c-off { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.dg-census .c-on { fill: var(--via); }
.dg-census .c-on.old { fill: var(--ink-3); }
.dg-library .ln { stroke: var(--line-2); stroke-width: 1.4; }
.dg-library .jx { fill: #fff; stroke: var(--forest); stroke-width: 1.6; }
.dg-library .jx-dot { fill: var(--forest); }
.dg-library .lib { fill: var(--via); }
.dg-library .share { fill: rgba(123,192,67,.14); stroke: var(--via); stroke-width: 1.6; stroke-dasharray: 5 5; }

/* Industry: flow steps carry icons */
.flow li { grid-template-columns: 48px 112px 1fr; align-items: center; }
.flow .ficon { width: 40px; height: 40px; color: var(--forest); }
@media (max-width: 520px) { .flow li { grid-template-columns: 40px 1fr; } .flow li p { grid-column: 1 / -1; } .flow .ficon { width: 34px; height: 34px; } }

/* Mission: documentary mosaic */
.mosaic { display: grid; gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .mosaic { grid-template-columns: 2fr 1fr 1fr; } }
.mosaic .photo { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .mosaic .photo { aspect-ratio: auto; height: 360px; } }

/* Contact: the left column carries a photograph */
.contact-photo { margin-top: 40px; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
@media (max-width: 959px) { .contact-photo { display: none; } }

/* News: the position paper has a cover */
.news .lead-item { grid-template-columns: 180px 1fr; align-items: center; column-gap: 40px; }
.news .lead-item .paper-art { grid-row: span 2; width: 180px; height: auto; border-radius: 4px; box-shadow: 0 24px 40px -20px rgba(15,46,31,.6); }
@media (max-width: 799px) { .news .lead-item { grid-template-columns: 1fr; } .news .lead-item .paper-art { width: 140px; grid-row: auto; } }

/* ---- Diagram motion: lines draw, parts arrive in order ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal [data-reveal="draw"] .ln:not(.dash) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .2s; }
  .reveal [data-reveal="draw"].is-in .ln:not(.dash) { stroke-dashoffset: 0; }
  .reveal [data-reveal="draw"] .ln.dash { opacity: 0; transition: opacity .6s var(--ease) 1.4s; }
  .reveal [data-reveal="draw"].is-in .ln.dash { opacity: 1; }
  .reveal [data-reveal="draw"] .nd { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 140ms + 100ms); }
  .reveal [data-reveal="draw"].is-in .nd { opacity: 1; transform: none; }
  .reveal .dg-stack .nd { transform: translateY(-24px); }
  .reveal .dg-stack.is-in .nd { transform: none; }
  .reveal .dg-census .c-on.wave { opacity: 0; transition: opacity .3s var(--ease); transition-delay: calc(var(--k) * 12ms + 300ms); }
  .reveal .dg-census.is-in .c-on.wave { opacity: 1; }
  .reveal .dg-census .c-on.old { opacity: 0; transition: opacity .4s var(--ease) 1.6s; }
  .reveal .dg-census.is-in .c-on.old { opacity: 1; }
  .reveal .dg-pipeline.is-in .tok { animation: travel 3.6s var(--ease) 1.6s 2 both; }
  @keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
}
@media print { .dg .tok { display: none; } [data-reveal] .nd, [data-reveal] .ln, [data-reveal] circle { opacity: 1 !important; stroke-dashoffset: 0 !important; } }
@media (min-width: 800px) {
  .news .lead-item { grid-template-columns: 180px 1fr; row-gap: 12px; align-content: center; }
  .news .lead-item .paper-art { grid-row: 1 / span 2; grid-column: 1; }
  .news .lead-item .kind, .news .lead-item p { grid-column: 2; }
  .news .lead-item .kind { align-self: end; }
  .news .lead-item p { align-self: start; }
}
@media (min-width: 800px) { .news li { grid-template-columns: 180px 1fr; column-gap: 40px; } }
/* Hero: the Earth at night from orbit, every national border faintly lit (rendered still: globe_assets.py + globe.js).
   Full-bleed black; the copy stands on the open space to the left of the planet. */
.hero-world { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(520px, calc(100vh - 108px), 900px); background: #000; color: #fff; }
.hero-world > .wrap { width: 100%; flex: 1; display: flex; align-items: center; padding-top: clamp(24px, 3vw, 52px); padding-bottom: clamp(24px, 3vw, 52px); }
.world-stage { position: absolute; inset: 0; z-index: -1; margin: 0; pointer-events: none; }
.world-stage picture, .world-stage img { display: block; width: 100%; height: 100%; }
.world-stage img { object-fit: cover; object-position: 100% 18%; }
.world-stage::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 62%); }
.hero-world .hero-copy { max-width: 720px; }
.hero-world h1 { color: #fff; }
.hero-world h1 em { color: var(--via); }
.hero-world .subhead { color: #fff; }
.hero-world .lead { color: rgba(255,255,255,.78); max-width: 34em; }
.hero-world .trust { color: rgba(255,255,255,.78); }
.hero-world .trust::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23D0D6DA' stroke-width='1.6'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3' fill='none' stroke='%23D0D6DA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hero-world :focus-visible { outline-color: var(--via); }
.hero-world .ink-line { background: none; padding-bottom: 0; }
@media (min-width: 960px) {
  .hero-world .hero-copy h1 { font-size: clamp(2.75rem, 4.3vw, 4.25rem); }
  .hero-world .subhead { margin-top: 16px; }
  .hero-world .lead { font-size: 1.0625rem; }
  .hero-world .actions { margin-top: 22px; }
  .hero-world .trust { margin-top: 18px; }
}
@media (max-width: 1199px) {
  .hero-world { display: block; min-height: 0; }
  .hero-world > .wrap { display: block; padding-top: 0; padding-bottom: clamp(40px, 6vw, 64px); }
  .world-stage { position: relative; inset: auto; z-index: auto; }
  .world-stage img { height: auto; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .world-stage::after { display: none; }
  .hero-world .hero-copy { margin-top: -8%; position: relative; }
}
.motion .world-stage img { animation: world-in 1.6s var(--ease) both; }
@keyframes world-in { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }
/* Partner strip: full width along the foot of the hero, scrolling. Static row without motion or JS. */
.partner-strip { position: relative; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.partner-strip .label { flex: none; margin: 0; padding: 18px 28px 18px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); color: rgba(255,255,255,.6); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.partner-strip ul { list-style: none; margin: 0; padding: 0; }
.partner-strip li { font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; color: rgba(255,255,255,.9); white-space: nowrap; }
.partner-strip .static { display: flex; flex-wrap: wrap; gap: 6px 36px; padding: 18px var(--gutter) 18px 0; }
.partner-strip .marquee { display: none; }
.motion .partner-strip .static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion .partner-strip .marquee { display: flex; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.partner-strip .marquee ul { display: flex; flex: none; padding: 18px 0; animation: marquee var(--dur, 30s) linear infinite; }
.partner-strip .marquee li { position: relative; padding: 0 26px; }
.partner-strip .marquee li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(255,255,255,.3); }
.partner-strip .marquee:hover ul { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 640px) { .partner-strip .label { padding-right: 16px; } }
/* No highlighter lines through or under text, anywhere (Steve, 6 Oct 2026). The spans stay for emphasis colour only. */
.hl, .hl-ink, .ink-line, .reveal .hl[data-reveal="mark"], .reveal .hl-ink[data-reveal="mark"], .reveal .hl[data-reveal="mark"].is-in, .reveal .hl-ink[data-reveal="mark"].is-in { background: none !important; padding-bottom: 0; }
.motion .ink-line { animation: none !important; }
/* Hero polish (impeccable, 6 Oct 2026) */
.hero-world .subhead { word-spacing: .06em; letter-spacing: 0; }
.hero-world ::selection { background: rgba(123,192,67,.4); color: #fff; }
.partner-strip { align-items: baseline; }
.partner-strip .label, .partner-strip li { line-height: 1.4; }
/* Who it's for: people first, as the lead route (impact leads) */
.route-people { display: grid; gap: 0 clamp(24px, 4vw, 56px); margin-bottom: clamp(32px, 4vw, 48px); padding-bottom: 28px; height: auto; }
.route-people .photo.card { border-radius: var(--radius); aspect-ratio: 16 / 10; }
.route-people h3 { margin-top: 22px; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.1; }
.route-people p { margin: 0 0 22px; max-width: 34em; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.route-people .go { padding-bottom: 0; }
@media (min-width: 900px) {
  .route-people { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .route-people h3 { margin-top: 0; }
}
/* Feature panel on the soft mist-to-green tint (Steve, 6 Oct 2026): saturated VIAGreen behind body text was hard to read */
.feature-panel { background: linear-gradient(180deg, var(--mist) 0%, #E4F0D9 100%); color: var(--ink); }
.feature-panel h2 { color: var(--ink); }
.feature-panel .lead { color: var(--ink); font-weight: 500; }
.feature-panel p { color: var(--ink-2); }
/* SDG goals the outcomes map to (official UN icons; disclaimer and guidelines link required) */
.sdg { margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid rgba(15,46,31,.15); }
.sdg-label { margin: 0 0 18px; font-size: 1rem; font-weight: 500; color: var(--ink); }
.sdg-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 400px; }
@media (min-width: 760px) { .sdg-icons { grid-template-columns: repeat(9, minmax(0, 1fr)); max-width: 960px; } }
.sdg-icons img { display: block; width: 100%; height: auto; }
.sdg-note { margin: 16px 0 0; max-width: 60em; font-size: .75rem; line-height: 1.5; color: var(--ink-3); }
.sdg-note a { color: var(--ink-3); }
.sdg-note a:hover { color: var(--green); }
/* Who it's for: the partner note closes the section under the route cards */
.partner-note { margin: clamp(36px, 4.5vw, 56px) 0 0; max-width: none; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
/* How it works: the three steps as photo rows, alternating sides */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 96px); }
.step { display: grid; gap: 28px; align-items: center; }
.step .photo.step-photo { aspect-ratio: 4 / 3; }
.step-text .glyph { width: 56px; height: 56px; display: block; margin-bottom: 18px; }
.step-text h3.verb { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; margin: 0 0 16px; color: var(--forest); }
.step-text p { margin: 0; max-width: 34em; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .step:nth-child(even) .photo { order: 2; }
}
/* A full-bleed photo strip as a pause between sections */
.photo-break .photo.bleed-strip { border-radius: 0; aspect-ratio: 21 / 7; }
@media (max-width: 700px) { .photo-break .photo.bleed-strip { aspect-ratio: 16 / 9; } }
/* Accountability: an icon above each column */
#accountability .columns .ficon { width: 44px; height: 44px; display: block; margin-bottom: 16px; color: var(--forest); }
.step-text h3.verb { margin-bottom: 6px; }
.step-text .role { margin: 0 0 16px; font-family: var(--font-head); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; color: var(--ink); }
.step-text p + p { margin-top: 14px; }
/* Pipeline diagram v2: author box, two signatures on the Proof */
.dg .node.author { fill: rgba(255,255,255,.04); stroke-dasharray: 5 4; }
.dg .t-doc { font-size: 12px; fill: #5E6A63; }
.dg .t-doc.b { font-size: 14px; font-weight: 600; fill: #0F2E1F; }
.dg .tok { offset-path: path("M61 111 L 200 111 L 300 111 L 300 241 L 300 397 L 300 482"); }
/* Pipeline diagram v3: even three-row grid */
.dg .t-box { font-size: 14px; font-weight: 600; fill: #fff; }
.dg .t-sub { font-size: 12.5px; fill: var(--on-forest-2); }
.dg .pill.box { rx: 8; }
.dg .t-doc { font-size: 12px; fill: #2B3A31; }
.dg .t-doc.s { font-size: 11px; fill: #5E6A63; }
.dg .t-doc.b { font-size: 14px; font-weight: 600; fill: #0F2E1F; }
.dg .docrule { stroke: #D9E0D8; stroke-width: 1; }
.dg .tok { offset-path: path("M70 80 L 220 80 L 320 80 L 320 250 L 320 430 L 150 430"); }
.dg .t-doc { font-size: 12.5px; }
.dg .t-doc.s { font-size: 11px; letter-spacing: .02em; }
@media (min-width: 960px) { .page-hero .diagram-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.dg .tok { offset-path: path("M320 32 L 320 220 L 320 390 L 320 570 L 150 570"); }
.dg .tok { offset-path: path("M320 27 L 320 200 L 320 360 L 320 520 L 170 520"); }
.dg .node.author { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.42); stroke-dasharray: 4 4; }
/* Pipeline diagram, final: "The Countersigned Record". Products are the only tiles; inputs are type and drawn icons;
   rulebooks and the Proof are paper; hairlines carry direction. */
.dgx .lbl { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; fill: #fff; letter-spacing: .005em; }
.dgx .sub { font-family: var(--font-body); font-size: 11.5px; fill: rgba(255,255,255,.62); }
.dgx .ico { fill: none; stroke: rgba(255,255,255,.78); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dgx .ico .ifill { fill: rgba(255,255,255,.78); stroke: none; }
.dgx .tile { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.34); stroke-width: 1; }
.dgx .tile-veto { filter: drop-shadow(0 14px 24px rgba(108,178,54,.35)); }
.dgx .tname { font-family: var(--font-head); font-size: 22px; fill: #fff; letter-spacing: -.01em; }
.dgx .tverb { font-family: var(--font-body); font-size: 11.5px; fill: rgba(255,255,255,.66); letter-spacing: .02em; }
.dgx .tname.ink { fill: #0F2E1F; } .dgx .tverb.ink { fill: rgba(15,46,31,.72); }
.dgx .ln { stroke: rgba(255,255,255,.38); stroke-width: 1.2; }
.dgx .ln.spine { stroke: var(--via); stroke-width: 1.8; }
.dgx .ln.sig { stroke: var(--via); stroke-width: 1.3; stroke-dasharray: 2 4; }
.dgx .rulebook { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.4); stroke-width: 1; stroke-linejoin: round; }
.dgx .rulebook-fold { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1; stroke-linejoin: round; }
.dgx .paper { fill: #FBFCFA; }
.dgx .p-title { font-family: var(--font-head); font-size: 15px; fill: #0F2E1F; }
.dgx .p-id { font-family: var(--font-body); font-size: 9.5px; fill: #7C877F; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.dgx .p-rule { stroke: #D9E0D8; stroke-width: 1; } .dgx .p-rule.dashed { stroke-dasharray: 3 3; }
.dgx .p-label { font-family: var(--font-body); font-size: 9.5px; fill: #7C877F; letter-spacing: .02em; }
.dgx .p-row { font-family: var(--font-body); font-size: 11.5px; fill: #2B3A31; }
.dgx .p-sig { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: #0F2E1F; }
.dgx .ck { fill: none; stroke: #2D6A1E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dgx .seal-ring { fill: none; stroke: var(--via); stroke-width: 1; stroke-dasharray: 1.5 2; }
.dgx .seal-ck { fill: none; stroke: #0F2E1F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dgx .tok { offset-path: path("M320 26 L 320 174 L 320 322 L 320 470 L 172 470"); r: 5; }
#accountability .columns p + p { margin-top: 14px; }
/* Accountability: one proof point under the three columns */
.proof-point { margin: clamp(32px, 4vw, 48px) 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-2); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: none; }
.proof-point strong { font-family: var(--font-head); font-weight: 400; font-size: 1.375rem; color: var(--forest); margin-right: 6px; }
.proof-point .src { margin-left: 6px; font-size: .8125rem; color: var(--ink-3); white-space: nowrap; }

/* For governments (6 Oct 2026): statement on the soft tint, regulator section, library split */
.statement-band .big { color: var(--ink); }
.statement-band .big span:last-child { color: var(--green); }
.statement-band .big-follow { color: var(--ink-2); }
.reg-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
.reg-items { display: grid; gap: 36px 40px; }
.reg-items > div { padding-top: 22px; border-top: 1px solid var(--line-2); }
.reg-items .ficon { width: 44px; height: 44px; display: block; margin-bottom: 14px; color: var(--forest); }
.reg-items h3 { font-size: 1.25rem; margin: 0 0 10px; }
.reg-items p { margin: 0; color: var(--ink-2); }
.reg-fig { padding-top: 22px; }
.reg-note { margin: 18px 0 0; color: var(--ink-2); font-size: 1rem; }
@media (min-width: 700px) { .reg-items { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .reg-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.lib-split { align-items: center; }
.lib-split .media-text p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
/* For governments: one to one vs shared rules */
.dg-corridors .mesh line { stroke: rgba(15,46,31,.28); stroke-width: 1; }
.dg-corridors .spoke line { stroke: var(--via); stroke-width: 1.8; }
.dg-corridors .jx { fill: #fff; stroke: var(--forest); stroke-width: 1.6; }
.dg-corridors .jx-dot { fill: var(--forest); }
.dg-corridors .lib { fill: var(--via); }
.dg-corridors .t-num { font-family: var(--font-head); font-size: 30px; fill: var(--ink); }
.dg-corridors .t-num.via { fill: var(--green); }
.lib-split .media-text p + p { margin-top: 16px; }
.dg-corridors .hub { fill: #fff; stroke: var(--via); stroke-width: 2.5; }

/* Stack, polished (Impeccable pass, 6 Oct 2026): glass layers with light on the front edges, one beam of rules */
.dg-stack .glass .g-top { fill: rgba(255,255,255, calc(.03 + var(--k) * .06)); }
.dg-stack .glass .g-side.l { fill: rgba(255,255,255, calc(.05 + var(--k) * .06)); }
.dg-stack .glass .g-side.r { fill: rgba(255,255,255, calc(.02 + var(--k) * .03)); }
.dg-stack .glass .g-back { fill: none; stroke: rgba(255,255,255, calc(.06 + var(--k) * .08)); stroke-width: 1; }
.dg-stack .glass .g-front { fill: none; stroke: rgba(255,255,255, calc(.3 + var(--k) * .4)); stroke-width: 1.2; stroke-linejoin: round; }
.dg-stack .beam-glow { stroke: rgba(123,192,67,.35); stroke-width: 8; filter: blur(5px); }
.dg-stack .beam { stroke: #A6DE76; stroke-width: 1.6; }
.dg-stack .b-halo { fill: rgba(123,192,67,.16); stroke: rgba(166,222,118,.55); stroke-width: 1; }
.dg-stack .b-node { fill: #C9F0A0; filter: drop-shadow(0 0 5px rgba(123,192,67,.95)); }
.dg-stack .lead { stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: none; }
.dg-stack .lead-end { fill: rgba(255,255,255,.6); }
.dg-stack .via-rim { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.dg-stack .top { filter: drop-shadow(0 22px 30px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(123,192,67,.25)); }



/* How it works: room between the product rows and the binding strip */
.steps + .binding { margin-top: clamp(64px, 8vw, 104px); }
























/* For governments hero: sovereign airspace */
.dg-airspace { max-width: 700px; justify-self: end; width: 100%; margin-right: -24px; }
.dg-airspace svg { overflow: visible; }
.dg-airspace .neigh { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.22); stroke-width: 1; }
.dg-airspace .land { fill: #1C4831; }
.dg-airspace .land-glow { fill: none; stroke: #7BC043; stroke-width: 16; opacity: .3; }
.dg-airspace .coast { fill: none; stroke: #A6DE76; stroke-width: 1.3; }
.dg-airspace .g-back { fill: none; stroke: rgba(166,222,118,.08); stroke-width: 1; }
.dg-airspace .g-front { fill: none; stroke: rgba(166,222,118,.18); stroke-width: 1; }
.dg-airspace .rim { fill: none; stroke: rgba(201,240,160,.8); stroke-width: 1.3; }
.dg-airspace .rim-base { fill: none; stroke: rgba(166,222,118,.32); stroke-width: 1; }
.dg-airspace .f-out { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.2; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.dg-airspace .f-in, .dg-airspace .f-local { fill: none; stroke: #A6DE76; stroke-width: 1.7; stroke-linecap: round; }
.dg-airspace .g-halo { fill: rgba(123,192,67,.16); stroke: rgba(166,222,118,.6); stroke-width: 1; }
.dg-airspace .g-core { fill: #E2F7CE; filter: drop-shadow(0 0 5px rgba(123,192,67,.95)); }
.dg-airspace .origin { fill: rgba(255,255,255,.7); }
.dg-airspace .origin-in { fill: #C9F0A0; }
.dg-airspace .leader { fill: none; stroke: rgba(201,240,160,.42); stroke-width: 1; stroke-dasharray: 2 3; }
.dg-airspace text { paint-order: stroke; stroke: #143826; stroke-width: 5px; stroke-linejoin: round; }
.dg-airspace .t-title { font-family: var(--font-head); font-size: 19px; fill: #fff; }
.dg-airspace .t-sub { font-family: var(--font-body); font-size: 13px; fill: rgba(255,255,255,.66); }
.dg-airspace .t-lbl { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: #fff; }
.dg-airspace .t-when { font-family: var(--font-body); font-size: 12.5px; fill: #B9E39A; }
.dg-airspace .card .c-bg { fill: rgba(13,38,25,.82); stroke: rgba(166,222,118,.38); stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.dg-airspace .card .c-tile { fill: rgba(123,192,67,.16); stroke: rgba(166,222,118,.45); stroke-width: 1; }
.dg-airspace .card .c-ico { fill: none; stroke: #C9F0A0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-airspace .card text { stroke: none; }
.dg-airspace .card .c-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: #fff; }
.dg-airspace .card .c-sub { font-family: var(--font-body); font-size: 12.5px; fill: #B9E39A; }
.dg-airspace .k-x { --c: #A6DE76; }
.dg-airspace .k-ai { --c: #8CC8FF; }
.dg-airspace .k-hop { --c: #F4C46B; }
.dg-airspace .k-loc { --c: #F49C7C; }
.dg-airspace [class^="k-"] .f-in, .dg-airspace [class^="k-"] .f-local { stroke: var(--c); }
.dg-airspace [class^="k-"] .g-halo { fill: color-mix(in srgb, var(--c) 16%, transparent); stroke: color-mix(in srgb, var(--c) 65%, transparent); }
.dg-airspace [class^="k-"] .g-core { fill: color-mix(in srgb, var(--c) 45%, #fff); filter: drop-shadow(0 0 5px var(--c)); }
.dg-airspace [class^="k-"] .origin-in { fill: var(--c); }
.dg-airspace [class^="k-"] .f-out { stroke: color-mix(in srgb, var(--c) 70%, transparent); }
.dg-airspace .leader { stroke: color-mix(in srgb, #F49C7C 70%, transparent); }
.dg-airspace .card[class*="k-"] .c-bg { stroke: color-mix(in srgb, var(--c) 45%, transparent); }
.dg-airspace .card[class*="k-"] .c-tile { fill: color-mix(in srgb, var(--c) 16%, transparent); stroke: color-mix(in srgb, var(--c) 55%, transparent); }
.dg-airspace .card[class*="k-"] .c-ico { stroke: var(--c); }
.dg-airspace .card[class*="k-"] .c-sub { fill: var(--c); }
@media (max-width: 959px) { .dg-airspace { justify-self: stretch; max-width: 560px; margin-inline: auto; } }

/* For governments: who holds what */
.statement-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1080px) { .statement-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.statement-band .big { font-size: clamp(2.25rem, 4.2vw, 3.75rem); max-width: none; }
.statement-band .big-follow { margin-top: 28px; max-width: 34em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ledger { margin: 0; background: #fff; border-radius: 12px; padding: 28px 28px 22px; box-shadow: 0 30px 60px -32px rgba(15,46,31,.45), 0 1px 0 rgba(15,46,31,.06); }
.ledger table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ledger thead th { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; color: var(--ink-2); text-align: center; padding: 0 6px 16px; vertical-align: bottom; line-height: 1.3; }
.ledger thead th.sv { background: var(--mist); border-radius: 8px 8px 0 0; padding-top: 12px; }
.ledger thead th.sv img { display: block; margin: 0 auto; height: 17px; width: auto; }
.ledger tbody th { text-align: left; font-weight: 500; color: var(--ink); padding: 15px 8px 15px 0; white-space: nowrap; }
.ledger tbody tr + tr th, .ledger tbody tr + tr td { border-top: 1px solid var(--line); }
.ledger td { text-align: center; padding: 12px 6px; width: 26%; }
.ledger td:last-child { background: var(--mist); }
.ledger tbody tr:last-child td:last-child { border-radius: 0 0 8px 8px; }
.ledger td.has svg { display: block; width: 24px; height: 24px; margin: 0 auto; }
.ledger td, .ledger thead th { width: 23%; }
.ledger td.no span[aria-hidden] { display: block; line-height: 24px; }
.ledger td { position: relative; }
.ledger td.has circle { fill: var(--forest); }
.ledger td.has path { fill: none; stroke: var(--via); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ledger td.no span[aria-hidden] { color: var(--line-2); font-size: 1.25rem; }
.ledger figcaption { margin-top: 18px; font-size: .9375rem; color: var(--ink-2); }
.own-grid { display: grid; gap: 28px 40px; margin-top: clamp(56px, 7vw, 88px); }
@media (min-width: 900px) { .own-grid { grid-template-columns: repeat(3, 1fr); } }
.own-grid > div { padding-top: 20px; border-top: 2px solid var(--forest); }
.own-grid h3 { font-size: 1.375rem; margin: 0 0 10px; }
.own-grid p { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .ledger { padding: 20px 16px 16px; } .ledger tbody th { white-space: normal; font-size: .9375rem; } .ledger thead th { font-size: .75rem; } }
@media (max-width: 520px) { .ledger td, .ledger thead th { width: 19%; } .ledger tbody th { white-space: nowrap; font-size: .875rem; } .ledger thead th.sv img { height: 13px; } }
@media (max-width: 520px) { .ledger table { table-layout: fixed; } .ledger thead td { width: 37%; } .ledger td, .ledger thead th { width: 21%; } .ledger thead th.sv img { height: 14px; max-width: 90%; } .ledger tbody th { font-size: .8125rem; } }
@media (max-width: 520px) { .ledger thead td { width: 33%; } .ledger td, .ledger thead th { width: 22.3%; } .ledger thead th { font-size: .6875rem; padding: 0 2px 14px; letter-spacing: -.005em; } }
/* Sovereign AI hero image: landscape art in the tall frame, kept on its subject */
.photo.ai-hero img { object-position: 30% 50%; }
.hero-grid .photo.tall.ai-hero { aspect-ratio: 16 / 11; }
.photo.ai-hero img { object-position: 42% 50%; }

/* Sovereign AI: governance band, polished */
#govern { margin-bottom: 24px; }
.ai-grid .prose .first { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink); }
.ai-grid .prose p { color: var(--ink-2); }
.ai-grid .prose .actions { margin-top: 32px; }
.ai-seq { margin: 0; background: var(--forest); border-radius: 12px; padding: clamp(28px, 3vw, 40px); box-shadow: 0 40px 70px -36px rgba(15,46,31,.7); }
.ai-seq ol { list-style: none; margin: 0; padding: 0; position: relative; }
.ai-seq ol::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 34px; width: 1.5px; background: linear-gradient(var(--forest-line), var(--via)); }
.ai-seq li { position: relative; padding: 0 0 30px 44px; }
.ai-seq li:last-child { padding-bottom: 0; }
.ai-seq li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--forest); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.ai-seq li.sq-end::before { background: var(--via); box-shadow: 0 0 0 5px rgba(123,192,67,.22); }
.ai-seq .sq-node { display: inline-block; font-family: var(--font-head); font-size: 1.375rem; line-height: 1.1; color: #fff; margin-bottom: 8px; }
.ai-seq li.sq-end .sq-node { color: var(--via); }
.ai-seq p { margin: 0; color: var(--on-forest-2); font-size: 1rem; line-height: 1.6; }

/* Sovereign AI: governance diagram on a forest panel */
.ai-panel { background: var(--mesh); background-color: var(--forest); border-radius: 12px; padding: clamp(12px, 1.4vw, 18px); box-shadow: 0 24px 48px -28px rgba(15,46,31,.55); }
.ai-panel .dg { margin: 0; max-width: none; }
.dgx .blocked { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 4 4; }
.dgx .b-rule { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.dgx .b-tag { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .04em; fill: #F4B6A0; }
@media (min-width: 960px) { .ai-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .ai-grid .ai-panel { position: static; margin-top: 8px; } }
.ai-panel .dg svg { overflow: hidden; }
/* Sovereign AI: probabilistic vs deterministic pull statement */
.ai-grid .pull { margin: 28px 0; padding: 22px 0 4px; border-top: 2px solid var(--forest); }
.ai-grid .pull .pull-lead { margin: 0 0 10px; font-family: var(--font-head); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; color: var(--forest); word-spacing: .06em; }
.ai-grid .pull p:last-child { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; margin: 0; }
/* Sovereign AI: second row under the diagram */
@media (min-width: 960px) { .ai-grid { align-items: center; } }
.ai-more { display: grid; gap: 28px 56px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 2px solid var(--forest); }
@media (min-width: 960px) { .ai-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.ai-more .pull { margin: 0; padding: 0; border: 0; }
.ai-more .pull .pull-lead { margin: 0 0 12px; font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: var(--forest); word-spacing: .06em; }
.ai-more .pull p:last-child, .ai-more-text p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.ai-more-text .actions { margin-top: 28px; }

/* Mission: the Sovereign Bill of Rights */
.bill-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.bill-head h2 { color: #fff; }
.bill-head .lead { color: var(--on-forest-2); }
.bill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .bill-list { grid-template-columns: 1fr 1fr; } }
.bill-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--forest-line); }
.bill-list .rn { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.2; color: var(--via); }
.bill-list h3 { color: #fff; font-size: 1.3125rem; margin: 0 0 8px; }
.bill-list p { margin: 0; color: var(--on-forest-2); line-height: 1.65; }
.bill .actions { margin-top: clamp(36px, 4vw, 56px); }

/* How it works hero: build top to bottom, each line between the box it leaves and the box it reaches. About one second in all. */
@media (prefers-reduced-motion: no-preference) {
  .reveal .dgx[data-reveal="draw"] .ln { stroke-dashoffset: 0 !important; opacity: 0; transition: opacity .3s var(--ease); transition-delay: calc(var(--d, 0) * 60ms); }
  .reveal .dgx[data-reveal="draw"] .ln:not(.dash) { stroke-dasharray: none !important; }
  .reveal .dgx[data-reveal="draw"].is-in .ln { opacity: 1; }
  .reveal .dgx[data-reveal="draw"] .nd { transform: translateY(6px); transition: opacity .35s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--d, 0) * 60ms); }
}


/* How it works: one proof, twelve readers (impact deck, slide 8) */
.readers-band .readers-title { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: none; margin-bottom: clamp(40px, 5vw, 64px); color: #fff; }
.readers-band .readers-title span:last-child { color: var(--via); }
.readers2 { display: grid; gap: 40px clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .readers2 { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); } }
.rd2 { margin: 0; }
.rd2 figcaption { color: var(--on-forest-2); font-size: 1rem; line-height: 1.5; margin-bottom: 8px; }
.rd2-k { display: block; font-family: var(--font-head); font-size: 1.375rem; color: #fff; margin-bottom: 4px; }
.rd2-proof .rd2-k { color: var(--via); }
.rd2 svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd2-today svg { max-width: 360px; }
.rd2 .t-ring { display: none; }
.rd2 .t-node { fill: rgba(255,255,255,.75); }
.rd2 .t-loop { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.3); stroke-width: 1.1; }
.rd2 .t-loop-tip { stroke: rgba(255,255,255,.32); stroke-width: 1.2; stroke-linecap: round; }
.rd2 .t-num { font-family: var(--font-head); font-size: 46px; fill: rgba(255,255,255,.85); }
.rd2 .t-cap { font-family: var(--font-body); font-size: 14px; fill: rgba(255,255,255,.55); }
.rd2 .p-ring { fill: none; stroke: rgba(123,192,67,.2); }
.rd2 .p-spoke { stroke: var(--via); stroke-width: 1.4; opacity: .85; }
.rd2 .p-node { fill: #DDF5C6; filter: drop-shadow(0 0 5px rgba(123,192,67,.9)); }
.rd2 .p-core { filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.rd2 .p-core-ring { fill: none; stroke: rgba(166,222,118,.5); stroke-width: 1; stroke-dasharray: 2 4; }
.rd2 .p-big { font-family: var(--font-head); font-size: 23px; fill: #0F2E1F; }
.rd2 .p-sm { font-family: var(--font-body); font-size: 12px; fill: rgba(15,46,31,.8); }
.rd2 .p-lbl { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: #fff; }
.rd2-roles { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 20px 40px; }
@media (min-width: 700px) { .rd2-roles { grid-template-columns: repeat(3, 1fr); } }
.rd2-roles li { padding-top: 18px; border-top: 1px solid var(--forest-line); color: var(--on-forest-2); }
.rd2-roles strong { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.375rem; color: #fff; margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .readers2 .p-spoke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease); transition-delay: calc(var(--i) * 50ms + 300ms); }
  .reveal .readers2.is-in .p-spoke { stroke-dashoffset: 0; }
  .reveal .readers2 .p-node { opacity: 0; transition: opacity .3s var(--ease); transition-delay: calc(var(--i) * 50ms + 500ms); }
  .reveal .readers2.is-in .p-node { opacity: 1; }
}
.readers2 { align-items: start; }
.rd2-today svg { margin: clamp(24px, 4vw, 56px) auto 0; }
@media (max-width: 640px) { .rd2 .p-lbl { font-size: 22px; } .rd2-proof svg { width: 116%; margin-left: -8%; } .rd2 .p-sm { font-size: 14px; } .rd2 .p-big { font-size: 26px; } }
@media (max-width: 640px) { .rd2 .p-lbl { font-size: 18px; } .rd2-proof svg { width: 100%; margin-left: 0; } }
/* Twelve readers: centred composition */
.readers-band .readers-title { text-align: center; margin-left: auto; margin-right: auto; }
.readers-band .readers-title span { display: block; }
.readers2 { align-items: center; }
.rd2 figcaption { text-align: center; }
.rd2-today svg { margin: 12px auto 0; }
.rd2-proof svg { margin: 0 auto; max-width: 640px; }
.rd2-roles { text-align: center; }
.readers2 { align-items: start; }
@media (min-width: 1000px) { .rd2-today svg { margin-top: clamp(40px, 4vw, 64px); } }
/* Twelve readers: two equal columns, two rings of the same size on one centre line */
@media (min-width: 1000px) {
  .readers2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .rd2-today svg { max-width: 470px; margin: 0 auto; }
  .rd2-proof svg { max-width: none; width: 100%; margin: 0 auto; }
}
@media (min-width: 1000px) { .rd2-today svg { max-width: none; width: 72.8%; } }
/* Twelve readers: the fourth role, the cost saved, set apart */
@media (min-width: 700px) { .rd2-roles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rd2-roles { grid-template-columns: 1fr 1fr 1fr 1.35fr; align-items: stretch; } }
.rd2-roles li.rd2-save { border: 1px solid rgba(123,192,67,.55); border-radius: 12px; padding: 18px 20px 20px; color: #DDF5C6; background: radial-gradient(120% 140% at 50% 0%, rgba(123,192,67,.28), rgba(123,192,67,.06) 70%); box-shadow: 0 0 0 1px rgba(123,192,67,.12), 0 0 40px -6px rgba(123,192,67,.55); }
.rd2-roles li.rd2-save strong { color: var(--via); }
@media (prefers-reduced-motion: no-preference) {
  .rd2-roles li.rd2-save { animation: save-glow 3.2s ease-in-out infinite; }
  @keyframes save-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(123,192,67,.12), 0 0 34px -8px rgba(123,192,67,.45); } 50% { box-shadow: 0 0 0 1px rgba(123,192,67,.25), 0 0 54px -4px rgba(123,192,67,.75); } }
}



/* Governments: growth of arrangements, one to one vs through SettleVIA */
.growth-row { display: grid; gap: 32px clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.growth-row::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: clamp(16px, 3vw, 32px); }
@media (min-width: 960px) { .growth-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.growth { margin: 0; }
.growth svg { display: block; width: 100%; height: auto; overflow: visible; }
.growth .gr { stroke: var(--line); stroke-width: 1; }
.growth .tk { font-family: var(--font-body); font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.growth .ax { font-family: var(--font-body); font-size: 12.5px; fill: var(--ink-2); }
.growth .ln-one { fill: none; stroke: #3F6FB5; stroke-width: 2; stroke-linejoin: round; }
.growth .ln-via { fill: none; stroke: #2D6A1E; stroke-width: 2; stroke-linejoin: round; }
.growth .gap { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.growth .pt { stroke: #fff; stroke-width: 2; }
.growth .pt.one { fill: #3F6FB5; } .growth .pt.via { fill: #2D6A1E; }
.growth .vl { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.growth .dl { font-family: var(--font-body); font-size: 13px; font-weight: 500; fill: var(--ink-2); }
.growth figcaption { display: flex; gap: 24px; margin-top: 10px; padding-left: 64px; font-size: .875rem; color: var(--ink-2); }
.growth .key { display: inline-flex; align-items: center; gap: 8px; }
.growth .key i { width: 18px; height: 2px; border-radius: 2px; display: inline-block; }
.growth .k-one { background: #3F6FB5; } .growth .k-via { background: #2D6A1E; }
.growth-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 12px; }
.growth-text p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
@media (max-width: 640px) { .growth .tk, .growth .ax { font-size: 15px; } .growth .vl, .growth .dl { font-size: 16px; } .growth figcaption { padding-left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal .growth .ln-one, .reveal .growth .ln-via { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .2s; }
  .reveal .growth.is-in .ln-one, .reveal .growth.is-in .ln-via { stroke-dashoffset: 0; }
  .reveal .growth .pt, .reveal .growth .vl, .reveal .growth .gap, .reveal .growth .dl { opacity: 0; transition: opacity .4s var(--ease) 1.1s; }
  .reveal .growth.is-in .pt, .reveal .growth.is-in .vl, .reveal .growth.is-in .gap, .reveal .growth.is-in .dl { opacity: 1; }
}

/* Production polish, 18 Oct 2026: the home h1 is now the longer "Building the trusted economic infrastructure for the AI age."
   Hold it to three balanced lines clear of the planet on desktop, and keep the actions near the fold on phones. */
.hero-world .hero-copy h1 { max-width: 11.6em; text-wrap: balance; }
@media (min-width: 960px) { .hero-world .hero-copy h1 { font-size: clamp(2.5rem, 3.9vw, 3.75rem); } }
@media (max-width: 959px) { .hero-world .hero-copy h1 { font-size: clamp(2.25rem, 9.4vw, 3.5rem); line-height: 1; } }

/* Legal pages (privacy.html, terms.html), 18 Oct 2026. */
.legal-doc h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin: 2.2em 0 .6em; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc ul { padding-left: 1.2em; }
.legal-doc li + li { margin-top: .35em; }
.legal-doc .table-scroll { overflow-x: auto; margin: 1.25em 0; }
.legal-doc table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); }
.legal-doc thead th { border-top: 2px solid var(--forest); font-weight: 600; }
mark.tbd { background: #FFF1B8; color: inherit; padding: 0 .2em; border-radius: 2px; }

/* ======================================================================
   Production polish: design pass, 18 Oct 2026 (Steve approved).
   Source: work/prod-polish/03-design-critique.md items 1–15.
   Direction: calmer finish to sit beside UN-system sites; motion kept for the hero only.
   ====================================================================== */
:root { --forest-deep: #0B2418; --t-sm: 1.375rem; --t-md: clamp(1.5rem, 2.2vw, 1.875rem); --t-lg: clamp(2rem, 3vw, 2.5rem); }

/* 1. Content no longer touches a forest hero */
.page-hero + .band.flush { padding-top: clamp(48px, 6vw, 80px); }
.page-news .news { border-top-color: var(--line-2); }

/* 2. Footer is its own plane; no empty strip on The Brief */
.site-footer { background: var(--forest-deep); border-top: 1px solid var(--forest-line); }
.page-brief main { padding-bottom: 0; }
@media (min-width: 960px) { .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-tag { font-size: .875rem; color: var(--on-forest-2); }

/* 3. One inner-page H1 size, at or below the home headline */
.page-hero h1, .page-hero .hero-grid h1 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); }
.page-hero h1.statement { font-size: clamp(2rem, 3.6vw, 3.25rem); }

/* 4. Diagram labels readable; full-size scroll strip on phones */
.dgx .sub, .dgx .tverb, .dgx .p-row { font-size: 13px; }
.dgx .p-label, .dgx .p-id { font-size: 11px; fill: #5E6A63; }
.dgx .sub { fill: var(--on-forest-2); }
.dgx .tverb.ink { fill: var(--forest); }
.diagram-hero .dg { max-width: 640px; }
@media (max-width: 700px) {
  .page-hero .dgx, .dg-sovai { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .page-hero .dgx svg, .dg-sovai svg { min-width: 600px; }
  .hero-grid > *, .page-hero .dgx, .dg-sovai, .dg-sovai *:has(> .dg-sovai) { min-width: 0; }
  .dg-sovai, .page-hero .dgx { max-width: calc(100% + 2 * var(--gutter)); }
  .ai-grid > * { min-width: 0; }
  .ai-panel .dg-sovai { margin-inline: 0; padding-inline: 0; max-width: 100%; }
}

/* 5. "Reduce" becomes a ruled role, not a glowing card */
.rd2-roles li.rd2-save { border: 0; border-top: 2px solid var(--via); border-radius: 0; background: none; box-shadow: none; padding: 18px 0 0; animation: none !important; color: #fff; }
.rd2-roles li.rd2-save strong { color: var(--via); font-size: 1.5rem; }

/* 6. Flat buttons: colour change and arrow slide only */
.btn:not(.ghost), .btn:not(.ghost):hover,
.forest .btn:not(.ghost), .page-hero .btn:not(.ghost), .band.via .btn:not(.ghost),
.forest .btn:not(.ghost):hover, .page-hero .btn:not(.ghost):hover, .band.via .btn:not(.ghost):hover { box-shadow: none; }
.btn::before { display: none; }

/* 7. No icons stacked over headings */
#accountability .columns .ficon, .reg-items .ficon { display: none; }
.step-text .glyph { width: 32px; height: 32px; margin-bottom: 12px; }

/* 8. Diagram and chart colours from the palette; one warm signal for "blocked" */
.growth .ln-one { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.growth .pt.one { fill: var(--ink-3); }
.growth .k-one { background: var(--ink-3); }
.dg-airspace .k-loc { --c: #A6DE76; }   /* one colour per flow type, on every line, check, arrow and card */
.dg-airspace .k-x { --c: #8CC8FF; }
.dg-airspace .k-ai { --c: #C9A7FF; }
.dg-airspace .k-hop { --c: #F4C46B; }
.dg-airspace .leader { stroke: color-mix(in srgb, #A6DE76 70%, transparent); }
.dgx .b-tag { fill: #E8A39C; }

/* 9. Three sub-heading steps */
.reg-items h3, #accountability h3, .own-grid h3, .bill-list h3, .principle h3, .route h3 { font-size: var(--t-sm); }
.growth-text h3, .route-people h3 { font-size: var(--t-md); }
.step-text h3.verb { font-size: var(--t-lg); }

/* 10. How it works hero paragraph matches the other heroes */
.page-hero .thesis { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--on-forest-2); max-width: 34em; text-wrap: pretty; }

/* 11. Home outcomes band: larger cover, SDG row spans the measure */
@media (min-width: 700px) { .outcome-foot { grid-template-columns: 200px 1fr; gap: 48px; } }
@media (min-width: 760px) { .sdg-icons { max-width: none; gap: 10px; } }
.sdg-note { max-width: 72em; }

/* 12. Statement bands at the h2 cap; the follow-on answers from the right */
.statement-band .big { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.statement-band:not(:has(.ledger)) .big-follow { margin: 28px 0 0; max-width: 40em; }

/* 13. One weight for group top rules */
.reg-items > div, #accountability .columns > div { border-top: 2px solid var(--forest); }
.bill-list li:first-child, .bill-list li:nth-child(2) { border-top: 2px solid rgba(255,255,255,.5); }

/* 15. Partner programmes as a static row; stacked on phones */
.motion .partner-strip .static { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.motion .partner-strip .marquee { display: none; }
@media (max-width: 640px) {
  .partner-strip { flex-direction: column; align-items: flex-start; }
  .partner-strip .label { padding: 16px var(--gutter) 0; }
  .partner-strip .static { padding: 8px var(--gutter) 16px; gap: 4px 20px; }
}

/* Production hardening, 18 Oct 2026: screen-reader-only utility that also contains tables; navigation without JavaScript. */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1080px) {
  .no-js .menu-btn { display: none; }
  .no-js .nav { display: flex; position: static; box-shadow: none; padding: 0 0 16px; }
  .no-js .bar { flex-wrap: wrap; }
}

/* Partner logos, 18 Oct 2026: official artwork at one height, vertically centred with any text names. */
.partner-strip, .partner-strip .static { align-items: center; }
.partner-strip li.has-logo { display: flex; align-items: center; }
.partner-strip li.has-logo img { display: block; height: 56px; width: auto; border-radius: 3px; }
.partner-strip .static { gap: 12px 24px; }
@media (max-width: 640px) { .partner-strip li.has-logo img { height: 46px; } }
.partner-strip li.has-note { gap: 14px; white-space: normal; }
.partner-strip .mark-note { display: block; max-width: 230px; font-size: .625rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: rgba(255,255,255,.62); }
@media (max-width: 640px) { .partner-strip .mark-note { max-width: 170px; } }

/* Credits on the home route cards: Creative Commons photos need visible attribution (18 Oct 2026). */
.photo.card figcaption { display: block; font-size: .5625rem; padding: 3px 7px; max-width: 100%; }
.photo.card figcaption a { color: inherit; }

/* How it works: flat hero and the four-part sequence (18 Oct 2026). No glow, no icons; type carries it. */
.page-hero.hero-flat { background: var(--forest); background-image: none; padding-bottom: clamp(56px, 7vw, 88px); }
.page-hero.hero-flat .lead { max-width: 34em; font-size: clamp(1.125rem, 1.6vw, 1.3rem); }
.seq-band { background: #fff; padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--line); }
.seq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.seq li { position: relative; padding: 24px 0; border-top: 2px solid var(--forest); }
.seq li + li { border-top-width: 1px; border-top-color: var(--line-2); }
.seq-n { display: block; font-family: var(--font-head); font-size: .9375rem; color: var(--green); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.seq-name { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.1; color: var(--ink); }
.seq-verb { margin: 2px 0 12px; font-family: var(--font-head); font-size: 1.125rem; color: var(--green); }
.seq li p:last-child { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; max-width: 26em; }
@media (min-width: 900px) {
  .seq { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--forest); }
  .seq li, .seq li + li { border-top: 0; padding: 28px 28px 8px 0; }
  .seq li + li { padding-left: 28px; border-left: 1px solid var(--line-2); }
  .seq li:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -6px; width: 11px; height: 11px; border-top: 1.5px solid var(--green); border-right: 1.5px solid var(--green); transform: rotate(45deg); background: #fff; z-index: 1; }
}
@media (min-width: 900px) and (max-width: 1239px) { .seq-name { font-size: clamp(1.5rem, 2.3vw, 1.875rem); } }


/* How it works hero diagram, redrawn in the Governments style (18 Oct 2026): mirrored cards, one colour per type. */
.dg-flowmap .k-ppl { --c: #A6DE76; } .dg-flowmap .k-ai { --c: #C9A7FF; } .dg-flowmap .k-ev { --c: #8CC8FF; }
.dg-flowmap .k-rule { --c: #F4C46B; } .dg-flowmap .k-prov { --c: #F49C7C; } .dg-flowmap .k-proof { --c: #FFFFFF; }
.dg-flowmap .mk-ppl { stroke: #A6DE76; } .dg-flowmap .mk-ai { stroke: #C9A7FF; } .dg-flowmap .mk-ev { stroke: #8CC8FF; }
.dg-flowmap .mk-rule { stroke: #F4C46B; } .dg-flowmap .mk-prov { stroke: #F49C7C; } .dg-flowmap .mk-proof { stroke: #FFFFFF; }
.dg-flowmap .f-in { stroke-width: 1.6; }
.dg-flowmap .g-core { filter: none; }
.dg-flowmap .spine { fill: none; stroke: #7BC043; stroke-width: 1.8; }
.dg-flowmap .eng-tile { fill: rgba(13,38,25,.82); stroke: rgba(166,222,118,.45); stroke-width: 1; }
.dg-flowmap .eng.veto .eng-tile { stroke: none; filter: drop-shadow(0 12px 22px rgba(108,178,54,.35)); }
.dg-flowmap .eng-name { font-family: var(--font-head); font-size: 24px; fill: #fff; letter-spacing: -.01em; }
.dg-flowmap .eng-verb { font-family: var(--font-body); font-size: 13px; fill: var(--on-forest-2); }
.dg-flowmap .eng-name.ink { fill: #0F2E1F; } .dg-flowmap .eng-verb.ink { fill: #0F2E1F; }
.dg-flowmap .c-ico .ifill { fill: var(--c); stroke: none; }
.dg-flowmap .eng.veto .eng-tile { fill: url(#pl-g); }
.dg-flowmap .card .c-title { font-size: 14px; } .dg-flowmap .card .c-sub { font-size: 12px; }
.dg-flowmap text { stroke: none; paint-order: normal; }

/* One hero height across How it works, Governments and Sovereign AI (18 Oct 2026): same padding, same visual box (660:516). */
.page-hero.hero-flat { padding-bottom: clamp(64px, 8vw, 112px); }
.page-hero .hero-grid .photo.tall.ai-hero { aspect-ratio: 660 / 516; }
.page-hero .photo.ai-hero img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) { .page-hero .dg-flowmap { margin-right: -24px; } }
.page-hero .hero-note { margin: 28px 0 0; padding-left: 14px; border-left: 2px solid var(--via); color: #fff; font-size: .9375rem; font-weight: 500; line-height: 1.5; max-width: 30em; }
.dg-flowmap .house { fill: rgba(123,192,67,.07); stroke: rgba(166,222,118,.55); stroke-width: 1.2; }
.dg-flowmap .house-lbl { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: #A6DE76; }
.dg-flowmap .eng-tile { fill: rgba(13,38,25,.9); }

/* Governments: what the government gains, first after the hero (18 Oct 2026) */
.gains-band { background: #fff; }
.gains-band .section-head h2 { margin: 0; }
.gains-grid { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 640px) and (max-width: 899px) { .gains-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .page-countries .own-grid:not(.gains-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* All inner-page heroes flat forest, no lit mesh or drift (18 Oct 2026) */
.page-hero { background: var(--forest); background-image: none; animation: none; }
#public-ai ~ .actions, section[aria-labelledby="public-ai"] .actions { margin-top: clamp(40px, 5vw, 56px); }


/* Sovereign AI: governs-AI section, steps beside a flat card diagram (18 Oct 2026) */
.ai-panel { background: var(--forest); background-image: none; box-shadow: none; padding: clamp(16px, 2vw, 28px); }
.ai-panel .dg-sovai2 { max-width: none; margin: 0; }
.dg-flowmap .k-go { --c: #7BC043; } .dg-flowmap .k-stop { --c: #F49C7C; }
.ai-steps { list-style: none; counter-reset: s; margin: 24px 0; padding: 0; }
.ai-steps li { counter-increment: s; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.ai-steps li:first-child { border-top: 2px solid var(--forest); }
.ai-steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--forest); color: var(--forest); font-family: var(--font-head); font-size: .875rem; display: grid; place-items: center; }
.dg-sovai2 .eng.veto .eng-tile { fill: url(#sa-g); }
/* Sovereign AI governs-AI: give the diagram more room and centre it against the steps */
@media (min-width: 960px) {
  .ai-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 5vw, 72px); }
  .ai-grid .ai-panel { margin-top: 0; }
}
.ai-panel { padding: clamp(12px, 1.4vw, 20px); }
.ai-panel .dg-sovai2, .ai-panel .dg-sovai2 svg { width: 100%; max-width: none; }
.wrap > .ai-more:first-child { margin-top: 0; }
.ai-more-text p + p { margin-top: 14px; }
.photo.pharmacy img { object-position: 50% 45%; }

/* Partner strip right-aligned to the content edge (18 Oct 2026) */
@media (min-width: 641px) {
  .partner-strip { justify-content: flex-end; padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .partner-strip .label { padding-left: var(--gutter); }
  .partner-strip .static { padding-right: 0; justify-content: flex-end; }
}

/* Flat forest everywhere: bands, binding strip and footer (18 Oct 2026) */
.forest, .binding, .site-footer, .readers-band, .bill { background-image: none; }
/* Approved 18 Oct: no icons over step headings; readable credits on home cards */
.step-text .glyph { display: none; }
.photo.card figcaption { font-size: .6875rem; padding: 4px 8px; }

/* Contact form: spam trap off-screen; error state for the status message */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice.is-error { border-color: var(--error); color: var(--error); }

/* Programme name under a partner logo (Nokia: Network as Code) */
.partner-strip .logo-cap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.partner-strip .logo-cap figcaption { font-size: .75rem; font-weight: 600; line-height: 1; color: rgba(255,255,255,.85); letter-spacing: .01em; white-space: nowrap; }
.partner-strip .logo-cap { position: relative; display: block; }
.partner-strip .logo-cap figcaption { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
@media (max-width: 640px) { .partner-strip li.has-cap { margin-bottom: 18px; } }
@media (min-width: 641px) { .partner-strip .static, .partner-strip .label { padding-top: 26px; padding-bottom: 26px; } }
/* Partner strip between tablet and wide desktop: label on its own line, logos on one right-aligned row */
@media (min-width: 641px) and (max-width: 1239px) {
  .partner-strip { flex-direction: column; align-items: flex-end; }
  .partner-strip .label { padding-bottom: 0; }
  .partner-strip .static { padding-top: 14px; }
}
.partner-strip .static { row-gap: 34px; }
/* Hero tick matches the footer's: VIAGreen, 22px */
.hero-world .trust::before { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%237BC043' stroke-width='1.6'/%3E%3Cpath d='m7.5 12.3 3 3 6-6.3' fill='none' stroke='%237BC043' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* How it works: three layers (Reach, Rules, Routes) */
.dg-flowmap .eng-name { font-size: 21px; }
.dg-flowmap .eng-verb { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
@media (min-width: 900px) { .seq.seq-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Home: the open-space contrast, closing the AI section */
.media-text .contrast { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--green); font-family: var(--font-head); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.45; color: var(--ink); }

/* Governments: center the "Who holds what" caption */
.ledger figcaption { text-align: center; text-wrap: balance; font-style: italic; }

/* Governments statement: green on the middle line (licensed institutions), not the last */
.statement-band #control span:last-child { color: var(--ink); }
.statement-band #control span:nth-child(2) { color: var(--green); }
@media print { .statement-band #control span:nth-child(2) { color: #111; } }

/* Visual pass 19 Oct: on desktop, a photo beside text grows to the text height so the pair balances */
@media (min-width: 900px) {
  .media-split > .photo, .step > .photo, .media-split > .photo.frame, .step > .photo.step-photo { align-self: stretch; aspect-ratio: auto; }
  .media-split > .photo.frame { min-height: 520px; }
  .step > .photo.step-photo { min-height: 380px; }
  .media-split > .photo, .step > .photo { min-width: 0; }
  .media-split > .photo > picture, .step > .photo > picture, .media-split > .photo > img, .step > .photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
}

/* Visual pass: footer link columns get room; headings and paragraphs avoid lone words */
@media (min-width: 1100px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .foot-nav { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 32px; }
}
h1, h2, h3, .lead, .big-follow { text-wrap: balance; }
p { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* Partner strip centered (19 Oct 2026), replacing the right alignment */
@media (min-width: 641px) {
  .partner-strip { justify-content: center; padding-left: var(--gutter); padding-right: var(--gutter); }
  .partner-strip .label { padding-left: 0; }
  .partner-strip .static { justify-content: center; }
}
@media (min-width: 641px) and (max-width: 1239px) { .partner-strip { align-items: center; } }
@media (max-width: 640px) { .partner-strip { align-items: center; text-align: center; } .partner-strip .label { padding-right: 0; } .partner-strip .static { justify-content: center; } }

/* How it works: VETO and Threads show visuals, not photos (19 Oct 2026) */
.step-visual { margin: 0; background: var(--forest); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
@media (min-width: 900px) { .step:nth-child(even) .step-visual { order: 2; } .step > .step-visual { align-self: stretch; min-height: 380px; } }
.step-visual .receipt { width: min(100%, 400px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.step-visual .receipt .row { grid-template-columns: 7.2em 1fr; }
.step-visual .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.step-visual .checks li { display: flex; gap: 6px; align-items: center; }
.step-visual .checks .ck { width: 14px; height: 14px; color: var(--green); flex: none; }
.rails { gap: 0; color: #fff; }
.rails .rv-node { position: relative; text-align: center; border: 1.5px solid rgba(255,255,255,.28); border-radius: 12px; padding: 12px 22px; background: rgba(255,255,255,.04); min-width: 230px; }
.rails .rv-node b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.125rem; }
.rails .rv-node span { display: block; font-size: .8125rem; color: var(--on-forest-2); }
.rails .rv-threads { background: linear-gradient(180deg, #93D35C, #6CB236); border-color: transparent; color: #0F2E1F; }
.rails .rv-threads span { color: #0F2E1F; }
.rails .rv-node + .rv-node, .rails .rv-rails, .rails .rv-out { margin-top: 30px; }
.rails .rv-node + .rv-node::before, .rails .rv-rails::before, .rails .rv-out::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 1.5px solid var(--via); }
.rails .rv-rails { position: relative; list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.rails .rv-rails li { font-size: .8125rem; border: 1px solid rgba(123,192,67,.55); color: #fff; border-radius: 999px; padding: 6px 12px; }
.img-credits { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.img-credits p { margin: 0; font-size: .75rem; color: var(--ink-3); }

/* How it works: photo with a small card over the corner (VETO decision, Threads rails), 20 Oct 2026 */
.photo.has-card { overflow: visible; }
.photo.has-card > img { border-radius: var(--radius); }
@media (min-width: 900px) { .step > .photo.has-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } }
img[src*="p-hiw-threads"] { object-position: 68% 50%; }
.photo-card { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: min(250px, 70%); background: #fff; color: var(--ink); border-radius: 10px; padding: 14px 16px; box-shadow: 0 16px 36px rgba(0,0,0,.32); font-size: .8125rem; line-height: 1.45; }
.photo-card.pc-dark { right: auto; left: 18px; }
.photo-card .pc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line-2); font-weight: 600; color: var(--ink-2); }
.photo-card .verdict { font-size: .75rem; letter-spacing: .08em; background: #E3F2D6; color: #2D6A1E; padding: 2px 7px; border-radius: 4px; }
.photo-card .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.photo-card .checks li { display: flex; gap: 6px; align-items: center; }
.photo-card .checks .ck { width: 13px; height: 13px; color: var(--green); flex: none; }
.photo-card .pc-foot { margin: 8px 0 0; color: var(--ink-3); font-size: .75rem; }
.photo-card.pc-dark { background: var(--forest); color: #fff; }
.photo-card.pc-dark .pc-head { color: #fff; border-color: rgba(255,255,255,.2); }
.photo-card.pc-dark .pc-foot { color: var(--on-forest-2); }
.pc-rails { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pc-rails li { border: 1px solid rgba(123,192,67,.6); border-radius: 999px; padding: 2px 9px; font-size: .75rem; }
@media (max-width: 899px) {
  .photo.has-card { display: flex; flex-direction: column; aspect-ratio: auto; background: none; }
  .photo.has-card > img { position: static; aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
  .photo-card, .step:nth-child(even) .photo-card { position: relative; right: auto; left: auto; bottom: auto; width: auto; margin: -36px 14px 0; }
}
.photo.has-card > img { transform: none !important; }

/* Threads card: rails as an even list, matching the VETO card (20 Oct 2026) */
.pc-rails { display: grid; grid-template-columns: 1fr; gap: 0; }
.pc-rails li { border: 0; border-radius: 0; padding: 5px 0 5px 18px; position: relative; font-size: .8125rem; border-top: 1px solid rgba(255,255,255,.12); }
.pc-rails li:first-child { border-top: 0; }
.pc-rails li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; border-top: 2px solid var(--via); }

/* How it works: providers plug into VETO (20 Oct 2026) */
.plug-panel { background: var(--forest); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 56px); margin: 8px 0 clamp(40px, 5vw, 64px); }
.dg-plug { margin: 0 auto; max-width: 860px; }
.dg-plug svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg-plug .c-bg { fill: rgba(13,38,25,.85); stroke: rgba(166,222,118,.4); stroke-width: 1; }
.dg-plug .rely .c-bg { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.3); }
.dg-plug .c-dot { fill: #A6DE76; }
.dg-plug .rely .c-dot { fill: #fff; opacity: .8; }
.dg-plug .c-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: #fff; }
.dg-plug .c-sub { font-family: var(--font-body); font-size: 12.5px; fill: #B9E39A; }
.dg-plug .rely .c-sub { fill: rgba(255,255,255,.66); }
.dg-plug .ln { fill: none; stroke: #A6DE76; stroke-width: 1.6; stroke-linecap: round; }
.dg-plug .ln.out { stroke: rgba(255,255,255,.55); }
.dg-plug .v-name { font-family: var(--font-head); font-size: 26px; fill: #0F2E1F; }
.dg-plug .v-sub { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: #0F2E1F; }
.dg-plug .pill { fill: #0F2E1F; stroke: rgba(255,255,255,.55); stroke-width: 1; }
.dg-plug .pill-t { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: #fff; }
.plug-m { display: none; }
@media (max-width: 640px) {
  .dg-plug { display: none; }
  .plug-m { display: flex; flex-direction: column; align-items: center; color: #fff; }
  .plug-m ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
  .pm-in li { border: 1px solid rgba(166,222,118,.4); background: rgba(13,38,25,.85); border-radius: 10px; padding: 9px 14px; font-size: .8125rem; color: #B9E39A; }
  .pm-in li b { display: block; color: #fff; font-size: .9375rem; }
  .pm-veto { position: relative; margin-top: 30px; width: 100%; text-align: center; border-radius: 14px; padding: 14px; background: linear-gradient(180deg, #93D35C, #6CB236); color: #0F2E1F; font-size: .8125rem; font-weight: 600; }
  .pm-veto b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.625rem; }
  .pm-veto::before, .pm-pill::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 1.6px solid #A6DE76; }
  .pm-pill { position: relative; margin: 30px 0 0; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; padding: 4px 14px; font-size: .8125rem; font-weight: 600; }
  .pm-pill::before { border-color: rgba(255,255,255,.55); }
  .pm-out { margin-top: 14px !important; grid-template-columns: repeat(3, 1fr); }
  .pm-out li { text-align: center; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.05); border-radius: 10px; padding: 9px 6px; font-size: .8125rem; font-weight: 600; }
  .pm-foot { margin: 10px 0 0; font-size: .8125rem; color: rgba(255,255,255,.66); }
}
@media (max-width: 640px) { .pm-out li { display: flex; align-items: center; justify-content: center; } }

/* Plug-in diagram v2: Threads and the rails (20 Oct 2026) */
.dg-plug .t-bg { fill: rgba(13,38,25,.9); stroke: #A6DE76; stroke-width: 1.6; }
.dg-plug .t-name { font-family: var(--font-head); font-size: 21px; fill: #fff; }
.dg-plug .t-sub { font-family: var(--font-body); font-size: 12px; fill: #B9E39A; }
.dg-plug .c-title.sm { font-size: 13.5px; }
.dg-plug .cap { font-family: var(--font-body); font-size: 13px; fill: rgba(255,255,255,.7); }
@media (max-width: 640px) {
  .pm-threads { position: relative; margin-top: 30px; width: 100%; text-align: center; border: 1.6px solid #A6DE76; border-radius: 14px; padding: 10px; font-size: .8125rem; color: #B9E39A; }
  .pm-threads b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; color: #fff; }
  .pm-threads::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 1.6px solid #A6DE76; }
  .pm-pill { margin-bottom: 0; }
  .pm-out { grid-template-columns: repeat(2, 1fr); }
  .pm-out li:last-child { grid-column: 1 / -1; }
  .pm-foot { text-align: center; }
}

/* Small plug icon beside "Built for others to plug into" (20 Oct 2026) */
h2.with-ico { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); }
.h-ico { flex: none; width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); border-radius: 14px; background: #E3F2D6; color: var(--forest); display: grid; place-items: center; }
.h-ico svg { width: 74%; height: 74%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* "Built for others to plug into": small plug illustration to the right of the heading (20 Oct 2026) */
.section-head.has-art { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .section-head.has-art { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.plug-art { width: clamp(180px, 20vw, 260px); height: auto; justify-self: end; }
@media (max-width: 899px) { .plug-art { justify-self: start; width: 170px; } }
.pa-cable { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; }
.pa-plug { fill: #fff; stroke: var(--forest); stroke-width: 3; }
.pa-prong { fill: none; stroke: var(--forest); stroke-width: 5; stroke-linecap: round; }
.pa-socket { fill: #7BC043; stroke: var(--forest); stroke-width: 3; }
.pa-slot { fill: var(--forest); }
.pa-led { fill: #E3F2D6; stroke: var(--forest); stroke-width: 2; }
.section-head.has-art { max-width: none; }
.section-head.has-art .lead { max-width: 38em; }

/* Plug photo to the right of "Built for others to plug into" */
.plug-photo { width: clamp(260px, 28vw, 380px); aspect-ratio: 3 / 2; justify-self: end; }
@media (max-width: 899px) { .plug-photo { width: 100%; justify-self: stretch; } }

/* Team on the mission page: photos in greyscale so the mixed sources read as one set */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .team { grid-template-columns: repeat(3, 1fr); } }
.team li { display: flex; gap: 20px; align-items: flex-start; padding-top: 24px; border-top: 1px solid var(--line-2); }
.team li > div { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.team-pic { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--mist); }
.team-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.02); }
.team-pic .initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-head); font-size: 1.75rem; color: var(--ink-3); }
.team-role { margin: 0 0 4px; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.team h3 { font-size: 1.25rem; margin: 0; }
.team-in { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 -4px 4px; vertical-align: middle; color: #0A66C2; border-radius: var(--radius); transition: color .2s; }
.team-in:hover { color: #004182; }
.team-in:focus-visible { outline: 2px solid #0A66C2; outline-offset: 0; }
.team-note { margin: 6px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }

/* Sovereign AI: four items in the government-AI grid (2 x 2, then one row) */
@media (min-width: 900px) { .own-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .own-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Partner strip: "Programs" above the logos, both on the content's left edge at every width */
.partner-strip { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 14px;
  padding: 22px var(--gutter) 30px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.partner-strip .label { padding: 0; }
.partner-strip .static { padding: 0; justify-content: flex-start; }
@media (max-width: 640px) { .partner-strip { padding-top: 18px; padding-bottom: 24px; } }
.partner-strip .logo-cap figcaption { color: rgba(255,255,255,.6); }

/* How it works: the VIASmartPay logo stands in for the Reach layer's name, at the height of the other layer names */
.step-text h3.verb-logo { line-height: 0; margin-bottom: 14px; }
.step-text h3.verb-logo img { display: block; height: clamp(34px, 3.4vw, 44px); width: auto; }
/* VIASmartPay logo in place of the Reach name: one line box tall (1.1em), so the three columns stay level */
.seq-name.seq-logo { display: flex; align-items: center; height: 1.1em; }
.seq-name.seq-logo img { display: block; height: .92em; width: auto; max-width: 100%; }