/* =========================================================
   NEXEN — landing page (index.html)
   Loaded AFTER style.css. The page opens on a BCKUP//ENRGY welcome, then
   hands over to the regular graphite site. It must still read as the
   OpenNEXEN page, not the BCKUP//ENRGY page, so the graphite theme stays
   and the neon green is expressed only in the site chrome (nav, path bar,
   grid, a soft glow) and in the welcome's own elements.

   --bk is the blend between the two, set on <html> by script.js:
   1 while the BCKUP//ENRGY welcome is on screen, easing to 0 as the
   LUMINA3ai section scrolls in. The chrome rules below mix towards the green
   by that amount, so at 0 they resolve to the exact colours in style.css.
   ========================================================= */

:root {
    --bk: 1;
    --lk: 0;

    /* BCKUP//ENRGY palette (mirrors bckup.css) */
    --bk-green: #39ff14;
    --bk-green-dim: rgba(57, 255, 20, 0.4);
    --bk-amber: #ffb020;
    --bk-glow: rgba(57, 255, 20, 0.16);
    --bk-bg: #060a07;
    --bk-panel: #0b120d;
    --bk-line: rgba(120, 255, 140, 0.16);
    --bk-line-faint: rgba(120, 255, 140, 0.05);
    --bk-nav: rgba(3, 5, 4, 0.78);

    /* LUMINA3ai's blue (its own site's accent), used by its section and its overview card */
    --lm: #38b6ff;
    --lm-dim: rgba(56, 182, 255, 0.4);
    --lm-glow: rgba(56, 182, 255, 0.14);
    --lm-ink: #04121c;
    --lm-aura: rgba(56, 182, 255, 0.28);

    /* the same set of chrome tokens as the BCKUP palette above, in LUMINA3ai's blue */
    --lm-bg: #060b12;
    --lm-panel: #0a121b;
    --lm-line: rgba(120, 190, 255, 0.16);
    --lm-line-faint: rgba(120, 190, 255, 0.05);
    --lm-nav: rgba(3, 6, 10, 0.78);
}

/* ---------------- Site chrome: green for BCKUP//ENRGY, blue for LUMINA3ai ----------------
   --bk and --lk (both 0..1, set on <html> by script.js) are how much of each tint the chrome shows.
   Each --ck-* token below blends the blue over the green over the graphite default, so at --bk 0 and
   --lk 0 every value is exactly the one in style.css. Green drains and blue rises as the LUMINA3ai
   section arrives, then the blue drains as the initiative section does. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --ck-bg: color-mix(in srgb, var(--lm-bg) calc(var(--lk) * 36%), color-mix(in srgb, var(--bk-bg) calc(var(--bk) * 36%), var(--bg)));
        --ck-line-faint: color-mix(in srgb, var(--lm-line-faint) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-line-faint) calc(var(--bk) * 100%), var(--line-faint)));
        --ck-line: color-mix(in srgb, var(--lm-line) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-line) calc(var(--bk) * 100%), var(--line-dim)));
        --ck-nav: color-mix(in srgb, var(--lm-nav) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-nav) calc(var(--bk) * 100%), var(--nav-bg)));
        --ck-glow: color-mix(in srgb, var(--lm-glow) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-glow) calc(var(--bk) * 100%), transparent));
        --ck-accent-dim: color-mix(in srgb, var(--lm-dim) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-green-dim) calc(var(--bk) * 100%), transparent));
        --ck-accent: color-mix(in srgb, var(--lm) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-green) calc(var(--bk) * 100%), var(--accent)));
        --ck-bar: color-mix(in srgb, var(--lm) calc(var(--lk) * 100%), color-mix(in srgb, var(--bk-green) calc(var(--bk) * 100%), var(--label-2)));
    }

    body {
        background-color: var(--ck-bg);
        background-image:
            linear-gradient(var(--ck-line-faint) 1px, transparent 1px),
            linear-gradient(90deg, var(--ck-line-faint) 1px, transparent 1px);
    }

    /* soft glow pooling in the top-right corner of the screen */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse 70% 55% at 88% 0%, var(--ck-glow), transparent 70%);
    }

    #nav {
        background: var(--ck-nav);
        border-bottom-color: var(--ck-line);
        box-shadow: 0 1px 36px var(--ck-glow);
    }

    /* the wordmark stays white: only a faint glow marks the moment */
    #navLogo {
        text-shadow: 0 0 16px var(--ck-accent-dim);
    }

    #navLinks a:hover,
    #navLinks a:focus-visible,
    #navLinks a.active {
        border-bottom-color: var(--ck-accent);
    }

    #pathBar {
        border-top-color: var(--ck-line);
    }

    #pathBar li::after {
        color: var(--ck-line);
    }

    #pathBar a[aria-current="page"] {
        color: var(--ck-accent);
    }

    section {
        border-top-color: var(--ck-line);
    }
}

/* ---------------- Hero: "Introducing BCKUP//ENRGY" ---------------- */
.heroGrid {
    position: relative;
    z-index: 1;
}

/* ambient light drifting behind the welcome */
.bkAura {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--bk);
}

.bkAura i {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bk-glow), transparent 62%);
    will-change: transform;
}

.bkAura i:nth-child(1) {
    top: -32vmax;
    right: -22vmax;
    animation: auraA 24s ease-in-out infinite alternate;
}

.bkAura i:nth-child(2) {
    bottom: -38vmax;
    left: -28vmax;
    width: 52vmax;
    height: 52vmax;
    animation: auraB 30s ease-in-out infinite alternate;
}

@keyframes auraA {
    to {
        transform: translate3d(-9vmax, 7vmax, 0) scale(1.12);
    }
}

@keyframes auraB {
    to {
        transform: translate3d(10vmax, -6vmax, 0) scale(1.08);
    }
}

/* the dot before the eyebrow: "live" */
.eyebrow.live::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bk-green);
    box-shadow: 0 0 10px var(--bk-green);
    animation: livePulse 1.9s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.7);
    }
}

.bkTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.bkLead {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-title-3);
    line-height: var(--lh-title-3);
    letter-spacing: var(--tr-title-3);
    color: var(--label-2);
}

.bkLead::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--bk-green);
    transform-origin: left;
    animation: leadLine 0.9s var(--ease-out) 0.5s both;
}

@keyframes leadLine {
    from {
        transform: scaleX(0);
    }
}

/* the logo (its own glow is baked in) powers on like a neon sign. The PNG has transparent
   padding around the artwork, so it is pulled left to line the bolt up with the text above. */
.bkName {
    display: block;
    width: clamp(17rem, 42vw, 30rem);
    height: auto;
    margin: -0.4rem 0 -0.4rem -7%;
    animation: neonOn 2.4s linear 0.55s both;
}

@keyframes neonOn {
    0% {
        opacity: 0.1;
    }

    6% {
        opacity: 1;
    }

    9% {
        opacity: 0.15;
    }

    14% {
        opacity: 0.9;
    }

    17% {
        opacity: 0.2;
    }

    24% {
        opacity: 1;
    }

    27% {
        opacity: 0.5;
    }

    31%,
    100% {
        opacity: 1;
    }
}

.heroGrid .heroSub {
    margin-bottom: 20px;
}

.bkPill {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--bk-green);
    border-color: var(--bk-green-dim);
}

.btn-bk {
    background: var(--bk-green);
    border: 1px solid var(--bk-green);
    color: var(--bk-bg);
    font-weight: 700;
}

.btn:focus-visible {
    outline: 2px solid var(--bk-green);
    outline-offset: 3px;
}

/* the drawing card: same drafting frame as ever, now showing the product's story */
.schematic.dgHero {
    --accent: var(--bk-green);
    --accent-dim: var(--bk-green-dim);
    background: var(--bk-panel);
    border-color: var(--bk-line);
    box-shadow: 0 0 70px -24px var(--bk-green-dim);
}

/* ---------------- BCKUP//ENRGY section ---------------- */
/* reveals here are a little richer than the site default: they also un-blur,
   and take a per-element delay (--d) so rows can cascade */
.bkIntro .fadeUp {
    filter: blur(8px);
    transform: translateY(36px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
    transition-delay: var(--d, 0s);
}

.bkIntro .fadeUp.visible {
    filter: none;
    transform: translateY(0);
}

.bkIntro .fadeUp.fromLeft {
    transform: translateX(-44px);
}

.bkIntro .fadeUp.fromLeft.visible {
    transform: none;
}

.bkIntro .sectionTitle {
    line-height: var(--lh-title-2);
}

/* the initiative, in one breath. script.js lights it word by word as it scrolls past */
.bkStatement {
    margin: 20px 0 32px;
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-title-2);
    line-height: var(--lh-title-2);
    letter-spacing: var(--tr-title-2);
}

.bkStatement .w {
    --l: clamp(0, calc((var(--s, 1) * (var(--n) + 4) - var(--i)) / 3), 1);
    opacity: calc(0.16 + 0.84 * var(--l));
}

.bkStatement em {
    font-style: normal;
    color: var(--bk-green);
}

.bkStatement em .w {
    text-shadow: 0 0 calc(var(--l) * 0.7em) var(--bk-green-dim);
}

/* key facts */
.bkStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.bkStat {
    position: relative;
    overflow: hidden;
    padding: 16px 18px 20px;
    border: 1px solid var(--bk-line);
    background: var(--bk-panel);
}

/* a charge bar fills along the bottom edge once the tile is in */
.bkStat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bk-green), transparent);
    box-shadow: 0 0 10px var(--bk-green-dim);
    transform: scaleX(0);
    transform-origin: left;
}

.bkStat.visible::after {
    transform: scaleX(1);
    transition: transform 1.4s var(--ease-out) calc(var(--d, 0s) + 0.45s);
}

.bkStatLabel {
    display: block;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--label-3);
}

.bkStatVal {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-2);
    letter-spacing: var(--tr-title-2);
    line-height: var(--lh-title-2);
    color: var(--bk-green);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bkStat.visible .bkStatVal.pop {
    animation: valPop 1.1s var(--ease-out) calc(var(--d, 0s) + 0.2s) both;
}

@keyframes valPop {
    0% {
        opacity: 0;
        transform: scale(1.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.bkStatSub {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-caption);
    line-height: var(--lh-caption);
    color: var(--label-3);
}

/* the credit card (shared component, style.css), set for this page */
.bkIntro .collab {
    position: relative;
    overflow: hidden;
    max-width: none;
    margin-bottom: 0;
    border-color: var(--bk-line);
    background: var(--bk-panel);
}

.bkIntro .collabLabel {
    color: var(--bk-green);
}

/* one light sweep across the card as it lands */
.bkIntro .collab::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, var(--bk-glow) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}

.bkIntro .collab.visible::after {
    transform: translateX(120%);
    transition: transform 1.5s var(--ease-out) calc(var(--d, 0s) + 0.55s);
}

.bkIntro .collab.visible .collabLogo {
    animation: logoIn 1.1s var(--ease-out) calc(var(--d, 0s) + 0.15s) both;
}

@keyframes logoIn {
    from {
        opacity: 0;
        transform: scale(0.88);
        filter: blur(6px) brightness(0.4);
    }
}

.bkCta {
    margin-bottom: 0;
}

/* ---------------- LUMINA3ai section ---------------- */
/* #lumina is a stacking context of its own, so the card's backdrop (z-index -1 below) sits behind
   the section's content but above the page. overflow: clip keeps it inside the section. */
#lumina {
    isolation: isolate;
    overflow: clip;
}

/* LUMINA3ai's card. Its backdrop, .lmAura, is a layer behind the card (z-index -1; #lumina above is a
   stacking context and the card is not, so the layer sits behind the card but above the page).
   Scroll scene (script.js, data-scene + data-bounds): --e runs 0 -> 1 as the section comes up the screen,
   and --gt/--gr/--gb/--gl are the gaps between the card and the edges of #lumina. At --e 0 the layer is
   exactly the card's size and hidden behind it; as --e grows its four corners travel out to the four
   corners of the section. A slow aura drifts inside it. Without JS or with reduced motion --e is 1:
   the backdrop already fills the section and the aura is still. */
.featCard {
    --lm-shine: rgba(176, 226, 255, 0.34);
    --gt: 0px;
    --gr: 0px;
    --gb: 0px;
    --gl: 0px;
    --k: calc(1 - (1 - var(--e)) * (1 - var(--e)));
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 0.7fr) 1.6fr;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--line-dim);
    background:
        radial-gradient(ellipse 60% 70% at 12% 20%, var(--lm-glow), transparent 70%),
        var(--bg-panel);
    transition: border-color 0.4s ease;
}

@media (hover: hover) {
    .featCard:hover {
        border-color: var(--lm-dim);
    }
}

.lmAura {
    position: absolute;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    inset:
        calc(-1px - var(--gt) * var(--k))
        calc(-1px - var(--gr) * var(--k))
        calc(-1px - var(--gb) * var(--k))
        calc(-1px - var(--gl) * var(--k));
    border: 1px solid var(--lm-line);
    background: linear-gradient(180deg, var(--lm-glow), transparent 60%);
    /* fades up as it grows */
    opacity: var(--k);
}

.lmAura i {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lm-aura), transparent 62%);
    will-change: transform;
}

.lmAura i:nth-child(1) {
    top: -30vmax;
    right: -20vmax;
    animation: auraA 26s ease-in-out infinite alternate;
}

.lmAura i:nth-child(2) {
    bottom: -36vmax;
    left: -26vmax;
    width: 52vmax;
    height: 52vmax;
    animation: auraB 32s ease-in-out infinite alternate;
}

/* One sheen, light blue, crosses the card left to right as it settles (script.js adds .shine the
   first time the scene completes), and the edge lights up as it passes. */
.featCard::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 43%, var(--lm-shine) 50%, transparent 57%) 100% 0 / 260% 100% no-repeat;
}

.featCard.shine::after {
    animation: lmShimmer 1.5s var(--ease-out) both;
}

.featCard.shine {
    animation: lmEdge 1.5s var(--ease-out) both;
}

@keyframes lmShimmer {
    0% {
        opacity: 0;
        background-position: 100% 0;
    }

    12%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        background-position: 0 0;
    }
}

@keyframes lmEdge {

    0%,
    100% {
        border-color: var(--line-dim);
    }

    30% {
        border-color: var(--lm);
    }
}

/* the drawing inside the card: same drafting sheet as the hero's, in blue */
.schematic.dgLumina {
    --accent: var(--lm);
    --accent-dim: var(--lm-dim);
    width: 100%;
    max-width: 320px;
    background: var(--lm-panel);
    border-color: var(--lm-line);
    box-shadow: 0 0 70px -24px var(--lm-dim);
}

.projSec.lmSec {
    padding: 118px 0 40px;
}

.lmEyebrow {
    margin-bottom: 14px;
}

.lmEyebrow::before {
    background: var(--lm);
}

.featMark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.featCard .statusPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lm);
    border-color: var(--lm-dim);
}

.lmDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lm);
    box-shadow: 0 0 8px var(--lm);
}

.featName {
    line-height: 0;
}

.featWordmark {
    width: clamp(180px, 24vw, 260px);
    height: auto;
    margin: -14px 0 -8px -22px;
}

.featTag {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-3);
    letter-spacing: var(--tr-title-3);
    line-height: var(--lh-title-3);
    margin-bottom: 8px;
}

.featBody .productDesc {
    margin-bottom: 18px;
}

.featStats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 16px;
    border: 1px solid var(--line-dim);
    background: var(--line-dim);
}

.featStats>div {
    padding: 14px 14px 12px;
    background: var(--bg-panel);
}

.featStats b {
    display: block;
    font-family: var(--display);
    font-size: var(--fs-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
    color: var(--lm);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.featStats span:not([data-count]) {
    display: block;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--label-3);
}

.featList {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    list-style: none;
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
}

.featList li {
    position: relative;
    padding-left: 22px;
}

.featList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 1px;
    background: var(--lm);
    box-shadow: 0 0 6px var(--lm);
}

.featNote {
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    letter-spacing: var(--tr-caption);
    line-height: var(--lh-caption);
    color: var(--label-3);
}

.btn-lm {
    background: var(--lm);
    border: 1px solid var(--lm);
    color: var(--lm-ink);
    font-weight: 700;
}

@media (max-width: 860px) {
    /* on phones and tablets the backdrop is simply there, and still: scroll-driven layout and
       drifting blobs made this section stutter */
    .lmAura i:nth-child(1),
    .lmAura i:nth-child(2) {
        animation: none;
        will-change: auto;
    }

    .featCard {
        grid-template-columns: 1fr;
    }

    .featMark {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
    }

    .schematic.dgLumina {
        max-width: 240px;
    }

    .featStats {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------------- Project sections: BCKUP//ENRGY and LUMINA3ai, one screen each ----------------
   Each project gets its own section about one screen tall, its content centred in the space below
   the nav. The top padding clears the nav and path bar, so jumping to a section (nav link, the
   next-section pill) lands with everything in view. */
.projSec {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 128px 0 48px;
}

.projSec>.wrap {
    width: 100%;
}

.projGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.projSide {
    display: grid;
    gap: 0;
}

#initiative,
#overview,
#team {
    padding-top: 128px;
}

/* ---------------- Our initiative: three principles ---------------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pillar {
    position: relative;
    padding: 28px 26px 32px;
    border: var(--edge);
    background: var(--bg-panel);
}

/* a rule draws across the top of each card as it arrives (--e, from its scroll scene) */
.pillar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    height: 2px;
    width: calc(var(--e) * (100% + 2px));
    background: var(--label-2);
}

.pillarNum {
    display: block;
    margin-bottom: 40px;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    color: var(--label-3);
}

.pillarTitle {
    margin-bottom: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
}

.pillar p {
    color: var(--label-2);
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
}

.deckSteps {
    display: none;
}

/* ---------------- Initiative, pinned (desktop, motion allowed, JS running) ----------------
   .initTrack is four screens tall and .initStage sticks to the screen while you scroll through it;
   --pin (0..1, script.js data-pin) is how far you are. The story, as fractions of --pin:
     0.05-0.20  the heading leaves
     0.12-0.28  point 01's card grows from the width of the old three-card row to fill the screen
     0.36-0.50  01 -> 02        0.62-0.76  02 -> 03
     0.90-1.00  the card shrinks back to its first size, the heading returns, the page unpins
   --gt/--gr/--gb/--gl are the gaps from the card's first box (.deckSlot) to the edges of the stage, so
   the frame can grow out to the screen. Scrolling back up plays it all in reverse. Everywhere else it
   is the plain stack of three cards above. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    html.js #initiative {
        padding: 0;
    }

    html.js .initTrack {
        --pin: 0;
        --gt: 0px;
        --gr: 0px;
        --gb: 0px;
        --gl: 0px;
        --hide: clamp(0, calc((var(--pin) - 0.05) / 0.15), 1);
        --g: clamp(0, calc((var(--pin) - 0.12) / 0.16), 1);
        --s: clamp(0, calc((var(--pin) - 0.9) / 0.1), 1);
        /* how far the card has grown (smoothstep out, smoothstep back) */
        --f: calc(var(--g) * var(--g) * (3 - 2 * var(--g)) - var(--s) * var(--s) * (3 - 2 * var(--s)));
        --c2: clamp(0, calc((var(--pin) - 0.36) / 0.14), 1);
        --c3: clamp(0, calc((var(--pin) - 0.62) / 0.14), 1);
        --ins: 24px;
        --zoom: 0.6;
        height: 400vh;
        height: 400svh;
    }

    html.js .initStage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        display: flex;
        flex-direction: column;
        padding: 128px 0 40px;
    }

    html.js .initWrap {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    html.js .initHead {
        margin-bottom: 28px;
        opacity: calc(1 - var(--hide) * (1 - var(--s)));
        translate: 0 calc(var(--hide) * (1 - var(--s)) * -3rem);
    }

    html.js .deckSlot {
        position: relative;
        flex: 1;
        min-height: 0;
    }

    /* the frame: the card's border and fill, growing from the slot out to the screen (below the nav) */
    html.js .pillars {
        display: block;
        position: absolute;
        overflow: hidden;
        border: var(--edge);
        background: var(--bg-panel);
        top: calc((121px - var(--gt)) * var(--f));
        right: calc((var(--ins) - var(--gr)) * var(--f));
        bottom: calc((var(--ins) - var(--gb)) * var(--f));
        left: calc((var(--ins) - var(--gl)) * var(--f));
    }

    /* the three points are layers in the frame; each leaves upwards and the next rises in, one
       after the other so two never overlap */
    html.js .pillar {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: 0 clamp(32px, 6vw, 96px);
        border: 0;
        background: none;
    }

    html.js .pillar::before {
        display: none;
    }

    html.js .pillarBody {
        /* grows with the card; its width shrinks by the same factor so it never outgrows the frame */
        width: calc(100% / (1 + var(--zoom) * var(--f)));
        max-width: 30rem;
        transform-origin: left center;
        scale: calc(1 + var(--zoom) * var(--f));
    }

    html.js .pillar:nth-child(1) {
        opacity: clamp(0, calc(1 - var(--c2) * 2), 1);
        translate: 0 calc(var(--c2) * -3rem);
    }

    html.js .pillar:nth-child(2) {
        opacity: min(clamp(0, calc(var(--c2) * 2 - 1), 1), clamp(0, calc(1 - var(--c3) * 2), 1));
        translate: 0 calc((1 - var(--c2)) * 3rem - var(--c3) * 3rem);
    }

    html.js .pillar:nth-child(3) {
        opacity: clamp(0, calc(var(--c3) * 2 - 1), 1);
        translate: 0 calc((1 - var(--c3)) * 3rem);
    }

    html.js .deckSteps {
        position: absolute;
        left: clamp(32px, 6vw, 96px);
        bottom: 24px;
        display: flex;
        gap: 8px;
    }

    html.js .deckSteps i {
        position: relative;
        width: 36px;
        height: 2px;
        background: var(--separator);
    }

    html.js .deckSteps i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--label-2);
        transform: scaleX(var(--w, 1));
        transform-origin: left;
    }

    html.js .deckSteps i:nth-child(2) {
        --w: var(--c2);
    }

    html.js .deckSteps i:nth-child(3) {
        --w: var(--c3);
    }
}

/* ---------------- Project overview: two cards ---------------- */
.ovGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ovLm {
    --ov: var(--lm);
    --ov-dim: var(--lm-dim);
}

.ovBk {
    --ov: var(--bk-green);
    --ov-dim: var(--bk-green-dim);
}

.ovCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 28px 24px;
    border: 1px solid var(--line-dim);
    background: var(--bg-panel);
}

/* the card's glow comes on as its scene plays (--e) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ovCard {
        background:
            radial-gradient(ellipse 80% 90% at 12% 0%, color-mix(in srgb, var(--ov) calc(var(--e) * 15%), transparent), transparent 70%),
            var(--bg-panel);
    }
}

@media (hover: hover) {
    .ovCard:hover {
        border-color: var(--ov-dim);
    }

    .ovCard:hover .ovGo {
        color: var(--ov);
    }
}

.ovCard:focus-visible {
    border-color: var(--ov);
    outline: 2px solid var(--ov);
    outline-offset: 3px;
}

.ovCard .statusPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ov);
    border-color: var(--ov-dim);
}

.ovLm .lmDot {
    background: var(--ov);
}

.ovLogo {
    width: clamp(170px, 62%, 250px);
    height: auto;
    margin: -10px 0 -8px -16px;
}

.ovTag {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
}

.ovFacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: 100%;
    border: 1px solid var(--line-dim);
    background: var(--line-dim);
}

.ovFacts>span {
    padding: 12px 12px 10px;
    background: var(--bg-panel);
    font-family: var(--mono);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--label-3);
}

.ovFacts b {
    display: block;
    margin-bottom: 4px;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
    text-transform: none;
    color: var(--ov);
    white-space: nowrap;
}

.ovGo {
    margin-top: auto;
    padding-top: 4px;
    font-family: var(--mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
    text-transform: uppercase;
    color: var(--label-2);
    transition: color 0.25s ease;
}

/* ---------------- Next-section pill ----------------
   Fixed, bottom centre. Names the next section and scrolls there; its bar fills as you read towards
   it (--np, from script.js). Blurred like the nav, and green while the BCKUP//ENRGY chrome is. */
.nextPill {
    position: fixed;
    left: 50%;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
    z-index: 80;
    translate: -50% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(220px, calc(100vw - 40px));
    padding: 11px 16px 13px;
    overflow: hidden;
    border: 1px solid var(--separator);
    border-radius: 999px;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    color: var(--label);
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform var(--spring-dur) var(--spring), border-color 0.25s ease;
    animation: npIn 0.7s var(--ease-out) 1.4s backwards;
}

@keyframes npIn {
    from {
        opacity: 0;
        translate: -50% 1.5rem;
    }
}

.nextPill:active {
    transform: scale(0.97);
    transition-duration: 0.09s;
    transition-timing-function: ease-out;
}

@media (hover: hover) {
    .nextPill:hover {
        border-color: var(--label-3);
    }
}

.nextPill:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.npLabels {
    display: grid;
    place-items: center;
}

.npLabel {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease, translate 0.5s var(--spring);
}

.npLabel[data-pos="below"] {
    opacity: 0;
    translate: 0 0.7em;
}

.npLabel[data-pos="above"] {
    opacity: 0;
    translate: 0 -0.7em;
}

.npArrow {
    flex: 0 0 auto;
    transition: rotate 0.45s var(--spring);
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* at the footer the pill turns round: "Return to Top", arrow up */
.nextPill.up .npArrow {
    rotate: 180deg;
}

.npBar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--label-2);
    transform: scaleX(var(--np, 0));
    transform-origin: left;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .nextPill {
        background: var(--ck-nav);
        border-color: var(--ck-line);
    }

    .npBar {
        background: var(--ck-bar);
        box-shadow: 0 0 10px var(--ck-accent-dim);
    }
}

/* ---------------- Scroll scenes (script.js: data-scene) ----------------
   --e is the scene's progress, 0 -> 1 as the element rises up the screen and back again as it
   is scrolled away; it defaults to 1, the finished state, for no-JS and reduced motion. The
   individual translate / scale properties are used so they compose with the press and hover
   transforms elsewhere. Nothing here locks the scroll. */
[data-scene] {
    --e: 1;
}

.sceneRise {
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    translate: 0 calc((1 - var(--e)) * 2.5rem);
}

/* overview cards close in from either side (vertical on phones) while they grow a little */
.sceneSide {
    opacity: clamp(0, calc(var(--e) * 1.6), 1);
    translate: calc((1 - var(--e)) * var(--dir, 0) * 4rem) calc((1 - var(--e)) * 1.5rem);
    scale: calc(0.94 + 0.06 * var(--e));
}

/* founder and principle cards rise and grow a little */
.teamCard.sceneRise,
.pillar.sceneRise {
    scale: calc(0.95 + 0.05 * var(--e));
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .projGrid {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
    }

    .pillars,
    .ovGrid {
        grid-template-columns: 1fr;
    }

    .pillarNum {
        margin-bottom: 16px;
    }

    .sceneSide {
        translate: 0 calc((1 - var(--e)) * 2.5rem);
    }
}

@media (max-width: 640px) {
    /* a phone screen is the budget: both project sections are trimmed to fit one */
    .projSec,
    .projSec.lmSec {
        padding: 108px 0 24px;
    }

    .lmEyebrow {
        margin-bottom: 10px;
    }

    .bkStatement {
        margin: 10px 0 16px;
        font-size: var(--fs-title-3);
        line-height: var(--lh-title-3);
        letter-spacing: var(--tr-title-3);
    }

    .bkStats {
        gap: 10px;
        margin-bottom: 10px;
    }

    .bkStat {
        padding: 10px 12px 12px;
    }

    .bkStatLabel {
        margin-bottom: 4px;
    }

    .bkStatSub {
        margin-top: 2px;
    }

    .bkStatVal {
        font-size: var(--fs-headline);
        line-height: var(--lh-headline);
        letter-spacing: var(--tr-headline);
    }

    .bkIntro .collab {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px 10px 10px;
    }

    .bkIntro .collabLogo {
        width: 72px;
    }

    .bkIntro .collabTxt {
        font-size: var(--fs-footnote);
        line-height: var(--lh-footnote);
        letter-spacing: var(--tr-footnote);
    }

    .bkCta .btn-ghost {
        display: none;
    }

    .bkCta .btn {
        padding-block: 13px;
    }

    .featList,
    .featBody .productDesc,
    .schematic.dgLumina {
        display: none;
    }

    .featTag {
        font-size: var(--fs-headline);
        line-height: var(--lh-headline);
        letter-spacing: var(--tr-headline);
    }

    .featNote {
        margin-bottom: 14px;
    }

    #hero {
        padding-bottom: 64px;
    }
}

@media (max-width: 420px) {
    .bkStats {
        gap: 10px;
    }

}

/* ---------------- Reduced motion ----------------
   style.css already collapses animation and transition durations, which would
   make the looping ones strobe, so the loops are switched off outright. */
@media (prefers-reduced-motion: reduce) {

    .bkAura i,
    .lmAura i,
    .eyebrow.live::before,
    .bkName,
    .bkLead::before {
        animation: none !important;
    }

    .bkIntro .collab::after {
        display: none;
    }
}

/* ---------------- Materials: fallbacks ----------------
   The nav is a blurred, tinted layer (style.css + the blend above). Where the reader asks for
   less transparency or more contrast it becomes a solid surface with a firm edge. */
@media (prefers-reduced-transparency: reduce) {
    #nav {
        background: var(--bg-deep);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    #nav {
        background: var(--bg-deep);
        border-bottom-color: var(--label-3);
    }

    .featCard::before,
    .ovCard,
    .pillar,
    .nextPill,
    .bkStat {
        border-color: var(--label-3);
    }
}