/* Meridian Plumbing Co. · v4 "The Run"
   One continuous 6px copper line is the structure of every page. Sections sit off it
   like fixtures off a line. Spec: DECISIONS.md. Performance floor: the run draws with
   transform only (scaleX / scaleY on a pseudo-element, scroll-linked view timelines). */

/* ---------- fonts (self-hosted by load-prep.mjs, variable woff2, wght axis) ---------- */
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/familjen-grotesk-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-400.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; src: url("/fonts/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
  --ground: #FBFBFA;
  --ground-2: #F1F1EF;
  --graphite: #1E1F1D;
  --graphite-2: #252624;
  --graphite-deep: #121311;
  --copper: #B5642F;          /* the run and every fitting outline; display-size copper text only */
  --copper-fill: #AD5E2C;     /* copper surfaces carrying white text: buttons, the flood */
  --copper-dk: #8C4A21;       /* fitting fill; button hover; all small copper text on light */
  --copper-lt: #D98A55;       /* copper on dark grounds */
  --steel: #8C9196;           /* hairlines on light; text on graphite only */
  --steel-dk: #5D6166;        /* secondary text on light */
  --mist: #B4B8BB;            /* secondary text on graphite and over scrims */
  --mist-2: #9A9FA3;          /* labels on graphite-2 */
  --rule: #DCDDDB;
  --rule-dk: #373835;
  --live: #4CC38A;
  --white: #FFFFFF;

  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: 50px;
  --pad-l: calc(var(--gutter) + 72px);      /* content edge beside a rail */
  --xl: calc(var(--gutter) + 3px);          /* left rail centreline */
  --xr: calc(100% - var(--gutter) - 3px);   /* right rail centreline (inside a full-width box) */
  --xh: 62%;                                /* hero drop, set by main.js from the headline */
  --pipe: 6px;
  --section: 120px;
  --halo: var(--ground);

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: 800ms;
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 300ms;
  --ease-grow: cubic-bezier(0.76, 0, 0.24, 1);
  --stagger: 200ms;
  --nav-h: 76px;
}
@media (max-width: 1100px) { :root { --gutter: 32px; --pad-l: calc(var(--gutter) + 56px); --section: 96px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --pad-l: calc(var(--gutter) + 30px); --section: 72px; --nav-h: 64px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--ground); color: var(--graphite); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { overflow-x: clip; display: block; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--graphite); color: var(--white); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

.label { font: 400 11px/1.5 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel-dk); }
.label b { font-weight: 400; color: var(--copper-dk); }
.label--light, .dark .label { color: var(--mist); }
.label--light b, .dark .label b { color: var(--copper-lt); }

.dark { background: var(--graphite); color: var(--white); --halo: var(--graphite); }
.dark .lede { color: var(--mist); }
.g2 { background: var(--ground-2); --halo: var(--ground-2); }

.h1i { font: 700 clamp(56px, 8.4vw, 140px)/.9 var(--f-display); letter-spacing: -0.05em; }
.h2 { font: 700 clamp(44px, 5.6vw, 92px)/.94 var(--f-display); letter-spacing: -0.045em; }
.lede { font-size: 19px; line-height: 1.55; color: var(--steel-dk); max-width: 34em; }
.head-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-top: 28px; }
.rail-pad { padding-left: var(--pad-l); padding-right: var(--gutter); }
.rail-pad-r { padding-left: var(--gutter); padding-right: var(--pad-l); }
.frame { position: relative; overflow: hidden; background: var(--ground-2); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark .frame { background: var(--graphite-2); }
.r45 { aspect-ratio: 4 / 5; } .r32 { aspect-ratio: 3 / 2; } .r43 { aspect-ratio: 4 / 3; }

/* ---------- buttons: split pill ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 7px 0 24px; border-radius: 999px; font: 600 16px/1 var(--f-body); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; border: 1px solid transparent; background: none;
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.btn__disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.btn__disc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--copper { background: var(--copper-fill); color: var(--white); }
.btn--copper .btn__disc { background: var(--white); color: var(--copper-fill); }
.btn--ghost { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn--ghost .btn__disc { background: rgba(255,255,255,.14); }
.btn--ghost-dark { border-color: rgba(255,255,255,.4); color: var(--white); padding-right: 24px; }
.btn--ink { background: var(--graphite); color: var(--white); }
.btn--ink .btn__disc { background: var(--copper-fill); color: var(--white); }
.btn--sm { height: 46px; padding-left: 20px; gap: 12px; font-size: 15px; }
.btn--sm .btn__disc { width: 34px; height: 34px; }
.btn[disabled] { cursor: default; opacity: .7; }
@media (hover: hover) {
  .btn:hover .btn__disc { transform: translateX(3px); }
  .btn--copper:hover { background: var(--copper-dk); }
  .btn--ghost:hover { background: var(--white); color: var(--graphite); }
  .btn--ghost:hover .btn__disc { background: var(--graphite); color: var(--white); }
  .btn--ghost-dark:hover { background: var(--white); color: var(--graphite); }
  .btn--ink:hover { background: #000; }
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; display: inline-block; }

/* ---------- nav: fixed, colour change only, never a height change ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--white); border-bottom: 1px solid transparent;
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.nav.is-solid { background: rgba(251,251,250,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--graphite); border-bottom-color: var(--rule); }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand__mark { width: 18px; height: 18px; border-right: 5px solid var(--copper); border-bottom: 5px solid var(--copper); align-self: center; transform: translateY(-2px); }
.brand__name { font: 700 24px/1 var(--f-display); letter-spacing: -0.035em; }
.brand__co { font: 400 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.nav__links { display: flex; gap: 36px; font-weight: 600; font-size: 15px; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-hover); }
.nav__links a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); } }
.nav__cta { display: flex; align-items: center; gap: 20px; }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-body); }
.nav__tel-k { font: 400 11px/1 var(--f-mono); letter-spacing: .06em; opacity: .75; }
.nav__mob-tel { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--copper-fill); color: var(--white); place-items: center; }
.nav__mob-tel svg { width: 20px; height: 20px; fill: currentColor; }
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; background: none; position: relative; cursor: pointer; }
.nav__toggle i, .menu__close i { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; }
.nav__toggle i:first-of-type { top: 18px; } .nav__toggle i:last-of-type { top: 25px; }

.menu { position: fixed; inset: 0; z-index: 60; background: var(--graphite); color: var(--white); overflow-y: auto; }
.menu__in { min-height: 100%; display: flex; flex-direction: column; padding: 28px var(--gutter) 40px; gap: 28px; }
.menu__close { align-self: flex-end; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; position: relative; cursor: pointer; color: var(--white); }
.menu__close i { top: 22px; } .menu__close i:first-of-type { transform: rotate(45deg); } .menu__close i:last-of-type { transform: rotate(-45deg); }
.menu__links { display: flex; flex-direction: column; border-left: 6px solid var(--copper); padding-left: 22px; gap: 6px; }
.menu__links a { font: 700 52px/1.05 var(--f-display); letter-spacing: -0.045em; display: flex; align-items: baseline; gap: 14px; }
.menu__links a[aria-current] { color: var(--copper-lt); }
.menu__links span { font: 400 11px/1 var(--f-mono); color: var(--copper-lt); letter-spacing: .07em; }
.menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- the run: pipes and fittings ---------- */
/* .pipe is a transparent box that owns the geometry and the view timeline;
   ::before is the copper that draws. Without JS or scroll timelines it is simply drawn. */
.pipe { position: absolute; display: block; pointer-events: none; z-index: 1; }
.pipe::before { content: ""; position: absolute; inset: 0; background: var(--copper); transform-origin: 50% 0; }
.pipe--h::before { transform-origin: 0 50%; }
.pipe--h.pipe--rtl::before { transform-origin: 100% 50%; }
.pipe--v.pipe--up::before { transform-origin: 50% 100%; }
.pipe--v { width: var(--pipe); }
.pipe--h { height: var(--pipe); }

.fit { position: absolute; z-index: 3; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--copper-dk); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--copper), 0 0 0 3px var(--halo); pointer-events: none; }
.fit--tee { width: 16px; height: 24px; margin: -12px 0 0 -8px; }
.fit--teeh { width: 24px; height: 16px; margin: -8px 0 0 -12px; }
.fit--union { width: 14px; height: 22px; margin: -11px 0 0 -7px; background: linear-gradient(90deg, transparent 3px, var(--copper) 3px 5px, transparent 5px 9px, var(--copper) 9px 11px, transparent 11px) var(--copper-dk); }   /* on a horizontal pipe */
.fit--unionv { width: 22px; height: 14px; margin: -7px 0 0 -11px; background: linear-gradient(180deg, transparent 3px, var(--copper) 3px 5px, transparent 5px 9px, var(--copper) 9px 11px, transparent 11px) var(--copper-dk); }  /* on a vertical pipe */
.fit--cap { width: 12px; height: 16px; margin: -8px 0 0 -6px; border-radius: 2px; background: var(--graphite); box-shadow: 0 0 0 3px var(--halo); }
.fit--capv { width: 16px; height: 12px; margin: -6px 0 0 -8px; border-radius: 2px; background: var(--graphite); box-shadow: 0 0 0 3px var(--halo); }
.dark .fit--cap, .dark .fit--capv { background: var(--steel); }

/* a stub: a short branch from the left rail to a row of content, with a tee on the rail */
.stub { position: absolute; top: 50%; height: var(--pipe); margin-top: -3px; left: calc(var(--xl) - var(--pad-l)); width: calc(var(--pad-l) - var(--xl) - 14px); background: var(--copper); z-index: 2; }
.stub::before { content: ""; position: absolute; left: -8px; top: -9px; width: 16px; height: 24px; border-radius: 3px; background: var(--copper-dk); box-shadow: inset 0 0 0 2px var(--copper), 0 0 0 3px var(--halo); }
.stub::after { content: ""; position: absolute; right: -6px; top: -5px; width: 10px; height: 16px; border-radius: 2px; background: var(--graphite); }
.dark .stub::after { background: var(--steel); }

/* the turn: the run rises out of the section above at --tx, crosses to the left rail */
.turn { position: absolute; left: 0; right: 0; top: 0; height: 80px; }
.turn__rise { left: calc(var(--tx) - 3px); top: -3px; height: 70px; }
.turn__cross { left: calc(var(--xl) - 3px); width: calc(var(--tx) - var(--xl) + 6px); top: 61px; }
.turn__a { left: var(--tx); top: 64px; }
.turn__b { left: var(--xl); top: 64px; }
.rail { left: calc(var(--xl) - 3px); top: 0; bottom: 0; }
.rail--turn { top: 61px; }
.fit--head { left: var(--xl); top: calc(var(--section) + 9px); }

/* valve glyph (shared) */
.vglyph { width: 48px; height: 48px; flex: none; }
.vglyph svg, .valve__sym svg { width: 100%; height: 100%; overflow: visible; }
.valve__body { fill: var(--graphite-deep); stroke: var(--copper-lt); stroke-width: 2.4; stroke-linejoin: round; }
.valve__stem { fill: none; stroke: var(--copper-lt); stroke-width: 2.4; stroke-linecap: round; }
.dark .vglyph .valve__body { fill: var(--graphite); }

/* ---------- photo hero (Home, About) ---------- */
.hero { position: relative; min-height: max(100svh, 760px); display: flex; flex-direction: column; background: var(--graphite-deep); color: var(--white); isolation: isolate; --halo: transparent; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 84%; }
.hero__media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,19,17,.9) 0%, rgba(18,19,17,.66) 36%, rgba(18,19,17,.12) 66%, rgba(18,19,17,0) 100%),
    linear-gradient(180deg, rgba(18,19,17,.55) 0%, rgba(18,19,17,0) 22%, rgba(18,19,17,0) 58%, rgba(18,19,17,.82) 100%); }
.hero__head { position: relative; padding: calc(var(--nav-h) + 11vh) var(--gutter) 40px var(--pad-l); }
.hero__title { margin-top: 26px; font: 700 clamp(58px, 10.6vw, 176px)/.9 var(--f-display); letter-spacing: -0.05em; }
.hero__line { display: block; width: max-content; max-width: 100%; }
.hero__underline { left: 0; bottom: 12px; width: calc(var(--xh) + 3px); }
.hero__elbow { left: var(--xh); bottom: 5px; margin: 0 0 0 -10px; }

.hero__low { position: relative; flex: 1; display: flex; align-items: flex-start; padding: 56px var(--gutter) 64px var(--pad-l); }
.hero__drop { left: calc(var(--xh) - 3px); top: -15px; bottom: 0; }
.hero__copy { width: calc(var(--xh) - var(--pad-l) - 72px); max-width: 620px; }
.hero__lede { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 30em; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mist); }
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.hero__trust li::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--copper-lt); border-radius: 2px; }

.valve { position: absolute; z-index: 3; left: calc(var(--xh) - 20px); top: 40px; display: flex; gap: 22px; align-items: flex-start; max-width: calc(100% - var(--xh) - var(--gutter)); }
.valve__sym { width: 40px; height: 40px; flex: none; }
.valve__txt { display: flex; flex-direction: column; gap: 8px; padding-top: 1px; text-shadow: 0 1px 14px rgba(18,19,17,.75), 0 0 2px rgba(18,19,17,.5); }
.valve__status { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1.2 var(--f-body); }
.valve__num { font: 700 clamp(30px, 2.6vw, 42px)/1 var(--f-display); letter-spacing: -0.035em; transition: color var(--dur-hover) var(--ease-hover); }
.valve__sub { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.7); max-width: 24em; }
@media (hover: hover) { .valve:hover .valve__num { color: var(--copper-lt); } }

/* About hero: the run drops from under the nav and tees into the H1 */
.hero--about { min-height: max(88svh, 680px); }
.hero--about .hero__media img { object-position: 62% 50%; }
.hero--about .hero__inlet { left: calc(var(--xl) - 3px); top: 0; bottom: 12px; }
.hero--about .hero__tee { left: var(--xl); bottom: 3px; margin: 0 0 0 -12px; }
.hero--about .hero__underline { left: calc(var(--xl) - 3px); width: calc(var(--xh) - var(--xl) + 6px); }
.plate { position: absolute; z-index: 3; left: calc(var(--xh) - 8px); top: 36px; width: min(420px, calc(100% - var(--xh) - var(--gutter))); background: rgba(18,19,17,.78); border: 1px solid var(--rule-dk); border-left: 0; padding: 22px 24px 22px 32px; }
.plate__pin { position: absolute; left: -2px; top: 22px; width: 14px; height: 22px; border-radius: 3px; background: var(--copper-dk); box-shadow: inset 0 0 0 2px var(--copper); }
.plate dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin-top: 14px; }
.plate dt { font: 400 10px/1.6 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mist); }
.plate dd { font: 600 15px/1.35 var(--f-body); color: var(--white); }

/* ---------- HOME 01 services: fixtures off the line ---------- */
.svc { position: relative; padding-bottom: var(--section); --tx: var(--xh); }
.svc__head { padding-top: 100px; }
.fixtures { margin-top: 72px; }
.fixture { border-top: 1px solid var(--rule); }
.fixture:last-child { border-bottom: 1px solid var(--rule); }
.fixture__a { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1.15fr) minmax(0, 1fr) 208px; gap: 36px; align-items: center; padding: 26px 0; transition: background-color var(--dur-hover) var(--ease-hover); }
.fixture__code { color: var(--steel-dk); }
.fixture__name { font: 700 clamp(28px, 2.6vw, 42px)/1 var(--f-display); letter-spacing: -0.04em; transition: color var(--dur-hover) var(--ease-hover); }
.fixture__line { color: var(--steel-dk); font-size: 16px; line-height: 1.5; max-width: 30em; }
.fixture__img { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ground-2); }
.fixture__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 600ms var(--ease-hover); }
@media (hover: hover) {
  .fixture__a:hover .fixture__name { color: var(--copper); }
  .fixture__a:hover .fixture__img img { transform: scale(1.07); }
  .fixture__a:hover { background-color: var(--ground-2); }
}

/* ---------- HOME 02 why: sticky row build (Stux) ---------- */
.why { position: relative; padding: var(--section) 0; }
.why .fit { --halo: transparent; }
.build { --h: min(470px, calc(100svh - 170px)); --top: calc(var(--nav-h) + 48px); position: relative; margin-top: 80px; }
.build__layer { position: sticky; top: var(--top); height: var(--h); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); pointer-events: none; }
.promise { position: relative; grid-column: var(--c); pointer-events: auto; background: var(--graphite-2); border: 1px solid var(--rule-dk); margin-left: -1px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; transition: background-color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) { .promise:hover { background: #2B2C2A; } }
.promise__pipe { position: absolute; z-index: 1; left: -1px; right: -1px; top: calc(50% - 3px); height: var(--pipe); background: var(--copper); pointer-events: none; }
.build__layer:first-child .promise__pipe { left: calc(var(--xl) - var(--pad-l) - 3px); }
.promise__pipe i { position: absolute; left: 50%; top: -9px; width: 16px; height: 24px; margin-left: -8px; border-radius: 3px; background: var(--copper-dk); box-shadow: inset 0 0 0 2px var(--copper); }
.promise__pipe--end::after { content: ""; position: absolute; right: -8px; top: -5px; width: 12px; height: 16px; border-radius: 2px; background: var(--steel); }
.promise__pipe--end { right: auto; width: calc(100% - 20px); }
.promise__top { display: flex; flex-direction: column; gap: 22px; }
.promise__top .label { color: var(--mist-2); }
.promise__big { font: 700 clamp(56px, 6.2vw, 104px)/.86 var(--f-display); letter-spacing: -0.055em; }
.promise--lit .promise__big { color: var(--copper-lt); }
.promise__bot h3 { font: 700 26px/1.1 var(--f-display); letter-spacing: -0.03em; }
.promise__bot p { min-height: 4.5em; margin-top: 10px; color: var(--mist); font-size: 16px; line-height: 1.5; }
.promise__slip { margin-top: 22px; padding-top: 12px; border-top: 1px dashed #4A4B48; display: flex; justify-content: space-between; gap: 12px; font: 400 10px/1.4 var(--f-mono); letter-spacing: .07em; color: var(--mist-2); }

/* ---------- HOME 03 process: the path on the run ---------- */
.proc { position: relative; }
.proc__head { position: relative; padding-top: var(--section); padding-bottom: 88px; }
.path { position: relative; padding: 0 var(--pad-l) var(--section); --c: 74px; }
.path__down { left: calc(var(--xl) - 3px); top: 0; height: calc(var(--c) + 3px); }
.path__elbow-a { left: var(--xl); top: var(--c); }
.path__run { left: calc(var(--xl) - 3px); right: calc(var(--xl) - 3px); top: calc(var(--c) - 3px); }
.path__elbow-b { left: calc(100% - var(--xl)); top: var(--c); }
.path__out { left: calc(100% - var(--xl) - 3px); top: calc(var(--c) - 3px); bottom: 0; }
.path__steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.step { display: flex; flex-direction: column; align-items: center; }
.step__disc { position: relative; width: 148px; height: 148px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(30,31,29,.05), 0 24px 48px -18px rgba(30,31,29,.22); }
.step__disc::before { content: ""; position: absolute; inset: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30,31,29,.07), rgba(30,31,29,0)); z-index: -1; }
.step__disc svg { width: 46px; height: 46px; fill: var(--copper); }
.step__n { position: absolute; left: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%; background: var(--graphite); color: var(--white); display: grid; place-items: center; font: 400 12px/1 var(--f-mono); }
.step h3 { margin-top: 36px; font: 700 28px/1.1 var(--f-display); letter-spacing: -0.035em; }
.step p { margin-top: 10px; color: var(--steel-dk); max-width: 22em; }

/* ---------- HOME 04 work: corner-growth reveals (Vertical, 2-tile) ---------- */
.work { position: relative; padding: var(--section) 0; }
.work__rail { left: calc(100% - var(--xl) - 3px); top: 0; bottom: 0; }
.work__rail-m { display: none; }
.work__tee { left: calc(100% - var(--xl)); top: calc(var(--section) + 9px); }
.work__grid { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 72px 28px; align-items: start; }
.job--a { grid-column: 1 / 8; }
.job--b { grid-column: 8 / 13; margin-top: 140px; }
.job--c { grid-column: 1 / 6; margin-top: -170px; }
.job--d { grid-column: 7 / 13; margin-top: 90px; }
.grow { position: relative; overflow: hidden; background: var(--ground); }
.job--a .grow { aspect-ratio: 4 / 3; }
.job--b .grow { aspect-ratio: 4 / 5; }
.job--c .grow { aspect-ratio: 1 / 1; }
.job--d .grow { aspect-ratio: 3 / 2; }
.grow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grow.is-whole .grow__b { display: none; }
.job__cap { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin-top: 20px; align-items: baseline; }
.job__cap .label { grid-row: 1 / 3; padding-top: 6px; }
.job__name { font: 700 30px/1.05 var(--f-display); letter-spacing: -0.035em; }
.job__line { color: var(--steel-dk); font-size: 16px; }

/* ---------- HOME 05 proof: set on the line ---------- */
.proof { position: relative; }
.proof__top { position: relative; padding: 24px var(--pad-l) 72px; }
.proof__drop { left: calc(100% - var(--xl) - 3px); top: 0; bottom: 0; }
.proof__drop-m { display: none; }
.quote { margin-top: 36px; }
.quote p { font: 600 clamp(34px, 4.9vw, 80px)/1 var(--f-display); letter-spacing: -0.045em; max-width: 25ch; text-indent: -0.4em; }
.quote footer { margin-top: 28px; }
.proof__line { position: relative; height: 140px; }
.proof__run { left: calc(var(--xl) - 3px); right: calc(var(--xl) - 3px); top: 67px; }
.proof__elbow-a { left: calc(100% - var(--xl)); top: 70px; }
.proof__elbow-b { left: var(--xl); top: 70px; }
.gauge { position: absolute; z-index: 2; top: 0; right: calc(var(--pad-l) + 4%); height: 140px; display: flex; align-items: center; gap: 22px; padding: 0 24px; background: var(--ground); }
.gauge__dial { width: 140px; height: 140px; }
.gauge__face { fill: var(--white); stroke: var(--graphite); stroke-width: 3; }
.gauge__arc { fill: none; stroke: var(--copper); stroke-width: 3; }
.gauge__ticks path { stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; fill: none; }
.gauge__needle { transform-origin: 60px 60px; transform: rotate(128deg); transition: transform 1600ms var(--ease-enter) 300ms; }
.gauge__needle path { stroke: var(--copper); stroke-width: 4; stroke-linecap: round; }
.gauge__needle circle { fill: var(--graphite); }
.gauge__read { display: flex; flex-direction: column; gap: 6px; }
.gauge__num { font: 700 112px/.82 var(--f-display); letter-spacing: -0.06em; }
.proof__foot { position: relative; padding-top: 12px; padding-bottom: var(--section); }
.proof__rail { left: calc(var(--xl) - 3px); top: -73px; bottom: 0; }
.proof__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 1100px; }
.minor { position: relative; padding: 40px 0 0 32px; }
.minor__stub { position: absolute; left: 0; top: -85px; height: 109px; width: var(--pipe); background: var(--copper); }
.minor__stub::after { content: ""; position: absolute; left: -5px; bottom: -4px; width: 16px; height: 10px; border-radius: 2px; background: var(--graphite); }
.minor p { font: 600 26px/1.25 var(--f-display); letter-spacing: -0.025em; max-width: 24ch; }
.minor footer { margin-top: 16px; }

/* ---------- the close: ball valve and the copper flood (every page but Contact) ---------- */
.book { position: relative; }
.book__valve { position: absolute; z-index: 4; left: calc(var(--xl) - 24px); top: -24px; width: 48px; height: 48px; }
.book__valve .valve__body { fill: var(--graphite); stroke: var(--graphite); }
.book__valve .valve__stem { stroke: var(--graphite); }
.book__flood { background: var(--copper-fill); color: var(--white); padding: calc(var(--section) + 8px) 0 var(--section); }
.book__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.book .label--light, .book .label--light b { color: var(--white); }
.book__title { margin-top: 24px; font: 700 clamp(84px, 13vw, 220px)/.84 var(--f-display); letter-spacing: -0.06em; }
.book__contact { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
.book__tel { font: 700 clamp(36px, 3.4vw, 56px)/1 var(--f-display); letter-spacing: -0.04em; width: max-content; max-width: 100%; }
@media (hover: hover) { .book__tel:hover, .book__mail:hover { color: var(--graphite); } }
.book__contact p { font-size: 17px; color: var(--white); }
.book__mail { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; width: max-content; max-width: 100%; }
/* short close (Services, About): about 60% of Home's */
.book--short .book__flood { padding: calc(var(--section) * .75 + 8px) 0 calc(var(--section) * .75); }
.book--short .book__in { align-items: end; }
.book__title--short { font-size: clamp(56px, 8.4vw, 140px); line-height: .9; letter-spacing: -0.05em; }
.book__side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.book__side p { font-size: 19px; line-height: 1.5; max-width: 26em; }

/* ---------- forms (Home close, Contact) ---------- */
.form { background: var(--ground); color: var(--graphite); padding: 36px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; border: 0; border-bottom: 1.5px solid var(--graphite); background: transparent; padding: 8px 0 10px; font-size: 18px; border-radius: 0; transition: border-color var(--dur-hover) var(--ease-hover); }
.field textarea { resize: vertical; min-height: 84px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--copper); }
.field [aria-invalid="true"] { border-bottom-color: var(--copper-dk); border-bottom-width: 2px; }
.req { color: var(--copper-dk); }
.form__end { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 6px; }
.form__note { font-size: 14px; color: var(--steel-dk); max-width: 26em; }
.form__note a { color: var(--copper-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form__msg { font: 600 15px/1.45 var(--f-body); color: var(--copper-dk); }
.form__msg a { text-decoration: underline; text-underline-offset: 3px; }
.form__done { font: 600 20px/1.35 var(--f-display); color: var(--graphite); }
.form__demo { font: 400 10px/1.5 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel-dk); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* segmented control on radios (Contact urgency) */
.seg { display: flex; flex-direction: column; gap: 10px; }
.seg__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--graphite); border-radius: 999px; overflow: hidden; }
.seg__opts label { position: relative; }
.seg__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opts span { display: grid; place-items: center; height: 46px; padding: 0 10px; font: 600 15px/1.1 var(--f-body); text-align: center; border-left: 1.5px solid var(--graphite); transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.seg__opts label:first-child span { border-left: 0; }
.seg__opts input:checked + span { background: var(--graphite); color: var(--white); }
.seg__opts input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: -4px; }
.form__now { display: none; font: 600 16px/1.4 var(--f-body); padding: 14px 18px; background: var(--graphite); color: var(--white); }
.form__now a { color: var(--copper-lt); white-space: nowrap; }
.form:has(input[name="urgency"][value="Today"]:checked) .form__now { display: block; }

/* ---------- footer: column footer ---------- */
.foot { background: var(--graphite); color: var(--white); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding: 80px var(--gutter) 56px var(--pad-l); }
.foot__brand p { margin-top: 20px; color: var(--mist); max-width: 26em; font-size: 16px; }
.foot__col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.foot__col .label { color: var(--steel); margin-bottom: 6px; }
.foot__col a { width: max-content; max-width: 100%; transition: color var(--dur-hover) var(--ease-hover); overflow-wrap: anywhere; }
@media (hover: hover) { .foot__col a:hover { color: var(--copper-lt); } }
.foot__base { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 22px var(--gutter) 28px var(--pad-l); border-top: 1px solid var(--rule-dk); font: 400 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }

/* =====================================================================
   SERVICES: the manifold
   ===================================================================== */
.shero { position: relative; padding-top: calc(var(--nav-h) + 88px); padding-bottom: var(--section); }
.mani { position: relative; margin-top: 80px; padding-top: 54px; }
.mani__main { left: calc(var(--xl) - 3px); right: calc(var(--gutter) + 6px); top: 0; }
.mani__elbow { left: var(--xl); top: 3px; }
.mani__cap { left: calc(100% - var(--gutter) - 6px); top: 3px; }
.mani__rail { left: calc(var(--xl) - 3px); top: 0; bottom: calc(-1 * var(--section)); }
.sindex { margin: 0 var(--gutter) 0 var(--pad-l); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--rule); border-right: 0; }
.scell { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 212px; padding: 26px 24px 24px; border-right: 1px solid var(--rule); transition: background-color var(--dur-hover) var(--ease-hover); }
.scell__drop { left: 25px; top: -54px; height: 54px; }
.scell__tee { left: 28px; top: -51px; }
.scell__name { display: block; margin-top: 14px; font: 700 clamp(22px, 1.8vw, 28px)/1.02 var(--f-display); letter-spacing: -0.035em; transition: color var(--dur-hover) var(--ease-hover); }
.scell__status { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--steel-dk); }
.scell__status svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--copper-dk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scell .stub { display: none; }
@media (hover: hover) { .scell:hover { background: var(--ground-2); } .scell:hover .scell__name { color: var(--copper); } }

/* branch sections share a rhythm; each section owns its composition */
.sv { position: relative; padding: var(--section) 0; }
.sv__label { position: relative; }
.sv__label + * { margin-top: 28px; }
.sv__h { font: 700 clamp(44px, 5.6vw, 92px)/.94 var(--f-display); letter-spacing: -0.045em; }
.sv__lede { margin-top: 24px; }

/* S1 emergency: isolation valve band */
.sv--emerg .vglyph { position: absolute; z-index: 3; left: calc(var(--xl) - 24px); top: calc(var(--section) - 18px); }
.emerg__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 36px; font: 600 17px/1.2 var(--f-body); }
.emerg__status .label { color: var(--mist); }
.emerg__num { display: block; width: max-content; max-width: 100%; margin-top: 18px; font: 700 clamp(48px, 6vw, 96px)/.9 var(--f-display); letter-spacing: -0.04em; transition: color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) { .emerg__num:hover { color: var(--copper-lt); } }
.emerg__sub { margin-top: 16px; color: var(--mist); font-size: 16px; }
.todo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--rule-dk); }
.todo__grid li { padding: 22px 24px 0 0; }
.todo__grid li + li { padding-left: 24px; border-left: 1px solid var(--rule-dk); }
.todo__grid h3 { font: 700 22px/1.1 var(--f-display); letter-spacing: -0.03em; }
.todo__grid p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--mist); }
.todo__grid b { color: var(--white); font-weight: 600; white-space: nowrap; }

/* S2 drains: the camera run */
.drains { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.stations { margin-top: 56px; }
.station { position: relative; padding: 56px 0 72px; border-top: 1px solid var(--rule); min-height: 240px; }
.station .stub { top: 64px; }
.station__m { color: var(--steel-dk); }
.station__m b { color: var(--copper-dk); }
.station h3 { margin-top: 12px; font: 700 clamp(28px, 2.6vw, 42px)/1 var(--f-display); letter-spacing: -0.04em; }
.station p { margin-top: 12px; color: var(--steel-dk); max-width: 32em; }
.station blockquote { margin-top: 28px; padding: 22px 0 0 24px; border-left: 2px solid var(--copper); }
.station blockquote p { margin: 0; font: 600 26px/1.25 var(--f-display); letter-spacing: -0.025em; color: var(--graphite); max-width: 24ch; }
.station blockquote footer { margin-top: 14px; }
.cam { position: absolute; z-index: 4; left: calc(var(--xl) - 9px); top: 0; bottom: 0; width: 18px; pointer-events: none; }
.cam__head { position: sticky; top: calc(58svh - 28px); display: block; width: 18px; height: 28px; border-radius: 9px; background: var(--graphite); box-shadow: 0 0 0 3px var(--ground); }
.cam__head::after { content: ""; position: absolute; left: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: #3A3B38; box-shadow: inset 0 0 0 2.5px var(--copper-lt); }

/* S3 hot water: same-day log */
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.types li { padding: 20px 18px 22px 0; }
.types li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.types b { display: block; font: 700 22px/1.1 var(--f-display); letter-spacing: -0.03em; }
.types span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--steel-dk); }
.log { position: relative; margin-top: 52px; padding-top: 34px; }
.log__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.log__pipe { left: 0; right: 0; top: 8px; }
.log__pipe::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 16px; border-radius: 2px; background: var(--graphite); }
.log li { position: relative; }
.log .fit { left: 11px; top: -15px; }
.log__t { display: block; font: 700 clamp(30px, 2.8vw, 44px)/1 var(--f-display); letter-spacing: -0.04em; }
.log__k { display: block; margin-top: 10px; }
.log__k b { color: var(--copper-dk); font-weight: 400; }

/* S4 renovations: rough-in to fit-off, one pipe through both photos */
.sv--ren { padding-top: 0; padding-bottom: 0; }
.ren__head { position: relative; padding-top: var(--section); padding-bottom: 80px; }
.ren__pair { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; padding: 0 calc(var(--gutter) + 22px); }
.ren__pair figure { position: relative; }
.ren__tag { position: absolute; z-index: 3; left: 20px; top: calc(50% + 14px); background: var(--ground); padding: 6px 10px; color: var(--graphite); }
.ren__v1 { left: calc(var(--xl) - 3px); top: 0; height: calc(50% + 3px); }
.ren__elb1 { left: var(--xl); top: 50%; }
.ren__h1 { left: calc(var(--xl) - 3px); right: calc(var(--xl) - 3px); top: calc(50% - 3px); z-index: 2; }
.ren__elb2 { left: calc(100% - var(--xl)); top: 50%; }
.ren__v2 { left: calc(100% - var(--xl) - 3px); top: calc(50% - 3px); bottom: -63px; }
.ren__foot { position: relative; padding-top: 140px; padding-bottom: var(--section); }
.ren__h2 { left: calc(var(--xl) - 3px); right: calc(var(--xl) - 3px); top: 57px; }
.ren__elb3 { left: calc(100% - var(--xl)); top: 60px; }
.ren__elb4 { left: var(--xl); top: 60px; }
.ren__rail { left: calc(var(--xl) - 3px); top: 57px; bottom: 0; }
.ren__copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ren__statement { font: 600 clamp(28px, 3vw, 46px)/1.08 var(--f-display); letter-spacing: -0.035em; max-width: 20ch; }
.ren__list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ren__list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.ren__list .label { padding-top: 3px; }

/* S5 gas: the compliance tag */
.gas__tee { left: var(--xl); top: -51px; }
.tag { position: relative; margin-top: 24px; background: var(--graphite-2); border: 1px solid var(--rule-dk); padding: 40px 22px 24px; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px); }
.tag::before { content: ""; position: absolute; left: calc(50% - 7px); top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--graphite); box-shadow: inset 0 0 0 2px var(--copper-lt); }
.tag__wire { position: absolute; left: calc(50% - 1px); top: -51px; width: 2px; height: 94px; background: var(--mist-2); z-index: 1; }
.tag dl { display: flex; flex-direction: column; }
.tag dt { font: 400 10px/1.5 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mist-2); padding-top: 14px; border-top: 1px dashed #4A4B48; }
.tag dt:first-child { border-top: 0; padding-top: 0; }
.tag dd { font: 400 12px/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--white); padding: 4px 0 14px; }
.tag dd.is-lit { color: var(--copper-lt); }
.appl { border-top: 1px solid var(--rule-dk); }
.appl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-dk); }
.appl b { font: 700 24px/1.1 var(--f-display); letter-spacing: -0.03em; }
.appl span { font-size: 15px; color: var(--mist); grid-column: 1 / -1; }

/* S6 leak: the pressure hold */
.hold { position: relative; margin-top: 44px; }
.hold__cap { display: flex; justify-content: space-between; gap: 16px; }
.hold table { width: 100%; margin-top: 12px; border-collapse: collapse; font: 400 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.hold td { height: 56px; border-top: 1px solid var(--rule); padding: 0 12px 0 0; vertical-align: middle; }
.hold tr:last-child td { border-bottom: 1px solid var(--rule); }
.hold td:nth-child(2) { font: 700 26px/1 var(--f-display); letter-spacing: -0.03em; text-transform: none; }
.hold td:last-child { text-align: right; color: var(--steel-dk); }
.hold tr.is-leak td { color: var(--copper-dk); }
.hold__v { left: -24px; top: calc(var(--row1) - 3px); height: calc(168px + 6px); }
.hold__elb { left: -21px; top: var(--row1); }
.hold__cap-fit { left: -21px; top: calc(var(--row1) + 171px); }
.hold { --row1: 57px; }
.methods { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.methods b { display: block; font: 700 20px/1.1 var(--f-display); letter-spacing: -0.03em; }
.methods span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--steel-dk); }

/* =====================================================================
   ABOUT: the service line
   ===================================================================== */
.area { position: relative; padding-bottom: 0; --tx: var(--xh); }
.area__head { position: relative; padding-top: 100px; padding-bottom: 88px; }
.bay { position: relative; height: 320px; padding: 0 var(--gutter); }
.bay__line { left: calc(var(--xl) - 3px); right: calc(var(--xl) - 3px); top: 157px; }
.bay__elb { left: calc(100% - var(--xl)); top: 160px; }
.bay__drop { left: calc(100% - var(--xl) - 3px); top: 157px; bottom: -120px; }
.bay__stations { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 100%; }
.stn { position: relative; }
.stn .fit { left: 50%; top: 160px; }
.stn__t { position: absolute; left: 0; right: 0; text-align: center; padding: 0 6px; }
.stn--up .stn__t { bottom: calc(100% - 132px); }
.stn--dn .stn__t { top: 188px; }
.stn__t::before { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; height: 16px; background: var(--rule-dk); }
.stn--up .stn__t::before { bottom: -22px; }
.stn--dn .stn__t::before { top: -22px; }
.stn__n { display: block; font: 700 clamp(20px, 1.8vw, 28px)/1 var(--f-display); letter-spacing: -0.035em; }
.stn__k { display: block; margin-top: 8px; font: 400 10px/1.45 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mist); }
.stn__k b { color: var(--copper-lt); font-weight: 400; }
.stn--end .fit { left: calc(100% - 3px); top: 262px; }
.stn--end .stn__t { top: 244px; left: auto; right: 30px; width: max-content; text-align: right; padding: 0; }
.stn--end .stn__t::before { display: none; }
.area__foot { height: 120px; position: relative; }
.area__rail { top: 61px; bottom: -160px; }
.area__elb { left: var(--xl); top: 160px; }
.area__rail-m { display: none; left: calc(var(--xl) - 3px); top: 61px; bottom: 0; }
.hero--about .hero__title { font-size: clamp(56px, 8.4vw, 140px); }

.onep { position: relative; padding-bottom: var(--section); --tx: calc(100% - var(--xl)); }
.onep__head { position: relative; padding-top: 100px; }
.card { position: relative; background: var(--ground); border: 1px solid var(--rule); padding: 32px 36px 28px; }
.card .stub { top: 44px; left: calc(var(--xl) - var(--pad-l) - 1px); width: calc(var(--pad-l) - var(--xl) - 14px); }
.card__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px dashed var(--rule); }
.card__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px dashed var(--rule); }
.card__rows li:last-child { border-bottom: 0; }
.card__rows h3 { font: 700 26px/1.05 var(--f-display); letter-spacing: -0.035em; }
.card__rows p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--steel-dk); }
.sign { justify-self: end; display: grid; place-items: center; width: 70px; height: 46px; border: 2px solid var(--copper-dk); border-radius: 3px; color: var(--copper-dk); font: 700 22px/1 var(--f-display); letter-spacing: -0.02em; transform: rotate(-6deg); }
.card__foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px dashed var(--rule); }

.std { position: relative; padding: var(--section) 0 calc(var(--section) + 40px); }
.std__union { left: var(--xl); top: calc(var(--section) + 8px); }
.std .quote { margin-top: 36px; }

/* =====================================================================
   CONTACT: the split
   ===================================================================== */
.chero { position: relative; padding-bottom: 88px; --halo: var(--graphite); }
.chero__head { position: relative; padding-top: calc(var(--nav-h) + 88px); }
.chero__inlet { left: calc(var(--xl) - 3px); top: 0; bottom: -43px; }
.split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 104px; }
.split__tee { left: var(--xl); top: 40px; }
.split__h { left: calc(var(--xl) - 3px); width: calc(100% - var(--gutter) / 2 - var(--xl) + 6px); top: 37px; }
.split__elb { left: calc(100% - var(--gutter) / 2); top: 40px; }
.split__r { left: calc(100% - var(--gutter) / 2 - 3px); top: 37px; bottom: -88px; }
.split__l { left: calc(var(--xl) - 3px); top: 37px; height: 63px; }
.split .vglyph { position: absolute; z-index: 3; left: calc(var(--xl) - 24px); top: 100px; }
.branch__num { display: block; width: max-content; max-width: 100%; margin-top: 14px; font: 700 clamp(48px, 6vw, 96px)/.9 var(--f-display); letter-spacing: -0.04em; transition: color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) { .branch__num:hover { color: var(--copper-lt); } }
.branch__status { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 600 17px/1.2 var(--f-body); }
.branch__line { margin-top: 18px; font: 700 24px/1.15 var(--f-display); letter-spacing: -0.03em; max-width: 20ch; }
.branch__sub { margin-top: 10px; color: var(--mist); font-size: 16px; max-width: 28em; }
.branch--r { padding-right: calc(var(--gutter)); }
.branch--r .btn { margin-top: 28px; }

.cq { position: relative; --by: calc(100% - var(--section) - 63px); --bx: calc(100% - var(--gutter) - 63px); --vx: calc(100% - var(--gutter) / 2); }
.cq__flood { --fx: calc(100% - var(--gutter) / 2); background: var(--copper-fill); color: var(--white); padding: var(--section) 0; }
.cq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: end; }
.cq .label, .cq .label b { color: var(--white); }
.cq__h { margin-top: 24px; font: 700 clamp(44px, 5.6vw, 92px)/.94 var(--f-display); letter-spacing: -0.045em; }
.cq__facts { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.35); }
.cq__facts li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 16px; }
.cq__facts .label { padding-top: 3px; }
.cq__form { align-self: end; }
.cq .form .label { color: var(--steel-dk); }
.cq__v, .cq__h2 { z-index: 5; }
.cq__v { left: calc(var(--vx) - 3px); top: 0; height: calc(var(--by) + 3px); }
.cq__elb { left: var(--vx); top: var(--by); z-index: 6; }
.cq__h2 { left: var(--bx); width: calc(var(--vx) - var(--bx) + 3px); top: calc(var(--by) - 3px); }
.cq__valve { position: absolute; z-index: 7; width: 28px; height: 28px; left: calc(var(--vx) - (var(--vx) - var(--bx)) / 2 - 14px); top: calc(var(--by) - 14px); pointer-events: none; }
.cq__valve svg { width: 100%; height: 100%; overflow: visible; }
.cq__valve .valve__body { fill: var(--graphite); stroke: var(--graphite); }
.cq__valve .valve__stem { stroke: var(--graphite); transform-origin: 20px 20px; transition: transform 600ms var(--ease-enter); }
.cq.is-sent .cq__valve .valve__stem { transform: rotate(90deg); }
/* on the copper flood a copper pipe disappears: the run is graphite here (DECISIONS: flagged) */
.cq .pipe::before { background: var(--graphite); }
.cq .fit { background: var(--graphite); box-shadow: 0 0 0 3px var(--copper-fill); }

.meter { position: relative; padding: var(--section) 0; }
.meter__plate { max-width: calc(760px + var(--pad-l)); margin-top: 48px; border-top: 1px solid var(--rule); }
.meter__plate > div { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.meter__plate dt { padding-top: 4px; }
.meter__plate dd { font: 600 19px/1.4 var(--f-body); }
.meter__plate dd a:not(.btn) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.meter__plate dd a.big { font: 700 clamp(30px, 2.8vw, 44px)/1 var(--f-display); letter-spacing: -0.035em; text-decoration: none; }
.meter__plate dd small { display: block; margin-top: 4px; font: 400 15px/1.45 var(--f-body); color: var(--steel-dk); }
.meter__plate .stub { top: 34px; }
.openst { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font: 400 11px/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel-dk); vertical-align: middle; }
.openst .dot { background: var(--steel); }
.openst.is-open .dot { background: var(--live); }
.meter__cap { left: var(--xl); bottom: 0; top: auto; margin: 0 0 0 -8px; }

/* =====================================================================
   PRIVACY: the clause rail (the quiet page)
   ===================================================================== */
.phead { position: relative; padding-top: calc(var(--nav-h) + 96px); padding-bottom: 56px; }
.phead__inlet { left: calc(var(--xl) - 3px); top: 0; bottom: 0; }
.phead p.lede { margin-top: 24px; }
.clauses { position: relative; padding-bottom: var(--section); }
.clauses__rail { left: calc(var(--xl) - 3px); top: 0; bottom: 28px; }
.clauses__cap { left: var(--xl); bottom: 22px; top: auto; margin-top: 0; }
.clause { position: relative; padding-top: 44px; padding-bottom: 12px; }
.clause::before { content: ""; position: absolute; top: 0; left: var(--pad-l); width: min(calc(100% - var(--pad-l) - var(--gutter)), 68ch); border-top: 1px solid var(--rule); }
.clauses > .clause:first-of-type::before { display: none; }
.clause .fit { left: var(--xl); top: 52px; }
.clause h2 { margin-top: 10px; font: 700 clamp(26px, 2.4vw, 36px)/1.05 var(--f-display); letter-spacing: -0.035em; }
.clause p, .clause li { font-size: 17px; line-height: 1.7; max-width: 68ch; }
.clause p { margin-top: 14px; }
.clause ul { margin-top: 14px; padding-left: 1.1em; list-style: square; }
.clause li::marker { color: var(--copper-dk); }
.clause a { color: var(--copper-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   404: the dead leg
   ===================================================================== */
.dead { position: relative; min-height: max(100svh, 640px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 72px) var(--gutter) 200px var(--pad-l); background: var(--graphite); color: var(--white); --halo: var(--graphite); }
.dead__h { margin-top: 26px; font: 700 clamp(48px, 7vw, 112px)/.92 var(--f-display); letter-spacing: -0.05em; max-width: 12ch; }
.dead__p { margin-top: 24px; max-width: 32em; color: var(--mist); font-size: 19px; }
.dead__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.dead__tel { font: 700 24px/1 var(--f-display); letter-spacing: -0.03em; }
.dead__v { left: calc(var(--xl) - 3px); top: 0; bottom: 77px; }
.dead__elb { left: var(--xl); top: auto; bottom: 80px; margin: 0 0 -10px -10px; }
.dead__h2 { left: calc(var(--xl) - 3px); width: min(44vw, 560px); bottom: 77px; }
.dead__cap { left: calc(var(--xl) + min(44vw, 560px)); bottom: 80px; top: auto; margin: 0 0 -8px -3px; }
.dead__capk { position: absolute; left: calc(var(--xl) + min(44vw, 560px) - 60px); bottom: 100px; }


/* =====================================================================
   Composed sections (house rule 2026-09-22: no flat ground holding a
   text block and an image). Each branch composes its photo differently.
   ===================================================================== */
/* S1: photo bled full height off the right edge; the "what to do" panel laid over it */
.sv--emerg { overflow: clip; }
.emerg__photo { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 48%; background: var(--graphite-2); }
.emerg__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.emerg__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--graphite) 0%, rgba(30,31,29,.7) 24%, rgba(30,31,29,.15) 62%, rgba(30,31,29,.05) 100%), linear-gradient(0deg, rgba(30,31,29,.8) 0%, rgba(30,31,29,0) 38%); }
.emerg { position: relative; z-index: 2; }
.emerg__main { max-width: 640px; }
.todo { margin-top: 64px; max-width: 1080px; background: rgba(37,38,36,.96); border: 1px solid var(--rule-dk); padding: 26px 28px 28px; }

/* S2: the sticky photo bled to the edge, framed as the camera feed */
.drains__photo { position: sticky; top: calc(var(--nav-h) + 32px); height: min(calc(100svh - var(--nav-h) - 64px), 820px); margin-right: calc(-1 * var(--gutter)); }
.hud { position: absolute; z-index: 2; inset: 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; pointer-events: none; }
.hud::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(#fff, #fff) left top / 24px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 24px no-repeat,
  linear-gradient(#fff, #fff) right top / 24px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 24px no-repeat,
  linear-gradient(#fff, #fff) left bottom / 24px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 24px no-repeat,
  linear-gradient(#fff, #fff) right bottom / 24px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 24px no-repeat; opacity: .9; }
.hud__c { align-self: start; justify-self: start; margin: 12px; padding: 7px 9px; background: rgba(18,19,17,.84); color: var(--white); font: 400 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.hud__c:nth-child(2) { justify-self: end; }
.hud__c:nth-child(3) { grid-row: 3; align-self: end; }
.hud__c:nth-child(4) { grid-row: 3; grid-column: 2; align-self: end; justify-self: end; color: var(--copper-lt); }
.hud__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--copper-lt); }

/* S3: a full-width photo band; the day log on a panel laid over its lower edge */
.hot__band { margin-top: 48px; height: clamp(320px, 38vw, 600px); background: var(--graphite); }
.hot__band img { object-position: 50% 58%; }
.hot__panel-wrap { position: relative; z-index: 2; margin-top: -180px; }
.hot__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; background: var(--ground); border: 1px solid var(--rule); padding: 44px 48px 48px; box-shadow: 0 40px 70px -50px rgba(30,31,29,.45); }
.hot__panel .types { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.hot__panel .types li:nth-child(3) { padding-left: 0; border-left: 0; }
.hot__panel .types li:nth-child(n+3) { border-top: 1px solid var(--rule); }
.hot__panel .log { margin-top: 30px; }

/* S5: the photo bleeds off the right and bottom edges; the tag hangs over its edge */
.gas { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-top: 110px; min-height: 600px; }
.gas__photo { position: absolute; z-index: 0; right: 0; top: 0; bottom: calc(-1 * var(--section)); width: 46%; background: var(--graphite-2); }
.gas__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.gas__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,31,29,.6) 0%, rgba(30,31,29,0) 45%); }
.appl { position: relative; z-index: 2; grid-column: 1; }
.gas__branch { top: -54px; left: calc(var(--xl) - 3px); width: calc(54% - var(--xl) + 3px); z-index: 2; }
.gas__elb { left: 54%; top: -51px; }
.tag__wrap { position: absolute; z-index: 3; top: 0; left: calc(54% - 130px); width: 260px; }

/* S6: the photo bleeds off the left edge under the rail; the pressure hold overlaps it */
.sv--leak { overflow: clip; }
.leak__photo { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 46%; background: var(--graphite-2); }
.leak__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.leak { position: relative; z-index: 2; padding: 0 var(--gutter) 0 36%; }
.leak__panel { background: var(--ground); border: 1px solid var(--rule); padding: 48px 52px 52px; box-shadow: 0 40px 70px -50px rgba(30,31,29,.45); }
.leak__panel .sv__label + * { margin-top: 28px; }
/* the branch runs from the rail, over the photo, into the panel: geometry in the hold's own units */
.hold { --reach: calc((100% + var(--gutter) + 106px) * .5625 + 53px - var(--xl)); }
.hold__stub { left: calc(-1 * var(--reach) - 3px); width: calc(var(--reach) - 18px); top: calc(var(--row1) - 3px); }
.hold__tee { left: calc(-1 * var(--reach)); top: var(--row1); }

/* A2: the job card laid over a photo that bleeds off the right edge */
.onep__grid { position: relative; margin-top: 64px; }
.onep__photo { position: absolute; z-index: 0; right: 0; top: -48px; bottom: -48px; width: 50%; background: var(--graphite-2); }
.onep__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.card { z-index: 2; width: min(62%, 820px); box-shadow: 0 40px 80px -50px rgba(30,31,29,.5); }

@media (max-width: 1100px) {
  .emerg__main { max-width: 58%; }
  .drains { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 40px; }
  .emerg__photo { width: 44%; }
  .hot__panel { grid-template-columns: 1fr; gap: 36px; }
  .tag__wrap { left: calc(56% - 110px); width: 220px; }
  .gas__branch { width: calc(56% - var(--xl) + 3px); }
  .gas__elb { left: 56%; }
  .gas__photo { width: 44%; }
  .card { width: 70%; }
}
@media (max-width: 767px) {
  .drains { grid-template-columns: 1fr; gap: 40px; }
  .sv--emerg { padding-top: 0; }
  .emerg__photo { position: relative; width: auto; height: 300px; }
  .emerg__photo::after { background: linear-gradient(0deg, var(--graphite) 0%, rgba(30,31,29,0) 50%); }
  .sv--emerg .vglyph { top: 346px; width: 40px; height: 40px; left: calc(var(--xl) - 20px); }
  .emerg { padding-top: 56px; }
  .emerg__main { max-width: none; }
  .todo { margin-top: 40px; padding: 20px 18px; margin-right: calc(-1 * var(--gutter) + 8px); }
  .drains__photo { position: relative; top: auto; height: 118vw; max-height: 520px; order: -1; margin-right: calc(-1 * var(--gutter)); }
  .hot__band { margin-top: 32px; height: 260px; }
  .hot__panel-wrap { margin-top: -80px; }
  .hot__panel { padding: 24px 20px 28px; }
  .gas { grid-template-columns: 1fr; margin-top: 40px; gap: 28px; min-height: 0; }
  .gas__photo { position: relative; width: auto; height: 300px; bottom: auto; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--pad-l)); }
  .gas__branch, .gas__elb, .tag__wire { display: none; }
  .tag__wrap { position: relative; left: auto; top: auto; width: auto; max-width: 320px; }
  .leak__photo { position: relative; width: auto; height: 300px; }
  .sv--leak { padding-top: 0; }
  .sv--leak .fit--head { top: calc(300px + 48px + 9px); }
  .leak { padding: 0 var(--gutter) 0 var(--pad-l); margin-top: -60px; }
  .leak__panel { padding: 24px 20px 28px; }
  .hold { --reach: calc(var(--pad-l) + 21px - var(--xl)); }
  .hold__stub { width: calc(var(--reach) + 3px); }
  .onep__grid { margin-top: 44px; }
  .onep__photo { position: relative; top: auto; bottom: auto; width: auto; height: 300px; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--pad-l)); }
  .card { width: auto; margin-top: -64px; }
  .plate { position: relative; left: auto; top: auto; order: 1; width: auto; max-width: 300px; align-self: flex-end; margin: 0 calc(100vw - var(--gutter) - var(--xh) + 16px) 0 0; border-left: 1px solid var(--rule-dk); border-right: 0; padding: 18px 26px 18px 18px; }
  .plate__pin { left: auto; right: -2px; }
  .plate dl { grid-template-columns: 1fr; gap: 2px; }
  .plate dd { margin-bottom: 8px; font-size: 14px; }
}

/* =====================================================================
   Motion. Start states only under .js and only without reduced motion,
   so the page is complete if the script or the timeline support is missing.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* hero load sequence: 3 to 5 blocks, 200ms apart */
  .js .enter { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay: calc(250ms + var(--i, 0) * var(--stagger)); }
  .js .enter--big { transform: translateY(80px); }
  .js.is-loaded .enter { opacity: 1; transform: none; }

  /* load-drawn pipes and fittings (hero inlets, underlines, the manifold, the split) */
  .js .pipe--load.pipe--h::before { transform: scaleX(0); transition: transform 1000ms var(--ease-enter) var(--ld, 750ms); }
  .js .pipe--load.pipe--v::before { transform: scaleY(0); transition: transform 1000ms var(--ease-enter) var(--ld, 1450ms); }
  .js .fit--load { opacity: 0; transform: scale(.3); transition: opacity 400ms var(--ease-enter) var(--ld, 1350ms), transform 600ms var(--ease-enter) var(--ld, 1350ms); }
  .js.is-loaded .pipe--load::before { transform: none; }
  .js.is-loaded .fit--load { opacity: 1; transform: none; }
  .dot--live { animation: live 2.4s var(--ease-hover) 2; }
  @keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  /* scroll reveal primitive */
  .js .rv { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay: calc(var(--d, 0) * var(--stagger)); }
  .js .rv.is-in { opacity: 1; transform: none; }

  /* fittings snap on as the line reaches them */
  .js main .fit:not(.fit--load):not(.fit--static) { opacity: 0; transform: scale(.3); transition: opacity 400ms var(--ease-enter), transform 600ms var(--ease-enter); }
  .js main .fit.is-in { opacity: 1; transform: none; }

  /* gauge needle sweeps up to 4.9 */
  .js .gauge__needle { transform: rotate(-135deg); }
  .js .gauge.is-in .gauge__needle { transform: rotate(128deg); }

  /* corner-growth (bank recipe): two copies, each a tile growing from its own corner,
     triggered at 30% visible after decode; copy lands as the tiles complete; then one image */
  .js .grow__a, .js .grow__b { transition: clip-path 1600ms var(--ease-grow); }
  .js .grow__a { clip-path: inset(0 55% 55% 0); }
  .js .grow__b { clip-path: inset(55% 0 0 55%); transition-delay: 120ms; }
  .js .grow.is-in .grow__a, .js .grow.is-in .grow__b { clip-path: inset(0); }
  .js .grow.is-whole .grow__a { clip-path: none; transition: none; }
  .js .job__cap { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-enter) var(--ease-enter) 1400ms, transform var(--dur-enter) var(--ease-enter) 1400ms; }
  .js .job.is-in .job__cap { opacity: 1; transform: none; }

  /* Services S4: each photo wipes open along the pipe direction */
  .js [data-wipe] .frame { clip-path: inset(0 100% 0 0); transition: clip-path 1200ms var(--ease-enter); }
  .js [data-wipe] figure + figure .frame { transition-delay: 200ms; }
  .js [data-wipe].is-in .frame { clip-path: inset(0); }

  /* stamps: log times, pressure readings, job card initials */
  .js [data-stamps] .stamp { opacity: 0; scale: 1.4; transition: opacity 400ms var(--ease-enter), scale 400ms var(--ease-enter); transition-delay: calc(var(--s, 0) * var(--stagger)); }
  .js [data-stamps].is-in .stamp { opacity: 1; scale: 1; }

  /* the close: the valve opens and the band floods out from it (one triggered clip-path) */
  .js [data-flood] { clip-path: circle(0% at var(--fx, var(--xl)) 0); transition: clip-path 1400ms var(--ease-enter); }
  .js [data-flood].is-in { clip-path: circle(150% at var(--fx, var(--xl)) 0); }
}

/* THE SIGNATURE: the run draws itself as you scroll.
   Each segment owns a view timeline inset so the "tip" tracks a line 58% down the screen;
   the copper pseudo-element scales on transform only. entry-crossing keeps the tip on that
   line for rails of any length. Segments after a horizontal run (.pipe--late) start 220px
   later so the tip turns the corner instead of jumping. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js main .pipe:not(.pipe--load):not(.pipe--static) { view-timeline: --seg block; view-timeline-inset: 0px 42%; }
    .js main .pipe--v:not(.pipe--load):not(.pipe--static)::before { animation: pipe-y linear both; animation-timeline: --seg; animation-range: entry-crossing 0% entry-crossing 100%; }
    .js main .pipe--v.pipe--late:not(.pipe--load)::before { animation-range: entry-crossing 220px entry-crossing 100%; }
    .js main .pipe--h:not(.pipe--load):not(.pipe--static)::before { animation: pipe-x linear both; animation-timeline: --seg; animation-range: entry 0% entry 220px; }
    .js main .bay__line::before { animation-range: entry 0% cover 50%; }
  }
}
@keyframes pipe-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pipe-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Tablet
   ===================================================================== */
@media (max-width: 1100px) {
  .nav__links { gap: 24px; }
  .nav__tel-k { display: none; }
  .fixture__a { grid-template-columns: minmax(0, 1fr) 176px; gap: 8px 28px; }
  .fixture__code, .fixture__name, .fixture__line { grid-column: 1; }
  .fixture__img { grid-column: 2; grid-row: 1 / 4; }
  .build { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build__layer { position: static; height: auto; display: block; }
  .promise { min-height: 380px; margin-top: -1px; }
  .promise__top { order: 1; } .promise__bot { order: 3; }
  .promise__pipe { order: 2; position: relative; left: auto; right: auto; top: auto; width: auto; flex: none; margin: 32px -29px 32px -29px; }
  .promise__pipe--end { margin-right: 14px; }
  .build__layer:nth-child(odd) .promise__pipe { left: auto; margin-left: calc(var(--xl) - var(--pad-l) - 3px - 29px); }
  .gauge__num { font-size: 84px; }
  .gauge__dial { width: 120px; height: 120px; }
  .book__in { grid-template-columns: 1fr; gap: 48px; }
  .foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }

  /* services index: a ruled list with tees off the rail (tees cannot reach a second row) */
  .mani { margin-top: 56px; padding-top: 0; }
  .mani__main, .mani__elbow, .mani__cap, .scell__drop, .scell__tee { display: none; }
  .mani__rail { top: -40px; }
  .sindex { grid-template-columns: 1fr; border: 0; border-top: 1px solid var(--rule); }
  .scell { min-height: 0; border-right: 0; border-bottom: 1px solid var(--rule); padding: 22px 0; flex-direction: row; align-items: center; gap: 24px; }
  .scell .stub { display: block; }
  .scell__status { flex-direction: column; align-items: flex-end; text-align: right; max-width: 18em; }
  .todo__grid { grid-template-columns: 1fr; }
  .todo__grid li, .todo__grid li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule-dk); }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .types li:nth-child(3) { padding-left: 0; border-left: 0; }
  .types li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .methods { grid-template-columns: 1fr; }
  .ren__copy { grid-template-columns: 1fr; }
  .stn__k { font-size: 9px; }
  .cq__grid { grid-template-columns: 1fr; gap: 48px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .branch--r { padding-right: var(--gutter); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* =====================================================================
   Mobile: the run keeps to one left rail after each page's inlet
   ===================================================================== */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .nav__tel { display: none; }
  .nav .btn--sm { display: none; }
  .nav__cta { gap: 10px; }
  .nav__mob-tel { display: grid; }
  .head-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .h2, .sv__h, .cq__h { font-size: clamp(40px, 11.5vw, 56px); }
  .h1i { font-size: clamp(46px, 14vw, 72px); }
  .lede { font-size: 17px; }

  .hero { min-height: max(100svh, 700px); }
  .hero__media img { object-position: 42% 50%; }
  .hero__media::after { background:
    linear-gradient(180deg, rgba(18,19,17,.72) 0%, rgba(18,19,17,.5) 40%, rgba(18,19,17,.78) 70%, rgba(18,19,17,.94) 100%); }
  .hero__head { padding: calc(var(--nav-h) + 44px) var(--gutter) 30px var(--gutter); }
  .hero__title { font-size: clamp(50px, 16.8vw, 84px); margin-top: 20px; }
  .hero__underline { bottom: 8px; }
  .hero__elbow { bottom: 1px; }
  .hero__low { flex-direction: column; padding: 28px var(--gutter) 40px var(--gutter); gap: 36px; }
  .hero__drop { top: -11px; }
  .hero__copy { width: auto; max-width: calc(var(--xh) - var(--gutter) - 22px); order: 2; }
  .hero__lede { font-size: 16px; }
  .hero__btns { margin-top: 24px; }
  .hero__btns .btn { height: 50px; font-size: 15px; }
  .hero__trust { margin-top: 24px; gap: 8px 18px; font-size: 10px; }
  .valve { position: relative; left: auto; top: auto; order: 1; max-width: none; align-self: flex-end; margin-right: calc(100% - var(--xh) - 20px + var(--gutter)); flex-direction: row-reverse; text-align: right; gap: 14px; }
  .valve__txt { align-items: flex-end; }
  .valve__num { font-size: 30px; }
  .valve__sub { max-width: 17em; font-size: 13px; }
  .hero--about { min-height: max(92svh, 680px); }
  .hero--about .hero__media img { object-position: 60% 50%; }
  .hero--about .hero__head { padding-left: var(--pad-l); }
  .hero--about .hero__low { padding-left: var(--pad-l); }
  .hero--about .hero__underline { bottom: 8px; }
  .hero--about .hero__inlet { bottom: 8px; }
  .hero--about .hero__tee { bottom: -1px; }
  .hero--about .hero__copy { max-width: none; width: calc(var(--xh) - var(--pad-l) - 22px); }

  .svc__head { padding-top: 96px; }
  .fixtures { margin-top: 48px; }
  .fixture__a { grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 16px; padding: 22px 0; }
  .stub { width: calc(var(--pad-l) - var(--xl) - 10px); }
  .fixture__name { font-size: 25px; }
  .fixture__line { font-size: 14.5px; }
  .fixture__img { aspect-ratio: 1 / 1; grid-row: 1 / 4; align-self: center; }

  .build { display: block; margin-top: 48px; }
  .promise { min-height: 300px; margin: 0 0 -1px; padding: 24px; }
  .promise__big { font-size: 64px; }
  .build .build__layer .promise__pipe { left: auto; margin-left: calc(var(--xl) - var(--pad-l) - 3px - 25px); margin-right: -25px; }
  .build .build__layer .promise__pipe--end { margin-right: 14px; }

  .proc__head { padding-bottom: 48px; }
  .path { padding: 0 var(--gutter) var(--section) var(--pad-l); --c: 22px; }
  .path__down { height: auto; bottom: 0; }
  .path__elbow-a, .path__elbow-b, .path__run, .path__out { display: none; }
  .path__steps { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .step { display: grid; grid-template-columns: 1fr; align-items: start; position: relative; }
  .step__disc { position: absolute; left: calc(var(--xl) - var(--pad-l) - 22px); top: 0; width: 44px; height: 44px; box-shadow: 0 0 0 1px rgba(30,31,29,.08), 0 10px 20px -10px rgba(30,31,29,.3); }
  .step__disc::before { display: none; }
  .step__disc svg { width: 20px; height: 20px; }
  .step__n { display: none; }
  .step h3 { margin-top: 6px; font-size: 25px; }
  .step p { margin-top: 8px; }

  .work__rail { display: none; }
  .work__tee { left: var(--xl); }
  .work__rail-m { display: block; left: calc(var(--xl) - 3px); top: 0; bottom: 0; }
  .rail-pad-r { padding-left: var(--pad-l); padding-right: var(--gutter); }
  .work__grid { grid-template-columns: 1fr; gap: 44px; margin-top: 44px; }
  .job--a, .job--b, .job--c, .job--d { grid-column: 1; margin-top: 0; }
  .job__cap { grid-template-columns: 1fr; gap: 6px; }
  .job__cap .label { grid-row: auto; padding: 0; }
  .job__name { font-size: 26px; }

  .proof__top { padding: 8px var(--gutter) 40px var(--pad-l); }
  .proof__drop { display: none; }
  .proof__drop-m { display: block; left: calc(var(--xl) - 3px); top: 0; bottom: 0; }
  .quote p { font-size: 32px; line-height: 1.08; }
  .proof__line { height: 120px; }
  .proof__run, .proof__elbow-a, .proof__elbow-b { display: none; }
  .gauge { right: auto; left: var(--pad-l); height: 120px; padding: 0; gap: 16px; background: transparent; }
  .gauge__dial { width: 96px; height: 96px; }
  .proof__line::after { content: ""; position: absolute; left: var(--xl); width: calc(var(--pad-l) - var(--xl)); top: 57px; height: var(--pipe); background: var(--copper); }
  .gauge__num { font-size: 72px; }
  .proof__line::before { content: ""; position: absolute; left: calc(var(--xl) - 3px); top: 0; bottom: 0; width: var(--pipe); background: var(--copper); }
  .proof__rail { top: 0; }
  .proof__pair { grid-template-columns: 1fr; gap: 32px; }
  .minor { padding: 0; }
  .minor__stub { display: none; }
  .minor p { font-size: 22px; }

  .book__valve { left: calc(var(--xl) - 20px); }
  .book__flood { padding-top: calc(var(--section) + 4px); }
  .book__title { font-size: clamp(76px, 24vw, 110px); }
  .book__title--short { font-size: clamp(46px, 14vw, 72px); }
  .book__contact { margin-top: 32px; }
  .book .form { padding: 24px 20px; margin-left: calc(var(--gutter) - var(--pad-l)); }
  .form { padding: 24px 20px; }
  .form__row { grid-template-columns: 1fr; }
  .form__end { flex-direction: column; align-items: flex-start; }
  .seg__opts span { font-size: 14px; height: 44px; padding: 0 6px; }

  .foot__in { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 56px var(--gutter) 40px; }
  .foot__base { padding: 20px var(--gutter) 28px; flex-direction: column; gap: 8px; }

  /* services */
  .shero { padding-top: calc(var(--nav-h) + 56px); }
  .scell { gap: 14px; }
  .scell__name { font-size: 22px; margin-top: 8px; }
  .scell__status { max-width: 9em; font-size: 13px; }
  .emerg__status { margin-top: 24px; }
  .station { padding: 40px 0 48px; min-height: 0; }
  .station .stub { top: 48px; }
  .station blockquote p { font-size: 22px; }
  .types li { padding: 16px 12px 16px 0; }
  .types li + li { padding-left: 12px; }
  .types b { font-size: 19px; }
  .log { padding-top: 0; padding-left: 36px; margin-top: 40px; }
  .log__list { grid-template-columns: 1fr; gap: 26px; }
  .log__pipe { left: 8px; right: auto; top: 0; bottom: 0; width: var(--pipe); height: auto; }
  .log__pipe::after { right: -5px; top: auto; bottom: -6px; width: 16px; height: 12px; }
  .log .fit { left: -25px; top: 16px; width: 14px; height: 22px; margin: -11px 0 0 -7px; }
  .sv--ren .ren__pair { grid-template-columns: 1fr; gap: 28px; padding: 0 var(--gutter) 0 var(--pad-l); }
  .ren__v1 { height: auto; bottom: -83px; }
  .ren__elb1, .ren__h1, .ren__elb2, .ren__v2, .ren__h2, .ren__elb3, .ren__elb4 { display: none; }
  .ren__tag { top: 16px; }
  .ren__foot { padding-top: 80px; }
  .ren__rail { top: 0; }
  .ren__list li { grid-template-columns: 1fr; gap: 4px; }
  .hold { --row1: 55px; }
  .hold td:nth-child(2) { font-size: 21px; }
  .hold table { font-size: 11px; }
  .hold__v, .hold__elb, .hold__cap-fit { display: none; }

  /* about */
  .area__head, .onep__head { padding-top: 96px; }
  .bay { height: auto; margin-top: 48px; padding: 0 var(--gutter) 0 var(--pad-l); }
  .bay__line, .bay__elb, .bay__drop, .area__rail, .area__elb { display: none; }
  .area__rail-m { display: block; }
  .onep .turn { display: none; }
  .onep .rail--turn { top: 0; }
  .bay__stations { grid-template-columns: 1fr; height: auto; border-top: 1px solid var(--rule-dk); }
  .stn { padding: 18px 0; border-bottom: 1px solid var(--rule-dk); }
  .stn .fit { display: none; }
  .stn .stub { display: block; }
  .stn__t, .stn--up .stn__t, .stn--dn .stn__t, .stn--end .stn__t { position: static; text-align: left; padding: 0; width: auto; }
  .stn__t::before { display: none; }
  .stn__n { font-size: 24px; }
  .stn__k { font-size: 10px; }
  .area__foot { height: 72px; }
  .card { padding: 24px 20px 20px; }
  .card .stub { top: 34px; }
  .card__rows li { grid-template-columns: minmax(0, 1fr) 64px; gap: 14px; }
  .card__rows h3 { font-size: 22px; }
  .sign { width: 58px; height: 40px; font-size: 18px; }

  /* contact */
  .chero__head { padding-top: calc(var(--nav-h) + 56px); }
  .split { padding-top: 80px; gap: 40px; }
  .split__h, .split__elb, .split__r { display: none; }
  .split__l { height: auto; bottom: -88px; }
  .split .vglyph { top: 76px; width: 40px; height: 40px; left: calc(var(--xl) - 20px); }
  .cq { --vx: var(--xl); }
  .cq__flood { --fx: var(--xl); }
  .cq__h2 { left: calc(var(--vx) - 3px); width: calc(var(--bx) - var(--vx) + 3px); }
  .cq__h2.pipe--rtl::before { transform-origin: 0 50%; }
  .cq__facts li { grid-template-columns: 1fr; gap: 4px; }
  .cq__form { margin-left: 0; }
  .cq__valve { display: none; }
  .meter__plate > div { grid-template-columns: 1fr; gap: 6px; }
  .meter__plate .stub { top: 30px; }

  /* privacy, 404 */
  .phead { padding-top: calc(var(--nav-h) + 56px); }
  .dead { padding-bottom: 180px; }
}
.stn .stub { display: none; }
@media (max-width: 767px) { .stn .stub { display: block; } }