/* The site's ecosystem page: the scrollytelling build-out (the shared eco-build2 engine) wearing the blend's chrome.
   Layout from the EXPLORE b2 attempt (Rob 2026-10-28 final-scroll), adapted to the site's STICKY header: the rail and
   the pinned stage sit under the header (top: the header's height, read into --hh by ecosystem-page.js), the fixed
   explore head is gone, the final page is laid out with the header's band reserved. Seven sections (states 0, 1a, 1b,
   2, 3, 4, 5) in a narrow left column, the stage pinned on the right; the final state is a full-width web page. */
html.eco-build{scroll-behavior:auto;scroll-padding-top:0;overflow-anchor:none}
.eco-build-page{--hh:86px;--dim:#6E85A3;--blue2:#9DC0F0;--amber:#C4863B;background:#090D16}
/* the header sits below the modal layer (the stage wrap carries z 7 at the final state, the modal is fixed at z 6 inside it) */
.eco-build-page .header{z-index:4}
.eco-build-page .header-actions{gap:22px}
.eco-build-page .eco-title{font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eco-build-page .map-link{font-size:14px}
.eco-build-page .map-link:hover{color:var(--blue)}
.eco-build-page .eco-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(115,155,207,.4);color:#E8EEF8;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.eco-build-page .eco-close:hover{border-color:var(--blue);color:#fff}
/* the pack switcher: a quiet Defense | Agriculture pill pair, the current pack filled (the engine builds it, .x-packs) */
.eco-build-page .pack-slot{display:inline-flex;align-items:center}
.eco-build-page .x-packs{height:24px;gap:6px;margin:0}
.eco-build-page .x-packs a{height:24px;padding:0 11px;font-size:9.5px;letter-spacing:.16em}
/* the final page's lockup line (BLUESTAQ · The Architecture of Trust.) would read twice under the site header, which
   carries the same lockup 14px above it: on the site page the header is the lockup and the title block starts at the headline */
.eco-build-page .eb2-root .eb-lockup{display:none}
.eco-build-page .eb2-root .eb-h1{margin-top:0}
/* embedded in the takeover (?embed=1): the close button replaces the way back, the footer goes */
.eco-build-page.eco-embed #back-link,.eco-build-page.eco-embed footer{display:none}
/* shared explore primitives the engine's final page expects (x-pill controls in the hero block, status labels) */
.x-stage{position:relative}
.x-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(115,155,207,.35);background:rgba(14,27,54,.6);color:#C7D2E6;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.x-pill:hover,.x-pill:focus-visible{border-color:var(--blue);color:#fff;outline:0}
.x-pill[aria-pressed="true"],.x-pill.is-on{background:rgba(196,134,59,.14);border-color:rgba(196,134,59,.7);color:#E8EEF8}
/* the primary action of the final page's pill row (Rob 2026-11-05: Contact us, right of Full map): filled Blue1, white text, same height */
.x-pill.x-pill-primary{background:#385FAF;border-color:#385FAF;color:#fff}
.x-pill.x-pill-primary:hover,.x-pill.x-pill-primary:focus-visible{background:#4A72C4;border-color:#9DC0F0;color:#fff}
.x-status{display:inline-block;font-weight:500;font-size:9.5px;letter-spacing:.16em;color:#8FA6C9}
.x-status.amber{color:var(--amber)}
/* ---- the scrollytelling grid ---- */
.b-page{display:grid;grid-template-columns:48px 288px minmax(0,1fr);align-items:start;position:relative;z-index:2}
.b-rail{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:6;transition:opacity .45s ease}
.b-col{transition:opacity .45s ease}
.b-page.b-final .b-rail,.b-page.b-final .b-col{opacity:0;pointer-events:none}
.b-ch.b-spacer{min-height:0;padding:0;opacity:0!important}
.b-rail a{width:24px;height:24px;border-radius:50%;border:1px solid rgba(115,155,207,.4);display:flex;align-items:center;justify-content:center;position:relative;font-weight:500;font-size:8.5px;letter-spacing:.04em;color:var(--dim);text-transform:lowercase;transition:background .3s,border-color .3s,color .3s}
.b-rail a::after{content:attr(data-name);position:absolute;left:32px;top:50%;transform:translateY(-50%);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#E8EEF8;background:rgba(14,27,54,.96);border:1px solid rgba(115,155,207,.3);border-radius:999px;padding:4px 9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.b-rail a:hover::after,.b-rail a:focus-visible::after{opacity:1}
.b-rail a:hover,.b-rail a:focus-visible{border-color:var(--blue);color:#fff}
.b-rail a.done{border-color:rgba(157,192,240,.7);color:#C7D2E6}
.b-rail a[aria-current]{background:var(--blue2);border-color:var(--blue2);color:#090D16}
.b-rail a.amber[aria-current]{background:var(--amber);border-color:var(--amber)}
.b-rail .line{width:1px;height:20px;background:rgba(115,155,207,.22);transition:background .3s}
.b-rail .line.done{background:rgba(157,192,240,.6)}
.b-col{padding:0 16px 0 6px;min-width:0}
.b-ch{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hh) + 40px) 0 60px}
.b-ch .k{font-weight:500;font-size:9.5px;letter-spacing:.22em;color:var(--blue);text-transform:uppercase;line-height:1.5}
.b-ch h2{font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1.1;margin:10px 0 12px;color:#fff}
.b-ch p{font-weight:300;font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.b-ch .x-status{display:block;margin-top:14px}
.b-ch:not(.is-active){opacity:.45;transition:opacity .4s}
.b-ch.is-active{opacity:1;transition:opacity .4s}
.b-stage-wrap{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));padding:14px 4px 6px 0;min-width:0;display:flex;flex-direction:column;transition:margin-left 1.1s cubic-bezier(.4,0,.2,1),padding 1.1s cubic-bezier(.4,0,.2,1)}
.b-page.b-final .b-stage-wrap{margin-left:-336px;height:auto;min-height:calc(100vh - var(--hh));min-height:calc(100dvh - var(--hh));padding:14px 0 0;z-index:7}
.b-stage{position:relative;flex:1 1 auto;min-height:0}
.b-cue{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-weight:500;font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;pointer-events:none;transition:opacity .5s}
.b-cue.off{opacity:0}
.b-end{padding:0 0 40px}
.b-page .eb-ct-s{display:none}
/* the site footer follows the composed page; it must not sit under the pinned stage in states 0 to 5 */
.eco-build-page footer{position:relative;z-index:8}
@media(max-width:900px){
 .b-page{grid-template-columns:minmax(0,1fr)}
 .b-rail{display:none}
 .b-stage-wrap{order:-1;position:sticky;top:var(--hh);height:50vh;height:50dvh;padding:8px 8px 0;background:#090D16;z-index:5}
 .b-page.b-final .b-stage-wrap{margin-left:0;height:auto;min-height:0;padding:8px 0 0}
 /* the phone's final page: the chapter column leaves the flow (it sat under the pinned stage; grown to the composed page
    the stage would push it down and the scroll picker would read the wrong chapter), Replay brings it back */
 .b-page.b-final .b-col{display:none}
 .b-stage-wrap::after{content:'';position:absolute;left:0;right:0;bottom:-22px;height:22px;background:linear-gradient(180deg,#090D16,rgba(9,13,22,0));pointer-events:none}
 .b-cue{display:none}
 .b-col{padding:0 18px}
 .b-ch{min-height:0;padding:30px 0 8px;scroll-margin-top:calc(50vh + var(--hh))}
 .b-ch h2{font-size:22px}
 .b-ch:not(.is-active){opacity:1}
 .b-end{padding-bottom:40vh}
}
@media(max-width:820px){
 /* the site header wraps to two rows for the prompt; this page has none, so one slim row */
 .eco-build-page .header{height:60px;min-height:0;flex-wrap:nowrap;padding:0 18px;gap:12px}
 .eco-build-page .brand{width:auto}.eco-build-page .brand img{width:112px;height:18px}
 .eco-build-page .header-actions{gap:10px;margin-left:auto}
 .eco-build-page .eco-title,.eco-build-page #back-link{display:none}
 .eco-build-page .map-link{font-size:12px}
 .eco-build-page .x-packs{gap:4px}
 .eco-build-page .x-packs a{padding:0 7px;font-size:8.5px;letter-spacing:.1em}
 /* four packs (2026-11-05) do not fit a phone header row: the pill row scrolls sideways inside its slot, no scrollbar drawn */
 .eco-build-page .pack-slot{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent)}
 .eco-build-page .header-actions{min-width:0;flex:1 1 auto;justify-content:flex-end}
 .eco-build-page .pack-slot::-webkit-scrollbar{display:none}
 .eco-build-page .x-packs{flex-wrap:nowrap;padding:0 18px 0 12px}
 /* embedded on a phone the close button takes the Full map link's room (the final page's Full map pill stays) */
 .eco-build-page .eco-close{width:32px;height:32px;font-size:20px}
 .eco-build-page.eco-embed .map-link{display:none}
}
@media(prefers-reduced-motion:reduce){.b-ch,.b-rail,.b-col,.b-rail a,.b-rail .line,.b-cue,.b-stage-wrap{transition:none}}