/* ---- motion/motion.css ---- */
/* =========================================================================
   Lunare Ventures — motion layer (load AFTER styles.css)
   Pairs with motion.js. Everything here is transform / opacity / masks.
   ========================================================================= */

/* ---------- 1. the rotating moon (NASA turntable footage) ---------- */
.moon-orb{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)} /* Safari: clip video to the circle */
.moon-orb .moon-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  border-radius:50%;background:transparent;filter:brightness(1.07) contrast(1.04)}
.moon-orb.has-video picture{display:none}                 /* if the old photo was left in the markup */
.moon-orb.has-video .moon-shade{opacity:0}                /* the footage carries its own terminator */
.moon-orb.has-video .moon-sheen{                          /* move the light-sweep onto the lit (right) limb */
  background:radial-gradient(36% 36% at 68% 34%,rgba(255,250,236,.20),transparent 60%)}
html.lv-motion .moon-glow{background:radial-gradient(circle at 57% 47%,rgba(233,227,211,.10),transparent 62%)}

/* the oversized glow/corona layers used to size the stage's grid row, pushing the
   moon ~130px below the centre of its own box — pin the track to the stage */
.moon-stage{grid-template-rows:100%;grid-template-columns:100%}
/* eclipse over footage: the clip's night side is already dark, so dim the lit side less */


/* ---------- opening sequence (≈2.4s, then calm) ---------- */
html.lv-motion .reveal{transform:translateY(18px);
  transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
html.lv-motion .reveal.in{transform:none}
html.lv-motion .hero-moon.reveal{opacity:0;transform:translateY(42px) scale(.9);
  transition:opacity 1.7s var(--ease-out) .12s,transform 2.3s var(--ease-out) .12s}
html.lv-motion .hero-moon.reveal.in{opacity:1;transform:none}
html.lv-motion .hero .hero-title.reveal:not([data-words]){transform:translateY(28px);filter:blur(6px);
  transition:opacity 1.2s var(--ease-out) .3s,transform 1.4s var(--ease-out) .3s,filter 1.2s var(--ease-out) .3s}
html.lv-motion .hero .hero-title.reveal.in:not([data-words]){transform:none;filter:none}

/* ---------- word-by-word reveal ([data-words]) ----------
   Headline words rise out of a mask, 70ms apart, easeOutExpo. Hero timing:
   moon arrives 0.12s → words 0.32s–0.9s → logo moonlight sweep 0.8s. */
[data-words].words-split{opacity:1!important;transform:none!important;filter:none!important}
.lw{display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}          /* room for italic overhang + descenders */
.lwi{display:inline-block;transform:translate3d(0,108%,0);opacity:0;will-change:transform;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .7s ease;
  transition-delay:calc(var(--words-delay,.1s) + var(--i,0) * 70ms)}
.words-in .lwi{transform:none;opacity:1}
.hero [data-words]{--words-delay:.32s}

/* ---------- 2a. header logo: lit by the moon ---------- */
.brand-mark{position:relative;display:inline-grid}
.brand-mark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  -webkit-mask:url(/mark-lv.svg) center/contain no-repeat;mask:url(/mark-lv.svg) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,251,238,.96) 50%,transparent 60%) no-repeat;
  background-size:300% 100%;background-position:100% 0}
html.lv-ready .brand-mark::after{animation:lvSweep 1.5s .8s cubic-bezier(.45,0,.2,1) both,lvSweepIdle 14s 4.5s infinite}
@keyframes lvSweep{0%{opacity:1;background-position:100% 0}96%{opacity:1}100%{opacity:0;background-position:0 0}}
@keyframes lvSweepIdle{0%,87%{opacity:0;background-position:100% 0}88%{opacity:1;background-position:100% 0}
  98%{opacity:1;background-position:0 0}100%{opacity:0;background-position:0 0}}
html.lv-ready .brand-img{animation:lvLogoGlow 9s ease-in-out infinite}
@keyframes lvLogoGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(244,239,227,0))}50%{filter:drop-shadow(0 0 7px rgba(244,239,227,.38))}}

/* ---------- 2b. the LV behind the moon, lit by its halo (dark theme only) ---------- */
.lv-ghost{position:absolute;left:50%;top:50%;z-index:0;width:225%;max-width:none;height:auto;aspect-ratio:1014.5/876;
  pointer-events:none;opacity:0;filter:brightness(1.3) saturate(.85);
  transform:translate(-50%,-50%) translate(var(--gx,0px),var(--gy,0px));
  transition:opacity 2.6s var(--ease-out) 1.1s;
  -webkit-mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.5) 55%,transparent 80%);
          mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.5) 55%,transparent 80%)}
html.lv-ready .hero-moon.in .lv-ghost{opacity:.09}
/* light theme: the same moonlit ghost, deepened and multiplied into the warm halo (owner 2026-10-01) */



/* ---------- 3. section seams: a gold line draws as each part arrives ---------- */
.lv-seam{position:absolute;top:0;left:50%;z-index:1;width:var(--shell);height:1px;transform:translateX(-50%);pointer-events:none}
.lv-seam::before{content:"";position:absolute;inset:0;opacity:.8;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--hair-gold) 12%,var(--gold) 48%,var(--hair-gold) 88%,transparent);
  transition:transform 1.7s var(--ease-out)}
.lv-seam::after{content:"";position:absolute;top:-3px;left:0;width:100%;height:7px;opacity:0;transform:translateX(-100%);
  background:radial-gradient(circle at calc(100% - 3.5px) 50%,#fff3d6 0 1.6px,rgba(244,239,227,.75) 2.4px,transparent 3.6px)}
.lv-seam.in::before{transform:scaleX(1)}
.lv-seam.in::after{animation:lvSeamDot 1.7s var(--ease-out) forwards}
@keyframes lvSeamDot{0%{opacity:0;transform:translateX(-100%)}10%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translateX(0)}}

/* ---------- reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce){
  html.lv-motion .reveal,html.lv-motion .hero-moon.reveal,html.lv-motion .hero .hero-title.reveal:not([data-words]){
    transform:none!important;filter:none!important;transition:opacity .01s!important}
  .brand-mark::after,html.lv-ready .brand-img{animation:none!important}
  .lwi{transform:none!important;opacity:1!important;transition:none!important}
  .lv-ghost{transition:none}
  .lv-seam::before{transform:scaleX(1);transition:none}
  .lv-seam::after{display:none}
}

/* iOS Safari: never show the native play/start overlay on the decorative moon */
.moon-orb .moon-video::-webkit-media-controls,
.moon-orb .moon-video::-webkit-media-controls-panel,
.moon-orb .moon-video::-webkit-media-controls-overlay-play-button,
.moon-orb .moon-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0!important}
.moon-orb .moon-video{pointer-events:none}

/* The <video> is only ever visible while it is actually playing. Underneath, the matching
   still frame — so visitors without animation (iOS Low Power, data saver, reduced motion)
   see a calm, intentional moon, never a stopped video with native controls. */
.moon-orb.has-video{background:var(--space) url(/assets/moon-rotate-poster.webp) center/101.5% auto no-repeat}
.moon-orb.has-video .moon-video{transform:scale(1.015)}
.moon-orb.has-video .moon-video{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.moon-orb.has-video.is-playing .moon-video{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}

/* ---- interactive/sec.css ---- */
/* ============================================================
   LVS — shared section rhythm for the interactive homepage
   Numbered labels ("HOW IT WORKS — 02"), tight continuous spacing.
   ============================================================ */
.lvs{position:relative;padding-block:clamp(3.5rem,7vw,5.5rem)}
.lvs-wrap{width:var(--shell,min(calc(100% - 2.75rem),78rem));margin-inline:auto}
.lvs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.lvs-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#E9E3D3);margin:0}
.lvs-label span{color:var(--silver-dim,#869889)}
.lvs-title{font-family:var(--font-display);font-weight:340;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.2rem,5vw,4rem);color:var(--moon,#EFEBDF);margin:.7rem 0 0}
.lvs-title em{font-style:italic;color:var(--gold-soft,#F4EFE3)}
.lvs-meta{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim,#869889);
  text-align:right;line-height:1.7;margin:0;flex:none}
@media (max-width:640px){.lvs-meta{display:none}}

/* ---- interactive/words.css ---- */
/* ============================================================
   WORD-BY-WORD REVEAL — any element with [data-words]
   Each word rises out of a mask, staggered. (aw-word pattern)
   ============================================================ */
.aw-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.aw-word > span{display:inline-block;transform:translateY(105%);opacity:0;filter:blur(4px);
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .8s ease;
  transition-delay:calc(var(--w,0) * 55ms + var(--aw-delay,0ms))}
[data-words].is-in .aw-word > span{transform:none;opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.aw-word > span{transform:none;opacity:1;filter:none;transition:none}}

/* ---- interactive/live.css ---- */
/* ============================================================
   LIVE PANEL (lvl) — discreet status card (hero companion)
   Stages, not numbers. Nothing implies money.
   ============================================================ */
.lvl{position:relative;width:min(100%,380px);padding:1.05rem 1.15rem .95rem;border-radius:10px;
  background:linear-gradient(180deg,rgba(25,67,52,.72),rgba(12,56,41,.78));
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--hair-strong,rgba(239,235,223,.2));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--font-mono);color:var(--silver,#B7C1B4);text-align:left}
.lvl-head{display:flex;justify-content:space-between;align-items:center}
.lvl-tag{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-dim,#869889)}
.lvl-live{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#E9E3D3)}
.lvl-live i{width:6px;height:6px;border-radius:50%;background:var(--gold,#E9E3D3);box-shadow:0 0 0 0 rgba(233,227,211,.6);animation:lvlBeat 2s infinite}
@keyframes lvlBeat{0%{box-shadow:0 0 0 0 rgba(233,227,211,.55)}70%{box-shadow:0 0 0 7px rgba(233,227,211,0)}100%{box-shadow:0 0 0 0 rgba(233,227,211,0)}}

.lvl-chart{display:block;width:100%;height:auto;margin:.7rem 0 .2rem;overflow:visible}
.lvl-grid{stroke:var(--hair,rgba(239,235,223,.12));stroke-width:1;stroke-dasharray:2 4}
.lvl-ylab{font-size:7.2px;letter-spacing:.14em;fill:var(--silver-dim,#869889)}
.lvl-xlab{font-size:7px;letter-spacing:.14em;fill:var(--silver-dim,#869889)}
.lvl-area{fill:url(#lvlFill);opacity:0;transition:opacity 1.2s ease .6s}
.lvl-fill0{stop-color:var(--gold,#E9E3D3);stop-opacity:.22}
.lvl-fill1{stop-color:var(--gold,#E9E3D3);stop-opacity:0}
.lvl-line{fill:none;stroke:var(--gold,#E9E3D3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1)}
.lvl-pt{fill:var(--space,#053123);stroke:var(--gold,#E9E3D3);stroke-width:1.2;opacity:0;transition:opacity .4s}
.lvl-end{fill:var(--gold-soft,#F4EFE3)}
.lvl-endpulse{fill:none;stroke:var(--gold-soft,#F4EFE3);transform-box:fill-box;transform-origin:center;opacity:0}
.lvl.is-in .lvl-area{opacity:1}
.lvl.is-in .lvl-pt{opacity:1;transition-delay:1.4s}
.lvl.is-in .lvl-endpulse{animation:lvlPulse 2.4s ease-out 2s infinite}
@keyframes lvlPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
.lvl-mark{font-size:6.8px;letter-spacing:.16em;fill:var(--gold-soft,#F4EFE3);opacity:0;transition:opacity .6s 2s}
.lvl.is-in .lvl-mark{opacity:1}

.lvl-rows{list-style:none;margin:.55rem 0 0;padding:0;display:grid;gap:.15rem}
.lvl-row{display:grid;grid-template-columns:3.1rem 5.4rem 1fr 4.6rem;align-items:center;gap:.6rem;
  padding:.42rem 0;border-top:1px solid var(--hair,rgba(239,235,223,.12));font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background .6s}
.lvl-code{color:var(--moon,#EFEBDF)}
.lvl-phase{color:var(--silver-dim,#869889);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl-state{color:var(--gold,#E9E3D3);text-align:right}
.lvl-bar{height:2px;background:var(--hair,rgba(239,235,223,.12));border-radius:2px;overflow:hidden}
.lvl-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold,#E9E3D3),var(--gold-soft,#F4EFE3));
  transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.lvl-row.is-tick{background:rgba(233,227,211,.07)}
.lvl-foot{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--hair,rgba(239,235,223,.12));
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver-dim,#869889)}
.lvl-foot b{font-weight:500;color:var(--silver,#B7C1B4)}




@media (prefers-reduced-motion:reduce){
  .lvl-live i,.lvl.is-in .lvl-endpulse{animation:none}
  .lvl-line,.lvl-bar i,.lvl-area,.lvl-pt,.lvl-mark{transition:none}
}

/* hero placement: the panel floats over the lower-left of the moon */
.hero-moon .lvl--hero{position:absolute;left:-30%;bottom:-9%;z-index:4;width:300px;padding:.8rem .9rem .7rem}
.lvl--hero .lvl-chart{margin:.5rem 0 0}
.lvl--hero .lvl-row{grid-template-columns:2.9rem 1fr 4.2rem;padding:.34rem 0}
.lvl--hero .lvl-phase{display:none}
.lvl--hero .lvl-foot{margin-top:.45rem;padding-top:.45rem}
@media (max-width:900px){
  .hero-moon .lvl--hero{position:relative;left:auto;bottom:auto;margin:1.4rem auto 0}
}

/* ---- status rows + pills (bd-style) ---- */
.lvl-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.35rem}
.lvl-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:6px;
  background:rgba(239,235,223,.025);border:1px solid var(--hair,rgba(239,235,223,.12));
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),background .6s,border-color .6s}
.lvl.is-in .lvl-item{opacity:1;transform:none}
.lvl.is-in .lvl-item:nth-child(2){transition-delay:.12s}.lvl.is-in .lvl-item:nth-child(3){transition-delay:.24s}.lvl.is-in .lvl-item:nth-child(4){transition-delay:.36s}
.lvl-item.is-tick{background:rgba(233,227,211,.09);border-color:var(--hair-gold,rgba(233,227,211,.45))}
.lvl-dot{width:6px;height:6px;border-radius:50%;background:var(--lvl-ok,#86C59A);animation:lvlBlink 3.2s ease-in-out infinite}
.lvl-item:nth-child(2) .lvl-dot{animation-delay:.8s}.lvl-item:nth-child(3) .lvl-dot{background:var(--gold,#E9E3D3);animation-delay:1.6s}.lvl-item:nth-child(4) .lvl-dot{background:var(--silver-dim,#869889);animation:none}
@keyframes lvlBlink{0%,100%{opacity:1}50%{opacity:.35}}
.lvl-k{color:var(--moon,#EFEBDF);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl-pill{font-size:.56rem;letter-spacing:.16em;padding:.28rem .55rem;border-radius:99px;white-space:nowrap;
  color:var(--gold,#E9E3D3);border:1px solid var(--hair-gold,rgba(233,227,211,.45));background:rgba(233,227,211,.06);transition:color .4s,background .4s}
.lvl-pill.is-ok{color:var(--lvl-ok,#86C59A);border-color:rgba(134,197,154,.4);background:rgba(134,197,154,.07)}
.lvl-pill.is-quiet{color:var(--silver,#B7C1B4);border-color:var(--hair-strong,rgba(239,235,223,.2));background:transparent}
.lvl-pill.is-open{position:relative}
.lvl-pill.is-open::after{content:"";position:absolute;inset:-1px;border-radius:99px;border:1px solid var(--gold-soft,#F4EFE3);animation:lvlPill 2.4s ease-out infinite}
@keyframes lvlPill{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.25,1.6)}}
.lvl-live i{background:var(--lvl-ok,#86C59A)}
.lvl-live{color:var(--lvl-ok,#86C59A)}
@keyframes lvlBeat{0%{box-shadow:0 0 0 0 rgba(134,197,154,.55)}70%{box-shadow:0 0 0 7px rgba(134,197,154,0)}100%{box-shadow:0 0 0 0 rgba(134,197,154,0)}}


.lvl--hero .lvl-foot-r{display:none}
@media (prefers-reduced-motion:reduce){.lvl-item{transition:none}.lvl-dot,.lvl-pill.is-open::after{animation:none}}

/* ---- interactive/loop.css ---- */
/* ============================================================
   THE ORBIT (lvd) — pinned dial + step list. Scroll advances.
   ============================================================ */
.lvd{--lvd-steps:5;--lvd-dial:min(460px,100%)}
.lvd.is-pinned{height:calc(100svh + var(--lvd-steps) * 46svh);padding-block:0}
/* pinned frame = the visible area below the 76px fixed header, content centred in it */
.lvd.is-pinned .lvd-pin{position:sticky;top:0;height:100svh;box-sizing:border-box;display:grid;align-content:center;padding:84px 0 20px}
.lvd.is-pinned{--lvd-dial:min(440px,36vw,calc(100svh - 104px - var(--lvd-head,150px) - 16px))}
.lvd.is-pinned .lvs-head{margin-bottom:clamp(.6rem,2.6svh,2rem)}
.lvd.is-pinned .lvs-title{font-size:clamp(1.9rem,min(4.6vw,6.6svh),3.6rem);margin-top:.4rem}
.lvd.is-pinned .lvs-meta{line-height:1.5}

.lvd-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}

/* ---- dial ---- */
.lvd-dial{position:relative;width:var(--lvd-dial);max-width:100%;aspect-ratio:1;justify-self:center}
.lvd-svg{display:block;width:100%;height:100%;overflow:visible}
.lvd-tick{stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:1}
.lvd-tick.is-major{stroke:var(--hair-gold,rgba(233,227,211,.45));stroke-width:1.4}
.lvd-ring{fill:none;stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:1}
.lvd-inner{fill:none;stroke:var(--hair,rgba(239,235,223,.12));stroke-width:1;stroke-dasharray:2 6}
.lvd-arc{fill:none;stroke:url(#lvdGrad);stroke-width:2.2;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1)}
.lvd-gs0{stop-color:var(--gold,#E9E3D3)}
.lvd-gs1{stop-color:var(--gold-soft,#F4EFE3)}
.lvd-node{fill:var(--space,#053123);stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:1.4;transition:fill .5s,stroke .5s}
.lvd-node.is-done{fill:var(--gold,#E9E3D3);stroke:var(--gold,#E9E3D3)}
.lvd-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;fill:var(--silver-dim,#869889);transition:fill .5s}
.lvd-lbl.is-on{fill:var(--gold,#E9E3D3)}
/* the moon travels the orbit to the active step */
.lvd-orbiter{transform-origin:200px 200px;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.lvd-moonglow{fill:var(--gold-soft,#F4EFE3);opacity:.22}
.lvd-moonrim{fill:none;stroke:rgba(244,239,227,.75);stroke-width:1}
.lvd-halo{fill:none;stroke:var(--gold-soft,#F4EFE3);transform-box:fill-box;transform-origin:center;animation:lvdHalo 2.8s ease-out infinite}
@keyframes lvdHalo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}

.lvd-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}
.lvd-num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;color:var(--gold,#E9E3D3)}
.lvd-name{font-family:var(--font-display);font-weight:340;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--moon,#EFEBDF);
  margin-top:.35rem;letter-spacing:-.01em}
.lvd-center.is-swap .lvd-name,.lvd-center.is-swap .lvd-num{animation:lvdSwap .55s cubic-bezier(.16,1,.3,1)}
@keyframes lvdSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- steps ---- */
.lvd-steps{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair-strong,rgba(239,235,223,.2))}
.lvd-step{position:relative;display:grid;grid-template-columns:3rem 1fr auto;grid-template-rows:auto auto;align-items:baseline;
  width:100%;padding:1.05rem 1.4rem 1.05rem 1.3rem;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .4s ease}
.lvd-step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--gold,#E9E3D3);
  transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lvd-step:hover{background:rgba(233,227,211,.04)}
.lvd-step.is-active{background:linear-gradient(90deg,rgba(233,227,211,.12),rgba(233,227,211,0) 80%)}
.lvd-step.is-active::before{transform:scaleY(1)}
.lvd-step:focus-visible{outline:1px solid var(--gold-soft,#F4EFE3);outline-offset:-1px}
.lvd-no{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--silver-dim,#869889);transition:color .4s}
.lvd-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--silver,#B7C1B4);transition:color .4s}
.lvd-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim,#869889);transition:color .4s}
.lvd-step.is-active .lvd-no,.lvd-step.is-active .lvd-tag{color:var(--gold,#E9E3D3)}
.lvd-step.is-active .lvd-title{color:var(--moon,#EFEBDF)}
.lvd-desc{grid-column:2 / 4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.lvd-desc > span{overflow:hidden;color:var(--silver,#B7C1B4);font-size:.93rem;line-height:1.55;opacity:0;transition:opacity .4s}
.lvd-step.is-active .lvd-desc{grid-template-rows:1fr}
.lvd-step.is-active .lvd-desc > span{opacity:1;padding-top:.45rem}




@media (max-height:780px){
  .lvd.is-pinned .lvd-step{padding-block:.72rem}
  .lvd.is-pinned .lvd-title{font-size:1.18rem}
  .lvd.is-pinned .lvd-name{font-size:clamp(1.3rem,2.4vw,1.9rem)}
}
@media (max-height:660px){
  .lvd.is-pinned .lvd-step{padding-block:.5rem}
  .lvd.is-pinned .lvd-title{font-size:1.05rem}
  .lvd.is-pinned .lvd-desc > span{font-size:.85rem;line-height:1.45}
  .lvd.is-pinned .lvd-step.is-active .lvd-desc > span{padding-top:.25rem}
}
@media (max-width:900px){
  .lvd-body{grid-template-columns:1fr;gap:2rem}
  .lvd{--lvd-dial:min(84vw,380px)}
}
@media (prefers-reduced-motion:reduce){
  .lvd-arc,.lvd-orbiter,.lvd-desc,.lvd-step::before{transition:none}
  .lvd-halo{animation:none}
  .lvd-center.is-swap .lvd-name,.lvd-center.is-swap .lvd-num{animation:none}
}

/* ---- phones / narrow: pinned frame = title, dial on top, compact steps below ---- */
@media (max-width:900px){
  .lvd.is-pinned .lvd-body{gap:.9rem}
  .lvd.is-pinned .lvs-head{margin-bottom:.6rem}
  .lvd.is-pinned .lvs-title{font-size:clamp(1.7rem,7.6vw,2.4rem);margin-top:.3rem}
  .lvd.is-pinned .lvd-dial{justify-self:center}
  .lvd.is-pinned .lvd-step{padding:.42rem .8rem .42rem .9rem;grid-template-columns:2.1rem 1fr auto}
  .lvd.is-pinned .lvd-title{font-size:1.04rem}
  .lvd.is-pinned .lvd-tag{font-size:.54rem}
  .lvd.is-pinned .lvd-desc > span{font-size:.84rem;line-height:1.4}
  .lvd.is-pinned .lvd-step.is-active .lvd-desc > span{padding-top:.2rem}
  .lvd.is-pinned .lvd-name{font-size:clamp(1.15rem,5.4vw,1.6rem)}
}

/* ---- interactive/strips.css ---- */
/* ============================================================
   STRIPS — marquee (lvm) · stat strip (lvt) · numbered rows (lvr) · pillars (lvq)
   ============================================================ */

/* ---- MARQUEE ---- */
.lvm{position:relative;overflow:hidden;padding:.95rem 0;transform:rotate(-1.1deg);margin:.6rem -2rem;
  background:var(--space-2,#123E2F);border-block:1px solid var(--hair-gold,rgba(233,227,211,.45))}
.lvm::before,.lvm::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:2;pointer-events:none}
.lvm::before{left:0;background:linear-gradient(90deg,var(--space-2,#123E2F),transparent)}
.lvm::after{right:0;background:linear-gradient(-90deg,var(--space-2,#123E2F),transparent)}
.lvm-track{display:flex;width:max-content;animation:lvmRun 46s linear infinite}
.lvm:hover .lvm-track{animation-play-state:paused}
@keyframes lvmRun{to{transform:translateX(-50%)}}
.lvm-group{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;white-space:nowrap}
.lvm-group span{font-family:var(--font-display);font-style:italic;font-weight:340;font-size:clamp(1.4rem,2.6vw,2.1rem);
  letter-spacing:-.01em;color:var(--moon,#EFEBDF)}
.lvm-group span.g{color:var(--gold-soft,#F4EFE3)}
.lvm-group b{font-weight:400;font-size:.9rem;color:var(--gold,#E9E3D3)}

/* ---- STAT STRIP ---- */
.lvt{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-block:1.4rem;border-block:1px solid var(--hair,rgba(239,235,223,.12))}
.lvt-list{display:flex;gap:clamp(1.6rem,4vw,3.4rem);margin:0}
.lvt-list div{display:flex;flex-direction:column-reverse;gap:.3rem}
.lvt-list dd{margin:0;font-family:var(--font-display);font-weight:440;font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--moon,#EFEBDF)}
.lvt-list dt{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-dim,#869889)}
.lvt-tags{margin:0;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-dim,#869889)}
.lvt-tags i{font-style:normal;color:var(--gold,#E9E3D3);margin:0 .4rem}

/* ---- NUMBERED ROWS ---- */
.lvr{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair,rgba(239,235,223,.12))}
.lvr > li{border-bottom:1px solid var(--hair,rgba(239,235,223,.12))}
.lvr-row{display:grid;grid-template-columns:4rem minmax(9rem,14rem) 1fr auto 2rem;align-items:center;gap:1.2rem;
  width:100%;padding:1.35rem .6rem;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background .35s ease,padding .35s cubic-bezier(.16,1,.3,1)}
.lvr-row:hover,.lvr-row[aria-expanded="true"]{background:linear-gradient(90deg,rgba(233,227,211,.08),rgba(233,227,211,0) 75%);padding-left:1.1rem}
.lvr-row:focus-visible{outline:1px solid var(--gold-soft,#F4EFE3);outline-offset:-1px}
.lvr-no{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--silver-dim,#869889)}
.lvr-name{font-family:var(--font-display);font-weight:400;font-size:clamp(1.2rem,2vw,1.55rem);color:var(--moon,#EFEBDF)}
.lvr-desc{color:var(--silver,#B7C1B4);font-size:.93rem}
.lvr-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#E9E3D3);white-space:nowrap}
.lvr-arrow{justify-self:end;color:var(--gold,#E9E3D3);font-size:1.1rem;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lvr-row:hover .lvr-arrow{transform:translateX(4px)}
.lvr-row[aria-expanded="true"] .lvr-arrow{transform:rotate(90deg)}
.lvr-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.lvr-more > p{overflow:hidden;margin:0;padding-left:calc(4rem + 1.2rem + 1.1rem);color:var(--silver,#B7C1B4);font-size:.95rem;line-height:1.6}
.lvr-row[aria-expanded="true"] + .lvr-more{grid-template-rows:1fr}
.lvr-row[aria-expanded="true"] + .lvr-more > p{padding-bottom:1.3rem}

/* ---- PILLARS (faded numerals) ---- */
.lvq{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.lvq-card{position:relative;overflow:hidden;padding:1.5rem 1.4rem 1.4rem;border-radius:8px;
  background:linear-gradient(180deg,rgba(233,227,211,.05),rgba(233,227,211,0) 55%),var(--space-2,#123E2F);
  border:1px solid var(--hair,rgba(239,235,223,.12));transition:border-color .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.lvq-card:hover{border-color:var(--hair-gold,rgba(233,227,211,.45));transform:translateY(-3px)}
.lvq-big{position:absolute;right:.6rem;top:-.4rem;font-family:var(--font-display);font-weight:340;font-size:clamp(4.2rem,7vw,6rem);
  line-height:1;color:var(--gold,#E9E3D3);opacity:.12;letter-spacing:-.04em;pointer-events:none;transition:opacity .4s}
.lvq-card:hover .lvq-big{opacity:.24}
.lvq-no{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;color:var(--gold,#E9E3D3);margin:0}
.lvq-title{font-family:var(--font-display);font-weight:440;font-size:1.4rem;color:var(--moon,#EFEBDF);margin:1.6rem 0 .35rem}
.lvq-text{color:var(--silver,#B7C1B4);font-size:.9rem;line-height:1.5;margin:0}



@media (max-width:760px){
  .lvq{grid-template-columns:1fr}
  .lvr-row{grid-template-columns:3rem 1fr 1.6rem;row-gap:.3rem}
  .lvr-desc{grid-column:2 / 3;grid-row:2}
  .lvr-tag{display:none}
  .lvr-arrow{grid-column:3;grid-row:1}
  .lvr-more > p{padding-left:calc(3rem + 1.2rem + 1.1rem)}
  .lvt-list{flex-wrap:wrap;gap:1.2rem 2rem}
}
@media (prefers-reduced-motion:reduce){
  .lvm-track{animation:none}
  .lvr-more,.lvr-row,.lvr-arrow,.lvq-card{transition:none}
}

/* ---- interactive/orbit.css ---- */
/* ============================================================
   PROJECTS IN ORBIT (lvo) — WebGL moon you can turn, one orbit per project,
   selected-project readout (reuses the .lvl panel styles from live.css)
   ============================================================ */
.lvo-sec{scroll-margin-top:96px}
.lvo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}

.lvo-stage{position:relative;width:min(100%,680px);aspect-ratio:1000/660;justify-self:center}
.lvo-back,.lvo-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lvo-back{pointer-events:none}
.lvo-front{pointer-events:none}

/* the moon */
.lvo-sphere{position:absolute;left:30%;top:19.697%;width:40%;aspect-ratio:1;border-radius:50%;
  cursor:grab;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.lvo-sphere::before{content:"";position:absolute;inset:-24%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(233,227,211,.20),rgba(233,227,211,.04) 46%,transparent 66%)}
.lvo-sphere.is-drag{cursor:grabbing}
.lvo-sphere:focus-visible{box-shadow:0 0 0 1px var(--gold-soft,#F4EFE3),0 0 0 6px rgba(244,239,227,.15),0 40px 90px -30px rgba(0,0,0,.85)}
.lvo-fallback,.lvo-gl{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block}
.lvo-fallback{object-fit:cover;transition:opacity .6s ease}
.lvo-gl{opacity:0;transition:opacity .8s ease}
.lvo.is-gl .lvo-gl{opacity:1}
.lvo.is-gl .lvo-fallback{opacity:0}

/* orbits */
.lvo-orbit{fill:none;stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:1.4;transition:stroke .5s,opacity .5s,stroke-width .4s}
.lvo-back .lvo-orbit{opacity:.55}
.lvo-trail{fill:none;stroke:var(--gold-soft,#F4EFE3);stroke-width:2.6;stroke-linecap:round;transition:opacity .5s}
.lvo-trail-0{opacity:.18}.lvo-trail-1{opacity:.45}.lvo-trail-2{opacity:.9}
.lvo-back .lvo-trail{stroke-width:2}
.lvo-o.is-dim .lvo-orbit{opacity:.35}
.lvo-o.is-dim .lvo-trail{filter:opacity(.45)}
.lvo-o.is-hot .lvo-orbit,.lvo-o.is-sel .lvo-orbit{stroke:var(--gold,#E9E3D3);opacity:.85}
.lvo-o.is-sel .lvo-orbit{stroke-width:1.8}

/* markers */
.lvo-mk{pointer-events:auto;cursor:pointer;outline:none;transition:opacity .35s}
.lvo-mk-hit{fill:transparent}
.lvo-mk-glow{fill:var(--gold-soft,#F4EFE3);opacity:.22;transform-box:fill-box;transform-origin:center;transition:opacity .4s}
.lvo-mk-core{fill:var(--gold-soft,#F4EFE3);stroke:var(--space,#053123);stroke-width:3}
.lvo-mk-lab{font-family:var(--font-mono);font-size:21px;letter-spacing:.14em;fill:var(--silver,#B7C1B4);transition:fill .4s}
.lvo-mk:hover .lvo-mk-lab,.lvo-mk:focus-visible .lvo-mk-lab,.lvo-mk.is-sel .lvo-mk-lab{fill:var(--moon,#EFEBDF)}
.lvo-mk.is-sel .lvo-mk-glow{opacity:.5;animation:lvoPulse 2.6s ease-out infinite}
.lvo-mk:focus-visible .lvo-mk-core{stroke:var(--gold-soft,#F4EFE3)}
.lvo-mk.is-hidden{opacity:0;pointer-events:none}
.lvo-mk.is-behind{opacity:.45}
@keyframes lvoPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}

/* readout side */
.lvo-side{display:grid;gap:1.1rem;justify-items:start;min-width:0}
.lvo .lvo-panel{width:100%;max-width:420px}
.lvo-code{font-weight:500;color:var(--moon,#EFEBDF)}
.lvo-stagebar{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:.85rem 0 0;padding:0}
.lvo-stagebar li{position:relative;padding-top:.55rem;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim,#869889);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .5s}
.lvo-stagebar li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--hair-strong,rgba(239,235,223,.2));transition:background .6s}
.lvo-stagebar li.is-done::before{background:var(--gold,#E9E3D3)}
.lvo-stagebar li.is-now{color:var(--gold-soft,#F4EFE3)}
.lvo-stagebar li.is-now::before{background:linear-gradient(90deg,var(--gold,#E9E3D3),var(--gold-soft,#F4EFE3));box-shadow:0 0 8px rgba(244,239,227,.5)}
.lvo-panel .lvl-list{margin-top:.8rem}
.lvo-panel.is-swap .lvl-item{animation:lvoSwap .55s cubic-bezier(.16,1,.3,1) both}
.lvo-panel.is-swap .lvl-item:nth-child(2){animation-delay:.05s}.lvo-panel.is-swap .lvl-item:nth-child(3){animation-delay:.1s}.lvo-panel.is-swap .lvl-item:nth-child(4){animation-delay:.15s}
@keyframes lvoSwap{from{opacity:.2;transform:translateX(8px)}to{opacity:1;transform:none}}

.lvo-projects{display:flex;flex-wrap:wrap;gap:.45rem}
.lvo-chip{min-height:44px;min-width:44px;padding:0 .9rem;border-radius:99px;cursor:pointer;background:transparent;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--silver,#B7C1B4);
  border:1px solid var(--hair-strong,rgba(239,235,223,.2));transition:color .3s,border-color .3s,background .3s}
.lvo-chip:hover{color:var(--moon,#EFEBDF);border-color:var(--hair-gold,rgba(233,227,211,.45))}
.lvo-chip[aria-selected="true"]{color:var(--gold-soft,#F4EFE3);border-color:var(--gold,#E9E3D3);background:rgba(233,227,211,.08)}
.lvo-chip:focus-visible{outline:1px solid var(--gold-soft,#F4EFE3);outline-offset:2px}
.lvo-tags{margin:0;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim,#869889);opacity:.85}
.lvo-tags i{font-style:normal;color:var(--gold,#E9E3D3);margin:0 .3rem}
.lvo-ask{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#E9E3D3);
  text-decoration:underline;text-decoration-color:var(--hair-gold,rgba(233,227,211,.45));text-underline-offset:.4rem;transition:color .3s,border-color .3s}
.lvo-ask:hover{color:var(--gold-soft,#F4EFE3);border-color:var(--gold-soft,#F4EFE3)}
.lvo-ask span{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lvo-ask:hover span{transform:translateX(4px)}

/* light theme: eclipse-dimmed moon (shader handles the GL moon; this is the fallback) */




@media (max-width:900px){
  .lvo{grid-template-columns:1fr}
  .lvo-stage{width:min(100%,520px)}
  .lvo-side{justify-items:stretch}
  .lvo .lvo-panel{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .lvo-mk.is-sel .lvo-mk-glow{animation:none}
  .lvo-panel.is-swap .lvl-item{animation:none}
}
/* narrow: the stage bar is bars only — the Stage pill below already names the stage */
@media (max-width:420px){.lvo-stagebar li{font-size:0;padding-top:4px;color:transparent}}

/* ---- interactive/gauge.css ---- */
/* ============================================================
   STAGE RING (lvg) — "Stage 03 / 05 · Underway"
   ============================================================ */
.lvg{position:relative;display:grid;justify-items:center;gap:.7rem;margin:0;width:min(100%,220px)}
.lvg-svg{display:block;width:100%;height:auto;overflow:visible}
.lvg-track{fill:none;stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:2.2}
.lvg-arc{fill:none;stroke:var(--gold,#E9E3D3);stroke-width:2.6;stroke-linecap:round;
  transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 0 6px rgba(233,227,211,.35))}
.lvg-node{fill:var(--space-2,#123E2F);stroke:var(--hair-strong,rgba(239,235,223,.2));stroke-width:1.2;transition:fill .5s,stroke .5s}
.lvg-node.is-done{fill:var(--gold,#E9E3D3);stroke:var(--gold,#E9E3D3)}
.lvg-node.is-next{fill:var(--space-2,#123E2F);stroke:var(--hair-strong,rgba(239,235,223,.2))}
.lvg-center{position:absolute;inset:0 0 auto;aspect-ratio:1;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}
.lvg-num{font-family:var(--font-display);font-weight:340;color:var(--moon,#EFEBDF);line-height:1}
.lvg-num b{font-weight:340;font-size:clamp(2.4rem,4.6vw,3.2rem);letter-spacing:-.02em}
.lvg-num span{font-size:1.05rem;color:var(--silver-dim,#869889);margin-left:.25rem}
.lvg-lab{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#E9E3D3);margin-top:.45rem}
.lvg-cap{text-align:center;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-dim,#869889)}

.lvg[data-live] .lvg-arc{transition:stroke-dashoffset .3s linear}
.lvg.is-tick .lvg-num b,.lvg.is-tick .lvg-lab{animation:lvgTick .5s cubic-bezier(.16,1,.3,1)}
@keyframes lvgTick{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lvg-arc,.lvg-node,.lvg[data-live] .lvg-arc{transition:none}.lvg.is-tick .lvg-num b,.lvg.is-tick .lvg-lab{animation:none}}

/* ---- interactive/story.css ---- */
/* ============================================================
   TAKING PART (lvy) — pinned scroll story: sticky steps w/ progress lines, swapping card
   ============================================================ */
.lvy{--lvy-steps:3}
.lvy.is-pinned{height:calc(100svh + var(--lvy-steps) * 60svh);padding-block:0}
.lvy.is-pinned .lvy-pin{position:sticky;top:0;height:100svh;box-sizing:border-box;display:grid;align-content:center;padding:84px 0 20px}
.lvy.is-pinned .lvs-title{font-size:clamp(1.9rem,min(4.4vw,6.4svh),3.6rem)}
@media (max-height:780px){
  .lvy.is-pinned .lvy-track{margin-top:1.1rem}
  .lvy.is-pinned .lvy-ring{width:120px}
  .lvy.is-pinned .lvy-step{padding-block:.55rem}
  .lvy.is-pinned .lvy-card{padding:1.3rem 1.5rem}
  .lvy.is-pinned .lvy-card-title{margin:1rem 0 .45rem}
  .lvy.is-pinned .lvy-checks{margin-top:.85rem}
  .lvy.is-pinned .lvy-split .lvg{width:140px}
}
@media (max-height:660px){
  .lvy.is-pinned .lvy-lead{display:none}
  .lvy.is-pinned .lvy-ico{width:34px;height:34px}
  .lvy.is-pinned .lvy-card-text{font-size:.9rem}
  .lvy.is-pinned .lvy-feed li{padding:.5rem .7rem}
}
.lvy-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.lvy-lead{color:var(--silver,#B7C1B4);font-size:1rem;margin:1rem 0 0}

.lvy-track{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1rem,2.5vw,2rem);align-items:center;margin-top:2rem}
.lvy-steps{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;max-width:26rem}
.lvy-ring{width:clamp(128px,11vw,160px)}
.lvy-ring .lvg-num b{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.lvy-ring .lvg-num span{font-size:.85rem}
.lvy-ring .lvg-lab{font-size:.52rem}
.lvy-step{display:grid;grid-template-columns:2.4rem auto 1fr;align-items:center;gap:.9rem;width:100%;padding:.75rem 0;
  border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lvy-step:focus-visible{outline:1px solid var(--gold-soft,#F4EFE3);outline-offset:3px}
.lvy-no{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--silver-dim,#869889);transition:color .4s}
.lvy-name{font-family:var(--font-display);font-weight:400;font-size:1.15rem;color:var(--silver,#B7C1B4);white-space:nowrap;transition:color .4s}
.lvy-line{height:1px;background:var(--hair-strong,rgba(239,235,223,.2));position:relative;overflow:hidden}
.lvy-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold,#E9E3D3),var(--gold-soft,#F4EFE3));
  transform-origin:0 50%;transform:scaleX(0);transition:transform .2s linear}
.lvy-step.is-active .lvy-no{color:var(--gold,#E9E3D3)}
.lvy-step.is-active .lvy-name{color:var(--moon,#EFEBDF)}

.lvy-stage{position:relative;display:grid}
.lvy-card{grid-area:1 / 1;position:relative;padding:1.7rem 1.8rem;border-radius:10px;
  background:linear-gradient(180deg,rgba(233,227,211,.07),rgba(233,227,211,0) 45%),var(--space-2,#123E2F);
  border:1px solid var(--hair-gold,rgba(233,227,211,.45));
  box-shadow:0 40px 90px -45px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0;transform:translateY(18px) scale(.985);pointer-events:none;visibility:hidden;
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s linear .7s}
.lvy-card.is-active{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .55s ease .08s,transform .7s cubic-bezier(.16,1,.3,1) .08s,visibility 0s}
.lvy-card.is-past{transform:translateY(-14px) scale(.985)}
.lvy-card-head{display:flex;justify-content:space-between;align-items:center}
.lvy-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:var(--gold,#E9E3D3);
  border:1px solid var(--hair-gold,rgba(233,227,211,.45));background:rgba(233,227,211,.06)}
.lvy-ico svg{width:22px;height:22px}
.lvy-count{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--silver-dim,#869889)}
.lvy-card-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.95rem);color:var(--moon,#EFEBDF);
  margin:1.4rem 0 .6rem;letter-spacing:-.01em;line-height:1.15}
.lvy-card-text{color:var(--silver,#B7C1B4);font-size:.98rem;line-height:1.6;max-width:30rem;margin:0}
.lvy-checks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.lvy-checks li{display:flex;align-items:center;gap:.65rem;color:var(--moon,#EFEBDF);font-size:.92rem}
.lvy-checks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:1px solid var(--hair-gold,rgba(233,227,211,.45));
  background:radial-gradient(circle,var(--gold,#E9E3D3) 0 3px,transparent 3.5px)}
.lvy-split{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center}
.lvy-split .lvg{width:170px}
.lvy-feed{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.4rem}
.lvy-feed li{display:flex;justify-content:space-between;align-items:center;padding:.65rem .8rem;border-radius:6px;
  border:1px solid var(--hair,rgba(239,235,223,.12));background:rgba(239,235,223,.025);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moon,#EFEBDF)}
.lvy-feed em{font-style:normal;font-size:.58rem;letter-spacing:.16em;padding:.25rem .55rem;border-radius:99px;
  color:var(--silver,#B7C1B4);border:1px solid var(--hair-strong,rgba(239,235,223,.2))}
.lvy-feed em.is-ok{color:#86C59A;border-color:rgba(134,197,154,.4);background:rgba(134,197,154,.07)}





@media (max-width:900px){
  .lvy-grid{grid-template-columns:1fr;gap:1.6rem}
  .lvy-track{margin-top:1.4rem}
}
@media (max-width:520px){
  .lvy-track{grid-template-columns:1fr 112px;gap:.8rem}
  .lvy-ring{width:112px}
  .lvy-step{grid-template-columns:2rem auto 1fr;gap:.6rem}
  .lvy-name{font-size:1.02rem}
  .lvy-card{padding:1.3rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){.lvy-card,.lvy-card.is-active,.lvy-line i{transition:none}}

/* ---- phones / narrow: compact pinned frame ---- */
@media (max-width:900px){
  .lvy.is-pinned .lvy-lead{display:none}
  .lvy.is-pinned .lvs-title{font-size:clamp(1.6rem,7vw,2.2rem);margin-top:.3rem}
  .lvy.is-pinned .lvy-grid{gap:.8rem}
  .lvy.is-pinned .lvy-track{margin-top:.7rem;grid-template-columns:1fr 100px;gap:.7rem}
  .lvy.is-pinned .lvy-ring{width:100px}
  .lvy.is-pinned .lvy-ring .lvg-cap{display:none}
  .lvy.is-pinned .lvy-step{padding-block:.38rem}
  .lvy.is-pinned .lvy-card{padding:1rem 1.1rem}
  .lvy.is-pinned .lvy-ico{width:32px;height:32px}
  .lvy.is-pinned .lvy-card-title{font-size:1.25rem;margin:.6rem 0 .35rem}
  .lvy.is-pinned .lvy-card-text{font-size:.88rem;line-height:1.5}
  .lvy.is-pinned .lvy-checks{margin-top:.6rem;gap:.3rem}
  .lvy.is-pinned .lvy-checks li{font-size:.85rem}
  .lvy.is-pinned .lvy-feed{margin-top:.6rem;gap:.3rem}
  .lvy.is-pinned .lvy-feed li{padding:.45rem .6rem}
}
@media (max-width:900px) and (max-height:720px){
  .lvy.is-pinned .lvy-checks{display:none}
}

/* ---- lead/path.css ---- */
/* ===== PROJECT PATH RAIL (lvpath) — replaces the stat strip; a light travels the five stages ===== */
.lvpath{--n:5;position:relative;width:100%;padding-top:26px}
.lvpath-track{position:absolute;top:30px;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);height:1px;background:var(--hair-strong)}
.lvpath-fill{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:linear-gradient(90deg,transparent,var(--gold));
  transition:width 1.4s cubic-bezier(.16,1,.3,1)}
.lvpath-pip{position:absolute;top:50%;left:var(--p,0%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent),0 0 18px 4px color-mix(in srgb,var(--gold) 55%,transparent);
  transition:left 1.4s cubic-bezier(.16,1,.3,1)}
.lvpath-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.lvpath-list a{display:grid;justify-items:center;text-align:center;gap:.35rem;padding:0 .3rem;color:inherit;text-decoration:none;min-height:44px}
.lvpath-node{width:9px;height:9px;border-radius:50%;margin-bottom:.55rem;background:var(--space,#053123);
  border:1px solid var(--hair-gold);transition:border-color .5s,background .5s,box-shadow .5s,transform .5s}
.lvpath-list b{font-family:var(--font-display);font-weight:400;font-size:clamp(1rem,1.25vw,1.2rem);color:var(--silver);
  letter-spacing:.005em;transition:color .5s}
.lvpath-list small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-dim);
  opacity:.75;transition:opacity .5s,color .5s}
.lvpath-list li.is-on .lvpath-node{background:var(--gold);border-color:var(--gold);transform:scale(1.25);
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--gold) 50%,transparent)}
.lvpath-list li.is-on b{color:var(--moon)}
.lvpath-list li.is-on small{opacity:1;color:var(--gold)}
.lvpath-list a:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:2px}
@media (max-width:700px){
  .lvpath-list small{display:none}
  .lvpath-list b{font-size:.86rem}
  .lvpath-list a{padding:0 .1rem}
}
@media (prefers-reduced-motion:reduce){.lvpath-fill,.lvpath-pip,.lvpath-node{transition:none}}

/* ---- cookies/cookie-consent.css ---- */
/* =========================================================================
   Lunare Ventures — cookie consent banner (.lvk-*)
   Uses the site tokens, so it follows dark and light ("eclipse") themes.
   position:fixed => no layout shift.
   ========================================================================= */
.lvk{position:fixed;left:0;right:0;bottom:0;z-index:900;padding:0 1rem 1rem;pointer-events:none;
  opacity:0;transform:translateY(14px);transition:opacity .28s var(--ease-ui,ease),transform .28s var(--ease-out,ease)}
.lvk.lvk-in{opacity:1;transform:none}
.lvk[hidden]{display:none}
.lvk-card{pointer-events:auto;max-width:62rem;margin:0 auto;display:flex;align-items:flex-end;gap:1.6rem;
  padding:1.15rem 1.3rem 1.15rem 1.5rem;border:1px solid var(--hair-gold,rgba(233,227,211,.45));border-radius:6px;
  background:var(--space-2,#123E2F);color:var(--moon,#EFEBDF);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.65);
  font-family:var(--font-sans,Inter,sans-serif)}
.lvk-main{flex:1;min-width:0}
.lvk-eyebrow{margin:0 0 .35rem;font-family:var(--font-mono,monospace);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold,#E9E3D3)}
.lvk-text{margin:0;font-size:.88rem;line-height:1.55;color:var(--silver,#B7C1B4);max-width:40rem}
.lvk-link{color:var(--moon,#EFEBDF);text-decoration:underline;text-decoration-color:var(--hair-gold);text-underline-offset:3px}
.lvk-link:hover{color:var(--gold,#E9E3D3)}

.lvk-actions{display:flex;gap:.6rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.lvk-btn{min-height:44px;padding:0 1.15rem;border-radius:3px;font:500 .86rem/1 var(--font-sans,Inter,sans-serif);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.lvk-btn[hidden]{display:none}
.lvk-solid{background:var(--gold,#E9E3D3);border:1px solid var(--gold,#E9E3D3);color:#0b0b0b}
.lvk-solid:hover{background:var(--gold-soft,#F4EFE3);border-color:var(--gold-soft,#F4EFE3)}
.lvk-ghost{background:transparent;border:1px solid var(--hair-strong,rgba(239,235,223,.2));color:var(--moon,#EFEBDF)}
.lvk-ghost:hover{border-color:var(--gold,#E9E3D3);color:var(--gold,#E9E3D3)}




/* settings */
.lvk-settings{margin-top:.95rem;border-top:1px solid var(--hair,rgba(239,235,223,.12))}
.lvk-settings[hidden]{display:none}
.lvk-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.8rem 0;
  border-bottom:1px solid var(--hair,rgba(239,235,223,.12))}
.lvk-row-title{margin:0;font-size:.9rem;color:var(--moon,#EFEBDF);font-weight:500}
.lvk-row-sub{margin:.15rem 0 0;font-size:.8rem;color:var(--silver-dim,#869889)}
.lvk-always{font-family:var(--font-mono,monospace);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold,#E9E3D3);white-space:nowrap}
.lvk-switch{position:relative;flex-shrink:0;width:46px;height:26px;border-radius:13px;cursor:pointer;
  border:1px solid var(--hair-strong,rgba(239,235,223,.2));background:transparent;padding:0;transition:background .2s,border-color .2s}
.lvk-switch span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--silver,#B7C1B4);transition:transform .22s var(--ease-out,ease),background .2s}
.lvk-switch[aria-checked="true"]{background:var(--gold,#E9E3D3);border-color:var(--gold,#E9E3D3)}
.lvk-switch[aria-checked="true"] span{transform:translateX(20px);background:#fff}
.lvk-switch:focus-visible,.lvk-btn:focus-visible,.lvk-link:focus-visible{outline:2px solid var(--gold-soft,#F4EFE3);outline-offset:3px}

.lvk-expanded .lvk-card{align-items:stretch;flex-direction:column}
.lvk-expanded .lvk-actions{justify-content:flex-end}

@media (max-width:720px){
  .lvk{padding:0 .6rem .6rem}
  .lvk-card{flex-direction:column;align-items:stretch;gap:1rem;padding:1.1rem}
  .lvk-actions{justify-content:stretch}
  .lvk-actions .lvk-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .lvk,.lvk-switch,.lvk-switch span{transition:none}
}

/* ===== LEAD INTEGRATION OVERRIDES ===== */
/* hero: stat strip slot replaces the old rail */
.hero-rail-slot{grid-area:rail;width:100%}
.hero-rail-slot .lvt{border-bottom:0}
.hero-rail-slot .lvt-tags{display:none}
/* mobile: the moon belongs on the first screen, above the copy */
@media (max-width:900px){
  .hero .hero-inner{grid-template-columns:1fr;grid-template-areas:"moon" "copy" "rail";row-gap:1.4rem;padding-top:92px}
  .hero .hero-moon{width:min(62vw,280px);justify-self:start;margin-left:-2vw}
  .hero .lvl--hero{display:none}
}
.ft-credit{margin-top:.9rem;font-size:.72rem;color:var(--silver-dim)}
/* phones: the whole first message (moon, eyebrow, headline, sentence, button) fits the first screen */
@media (max-width:560px){
  .hero .hero-inner{padding-top:84px;row-gap:.9rem}
  .hero .hero-moon{width:min(48vw,200px);margin-left:0}
  .hero .eyebrow{margin-bottom:.8rem;font-size:.62rem;letter-spacing:.2em}
  .hero .hero-title{font-size:clamp(2.15rem,10.2vw,2.7rem);line-height:1.02}
  .hero .hero-lead{margin-top:1rem;font-size:1rem;line-height:1.5}
  .hero .hero-cta{margin-top:1.3rem;gap:.6rem}
  .hero .hero-cta .btn{padding:.85rem 1.2rem}
  .hero .hero-seal{display:none}
}
@media (max-width:560px) and (max-height:700px){
  .hero .hero-inner{padding-top:80px;row-gap:.75rem}
  .hero .hero-moon{width:min(42vw,170px)}
  .hero .hero-title{font-size:clamp(2rem,9.4vw,2.45rem)}
  .hero .hero-lead{font-size:.95rem;margin-top:.8rem}
  .hero .hero-cta{margin-top:1.05rem}
}
@media (max-width:560px) and (max-height:600px){
  .hero .hero-moon{width:min(30vw,118px)}
  .hero .eyebrow{display:none}
  .hero .hero-title{font-size:clamp(1.85rem,8.8vw,2.2rem)}
}
/* hero → orbit: no dead band (owner 2026-10-01: "too much spacing") */
.hero{min-height:auto}
.hero .hero-inner{padding-bottom:8px}
#how{padding-top:0}
/* pinned frames: anchor under the header instead of floating mid-screen (kills the void above "The orbit") */
.lvd.is-pinned .lvd-pin,.lvy.is-pinned .lvy-pin{align-content:start;padding-top:100px}
/* contact: 3 compact steps; bottom sheet on phones (owner: "too big, less stress") */
.modal-dialog{max-width:500px;padding:clamp(1.3rem,2.6vw,2rem)}
.modal .eyebrow{margin-bottom:.4rem}
.modal-title{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.modal-sub{font-size:.9rem;margin:0 0 1rem}
.qform--compact .qprogress{margin-bottom:1rem}
.qform--compact .qnum{font-size:.62rem}
.qform--compact .qq{font-size:clamp(1.2rem,3.8vw,1.5rem);margin:.35rem 0 .9rem}
.qchoices--grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.qchoices--grid .qchoice{min-height:58px;padding:.75rem .85rem;justify-content:center;text-align:left}
.qchoices--grid .qchoice b{font-size:.92rem;line-height:1.25}
.qlabel{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-dim);margin:.55rem 0 .15rem}
.qlabel span{opacity:.7}
.qform--compact .qinput{font-size:16px;padding:.5rem 0}
.qform--compact textarea.qinput{min-height:4.8rem;padding:.65rem .8rem}
.qform--compact .qerr{min-height:0;margin:.2rem 0 0;font-size:.78rem}
.qform--compact .qnav{margin-top:1rem}
.qform--compact .qdone{padding:.4rem 0 .6rem}
@media (max-width:560px){
  .modal-dialog{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;margin:0;max-height:90dvh;
    border-radius:16px 16px 0 0;border-bottom:0;padding:1.15rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    animation:lvSheet .38s cubic-bezier(.16,1,.3,1)}
  .modal-sub{display:none}
  .modal-close{top:.35rem;right:.45rem}
}
@keyframes lvSheet{from{transform:translateY(100%)}to{transform:none}}
@media (max-height:700px) and (min-width:561px){.modal-dialog{margin:3vh auto}.modal-sub{display:none}}
@media (max-width:340px){.qchoices--grid{grid-template-columns:1fr}}
/* word reveal: give italic overhang + descenders room inside each word mask ("by design." y was clipped) */
.aw-word{padding:0 .14em .16em 0;margin:0 -.14em -.16em 0}
/* invitation moon horizon dissolves into the footer — no hard line (owner 2026-10-01) */
.band-invite::after{background:linear-gradient(to bottom,transparent 76%,color-mix(in srgb,var(--ink) 50%,transparent) 90%,var(--ink) 100%)!important}
main:has(> .band-invite:last-child) + .site-footer{border-top-color:transparent}
.invite-wrap .invite-p{max-width:34rem;margin:-6px 0 28px;color:var(--silver);font-size:1.05rem;line-height:1.6}
@media (max-width:560px){.invite-wrap .invite-p{font-size:.98rem;margin-bottom:22px}.invite-wrap br.br-d{display:none}}
/* iOS paint: backdrop-blur and blend modes over the live video / WebGL moon flash while scrolling on
   iPhone. Touch screens get solid equivalents; desktop keeps the glass. */
@media (hover:none) and (pointer:coarse){
  .site-header,.site-header.scrolled,.mobile-nav,.lvl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .site-header{transition:background .4s var(--ease-ui),border-color .4s!important}
  .site-header.scrolled{background:rgba(5,49,35,.95)!important}
  .lvl{background:linear-gradient(180deg,rgba(25,67,52,.94),rgba(12,56,41,.96))!important}
  .moon-sheen{mix-blend-mode:normal!important;opacity:.6}
}
/* short laptop windows: keep the button above the fold */
@media (min-width:901px) and (max-height:640px){.hero{padding-top:88px}.hero .hero-inner{padding-top:12px}}