/* ============================================================
   INTEGRITY INSPECTION GROUP
   Design system + scroll-driven home
   ------------------------------------------------------------
   Palette derives from the company mark: a flame and a water
   droplet split around a length of pipe. Flame = gas / anomaly /
   heat. Current = steel, data, verified. Everything else is the
   inside of the pipe: near-black with a cold blue cast.
   ============================================================ */

:root {
  /* Surface */
  --void:      #07090C;
  --steel:     #0E141B;
  --slate:     #161E27;
  --seam:      #232E3A;

  /* Ink */
  --ice:       #EAF0F6;
  --haze:      #93A6B8;

  /* Accent — the two halves of the mark */
  --flame:     #FF5A1F;
  --flame-lo:  #C93A0C;
  --current:   #3AA0FF;
  --current-lo:#1467B8;

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Rhythm */
  --header-h: 84px;
  --gut: 5vw;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; }
p { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: var(--flame); color: #fff; }

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

/* ============================================================
   SHARED TYPE ATOMS
   ============================================================ */

/* Eyebrow. On this site the eyebrow carries a governing code or a
   real classification — never a decorative 01/02/03 counter. */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.72vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--current);
  margin-bottom: 1.6rem;
}

/* Signature detail: the thermal rule. A hairline that runs flame →
   current, ticked like a gauge face. Same split as the logo. */
.tick-rule {
  flex: 0 0 auto;
  width: 42px;
  height: 7px;
  background:
    repeating-linear-gradient(90deg,
      currentColor 0 1px, transparent 1px 6px) bottom left / 100% 4px no-repeat,
    linear-gradient(90deg, var(--flame), var(--current)) top left / 100% 2px no-repeat;
  opacity: 0.9;
}

.section-heading {
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 112;
  color: var(--ice);
  margin-bottom: 1.6rem;
  text-wrap: balance;
}

.section-body {
  font-size: clamp(0.98rem, 1.1vw, 1.16rem);
  line-height: 1.7;
  color: var(--haze);
  max-width: 46ch;
}

.section-note {
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6F8296;
}

/* Inline link with a drawn rule that extends on hover */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
  transition: color 0.3s var(--ease);
}
.text-link i {
  display: block;
  width: 42px;
  height: 1px;
  background: var(--flame);
  transition: width 0.4s var(--ease);
}
.text-link:hover { color: var(--flame); }
.text-link:hover i { width: 74px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-primary {
  background: var(--flame);
  color: #0B0B0B;
  border-color: var(--flame);
}
.btn-primary:hover { background: #FF7442; border-color: #FF7442; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--ice);
  border-color: var(--seam);
}
.btn-ghost:hover { border-color: var(--current); color: var(--current); transform: translateY(-2px); }

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--void);
  display: grid;
  place-items: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { width: min(360px, 78vw); text-align: left; }
/* The mark is a wide lockup (~2.9:1) — give it room so it reads on the loader */
.loader-mark { width: 210px; margin-bottom: 1.8rem; opacity: 0.95; }
.loader-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  font-variation-settings: 'wdth' 108;
  margin-bottom: 1.4rem;
}
.loader-track { height: 2px; background: var(--seam); overflow: hidden; }
#loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--flame), var(--current));
  transition: width 0.25s linear;
}
.loader-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5F7185;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--gut);
  background: linear-gradient(180deg, rgba(7,9,12,0.92) 0%, rgba(7,9,12,0.55) 60%, transparent 100%);
  backdrop-filter: blur(6px);
}
.brand img { height: 40px; width: auto; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  margin-left: auto;
}
.nav-desktop a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--haze);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--flame);
  transition: width 0.35s var(--ease);
}
.nav-desktop a:hover { color: var(--ice); }
.nav-desktop a:hover::after { width: 100%; }
.nav-desktop a.is-current { color: var(--ice); }
.nav-desktop a.is-current::after { width: 100%; background: var(--current); }
.nav-slash { color: var(--seam); margin: 0 0.15em; }

/* Stationing readout — scroll depth expressed the way a pipeline
   survey expresses distance along the run. */
.station {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-left: 2rem;
  border-left: 1px solid var(--seam);
  font-family: var(--font-mono);
}
.station-label {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5F7185;
}
.station-value {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--current);
  font-variant-numeric: tabular-nums;
  min-width: 5.4ch;
}

.header-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--seam);
}
.header-rule i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--flame), var(--current));
}

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--seam);
  cursor: pointer;
  position: relative;
}
.menu-toggle span {
  position: absolute;
  left: 13px;
  width: 18px; height: 1px;
  background: var(--ice);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 25px; }
.menu-toggle.open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--void);
  display: flex;
  align-items: center;
  padding: 0 var(--gut);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.65s var(--ease);
  pointer-events: none;
}
.mobile-menu.open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--seam);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.02em;
  color: var(--ice);
}
.mobile-menu a em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--flame);
}

/* ============================================================
   HERO
   ============================================================ */
/* The hero owns 240vh of runway. Its inner panel sticks while the
   canvas irises open behind it, so the page opens at the mouth of
   the pipe before it goes in. */
.hero-scroll {
  position: relative;
  z-index: 40;
  height: 240vh;
}
.hero-standalone {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--header-h) var(--gut) 0;
  background: var(--void);
  overflow: hidden;
  will-change: opacity, transform;
}
/* Faint cold wash so the hero reads as the mouth of the pipe */
.hero-standalone::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 78% 46%, rgba(58,160,255,0.10) 0%, transparent 62%),
    radial-gradient(72% 58% at 8% 92%, rgba(255,90,31,0.07) 0%, transparent 66%);
}
.hero-inner { position: relative; z-index: 2; max-width: 1080px; }
.hero-label { color: var(--haze); }

.hero-heading {
  font-size: clamp(3.6rem, 12.5vw, 12rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-variation-settings: 'wdth' 118;
  margin: 0 0 2.4rem;
}
.hero-heading .word { display: block; overflow: hidden; }
.hero-heading .word b { display: block; font-weight: 900; }
/* The third word carries the payoff — the only tinted word on the page's
   largest type. */
.hero-heading .word:nth-child(3) b {
  background: linear-gradient(96deg, var(--flame) 8%, var(--current) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tagline {
  font-size: clamp(1rem, 1.25vw, 1.24rem);
  line-height: 1.65;
  color: var(--haze);
  max-width: 56ch;
  margin-bottom: 2.8rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.scroll-cue {
  position: absolute;
  left: var(--gut);
  bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5F7185;
  z-index: 2;
}
.cue-line {
  display: block;
  width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--flame), transparent);
  transform-origin: left;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* ============================================================
   CANVAS
   ============================================================ */
.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}
#canvas { width: 100%; height: 100%; display: block; }
/* Feather the frame edge into the page so the padded border never shows */
.canvas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(128% 92% at 50% 50%, transparent 52%, rgba(7,9,12,0.72) 100%),
    linear-gradient(180deg, rgba(7,9,12,0.85) 0%, transparent 22%, transparent 76%, rgba(7,9,12,0.9) 100%);
}

#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13vw;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 118;
  color: transparent;
  -webkit-text-stroke: 1px rgba(147,166,184,0.26);
}
.marquee-text i { font-style: normal; color: rgba(255,90,31,0.5); -webkit-text-stroke: 0; }
.marquee-codes { top: 62%; }
.marquee-codes .marquee-text {
  font-size: 9vw;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 1px rgba(58,160,255,0.22);
}

/* ============================================================
   SCROLL SECTIONS
   ============================================================ */
#scroll-container {
  position: relative;
  z-index: 10;
  height: 900vh;
}
.scroll-section {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  visibility: hidden;
}
.scroll-section.is-active { visibility: visible; }
.scroll-section.is-active a,
.scroll-section.is-active button { pointer-events: auto; }

.align-left  { padding-left: var(--gut); padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: var(--gut); }
.align-left .section-inner,
.align-right .section-inner { max-width: 40vw; }

/* ---------- Stats ---------- */
.section-stats {
  padding-left: var(--gut);
  padding-right: var(--gut);
  text-align: left;
}
.stats-label { justify-content: flex-start; margin-bottom: 3rem; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  border-top: 1px solid var(--seam);
  padding-top: 2.4rem;
}
.stat { display: flex; flex-direction: column; gap: 0.6rem; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-variation-settings: 'wdth' 108;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ice);
  line-height: 1.5;
}
.stat-label em {
  display: block;
  margin-top: 0.45rem;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: none;
  color: #74879B;
}

/* ============================================================
   POST-SCROLL BANDS
   ============================================================ */
.post-scroll { position: relative; z-index: 20; background: var(--void); }

.band { padding: clamp(6rem, 12vh, 10rem) var(--gut); }
.band-head { margin-bottom: clamp(3rem, 6vh, 5rem); }
.band-heading {
  font-size: clamp(2.6rem, 6.5vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 114;
  text-wrap: balance;
}
.band-body {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.7;
  color: var(--haze);
  max-width: 46ch;
}

/* ---------- Capability list ---------- */
.band-capability { background: var(--steel); }
.cap-list { border-top: 1px solid var(--seam); }
.cap {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2.5rem;
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--seam);
  transition: background 0.4s var(--ease);
}
.cap:hover { background: rgba(58,160,255,0.035); }
.cap-index {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flame);
  padding-top: 0.5rem;
}
.cap-body h3 {
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 108;
  margin-bottom: 0.9rem;
}
.cap-body p {
  font-size: clamp(0.96rem, 1.05vw, 1.08rem);
  line-height: 1.72;
  color: var(--haze);
  max-width: 62ch;
}

/* ---------- Split media ---------- */
.band-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0;
  background: var(--seam);
}
.split-media { margin: 0; position: relative; overflow: hidden; background: var(--void); }
.split-media img {
  width: 100%;
  height: clamp(320px, 52vh, 620px);
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.88);
  transition: transform 1.1s var(--ease), filter 0.7s var(--ease);
}
.split-media:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.02) brightness(1); }
.split-media figcaption {
  position: absolute;
  left: 1.6rem;
  bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice);
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--seam); max-width: 1100px; }
.faq { border-bottom: 1px solid var(--seam); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.7rem 3rem 1.7rem 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.34rem);
  letter-spacing: -0.012em;
  font-variation-settings: 'wdth' 104;
  color: var(--ice);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--current); }
.faq summary::after,
.faq summary::before {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--flame);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.faq summary::after  { width: 14px; height: 1px; transform: translateY(-50%); }
.faq summary::before { width: 1px; height: 14px; right: 10px; transform: translateY(-50%); }
.faq[open] summary::before { transform: translateY(-50%) scaleY(0); opacity: 0; }
.faq-body { padding: 0 4rem 1.9rem 0; }
.faq-body p {
  font-size: clamp(0.95rem, 1.05vw, 1.06rem);
  line-height: 1.75;
  color: var(--haze);
  max-width: 72ch;
}
.faq-body strong { color: var(--ice); font-weight: 500; }

/* ---------- Contact band ---------- */
.band-contact {
  background: var(--steel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
/* Contact details beside the home-page form, so the page is usable
   even before form delivery is connected. */
.contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--seam);
}
.contact-inline dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 0.5rem;
}
.contact-inline dd { margin: 0; font-size: 1rem; }
.contact-inline dd a {
  color: var(--ice);
  border-bottom: 1px solid var(--seam);
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-inline dd a:hover { color: var(--current); border-color: var(--current); }

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field > span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #74879B;
}
.field > span i { color: var(--flame); font-style: normal; margin-left: 0.35em; }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--seam);
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ice);
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--current); }
.contact-form .btn { align-self: flex-start; margin-top: 0.8rem; }
.form-note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: #667B8F;
}

/* Spam honeypot. display:none keeps it out of the accessibility tree
   entirely — a screen reader should never meet a checkbox with no
   purpose — while still sitting in the DOM for bots to fill in. */
.botcheck { display: none !important; }

/* Submission feedback. Empty until the form is actually used. */
.form-status {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--haze);
}
.form-status:empty { display: none; }
.form-status[data-state] {
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--seam);
  background: rgba(255,255,255,0.02);
}
.form-status[data-state="pending"],
.form-status[data-state="error"] { border-left-color: var(--flame); }
.form-status[data-state="sent"]  { border-left-color: var(--current); color: var(--ice); }
.form-status a {
  color: var(--ice);
  border-bottom: 1px solid var(--seam);
  overflow-wrap: anywhere;
}
.form-status a:hover { color: var(--current); border-color: var(--current); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 20;
  background: var(--void);
  border-top: 1px solid var(--seam);
  padding: clamp(4rem, 8vh, 6rem) var(--gut) 2rem;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--seam);
}
.footer-brand img { height: 54px; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 112;
  color: var(--haze);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 3rem 0;
}
.footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--flame);
  margin-bottom: 0.5rem;
}
.footer-col a {
  font-size: 0.94rem;
  color: var(--haze);
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--ice); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--seam);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5F7185;
}

/* ============================================================
   REVEAL (post-scroll, non-canvas sections)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .nav-desktop { gap: 1.4rem; }
  .station { display: none; }
}

@media (max-width: 980px) {
  :root { --gut: 6vw; --header-h: 72px; }
  .nav-desktop { display: none; }
  .menu-toggle { display: block; }

  #scroll-container { height: 580vh; }

  /* Side zones collapse — text centres over the pipe with a scrim
     behind it so it stays readable against moving frames. */
  .align-left, .align-right {
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
  .align-left .section-inner,
  .align-right .section-inner {
    max-width: 100%;
    background: rgba(7,9,12,0.82);
    padding: 1.8rem 1.5rem;
    border-left: 2px solid var(--flame);
  }
  .section-body { max-width: 100%; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  .cap { grid-template-columns: 1fr; gap: 0.9rem; }
  .band-split { grid-template-columns: 1fr; }
  .band-contact { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .marquee-text { font-size: 18vw; }
  .marquee-codes .marquee-text { font-size: 13vw; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .hero-actions .btn { flex: 1 1 100%; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cue-line { animation: none; }
  .reveal { opacity: 1; transform: none; }
}