/* ICS website. Shared styles.
   Light Scandinavian concept (Concept Brief v3.1): Paper and white grounds,
   Blue Tint as the one wash, Slate text, Cyber Blue accents.
   Body type is TeX Gyre Heros with a Helvetica Neue fallback. No dark blocks. */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Manrope variable font (weights 200 to 800 in one file), fetched from
   Google Fonts for the FRAME v2 page look (Direction v1, page 13). */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F8FAFC;
  --white: #FFFFFF;
  --tint: #EAF6FD;
  --tint-deep: #C4E7FF;
  --slate: #0F172A;
  --slate-mid: #475569;
  --hairline: #E2E8F0;
  --cyber: #00C2FF;
  --duotone: #2FA4FB;
  --link: #0069C0;
  --link-pfp: #00799E;
  --frame-navy: #0B1D33;
  --frame-panel: #DFE9F4;
  --frame-steel: #5E6E7E;
  --frame-black: #050505;
  --radius: 14px;
  --maxw: 1200px;
  --font-body: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-frame: "Manrope", "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--slate);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Type */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--slate);
}
h1 { font-size: clamp(2.55rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }
.lede { font-size: 1.22rem; line-height: 1.55; max-width: 42em; }

.kicker {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--slate);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 4px;
  background: var(--cyber);
  border-radius: 2px;
  flex: none;
}

/* Header */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { flex: none; line-height: 0; }
.brand img { width: 212px; height: auto; }
.main-nav { margin-left: auto; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 26px;
  align-items: center;
}
.main-nav a {
  color: var(--slate);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
}
.main-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn {
  display: none;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  background: var(--white);
  border: 1.5px solid var(--slate);
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--slate);
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 13px 26px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--cyber); color: var(--slate); }
.btn-primary:hover { background: var(--duotone); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn-ghost:hover { background: var(--tint); text-decoration: none; }
.btn-small { min-height: 44px; padding: 9px 18px; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Hero: the film fills the whole hero and the opaque Paper card sits on it,
   on desktop and phone (Direction v1, fix 1). */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(620px, 86vh, 820px);
  padding: 120px 0 64px;
  overflow: hidden;
  background: var(--tint);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  line-height: 0;
  background: var(--tint);
}
.hero-media .hero-still,
.hero-media .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero-media .hero-still { z-index: 0; transform: scale(1.04); }
.hero-media .hero-video {
  z-index: 1;
  transform: scale(1.04);
}
/* HERO TINT: this is the single block that carries the hero treatment.
   JR ruling (Oct 18, 2026): the film runs as close to the original footage
   as possible; the footage itself is the artistic statement. So there is NO
   grayscale, desaturation, or duotone filter on the film, and its original
   color stands. The only treatment is this faint Blue Tint wash laid over
   the film, under the card. D1 stays open for JR on the preview: zero tint
   (delete this block) or Shirley's #0090CC duotone are one-line changes. */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(234, 246, 253, 0.35);
  pointer-events: none;
}
.hero-media.video-unavailable .hero-video,
.hero-media.video-unavailable .hero-film-toggle { display: none; }
.hero-film-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--slate);
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.45);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.hero-film-toggle::before {
  content: "\275A\275A";
  font-size: 0.72rem;
  letter-spacing: 1px;
}
.hero-film-toggle[aria-pressed="true"]::before { content: "\25B6"; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.28);
  padding: 48px;
  max-width: 720px;
}
.hero-panel h1 { margin-bottom: 0.35em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Motto */
.motto {
  text-align: center;
  padding: clamp(48px, 7vw, 84px) 20px clamp(8px, 2vw, 20px);
}
.motto p {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  margin: 0;
}
.motto .motto-mark { width: 44px; margin: 0 auto 18px; }

/* Sections */
.section { padding: clamp(52px, 7vw, 92px) 0; }
.section-tint { background: var(--tint); }
.section-white { background: var(--white); }
.section-head { max-width: 46em; margin-bottom: 34px; }
.section-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--slate-mid);
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Journeys */
.journeys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.journeys li {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.journeys .j-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
}
.journeys .j-num::after {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background: var(--cyber);
  border-radius: 2px;
  margin-top: 8px;
}
.journeys a {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--slate);
  text-decoration: none;
}
.journeys a:hover { text-decoration: underline; text-underline-offset: 4px; }
.journeys .j-note { font-size: 0.86rem; color: var(--slate-mid); margin: 8px 0 0; }
.journeys li.j-donate { background: var(--tint); }

/* Tags */
.tag-needed {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--white);
  border: 1.5px dashed var(--slate-mid);
  border-radius: 999px;
  padding: 4px 10px;
}
.tag-needed.on-tint { background: var(--tint); }

/* Cards and grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3 { margin-bottom: 0.35em; }
.card p:last-child { margin-bottom: 0; }
.card-dashed {
  background: var(--paper);
  border: 1.5px dashed var(--slate-mid);
  border-radius: var(--radius);
  padding: 26px 24px;
}

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.values-grid li {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 18px;
  border-top: 5px solid var(--cyber);
}
.values-grid .v-num {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--slate-mid);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 8px;
}
.values-grid .v-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.values-list { list-style: none; margin: 0; padding: 0; }
.values-list li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.values-list li:first-child { border-top: 1px solid var(--hairline); }
.values-list .v-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.values-list .v-num::after {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background: var(--cyber);
  border-radius: 2px;
  margin-top: 6px;
}
.values-list .v-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* Feature essay */
.feature-essay {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
  align-items: start;
}
.meta-line {
  font-size: 0.92rem;
  color: var(--slate-mid);
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Forms */
.proto-form { display: grid; gap: 16px; max-width: 560px; }
.proto-form label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 6px;
}
.proto-form input,
.proto-form textarea,
.proto-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--slate-mid);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  background: var(--white);
  color: var(--slate);
}
.form-note { font-size: 0.9rem; color: var(--slate-mid); }

/* Footer */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: 48px 0 40px;
}
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; }
.site-footer .footer-lockup { width: 272px; max-width: 100%; height: auto; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-nav a { color: var(--slate); }
.fiscal-line { font-size: 0.92rem; color: var(--slate-mid); max-width: 34em; }
.prototype-note { font-size: 0.85rem; color: var(--slate-mid); margin-top: 22px; }

/* Page heads */
.page-head { padding: clamp(44px, 6vw, 72px) 0 8px; }
.breadcrumb { font-size: 0.92rem; margin: 0 0 18px; color: var(--slate-mid); }
.breadcrumb a { color: var(--slate); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tint);
  border: 1px solid var(--tint-deep);
  border-radius: 999px;
  padding: 6px 14px;
}
.pill {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--slate);
  border-radius: 999px;
  padding: 5px 13px;
}
.pill::before { content: "●"; color: var(--cyber); margin-right: 7px; font-size: 0.7rem; vertical-align: 2px; }

/* On this page */
.on-this-page {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 26px 0 8px;
}
.on-this-page h2 { font-size: 1.05rem; margin-bottom: 10px; }
.on-this-page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.on-this-page a { font-family: var(--font-head); font-weight: 700; }

/* Current project */
.current-project {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 8px solid var(--frame-navy);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
}
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fact-list li {
  background: var(--frame-panel);
  border-radius: 10px;
  padding: 12px 16px;
}
.fact-list .f-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--frame-navy);
}
.fact-list .f-value { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }

/* Project page keyline */
.project-keyline { border-left: 8px solid var(--frame-navy); padding-left: clamp(18px, 3vw, 36px); }
.frame-panel { background: var(--frame-panel); border-radius: var(--radius); padding: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.stat .s-figure {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 4px;
}
.stat .s-source { font-size: 0.82rem; color: var(--slate-mid); display: block; margin-top: 8px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.timeline li:first-child { border-top: 1px solid var(--hairline); }
.timeline .t-date { font-family: var(--font-head); font-weight: 800; }
.timeline li.t-future { border-bottom-style: dashed; color: var(--slate-mid); }

/* Library */
.library-tools {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chip {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--slate-mid);
  background: var(--white);
  color: var(--slate);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--slate); color: #fff; border-color: var(--slate); }
.chip .chip-check { display: none; margin-right: 7px; }
.chip[aria-pressed="true"] .chip-check { display: inline; }
.filter-selects { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; }
.filter-selects label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 6px;
}
.filter-selects select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--slate-mid);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  background: var(--white);
}
.result-count { font-family: var(--font-head); font-weight: 700; margin: 0 0 16px; }
.library-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.library-item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: center;
}
.library-item h3 { margin: 0; font-size: 1.3rem; }
.library-item h3 a { color: var(--slate); }
.library-item .meta-line { margin: 4px 0 0; }
.type-chip {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tint);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.empty-state {
  background: var(--white);
  border: 1.5px dashed var(--slate-mid);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
}

/* Report pages */
.report-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  align-items: start;
  padding-bottom: clamp(52px, 7vw, 92px);
}
.toc {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.toc h2 { font-size: 1rem; margin-bottom: 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc a { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
.toc-mobile { display: none; margin-bottom: 22px; }
.toc-mobile summary {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 4px;
}
.toc-mobile ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 10px; }
.report-body { max-width: 44em; }
.report-body section { margin-bottom: 40px; }
.cite-box, .download-box, .summary-box {
  background: var(--tint);
  border-radius: var(--radius);
  padding: 24px;
}
.cite-format { margin-bottom: 18px; }
.cite-format h3 { font-size: 1rem; margin-bottom: 6px; }
.cite-text {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.94rem;
  margin: 0 0 10px;
}
.copy-status { font-family: var(--font-head); font-weight: 700; min-height: 1.4em; margin: 8px 0 0; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1.5px solid var(--slate-mid);
  border-radius: 999px;
  color: var(--slate);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--white);
}
.share-row a:hover { background: var(--tint); }
.placeholder-panel {
  border: 1.5px dashed var(--slate-mid);
  border-radius: var(--radius);
  padding: 28px 24px;
  background: var(--paper);
}
.image-needed {
  border: 1.5px dashed var(--slate-mid);
  border-radius: var(--radius);
  background: var(--tint);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--slate-mid);
  font-family: var(--font-head);
  font-weight: 700;
}

/* What we build (Home) */
.build-card .b-mark { height: 36px; width: auto; margin-bottom: 16px; }
.build-card .b-frame-type {
  font-family: var(--font-frame);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--frame-navy);
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}

/* Values with one-line descriptions */
.values-grid .v-desc { font-size: 0.95rem; line-height: 1.5; margin: 8px 0 0; }
.values-list .v-desc { font-size: 1rem; margin: 4px 0 0; max-width: 44em; }

/* Get involved lines */
.gi-lines p { margin: 0 0 8px; }
.gi-lines p:last-child { margin-bottom: 0; }

/* People (About) */
.people-card .p-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--slate-mid);
  margin: 0 0 10px;
}

/* About figure (Plate 0.1) */
.about-figure { margin: 0; max-width: 560px; }
.about-figure img { border-radius: var(--radius); width: 100%; height: auto; }
.about-figure figcaption { margin-top: 14px; }
.about-figure .fig-caption {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}
.about-figure .fig-credit { font-size: 0.85rem; color: var(--slate-mid); margin: 6px 0 0; }

/* Essay body (report pages) */
.essay-body h3 { font-size: 1.55rem; margin: 1.5em 0 0.5em; }
.essay-body h3:first-child { margin-top: 0; }
.essay-body h4 { font-size: 1.22rem; margin: 1.35em 0 0.45em; }
.essay-body ul { padding-left: 1.35em; margin: 0 0 1em; }
.essay-body li { margin-bottom: 0.65em; }
.essay-body li:last-child { margin-bottom: 0; }

/* Work hub project logos */
.proj-logo { height: 46px; width: auto; margin-bottom: 16px; }
.frame-wordmark {
  font-family: var(--font-frame);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--frame-navy);
  font-size: 1.5rem;
  line-height: 1.05;
  display: block;
  margin-bottom: 16px;
}
.frame-wordmark small {
  display: block;
  font-size: 0.5em;
  letter-spacing: 0.3em;
  color: var(--frame-steel);
  margin-top: 5px;
}

/* FRAME project page: the FRAME v2 look inside the ICS family
   (Direction v1, fix 7 and page 13). Deep Navy #0B1D33 headings and text,
   Steel Gray #5E6E7E subheads and captions, Rich Black #050505,
   #DFE9F4 grid cells only, Manrope all-caps tracked headings, Swiss grid,
   square corners. No ICS Cyber Blue and no ICS duotone in the FRAME body. */
.frame-page h1,
.frame-page h2,
.frame-page h3,
.frame-page h4 {
  font-family: var(--font-frame);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--frame-navy);
}
.frame-page .kicker { font-family: var(--font-frame); color: var(--frame-steel); }
.frame-page .kicker::before { background: var(--frame-navy); }
.frame-page a { color: var(--frame-navy); }
.frame-page .lede { color: var(--frame-black); }
.frame-lockup {
  font-family: var(--font-frame);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--frame-navy);
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  line-height: 1.02;
  margin: 16px 0 12px;
}
.frame-lockup .fl-sub {
  display: block;
  font-size: 0.34em;
  letter-spacing: 0.34em;
  color: var(--frame-steel);
  margin-top: 10px;
}
.frame-page .badge { background: var(--frame-panel); border-color: var(--frame-panel); color: var(--frame-navy); }
.frame-page .pill { border-color: var(--frame-navy); color: var(--frame-navy); }
.frame-page .pill::before { color: var(--frame-navy); }
.frame-page .project-keyline { border-left-color: var(--frame-navy); }
.frame-glance {
  background: var(--white);
  border: 2px solid var(--frame-navy);
  border-radius: 0;
  padding: 24px;
  margin-top: 26px;
}
.frame-page .fact-list li { background: var(--frame-panel); border-radius: 0; }
.frame-page .fact-list .f-label { color: var(--frame-steel); font-family: var(--font-frame); }
.frame-page .fact-list .f-value { color: var(--frame-navy); font-family: var(--font-frame); }
.frame-card {
  background: var(--white);
  border: 1.5px solid var(--frame-navy);
  border-radius: 0;
  padding: 26px 24px;
}
.frame-card h3 { margin-bottom: 0.35em; }
.frame-card p:last-child { margin-bottom: 0; }
.frame-page .stat { border-radius: 0; border: 1.5px solid var(--frame-navy); }
.frame-page .stat .s-figure { font-family: var(--font-frame); color: var(--frame-navy); }
.frame-page .stat .s-source,
.frame-page .meta-line { color: var(--frame-steel); }
.frame-page .bt-card p strong { color: var(--frame-navy); }
.frame-page .timeline .t-date {
  font-family: var(--font-frame);
  color: var(--frame-navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.frame-page .btn-primary { background: var(--frame-navy); color: #fff; }
.frame-page .btn-primary:hover { background: var(--frame-black); text-decoration: none; }
.frame-page .btn-ghost { border-color: var(--frame-navy); color: var(--frame-navy); }
.frame-page .btn-ghost:hover { background: var(--frame-panel); text-decoration: none; }
.frame-visit {
  border: 2px solid var(--frame-navy);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
  background: var(--white);
}

/* Plan for Planning project page: the PfP v2 look inside the ICS family
   (Direction v1, fix 7 and page 13; tokens from pfp-tokens-v1.1.css).
   Cyber Blue #00C2FF for marks, rules and buttons only; Slate on Paper
   #F8FAFC and Blue Tint bands; Link Blue #00799E links; DM Sans headings. */
.pfp-page a { color: var(--link-pfp); }
.pfp-page .btn { border-radius: 999px; }
.pfp-page .btn-primary { background: var(--cyber); color: var(--slate); }
.pfp-page .btn-primary:hover { background: var(--duotone); text-decoration: none; }
.pfp-logo-img { width: 280px; max-width: 100%; height: auto; }
.pfp-glance {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--cyber);
  border-radius: 12px;
  padding: 24px;
  margin-top: 26px;
}
.pfp-glance .fact-list li { background: var(--tint); }
.pfp-quote {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0;
}
.pfp-quote-attrib {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--slate-mid);
  margin: 14px 0 0;
}
.pfp-does { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pfp-does li {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--cyber);
  border-radius: 10px;
  padding: 16px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
}

/* Small utilities */
.mt-0 { margin-top: 0; }
.actions-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 1020px) {
  .journeys { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 14px 20px 20px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .main-nav a { display: flex; align-items: center; min-height: 44px; padding: 6px 4px; }
  .main-nav .btn { width: 100%; margin-top: 8px; }
  .header-inner { position: relative; }
  .site-header { position: sticky; }
  .report-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
  .toc-mobile { display: block; }
  .feature-essay, .current-project, .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .brand img { width: 200px; }
  .journeys, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  /* Phone pass (Direction v1, fix 8): no catalog stacks. Values and stats
     run in two columns; card lists run compact. */
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .values-grid li { padding: 16px 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 16px 14px; }
  .stat .s-figure { font-size: 1.5rem; }
  .stack-list { gap: 10px; }
  .stack-list .card { padding: 18px 18px; }
  .stack-list .card h3 { font-size: 1.2rem; }
  .feature-essay { gap: 18px; }
  .library-item { grid-template-columns: 1fr; padding: 18px 18px; }
  .fact-list li { padding: 10px 12px; }
  .hero-actions .btn { width: 100%; min-height: 52px; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .values-list li { grid-template-columns: 56px 1fr; }
  .filter-selects select { width: 100%; }
  .filter-selects { flex-direction: column; align-items: stretch; }
  .actions-row .btn { width: 100%; }
}
@media (max-width: 600px) {
  /* Hero on a phone: film behind the card, full screen height minus the
     header (Direction v1, page 5). */
  .hero { min-height: calc(100svh - 64px); padding: 180px 0 16px; }
  .hero-panel { padding: 24px; margin: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media .hero-video { display: none; }
  .hero-media.motion-started .hero-video { display: block; }
  .hero-media.motion-started .hero-still { visibility: hidden; }
}