@charset "utf-8";
/* ============================================================
   Cahaba Water Co. - shared stylesheet
   Tokens -> scales -> base -> type -> layout -> components
   ------------------------------------------------------------
   SINGLE SOURCE OF TRUTH. index.html and pure-ro-50.html carry
   PAGE-SPECIFIC OVERRIDES ONLY - never restate anything here.
   Three theme states, always: bare :root, prefers-color-scheme,
   [data-theme]. No colour is ever defined only inside a block.
   ============================================================ */

:root{
  /* ---- ground: channel inversion, R-dominant -> G-dominant ---- */
  --paper:#EFF1F0;
  --surface:#FAFBFA;
  --sunk:#E4E8E6;
  --ink:#141718;
  --deep:#0D3A41;
  --deep-soft:#DDE9E8;
  --deep-line:#9FC0C0;
  --copper:#A64E27;
  --copper-soft:#F6E6DC;
  --rule:#D6DAD8;
  --rule-strong:#B3BAB8;
  --muted:#616869;
  /* ---- drawing-set ink ---- */
  --sweep:#FFFFFF;          /* photographic seamless - product ground ONLY */
  --steel:#7B858B;          /* leaders, terminators, ticks, axes */
  /* ---- inverted band ---- */
  --band:#0D3A41;
  --on-band:#EFF1F0;
  --on-band-muted:#C3D3D2;
  --on-copper:#FFFFFF;
  --focus:#A64E27;
  /* ---- elevation ---- */
  --lift:0 1px 0 var(--rule-strong);
  --sticky-shadow:0 -6px 22px -10px rgba(13,58,65,.28);
  --shadow-sm:0 1px 2px rgba(13,58,65,.06);
  --shadow:0 2px 4px rgba(13,58,65,.04), 0 12px 32px -14px rgba(13,58,65,.18);
  --shadow-lg:0 4px 8px rgba(13,58,65,.05), 0 28px 60px -22px rgba(13,58,65,.28);
  /* ---- motion ---- */
  --dur-fast:.14s;
  --dur:.22s;--dur-open:.3s;
  --ease:cubic-bezier(.22,.8,.3,1);
  /* ---- families ---- */
  --display:'Archivo','Archivo Narrow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --prose:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ---- measure ---- */
  --col:1160px;
  --gutter:88px;
  /* ---- spacing scale (replaces 41 hand-picked values) ---- */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px;
  --s5:20px; --s6:26px;  --s7:32px; --s8:40px;
  --s9:52px; --s10:64px; --s11:82px; --s12:104px;
  /* ---- type scale (replaces 24 ad-hoc sizes) ---- */
  /* SHIM. --fs-micro was the "decorative floor" and carried roughly a
     quarter of the site's visible text. It is lifted to --fs-fine so that
     any consumer still living in a page-local block comes up with it.
     Nothing in this file points at it any more. */
  --fs-micro:12.5px;
  --fs-label:11px;
  --fs-pn:11.5px;
  --fs-fine:12.5px;
  --fs-data:13px;
  --fs-sm:14.5px;
  --fs-base:16px;
  --fs-md:17px;
  --fs-lede:20px;
  --fs-lg:20px;
  --fs-xl:21px;
  --fs-2xl:26px;
  --fs-prose:18px;
  --fs-h3:21px;
  --fs-h2:clamp(31px,4vw,46px);
  --fs-h1:clamp(42px,6.4vw,78px);
  --fs-readout:clamp(26px,3.6vw,48px);
  /* ---- tracking: three values bound to SIZE BAND, not to selector.
          Replaces nineteen hand-picked figures. Nothing is ever
          positive: this site does not letterspace. ---- */
  --lsd-tight:-.035em;   /* above 40px */
  --lsd:-.022em;         /* 20px to 40px */
  --lsd-sm:-.012em;      /* below 20px */
  --lsd-0:0;             /* every key, caption, unit and label */
  /* ---- leading: four values, replacing twenty-three ---- */
  --lh-display:1.02;
  --lh-title:1.18;
  --lh-ui:1.45;
  --lh-read:1.6;
  /* ---- Archivo's width axis. It was paid for in the font request
          and never used above 100. It is the hierarchy now. ---- */
  --wd-sheet:75%;        /* the rail numeral, and only that */
  --wd-mast:82%;         /* h1 */
  --wd-head:88%;         /* h2 */
  --wd-note:84%;         /* every annotation on the site */
  --wd-sub:96%;          /* h3 */
  --wd-body:100%;
  --wd-wide:108%;        /* one expanded moment per page */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1112;
  --surface:#161A1B;
  --sunk:#1C2122;
  --ink:#ECEAE5;
  --deep:#6FB8C2;
  --deep-soft:#14302F;
  --deep-line:#2C4E50;
  --copper:#DE8352;
  --copper-soft:#2B1F18;
  --rule:#272C2D;
  --rule-strong:#3B4243;
  --muted:#969D9E;
  --sweep:#1B2021;
  --steel:#6C7A80;
  /* The band inverts DIRECTION, not hue. #0A2C32 on #0E1112 measured
     1.28:1 - the site's strongest compositional move vanished, and took
     the primary lead-capture band with it. A pale warm slab on the dark
     ground is the same event with the polarity the theme demands. */
  --band:#DDE0DA;
  --on-band:#16130F;
  --on-band-muted:#4A453E;
  --on-copper:#0E1112;
  --focus:#DE8352;
  --lift:0 1px 0 var(--rule-strong);
  --sticky-shadow:0 -6px 22px -10px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 28px 60px -22px rgba(0,0,0,.8);
  --dur-fast:.14s;
  --dur:.22s;--dur-open:.3s;
  --ease:cubic-bezier(.22,.8,.3,1);
  --gutter:88px;
}}
:root[data-theme="dark"]{
  --paper:#0E1112;
  --surface:#161A1B;
  --sunk:#1C2122;
  --ink:#ECEAE5;
  --deep:#6FB8C2;
  --deep-soft:#14302F;
  --deep-line:#2C4E50;
  --copper:#DE8352;
  --copper-soft:#2B1F18;
  --rule:#272C2D;
  --rule-strong:#3B4243;
  --muted:#969D9E;
  --sweep:#1B2021;
  --steel:#6C7A80;
  --band:#DDE0DA;
  --on-band:#16130F;
  --on-band-muted:#4A453E;
  --on-copper:#0E1112;
  --focus:#DE8352;
  --lift:0 1px 0 var(--rule-strong);
  --sticky-shadow:0 -6px 22px -10px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 28px 60px -22px rgba(0,0,0,.8);
  --dur-fast:.14s;
  --dur:.22s;--dur-open:.3s;
  --ease:cubic-bezier(.22,.8,.3,1);
  --gutter:88px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}
html{scroll-behavior:smooth}
/* anchors must clear the sticky header */
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* skip link - WCAG 2.4.1 */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:var(--s3);top:var(--s3);position:fixed;background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);padding:var(--s3) var(--s5);font-family:var(--display);font-size:var(--fs-data);font-weight:600;outline:2px solid var(--focus);outline-offset:3px}

.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--s7)}
@media(max-width:700px){.wrap{padding:0 var(--s5)}}

/* Sections are told apart by ground, not by nine identical hairlines.
   Asymmetric padding puts real air above each heading. */
section{padding:clamp(74px,9vw,132px) 0 clamp(62px,7.4vw,108px);border-top:none}
section:nth-of-type(odd){background:var(--paper)}
section:nth-of-type(even){background:var(--surface)}
/* the two places a literal document rule is correct */
section#faq{border-top:1px solid var(--rule)}
@media(max-width:700px){section{padding:var(--s10) 0 var(--s9)}}
/* sections that carry their own ground keep it */
section.formsec,section.form-sec{background:var(--sunk)}
section.upnext,section.quick{background:var(--band)}
section.proof{background:var(--surface)}
/* a grid item that must be allowed to scroll its own overflow */
.railbody{min-width:0}

.num{font-variant-numeric:tabular-nums}

/* ---------- type ----------
   TWO ABSOLUTE RULES, and they are auditable by grep:
     1. Nothing on this site is transformed to uppercase.
     2. No letter-spacing value in this file is positive.
   Every capital that survives is a capital the copy typed: GPM, MCL,
   EPA, PFAS, UV, RO, FIRST, THEN, STEP 01. That is where a document
   uppercases, and nowhere else. */

/* ---------- THE ANNOTATION ----------
   One rule for every label on the site. It replaces twenty-six
   hand-derived micro-label rules carrying seven tracking values and
   three weights. Archivo condensed 600 at 14.5px, sentence case,
   zero tracking - a caption in a spec sheet, not a legend on a chart. */
.label,
.eyebrow,
.cbh,
.as-h,
.fgroup-h,
.instr-title,
.tldr .h,
.sources .h,
.related .h,
.plate-head .t,
.est-h .t,
.pitem .k,
.band-cap .k,
.step .k,
.sk,
th,
.artmeta,
.postcard .meta,
.field label{
  font-family:var(--display);
  font-stretch:var(--wd-note);
  font-weight:600;
  font-size:var(--fs-sm);
  line-height:var(--lh-ui);
  letter-spacing:var(--lsd-0);
  text-transform:none;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* a key inside an instrument recedes - the VALUE is the subject */
.sk,th,.pitem .k,.band-cap .k,.step .k,.artmeta,.postcard .meta{color:var(--muted)}
.label--key{color:var(--muted)}
.cbh,.as-h,.tldr .h,.sources .h{margin-bottom:var(--s3)}
.fgroup-h,.related .h{margin-bottom:var(--s4)}
.plate-head .t,.est-h .t{color:var(--muted)}
.band-cap .k{flex-shrink:0;padding-top:2px}
.pitem .k{font-size:var(--fs-fine)}
.field label{color:var(--ink);font-size:var(--fs-data)}

/* The geometry: a 24px tick BEFORE the label, pointing out of the
   gutter. It replaces eighty-four hairlines that all ran to the same
   right margin and terminated on the padding edge - a dimension line
   measuring the CSS box. */
.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin:0 0 var(--s2);
  max-width:44ch;
}
.eyebrow::after{content:none}
.eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--steel);
  flex:0 0 24px;
}
/* a title page is not annotated */
.hero .eyebrow::before,
.phero .eyebrow::before,
.arthead .eyebrow::before{content:none}
/* on the inverted bands the annotation inverts with them */
section.upnext .eyebrow,section.quick .eyebrow{color:var(--on-band)}
section.upnext .eyebrow::before,
section.quick .eyebrow::before{background:var(--on-band-muted)}

/* ---------- THE HEADING RAMP ----------
   Four real optical weights where eleven selectors were all 700.
   The non-round values are only producible by a variable font, which
   is the plainest available signal that a person tuned the ramp. */
h1.page,.hero h1,h1.art{
  font-stretch:var(--wd-mast);
  font-weight:800;
  letter-spacing:var(--lsd-tight);
  line-height:var(--lh-display);
  text-wrap:balance;
}
h1.page,.hero h1{font-size:var(--fs-h1);margin:var(--s4) 0 0;max-width:15ch}

h2.sec,.artbody h2{
  font-family:var(--display);
  font-stretch:var(--wd-head);
  font-weight:720;
  letter-spacing:var(--lsd);
  line-height:var(--lh-title);
  text-wrap:balance;
}
/* 8px, not 20px: the annotation is ATTACHED to its heading. That is
   what lets the 82px above the pair read as the break. */
h2.sec{font-size:var(--fs-h2);margin:var(--s2) 0 0;max-width:20ch}

h3.sub-h,.artbody h3{
  font-family:var(--display);
  font-stretch:var(--wd-sub);
  font-weight:660;
  letter-spacing:var(--lsd);
  line-height:var(--lh-title);
}
h3.sub-h{font-size:var(--fs-h3);margin:var(--s8) 0 0}

.step h3,.step h4,.postcard h3,.artcta h3,.thanks h3,
.plate-head .s,.est-h .s{
  font-family:var(--display);
  font-stretch:var(--wd-body);
  font-weight:600;
  letter-spacing:var(--lsd-sm);
  line-height:var(--lh-title);
}
.plate-head .s,.est-h .s{font-size:var(--fs-base);margin-top:6px}

/* h1 em is the concession voice - Source Serif 4, true italic. At 400
   against Archivo 800 at 78px it read as a hole in the line; 500 holds
   it. Same family, same host, one instance added to the ital tuple. */
h1.page em,.hero h1 em,h1.art em{
  font-family:var(--prose);
  font-style:italic;
  font-weight:500;
  font-size:1.02em;
  font-optical-sizing:auto;
  color:var(--deep);
  letter-spacing:var(--lsd);
}

/* .lede is Archivo now - serif survives only where there is running argument */
.lede{font-family:var(--display);font-weight:400;font-size:var(--fs-lede);line-height:1.62;color:var(--muted);max-width:56ch;margin:var(--s5) 0 0}
.lede strong{font-weight:600;color:var(--ink)}
.prose{font-family:var(--prose);font-size:var(--fs-prose);line-height:1.74;max-width:64ch}
.prose p{margin:0 0 var(--s5)}.prose p:last-child{margin:0}
.prose strong{font-weight:600;color:var(--ink)}
.fine{font-family:var(--display);font-size:var(--fs-fine);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted);margin:var(--s4) 0 0}

/* ---------- PRODUCT FAMILY LABEL ----------
   Two products carry the word Signature. One is a drinking-water
   system under a sink, the other is a whole-home treatment level, and
   until now nothing but the copy told them apart. This is the tell.

   It is not a chip in the selectable sense: no border, no affordance,
   no hover. It is the family stamp in the corner of a drawing - a soft
   tint of the family color and a mark, at a fixed 12.5px, so it stays
   the same quiet size beside a 78px h1 and beside a 15px list item.

   Color alone would not carry it, so the mark carries it too: a round
   drop for the water you drink, a flat bar for the line that feeds the
   house. Legible in greyscale, and to a reader who cannot separate
   copper from teal. Both pairs clear AA on every ground on the site. */
.fam{
  display:inline-flex;          /* atomic, so a parent link cannot underline it */
  align-items:center;
  gap:6px;
  margin-left:var(--s1);
  padding:2px 8px 3px;
  border-radius:2px;
  border:none;
  font-family:var(--display);
  font-stretch:var(--wd-note);
  font-weight:600;
  font-size:var(--fs-fine);
  line-height:1.25;
  letter-spacing:var(--lsd-0);
  text-transform:none;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  position:relative;
  top:-.08em;                   /* optical, against a heavier heading */
  align-self:center;            /* a flex parent must not stretch it to the column */
}
.fam::before{content:"";flex:0 0 auto;display:block}
.fam--drink{background:var(--copper-soft);color:var(--copper)}
.fam--drink::before{width:7px;height:7px;border-radius:50%;background:var(--copper)}
.fam--home{background:var(--deep-soft);color:var(--deep)}
.fam--home::before{width:12px;height:3px;border-radius:0;background:var(--deep)}

/* Three grounds on this site are already a family tint. The label keeps
   its mark and its color there and borrows the panel ground instead,
   so it never dissolves into the surface it sits on. */
.prow.feat .fam--home,.est-out .fam--home{background:var(--surface)}
.callout .fam--drink{background:var(--surface)}

/* The inverted bands: neither family color survives on --band, so the
   tint is dropped and the mark alone does the work. */
.upnext .fam,.quick .fam{background:none;padding:0;color:var(--on-band-muted)}
.upnext .fam--drink::before,.quick .fam--drink::before{background:var(--on-band-muted)}
.upnext .fam--home::before,.quick .fam--home::before{background:var(--on-band)}

/* ---------- "WHAT THIS DOES" ----------
   One line of plain English under a product name or a section heading,
   for the reader who is scanning and has not agreed to read a
   paragraph yet. Archivo where the argument below it is Source Serif,
   400 where the heading above it is 660 or more: it is told apart by
   family and weight, not by another rule or another color. */
.does{
  font-family:var(--display);
  font-stretch:var(--wd-body);
  font-weight:400;
  font-size:var(--fs-md);
  line-height:var(--lh-ui);
  letter-spacing:var(--lsd-sm);
  color:var(--ink);
  max-width:48ch;
  margin:var(--s3) 0 0;
  text-wrap:pretty;
}
.does strong{font-weight:600}
.upnext .does,.quick .does{color:var(--on-band-muted)}

/* ---------- MONO RETREATS TO MEASUREMENT ----------
   Archivo states. IBM Plex Mono measures. Source Serif 4 concedes -
   the rule this file has always stated and never executed. Every
   survivor below holds a digit that has to hold a column, or a
   manufacturer's identifier. Nothing else on the site is mono. */
.readout,.readout .unit,.pn,.dim-v,
.est-res,.est-val,.est-math,
td.part,td.money,.keyfact .n,
.bench .leaders text{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  text-transform:none;
  letter-spacing:var(--lsd-0);
}

/* The part number is the brand argument set in type. text-transform
   was rendering "Pentair Fleck 5800" as PENTAIR FLECK 5800 and
   "Jacobi AquaSorb HS-12x40" as JACOBI AQUASORB HS-12X40 across
   sixty-five instances - CSS falsifying the trademarks the argument
   rests on. Mixed-case Plex at 600 already reads as a part number. */
.pn{font-size:var(--fs-pn);font-weight:600;color:var(--ink);white-space:nowrap}
@media(max-width:560px){.pn{white-space:normal}}

/* the measured value */
.readout{font-weight:500;font-size:var(--fs-readout);letter-spacing:var(--lsd);line-height:1;color:var(--ink);display:flex;align-items:baseline;flex-wrap:wrap}
.readout .unit{font-size:.34em;font-weight:500;color:var(--muted);margin-left:.45em}

/* the concession */
.concede{font-family:var(--prose);font-style:italic;font-weight:400;font-size:1.05em;color:var(--deep)}

/* links inside body surfaces - 29 of these were browser-default blue */
.prose a,.lede a,.sv a,.inc a,.callout a,.trust a,.step p a,details .body a,.artbody a,.tldr a{color:var(--deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover,.lede a:hover,.sv a:hover,.inc a:hover,.callout a:hover,.trust a:hover,.step p a:hover,details .body a:hover,.artbody a:hover,.tldr a:hover{color:var(--ink);text-decoration-thickness:2px}

/* ---------- dimension value ----------
   .dim, .dim--y, .tank and .dimpair had zero instances site-wide and
   are gone. .dim-v survives, unplaced, for the tank-figure pass: a
   real vessel height, stated once, is the only thing on the list that
   would earn the drawing-set conceit back. */
.dim-v{font-size:var(--fs-fine);font-weight:500;color:var(--ink);white-space:nowrap}

/* ---------- gutter rail (the margin of a drawing sheet) ----------
   One hundred and ten visible ordinals across six parallel systems
   became thirty-four, in one place, in the margin. This is the only
   sequence number the site prints. 75% is the width extreme that has
   had no other job since .nameplate was deleted. */
@media(min-width:900px){
  .railgrid{display:grid;grid-template-columns:var(--gutter) 1fr;gap:0}
  .rail{position:relative;padding-top:6px}
  .rail::before{
    content:attr(data-n);
    font-family:var(--display);
    font-stretch:var(--wd-sheet);
    font-weight:800;
    font-size:34px;
    line-height:1;
    letter-spacing:var(--lsd);
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .rail::after{content:"";position:absolute;left:3px;top:46px;bottom:0;width:1px;background:var(--steel);opacity:.55}
}
/* The rail shrinks on mobile; it is not deleted. A numbered margin is
   the cheapest identity available on the device most of this audience
   will actually use, and display:none spent it. */
@media(max-width:899px){
  .railgrid{display:grid;grid-template-columns:34px 1fr;gap:0}
  .rail{display:block;position:relative;padding-top:4px}
  .rail::before{
    content:attr(data-n);
    font-family:var(--display);
    font-stretch:var(--wd-sheet);
    font-weight:800;
    font-size:var(--fs-md);
    line-height:1;
    letter-spacing:var(--lsd-sm);
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .rail::after{content:none}
}
@media(max-width:600px){
  .railgrid{grid-template-columns:28px 1fr}
  .rail::before{font-size:var(--fs-sm)}
}

/* ---------- header + nav ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:saturate(1.7) blur(12px);border-bottom:1px solid var(--rule)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:64px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0;min-height:44px}
.mark img{width:26px;height:26px}
.mark b{font-weight:700;font-size:16.5px;letter-spacing:var(--lsd);white-space:nowrap}
/* The "Birmingham, AL" tag in the brand mark is decorative: the locality is already
   in the LocalBusiness schema, the footer NAP and the page copy. It costs 80px plus
   a 10px gap, and that 90px was the single biggest reason the nav bar could not fit
   on a landscape tablet. Measured at viewport 1440 with Archivo loaded, the width at
   which the last nav item clears its box:

     locality visible ............................ 1220px
     locality hidden ............................. 1130px  (1160 with a wider face)
     locality hidden + 10px gap + 13px nav text .. 1070px  (1100 with a wider face)

   So it comes back only where there is comfortable room for it. */
.mark [data-site="locale"]{display:none}
@media(min-width:1400px){ .mark [data-site="locale"]{display:inline} }
.nav{display:flex;gap:22px;align-items:center;flex:1;justify-content:center}
.nav a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{font-weight:600}
.hcall{display:flex;align-items:center;gap:var(--s4);flex-shrink:0}
/* the header phone is live from 861px up - on a 1024px tablet that is a
   touch target, and 19.5px of line box was not one. The 64px bar absorbs
   the 44px without moving anything. */
.tel{font-family:var(--mono);font-size:var(--fs-data);font-weight:400;letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.tel:hover{color:var(--deep)}
.navtoggle{display:none;background:none;border:1px solid var(--steel);border-radius:2px;padding:7px 11px;font-family:var(--display);font-size:var(--fs-data);font-weight:600;letter-spacing:var(--lsd-0);color:var(--ink);cursor:pointer}
/* MEASURED, not estimated: with Archivo loaded, the fourteen items plus
   their gaps come to 970px at 1501px and 994px at 1700px, against a nav box
   of 799px and 998px respectively. The bar therefore does not actually fit
   until ~1700px - below that the last two items ("Blog", "Get a Quote") sat
   outside the nav's own scroll box, which has its scrollbar suppressed, so
   they were silently unreachable at 1536 / 1600 / 1680. The drawer engages
   below 1700px, where every item is a 44px row.

   RE-MEASURED ON THE LIVE SITE 2026-10-05, then again after the brand mark's
   decorative "Birmingham, AL" tag was hidden below 1400px. Floors, measured at
   viewport 1440 by shrinking .hbar until the last nav item clips:

     locality visible ............................ 1220px
     locality hidden ............................. 1130px (1160 stressed)
     locality hidden + 10px gap + 13px nav text .. 1070px (1100 stressed)

   The drawer engages below 1180px, which puts the dropdowns on iPad Air /
   10.9" landscape (1180) and iPad Pro 11" landscape (1194) while keeping 80px
   clear of the stressed floor. iPad mini landscape (1133) stays in the drawer;
   reaching it would leave only ~30px of margin and is not worth the risk.

   A 1024px breakpoint was tried earlier the same day and reverted - it came
   from a header measured on a local file:// snapshot where .mark read 157px
   against 261px live. Measure on the DEPLOYED page.
   THIS BREAKPOINT IS MIRRORED IN assets/site.314495dc7f.js (NAV_DRAWER_MQ). */
@media(max-width:1179.98px){
  .nav{position:fixed;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--rule-strong);flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) 0;box-shadow:var(--shadow);max-height:calc(100vh - 64px);overflow-y:auto}
  .nav[hidden]{display:none}
  .nav a{padding:13px var(--s7);font-size:15px;border-bottom:1px solid var(--rule);min-height:44px;display:flex;align-items:center}
  .nav a:last-child{border-bottom:none}
  .navtoggle{display:block;min-height:44px;min-width:44px}
}
/* Below 760px the sticky CTA bar (z-index 70) paints OVER the open drawer
   (inside header's z-index 60). On a 375x667 viewport that buried the last
   72px of the drawer - "Get a Quote" was unreachable at any scroll position.
   Reserving the bar's height inside the drawer's own scroll box fixes it
   without hiding the CTA. */
@media(max-width:760px){.nav{padding-bottom:86px}}
/* The header phone is a conversion element and there is room for it right
   down to the tablet range - it is NOT tied to the drawer breakpoint. */
@media(max-width:860px){.tel{display:none}}
/* Above the drawer breakpoint the fourteen-item bar has to survive on one
   line. The header bar - and ONLY the header bar - may use more than --col,
   the nav is allowed to shrink (min-width:0) and, as a hard floor, scrolls
   inside its own box rather than pushing the document sideways. There is no
   width at which this page scrolls horizontally. */
/* These are PROTECTIONS, so they cover the whole desktop range rather than
   only >=1700px where they were least needed - the tight end is 1024px. */
@media(min-width:1180px){
  header .hbar{max-width:min(calc(100vw - 64px),1740px)}
  /* .95vw left only 4px of slack at the 1700px edge - one fallback face
     wider than Archivo and the bar clips again. .72vw gives 55px there and
     more above it, measured with the font loaded. */
  .nav{min-width:0;gap:clamp(10px,.72vw,20px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
}
/* The 13px step is only needed where the bar is actually tight - just above the
   drawer breakpoint. It is part of why the floor is 1070/1100 rather than 1130. */
@media(min-width:1180px) and (max-width:1420px){ .nav a,.nav .grpb{font-size:13px} }

/* At phone widths the mark, the CTA and the drawer toggle all have to fit
   one 64px line. Both flanks were flex-shrink:0 with a nowrap wordmark,
   which pushed the toggle off-screen once the real mobile breakpoints
   start matching. */
@media(max-width:480px){
  .hbar{gap:var(--s3)}
  .mark{min-width:0;flex-shrink:1}
  .mark b{white-space:normal;font-size:15px;line-height:1.15;overflow-wrap:anywhere}
  .hcall{gap:var(--s2);min-width:0}
  .hcall .btn-sm{padding:9px var(--s3);font-size:var(--fs-data)}
  .navtoggle{padding:7px var(--s2)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:var(--lsd-sm);padding:13px 22px;border-radius:2px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn-primary{background:var(--deep);color:var(--paper);border-color:var(--deep)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--steel)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-sm{padding:9px var(--s4);font-size:13.5px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
/* --deep in dark is #6FB8C2 - desaturate-and-lift the light primary
   until it passes contrast, which always produces the same pastel and
   is the most recognisable dark-theme artifact there is. In dark the
   primary is simply the inverse of the page. */
:root[data-theme="dark"] .btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:root[data-theme="dark"] .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:#0E1112}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  :root:not([data-theme="light"]) .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:#0E1112}
}
/* .btn-sm computes to 40.3px. 760px missed the tablets entirely: an iPad in
   portrait is 768px and one in landscape 1024px, and both are touch-only.
   The pointer query catches touch laptops the width query cannot see. */
@media(max-width:1024px),(pointer:coarse){.btn,.btn-sm{min-height:44px}}

/* ---------- page hero ---------- */
.phero{padding:68px 0 0;border-top:none}
.phero .lede{font-size:var(--fs-lede);margin-top:22px;max-width:50ch}
.phero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:30px;align-items:center}
.hgrid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media(max-width:940px){.hgrid{grid-template-columns:1fr;gap:38px}}

.pricebar{display:flex;align-items:baseline;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
/* a price is a commitment, not a measurement - it stays Archivo 800 */
.pricebig{font-weight:800;font-size:clamp(42px,6.4vw,60px);letter-spacing:var(--lsd-tight);line-height:1}
.pricenote{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);line-height:var(--lh-ui)}
.tbd{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);font-weight:600}
.pricebar .readout+.tbd{margin-top:10px;display:block}

/* ---------- hero motion (promoted from index.html) ----------
   AT REST: everything at final geometry and full opacity.
   rise carries NO opacity channel - .hero h1 is the LCP element. */
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .eyebrow,.hero h1,.hero .lede,.hero-cta{animation:rise .6s var(--ease) backwards}
.hero h1{animation-delay:.05s}
.hero .lede{animation-delay:.12s}
.hero-cta{animation-delay:.18s}
.plate{animation:rise .7s var(--ease) .1s backwards}
/* bars sit at final geometry by default; site.js adds .grew on intersection */
.band-anim{transform-box:fill-box;transform-origin:left center}
.band-anim.grew{animation:grow .9s var(--ease) backwards}

/* ---------- rate plate (promoted from index.html) ---------- */
.plate{background:var(--surface);border:1px solid var(--rule-strong);box-shadow:var(--shadow-lg);position:relative}
.plate::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);pointer-events:none}
.plate-head{padding:var(--s5) var(--s6) var(--s4);border-bottom:1px solid var(--rule)}
.plate-rows{display:flex;flex-direction:column}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:15px var(--s6);border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background var(--dur-fast) var(--ease)}
.prow:hover{background:var(--deep-soft)}
.prow .n{font-weight:600;font-size:15px;letter-spacing:var(--lsd-sm)}
.prow .n small{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-fine);letter-spacing:var(--lsd-0);line-height:var(--lh-read);color:var(--muted);margin-top:3px;text-transform:none}
.prow .v{font-weight:700;font-size:var(--fs-xl);letter-spacing:var(--lsd);white-space:nowrap}
.prow.feat{background:var(--deep-soft)}
.prow.feat:hover{background:var(--deep-soft);filter:brightness(.98)}
.plate-foot{padding:15px var(--s6);display:flex;align-items:center;gap:9px}
.plate-foot span{font-family:var(--display);font-size:var(--fs-fine);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--copper);flex-shrink:0}

/* ---------- instrument frame (promoted from index.html) ---------- */
.instr{margin-top:38px;border:1px solid var(--rule);background:var(--surface);padding:30px 28px var(--s6);overflow-x:auto;box-shadow:var(--lift)}
.instr-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.instr-title{color:var(--muted)}
.instr-src{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);line-height:var(--lh-read)}
/* utility attribution under a hardness instrument. The 2.3-9.1 gpg figure is
   Birmingham Water Works only; other systems we serve run materially harder. */
.instr-note{flex-basis:100%;margin-top:calc(var(--s3) * -1);font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);line-height:var(--lh-read);border-left:2px solid var(--copper);padding-left:var(--s4)}
.instr-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.instr-note a:hover{color:var(--copper)}
svg.viz{display:block;width:100%;height:auto}
/* min-width tracks each drawing's own viewBox width, so a narrow viewport
   scrolls the figure at 1:1 instead of shrinking it. At 580px the 900-unit
   gauge rendered its axis labels at 6.1 CSS px on a 375px screen. */
svg.gauge{min-width:900px}
svg.compare{min-width:600px}
svg.flow{min-width:660px}

/* ---------- proof band ---------- */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface);margin-top:66px}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--col);margin:0 auto}
.pitem{padding:22px var(--s6) 22px 0;border-right:1px solid var(--rule)}
.pitem:first-child{padding-left:var(--s7)}.pitem:not(:first-child){padding-left:var(--s6)}
.pitem:last-child{border-right:none;padding-right:var(--s7)}
.pitem .v{font-size:14px;line-height:1.42;margin-top:7px;font-weight:500}
@media(max-width:860px){.proof-in{grid-template-columns:repeat(2,1fr)}
  .pitem{padding:18px var(--s5)!important;border-bottom:1px solid var(--rule)}
  .pitem:nth-child(2n){border-right:none}.pitem:nth-child(n+3){border-bottom:none}}
@media(max-width:480px){.proof-in{grid-template-columns:1fr}
  .pitem{border-right:none!important;border-bottom:1px solid var(--rule)!important}
  .pitem:last-child{border-bottom:none!important}}

/* ---------- imagery ---------- */
.band{width:100%;position:relative;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;background:var(--sunk)}
.band img{width:100%;height:clamp(300px,48vw,560px);object-fit:cover;filter:saturate(.82) contrast(1.03)}
.band-cap{max-width:var(--col);margin:0 auto;padding:var(--s4) var(--s7) 18px;display:flex;gap:var(--s4);align-items:baseline;border-top:1px solid var(--rule);background:var(--paper)}
.band-cap .t{font-family:var(--display);font-size:var(--fs-sm);line-height:1.5;color:var(--muted);max-width:62ch}
@media(max-width:700px){.band-cap{padding:14px var(--s5) var(--s4);flex-direction:column;gap:7px}}

.figure{border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift);overflow:hidden;margin:0}
.figure img{width:100%;filter:saturate(.86) contrast(1.02);background:var(--sunk)}
.figure figcaption{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);text-transform:none;line-height:var(--lh-read);color:var(--muted);padding:14px var(--s5);border-top:1px solid var(--rule);background:var(--paper)}

/* API correction: start alignment is the common case; centred is the exception */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:34px}
.split.center{align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- the lit vitrine ---------- */
.bench{width:100vw;margin-inline:calc(50% - 50vw);background:var(--sweep);border-block:1px solid var(--rule);min-height:clamp(380px,48vh,560px);display:grid;place-items:center;position:relative;padding:var(--s8) 0}
.bench img{max-width:min(760px,86vw);mix-blend-mode:multiply}
.bench .leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bench .leaders polyline{fill:none;stroke:var(--steel);stroke-width:1}
.bench .leaders circle{fill:var(--steel)}
.bench .leaders text{fill:var(--ink);font-size:var(--fs-pn)}
.bench .leaderlist{display:none}
:root[data-theme="dark"] .bench img{mix-blend-mode:normal;border:1px solid var(--rule-strong)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .bench img{mix-blend-mode:normal;border:1px solid var(--rule-strong)}}
@media(max-width:760px){.bench .leaders{display:none}.bench .leaderlist{display:block}}

/* ---------- reflowable treatment train ---------- */
.trainfig{margin-top:38px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift);padding:var(--s6) var(--s6) 0}
svg.train{display:block;width:100%;height:auto;overflow:visible}
svg.train [data-part]{transition:opacity var(--dur) var(--ease)}
svg.train .vessel{fill:var(--sweep);stroke:var(--ink);stroke-width:1.25}
svg.train .media{fill:var(--deep-soft);stroke:none}
svg.train .flow{fill:none;stroke:var(--deep);stroke-width:1.5}
svg.train .aux{fill:none;stroke:var(--steel);stroke-width:1;stroke-dasharray:4 4}
svg.train .bln circle{fill:var(--paper);stroke:var(--ink);stroke-width:1}
svg.train .bln text{fill:var(--ink);font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.trainlabels{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--rule);margin-top:22px}
.tl{padding:14px var(--s4);border-right:1px solid var(--rule)}
.tl:last-child{border-right:none}
.trainfig[data-tier] svg.train [data-part]{opacity:.22}
.trainfig[data-tier] svg.train [data-part].on{opacity:1}
.tm-row[aria-pressed="true"]{background:var(--sunk);box-shadow:inset 2px 0 0 var(--deep)}
@media(max-width:860px){.trainlabels{grid-template-columns:repeat(2,1fr)}.tl{border-bottom:1px solid var(--rule)}}
@media(max-width:560px){.trainlabels{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){svg.train [data-part]{transition:none}}

/* ---------- spec rows ---------- */
.specs{margin-top:var(--s7);border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift)}
.srow{display:grid;grid-template-columns:210px 1fr;border-bottom:1px solid var(--rule)}
.srow:last-child{border-bottom:none}
/* the 210px label column separates by position and by --muted weight.
   It does not need a full-height hairline as well - one deletion, and
   sixty-five .srow instances stop reading as a rendered spreadsheet. */
.sk{padding:15px var(--s5);background:var(--paper);border-right:none}
.sv{padding:15px var(--s5);font-size:var(--fs-sm);line-height:1.52}
.sv strong{font-weight:600}
.sv .sub{color:var(--muted);font-size:var(--fs-data);display:block;margin-top:3px}
@media(max-width:640px){.srow{grid-template-columns:1fr}
  .sk{border-right:none;border-bottom:1px solid var(--rule);padding:11px 18px}}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin-top:var(--s7);border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift)}
table{width:100%;border-collapse:collapse;min-width:580px}
.table-scroll.wide table{min-width:720px}
th,td{text-align:left;padding:14px var(--s5);border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur-fast) var(--ease)}
tbody tr:hover{background:var(--sunk)}
th{background:var(--paper);padding:14px var(--s5)}
td{font-size:var(--fs-sm);line-height:1.5}
td.part{font-size:var(--fs-data);font-weight:500}
td.money{font-size:14px;font-weight:600;white-space:nowrap;text-align:right}
td .sub{color:var(--muted);font-size:var(--fs-data);display:block;margin-top:3px}

/* ---------- callout + claims ---------- */
.callout{margin-top:30px;border-left:3px solid var(--copper);background:var(--copper-soft);padding:var(--s6) var(--s6)}
.callout p{font-family:var(--prose);font-size:var(--fs-prose);line-height:1.58;margin:0;max-width:58ch}
.callout strong{font-weight:600}
.claimbox{margin-top:28px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift);padding:var(--s6)}

.cy,.cn{font-size:15px;line-height:1.55;padding-left:var(--s6);position:relative;margin:0 0 10px}
.cy:last-child,.cn:last-child{margin-bottom:0}
.cy::before{content:"\2713";position:absolute;left:0;color:var(--deep);font-weight:700}
.cn::before{content:"\2717";position:absolute;left:0;color:var(--copper);font-weight:700}
.cn{color:var(--muted)}
.cy strong,.cn strong{font-weight:600}

/* ---------- included list ---------- */
.inc{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-direction:column;gap:10px}
.inc li{font-size:15px;line-height:1.48;padding-left:19px;position:relative}
.inc li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--rule-strong)}
.inc strong{font-weight:600}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s7);border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift)}
.col2{padding:var(--s6)}
.col2:first-child{border-right:1px solid var(--rule)}

@media(max-width:760px){.cols2{grid-template-columns:1fr}
  .col2:first-child{border-right:none;border-bottom:1px solid var(--rule)}}

/* ---------- flow chips ----------
   A bordered pill signals selectability on an item that is not
   selectable. These are a divider-separated inline run now: the same
   information, no false affordance. */
.chips,.brands{display:flex;flex-wrap:wrap;gap:0 var(--s4);align-items:baseline}
.chips{margin-top:var(--s5)}
.brands{margin-top:var(--s6)}
.chips span,.brands span{
  font-family:var(--display);
  font-size:var(--fs-data);
  font-weight:600;
  letter-spacing:var(--lsd-0);
  text-transform:none;
  color:var(--muted);
  border:none;
  background:none;
  padding:0 0 0 var(--s4);
  border-left:1px solid var(--rule-strong);
}
.brands span{color:var(--ink)}
.chips span:first-child,.brands span:first-child{border-left:none;padding-left:0}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:1px solid var(--rule)}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{padding:var(--s6) var(--s6) var(--s6) 0;border-right:1px solid var(--rule)}
.step:last-child{border-right:none;padding-right:0}
.step:not(:first-child){padding-left:var(--s6)}
.step h3,.step h4{font-size:var(--fs-md);margin:11px 0 0}
.step p{font-family:var(--display);font-size:15.5px;line-height:1.56;color:var(--muted);margin:9px 0 0}
@media(max-width:900px){.steps,.steps.four{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--rule);padding:22px 0}
  .step:not(:first-child){padding-left:0}.step:last-child{border-bottom:none}}

/* ---------- faq ---------- */
.faq{margin-top:30px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:var(--s5) 0;font-weight:600;font-size:16.5px;letter-spacing:var(--lsd-sm);display:flex;justify-content:space-between;align-items:center;gap:var(--s5)}
summary::-webkit-details-marker{display:none}
/* "+" was answered by an EN DASH - a range mark at the wrong arm
   length and the wrong height, so the control visibly jumped on
   toggle. A chevron is navigation, which is what this is. */
summary::after{
  content:"";
  width:9px;height:9px;flex-shrink:0;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
details[open] summary::after{transform:translateY(2px) rotate(-135deg)}

/* The body snapped into place while the chevron eased. Same curve, same duration
   family, so opening a disclosure reads as one movement rather than two. */
details[open] > .body{animation:rise var(--dur-open) var(--ease)}

/* ---------- sequenced reveal ----------
   Children sit at final position with NO class applied, so nothing is ever parked
   waiting on an observer - if the script never runs, the list is simply there.
   site.js adds .revealed on intersection and checks matchMedia itself, because a
   CSS reduced-motion block cannot stop a class flip. `rise` is transform-only, no
   opacity, so a child stays readable even mid-animation. */
.seq.revealed > *{animation:rise .55s var(--ease) backwards}
.seq.revealed > *:nth-child(2){animation-delay:.06s}
.seq.revealed > *:nth-child(3){animation-delay:.12s}
.seq.revealed > *:nth-child(4){animation-delay:.18s}
.seq.revealed > *:nth-child(5){animation-delay:.24s}
.seq.revealed > *:nth-child(6){animation-delay:.30s}
.seq.revealed > *:nth-child(7){animation-delay:.36s}
.seq.revealed > *:nth-child(8){animation-delay:.42s}
summary:hover{color:var(--deep)}
details .body{font-family:var(--display);font-size:var(--fs-base);line-height:1.62;color:var(--muted);padding:0 0 22px;max-width:66ch}
details .body strong{font-weight:600;color:var(--ink)}

/* ---------- forms ---------- */
.formsec{background:var(--sunk)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:start}
@media(max-width:940px){.fgrid{grid-template-columns:1fr;gap:34px}}
form.card{background:var(--surface);padding:30px 28px;border:1px solid var(--rule-strong);box-shadow:var(--shadow)}
@media(min-width:940px){form.card{box-shadow:var(--shadow-lg)}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.frow.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:600px){.frow,.frow.three{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}

/* 16px or iOS Safari zooms the viewport on tap */
.field input,.field select,.field textarea{font-family:var(--display);font-size:var(--fs-base);color:var(--ink);background:var(--paper);border:1px solid var(--steel);border-radius:2px;padding:12px 13px;width:100%;min-height:44px}
.field textarea{min-height:88px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--deep)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--copper)}

/* consent: a 44px control that leaves the 16px mark exactly where it was */
.consent{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;margin:var(--s2) 0 18px}
.consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:44px;height:44px;flex-shrink:0;
  margin:-11px -14px -11px -14px;
  padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative}
.consent input[type=checkbox]::before{content:"";width:16px;height:16px;border:1px solid var(--steel);background:var(--surface);border-radius:2px}
.consent input[type=checkbox]:checked::before{background:var(--deep);border-color:var(--deep)}
.consent input[type=checkbox]:checked::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:8px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
.consent label{flex:1 1 0;min-width:0;font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
/* the error is moved inside .consent by site.js and sits above the control */
.consent [data-consent-err]{order:-1;flex-basis:100%;margin:0 0 var(--s2)}
form.card .btn-primary{width:100%;padding:15px}
.err{color:var(--copper);font-size:var(--fs-fine);font-family:var(--display);letter-spacing:var(--lsd-0);margin-top:4px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--copper)}
.field.invalid .err{display:block}
.formerr{display:none;margin:0 0 var(--s4);padding:12px 14px;border-left:3px solid var(--copper);background:var(--copper-soft);font-family:var(--display);font-size:var(--fs-sm);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--ink)}
.formerr a{color:var(--ink);font-weight:600}
form.card.failed .formerr{display:block}
.thanks{display:none;padding:var(--s4) 0}
.thanks h3{font-size:23px;margin:0 0 11px}
.thanks p{font-family:var(--prose);font-size:16.5px;line-height:1.6;color:var(--muted);margin:0}
form.card.sent .fields{display:none}
form.card.sent .thanks{display:block}
.fgroup{border-top:1px solid var(--rule);margin:var(--s6) 0 18px;padding-top:var(--s5)}
.fgroup:first-of-type{border-top:none;margin-top:0;padding-top:0}

.trust{list-style:none;padding:0;margin:var(--s6) 0 0;border-top:1px solid var(--rule)}
.trust li{padding:15px 0;border-bottom:1px solid var(--rule);display:flex;gap:var(--s4);align-items:baseline}
.trust .n{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--muted);width:var(--s6);flex-shrink:0;font-weight:600}
.trust .t{font-size:15.5px;line-height:1.5}

/* ---------- up-next band (inverted) ---------- */
.upnext{background:var(--band);border-top:none;--focus:var(--on-band)}
.upnext .wrap{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;padding-top:46px;padding-bottom:46px}
/* the one expanded moment per page: the last line before the CTA */
.upnext h3{
  font-family:var(--display);
  font-stretch:var(--wd-wide);
  font-weight:640;
  font-size:clamp(20px,2.5vw,27px);
  letter-spacing:var(--lsd-sm);
  line-height:1.25;
  margin:0;
  color:var(--on-band);
  max-width:24ch;
}
.upnext p{font-family:var(--display);font-size:var(--fs-base);margin:10px 0 0;color:var(--on-band-muted);max-width:46ch}
.upnext .btn{background:var(--copper);border-color:var(--copper);color:var(--on-copper)}
.upnext .btn:hover{background:var(--on-band);border-color:var(--on-band);color:var(--band)}

/* ---------- estimator ---------- */
.est{margin-top:34px;border:1px solid var(--rule-strong);background:var(--surface);box-shadow:var(--shadow)}
.est-h{padding:var(--s5) var(--s6);border-bottom:1px solid var(--rule);background:var(--paper)}
.est-b{display:grid;grid-template-columns:1fr 1fr;gap:0}
.est-in{padding:var(--s6) var(--s6);border-right:1px solid var(--rule)}
.est-out{padding:var(--s6) var(--s6);background:var(--deep-soft);display:flex;flex-direction:column;justify-content:center}
.est-res{font-weight:500;font-size:clamp(34px,5vw,52px);letter-spacing:var(--lsd-tight);line-height:1;color:var(--deep)}
.est-res span{font-family:var(--display);font-size:var(--fs-data);font-weight:600;letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);display:block;margin-top:9px}
.est-math{font-size:var(--fs-data);font-weight:400;line-height:1.7;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--deep-line)}
.est-note{font-family:var(--display);font-size:var(--fs-fine);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted);padding:var(--s4) var(--s6);border-top:1px solid var(--rule);background:var(--paper)}
input[type=range]{width:100%;accent-color:var(--deep);margin:4px 0}
.est-val{font-size:var(--fs-data);font-weight:600;color:var(--ink);float:right}
@media(max-width:760px){.est-b{grid-template-columns:1fr}.est-in{border-right:none;border-bottom:1px solid var(--rule)}}

/* ---------- sticky mobile cta ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);border-top:1px solid var(--rule-strong);box-shadow:var(--sticky-shadow);padding:11px var(--s4);display:none;gap:10px;align-items:center}
.sticky .sp{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);color:var(--muted);line-height:1.4;flex:1}
.sticky .sp b{display:block;font-family:var(--display);font-size:14px;color:var(--ink);font-weight:700;letter-spacing:var(--lsd-sm)}
.sticky .btn{padding:11px 18px;font-size:14px}
@media(max-width:760px){.sticky{display:flex}body{padding-bottom:70px}}

/* ---------- footer ---------- */
footer{padding:48px 0 60px;border-top:1px solid var(--rule)}
.fgrid-f{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap}
/* three columns of 11px monospace at 1.85 across 50ch was the widest,
   slowest-reading configuration available, on the block a reader is
   least motivated to decode. Archivo carries the sentence; .pn carries
   the licence number and the phone number inside it. */
.fnote{font-family:var(--display);font-size:var(--fs-data);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted);max-width:52ch}
.fnote b{color:var(--ink);font-weight:600}
.fnote a{color:var(--ink);text-decoration:none}
.flinks{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
/* 44px: the footer carries the same fourteen destinations as the drawer and
   is the only navigation left once a phone user reaches the end of a page. */
.flinks a{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);text-decoration:none;padding:10px 0;min-height:44px;display:flex;align-items:center}
.flinks a:hover{color:var(--ink)}
.placeholder{background:var(--copper-soft);border:1px dashed var(--copper);color:var(--copper);padding:1px 6px;font-weight:600}


/* ---------- test-kit capture ----------
   Two presentations of one component. On desktop a centred exit-intent modal;
   on touch an inline banner docked above the sticky CTA, never an overlay -
   see the note in site.js about intrusive interstitials. Markup is injected on
   trigger, so none of this ships in the HTML. */
/* numbered source list - the Water Report's whole credibility rests on it */
.srclist{margin:0;padding-left:1.4em;font-size:13.5px;line-height:1.65;color:var(--muted)}
.srclist li{margin:0 0 10px}

.kit{position:fixed;z-index:200}
.kit-modal{inset:0;background:color-mix(in srgb,var(--ink) 55%,transparent);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);
  animation:kitFade .18s var(--ease)}
.kit-modal .kit-panel{max-width:460px;width:100%;animation:kitRise .22s var(--ease);
  max-height:calc(100vh - 2 * var(--s5));overflow-y:auto}
.kit-bar{left:0;right:0;bottom:0;padding:0}
.kit-bar .kit-panel{max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  animation:kitUp .22s var(--ease)}
.kit-still,.kit-still *{animation:none!important}
.kit-panel{position:relative;background:var(--surface);border:1px solid var(--rule-strong);
  box-shadow:var(--shadow);padding:var(--s6) var(--s6) var(--s5)}
.kit-x{position:absolute;top:6px;right:8px;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted);padding:6px 10px;min-height:44px;min-width:44px}
.kit-x:hover{color:var(--ink)}
.kit-h{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25;
  margin:0 28px var(--s2) 0;letter-spacing:var(--lsd)}
.kit-p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 var(--s4)}
.kit-l{display:block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
select.kit-i{appearance:none;-webkit-appearance:none;background-image:none}
.kit-i{width:100%;padding:11px 12px;font-size:16px;  /* 16px: iOS zooms anything smaller */
  border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);
  border-radius:2px;margin:0 0 var(--s3)}
.kit-i:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.kit-i[aria-invalid="true"]{border-color:var(--warn,#b3261e)}
.kit-go{width:100%;margin-top:2px}
.kit-msg{font-size:13.5px;color:var(--warn,#b3261e);margin:var(--s2) 0 0}
.kit-done{font-size:14.5px;line-height:1.6;margin:0}
.kit-note{font-size:12.5px;line-height:1.5;color:var(--faint);margin:var(--s3) 0 0}
/* compact teaser - no form, routes to the assessment page */
.kit-bar .kit-panel{padding:var(--s4) var(--s5)}
.kit-barh{font-family:var(--display);font-size:15px;font-weight:700;line-height:1.3;
  margin:0 32px 4px 0;letter-spacing:var(--lsd)}
.kit-barp{font-size:13px;line-height:1.5;color:var(--muted);margin:0 32px var(--s3) 0}
.kit-bar .kit-go{width:auto;display:inline-flex;margin:0}
@keyframes kitFade{from{opacity:0}to{opacity:1}}
@keyframes kitRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kitUp{from{transform:translateY(100%)}to{transform:none}}

/* The sticky CTA bar already owns the bottom of the screen on small viewports,
   so the inline banner sits above it rather than on top of it. */
@media(max-width:760px){
  /* .kit-bar's bottom offset is set in site.js from the sticky bar's MEASURED
     height - it is 126px on a 390x844 phone, not the 72px first assumed here. */
  .kit-panel{padding:var(--s5)}
  .kit-h{font-size:17.5px}
  .kit-bar .kit-panel{padding:var(--s4) var(--s5)}
}
@media print{.sticky,header,.kit{display:none}}

/* ---------- blog ---------- */
.postlist{margin-top:var(--s8);border-top:1px solid var(--rule)}
.postcard{display:grid;grid-template-columns:170px 1fr;gap:var(--s7);padding:30px 0;border-bottom:1px solid var(--rule);align-items:start;text-decoration:none;color:var(--ink);transition:background var(--dur-fast) var(--ease)}
.postcard:hover{background:var(--sunk)}
.postcard .meta{line-height:1.8}
.postcard .meta .cat{color:var(--muted);font-weight:600;display:block}
.postcard h3{font-size:22px;margin:0;text-wrap:balance}
.postcard p{font-family:var(--display);font-size:15.5px;line-height:1.55;color:var(--muted);margin:10px 0 0;max-width:62ch}
.postcard .rt{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);margin-top:var(--s3);display:block}
@media(max-width:760px){.postcard{grid-template-columns:1fr;gap:10px;padding:var(--s6) 0}}

.article{max-width:none}
.artwrap{max-width:720px;margin:0 auto;padding:0 var(--s7)}
@media(max-width:700px){.artwrap{padding:0 var(--s5)}}
.arthead{padding:var(--s10) 0 0;border-top:none}
.artmeta{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.artmeta .cat{color:var(--muted);font-weight:600}
h1.art{font-size:clamp(32px,4.6vw,50px);line-height:1.06;margin:18px 0 0}
.artsub{font-family:var(--display);font-size:var(--fs-lede);line-height:1.5;color:var(--muted);margin:var(--s5) 0 0}
.artbody{font-family:var(--prose);font-size:18.5px;line-height:1.72;margin-top:var(--s8)}
.artbody p{margin:0 0 22px;text-wrap:pretty}
.artbody p,.artbody li{max-width:66ch}
.artbody h2{font-size:var(--fs-2xl);margin:var(--s9) 0 var(--s4)}
.artbody h3{font-size:var(--fs-lg);margin:var(--s7) 0 var(--s3)}
.artbody strong{font-weight:600;color:var(--ink)}
.artbody ul,.artbody ol{margin:0 0 22px;padding-left:22px}
.artbody li{margin:0 0 9px}
.artbody blockquote{margin:28px 0;padding:var(--s5) var(--s6);border-left:3px solid var(--copper);background:var(--copper-soft);font-size:var(--fs-prose);line-height:1.58}
.artbody blockquote p:last-child{margin:0}
/* attribution under a pulled quote - the source is part of the claim, so it is
   set apart from the quote rather than buried in the paragraph that follows */
.artbody blockquote cite{display:block;margin-top:var(--s4);font-family:var(--display);font-size:var(--fs-fine);font-style:normal;letter-spacing:var(--lsd-0);color:var(--muted);line-height:var(--lh-read)}
.artbody blockquote cite::before{content:"\2014\00a0"}
.artbody figure{margin:var(--s7) 0}
.artbody .table-scroll{margin:28px 0}
/* NO min-width override here - it neutralised .table-scroll on phones */
.artbody table{font-family:var(--display)}
.artbody th,.artbody td{font-size:var(--fs-sm);padding:12px var(--s4)}
.artbody td{font-variant-numeric:tabular-nums}
.artbody hr{border:none;border-top:1px solid var(--rule);margin:var(--s8) 0}

.tldr{border:1px solid var(--rule-strong);background:var(--surface);box-shadow:var(--lift);padding:var(--s6) var(--s6);margin:34px 0 0}

.tldr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.tldr li{font-family:var(--display);font-size:15.5px;line-height:1.5;padding-left:var(--s5);position:relative}
.tldr li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:1.5px;background:var(--rule-strong)}
.tldr strong{font-weight:600}

.keyfact{border-left:3px solid var(--deep);background:var(--deep-soft);padding:22px var(--s6);margin:30px 0}
.keyfact .n{font-weight:500;font-size:clamp(28px,4vw,40px);letter-spacing:var(--lsd-tight);line-height:1;color:var(--deep)}
.keyfact .t{font-family:var(--display);font-size:15px;line-height:1.5;margin-top:10px}
.keyfact .s{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);color:var(--muted);margin-top:10px;line-height:var(--lh-read)}

.sources{margin-top:46px;padding-top:var(--s6);border-top:1px solid var(--rule)}
.sources ol{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);line-height:var(--lh-read);color:var(--muted);padding-left:var(--s5);margin:0}
.sources li{margin-bottom:9px}
.sources a{color:var(--deep)}

.artcta{border:1px solid var(--rule-strong);background:var(--surface);box-shadow:var(--shadow);padding:28px;margin:46px 0 0}
.artcta h3{font-size:var(--fs-lg);margin:0}
.artcta p{font-family:var(--display);font-size:var(--fs-base);line-height:1.55;color:var(--muted);margin:10px 0 18px}
.related{margin-top:46px;padding-top:var(--s6);border-top:1px solid var(--rule)}
.related.flush{margin-top:22px;border-top:none;padding-top:0}

.related a{display:block;padding:13px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--fs-base);letter-spacing:var(--lsd-sm);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.related a:hover{background:var(--sunk);color:var(--deep)}
.related a span{display:block;font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);text-transform:none;color:var(--muted);font-weight:400;margin-top:4px}

/* ---------- grouped navigation ----------
   Nine top-level items; two-level groups open on hover and on focus above the
   drawer breakpoint, and behave as accordions inside the mobile drawer.
   No uppercase, no positive tracking - the two absolute type rules. */
.nav .grp{position:relative;display:flex;align-items:center}
.nav .grpb{text-decoration:none;
  font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--muted);
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;letter-spacing:var(--lsd-sm);
  transition:color var(--dur-fast) var(--ease)}
.nav .grpb:hover,.nav .grp.open>.grpb{color:var(--ink)}
.nav .grp.within>.grpb{color:var(--ink);font-weight:600}
.nav .chev{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--dur-fast) var(--ease)}
.nav .grp.open>.grpb .chev{transform:rotate(225deg) translate(-2px,-2px)}
.nav .subnav{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:226px;
  background:var(--surface);border:1px solid var(--rule-strong);
  box-shadow:var(--shadow);padding:6px 0;z-index:70;display:flex;flex-direction:column}
.nav .subnav[hidden]{display:none}
.nav .subnav a{
  padding:9px 18px;font-size:13.5px;color:var(--muted);white-space:nowrap;
  border-bottom:0;min-height:0;display:block}
.nav .subnav a:hover{color:var(--ink);background:var(--paper)}
.nav .subnav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* the group sits under the bar, so give the pointer somewhere to travel */
.nav .grp::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}

/* ---------- Service Areas mega-menu ----------
   A flat 22-item dropdown would be a scrolling column; three labelled columns make
   the structure readable at a glance - who bills you, where you live, what kind of
   property. Width is clamped to the viewport because a 3-column panel centred under
   a group near the edge of the bar would otherwise push the page sideways. */
.nav .subnav.mega{
  flex-direction:row;align-items:flex-start;gap:0;padding:14px 4px;
  width:max-content;max-width:min(720px,calc(100vw - 32px))}
.nav .subnav.mega .megacol{
  display:flex;flex-direction:column;min-width:168px;padding:0 14px}
.nav .subnav.mega .megacol + .megacol{border-left:1px solid var(--rule)}
.nav .subnav.mega .megah{
  font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:2px 4px 8px;white-space:nowrap}
.nav .subnav.mega a{padding:7px 4px}

@media(max-width:1179.98px){
  /* inside the drawer the dropdown becomes a plain accordion section */
  .nav .grp{display:block;border-bottom:1px solid var(--rule)}
  .nav .grpb{width:100%;justify-content:space-between;padding:13px var(--s7);
    min-height:44px;font-size:15px}
  .nav .subnav{position:static;transform:none;min-width:0;border:0;box-shadow:none;
    padding:0 0 var(--s2);background:var(--paper)}
  .nav .subnav a{padding:11px var(--s7) 11px calc(var(--s7) + 16px);min-height:44px;
    display:flex;align-items:center;font-size:14.5px}
  .nav .grp::after{content:none}
  /* mega columns stack in the drawer; the headings stay as section labels */
  .nav .subnav.mega{flex-direction:column;width:auto;max-width:none;padding:0 0 var(--s2)}
  .nav .subnav.mega .megacol{min-width:0;padding:0}
  .nav .subnav.mega .megacol + .megacol{border-left:0;border-top:1px solid var(--rule)}
  .nav .subnav.mega .megah{padding:12px var(--s7) 4px;font-size:10px}
  .nav .subnav.mega a{padding:11px var(--s7) 11px calc(var(--s7) + 16px)}
}

/* The reading column stays 1160px; the header bar does not have to. The top-level
   items plus the mark plus the call-to-action need more room than body copy does.
   Six items since the Phase 2 restructure, down from nine. */
header .wrap{max-width:1400px}
.nav{gap:14px}
@media(min-width:1401px){ .nav{gap:20px} }

/* ---------- surfaced FAQ ----------
   Every question a page declares in its FAQPage schema is now also rendered here.
   Google requires the declared content to be visible to a reader; these two must
   not drift apart. .faqlist is the marketing-page treatment, .artfaq the in-article one. */
.faqlist{border-top:1px solid var(--rule);max-width:78ch}
.faqlist details{border-bottom:1px solid var(--rule)}
.artfaq{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--rule-strong);max-width:66ch}
.artfaq h2.h{font-size:15px;font-weight:700;font-stretch:88%;letter-spacing:var(--lsd-sm);
  color:var(--ink);margin:0 0 var(--s3)}
.artfaq details{border-bottom:1px solid var(--rule)}
.artfaq details:last-child{border-bottom:none}


/* ==========================================================================
   ARTICLE STYLES - extracted from the per-post <style> block, 2026-09-27.
   This identical ~10.8KB block was duplicated in all 12 blog posts. Ten new
   posts written from a shared shell had no <style> block at all, so they lost
   .msr, .crumbs, .claimbox, .stepgrid and - visibly - the rule that stops
   <header class="arthead"> inheriting the sticky site bar, which pinned a
   757px header over the article.
   Appended at the END of site.css so the cascade position matches where the
   page block used to sit (after the stylesheet link), preserving every
   override it was making.
   ========================================================================== */
/* ======================================================================
   WATER NOTES - editorial sheet. PAGE-SPECIFIC OVERRIDES ONLY.
   Every color is a token from assets/site.ebcbd520a0.css, so all three theme
   states are inherited; nothing is defined only inside a media block.
   Three voices - Archivo states - IBM Plex Mono measures - Serif concedes.
   Copper is threshold / limit / refusal ink only. Never decoration.
   ====================================================================== */

/* .arthead is a <header> now; it must not inherit the sticky site bar */
header.arthead{position:static;top:auto;z-index:auto;background:none;backdrop-filter:none;border-bottom:none}
@media print{header.arthead{display:block}}

/* ---------- breadcrumb - the BreadcrumbList already asserts this trail ---------- */
.crumbs{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--lsd-sm);color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 24px}
.crumbs a{color:var(--muted);text-decoration:none;padding:3px 0;position:relative}
/* 22.5px of line box was the whole tap target. The overlay lifts it to
   44px without moving the crumb row or the headline under it. */
.crumbs a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;color:var(--muted)}

/* ---------- three voices, inline in running prose ---------- */
/* MEASURED - anything the company or the utility put a number on */
.msr{font-family:var(--mono);font-size:.87em;font-weight:600;font-style:normal;letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--ink)}
/* PART NUMBER - the not-locked-in argument, in filled ink rather than chrome */
.pnin{font-family:var(--mono);font-size:.85em;font-weight:600;font-style:normal;letter-spacing:var(--lsd-0);color:var(--ink)}
/* LIMIT - copper, rationed to thresholds, caps and documented cost */
.lim{font-family:var(--mono);font-size:.87em;font-weight:600;font-style:normal;letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--copper)}
/* CONCEDED - true serif italic; weight inherits so existing emphasis survives */
.concede{font-family:var(--prose);font-style:italic;font-weight:inherit;color:var(--deep)}
/* .artbody strong is (0,1,1) and would otherwise repaint every voice as --ink */
.artbody .lim,.artbody td .lim{color:var(--copper)}
.artbody .msr,.artbody .pnin{color:var(--ink)}
.artbody .concede{color:var(--deep)}

/* ---------- article body ---------- */
.artbody h2{scroll-margin-top:88px}
/* drafting tick above each subheading - ornament, never a generated index */
.artbody h3{position:relative;padding-top:20px}
.artbody h3::before{content:"";position:absolute;top:0;left:0;width:42px;height:7px;
  background:linear-gradient(var(--rule-strong),var(--rule-strong)) left center/42px 1px no-repeat,
             linear-gradient(var(--steel),var(--steel)) left center/1px 7px no-repeat}

/* bullets: drafting dash in steel - copper is not a bullet */
.artbody ul{list-style:none;padding-left:0}
.artbody ul li{padding-left:24px;position:relative}
.artbody ul:not(.claims) li::before{content:"";position:absolute;left:0;top:.74em;width:12px;height:1.5px;background:var(--rule-strong)}

/* a concession set as a concession: serif italic, deep rule, no copper */
.artbody blockquote{border-left:3px solid var(--deep);background:var(--deep-soft);font-style:italic}
.artbody blockquote strong,.artbody blockquote em{font-style:italic}

/* ---------- numbered steps: mono tabular counters ---------- */
.stepgrid{list-style:none;padding:0;margin:30px 0 26px;border:1px solid var(--rule);border-bottom:none;
  background:var(--surface);box-shadow:var(--lift);display:grid;grid-template-columns:repeat(2,1fr);counter-reset:sg}
.stepgrid.one{grid-template-columns:1fr}
.stepgrid li{counter-increment:sg;margin:0;max-width:none;padding:17px 22px 19px;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:15.5px;line-height:1.55;color:var(--ink)}
.stepgrid li:nth-child(odd){border-right:1px solid var(--rule)}
.stepgrid.one li:nth-child(odd){border-right:none}
.stepgrid li::before{content:counter(sg,decimal-leading-zero);display:block;font-family:var(--mono);
  font-size:var(--fs-label);font-weight:500;letter-spacing:var(--lsd-sm);color:var(--muted);
  font-variant-numeric:tabular-nums;margin-bottom:9px}
.stepgrid li strong{font-weight:600;color:var(--ink)}
.stepgrid a{color:var(--deep)}
@media(max-width:620px){.stepgrid{grid-template-columns:1fr}.stepgrid li:nth-child(odd){border-right:none}}

/* ---------- the claim register, finally in the blog ---------- */
.artbody .claimbox{margin:30px 0}
.artbody .claimbox h3{margin:0;padding-top:0;font-size:var(--fs-md)}
.artbody .claimbox h3::before{content:none}
.artbody .claimbox h3:not(:first-child){margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
.artbody ul.claims{list-style:none;padding:0;margin:14px 0 0}
.artbody ul.claims li{max-width:66ch}
.artbody .claimbox>ul.claims:first-child{margin-top:0}
.cy,.cn{font-family:var(--display)}

/* ---------- tables: a real scroll affordance, themed, nothing hidden ---------- */
.artbody .table-scroll{position:relative;background-color:var(--surface);
  background-image:linear-gradient(to right,var(--surface),transparent),
                   linear-gradient(to left,var(--surface),transparent),
                   linear-gradient(to right,var(--rule-strong),transparent),
                   linear-gradient(to left,var(--rule-strong),transparent);
  background-position:left center,right center,left center,right center;
  background-size:30px 100%,30px 100%,13px 100%,13px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
.artbody .table-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.artbody th{font-family:var(--display)}
.artbody td .msr,.artbody td .lim{font-size:.95em}

/* tables that carry a note are figures */
.artbody figure.figure{margin:28px 0;background:var(--surface)}
.artbody figure.figure .table-scroll{margin:0;border:none;box-shadow:none;background-color:transparent}
.artbody figure.figure figcaption{font-family:var(--display);font-size:var(--fs-fine);letter-spacing:var(--lsd-0);
  text-transform:none;line-height:1.62;color:var(--muted);margin:0}

/* ---------- keyfact: rebuilt on the .tldr construction - number, claim, source ---------- */
.keyfact{border:1px solid var(--rule-strong);background:var(--surface);box-shadow:var(--lift);
  padding:var(--s6);margin:32px 0}
.keyfact .n{font-family:var(--mono);font-weight:500;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.025em;
  line-height:1.02;color:var(--deep);font-variant-numeric:tabular-nums;max-width:none}
/* an .n that is a claim rather than a measurement states, so it is set in Archivo */
.keyfact--claim .n{font-family:var(--display);font-stretch:87%;font-weight:800;
  font-size:clamp(23px,2.9vw,33px);letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
.keyfact .t{font-family:var(--display);font-size:15.5px;line-height:1.5;margin-top:14px;max-width:62ch;color:var(--ink)}
.keyfact .t strong{font-weight:600}
.keyfact .s{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--lsd-sm);
  text-transform:none;color:var(--muted);margin-top:16px;padding-top:13px;border-top:1px solid var(--rule);line-height:1.6}

/* ---------- sources: the literal proof that every claim links to its source ---------- */
.sources{margin-top:52px;padding:var(--s6) var(--s6) 22px;border:1px solid var(--rule-strong);
  background:var(--surface);box-shadow:var(--lift)}
.sources h2.h,.sources .h{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--lsd-sm);color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:var(--s3);line-height:1.4}
.sources .h::after{content:"";flex:1;height:7px;
  background:linear-gradient(var(--rule),var(--rule)) left center/100% 1px no-repeat,
             linear-gradient(var(--steel),var(--steel)) right center/1px 7px no-repeat}
.sources ol{font-family:var(--display);font-size:var(--fs-data);line-height:1.68;color:var(--ink);
  padding:0;margin:0;list-style:none;counter-reset:src}
.sources li{counter-increment:src;margin:0 0 15px;padding-left:36px;position:relative;max-width:80ch}
.sources li:last-child{margin-bottom:0}
.sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:3px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--lsd-sm);color:var(--muted);
  font-variant-numeric:tabular-nums}
.sources a{color:var(--deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sources a:hover{color:var(--ink);text-decoration-thickness:2px}
.sources em{font-family:var(--prose);font-style:italic}

/* ---------- related: an article and a priced product are not the same kind of thing ---------- */
.related h2.h,.related .h{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--lsd-sm);color:var(--muted);margin:0 0 var(--s4);line-height:1.4}
.rgroup+.rgroup{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-strong)}
.related a[data-kind="product"]{font-family:var(--display);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--lsd-0)}
.related a[data-kind="product"] span{letter-spacing:var(--lsd-sm)}

/* ---------- blog index ---------- */
.postcard{display:grid;grid-template-columns:170px 1fr;gap:var(--s7);padding:30px 0;
  border-bottom:1px solid var(--rule);align-items:start;color:var(--ink);
  transition:background var(--dur-fast) var(--ease)}
.postcard:has(a:hover){background:var(--sunk)}
.postcard h3{margin:0}
.postcard h3 a{color:inherit;text-decoration:none}
.postcard h3 a:hover{color:var(--deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.postcard[hidden]{display:none}
@media(max-width:760px){.postcard{grid-template-columns:1fr;gap:10px;padding:var(--s6) 0}}

/* category index - built from the category strings already printed on this page */
.catbar{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:22px}
.catbar button{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--lsd-sm);color:var(--muted);background:var(--surface);border:1px solid var(--steel);
  padding:8px 12px;border-radius:2px;cursor:pointer;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.catbar button:hover{color:var(--ink);border-color:var(--ink)}
.catbar button[aria-pressed="true"]{background:var(--band);border-color:var(--band);color:var(--on-band)}

@media(prefers-reduced-motion:reduce){
  .postcard,.catbar button,.related a{transition:none}
}


/* ==========================================================================
   RESPONSIVE TABLES - no horizontal scrolling on a phone.
   Every table carried min-width:580px inside an overflow-x:auto wrapper, so on
   a 375px screen all 36 of them scrolled sideways with the first column cut
   off. Below 760px each <tr> becomes a card instead: the first cell is the
   card's title and every other cell shows its column name (injected as
   data-label by label_table_cells() in build.py) beside its value.
   ========================================================================== */
@media(max-width:760px){
  .table-scroll{overflow-x:visible;border:none;box-shadow:none;background:none}
  .artbody .table-scroll{background-image:none}
  /* !important is deliberate and load-bearing. Twelve pages set their own table
     widths in a page <style> block that loads AFTER this file, and some use a
     higher-specificity selector (.table-scroll.wide table.compare{min-width:940px}).
     Without this the width survives, and because the rule above drops the
     wrapper's overflow containment the table then overflows the PAGE rather than
     scrolling inside its box - worse than what it replaced. */
  .table-scroll table,.table-scroll.wide table,.table-scroll table.compare,
  .table-scroll.wide table.compare{min-width:0 !important;width:100%;display:block}
  /* Hide the header row outright. Clipping it is not enough: its <tr> keeps
     laying out as a table-row at its natural nowrap width and pushes the
     wrapper's scrollWidth past the viewport. The column names are not lost -
     they are re-emitted per cell as data-label, which is exposed to assistive
     technology as generated content. */
  .table-scroll thead{display:none}
  .table-scroll tbody{display:block}

  .table-scroll tbody tr{display:block;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift);margin-bottom:var(--s5);padding:2px var(--s5) 6px}
  .table-scroll tbody tr:last-child{margin-bottom:0}
  .table-scroll tbody tr:hover{background:var(--surface)}

  /* Grid, not flex. A flex item will not shrink below its content's min-content
     width, so a cell holding a nowrap part number pushed the row past the
     viewport. minmax(0,...) on both grid tracks lets either side shrink and wrap. */
  .table-scroll tbody td{display:block;padding:10px 0;border-bottom:1px solid var(--rule);
    font-size:var(--fs-sm);text-align:left;min-width:0;overflow-wrap:anywhere}
  .table-scroll tbody tr td:last-child{border-bottom:none}

  .table-scroll tbody td[data-label]{display:grid;
    grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:var(--s5);align-items:baseline}
  .table-scroll tbody td[data-label]::before{content:attr(data-label);min-width:0;
    font-family:var(--display);font-size:var(--fs-fine);font-weight:600;letter-spacing:var(--lsd-0);
    color:var(--muted);line-height:var(--lh-read);overflow-wrap:anywhere}
  .table-scroll tbody td[data-label]>*{text-align:right}

  /* first cell is the card's title, not a label/value pair */
  .table-scroll tbody td:first-child{display:block;padding:12px 0 10px;font-size:16px;font-weight:600}
  .table-scroll tbody td:first-child::before{content:none}
  .table-scroll tbody td:first-child>*{text-align:left}
  .table-scroll tbody td:first-child .fine{display:block;margin-top:3px;font-weight:400}

  /* cells that span columns carry no label and get the full width */
  .table-scroll tbody td[colspan]{display:block}
  .table-scroll tbody td[colspan]::before{content:none}
  .table-scroll tbody td[colspan]>*{text-align:left}

  .table-scroll tbody td.money{text-align:right;white-space:normal}
}


/* ==========================================================================
   HARDNESS INSTRUMENT ON A PHONE.
   The SVG is 900px wide with 11px type inside a fixed viewBox. Scaling it to a
   375px screen would render that type at ~4px, so it was left to scroll - and
   because .instr is the scroll container, scrolling the chart dragged the
   title, the source line and the utility note off the left edge too.
   Below 760px the SVG is swapped for this block, which places every mark as a
   PERCENTAGE OF THE SAME 0-25 gpg AXIS. That keeps the axis linear by
   construction - the property a previous fix had to restore to the SVG after it
   was found drawn non-linearly in the company's favour.
   ========================================================================== */
.instr-m{display:none}
@media(max-width:760px){
  /* Only swap where a replacement actually exists. Hiding .instr > svg
     unconditionally blanked the instrument on five other pages that have an
     .instr but no mobile block yet. */
  .instr:has(.instr-m){overflow-x:visible;padding:24px 18px var(--s5)}
  .instr:has(.instr-m) > svg{display:none}
  .instr .instr-m{display:block;margin-top:var(--s5)}

  /* Pages with no mobile block keep their original contained scroll. Setting
     overflow-x:visible here without also making the SVG fit pushed slim-800
     382px and performance-75 254px past the viewport - the diagram escaped its
     box and broke the page instead of scrolling inside it. Four of these five
     diagrams have a 300-unit viewBox and fit a phone unscrolled anyway; the two
     wide ones scroll within their own box, as they did before. */
  /* 28px of side padding was squeezing a 280px diagram inside a 319px box and
     producing a 17px scroll on four pages whose artwork otherwise fits. */
  .instr:not(:has(.instr-m)){overflow-x:auto;padding:24px 14px var(--s5)}
  .instr:not(:has(.instr-m)) > svg{max-width:100%;height:auto}

  .im-row{margin-bottom:22px}
  .im-lab{font-family:var(--display);font-size:var(--fs-fine);font-weight:600;
    letter-spacing:var(--lsd-0);color:var(--ink);margin-bottom:7px}
  .im-track{position:relative;height:26px;background:var(--deep-soft);border-radius:1px}
  .im-fill{position:absolute;top:0;bottom:0;border-radius:1px}
  .im-bham{background:var(--deep)}
  .im-cmp{background:var(--copper)}
  .im-ends{position:relative;height:17px;margin-top:3px}
  .im-ends span{position:absolute;transform:translateX(-50%);font-family:var(--mono);
    font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .im-ends span:first-child{transform:translateX(0)}
  .im-note{font-family:var(--display);font-size:var(--fs-fine);color:var(--muted);
    line-height:var(--lh-read);margin:5px 0 0}

  .im-axis{position:relative;height:16px;margin-top:2px;border-top:1px solid var(--rule-strong)}
  .im-axis span{position:absolute;top:3px;transform:translateX(-50%);font-family:var(--mono);
    font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .im-axis span:first-child{transform:translateX(0)}
  .im-axis span:last-child{transform:translateX(-100%)}

  .im-bands{display:flex;height:7px;margin-top:9px;gap:1px}
  .im-bands span{background:var(--deep-soft)}
  .im-bands span:last-child{background:var(--rule-strong)}
  .im-bandlabs{display:flex;gap:1px;margin-top:5px}
  /* no anywhere-breaking: a 44px band was splitting "Moderate" into "Modera/te" */
  .im-bandlabs span{font-family:var(--display);font-size:10px;letter-spacing:var(--lsd-0);
    color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============================================================
   CENTRALIZED FROM PAGE-LEVEL <style> BLOCKS - 2026-10-01
   Only rules that were byte-identical on 2+ pages were moved. 56 selectors are
   defined DIFFERENTLY per page (.badge, .ladder, .rung-l among them) and stay
   local, because merging them would silently restyle one page to match another.
   .callout and .fine also stayed local: site.css already defines them with a
   different body, and the page-level block is deliberately overriding it.
   ============================================================ */
@media(max-width:899px){
  .jstep{grid-template-columns:34px1fr}
}
@media(max-width:600px){
  .jstep{grid-template-columns:28px1fr}
  .jn{font-size:var(--fs-sm)}
}
@media(max-width:940px){
  .fgrid form.card{order:-1}
}
.ja{font-family:var(--display);font-size:15.5px;line-height:1.56;color:var(--muted);margin:10px00;max-width:64ch}
.ja strong{font-weight:600;color:var(--ink)}
.rung.feat .badge{color:var(--ink)}
.rung.feat .badge::before{background:var(--deep)}
.compare th.feat,.compare td.feat{background:var(--deep-soft)}
.compare .cname{font-family:var(--display);font-stretch:var(--wd-sub);font-weight:660;font-size:var(--fs-md);letter-spacing:var(--lsd-sm);line-height:var(--lh-title);display:block;margin-bottom:10px}
.badge-t{font-family:var(--display);font-stretch:var(--wd-note);font-weight:600;font-size:var(--fs-data);line-height:1;letter-spacing:var(--lsd-0);color:var(--ink)}
.badge-q{font-family:var(--display);font-size:var(--fs-label);line-height:1;letter-spacing:var(--lsd-0);color:var(--muted)}
.claimbox .cy:last-child,.claimbox .cn:last-child{margin-bottom:0}
.inputs{display:block;columns:2;column-gap:var(--s9);margin-top:var(--s5)}
.inputs li{break-inside:avoid;margin-bottom:10px}
.twoup{display:grid;grid-template-columns:1fr1fr;gap:var(--s9);margin-top:var(--s6)}
.twoup .prose{max-width:none}
.meas{font-family:var(--mono);font-weight:500;font-size:.92em;letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--ink)}
.badge--on{color:var(--deep);background:var(--deep-soft);border-color:var(--deep-line)}
.mcell{padding:var(--s6)}
.mcell:first-child{border-right:1pxsolidvar(--rule)}
.mcell .q{font-family:var(--display);font-stretch:var(--wd-sub);font-weight:660;font-size:var(--fs-h3);letter-spacing:var(--lsd);line-height:var(--lh-title);margin:10px00}
.mcell p{font-family:var(--display);font-size:15.5px;line-height:1.56;color:var(--muted);margin:12px00}
.mcell p strong{font-weight:600;color:var(--ink)}
.maxis{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.mfoot p strong{font-weight:600}
.rung-l .btn{margin-top:var(--s4)}
.rung-here{font-family:var(--display);font-size:var(--fs-data);font-weight:600;letter-spacing:var(--lsd-0);color:var(--deep);margin-top:var(--s4)}
.rung-pos{font-family:var(--display);font-size:var(--fs-base);line-height:1.56;color:var(--ink);font-weight:600;margin:0}
.rung-for{font-family:var(--display);font-size:15.5px;line-height:1.56;color:var(--muted);margin:10px00}
.alt{margin-top:var(--s6);border:1pxsolidvar(--rule);border-left:3pxsolidvar(--steel);background:var(--surface);box-shadow:var(--lift);padding:var(--s6)}
.alt .ah{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3)}
.alt h3{font-family:var(--display);font-stretch:var(--wd-sub);font-weight:660;font-size:var(--fs-h3);letter-spacing:var(--lsd);line-height:var(--lh-title);margin:0}
.alt .apr{font-family:var(--mono);font-weight:500;font-size:var(--fs-lg);letter-spacing:var(--lsd);font-variant-numeric:tabular-nums;color:var(--ink)}
.alt p{font-family:var(--display);font-size:15.5px;line-height:1.56;color:var(--muted);margin:13px00;max-width:70ch}
.alt p strong{font-weight:600;color:var(--ink)}
.legal{max-width:72ch}
.legal h2.sec{max-width:30ch;margin-top:var(--s7)}
.legal h3{font-weight:700;font-size:18px;font-stretch:92%;letter-spacing:var(--lsd-sm);margin:var(--s5)0var(--s2)}
.legal p,.legal li{font-family:var(--prose);font-size:17px;line-height:1.68;color:var(--ink)}
.legal p{margin:00var(--s3);max-width:68ch}
.legal ul{margin:00var(--s4);padding-left:1.15em;max-width:68ch}
.legal li{margin:00var(--s2)}
.legal .stamp{font-family:var(--mono);font-size:12.5px;color:var(--muted);border-top:1pxsolidvar(--rule);padding-top:var(--s3);margin-top:var(--s2)}
.legal .callout{border-left:2pxsolidvar(--copper);padding:var(--s3)0var(--s3)var(--s4);margin:var(--s4)0;background:none}
.legal .callout p:last-child{margin:0}
.legal a{color:var(--deep);text-underline-offset:3px}
.lp-head{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1pxsolidvar(--rule)}
.lp-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:60px}
.lp-brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink)}
.lp-brand b{font-family:var(--display);font-weight:700;letter-spacing:var(--lsd-sm);font-size:16px}
.lp-act{display:flex;align-items:center;gap:var(--s4)}
.lp-hero{padding:var(--s9)0var(--s7)}
.lp-hero h1 em{font-family:var(--prose);font-style:italic;color:var(--deep);font-weight:400}
.lp-sub strong{color:var(--ink);font-weight:600}
.lp-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)}
.lp-trust span{font-family:var(--display);font-size:var(--fs-fine);font-weight:600;letter-spacing:var(--lsd-0);color:var(--deep);background:var(--deep-soft);padding:6px11px;border-radius:2px}
.lp-cta{display:flex;gap:var(--s4);margin-top:var(--s7);flex-wrap:wrap}
.lp-cta .btn{font-size:16px;padding:15px26px}
.lp-sec{padding:var(--s8)0;border-top:1pxsolidvar(--rule)}
.lp-sec h2{font-size:clamp(23px,3.4vw,31px);line-height:1.14;letter-spacing:-0.014em;margin:00var(--s5)}
.lp-steps{counter-reset:lps;display:grid;gap:var(--s5);margin-top:var(--s6)}
.lp-step{counter-increment:lps;position:relative;padding-left:52px}
.lp-step::before{content:counter(lps,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:var(--display);font-size:20px;font-weight:800;color:var(--deep);font-variant-numeric:tabular-nums}
.lp-step h3{font-family:var(--display);font-size:var(--fs-base);font-weight:700;letter-spacing:var(--lsd-sm);margin:005px}
.lp-step p{font-family:var(--display);font-size:var(--fs-sm);line-height:1.55;color:var(--muted);margin:0}
.lp-form-wrap{border:1pxsolidvar(--rule-strong);background:var(--surface);box-shadow:var(--lift);padding:var(--s7)var(--s6);margin-top:var(--s6)}
.lp-form-wrap h2{margin-top:0}
.lp-foot{padding:var(--s7)0var(--s8);border-top:1pxsolidvar(--rule);font-family:var(--display);font-size:var(--fs-fine);color:var(--muted);line-height:var(--lh-read)}
.lp-more{display:flex;flex-wrap:wrap;gap:0var(--s5);margin-top:var(--s4)}
.lp-more a{font-family:var(--display);font-size:var(--fs-fine);font-weight:600;color:var(--deep);text-decoration:underline;text-underline-offset:3px}
.lp-head .tel{display:inline-flex}
.lp-sticky{gap:10px}
.lp-sticky .lp-call{flex:0033%;padding:14px0;text-align:center;justify-content:center}
.lp-sticky .lp-go{flex:11auto;padding:14px10px;text-align:center;justify-content:center;white-space:nowrap}
svg.train .vessel.cond{stroke-dasharray:54}
svg.train .media.cond{opacity:.45}
.legend{list-style:none;margin:var(--s5)00;padding:var(--s5)00;border-top:1pxsolidvar(--rule);display:flex;flex-direction:column;gap:14px}
.legend li{display:grid;grid-template-columns:26px1fr;gap:var(--s3);align-items:start}
.legend .n{font-family:var(--mono);font-weight:500;font-size:var(--fs-data);letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--muted);padding-top:1px}
.legend b{display:block;font-weight:600;font-size:15px;letter-spacing:var(--lsd-sm);line-height:1.4}
.legend p{font-family:var(--display);font-size:var(--fs-fine);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted);margin:4px00}
.axis2{display:grid;grid-template-columns:1fr1fr;gap:0;margin-top:var(--s7);border:1pxsolidvar(--rule);background:var(--surface);box-shadow:var(--lift)}
.ax{padding:var(--s6)}
.ax:first-child{border-right:1pxsolidvar(--rule)}
.ax.here{box-shadow:inset3px00var(--deep)}
.axn{font-family:var(--mono);font-weight:500;font-size:var(--fs-data);letter-spacing:var(--lsd-0);font-variant-numeric:tabular-nums;color:var(--muted)}
.ax h3.sub-h{margin:var(--s2)00;font-size:var(--fs-lg)}
.axq{font-family:var(--prose);font-style:italic;font-weight:400;font-size:var(--fs-md);line-height:1.5;color:var(--deep);margin:10px00}
.axa{font-family:var(--display);font-size:var(--fs-sm);line-height:1.55;color:var(--muted);margin:var(--s5)00;max-width:44ch}
.axa strong{font-weight:600;color:var(--ink)}
.axcta{margin-top:var(--s5)}
.sz{padding:var(--s5)var(--s4)var(--s5)0;border-right:1pxsolidvar(--rule)}
.sz:last-child{border-right:none;padding-right:0}
.sz:not(:first-child){padding-left:var(--s4)}
.szn{display:block;font-family:var(--display);font-size:var(--fs-fine);line-height:var(--lh-read);letter-spacing:var(--lsd-0);color:var(--muted);margin-top:6px}
.setby{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);color:var(--muted)}
.gated{font-family:var(--display);font-size:var(--fs-data);letter-spacing:var(--lsd-0);color:var(--copper);font-weight:600}
.bname{display:inline-block;margin-top:var(--s5);padding:9pxvar(--s4);border:1pxsolidvar(--rule-strong);background:var(--paper);font-family:var(--mono);font-weight:500;font-size:var(--fs-data);letter-spacing:var(--lsd-0);color:var(--ink)}
.rname{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.badge--alt{border-color:var(--deep-line);background:var(--deep-soft);color:var(--deep)}
strong.msr{font-weight:600}
@media(max-width:560px){
  .sticky{flex-wrap:wrap}
  .sticky .sp{flex:00100%}
  .sticky .btn{flex:110;min-height:44px}
  body{padding-bottom:118px}
  .lp-head .tel{display:none}
}
@media(max-width:420px){
  .compare td{grid-template-columns:1fr;gap:2px}
}
@media(max-width:700px){
  .table-scroll.records table{min-width:0}
  .table-scroll.records thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .table-scroll.records tr{display:block;border-bottom:1pxsolidvar(--rule)}
  .table-scroll.records tbody tr:last-child{border-bottom:none}
  .table-scroll.records td{display:block;border-bottom:none;padding:3pxvar(--s5)}
  .table-scroll.records td.part{padding-top:15px;color:var(--ink);font-size:var(--fs-pn);letter-spacing:var(--lsd-sm)}
  .table-scroll.records td:last-child{padding-bottom:16px}
  .inputs{columns:1}
  .sizes{grid-template-columns:1fr1fr}
  .sz{border-bottom:1pxsolidvar(--rule);padding-right:var(--s4)}
  .sz:nth-child(2n){border-right:none}
  .sz:nth-child(n+3){border-bottom:none}
}
@media(max-width:840px){
  .rung{grid-template-columns:1fr}
  .rung-l{border-right:none;border-bottom:1pxsolidvar(--rule);padding:22pxvar(--s5)}
  .rung-r{padding:22pxvar(--s5)}
}
@media(max-width:860px){
  .twoup{grid-template-columns:1fr;gap:var(--s6)}
  .axis2{grid-template-columns:1fr}
  .ax:first-child{border-right:none;border-bottom:1pxsolidvar(--rule)}
}
@media(max-width:760px){
  .mcell:first-child{border-right:none;border-bottom:1pxsolidvar(--rule)}
  .lp-hero{padding:var(--s7)0var(--s6)}
  .lp-form-wrap{padding:var(--s6)var(--s5)}
  .lp-cta .btn{width:100%;text-align:center}
}