/* ════════════════════════════════════════════════════════════════════════
   site.css — energy.llc marketing site · foundation stylesheet (the law)
   ════════════════════════════════════════════════════════════════════════
   Brand DNA (V9.2): purple #7c3aed on canvas #FAFAFA · navy #1E1B4B dark
   emphasis · DM Mono numerals/kickers · electricity = light blue #60a5fa
   (light AND dark mode) · Inter 800-900 headlines, tracking -0.02em.
   Fonts are loaded by the page shell. Fragments scope their own styles;
   everything below is shared vocabulary only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ───────────────────────────────────────────────────────── */
:root {
  --e-purple:      #7c3aed;
  --e-purple-deep: #5b21b6;
  --e-violet:      #a78bfa;
  --e-lilac:       #c4b5fd;
  --e-pale:        #ddd6fe;
  --e-mist:        #ede9fe;
  --e-navy:        #1E1B4B;
  --e-navy-deep:   #0F0A2E;
  --e-canvas:      #FAFAFA;
  --e-ink:         #0A1628;
  --e-elec:        #60a5fa;   /* electricity — always this blue, both modes */
  --e-elec-soft:   #93c5fd;
  --e-gold:        #F59E0B;
  --e-grid:        #e2e8f0;
  --e-axis:        #64748b;
  --e-ease:        cubic-bezier(.22,.68,.31,1);
  --e-ease-out:    cubic-bezier(.16,1,.3,1);
  --e-sans:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --e-mono:        'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --e-nav-h:       64px;
}

/* ── 2 · Reset + base ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--e-nav-h) + 16px); /* anchors clear the glass nav */
  scrollbar-width: thin;
  scrollbar-color: var(--e-lilac) transparent;
}
body {
  font-family: var(--e-sans);
  background: var(--e-canvas);
  color: var(--e-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--e-pale); color: var(--e-purple-deep); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--e-lilac); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
:focus-visible { outline: 2px solid var(--e-purple); outline-offset: 3px; }

/* ── 3 · Type scale ───────────────────────────────────────────────────── */
.e-eyebrow {
  font-family: var(--e-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--e-purple); margin-bottom: 18px;
}
.e-eyebrow.on-dark, .e-dark .e-eyebrow { color: var(--e-violet); }
.e-h1 {
  font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.02; color: var(--e-navy);
}
.e-h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08; color: var(--e-navy);
}
.e-dark .e-h1, .e-dark .e-h2 { color: #fff; }
.e-h1 em, .e-h2 em { font-style: normal; color: var(--e-purple); } /* accent word */
.e-dark .e-h1 em, .e-dark .e-h2 em { color: var(--e-violet); }
.e-lead {
  font-size: 1.25rem; line-height: 1.65; font-weight: 500;
  color: #475569; max-width: 65ch; margin-top: 22px;
}
.e-dark .e-lead { color: #C7D2FE; }

/* ── 4 · Layout ───────────────────────────────────────────────────────── */
.e-wrap {
  max-width: 1160px; margin-inline: auto; width: 100%;
  padding-inline: clamp(20px, 4vw, 48px);
}
.e-section {
  position: relative; overflow: hidden;          /* hosts absolute art layers */
  padding-block: clamp(96px, 14vh, 170px);
}
.e-dark {
  background: linear-gradient(180deg, var(--e-navy-deep) 0%, var(--e-navy) 100%);
  color: #EDE9FE;
}
.e-light { background: var(--e-canvas); color: var(--e-ink); }

/* ── 5 · Buttons ──────────────────────────────────────────────────────── */
.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--e-mono); font-weight: 500; font-size: 14px; line-height: 15px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border-radius: 999px; padding: 16px 30px; cursor: pointer;
  transition: transform .35s var(--e-ease), box-shadow .35s var(--e-ease),
              background-color .35s var(--e-ease), color .35s var(--e-ease),
              border-color .35s var(--e-ease);
}
.e-btn.solid {
  background: var(--e-purple); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(124, 58, 237, .55);
}
.e-btn.solid:hover {
  transform: translateY(-2px);
  background: var(--e-purple-deep);
  box-shadow: 0 16px 34px -10px rgba(124, 58, 237, .65);
}
.e-btn.ghost { background: transparent; border: 1.5px solid currentColor; }
.e-btn.ghost:hover {
  transform: translateY(-2px);
  background: var(--e-purple); border-color: var(--e-purple); color: #fff;
}
.e-btn:active { transform: translateY(0); }
.e-btn:focus-visible { outline: 2px solid var(--e-purple); outline-offset: 3px; }

/* ── 6 · Fixed nav — glass bar ────────────────────────────────────────── */
.e-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--e-nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(20px, 4vw, 40px);
  background: rgba(15, 10, 46, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(167, 139, 250, .18);
}
.e-nav-brand {
  font-weight: 900; font-size: 16px; letter-spacing: -.005em;
  color: #fff; text-decoration: none;
}
.e-nav-brand i { font-style: normal; color: var(--e-violet); } /* the .LLC — violet reads on the dark glass nav */
.e-nav-right { display: flex; align-items: center; gap: 28px; }
.e-nav-links { display: flex; align-items: center; gap: 26px; }
.e-nav-links a {
  font-family: var(--e-mono); font-size: 13px; letter-spacing: .05em;
  color: rgba(221, 214, 254, .82); text-decoration: none;
  transition: color .3s ease;
}
.e-nav-links a:hover { color: #fff; }
.e-nav .e-btn { padding: 10px 20px; font-size: 12px; } /* CTA pill, always visible */
@media (max-width: 859.98px) {
  .e-nav-links { gap: 0; }
  .e-nav-links a:not(.keep-mobile) { display: none; } /* Landowners keeps its door on mobile */
}

/* ── 7 · Scroll progress — JS sets transform: scaleX(0→1) ─────────────── */
.e-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: 2px;
  background: linear-gradient(90deg, var(--e-violet), var(--e-purple));
  box-shadow: 0 0 10px rgba(124, 58, 237, .5);
  transform: scaleX(0); transform-origin: left center;
}

/* ── 8 · Reveal grammar — IO adds .in; delays stagger siblings ────────── */
.rv {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s var(--e-ease), transform .9s var(--e-ease);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .09s; } .rv.d2 { transition-delay: .18s; }
.rv.d3 { transition-delay: .27s; } .rv.d4 { transition-delay: .36s; }
.rv.d5 { transition-delay: .45s; } .rv.d6 { transition-delay: .54s; }
/* big-quote line reveal — wipe left → right */
.rv-line {
  display: block; clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--e-ease-out);
}
.rv-line.in { clip-path: inset(0 0 0 0); }

/* ── 9 · Stats — DM Mono numerals, the brand voice for numbers ────────── */
.e-stat {
  font-family: var(--e-mono); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.035em;
  line-height: 1; color: var(--e-navy);
}
.e-dark .e-stat { color: #fff; }
.e-stat .unit { font-size: .38em; color: var(--e-purple); letter-spacing: 0; }
.e-dark .e-stat .unit { color: var(--e-violet); }
.e-stat-label {
  font-family: var(--e-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--e-axis); margin-top: 10px;
}
.e-dark .e-stat-label { color: #A5B4FC; }
.e-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 64px);
}
@media (max-width: 719.98px) { .e-stats-row { grid-template-columns: 1fr; gap: 38px; } }

/* ── 10 · Chips — ISO / region badges ─────────────────────────────────── */
.e-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--e-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--e-purple-deep); border: 1px solid var(--e-lilac);
  border-radius: 999px; padding: 7px 15px; white-space: nowrap;
}
.e-chip.on-dark, .e-dark .e-chip {
  color: var(--e-pale); border-color: rgba(167, 139, 250, .45);
}

/* ── 11 · Team row — three names, generous air ────────────────────────── */
.e-team {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(44px, 9vw, 110px); text-align: center;
}
.e-team-name { font-family: var(--e-mono); font-weight: 500; font-size: 1.1rem; color: var(--e-navy); }
.e-dark .e-team-name { color: #fff; }
.e-team-role {
  font-family: var(--e-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--e-axis); margin-top: 7px;
}
.e-dark .e-team-role { color: #A5B4FC; }
@media (max-width: 519.98px) { .e-team { flex-direction: column; align-items: center; gap: 30px; } }

/* ── 12 · Shell appendix — page-level glue, nothing fragment-scoped ───── */
.e-nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.e-nav-logo { height: 34px; width: auto; display: block; }
@media (max-width: 520px) { .e-nav-logo { height: 27px; } }
.e-team-name, .e-team-role { display: block; }
.rv-line.dl1 { transition-delay: .14s; }
.rv-line.dl2 { transition-delay: .28s; }
.e-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.e-dare {
  font-family: var(--e-mono); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.01em;
  color: var(--e-navy); margin-top: clamp(44px, 7vh, 68px);
}
.e-btn.lg { padding: 19px 38px; font-size: 15px; }
.e-center { text-align: center; }
.e-center .e-chips, .e-center .e-team { justify-content: center; }
.e-mt-1 { margin-top: 28px; }
.e-mt-2 { margin-top: 48px; }
.e-mt-3 { margin-top: clamp(52px, 8vh, 84px); }
/* off-screen decoration skips render work (hero excluded — it's the LCP) */
.fx-art { content-visibility: auto; contain-intrinsic-size: auto 440px; }
.e-team-mail {
  display: block; margin-top: 10px;
  font-family: var(--e-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--e-violet); text-decoration: none;
  border-bottom: 1px solid rgba(167, 139, 250, .35);
  padding-bottom: 2px; width: fit-content; margin-inline: auto;
  transition: color .3s ease, border-color .3s ease;
}
.e-team-mail:hover { color: #fff; border-color: #fff; }

/* ── 13 · Reduced motion — stillness, not absence ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .rv, .rv-line { opacity: 1; transform: none; clip-path: none; transition: none; }
  .e-btn.solid:hover, .e-btn.ghost:hover { transform: none; }
}