/* ==========================================================================
   HIGH ON LIFE — Halo Vision Ventures Corp
   Identity: ALTERED. Condensed caps having the experience, over an umbral
   palette taken from the real partial lunar eclipse of 27–28 August 2026.

   The page is deliberately single-world — night only. Every colour is painted
   explicitly so it holds whatever ground the browser puts behind it.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face { font-family: 'Anton'; src: url('../fonts/anton-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ArchivoV'; src: url('../fonts/archivo-var.woff2') format('woff2-variations');
             font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('../fonts/instrument-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('../fonts/instrument-500.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument'; src: url('../fonts/instrument-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --void:    #08060e;
  --umbra:   #150f21;
  --edge:    #241a33;
  --limb:    #fff6e4;
  --ember:   #cf4a24;
  --copper:  #ef8340;
  --rust:    #6e1f14;
  --penum:   #6d5cff;
  --ash:     #a89ebd;
  --ash-dim: #6d6584;

  --ff-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --ff-wide:    'ArchivoV', 'Trebuchet MS', sans-serif;
  --ff-body:    'Instrument', -apple-system, 'Segoe UI', sans-serif;

  --col: 60ch;
  --gut: clamp(1.25rem, 4.4vw, 3.5rem);
  --nav-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ash);
  font-family: var(--ff-body);
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.col  { max-width: var(--col); }
.col--wide { max-width: 72ch; }
.centre { margin-left: auto; margin-right: auto; }
.tc { text-align: center; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; color: var(--limb); text-wrap: balance; }

/* long headings keep sentence case and stay readable */
h2 {
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(1.65rem, 3.5vw, 2.55rem);
  line-height: 1.14; letter-spacing: -0.021em;
}

/* short headings become the loud voice — the same face as the logo */
.shout {
  font-family: var(--ff-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.5rem, 8.2vw, 6.2rem);
  line-height: 0.9; letter-spacing: 0.005em; color: var(--limb);
}
.shout--sm { font-size: clamp(2rem, 5.6vw, 4rem); }

h3 { font-family: var(--ff-body); font-weight: 600; font-size: 1.1rem; line-height: 1.32; }

p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.12rem, 2vw, 1.42rem); line-height: 1.6; color: #c3b9d6; }
strong { color: var(--limb); font-weight: 600; }
em { font-style: normal; color: var(--copper); }
a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--limb); }

.eyebrow {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 125;
  font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 1.2rem;
}
.eyebrow--cold { color: var(--penum); }
.eyebrow--dim  { color: var(--ash-dim); }

.wide {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  letter-spacing: 0.26em; text-transform: uppercase;
}

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

/* ---------- section rhythm + the arc ---------- */
section { position: relative; padding: clamp(4.5rem, 11vw, 8.5rem) 0; }

/* Earth's shadow, not a torn edge. Each boundary is a circle bitten out of the
   top of the band; the radius tightens toward maximum eclipse and opens again
   afterwards. Nobody is told this — they feel the page closing in. */
/* Note: a radial-gradient `circle` may not take a percentage radius, so the arc
   is an ellipse — wide across the viewport, with its depth set in px. Centring
   it on the top edge means the visible bite is exactly --arc-h deep. */
.arc {
  --arc-w: 128%; --arc-h: 90px; --arc-x: 50%;
  -webkit-mask-image: radial-gradient(ellipse var(--arc-w) var(--arc-h) at var(--arc-x) 0%, transparent 99.4%, #000 99.6%);
          mask-image: radial-gradient(ellipse var(--arc-w) var(--arc-h) at var(--arc-x) 0%, transparent 99.4%, #000 99.6%);
  padding-top: calc(clamp(4.5rem, 11vw, 8.5rem) + var(--arc-h) * 0.75);
}
/* shadow deepening toward maximum, then opening again */
.arc--a   { --arc-w: 160%; --arc-h: 66px;  --arc-x: 22%; }
.arc--b   { --arc-w: 128%; --arc-h: 104px; --arc-x: 68%; }
.arc--c   { --arc-w: 104%; --arc-h: 150px; --arc-x: 42%; }
.arc--max { --arc-w: 84%;  --arc-h: 210px; --arc-x: 50%; }
.arc--d   { --arc-w: 134%; --arc-h: 118px; --arc-x: 78%; }
.arc--e   { --arc-w: 175%; --arc-h: 58px;  --arc-x: 32%; }

.band { background: var(--umbra); }
.band--ember {
  background: radial-gradient(120% 92% at 50% 0%, rgba(207, 74, 36, 0.15) 0%, transparent 62%), var(--umbra);
}
.band--cold {
  background:
    radial-gradient(112% 82% at 20% 2%, rgba(109, 92, 255, 0.17) 0%, transparent 60%),
    radial-gradient(92% 70% at 86% 14%, rgba(207, 74, 36, 0.10) 0%, transparent 60%),
    var(--umbra);
}
.band--max {
  background:
    radial-gradient(80% 60% at 50% 46%, rgba(110, 31, 20, 0.55) 0%, transparent 70%),
    #05040a;
}
.band--stars {
  background: linear-gradient(180deg, rgba(8,6,14,0.86), rgba(8,6,14,0.94)), url('../images/stars.webp') center/cover;
}

/* film grain, generated in the stylesheet so it costs nothing to download */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
section > .wrap { position: relative; z-index: 2; }

/* ==========================================================================
   the wordmark — ALTERED
   ========================================================================== */
.altered {
  position: relative; display: inline-block;
  font-family: var(--ff-display); text-transform: uppercase;
  color: var(--limb); letter-spacing: 0.012em; line-height: 0.88;
  text-shadow: 0 0 0.5em rgba(150, 110, 190, 0.28);
}
.altered::before, .altered::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  mix-blend-mode: screen; pointer-events: none;
}
.altered::before { color: var(--penum); transform: translateX(-0.055em); filter: blur(0.6px); opacity: 0.8; }
.altered::after  { color: var(--ember); transform: translateX(0.055em);  filter: blur(0.6px); opacity: 0.85; }

.altered--live::before { animation: tearL 7s steps(1, end) infinite; }
.altered--live::after  { animation: tearR 7s steps(1, end) infinite; }
.altered--live > span  { animation: tearC 7s steps(1, end) infinite; display: inline-block; }

@keyframes tearL {
  0%, 43%   { transform: translateX(-0.055em); clip-path: none; }
  44%       { transform: translateX(-0.16em);  clip-path: inset(18% 0 52% 0); }
  46%       { transform: translateX(0.09em);   clip-path: inset(62% 0 12% 0); }
  48%, 81%  { transform: translateX(-0.055em); clip-path: none; }
  82%       { transform: translateX(-0.2em);   clip-path: inset(40% 0 34% 0); }
  84%, 100% { transform: translateX(-0.055em); clip-path: none; }
}
@keyframes tearR {
  0%, 43%   { transform: translateX(0.055em); clip-path: none; }
  44%       { transform: translateX(0.19em);  clip-path: inset(52% 0 20% 0); }
  46%       { transform: translateX(-0.07em); clip-path: inset(8% 0 70% 0); }
  48%, 81%  { transform: translateX(0.055em); clip-path: none; }
  82%       { transform: translateX(0.22em);  clip-path: inset(28% 0 48% 0); }
  84%, 100% { transform: translateX(0.055em); clip-path: none; }
}
@keyframes tearC {
  0%, 43%   { transform: translateX(0); }
  44%       { transform: translateX(0.02em); }
  45%       { transform: translateX(-0.03em); }
  47%, 81%  { transform: translateX(0); }
  82%       { transform: translateX(0.025em); }
  83%, 100% { transform: translateX(0); }
}

/* ==========================================================================
   nav
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(8, 6, 14, 0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.nav.is-stuck { border-bottom-color: var(--edge); background: rgba(8, 6, 14, 0.93); }
.nav__in { display: flex; align-items: center; gap: 1.2rem; width: 100%; }
.nav__mark { font-family: var(--ff-display); font-size: 17px; letter-spacing: 0.02em;
             text-transform: uppercase; color: var(--limb); text-decoration: none; white-space: nowrap; }
.nav__mark:hover { color: var(--limb); }
.nav__spacer { flex: 1; }
.nav__meta {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav__meta b { color: var(--copper); font-weight: 500; }

/* the scroll eclipse: a disc in the nav that Earth's shadow crosses as you read */
.tracker { width: 26px; height: 26px; flex: none; position: relative; }
.tracker canvas { width: 26px; height: 26px; display: block; }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 500, 'wdth' 112;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.15em 2.2em; border: 0; cursor: pointer; text-decoration: none;
  background: var(--ember); color: var(--limb);
  position: relative; transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 0 0 rgba(207, 74, 36, 0);
}
.btn:hover { background: var(--copper); color: #1a0c06; transform: translateY(-2px);
             box-shadow: 0 10px 34px rgba(207, 74, 36, 0.34); }
.btn--sm { padding: 0.85em 1.5em; font-size: 11px; letter-spacing: 0.16em; }
.btn--ghost { background: transparent; color: var(--limb); box-shadow: inset 0 0 0 1px var(--edge); }
.btn--ghost:hover { background: rgba(207, 74, 36, 0.12); color: var(--limb); box-shadow: inset 0 0 0 1px var(--ember); }
.btn--big { font-size: 13.5px; padding: 1.3em 2.6em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 2.4rem; }
.cta-note { font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 118;
            font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash-dim);
            line-height: 1.75; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative; min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: flex-end; overflow: hidden;
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}
.hero__bg {
  position: absolute; inset: -6% 0 -6%; width: 100%; height: 112%; max-width: none;
  object-fit: cover; object-position: 72% 34%; z-index: 0; will-change: transform;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,6,14,0.72) 0%, rgba(8,6,14,0.12) 34%, rgba(8,6,14,0.86) 88%, var(--void) 100%),
    linear-gradient(90deg, rgba(8,6,14,0.94) 0%, rgba(8,6,14,0.88) 42%, rgba(8,6,14,0.6) 58%,
                          rgba(8,6,14,0.16) 70%, transparent 84%);
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero .altered { font-size: clamp(3.1rem, 11.5vw, 9.2rem); display: block; }
.hero__tag {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: clamp(10px, 1.5vw, 13px); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--copper); margin: 1.6rem 0 0; max-width: 30ch;
}
.hero__sub { margin-top: 1.5rem; max-width: 46ch; font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: #c9bfda; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 2rem;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash-dim);
}
.hero__facts b { color: var(--limb); font-weight: 500; }

/* countdown to first contact — a real astronomical moment, not a sales timer */
.contact {
  margin-top: 2.6rem; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 1.5rem;
  border-left: 2px solid var(--penum); padding: 0.55rem 0 0.55rem 1.15rem;
}
.contact__lab {
  display: block; font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--penum); margin-bottom: 0.3rem;
}
.contact__t {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 500, 'wdth' 100;
  font-size: 1.35rem; color: var(--limb); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.contact__t small { font-size: 10px; color: var(--ash-dim); letter-spacing: 0.14em; margin-left: 0.2em; }
.contact__note { font-size: 0.86rem; color: var(--ash-dim); max-width: 34ch; line-height: 1.5; }
/* once the live dates have passed the timer removes itself and this block
   becomes a plain two-line statement */
.contact--flat .contact__lab { font-size: 11px; color: var(--copper); margin-bottom: 0; }

.scrollcue {
  margin-top: 2.6rem; font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ash-dim);
}

/* ==========================================================================
   reveal
   ========================================================================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rv.in { opacity: 1; transform: none; }

/* ==========================================================================
   editorial pieces
   ========================================================================== */
.rule { height: 1px; background: var(--edge); border: 0; margin: 0; }

.pull {
  font-family: var(--ff-body); font-weight: 600; color: var(--limb);
  font-size: clamp(1.35rem, 3vw, 2.05rem); line-height: 1.22; letter-spacing: -0.018em;
  border-left: 2px solid var(--ember); padding-left: clamp(1rem, 2.5vw, 1.8rem);
  margin: 2.6rem 0; max-width: 26ch;
}

/* "See more. Feel more. Receive more. Create more freely." */
.ladder { list-style: none; margin: 2.6rem 0 0; padding: 0; }
.ladder li {
  font-family: var(--ff-display); text-transform: uppercase; color: var(--limb);
  font-size: clamp(1.9rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: 0.01em;
  opacity: 0.28; transition: opacity 0.5s ease, color 0.5s ease;
}
.ladder li.lit { opacity: 1; }
.ladder li.lit:nth-child(4) { color: var(--copper); }

/* the emotion spectrum — every emotion carries life */
.spectrum { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.spectrum li {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 108;
  font-size: clamp(0.82rem, 1.5vw, 1rem); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ash-dim); border: 1px solid var(--edge); padding: 0.7rem 1.1rem;
  cursor: default; transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
  background: rgba(255, 255, 255, 0.012);
}
.spectrum li:hover, .spectrum li.on {
  color: var(--limb); border-color: var(--ember); transform: translateY(-3px);
  background: rgba(207, 74, 36, 0.14);
}

/* each chip glitches once, just after it lights, then the cycle carries on.
   Same language as the wordmark: violet trailing, ember leading, the chip torn
   across the middle. data-text is written by the JS from the chip's own words. */
.spectrum li { position: relative; }
.spectrum li::before, .spectrum li::after {
  content: attr(data-text);
  position: absolute; inset: 0; padding: inherit;
  opacity: 0; pointer-events: none; mix-blend-mode: screen; white-space: nowrap;
}
.spectrum li::before { color: var(--penum); }
.spectrum li::after  { color: var(--ember); }

.spectrum li.zap          { animation: zapBox 400ms steps(1, end) both; }
.spectrum li.zap::before  { animation: zapL 400ms steps(1, end) both; }
.spectrum li.zap::after   { animation: zapR 400ms steps(1, end) both; }

@keyframes zapBox {
  0%, 8%    { transform: translateY(-3px); clip-path: none; opacity: 1; }
  12%       { transform: translateY(-3px) translateX(-6px); clip-path: inset(0 0 56% 0); }
  20%       { transform: translateY(-3px) translateX(7px);  clip-path: inset(46% 0 0 0); }
  28%       { transform: translateY(-3px); clip-path: none; opacity: 0.25; }
  36%       { transform: translateY(-3px) translateX(-3px); opacity: 1; clip-path: inset(24% 0 30% 0); }
  46%       { transform: translateY(-3px); clip-path: none; opacity: 0.6; }
  54%, 100% { transform: translateY(-3px); clip-path: none; opacity: 1; }
}
@keyframes zapL {
  0%, 10%   { opacity: 0; }
  12%       { opacity: 0.9; transform: translateX(-9px); }
  20%       { opacity: 0.55; transform: translateX(6px); }
  28%       { opacity: 0.85; transform: translateX(-11px); }
  36%       { opacity: 0.6; transform: translateX(4px); }
  46%, 100% { opacity: 0; transform: none; }
}
@keyframes zapR {
  0%, 10%   { opacity: 0; }
  12%       { opacity: 0.85; transform: translateX(8px); }
  20%       { opacity: 0.5; transform: translateX(-7px); }
  28%       { opacity: 0.9; transform: translateX(10px); }
  36%       { opacity: 0.55; transform: translateX(-5px); }
  46%, 100% { opacity: 0; transform: none; }
}
.spectrum__note { margin-top: 1.6rem; font-size: 0.92rem; color: var(--ash-dim); }

/* a photograph sunk behind a whole section — dimmed to texture, drifting on
   scroll. The image is oversized top and bottom so the parallax travel never
   exposes an edge. */
.sectionbg { overflow: hidden; }
.sectionbg__img {
  position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none;
  object-fit: cover; object-position: var(--bgx, 50%) var(--bgy, 44%); z-index: 0;
  opacity: var(--bgo, 0.68); will-change: transform;
  transform: translate3d(0, var(--par, 0px), 0);
}

/* band variant: the picture is a horizontal strip across the middle of the
   section at its own aspect, not a full-bleed cover. Keeping the natural aspect
   is what preserves where the subject sits in the frame. */
.sectionbg--band .sectionbg__img {
  top: 50%; height: auto; object-fit: fill;
  /* --bgw can push the band past the viewport; the section clips it, which also
     takes the left and right edges out of view entirely */
  width: var(--bgw, 100%); left: calc((100% - var(--bgw, 100%)) / 2);
  transform: translate3d(0, calc(-50% + var(--par, 0px)), 0);
}
/* disc variant: a round plate anchored off the right edge at its own size,
   rather than covering the section. --bgw sizes it, --bgr slides it. */
.sectionbg--disc .sectionbg__img {
  left: auto; right: var(--bgr, -7%); top: 50%;
  width: var(--bgw, 58%); height: auto; object-fit: fill;
  transform: translate3d(0, calc(-50% + var(--par, 0px)), 0);
}
.sectionbg--disc::before {
  background:
    linear-gradient(90deg, rgba(8,6,14,0.72) 0%, rgba(8,6,14,0.44) 40%, rgba(8,6,14,0.06) 66%,
                          transparent 100%),
    linear-gradient(180deg, rgba(8,6,14,0.5) 0%, transparent 26%, transparent 74%, rgba(8,6,14,0.5) 100%);
}

.sectionbg--band::before {
  background:
    linear-gradient(90deg, rgba(8,6,14,0.9) 0%, rgba(8,6,14,0.74) 34%, rgba(8,6,14,0.3) 54%,
                          rgba(8,6,14,0.04) 72%, rgba(8,6,14,0.24) 100%),
    linear-gradient(180deg, var(--void) 0%, rgba(8,6,14,0.18) 24%, rgba(8,6,14,0.26) 74%, var(--void) 100%);
}
.sectionbg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,6,14,0.96) 0%, rgba(8,6,14,0.9) 34%, rgba(8,6,14,0.42) 56%,
                          rgba(8,6,14,0.06) 76%, rgba(8,6,14,0.2) 100%),
    linear-gradient(180deg, var(--void) 0%, rgba(8,6,14,0.16) 22%, rgba(8,6,14,0.2) 76%, var(--void) 100%);
}

/* the centred variant: the type sits over the middle of the picture, so the
   scrim pools there instead of down one side */
.sectionbg--centre { --bgo: 0.82; }
.sectionbg--centre::before {
  background:
    radial-gradient(62% 86% at 50% 50%, rgba(8,6,14,0.82) 0%, rgba(8,6,14,0.46) 44%,
                    rgba(8,6,14,0.1) 76%, transparent 100%),
    linear-gradient(180deg, var(--void) 0%, rgba(8,6,14,0.2) 22%,
                    rgba(8,6,14,0.28) 74%, var(--void) 100%);
}

/* a photograph running the full measure, scrimmed top and bottom so the
   sections above and below bleed into it rather than butting against it */
.bleed { position: relative; margin: clamp(2.6rem, 6vw, 4.4rem) 0 0; overflow: hidden; }
.bleed img { width: 100%; height: auto; }
.bleed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(8,6,14,0.62) 0%, rgba(8,6,14,0.08) 34%,
              rgba(8,6,14,0.14) 62%, rgba(8,6,14,0.7) 100%);
}
.bleed figcaption {
  position: absolute; left: 0; bottom: 0.9rem; z-index: 2;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash);
}

/* portrait moments */
.figure { position: relative; }

/* hung slightly off-square, and it leans toward the pointer. The rotation lives
   in a custom property so the JS can write only the tilt and never fight it. */
.tilt {
  --tiltx: 0deg; --tilty: 0deg; --tiltz: 1;
  transform: perspective(1100px) rotate(3.4deg) rotateX(var(--tiltx)) rotateY(var(--tilty)) scale(var(--tiltz));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.tilt img { box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55); }
.tilt.is-live { transition: transform 0.12s linear; }

/* the band leans by rotating its picture inside the clip, scaled just enough to
   keep the corners covered — rotating the figure itself would expose them */
.tiltimg { --tiltx: 0deg; --tilty: 0deg; --tiltz: 1; }
.tiltimg > img {
  transform: perspective(1400px) rotate(1.5deg)
             rotateX(calc(var(--tiltx) * 0.5)) rotateY(calc(var(--tilty) * 0.5))
             scale(calc(var(--tiltz) * 1.07));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.tiltimg.is-live > img { transition: transform 0.14s linear; }

/* ---- a portrait that glitches out of existence and back --------------------
   Same language as the wordmark: violet trails behind, ember leads, the frame
   itself torn into slices. The offsets are custom properties so the JS can
   reseed them before every burst and no two are alike. */
.glitchpic { position: relative; isolation: isolate; --gx1: -10px; --gx2: 8px; --gx3: -5px;
             --gy1: 12%; --gy2: 58%; --gy3: 34%; --gy4: 22%; }
.glitchpic > img { position: relative; z-index: 1; }
.glitchpic__l, .glitchpic__r {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  mix-blend-mode: screen;
  background-image: linear-gradient(var(--tint), var(--tint)), var(--src);
  background-size: cover, cover; background-position: center, center;
  background-repeat: no-repeat, no-repeat; background-blend-mode: multiply;
  /* two of these portraits are cut out, so the tinted copy is masked by the
     source's own alpha — otherwise the tint floods the transparent area and
     the glitch flashes a solid rectangle */
  -webkit-mask-image: var(--src); mask-image: var(--src);
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.glitchpic__l { --tint: rgba(122, 106, 255, 0.95); }
.glitchpic__r { --tint: rgba(233, 92, 46, 0.95); }

/* the url has to be declared here, not inline in the HTML: a url() inside a
   custom property resolves against the stylesheet that USES it, so an inline
   `images/...` was being looked up under /css/ */
.glitchpic--born  .glitchpic__l, .glitchpic--born  .glitchpic__r { --src: url('../images/cortnie-born.webp'); }

/* the flash: every few bursts the glitch resolves into something else entirely
   for a few frames. It sits above the tinted copies, so when it is up it fully
   replaces the picture rather than blending with it. */
.glitchpic__flash {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background-image: var(--flash); background-size: cover;
  background-position: center; background-repeat: no-repeat;
}
.glitchpic--born  .glitchpic__flash { --flash: url('../images/ultrasound.webp'); }
.glitchpic--close .glitchpic__flash { --flash: url('../images/source-being.webp'); }
.glitchpic.gl.gf .glitchpic__flash { animation: gFlash var(--gdur) steps(1, end) var(--gskip) both; }

/* the visible windows line up with the frames where gBase has dipped the
   photograph out, so the cut lands on a beat instead of over the top of it */
/* the quick variant: six brief stabs instead of four held ones, for a swap that
   reads as flickering between two states rather than cutting to one */
.glitchpic--quick.gl.gf .glitchpic__flash { animation-name: gFlashQ; }
@keyframes gFlashQ {
  0%, 5%    { opacity: 0; }
  6%        { opacity: 1; clip-path: none; }
  9%        { opacity: 0; }
  14%       { opacity: 0.95; clip-path: inset(var(--gy1) 0 var(--gy2) 0); }
  17%       { opacity: 0; }
  26%       { opacity: 1; clip-path: none; transform: translateX(calc(var(--gx1) * 0.35)); }
  30%       { opacity: 0; }
  41%       { opacity: 0.9; clip-path: inset(var(--gy3) 0 var(--gy4) 0); transform: none; }
  44%       { opacity: 0; }
  55%       { opacity: 1; clip-path: none; }
  59%       { opacity: 0; }
  70%       { opacity: 0.55; transform: translateX(calc(var(--gx2) * 0.3)); }
  73%, 100% { opacity: 0; }
}

@keyframes gFlash {
  0%, 8%    { opacity: 0; }
  9%        { opacity: 1; clip-path: none; transform: translateX(calc(var(--gx1) * 0.4)); }
  15%       { opacity: 0; }
  21%       { opacity: 0.9; clip-path: inset(var(--gy3) 0 var(--gy4) 0); transform: none; }
  29%       { opacity: 0; }
  37%       { opacity: 1; clip-path: none; transform: translateX(calc(var(--gx2) * 0.3)); }
  46%       { opacity: 0; }
  57%       { opacity: 0.55; clip-path: inset(var(--gy1) 0 var(--gy2) 0); transform: none; }
  63%, 100% { opacity: 0; }
}
.glitchpic--alive .glitchpic__l, .glitchpic--alive .glitchpic__r { --src: url('../images/cortnie-alive.webp'); }
.glitchpic--close .glitchpic__l, .glitchpic--close .glitchpic__r { --src: url('../images/cortnie-close.webp'); }
.glitchpic--truth .glitchpic__l, .glitchpic--truth .glitchpic__r { --src: url('../images/cortnie-truth.webp'); }
.glitchpic--note  .glitchpic__l, .glitchpic--note  .glitchpic__r { --src: url('../images/cortnie-note.webp'); }

/* every burst gets its own length and its own entry point into the beat map:
   --gskip is a negative delay, so the animation starts partway in. One keyframe
   set, but no two images ever open on the same frame. */
.glitchpic { --gdur: 520ms; --gskip: 0ms; }
.glitchpic.gl > img          { animation: gBase var(--gdur) steps(1, end) var(--gskip) both; }
.glitchpic.gl .glitchpic__l  { animation: gL var(--gdur) steps(1, end) var(--gskip) both; }
.glitchpic.gl .glitchpic__r  { animation: gR var(--gdur) steps(1, end) var(--gskip) both; }

@keyframes gBase {
  0%, 7%    { opacity: 1; transform: none; clip-path: none; filter: none; }
  9%        { opacity: 0.10; transform: translateX(var(--gx1)); clip-path: inset(var(--gy1) 0 var(--gy2) 0); }
  15%       { opacity: 1; transform: translateX(var(--gx2)); clip-path: inset(var(--gy3) 0 var(--gy4) 0); }
  21%       { opacity: 0.32; transform: none; clip-path: none; filter: brightness(1.7) contrast(1.35); }
  29%       { opacity: 1; transform: translateX(var(--gx3)); clip-path: inset(var(--gy2) 0 var(--gy1) 0); }
  37%       { opacity: 0.04; transform: none; clip-path: none; }
  44%       { opacity: 1; filter: none; }
  57%       { opacity: 0.45; transform: translateX(var(--gx1)); clip-path: inset(var(--gy4) 0 var(--gy3) 0); }
  64%, 100% { opacity: 1; transform: none; clip-path: none; filter: none; }
}
@keyframes gL {
  0%, 8%    { opacity: 0; }
  9%        { opacity: 0.85; transform: translateX(calc(var(--gx1) * 2.2)); clip-path: inset(var(--gy1) 0 var(--gy2) 0); }
  15%       { opacity: 0.5;  transform: translateX(calc(var(--gx2) * -1.6)); clip-path: inset(var(--gy3) 0 var(--gy4) 0); }
  21%       { opacity: 0.9;  transform: translateX(calc(var(--gx3) * 2.6)); clip-path: none; }
  37%       { opacity: 0.7;  transform: translateX(calc(var(--gx1) * 1.4)); }
  44%       { opacity: 0; }
  57%       { opacity: 0.6;  transform: translateX(calc(var(--gx2) * -2)); clip-path: inset(var(--gy4) 0 var(--gy3) 0); }
  64%, 100% { opacity: 0; }
}
@keyframes gR {
  0%, 8%    { opacity: 0; }
  9%        { opacity: 0.8;  transform: translateX(calc(var(--gx1) * -2.4)); clip-path: inset(var(--gy2) 0 var(--gy1) 0); }
  15%       { opacity: 0.55; transform: translateX(calc(var(--gx2) * 1.8)); clip-path: inset(var(--gy4) 0 var(--gy3) 0); }
  21%       { opacity: 0.85; transform: translateX(calc(var(--gx3) * -2.8)); clip-path: none; }
  37%       { opacity: 0.65; transform: translateX(calc(var(--gx1) * -1.6)); }
  44%       { opacity: 0; }
  57%       { opacity: 0.55; transform: translateX(calc(var(--gx2) * 2.2)); clip-path: inset(var(--gy3) 0 var(--gy4) 0); }
  64%, 100% { opacity: 0; }
}

/* the room shot pushes in and finds Cortnie mid-face. The origin is her, not
   the frame centre, so the scale does the panning for free. */
.zoomto { overflow: hidden; }
.zoomto img {
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 1.05s cubic-bezier(0.22, 0.68, 0.16, 1);
  will-change: transform;
}
.zoomto:hover img, .zoomto:focus-within img { transform: scale(1.85); }
.figure img { width: 100%; height: auto; }
.figure figcaption {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ash-dim); margin-top: 0.9rem;
}
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--narrow { grid-template-columns: 1.05fr 1fr; }

/* maximum eclipse — the darkest surface, the brightest sliver */
.max { text-align: center; }
.max .shout { font-size: clamp(2.6rem, 9.5vw, 7.4rem); }
/* Cortnie, cut out and looking straight at the reader. She sits where the moon
   used to, so the copper bloom that lit the disc now lights her. */
.max__face {
  width: min(330px, 68vw); margin: 0 auto clamp(1.4rem, 3.5vw, 2.4rem);
  position: relative;
}
.max__face::before {
  content: ""; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 128%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(207,74,36,0.42) 0%, rgba(207,74,36,0.14) 44%, transparent 70%);
}
.max__face img { position: relative; z-index: 1; width: 100%; height: auto; }
.max__pct {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash-dim); margin-top: 2rem;
}

/* ==========================================================================
   the three phases — Presence, Play, Participation
   ========================================================================== */
.phases { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.phasebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.phasebtn {
  background: var(--void); border: 0; cursor: pointer; padding: 1.5rem 1.1rem 1.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  color: var(--ash-dim); font-family: var(--ff-wide);
  font-variation-settings: 'wght' 400, 'wdth' 118; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.3s, color 0.3s;
}
.phasebtn:hover { background: rgba(207, 74, 36, 0.07); color: var(--ash); }
.phasebtn[aria-selected="true"] { background: rgba(207, 74, 36, 0.13); color: var(--limb); }
.phasebtn__disc {
  width: 46px; height: 46px; border-radius: 50%; position: relative; overflow: hidden;
  background: url('../images/moon-disc.webp') center/115% no-repeat; flex: none;
}
.phasebtn__disc::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0a0610 62%, rgba(10, 6, 16, 0) 66%);
  transform: translateX(var(--cover, -70%)); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.phasebtn:nth-child(1) .phasebtn__disc::after { --cover: -74%; }
.phasebtn:nth-child(2) .phasebtn__disc::after { --cover: -42%; }
.phasebtn:nth-child(3) .phasebtn__disc::after { --cover: -12%; }
.phasebtn__n { display: block; font-variation-settings: 'wght' 300, 'wdth' 125; font-size: 9px; color: var(--penum); letter-spacing: 0.26em; }

.phasepanel { border: 1px solid var(--edge); border-top: 0; padding: clamp(1.8rem, 4.5vw, 3.2rem); background: rgba(255, 255, 255, 0.015); }
.phasepanel[hidden] { display: none; }
.phasepanel__grid {
  display: grid; grid-template-columns: 0.62fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start;
}
.phasepanel__when {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--copper); margin-bottom: 1rem;
}
.phasepanel h3 { font-family: var(--ff-display); text-transform: uppercase; font-weight: 400;
                 font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 0.96; margin-bottom: 1.2rem; letter-spacing: 0.01em; }

/* ==========================================================================
   schedule
   ========================================================================== */
.sched { margin-top: clamp(2.4rem, 5vw, 3.4rem); border-top: 1px solid var(--edge); }
.slot {
  display: grid; grid-template-columns: 190px 1fr; gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.5rem, 3.4vw, 2.3rem) 0; border-bottom: 1px solid var(--edge);
}
.slot__when {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.slot__when b { display: block; font-variation-settings: 'wght' 500, 'wdth' 100;
                font-size: 1.25rem; color: var(--limb); letter-spacing: 0.03em; margin-top: 0.35rem; }
.slot h3 { margin-bottom: 0.5rem; }
.slot p { margin: 0; font-size: 0.96rem; }
.sched__note { margin-top: 1.8rem; font-size: 0.94rem; color: var(--ash-dim); max-width: 60ch; }

/* ==========================================================================
   investment — the brightest surface on the page. Full moon.
   ========================================================================== */
.invest { position: relative; overflow: hidden; }
.invest__tex {
  position: absolute; inset: 0; z-index: 0;
  background: url('../images/glitter.webp') center/cover; opacity: 0.34;
}
.invest::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(78% 62% at 26% 40%, rgba(8,6,14,0.9) 0%, rgba(8,6,14,0.34) 68%, transparent 100%),
    linear-gradient(180deg, rgba(8,6,14,0.9) 0%, rgba(8,6,14,0.62) 44%, rgba(8,6,14,0.92) 100%);
}
.price {
  font-family: var(--ff-display); font-size: clamp(4.2rem, 15vw, 10rem); line-height: 0.84;
  color: var(--limb); letter-spacing: 0.005em; margin: 0;
}
.price small {
  display: block; font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.32em; color: var(--copper); margin-top: 1rem;
}
.includes { list-style: none; margin: 2.2rem 0 0; padding: 0; max-width: 46ch; }
.includes li { position: relative; padding: 0.75rem 0 0.75rem 1.9rem; border-bottom: 1px solid rgba(255, 246, 228, 0.1); font-size: 0.98rem; }
.includes li::before { content: ""; position: absolute; left: 0; top: 1.4rem; width: 9px; height: 9px; border-radius: 50%;
                       background: var(--copper); box-shadow: 0 0 12px rgba(239, 131, 64, 0.8); }
.members {
  margin-top: 2.6rem; border: 1px solid rgba(255, 246, 228, 0.2); padding: 1.5rem 1.6rem;
  background: rgba(8, 6, 14, 0.5); max-width: 58ch;
}
.members p { font-size: 0.96rem; }
.members__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1rem; }
.members__links a {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--edge); padding-bottom: 0.25rem;
}
.members__links a:hover { border-bottom-color: var(--copper); }

/* ---------- note from Cortnie ---------- */
.note {
  border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.014);
  padding: clamp(1.8rem, 4.5vw, 3.4rem);
  display: grid; grid-template-columns: 0.62fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center; max-width: 1000px; margin: 0 auto;
}
/* she is cut out and dissolving, so she gets her own light rather than a frame */
.note__her { position: relative; margin: 0; align-self: end; }
.note__her::before {
  content: ""; position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: 120%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(207,74,36,0.3) 0%, rgba(207,74,36,0.1) 46%, transparent 72%);
}
.note__her img { position: relative; z-index: 1; width: 100%; height: auto; }
.note__body { min-width: 0; }
.note .sig {
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 125;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper); margin-top: 2rem;
}

/* ---------- close ---------- */
.close { text-align: center; }
.close .altered { font-size: clamp(2.8rem, 11vw, 8.4rem); }
/* the hero versions of these are capped in width so they clear the photograph;
   in the centred close that cap has to be centred too, or the box hangs left */
.close .hero__tag, .close .hero__facts { margin-left: auto; margin-right: auto; }
.close .hero__tag { max-width: 46ch; }
.close__lines p {
  font-family: var(--ff-body); font-weight: 500; color: var(--limb);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.4; margin: 0 0 0.5em;
}

footer { padding: 3.4rem 0 4.5rem; border-top: 1px solid var(--edge); }
.foot {
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; align-items: center; justify-content: space-between;
  font-family: var(--ff-wide); font-variation-settings: 'wght' 300, 'wdth' 118;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash-dim);
}
.foot a { color: var(--ash-dim); text-decoration: none; }
.foot a:hover { color: var(--copper); }

/* ---------- sticky CTA ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(8, 6, 14, 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--edge);
  padding: 0.7rem var(--gut); transform: translateY(110%); transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.2, 1);
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}
.sticky.on { transform: none; }
.sticky__l { font-family: var(--ff-wide); font-variation-settings: 'wght' 400, 'wdth' 118;
             font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash-dim); }
.sticky__l b { color: var(--limb); font-weight: 500; }

/* ---------- earthshine cursor ---------- */
.earthshine {
  position: fixed; z-index: 3; width: 460px; height: 460px; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(circle, rgba(239, 131, 64, 0.13) 0%, rgba(207, 74, 36, 0.06) 38%, transparent 66%);
  mix-blend-mode: screen; will-change: transform;
}
.earthshine.on { opacity: 1; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 900px) {
  .split, .split--narrow { grid-template-columns: 1fr; gap: 2.2rem; }
  .note { grid-template-columns: 1fr; gap: 1.6rem; }
  /* the disc is a texture on a phone, not a subject — pull it in and down */
  .sectionbg--disc .sectionbg__img { width: 128%; right: -14%; opacity: 0.62; }
  /* she is a full-body cut-out, so on a phone she is capped hard or she eats
     most of a screen before the note itself starts */
  .note__her { max-width: 210px; margin: 0 auto; }
  .slot { grid-template-columns: 1fr; gap: 0.8rem; }
  .phasebar { grid-template-columns: 1fr; }
  .phasebtn { flex-direction: row; justify-content: flex-start; gap: 1.1rem; padding: 1.1rem 1.2rem; }
  .phasebtn__disc { width: 34px; height: 34px; }
  /* a narrow viewport makes a deep arc read as a hole rather than a shadow,
     so the whole set flattens and widens on phones */
  .arc     { --arc-w: 150%; --arc-h: 54px; --arc-x: 50%; }
  .arc--a  { --arc-w: 175%; --arc-h: 42px; --arc-x: 34%; }
  .arc--b  { --arc-w: 150%; --arc-h: 62px; --arc-x: 64%; }
  .arc--c  { --arc-w: 132%; --arc-h: 82px; --arc-x: 44%; }
  .arc--max{ --arc-w: 118%; --arc-h: 104px; --arc-x: 50%; }
  .arc--d  { --arc-w: 152%; --arc-h: 68px; --arc-x: 70%; }
  .arc--e  { --arc-w: 186%; --arc-h: 38px; --arc-x: 36%; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .nav__meta--long { display: none; }
  .hero { min-height: calc(92svh - var(--nav-h)); }
  .hero__bg { object-position: 56% 0%; }
  /* on a phone the plate has nowhere to sit beside the type, so it takes the
     top band and the ground goes dark under everything that has to be read */
  .hero::after {
    background: linear-gradient(180deg, rgba(8,6,14,0.5) 0%, rgba(8,6,14,0.16) 12%,
                rgba(8,6,14,0.55) 26%, rgba(8,6,14,0.88) 40%, rgba(8,6,14,0.97) 56%,
                var(--void) 100%);
  }
  .pull { margin: 2rem 0; }
  .hero__facts { color: #b6abcb; gap: 0.35rem 1.2rem; }
  .earthshine { display: none; }
  .sticky { padding: 0.6rem 1rem; }
  .sticky__l { display: none; }
  .sticky .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}