/* ==========================================================================
   Zammit Plumbing — site stylesheet
   DESIGN_SYSTEM.md v1.1. Direction record: docs/zammit-plumbing-brand.md

   Palette: complementary. Green (ASME A13.1 water marker) is the dominant,
   structural color; copper is the small signal and appears only on a primary
   action or on new work in a drawing. Every combination below was measured;
   the numbers are in the direction record.
   ========================================================================== */

:root {
  /* ---- ground -------------------------------------------------------- */
  --limestone:   #F1F2EC;
  --panel:       #E3E7DB;
  --panel-2:     #D6DCCB;
  --edge:        #C2CBB6;
  --edge-strong: #9FAC90;

  /* ---- ink ----------------------------------------------------------- */
  --ink:   #16241D;
  --ink-2: #47584D;
  --ink-3: #5E6F64;   /* limestone ground only; large text on panel */

  /* ---- inverted ground ----------------------------------------------- */
  --deep:       #122019;
  --deep-panel: #1B2E24;
  --deep-edge:  #2E4438;

  /* ---- the band: ASME A13.1 water green ------------------------------ */
  --band:       #1E6B4A;
  --band-deep:  #134A33;
  --band-light: #8FD3B4;
  --band-wash:  rgba(30, 107, 74, 0.09);

  /* ---- the signal: copper. Action, and new work. Nothing else. ------- */
  --copper:       #A34A21;
  --copper-deep:  #7F3817;
  --copper-light: #E8A17A;
  --copper-wash:  rgba(163, 74, 33, 0.10);

  /* ---- the emergency lane: a shutoff handle is red ------------------- */
  --alert:       #A32218;
  --alert-light: #F0A79E;
  --alert-wash:  rgba(163, 34, 24, 0.10);

  /* ---- type ---------------------------------------------------------- */
  --legend: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --text:   "Commissioner", "Segoe UI", system-ui, sans-serif;
  --mono:   "Martian Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display: clamp(2.3rem, 5.8vw, 4.3rem);
  --fs-h2:      clamp(1.55rem, 3.1vw, 2.35rem);
  --fs-h3:      clamp(1.1rem, 1.7vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-legend:  0.75rem;

  /* ---- space --------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section: clamp(56px, 8vw, 104px);
  --inset: clamp(18px, 4.5vw, 44px);
  --measure: 62ch;
  --page: 1240px;

  /* ---- shape, motion ------------------------------------------------- */
  --radius: 2px;
  --line: 1px;
  --line-cut: 2px;

  /* The signature: a quarter-turn valve. Firm and terminal, no overshoot. */
  --ease: cubic-bezier(.32, .72, .16, 1);
  --t-state: 110ms;
  --t-element: 260ms;
  --t-comp: 480ms;

  /* Light source: upper left. The only two shadows on the site are built
     from the ground's own hue; never rgba(0,0,0,a). */
  --lift-1: -1px 2px 0 var(--edge), -3px 8px 18px rgba(22, 36, 29, 0.13);
  --lift-2: -2px 3px 0 var(--edge-strong), -6px 16px 34px rgba(22, 36, 29, 0.18);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--legend);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.04;
  margin: 0 0 var(--s4);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); letter-spacing: -0.004em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.14; }
h4 { font-size: 1rem; letter-spacing: 0.03em; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--band-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--copper-deep); text-decoration-thickness: 2px; }

strong { font-weight: 700; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: var(--s2); }
li::marker { color: var(--band); }

hr {
  border: 0; height: var(--line); background: var(--edge);
  margin: var(--s7) 0;
}

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

/* Focus is at least as visible as hover, everywhere. */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-deep :focus-visible { outline-color: var(--copper-light); }

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

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

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--copper); color: var(--limestone);
  padding: var(--s3) var(--s5); font-family: var(--legend);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: var(--s3); color: var(--limestone); }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { width: min(var(--page), 100%); margin-inline: auto; padding-inline: var(--inset); }
.wrap--narrow { width: min(860px, 100%); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }

.ground-panel { background: var(--panel); border-block: var(--line) solid var(--edge); }
.ground-deep {
  background: var(--deep); color: var(--limestone);
}
.ground-deep h1, .ground-deep h2, .ground-deep h3 { color: var(--limestone); }
.ground-deep .muted, .on-deep .muted { color: #B3BFB6; }

/* Every dark region carries .on-deep — the lane and the footer are NOT
   .ground-deep, and scoping the link color to .ground-deep alone left footer
   links at --band-deep on --deep, measured at 1.65:1. Scope on .on-deep, and
   exclude the buttons so a descendant rule cannot repaint a primary action. */
.on-deep a:not(.btn):not(.skip) { color: var(--band-light); }
.on-deep a:not(.btn):not(.skip):hover { color: var(--copper-light); }

.muted { color: var(--ink-2); }
.lede { font-size: clamp(1.075rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }

.grid { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.section-head { margin-bottom: var(--s6); }
.section-head p { color: var(--ink-2); }

/* ==========================================================================
   The band — ASME A13.1 marker. Legend, direction of flow.
   Used only where a marker would really be: on drawn pipe, on the current
   nav item, at the head of a drawing. Never as an eyebrow above a heading.
   ========================================================================== */

.band {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--band); color: var(--limestone);
  font-family: var(--legend); font-weight: 700; font-size: var(--fs-legend);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px var(--s3) 3px;
  white-space: nowrap;
}
.band::after {
  content: ""; width: 14px; height: 7px; flex: none;
  background: currentColor;
  clip-path: polygon(0 28%, 62% 28%, 62% 0, 100% 50%, 62% 100%, 62% 72%, 0 72%);
}
.band--nodir::after { display: none; }
.band--copper { background: var(--copper); }
.band--alert { background: var(--alert); }

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  --btn-bg: var(--panel);
  --btn-fg: var(--ink);
  --btn-edge: var(--edge-strong);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--line-cut) solid var(--btn-edge); border-radius: var(--radius);
  font-family: var(--legend); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.075em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; text-align: center;
  transition: background var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease),
              color var(--t-state) var(--ease),
              transform var(--t-state) var(--ease);
}
.btn:hover { --btn-edge: var(--ink); color: var(--btn-fg); }
/* Quarter-turn: the give is felt, not watched. No bounce, no overshoot. */
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 1; cursor: not-allowed;
  --btn-bg: var(--panel-2); --btn-fg: var(--ink-2); --btn-edge: var(--edge);
}

.btn--go {
  --btn-bg: var(--copper); --btn-fg: var(--limestone); --btn-edge: var(--copper-deep);
}
.btn--go:hover { --btn-bg: var(--copper-deep); --btn-edge: var(--ink); }
.btn--alert {
  --btn-bg: var(--alert); --btn-fg: var(--limestone); --btn-edge: #7C1A12;
}
.btn--alert:hover { --btn-bg: #7C1A12; --btn-edge: var(--ink); }
.btn--quiet { --btn-bg: transparent; --btn-edge: var(--ink); }
.btn--quiet:hover { --btn-bg: var(--band-wash); --btn-edge: var(--band-deep); }
.on-deep .btn--quiet { --btn-fg: var(--limestone); --btn-edge: var(--band-light); }
.on-deep .btn--quiet:hover { --btn-bg: rgba(143, 211, 180, 0.14); --btn-edge: var(--limestone); }
.btn--small { min-height: 44px; padding: 0 var(--s4); font-size: 0.8125rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }


/* Fields ------------------------------------------------------------- */

label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 6px; }
.field { margin-bottom: var(--s5); }
.field-note { font-size: 0.875rem; color: var(--ink-2); margin: 6px 0 0; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px var(--s3);
  background: var(--limestone); color: var(--ink);
  border: var(--line-cut) solid var(--edge-strong); border-radius: var(--radius);
  font-family: var(--text); font-size: var(--fs-body); line-height: 1.4;
  transition: border-color var(--t-state) var(--ease),
              background var(--t-state) var(--ease);
}
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus { border-color: var(--band-deep); background: var(--limestone); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--alert); background: var(--alert-wash);
}
.err {
  display: flex; align-items: flex-start; gap: 6px;
  color: var(--alert); font-size: 0.875rem; font-weight: 600;
  margin: 6px 0 0;
}
.err::before { content: "\2715"; font-weight: 700; line-height: 1.5; }
.err:empty { display: none; }

/* ==========================================================================
   Header — the phone and the shutoff are IN the bar at every width.
   Nothing a person in a flooding basement needs sits behind a menu button.
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--limestone);
  border-bottom: var(--line-cut) solid var(--ink);
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 68px; flex-wrap: wrap;
}

.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.mark:hover { color: var(--ink); }
.mark__glyph { width: 30px; height: 30px; flex: none; }
.mark__name {
  font-family: var(--legend); font-weight: 700; font-size: 1.32rem;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
}
.mark__sub {
  display: block; font-family: var(--mono); font-size: 0.575rem;
  letter-spacing: 0.1em; color: var(--ink-2); text-transform: uppercase;
  margin-top: 3px; font-weight: 400;
}

.nav { display: flex; gap: 2px; }
.nav a {
  display: block; padding: 9px var(--s3);
  font-family: var(--legend); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0.065em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.nav a:hover { background: var(--band-wash); border-bottom-color: var(--band); color: var(--ink); }
.nav a[aria-current="page"] {
  background: var(--band); color: var(--limestone); border-bottom-color: var(--band-deep);
}

.masthead__act { display: flex; align-items: center; gap: var(--s2); }
.tel {
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: var(--mono); font-size: 0.95rem; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: 4px 6px;
}
.tel span {
  font-family: var(--legend); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.tel:hover { color: var(--copper-deep); }
.tel:hover span { color: var(--copper-deep); }

.menu-btn { display: none; }

@media (max-width: 940px) {
  .masthead__inner { min-height: 60px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 var(--s3);
    background: transparent; border: var(--line-cut) solid var(--ink);
    border-radius: var(--radius); color: var(--ink); cursor: pointer;
    font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .menu-btn__bars { width: 16px; height: 2px; background: currentColor; position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
  }
  .menu-btn__bars::before { top: -5px; } .menu-btn__bars::after { top: 5px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--limestone);
    border-bottom: var(--line-cut) solid var(--ink);
    box-shadow: var(--lift-2);
    padding: var(--s2) var(--inset) var(--s4);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 13px var(--s3); border-bottom: var(--line) solid var(--edge); }
  .nav a[aria-current="page"] { border-bottom-color: var(--band-deep); }
  .mark__sub { display: none; }
}
@media (max-width: 560px) {
  .mark__name { font-size: 1.1rem; }
  .tel { font-size: 0.8125rem; }
}

/* No script: the menu can never trap the links. */
.no-js .menu-btn { display: none; }
.no-js .nav { display: flex; }
@media (max-width: 940px) {
  .no-js .nav { position: static; flex-direction: row; flex-wrap: wrap; box-shadow: none; padding: 0 0 var(--s3); border: 0; }
}

/* ==========================================================================
   The emergency lane — the B>=4 requirement, on every page, above the fold,
   with no script and no scroll between the visitor and it.
   ========================================================================== */

.lane {
  background: var(--deep); color: var(--limestone);
  border-bottom: 3px solid var(--alert);
}
.lane__inner {
  display: flex; align-items: center; gap: var(--s4) var(--s5);
  flex-wrap: wrap; padding-block: 11px;
}
.lane__label {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--alert-light);
  white-space: nowrap;
}
.lane__label svg { width: 17px; height: 17px; flex: none; }
.lane__text { font-size: var(--fs-small); margin: 0; color: #C6D0C8; max-width: none; }
.lane__acts { display: flex; gap: var(--s2); margin-left: auto; flex-wrap: wrap; }
.lane .btn { min-height: 44px; font-size: 0.8125rem; }
@media (max-width: 720px) {
  .lane__acts { margin-left: 0; width: 100%; }
  .lane__acts .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   HERO — the plane stack.
   Four planes of a real section cut. BACK 32% / MID 20% / SUBJECT 10% / FORE 0.
   All HTML copy rides at 1x. Drawing annotations are baked into their own
   plane's SVG so a callout never separates from the thing it names.
   ========================================================================== */

.hero { position: relative; overflow: hidden; background: var(--limestone); }

.hero__room { position: relative; z-index: 6; padding-block: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 34px); }
.hero__eyebrow {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-deep);
  margin: 0 0 var(--s4);
}
.hero h1 { max-width: 16ch; margin-bottom: var(--s4); }
.hero__lede { max-width: 56ch; margin-bottom: var(--s5); }
.hero .btn-row { margin-bottom: var(--s4); }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  list-style: none; margin: 0; padding: 0; max-width: none;
  border-top: var(--line) solid var(--edge); padding-top: var(--s4);
}
.hero__facts li {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 0.9rem; color: var(--ink-2);
}
.hero__facts li::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--band); transform: rotate(45deg);
}

/* ---- the stage ------------------------------------------------------- */

.stage {
  --cut: 42;            /* how far the floor is opened, 0-100 */
  --headroom: 120px;    /* the room a lagging plane needs above the frame */
  --p-back: 0px; --p-mid: 0px; --p-subj: 0px;
  position: relative; overflow: hidden;
  height: clamp(310px, 43vh, 384px);
  background: #9FAD97;
  border-block: var(--line-cut) solid var(--ink);
  isolation: isolate;
}

/* Every plane shares one box and one viewBox, so they crop identically at
   every width and cannot drift apart. The box reaches `--headroom` above the
   frame: a lagging plane travels down, and that is the material that fills
   in behind it. */
.plane {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--headroom));
  height: calc(100% + var(--headroom));
  will-change: transform;
  /* Parallaxed elements transition OPACITY only. A transition on transform
     eases every per-frame scroll write and reads as the drawing lagging a
     full second behind the thumb. */
  transition: opacity var(--t-element) var(--ease);
}
.plane svg { width: 100%; height: 100%; }
.plane--back  { z-index: 1; transform: translate3d(0, var(--p-back), 0); }
.plane--mid   { z-index: 2; transform: translate3d(0, var(--p-mid), 0); }
.plane--subj  { z-index: 3; transform: translate3d(0, var(--p-subj), 0); }
.plane--cover { z-index: 4; clip-path: inset(0 0 0 calc(var(--cut) * 1%)); }
.plane--fore  { z-index: 6; }

/* The saw kerf. The cut edge travels with the handle, so taking the floor
   away reads as a cut and not as a layer being switched off. */
.stage__kerf {
  position: absolute; top: 0; z-index: 5; width: 3px; height: 12.4%;
  left: calc(var(--cut) * 1%); margin-left: -3px;
  background: var(--ink); pointer-events: none;
}

/* The section floor: planes travel past the bottom edge and clip there.
   This gradient sits above every plane and hides the clip line at any
   scroll position. */
.stage__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 7;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 242, 236, 0) 0%, rgba(241, 242, 236, 0.34) 62%, rgba(241, 242, 236, 0.82) 100%);
}

/* Below 760px the stage slices to about 400 viewBox units of width. The
   small technical sub-labels do not survive that crop, and a label cut
   mid-word reads as a rendering fault rather than a drawing. Drop them; the
   three main callouts are placed to fit, and #cut-help carries the full
   description for assistive technology at every width. */
@media (max-width: 760px) {
  .stage .d-num { display: none; }
}

/* ---- the cut handle: drag, or arrow keys, to open the floor ----------
   It sits on the limestone directly above the drawn floor, where a saw
   would be, so it is in view the moment the drawing is. */

.cut {
  border-top: var(--line) solid var(--edge);
  background: var(--limestone);
  padding-block: var(--s3);
}
.cut__inner {
  width: min(var(--page), 100%); margin-inline: auto;
  padding-inline: var(--inset);
  display: flex; align-items: center; gap: var(--s4);
}
.cut__label {
  font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; margin: 0;
}
.cut__readout {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  color: var(--band-deep); white-space: nowrap; min-width: 13ch; text-align: right;
}
.cut input[type="range"] {
  flex: 1 1 160px; min-width: 100px; height: 44px;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; padding: 0; min-height: 0;
}
.cut input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--panel-2);
  border: var(--line) solid var(--edge-strong); border-radius: 3px;
}
.cut input[type="range"]::-moz-range-track {
  height: 6px; background: var(--panel-2);
  border: var(--line) solid var(--edge-strong); border-radius: 3px;
}
.cut input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 30px; margin-top: -13px;
  background: var(--copper); border: var(--line-cut) solid var(--copper-deep);
  border-radius: var(--radius); cursor: ew-resize;
}
.cut input[type="range"]::-moz-range-thumb {
  width: 22px; height: 30px;
  background: var(--copper); border: var(--line-cut) solid var(--copper-deep);
  border-radius: var(--radius); cursor: ew-resize;
}
.cut input[type="range"]:focus-visible { outline-offset: 4px; }
.no-js .cut, .no-js .stage__kerf { display: none; }

@media (max-width: 700px) {
  .cut__label { font-size: 0.6875rem; }
  .cut__readout { display: none; }
}

/* ==========================================================================
   Panels, cards, tables
   ========================================================================== */

.panel {
  background: var(--panel); border: var(--line-cut) solid var(--ink);
  border-radius: var(--radius); padding: var(--s5);
}
.panel--plain { background: var(--limestone); border-width: var(--line); border-color: var(--edge-strong); }
.panel--lift { box-shadow: var(--lift-1); }
.ground-deep .panel { background: var(--deep-panel); border-color: var(--deep-edge); }
.ground-deep .panel .muted { color: #A9B7AC; }

.rule-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.rule-list li {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) 0; margin: 0;
  border-bottom: var(--line) solid var(--edge);
}
.rule-list li:last-child { border-bottom: 0; }
.ground-deep .rule-list li { border-bottom-color: var(--deep-edge); }
.rule-list__k { flex: none; width: 42%; font-weight: 600; }
.rule-list__v { flex: 1; color: var(--ink-2); }
.ground-deep .rule-list__v { color: #B3BFB6; }

.price {
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price--big { font-size: 1.05rem; color: var(--ink); }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
caption { text-align: left; font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s3); }
th, td { text-align: left; padding: 11px var(--s3); border-bottom: var(--line) solid var(--edge); vertical-align: top; }
th {
  font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.07em; text-transform: uppercase;
}
/* Only the COLUMN header gets the heavy rule. Applying it to every th drew a
   2px line under the first column and nothing under the rest. */
thead th { border-bottom: var(--line-cut) solid var(--ink); }
tbody th[scope="row"] { font-size: 0.9375rem; }
tbody tr:hover { background: var(--band-wash); }

.on-deep caption { color: #B3BFB6; }
.on-deep th, .on-deep td { border-bottom-color: var(--deep-edge); }
.on-deep thead th { border-bottom: var(--line-cut) solid var(--band-light); color: var(--limestone); }
.on-deep tbody tr:hover { background: rgba(143, 211, 180, 0.10); }
.on-deep tbody th[scope="row"] { color: var(--limestone); }
.on-deep td { color: #C6D0C8; }

/* ==========================================================================
   Service cards / index
   ========================================================================== */

.tile {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--limestone); border: var(--line-cut) solid var(--edge-strong);
  border-radius: var(--radius); padding: var(--s5);
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.tile:hover { border-color: var(--ink); }
.tile__icon { width: 40px; height: 40px; color: var(--band-deep); }
.tile h3 { margin: 0; }
.tile p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.tile__price { margin-top: auto; padding-top: var(--s3); border-top: var(--line) solid var(--edge); }

/* ==========================================================================
   The booker
   ========================================================================== */

.booker { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 940px) {
  .booker { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr); gap: var(--s7); }
  .ticket-col { position: sticky; top: 88px; }
}

.steps {
  display: flex; gap: 0; margin: 0 0 var(--s6); padding: 0; list-style: none;
  border-bottom: var(--line-cut) solid var(--ink); max-width: none;
}
.steps li { margin: 0; flex: 1; }
.steps__btn {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  padding: var(--s3) var(--s2) 10px; text-align: left;
  border-bottom: 4px solid transparent; margin-bottom: -3px;
  font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
  transition: color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
  min-height: 48px;
}
.steps__btn:hover:not([disabled]) { color: var(--ink); border-bottom-color: var(--edge-strong); }
.steps__btn[aria-current="step"] { color: var(--ink); border-bottom-color: var(--copper); }
.steps__btn[data-done="true"] { color: var(--band-deep); }
.steps__btn[disabled] { cursor: not-allowed; color: var(--ink-3); opacity: 0.55; }
.steps__n { font-family: var(--mono); font-size: 0.6875rem; display: block; margin-bottom: 2px; }

.step { display: none; }
.step[data-active="true"] { display: block; }
.no-js .step { display: block; margin-bottom: var(--s7); }
.no-js .steps { display: none; }

.step__head { margin-bottom: var(--s5); }
.step__head h3 { margin-bottom: 6px; }
.step__head p { color: var(--ink-2); font-size: var(--fs-small); margin: 0; }

/* problem chooser ------------------------------------------------------ */

.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); margin-bottom: var(--s5); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: var(--s3) var(--s4); margin: 0; min-height: 64px;
  background: var(--limestone); border: var(--line-cut) solid var(--edge-strong);
  border-radius: var(--radius); cursor: pointer; font-weight: 600;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.choice label:hover { border-color: var(--ink); }
.choice label small {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 400;
  color: var(--ink-2); letter-spacing: -0.01em;
}
.choice input:checked + label {
  border-color: var(--copper); background: var(--copper-wash);
  box-shadow: inset 4px 0 0 var(--copper);
}
.choice input:checked + label small { color: var(--copper-deep); }
.choice input:focus-visible + label { outline: 3px solid var(--copper); outline-offset: 2px; }
.choice--stop input:checked + label { border-color: var(--alert); background: var(--alert-wash); box-shadow: inset 4px 0 0 var(--alert); }
.choice--stop input:checked + label small { color: var(--alert); }
.choice--stop label small { color: var(--alert); font-weight: 600; }

/* the emergency branch inside the booker ------------------------------- */

.stopcard {
  border: var(--line-cut) solid var(--alert); border-left-width: 6px;
  background: var(--alert-wash); border-radius: var(--radius);
  padding: var(--s5); margin-bottom: var(--s5);
}
.stopcard h3 { color: var(--alert); margin-bottom: var(--s3); }
.stopcard ol { margin-bottom: var(--s5); }
.stopcard ol li::marker { color: var(--alert); font-weight: 700; }

/* slots ---------------------------------------------------------------- */

.days { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s3); margin-bottom: var(--s5); scroll-snap-type: x proximity; }
.day { flex: none; scroll-snap-align: start; }
.day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 62px; padding: 10px 4px; margin: 0; min-height: 68px;
  border: var(--line-cut) solid var(--edge-strong); border-radius: var(--radius);
  background: var(--limestone); cursor: pointer; text-align: center;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.day label:hover { border-color: var(--ink); }
.day__dow { font-family: var(--legend); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.day__num { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.day__mon { font-size: 0.625rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.day input:checked + label { border-color: var(--copper); background: var(--copper-wash); box-shadow: inset 0 -4px 0 var(--copper); }
.day input:focus-visible + label { outline: 3px solid var(--copper); outline-offset: 2px; }
.day input:disabled + label { opacity: 0.42; cursor: not-allowed; background: var(--panel-2); }
.day input:disabled + label:hover { border-color: var(--edge-strong); }

.windows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.window input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.window label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); margin: 0; min-height: 56px;
  border: var(--line-cut) solid var(--edge-strong); border-radius: var(--radius);
  background: var(--limestone); cursor: pointer; font-weight: 600;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.window label:hover { border-color: var(--ink); }
.window label small { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; color: var(--ink-2); }
.window input:checked + label { border-color: var(--copper); background: var(--copper-wash); box-shadow: inset 4px 0 0 var(--copper); }
.window input:focus-visible + label { outline: 3px solid var(--copper); outline-offset: 2px; }
.window input:disabled + label { opacity: 0.45; cursor: not-allowed; background: var(--panel-2); }

/* the ticket ----------------------------------------------------------- */

.ticket {
  background: var(--limestone); border: var(--line-cut) solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--lift-1);
  overflow: hidden;
}
.ticket__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--ink); color: var(--limestone);
  padding: 10px var(--s4);
}
.ticket__head h3 { margin: 0; font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--limestone); }
.ticket__no { font-family: var(--mono); font-size: 0.6875rem; color: var(--band-light); }
.ticket__body { padding: var(--s4); }
.ticket dl { margin: 0; }
.ticket dt {
  font-family: var(--legend); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  margin-top: var(--s3);
}
.ticket dt:first-child { margin-top: 0; }
.ticket dd { margin: 2px 0 0; font-weight: 600; }
.ticket dd.empty { color: var(--ink-3); font-weight: 400; font-style: italic; }
.ticket__total {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: var(--line-cut) solid var(--ink);
}
.ticket__total .k { font-family: var(--legend); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.ticket__total .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; color: var(--copper-deep); font-variant-numeric: tabular-nums; }
.ticket__foot { background: var(--panel); border-top: var(--line) solid var(--edge); padding: var(--s3) var(--s4); font-size: 0.8125rem; color: var(--ink-2); }

/* result --------------------------------------------------------------- */

.result { border: var(--line-cut) solid var(--band-deep); border-left-width: 6px; background: var(--band-wash); border-radius: var(--radius); padding: var(--s6); }
.result h3 { color: var(--band-deep); }
.result__demo { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--line) solid var(--edge-strong); font-size: 0.875rem; color: var(--ink-2); }

.busy { opacity: 0.55; pointer-events: none; }

/* ==========================================================================
   Drawings
   ========================================================================== */

.figure { margin: 0; }
.figure svg { width: 100%; height: auto; background: var(--panel); border: var(--line-cut) solid var(--ink); border-radius: var(--radius); }
.figure figcaption { font-size: 0.875rem; color: var(--ink-2); margin-top: var(--s3); }
.ground-deep .figure svg { background: var(--deep-panel); border-color: var(--deep-edge); }
.ground-deep .figure figcaption { color: #B3BFB6; }

/* drawing ink roles, used by every SVG on the site */
.d-cut    { stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: square; }
.d-line   { stroke: var(--ink-2); stroke-width: 1.3; fill: none; }
.d-thin   { stroke: var(--ink-3); stroke-width: 0.9; fill: none; }
.d-fillA  { fill: #CBD3C1; }
.d-fillB  { fill: #B6C0AC; }
.d-fillC  { fill: #A2AE98; }
.d-new    { stroke: var(--copper); stroke-width: 3.4; fill: none; stroke-linecap: round; }
.d-old    { stroke: #3F5245; stroke-width: 3.4; fill: none; stroke-linecap: round; }
.d-water  { stroke: var(--band); stroke-width: 3.4; fill: none; stroke-linecap: round; }
.d-txt    { font-family: var(--legend); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; fill: var(--ink-2); }
.d-txt-lt { fill: #C6D0C8; }
.d-num    { font-family: var(--mono); font-size: 9.5px; font-weight: 600; fill: var(--ink-3); }
.d-band   { fill: var(--band); }
.d-band-t { font-family: var(--legend); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; fill: var(--limestone); }

/* ==========================================================================
   Shutoff page
   ========================================================================== */

.scenarios { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s6); }
.scenario input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scenario label {
  display: block; padding: var(--s3) var(--s5); margin: 0; min-height: 48px;
  border: var(--line-cut) solid var(--edge-strong); border-radius: var(--radius);
  background: var(--limestone); cursor: pointer;
  font-family: var(--legend); font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 26px;
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.scenario label:hover { border-color: var(--ink); }
.scenario input:checked + label { background: var(--band); color: var(--limestone); border-color: var(--band-deep); }
.scenario input:focus-visible + label { outline: 3px solid var(--copper); outline-offset: 2px; }

.scene { display: none; }
.scene[data-active="true"] { display: grid; }
.no-js .scene { display: grid; margin-bottom: var(--s7); }
.no-js .scenarios { display: none; }
@media (min-width: 860px) { .scene { grid-template-columns: 1.1fr 1fr; gap: var(--s7); align-items: start; } }
.scene { gap: var(--s5); }

.steps-ol { counter-reset: st; list-style: none; padding: 0; max-width: none; }
.steps-ol li {
  position: relative; padding-left: 46px; margin-bottom: var(--s5);
  counter-increment: st;
}
.steps-ol li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--band); color: var(--limestone); border-radius: 50%;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 600;
}
.steps-ol h4 { margin-bottom: 4px; font-size: 0.9375rem; letter-spacing: 0.05em; }
.steps-ol p { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }

/* the valve — the one rotation on the site, because valve handles rotate */
.valve-demo { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-start; }
.valve-card { flex: 1 1 220px; }
.valve-card svg { width: 100%; height: auto; }
/* A lever ALONG the pipe is open and ACROSS it is closed, so the resting
   drawing lies horizontal and closing swings it up. It was drawn the other way
   round first, which contradicted the card's own caption. */
.valve-handle {
  transform-origin: 100px 67px;
  transition: transform 420ms var(--ease);
}
.valve-card[data-closed="true"] .valve-handle--quarter { transform: rotate(-90deg); }
.valve-wheel { transform-origin: 100px 40px; transition: transform 900ms var(--ease); }
.valve-card[data-closed="true"] .valve-wheel { transform: rotate(1080deg); }

/* ==========================================================================
   Jobs page — the stage stepper
   ========================================================================== */

.walk { border: var(--line-cut) solid var(--ink); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.walk__head { padding: var(--s5) var(--s5) var(--s4); background: var(--limestone); border-bottom: var(--line-cut) solid var(--ink); }
.walk__head h3 { margin-bottom: 6px; }
.walk__head p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.walk__stage { position: relative; background: var(--panel); }
.walk__frame { display: none; }
.walk__frame[data-active="true"] { display: block; }
.no-js .walk__frame { display: block; border-bottom: var(--line) solid var(--edge); }
.no-js .walk__bar { display: none; }
.walk__cap { padding: var(--s4) var(--s5); border-top: var(--line) solid var(--edge); background: var(--limestone); }
.walk__cap h4 { margin-bottom: 4px; }
.walk__cap p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.walk__bar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); background: var(--limestone); border-top: var(--line-cut) solid var(--ink); flex-wrap: wrap; }
.walk__dots { display: flex; gap: 6px; margin-right: auto; }
.walk__dot {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--panel); border: var(--line-cut) solid var(--edge-strong);
  border-radius: var(--radius); font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  color: var(--ink-2);
  transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.walk__dot:hover { border-color: var(--ink); color: var(--ink); }
.walk__dot[aria-current="true"] { background: var(--copper); border-color: var(--copper-deep); color: var(--limestone); }

/* ==========================================================================
   Service area drawing / footer
   ========================================================================== */

.area-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .area-grid { grid-template-columns: 1.15fr 1fr; gap: var(--s8); } }

.zipcheck { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
.zipcheck .field { margin: 0; flex: 1 1 180px; }
.zipcheck input { max-width: 220px; }
.zip-answer { margin-top: var(--s4); font-weight: 600; }
.zip-answer[data-state="in"] { color: var(--band-light); }
.zip-answer[data-state="out"] { color: var(--alert-light); }
.zip-answer[data-state="bad"] { color: var(--alert-light); }
.zip-answer:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; max-width: none; }
.chips li {
  margin: 0; padding: 4px 10px; font-size: 0.8125rem;
  border: var(--line) solid var(--deep-edge); border-radius: 20px; color: #C6D0C8;
}

.footer { background: var(--deep); color: var(--limestone); padding-block: var(--s8) var(--s6); border-top: 4px solid var(--band); }
.footer__grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--s7); }
.footer h4 { color: var(--band-light); font-size: 0.8125rem; letter-spacing: 0.11em; margin-bottom: var(--s3); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; font-size: var(--fs-small); color: #C6D0C8; }
.footer address { font-style: normal; font-size: var(--fs-small); color: #C6D0C8; line-height: 1.7; }
.footer__legal {
  border-top: var(--line) solid var(--deep-edge); padding-top: var(--s5);
  font-size: 0.8125rem; color: #A0AEA4; display: grid; gap: var(--s3);
}
.footer__legal p { max-width: 78ch; margin: 0; }
.footer__demo { border-left: 3px solid var(--copper-light); padding-left: var(--s3); }

/* ==========================================================================
   Reduced motion — a real design pass.
   Parallax resolves to the composed scene with depth intact; the cut handle
   keeps working, because its travel IS its content.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .plane { transform: none !important; }
  .valve-handle, .valve-wheel { transition: none; }
  .btn, input, select, textarea, .tile, .choice label, .day label,
  .window label, .scenario label, .walk__dot, .steps__btn, .nav a {
    transition-duration: 1ms;
  }
  .btn:active { transform: none; }
}

/* ==========================================================================
   Photographs

   Full color, always (the standing client direction: duotone is not a
   default). Two declared crop classes and nothing else, so comparable
   things are cropped comparably:

     EVIDENCE  3:2  — the work, the material, the place
     DETAIL    1:1  — one part, on its own

   Every photograph is a real photograph of a real object or place, under a
   license that permits commercial use. Credits are on the about page and
   in assets/img/credits.json. No photographs of people who are named, and
   none of children.
   ========================================================================== */

.shot { margin: 0; }
.shot img {
  width: 100%; height: auto; display: block;
  background: var(--panel-2);
  border: var(--line-cut) solid var(--ink);
  border-radius: var(--radius);
}
.shot--plain img { border-width: var(--line); border-color: var(--edge-strong); }
.shot figcaption {
  margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2);
}
.shot figcaption b {
  display: block; font-family: var(--legend); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 2px;
}
.ground-deep .shot figcaption { color: #B3BFB6; }
.ground-deep .shot figcaption b { color: var(--limestone); }
.ground-deep .shot img { border-color: var(--deep-edge); }

/* the evidence band — a bleed, and the page's one orientation change */
.shots {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shots { grid-template-columns: 1fr; } }

.shot-split { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 860px) { .shot-split { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
@media (min-width: 860px) { .shot-split--wide { grid-template-columns: 1.25fr 1fr; } }

.credit-list { list-style: none; padding: 0; margin: 0; max-width: none; font-size: 0.8125rem; }
.credit-list li { margin-bottom: 10px; color: var(--ink-2); }
.credit-list b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   The price book (services.html)
   ========================================================================== */

.pb-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4);
  padding: var(--s4) var(--s5); margin-bottom: var(--s7);
  background: var(--panel); border: var(--line-cut) solid var(--ink);
  border-radius: var(--radius);
}
.pb-filter input[type="search"] { background: var(--limestone); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chip {
  min-height: 44px; padding: 0 var(--s4); cursor: pointer;
  background: var(--limestone); color: var(--ink);
  border: var(--line-cut) solid var(--edge-strong); border-radius: var(--radius);
  font-family: var(--legend); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.pb-chip:hover { border-color: var(--ink); }
.pb-chip[aria-pressed="true"] {
  background: var(--band); color: var(--limestone); border-color: var(--band-deep);
}
.pb-count {
  margin: 0; font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  color: var(--ink-2); white-space: nowrap; margin-left: auto; padding-bottom: 12px;
}
.pb-empty {
  padding: var(--s5); border: var(--line-cut) dashed var(--edge-strong);
  border-radius: var(--radius); color: var(--ink-2); max-width: none;
}
.no-js .pb-filter, .no-js .pb-empty { display: none; }

.pb-group { margin-bottom: var(--s8); }
.pb-group[hidden] { display: none; }
.pb-group__head {
  display: flex; gap: var(--s5); align-items: flex-start;
  padding-bottom: var(--s4); margin-bottom: var(--s3);
  border-bottom: 3px solid var(--band);
}
.pb-group__head > div { flex: 1; }
.pb-group__head h2 { margin-bottom: 6px; }
.pb-group__head p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.pb-group__shot { flex: none; width: 240px; }
.pb-group__shot img { height: 152px; object-fit: cover; }
@media (max-width: 780px) {
  .pb-group__head { flex-direction: column-reverse; }
  .pb-group__shot { width: 100%; }
  .pb-group__shot img { height: auto; }
}
.pb-group th[scope="row"] { font-weight: 600; }
.table--stack th[scope="row"] { font-weight: 600; }

/* The column widths only exist while the table is still a table. Left
   unscoped, the 30% first column survived into the stacked layout and squeezed
   every job name into a 90px measure. */
@media (min-width: 681px) {
  .pb-group th[scope="row"] { width: 30%; }
  .pb-group td.price { width: 15%; }
}
/* The note is a sentence, so it is set in the text face — it inherited the
   legend face and uppercase from the th rule and came out shouting. */
.pb-note {
  display: block; font-family: var(--text); font-weight: 400;
  font-size: 0.8125rem; letter-spacing: normal; text-transform: none;
  color: var(--ink-2); margin-top: 4px; line-height: 1.45;
}
.pb-group td.price { white-space: nowrap; }
/* A three-column table does not fit a 390px phone, and E5 says design to the
   phone. Two answers, chosen by what the row means:

   .table--stack   the row's own <th scope="row"> already names it, so the
                   column headers carry nothing and the row can stack.
   .table-scroll   the column headers ARE the meaning, so the table keeps its
                   shape and scrolls inside its own box instead. */

@media (max-width: 680px) {
  .table--stack, .table--stack thead, .table--stack tbody,
  .table--stack tr, .table--stack th, .table--stack td { display: block; }
  .table--stack thead { display: none; }
  .table--stack tr { padding: var(--s3) 0; border-bottom: var(--line) solid var(--edge); }
  .table--stack th, .table--stack td { border: 0; padding: 0; width: auto; }
  .table--stack th[scope="row"] { font-size: 1.0625rem; }
  .table--stack td.price { font-size: 1.05rem; color: var(--copper-deep); margin: 6px 0; }
  .table--stack td:last-child { font-size: 0.875rem; color: var(--ink-2); }
}

.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll table { min-width: 520px; }

/* ---- shutoff page extras ------------------------------------------------ */
.shutoff-steps { margin-top: var(--s6); margin-bottom: var(--s6); }
.shutoff-steps li { max-width: 66ch; }
.shutoff-steps h4 { font-size: 1.0625rem; letter-spacing: 0.04em; }
.shutoff-steps p { font-size: 1rem; }
.valve-card h3 { margin-bottom: var(--s2); }
.valve-card svg { margin: var(--s4) 0; background: var(--limestone); border: var(--line) solid var(--edge-strong); border-radius: var(--radius); }
.valve-state {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  color: var(--band-deep); margin: 0 0 var(--s3);
}
.valve-card[data-closed="true"] .valve-state { color: var(--alert); }
.no-js .valve-card button, .no-js .valve-state { display: none; }

/* ---- jobs page extras --------------------------------------------------- */
.walk__price { margin-top: var(--s3); }
.walk__price .price { color: var(--copper-deep); }
.walk__photo { margin-top: 0; position: sticky; top: 92px; }
@media (max-width: 860px) { .walk__photo { position: static; margin-top: var(--s5); } }
.walk__frame svg { width: 100%; height: auto; display: block; }
.walk__dot[disabled] { opacity: 0.5; cursor: not-allowed; }
.walk__bar .btn[disabled] { opacity: 1; }

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.cut-help{max-width:70ch;margin:16px auto;padding:0 24px;font-size:15px;line-height:1.6}.cut__readout{font-size:12px}