:root {
  color-scheme: dark;
  --page: #101a15;
  --page-2: #14231b;
  --surface: #1a2b21;
  --surface-2: #20372a;
  --line: #385040;
  --text: #f5f4e9;
  --muted: #a9b9ad;
  --green: #6fcf77;
  --green-deep: #2d7744;
  --water: #45bdd0;
  --water-deep: #197e95;
  --sun: #f4c84d;
  --orange: #ed6a3a;
  --cream: #efe9d2;
  --mono: "DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 30px 80px rgb(0 0 0 / 35%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 300px;
  margin: 0;
  background:
    radial-gradient(circle at 12% 12%, rgb(70 130 85 / 12%), transparent 26rem),
    linear-gradient(rgb(255 255 255 / 1.8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1.8%) 1px, transparent 1px),
    var(--page);
  background-size: auto, 48px 48px, 48px 48px, auto;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button { color: inherit; }
a { color: var(--water); }
img, video, svg { display: block; max-width: 100%; }
.wrap { width: min(1320px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 14px; transform: translateY(-150%); background: #fff; color: #111; }
.skip-link:focus { transform: none; }
.scroll-meter { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; background: rgb(255 255 255 / 5%); }
.scroll-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sun), var(--orange), var(--water)); }

.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgb(255 255 255 / 8%); background: rgb(16 26 21 / 88%); backdrop-filter: blur(18px); }
.topbar { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 24px; }
.prompt-brand { display: inline-flex; min-width: 0; align-items: stretch; color: white; font-family: var(--mono); font-size: .78rem; font-weight: 700; line-height: 34px; text-decoration: none; white-space: nowrap; }
.seg { display: inline-block; padding: 0 17px 0 16px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.seg:first-child { padding-left: 11px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.seg + .seg { margin-left: -7px; }
.seg-mark { background: #a84125; }
.seg-dir { background: var(--water-deep); }
.seg-mode { background: var(--green-deep); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px); font-family: var(--mono); font-size: .73rem; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

.hero { position: relative; overflow: hidden; padding: clamp(62px, 8vw, 116px) 0 0; border-bottom: 1px solid var(--line); }
.hero::before { position: absolute; width: 620px; height: 620px; top: -210px; right: -100px; border: 1px solid rgb(69 189 208 / 15%); border-radius: 50%; box-shadow: 0 0 0 100px rgb(69 189 208 / 2.2%), 0 0 0 200px rgb(69 189 208 / 1.7%); content: ""; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(370px, .72fr); align-items: center; gap: clamp(48px, 7vw, 110px); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 64px; }
.kicker, .eyebrow { margin: 0 0 12px; color: var(--water); font-family: var(--mono); font-size: .73rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.kicker span { color: var(--sun); }
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 0; font-family: var(--mono); font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: .88; letter-spacing: -.085em; }
.lede { max-width: 720px; margin: 27px 0 0; color: #c4cec6; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); font-family: var(--mono); font-size: .76rem; font-weight: 700; text-decoration: none; }
.button.primary { border-color: var(--sun); background: var(--sun); color: #162016; }
.button.primary:hover { background: #ffe078; }
.button.secondary:hover { border-color: var(--water); }
.status-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 29px 0 0; padding: 0; list-style: none; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: .67rem; }
.status::before { width: 7px; height: 7px; border-radius: 50%; content: ""; }
.status.done::before { background: var(--green); box-shadow: 0 0 0 3px rgb(111 207 119 / 12%); }
.status.active::before { background: var(--sun); box-shadow: 0 0 0 3px rgb(244 200 77 / 12%); animation: pulse 1.7s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.panel { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent), var(--surface); box-shadow: var(--shadow); }
.hero-image { position: relative; z-index: 2; align-self: end; margin: 0; transform: rotate(1.5deg); overflow: hidden; }
.hero-image button, .media-card button, .launch-pad-photo button { width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hero-image img { width: 100%; max-height: 710px; object-fit: cover; object-position: center 12%; }
.hero-player { display: grid; place-items: center; background: #050806; }
.hero-montage video { display: block; width: 100%; max-height: 710px; background: #050806; object-fit: contain; }
.hero-montage iframe { display: block; width: min(100%, 400px); aspect-ratio: 9 / 16; border: 0; background: #050806; }
.hero-image figcaption, .media-card figcaption, .hardware-image figcaption, .video-card figcaption, .launch-pad-photo figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 12px 14px; color: var(--muted); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; }
.hero-youtube-link { color: var(--water); text-align: right; text-decoration: none; }
.hero-youtube-link:hover { color: var(--cream); text-decoration: underline; }
.facts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 76px; border-width: 1px 0 0; border-style: solid; border-color: var(--line); }
.facts div { min-height: 108px; padding: 25px 28px; border-right: 1px solid var(--line); }
.facts div:first-child { border-left: 1px solid var(--line); }
.fact-label { display: block; margin-bottom: 5px; color: var(--green); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.facts strong { font-family: var(--mono); font-size: clamp(.96rem, 1.7vw, 1.25rem); }

.section { padding-block: clamp(82px, 10vw, 142px); scroll-margin-top: 64px; }
.section-heading { width: min(100%, 820px); margin-bottom: clamp(42px, 7vw, 76px); }
.section-heading h2, .hardware-copy h2, .operation-note h2 { margin: 0; font-family: var(--mono); font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.065em; }
.section-heading > p:last-child { max-width: 720px; margin: 20px 0 0; color: var(--muted); font-size: clamp(.96rem, 1.5vw, 1.12rem); }
.site-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .72fr); align-items: start; gap: clamp(30px, 4vw, 58px); }
.site-map { margin: 0; overflow: hidden; }
.site-map svg { width: 100%; height: auto; background: #13231a; }
.site-map figcaption, .transition-diagram figcaption { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .66rem; line-height: 1.5; text-transform: uppercase; }
.contours path { stroke: rgb(239 233 210 / 13%); stroke-width: 2; }
.map-water { fill: #d7f7fb; font: 700 14px var(--mono); letter-spacing: .18em; text-anchor: middle; }
.map-label rect { fill: rgb(15 27 20 / 87%); stroke: #56705c; }
.map-label text { fill: var(--cream); font: 700 15px var(--mono); letter-spacing: .04em; }
.map-label .small { fill: #a9b9ad; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.primary-camp path { fill: none; stroke: var(--sun); stroke-width: 3; }
.social circle { fill: #34261a; stroke: var(--orange); stroke-width: 4; }
.social .fire { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; }
.yard-area { fill: rgb(71 112 78 / 15%); stroke: #81a68a; stroke-width: 3; stroke-dasharray: 10 9; }
.retained-path .connector-trail { fill: #876f50; opacity: .55; }
.retained-path .connector-wall { fill: none; stroke: #c0a37b; stroke-width: 7; stroke-linecap: round; }
.retained-path text, .map-small-label { fill: #b5c5b9; font: 700 11px var(--mono); letter-spacing: .05em; }
.slide-line { fill: none; stroke: var(--sun); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1 24; }
.slide-label { fill: #fff2be; font: 700 12px var(--mono); letter-spacing: .06em; }
.castle rect { fill: #197e95; stroke: #70d6e3; stroke-width: 3; }
.castle path { fill: none; stroke: var(--orange); stroke-width: 8; }
.castle text { fill: white; font: 700 12px var(--mono); text-anchor: middle; }
.house-main { fill: #ad9c7d; stroke: #efe9d2; stroke-width: 3; stroke-linejoin: round; }
.house text { font-family: var(--mono); font-weight: 700; letter-spacing: .05em; text-anchor: middle; }
.house-name { fill: #24362a; font-size: 12px; }
.garage-shell { fill: #81755f; stroke: #efe9d2; stroke-width: 3; }
.family-room { fill: #a59679; stroke: #efe9d2; stroke-width: 3; stroke-linejoin: round; }
.north path { stroke: var(--sun); stroke-width: 4; }
.north text { fill: var(--sun); font: 700 16px var(--mono); text-anchor: middle; }
.site-notes { display: grid; gap: 0; border-top: 1px solid var(--line); }
.site-note { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.note-number { color: var(--sun); font-family: var(--mono); font-size: .75rem; font-weight: 700; }
.site-note h3, .layer-card h3, .product-card h3, .transition-copy h3, .loop-heading h3, .day-heading h3, .test-copy h3 { margin: 0; font-family: var(--mono); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.17; letter-spacing: -.035em; }
.site-note p { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.fire-ring-feature { display: grid; grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr); align-items: center; gap: clamp(32px, 5vw, 72px); margin-top: clamp(58px, 8vw, 100px); padding-top: clamp(38px, 5vw, 64px); border-top: 1px solid var(--line); }
.fire-ring-appendix .fire-ring-feature { margin-top: 0; }
.fire-ring-copy h3 { margin: 0; font-family: var(--mono); font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.05; letter-spacing: -.055em; }
.fire-ring-copy > p:not(.kicker) { margin: 16px 0 0; color: var(--muted); font-size: .93rem; }
.fire-ring-copy .process-note { padding-left: 13px; border-left: 2px solid var(--sun); font-size: .8rem; }
.build-range { display: inline-block; margin-top: 22px; color: var(--green); font-family: var(--mono); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
.fire-ring-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; min-width: 0; }
.fire-ring-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.fire-ring-card button { width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.fire-ring-card img { width: 100%; height: 330px; object-fit: cover; }
.fire-ring-card:nth-child(2) img { object-position: center 64%; }
.fire-ring-card:nth-child(3) img { object-position: center 52%; }
.fire-ring-card:nth-child(4) img { object-position: center 52%; }
.fire-ring-card figcaption { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 10px 12px; color: var(--muted); font-family: var(--mono); font-size: .62rem; line-height: 1.3; text-transform: uppercase; }
.fire-ring-card figcaption span { color: var(--sun); font-weight: 800; }
.fire-ring-spec { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(260px, .72fr) minmax(440px, 1.28fr); align-items: stretch; margin-top: 8px; overflow: hidden; }
.ring-spec-copy { padding: clamp(24px, 4vw, 42px); }
.ring-spec-copy .eyebrow { margin-bottom: 7px; color: var(--green); }
.ring-spec-copy h4 { margin: 0; font-family: var(--mono); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.12; letter-spacing: -.035em; }
.ring-spec-copy > p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); font-size: .88rem; }
.ring-spec-copy strong { color: var(--text); }
.ring-spec-copy .ring-caution { padding: 12px 13px; border-left: 3px solid var(--sun); background: rgb(244 200 77 / 6%); }
.ring-caution strong { color: var(--sun); }
.ring-section-diagram { margin: 0; border-left: 1px solid var(--line); background: #132019; }
.ring-section-cut { position: relative; min-height: 310px; overflow: hidden; background: linear-gradient(#17271e 0 39%, #73583a 39% 74%, #4b3726 74%); }
.ring-wall { position: absolute; z-index: 4; width: 14px; height: 42%; top: 10%; border-radius: 4px 4px 1px 1px; background: linear-gradient(90deg, #9da8a0, #e3e8e2 47%, #89958d); box-shadow: 0 0 0 1px rgb(0 0 0 / 35%); }
.ring-wall-left { left: 20%; }
.ring-wall-right { right: 20%; }
.ring-grade { position: absolute; z-index: 6; width: 100%; top: 39%; left: 0; padding: 7px 23px 0; border-top: 2px dashed #d8c49e; color: #eee0c3; font: 700 10px var(--mono); letter-spacing: .05em; text-align: right; text-transform: uppercase; }
.ring-layer { position: absolute; z-index: 3; right: calc(20% + 14px); left: calc(20% + 14px); display: flex; align-items: center; justify-content: center; color: white; font: 700 10px var(--mono); text-align: center; text-transform: uppercase; }
.ring-layer small { margin-left: 6px; color: rgb(255 255 255 / 68%); font-size: 8px; }
.ring-ash { height: 10%; top: 29%; background: #8f8069; }
.ring-stone { height: 17%; top: 39%; background: repeating-linear-gradient(135deg, #687168 0 7px, #818a82 7px 13px); }
.ring-soil { height: 44%; top: 56%; background: repeating-linear-gradient(25deg, #463225 0 10px, #523b29 10px 20px); }
.ring-measure { position: absolute; z-index: 7; left: 5%; padding-left: 13px; border-left: 2px solid var(--sun); color: var(--sun); font: 700 10px var(--mono); text-transform: uppercase; }
.ring-visible { height: 29%; top: 10%; padding-top: 10%; }
.ring-embed { height: 13%; top: 39%; padding-top: 4%; }
.ring-depth { position: absolute; z-index: 7; right: 4%; bottom: 6%; width: 17%; color: #dcc6a4; font: 700 9px var(--mono); line-height: 1.3; text-align: center; text-transform: uppercase; }
.ring-section-diagram figcaption { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }

.system-section { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgb(35 69 47 / 30%), transparent 28rem), #101c16; }
.layer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.layer-card { padding: clamp(24px, 4vw, 48px); }
.layer-visual { display: grid; gap: 7px; margin-bottom: 34px; perspective: 700px; }
.layer { display: flex; min-height: 46px; align-items: center; justify-content: center; border-radius: 5px; transform: rotateX(42deg); font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 10px 18px rgb(0 0 0 / 20%); }
.layer.rider { background: repeating-linear-gradient(100deg, #54c8d9 0 14px, #35aec2 14px 27px); color: #09282d; }
.layer.plastic { background: #e8813d; color: #311a0b; }
.layer.blanket { background: repeating-linear-gradient(90deg, #203d60 0 7px, #2b4c73 7px 14px); color: #d8e7f4; }
.layer.ground { background: #725738; color: #efe4d6; }
.layer-card > p, .product-card p, .transition-copy > p { color: var(--muted); }
.callout { margin: 24px 0 0; padding: 15px 16px; border-left: 3px solid var(--sun); background: rgb(244 200 77 / 7%); font-size: .89rem; }
.callout strong { color: var(--sun); }
.product-card { display: grid; grid-template-columns: minmax(220px, .82fr) 1fr; align-items: center; overflow: hidden; }
.product-card img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; object-position: 59% center; }
.product-card > div { padding: clamp(24px, 4vw, 42px); }
.card-tag, .badge { display: inline-block; width: max-content; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: .63rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.card-tag { margin-bottom: 14px; color: var(--sun); }
.water-loop { margin-top: 24px; padding: clamp(24px, 4vw, 48px); }
.loop-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.loop-heading .kicker { margin-bottom: 8px; }
.loop-distance { color: var(--water); font-family: var(--mono); font-size: .72rem; white-space: nowrap; }
.flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; margin: 40px 0 0; padding: 0; counter-reset: flow; list-style: none; }
.flow li { position: relative; min-width: 0; padding: 18px 12px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 2%); text-align: center; }
.flow li:not(:last-child)::after { position: absolute; z-index: 2; top: 34px; right: -19px; width: 23px; height: 2px; background: var(--water); content: ""; }
.flow-icon { display: grid; width: 34px; height: 34px; place-items: center; margin: 0 auto 13px; border-radius: 50%; background: var(--water-deep); color: white; font-family: var(--mono); font-size: .7rem; font-weight: 800; }
.flow strong, .flow small { display: block; }
.flow strong { font-family: var(--mono); font-size: .72rem; }
.flow small { margin-top: 5px; color: var(--muted); font-size: .7rem; }
.flow-manifold { border-color: rgb(244 200 77 / 45%) !important; }
.flow-manifold .flow-icon { background: #82691e; }
.manifold-note { max-width: 820px; margin: 20px auto 0; padding: 12px 14px; border-left: 2px solid var(--sun); background: rgb(244 200 77 / 5%); color: var(--muted); font-size: .78rem; }
.manifold-note strong { color: var(--cream); font-family: var(--mono); }
.loop-return { margin: 19px 0 0; color: var(--muted); font-family: var(--mono); font-size: .72rem; text-align: center; }
.loop-return span { color: var(--sun); font-size: 1.2rem; }
.top-station { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(28px, 5vw, 66px); margin-top: 24px; padding: clamp(24px, 4vw, 48px); }
.station-heading h3 { margin: 0; font-family: var(--mono); font-size: clamp(1.45rem, 3vw, 2.5rem); line-height: 1.07; letter-spacing: -.05em; }
.station-heading > p:last-child { margin: 15px 0 0; color: var(--muted); font-size: .92rem; }
.station-amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 1px; background: var(--line); list-style: none; }
.station-amenities li { display: grid; min-height: 130px; grid-template-columns: 42px 1fr; align-content: center; gap: 14px; padding: 21px; background: var(--surface); }
.amenity-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--water); font: 800 1rem var(--mono); }
.wash-icon { color: var(--water); }
.turf-icon { color: var(--green); }
.shade-icon { color: var(--sun); }
.chair-icon { color: var(--orange); }
.station-amenities strong { font-family: var(--mono); font-size: .78rem; }
.station-amenities p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.launch-pad-photo { grid-column: 1 / -1; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #070b08; }
.launch-pad-photo button { background: #070b08; }
.launch-pad-photo img { display: block; width: min(100%, 512px); height: auto; max-height: 680px; margin-inline: auto; object-fit: contain; }
.launch-pad-photo figcaption { background: var(--surface); }
.transition-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(36px, 6vw, 80px); margin-top: clamp(70px, 9vw, 120px); }
.transition-copy h3 { font-size: clamp(1.7rem, 3.5vw, 3rem); }
.check-list { display: grid; gap: 11px; margin: 25px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; color: #c7d1c9; font-size: .92rem; }
.check-list li::before { position: absolute; left: 0; color: var(--green); font-family: var(--mono); font-weight: 800; content: "✓"; }
.transition-diagram { margin: 0; overflow: hidden; }
.section-cut { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(#172a21 0 62%, #60492f 62%); }
.section-slope { position: absolute; z-index: 3; width: 84%; height: 130px; top: 27%; left: -3%; transform: rotate(13deg); transform-origin: 62% 50%; }
.section-slope span { position: absolute; z-index: 2; left: 14%; top: 42px; color: #341808; font: 800 12px var(--mono); text-transform: uppercase; }
.slide-profile { width: 100%; height: 100%; max-width: none; overflow: visible; }
.slide-body { fill: var(--orange); }
.profile-water, .profile-blanket { fill: none; stroke-width: 7; }
.profile-water { stroke: var(--water); }
.profile-blanket { stroke: #142c47; }
.section-fall-callout { position: absolute; z-index: 6; top: 7%; right: 5%; color: var(--sun); font: 700 11px/1.35 var(--mono); letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.section-fall-callout span { display: block; padding: 7px 9px; border: 1px solid rgb(244 200 77 / 55%); border-radius: 4px; background: rgb(16 26 21 / 90%); }
.section-fall-callout i { position: absolute; top: calc(100% - 3px); left: 45%; color: var(--sun); font: 400 42px/1 var(--mono); }
.section-castle { position: absolute; z-index: 2; width: 35%; height: 35%; right: 6%; bottom: 19%; border: 9px solid var(--water-deep); border-top: 4px solid #61d2df; border-radius: 18px 18px 25px 25px; background: rgb(42 166 187 / 30%); }
.section-castle::before, .section-castle::after { position: absolute; width: 30px; height: 78px; bottom: 100%; border-radius: 15px 15px 0 0; background: var(--orange); content: ""; }
.section-castle::before { left: 8%; }
.section-castle::after { right: 8%; }
.section-castle-label { position: absolute; z-index: 5; width: 35%; height: 35%; right: 6%; bottom: 19%; pointer-events: none; }
.section-castle-label span, .section-castle-label i { position: absolute; width: 100%; left: 0; color: white; font: 700 12px var(--mono); text-align: center; text-transform: uppercase; }
.section-castle-label span { top: 57%; }
.section-castle-label i { top: 77%; color: #a7ecf4; font-size: 10px; font-style: normal; }
.section-grade { position: absolute; z-index: 1; width: 100%; top: 62%; border-top: 3px dashed #a78961; }
.section-grade span { position: absolute; left: 4%; top: 11px; color: #d8c6a9; font: 11px var(--mono); text-transform: uppercase; }
.section-recess { position: absolute; right: 12%; bottom: 6%; color: #d8c6a9; font: 11px var(--mono); text-transform: uppercase; }
.section-recess::before { display: inline-block; width: 2px; height: 40px; margin-right: 8px; vertical-align: middle; background: #d8c6a9; content: ""; }

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { position: absolute; width: 1px; top: 20px; bottom: 20px; left: 64px; background: var(--line); content: ""; }
.build-day { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding-bottom: clamp(76px, 10vw, 130px); }
.build-day:last-child { padding-bottom: 0; }
.day-marker { position: relative; z-index: 2; display: flex; width: 96px; height: 96px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--page); box-shadow: 0 0 0 10px var(--page); }
.day-marker span { color: var(--sun); font-family: var(--mono); font-size: 1.25rem; font-weight: 800; }
.day-marker small { color: var(--muted); font-family: var(--mono); font-size: .58rem; text-transform: uppercase; }
.day-content { min-width: 0; }
.day-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin: 11px 0 13px; }
.day-heading .eyebrow { margin-bottom: 5px; color: var(--green); }
.badge.complete { border-color: rgb(111 207 119 / 45%); color: var(--green); }
.badge.active { border-color: rgb(244 200 77 / 45%); color: var(--sun); }
.day-content > p { max-width: 830px; margin: 0 0 30px; color: var(--muted); }
.media-grid { display: grid; gap: 16px; }
.media-grid.two-up { grid-template-columns: 1fr 1fr; }
.media-card, .video-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.media-card img { width: 100%; height: clamp(300px, 46vw, 610px); object-fit: cover; }
.two-up .media-card:first-child img { object-position: center 38%; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.video-card video { width: 100%; height: min(50vw, 580px); background: #080c09; object-fit: contain; }
.day-two-grid .media-card img { height: clamp(330px, 48vw, 620px); }
.day-two-grid .media-card:nth-child(2) img { object-position: center 58%; }
.day-two-grid .media-card:nth-child(4) img { object-position: center 68%; }
.day-three-grid { grid-template-columns: repeat(12, 1fr); }
.day-three-grid .tall { grid-column: span 3; }
.day-three-grid .wide { grid-column: span 4; }
.day-three-grid .sketch { grid-column: span 8; }
.day-three-grid .media-card img { height: 480px; }
.day-three-grid .wide img, .day-three-grid .sketch img { height: 420px; }
.day-three-grid .sketch img { object-fit: contain; background: #d5d0c4; }

.selected-hardware { border-block: 1px solid var(--line); background: #17261e; }
.hardware-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(40px, 7vw, 100px); }
.hardware-copy > p:not(.kicker) { max-width: 560px; margin: 22px 0 0; color: var(--muted); }
.spec-list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0 0; border-block: 1px solid var(--line); }
.spec-list div { padding: 17px 10px; border-right: 1px solid var(--line); }
.spec-list div:last-child { border: 0; }
.spec-list dt { color: var(--green); font: 700 .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.spec-list dd { margin: 5px 0 0; font-family: var(--mono); font-size: .9rem; }
.hardware-image { margin: 0; overflow: hidden; background: #fff; }
.hardware-image img { width: 100%; height: auto; aspect-ratio: 1027 / 776; object-fit: contain; }
.hardware-image figcaption { background: var(--surface); }
.test-feature { display: grid; grid-template-columns: minmax(310px, .7fr) minmax(320px, 1fr); align-items: stretch; overflow: hidden; }
.test-summary { display: block; }
.test-summary .test-copy { max-width: 900px; min-height: 330px; margin-inline: auto; }
.test-video { margin: 0; border-right: 1px solid var(--line); background: #070b08; }
.test-video video { width: 100%; height: min(70vw, 720px); background: #050806; object-fit: contain; }
.test-video figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--muted); font: .65rem var(--mono); text-transform: uppercase; }
.test-copy { display: flex; flex-direction: column; align-items: start; justify-content: center; padding: clamp(30px, 5vw, 64px); }
.test-copy h3 { margin-top: 17px; font-size: clamp(1.5rem, 3vw, 2.6rem); }
.test-copy > p { max-width: 570px; margin: 17px 0 0; color: var(--muted); }
.test-facts { display: grid; width: 100%; grid-template-columns: 1fr 1fr; margin: 32px 0 0; border-block: 1px solid var(--line); }
.test-facts div { padding: 17px 14px 17px 0; }
.test-facts div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.test-facts dt { color: var(--green); font: 700 .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.test-facts dd { margin: 5px 0 0; font: 700 .78rem var(--mono); }
.montage-link { margin-top: 25px; }
.next-version { margin-top: clamp(64px, 8vw, 105px); }
.next-version-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 25px; }
.next-version-heading h3 { margin: 0; font-family: var(--mono); font-size: clamp(1.7rem, 4vw, 3.35rem); line-height: 1.03; letter-spacing: -.055em; }
.next-version-heading > p { width: min(100%, 460px); margin: 0; color: var(--muted); }
.iteration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.iteration-card { position: relative; min-height: 350px; padding: clamp(26px, 4vw, 44px); overflow: hidden; }
.iteration-number { color: var(--sun); font: 800 .7rem var(--mono); }
.iteration-card h4 { max-width: 420px; margin: 15px 0 0; font-family: var(--mono); font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.08; letter-spacing: -.04em; }
.iteration-card > p { max-width: 560px; margin: 16px 0 0; color: var(--muted); }
.iteration-goal { display: block; margin-top: 27px; color: var(--green); font: 700 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.iteration-icon { position: absolute; width: 140px; height: 110px; top: 26px; right: 25px; opacity: .14; }
.layers-icon i { position: absolute; width: 100px; height: 22px; right: 0; transform: skewX(-24deg); border: 2px solid var(--water); }
.layers-icon i:nth-child(1) { top: 0; }
.layers-icon i:nth-child(2) { top: 32px; right: 15px; border-color: var(--orange); }
.layers-icon i:nth-child(3) { top: 64px; right: 30px; border-color: var(--green); }
.raft-icon { display: grid; place-items: center; }
.raft-icon i { width: 130px; height: 54px; transform: rotate(-12deg); border: 8px solid var(--orange); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--sun); }
.operation-note { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(40px, 7vw, 100px); margin-bottom: clamp(75px, 10vw, 130px); padding: clamp(30px, 5vw, 56px); border: 1px solid #6d5f32; border-radius: 9px; background: rgb(244 200 77 / 5%); }
.operation-note h2 { font-size: clamp(1.55rem, 3vw, 2.6rem); }
.operation-note > p { margin: 0; color: #c8cabb; }
.site-footer { display: flex; min-height: 112px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); color: var(--muted); font: .7rem var(--mono); }
.site-footer a { text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }

.lightbox { width: min(94vw, 1200px); max-width: none; max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #0b110d; color: white; box-shadow: 0 30px 100px #000; }
.lightbox::backdrop { background: rgb(2 7 4 / 88%); backdrop-filter: blur(8px); }
.lightbox img { width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox p { margin: 0; padding: 12px 56px 12px 16px; color: var(--muted); font: .68rem var(--mono); text-transform: uppercase; }
.lightbox-close { position: fixed; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(10 16 12 / 90%); color: white; cursor: pointer; font-size: 1.5rem; }

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

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: 1fr .7fr; gap: 34px; }
  .hero-image img { max-height: 590px; }
  .site-layout { grid-template-columns: 1fr; }
  .site-notes { grid-template-columns: repeat(3, 1fr); }
  .site-note { grid-template-columns: 1fr; align-content: start; padding: 24px; border: 1px solid var(--line); border-top: 0; }
  .fire-ring-feature { grid-template-columns: 1fr; }
  .fire-ring-spec { grid-template-columns: 1fr; }
  .ring-section-diagram { border-top: 1px solid var(--line); border-left: 0; }
  .layer-grid { grid-template-columns: 1fr; }
  .product-card img { max-height: 520px; }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow li:nth-child(3)::after, .flow li:nth-child(6)::after { display: none; }
  .hardware-grid { gap: 40px; }
  .day-three-grid { grid-template-columns: 1fr 1fr; }
  .day-three-grid .tall, .day-three-grid .wide { grid-column: span 1; }
  .day-three-grid .sketch { grid-column: span 2; }
}

@media (max-width: 780px) {
  .wrap { width: min(100% - 24px, 660px); }
  .site-header { position: relative; }
  .topbar { min-height: 60px; }
  .seg-mode, .nav-links { display: none; }
  .hero { padding-top: 54px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  h1 { font-size: clamp(3.2rem, 17vw, 5.8rem); }
  .hero-image { width: calc(100% - 16px); margin-inline: auto; transform: none; }
  .hero-image img { height: 520px; }
  .facts { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .facts div { min-height: 90px; padding: 20px; border-top: 1px solid var(--line); }
  .facts div:nth-child(odd) { border-left: 1px solid var(--line); }
  .section { padding-block: 82px; }
  .site-notes { grid-template-columns: 1fr; }
  .site-note { grid-template-columns: 42px 1fr; }
  .fire-ring-gallery { margin-right: -12px; padding-right: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fire-ring-card { width: min(76vw, 340px); flex: 0 0 auto; scroll-snap-align: start; }
  .fire-ring-gallery { display: flex; }
  .fire-ring-card img { height: 390px; }
  .ring-section-cut { min-height: 330px; }
  .product-card { grid-template-columns: 1fr; }
  .product-card img { height: 330px; min-height: 0; }
  .loop-heading { align-items: start; flex-direction: column; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(3)::after { display: block; }
  .flow li:nth-child(even)::after { display: none; }
  .top-station { grid-template-columns: 1fr; }
  .transition-grid { grid-template-columns: 1fr; }
  .section-cut { min-height: 350px; }
  .build-day { grid-template-columns: 72px 1fr; gap: 13px; }
  .timeline::before { left: 35px; }
  .day-marker { width: 68px; height: 68px; box-shadow: 0 0 0 7px var(--page); }
  .day-marker span { font-size: 1rem; }
  .day-marker small { display: none; }
  .day-heading { margin-top: 2px; flex-direction: column-reverse; gap: 10px; }
  .media-grid.two-up, .video-grid { grid-template-columns: 1fr; }
  .media-card img { height: min(100vw, 580px); }
  .video-card video { height: min(110vw, 700px); }
  .day-three-grid { grid-template-columns: 1fr; }
  .day-three-grid .tall, .day-three-grid .wide, .day-three-grid .sketch { grid-column: auto; }
  .day-three-grid .media-card img, .day-three-grid .wide img, .day-three-grid .sketch img { height: min(105vw, 610px); }
  .hardware-grid, .operation-note { grid-template-columns: 1fr; }
  .hardware-copy { order: 2; }
  .test-feature { grid-template-columns: 1fr; }
  .test-video { border-right: 0; border-bottom: 1px solid var(--line); }
  .test-video video { height: min(150vw, 720px); }
  .test-copy { min-height: 330px; }
  .next-version-heading { align-items: start; flex-direction: column; gap: 18px; }
  .iteration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .seg { padding-right: 14px; }
  .actions { display: grid; }
  .status-row { gap: 7px; }
  .status { font-size: .61rem; }
  .site-map svg { width: 140%; max-width: none; transform: translateX(-28.5%); }
  .ring-measure { width: 18%; left: 1.5%; padding-left: 6px; font-size: 9px; line-height: 1.25; }
  .ring-grade { padding-right: 3px; font-size: 8px; letter-spacing: 0; }
  .ring-depth { width: 17%; right: 1.5%; font-size: 8px; }
  .site-note { grid-template-columns: 32px 1fr; padding: 20px 16px; }
  .flow { grid-template-columns: 1fr; }
  .flow li::after { display: none !important; }
  .station-amenities { grid-template-columns: 1fr; }
  .section-cut { min-height: 290px; }
  .section-slope { top: 30%; }
  .build-day { grid-template-columns: 52px 1fr; }
  .timeline::before { left: 26px; }
  .day-marker { width: 52px; height: 52px; }
  .day-content > p { font-size: .9rem; }
  .spec-list { grid-template-columns: 1fr; }
  .spec-list div { border-right: 0; border-bottom: 1px solid var(--line); }
  .spec-list div:last-child { border-bottom: 0; }
  .site-footer { align-items: start; flex-direction: column; justify-content: center; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}