/* ---------- shared ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p, ul { margin-top: 0; }
ul { padding-left: 1.1em; }
li { margin-bottom: .45em; }
.wrap { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.measure { max-width: 640px; }
.sec { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 760px) { .sec { padding-top: 56px; padding-bottom: 56px; } }
:focus-visible { outline: 3px solid #E8B84A; outline-offset: 3px; }

/* switcher (review scaffolding, neutral) */
#switcher { position: sticky; top: 0; z-index: 100; display: flex; justify-content: center; align-items: stretch; background: #1a1a1a; border-bottom: 3px solid #000; }
#switcher button { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: #9a9a92; background: transparent; border: none; padding-top: 14px; padding-bottom: 14px; padding-left: 22px; padding-right: 22px; cursor: pointer; border-right: 1px solid #333; }
#switcher button:last-of-type { border-right: none; }
#switcher button.active { color: #fff; background: #333; }
#switcher .note { color: #6a6a62; font-size: 11px; font-family: 'IBM Plex Mono', monospace; padding-top: 14px; padding-bottom: 14px; padding-left: 16px; padding-right: 16px; }
@media (max-width: 700px) { #switcher { flex-wrap: wrap; } #switcher .note { width: 100%; text-align: center; padding-top: 6px; padding-bottom: 6px; } }
.panel { display: none; scroll-margin-top: var(--switcher-h, 50px); }
.panel section[id] { scroll-margin-top: calc(var(--switcher-h, 50px) + 64px); }
.panel.active { display: block; }

/* header + nav (shared skeleton, styled per direction) */
.panel header { position: sticky; top: var(--switcher-h, 50px); z-index: 50; }
.hdr { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.wordmark { text-decoration: none; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; padding-top: 10px; padding-bottom: 10px; display: inline-block; }
.nav-toggle { display: none; background: none; border: 1px solid currentColor; border-radius: 4px; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 24px 20px; }
  .js .nav.open { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a { display: block; padding-top: 12px; padding-bottom: 12px; font-size: 17px; }
}

/* forms */
.form { display: grid; gap: 14px; }
.form label { display: block; font-size: 14px; margin-bottom: 6px; }
.form input, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 4px; }
.form textarea { min-height: 140px; resize: vertical; }
.form button { font: inherit; font-size: 16px; font-weight: 600; padding: 14px 22px; border-radius: 4px; cursor: pointer; min-height: 48px; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 4px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ======================================================
   A · The record  (Public Sans, cool ground, ledger)
   ====================================================== */
#dir-old { font-family: 'Public Sans', sans-serif; color: #2B3946; background: #F5F7FA; font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; }
#dir-old h1, #dir-old h2, #dir-old h3 { color: #14202B; font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
#dir-old h1 { font-size: clamp(34px, 4.6vw, 54px); }
#dir-old h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
#dir-old h3 { font-size: 19px; margin-bottom: 8px; }
#dir-old header { background: #F5F7FA; border-bottom: 1px solid #D3DBE4; }
#dir-old .wordmark { color: #14202B; }
#dir-old .nav a { color: #2B3946; }
#dir-old .nav a:hover { color: #1D4E89; text-decoration: underline; text-underline-offset: 4px; }
#dir-old .nav { background: #F5F7FA; }
#dir-old .a-hero { padding-top: 64px; padding-bottom: 64px; border-bottom: 1px solid #D3DBE4; }
#dir-old .a-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
#dir-old .a-hero p.lede { font-size: 20px; max-width: 520px; }
#dir-old .a-hero .btn { background: #1D4E89; color: #fff; }
#dir-old .a-hero .btn:hover { background: #163C6B; }
#dir-old .a-hero .btn + .btn { background: transparent; color: #1D4E89; border: 1px solid #1D4E89; margin-left: 10px; }
#dir-old .a-hero .btn + .btn:hover { background: #E4ECF6; }
#dir-old .chart { background: #fff; border: 1px solid #D3DBE4; border-radius: 6px; padding: 22px 22px 14px; }
#dir-old .chart h3 { font-size: 15px; font-weight: 500; color: #2B3946; margin-bottom: 14px; }
#dir-old .chart svg { width: 100%; height: auto; display: block; }
#dir-old .chart .cap { font-size: 13px; color: #5B6B7A; margin: 10px 0 0; }
#dir-old .bar { transition: height 900ms cubic-bezier(.2,.7,.2,1), y 900ms cubic-bezier(.2,.7,.2,1); }
#dir-old .bar.treated { height: 216px; y: 44px; }
#dir-old.played .bar.treated { height: 12px; y: 248px; }
#dir-old .chart .lbl-treated { opacity: 0; transition: opacity 300ms 800ms; }
#dir-old.played .chart .lbl-treated { opacity: 1; }
#dir-old .ledger { background: #fff; border-top: 3px solid #14202B; }
#dir-old .ledger dl { display: grid; grid-template-columns: 1fr; margin: 0; border-bottom: 1px solid #D3DBE4; }
#dir-old .ledger .row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid #D3DBE4; }
#dir-old .ledger dt { font-size: 14px; color: #5B6B7A; font-weight: 500; }
#dir-old .ledger dd { margin: 0; color: #14202B; font-size: 18px; }
#dir-old .ledger dd small { display: block; font-size: 14px; color: #5B6B7A; margin-top: 4px; }
#dir-old .ledger .src { font-size: 13px; color: #5B6B7A; margin: 16px 0 0; }
#dir-old .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
#dir-old .photo { border-radius: 6px; overflow: hidden; }
#dir-old .photo figcaption { font-size: 13px; color: #5B6B7A; margin-top: 8px; }
#dir-old .list-plain { list-style: none; padding: 0; }
#dir-old .list-plain li { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid #D3DBE4; margin: 0; }
#dir-old .list-plain li:last-child { border-bottom: 1px solid #D3DBE4; }
#dir-old .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#dir-old .quote { background: #fff; border: 1px solid #D3DBE4; border-radius: 6px; padding: 28px 32px; }
#dir-old .quote p { font-size: 22px; color: #14202B; margin-bottom: 10px; line-height: 1.35; }
#dir-old .quote cite { font-style: normal; font-size: 14px; color: #5B6B7A; }
#dir-old .tech { background: #fff; border-top: 1px solid #D3DBE4; border-bottom: 1px solid #D3DBE4; }
#dir-old .tech .items { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
#dir-old .tech p { font-size: 16px; }
#dir-old .tech .note { font-size: 14px; color: #5B6B7A; margin-top: 28px; }
#dir-old .team .three h3 { font-size: 18px; }
#dir-old .team p { font-size: 16px; }
#dir-old .contact { background: #14202B; color: #C9D3DD; }
#dir-old .contact h2 { color: #fff; }
#dir-old .contact .form input, #dir-old .contact .form textarea { background: #fff; border: 1px solid #D3DBE4; color: #14202B; }
#dir-old .contact .form button { background: #E8B84A; color: #14202B; border: none; }
#dir-old .contact .form button:hover { background: #F2C963; }
#dir-old .contact .form label { color: #C9D3DD; }
#dir-old footer { background: #0F2437; color: #8FA3B8; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-old footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  #dir-old .a-hero .wrap, #dir-old .two, #dir-old .tech .items { grid-template-columns: 1fr; gap: 32px; }
  #dir-old .three { grid-template-columns: 1fr; gap: 24px; }
  #dir-old .ledger .row { grid-template-columns: 1fr; gap: 4px; }
}

/* ======================================================
   B · Three readers  (Source Serif 4 / Source Sans 3, valley tan)
   ====================================================== */
#dir-a { font-family: 'Source Sans 3', sans-serif; color: #33302A; background: #F4EFE6; font-size: 18px; line-height: 1.6; }
#dir-a h1, #dir-a h2, #dir-a h3 { font-family: 'Source Serif 4', serif; color: #24211B; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
#dir-a h1 { font-size: clamp(36px, 5.2vw, 62px); }
#dir-a h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 20px; }
#dir-a h3 { font-size: 24px; margin-bottom: 10px; }
#dir-a header { background: #F4EFE6; border-bottom: 1px solid #DDD3C2; }
#dir-a .wordmark { color: #24211B; font-family: 'Source Serif 4', serif; font-size: 22px; }
#dir-a .nav { background: #F4EFE6; }
#dir-a .nav a { color: #33302A; }
#dir-a .nav a:hover { color: #23527C; border-bottom: 2px solid #23527C; }
#dir-a .b-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
#dir-a .b-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
#dir-a .b-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,28,.82) 0%, rgba(20,24,28,.35) 45%, rgba(20,24,28,0) 75%); }
#dir-a .b-hero .wrap { position: relative; z-index: 1; padding-bottom: 56px; padding-top: 120px; }
#dir-a .b-hero h1 { color: #fff; max-width: 760px; margin-bottom: 14px; }
#dir-a .b-hero p { font-size: 20px; max-width: 640px; color: #EDE6D8; }
#dir-a .doors { background: #24211B; color: #EDE6D8; }
#dir-a .doors .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
#dir-a .door { display: block; text-decoration: none; color: inherit; padding-top: 28px; padding-bottom: 28px; padding-right: 28px; border-right: 1px solid #4A443A; opacity: 0; transform: translateY(18px); }
#dir-a .door:last-child { border-right: none; }
#dir-a .door + .door { padding-left: 28px; }
#dir-a.played .door { animation: b-settle 700ms cubic-bezier(.2,.7,.2,1) forwards; }
#dir-a.played .door:nth-child(2) { animation-delay: 90ms; }
#dir-a.played .door:nth-child(3) { animation-delay: 180ms; }
@keyframes b-settle { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #dir-a .door { opacity: 1; transform: none; } }
#dir-a .door span { display: block; font-size: 14px; color: #B9AE9A; margin-bottom: 6px; }
#dir-a .door strong { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 24px; color: #fff; display: block; line-height: 1.2; }
#dir-a .door:hover strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #E1B15C; }
#dir-a .reader { border-top: 1px solid #DDD3C2; }
#dir-a .reader .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
#dir-a .reader .who { position: sticky; top: calc(var(--switcher-h, 50px) + 80px); align-self: start; }
#dir-a .reader .who span { font-size: 15px; color: #7A7062; display: block; margin-bottom: 8px; }
#dir-a .reader .who h2 { margin-bottom: 8px; }
#dir-a .qa dt { font-family: 'Source Serif 4', serif; font-size: 22px; color: #24211B; margin-bottom: 6px; }
#dir-a .qa dd { margin: 0 0 28px; max-width: 640px; }
#dir-a .qa dd:last-child { margin-bottom: 0; }
#dir-a .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
#dir-a .fact { border-top: 2px solid #B5772F; padding-top: 14px; }
#dir-a .fact strong { font-family: 'Source Serif 4', serif; font-size: 34px; font-weight: 600; color: #24211B; display: block; line-height: 1.1; margin-bottom: 4px; }
#dir-a .fact span { font-size: 15px; color: #5C5448; }
#dir-a .photo { border-radius: 4px; overflow: hidden; margin-top: 28px; }
#dir-a .photo figcaption { font-size: 14px; color: #7A7062; margin-top: 8px; }
#dir-a .two-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#dir-a .quote { border-left: 4px solid #B5772F; padding-left: 22px; margin: 0; }
#dir-a .quote p { font-family: 'Source Serif 4', serif; font-size: 24px; line-height: 1.35; color: #24211B; margin-bottom: 8px; }
#dir-a .quote cite { font-style: normal; font-size: 15px; color: #7A7062; }
#dir-a .plain { background: #fff; }
#dir-a .plain .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
#dir-a .plain h3 { font-size: 21px; }
#dir-a .plain p, #dir-a .plain li { font-size: 17px; }
#dir-a .plain .note { font-size: 15px; color: #7A7062; }
#dir-a .team .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#dir-a .team h3 { font-size: 22px; }
#dir-a .team p { font-size: 17px; }
#dir-a .contact { background: #23527C; color: #DCE6F0; }
#dir-a .contact h2 { color: #fff; }
#dir-a .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
#dir-a .contact .form input, #dir-a .contact .form textarea { background: #fff; border: 1px solid #B9CBDD; color: #24211B; }
#dir-a .contact .form label { color: #DCE6F0; }
#dir-a .contact .form button { background: #E1B15C; color: #24211B; border: none; }
#dir-a .contact .form button:hover { background: #EBC276; }
#dir-a footer { background: #24211B; color: #B9AE9A; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-a footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  #dir-a .doors .wrap { grid-template-columns: 1fr; }
  #dir-a .door { border-right: none; border-bottom: 1px solid #4A443A; padding-right: 0; padding-top: 18px; padding-bottom: 18px; }
  #dir-a .door + .door { padding-left: 0; }
  #dir-a .door:last-child { border-bottom: none; }
  #dir-a .reader .wrap, #dir-a .plain .cols, #dir-a .contact .wrap, #dir-a .two-photo { grid-template-columns: 1fr; gap: 28px; }
  #dir-a .reader .who { position: static; }
  #dir-a .facts, #dir-a .team .three { grid-template-columns: 1fr; }
  #dir-a .b-hero { min-height: 70vh; }
}

/* ======================================================
   C · The district  (Bitter, deep-water hero, survey legend)
   ====================================================== */
#dir-b { font-family: 'Bitter', serif; color: #1E2A36; background: #FFFFFF; font-size: 17px; line-height: 1.65; font-variant-numeric: tabular-nums; }
#dir-b h1, #dir-b h2, #dir-b h3 { color: #0F2437; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
#dir-b h1 { font-size: clamp(34px, 4.8vw, 58px); color: #fff; }
#dir-b h2 { font-size: clamp(27px, 3.2vw, 38px); margin-bottom: 18px; }
#dir-b h3 { font-size: 20px; margin-bottom: 8px; }
#dir-b header { background: #0F2437; color: #fff; }
#dir-b .wordmark { color: #fff; }
#dir-b .nav { background: #0F2437; }
#dir-b .nav a { color: #C9D6E3; }
#dir-b .nav a:hover { color: #E8B84A; }
#dir-b .nav-toggle { color: #fff; }
#dir-b .c-hero { background: #0F2437; color: #C9D6E3; padding-top: 48px; padding-bottom: 0; }
#dir-b .c-hero .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; padding-bottom: 56px; }
#dir-b .c-hero p { font-size: 19px; max-width: 480px; }
#dir-b .c-hero .btn { background: #E8B84A; color: #0F2437; }
#dir-b .c-hero .btn:hover { background: #F2C963; }
#dir-b .map { width: 100%; height: auto; display: block; }
#dir-b .map .river { fill: none; stroke: #2E7BC4; stroke-width: 9; stroke-linecap: round; opacity: .9; }
#dir-b .map .hwy { fill: none; stroke: #E8B84A; stroke-width: 3.5; }
#dir-b .map .field { fill: #16324A; }
#dir-b .map .field.b { fill: #1B3B57; }
#dir-b .map .site { fill: #5FC0A0; stroke: #0F2437; stroke-width: 2; }
#dir-b .map .hub { fill: #E8B84A; stroke: #0F2437; stroke-width: 2; }
#dir-b .map .link { fill: none; stroke: #9FD5C2; stroke-width: 2; stroke-dasharray: 6 6; }
#dir-b .map .lbl { font-family: 'Bitter', serif; font-size: 14px; fill: #C9D6E3; }
#dir-b .map .lbl.hwy { fill: #E8B84A; font-size: 12px; }
#dir-b .map .draw { stroke-dasharray: 600; stroke-dashoffset: 600; }
#dir-b.played .map .draw { animation: c-draw 900ms ease-out forwards; }
#dir-b.played .map .draw:nth-of-type(2) { animation-delay: 80ms; }
#dir-b.played .map .draw:nth-of-type(3) { animation-delay: 160ms; }
#dir-b.played .map .draw:nth-of-type(4) { animation-delay: 240ms; }
#dir-b.played .map .draw:nth-of-type(5) { animation-delay: 320ms; }
@keyframes c-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #dir-b .map .draw { stroke-dashoffset: 0; } }
#dir-b .legend { border-top: 1px solid #2B4359; background: #0F2437; color: #C9D6E3; }
#dir-b .legend .wrap { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; font-size: 14px; }
#dir-b .legend span { display: inline-flex; align-items: center; gap: 8px; }
#dir-b .key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #5FC0A0; flex: none; }
#dir-b .key.hub { border-radius: 2px; background: #E8B84A; }
#dir-b .key.link { width: 26px; height: 0; border-top: 2px dashed #6FA3C7; border-radius: 0; background: none; }
#dir-b .keyed { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; }
#dir-b .keyed .key { margin-top: 12px; width: 18px; height: 18px; }
#dir-b .keyed .key.link { margin-top: 20px; width: 40px; }
#dir-b .sec.alt { background: #F2F6FA; }
#dir-b .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
#dir-b .photo { overflow: hidden; }
#dir-b .photo figcaption { font-size: 13px; color: #5B6B7A; margin-top: 8px; }
#dir-b .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
#dir-b .stat { border-top: 2px solid #0F2437; padding-top: 12px; }
#dir-b .stat strong { display: block; font-size: 34px; font-weight: 600; color: #0F2437; line-height: 1.1; margin-bottom: 4px; }
#dir-b .stat span { font-size: 14px; color: #5B6B7A; }
#dir-b .quote { background: #0F2437; color: #C9D6E3; padding: 32px 36px; }
#dir-b .quote p { font-size: 23px; color: #fff; line-height: 1.35; margin-bottom: 10px; }
#dir-b .quote cite { font-style: normal; font-size: 14px; }
#dir-b .tech .items { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
#dir-b .tech p, #dir-b .tech li { font-size: 16px; }
#dir-b .tech .note { font-size: 14px; color: #5B6B7A; margin-top: 28px; }
#dir-b .team .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#dir-b .team p { font-size: 16px; }
#dir-b .contact { background: #F2F6FA; border-top: 4px solid #E8B84A; }
#dir-b .contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
#dir-b .contact .form input, #dir-b .contact .form textarea { background: #fff; border: 1px solid #C5D1DD; color: #0F2437; }
#dir-b .contact .form button { background: #0F2437; color: #fff; border: none; }
#dir-b .contact .form button:hover { background: #1D4E89; }
#dir-b footer { background: #0F2437; color: #8FA3B8; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-b footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#dir-b .btn.dark { background: #0F2437; color: #fff; }
#dir-b .btn.dark:hover { background: #1D4E89; }
@media (max-width: 860px) {
  #dir-b .c-hero .wrap, #dir-b .cols, #dir-b .tech .items, #dir-b .contact .wrap { grid-template-columns: 1fr; gap: 28px; }
  #dir-b .stats { grid-template-columns: 1fr 1fr; }
  #dir-b .team .three { grid-template-columns: 1fr; }
  #dir-b .keyed { grid-template-columns: 36px 1fr; gap: 14px; }
}

/* ======================================================
   C · Why WellForward  (Atkinson Hyperlegible, warm white, comparison-led)
   ====================================================== */
#dir-c { font-family: 'Atkinson Hyperlegible', sans-serif; color: #1E2A36; background: #FBFAF6; font-size: 17px; line-height: 1.62; font-variant-numeric: tabular-nums; }
#dir-c h1, #dir-c h2, #dir-c h3 { color: #14202B; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
#dir-c h1 { font-size: clamp(32px, 4.4vw, 50px); }
#dir-c h1.big { font-size: clamp(30px, 4vw, 46px); font-weight: 400; max-width: 900px; }
#dir-c h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 18px; }
#dir-c h3 { font-size: 19px; margin-bottom: 8px; }
#dir-c header { background: #FBFAF6; border-bottom: 1px solid #E3DFD3; }
#dir-c .wordmark { color: #14202B; }
#dir-c .nav { background: #FBFAF6; }
#dir-c .nav a { color: #1E2A36; }
#dir-c .nav a:hover { color: #1D4E89; text-decoration: underline; text-underline-offset: 4px; }
#dir-c .hero-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; background: #EFEAE0; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6B655A; }
#dir-c .hero-pick button { font: inherit; background: #fff; border: 1px solid #D3CDBF; color: #3E3A32; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; border-radius: 3px; cursor: pointer; min-height: 32px; }
#dir-c .hero-pick button.active { background: #14202B; color: #fff; border-color: #14202B; }
#dir-c .hero-opt { display: none; }
#dir-c .hero-opt.active { display: block; }
#dir-c .c-hero { padding-top: 72px; padding-bottom: 72px; border-bottom: 1px solid #E3DFD3; }
#dir-c .c-hero .lede { font-size: 20px; max-width: 560px; }
#dir-c .c-hero .pre { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #6B655A; margin-bottom: 14px; }
#dir-c .c-hero .facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: #4A5560; margin-bottom: 22px; }
#dir-c .c-hero .facts span { border-left: 3px solid #2F7A4E; padding-left: 10px; }
#dir-c .btn { background: #1D4E89; color: #fff; }
#dir-c .btn:hover { background: #163C6B; }
#dir-c .btn.ghost { background: transparent; color: #1D4E89; border: 1px solid #1D4E89; }
#dir-c .btn.ghost:hover { background: #E4ECF6; }
#dir-c .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
#dir-c .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#dir-c .photo { border-radius: 4px; overflow: hidden; }
#dir-c .photo figcaption { font-size: 13px; color: #6B7580; margin-top: 8px; }
#dir-c .opt-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid #D3CDBF; border-radius: 6px; overflow: hidden; margin-top: 28px; margin-bottom: 28px; background: #fff; }
#dir-c .opt { padding: 20px 18px; border-right: 1px solid #E3DFD3; }
#dir-c .opt:last-child { border-right: none; }
#dir-c .opt strong { display: block; font-size: 16px; color: #14202B; margin-bottom: 6px; }
#dir-c .opt span { font-size: 14px; color: #4A5560; line-height: 1.5; }
#dir-c .opt.us { background: #EAF3EC; position: relative; }
#dir-c .opt.us strong { color: #1F5A38; }
#dir-c .opt.us::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #2F7A4E; transform: scaleX(0); transform-origin: left; transition: transform 800ms cubic-bezier(.2,.7,.2,1) 200ms; }
#dir-c.played .opt.us::before { transform: scaleX(1); }
#dir-c .h3 .big { display: inline; background-image: linear-gradient(#E8B84A, #E8B84A); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 100%; transition: background-size 900ms cubic-bezier(.2,.7,.2,1) 200ms; }
#dir-c.played .h3 .big { background-size: 100% 3px; }
#dir-c .tbl-scroll { overflow-x: auto; margin-top: 28px; }
#dir-c table.cmp { width: 100%; min-width: 820px; border-collapse: collapse; background: #fff; border: 1px solid #D3CDBF; font-size: 15px; }
#dir-c table.cmp th, #dir-c table.cmp td { text-align: left; vertical-align: top; padding: 14px 14px; border-bottom: 1px solid #E3DFD3; }
#dir-c table.cmp th { font-size: 13px; color: #6B655A; font-weight: 400; background: #F4F1EA; }
#dir-c table.cmp td strong { display: block; color: #14202B; }
#dir-c table.cmp td span { display: block; font-size: 13px; color: #1F5A38; margin-top: 3px; }
#dir-c table.cmp td.yes { color: #1F5A38; font-weight: 700; }
#dir-c table.cmp td.no { color: #8A4B2A; }
#dir-c table.cmp tr.us td { background: #EAF3EC; border-top: 2px solid #2F7A4E; }
#dir-c .note { font-size: 14px; color: #4A5560; margin-top: 18px; }
#dir-c .sec.alt { background: #F4F1EA; }
#dir-c .state { background: #0F2437; color: #C9D6E3; }
#dir-c .state h2 { color: #fff; }
#dir-c .state .lede { font-size: 19px; color: #C9D6E3; }
#dir-c .state .note { color: #8FA3B8; margin-top: 28px; }
#dir-c .need { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
#dir-c .need div { border-top: 3px solid #E8B84A; padding-top: 12px; }
#dir-c .need strong { display: block; color: #fff; font-size: 34px; line-height: 1.1; margin-bottom: 6px; }
#dir-c .need span { font-size: 15px; color: #C9D6E3; }
@media (max-width: 860px) { #dir-c .need { grid-template-columns: 1fr; } }

/* ======================================================
   D · Everyone on the well  (Public Sans, white, before/after)
   ====================================================== */
#dir-d { font-family: 'Public Sans', sans-serif; color: #1E2A36; background: #FFFFFF; font-size: 17px; line-height: 1.62; font-variant-numeric: tabular-nums; }
#dir-d h1, #dir-d h2, #dir-d h3 { color: #14202B; font-weight: 600; line-height: 1.12; letter-spacing: -.015em; }
#dir-d h1 { font-size: clamp(34px, 4.6vw, 54px); }
#dir-d h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 18px; }
#dir-d h3 { font-size: 19px; margin-bottom: 8px; }
#dir-d header { background: #fff; border-bottom: 1px solid #E3DFD3; }
#dir-d .wordmark { color: #14202B; }
#dir-d .nav { background: #fff; }
#dir-d .nav a { color: #1E2A36; }
#dir-d .nav a:hover { color: #1D4E89; text-decoration: underline; text-underline-offset: 4px; }
#dir-d .d-hero { padding-top: 64px; padding-bottom: 72px; border-bottom: 1px solid #E3DFD3; background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%); }
#dir-d .d-hero .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
#dir-d .d-hero .lede { font-size: 20px; max-width: 520px; }
#dir-d .btn { background: #1D4E89; color: #fff; }
#dir-d .btn:hover { background: #163C6B; }
#dir-d .btn.ghost { background: transparent; color: #1D4E89; border: 1px solid #1D4E89; }
#dir-d .btn.ghost:hover { background: #E4ECF6; }
#dir-d .viz svg { width: 100%; height: auto; display: block; }
#dir-d .viz .story { border-radius: 10px; transition: opacity 450ms; }
#dir-d .viz .aer, #dir-d .viz .cut { transition: opacity 700ms; }
#dir-d .viz .cut { opacity: 0; }
#dir-d .viz[data-scene="2"] .aer, #dir-d .viz[data-scene="3"] .aer { opacity: 0; }
#dir-d .viz[data-scene="2"] .cut, #dir-d .viz[data-scene="3"] .cut { opacity: 1; }
#dir-d .viz .dunit { opacity: 0; transform: scale(.6); transform-origin: 360px 205px; transition: opacity 500ms 300ms, transform 600ms cubic-bezier(.2,.7,.2,1) 300ms; }
#dir-d .viz[data-scene="4"] .dunit { opacity: 1; transform: none; }
#dir-d .viz .wellw { transition: fill 500ms 300ms; }
#dir-d .viz[data-scene="4"] .wellw { fill: #2E7BC4; }
#dir-d .viz .dpipe { fill: none; stroke: #2E7BC4; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1500ms ease-out 800ms; }
#dir-d .viz[data-scene="4"] .dpipe { stroke-dashoffset: 0; }
#dir-d .viz .dmk path { transition: fill 500ms 1900ms; }
#dir-d .viz[data-scene="4"] .dmk path { fill: #2E7BC4; }
#dir-d .viz .dflow { fill: none; stroke-width: 3.2; stroke-dasharray: 3 7; stroke-linecap: round; }
@keyframes dfl { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: no-preference) { #dir-d .viz .dflow { animation: dfl .7s linear infinite; } }
#dir-d .viz .cshed { opacity: 0; transform: translateY(8px); transition: opacity 500ms, transform 600ms; }
#dir-d .viz[data-scene="3"] .cshed { opacity: 1; transform: none; }
#dir-d .viz .craw { transition: opacity 400ms; }
#dir-d .viz[data-scene="3"] .craw { opacity: 0; }
#dir-d .viz .cclean { opacity: 0; transition: opacity 600ms 300ms; }
#dir-d .viz[data-scene="3"] .cclean { opacity: 1; }
#dir-d .viz .ctap { transition: fill 500ms 900ms; }
#dir-d .viz[data-scene="3"] .ctap { fill: #2E7BC4; }
#dir-d .viz.noanim * { transition: none !important; }
#dir-d .prog4 { display: flex; gap: 6px; margin-top: 12px; }
#dir-d .prog4 span { flex: 1; height: 4px; border-radius: 2px; background: #E3DFD3; transition: background 400ms; }
#dir-d .prog4 span.on { background: #1D4E89; }
#dir-d .vizcap { font-size: 15px; color: #1E2A36; margin: 10px 0 0; min-height: 3em; }
#dir-d .viz .home path { fill: #fff; stroke: #5B6B7A; stroke-width: 2; transition: fill 500ms; }
#dir-d .viz .home .door { fill: #5B6B7A; }
#dir-d .viz .drop path { fill: #B79B6E; stroke: none; transition: fill 500ms; }
#dir-d .viz .filt { fill: #2E7BC4; opacity: 1; transition: opacity 500ms; }
#dir-d .viz .home.filtered .drop path { fill: #2E7BC4; }
#dir-d .viz .pipes path { stroke: #D3CDBF; transition: stroke 600ms; }
#dir-d .viz .wellring { fill: #E3DFD3; stroke: #5B6B7A; stroke-width: 2; }
#dir-d .viz .wellwater { fill: #B79B6E; transition: fill 500ms; }
#dir-d .viz .shed path { fill: #E8B84A; stroke: #14202B; stroke-width: 2; }
#dir-d .viz .shed .door { fill: #14202B; }
#dir-d .viz .shed { opacity: 0; transform: translate(346px,164px) scale(.6); transform-origin: 364px 184px; transition: opacity 400ms, transform 500ms cubic-bezier(.2,.7,.2,1); }
#dir-d .viz[data-step="2"] .shed, #dir-d .viz[data-step="3"] .shed { opacity: 1; transform: translate(346px,164px) scale(1); }
#dir-d .viz[data-step="2"] .wellwater, #dir-d .viz[data-step="3"] .wellwater { fill: #2E7BC4; }
#dir-d .viz[data-step="3"] .pipes path { stroke: #2E7BC4; }
#dir-d .viz[data-step="3"] .drop path { fill: #2E7BC4; }
#dir-d .viz[data-step="3"] .filt { opacity: 0; }
#dir-d .viz .cap { font-family: 'Public Sans', sans-serif; font-size: 14px; fill: #1E2A36; }
#dir-d .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
#dir-d .steps button { font: inherit; font-size: 13px; text-align: left; background: #fff; border: 1px solid #D3CDBF; border-radius: 4px; padding: 10px 12px; cursor: pointer; color: #5B6B7A; display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; min-height: 44px; }
#dir-d .steps button span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #E3DFD3; color: #14202B; font-size: 11px; font-weight: 700; flex: none; }
#dir-d .steps button.active { border-color: #1D4E89; color: #14202B; background: #F2F6FA; }
#dir-d .steps button.active span { background: #1D4E89; color: #fff; }
#dir-d .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
#dir-d .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
#dir-d .four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
#dir-d .four div { border-top: 3px solid #2E7BC4; padding-top: 14px; }
#dir-d .four p { font-size: 16px; }
#dir-d .photo { border-radius: 4px; overflow: hidden; }
#dir-d .photo figcaption { font-size: 13px; color: #6B7580; margin-top: 8px; }
#dir-d .sec.alt { background: #F4F1EA; }
#dir-d .gap { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; margin-top: 32px; align-items: stretch; }
#dir-d .gap .opt { border: 1px solid #D3CDBF; border-radius: 6px; padding: 24px; background: #fff; }
#dir-d .gap .opt .k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A4B2A; display: block; margin-bottom: 10px; }
#dir-d .gap .opt p { font-size: 15.5px; margin: 0; }
#dir-d .gap .opt.us { background: #0F2437; border-color: #0F2437; color: #C9D6E3; }
#dir-d .gap .opt.us .k { color: #E8B84A; }
#dir-d .gap .opt.us h3 { color: #fff; }
#dir-d .note { font-size: 14px; color: #4A5560; margin-top: 18px; }
#dir-d .build { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
#dir-d .build img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; }
#dir-d .build figcaption { font-size: 14px; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
#dir-d .build figcaption span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1D4E89; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
#dir-d .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
#dir-d .stat { border-top: 3px solid #2E7BC4; padding-top: 12px; }
#dir-d .stat strong { display: block; font-size: 32px; font-weight: 600; color: #14202B; line-height: 1.1; margin-bottom: 4px; }
#dir-d .stat span { font-size: 14px; color: #4A5560; }
#dir-d .quote { background: #fff; border: 1px solid #D3CDBF; border-radius: 6px; padding: 26px 30px; margin: 0; }
#dir-d .quote p { font-size: 21px; color: #14202B; line-height: 1.35; margin-bottom: 10px; }
#dir-d .quote cite { font-style: normal; font-size: 14px; color: #6B7580; }
#dir-d .reg { background: #F2F6FA; border-top: 4px solid #1D4E89; }
#dir-d .reg .lede { font-size: 19px; }
#dir-d dl.fit { margin: 8px 0 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
#dir-d dl.fit div { background: #fff; border: 1px solid #D3DBE4; border-radius: 6px; padding: 16px 18px; }
#dir-d dl.fit dt { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6B7580; margin-bottom: 4px; }
#dir-d dl.fit dt + dd + dt { color: #1D4E89; margin-top: 10px; }
#dir-d dl.fit dd { margin: 0; font-size: 15px; color: #4A5560; line-height: 1.5; }
#dir-d dl.fit dd:not(.ask) { color: #14202B; font-weight: 600; }
#dir-d ul.ticks { list-style: none; padding: 0; margin: 0 0 24px; }
#dir-d ul.ticks li { padding: 9px 0 9px 24px; border-top: 1px solid #D3DBE4; position: relative; margin: 0; font-size: 15px; }
#dir-d ul.ticks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: #1D4E89; }
#dir-d ul.ticks li:last-child { border-bottom: 1px solid #D3DBE4; }
#dir-d .reg .photo { margin-top: 20px; }
#dir-d .contact { background: #14202B; color: #C9D3DD; }
#dir-d .contact h2 { color: #fff; }
#dir-d .contact .form input, #dir-d .contact .form textarea { background: #fff; border: 1px solid #D3DBE4; color: #14202B; }
#dir-d .contact .form label { color: #C9D3DD; }
#dir-d .contact .form button { background: #E8B84A; color: #14202B; border: none; }
#dir-d .contact .form button:hover { background: #F2C963; }
#dir-d footer { background: #0F2437; color: #8FA3B8; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-d footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  #dir-d .d-hero .wrap, #dir-d .two, #dir-d .gap { grid-template-columns: 1fr; gap: 28px; }
  #dir-d .three, #dir-d .four { grid-template-columns: 1fr; gap: 24px; }
  #dir-d .build, #dir-d .stats { grid-template-columns: 1fr 1fr; }
  #dir-d .steps { grid-template-columns: 1fr; }
  #dir-d .d-hero { padding-top: 40px; padding-bottom: 48px; }
  #dir-d .d-hero h1 { font-size: 32px; }
  #dir-d .d-hero .btn { display: block; text-align: center; margin-bottom: 10px; }
}
#dir-c dl.fit { margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#dir-c dl.fit div { background: #16324A; border-radius: 6px; padding: 22px 24px; display: grid; grid-template-columns: 1fr; }
#dir-c dl.fit dt { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8FA3B8; margin-bottom: 6px; }
#dir-c dl.fit dt + dd + dt { color: #E8B84A; margin-top: 16px; }
#dir-c dl.fit dd { margin: 0; font-size: 16px; color: #C9D6E3; line-height: 1.5; }
#dir-c dl.fit dd.ask { padding-bottom: 14px; border-bottom: 1px solid #2B4359; }
#dir-c dl.fit dd:not(.ask) { color: #fff; font-size: 18px; font-weight: 700; }
#dir-c ul.ticks { list-style: none; padding: 0; margin: 0 0 18px; }
#dir-c ul.ticks li { padding: 10px 0 10px 26px; border-top: 1px solid #E3DFD3; position: relative; margin: 0; font-size: 16px; }
#dir-c ul.ticks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #2F7A4E; }
#dir-c ul.ticks li:last-child { border-bottom: 1px solid #E3DFD3; }
#dir-c .tech { background: #fff; border-top: 1px solid #E3DFD3; border-bottom: 1px solid #E3DFD3; }
#dir-c .c-hero .two { grid-template-columns: 1fr 1.1fr; align-items: center; }
@media (max-width: 860px) {
  #dir-c .c-hero .two { grid-template-columns: 1fr; gap: 28px; }
  #dir-c .c-hero h1 { font-size: 32px; }
  #dir-c .c-hero .lede { font-size: 18px; }
  #dir-c .c-hero .facts { flex-direction: column; gap: 6px; }
  #dir-c .c-hero .btn { display: block; text-align: center; margin-bottom: 10px; }
  #dir-c .c-hero .btn.ghost { margin-left: 0; }
}
#dir-c .build { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
#dir-c .build figure { margin: 0; }
#dir-c .build img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; }
#dir-c .build figcaption { font-size: 14px; margin-top: 8px; color: #1E2A36; display: flex; align-items: center; gap: 8px; }
#dir-c .build figcaption span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #2F7A4E; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
@media (max-width: 860px) { #dir-c .build { grid-template-columns: 1fr 1fr; } }
.headshot { width: 120px; height: 140px; object-fit: cover; object-position: center 20%; border-radius: 4px; margin-bottom: 14px; display: block; }
@media (max-width: 860px) {
  .panel div:has(> .headshot) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .panel div:has(> .headshot) > .headshot { width: 84px; height: 100px; margin-bottom: 0; grid-row: span 2; }
  .panel div:has(> .headshot) > h3 { margin-top: 2px; }
  .panel div:has(> .headshot) > p { margin-bottom: 0; }
}
/* ======================================================
   E · Launch draft  (logo palette: navy #0B2E4E, teal #17A3A3, deep teal #0F7676)
   ====================================================== */
#dir-e { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #18181B; background: #FFFFFF; font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
#dir-e h1, #dir-e h2, #dir-e h3, #dir-e h4, #dir-e h5 { color: #0B2E4E; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; }
#dir-e h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
#dir-e h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 18px; }
#dir-e h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; }
#dir-e h4 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; }
#dir-e h5 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 8px; }
#dir-e header { background: #FFFFFF; border-bottom: 1px solid #E2E6EA; }
#dir-e .logo img { height: 36px; width: auto; display: block; }
#dir-e .nav { background: #FFFFFF; }
#dir-e .nav a { color: #18181B; }
#dir-e .nav a:hover { color: #17A3A3; text-decoration: underline; text-underline-offset: 4px; }
#dir-e .nav-toggle { color: #0B2E4E; }
#dir-e .btn { background: #0B2E4E; color: #FFFFFF; border-radius: 8px; font-weight: 600; padding: 12px 24px; transition: background-color .15s ease, border-color .15s ease; }
#dir-e .btn:hover { background: #17A3A3; }
#dir-e .btn.ghost { background: transparent; color: #0B2E4E; border: 1px solid #C0C9D1; border-radius: 8px; }
#dir-e .btn.ghost:hover { background: #F3F5F6; border-color: #0B2E4E; }
#dir-e .e-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; background: #0B2E4E; overflow: hidden; }
#dir-e .e-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
#dir-e .e-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,26,44,.9) 0%, rgba(8,26,44,.62) 38%, rgba(8,26,44,.08) 72%); }
#dir-e .e-hero .wrap { position: relative; z-index: 1; display: block; width: 100%; padding-top: 180px; padding-bottom: 64px; }
#dir-e .e-hero .copy { max-width: 720px; }
#dir-e .e-hero h1 { color: #fff; border-left: 6px solid #17A3A3; padding-left: 20px; }
#dir-e .e-hero .lede { font-size: 20px; max-width: 600px; color: #E3EEF3; }
#dir-e .e-hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.75); }
#dir-e .e-hero .btn.ghost:hover { background: rgba(255,255,255,.12); }
#dir-e .e-hero .btns { margin-top: 28px; }
#dir-e .e-hero .btn.ghost { margin-left: 8px; }
#dir-e .ringwrap { position: relative; display: block; }
#dir-e .town-ring { position: absolute; left: 36%; top: 44%; width: 28%; height: 18%; border: 2px solid #000; border-radius: 50%; pointer-events: none; }
#dir-e .photo { border-radius: 8px; overflow: hidden; }
#dir-e .photo img { width: 100%; }
#dir-e .photo figcaption { font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.04em; color: #52525B; margin-top: 8px; }
/* The concentrate-disposal diagram is landscape and label-dense. It runs full section
   width under the two-column block so its labels stay legible. The extra class in the
   img selector is deliberate: it has to outrank the 4:3 cover-crop set lower in this file. */
#dir-e .diagramwide { margin-top: 52px; max-width: 680px; margin-left: auto; margin-right: auto; }
#dir-e .dgclip { aspect-ratio: 1.95; overflow: hidden; }
/* The artwork's own canvas is lopsided: about 46px of empty grey left of the drawing and
   about 112px right of it, so it looked pushed off-centre. Cropped here by geometry — the
   wrapper clips a slightly over-scaled image — because no single object-fit crop can trim
   both axes, and the caption has to stay outside the clipped box. Left edge kept, ~66px
   off the right, 41px each off top and bottom, so no label is ever touched. These values
   are tuned to this exact file: re-tune or drop this block if the diagram is re-exported. */
#dir-e figure.photo.diagramwide .dgclip img { display: block; position: relative; top: -6.2%; width: 105%; height: auto;
  /* aspect-ratio + object-fit must be restated: the site-wide 4:3 cover-crop further down
     this file still applies to every .photo img, and left unset it re-slices the artwork. */
  aspect-ratio: auto; object-fit: fill; }
#dir-e .diagramwide figcaption { margin-top: 12px; }
/* The Virtual Water District diagram ships in two crops — a 2400x1263 desktop drawing and a
   1000x2400 portrait one, drawn so its labels survive the smaller screen; the <picture> in
   the markup swaps between them at 860px. The figure runs wider than the 1120px content
   column because the drawing's type is baked in: held to the column its captions drop to
   about 10px. Capped at 1760px so it can't pass full-screen height on an ultrawide, and the
   min() in the margins keeps it centred once the cap takes effect. Protected from the
   site-wide 4:3 cover-crop, which would otherwise cut the map's top and bottom. */
#dir-e .districtmap { margin-top: 36px; width: min(100vw, 1760px); margin-left: calc(50% - min(50vw, 880px)); margin-right: calc(50% - min(50vw, 880px)); }
#dir-e .districtmap figcaption { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
#dir-e { overflow-x: clip; }
/* Our process. The five stages hang on a teal spine in a left gutter — and the spine doesn't
   stop at the last stage: it carries on past it, ending on the label above the construction
   photographs, because construction is where the process actually lands. That's the one
   deliberate move; everything else stays quiet. Numbering is real here (the order IS the
   information), so the numerals are anchors. Rows are allowed different heights rather than
   being forced into equal cards, because the stages genuinely differ in weight — stage 1 is
   the heavy one, and the only one with sub-items. */
#dir-e .flow { list-style: none; margin: 44px 0 0; padding: 0; position: relative; }
#dir-e .flow > li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 28px; padding: 24px 0; border-top: 1px solid #E2E6EA; }
#dir-e .flow > li:last-child { border-bottom: 1px solid #E2E6EA; }
#dir-e .flow > li::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #BFE3E3; }
#dir-e .flow .n { position: relative; z-index: 1; grid-column: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #17A3A3; color: #FFFFFF; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
#dir-e .flow .step-body { grid-column: 2; }
#dir-e .flow h3 { margin: 9px 0 0; font-size: 21px; line-height: 1.25; color: #0B2E4E; }
#dir-e .flow p { margin: 9px 0 0; max-width: 62ch; color: #52525B; }
#dir-e .flow ul { list-style: disc; margin: 11px 0 0; padding-left: 1.15em; max-width: 62ch; }
#dir-e .flow ul li { margin-bottom: 5px; color: #52525B; }
#dir-e .flow ul li::marker { color: #17A3A3; }
#dir-e .flow::after { content: ""; position: absolute; left: 21px; top: 100%; width: 2px; height: 26px; background: #BFE3E3; }
#dir-e .buildwrap .build-label { padding-left: 72px; }
@media (max-width: 860px) {
  #dir-e .flow > li { grid-template-columns: 36px 1fr; column-gap: 18px; }
  #dir-e .flow .n { width: 36px; height: 36px; font-size: 16px; }
  #dir-e .flow > li::before, #dir-e .flow::after { left: 17px; }
  #dir-e .flow h3 { margin-top: 6px; font-size: 19px; }
  #dir-e .buildwrap .build-label { padding-left: 0; }
}
/* The <picture> element swaps to the portrait crop below 860px, so no sideways panning is
   needed and the figure stays inside the page width at every size. */
#dir-e figure.photo.districtmap img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
#dir-e .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
#dir-e .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
#dir-e .sec.alt { background: #F3F5F6; }
#dir-e .num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #17A3A3; color: #FFFFFF; font-weight: 700; font-size: 16px; flex: none; }
#dir-e h3.step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#dir-e .stepimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 18px; display: block; }
#dir-e .buildwrap { margin-top: 40px; }
#dir-e .build-label { font-size: 16px; font-weight: 700; color: #0B2E4E; margin: 0 0 2px; }
#dir-e .pilot { border-top: 1px solid #D5E0E6; }
#dir-e .going { border-top: 1px solid #E1E8EC; }
/* The two result charts in "Superior water quality" are screenshots that carry their own axis
   labels and value callouts, so they must not be cover-cropped like ordinary photos — the
   site-wide 4:3 crop would slice the bars and their numbers off. aspect-ratio and object-fit
   are restated, and the img selector made more specific, so this outranks that rule. */
#dir-e .charts { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
#dir-e figure.chart { margin: 0; padding: 22px 26px 20px; background: #FFFFFF; border: 1px solid #E2E6EA; border-radius: 8px; }
#dir-e figure.chart h3 { margin-bottom: 4px; }
#dir-e figure.chart .sub { font-size: 14px; color: #52525B; margin: 0; }
#dir-e figure.chart figcaption { margin-top: 18px; font-size: 15px; line-height: 1.55; max-width: 80ch; }
/* The pilot-cost breakdown arrives as two report screenshots on white. They keep their own
   proportions — the site-wide 4:3 cover-crop would slice the slice labels off — and a
   hairline plate holds each one, so the screenshot reads as a figure on the page rather than
   a hole in it. Both plates stretch to one height and the captions sit on their floor. */
#dir-e .costfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; margin-bottom: 52px; }
#dir-e figure.costfig { margin: 0; padding: 18px 18px 16px; background: #FFFFFF; border: 1px solid #E2E6EA; border-radius: 8px; display: flex; flex-direction: column; }
#dir-e figure.costfig img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
#dir-e figure.costfig figcaption { margin-top: auto; padding-top: 14px; font-size: 15px; line-height: 1.55; color: #52525B; }
/* Cost figures sit in the body face, in running text. Only the superscript unit needs a
   rule: a bare <sup> inherits a raised baseline that opens up the line, so it is pinned to
   zero line-height and sized down deliberately. */
#dir-e sup { font-size: 0.7em; line-height: 0; vertical-align: 0.42em; }
/* The $2 million threshold is a published finding, so its source rides in the line rather
   than in a footnote. */
#dir-e .cite { color: #0F7676; text-decoration: underline; text-underline-offset: 3px; }
#dir-e .cite:hover { color: #0B2E4E; }
/* This section's last block turns from what the pilot cost to what WellForward expects at
   district scale — a projection, not a measurement. A hairline marks the change of tense. */
#dir-e .costnext { margin-top: 44px; padding-top: 32px; border-top: 1px solid #E2E6EA; }
@media (max-width: 760px) { #dir-e .costfigs { grid-template-columns: 1fr; } }
/* Each chart ships two generated SVG variants (see _partials/chart-*.html): a wide one drawn
   for the desktop column and a narrow one whose type is proportionally larger, swapped at
   860px so the axis labels stay readable on a phone instead of shrinking to nothing. */
#dir-e .chart-svg { display: block; width: 100%; height: auto; }
#dir-e .chart-svg text { font-family: 'IBM Plex Mono', monospace; }
#dir-e .chart-svg .ch-cat, #dir-e .chart-svg .ch-site, #dir-e .chart-svg .ch-ax { font-family: 'Public Sans', sans-serif; }
/* A white halo on the value labels, so a number crossed by the dashed limit line still reads. */
#dir-e .chart-svg .ch-v { fill: #18181B; paint-order: stroke; stroke: #FFFFFF; stroke-linejoin: round; }
#dir-e .chart-svg .ch-t, #dir-e .chart-svg .ch-cat, #dir-e .chart-svg .ch-ax { fill: #52525B; }
/* The words maximum / average / minimum sit beside the numbers on the first bar only, in a
   lighter voice than the numbers themselves so the figure still reads as values first. */
#dir-e .chart-svg .ch-w { fill: #6B7280; }
#dir-e .chart-svg .ch-site { fill: #0B2E4E; font-weight: 600; }
#dir-e .chart-svg .ch-lim { fill: #0B2E4E; font-weight: 600; }
#dir-e .chart-svg.desktop .ch-t, #dir-e .chart-svg.desktop .ch-v { font-size: 14px; }
#dir-e .chart-svg.desktop .ch-v { stroke-width: 5px; }
#dir-e .chart-svg.desktop .ch-w { font-size: 12px; }
#dir-e .chart-svg.desktop .ch-cat { font-size: 13px; }
#dir-e .chart-svg.desktop .ch-site { font-size: 16px; }
#dir-e .chart-svg.desktop .ch-ax { font-size: 15px; }
#dir-e .chart-svg.desktop .ch-lim { font-size: 13px; }
#dir-e .chart-svg.phone { display: none; }
#dir-e .chart-svg.phone .ch-t { font-size: 22px; }
#dir-e .chart-svg.phone .ch-v { font-size: 23px; stroke-width: 8px; }
#dir-e .chart-svg.phone .ch-w { font-size: 17px; }
#dir-e .chart-svg.phone .ch-cat { font-size: 19px; }
#dir-e .chart-svg.phone .ch-site { font-size: 21px; }
#dir-e .chart-svg.phone .ch-ax { font-size: 23px; }
#dir-e .chart-svg.phone .ch-lim { font-size: 18px; }
@media (max-width: 860px) {
  #dir-e .chart-svg.desktop { display: none; }
  #dir-e .chart-svg.phone { display: block; }
  #dir-e figure.chart { padding: 18px 16px 16px; }
}
#dir-e .build.four { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 860px) { #dir-e .build.four { grid-template-columns: 1fr 1fr; } }
#dir-e .buildwrap .build { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
#dir-e .buildwrap .build figcaption { font-size: 15px; }
#dir-e .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { #dir-e .buildwrap .build { grid-template-columns: 1fr 1fr; } }
#dir-e .problem { align-items: start; }
#dir-e .solution { background: #0B2E4E; color: #F3F5F6; border-radius: 12px; padding: 44px 48px; margin-bottom: 56px; border: 1px solid #385376; }
#dir-e .solution .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #17A3A3; margin-bottom: 8px; }
#dir-e .solution h2 { color: #fff; margin-bottom: 14px; }
#dir-e .sol-lede { font-size: 21px; line-height: 1.5; color: #fff; max-width: 780px; margin-bottom: 0; }
#dir-e .solution .checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
#dir-e .solution .checks li { margin: 0; padding-left: 30px; position: relative; font-size: 17px; color: #fff; }
#dir-e .solution .checks li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #17A3A3; color: #0B2E4E; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#dir-e .how-h { font-size: 26px; margin-bottom: 24px; }
@media (max-width: 860px) { #dir-e .solution { padding: 30px 24px; margin-bottom: 40px; } #dir-e .sol-lede { font-size: 19px; } #dir-e .solution .checks { flex-direction: column; gap: 10px; } }
#dir-e .opts-h { font-size: 20px; margin-top: 32px; margin-bottom: 12px; }
#dir-e .problem ul.others { gap: 10px; }
#dir-e .problem ul.others li { padding: 14px 16px; gap: 14px; }
#dir-e .problem ul.others svg { width: 30px; height: 30px; }
#dir-e .problem ul.others strong { font-size: 17px; margin-bottom: 2px; }
#dir-e .problem ul.others span { font-size: 15px; }
#dir-e .ours.noimg { display: block; margin-top: 20px; border-radius: 8px; }
#dir-e .ours.noimg .body { padding: 22px 24px 24px; }
#dir-e .ours.noimg h3 { font-size: 21px; margin-bottom: 14px; }
#dir-e .ours.noimg .checks { margin-bottom: 18px; }
#dir-e .opts-in { margin-top: 64px; padding-top: 48px; border-top: 1px solid #E1E8EC; }
#dir-e .opts-in > h3 { font-size: 24px; margin-bottom: 6px; }
#dir-e .opts2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin-top: 32px; align-items: stretch; }
#dir-e ul.others { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; align-content: start; }
#dir-e ul.others li { display: flex; gap: 18px; align-items: flex-start; margin: 0; padding: 22px 24px; background: #F4F7F8; border: 1px solid #E1E8EC; border-radius: 8px; }
#dir-e ul.others svg { width: 40px; height: 40px; flex: none; fill: none; stroke: #6B7C88; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#dir-e ul.others strong { display: block; color: #0B2E4E; font-size: 18px; margin-bottom: 4px; line-height: 1.3; }
#dir-e ul.others span { font-size: 16px; color: #4A5A66; }
#dir-e .ours { background: #0B2E4E; color: #D7E6EE; border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: 280px auto; }
#dir-e .page-hero { padding-top: 56px; padding-bottom: 56px; background: #F2F7F8; border-bottom: 1px solid #E1E8EC; }
#dir-e .page-hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
#dir-e .page-hero h1 { font-size: clamp(32px, 4vw, 46px); border-left: 6px solid #17A3A3; padding-left: 20px; }
#dir-e .page-hero .lede { font-size: 20px; }
#dir-e .cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
#dir-e .card { background: #fff; border: 1px solid #D5E0E6; border-top: 4px solid #17A3A3; border-radius: 6px; padding: 22px 24px; }
#dir-e .card h3 { margin-bottom: 6px; }
#dir-e .card p { margin: 0; font-size: 17px; }
#dir-e ul.ticks { list-style: none; padding: 0; margin: 18px 0 0; }
#dir-e ul.ticks li { margin: 0; padding: 12px 0 12px 32px; border-top: 1px solid #E1E8EC; position: relative; font-size: 17px; }
#dir-e ul.ticks li:last-child { border-bottom: 1px solid #E1E8EC; }
#dir-e ul.ticks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: #17A3A3; }
#dir-e .more { display: inline-block; margin-top: 20px; font-weight: 700; color: #0F7676; text-decoration: none; }
#dir-e .more:hover { text-decoration: underline; text-underline-offset: 4px; }
#dir-e .funders .more { color: #5CCFCF; }
#dir-e .links.three { grid-template-columns: repeat(3, 1fr); }
#dir-e .need-band { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
#dir-e .need-band .big { border-left: 6px solid #17A3A3; padding-left: 28px; }
#dir-e .need-band .pre { display: block; font-size: 18px; font-weight: 600; color: #5A6B78; }
#dir-e .need-band .n { display: block; font-size: clamp(56px, 7vw, 92px); font-weight: 700; color: #0B2E4E; line-height: 1; letter-spacing: -.03em; margin: 6px 0 14px; }
#dir-e .need-band .l { display: block; font-size: 20px; color: #24323F; line-height: 1.45; }
#dir-e .raise { background: #0B2E4E; color: #D7E6EE; }
#dir-e .raise h2 { color: #fff; }
#dir-e .raise-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1px solid #24507A; }
#dir-e .raise-grid > div { padding: 32px 40px 32px 0; }
#dir-e .raise-grid > div + div { padding: 32px 0 32px 40px; border-left: 1px solid #24507A; }
#dir-e .raise .idx { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #17A3A3; margin-bottom: 12px; }
#dir-e .raise h3 { color: #fff; font-size: 28px; margin-bottom: 10px; }
#dir-e .raise-grid p { font-size: 18px; color: #D7E6EE; margin: 0; }
#dir-e .raise-grid.three { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #24507A; }
#dir-e .raise-grid.three > div + div { padding: 32px 32px 32px 32px; }
#dir-e .raise-grid.three > div:last-child { padding-right: 0; }
@media (max-width: 860px) { #dir-e .raise-grid.three { grid-template-columns: 1fr; } #dir-e .raise-grid.three > div, #dir-e .raise-grid.three > div + div { padding: 24px 0; border-left: none; } #dir-e .raise-grid.three > div + div { border-top: 1px solid #24507A; } }
#dir-e .programs { margin-top: 8px; padding-top: 28px; border-top: 1px solid #24507A; }
#dir-e .programs p { color: #AFC3D1; font-size: 16px; margin-bottom: 14px; }
#dir-e .programs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
#dir-e .programs li { margin: 0; padding: 10px 18px; border: 1px solid #17A3A3; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; }
#dir-e .fit3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
#dir-e .fit3 > div { border: 1px solid #D5E0E6; border-top: 4px solid #0B2E4E; border-radius: 8px; padding: 24px; background: #fff; }
#dir-e .fit3 .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5A6B78; margin-bottom: 6px; }
#dir-e .fit3 .ask { font-size: 16px; color: #3E4F5C; padding-bottom: 16px; border-bottom: 1px solid #E1E8EC; margin-bottom: 16px; }
#dir-e .fit3 .k.wf { color: #0F7676; }
#dir-e .fit3 .ans { font-size: 19px; font-weight: 700; color: #0B2E4E; margin: 0; line-height: 1.35; }

/* Partners — the wells and communities this is for.
   A full-width spec table: label in a left gutter, criteria in the right, hairlines
   running the whole page width so the rows read as one table rather than two columns.
   The criteria keep a readable measure (~64ch) instead of stretching across 800px. */
#dir-e .crit { display: grid; grid-template-columns: 284px 1fr; margin-top: 40px; }
#dir-e .crit dt, #dir-e .crit dd { margin: 0; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid #E2E6EA; }
#dir-e .crit dt { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #0B2E4E; padding-top: 30px; padding-right: 48px; line-height: 1.25; }
#dir-e .crit dt:last-of-type, #dir-e .crit dd:last-of-type { border-bottom: 1px solid #E2E6EA; }
#dir-e .crit dd ul { list-style: none; margin: 0; padding: 0; max-width: 64ch; }
#dir-e .crit dd li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 18px; line-height: 1.55; }
#dir-e .crit dd li:last-child { margin-bottom: 0; }
#dir-e .crit dd li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: #17A3A3; }
#dir-e .does { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 72px; }
#dir-e .does h3 { margin-bottom: 14px; }
#dir-e .does .more { margin-top: 16px; }

/* Funders & partners — merged page */
#dir-e .ov { align-items: center; }
#dir-e .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
#dir-e .pair:first-child { margin-top: 0; }
#dir-e .page-hero .lede + .lede { font-size: 18px; color: #0B2E4E; font-weight: 600; }
#dir-e .pair > div { border: 1px solid #D5E0E6; border-top: 4px solid #0B2E4E; border-radius: 8px; padding: 26px 28px; background: #fff; }
#dir-e .pair .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0F7676; margin-bottom: 8px; }
#dir-e .pair h3 { font-size: 22px; margin-bottom: 10px; }
#dir-e .pair p { color: #3E4F5C; margin-bottom: 0; }
#dir-e .src { font-size: 14px; color: #5A6B78; margin-top: 22px; }
#dir-e .src a { color: #0F7676; }
#dir-e .stats + p { margin-top: 36px; }
#dir-e .src + h3 { margin-top: 56px; }
#dir-e #evidence { border-top: 1px solid #E1E8EC; }
@media (max-width: 860px) {
  #dir-e .need-band, #dir-e .raise-grid, #dir-e .fit3 { grid-template-columns: 1fr; gap: 24px; }
  #dir-e .raise-grid > div, #dir-e .raise-grid > div + div { padding: 24px 0; border-left: none; }
  #dir-e .raise-grid > div + div { border-top: 1px solid #24507A; }
}
#dir-e .nav a[aria-current="page"] { color: #0F7676; font-weight: 700; }
@media (max-width: 860px) { #dir-e .page-hero .wrap, #dir-e .cards2, #dir-e .links.three { grid-template-columns: 1fr; gap: 24px; } #dir-e .page-hero { padding-top: 36px; padding-bottom: 40px; } }
#dir-e .ours img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; aspect-ratio: auto; }
#dir-e .ours .body { padding: 26px 28px 30px; }
#dir-e .ours .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #17A3A3; margin-bottom: 8px; }
#dir-e .ours h3 { color: #fff; font-size: 24px; line-height: 1.25; margin-bottom: 18px; }
#dir-e .ours .checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
#dir-e .ours .checks li { margin: 0; padding-left: 30px; position: relative; font-size: 16px; color: #fff; }
#dir-e .ours .checks li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #17A3A3; color: #0B2E4E; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#dir-e .ours .btn { background: #17A3A3; color: #0B2E4E; }
#dir-e .ours .btn:hover { background: #2BB8B8; }
@media (max-width: 860px) { #dir-e .opts2 { grid-template-columns: 1fr; } #dir-e .ours { grid-template-rows: 200px auto; } #dir-e .ours .checks { grid-template-columns: 1fr; } #dir-e .ours .btn { display: block; text-align: center; } }
#dir-e .three p { font-size: 17px; }
#dir-e .note { font-size: 15px; color: #5A6B78; }
#dir-e .build { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
#dir-e .build img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; }
#dir-e .build figcaption { font-size: 14px; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
#dir-e .build figcaption span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0B2E4E; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
#dir-e ul.opts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#dir-e ul.opts li { margin: 0; border: 1px solid #D5E0E6; border-top: 4px solid #B9C6CF; border-radius: 6px; padding: 20px; background: #fff; }
#dir-e ul.opts strong { display: block; color: #0B2E4E; font-size: 18px; margin-bottom: 8px; line-height: 1.3; }
#dir-e ul.opts span { font-size: 16px; color: #3E4F5C; }
#dir-e ul.opts li.us { background: #0B2E4E; border-color: #0B2E4E; border-top-color: #17A3A3; }
#dir-e ul.opts li.us strong { color: #fff; }
#dir-e ul.opts li.us span { color: #D7E6EE; }
#dir-e .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
#dir-e .stat { border-top: 3px solid #17A3A3; padding-top: 12px; }
#dir-e .stat strong { display: block; font-size: 32px; color: #0B2E4E; line-height: 1.1; margin-bottom: 4px; }
#dir-e .stat span { font-size: 15px; color: #3E4F5C; }
/* The three limits in "The Opportunity" are constraints, not wins, so they take the navy rule
   instead of the teal one the achievement stats wear elsewhere on the site — same geometry,
   different meaning. Two of them, so the row sets at two columns rather than three. */
#dir-e .stats.gates { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
#dir-e .stats.gates .stat { border-top-color: #0B2E4E; }
@media (max-width: 860px) { #dir-e .stats.gates { grid-template-columns: 1fr; } }
#dir-e .links { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 40px; }
#dir-e .doc { display: block; text-decoration: none; background: #fff; border: 1px solid #D5E0E6; border-radius: 6px; padding: 20px 22px; color: #24323F; }
#dir-e .doc:hover { border-color: #0F7676; }
#dir-e .doc .k { display: block; font-size: 17px; font-weight: 700; color: #0F7676; margin-bottom: 6px; }
#dir-e .doc strong { display: block; font-size: 15px; font-weight: 600; color: #0B2E4E; line-height: 1.4; margin-bottom: 6px; }
#dir-e .doc .src { font-size: 14px; color: #5A6B78; }
#dir-e .funders { background: #0B2E4E; color: #D7E6EE; }
#dir-e .funders h2 { color: #fff; }
#dir-e .funders .two { align-items: start; }
#dir-e .funders .btn.cta { background: #17A3A3; color: #0B2E4E; margin-top: 8px; }
#dir-e .funders .btn.cta:hover { background: #2BB8B8; }
#dir-e ul.fit { list-style: none; padding: 0; margin: 0; }
#dir-e ul.fit li { margin: 0; padding: 16px 0 16px 28px; border-top: 1px solid #1F4468; position: relative; font-size: 17px; }
#dir-e ul.fit li:last-child { border-bottom: 1px solid #1F4468; }
#dir-e ul.fit li::before { content: ""; position: absolute; left: 0; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: #17A3A3; }
#dir-e .contact { background: #F2F7F8; border-top: 4px solid #17A3A3; }
#dir-e .contact .two { align-items: start; }
#dir-e .contact .form input, #dir-e .contact .form textarea { background: #fff; border: 1px solid #C9D6DE; color: #0B2E4E; }
#dir-e .contact .form button { background: #0F7676; color: #fff; border: none; }
#dir-e .contact .form button:hover { background: #0B5E5E; }
/* Centered contact — single column, used on the funders & partners page. */
#dir-e .contact.centered .wrap { max-width: 620px; margin-left: auto; margin-right: auto; }
#dir-e .contact.centered .intro { text-align: center; margin-bottom: 30px; }
#dir-e .contact.centered .intro h2 { margin-bottom: 10px; }
#dir-e .contact.centered .intro p { max-width: 46ch; margin-left: auto; margin-right: auto; margin-bottom: 0; }
#dir-e footer { background: #0B2E4E; color: #AFC3D1; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-e footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
#dir-e footer img { height: 30px; width: auto; }
@media (max-width: 860px) {
  #dir-e .e-hero .wrap, #dir-e .two, #dir-e .links { grid-template-columns: 1fr; gap: 28px; }
  #dir-e .three, #dir-e .stats { grid-template-columns: 1fr; gap: 24px; }
  #dir-e .fit3 { grid-template-columns: 1fr; }
  #dir-e .crit { grid-template-columns: 1fr; column-gap: 0; }
  #dir-e .crit dt { padding: 26px 0 12px; }
  #dir-e .crit dd { border-top: 0; padding: 0 0 26px; }
  #dir-e .does { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; padding-top: 40px; }
  #dir-e .pair { grid-template-columns: 1fr; }
  #dir-e ul.opts { grid-template-columns: 1fr; }
  #dir-e .e-hero { min-height: 640px; }
  #dir-e .e-hero .bg { object-position: 42% 40%; }
  #dir-e .e-hero::after { background: linear-gradient(to top, rgba(8,26,44,.92) 0%, rgba(8,26,44,.7) 55%, rgba(8,26,44,.15) 85%); }
  #dir-e .e-hero .wrap { padding-top: 200px; padding-bottom: 40px; }
  #dir-e .e-hero h1 { font-size: 30px; }
  #dir-e .e-hero .btn { display: block; text-align: center; margin-bottom: 10px; }
  #dir-e .e-hero .btn.ghost { margin-left: 0; }
  #dir-e .logo img { height: 32px; }
}

/* ======================================================
   Brand Style Guide (Oct 2026) — final pass on the live site
   Primary #0B2E4E · Secondary #17A3A3 · Tertiary #385376
   Ink #18181B · Muted #52525B · Neutrals 50 #F3F5F6 / 100 #E2E6EA / 200 #C0C9D1 / 400 #6D8295
   Inter 400/700 · buttons 8px radius · surfaces 1px border, 12px radius
   ====================================================== */
:focus-visible { outline: 3px solid #17A3A3; outline-offset: 3px; }
#dir-e .hdr { min-height: 72px; }
#dir-e .logo img { height: 32px; }
#dir-e footer img { height: 32px; }
#dir-e footer { color: #C0C9D1; }
#dir-e .sec.alt, #dir-e .page-hero, #dir-e .contact { background: #F3F5F6; }
#dir-e .page-hero, #dir-e .opts-in, #dir-e .going, #dir-e #evidence, #dir-e .pilot { border-color: #E2E6EA; }
#dir-e .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
#dir-e .nav a[aria-current="page"] { color: #0B2E4E; text-decoration: underline; text-decoration-color: #17A3A3; text-decoration-thickness: 2px; text-underline-offset: 6px; }
#dir-e .more, #dir-e .fit3 .k.wf { color: #0B2E4E; }
#dir-e .more { text-decoration: underline; text-decoration-color: #17A3A3; text-decoration-thickness: 2px; text-underline-offset: 5px; }
#dir-e .funders .more { color: #FFFFFF; }
#dir-e .doc:hover { border-color: #17A3A3; }
#dir-e .need-band .pre, #dir-e .note, #dir-e .doc .src, #dir-e .fit3 .k, #dir-e ul.others span, #dir-e .stat span, #dir-e ul.opts span, #dir-e .fit3 .ask { color: #52525B; }
#dir-e .need-band .l, #dir-e .doc { color: #18181B; }
#dir-e ul.others svg { stroke: #6D8295; }
#dir-e .card, #dir-e .fit3 > div, #dir-e ul.opts li, #dir-e .doc, #dir-e ul.others li { border: 1px solid #E2E6EA; border-radius: 12px; }
#dir-e .card, #dir-e .fit3 > div { padding: 24px; }
#dir-e ul.others li { background: #F3F5F6; }
#dir-e ul.opts li.us { background: #0B2E4E; border-color: #0B2E4E; }
#dir-e ul.opts li.us span, #dir-e .ours, #dir-e .funders, #dir-e .raise, #dir-e .raise-grid p { color: #E2E6EA; }
#dir-e .ours { border-radius: 12px; }
#dir-e .programs p { color: #C0C9D1; }
#dir-e .raise .idx { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: .04em; }
#dir-e .raise-grid, #dir-e .raise-grid > div + div, #dir-e .raise-grid.three, #dir-e .programs, #dir-e ul.fit li, #dir-e ul.fit li:last-child { border-color: #385376; }
#dir-e ul.fit li { color: #E2E6EA; }
#dir-e ul.ticks li, #dir-e ul.ticks li:last-child, #dir-e .fit3 .ask { border-color: #E2E6EA; }
#dir-e .ours .btn, #dir-e .funders .btn.cta { background: #17A3A3; color: #0B2E4E; border-radius: 8px; }
#dir-e .ours .btn:hover, #dir-e .funders .btn.cta:hover { background: #FFFFFF; }
#dir-e .e-hero .btn:not(.ghost) { background: #17A3A3; color: #0B2E4E; }
#dir-e .e-hero .btn:not(.ghost):hover { background: #FFFFFF; }
#dir-e .btn:not(.ghost):hover { color: #FFFFFF; }
#dir-e .btn.ghost:hover { color: #0B2E4E; }
#dir-e .e-hero .btn.ghost:hover { color: #FFFFFF; }
#dir-e .e-hero .btn:not(.ghost):hover, #dir-e .ours .btn:hover, #dir-e .funders .btn.cta:hover { color: #0B2E4E; }
#dir-e .contact { border-top: 1px solid #E2E6EA; }
#dir-e .form input, #dir-e .form textarea, #dir-e .form select, #dir-e .contact .form input, #dir-e .contact .form textarea { border: 1px solid #C0C9D1; border-radius: 8px; color: #18181B; background: #FFFFFF; }
#dir-e .form label { color: #18181B; font-weight: 600; }
#dir-e .contact .form button { background: #0B2E4E; color: #FFFFFF; border-radius: 8px; }
#dir-e .contact .form button:hover { background: #385376; }
#dir-e .build img { border-radius: 8px; }

.panel .btn { background: #1D4E89; color: #fff; }
.panel .btn:hover { background: #163C6B; }
.panel .btn.ghost { background: transparent; color: #1D4E89; border: 1px solid #1D4E89; }
.panel .btn.cta { margin-top: 8px; }
#dir-b .c-hero .btn.ghost { background: transparent; color: #fff; border: 1px solid #C9D6E3; }
#dir-b .c-hero .btn.ghost:hover { background: rgba(255,255,255,.08); }
#dir-c .state .btn.cta { background: #E8B84A; color: #14202B; }
#dir-c .owner-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 32px; padding: 20px 24px; background: #EAF3EC; border: 1px solid #BFDCC6; border-radius: 6px; }
#dir-c .owner-cta p { margin: 0; font-size: 17px; color: #14202B; }
#dir-c .owner-cta .btn.cta { margin-top: 0; }
@media (max-width: 860px) { #dir-c .owner-cta .btn.cta { display: block; width: 100%; text-align: center; } }
#dir-c .state .btn.cta:hover { background: #F2C963; }
.form select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 4px; background: #fff; border: 1px solid #D3DBE4; color: #14202B; min-height: 48px; }
#dir-c table.cmp td.yes { background: #D7EFD9 !important; color: #16632F !important; font-weight: 700; }
#dir-c table.cmp td.yes::before { content: "\2713  "; }
#dir-c table.cmp td.no { background: #EBDCCB !important; color: #5A3312 !important; font-weight: 700; }
#dir-c table.cmp td.no::before { content: "\2715  "; }
#dir-c table.cmp tr.us td { background: #D7EFD9; border-top: 3px solid #16632F; }
#dir-c table.cmp tr.us td span { color: #16632F; font-weight: 700; }
#dir-c table.cmp td.yes { background: #EAF3EC; }
#dir-c table.cmp td.no { background: #F8EFE6; }
#dir-c .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
#dir-c .stat { border-top: 3px solid #2F7A4E; padding-top: 12px; }
#dir-c .stat strong { display: block; font-size: 32px; font-weight: 700; color: #14202B; line-height: 1.1; margin-bottom: 4px; }
#dir-c .stat span { font-size: 14px; color: #4A5560; }
#dir-c .quote { background: #fff; border: 1px solid #D3CDBF; border-radius: 6px; padding: 26px 30px; margin: 0; }
#dir-c .quote p { font-size: 21px; color: #14202B; line-height: 1.35; margin-bottom: 10px; }
#dir-c .quote cite { font-style: normal; font-size: 14px; color: #6B7580; }
#dir-c .contact { background: #14202B; color: #C9D3DD; }
#dir-c .contact h2 { color: #fff; }
#dir-c .contact .form input, #dir-c .contact .form textarea { background: #fff; border: 1px solid #D3DBE4; color: #14202B; }
#dir-c .contact .form label { color: #C9D3DD; }
#dir-c .contact .form button { background: #E8B84A; color: #14202B; border: none; }
#dir-c .contact .form button:hover { background: #F2C963; }
#dir-c footer { background: #0F2437; color: #8FA3B8; font-size: 14px; padding-top: 28px; padding-bottom: 28px; }
#dir-c footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  #dir-c .two, #dir-c dl.fit { grid-template-columns: 1fr; gap: 28px; }
  #dir-c .three { grid-template-columns: 1fr; gap: 24px; }
  #dir-c .opt-strip { grid-template-columns: 1fr; }
  #dir-c .opt { border-right: none; border-bottom: 1px solid #E3DFD3; }
  #dir-c .opt:last-child { border-bottom: none; }
  #dir-c .stats { grid-template-columns: 1fr 1fr; }
  #dir-c .c-hero { padding-top: 48px; padding-bottom: 48px; }
}

/* ---- Doc cards (home, For funders, How it works) ----
   Written last so nothing later in the sheet can flatten the label back to navy.
   The action is the loudest line in the card; the title and source stay quiet. */
#dir-e .doc .k { color: #0F7676; font-size: 17px; font-weight: 700; }
#dir-e .doc:hover .k { color: #0B2E4E; }
#dir-e .doc strong { font-size: 15px; font-weight: 600; color: #0B2E4E; }
#dir-e .doc .src { color: #5A6B78; }

/* ---- Get Connected: four audience doors ---- */
#dir-e .connect-lede { font-size: 19px; line-height: 1.6; color: #D7E6EE; max-width: 760px; margin-bottom: 34px; }
#dir-e .connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#dir-e .connect-box { display: block; text-decoration: none; background: #fff; border: 1px solid #D5E0E6; border-radius: 8px; padding: 24px 26px; }
#dir-e .connect-box:hover { border-color: #17A3A3; }
#dir-e .connect-box h3 { font-size: 17px; font-weight: 700; color: #0B2E4E; line-height: 1.3; margin-bottom: 8px; }
#dir-e .connect-box p { font-size: 15px; color: #52525B; margin: 0; }
@media (max-width: 860px) {
  #dir-e .connect-grid { grid-template-columns: 1fr; }
}