/* ʻĀina-OS landing + story pages (landing brief, 2026-09/10).
   Dark photographic hero, a gradient seam, then a light page (D41, D42).
   Type: Brygada 1918 headlines, Onest body (D39). Coral is the only action
   colour. Motion: the hero drift, the capital-project timeline that fills
   once, and a few play-once reveals; each has a reduced-motion end state, and everything
   hidden for an entrance is gated on .js so the page is whole without JS.
   accounts/theme.html mirrors the :root tokens below; keep the two in step. */

:root {
  --ink: #0c2e3d; --mut: #3f5a68; --dim: #58707d;
  --paper: #f7f5f0; --card: #ffffff; --card-2: #f7f5f0;
  --rule: rgba(12,46,61,.13); --rule-2: rgba(12,46,61,.30);
  --energy: #955600; --energy-soft: rgba(149,86,0,.12); --rail: #c2410c;
  --coral: #e8734a; --coral-ink: #1a0d08; --warn: #8a5a00; --warn-bg: #fbeed5;
  --night: #061821;
  --serif: 'Brygada 1918', Georgia, serif;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-both: cubic-bezier(0.645, 0.045, 0.355, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.landing { font: 400 17px/1.55 var(--sans); }
img { max-width: 100%; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 10; top: 12px; left: 12px; width: auto; height: auto; clip: auto; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin-bottom: 16px; }
h3 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.lede { color: var(--mut); font-size: 18px; margin: 0; max-width: 62ch; }
.note { margin: 28px 0 0; font-size: 13px; color: var(--dim); max-width: 80ch; }
.sec { padding: 112px 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-head { margin-bottom: 56px; }

.btn { display: inline-block; background: var(--coral); color: var(--coral-ink); font: 600 16px/1 var(--sans); padding: 15px 22px; border: 0; border-radius: 6px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 160ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn:focus-visible, .nav a:focus-visible, .tband a:focus-visible, .link:focus-visible, .pin-dot:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.link { font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ nav --- */
.nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 40px; }
.nav .logo { height: 30px; width: auto; display: block; }
.nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav .nav-cta { background: var(--coral); color: var(--coral-ink); font-weight: 600; padding: 9px 16px; border-radius: 6px; }
.nav.on-dark { color: #edf3f6; }
.nav.on-light { border-bottom: 1px solid var(--rule); }

/* ----------------------------------------------------------- title band --- */
/* Hidden over the hero, whose own nav is there; fades in once the hero has
   scrolled away and underlines the chapter you're reading (landing.js, D55).
   Without JS it stays hidden and the hero nav is the way around. */
.tband { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 40px;
         font: 400 15px/1 var(--sans); color: var(--ink); background: rgba(247,245,240,.92); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 1px 0 var(--rule);
         opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
         transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms; }
.tband.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible;
            transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.tband a { text-decoration: none; white-space: nowrap; }
.tb-logo img { height: 26px; width: auto; display: block; }
.tb-nav { display: flex; gap: 24px; margin-left: 8px; }
.tb-nav a { position: relative; padding: 6px 0; color: var(--mut); }
.tb-nav a:hover, .tb-nav a.here { color: var(--ink); }
.tb-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--ink); opacity: 0; transition: opacity 150ms ease-out; }
.tb-nav a.here::after { opacity: 1; }
.tb-end { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.tb-cta { background: var(--coral); color: var(--coral-ink); font-weight: 600; padding: 9px 16px; border-radius: 6px; }
/* A chapter link lands its heading below the band. */
.landing section[id] { scroll-margin-top: 64px; }

/* ----------------------------------------------------------------- hero --- */
.hero { --fg: #edf3f6; --fmut: #a9bdc8; --fdim: #83a0ae; --frule: rgba(237,243,246,.14);
        position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; background: var(--night); color: var(--fg); }
.world { position: absolute; top: 0; left: 0; width: 125vw; aspect-ratio: 3600 / 2331; animation: drift 70s var(--ease-both) infinite alternate; will-change: transform; }
.world.paused { animation-play-state: paused; }
.world img { display: block; width: 100%; height: 100%; filter: brightness(0.82) saturate(0.9); }
@keyframes drift { to { transform: translate3d(-25vw, calc(100vh - 80.94vw), 0); } }
@media (max-aspect-ratio: 5/4) {
  .world { width: auto; height: 108vh; }
  @keyframes drift { to { transform: translate3d(calc(100vw - 166.8vh), -8vh, 0); } }
}
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--night) 0%, rgba(6,24,33,.6) 30%, rgba(6,24,33,0) 62%); }
.grat { position: absolute; background: var(--frule); }
.grat.lat { left: 0; right: 0; height: 1px; }
.grat.lon { top: 0; bottom: 0; width: 1px; }
.grat span { position: absolute; font-size: 11px; color: var(--fdim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grat.lat span { left: 50%; top: -16px; }
.grat.lon span { top: 30%; left: 6px; }
.isle { position: absolute; font-family: var(--serif); font-size: 15px; opacity: .86; white-space: nowrap; }
.isle.r { transform: translate(0, -50%); }
.isle.l { transform: translate(-100%, -50%); }
.isle.b { transform: translate(-50%, 0); }
.hero .body { position: relative; z-index: 2; margin-top: auto; padding: 0 40px 72px; max-width: 800px; }
.hero h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.1; margin-bottom: 22px; }
.hero .lede { color: var(--fmut); margin-bottom: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.credit { position: absolute; z-index: 2; right: 40px; bottom: 18px; font-size: 11px; color: var(--fdim); text-align: right; max-width: 46ch; }
.seam { height: 38vh; background: linear-gradient(in oklab to bottom, var(--night) 0%, #0c2e3d 22%, #5d7d8a 55%, #d9ddd8 82%, var(--paper) 100%); }
.seam + .sec { padding-top: 24px; }

/* ---------------------------------------------- collect: switchboard ---- */
.board { display: grid; grid-template-columns: 140px repeat(4, 1fr); border-top: 1px solid var(--rule-2); }
.board > div { padding: 14px 16px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.board .corner, .board .colh { border-bottom-color: var(--rule-2); }
.board .colh { padding-top: 18px; }
.board .shape { height: 88px; width: auto; max-width: 100%; background: url("../img/landing/islands.8c1494bc9cdd.svg") no-repeat; margin-bottom: 10px; }
.board .colh .nm { font-family: var(--serif); font-size: 19px; }
.board .colh .cty { font-size: 13px; color: var(--dim); }
.board .rowh { color: var(--dim); font-size: 14px; }
.board .gap { color: var(--dim); font-size: 13px; font-style: italic; }
.board .full { grid-column: 2 / -1; color: var(--mut); }
.mlist { display: none; }
.sink svg { display: block; width: 100%; height: 56px; }
.wire { fill: none; stroke: rgba(12,46,61,.5); stroke-width: 1.4; }
.sink .bar { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(12,46,61,.06), 0 12px 32px rgba(12,46,61,.10); }
.sink .bar .t { font-family: var(--serif); font-size: 19px; }
.sink .bar span { color: var(--mut); font-size: 14px; }
/* Wires draw once in view. */
.js .anim .wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .anim.play .wire { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out) var(--d, 0ms); }
.js .anim .fadein { opacity: 0; }
.js .anim.play .fadein { opacity: 1; transition: opacity 300ms var(--ease-out) var(--d, 0ms); }

/* ------------------------------- measure + allocate: the bill and its meters --- */
/* A still diagram: the bill, its meters and each tenant's share, all three steps shown. */
.sec.tenants { padding-top: 72px; }
.tenants .sec-head { margin-bottom: 40px; }
.tenants .sec-head h2 { margin-bottom: 0; }
.alloc { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; margin-bottom: 48px; }
.labels { padding-left: 22px; border-left: 1px solid var(--rail); }
.lab { padding: 14px 0; }
.step-name { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.step-text { display: block; font-size: 15px; color: var(--mut); margin-top: 4px; }
.stage { position: relative; height: 380px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(12,46,61,.06), 0 12px 32px rgba(12,46,61,.10); overflow: hidden; }
.bill { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 260px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card-2); padding: 20px 22px; }
.bill .u { font-family: var(--serif); font-size: 20px; }
.bill .p { font-size: 15px; margin-top: 2px; }
.bill .per, .bill .src { color: var(--dim); font-size: 14px; }
.bill .src { margin-top: 12px; font-size: 13px; }
.bill dl { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 16px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.bill dt { color: var(--dim); font-size: 14px; }
.bill dd { margin: 0; text-align: right; font-size: 15px; }
.bill dd.big { font-size: 20px; font-weight: 500; }
.meters { position: absolute; left: 340px; right: 28px; top: 28px; bottom: 28px; display: grid; grid-template-rows: repeat(4, 1fr) auto; }
.sp { position: absolute; left: 312px; top: 12.5%; bottom: 19%; width: 1px; background: var(--rule-2); }
.ms { position: absolute; left: 288px; width: 24px; top: 50%; height: 1px; background: var(--rule-2); transform-origin: left; }
.m { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--rule); padding: 0 4px; }
.m .nm { font-size: 15px; }
.m .id { font-size: 12px; color: var(--dim); }
.m .right { text-align: right; }
.m .kwh { color: var(--energy); font-size: 15px; }
.m .share { font-size: 17px; font-weight: 500; }
.m .share small { color: var(--dim); font-size: 13px; font-weight: 400; }
.recon { padding-top: 12px; font-size: 13px; color: var(--mut); text-align: right; }
.below { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; color: var(--mut); }
.below p { margin: 0; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* ------------------------------------------------ screenshots with pins --- */
.shot + .shot { margin-top: 112px; }
.shot-h { margin-bottom: 22px; }
.shot-h p { margin: 0; color: var(--mut); max-width: 60ch; }
.fig { position: relative; margin: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(12,46,61,.10), 0 30px 60px -30px rgba(12,46,61,.35); }
.fig > img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pin-dot { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 13px/28px var(--sans); text-align: center; border: 0; padding: 0; cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(12,46,61,.35); transition: transform 240ms var(--ease-out), opacity 180ms ease, background-color 150ms ease; }
.js .pins:not(.play) .pin-dot { transform: scale(.4); opacity: 0; }
.js .pins.play .pin-dot { animation: pin-in 240ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes pin-in { from { transform: scale(.4); opacity: 0; } }
.pins.focus .pin-dot { opacity: .35; }
.pins.focus .pin-dot.on { opacity: 1; background: var(--coral); color: var(--coral-ink); transform: scale(1.12); }
.legend { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; counter-reset: n; }
.legend li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 15px; color: var(--mut); transition: opacity 150ms ease; }
.legend li::before { counter-increment: n; content: counter(n); width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font: 600 12px/21px var(--sans); text-align: center; margin-top: 1px; }
.legend b { display: block; color: var(--ink); font-weight: 500; }
.pins.focus + .legend li { opacity: .45; }
.pins.focus + .legend li.on { opacity: 1; }

/* ------------------------------------------------ dashboards: the split --- */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split h2 { font-size: clamp(28px, 2.7vw, 36px); }
.split .lede { font-size: 17px; }
.field { position: relative; aspect-ratio: 680 / 640; }
.field .c { position: absolute; margin: 0; }
.pc { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(12,46,61,.07), 0 24px 48px -20px rgba(12,46,61,.30), 0 6px 14px -6px rgba(12,46,61,.12); }
.js .field .c { opacity: 0; transform: translateY(28px) scale(.98); }
.js .field.play .c { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 80ms); }

/* ------------------------------------------------- solar: the fleet board --- */
.fleet { border-top: 1px solid var(--rule-2); }
.frow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 3.4fr); gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.frow b { display: block; font-weight: 500; }
.frow small { color: var(--dim); font-size: 13px; }
.fhead { font-size: 13px; color: var(--dim); padding: 10px 0; }
.frow.flag { background: linear-gradient(to right, rgba(194,65,12,.06), rgba(194,65,12,0) 70%); }
.fst { display: inline-flex; align-items: center; gap: 8px; }
.fst::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #1f6b45; flex: none; }
.fst.warn::before { background: #b7791f; }
.fst.bad { color: var(--rail); font-weight: 500; }
.fst.bad::before { background: var(--rail); }
.fbar { position: relative; display: flex; align-items: center; gap: 12px; }
.fbar::before { content: ''; flex: 1; height: 10px; border-radius: 5px; background: rgba(12,46,61,.08); }
.fbar i { position: absolute; left: 0; top: 50%; height: 10px; margin-top: -5px; width: calc((100% - 52px) * var(--p) / 1.1); border-radius: 5px; background: var(--energy); transform-origin: left; }
.fbar::after { content: ''; position: absolute; left: calc((100% - 52px) / 1.1); top: 50%; height: 18px; margin-top: -9px; width: 1.5px; background: var(--ink); opacity: .5; }
.frow.flag .fbar i { background: var(--rail); }
.fbar em { font-style: normal; width: 40px; text-align: right; font-size: 14px; }
.solar-shot, .merge-shot { margin-top: 72px; }
.merge-shot .shot-h .note { margin-top: 6px; }
.js .fleet .fbar i { transform: scaleX(0); }
.js .fleet.play .fbar i { transform: scaleX(1); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 90ms + 150ms); }

/* ----------------------------------------- capital projects: the lifecycle --- */
/* Plays once: --t runs 0 → 1 over 2.4 s the first time the timeline is in view (landing.js). */
.life .sec-head { margin-bottom: 36px; }
.permit { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 56px; padding: 28px; border-radius: 12px; background: #efece5; }
.permit h3 { font-size: 22px; }
.permit p { margin: 0; color: var(--mut); max-width: 52ch; }
.permit .note { margin-top: 10px; }
/* .pmt shares its card box and step chips with the work-order ticket (.tk), below. */
.pmt-h { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 11.5px; }
.pmt-src { letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.pmt-t { font-weight: 500; font-size: 14.5px; margin-top: 8px; }
.pmt-d { color: var(--mut); margin-bottom: 12px; }
.pmt-path { display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.pmt-path li { background: #f1efe9; color: var(--dim); }
.pmt-path .done { background: var(--ink); color: #fff; }
.pmt-path .now { background: #fff; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pmt-mail { display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--mut); }
.pmt-mail i { width: 14px; height: 10px; border: 1.3px solid currentColor; border-radius: 2px; flex: none; background: linear-gradient(to bottom right, transparent calc(50% - .7px), currentColor 50%, transparent calc(50% + .7px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - .7px), currentColor 50%, transparent calc(50% + .7px)) right / 50% 100% no-repeat; }
.proj { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 30px; font-size: 14px; color: var(--mut); }
.proj b { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink); }
/* --t: 0 → 1 left to right, tweened by landing.js; 1 (the default) is the finished diagram.
   Each step, band label and rebate point lights up as --t passes its --x. */
.tl { --t: 1; position: relative; }
.step, .rs, .band-l { --k: clamp(0, calc((var(--t) - var(--x)) * 30 + 1), 1); }
.phases { display: grid; grid-template-columns: 2fr 3fr 1fr; gap: 10px; margin-bottom: 26px; }
.phase { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.phase span { display: block; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--dim); font-weight: 400; margin-top: 2px; }
.lane { position: relative; }
.lane .line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--rule); }
.lane .line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(clamp(0, calc((var(--t) - 1/12) * 12 / 10), 1)); display: block; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.steps .line { top: 9px; }
.step { position: relative; text-align: center; padding: 0 4px; }
.step .dot { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 16px; background: var(--paper); border: 2px solid color-mix(in oklab, var(--ink) calc(var(--k) * 100%), rgba(12,46,61,.30)); position: relative; z-index: 1; }
.step .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); transform: scale(var(--k)); }
.step .nm { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.step .when { font-size: 12.5px; color: var(--dim); margin: 2px 0 8px; }
.step .art { font-size: 14px; line-height: 1.4; color: var(--mut); }
.step .nm, .step .art, .step .when { opacity: calc(.28 + var(--k) * .72); }
.step .art b { font-weight: 500; color: var(--ink); }
.rebate { margin-top: 44px; padding-top: 18px; border-top: 1px dashed var(--rule-2); }
.rebate .rh { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; color: var(--mut); margin-bottom: 18px; }
.rebate .rh b { color: var(--energy); font-weight: 500; font-size: 15px; }
.rlane { position: relative; height: 92px; }
.rlane .line { top: 9px; background: var(--energy-soft); }
.rlane .line i { background: var(--energy); }
.band { position: absolute; top: 3px; height: 14px; left: calc(var(--x0) * 100%); width: calc((var(--x1) - var(--x0)) * 100%); border-radius: 7px; background: var(--energy-soft); overflow: hidden; }
.band i { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(149,86,0,.28) 0 6px, rgba(149,86,0,.12) 6px 12px); transform-origin: left; transform: scaleX(clamp(0, calc((var(--t) - var(--x0)) / (var(--x1) - var(--x0))), 1)); display: block; }
.band-l { --x: var(--x0); position: absolute; top: 26px; left: calc(var(--x0) * 100%); width: calc((var(--x1) - var(--x0)) * 100%); text-align: center; font-size: 12.5px; color: var(--energy); opacity: calc(.25 + var(--k) * .75); }
.rs { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); text-align: center; width: 120px; }
.rs .rd { width: 20px; height: 20px; margin: 0 auto 8px; border-radius: 50%; background: var(--paper); border: 2px solid rgba(149,86,0,.35); position: relative; }
.rs .rd::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--energy); transform: scale(var(--k)); }
.rs .rn { font-size: 14px; font-weight: 500; color: var(--energy); opacity: calc(.3 + var(--k) * .7); }
.rs .rw { font-size: 12.5px; color: var(--dim); opacity: calc(.3 + var(--k) * .7); }
.rs.paid .rd { width: 26px; height: 26px; margin-top: -3px; }
.rs.paid .rn { font-size: 15px; }
.rs.paid .amt { font-family: var(--serif); font-size: 20px; color: var(--energy); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 6px)); }
.vonly { display: none; }

/* --------------------------------------------- also runs: three objects --- */
.objs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.obj .stagebox { height: 290px; border-radius: 10px; background: #efece5; display: flex; align-items: center; justify-content: center; padding: 22px; margin-bottom: 20px; overflow: hidden; }
.obj p { margin: 0; color: var(--mut); font-size: 15.5px; max-width: 42ch; }
.obj h3 { font-size: 22px; }
.tk, .pmt { background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(12,46,61,.08), 0 10px 24px -12px rgba(12,46,61,.3); padding: 14px 16px; font-size: 13px; }
.tk { width: 100%; max-width: 280px; }
.tk .id { color: var(--dim); font-size: 11.5px; letter-spacing: .04em; }
.tk .tt { font-weight: 500; font-size: 14.5px; margin: 2px 0 10px; }
.tk .st { display: flex; gap: 6px; margin-bottom: 10px; }
.tk .st span, .pmt-path li { flex: 1; text-align: center; font-size: 11px; padding: 3px 0; border-radius: 4px; }
.tk .st span { background: var(--ink); color: #fff; }
.tk .kv { display: flex; justify-content: space-between; gap: 10px; color: var(--mut); padding: 3px 0; border-top: 1px solid var(--rule); }
.tk .kv b { color: var(--ink); font-weight: 500; text-align: right; }
.js .objs .tk .st span { background: #f1efe9; color: var(--dim); }
.js .objs.play .tk .st span { animation: stamp 260ms var(--ease-out) both; animation-delay: calc(var(--i) * 380ms + 200ms); }
@keyframes stamp { from { background: #f1efe9; color: var(--dim); } to { background: var(--ink); color: #fff; } }
.doc { width: 100%; max-width: 280px; }
.doc .row { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 8px; padding: 9px 12px; box-shadow: 0 0 0 1px rgba(12,46,61,.08); margin-bottom: 8px; font-size: 13px; }
.doc .ic { width: 28px; height: 34px; border-radius: 3px; border: 1.5px solid var(--rule-2); position: relative; flex: none; }
.doc .ic::after { content: ''; position: absolute; left: 5px; right: 5px; top: 9px; height: 12px; background: repeating-linear-gradient(to bottom, var(--rule-2) 0 1.5px, transparent 1.5px 4px); }
.doc .row b { display: block; font-weight: 500; font-size: 13.5px; }
.doc .row small { color: var(--dim); }
.doc .badge { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); white-space: nowrap; }
.doc .row.dim { opacity: .55; }
.doc .filter { display: inline-block; font-size: 11.5px; color: var(--mut); border: 1px solid var(--rule-2); border-radius: 999px; padding: 2px 10px; margin-bottom: 10px; background: #fff; }
.chat { width: 100%; max-width: 290px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.chat .q { align-self: flex-end; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 12px 12px 3px 12px; max-width: 85%; }
.chat .a { align-self: flex-start; background: #fff; padding: 10px 12px; border-radius: 12px 12px 12px 3px; box-shadow: 0 0 0 1px rgba(12,46,61,.08); max-width: 92%; }
.chat .cite { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--rail); border: 1px solid rgba(194,65,12,.35); border-radius: 999px; padding: 2px 9px; }
.chat .cite::before { content: ''; width: 9px; height: 11px; border: 1.3px solid currentColor; border-radius: 1.5px; }
.js .rv { opacity: 0; transform: translateY(8px); }
.js .play .rv { opacity: 1; transform: none; transition: opacity 220ms ease, transform 260ms var(--ease-out); transition-delay: calc(var(--i) * 140ms); }

/* ---------------------------------------------- who, proof, contact, foot --- */
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.who p { margin: 0 0 12px; color: var(--mut); max-width: 52ch; }
.proof { border-left: 2px solid var(--ink); padding-left: 24px; }
.proof h3 { margin-bottom: 10px; }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
/* The honeypot (contact_form): off screen for people, still in the form for bots. */
.form .hp { position: absolute; left: -10000px; }
.form label, .form legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.form input[type=text], .form input[type=email], .form select, .form textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--rule-2); border-radius: 6px; padding: 11px 12px; }
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form .isles { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form .isles label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; font-size: 15px; margin: 0; }
.form .opt { color: var(--dim); font-weight: 400; }
#contactStatus { font-size: 15px; }
#contactStatus.ok { color: #1f6b45; }
#contactStatus.err { color: #a3361a; }
.foot { padding: 28px 0 56px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim); }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.foot p { margin: 0; max-width: 90ch; }

/* --------------------------------------------------------- story page --- */
.story-hero { padding: 96px 0 64px; }
.story-hero h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; margin-bottom: 20px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptable th, .ptable td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ptable th { font-size: 13px; color: var(--dim); font-weight: 500; border-bottom-color: var(--rule-2); }
.ptable td:first-child { font-family: var(--serif); font-size: 17px; }
.atlas { position: relative; aspect-ratio: 3600 / 2331; background: url("../img/landing/islands.8c1494bc9cdd.svg") center / contain no-repeat; margin: 8px 0 40px; }
.atlas .pt { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--paper); }
.atlas .pt span { position: absolute; left: 14px; top: -7px; font-size: 13px; white-space: nowrap; }
.atlas .pt.l span { left: auto; right: 14px; }
.rbar { display: flex; height: 18px; border-radius: 4px; overflow: hidden; margin: 18px 0 10px; }
.rbar .paid { background: var(--energy); }
.rbar .pipe { background: repeating-linear-gradient(135deg, rgba(149,86,0,.35) 0 6px, rgba(149,86,0,.15) 6px 12px); }
.rkey { display: flex; gap: 24px; font-size: 14px; color: var(--mut); flex-wrap: wrap; }
.rkey i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--energy); }
.rkey i.pipe { background: repeating-linear-gradient(135deg, rgba(149,86,0,.45) 0 3px, rgba(149,86,0,.2) 3px 6px); }

/* --------------------------------------------------------------- phone --- */
@media (max-width: 860px) {
  .tband { height: 56px; padding: 0 16px; }
  .tb-nav, .tb-signin { display: none; }
  .tb-cta { padding: 8px 12px; }
  .wrap { padding: 0 16px; }
  .sec { padding: 72px 0; }
  .nav { padding: 16px; }
  .nav ul { gap: 16px; font-size: 14px; }
  .nav ul li:not(.keep) { display: none; }
  .nav .nav-cta { padding: 8px 12px; }
  .hero .body { padding: 0 16px 64px; }
  .credit { left: 16px; right: 16px; }
  .board, .sink svg { display: none; }
  .mlist { display: block; margin-top: 16px; border-top: 1px solid var(--rule); }
  .mlist div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
  .mlist b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; }
  .sink .bar { margin-top: 20px; }
  .tenants .sec-head { margin-bottom: 20px; }
  .alloc { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
  .lab { padding: 8px 0; }
  .stage { height: auto; padding: 12px 14px; }
  .bill { position: static; width: auto; transform: none; padding: 10px 14px; }
  .bill .per, .bill .src { display: none; }
  .bill dl { margin-top: 8px; padding-top: 8px; gap: 2px 12px; }
  .sp, .ms { display: none; }
  .meters { position: static; margin-top: 8px; }
  .m { min-height: 44px; padding: 4px 2px; }
  .m .id { display: none; }
  .m .nm { font-size: 14px; }
  .below { grid-template-columns: 1fr; }
  .pin-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; line-height: 22px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(12,46,61,.35); }
  .legend { grid-template-columns: 1fr; gap: 14px; }
  .shot + .shot { margin-top: 72px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .field { aspect-ratio: auto; display: grid; gap: 14px; }
  .field .c { position: static; width: auto !important; }
  .js .field .c { opacity: 1; transform: none; }
  .field .c.ph-hide { display: none; }
  .desk { display: none; }
  .vonly { display: block; }
  .vlist { list-style: none; margin: 0; padding: 0; position: relative; }
  .vlist::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--rule-2); }
  .vlist li { position: relative; padding: 0 0 26px 38px; }
  .vlist li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
  .vlist .ph { padding: 8px 0 14px 38px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--dim); }
  .vlist .ph::before { display: none; }
  .vlist .nm { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
  .vlist .when { font-size: 12.5px; color: var(--dim); }
  .vlist .art { font-size: 15px; color: var(--mut); margin-top: 4px; }
  .vlist .rb { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--energy); background: var(--energy-soft); border-radius: 999px; padding: 2px 10px; }
  .objs { grid-template-columns: 1fr; gap: 40px; }
  .fhead { display: none; }
  .frow { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .frow .fbar { grid-column: 1 / -1; }
  .frow > span:nth-child(3) { display: none; }
  .who, .contact { grid-template-columns: 1fr; gap: 32px; }
  .permit { grid-template-columns: 1fr; gap: 20px; padding: 18px; margin-top: 40px; }
  .form { grid-template-columns: 1fr; }
  .ptable .hide-ph { display: none; }
  .atlas .pt span { font-size: 11px; }
}
@media print { .tl { --t: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
  .tband, .tband.on, .tb-nav a::after { transition: none; }
  html { scroll-behavior: auto; }
  .world { animation: none; }
  .js .anim .wire { stroke-dashoffset: 0; }
  .js .anim .fadein, .js .field .c, .js .rv { opacity: 1; transform: none; }
  .js .pins.play .pin-dot { animation: none; }
  .js .fleet .fbar i { transform: none; }
  .js .objs .tk .st span { background: var(--ink); color: #fff; animation: none; }
  .anim *, .field *, .pins *, .objs * { transition: none !important; }
}