/* ===================================================================
   ZONE GROUP SANITARY SYSTEMS — flow system build
   -------------------------------------------------------------------
   THE RULE: the page is one pipe run. A hairline enters at the top,
   turns through every section joint and leaves at the footer, with a
   pulse travelling through it. Everything else stays quiet so that
   run reads as a single continuous system, not a set of effects.

   PALETTE: instrument, not aquarium. Near-black teal ground with two
   turquoises used as signal — bright for action, pale for supporting
   detail. Turquoise is never a background wash; it marks a point
   where something happens.
   =================================================================== */

:root {
  /* --- Design tokens. Change a colour here, it changes everywhere. --- */
  --background: #081416;
  --surface:    #102124;
  --primary:    #27BFC4;
  --secondary:  #78DDE0;
  --text:       #F1FAFA;

  /* Derived depth. Between background and surface, for banded sections. */
  --surface-2:  #0C1B1E;
  --surface-3:  #16292D;

  /* Derived text tones. Opacity, so they stay in key on any surface. */
  --text-mid:   rgba(241, 250, 250, 0.66);
  --text-dim:   rgba(241, 250, 250, 0.42);
  --text-faint: rgba(241, 250, 250, 0.26);

  /* Hairlines and glass, derived from secondary so edges read cool. */
  --line:       rgba(120, 221, 224, 0.14);
  --line-soft:  rgba(120, 221, 224, 0.08);
  --line-lit:   rgba(39, 191, 196, 0.55);
  --glass:      rgba(120, 221, 224, 0.04);

  --flow: linear-gradient(100deg, var(--primary), var(--secondary));

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  --shell: 1180px;

  /* Scroll velocity, written by flow.js. 0 = still, 1 = moving fast. */
  --surge: 0;

  /* Motion curves, carried over from the Zone house style. */
  --settle: cubic-bezier(0.22, 1.28, 0.36, 1);
  --pour:   cubic-bezier(0.65, 0, 0.20, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  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;
}

/* ===================================================================
   AMBIENT FIELD
   Three masses only, deep and slow. The brief warns against flooding
   the page with turquoise, so these sit at low opacity and never
   reach the bright end of the palette.
   =================================================================== */
.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: 48vw; height: 48vw;
  left: -10vw; top: 4vh;
  background: radial-gradient(circle at 45% 45%, rgba(39, 191, 196, 0.22), transparent 68%);
  animation: drift-a 53s ease-in-out infinite;
}

.field__mass--b {
  width: 38vw; height: 38vw;
  left: 58vw; top: 30vh;
  background: radial-gradient(circle at 50% 50%, rgba(120, 221, 224, 0.14), transparent 66%);
  animation: drift-b 67s ease-in-out infinite;
}

.field__mass--c {
  width: 32vw; height: 32vw;
  left: 20vw; top: 64vh;
  background: radial-gradient(circle at 50% 50%, rgba(39, 191, 196, 0.13), transparent 64%);
  animation: drift-c 43s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(6vw, -7vh, 0) scale(1.14); }
  70%      { transform: translate3d(11vw, 4vh, 0) scale(0.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45%      { transform: translate3d(-5vw, -10vh, 0) scale(0.9); }
  75%      { transform: translate3d(3vw, 6vh, 0) scale(1.18); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(8vw, -9vh, 0) scale(1.2); }
}

/* Technical grid. Barely visible — it should register as precision,
   not as a drawing board. */
.field__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(120, 221, 224, 0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 221, 224, 0.032) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 22%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 22%, #000 20%, 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, cool and very faint. */
.wake {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 191, 196, 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 1 — the pressure column
   A instrument down the right edge. Fills with scroll; the head
   overshoots and settles, the way a line does when a valve closes.
   =================================================================== */
.column {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}

.column__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.column__tube {
  position: relative;
  width: 8px;
  height: 170px;
  border-radius: 2px;
  background: rgba(120, 221, 224, 0.06);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Graduation marks — the detail that makes it an instrument */
.column__ticks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line-soft) 0, var(--line-soft) 1px,
    transparent 1px, transparent 17px
  );
  z-index: 2;
}

.column__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--secondary), var(--primary) 65%, #1B8F94);
  color: var(--secondary);
}

.column__head {
  position: absolute;
  left: -1px; right: -1px;
  top: -5px;
  height: 10px;
  width: calc(100% + 2px);
  overflow: visible;
}

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

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

/* ===================================================================
   SURFACING — content rises into place
   Carried over from Zone Real Estate, with the drift reduced: this
   brand is precise, so things arrive squarer.
   =================================================================== */
.js .surface {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.js .surface.is-surfaced {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--pour),
    transform 1.05s var(--settle);
}

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

/* ===================================================================
   Wordmark — the separator is a valve node, not a droplet
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  line-height: 1;
}

.wordmark__zone { color: var(--text); }

.wordmark__rest {
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.17em;
  color: var(--text-dim);
}

/* A valve seat: square rotated 45°, with a bright core that opens
   and closes on a slow cycle. */
.wordmark__valve {
  position: relative;
  width: 9px; height: 9px;
  flex: none;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}

.wordmark__valve::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--primary);
  animation: valve 4.6s ease-in-out infinite;
}

@keyframes valve {
  0%, 100% { opacity: 0.25; transform: scale(0.5); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* ===================================================================
   Top bar
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 20, 22, 0.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--line-soft);
}

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

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.navlink {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-mid);
  padding: 8px 12px;
  border-radius: 6px;
  transition: color 0.4s ease, background 0.4s ease;
}

.navlink:hover { color: var(--text); background: var(--glass); }

/* Active section gets a lit node under it, not a underline */
.navlink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--primary);
  transform: rotate(45deg) scale(0);
  transition: transform 0.5s var(--settle);
}

.navlink.is-current { color: var(--text); }
.navlink.is-current::after { transform: rotate(45deg) scale(1); }

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

.callbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: border-color 0.45s ease, transform 0.5s var(--settle);
}

.callbtn:hover { border-color: var(--line-lit); transform: translateY(-1px); }

.callbtn__icon {
  width: 15px; height: 15px;
  flex: none;
  color: var(--primary);
}

.callbtn__text { display: flex; flex-direction: column; line-height: 1.2; }

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

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

/* Mobile menu toggle */
.burger {
  display: none;
  width: 40px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  padding: 0;
  place-items: center;
}

.burger__bars {
  position: relative;
  width: 16px; height: 1px;
  background: var(--text);
  display: block;
}

.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1px;
  background: var(--text);
  transition: transform 0.45s var(--settle);
}

.burger__bars::before { top: -5px; }
.burger__bars::after  { top: 5px; }

.burger.is-open .burger__bars { background: transparent; }
.burger.is-open .burger__bars::before { transform: translateY(5px) rotate(45deg); }
.burger.is-open .burger__bars::after  { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: rgba(16, 33, 36, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.drawer.is-open { display: block; }

.drawer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 18px 18px;
  display: grid;
  gap: 2px;
}

.drawer a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-mid);
  padding: 12px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.drawer a:last-child { border-bottom: none; }

@media (max-width: 1080px) {
  .topbar__nav { display: none; }
  .burger { display: grid; margin-left: auto; }
  .callbtn__text { display: none; }
  .callbtn { padding: 10px 12px; }
}

@media (max-width: 620px) {
  .topbar__inner { padding: 12px 16px; gap: 12px; }
  .wordmark { font-size: 13px; gap: 7px; }
  .wordmark__rest { font-size: 9.5px; letter-spacing: 0.13em; }
}

@media (max-width: 400px) {
  .wordmark__rest { display: none; }
}

/* ===================================================================
   BUTTONS — one system, three weights
   Proportions carried over from Zone Real Estate; the corner radius
   is tightened from a pill to 10px because this brand is engineered,
   not liquid.
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.5s var(--settle), border-color 0.45s ease,
              background 0.45s ease, color 0.45s ease, box-shadow 0.5s ease;
}

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

/* Primary — the only place a solid turquoise field appears */
.btn--primary {
  background: var(--primary);
  color: #051012;
  box-shadow: 0 8px 24px rgba(39, 191, 196, 0.18);
}

.btn--primary:hover {
  background: var(--secondary);
  box-shadow: 0 14px 34px rgba(39, 191, 196, 0.30);
}

/* A light band crosses the button on hover — left to right, the flow rule */
.btn__sweep {
  position: absolute;
  top: 0; bottom: 0;
  left: -34%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(241, 250, 250, 0.30), transparent);
  transition: left 0.85s var(--pour);
  pointer-events: none;
}

.btn:hover .btn__sweep { left: 112%; }

/* Secondary — outlined in the pale turquoise */
.btn--ghost {
  background: transparent;
  border-color: rgba(120, 221, 224, 0.45);
  color: var(--secondary);
}

.btn--ghost:hover {
  border-color: var(--secondary);
  background: rgba(120, 221, 224, 0.09);
  color: var(--text);
}

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

.btn--quiet:hover { border-color: var(--line-lit); color: var(--text); }

.btn--wide { width: 100%; }

.btn__icon { width: 15px; height: 15px; flex: none; }

/* ===================================================================
   SECTION SHELL
   One rhythm class so vertical spacing never gets fought over by
   two competing selectors.
   =================================================================== */
.band {
  position: relative;
  z-index: 2;
  padding: 96px 0;
}

.band--tight { padding: 72px 0; }
.band--tinted { background: linear-gradient(180deg, transparent, var(--surface-2) 18%, var(--surface-2) 82%, transparent); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

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

.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--primary);
  background: var(--primary);
  transform: rotate(45deg);
  flex: none;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 3.7vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  max-width: 20ch;
}

.section-lede {
  max-width: 62ch;
  color: var(--text-mid);
  font-size: 16.5px;
  margin: 0;
}

.section-head { margin-bottom: 52px; }

.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: end;
}

@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; gap: 20px; }
  .band { padding: 72px 0; }
  .band--tight { padding: 58px 0; }
}

/* ===================================================================
   SIGNATURE 2 — THE PIPE RUN
   The whole page is one routed line. Each joint carries it from one
   side to the other, alternating, so it serpentines top to bottom.
   Built from two bordered boxes rather than SVG: borders stay a true
   hairline at any width, where a stretched viewBox would not.
   =================================================================== */
.joint {
  position: relative;
  z-index: 3;
  height: 104px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  pointer-events: none;
}

.joint__run {
  position: relative;
  height: 100%;
}

/* Left half: down the left rail, then round into the crossing */
.joint__a {
  position: absolute;
  left: 16%;
  top: 0;
  width: 34%;
  height: 52px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 16px;
}

/* Right half: continue the crossing, then round down the right rail */
.joint__b {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 34%;
  height: 52px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-top-right-radius: 16px;
}

/* The pulse: a short bright segment crossing the horizontal, left to
   right. One pulse per joint, offset so they do not march in step. */
.joint__flow {
  position: absolute;
  left: 16%;
  top: 51px;
  width: 68%;
  height: 2px;
  overflow: hidden;
}

.joint__flow::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%, transparent 36%,
    rgba(39, 191, 196, 0.9) 46%,
    var(--secondary) 50%,
    rgba(39, 191, 196, 0.9) 54%,
    transparent 64%, transparent 100%);
  transform: translateX(-100%);
  animation: pulse-run 7s linear infinite;
}

@keyframes pulse-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Valve node sitting on the crossing */
.joint__valve {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 11px; height: 11px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--line-lit);
  background: var(--background);
  transform: rotate(45deg);
}

.joint__valve::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--primary);
  opacity: 0.3;
  transition: opacity 0.6s ease;
}

.joint.is-open .joint__valve::after { opacity: 1; }

/* Mirrored joint sends the run back the other way */
.joint--rev .joint__run { transform: scaleX(-1); }

/* Offsets so the pulses are not synchronised down the page */
.joint:nth-of-type(2n)   .joint__flow::after { animation-delay: -2.3s; }
.joint:nth-of-type(3n)   .joint__flow::after { animation-delay: -4.1s; }
.joint:nth-of-type(4n+1) .joint__flow::after { animation-duration: 8.4s; }

@media (max-width: 700px) {
  .joint { height: 80px; }
  .joint__a { height: 40px; left: 10%; width: 40%; }
  .joint__b { top: 40px; height: 40px; width: 40%; }
  .joint__flow { top: 39px; left: 10%; width: 80%; }
  .joint__valve { top: 40px; }
}

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

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

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
}

.hero__line { display: block; }

/* Second line carries the flow gradient — the one animated headline */
.hero__line--flow {
  background: linear-gradient(100deg,
    var(--text) 0%, var(--secondary) 30%, var(--primary) 48%,
    var(--secondary) 64%, var(--text) 92%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow-text 15s linear infinite;
}

@keyframes flow-text {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.hero__tagline {
  max-width: 52ch;
  color: var(--text-mid);
  font-size: 17px;
  margin: 0 0 32px;
}

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

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-soft);
}

.fact {
  margin: 0;
  padding-right: 34px;
  margin-right: 34px;
  border-right: 1px solid var(--line-soft);
}

.fact:last-child { border-right: none; margin-right: 0; padding-right: 0; }

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

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

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

@media (max-width: 520px) {
  .hero__ctas .btn { width: 100%; }
  /* Once these wrap, the dividers land in the wrong places, so the
     row falls back to plain spacing. */
  .fact { border-right: none; padding-right: 0; margin-right: 0; }
  .hero__facts { gap: 18px 34px; }
}

/* -------------------------------------------------------------------
   Hero schematic — the four stages of any sanitary system, drawn as
   the actual route. This is what replaces the property photo in the
   sibling site: the product here is the system, so the system is the
   image.
   ------------------------------------------------------------------- */
.schematic {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 30px 70px rgba(3, 9, 10, 0.55);
  overflow: hidden;
}

.schematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(120, 221, 224, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 221, 224, 0.028) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.schematic__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}

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

.schematic__meter {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--primary);
}

.schematic__stages {
  position: relative;
  display: grid;
  gap: 0;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
}

/* The connector between stages — the pipe, drawn once per gap */
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  bottom: -50%;
  width: 1px;
  background: var(--line);
}

.stage__node {
  position: relative;
  z-index: 2;
  width: 27px; height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.stage__node::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--text-faint);
  transform: rotate(45deg);
  transition: background 0.6s ease, transform 0.6s var(--settle);
}

.stage.is-live .stage__node {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(39, 191, 196, 0.10);
}

.stage.is-live .stage__node::after {
  background: var(--primary);
  transform: rotate(45deg) scale(1.15);
}

.stage__text { min-width: 0; }

.stage__name {
  display: block;
  font-size: 15px;
  color: var(--text);
  line-height: 1.3;
}

.stage__note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 3px;
}

.schematic__foot {
  position: relative;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ===================================================================
   SERVICE CARDS
   Card geometry from the sibling site, restated with a square-ish
   radius and a lit top edge instead of a glowing border.
   =================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 20px;
  align-items: start;
}

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

/* A supply line lights along the top edge on hover — flow, again */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--flow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--pour);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--line);
  background: var(--surface-3);
  box-shadow: 0 22px 48px rgba(3, 9, 10, 0.5);
}

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

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card__icon {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(39, 191, 196, 0.06);
  color: var(--primary);
  transition: border-color 0.45s ease, background 0.45s ease, color 0.45s ease;
}

.card:hover .card__icon {
  border-color: var(--line-lit);
  background: rgba(39, 191, 196, 0.13);
  color: var(--secondary);
}

.card__icon svg { width: 21px; height: 21px; }

.card__kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  padding-top: 6px;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.018em;
  margin: 0;
}

.card__summary {
  font-size: 14.5px;
  color: var(--text-mid);
  margin: 0;
  flex: 1;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--secondary);
  margin-top: 2px;
}

.card__more svg {
  width: 13px; height: 13px;
  transition: transform 0.5s var(--settle);
}

.card:hover .card__more svg { transform: translateX(4px); }

/* ===================================================================
   FLOW SECTION — supply to drain, and the two process rails
   =================================================================== */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rail--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.node {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 22px 22px 24px;
  overflow: hidden;
  transition: border-color 0.6s ease, background 0.6s ease;
}

.node.is-live { border-color: var(--line); background: var(--surface-3); }

/* Stage number, and the segment of line that belongs to this stage */
.node__code {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 16px;
  transition: color 0.6s ease;
}

.node.is-live .node__code { color: var(--primary); }

.node__code::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  transition: background 0.6s ease;
}

.node.is-live .node__code::after { background: var(--line-lit); }

.node__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

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

/* The connector between nodes on a row */
.node::after {
  content: "";
  position: absolute;
  right: -21px;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--line-soft);
  z-index: 1;
}

.node:last-child::after { display: none; }

@media (max-width: 900px) {
  .rail, .rail--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node::after { display: none; }
}

@media (max-width: 560px) {
  .rail, .rail--six { grid-template-columns: 1fr; }
}

/* ===================================================================
   REPAIRS — the problem list
   =================================================================== */
.repairs {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 52px;
  align-items: center;
}

.issues {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 15px;
  transition: border-color 0.45s ease, color 0.45s ease, transform 0.5s var(--settle);
}

.issue::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  background: var(--primary);
  transform: rotate(45deg);
  opacity: 0.6;
  transition: opacity 0.45s ease;
}

.issue:hover {
  border-color: var(--line-lit);
  color: var(--text);
  transform: translateY(-2px);
}

.issue:hover::before { opacity: 1; }

@media (max-width: 900px) {
  .repairs { grid-template-columns: 1fr; gap: 34px; }
}

/* ===================================================================
   BUILDINGS + REASONS — the two quiet grids
   =================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
}

.tile {
  background: var(--surface);
  padding: 24px 22px;
  transition: background 0.45s ease;
}

.tile:hover { background: var(--surface-3); }

.tile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.tile__title::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
  transition: background 0.45s ease;
}

.tile:hover .tile__title::before { background: var(--primary); }

.tile__note {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* ===================================================================
   STEPS — how it works
   =================================================================== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
}

.step {
  counter-increment: step;
  position: relative;
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}

.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
  padding-top: 3px;
  flex: none;
  width: 26px;
}

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

.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.012em;
  margin: 0 0 5px;
}

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

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
}

/* ===================================================================
   QUOTE FORM
   =================================================================== */
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.quote__aside {
  display: flex;
  flex-direction: column;
  padding: 44px 40px;
  background: linear-gradient(165deg, var(--surface-3), var(--surface));
  border-right: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}

.quote__aside::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 191, 196, 0.16), transparent 66%);
  pointer-events: none;
}

.quote__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
}

.quote__note {
  color: var(--text-mid);
  font-size: 15px;
  margin: 0 0 28px;
}

.quote__contact {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.quote__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mid);
}

.quote__row svg { width: 15px; height: 15px; color: var(--primary); flex: none; }
.quote__row a:hover { color: var(--secondary); }

.quote__form { padding: 40px; }

.field-group { margin-bottom: 24px; }

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

/* Request type — the two CTAs the brief calls for, as the switch */
.switch {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.switch .btn { flex: 1; min-width: 150px; }

.switch .btn[aria-pressed="false"].btn--primary {
  background: transparent;
  border-color: var(--line);
  color: var(--text-mid);
  box-shadow: none;
}

.switch .btn[aria-pressed="false"].btn--primary:hover {
  border-color: var(--line-lit);
  color: var(--text);
}

.switch .btn[aria-pressed="true"].btn--ghost {
  background: rgba(120, 221, 224, 0.14);
  border-color: var(--secondary);
  color: var(--text);
}

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

.chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 14px;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}

.chip:hover { border-color: var(--line); color: var(--text); }

.chip[aria-pressed="true"] {
  border-color: var(--primary);
  background: rgba(39, 191, 196, 0.13);
  color: var(--text);
}

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

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

.textarea { min-height: 104px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2378DDE0' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px;
  padding-right: 38px;
}

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

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

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39, 191, 196, 0.12);
}

.input.is-bad,
.textarea.is-bad { border-color: #E2705F; }

.field-error {
  display: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #E2705F;
  margin-top: 8px;
}

.field-error.is-shown { display: block; }

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.form-actions .btn { flex: 1; min-width: 190px; }

.form-foot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 16px 0 0;
  text-align: center;
}

.form-foot a { color: var(--secondary); }

@media (max-width: 940px) {
  .quote { grid-template-columns: 1fr; }
  .quote__aside { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 34px 26px; }
  .quote__form { padding: 30px 26px 34px; }
}

@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .form-actions .btn { min-width: 0; width: 100%; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  padding: 54px 0 40px;
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px;
}

.footer__blurb {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 38ch;
  margin: 18px 0 0;
}

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

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--text-dim);
}

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

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

.footer__phone:hover { border-color: var(--line-lit); transform: translateY(-2px); }
.footer__phone svg { width: 15px; height: 15px; color: var(--primary); }

.footer__legal {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding: 22px 24px 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

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

/* ===================================================================
   DETAIL PANEL — opens on a service card
   =================================================================== */
.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(4, 10, 11, 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(2, 7, 8, 0.7);
  animation: commission 0.6s var(--settle) both;
}

/* Opens the way a line is commissioned: pressure comes up, then it settles */
@keyframes commission {
  0%   { opacity: 0; transform: translateY(26px) scale(0.965); }
  100% { opacity: 1; transform: none; }
}

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

.detail__close {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 3;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 20, 22, 0.8);
  color: var(--text);
  display: grid;
  place-items: center;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.55s var(--settle);
}

.detail__close svg { width: 15px; height: 15px; }

.detail__close:hover {
  border-color: var(--line-lit);
  background: rgba(39, 191, 196, 0.16);
  transform: rotate(90deg);
}

.detail__figure {
  position: relative;
  margin: 0;
  background: var(--background);
  border-bottom: 1px solid var(--line-soft);
}

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

.detail__body { padding: 30px 34px 34px; }

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

.detail__kicker::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--primary);
  transform: rotate(45deg);
}

.detail__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

.detail__intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 28px;
}

.detail__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-bottom: 28px;
}

.detail__subhead {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-faint);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

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

.detail__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.5;
}

/* Bullets are valve seats, matching the wordmark */
.detail__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 8px;
  width: 7px; height: 7px;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}

.detail__list--outcome li::before { background: var(--primary); }

.detail__note {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--background);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 15px 18px;
  margin: 0 0 26px;
}

.detail__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.detail__actions .btn { flex: 1; min-width: 180px; }

@media (max-width: 620px) {
  .detail { padding: 0; }
  .detail__panel { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; border: none; }
  .detail__scroll { max-height: 100vh; }
  .detail__body { padding: 24px 20px 32px; }
  .detail__cols { grid-template-columns: 1fr; gap: 24px; }
  .detail__title { font-size: 23px; }
  .detail__actions .btn { min-width: 0; width: 100%; }
}

/* ===================================================================
   REDUCED MOTION
   Ambient motion stops. Content stays visible and in place — nothing
   is left stuck invisible, and the flow indicators hold their lit
   state rather than pulsing.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .js .surface { opacity: 1; transform: none; }
  .field__mass { opacity: 0.5; }
  .wake { display: none; }
  .card:hover { transform: none; }
  .joint__flow::after { transform: translateX(0); opacity: 0.5; }
  .stage__node { border-color: var(--line); }
}