/* ==========================================================================
   RAHA New Energy site stylesheet
   Palette  ink #06100D · fg #E8EFE9 · green #9BD46A · gold #F2B826 · cyan #5FC3D6
   Type     Inter Tight (ui) · Instrument Serif (accent italic) · IBM Plex Mono (micro)
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #06100d;
  --ink-raised: #08140f;
  --fg: #e8efe9;
  --green: #9bd46a;
  --gold: #f2b826;
  --cyan: #5fc3d6;
  --deep: #1c6b8c;

  --line: rgba(232, 239, 233, 0.13);
  --line-soft: rgba(232, 239, 233, 0.08);
  --line-mid: rgba(232, 239, 233, 0.16);
  --line-strong: rgba(232, 239, 233, 0.24);

  --fg-80: rgba(232, 239, 233, 0.8);
  --fg-70: rgba(232, 239, 233, 0.72);
  --fg-60: rgba(232, 239, 233, 0.6);
  --fg-55: rgba(232, 239, 233, 0.55);
  --fg-45: rgba(232, 239, 233, 0.45);
  --fg-40: rgba(232, 239, 233, 0.4);
  --fg-35: rgba(232, 239, 233, 0.35);

  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: clamp(20px, 3vw, 44px);
  --sec-y: clamp(60px, 7vw, 120px);
  --maxw: 1400px;
  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--green);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
a:hover {
  color: var(--fg);
}

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

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

::selection {
  background: var(--green);
  color: var(--ink);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gut);
  top: -100px;
  z-index: 200;
  padding: 14px 22px;
  background: var(--green);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: top 0.2s var(--ease);
}
.skip:focus {
  top: 14px;
  color: var(--ink);
}

/* ------------------------------------------------------------------ motion */
@keyframes gridpan {
  to {
    background-position: 60px 60px;
  }
}
@keyframes orb {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, -6%, 0) scale(1.15);
  }
}
@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
@keyframes railFlow {
  to {
    background-position: -180px 0;
  }
}
@keyframes tick {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes glowline {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@keyframes drawerIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Scroll reveals only hide content when scripting is actually available,
   without the `js` class (JS blocked, failed to load, or an old browser) the
   page renders fully visible instead of a wall of invisible sections. */
.js [data-r] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-r].in {
  opacity: 1;
  transform: none;
}

/* The ambient field of grid lines behind every page. */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(rgba(155, 212, 106, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 212, 106, 0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridpan 26s linear infinite;
}

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(24px);
  animation: orb 20s ease-in-out infinite;
}

/* --------------------------------------------------------------- primitives */
.page {
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}

.sec {
  position: relative;
  z-index: 1;
  padding: var(--sec-y) var(--gut);
}
.sec--tight-top {
  padding-top: 0;
}
.sec--tight-bottom {
  padding-bottom: 0;
}
/* full-bleed section whose inner block re-applies the gutter itself */
.sec--bleed {
  padding-left: 0;
  padding-right: 0;
}
.wrap--pad {
  padding: 0 var(--gut);
}

.rel {
  position: relative;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--green);
  text-transform: uppercase;
}
.eyebrow--cyan {
  color: var(--cyan);
}
.eyebrow--gold {
  color: var(--gold);
}
.eyebrow--muted {
  color: var(--fg-45);
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(232, 239, 233, 0.42);
  text-transform: uppercase;
}

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* Hairline grid: 1px gaps rendered by the parent background showing through. */
.rail {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.rail--seam {
  border-top: none;
}
.rail > * {
  background-color: var(--ink);
}
ul.rail,
ol.rail,
dl.rail {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Hover tints layer *over* the ink background-color rather than replacing it,
   so the 1px grid colour underneath never bleeds through a hovered cell. */
.tint-green:hover,
.tint-green:focus-visible {
  background-image: linear-gradient(rgba(155, 212, 106, 0.06), rgba(155, 212, 106, 0.06));
}
.tint-cyan:hover,
.tint-cyan:focus-visible {
  background-image: linear-gradient(rgba(95, 195, 214, 0.07), rgba(95, 195, 214, 0.07));
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(232, 239, 233, 0.15);
}
.section-head h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -0.032em;
}
.section-head .serif {
  font-size: 21px;
  color: var(--fg-60);
}

.btn {
  display: inline-block;
  padding: 16px 30px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.btn--primary {
  background: var(--green);
  color: var(--ink);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}
.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-weight: 500;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--fg);
  color: var(--fg);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ header */
.hdr {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(6, 16, 13, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(232, 239, 233, 0.1);
}

.hdr-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--gold));
  box-shadow: 0 0 12px rgba(155, 212, 106, 0.7);
  transition: width 0.12s linear;
}

.hdr-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
  color: var(--fg);
}
.brand:hover {
  color: var(--fg);
}
/* The emblem was drawn for a white ground: its forest-green R sits at 2.61:1
   against --ink, which is what made the old mark read as a smudge. A disc gives
   that ground back inside the one curved shape this system already uses, so the
   artwork itself stays untouched rather than being filtered or recoloured.
   Replaces a brightness()/saturate() hack that clipped the gold sun toward lemon. */
.brand img,
.ftr-brand img {
  border-radius: 50%;
  background: #eef3ec;
  padding: 3px;
  object-fit: contain;
}
.brand img {
  width: 36px;
  height: 36px;
}
.brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.36em;
  color: var(--green);
  margin-top: 5px;
}

.navd {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.navlink {
  padding: 11px 15px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.navlink:hover,
.navlink:focus-visible {
  color: var(--green);
}
.navlink[aria-current="page"] {
  color: var(--green);
}
.navlink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 1px;
  background: var(--green);
}

.caret {
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
  transform: rotate(45deg);
  margin-top: -3px;
  flex: none;
}

.nav-cta {
  margin-left: 16px;
  padding: 12px 24px;
  border: 1px solid rgba(155, 212, 106, 0.55);
  color: var(--green);
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--green);
  color: var(--ink);
}

/* mega menu */
.mega-wrap {
  position: relative;
}
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  width: min(780px, 88vw);
  background: rgba(8, 20, 16, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(232, 239, 233, 0.14);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.mega-wrap.open .mega {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mega a {
  padding: 16px 18px;
  border: 1px solid transparent;
  color: var(--fg);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.mega a:hover,
.mega a:focus-visible {
  background: rgba(155, 212, 106, 0.09);
  border-color: rgba(155, 212, 106, 0.35);
  color: var(--fg);
}
.mega-num {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--green);
}
.mega-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.mega-body {
  display: block;
  font-size: 11.5px;
  color: rgba(232, 239, 233, 0.5);
  margin-top: 5px;
  line-height: 1.5;
}

/* burger + drawer */
.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(232, 239, 233, 0.2);
  padding: 0;
  flex: none;
}
.burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--fg);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer {
  display: none;
  background: rgba(6, 16, 13, 0.98);
  border-top: 1px solid rgba(232, 239, 233, 0.1);
  animation: drawerIn 0.3s var(--ease);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.drawer.open {
  display: block;
}
.drawer a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px var(--gut);
  border-top: 1px solid rgba(232, 239, 233, 0.1);
  color: var(--fg);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.drawer a:first-child {
  border-top: none;
}
.drawer a:hover,
.drawer a:focus-visible {
  color: var(--green);
}
.drawer a[aria-current="page"] {
  color: var(--green);
}
.drawer .num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--green);
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  z-index: 1;
  min-height: min(880px, 94vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 7vw, 110px) var(--gut) 0;
  overflow: hidden;
}
.hero-orb-a {
  top: -14%;
  right: -6%;
  width: min(760px, 72vw);
  height: min(760px, 72vw);
  background: radial-gradient(circle, rgba(155, 212, 106, 0.2), rgba(28, 107, 140, 0.14) 46%, transparent 68%);
}
.hero-orb-b {
  bottom: -24%;
  left: -12%;
  width: min(620px, 64vw);
  height: min(620px, 64vw);
  background: radial-gradient(circle, rgba(242, 184, 38, 0.16), transparent 66%);
  filter: blur(30px);
  animation-duration: 26s;
  animation-delay: 3s;
}

.hero-flag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}
.hero-flag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(155, 212, 106, 0.9);
  animation: pulseDot 2.4s ease-in-out infinite;
  flex: none;
}
.hero-flag span:last-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(232, 239, 233, 0.62);
}

.hero h1 {
  font-size: clamp(46px, 8.4vw, 132px);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.hero h1 span {
  display: block;
}
.hero h1 .grad {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--green), var(--gold) 62%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keep the descender of "gy" from being clipped by the gradient box */
  padding-bottom: 0.06em;
}

.hero-grid {
  margin-top: clamp(34px, 4vw, 58px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: end;
}
.hero-lede {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.62;
  color: rgba(232, 239, 233, 0.62);
  max-width: 50ch;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-rail {
  margin-top: clamp(44px, 5vw, 78px);
  border-top: 1px solid rgba(232, 239, 233, 0.12);
  border-bottom: 1px solid rgba(232, 239, 233, 0.12);
  position: relative;
  overflow: hidden;
}
.hero-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(155, 212, 106, 0.1), transparent);
  background-size: 180px 100%;
  animation: railFlow 5s linear infinite;
}
.hero-rail ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-rail li {
  flex: 1 1 150px;
  padding: 22px 20px;
  border-right: 1px solid rgba(232, 239, 233, 0.1);
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-60);
}
.hero-rail li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: tick 3s ease-in-out infinite;
  flex: none;
}
.hero-rail li:nth-child(2)::before {
  animation-delay: 0.4s;
}
.hero-rail li:nth-child(3)::before {
  animation-delay: 0.8s;
}
.hero-rail li:nth-child(4)::before {
  animation-delay: 1.2s;
}
.hero-rail li:nth-child(5)::before {
  animation-delay: 1.6s;
}

/* page heroes (inner routes) */
.phero {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 7vw, 110px) var(--gut) 0;
  overflow: hidden;
}
.phero h1 {
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.94;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.phero .eyebrow {
  display: block;
  margin-bottom: 26px;
}
.phero p {
  margin-top: 26px;
  max-width: 58ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--fg-60);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- energy flow */
.flow-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 38px;
}
.flow-head h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.flow {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(232, 239, 233, 0.045), rgba(232, 239, 233, 0.015));
  padding: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 44px);
  position: relative;
  overflow: hidden;
}
.flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 14px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155, 212, 106, 0.55), rgba(242, 184, 38, 0.55), transparent);
  animation: glowline 4s ease-in-out infinite;
}
.flow ol {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow li {
  flex: 1 1 100px;
  text-align: center;
}
/* Each node's colour arrives as inline custom properties, so the markup stays
   declarative and the stylesheet keeps one rule for all seven. */
.flow-node {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border: 1px solid var(--edge);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease);
}
.flow li:hover .flow-node {
  transform: translateY(-4px);
}
.flow-node svg {
  width: 26px;
  height: 26px;
  color: var(--ico);
  filter: drop-shadow(0 0 7px var(--glow));
}
.flow-label {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-80);
}
/* The spec line is what makes the path informative rather than decorative:
   it names the conversion stage, not just the box sitting at it. */
.flow-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-40);
}

/* ------------------------------------------------------------------- stats */
.pitch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
}
.pitch h2 {
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.pitch p {
  margin-top: 24px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--fg-60);
  max-width: 48ch;
  text-wrap: pretty;
}
.pitch .eyebrow {
  display: block;
  margin-bottom: 22px;
}

.stats {
  grid-template-columns: 1fr 1fr;
}
.stats > div {
  padding: 32px 28px;
}
.stat-n {
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.stat-n sup {
  font-size: 0.5em;
  color: var(--gold);
  vertical-align: baseline;
  top: 0;
}
.stat-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--fg-45);
  margin-top: 12px;
}

/* ----------------------------------------------------------------- pillars */
.pillars {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.pillar {
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  color: var(--fg);
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.pillar:hover,
.pillar:focus-visible {
  background-image: linear-gradient(rgba(155, 212, 106, 0.06), rgba(155, 212, 106, 0.06));
  color: var(--fg);
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(420px 260px at 50% 0%, var(--glow, transparent), transparent 70%);
  transition: opacity 0.5s var(--ease);
}
.pillar:hover::before,
.pillar:focus-visible::before {
  opacity: 1;
}
.pillar-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pillar-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dot, var(--green));
}
.pillar-badge {
  width: 34px;
  height: 34px;
  border: 1px solid var(--edge, var(--line-mid));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Was an 11px colour swatch; now a component icon in the pillar's accent, so the
   badge says what the vertical builds rather than just carrying its colour. */
.pillar-badge svg {
  width: 19px;
  height: 19px;
  color: var(--dot, var(--green));
  filter: drop-shadow(0 0 6px var(--glow2, transparent));
  transition: transform 0.4s var(--ease);
}
.pillar:hover .pillar-badge svg,
.pillar:focus-visible .pillar-badge svg {
  transform: scale(1.08);
}
.pillar h3 {
  position: relative;
  margin-top: 30px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.pillar p {
  position: relative;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-55);
}
.pillar-tags {
  position: relative;
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: rgba(232, 239, 233, 0.38);
  line-height: 2;
}

/* -------------------------------------------------------------- neuradrive */
.nd-band {
  border-top: 1px solid rgba(232, 239, 233, 0.1);
  border-bottom: 1px solid rgba(232, 239, 233, 0.1);
  background: linear-gradient(180deg, rgba(28, 107, 140, 0.1), rgba(6, 16, 13, 0) 60%);
}
.nd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.nd-head .eyebrow {
  display: block;
  margin-bottom: 22px;
}
.nd-head h2 {
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.94;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.nd-head p {
  margin-top: 24px;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--fg-60);
  text-wrap: pretty;
}
.nd-motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 38px);
  color: var(--fg-80);
}

.chain {
  margin-top: clamp(40px, 5vw, 68px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.chain li {
  flex: 1 1 118px;
  padding: 20px 12px;
  border: 1px solid rgba(232, 239, 233, 0.14);
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--fg-70);
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease);
}
.chain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.5;
}
.chain li:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(95, 195, 214, 0.08);
}

.chips {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 10px 18px;
  border: 1px solid rgba(232, 239, 233, 0.18);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(232, 239, 233, 0.78);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chips li:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ------------------------------------------------------------- value chain */
.value-intro {
  max-width: 58ch;
}
.value-intro .eyebrow {
  display: block;
  margin-bottom: 20px;
}
.value-intro h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.steps {
  margin-top: clamp(36px, 4vw, 58px);
}
.step {
  padding: 26px clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: 70px 1fr 1.2fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  transition: background 0.35s var(--ease);
}
.step:hover {
  background-image: linear-gradient(rgba(155, 212, 106, 0.05), rgba(155, 212, 106, 0.05));
}
.step .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--green);
}
.step .t {
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.step .b {
  font-size: 14px;
  line-height: 1.62;
  color: var(--fg-55);
}
.step--cyan:hover {
  background-image: linear-gradient(rgba(95, 195, 214, 0.06), rgba(95, 195, 214, 0.06));
}
.step--cyan .num {
  color: var(--cyan);
}

.value-out {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--fg-45);
}

/* ------------------------------------------------------------------- hvac */
.hvac {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.hvac-copy {
  padding: clamp(30px, 4vw, 58px);
  border-right: 1px solid rgba(232, 239, 233, 0.11);
  position: relative;
  overflow: hidden;
}
.hvac-copy .orb {
  top: -30%;
  right: -20%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(242, 184, 38, 0.16), transparent 68%);
  filter: blur(20px);
  animation-duration: 18s;
}
/* :not(.orb) keeps the orb out; it is a sibling div, and catching it here would override the
   `position: absolute` it needs, dropping 420px of empty flow above the copy. */
.hvac-copy > div:not(.orb) {
  position: relative;
}
.hvac-copy .eyebrow {
  display: block;
  margin-bottom: 20px;
}
.hvac-copy h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.hvac-copy > div > p {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(232, 239, 233, 0.58);
  max-width: 46ch;
  text-wrap: pretty;
}
.hvac-features {
  margin-top: 32px;
  gap: 1px;
  background: rgba(232, 239, 233, 0.12);
  border-color: rgba(232, 239, 233, 0.12);
}
.hvac-features li {
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--fg-70);
}
.hvac-features li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  box-shadow: 0 0 10px rgba(242, 184, 38, 0.8);
}

.hvac-spec {
  padding: clamp(30px, 4vw, 58px);
  background: rgba(232, 239, 233, 0.025);
}
.spec-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.spec-tab {
  padding: 10px 15px;
  border: 1px solid var(--line-mid);
  background: transparent;
  color: rgba(232, 239, 233, 0.65);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.spec-tab:hover {
  color: var(--fg);
}
.spec-tab[aria-selected="true"] {
  border-color: var(--green);
  background: rgba(155, 212, 106, 0.14);
  color: var(--green);
}
.spec-panel {
  border: 1px solid var(--line);
}
.spec-panel[hidden] {
  display: none;
}
.spec-panel dl {
  margin: 0;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.spec-row:last-child {
  border-bottom: none;
}
.spec-row dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-45);
}
.spec-row dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: var(--fg);
}
.spec-note {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-40);
  line-height: 1.9;
}

/* ----------------------------------------------------------------- markets */
.market-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.market-tile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: var(--fg);
  transition: background 0.4s var(--ease);
}
.market-tile:hover,
.market-tile:focus-visible {
  background-image: linear-gradient(rgba(155, 212, 106, 0.07), rgba(155, 212, 106, 0.07));
  color: var(--fg);
}
.mkt-name {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.market-tile .arrow {
  position: relative;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--fg-40);
  transition: color 0.3s var(--ease);
}
.market-tile:hover .arrow {
  color: var(--green);
}

/* Hatched placeholder used wherever photography will drop in later. */
.plate {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(232, 239, 233, 0.05) 0 7px, transparent 7px 16px);
}
.plate-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(232, 239, 233, 0.25);
  text-align: center;
  padding: 20px;
  line-height: 2;
}

/* -------------------------------------------------------------------- why */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(30px, 4vw, 76px);
}
.why-grid h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.why-grid .eyebrow {
  display: block;
  margin-bottom: 20px;
}
.heritage {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(95, 195, 214, 0.08), transparent);
}
.heritage .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.heritage p {
  margin-top: 15px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(232, 239, 233, 0.62);
  text-wrap: pretty;
}
.heritage strong {
  font-weight: 600;
  color: var(--fg);
}

.why-list {
  align-content: start;
}
.why-list li {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  transition: background 0.3s var(--ease);
}
.why-list li:hover {
  background-image: linear-gradient(rgba(155, 212, 106, 0.05), rgba(155, 212, 106, 0.05));
}
.why-list .num {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--green);
}
.why-list .t {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.why-list .b {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg-55);
}

/* ---------------------------------------------------------------- partners */
.ticker {
  overflow: hidden;
  padding: 36px 0;
  border-bottom: 1px solid rgba(232, 239, 233, 0.11);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 36s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-track > span {
  width: 220px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-right: 1px solid rgba(232, 239, 233, 0.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(232, 239, 233, 0.3);
}

/* ------------------------------------------------------- technology detail */
.tech-row {
  padding: clamp(28px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 56px);
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease);
  scroll-margin-top: 110px;
}
.tech-row:hover {
  background-image: linear-gradient(rgba(155, 212, 106, 0.04), rgba(155, 212, 106, 0.04));
}
.tech-row .lead {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tech-row .lead .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dot, var(--green));
}
.tech-row .lead .r {
  width: 30px;
  height: 1px;
  background: var(--dot, var(--green));
  opacity: 0.5;
}
.tech-row h2 {
  margin-top: 20px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.032em;
}
.tech-row > div > p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.68;
  color: rgba(232, 239, 233, 0.58);
  max-width: 42ch;
  text-wrap: pretty;
}
.kv {
  gap: 1px;
  background: rgba(232, 239, 233, 0.12);
  border-color: rgba(232, 239, 233, 0.12);
  align-content: start;
  margin: 0;
}
.kv > div {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.kv dt {
  font-size: 13.5px;
  color: rgba(232, 239, 233, 0.78);
}
.kv dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-45);
  text-align: right;
}

/* matrix table */
.matrix-scroll {
  border: 1px solid var(--line);
  border-top: none;
  overflow-x: auto;
}
.matrix {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.matrix th {
  padding: 15px 20px;
  background: rgba(232, 239, 233, 0.05);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: rgba(232, 239, 233, 0.5);
}
.matrix td {
  padding: 16px 20px;
  border-top: 1px solid var(--line-soft);
}
.matrix tbody tr {
  transition: background 0.3s var(--ease);
}
.matrix tbody tr:hover {
  background: rgba(155, 212, 106, 0.05);
}
.matrix .line {
  font-size: 14px;
  font-weight: 500;
  width: 34%;
}
.matrix .num {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-70);
}
.matrix .status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.matrix .status--live {
  color: var(--green);
}
.matrix .status--design {
  color: var(--gold);
}
.source-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-40);
}

/* ------------------------------------------------------- neuradrive detail */
.nd-hero h1 {
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.nd-hero-grid {
  margin-top: clamp(28px, 3vw, 46px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 60px);
  align-items: end;
}
.nd-hero-grid p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.66;
  color: var(--fg-60);
  text-wrap: pretty;
}
.nd-hero-grid .nd-motto {
  font-size: clamp(26px, 3vw, 44px);
  color: var(--cyan);
}

.caps {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.caps li {
  padding: 32px 28px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease);
}
.caps li:hover {
  background-image: linear-gradient(rgba(95, 195, 214, 0.06), rgba(95, 195, 214, 0.06));
}
.caps .badge {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(95, 195, 214, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.caps .badge i {
  width: 10px;
  height: 10px;
  background: var(--cyan);
  display: block;
  box-shadow: 0 0 12px rgba(95, 195, 214, 0.8);
}
.caps h3 {
  margin-top: 24px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.caps p {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg-55);
}

/* ---------------------------------------------------------- market detail */
.mkt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  transition: background 0.4s var(--ease);
  scroll-margin-top: 110px;
}
.mkt-row:hover {
  background-image: linear-gradient(rgba(155, 212, 106, 0.04), rgba(155, 212, 106, 0.04));
}
.mkt-plate {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-right: 1px solid rgba(232, 239, 233, 0.1);
}
/* The render is 21:9 and the plate is nearer 2:1, so cover crops the sides
   rather than letterboxing. Height is driven by the text column beside it. */
.mkt-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.4s var(--ease);
}
/* Sits the photography down into the palette instead of letting it glare off
   a near-black page; hover lifts it back to full strength. */
.mkt-plate img {
  opacity: 0.82;
}
.mkt-row:hover .mkt-plate img {
  opacity: 1;
  transform: scale(1.03);
}
.mkt-body {
  padding: clamp(26px, 3vw, 44px);
}
.mkt-body .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--green);
}
.mkt-body h2 {
  margin-top: 18px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mkt-body p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.66;
  color: rgba(232, 239, 233, 0.58);
  max-width: 46ch;
  text-wrap: pretty;
}
.mkt-tags {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.mkt-tags li {
  padding: 8px 14px;
  border: 1px solid var(--line-mid);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--fg-60);
}

/* -------------------------------------------------------------- storyboard */
.timeline {
  border: 1px solid var(--line);
  padding: 20px clamp(18px, 2.5vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 28px;
}
.timeline .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--fg-45);
  flex: none;
}
.timeline .bar {
  flex: 1 1 260px;
  height: 4px;
  background: rgba(232, 239, 233, 0.1);
  position: relative;
  overflow: hidden;
  min-width: 200px;
}
.timeline .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 34%;
  background: linear-gradient(90deg, var(--green), var(--gold));
}
.timeline .bar b {
  position: absolute;
  left: 34%;
  top: -4px;
  width: 2px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(242, 184, 38, 0.9);
}
.timeline .t {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-60);
  flex: none;
}

.frames {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.frame {
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease);
}
.frame:hover {
  background-image: linear-gradient(rgba(155, 212, 106, 0.04), rgba(155, 212, 106, 0.04));
}
.frame-plate {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 239, 233, 0.1);
  background: linear-gradient(150deg, var(--tint-a), var(--tint-b));
}
.frame-time {
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--fg-80);
  background: rgba(6, 16, 13, 0.6);
  padding: 5px 9px;
  z-index: 1;
}
.frame-plate .plate-label {
  font-size: 9.5px;
  color: var(--fg-55);
  padding: 24px;
}
.frame-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.frame-body .n {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--green);
}
.frame-body h3 {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.frame-body p {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg-55);
}
.frame-line {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(232, 239, 233, 0.75);
  min-height: 20px;
}

.film-specs {
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.film-specs > div {
  padding: 22px 26px;
}
.film-specs dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--fg-40);
}
.film-specs dd {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-80);
}

/* ----------------------------------------------------------------- contact */
.contact {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 34px) var(--gut) var(--sec-y);
  scroll-margin-top: 90px;
}
.contact-box {
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  overflow: hidden;
}
.contact-copy {
  padding: clamp(30px, 4vw, 60px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(155, 212, 106, 0.1), rgba(28, 107, 140, 0.1) 60%, transparent);
}
.contact-copy .orb {
  bottom: -30%;
  left: -16%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(155, 212, 106, 0.2), transparent 66%);
  filter: blur(26px);
  animation-duration: 22s;
}
/* :not(.orb) as on .hvac-copy above. the orb must stay absolute
   or it holds 440px of empty flow instead of bleeding in from the corner. */
.contact-copy > div:not(.orb) {
  position: relative;
}
.contact-copy .eyebrow {
  display: block;
  margin-bottom: 22px;
}
.contact-copy h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.038em;
  max-width: 13ch;
}
.contact-copy > div > p {
  margin-top: 22px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--fg-60);
  max-width: 40ch;
  text-wrap: pretty;
}
.contact-meta {
  margin-top: 40px;
}
.contact-meta > div {
  padding: 18px 22px;
}
.contact-meta dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--fg-40);
}
.contact-meta dd {
  margin: 7px 0 0;
  font-size: 15px;
}
/* Enquiry form switched off: the copy panel is the only cell in the box, so it
   spans full width and the rail runs as columns instead of stretched rows.
   Restoring the form partial makes this stop matching, no edit needed. */
.contact-copy:only-child .contact-meta {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.contact-form {
  padding: clamp(30px, 4vw, 60px);
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
}
.field > span,
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--fg-45);
  margin-bottom: 10px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-bottom: 1px solid rgba(232, 239, 233, 0.2);
  background: transparent;
  font-size: 15px;
  color: var(--fg);
  outline: none;
  border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.field textarea {
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(232, 239, 233, 0.3);
}
.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--green);
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-bottom-color: #e2725b;
}

.interests {
  border: none;
  padding: 0;
  margin: 34px 0 0;
  min-inline-size: 0;
}
.interests legend {
  padding: 0;
}
.interest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.interest {
  padding: 10px 16px;
  border: 1px solid rgba(232, 239, 233, 0.18);
  background: transparent;
  color: var(--fg-70);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.interest:hover {
  color: var(--fg);
}
.interest[aria-pressed="true"] {
  border-color: var(--green);
  background: rgba(155, 212, 106, 0.14);
  color: var(--green);
}

.field--block {
  display: block;
  margin-top: 34px;
}

.submit {
  margin-top: 36px;
  width: 100%;
  padding: 18px 24px;
  border: none;
  background: var(--green);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.submit:hover:not(:disabled) {
  background: var(--gold);
  transform: translateY(-2px);
}
.submit:disabled {
  opacity: 0.55;
  cursor: progress;
}
.fineprint {
  margin-top: 15px;
  font-size: 11.5px;
  color: var(--fg-40);
  line-height: 1.6;
}
.form-error {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 114, 91, 0.5);
  background: rgba(226, 114, 91, 0.08);
  font-size: 13px;
  line-height: 1.6;
  color: #f3c3b7;
}
.form-error[hidden] {
  display: none;
}

.form-done {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.form-done[hidden] {
  display: none;
}
.form-done .check {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(155, 212, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(155, 212, 106, 0.1);
  flex: none;
}
.form-done .check i {
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
  margin-top: -4px;
  display: block;
}
.form-done h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.form-done p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-55);
  max-width: 42ch;
}
.form-done .btn--ghost {
  margin-top: 12px;
  align-self: flex-start;
  padding: 13px 24px;
  font-size: 13px;
  background: transparent;
}

/* ------------------------------------------------------------------ footer */
.ftr {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(232, 239, 233, 0.12);
  padding: clamp(48px, 5vw, 76px) var(--gut) 36px;
}
.ftr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 38px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(232, 239, 233, 0.12);
}
/* Footer lockup mirrors the header: emblem + the name as live text. The old
   full-logo raster put "RAHA / ENERGY" and a tagline on screen at 118px wide,
   where the tagline was sub-pixel and the wordmark hairlines vanished into the
   ink. As text the name sits at 16.5:1 and reflows on a phone.
   It also makes the source art's bad crop irrelevant: the chopped letter tops
   are exactly the region this discards. */
.ftr-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--fg);
}
.ftr-brand:hover {
  color: var(--fg);
}
.ftr-brand img {
  width: 46px;
  height: 46px;
}
.ftr-brand .brand-name {
  font-size: 19px;
}
.ftr-blurb {
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--fg-55);
  max-width: 30ch;
}
.ftr-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--fg-35);
  margin-bottom: 18px;
}
.ftr-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ftr-col a {
  color: var(--fg-70);
}
.ftr-col a:hover {
  color: var(--green);
}
.ftr-col li span {
  color: var(--fg-55);
}
.ftr-legal {
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--fg-35);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .navd {
    display: none;
  }
  .burger {
    display: flex;
  }
  .step {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .hidesm {
    display: none;
  }
}

@media (max-width: 900px) {
  .hvac-copy {
    border-right: none;
    border-bottom: 1px solid rgba(232, 239, 233, 0.11);
  }
  .mkt-plate {
    border-right: none;
    border-bottom: 1px solid rgba(232, 239, 233, 0.1);
  }
}

@media (max-width: 620px) {
  .stats {
    grid-template-columns: 1fr;
  }
  .hero-rail li {
    flex-basis: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(232, 239, 233, 0.1);
    padding: 16px 4px;
  }
  .hero-rail li:last-child {
    border-bottom: none;
  }
  /* Grid rather than flex: seven nodes over three columns leaves a widow, and a
     flex item would stretch to fill the row instead of lining up with the rest. */
  .flow ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .flow li:last-child {
    grid-column: 2;
  }
  .contact-form,
  .contact-copy,
  .hvac-copy,
  .hvac-spec {
    padding: 28px 22px;
  }
  /* The desktop rhythm reads as dead space on a phone, where the whole viewport
     is shorter than one section's padding pair. */
  :root {
    --sec-y: 46px;
  }
  .flow {
    padding: 26px 14px;
  }
  .flow ol {
    gap: 22px 10px;
  }
}

/* --------------------------------------------------- reduced motion / print */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-r] {
    opacity: 1;
    transform: none;
  }
  .bg-grid {
    animation: none;
  }
}

@media print {
  .hdr,
  .bg-grid,
  .orb,
  .ticker,
  .contact-form {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  /* The footer lockup is live text now, and its own colour rules are more
     specific than `body`, so they would print near-white on white paper. */
  .ftr-brand,
  .ftr-brand .brand-name,
  .ftr-brand .brand-sub {
    color: #000;
  }
  .brand img,
  .ftr-brand img {
    background: none;
    padding: 0;
  }
}