/* ===================================================================
   ZONE GROUP ELECTRICAL & ENERGY
   -------------------------------------------------------------------
   DIRECTION OF FLOW: left to right, along conductors, in pulses.
   Every animation here obeys it — current travels right through the
   schematics, the AC trace dividers travel right, light sweeps across
   cards left to right, content rises into place from below. One
   circuit, not a pile of separate effects.

   PALETTE: warm and engineered. A near-black ground with a trace of
   olive in it, gold as the live conductor, orange as the second
   phase. Bright colour is reserved for what carries energy.
   =================================================================== */

/* ===================================================================
   DESIGN TOKENS — every colour in the site comes from here.
   Semantic names only; no hex values are repeated in components.
   =================================================================== */
:root {
  /* Mandated palette */
  --background:      #151209;
  --surface:         #211A0E;
  --primary:         #F2C14E;
  --secondary:       #F08A3E;
  --text:            #FFF5DD;

  /* Derived surfaces */
  --surface-raised:  #2A2113;
  --surface-sunken:  #1A1509;
  --foreground:      var(--text);

  /* Derived text tones — kept above 4.5:1 on --background */
  --text-muted:      rgba(255, 245, 221, 0.70);
  --text-dim:        rgba(255, 245, 221, 0.54);
  --text-faint:      rgba(255, 245, 221, 0.36);

  /* Hairlines and glass */
  --line:            rgba(255, 245, 221, 0.10);
  --line-soft:       rgba(255, 245, 221, 0.06);
  --line-live:       rgba(242, 193, 78, 0.38);
  --line-live-2:     rgba(240, 138, 62, 0.34);
  --glass:           rgba(255, 245, 221, 0.035);
  --glass-strong:    rgba(255, 245, 221, 0.06);

  /* Accent washes */
  --primary-wash:    rgba(242, 193, 78, 0.12);
  --secondary-wash:  rgba(240, 138, 62, 0.12);
  --shadow:          rgba(6, 4, 1, 0.62);

  /* The one gradient in the system: gold into orange, left to right */
  --current: linear-gradient(100deg, var(--primary), var(--secondary));

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* Layout */
  --shell: 1180px;
  --gutter: 24px;

  /* Scroll velocity, written by current.js. 0 = idle, 1 = under load. */
  --load: 0;

  /* Easing: settle overshoots slightly, ease is the long even pull */
  --settle: cubic-bezier(0.22, 1.24, 0.36, 1);
  --ease:   cubic-bezier(0.65, 0, 0.20, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--background);
  font-family: var(--font-mono);
  font-size: 13px;
}
.skiplink:focus { left: 12px; }

/* ===================================================================
   AMBIENT FIELD
   Three warm masses on unequal cycles (43s–67s) so the composite
   never visibly repeats, over a fine circuit grid. Deliberately dim:
   the brief asks for engineered, not glowing.
   =================================================================== */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.field__mass {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.field__mass--a {
  width: 44vw; height: 44vw;
  left: -10vw; top: 6vh;
  background: radial-gradient(circle at 45% 45%, var(--primary), transparent 68%);
  opacity: 0.13;
  animation: drift-a 53s ease-in-out infinite;
}

.field__mass--b {
  width: 36vw; height: 36vw;
  left: 54vw; top: 20vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 66%);
  opacity: 0.11;
  animation: drift-b 67s ease-in-out infinite;
}

.field__mass--c {
  width: 30vw; height: 30vw;
  left: 20vw; top: 64vh;
  background: radial-gradient(circle at 50% 50%, var(--primary), transparent 64%);
  opacity: 0.08;
  animation: drift-c 43s ease-in-out infinite;
}

/* Each drifts RIGHT as it moves — the flow rule, applied to ambience */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(8vw, -7vh, 0) scale(1.14); }
  70%      { transform: translate3d(14vw, 4vh, 0) scale(0.92); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(7vw, -11vh, 0) scale(0.88); }
  72%      { transform: translate3d(-2vw, 6vh, 0) scale(1.18); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, -9vh, 0) scale(1.2); }
}

/* Circuit grid: a technical substrate, not a decoration. Fades out
   toward the bottom so it never competes with content. */
.field__trace {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}

.field__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pointer wake — desktop only, switched on by current.js */
.wake {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 138, 62, 0.10), transparent 62%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: transform;
}
.wake.is-live { opacity: 1; }

/* ===================================================================
   SIGNATURE II — the charge gauge
   A cell down the right edge that fills as you scroll, with current
   climbing through it and a crest that overshoots when you stop.
   =================================================================== */
.gauge {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}

.gauge__cap {
  width: 12px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--line-live);
}

.gauge__cell {
  position: relative;
  width: 11px;
  height: 172px;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}

.gauge__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

/* The crest sits on the fill and brightens the top edge */
.gauge__crest {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--text);
  opacity: 0.85;
}

/* Cell divisions — reads as a battery, not a thermometer */
.gauge__ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 33px,
    var(--line) 33px 34px
  );
}

/* A charge pulse climbing the cell: the one place the gauge moves
   on its own, slow enough to read as steady supply. */
.gauge__pulse {
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(255, 245, 221, 0.22), transparent);
  animation: climb 3.8s var(--ease) infinite;
}

@keyframes climb {
  0%   { transform: translateY(180px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

.gauge__readout {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

@media (max-width: 1080px) { .gauge { display: none; } }

/* ===================================================================
   RISING — content comes up into place as it enters the viewport
   =================================================================== */
.js .rise {
  opacity: 0;
  transform: translate3d(-10px, 26px, 0);
}

.js .rise.is-live {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--ease),
    transform 1s var(--settle);
}

.rise[data-delay="1"].is-live { transition-delay: 0.06s; }
.rise[data-delay="2"].is-live { transition-delay: 0.12s; }
.rise[data-delay="3"].is-live { transition-delay: 0.18s; }
.rise[data-delay="4"].is-live { transition-delay: 0.24s; }
.rise[data-delay="5"].is-live { transition-delay: 0.30s; }

/* ===================================================================
   WORDMARK
   The dot from the Zone Real Estate mark becomes a terminal node
   that takes a charge — the family resemblance, re-engineered.
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.wordmark__node {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 2px;
  background: var(--current);
  transform: rotate(45deg);
  animation: charge 4.2s var(--ease) infinite;
}

.wordmark__node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 3px;
  border: 1px solid var(--line-live);
  opacity: 0;
  animation: charge-ring 4.2s var(--ease) infinite;
}

@keyframes charge {
  0%, 58%  { transform: rotate(45deg) scale(1); }
  66%      { transform: rotate(45deg) scale(1.28); }
  74%      { transform: rotate(45deg) scale(0.94); }
  82%, 100%{ transform: rotate(45deg) scale(1); }
}

@keyframes charge-ring {
  0%, 58% { opacity: 0; transform: scale(0.7); }
  68%     { opacity: 0.55; }
  100%    { opacity: 0; transform: scale(1.35); }
}

.wordmark__text { display: flex; flex-direction: column; line-height: 1.05; }

.wordmark__zone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
}

.wordmark__sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-top: 3px;
}

.wordmark--small .wordmark__zone { font-size: 15px; }

/* ===================================================================
   TOP BAR
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(21, 18, 9, 0.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* A live conductor along the bottom edge of the bar. Brightness
   tracks scroll load, so the header reads as energised under use. */
.topbar__current {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--current);
  opacity: calc(0.14 + var(--load) * 0.55);
  transition: opacity 0.5s var(--ease);
}

.nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.nav a {
  position: relative;
  padding: 4px 0;
  transition: color 0.4s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--current);
  transform: scaleX(0);
  transform-origin: left;   /* the flow rule, at 12px */
  transition: transform 0.5s var(--ease);
}

.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

.topbar__actions { display: flex; align-items: center; gap: 12px; }

.callbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 10px;
  color: var(--background);
  background: var(--current);
  background-size: 180% 100%;
  overflow: hidden;
  transition: background-position 0.8s var(--ease), transform 0.5s var(--settle), box-shadow 0.5s ease;
  box-shadow: 0 6px 20px rgba(242, 193, 78, 0.14);
}

.callbtn:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(242, 193, 78, 0.24);
}

.callbtn__icon { display: grid; place-items: center; }
.callbtn__text { display: flex; flex-direction: column; line-height: 1.15; }

.callbtn__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.callbtn__number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

/* Burger — three bus bars that fold into a cross */
.burger {
  display: none;
  width: 40px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
  position: relative;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.45s var(--settle), opacity 0.3s ease;
}

.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 18px; }
.burger span:nth-child(3) { top: 23px; }

.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
  .burger { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 var(--gutter);
    background: rgba(21, 18, 9, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease);
  }

  .nav.is-open { max-height: 340px; }

  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a::after { display: none; }
}

@media (max-width: 620px) {
  .callbtn__label { display: none; }
  .callbtn { padding: 9px 14px; gap: 8px; }
  .callbtn__number { font-size: 12.5px; }
  .wordmark__sub { font-size: 7.5px; letter-spacing: 0.16em; }
  .wordmark__zone { font-size: 15px; }
  :root { --gutter: 18px; }
}

@media (max-width: 400px) {
  .callbtn__text { display: none; }
  .callbtn { padding: 10px 12px; }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.5s var(--settle), border-color 0.45s ease,
              color 0.45s ease, box-shadow 0.5s ease, background-color 0.45s ease;
}

.btn span { position: relative; z-index: 2; }

.btn--primary {
  color: var(--background);
  background: var(--current);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(242, 193, 78, 0.15);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(242, 193, 78, 0.26);
}

/* A charge sweeping across the face, left to right */
.btn__sweep {
  position: absolute;
  left: -35%;
  top: 0; bottom: 0;
  width: 35%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 221, 0.42), transparent);
  transition: left 0.85s var(--ease);
}
.btn--primary:hover .btn__sweep { left: 115%; }

.btn--ghost {
  color: var(--text);
  border-color: var(--line);
  background: var(--glass);
}

.btn--ghost:hover {
  border-color: var(--line-live-2);
  color: var(--text);
  transform: translateY(-2px);
}

.btn__arrow {
  position: relative;
  z-index: 2;
  color: var(--secondary);
  transition: transform 0.5s var(--settle);
}
.btn--ghost:hover .btn__arrow { transform: translateX(4px); }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: 84px 0 178px;
}

.hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 940px) {
  .hero { padding: 56px 0 150px; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
}


.hero__eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
  margin: 0 0 22px;
}

/* Status LED — the smallest possible statement of "system live" */
.hero__led {
  flex: none;
  margin-top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.5);
  animation: led 3.2s var(--ease) infinite;
}

@keyframes led {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.45); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(242, 193, 78, 0); opacity: 0.65; }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
}

.hero__line { display: block; }

/* Current running through the letterforms of the second line */
.hero__line--live {
  background: linear-gradient(100deg,
    var(--text) 0%, var(--primary) 30%, var(--secondary) 48%,
    var(--primary) 62%, var(--text) 86%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: conduct 15s linear infinite;
}

@keyframes conduct {
  0%   { background-position: 0% 50%; }
  100% { background-position: 320% 50%; }
}

.hero__tagline {
  max-width: 520px;
  color: var(--text-muted);
  font-size: 16.5px;
  margin: 0 0 34px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 32px;
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}

.fact { margin: 0; }

.fact dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary);
}

@media (max-width: 560px) {
  .hero__ctas { display: grid; grid-template-columns: 1fr; }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.16em; }
}

/* ===================================================================
   SIGNATURE I — the live schematic
   =================================================================== */
.schematic {
  position: relative;
  margin: 0;
  padding: 18px 18px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px var(--shadow);
  justify-self: end;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
}

/* Hairline of live conductor across the top of the panel */
.schematic::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--current);
  opacity: 0.55;
}

.schematic__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.schematic__title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.schematic__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
}

.schematic__led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: led 3.2s var(--ease) infinite;
}

.schematic__svg { width: 100%; height: auto; display: block; }

/* --- diagram parts, shared by both schematics --------------------- */
.wire__base {
  stroke: var(--line);
  stroke-width: 1.6;
}

/* The pulse itself: a short dash travelling the length of the path.
   Direction is always source → load, which on screen is rightward. */
.wire__live {
  stroke-width: 1.9;
  stroke-dasharray: 26 340;
  stroke-dashoffset: 366;
  animation: conduct-path 3.6s linear infinite;
}

@keyframes conduct-path {
  to { stroke-dashoffset: 0; }
}

.wire__live--s1 { stroke: var(--secondary); animation-duration: 3.4s; animation-delay: 0.0s; }
.wire__live--s2 { stroke: var(--primary);   animation-duration: 2.9s; animation-delay: 0.5s; }
.wire__live--s3 { stroke: var(--secondary); animation-duration: 3.9s; animation-delay: 1.1s; }
.wire__live--o1 { stroke: var(--primary);   animation-duration: 3.1s; animation-delay: 0.8s; }
.wire__live--o2 { stroke: var(--secondary); animation-duration: 3.6s; animation-delay: 1.6s; }

.wire__live--m1 { stroke: var(--primary);   animation-duration: 3.6s; animation-delay: 0.0s; }
.wire__live--m2 { stroke: var(--secondary); animation-duration: 3.0s; animation-delay: 0.6s; }
.wire__live--m3 { stroke: var(--secondary); animation-duration: 4.1s; animation-delay: 1.2s; }
.wire__live--m4 { stroke: var(--primary);   animation-duration: 3.4s; animation-delay: 0.4s; }
.wire__live--m5 { stroke: var(--primary);   animation-duration: 3.8s; animation-delay: 1.0s; }
.wire__live--m6 { stroke: var(--secondary); animation-duration: 3.2s; animation-delay: 1.6s; }
.wire__live--m7 { stroke: var(--secondary); animation-duration: 4.4s; animation-delay: 2.1s; }

.junction { fill: var(--primary); opacity: 0.75; }

.node__box {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1;
}

.node--primary .node__box   { stroke: var(--line-live); }
.node--secondary .node__box { stroke: var(--line-live-2); }

.node--hub .node__box {
  fill: var(--surface-raised);
  stroke: var(--line-live);
  stroke-width: 1.4;
}

.node__icon { stroke: var(--primary); }
.node--secondary .node__icon { stroke: var(--secondary); }
.node__icon .cellbar { stroke: var(--secondary); opacity: 0.85; }

.node__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--text);
  text-anchor: middle;
}

.node__label--hub {
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--primary);
}

.node__value {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--text-dim);
  text-anchor: middle;
}

.node__value--sm { font-size: 9px; }

/* Hero nodes carry an icon on the left, so their text sits right */
.schematic__svg .node__label,
.schematic__svg .node__value { text-anchor: start; }
.schematic__svg .node--hub .node__label,
.schematic__svg .node--hub .node__value { text-anchor: middle; }

.breakers rect {
  fill: var(--surface-sunken);
  stroke: var(--line-live);
  stroke-width: 0.9;
}

.breakers rect:nth-child(2) { fill: var(--primary-wash); }
.breakers rect:nth-child(4) { fill: var(--secondary-wash); }

.schematic__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px 2px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}

/* The direction of flow, stated once in words */
.schematic__flow {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
  background-size: 220% 100%;
  animation: flow-line 4.5s linear infinite;
}

@keyframes flow-line {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

@media (max-width: 940px) {
  .schematic { justify-self: start; max-width: 100%; }
}

/* ===================================================================
   AC TRACE DIVIDERS
   Two waves travelling right at different speeds. Vertical scale is
   driven by --load, so scrolling harder raises the amplitude — the
   trace of a system under load.
   =================================================================== */
.divider {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  pointer-events: none;
  overflow: hidden;
}

.divider--footer {
  position: relative;
  height: 130px;
  z-index: 2;
  transform: scaleY(-1);
}

/* Load lives on the container, not the animated paths: a custom
   property changing inside a running keyframe isn't reliably picked
   up, but a transform on the parent is. */
.divider__svg {
  display: block;
  width: 200%;
  height: 100%;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 + var(--load) * 0.45));
  transition: transform 0.55s var(--settle);
  overflow: visible;
}

.divider__fill {
  fill: var(--surface);
  opacity: 0.5;
  animation: travel 24s linear infinite;
}

.divider__back {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.6;
  opacity: 0.26;
  animation: travel 24s linear infinite;
}

/* Same direction, different speed. Parallax, not opposition. */
.divider__front {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 1.6;
  opacity: 0.30;
  animation: travel 16s linear infinite;
}

/* -50% is exactly two of the four wave periods, so the loop seams
   are invisible. Travel is rightward: the flow rule, at section joins. */
@keyframes travel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================================================================
   SECTION SHELL
   =================================================================== */
.section {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 96px var(--gutter);
}

/* Framed sections sit on a slightly raised plate, which gives the
   page a rhythm of open / enclosed without changing the palette. */
.section--framed {
  max-width: calc(var(--shell) + 80px);
  margin: 0 auto;
}

.section--framed::before {
  content: "";
  position: absolute;
  inset: 34px 8px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(33, 26, 14, 0.72), rgba(33, 26, 14, 0.28));
  border: 1px solid var(--line-soft);
  z-index: -1;
}

@media (max-width: 720px) {
  .section { padding: 72px var(--gutter); }
  .section--framed::before { inset: 20px 0; border-radius: 18px; }
}

.sechead { max-width: 720px; margin: 0 0 52px; }
.sechead--tight { margin-bottom: 28px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary);
  margin: 0 0 16px;
}

/* Every eyebrow carries a short conductor before it — the label is
   fed by the same line as everything else. */
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--current);
}

.sectitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}

.sectitle--sm { font-size: clamp(23px, 2.8vw, 30px); }

.secintro {
  color: var(--text-muted);
  font-size: 16px;
  margin: 0;
  max-width: 660px;
}

/* ===================================================================
   SERVICE CARDS
   Corners stay square-ish and the borders stay hairline: this is an
   engineering practice, not a lifestyle brand. The movement is a
   current running along the top edge on hover.
   =================================================================== */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 20px;
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform 0.6s var(--settle), border-color 0.45s ease,
              box-shadow 0.5s ease, background-color 0.45s ease;
}

.svc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--current);
  transform: scaleX(0);
  transform-origin: left;   /* current enters from the left */
  transition: transform 0.7s var(--ease);
}

.svc:hover,
.svc:focus-visible {
  transform: translateY(-5px);
  border-color: var(--line-live);
  background: var(--surface-raised);
  box-shadow: 0 22px 48px var(--shadow);
}

.svc:hover::before,
.svc:focus-visible::before { transform: scaleX(1); }

.svc--secondary:hover { border-color: var(--line-live-2); }

.svc__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-wash);
  border: 1px solid var(--line-live);
  color: var(--primary);
  transition: background-color 0.45s ease, transform 0.6s var(--settle);
}

.svc--secondary .svc__icon {
  background: var(--secondary-wash);
  border-color: var(--line-live-2);
  color: var(--secondary);
}

.svc:hover .svc__icon { transform: translateY(-2px); }

.svc__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

.svc__summary {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  transition: color 0.4s ease;
}

.svc__more::after {
  content: "→";
  transition: transform 0.5s var(--settle);
}

.svc:hover .svc__more { color: var(--primary); }
.svc:hover .svc__more::after { transform: translateX(4px); }
.svc--secondary:hover .svc__more { color: var(--secondary); }

/* ===================================================================
   INTEGRATED SYSTEM MAP
   =================================================================== */
.sysmap {
  padding: 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px var(--shadow);
}

.sysmap__svg { width: 100%; height: auto; display: block; }

/* Below this width the diagram's own labels would fall under ~9px,
   so the same information is shown as a stacked list instead. */
.sysstack { display: none; }

@media (max-width: 760px) {
  .sysmap { padding: 18px; }
  .sysmap__svg { display: none; }

  .sysstack {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sysstack__group {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
  }

  .sysstack__group--hub {
    background: var(--surface-raised);
    border-color: var(--line-live);
  }

  .sysstack__cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    margin-bottom: 10px;
  }

  .sysstack__items { display: flex; flex-wrap: wrap; gap: 8px; }

  .sysstack__items b {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text);
  }

  .sysstack__group--hub .sysstack__items b {
    color: var(--primary);
    border-color: var(--line-live);
  }

  .sysstack__note {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
  }

  /* The connector between groups is a live conductor, flowing down */
  .sysstack__link {
    height: 34px;
    margin-left: 30px;
    width: 1.5px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    background-size: 100% 220%;
    animation: flow-down 3.4s linear infinite;
    opacity: 0.6;
  }

  @keyframes flow-down {
    0%   { background-position: 0 -60%; }
    100% { background-position: 0 160%; }
  }
}

/* ===================================================================
   SOLUTIONS — alternating image and copy
   =================================================================== */
.solutions { display: grid; gap: 22px; }

.sol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.sol:hover { border-color: var(--line-live); box-shadow: 0 22px 52px var(--shadow); }

.sol__figure {
  position: relative;
  margin: 0;
  min-height: 300px;
  overflow: hidden;
  background: var(--surface-sunken);
}

.sol:nth-child(even) .sol__figure { order: 2; }

.sol__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.sol:hover .sol__img { transform: scale(1.04); }

/* Light refracting across the image, left to right */
.sol__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 34%, rgba(242, 193, 78, 0.16) 50%, transparent 66%);
  background-size: 260% 100%;
  background-position: 190% 0;
  transition: background-position 1.3s var(--ease);
  pointer-events: none;
}

.sol:hover .sol__sweep { background-position: -60% 0; }

.sol__body {
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.sol__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--secondary);
  margin: 0;
}

.sol__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.sol__text {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

.sol__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sol__stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.sol__stat-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary);
}

.sol__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  transition: border-color 0.45s ease, transform 0.5s var(--settle);
}

.sol__link::after { content: "→"; color: var(--secondary); transition: transform 0.5s var(--settle); }
.sol__link:hover { border-color: var(--line-live); transform: translateY(-2px); }
.sol__link:hover::after { transform: translateX(4px); }

@media (max-width: 840px) {
  .sol { grid-template-columns: 1fr; }
  .sol:nth-child(even) .sol__figure { order: 0; }
  .sol__figure { min-height: 220px; }
  .sol__body { padding: 28px 24px; }
}

/* ===================================================================
   MONITORING — a panelboard, not a dashboard app
   =================================================================== */
.monitor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 52px;
  align-items: center;
}

@media (max-width: 940px) {
  .monitor { grid-template-columns: 1fr; gap: 38px; }
}

.ticklist {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 11px;
}

.ticklist li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--text-muted);
}

/* Bullets are terminals on a bus */
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px; height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--current);
  opacity: 0.85;
}

.panelboard {
  padding: 24px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px var(--shadow);
}

.panelboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.panelboard__title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.panelboard__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
}

.panelboard__led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: led 3.2s var(--ease) infinite;
}

.panelboard__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 0;
}

@media (max-width: 420px) {
  .panelboard__metrics { grid-template-columns: 1fr; }
}

.metric__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.metric__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}

.metric__unit {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 4px;
}

.metric__bar {
  display: block;
  position: relative;
  height: 5px;
  margin-top: 11px;
  border-radius: 3px;
  background: var(--glass-strong);
  overflow: hidden;
}

/* Bars fill from the left when the panel comes into view */
.metric__level {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 3px;
  background: var(--primary);
  transition: width 1.5s var(--ease);
}

.metric--secondary .metric__level { background: var(--secondary); }

.panelboard__rows {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface-sunken);
}

.prow__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.prow__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}

.prow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}

.prow__dot--active { background: var(--secondary); animation: led 2.6s var(--ease) infinite; }
.prow__dot--ready  { background: var(--primary); }

.panelboard__note {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* ===================================================================
   REASONS
   =================================================================== */
/* Separate plates rather than a hairline mesh: nine items never
   divide evenly into every column count, and a mesh leaves visible
   empty cells at the breakpoints where they don't. */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}

.reason {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.45s ease, transform 0.6s var(--settle);
}

.reason:hover { border-color: var(--line-live); transform: translateY(-3px); }

/* Each plate is fed from the same conductor */
.reason::before {
  content: "";
  position: absolute;
  left: 24px; top: 0;
  width: 24px;
  height: 1.5px;
  background: var(--current);
  opacity: 0.75;
}

.reason__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.reason__text {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ===================================================================
   PROCESS
   Numbering is used here because the order genuinely matters —
   nothing is specified before the capacity is measured.
   =================================================================== */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px;
}

.step {
  position: relative;
  counter-increment: step;
  padding: 24px 22px 22px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.45s ease, transform 0.6s var(--settle);
}

.step:hover { border-color: var(--line-live); transform: translateY(-3px); }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid var(--line-live);
  background: var(--primary-wash);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--primary);
}

.step__num::before { content: counter(step, decimal-leading-zero); }

.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 7px;
  letter-spacing: -0.01em;
}

.step__text {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ===================================================================
   OBJECT CHIPS
   =================================================================== */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.chips li {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  transition: border-color 0.4s ease, color 0.4s ease;
}

.chips li:hover { border-color: var(--line-live); color: var(--text); }

/* ===================================================================
   QUOTE FORM
   =================================================================== */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

@media (max-width: 940px) {
  .quote { grid-template-columns: 1fr; gap: 40px; }
}

.quote__phone {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding: 15px 26px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: border-color 0.5s ease, transform 0.6s var(--settle);
}

.quote__phone:hover { border-color: var(--line-live); transform: translateY(-2px); }

.quote__phone-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.quote__phone-number {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--primary);
}

.formwrap {
  padding: 30px 30px 28px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 26px 64px var(--shadow);
}

@media (max-width: 560px) { .formwrap { padding: 22px 20px; } }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.fieldgrp { margin-bottom: 16px; }

.fieldgrp label,
.fieldset__legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--line-live);
  background: var(--background);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--secondary) 50%),
                    linear-gradient(135deg, var(--secondary) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.select option { background: var(--surface); color: var(--text); }

.fieldset {
  border: none;
  padding: 0;
  margin: 0 0 16px;
}

.picks { display: flex; flex-wrap: wrap; gap: 9px; }

/* Service picks are breakers: off, then switched on */
.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.pick__switch {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--text-faint);
  transition: background-color 0.4s ease, transform 0.5s var(--settle);
}

.pick:hover { border-color: var(--line-live-2); color: var(--text); }

.pick.is-on {
  border-color: var(--line-live);
  color: var(--text);
  background: var(--primary-wash);
}

.pick.is-on .pick__switch {
  background: var(--primary);
  transform: rotate(45deg) scale(1.1);
}

.picks__count {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Errors state what is wrong and what to do, in the interface's voice */
.err {
  display: none;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--secondary);
}

.fieldgrp.has-err .err,
.fieldset.has-err .err { display: block; }

.fieldgrp.has-err .input,
.fieldgrp.has-err .select,
.fieldgrp.has-err .textarea { border-color: var(--secondary); }

.form__submit {
  width: 100%;
  margin-top: 6px;
  border: none;
}

.form__privacy {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}

/* Success is a state change, not a popup */
.sent { text-align: center; padding: 12px 4px 6px; }

.sent__mark {
  width: 46px; height: 46px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-live);
  background: var(--primary-wash);
  color: var(--primary);
}

.sent__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 10px;
}

.sent__text {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.sent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ===================================================================
   DETAIL PANEL — powers on, powers down
   =================================================================== */
.detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.detail[hidden] { display: none; }

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 3, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.45s ease both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.detail__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 940px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(4, 3, 1, 0.75);
  animation: power-on 0.55s var(--settle) both;
}

/* Comes up the way a display does: contrast before geometry */
@keyframes power-on {
  0%   { opacity: 0; transform: translateY(24px) scale(0.97); filter: brightness(0.4); }
  60%  { opacity: 1; filter: brightness(1.04); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}

.detail__scroll {
  overflow-y: auto;
  max-height: min(88vh, 940px);
}

.detail__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(21, 18, 9, 0.82);
  color: var(--text);
  display: grid;
  place-items: center;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--settle);
}

.detail__close:hover {
  border-color: var(--line-live);
  color: var(--primary);
  transform: rotate(90deg);
}

.detail__figure { position: relative; margin: 0; }

.detail__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.detail__body { padding: 28px 32px 32px; }

@media (max-width: 560px) { .detail__body { padding: 22px 20px 28px; } }

.detail__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.detail__tag::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--current);
}

.detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.detail__headline {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--primary);
  margin: 0 0 20px;
}

.detail__text {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-muted);
  margin: 0 0 26px;
}

.detail__subhead {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin: 0 0 13px;
}

.detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 9px;
}

.detail__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text-muted);
}

.detail__list li::before {
  content: "";
  position: absolute;
  left: 1px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--current);
  opacity: 0.85;
}

.detail__objects {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 28px;
}

.detail__objects li {
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.detail__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 480px) { .detail__actions { grid-template-columns: 1fr; } }

.detail__note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin: 14px 0 0;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  padding: 10px var(--gutter) 56px;
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 36px;
  align-items: start;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 840px) {
  .footer__inner { grid-template-columns: 1fr; gap: 26px; }
}

.footer__note {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 380px;
  margin: 16px 0 0;
}

.footer__nav {
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.footer__nav a { transition: color 0.4s ease; }
.footer__nav a:hover { color: var(--primary); }

.footer__contact { display: grid; gap: 10px; justify-items: start; }

.footer__phone {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--text);
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: border-color 0.5s ease, transform 0.6s var(--settle);
}

.footer__phone:hover { border-color: var(--line-live); transform: translateY(-2px); }

.footer__mail {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  transition: color 0.4s ease;
}

.footer__mail:hover { color: var(--secondary); }

.footer__legal {
  max-width: var(--shell);
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

/* ===================================================================
   REDUCED MOTION
   Everything ambient stops. Content stays legible and in place —
   nothing is left stuck invisible or half-drawn.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .js .rise { opacity: 1; transform: none; }
  .wake { display: none; }

  /* Conductors are drawn solid rather than pulsing, so the diagrams
     still read as connected systems. */
  .wire__live { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.7; }
  .schematic__flow { background: var(--current); }
  .metric__level { transition: none; }
}