/* =========================================================
   DeliverFund Policy Briefing — Color tokens from presentation
   ========================================================= */
:root {
  --navy-900: #0B1F38;        /* darkest navy (cover sidebar, dark slides) */
  --navy-800: #0E2A47;        /* primary dark fill */
  --navy-700: #1B355A;        /* card bg on dark */
  --navy-600: #1F3A5F;        /* bar chart navy */
  --blue-500: #5A7AA2;        /* medium blue */
  --blue-400: #7E9DC3;
  --gray-300: #C7C7C7;        /* gray bar */
  --gray-200: #DFDDD3;
  --cream-100: #F1ECDE;       /* off-white background */
  --cream-50:  #F7F3E8;
  --cream-line:#E2DCC9;
  --amber-600: #C58A2A;       /* section kickers (orange) */
  --amber-500: #D69A36;
  --amber-700: #8C5E14;       /* darkened amber: passes WCAG AA on cream + white */
  --red-600:   #C8102E;       /* brand red (logo brush) */
  --red-500:   #D81E36;
  --ink-900:   #111827;
  --ink-700:   #2A2F3A;
  --muted:     #6B6F76;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Source Code Pro', 'SFMono-Regular', Menlo, monospace;

  --max-w: 1200px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  background: rgba(11, 31, 56, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background .3s var(--ease);
}
.nav-brand { display:flex; align-items:center; }
.nav-logo { height: 34px; width: auto; }
.nav-links {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  padding: 0.25rem 0;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a.active {
  color: var(--amber-500);
}
.nav-links a.active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--amber-500);
  margin-top: 2px;
  border-radius: 1px;
}
.nav-links a:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
}
/* Skip-to-content link for keyboard users; visible only on focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber-500);
  color: var(--navy-900);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 0.5rem;
}
.nav-cta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--amber-500);
  color: var(--amber-500);
  border-radius: 4px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover { background: var(--amber-500); color: var(--navy-900); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

@media (max-width: 1240px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #07172B;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 var(--pad-x);
    gap: 0;
    max-height: 0;
    overflow: hidden;
    border-bottom: 0 solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    transition: max-height .3s var(--ease), padding .3s var(--ease), gap .3s var(--ease), border-width .3s var(--ease);
  }
  .nav.open .nav-links {
    max-height: 70vh;
    padding: 1.25rem var(--pad-x);
    gap: 0.9rem;
    border-bottom-width: 1px;
  }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
}

/* =========================================================
   HERO / COVER (horizontal-readable redesign)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--cream-100);
  overflow: hidden;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  /* Vertically center hero content so the section never shows a large
     band of empty cream below the CTAs on tall viewports. */
  justify-content: center;
}
/* On very short or narrow viewports, drop the forced viewport min-height so
   the hero doesn't push content too far down. */
@media (max-height: 640px), (max-width: 820px) {
  .hero { min-height: auto; }
}
.hero-sidebar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 56px;
  background: var(--navy-900);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0 2rem;
  z-index: 2;
  gap: 1.25rem;
}
.hero-brand {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: #fff;
}
.hero-byline-block {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.hero-byline-row {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-byline-row .dot { color: var(--red-500); writing-mode: horizontal-tb; transform: rotate(180deg); display: inline-block; }

.hero-map {
  position: absolute;
  inset: 60px 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem 5% 0 0;
  z-index: 0;
  pointer-events: none;
}
.hero-map canvas {
  width: min(60%, 700px);
  height: auto;
  opacity: 0.85;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 5rem clamp(1.5rem, 4vw, 4rem);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: clamp(0.5rem, 1.2vh, 1rem);
}
.hero-bracket-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--ink-900);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 0.1rem;
}
.hero-bracket-text .reg-mark {
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  color: var(--red-600);
}
.hero-bracket-text .accent { color: var(--red-600); }
.hero-logo-link {
  display: block;
  transition: transform .25s var(--ease);
  flex-shrink: 0;
}
.hero-logo-link:hover { transform: scale(1.04); }
.hero-logo {
  width: clamp(64px, 6.5vw, 96px);
  height: auto;
}

.hero-body { max-width: 880px; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.hero-eyebrow-line {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: var(--red-600);
}
.hero-eyebrow-text {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--ink-700);
  font-weight: 600;
}
.hero-title {
  margin: 0 0 1.5rem;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.hero-title .brand-red { color: var(--red-600); }
.hero-sub {
  max-width: 640px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 2.2rem;
}
.hide-sm { display: inline; }
@media (max-width: 600px) { .hide-sm { display: none; } }

.hero-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--red-600); transform: translateY(-1px); }
.btn-ghost { color: var(--navy-900); border-color: var(--navy-900); }
.btn-ghost:hover { background: var(--navy-900); color: #fff; }

.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  z-index: 3;
}
.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--red-600), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(0.6); transform-origin: top; }
}

@media (max-width: 700px) {
  .hero-sidebar { display: none; }
  .hero-map { inset: 60px 0 auto 0; padding: 0; justify-content: center; opacity: 0.5; }
  .hero-map canvas { width: 90%; }
  .hero-inner { padding: 1.5rem 1.25rem 3rem; }
  .hero-top { margin-bottom: 2.5rem; }
  .hero-logo { width: 64px; }
  .hero-scroll { bottom: 1rem; }
}

/* =========================================================
   OVERVIEW (dark)
   ========================================================= */
.overview {
  background: var(--navy-900);
  color: #fff;
  /* Viewport-aware vertical padding so the section breathes on tall screens
     and compresses gracefully on short laptops. */
  padding: clamp(2.25rem, 5.5vh, 4rem) 0 clamp(1.5rem, 4vh, 2.75rem);
  position: relative;
  overflow: hidden;
  /* Match .slide so the kicker isn't clipped behind the fixed nav on jump. */
  scroll-margin-top: 80px;
}
.overview::before, .overview::after {
  content: "";
  position: absolute;
  width: 8rem; height: 8rem;
  opacity: 0.25;
  background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 14px 14px;
}
.overview::before { top: 5rem; right: 5rem; }
.overview::after  { bottom: 4rem; left: 4rem; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--amber-700); /* WCAG AA on cream (4.7:1) */
  margin-bottom: 1rem;
}
.kicker.light { color: var(--amber-500); }
.accent-amber { color: var(--amber-500) !important; }
.accent-cream { color: var(--cream-100) !important; }

.display-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 1.5rem;
}
.title-underline {
  width: 90px;
  height: 3px;
  background: #fff;
  margin: 0 0 3rem;
}
.title-underline.accent-amber { background: var(--amber-500); }

.toc { display: flex; flex-direction: column; gap: 0.4rem; counter-reset: toc; max-width: 980px; list-style: none; margin: 0; padding: 0; }
.toc li { list-style: none; }
.toc li a {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) minmax(40px, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: padding .2s var(--ease), color .2s var(--ease);
}
.toc li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.08); }
.toc li a:hover { padding-left: 0.6rem; color: var(--amber-500); }
.toc-num {
  font-weight: 800;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.toc-text { display: flex; flex-direction: column; gap: 0.25rem; }
.toc-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.toc-sub { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-weight: 400; letter-spacing: 0.01em; text-transform: none; }
.toc-dots { border-bottom: 1px dotted rgba(255,255,255,0.3); height: 1px; align-self: end; margin-bottom: 0.4rem; }
.toc-page { color: rgba(255,255,255,0.55); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .toc li a {
    grid-template-columns: 40px minmax(0,1fr) auto;
    gap: 1rem;
  }
  .toc-dots { display: none; }
  .toc-num { font-size: 1.1rem; }
}

/* =========================================================
   SLIDE COMMON
   ========================================================= */
.slide {
  /* Viewport-aware vertical padding: scales with screen height so adjacent
     sections always have visible breathing room without bleeding together,
     regardless of viewport size (laptop, desktop, large monitor, phone). */
  padding: clamp(2.25rem, 6vh, 4.5rem) 0 clamp(2rem, 5vh, 3.75rem);
  position: relative;
  /* Nav is 65px sticky; pad scroll anchor so kicker isn't clipped */
  scroll-margin-top: 80px;
}

/* Visibility Gap: use the same generous viewport-aware padding as the rest
   of the slides so the boundary with the next section is visible. */
#visibility-gap { padding: clamp(2.25rem, 6vh, 4.5rem) 0 clamp(2rem, 5vh, 3.75rem); }
#visibility-gap .kicker { margin-bottom: 0.5rem; }
#visibility-gap .slide-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1rem; line-height: 1.15; }
#visibility-gap .chart-card { padding: 1rem 1.25rem; }
#visibility-gap .chart-card figcaption { margin-bottom: 0.6rem; gap: 0.2rem; }
#visibility-gap .chart-card figcaption strong { font-size: 0.98rem; }
#visibility-gap .chart-sub { font-size: 0.78rem; }
#visibility-gap .log-chart { height: 230px; padding: 4px 0 46px 64px; }
#visibility-gap .log-grid { top: 4px; bottom: 46px; left: 64px; }
#visibility-gap .log-line::before { left: -62px; width: 56px; font-size: 0.68rem; }
#visibility-gap .chart-footnote { margin-top: 0.5rem; font-size: 0.68rem; }
#visibility-gap .source { margin-top: 1rem; font-size: 0.75rem; }
#visibility-gap .bullets { gap: 0.7rem; }
#visibility-gap .bullets li { font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 880px) {
  #visibility-gap { padding: 1.5625rem 0 1.25rem; }
  /* Add top padding so the above-bar value label (used at mobile because
     bars are too narrow to hold the wide "1,091,000" label inside) has
     clearance from the chart top edge. */
  #visibility-gap .log-chart { height: 260px; padding-top: 22px; }
  #visibility-gap .log-grid { top: 22px; }
  #visibility-gap .slide-title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  #visibility-gap .log-bar-value { font-size: 0.78rem; padding-bottom: 4px; }
}
.slide.light-slide { background: var(--cream-100); color: var(--ink-900); }
.slide.dark-slide  { background: var(--navy-900); color: #fff; }

/* Alternate light slides between two clearly distinct cream tones so adjacent
   sections never bleed together at any viewport size. The tones are far enough
   apart to read instantly on laptop displays, while staying within the warm
   palette so white chart-cards still pop against either tone. */
.slide.light-slide:nth-of-type(odd)  { background: #F5EFDE; } /* warm cream */
.slide.light-slide:nth-of-type(even) { background: #D9CFAE; } /* noticeably deeper warm cream */

/* Full-width divider strip strengthens the boundary between any two
   consecutive light slides. Edge-to-edge keeps the seam unambiguous at
   every viewport size. */
.slide.light-slide + .slide.light-slide {
  position: relative;
}
.slide.light-slide + .slide.light-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,0.10);
  pointer-events: none;
}

.slide-title {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 2.5rem;
  max-width: 1000px;
}
.slide-title.light { color: #fff; }
.lead {
  font-size: 1rem;
  color: var(--ink-700); /* WCAG AA on cream (~10:1) */
  margin: -1.5rem 0 2.5rem;
  max-width: 900px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; }
}

/* Split layout: title constrained to left column width, figure top-aligned with title */
.split-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "title figure"
    "bullets figure";
  row-gap: 1.25rem;
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split-layout > .slide-title {
  grid-area: title;
  margin: 0;
  max-width: 100%;
}
.split-layout > .bullets,
.split-layout > ul.bullets {
  grid-area: bullets;
}
.split-layout > .chart-card,
.split-layout > .stat-stack,
.split-layout > .pillar-stack,
.split-layout > figure {
  grid-area: figure;
  align-self: start;
}
@media (max-width: 880px) {
  .split-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "bullets"
      "figure";
  }
}

.bullets { display: flex; flex-direction: column; gap: 1.1rem; max-width: 540px; }
.bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 8px; height: 8px;
  background: var(--navy-800);
}
.bullets.light li { color: rgba(255,255,255,0.86); }
.bullets.light li::before { background: var(--amber-500); }

.source {
  margin: 3rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-700); /* WCAG AA on cream */
  letter-spacing: 0.01em;
}
.source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.source a:hover { color: var(--amber-600); }

.slide-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cream-line);
  font-size: 0.8rem;
  color: var(--muted);
}
.slide-footer .brand { font-weight: 700; color: var(--ink-700); }
.dark-slide .slide-footer { border-color: rgba(255,255,255,0.1); }
.dark-slide .slide-footer .brand { color: rgba(255,255,255,0.9); }

/* =========================================================
   LOG CHART (Visibility Gap)
   ========================================================= */
.chart-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.chart-card figcaption { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.5rem; }
.chart-card figcaption strong { font-size: 1.05rem; color: var(--ink-900); font-weight: 700; }
.chart-sub { font-size: 0.85rem; color: var(--muted); }
.chart-footnote { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; }

.log-chart {
  position: relative;
  height: 360px;
  padding: 10px 0 60px 70px;
}
.log-grid {
  position: absolute;
  top: 10px;
  bottom: 60px;
  left: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.log-line {
  position: relative;
  border-top: 1px dotted #D5D2C5;
  font-size: 0.72rem;
  color: var(--muted);
  height: 1px;
}
.log-line::before {
  content: attr(data-label);
  position: absolute;
  left: -68px;
  top: -8px;
  font-variant-numeric: tabular-nums;
  width: 60px;
  text-align: right;
}
.log-bars {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.log-bar {
  position: relative;
  height: 100%;
}
.log-bar-fill {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 75%;
  max-width: 90px;
  height: 0;
  transition: height 1.2s var(--ease);
}
.bar-navy { background: var(--navy-800); }
.bar-gray { background: var(--gray-300); }
/* Value labels: inside the bar (top of fill) for navy bars (white text),
   above the bar for gray bars (dark text). Eliminates the collision
   where the tallest bar (1,091,000) bled into the figcaption. */
.log-bar-value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: bottom 1.2s var(--ease);
  padding-bottom: 6px;
  z-index: 2; /* paint over .log-bar-fill (which is absolutely positioned without z-index) */
}
/* For the two navy bars (tallest values), render the label INSIDE the bar
   so it never escapes the chart top edge. */
.log-bar.label-inside .log-bar-value {
  color: #fff;
  padding-bottom: 0;
  padding-top: 8px;
  font-size: 0.85rem;
  /* bottom set inline by JS to fill-height minus inset; see script.js */
}
/* Widen the navy bars slightly so inside labels never spill over edges */
.log-bar.label-inside .log-bar-fill { width: 88%; max-width: 110px; }
.log-bar-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -48px;
  font-size: 0.8rem;
  color: var(--ink-700);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

/* =========================================================
   STAT CARDS (Structural)
   ========================================================= */
.stat-stack { display: flex; flex-direction: column; gap: 1rem; }
.stat-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(11,31,56,0.25);
}
.stat-number {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-caption {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.4;
}

/* =========================================================
   PILLAR CARDS (Our Role)
   ========================================================= */
.pillar-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.pillar-card {
  display: block;
  background: var(--navy-900);
  color: #fff;
  padding: 1.75rem 1.75rem 1.75rem 1.75rem;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.pillar-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--red-600);
}
.pillar-card:hover { transform: translateX(4px); background: var(--navy-800); }
.pillar-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--amber-500);
  margin-bottom: 0.75rem;
}
.pillar-title { margin: 0 0 0.6rem; font-size: 1.4rem; font-weight: 700; }
.pillar-desc { margin: 0; color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.pillar-arrow {
  position: absolute;
  right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  color: var(--amber-500);
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.pillar-card:hover .pillar-arrow { opacity: 1; transform: translateY(-50%) translateX(4px); }

/* =========================================================
   BURNER BAR (Pillar 1)
   ========================================================= */
.burner-card { margin-bottom: 2.5rem; }
.burner-bar {
  display: flex;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0 0.75rem;
}
.burner-seg {
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  transition: width 1.2s var(--ease);
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .burner-seg { font-size: 0.85rem; }
  .burner-seg.seg-3 { font-size: 0.72rem; }
}
.burner-seg.in-view { width: var(--w); }
.seg-1 { background: var(--navy-800); }
.seg-2 { background: var(--blue-500); }
.seg-3 { background: var(--gray-300); color: var(--ink-900); }
.burner-labels {
  display: flex;
  gap: 2px;
}
.burner-label {
  width: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-700);
  padding: 0.5rem 0.25rem 0;
  line-height: 1.4;
  transition: width 1.2s var(--ease);
}
.burner-label.in-view { width: var(--w); }

/* =========================================================
   POLICY CALLOUT
   ========================================================= */
.policy-callout {
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.policy-callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--amber-500);
}
.callout-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--amber-500);
  margin-bottom: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.policy-callout p { margin: 0; font-size: 1.05rem; line-height: 1.55; }

/* =========================================================
   DECONFLICTION (Pillar 2)
   ========================================================= */
.deconfliction-card { margin-bottom: 2.5rem; }
.deconf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
}
@media (max-width: 800px) {
  .deconf-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.deconf-subhead {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 1rem;
}
.hbar-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.hbar-label {
  font-size: 0.78rem;
  color: var(--ink-700);
  line-height: 1.3;
  text-align: right;
}
.hbar {
  height: 22px;
  background: var(--cream-50);
  border-radius: 2px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  width: 0;
  transition: width 1.2s var(--ease);
}
.hbar-fill.in-view { width: var(--w); }
.hbar-navy { background: var(--navy-800); }
.hbar-blue { background: var(--blue-500); }
.hbar-gray { background: var(--gray-300); }
.hbar-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  font-size: 0.95rem;
}
.deconf-big {
  font-size: clamp(2.8rem, 6vw, 3.8rem);
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.75rem;
}
.deconf-big-caption {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-900);
  line-height: 1.4;
}
.deconf-foot {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   ACTIONS
   ========================================================= */
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 720px) {
  .action-grid { grid-template-columns: 1fr; }
}
.action-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.85rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(11,31,56,0.3);
}
/* P7: darker amber for WCAG AA */
.action-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--amber-700);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.action-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--ink-900);
}
.action-card p { margin: 0; color: var(--ink-700); line-height: 1.6; }

.together-banner {
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}
.together-banner p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* =========================================================
   ASK
   ========================================================= */
.ask-list { display: flex; flex-direction: column; }
.ask-row {
  display: grid;
  grid-template-columns: 80px minmax(220px, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--cream-line);
  transition: background .2s var(--ease);
}
.ask-row:first-child { border-top: 1px solid var(--cream-line); }
.ask-row:hover { background: rgba(213, 154, 54, 0.05); }
.ask-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--amber-600);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ask-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--ink-900);
}
.ask-body { margin: 0; color: var(--ink-700); line-height: 1.6; padding-top: 0.25rem; }
@media (max-width: 800px) {
  .ask-row { grid-template-columns: 60px 1fr; }
  .ask-body { grid-column: 1 / -1; }
}

/* =========================================================
   SUMMARY contact
   ========================================================= */
.divider-light { border: 0; border-top: 1px solid rgba(255,255,255,0.15); margin: 3rem 0 2rem; }
.contact-block { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-org {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
  transition: color .2s var(--ease);
}
.contact-org:hover { color: var(--amber-500); }
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  align-items: center;
}
.contact-name { font-weight: 600; color: #fff; }
.contact-dot { color: rgba(255,255,255,0.4); }
.contact-row a {
  color: var(--amber-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.contact-row a:hover { color: #fff; }

/* =========================================================
   MISSION SLIDE
   ========================================================= */
.mission-slide { background: #FBF8F0; }
.mission-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-800);
  max-width: 880px;
  margin: 1.25rem 0 2.75rem;
}
.mission-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1rem 0 2.5rem;
}
@media (max-width: 800px) {
  .mission-pillars { grid-template-columns: 1fr; gap: 1rem; }
}
.mission-pillar {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mission-pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11, 31, 56, 0.08);
}
.mission-icon {
  width: 48px;
  height: 48px;
  color: var(--red-600);
  margin-bottom: 1rem;
}
.mission-icon svg { width: 100%; height: 100%; display: block; }
.mission-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 0.6rem;
}
.mission-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.mission-tagline {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--red-600);
  text-align: center;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-line);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #06182C;
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
/* Footer logo sized so the embedded "DELIVERFUND" wordmark visually matches
   the width of the "Tech That Protects" tagline (~193px text width).
   Wordmark occupies ~91% of the 800x800 PNG width, so 212px image width
   yields ~193px wordmark width. Negative margin offsets the PNG's internal
   left whitespace so the wordmark aligns flush left with the tagline. */
.footer-logo { height: 212px; width: 212px; margin: 0 0 0.5rem -8px; display: block; }
.footer-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--amber-500);
  margin: 0;
}
.footer-reg {
  font-size: 0.6em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
}
.footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
  font-weight: 700;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a {
  color: rgba(255,255,255,0.65);
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--amber-500); }
.footer-legal {
  padding-top: 1.75rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.footer-legal p { margin: 0 0 0.5rem; }
.footer-fine { font-size: 0.75rem; color: rgba(255,255,255,0.65); line-height: 1.55; }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   QA FIX PASS — viewport-targeted compression for laptop fold
   (Applied after audit at 1366x768. Goal: as many sections
   above the fold as content allows, without crushing typography.)
   ========================================================= */
@media (max-width: 1366px) {
  /* P1: shrink hero so CTAs are visible above the fold */
  .hero-title { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; }
  .hero-sub { font-size: clamp(0.95rem, 1.1vw, 1.05rem); margin-bottom: 1.4rem; }
  .hero-inner { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .hero-top { margin-bottom: 1.25rem; }
  .hero-eyebrow { margin-bottom: 0.9rem; }
  .hero-logo { width: clamp(64px, 7vw, 96px); }

  /* P5: global slide padding compression on laptop viewports (viewport-aware) */
  .slide { padding: clamp(1.5rem, 3.75vh, 2.5rem) 0 clamp(1.25rem, 3.25vh, 2.25rem); }
  .slide-title { margin-bottom: 1.5rem; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
  .lead { margin: -0.75rem 0 1.5rem; }
  .source { margin-top: 1.5rem; }

  /* P11: overview heading shrink */
  .overview .display-title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); margin-bottom: 1rem; }
  .overview .title-underline { margin-bottom: 1.5rem; }
  .toc li a { padding: 0.65rem 0; }
  .toc-title { font-size: 0.92rem; }
  .toc-sub { font-size: 0.78rem; }
  .toc-num { font-size: 1.2rem; }

  /* P6a: pillar-2 inherits the same viewport-aware slide padding so the
     boundary with neighboring sections is visible at any viewport size. */
  #pillar-2 { padding: clamp(1.5rem, 3.75vh, 2.5rem) 0 clamp(1.25rem, 3.25vh, 2.25rem); }
  #pillar-2 .slide-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 1rem; }
  #pillar-2 .chart-card { padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
  #pillar-2 .chart-card figcaption { margin-bottom: 1rem; }
  #pillar-2 .deconf-big { font-size: clamp(1.85rem, 3.2vw, 2.4rem) !important; line-height: 1.05; }
  #pillar-2 .deconf-big-caption { font-size: 0.78rem; margin-top: 0.4rem; }
  #pillar-2 .deconf-grid { gap: 2rem; }
  #pillar-2 .policy-callout { padding: 1.25rem 1.4rem; }
  #pillar-2 .source { margin-top: 1rem; font-size: 0.78rem; }
  #pillar-2 .bullets { gap: 0.75rem; }
  #pillar-2 .bullets li { font-size: 0.95rem; line-height: 1.5; }

  /* P6b: actions tighter */
  #actions .together-banner { padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
  #actions .action-card { padding: 1.5rem 1.6rem; }
  #actions .action-number { font-size: 2.4rem; margin-bottom: 0.4rem; }
  #actions .action-title { font-size: 1.05rem; }

  /* Mission tighter */
  #mission .lead { margin-bottom: 1.25rem; }

  /* Bullets a touch tighter on laptops */
  .bullets { gap: 0.9rem; }
  .bullets li { line-height: 1.55; }
}

/* Even tighter on the smallest standard laptops (1280x800, 1024x768) */
@media (max-width: 1300px) {
  .slide { padding: clamp(1.5rem, 3.5vh, 2.5rem) 0 clamp(1.25rem, 3vh, 2.25rem); }
  .hero-title { font-size: clamp(2rem, 4.2vw, 3.6rem); }
  .hero-inner { padding-bottom: 1.5rem; }
}

/* Mobile-only fixes */
@media (max-width: 480px) {
  /* P10: hero eyebrow stops wrapping */
  .hero-eyebrow-text { letter-spacing: 0.12em; font-size: 0.7rem; }
  /* Hero title at narrowest phones */
  .hero-title { font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.1; }
  /* P9: at narrow phones the 13% segment is too thin to hold "Attributable
     to an identity" without hyphenating mid-word. Stack labels vertically
     under the bar instead of horizontally to the segment widths. */
  .burner-labels {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0 0;
  }
  .burner-label {
    width: 100% !important;
    font-size: 0.78rem !important;
    line-height: 1.4;
    padding: 0;
    text-align: left;
    white-space: normal;
    word-break: normal;
    hyphens: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .burner-label::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 10px;
    background: var(--seg-color, var(--navy-800));
  }
  .burner-label:nth-child(1)::before { background: var(--navy-800); }
  .burner-label:nth-child(2)::before { background: #5072A0; }
  .burner-label:nth-child(3)::before { background: var(--gray-300); }
  /* The in-bar 13.0% can't fit in a 44px-wide segment; show pct only via
     prepended text in stacked labels. */
  .burner-bar .seg-pct { font-size: 0.78rem; }
  .burner-seg.seg-3 .seg-pct { display: none; }
  /* Prepend pct via data attribute so each stacked label shows its share */
  .burner-label::after {
    content: attr(data-pct);
    margin-left: auto;
    font-weight: 700;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
  }
  /* Smaller chart bar labels at narrow viewports so they don't collide */
  .log-bar-label { font-size: 0.62rem; line-height: 1.25; white-space: normal; max-width: 80px; }
  /* Source becomes a small block on phones */
  .source { font-size: 0.78rem; }
}

/* =========================================================
   QA P2/P3 POLISH PASS
   ========================================================= */

/* Mobile hero orphan prevention: keep "ANTI-TRAFFICKING POLICY" together
   on the last line at the narrowest phones so "POLICY" never lands alone. */
.hero-title .nowrap-phrase { white-space: nowrap; }
@media (max-width: 380px) {
  /* On the narrowest phones, drop the nowrap so the phrase can break on
     the hyphen instead of overflowing the viewport. */
  .hero-title .nowrap-phrase { white-space: normal; }
}

/* Tall-display hero: extend the dot-map background so it covers the
   upper third of the hero on very tall viewports instead of sticking to
   a narrow band at the very top. */
@media (min-height: 1100px) {
  .hero-map { inset: 60px 0 50% 0; }
  .hero-map canvas { width: min(60%, 780px); }
}

/* Visibility Gap chart: keep a few px of breathing room above the
   "1,091,000" label inside the tallest bar so it never rides flush
   against the bar's top edge. */
.log-bar.label-inside .log-bar-value { padding-top: 10px; }

/* Pillar 1 burner chart: shrink the in-bar percentage label for the
   narrow third segment at intermediate widths so "13.0%" never feels
   cramped against the bar edges. The pre-existing ≤600px override
   keeps mobile readable; this fills the laptop gap. */
@media (min-width: 601px) and (max-width: 1100px) {
  .burner-seg.seg-3 { font-size: 0.9rem; }
}
/* Keep the three burner labels under the bar at roughly equal heights
   so the seg-3 label "Attributable to an identity" doesn't read shorter
   than the others; clamping min-height aligns the row visually. */
@media (min-width: 601px) {
  .burner-label { min-height: 2.6em; }
}

/* Pillar 2 deconfliction chart: widen the left label column at desktop
   so labels like "States with multiple state-level task forces" wrap to
   2 lines instead of 3, matching the other rows. */
@media (min-width: 1024px) {
  .hbar-row { grid-template-columns: 180px minmax(0, 1fr) auto; }
}
@media (min-width: 1400px) {
  .hbar-row { grid-template-columns: 220px minmax(0, 1fr) auto; }
}
/* Pillar 2 deconfliction chart on mobile: extra horizontal padding between
   the bar end and the numeric label so the value never sits flush against
   the fill. */
@media (max-width: 600px) {
  .hbar-row { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 0.6rem; }
  .hbar-value { padding-left: 0.25rem; }
  .hbar-label { font-size: 0.72rem; }
}

/* DETECT/DISRUPT/DEFEND mission cards: pin icons to the top-left so they
   align across all three cards regardless of body-text length variations. */
.mission-pillar { display: flex; flex-direction: column; align-items: flex-start; }
.mission-icon { margin-top: 0; }

/* Overview TOC: ensure the right-side page numbers (05/06/07/08/09) stay
   at full readable contrast independent of any reveal opacity on the row.
   The .toc-num column is already strong; this lifts the trailing .toc-page
   numbers to the same level. */
.toc-page { color: rgba(255,255,255,0.85); font-weight: 700; }

/* Footer: at the widest desktop viewports, constrain the inner grid so the
   logo column doesn't get marooned 1/6 of the way across a 1920px footer
   while the link columns hog the rest. Keeps logo and tagline visually
   tied at every viewport size. */
@media (min-width: 1600px) {
  .site-footer .container { max-width: 1400px; }
}
/* Footer: tighten the gap between the wordmark PNG and the "Tech That
   Protects®" tagline so they read as one block at desktop. */
.footer-logo { margin-bottom: -0.5rem; }
.footer-tag { margin-top: 0; }
/* Mobile footer: scale the logo down so the full headset arc is visible
   inside the footer block (the 212px logo crops at the top on small phones
   when the footer-grid stacks). */
@media (max-width: 480px) {
  .footer-logo { height: 160px; width: 160px; margin: 0 0 0.25rem -6px; }
}