:root {
  --green: #05652f;
  --green-dark: #063c27;
  --green-deep: #042d20;
  --lime: #8dbd38;
  --cream: #f5f2e9;
  --paper: #fffef9;
  --ink: #111510;
  --muted: #5f665f;
  --line: rgba(10, 43, 27, .14);
  --shadow: 0 28px 70px rgba(4, 45, 32, .14);
  --condensed: "Barlow Condensed", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.6; }
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 120px 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 1000; background: white; padding: 12px 20px; }
.skip-link:focus { top: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; will-change: transform; }

.announcement { background: var(--green-deep); color: white; font-size: 13px; }
.announcement-inner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.text-button { border: 0; background: none; color: inherit; padding: 0; font-weight: 700; }
.announcement .text-button { color: #b4d66e; }
.site-header { position: absolute; top: 0; z-index: 50; width: 100%; color: white; transition: background .3s, box-shadow .3s; }
.site-header.scrolled .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 70px; padding-left: max(20px, calc((100vw - 1180px) / 2)); padding-right: max(20px, calc((100vw - 1180px) / 2)); background: rgba(4,45,32,.94); backdrop-filter: blur(14px); box-shadow: 0 10px 35px rgba(0,0,0,.12); animation: nav-drop .3s ease both; }
.site-header.scrolled .brand-mark { width: 44px; height: 44px; }
.site-header.scrolled .brand-mark svg { width: 33px; }
.site-header.scrolled .brand-copy strong { font-size: 15px; }
@keyframes nav-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.nav { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1; }
.brand-mark { width: 55px; height: 55px; border: 3px solid currentColor; border-radius: 50%; display: grid; place-items: center; color: var(--lime); }
.brand-mark svg { width: 43px; fill: currentColor; }
.brand-mark img { width: 88%; height: 88%; object-fit: contain; }
.brand-copy { display: grid; font-family: var(--body); letter-spacing: .02em; }
.brand-copy strong { font-size: 19px; }
.brand-copy strong:nth-child(2) { color: var(--lime); letter-spacing: .06em; }
.brand-copy small { margin-top: 4px; font-size: 8px; letter-spacing: .18em; }
.nav-menu { display: flex; align-items: center; gap: 25px; }
.nav-menu > a { font-size: 14px; font-weight: 600; position: relative; }
.nav-menu > a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--lime); transition: width .2s; }
.nav-menu > a:hover::after { width: 100%; }
.nav-menu > a.active::after { width: 100%; }
.nav-menu > a.active { color: #d0e7a0; }
.nav-portal { color: white; background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 9px 15px; font-size: 12px; font-weight: 700; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; }
.menu-toggle span { display: block; width: 26px; height: 2px; margin: 5px; background: currentColor; }

.button { border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; min-height: 50px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); background: var(--green-dark); border-color: var(--green-dark); }
.button-small { min-height: 42px; padding: 0 18px; font-size: 13px; }
.button-ghost { background: transparent; color: inherit; border-color: currentColor; }
.button-ghost:hover { background: white; color: var(--green-deep); border-color: white; }
.button-light { color: var(--green-deep); background: white; border-color: white; }
.button-light:hover { color: white; background: transparent; }

.hero { min-height: 850px; background: var(--green-deep); color: white; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-image { position: absolute; inset: -4% -2% -4% 34%; background: url("assets/anacostia-park-river.jpg") center/cover; transform: scale(1.04); will-change: transform; }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-deep), transparent 35%), linear-gradient(0deg, rgba(3,35,24,.28), rgba(3,35,24,.05)); }
.hero-wash { position: absolute; inset: 0; background: radial-gradient(circle at 80% 80%, rgba(141,189,56,.15), transparent 33%), linear-gradient(90deg, var(--green-deep) 0%, var(--green-deep) 35%, rgba(4,45,32,.2) 63%, transparent 100%); }
.hero-gridlines { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(90deg, transparent 35%, black); }
.hero-location { position: absolute; z-index: 3; top: 155px; right: 28px; display: grid; justify-items: end; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: .16em; }
.hero-location strong { margin-top: 6px; color: var(--lime); font-size: 9px; }
.hero-chapter { position: absolute; z-index: 3; left: 28px; bottom: 32px; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: .17em; }
.hero-chapter span { color: var(--lime); font-family: var(--condensed); font-size: 18px; }
.hero-orbits { --mx: 0; --my: 0; position: absolute; z-index: 4; inset: 0; pointer-events: none; perspective: 1000px; }
.orbit-card { position: absolute; width: 96px; height: 96px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.35); background: rgba(4,45,32,.23); backdrop-filter: blur(8px); box-shadow: 0 20px 45px rgba(0,0,0,.18); transform-style: preserve-3d; animation: orbit-float 6s ease-in-out infinite; }
.orbit-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(141,189,56,.45); transform: translateZ(18px); }
.orbit-card span { color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: .18em; }
.orbit-card strong { color: var(--lime); font-family: var(--condensed); font-size: 30px; line-height: 1; }
.orbit-ward7 { right: 8%; top: 27%; transform: translate3d(calc(var(--mx) * 15px), calc(var(--my) * 15px), 70px) rotateY(-18deg); }
.orbit-ward8 { right: 25%; bottom: 14%; animation-delay: -2s; transform: translate3d(calc(var(--mx) * -24px), calc(var(--my) * -20px), 120px) rotateY(20deg); }
.orbit-river { right: 5%; bottom: 30%; width: 125px; height: 62px; animation-delay: -4s; transform: translate3d(calc(var(--mx) * 30px), calc(var(--my) * -12px), 40px) rotateY(-10deg); }
.orbit-river strong { font-size: 22px; }
@keyframes orbit-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .55fr); gap: 70px; align-items: center; padding-top: 120px; }
.eyebrow { margin: 0 0 15px; color: var(--green); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.hero .eyebrow, .journey .eyebrow, .cta .eyebrow { color: #b7d775; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--condensed); line-height: .94; letter-spacing: -.025em; text-transform: uppercase; }
h1 { margin-bottom: 26px; font-size: clamp(64px, 6vw, 94px); max-width: 760px; }
h1 { text-shadow: 0 5px 35px rgba(0,0,0,.18); }
h1 span { color: var(--lime); }
h2 { margin-bottom: 25px; font-size: clamp(48px, 5vw, 72px); }
.hero-lede { max-width: 660px; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,.83); }
.hero-actions { display: flex; gap: 12px; margin: 35px 0 45px; }
.hero-proof { display: flex; gap: 42px; }
.hero-proof div { display: grid; }
.hero-proof strong { font-family: var(--condensed); font-size: 34px; color: var(--lime); line-height: 1; }
.hero-proof span { color: rgba(255,255,255,.7); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.benefits-card { align-self: end; margin-bottom: -75px; background: rgba(255,254,249,.96); color: var(--ink); padding: 85px 38px 38px; border-radius: 10px; box-shadow: var(--shadow); position: relative; }
.benefits-card h2 { font-size: 44px; }
.accommodation-badge { position: absolute; width: 145px; height: 145px; border-radius: 50%; top: -76px; right: 28px; background: var(--green); color: white; border: 6px solid white; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 35px rgba(4,45,32,.35); }
.accommodation-badge svg { width: 36px; fill: currentColor; }
.accommodation-badge span { font-family: var(--condensed); font-size: 27px; line-height: 1; }
.accommodation-badge strong { font-family: var(--condensed); font-size: 16px; }
.developer-badge { position: absolute; top: -54px; right: 28px; width: 165px; min-height: 108px; padding: 16px 18px; display: grid; justify-items: start; align-content: center; border: 5px solid white; color: white; background: linear-gradient(145deg, var(--green), var(--green-deep)); box-shadow: 0 14px 35px rgba(4,45,32,.3); transform: rotate(2deg); }
.developer-badge span, .developer-badge i { color: var(--lime); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .14em; }
.developer-badge strong { font-family: var(--condensed); font-size: 22px; line-height: .9; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: white; background: var(--green); font-size: 11px; font-weight: 900; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; z-index: 3; display: grid; justify-items: center; gap: 5px; transform: translateX(-50%); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.scroll-cue span { height: 27px; width: 1px; background: white; }

.quick-benefits { position: relative; z-index: 5; background: var(--green); color: white; }
.benefit-strip { min-height: 160px; display: grid; grid-template-columns: repeat(3, 1fr); }
.benefit-strip article { display: flex; align-items: center; gap: 22px; padding: 28px 36px; border-right: 1px solid rgba(255,255,255,.22); }
.benefit-strip article:last-child { border: 0; }
.benefit-strip h3 { margin-bottom: 5px; font-family: var(--condensed); font-size: 28px; text-transform: uppercase; }
.benefit-strip p { margin: 0; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.5; }
.line-icon { flex: 0 0 62px; height: 62px; border: 2px solid white; border-radius: 50%; display: grid; place-items: center; font-family: var(--condensed); font-size: 30px; }
.house-icon { font-size: 37px; padding-bottom: 6px; }

.mission-control { position: relative; overflow: hidden; padding: 110px 0 120px; background: radial-gradient(circle at 80% 20%, rgba(141,189,56,.22), transparent 28%), linear-gradient(135deg, #fbfaf6 0%, #eef3e8 100%); }
.mission-control::before { content: ""; position: absolute; inset: -20% -10% auto; height: 420px; background: repeating-linear-gradient(90deg, rgba(5,101,47,.08) 0 1px, transparent 1px 70px), repeating-linear-gradient(0deg, rgba(5,101,47,.08) 0 1px, transparent 1px 70px); transform: perspective(900px) rotateX(62deg) translateY(-80px); transform-origin: top; pointer-events: none; }
.mission-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.mission-copy > p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 17px; }
.mission-switcher { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.mission-tab { min-height: 46px; padding: 0 18px; border: 1px solid rgba(5,101,47,.25); border-radius: 999px; color: var(--green); background: rgba(255,255,255,.72); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.mission-tab:hover { transform: translateY(-2px); }
.mission-tab.active { color: white; background: var(--green); border-color: var(--green); box-shadow: 0 18px 38px rgba(5,101,47,.18); }
.mission-stage { --rx: 0deg; --ry: 0deg; min-height: 560px; position: relative; perspective: 1300px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.mission-orb { position: absolute; inset: 14% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(141,189,56,.36), rgba(5,101,47,.08) 42%, transparent 68%); filter: blur(8px); transform: translateZ(-130px); animation: mission-pulse 5s ease-in-out infinite; }
.mission-card { position: absolute; display: grid; gap: 10px; color: var(--green-deep); background: rgba(255,255,255,.78); border: 1px solid rgba(5,101,47,.16); backdrop-filter: blur(18px); box-shadow: 0 28px 70px rgba(4,45,32,.14); transform-style: preserve-3d; transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .35s, box-shadow .35s; }
.mission-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(141,189,56,.35); transform: translateZ(20px); pointer-events: none; }
.mission-card > * { position: relative; z-index: 2; transform: translateZ(38px); }
.mission-card span { color: var(--green); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.mission-card-main { left: 6%; top: 10%; width: min(490px, 72%); min-height: 330px; padding: 42px; transform: translateZ(90px) rotateY(-7deg); }
.mission-card-main h3 { margin: 0; font-family: var(--condensed); font-size: clamp(42px, 4vw, 58px); line-height: .9; text-transform: uppercase; }
.mission-card-main p { margin: 0; color: var(--muted); font-size: 15px; }
.mission-card-side { right: 5%; top: 7%; width: 250px; min-height: 150px; padding: 26px; transform: translateZ(160px) rotateY(14deg) rotateZ(2deg); }
.mission-card-back { right: 13%; bottom: 10%; width: 290px; min-height: 145px; padding: 26px; transform: translateZ(45px) rotateY(-18deg) rotateZ(-2deg); }
.mission-card-side strong, .mission-card-back strong { font-family: var(--condensed); font-size: 30px; line-height: .95; text-transform: uppercase; }
.mission-stage[data-mission="capital"] .mission-card-main { transform: translateZ(115px) rotateY(5deg) translateX(16px); }
.mission-stage[data-mission="capital"] .mission-card-side { transform: translateZ(190px) rotateY(-10deg) rotateZ(-2deg) translateY(70px); }
.mission-stage[data-mission="capital"] .mission-card-back { transform: translateZ(35px) rotateY(15deg) translateX(-120px); }
.mission-stage[data-mission="build"] .mission-card-main { transform: translateZ(125px) rotateX(3deg) rotateY(-12deg) translateY(24px); }
.mission-stage[data-mission="build"] .mission-card-side { transform: translateZ(210px) rotateY(17deg) translateX(-22px); }
.mission-stage[data-mission="build"] .mission-card-back { transform: translateZ(65px) rotateY(-12deg) translateY(-38px); }
.mission-stage[data-mission="steward"] .mission-card-main { transform: translateZ(100px) rotateY(0) translateX(44px); }
.mission-stage[data-mission="steward"] .mission-card-side { transform: translateZ(120px) rotateY(8deg) translateY(220px); }
.mission-stage[data-mission="steward"] .mission-card-back { transform: translateZ(180px) rotateY(-8deg) translateX(-210px) translateY(-20px); }
.mission-rail { position: absolute; left: 4%; right: 4%; bottom: 8%; height: 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; transform: translateZ(5px); }
.mission-rail i { border-radius: 999px; background: rgba(5,101,47,.12); overflow: hidden; }
.mission-rail i::after { content: ""; display: block; height: 100%; width: var(--mission-progress, 25%); background: linear-gradient(90deg, var(--green), var(--lime)); transition: width .45s ease; }
@keyframes mission-pulse { 0%,100% { transform: translateZ(-130px) scale(.94); opacity: .7; } 50% { transform: translateZ(-70px) scale(1.06); opacity: 1; } }

.river-story { position: relative; color: white; background: #061b14; }
.river-story-track { width: min(1440px, 100%); margin: 0 auto; display: grid; grid-template-columns: 55% 45%; }
.river-visual { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--green-deep); perspective: 1400px; transform-style: preserve-3d; }
.river-frame { position: absolute; inset: 3%; opacity: 0; transform: translate3d(12%, 0, -450px) rotateY(-24deg) scale(.9); transform-origin: left center; transition: opacity .8s ease, transform 1.3s cubic-bezier(.16,1,.3,1); box-shadow: 0 40px 90px rgba(0,0,0,.4); }
.river-frame.active { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
.river-frame.before { opacity: 0; transform: translate3d(-22%, 0, -350px) rotateY(25deg) scale(.88); }
.river-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #061b14 100%), linear-gradient(0deg, rgba(4,45,32,.62), transparent 60%); }
.river-frame img { height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.frame-label { position: absolute; z-index: 2; left: 35px; bottom: 35px; color: rgba(255,255,255,.75); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.river-line { position: absolute; z-index: 4; top: 0; right: 0; width: 3px; height: 100%; background: rgba(255,255,255,.12); }
.river-line span { display: block; width: 100%; height: 33.33%; background: var(--lime); transform-origin: top; transition: transform .6s ease; }
.river-watermark { position: absolute; z-index: 3; left: -15px; bottom: -65px; color: rgba(255,255,255,.08); font-family: var(--condensed); font-size: 250px; font-weight: 800; line-height: 1; }
.river-chapters { position: relative; }
.river-chapter { min-height: 100vh; padding: 18vh clamp(40px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s; }
.river-chapter.active { opacity: 1; }
.river-chapter h2 { max-width: 570px; font-size: clamp(52px, 5vw, 78px); }
.river-chapter > p:not(.eyebrow) { max-width: 550px; color: rgba(255,255,255,.64); font-size: 17px; }
.chapter-number { margin-bottom: 80px; color: var(--lime); font-family: var(--condensed); font-size: 19px; }
.chapter-detail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chapter-detail span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: .12em; }
.river-chapter .button { margin-top: 24px; align-self: flex-start; background: var(--lime); border-color: var(--lime); color: var(--green-deep); }
.chapter-mobile-image { display: none; }

.east-river { overflow: hidden; background: #ece9df; }
.atlas-lenses { display: inline-grid; grid-template-columns: repeat(3, auto); margin-bottom: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.55); }
.atlas-lens { min-width: 155px; padding: 16px 22px; display: flex; gap: 11px; align-items: center; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.atlas-lens:last-child { border-right: 0; }
.atlas-lens span { color: #9da096; font-family: var(--condensed); font-size: 16px; }
.atlas-lens.active { color: white; background: var(--green-deep); }
.atlas-lens.active span { color: var(--lime); }
.atlas { min-height: 720px; display: grid; grid-template-columns: 1.55fr .75fr; background: #f9f8f3; border: 1px solid rgba(4,45,32,.16); box-shadow: 0 25px 80px rgba(4,45,32,.12); }
.atlas-map { position: relative; min-height: 720px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #2c6453 0, #0a2d23 55%, #061b14 100%); border-right: 1px solid var(--line); perspective: 1500px; }
.atlas-map-heading { position: absolute; z-index: 8; top: 25px; left: 28px; display: grid; }
.atlas-map-heading span { color: var(--lime); font-size: 9px; letter-spacing: .18em; font-weight: 800; }
.atlas-map-heading strong { color: white; font-family: var(--condensed); font-size: 28px; line-height: 1; }
.atlas-map-heading small { color: rgba(255,255,255,.5); font-size: 8px; }
.atlas-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-base .ward { stroke: rgba(4,45,32,.18); stroke-width: 1.5; transition: fill .35s; }
.atlas-base .ward-7 { fill: #cfd9be; }
.atlas-base .ward-8 { fill: #d8d1b9; }
.atlas[data-lens="mobility"] .atlas-base .ward { fill: #d8dcd4; }
.atlas[data-lens="development"] .atlas-base .ward-7 { fill: #c5d6bd; }
.atlas[data-lens="development"] .atlas-base .ward-8 { fill: #bed1b5; }
.atlas-base .bridge { stroke: white; stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.atlas-base text { fill: rgba(4,45,32,.16); font-family: var(--condensed); font-size: 55px; font-weight: 800; }
.atlas-base .river-text { fill: rgba(4,45,32,.5); font-family: var(--body); font-size: 10px; letter-spacing: .2em; }
.metro-route { position: absolute; z-index: 2; opacity: .2; transition: opacity .35s, filter .35s; pointer-events: none; }
.metro-orange { top: 19%; left: 49%; width: 29%; height: 26%; border-top: 8px solid #f09931; border-right: 8px solid #f09931; transform: skewY(-29deg); border-radius: 0 35px 0 0; }
.metro-blue { top: 39%; left: 42%; width: 14%; height: 9%; border-top: 8px solid #1595c2; transform: rotate(-42deg); }
.metro-green { top: 57%; left: 41%; width: 12%; height: 27%; border-left: 8px solid #00a84f; transform: rotate(-12deg); }
.atlas[data-lens="mobility"] .metro-route { opacity: 1; filter: drop-shadow(0 2px 0 rgba(255,255,255,.8)); }
.map-point { --x: 50%; --y: 50%; position: absolute; z-index: 6; left: var(--x); top: var(--y); border: 0; padding: 0; color: var(--green-deep); background: transparent; transform: translate(-50%, -50%); text-align: center; }
.map-point > span { display: block; width: 17px; height: 17px; margin: 0 auto 5px; border: 4px solid white; border-radius: 50%; background: var(--green); box-shadow: 0 3px 10px rgba(4,45,32,.3); transition: transform .2s, background .2s; }
.map-point strong { display: block; padding: 3px 6px; background: rgba(249,248,243,.88); box-shadow: 0 1px 4px rgba(0,0,0,.1); font-size: 8px; line-height: 1.2; white-space: nowrap; }
.map-point:hover > span, .map-point.active > span { transform: scale(1.4); background: var(--lime); }
.station-point { opacity: .28; pointer-events: none; transition: opacity .3s; }
.station-point > span { width: 19px; height: 19px; background: white; }
.station-point.orange > span { border-color: #f09931; }
.station-point.blue > span { border-color: #1595c2; }
.station-point.green > span { border-color: #00a84f; }
.atlas[data-lens="mobility"] .station-point { opacity: 1; pointer-events: auto; }
.atlas[data-lens="mobility"] .history-point { opacity: .22; }
.atlas[data-lens="development"] .map-point { opacity: 1; pointer-events: auto; }
.map-compass { position: absolute; right: 25px; top: 25px; display: grid; justify-items: center; color: var(--green-deep); font-size: 9px; font-weight: 800; }
.map-compass i { width: 1px; height: 40px; background: var(--green-deep); position: relative; }
.map-compass i::before { content: ""; position: absolute; top: -1px; left: -4px; border-width: 0 4px 8px; border-style: solid; border-color: transparent transparent var(--green-deep); }
.map-legend { position: absolute; left: 25px; bottom: 22px; z-index: 7; display: flex; flex-wrap: wrap; gap: 12px; max-width: 420px; padding: 9px 12px; background: rgba(249,248,243,.85); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.legend-history { background: var(--green); }
.legend-orange { background: #f09931; }
.legend-blue { background: #1595c2; }
.legend-green { background: #00a84f; }
.wmata-space { --rx: 0deg; --ry: 0deg; position: absolute; inset: 85px 22px 24px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.wmata-space::before { content: ""; position: absolute; inset: 8% 12% 5%; border-radius: 50%; background: rgba(141,189,56,.18); filter: blur(45px); transform: translateZ(-100px); }
.wmata-map-plane { position: absolute; inset: 6% 18% 9% 4%; overflow: hidden; border: 8px solid rgba(255,255,255,.92); border-radius: 4px; background: white; box-shadow: 35px 55px 80px rgba(0,0,0,.42); transform: translateZ(10px) rotateY(6deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.wmata-map-plane::after { content: "WMATA"; position: absolute; right: 14px; bottom: 8px; color: rgba(0,0,0,.2); font-family: var(--condensed); font-size: 18px; font-weight: 800; letter-spacing: .1em; pointer-events: none; }
.wmata-map-plane > img { width: 100%; height: 100%; object-fit: contain; background: white; }
.map-open-link { position: absolute; z-index: 4; right: 12px; top: 12px; padding: 7px 10px; color: white; background: rgba(4,45,32,.86); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.map-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 30% 72%, rgba(255,255,255,.12)); transform: translateZ(12px); }
.wmata-station-stack { position: absolute; z-index: 4; right: 0; top: 9%; width: 190px; display: grid; gap: 10px; transform: translateZ(110px); opacity: .2; pointer-events: none; transition: opacity .35s, transform .6s cubic-bezier(.16,1,.3,1); }
.station-chip { position: relative; min-height: 62px; padding: 10px 12px 10px 38px; display: grid; justify-items: start; border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(6,27,20,.83); backdrop-filter: blur(9px); box-shadow: 0 14px 35px rgba(0,0,0,.25); text-align: left; transform: translateX(45px); transition: transform .25s, border-color .25s; }
.station-chip:hover, .station-chip.active { transform: translateX(0) translateZ(12px); border-color: var(--lime); }
.station-chip i { position: absolute; left: 13px; top: 21px; width: 15px; height: 15px; border: 4px solid currentColor; border-radius: 50%; background: white; }
.station-chip.orange { color: #f09931; }
.station-chip.blue { color: #1595c2; }
.station-chip.green { color: #00a84f; }
.station-chip span { color: rgba(255,255,255,.45); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.station-chip strong { color: white; font-size: 11px; }
.heritage-orbit { position: absolute; z-index: 5; inset: 8% 1% 2% 2%; pointer-events: none; transform-style: preserve-3d; }
.heritage-chip { position: absolute; pointer-events: auto; padding: 9px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: rgba(255,255,255,.75); background: rgba(6,27,20,.72); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; box-shadow: 0 10px 25px rgba(0,0,0,.2); transition: transform .25s, color .25s, border-color .25s; }
.heritage-chip:hover, .heritage-chip.active { color: var(--green-deep); background: var(--lime); border-color: var(--lime); transform: translateZ(35px) scale(1.08); }
.heritage-chip:nth-child(1) { left: 2%; top: 18%; transform: translateZ(85px); }
.heritage-chip:nth-child(2) { right: 4%; top: 4%; transform: translateZ(55px); }
.heritage-chip:nth-child(3) { right: 0; top: 43%; transform: translateZ(95px); }
.heritage-chip:nth-child(4) { left: 8%; bottom: 11%; transform: translateZ(70px); }
.heritage-chip:nth-child(5) { left: 35%; bottom: 1%; transform: translateZ(110px); }
.heritage-chip:nth-child(6) { right: 4%; bottom: 12%; transform: translateZ(50px); }
.atlas[data-lens="mobility"] .wmata-station-stack { opacity: 1; pointer-events: auto; transform: translateZ(140px); }
.atlas[data-lens="mobility"] .heritage-orbit { opacity: .12; pointer-events: none; }
.atlas[data-lens="mobility"] .wmata-map-plane { transform: translate3d(-4%, 0, 45px) rotateY(2deg) rotateX(0); }
.atlas[data-lens="development"] .wmata-station-stack { opacity: 1; pointer-events: auto; transform: translateZ(130px); }
.atlas[data-lens="development"] .heritage-orbit { opacity: 1; }
.atlas[data-lens="development"] .wmata-map-plane { transform: translate3d(-3%, 0, -15px) rotateY(10deg) rotateX(4deg); }
.atlas-story { padding: 32px 34px 42px; display: flex; flex-direction: column; background: #fffefa; color: var(--green-deep); }
.atlas-photo { position: relative; height: 205px; margin: -6px -8px 30px; overflow: hidden; background: var(--cream); box-shadow: 0 18px 40px rgba(4,45,32,.12); }
.atlas-photo img { height: 100%; object-fit: cover; transition: opacity .25s, transform .6s cubic-bezier(.16,1,.3,1); }
.atlas-photo span { position: absolute; left: 13px; bottom: 12px; padding: 5px 8px; color: white; background: rgba(4,45,32,.8); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.atlas-ward { margin-bottom: 75px; color: rgba(255,255,255,.45); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.atlas-story h3 { margin-bottom: 22px; font-family: var(--condensed); font-size: 45px; line-height: .98; text-transform: uppercase; }
.atlas-story > p:not(.eyebrow) { color: rgba(255,255,255,.65); font-size: 14px; }
.atlas-lesson { margin-top: 25px; padding: 20px 0; display: grid; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.atlas-lesson span { color: var(--lime); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.atlas-lesson strong { margin-top: 5px; font-family: var(--condensed); font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.atlas-actions { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.atlas-story .arrow-link { color: white; }
.atlas-next { border: 0; background: none; color: #bad978; font-size: 11px; font-weight: 800; }
.field-notebook { margin-top: 25px; padding: 14px; display: grid; gap: 10px; background: rgba(255,255,255,.06); border-left: 2px solid var(--lime); }
.field-notebook > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.field-notebook span { color: var(--lime); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.field-notebook strong { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 600; }
.field-notebook b { color: white; font-size: 12px; }
.field-dots { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.field-dots i { height: 3px; background: rgba(255,255,255,.16); }
.field-dots i.visited { background: var(--lime); }
.atlas-counter { margin-top: 27px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.45); font-family: var(--condensed); font-size: 13px; }
.atlas-counter i { flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.atlas-footer { padding: 28px 32px; display: grid; grid-template-columns: 1fr auto .8fr; gap: 35px; align-items: center; color: white; background: #0a7140; }
.atlas-footer strong { font-family: var(--condensed); font-size: 24px; text-transform: uppercase; }
.atlas-footer p { margin: 3px 0 0; max-width: 470px; color: rgba(255,255,255,.7); font-size: 10px; }
.atlas-footer .button-ghost { min-height: 42px; font-size: 10px; }
.atlas-guides { display: grid; gap: 5px; justify-items: end; }
.atlas-guides a { color: rgba(255,255,255,.85); font-size: 10px; font-weight: 700; }
.atlas-map { background: linear-gradient(rgba(219,236,214,.78), rgba(219,236,214,.88)), url("assets/wmata-system-map.jpg") center/contain no-repeat; }
.wmata-space { inset: 76px 18px 18px; transform: none !important; }
.wmata-map-plane { inset: 0; border: 0; opacity: .24; box-shadow: none; transform: none !important; }
.wmata-map-plane > img { object-fit: contain; mix-blend-mode: multiply; }
.wmata-station-stack, .atlas[data-lens="heritage"] .wmata-station-stack { opacity: 1; pointer-events: auto; transform: translateZ(50px); }
.heritage-orbit, .atlas[data-lens="mobility"] .heritage-orbit { opacity: 1; pointer-events: none; }
.ward-image-credit { margin: 14px 0 0; color: var(--muted); font-size: 9px; }

.ward-deck { background: #faf9f5; }
.ward-stage { position: relative; height: 520px; overflow: hidden; perspective: 1500px; transform-style: preserve-3d; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, #eef2e7, #e1e8d8); }
.ward-carousel { --ward-index: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.ward-card { position: absolute; left: 50%; top: 48%; width: 255px; height: 350px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; border: 1px solid rgba(255,255,255,.75); color: white; background: linear-gradient(0deg, rgba(4,45,32,.88), rgba(4,45,32,.08)), var(--ward-image) center/cover; box-shadow: 0 35px 65px rgba(4,45,32,.18); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.16,1,.3,1), opacity .5s, filter .5s; }
.ward-card::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.32); transform: translateZ(22px); pointer-events: none; }
.ward-card > * { position: relative; z-index: 2; transform: translateZ(35px); }
.ward-card span { font-size: 9px; letter-spacing: .17em; }
.ward-card > strong { font-family: var(--condensed); font-size: 90px; line-height: .78; }
.ward-card small { margin-top: 12px; font-weight: 700; }
.ward-card.priority { border: 3px solid var(--lime); }
.ward-card.priority::after { content: "DEEPER FOCUS"; position: absolute; top: 18px; right: -35px; width: 125px; padding: 5px; color: var(--green-deep); background: var(--lime); transform: rotate(45deg) translateZ(30px); font-size: 7px; font-weight: 900; text-align: center; }
.ward-card:not(.active) { filter: saturate(.65) brightness(.75); }
.ward-stage-controls { position: absolute; z-index: 20; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 18px; transform: translateX(-50%); }
.ward-stage-controls button { width: 43px; height: 43px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); background: rgba(255,255,255,.82); font-size: 18px; }
.ward-stage-controls span { color: var(--green-deep); font-family: var(--condensed); font-size: 16px; }
.ward-stage-controls b { color: var(--green); font-size: 24px; }
.ward-brief { margin-top: 20px; padding: 42px; display: grid; grid-template-columns: 120px 1fr 1.15fr; gap: 38px; align-items: start; border: 1px solid var(--line); background: white; box-shadow: 0 20px 60px rgba(4,45,32,.08); }
.ward-brief-number { display: grid; color: var(--green); }
.ward-brief-number span { font-size: 9px; letter-spacing: .16em; font-weight: 800; }
.ward-brief-number strong { font-family: var(--condensed); font-size: 115px; line-height: .75; }
.ward-brief h3 { margin: 0 0 14px; font-family: var(--condensed); font-size: 41px; line-height: 1; text-transform: uppercase; }
.ward-brief > div:nth-child(2) > p:last-child { color: var(--muted); }
.ward-brief-grid { display: grid; gap: 12px; }
.ward-brief-grid div { padding: 15px; display: grid; background: var(--cream); }
.ward-brief-grid span { color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.ward-brief-grid strong { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.ward-brief-grid .ward-stat { background: #e5efda; }
.ward-brief > .arrow-link { grid-column: 2 / -1; }

.ward-stage { height: 620px; }
.ward-card { width: 230px; height: 350px; padding: 0; cursor: pointer; background: linear-gradient(0deg, rgba(3,37,25,.93), rgba(3,37,25,.02) 72%), var(--ward-image) center/cover no-repeat; }
.ward-card::before { inset: 12px; }
.ward-card > * { transform: none; }
.ward-card-cover { position: absolute; z-index: 3; inset: auto 22px 22px; display: flex; flex-direction: column; align-items: flex-start; transition: .55s cubic-bezier(.16,1,.3,1); }
.ward-card-cover span { font-size: 9px; letter-spacing: .17em; }
.ward-card-cover strong { font-family: var(--condensed); font-size: 82px; line-height: .78; }
.ward-card-cover small { margin-top: 12px; font-weight: 700; }
.ward-card-detail { position: absolute; z-index: 4; inset: 0; padding: 27px 30px 25px 205px; display: grid; align-content: end; gap: 8px; opacity: 0; pointer-events: none; color: white; background: linear-gradient(90deg, rgba(3,38,27,.05) 0 30%, rgba(3,38,27,.94) 50% 100%); transform: translateX(20px); transition: opacity .35s .18s, transform .5s cubic-bezier(.16,1,.3,1); }
.ward-card.active { width: min(570px, 70vw); height: 465px; filter: saturate(1.05) brightness(1); }
.ward-card.active .ward-card-cover { inset: 26px auto auto 27px; width: 150px; }
.ward-card.active .ward-card-cover strong { font-size: 70px; }
.ward-card.active .ward-card-detail { opacity: 1; pointer-events: auto; transform: translateX(0); }
.ward-card-detail .ward-landmark { color: var(--lime); font-size: 8px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.ward-card-detail h3 { margin: 0; font-family: var(--condensed); font-size: 28px; line-height: 1; text-transform: uppercase; }
.ward-card-detail > p { margin: 0; max-height: 85px; overflow: hidden; color: rgba(255,255,255,.76); font-size: 10px; line-height: 1.5; }
.ward-card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 3px; }
.ward-card-facts div { padding: 8px 9px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.ward-card-facts span { display: block; color: var(--lime); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ward-card-facts strong { display: block; margin-top: 3px; font-size: 9px; line-height: 1.35; }
.ward-card-detail a { justify-self: start; margin-top: 2px; color: white; font-size: 9px; font-weight: 800; }
.ward-card.priority::after { z-index: 8; }
.ward-stage-controls { bottom: 16px; }

.field-notes-section { background: white; }
.analysis-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.analysis-card { min-height: 500px; padding: 32px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fbfaf6; transition: transform .25s, box-shadow .25s; }
.analysis-card:hover { transform: translateY(-7px); box-shadow: 0 25px 55px rgba(4,45,32,.1); }
.analysis-card.featured { background: #e7efdc; }
.analysis-meta { display: flex; justify-content: space-between; gap: 15px; color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.analysis-meta time { color: var(--muted); }
.analysis-figure { margin: 55px 0 18px; color: var(--green); font-family: var(--condensed); font-size: 80px; line-height: .8; }
.analysis-card h3 { font-family: var(--condensed); font-size: 33px; line-height: 1; text-transform: uppercase; }
.analysis-card > p { color: var(--muted); font-size: 13px; }
.analysis-question { margin-top: auto; padding: 18px 0; display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analysis-question span { color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.analysis-question strong { margin-top: 4px; font-size: 12px; }
.analysis-card > a { margin-top: 22px; color: var(--green); font-size: 11px; font-weight: 800; }
.analysis-disclaimer { margin: 22px 0 0; color: var(--muted); font-size: 10px; }

.development-xray { position: relative; min-height: 980px; overflow: hidden; color: white; background: radial-gradient(circle at 72% 45%, #176541 0, #082f22 35%, #041b14 75%); }
.development-xray::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(700px) rotateX(65deg) scale(1.8) translateY(18%); transform-origin: bottom; }
.xray-shell { position: relative; z-index: 2; width: min(1280px, calc(100% - 40px)); min-height: 980px; margin: auto; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 25px; }
.xray-copy { padding: 80px 0; position: relative; z-index: 5; }
.xray-copy h2 { font-size: clamp(58px, 6vw, 88px); }
.xray-copy > p:not(.eyebrow) { max-width: 580px; color: rgba(255,255,255,.65); }
.xray-readout { min-height: 180px; margin: 40px 0 25px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.xray-readout > span { color: var(--lime); font-family: var(--condensed); font-size: 17px; }
.xray-readout h3 { margin: 8px 0; font-family: var(--condensed); font-size: 32px; line-height: 1; text-transform: uppercase; }
.xray-readout p { margin: 0; color: rgba(255,255,255,.58); font-size: 13px; }
.xray-controls { display: grid; gap: 20px; }
.xray-controls label { color: rgba(255,255,255,.65); }
.xray-controls input { height: 4px; padding: 0; accent-color: var(--lime); border: 0; box-shadow: none; }
.xray-controls > div { display: flex; gap: 8px; }
.xray-controls button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.25); color: white; background: transparent; font-size: 11px; font-weight: 800; }
.xray-controls button:hover { color: var(--green-deep); background: var(--lime); border-color: var(--lime); }
.xray-layer-nav { margin-top: 28px; display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid rgba(255,255,255,.17); }
.xray-layer-nav button { min-height: 58px; padding: 8px 5px; display: grid; place-items: center; border: 0; border-right: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.52); background: transparent; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.xray-layer-nav button:last-child { border-right: 0; }
.xray-layer-nav button span { color: var(--lime); font-family: var(--condensed); font-size: 15px; }
.xray-layer-nav button:hover, .xray-layer-nav button.active { color: var(--green-deep); background: var(--lime); }
.xray-layer-nav button:hover span, .xray-layer-nav button.active span { color: var(--green-deep); }
.xray-stage { --rx: 0deg; --ry: 0deg; position: relative; height: 850px; perspective: 1500px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; isolation: isolate; }
.xray-atmosphere { position: absolute; inset: 15%; border-radius: 50%; background: rgba(141,189,56,.18); filter: blur(80px); }
.site-advance { position: absolute; z-index: 30; inset: 12% 8% 10%; border: 0; color: transparent; background: transparent; cursor: pointer; }
.site-advance span { position: absolute; left: 50%; bottom: 2%; padding: 10px 15px; border: 1px solid rgba(5,101,47,.22); border-radius: 30px; color: var(--green); background: rgba(255,255,255,.88); box-shadow: 0 8px 25px rgba(4,48,29,.1); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); transition: .25s ease; }
.site-advance:hover span { color: white; background: var(--green); transform: translateX(-50%) translateY(-3px); }
.site-world { position: absolute; left: 50%; top: 49%; width: 590px; height: 440px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-34deg); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.site-base { position: absolute; inset: 0; overflow: visible; transform-style: preserve-3d; border: 2px solid #6f8a5f; border-radius: 8px; background: #678b48; box-shadow: 28px 38px 0 #3e5c34, 35px 48px 60px rgba(4,48,29,.25); transition: background .8s ease; }
.site-road { position: absolute; z-index: 1; left: -45px; right: -45px; bottom: -68px; height: 80px; overflow: hidden; background: #3d4543; box-shadow: inset 0 8px #d8d5c8; }
.site-road::before { content: ""; position: absolute; left: 0; right: 0; top: 48px; height: 3px; background: repeating-linear-gradient(90deg, #f2ce59 0 45px, transparent 45px 75px); }
.site-road i { position: absolute; top: 10px; width: 34px; height: 8px; background: white; opacity: .75; }
.site-road i:nth-child(1) { left: 15%; } .site-road i:nth-child(2) { left: 48%; } .site-road i:nth-child(3) { left: 80%; }
.site-lot-lines { position: absolute; z-index: 2; inset: 25px; border: 2px dashed rgba(238,247,209,.65); opacity: .7; transition: opacity .5s; }
.site-grass { position: absolute; z-index: 3; inset: 18px; opacity: 0; background: repeating-linear-gradient(90deg, #7fae4f 0 14px, #87b957 14px 28px); transition: opacity .7s, transform .7s; transform: scale(.88); }
.site-path { position: absolute; z-index: 15; left: 47%; bottom: -3px; width: 55px; height: 178px; opacity: 0; background: repeating-linear-gradient(0deg, #d2c7ab 0 15px, #aaa188 15px 17px); transform-origin: bottom; transition: opacity .6s, transform .8s; transform: scaleY(.2); }
.tree { position: absolute; z-index: 8; width: 72px; height: 72px; transform-style: preserve-3d; transition: opacity .65s, transform .85s cubic-bezier(.16,1,.3,1); }
.tree i { position: absolute; left: 31px; top: 28px; width: 10px; height: 75px; border-radius: 5px; background: #5b3d25; transform: rotateX(-58deg); transform-origin: top; }
.tree b, .tree::before, .tree::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #9bc85d, #296d36 68%); box-shadow: 0 9px 20px rgba(12,55,28,.28); }
.tree b { inset: 4px; } .tree::before { width: 42px; height: 42px; left: -5px; top: 25px; } .tree::after { width: 46px; height: 46px; right: -7px; top: 19px; }
.tree-1 { left: 8%; top: 12%; } .tree-2 { left: 37%; top: 8%; transform: scale(.88); } .tree-3 { right: 9%; top: 13%; transform: scale(1.08); } .tree-4 { left: 13%; bottom: 14%; transform: scale(.82); } .tree-5 { right: 13%; bottom: 11%; transform: scale(.92); }
.plan-table { position: absolute; z-index: 18; left: 27%; top: 21%; width: 270px; height: 185px; opacity: 0; background: #c59758; box-shadow: 15px 18px 0 #8a633a, 18px 24px 25px rgba(37,28,18,.25); transform: translateZ(50px) scale(.7); transition: .7s cubic-bezier(.16,1,.3,1); }
.plan-sheet { position: absolute; inset: 14px; background-color: #f7f3dc; background-image: linear-gradient(#4382a0 1px, transparent 1px), linear-gradient(90deg, #4382a0 1px, transparent 1px); background-size: 17px 17px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.plan-sheet::after { content: "SITE PLAN / HOUSING CONCEPT / FARM + PLAZA"; position: absolute; inset: 20px; border: 4px double #357493; color: #26657e; font: 800 14px/1.4 Arial, sans-serif; padding: 15px; }
.plan-table > i { position: absolute; top: 185px; width: 14px; height: 70px; background: #77512f; transform: rotateX(-58deg); transform-origin: top; } .plan-table > i:nth-of-type(1) { left: 25px; } .plan-table > i:nth-of-type(2) { right: 25px; }
.survey-pin { position: absolute; z-index: 16; width: 10px; height: 10px; opacity: 0; border: 4px solid #f2b733; border-radius: 50%; box-shadow: 0 0 0 4px rgba(242,183,51,.25); transition: opacity .45s; }
.pin-1 { left: 22%; top: 24%; } .pin-2 { right: 22%; top: 24%; } .pin-3 { left: 22%; bottom: 22%; } .pin-4 { right: 22%; bottom: 22%; }
.excavation { position: absolute; z-index: 10; left: 18%; right: 18%; top: 17%; bottom: 17%; overflow: hidden; opacity: 0; border: 13px solid #9a7042; background: #4c3323; box-shadow: inset 18px 20px 30px rgba(0,0,0,.45); transform: scale(.5); transition: .75s cubic-bezier(.16,1,.3,1); }
.excavation span { position: absolute; inset: 20px; border: 4px dashed #d9ae65; opacity: .6; }
.foundation-grid { position: absolute; z-index: 12; left: 21%; right: 21%; top: 20%; bottom: 20%; opacity: 0; border: 9px solid #d5d3c8; background: repeating-linear-gradient(90deg, transparent 0 49px, #b8b9b1 49px 57px), repeating-linear-gradient(0deg, transparent 0 39px, #c7c7bd 39px 47px); transform: translateZ(5px); transition: opacity .55s .15s; }
.foundation-grid i { position: absolute; width: 14px; height: 14px; background: #ecebe4; box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.foundation-grid i:nth-child(1) { left: 3%; top: 3%; } .foundation-grid i:nth-child(2) { left: 48%; top: 3%; } .foundation-grid i:nth-child(3) { right: 3%; top: 3%; } .foundation-grid i:nth-child(4) { left: 3%; bottom: 3%; } .foundation-grid i:nth-child(5) { left: 48%; bottom: 3%; } .foundation-grid i:nth-child(6) { right: 3%; bottom: 3%; }
.crane { position: absolute; z-index: 25; right: 4%; top: 4%; width: 18px; height: 330px; opacity: 0; background: repeating-linear-gradient(0deg, #e6a821 0 15px, #473b25 15px 20px); transform: translateZ(20px) rotateX(-58deg) scaleY(.2); transform-origin: bottom; transition: .8s cubic-bezier(.16,1,.3,1); }
.crane span { position: absolute; left: -135px; top: 0; width: 255px; height: 12px; background: repeating-linear-gradient(90deg, #e6a821 0 17px, #473b25 17px 22px); }
.crane b { position: absolute; left: -100px; top: 9px; width: 2px; height: 120px; background: #313b37; }
.crane b::after { content: ""; position: absolute; left: -6px; bottom: -9px; width: 13px; height: 13px; border: 3px solid #313b37; border-top: 0; border-radius: 0 0 10px 10px; }
.construction-frame { position: absolute; z-index: 20; left: 21%; right: 21%; bottom: 20%; height: 270px; opacity: 0; transform-style: preserve-3d; transform: rotateX(-58deg) translateY(45%) scaleY(.15); transform-origin: bottom; transition: .9s cubic-bezier(.16,1,.3,1); }
.frame-floor { position: absolute; left: 0; right: 0; height: 42px; border: 5px solid #be743e; background: repeating-linear-gradient(90deg, transparent 0 45px, #9c5d36 45px 52px); box-shadow: inset 0 -5px #b9b7ac; }
.floor-1 { bottom: 0; } .floor-2 { bottom: 53px; } .floor-3 { bottom: 106px; } .floor-4 { bottom: 159px; } .floor-5 { bottom: 212px; }
.final-building { position: absolute; z-index: 22; left: 15%; right: 15%; bottom: 19%; height: 330px; opacity: 0; transform-style: preserve-3d; transform: rotateX(-58deg) translateY(55%) scaleY(.12); transform-origin: bottom; transition: 1s cubic-bezier(.16,1,.3,1); filter: drop-shadow(14px 20px 15px rgba(33,42,29,.25)); }
.building-wing, .building-center { position: absolute; bottom: 0; overflow: hidden; border-bottom: 13px solid #413a34; box-shadow: inset 0 0 0 2px rgba(65,42,30,.2); }
.building-wing { width: 39%; height: 265px; background: linear-gradient(90deg, #9c4f32, #c16d45 45%, #92472e); }
.wing-left { left: 0; } .wing-right { right: 0; }
.building-center { z-index: 2; left: 33%; width: 34%; height: 315px; background: linear-gradient(90deg, #263f38, #3d5e52 48%, #1d342d); }
.brick-windows, .center-windows { position: absolute; inset: 18px 13px 30px; background: repeating-linear-gradient(90deg, #bfd6d8 0 20px, #243b38 20px 27px, transparent 27px 39px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(246,223,165,.9) 35px 55px, transparent 55px 68px); }
.center-windows { background: repeating-linear-gradient(90deg, #d5e8e6 0 27px, #17342d 27px 34px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,229,154,.82) 39px 63px, transparent 63px 76px); }
.building-center strong { position: absolute; z-index: 4; left: 50%; bottom: 8px; width: 130px; color: white; font: 800 8px Arial, sans-serif; letter-spacing: .11em; text-align: center; transform: translateX(-50%); }
.roof-farm { position: absolute; z-index: 5; left: 8%; right: 8%; top: 8px; height: 38px; border: 4px solid #e8e6d8; background: #708f4c; transform: skewX(-25deg); }
.roof-farm i { float: left; width: 12%; height: 30px; margin: 5px 2%; background: repeating-linear-gradient(90deg, #274e2b 0 4px, #8aba4f 4px 8px); }
.solar-array { position: absolute; right: 5%; top: 5px; width: 32%; height: 29px; background: repeating-linear-gradient(90deg, #244d62 0 13px, #bdd4da 13px 15px); }
.balcony { position: absolute; z-index: 5; width: 30%; height: 7px; border: 2px solid #292e2b; background: #e6dfcf; } .balcony-1 { left: 4%; top: 90px; } .balcony-2 { right: 4%; top: 145px; }
.community-ground { position: absolute; z-index: 26; inset: 0; opacity: 0; transition: opacity .8s .45s; pointer-events: none; }
.garden-bed { position: absolute; bottom: 7%; width: 90px; height: 25px; border: 5px solid #754c2b; background: repeating-linear-gradient(90deg, #346e36 0 7px, #75ae48 7px 13px); box-shadow: 5px 6px 0 #4d321f; } .bed-1 { left: 7%; } .bed-2 { left: 25%; } .bed-3 { right: 7%; }
.person { position: absolute; bottom: 10%; width: 10px; height: 22px; border-radius: 5px 5px 2px 2px; background: #d48656; box-shadow: 0 -8px 0 -1px #593a2b; } .person-1 { left: 18%; } .person-2 { left: 46%; background: #285b46; } .person-3 { right: 22%; background: #e8b13f; } .person-4 { right: 38%; background: #984331; }
.community-sign { position: absolute; right: 5%; bottom: 17%; padding: 7px; border: 3px solid white; color: white; background: var(--green); font: 800 9px/1 Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--green); }
.xray-stage[data-phase="1"] .site-base { background: #81ad50; }
.xray-stage[data-phase="1"] .site-grass, .xray-stage[data-phase="2"] .site-grass { opacity: 1; transform: scale(1); }
.xray-stage[data-phase="1"] .tree-2, .xray-stage[data-phase="1"] .tree-4, .xray-stage[data-phase="2"] .tree-2, .xray-stage[data-phase="2"] .tree-4 { opacity: 0; transform: scale(.1) translateY(80px); }
.xray-stage[data-phase="2"] .plan-table { opacity: 1; transform: translateZ(50px) scale(1); }
.xray-stage[data-phase="2"] .survey-pin, .xray-stage[data-phase="3"] .survey-pin { opacity: 1; }
.xray-stage[data-phase="3"] .tree, .xray-stage[data-phase="4"] .tree { opacity: .35; transform: scale(.65); }
.xray-stage[data-phase="3"] .excavation, .xray-stage[data-phase="4"] .excavation { opacity: 1; transform: scale(1); }
.xray-stage[data-phase="3"] .foundation-grid, .xray-stage[data-phase="4"] .foundation-grid { opacity: 1; }
.xray-stage[data-phase="4"] .construction-frame { opacity: 1; transform: rotateX(-58deg) translateY(0) scaleY(1); }
.xray-stage[data-phase="4"] .crane { opacity: 1; transform: translateZ(20px) rotateX(-58deg) scaleY(1); }
.xray-stage[data-phase="5"] .site-base { background: #7eaa50; }
.xray-stage[data-phase="5"] .tree { opacity: 1; transform: scale(.62); }
.xray-stage[data-phase="5"] .tree-1 { left: 3%; top: 5%; } .xray-stage[data-phase="5"] .tree-2 { left: auto; right: 2%; top: 4%; } .xray-stage[data-phase="5"] .tree-3 { right: 2%; top: auto; bottom: 6%; } .xray-stage[data-phase="5"] .tree-4 { left: 2%; bottom: 7%; } .xray-stage[data-phase="5"] .tree-5 { opacity: 0; }
.xray-stage[data-phase="5"] .final-building { opacity: 1; transform: rotateX(-58deg) translateY(0) scaleY(1); }
.xray-stage[data-phase="5"] .community-ground, .xray-stage[data-phase="5"] .site-path { opacity: 1; }
.xray-stage[data-phase="5"] .site-path { transform: scaleY(1); }
.xray-stage[data-phase="5"] .site-lot-lines { opacity: 0; }
.xray-shadow { position: absolute; left: 49%; bottom: 13%; width: 560px; height: 120px; border-radius: 50%; background: rgba(31,61,39,.2); filter: blur(25px); transform: translateX(-50%) rotateX(70deg); }
.phase-meter { position: absolute; z-index: 31; left: 15%; right: 15%; bottom: 6%; height: 3px; overflow: hidden; background: rgba(5,101,47,.12); }
.phase-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lime), var(--green)); transition: width .7s cubic-bezier(.16,1,.3,1); }
.xray-axis { position: absolute; right: 5%; top: 16%; bottom: 17%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between; color: rgba(255,255,255,.45); font-size: 8px; letter-spacing: .15em; }
.xray-axis i { flex: 1; width: 1px; margin: 10px 0; background: linear-gradient(var(--lime), rgba(255,255,255,.15)); }

/* Photographic development story */
.xray-shell { grid-template-columns: .68fr 1.32fr; gap: 40px; }
.xray-layer-nav { grid-template-columns: repeat(9, 1fr); }
.xray-layer-nav button { min-width: 0; padding-inline: 2px; }
.xray-layer-nav button span { font-size: 13px; }
.development-photo { position: absolute; z-index: 4; inset: 7% 4% 14% 2%; margin: 0; overflow: hidden; border: 1px solid rgba(5,101,47,.18); border-radius: 5px; background: #dfe8d9; box-shadow: 0 30px 80px rgba(13,50,30,.2); transform: perspective(1400px) rotateY(-2deg) translateZ(0); }
.development-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(3,35,22,.35)); }
.development-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .28s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .45s ease; }
.development-photo img.changing { opacity: .35; transform: scale(1.012); }
.development-photo figcaption { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; color: white; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.development-photo figcaption span { font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.development-photo figcaption strong { font-family: var(--condensed); font-size: 20px; letter-spacing: .04em; }
.history-layer { position: absolute; z-index: 35; right: 0; bottom: 5%; width: min(340px, 46%); padding: 24px 26px; border-top: 4px solid var(--lime); color: white; background: rgba(3,52,34,.94); box-shadow: 0 18px 45px rgba(1,31,19,.28); backdrop-filter: blur(12px); transition: opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1); }
.history-layer.changing { opacity: 0; transform: translateY(16px); }
.history-layer > span { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.history-layer h3 { margin: 8px 0 9px; color: white; font-family: var(--condensed); font-size: 26px; line-height: 1; text-transform: uppercase; }
.history-layer p { margin: 0; color: rgba(255,255,255,.74); font-size: 11px; line-height: 1.55; }
.history-layer a { display: inline-block; margin-top: 14px; color: white; font-size: 9px; font-weight: 800; }
.build-message { position: absolute; z-index: 38; left: 5%; top: 10%; max-width: 285px; padding: 14px 17px; display: grid; border-left: 4px solid var(--lime); color: white; background: rgba(3,52,34,.92); box-shadow: 0 16px 35px rgba(2,30,19,.25); opacity: 0; transform: translateY(-15px) scale(.96); transition: .38s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.build-message.show { opacity: 1; transform: translateY(0) scale(1); }
.build-message span { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.build-message strong { margin-top: 3px; font-family: var(--condensed); font-size: 19px; line-height: 1.05; text-transform: uppercase; }
.site-advance { inset: 7% 4% 14% 2%; }
.site-advance span { left: 20px; bottom: 18px; transform: none; }
.site-advance:hover span { transform: translateY(-3px); }
.xray-shadow { left: 47%; bottom: 9%; width: 72%; height: 90px; opacity: .45; }
.phase-meter { left: 3%; right: 3%; bottom: 1.5%; }
.xray-axis { right: -1%; top: 10%; bottom: 19%; }

.section-index { margin-bottom: 45px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .17em; }
.section-index::after { content: ""; width: 75px; height: 1px; background: currentColor; }
.section-index span { color: var(--lime); font-family: var(--condensed); font-size: 19px; }
.section-index.dark { color: var(--muted); }

.split-layout { display: grid; grid-template-columns: .9fr 1fr; gap: 110px; align-items: center; }
.image-stack { position: relative; }
.image-stack img { height: 640px; object-fit: cover; border-radius: 5px; }
.image-stack::before { content: ""; position: absolute; left: -22px; bottom: -22px; width: 70%; height: 78%; border: 2px solid var(--lime); z-index: -1; }
.image-note { position: absolute; right: -50px; bottom: 45px; background: var(--green); color: white; padding: 24px 30px; display: grid; min-width: 230px; }
.image-note strong { font-family: var(--condensed); text-transform: uppercase; font-size: 24px; }
.image-note span { color: rgba(255,255,255,.7); font-size: 13px; }
.large-copy { color: var(--green-deep); font-size: 19px; line-height: 1.65; }
.section-copy > p:not(.eyebrow) { color: var(--muted); }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 38px 0; padding-top: 30px; border-top: 1px solid var(--line); }
.mission-grid span { color: var(--lime); font-family: var(--condensed); font-size: 16px; }
.mission-grid h3 { margin: 4px 0 8px; font-family: var(--condensed); font-size: 27px; text-transform: uppercase; }
.mission-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.arrow-link { display: inline-flex; gap: 12px; align-items: center; padding: 0; border: 0; background: none; color: var(--green); font-weight: 800; font-size: 13px; }
.arrow-link span { transition: transform .2s; }
.arrow-link:hover span { transform: translateX(5px); }

.program { background: var(--cream); }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { color: var(--muted); margin: 0; }
.pillar-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #b6b7ae; }
.pillar-tab { border: 0; background: none; padding: 18px 10px; color: var(--muted); font-family: var(--condensed); font-size: 22px; font-weight: 700; text-transform: uppercase; position: relative; }
.pillar-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--green); transform: scaleX(0); transition: transform .25s; }
.pillar-tab.active { color: var(--green); }
.pillar-tab.active::after { transform: scaleX(1); }
.pillar-display { margin-top: 40px; display: grid; grid-template-columns: 1.25fr .75fr; min-height: 490px; background: white; box-shadow: 0 15px 50px rgba(4,45,32,.08); }
.pillar-photo { position: relative; min-height: 460px; overflow: hidden; }
.pillar-photo img { height: 100%; object-fit: cover; transition: opacity .18s; }
.pillar-photo > span { position: absolute; bottom: -23px; right: 20px; color: rgba(255,255,255,.85); font-family: var(--condensed); font-size: 130px; font-weight: 800; line-height: 1; }
.pillar-content { padding: 65px 55px; align-self: center; }
.pillar-content h3 { margin-bottom: 20px; font-family: var(--condensed); font-size: 41px; line-height: 1; text-transform: uppercase; }
.pillar-content > p:not(.eyebrow) { color: var(--muted); }
.pillar-content ul { padding: 0; margin: 26px 0 0; list-style: none; display: grid; gap: 11px; }
.pillar-content li { padding-left: 24px; position: relative; font-size: 14px; font-weight: 600; }
.pillar-content li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); position: absolute; left: 0; top: 8px; }

.journey { background: var(--green-deep); color: white; overflow: hidden; }
.section-heading.light > p { color: rgba(255,255,255,.65); }
.journey-controls { display: flex; gap: 10px; margin-bottom: 50px; }
.journey-filter { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 10px 18px; color: white; background: transparent; font-size: 12px; font-weight: 700; }
.journey-filter.active { color: var(--green-deep); background: var(--lime); border-color: var(--lime); }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.timeline::before { content: ""; position: absolute; height: 1px; background: rgba(255,255,255,.25); top: 52px; left: 0; right: 0; }
.timeline article { padding-right: 26px; transition: opacity .25s, transform .25s; }
.timeline article.filtered-out { display: none; }
.timeline-month { display: block; color: #b8d873; font-family: var(--condensed); font-size: 17px; font-weight: 700; }
.timeline-dot { display: block; width: 14px; height: 14px; margin: 16px 0 29px; border: 3px solid var(--green-deep); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px var(--lime); position: relative; z-index: 2; }
.timeline h3 { font-family: var(--condensed); font-size: 23px; line-height: 1; text-transform: uppercase; }
.timeline p { color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.6; }

.academy-section { padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, var(--paper), #f3f7ec); }
.academy-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 35px 70px; align-items: end; margin-bottom: 50px; }
.academy-intro h2 { margin: 0; color: var(--green-deep); font-size: clamp(64px, 9vw, 118px); line-height: .82; }
.academy-intro > div:first-child > p:last-child { max-width: 720px; margin: 30px 0 0; color: var(--muted); font-size: 17px; }
.academy-features { display: grid; gap: 10px; padding-bottom: 4px; }
.academy-features span { min-width: 230px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--green-deep); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.academy-features strong { margin-right: 18px; color: var(--lime); font-family: var(--condensed); font-size: 20px; }
.academy-launch { grid-column: 1 / -1; width: fit-content; }
.academy-launch span { margin-left: 10px; }
.academy-browser { width: min(1540px, calc(100% - 36px)); margin: 0 auto; overflow: hidden; border: 1px solid rgba(4,45,32,.22); border-bottom: 0; border-radius: 18px 18px 0 0; background: white; box-shadow: 0 35px 100px rgba(4,45,32,.19); }
.academy-browser-bar { height: 52px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--muted); background: #f7f8f3; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; }
.academy-browser-bar > span { padding: 7px 35px; border: 1px solid var(--line); border-radius: 999px; background: white; }
.academy-browser-bar > a { justify-self: end; color: var(--green); }
.academy-browser-dots { display: flex; gap: 6px; }
.academy-browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #cdd2c9; }
.academy-browser-dots i:nth-child(2) { background: #b5cf7c; }
.academy-browser-dots i:nth-child(3) { background: var(--green); }
.academy-browser iframe { display: block; width: 100%; height: min(900px, 88vh); border: 0; background: var(--paper); }

.impact { background: white; }
.impact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: center; }
.impact-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.impact-stats { margin-top: 45px; display: grid; gap: 15px; }
.impact-stats div { display: flex; align-items: baseline; gap: 20px; border-top: 1px solid var(--line); padding-top: 15px; }
.impact-stats strong { color: var(--green); font-family: var(--condensed); font-size: 50px; line-height: 1; }
.impact-stats span { font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.impact-gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: end; }
.impact-gallery img { height: 560px; object-fit: cover; border-radius: 4px; }
.impact-gallery img:last-child { height: 420px; }

.involvement { background: var(--cream); }
.involvement-cards { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: white; }
.involvement-cards article { padding: 42px 30px; border-right: 1px solid var(--line); min-height: 320px; display: flex; flex-direction: column; }
.involvement-cards article:last-child { border: 0; }
.involvement-cards article > span { color: var(--lime); font-family: var(--condensed); font-size: 18px; }
.involvement-cards h3 { margin: 35px 0 12px; font-family: var(--condensed); font-size: 29px; text-transform: uppercase; line-height: 1; }
.involvement-cards p { color: var(--muted); font-size: 13px; }
.involvement-cards .arrow-link { margin-top: auto; }

.leadership { background: white; }
.founder-profile { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 560px; margin-bottom: 30px; background: var(--green-deep); color: white; box-shadow: var(--shadow); }
.founder-portrait { min-height: 560px; position: relative; overflow: hidden; background: var(--green-deep); border-right: 1px solid rgba(255,255,255,.15); }
.founder-portrait img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: center 20%; }
.founder-portrait span { display: grid; place-items: center; width: 150px; height: 150px; border: 2px solid var(--lime); border-radius: 50%; font-family: var(--condensed); font-size: 72px; font-weight: 800; }
.founder-portrait small { position: absolute; left: 24px; bottom: 24px; padding: 9px 13px; color: white; background: rgba(4,45,32,.9); text-transform: uppercase; letter-spacing: .16em; font-weight: 800; }
.founder-copy { padding: 65px; align-self: center; }
.founder-copy h3 { margin: 0 0 5px; font-family: var(--condensed); font-size: 56px; line-height: 1; text-transform: uppercase; }
.founder-copy > p:not(.eyebrow):not(.founder-role) { color: rgba(255,255,255,.7); }
.founder-role { color: var(--lime); font-size: 13px; font-weight: 800; }
.founder-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.founder-facts div { display: grid; }
.founder-facts strong { color: var(--lime); font-family: var(--condensed); font-size: 40px; line-height: 1; }
.founder-facts span { color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.founder-copy .arrow-link { color: white; }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.person-card { min-height: 235px; padding: 28px; border: 1px solid var(--line); background: var(--cream); }
.person-card.staff-card { background: #e7efdc; }
.executive-card { border-top: 4px solid var(--lime); background: #f3f7ec; }
.open-seat { border-style: dashed; background: linear-gradient(135deg, #fff, #f4faed); }
.open-seat .person-initials { color: var(--green); background: rgba(141,189,56,.22); border: 1px dashed rgba(5,101,47,.32); }
.open-seat h3 { color: rgba(4,48,29,.72); }
.person-initials { width: 54px; height: 54px; margin-bottom: 25px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; font-family: var(--condensed); font-size: 22px; font-weight: 800; }
.person-type { margin-bottom: 4px; color: var(--green); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.person-card h3 { margin-bottom: 5px; font-family: var(--condensed); font-size: 28px; line-height: 1; text-transform: uppercase; }
.person-card strong { display: block; margin-bottom: 10px; color: var(--green); font-size: 11px; }
.person-card div > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.news { color: white; background: #071d15; }
.record-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 45px; border: 1px solid rgba(255,255,255,.16); }
.record-strip div { min-height: 135px; padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; border-right: 1px solid rgba(255,255,255,.16); }
.record-strip div:last-child { border: 0; }
.record-strip strong { color: var(--lime); font-family: var(--condensed); font-size: 37px; line-height: 1; text-transform: uppercase; }
.record-strip span { color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.press-card { min-height: 330px; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); transition: transform .2s, border-color .2s, background .2s; }
.press-card:hover { transform: translateY(-4px); border-color: var(--lime); background: rgba(255,255,255,.07); }
.press-source, .press-date { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.press-source { color: var(--lime); }
.press-date { margin-top: 4px; color: rgba(255,255,255,.4); }
.press-card h3 { margin: 40px 0 12px; font-family: var(--condensed); font-size: 30px; line-height: 1; text-transform: uppercase; }
.press-card p { color: rgba(255,255,255,.58); font-size: 12px; }
.press-card > strong { margin-top: auto; color: white; font-size: 12px; }
.source-note { margin: 25px 0 0; color: rgba(255,255,255,.4); font-size: 10px; }

/* Clean, light editorial surfaces */
.river-story { color: var(--green-deep); background: #fbfaf6; }
.river-frame::after { background: linear-gradient(90deg, transparent 55%, #fbfaf6 100%), linear-gradient(0deg, rgba(4,45,32,.35), transparent 60%); }
.river-chapter > p:not(.eyebrow) { color: var(--muted); }
.chapter-detail span { color: var(--green); border-color: rgba(5,101,47,.25); }
.river-chapter .button { color: white; background: var(--green); border-color: var(--green); }
.river-watermark { color: rgba(5,101,47,.07); }
.journey { color: var(--green-deep); background: #f5f4ef; }
.section-heading.light > p { color: var(--muted); }
.journey .eyebrow { color: var(--green); }
.journey-filter { color: var(--green); border-color: rgba(5,101,47,.3); }
.journey-filter.active { color: white; background: var(--green); border-color: var(--green); }
.timeline::before { background: rgba(5,101,47,.2); }
.timeline-dot { border-color: #f5f4ef; }
.timeline h3 { color: var(--green-deep); }
.timeline p { color: var(--muted); }
.news { color: var(--green-deep); background: #f7f7f3; }
.news .eyebrow { color: var(--green); }
.record-strip { border-color: var(--line); background: white; }
.record-strip div { border-color: var(--line); }
.record-strip span { color: var(--muted); }
.press-card { color: var(--green-deep); border-color: var(--line); background: white; box-shadow: 0 14px 35px rgba(4,45,32,.06); }
.press-card:hover { background: #f8faf4; }
.press-date { color: var(--muted); }
.press-card p { color: var(--muted); }
.press-card > strong { color: var(--green); }
.source-note { color: var(--muted); }
.development-xray { color: var(--green-deep); background: radial-gradient(circle at 72% 45%, #d8e9d0 0, #eef3e9 36%, #fbfaf6 78%); }
.development-xray::before { opacity: .22; background-image: linear-gradient(rgba(5,101,47,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(5,101,47,.22) 1px, transparent 1px); }
.xray-copy > p:not(.eyebrow), .xray-readout p { color: var(--muted); }
.xray-readout { border-color: var(--line); }
.xray-controls label { color: var(--muted); }
.xray-controls button { color: var(--green); border-color: rgba(5,101,47,.3); background: rgba(255,255,255,.65); }
.xray-layer-nav { border-color: rgba(5,101,47,.2); background: rgba(255,255,255,.55); }
.xray-layer-nav button { color: var(--muted); border-color: rgba(5,101,47,.2); }
.xray-axis { color: var(--muted); }
.atlas-story .atlas-ward { color: var(--muted); margin-bottom: 18px; }
.atlas-story > p:not(.eyebrow) { color: var(--muted); }
.atlas-lesson { border-color: var(--line); }
.atlas-story .arrow-link { color: var(--green); }
.atlas-next { color: var(--green); }
.field-notebook { background: #eef3e8; }
.field-notebook strong { color: var(--muted); }
.field-notebook b { color: var(--green-deep); }
.field-dots i { background: rgba(5,101,47,.15); }
.atlas-counter { color: var(--muted); }
.atlas-counter i { background: var(--line); }
.atlas-map { background: linear-gradient(rgba(227,237,221,.72), rgba(196,215,189,.84)), url("assets/wmata-system-map.jpg") center/contain no-repeat; }
.atlas-map-heading strong { color: var(--green-deep); }
.atlas-map-heading small { color: var(--muted); }
.wmata-space::before { background: rgba(5,101,47,.13); }
.station-chip { color: var(--green-deep); background: rgba(255,255,255,.9); border-color: rgba(5,101,47,.18); box-shadow: 0 14px 35px rgba(4,45,32,.16); }
.station-chip span { color: var(--muted); }
.station-chip strong { color: var(--green-deep); }
.heritage-chip { color: var(--green-deep); background: rgba(255,255,255,.88); border-color: rgba(5,101,47,.2); }

.cta { padding: 70px 0; color: white; background: linear-gradient(120deg, var(--green) 0 58%, #0a7640 58%); }
.cta-inner { display: grid; grid-template-columns: 1fr .9fr auto; align-items: center; gap: 70px; }
.cta h2 { margin: 0; color: var(--lime); font-size: 70px; }
.cta p { margin-bottom: 0; color: rgba(255,255,255,.78); }
.cta .eyebrow { margin-bottom: 0; color: white; }

.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; }
.contact-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
address { margin-top: 45px; font-style: normal; display: grid; gap: 22px; }
address a { color: var(--green); font-size: 19px; font-weight: 800; }
address span { color: var(--muted); font-size: 14px; }
.contact-form, .application-form { display: grid; gap: 19px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: grid; gap: 7px; color: var(--green-deep); font-size: 12px; font-weight: 800; }
input, textarea, select { width: 100%; border: 1px solid #cfd3ca; border-radius: 3px; background: white; color: var(--ink); padding: 14px 15px; outline: none; transition: border .2s, box-shadow .2s; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,101,47,.1); }
.invalid { border-color: #b83932 !important; }
.form-status { min-height: 22px; margin: 0; font-size: 13px; color: var(--green); font-weight: 700; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

footer { padding: 75px 0 22px; background: #071d15; color: white; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .65fr .75fr 1.2fr; gap: 60px; }
.brand-footer { margin-bottom: 25px; }
.footer-grid > div > p { max-width: 330px; color: rgba(255,255,255,.55); font-size: 13px; }
.footer-grid h3 { margin-bottom: 20px; color: #acd163; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-grid a, .footer-grid button { border: 0; padding: 0; background: none; color: rgba(255,255,255,.75); font-size: 13px; }
.subscribe-form { display: flex; width: 100%; }
.subscribe-form input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: white; }
.subscribe-form button { min-width: 46px; background: var(--lime); color: var(--green-deep); font-size: 20px; }
.subscribe-status { min-height: 20px; }
.footer-bottom { margin-top: 65px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; color: rgba(255,255,255,.4); font-size: 11px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 25px; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.modal.open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,20,13,.75); backdrop-filter: blur(6px); }
.modal-panel { position: relative; width: min(700px, 100%); max-height: calc(100vh - 50px); overflow-y: auto; background: var(--paper); border-radius: 7px; box-shadow: 0 30px 100px rgba(0,0,0,.35); padding: 50px; transform: translateY(20px); transition: transform .25s; }
.modal.open .modal-panel { transform: translateY(0); }
.modal-close { position: absolute; top: 15px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cream); font-size: 27px; line-height: 1; }
.modal-intro h2 { font-size: 49px; }
.modal-intro > p:not(.eyebrow) { color: var(--muted); }
.form-step { display: none; gap: 18px; }
.form-step.active { display: grid; }
.step-label { color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
fieldset { border: 1px solid var(--line); padding: 18px; display: grid; gap: 12px; }
legend { padding: 0 8px; font-size: 12px; font-weight: 800; }
.radio, .check-consent { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; }
.radio input, .check-consent input { width: auto; margin-top: 4px; }
.form-progress { display: flex; gap: 6px; margin-top: 6px; }
.form-progress span { flex: 1; height: 4px; background: #d8d9d3; }
.form-progress span.active { background: var(--green); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions .button-ghost { color: var(--green); }
.modal-actions .button-ghost:hover { color: white; background: var(--green); }

.toast { position: fixed; right: 25px; bottom: 25px; z-index: 120; max-width: 330px; padding: 15px 20px; color: white; background: var(--green-deep); box-shadow: var(--shadow); border-left: 4px solid var(--lime); transform: translateY(120px); opacity: 0; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .nav-menu { gap: 15px; }
  .nav-menu > a:nth-child(3), .nav-menu > a:nth-child(4) { display: none; }
  .hero-grid { grid-template-columns: 1fr .55fr; gap: 30px; }
  .hero-image { inset-left: 35%; }
  .benefit-strip article { padding: 25px 18px; }
  .split-layout { gap: 65px; }
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 35px 0; }
  .timeline::before { display: none; }
  .timeline-dot { margin-bottom: 18px; }
  .involvement-cards { grid-template-columns: 1fr 1fr; }
  .involvement-cards article:nth-child(2) { border-right: 0; }
  .involvement-cards article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .people-grid, .press-grid { grid-template-columns: 1fr 1fr; }
  .river-story-track { grid-template-columns: 50% 50%; }
  .atlas { grid-template-columns: 1.3fr .8fr; }
  .atlas-story { padding: 45px 30px; }
  .atlas-footer { grid-template-columns: 1fr auto; }
  .atlas-guides { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 20px; }
  .ward-brief { grid-template-columns: 100px 1fr; }
  .ward-brief-grid { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .ward-brief > .arrow-link { grid-column: 1 / -1; }
  .analysis-grid { grid-template-columns: 1fr 1fr; }
  .analysis-card.featured { grid-column: 1 / -1; min-height: 420px; }
}

@media (max-width: 800px) {
  body.menu-open { overflow: hidden; }
  .section { padding: 80px 0; }
  .site-header { position: absolute; }
  .nav { height: 80px; }
  .brand-mark { width: 45px; height: 45px; }
  .brand-mark svg { width: 34px; }
  .brand-copy strong { font-size: 15px; }
  .menu-toggle { display: block; color: white; position: relative; z-index: 3; }
  .nav-menu { position: fixed; inset: 0; padding: 120px 30px 40px; background: var(--green-deep); display: flex; flex-direction: column; align-items: stretch; gap: 6px; transform: translateX(100%); transition: none; }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu > a, .nav-menu > a:nth-child(3), .nav-menu > a:nth-child(4) { display: block; padding: 11px 0; font-family: var(--condensed); font-size: 28px; text-align: left; text-transform: uppercase; }
  .nav-portal { margin: 15px 0 8px; }
  .hero { min-height: 1050px; align-items: flex-start; }
  .hero-image { inset: 520px 0 0; }
  .hero-image::after { background: linear-gradient(180deg, var(--green-deep), transparent 45%); }
  .hero-wash { background: linear-gradient(180deg, var(--green-deep) 0 47%, rgba(4,45,32,.3) 70%, var(--green-deep) 100%); }
  .hero-gridlines, .hero-location, .hero-chapter { display: none; }
  .hero-orbits { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 180px; }
  h1 { font-size: clamp(53px, 16vw, 75px); }
  .hero-lede { font-size: 16px; }
  .benefits-card { width: min(430px, 100%); margin: 370px auto -90px; padding-top: 75px; }
  .accommodation-badge { width: 125px; height: 125px; top: -64px; }
  .developer-badge { top: -48px; right: 22px; width: 150px; min-height: 96px; }
  .scroll-cue { display: none; }
  .benefit-strip { grid-template-columns: 1fr; padding: 110px 0 20px; }
  .benefit-strip article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .split-layout, .section-heading, .pillar-display, .impact-grid, .contact-grid { grid-template-columns: 1fr; }
  .split-layout, .contact-grid { gap: 70px; }
  .image-stack { max-width: 570px; }
  .image-note { right: -10px; }
  .section-heading { gap: 20px; }
  .pillar-content { padding: 45px 35px; }
  .pillar-photo { min-height: 350px; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .impact-grid { gap: 55px; }
  .river-story-track { display: block; }
  .river-visual { position: relative; height: 70vh; min-height: 500px; }
  .river-frame::after { background: linear-gradient(0deg, #061b14 0%, transparent 55%); }
  .river-chapters { margin-top: -20vh; position: relative; z-index: 5; }
  .river-chapter { min-height: auto; padding: 90px 28px; opacity: 1; }
  .river-chapter:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .river-chapter h2 { font-size: clamp(48px, 11vw, 65px); }
  .chapter-number { margin-bottom: 45px; }
  .chapter-mobile-image { display: block; width: calc(100% + 56px); margin: 0 -28px 45px; overflow: hidden; }
  .chapter-mobile-image img { height: 380px; object-fit: cover; }
  .river-chapter:first-child .chapter-mobile-image { display: none; }
  .river-line { display: none; }
  .atlas { grid-template-columns: 1fr; }
  .atlas-map { min-height: 680px; border-right: 0; border-bottom: 1px solid var(--line); }
  .atlas-story { min-height: 560px; }
  .atlas-ward { margin-bottom: 45px; }
  .atlas-footer { grid-template-columns: 1fr; }
  .atlas-guides { grid-column: auto; display: flex; flex-wrap: wrap; justify-items: start; }
  .xray-shell { grid-template-columns: 1fr; padding: 70px 0; }
  .xray-stage { height: 720px; }
  .ward-stage { height: 590px; }
  .ward-card { width: 205px; height: 315px; }
  .ward-brief { grid-template-columns: 80px 1fr; padding: 32px; }
  .ward-brief-number strong { font-size: 90px; }
  .founder-profile { grid-template-columns: 1fr; }
  .founder-portrait { min-height: 340px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .record-strip { grid-template-columns: 1fr 1fr; }
  .record-strip div:nth-child(2) { border-right: 0; }
  .record-strip div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .cta-inner { grid-template-columns: 1fr; gap: 25px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 28px, 1180px); }
  .announcement-inner { justify-content: space-between; }
  .announcement span { max-width: 210px; line-height: 1.25; }
  .brand-copy small { display: none; }
  .hero { min-height: 1150px; }
  .hero-grid { padding-top: 165px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-proof { justify-content: space-between; gap: 10px; }
  .hero-proof strong { font-size: 28px; }
  .hero-proof span { font-size: 8px; }
  .benefits-card { margin-top: 395px; padding: 75px 24px 30px; }
  .benefits-card h2 { font-size: 37px; }
  .developer-badge { right: 18px; }
  .quick-benefits { margin-top: 0; }
  .river-visual { height: 62vh; min-height: 440px; }
  .river-chapters { margin-top: -15vh; }
  .chapter-mobile-image img { height: 290px; }
  .atlas-lenses { width: 100%; grid-template-columns: 1fr; }
  .atlas-lens { border-right: 0; border-bottom: 1px solid var(--line); }
  .atlas-lens:last-child { border-bottom: 0; }
  .atlas-map { min-height: 570px; }
  .atlas-map-heading { top: 18px; left: 18px; }
  .atlas-map-heading strong { font-size: 23px; }
  .atlas-base { transform: scale(1.15); transform-origin: center; }
  .map-point strong { font-size: 7px; }
  .map-legend { left: 12px; right: 12px; bottom: 12px; }
  .map-compass { right: 16px; top: 17px; }
  .atlas-story { min-height: 540px; padding: 38px 24px; }
  .atlas-story h3 { font-size: 40px; }
  .atlas-actions { align-items: flex-start; flex-direction: column; }
  .atlas-footer { padding: 25px 22px; }
  .wmata-space { inset: 82px 10px 12px; }
  .wmata-map-plane { inset: 4% 4% 28%; transform: none !important; }
  .wmata-station-stack { right: 2%; top: auto; bottom: 1%; width: 96%; grid-template-columns: 1fr 1fr; gap: 6px; transform: none !important; }
  .station-chip { min-height: 49px; transform: none; padding: 7px 8px 7px 31px; }
  .station-chip i { left: 10px; top: 17px; width: 12px; height: 12px; border-width: 3px; }
  .heritage-orbit { inset: 6% 3% 3%; }
  .heritage-chip { font-size: 7px; padding: 7px 9px; }
  .development-xray { min-height: 1420px; }
  .xray-shell { width: min(100% - 28px, 1280px); }
  .xray-copy { padding: 35px 0 0; }
  .xray-stage { height: 650px; margin-top: 10px; transform: none !important; }
  .development-photo { inset: 0 0 235px; transform: none; }
  .development-photo figcaption { left: 13px; right: 13px; bottom: 12px; }
  .development-photo figcaption strong { font-size: 16px; }
  .history-layer { right: 0; bottom: 35px; width: 100%; padding: 20px; }
  .history-layer h3 { font-size: 23px; }
  .site-advance { inset: 0 0 235px; }
  .site-advance span { left: 12px; bottom: 12px; }
  .xray-layer-nav { grid-template-columns: repeat(3, 1fr); }
  .xray-layer-nav button { border-bottom: 1px solid rgba(5,101,47,.2); }
  .xray-layer-nav button:nth-child(n+7) { border-bottom: 0; }
  .xray-axis { display: none; }
  .phase-meter { left: 0; right: 0; bottom: 0; }
  .ward-stage { height: 620px; width: calc(100% + 28px); margin-left: -14px; }
  .ward-card { width: 165px; height: 270px; }
  .ward-card.active { width: min(345px, calc(100vw - 30px)); height: 535px; }
  .ward-card-cover strong { font-size: 64px; }
  .ward-card.active .ward-card-cover { inset: 22px 22px auto; width: auto; }
  .ward-card.active .ward-card-cover strong { font-size: 55px; }
  .ward-card-detail { padding: 150px 20px 25px; align-content: end; background: linear-gradient(0deg, rgba(3,38,27,.97) 0 72%, rgba(3,38,27,.12)); }
  .ward-card-detail h3 { font-size: 25px; }
  .ward-card-detail > p { max-height: 96px; }
  .ward-card-facts { grid-template-columns: 1fr; }
  .ward-card-facts div:last-child { display: none; }
  .ward-brief { grid-template-columns: 1fr; padding: 25px 20px; }
  .ward-brief-number { display: flex; align-items: baseline; gap: 10px; }
  .ward-brief-number strong { font-size: 65px; }
  .ward-brief-grid { grid-column: auto; grid-template-columns: 1fr; }
  .ward-brief > .arrow-link { grid-column: auto; }
  .analysis-grid { grid-template-columns: 1fr; }
  .analysis-card, .analysis-card.featured { grid-column: auto; min-height: 460px; }
  .atlas-photo { height: 185px; }
  .mission-grid, .field-row, .involvement-cards, .resource-grid { grid-template-columns: 1fr; }
  .image-stack img { height: 470px; }
  .image-note { left: 20px; right: auto; bottom: -25px; }
  .pillar-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(100px, 1fr)); }
  .pillar-display { min-height: 0; }
  .pillar-photo { min-height: 260px; }
  .pillar-content { padding: 38px 24px; }
  .timeline { grid-template-columns: 1fr; gap: 30px; }
  .journey-controls { overflow-x: auto; }
  .journey-filter { flex: 0 0 auto; }
  .academy-intro { grid-template-columns: 1fr; gap: 25px; }
  .academy-intro h2 { font-size: clamp(60px, 20vw, 84px); }
  .academy-intro > div:first-child > p:last-child { margin-top: 22px; font-size: 15px; }
  .academy-features span { min-width: 0; }
  .academy-launch { grid-column: auto; width: 100%; }
  .academy-browser { width: calc(100% - 20px); }
  .academy-browser-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 0 10px; }
  .academy-browser-bar > span { min-width: 0; padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .academy-browser iframe { height: 790px; }
  .impact-gallery { gap: 8px; }
  .impact-gallery img { height: 390px; }
  .impact-gallery img:last-child { height: 300px; }
  .involvement-cards article { border-right: 0; border-bottom: 1px solid var(--line); min-height: 270px; }
  .founder-copy { padding: 40px 24px; }
  .founder-copy h3 { font-size: 45px; }
  .founder-facts { gap: 8px; }
  .founder-facts strong { font-size: 31px; }
  .people-grid, .press-grid { grid-template-columns: 1fr; }
  .record-strip { grid-template-columns: 1fr; }
  .record-strip div { min-height: 105px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .record-strip div:nth-child(2) { border-right: 0; }
  .record-strip div:last-child { border-bottom: 0; }
  .cta h2 { font-size: 58px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 25px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 20px; flex-direction: column; }
  .modal { padding: 10px; }
  .modal-panel { max-height: calc(100vh - 20px); padding: 45px 22px 28px; }
  .modal-intro h2 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .river-frame { transition: none; }
  .orbit-card { animation: none; }
  .wmata-space, .xray-stage { transform: none !important; }
  .building-layer { transition: none; }
}

/* 2026 bright redesign layer */
:root {
  --white: #ffffff;
  --mist: #f8fbf5;
  --glass: rgba(255,255,255,.78);
  --soft-shadow: 0 24px 70px rgba(5, 45, 28, .10);
  --deep-shadow: 0 35px 110px rgba(5, 45, 28, .16);
  --radius-lg: 34px;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(141,189,56,.18), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(5,101,47,.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbfdf8 48%, #fff 100%);
}

.site-header { color: var(--green-deep); }
.announcement { color: var(--green-deep); background: #f0f7e9; border-bottom: 1px solid rgba(5,101,47,.10); }
.announcement .text-button { color: var(--green); }
.nav { color: var(--green-deep); }
.brand-mark { background: white; box-shadow: 0 12px 35px rgba(5,101,47,.10); }
.nav-menu { padding: 10px 12px; border: 1px solid rgba(5,101,47,.12); border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(18px); box-shadow: 0 15px 45px rgba(5,101,47,.08); }
.nav-portal { color: var(--green); border-color: rgba(5,101,47,.25); background: #f4faef; }
.site-header.scrolled .nav { color: var(--green-deep); background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(5,101,47,.10); }

.hero { min-height: 900px; color: var(--green-deep); background: #fff; }
.hero-image { inset: 120px 22px 80px 48%; border-radius: 42px; box-shadow: var(--deep-shadow); transform: scale(1); }
.hero-image::after { background: linear-gradient(90deg, rgba(255,255,255,.28), transparent 48%), linear-gradient(0deg, rgba(5,101,47,.16), transparent 60%); }
.hero-wash { background: radial-gradient(circle at 55% 20%, rgba(141,189,56,.18), transparent 34%), linear-gradient(90deg, white 0 46%, rgba(255,255,255,.48) 68%, transparent 100%); }
.hero-gridlines { opacity: .18; background-image: linear-gradient(rgba(5,101,47,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(5,101,47,.13) 1px, transparent 1px); mask-image: linear-gradient(90deg, black, transparent 70%); }
.hero .eyebrow { color: var(--green); }
.hero-lede { color: var(--muted); }
h1 { text-shadow: none; }
.button { border-radius: 999px; box-shadow: 0 14px 34px rgba(5,101,47,.16); }
.button-ghost { color: var(--green); background: white; border-color: rgba(5,101,47,.28); }
.button-ghost:hover { color: white; background: var(--green); border-color: var(--green); }
.hero-proof { padding: 18px; border: 1px solid rgba(5,101,47,.12); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: var(--soft-shadow); backdrop-filter: blur(16px); }
.hero-proof span { color: var(--muted); }
.benefits-card { border: 1px solid rgba(5,101,47,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.86); backdrop-filter: blur(18px); }
.developer-badge { border-radius: 26px; transform: rotate(0); }
.scroll-cue, .hero-location, .hero-chapter { color: var(--green-deep); }
.scroll-cue span { background: var(--green); }
.orbit-card { color: var(--green-deep); background: rgba(255,255,255,.72); border-color: rgba(5,101,47,.18); border-radius: 26px; }
.orbit-card span { color: var(--muted); }

.quick-benefits { background: white; color: var(--green-deep); }
.benefit-strip { margin-top: -34px; min-height: 145px; border: 1px solid rgba(5,101,47,.12); border-radius: 30px; background: rgba(255,255,255,.86); box-shadow: var(--soft-shadow); backdrop-filter: blur(18px); overflow: hidden; }
.benefit-strip article { border-color: rgba(5,101,47,.10); }
.benefit-strip p { color: var(--muted); }
.line-icon { color: white; background: linear-gradient(135deg, var(--green), var(--lime)); border: 0; }

.section, .mission-control, .east-river, .ward-deck, .field-notes-section, .impact, .involvement, .leadership, .news, .contact { background: transparent; }
.section-heading { align-items: end; }
.section-heading > p { color: var(--muted); }
.section-index, .section-index.dark { color: rgba(5,101,47,.16); }

.river-story, .journey, .news { color: var(--green-deep); background: #fff; }
.river-story-track, .atlas, .pillar-display, .founder-profile, .record-strip, .analysis-card, .contact-form, .mission-stage, .system-embed {
  border-radius: var(--radius-lg);
}
.river-visual { border-radius: 0 42px 42px 0; background: #edf5e8; }
.river-frame { border-radius: 34px; overflow: hidden; }
.river-frame::after { background: linear-gradient(90deg, transparent 52%, rgba(255,255,255,.92) 100%); }
.river-chapter > p:not(.eyebrow) { color: var(--muted); }

.atlas { border-radius: var(--radius-lg); overflow: hidden; background: white; box-shadow: var(--soft-shadow); }
.atlas-map { background: linear-gradient(135deg, rgba(5,101,47,.08), rgba(141,189,56,.16)); }
.wmata-map-plane { border-radius: 28px; opacity: 1; box-shadow: 0 35px 90px rgba(4,45,32,.22); }
.wmata-map-plane::after { content: "D.C. STORY"; }
.wmata-map-plane > img { object-fit: cover; mix-blend-mode: normal; filter: saturate(1.04) contrast(1.02); }
.map-open-link { display: none; border: 0; border-radius: 999px; }
.station-chip, .heritage-chip { border-radius: 18px; }
.atlas-footer { margin-top: 18px; border-radius: 28px; background: linear-gradient(135deg, var(--green), #0f7d42); box-shadow: var(--soft-shadow); }
.metro-access { margin-top: 20px; display: grid; grid-template-columns: .42fr .58fr; gap: 18px; align-items: stretch; }
.metro-copy { padding: 34px; border: 1px solid rgba(5,101,47,.12); border-radius: 30px; background: white; box-shadow: var(--soft-shadow); }
.metro-copy h3 { margin: 0 0 12px; font-family: var(--condensed); font-size: 42px; line-height: .95; text-transform: uppercase; }
.metro-copy p:not(.eyebrow) { color: var(--muted); }
.metro-board { --rx: 0deg; --ry: 0deg; position: relative; min-height: 420px; overflow: hidden; border: 1px solid rgba(5,101,47,.12); border-radius: 30px; background: white; box-shadow: var(--soft-shadow); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.metro-board > img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; opacity: .45; transform: translateZ(10px); }
.metro-ward-grid { position: absolute; inset: auto 20px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: translateZ(70px); }
.metro-ward-grid span { min-height: 70px; padding: 12px; display: grid; align-content: end; border: 1px solid rgba(5,101,47,.12); border-radius: 18px; color: var(--green); background: rgba(255,255,255,.82); backdrop-filter: blur(12px); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 12px 28px rgba(5,45,28,.08); transition: transform .2s, background .2s; }
.metro-ward-grid span:hover { transform: translateY(-4px); background: white; }
.metro-ward-grid b { margin-top: 4px; color: var(--green-deep); font-size: 11px; letter-spacing: 0; text-transform: none; }

.development-xray { border-top: 1px solid rgba(5,101,47,.08); border-bottom: 1px solid rgba(5,101,47,.08); }
.development-photo, .history-layer, .build-message { border-radius: 30px; }
.ward-stage, .ward-card, .analysis-card, .press-card, .person-card, .involvement-cards, .record-strip, .contact-form {
  border-radius: 30px;
  box-shadow: var(--soft-shadow);
}
.ward-stage { border-color: rgba(5,101,47,.12); background: radial-gradient(circle at 50% 45%, #fff, #eef6e8); }
.involvement-cards { overflow: hidden; }
.founder-profile { overflow: hidden; background: linear-gradient(135deg, #093c29, #05652f); }
.people-grid { grid-template-columns: repeat(4, 1fr); }
.press-card { border-color: rgba(5,101,47,.12); }
.cta { color: var(--green-deep); background: linear-gradient(135deg, #eef8e7, white 58%, #f8fbf4); }
.cta .eyebrow { color: var(--green); }
.cta h2 { color: var(--green); }
.cta p { color: var(--muted); }
.cta .button-light { color: white; background: var(--green); border-color: var(--green); }
.contact-form { padding: 34px; background: white; border: 1px solid rgba(5,101,47,.12); }
footer { border-radius: 40px 40px 0 0; }

.systems-hub { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #f7fbf3); }
.systems-hub::before { content: ""; position: absolute; inset: 10% -10% auto; height: 360px; background: radial-gradient(circle, rgba(141,189,56,.2), transparent 60%); pointer-events: none; }
.system-tabs { position: relative; z-index: 1; display: inline-flex; gap: 8px; margin-bottom: 20px; padding: 8px; border: 1px solid rgba(5,101,47,.12); border-radius: 999px; background: white; box-shadow: var(--soft-shadow); }
.system-tab { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--green); background: transparent; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.system-tab.active { color: white; background: var(--green); }
.system-embed { position: relative; z-index: 1; display: grid; grid-template-columns: .42fr .58fr; gap: 24px; min-height: 680px; padding: 24px; border: 1px solid rgba(5,101,47,.12); background: rgba(255,255,255,.82); box-shadow: var(--deep-shadow); backdrop-filter: blur(18px); }
.system-info { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.system-info > span { color: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; }
.system-info h3 { margin: 14px 0 16px; font-family: var(--condensed); font-size: clamp(44px, 5vw, 72px); line-height: .9; text-transform: uppercase; }
.system-info p { color: var(--muted); font-size: 16px; }
.system-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.system-browser { --rx: 0deg; --ry: 0deg; min-width: 0; overflow: hidden; border: 1px solid rgba(5,101,47,.14); border-radius: 28px; background: #edf5e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
.system-browser-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: white; border-bottom: 1px solid rgba(5,101,47,.10); }
.system-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6dfd2; }
.system-browser-bar i:nth-child(2) { background: #b8d56e; }
.system-browser-bar i:nth-child(3) { background: var(--green); }
.system-browser-bar span { margin-left: 10px; color: var(--muted); font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-browser iframe { display: block; width: 100%; height: 630px; border: 0; background: white; transform-origin: top left; }

@media (max-width: 1050px) {
  .hero-image { inset: 520px 20px 70px; }
  .hero-wash { background: linear-gradient(180deg, rgba(255,255,255,.98) 0 52%, rgba(255,255,255,.2)); }
  .systems-hub .system-embed { grid-template-columns: 1fr; }
  .metro-access { grid-template-columns: 1fr; }
  .system-browser iframe { height: 720px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .nav-menu { border-radius: 0; background: rgba(255,255,255,.98); }
  .menu-toggle { color: var(--green-deep); }
  .benefit-strip, .system-tabs { border-radius: 24px; }
  .system-tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  .system-embed { padding: 12px; border-radius: 24px; }
  .system-info { padding: 24px 18px; }
  .system-browser iframe { height: 680px; }
  .metro-ward-grid { grid-template-columns: repeat(2, 1fr); }
  .metro-board { min-height: 560px; }
  .people-grid { grid-template-columns: 1fr; }
}