/* --------------------------------------------------------------------------
   0. FONTS — self-hosted woff2. No external requests, no third-party calls.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Saira Condensed";
  src: url("../fonts/saira-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../fonts/saira-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../fonts/saira-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ==========================================================================
   PACER PUMPS — site.css
   Design system derived from the Pacer logo: the capsule (stadium) silhouette
   and its hard offset shadow. Typography is condensed-industrial + technical.
   No frameworks. No preprocessors. Plain CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — red sampled directly from the supplied logo artwork */
  /* The logo red, and since Sept 2026 the ONLY red (client edit: "change all
     reds to #E03C3E"). It sits between 3.5:1 and 4.4:1 on every ground this
     site uses, white text on it included, so it clears AA only as LARGE text
     (24px+, or 18.66px+ at weight 700). Rules, borders, fills, icons and
     display headings: fine. Small text: never. Use --ink / --white and let
     red carry the accent as a rule, underline or dot. Buttons with red fills
     run their labels at 1.2rem/700 for exactly this reason. */
  --red:        #E03C3E;

  /* Neutrals — cool "galvanized" greys, not warm cream */
  --ink:        #0E1013;
  --graphite:   #191C20;
  --graphite-2: #23272C;
  --steel:      #5C646E;
  --steel-lt:   #8A929C;
  --paper:      #ECEEF1;
  --paper-2:    #F6F7F9;
  --white:      #FFFFFF;

  --line:       rgba(14, 16, 19, .14);
  --line-strong:rgba(14, 16, 19, .28);
  --line-dark:  rgba(255, 255, 255, .16);

  /* Type */
  --display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Was IBM Plex Mono. The client did not want a monospace face, so this
     now resolves to the body stack. Kept as its own token because it still
     marks a distinct role — eyebrows, counts, labels and SKUs — which is
     worth being able to restyle in one place. */
  --mono:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --step--1: clamp(.85rem, .82rem + .12vw, .92rem);
  --step-0:  clamp(1.08rem, 1.04rem + .18vw, 1.16rem);
  --step-1:  clamp(1.26rem, 1.17rem + .4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.32rem + .85vw, 2.05rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.3vw, 4.6rem);
  --step-5:  clamp(3.1rem, 2rem + 5.2vw, 6.4rem);

  /* Space */
  --gap:      clamp(1rem, .8rem + .8vw, 1.6rem);
  --pad-sec:  clamp(3.4rem, 2.4rem + 4vw, 6.5rem);
  --wrap:     1240px;
  --wrap-narrow: 780px;

  /* Signature: the logo's hard offset shadow */
  --drop:     5px 5px 0 var(--ink);
  --drop-lg:  8px 8px 0 var(--ink);
  --drop-red: 5px 5px 0 var(--red);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

::selection { background: var(--red); color: var(--white); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--white);
  padding: .8rem 1.2rem; font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.4rem, var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.4rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--pad-sec); position: relative; }
.section--tight { padding-block: clamp(2.2rem, 1.6rem + 2.4vw, 3.8rem); }
.section--dark { background: var(--graphite); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--ink  { background: var(--ink); color: var(--paper); }
.section--white{ background: var(--white); }
.section--red  { background: var(--red); color: var(--white); }
.section--red h2, .section--red h3 { color: var(--white); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--red);
  flex: none;
}
.section--dark .eyebrow, .section--ink .eyebrow { color: var(--white); }
.section--red .eyebrow { color: var(--white); }
.section--red .eyebrow::before { background: var(--white); }

.h-xl  { font-size: var(--step-5); }
.h-lg  { font-size: var(--step-4); }
.h-md  { font-size: var(--step-3); }
.h-sm  { font-size: var(--step-2); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--steel);
  max-width: 62ch;
}
.section--dark .lede, .section--ink .lede { color: var(--steel-lt); }
.section--red .lede { color: var(--white); }

.mono { font-family: var(--mono); }
.tag {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}

/* --------------------------------------------------------------------------
   5. BUTTONS — capsules, echoing the logo
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  /* 1.2rem at 700 = 19.2px bold: "large text", the only size at which white
     on --red passes AA. Every button shares it so a red one never sits
     beside a smaller white one. */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary { background: var(--red); color: var(--white); }

.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--white); box-shadow: none; transform: none; }

.section--dark .btn--ghost,
.section--ink .btn--ghost,
.hero .btn--ghost,
.pagehead .btn--ghost { border-color: var(--paper); color: var(--paper); }
.section--dark .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.pagehead .btn--ghost:hover { background: var(--paper); color: var(--ink); }

.section--dark .btn, .section--ink .btn, .hero .btn { box-shadow: 4px 4px 0 var(--red); border-color: var(--white); }
.section--dark .btn:hover, .section--ink .btn:hover, .hero .btn:hover { box-shadow: 6px 6px 0 var(--red); }
.section--dark .btn--ghost, .section--ink .btn--ghost, .hero .btn--ghost { box-shadow: none; }
.section--dark .btn--ghost:hover, .section--ink .btn--ghost:hover, .hero .btn--ghost:hover { box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.btn--sm { padding: .55rem 1.05rem; font-size: 1.2rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--sm:hover { box-shadow: 4px 4px 0 var(--ink); }

/* Text link with arrow */
.arrow-link {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.arrow-link::after { content: "→"; font-family: var(--body); transition: transform .18s var(--ease); }
.arrow-link:hover { gap: .75rem; }
.section--dark .arrow-link, .section--ink .arrow-link { color: var(--white); }

/* --------------------------------------------------------------------------
   6. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 0; flex-wrap: wrap;
}
.topbar a { color: var(--paper); text-decoration: none; }
.topbar a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.topbar__list { display: flex; gap: 1.4rem; align-items: center; }
.topbar__flag { color: var(--steel-lt); }
.topbar__flag b { color: var(--white); font-weight: 600; }
.topbar a, .topbar__list { white-space: nowrap; }
@media (max-width: 720px) {
  .topbar__flag { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__list { gap: 1rem; }
}
@media (max-width: 480px) {
  .topbar { font-size: .68rem; }
  .topbar__list a:last-child { display: none; }  /* Find Pacer lives in the nav */
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex: none; }
.brand img { width: clamp(118px, 12vw, 158px); }


.nav { display: flex; align-items: center; gap: .15rem; --nav-pad: .72rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .7rem var(--nav-pad);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .035em;
  color: var(--ink); text-decoration: none; background: none; border: 0;
  cursor: pointer; font-family: var(--display);
  border-radius: 999px;
  transition: color .15s var(--ease), background .15s var(--ease);
  white-space: nowrap;
}
.nav__link[aria-expanded="true"] { background: var(--paper); }
.nav__link:hover::after,
.nav__link.is-current::after {
  content: ""; position: absolute; left: var(--nav-pad); right: var(--nav-pad); bottom: .3rem;
  height: 2px; background: var(--red);
}
.nav__caret { width: 9px; height: 9px; flex: none; transition: transform .2s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + .45rem); left: 0;
  min-width: 288px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: var(--drop);
  padding: .55rem;
  display: none;
  z-index: 120;
}
.nav__panel[data-open="true"] { display: block; animation: pop .16s var(--ease); }
.nav__panel--right { left: auto; right: 0; }
@keyframes pop { from { opacity: 0; transform: translateY(-5px); } }

.nav__panel a {
  display: block; padding: .55rem .7rem;
  font-size: .93rem; text-decoration: none; color: var(--ink);
  border-radius: 3px; line-height: 1.35;
}
.nav__panel a:hover { background: var(--paper); box-shadow: inset 3px 0 0 var(--red); }
.nav__panel a small {
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: .1rem;
}
.nav__sub { padding-left: .9rem; border-left: 2px solid var(--line); margin-left: .7rem; }
.nav__sub a { font-size: .88rem; color: var(--steel); }
.nav__divider { height: 1px; background: var(--line); margin: .45rem .3rem; }

.nav__label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
  padding: .5rem .7rem .25rem;
}

.header__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
/* Matches .nav__link so the CTA reads as part of the same row. btn--sm is
   shared with the hero finder and the sidebar call buttons, which stay small. */
.header__cta .btn--sm { font-size: 1.2rem; padding: .58rem 1.2rem; }

.nav-toggle {
  display: none; width: 46px; height: 42px;
  border: 2px solid var(--ink); background: var(--white);
  border-radius: 999px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1140px) {
  .nav-toggle { display: flex; }
  /* The drawer is a descendant of the header, so the logo and the close button
     need to sit above it inside the header's own stacking context. */
  .brand, .nav-toggle { position: relative; z-index: 95; }
  .header__cta .btn { display: none; }
  .nav {
    position: fixed; inset: auto 0 0 0; top: 0;
    background: var(--white);
    flex-direction: column; align-items: stretch;
    padding: 8.75rem 1.2rem 2.4rem;
    gap: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    z-index: 90;
    border-left: 2px solid var(--ink);
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav__link { width: 100%; justify-content: space-between; padding: .95rem .4rem; font-size: 1.15rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__link.is-current::after { display: none; }
  .nav__panel {
    position: static; border: 0; box-shadow: none; padding: .3rem 0 .8rem .6rem;
    min-width: 0; background: var(--paper-2); margin-bottom: .4rem;
  }
  .nav__item { border-bottom: 0; }
  .nav__mobile-cta { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.6rem; }
}
@media (min-width: 1141px) { .nav__mobile-cta { display: none; } }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}
/* Faint machined-grid texture: pump housing tooling marks */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
/* --- Hero background film -------------------------------------------------
   Layer order inside .hero:  video (0) -> scrim (1) -> grid texture (2) -> content (3).
   The clips are already graded dark (mean luminance 37-56), so the scrim only has
   to lift the agriculture shot's brightest 5% clear of white type. It runs
   left-to-right: heaviest under the headline, lightest under the finder card,
   which is opaque anyway — that keeps the footage readable on the right. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(14,16,19,.82) 0%,
    rgba(14,16,19,.66) 38%,
    rgba(14,16,19,.44) 72%,
    rgba(14,16,19,.38) 100%);
}
/* Bottom fade so the hero settles into the credential strip below it. */
.hero__scrim::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 28%;
  background: linear-gradient(to bottom, rgba(14,16,19,0), rgba(14,16,19,.75));
}
.hero::before { z-index: 2; }

/* Portrait hero under 961px would crop a 16:9 file to its middle quarter,
   so mobile keeps the poster frame and skips the download entirely. */
@media (max-width: 960px) {
  .hero__bg { display: none; }
  .hero { background-image: url("../img/hero-poster.webp");
          background-size: cover; background-position: 62% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { display: none; }
  .hero { background-image: url("../img/hero-poster.webp");
          background-size: cover; background-position: 62% center; }
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; } }

/* Sized so the headline sits on three lines inside the hero's left column.
   The column governs the wrap, so no max-width is set here. */
.hero h1 {
  font-size: clamp(2.4rem, 1.55rem + 2.7vw, 4.05rem);
  color: var(--white);
  margin-bottom: .85rem;
  letter-spacing: -.015em;
}
.hero h1 .accent { color: var(--red); display: block; }
.hero__lede { font-size: var(--step-1); color: var(--steel-lt); max-width: 48ch; margin-bottom: 1.5rem; }

/* --- Full-viewport hero ------------------------------------------------
   topbar + site header + hero add up to exactly one viewport. --chrome-h is
   measured at runtime (the header's height follows the fluid logo), with a
   static fallback for the first paint and for no-JS. Only applied where the
   hero is two-column: stacked under 960px the finder would be pushed off
   screen, so there the hero takes the height it needs. */
:root { --chrome-h: 122px; }

@media (min-width: 961px) {
  .hero {
    min-height: calc(100svh - var(--chrome-h));
    display: flex;
    align-items: center;
    padding-block: clamp(1.5rem, .6rem + 2.6vw, 3rem);
  }
  .hero__inner { width: min(100% - 2.4rem, var(--wrap)); }
}

/* Short windows (small laptops, lots of browser chrome): the hero would other-
   wise grow past the viewport rather than clip. Tighten the type and the
   padding so it still resolves to one screen. */
@media (min-width: 961px) and (max-height: 720px) {
  .hero { padding-block: 1rem; }
  .hero h1 { font-size: clamp(2rem, 1.35rem + 1.9vw, 3.05rem); margin-bottom: .6rem; }
  .hero__lede { margin-bottom: 1.1rem; }
  .finder { padding: 1.1rem 1.2rem 1.1rem; }
  .finder__chips { margin-bottom: .9rem; }
}

/* --------------------------------------------------------------------------
   8. PUMP FINDER (hero widget) — the brief's #1 functional complaint
   -------------------------------------------------------------------------- */
.finder {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--drop-red);
  padding: 1.5rem 1.4rem 1.4rem;
}
.finder__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .75rem; margin-bottom: 1.1rem;
}
.finder__head h2 { font-size: var(--step-2); margin: 0; }
.finder__head span { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }

.finder__label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--steel); display: block; margin-bottom: .6rem;
}
.finder__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--white);
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; line-height: 1;
  transition: .16s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--red); }
.chip:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }

.finder__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.finder__count { font-family: var(--mono); font-size: .78rem; color: var(--steel); }
.finder__count b { color: var(--ink); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   9. CREDENTIAL STRIP
   -------------------------------------------------------------------------- */
.creds {
  background: var(--red);
  color: var(--white);
  border-block: 2px solid var(--ink);
}
/* Column count follows the number of stats, so the annual-production figure
   can be added back (edit list #5) without touching the stylesheet. */
.creds__inner {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0;
}
.creds__item {
  padding: 1.5rem 1.2rem;
  border-right: 1px solid rgba(255,255,255,.28);
}
.creds__item:last-child { border-right: 0; }
.creds__item b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 1; margin-bottom: .3rem;
}
/* Display face at 1.2rem/700 so the white label counts as large text on red. */
.creds__item span {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--white); line-height: 1.15; display: block;
}
@media (max-width: 780px) {
  .creds__inner { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .creds__item:nth-child(2) { border-right: 0; }
  .creds__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.28); }
}

/* --------------------------------------------------------------------------
   10. SPEC PLATE — signature component (a pump nameplate)
   -------------------------------------------------------------------------- */
.plate {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 1.5rem 1.35rem;
  position: relative;
  transition: border-color .18s var(--ease);
  display: flex; flex-direction: column;
}
/* The offset shadow is reserved for things that press, float or lift. A static
   info card does neither, so .plate--drop is flat at rest and only the link
   variant responds to hover - a card that nudges without being clickable is a
   false affordance. (Class name kept: it is on 122 pages of markup.) */
a.plate--drop:hover { border-color: var(--red); }

.plate__no {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase; margin-bottom: .8rem;
  display: flex; align-items: center; gap: .5rem;
}
.plate__no::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.plate h3 { font-size: var(--step-1); margin-bottom: .55rem; }
.plate p  { font-size: .94rem; color: var(--steel); line-height: 1.6; margin-bottom: 0; }
.plate p + .arrow-link { margin-top: 1.1rem; }
.plate .arrow-link { margin-top: auto; align-self: flex-start; padding-top: 1.1rem; }
/* Inside a button row the link must share the button's baseline, not drop
   below it (client edit, Sept 2026: "get them on the same plane"). */
.plate .btn-row .arrow-link { margin-top: 0; padding-top: 0; align-self: center; }


/* Dark variant */
.section--dark .plate, .section--ink .plate {
  background: var(--graphite-2); border-color: var(--line-dark); color: var(--paper);
}
.section--dark .plate p, .section--ink .plate p { color: var(--steel-lt); }
.section--dark a.plate--drop:hover, .section--ink a.plate--drop:hover { border-color: var(--red); }

/* Link plate */
a.plate { text-decoration: none; color: inherit; }

/* --------------------------------------------------------------------------
   11. SPEC ROWS — hairline data table look
   -------------------------------------------------------------------------- */
.specrows { border-top: 2px solid var(--ink); }
.specrow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.specrow dt, .specrow__k {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink); padding-top: .25rem;
}
.specrow dd, .specrow__v { margin: 0; }
@media (max-width: 620px) { .specrow { grid-template-columns: 1fr; gap: .3rem; } }

.section--dark .specrows { border-color: var(--line-dark); }
.section--dark .specrow { border-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   12. SERIES CARDS
   -------------------------------------------------------------------------- */
.series-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 2px solid var(--ink);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease);
}
.series-card:hover { border-color: var(--red); }
.series-card__top {
  background: var(--ink); color: var(--white);
  padding: 1.1rem 1.2rem .95rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
}
.series-card__mark {
  font-family: var(--display); font-weight: 800;
  font-size: 2.1rem; line-height: 1; color: var(--white);
}
.series-card__mark em { color: var(--red); font-style: normal; }
.series-card__badge {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-lt);
  border: 1px solid var(--line-dark); padding: .22rem .5rem; border-radius: 999px; white-space: nowrap;
}
.series-card__badge--nsf { color: var(--white); border: 2px solid var(--red); }
.series-card__body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.series-card__body p { font-size: .92rem; color: var(--steel); margin-bottom: 1rem; }
.series-card__meta {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem;
}
/* Three spec points per series card (Oct client edit). They replace the pill
   row on the homepage; the pills remain on the pump-series page. */
.series-card__points {
  list-style: none; margin: auto 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--line); display: grid; gap: .32rem;
}
.series-card__points li {
  margin: 0; padding-left: 1rem; position: relative;
  font-size: .84rem; line-height: 1.4; color: var(--steel);
}
.series-card__points li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; background: var(--red);
}
.series-card__meta span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel);
  border: 1px solid var(--line); padding: .2rem .5rem; border-radius: 999px;
}

/* --------------------------------------------------------------------------
   13. PROSE (content pages)
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose > h2 {
  font-size: var(--step-3);
  margin-top: 2.8rem;
  margin-bottom: .85rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--ink);
  position: relative;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { font-size: var(--step-1); margin-top: 1.9rem; margin-bottom: .5rem; }
.prose p { margin-bottom: 1.15em; }
.prose > p > strong:only-child,
.prose .keytake {
  display: block;
  font-family: var(--body);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border-left: 4px solid var(--red);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.4em;
}
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
  position: relative; padding-left: 1.7rem; margin-bottom: .7em;
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--red); border: 2px solid var(--ink);
}
.prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.prose a:not(.btn):hover { text-decoration-thickness: 3px; }
.prose .cta-inline { margin: 1.9rem 0 2.2rem; }

/* Steps — genuine sequence, so numbering carries meaning */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: var(--red);
}
.step h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.step p { font-size: .95rem; color: var(--steel); margin: 0; }
.section--dark .steps { border-color: var(--line-dark); }
.section--dark .step { border-color: var(--line-dark); }
.section--dark .step p { color: var(--steel-lt); }
@media (max-width: 620px) { .step { grid-template-columns: 54px 1fr; gap: 1rem; } .step::before { font-size: 1.7rem; } }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.6rem 1.15rem 0;
  position: relative;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1.15;
  transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 29px;
  width: 16px; height: 2px; background: var(--ink);
}
.faq summary::before {
  content: ""; position: absolute; right: 9px; top: 22px;
  width: 2px; height: 16px; background: var(--ink);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.section--dark .faq summary::after,
.section--dark .faq summary::before { background: var(--paper); }
.faq details[open]:not([data-anim="out"]) summary { color: var(--red); }
.section--dark .faq summary:hover,
.section--dark .faq details[open]:not([data-anim="out"]) summary { color: var(--red); }
.section--dark .faq details[open]:not([data-anim="out"]) summary::after { background: var(--red); }
.faq details[open]:not([data-anim="out"]) summary::before { transform: scaleY(0); opacity: 0; }
.faq details[open]:not([data-anim="out"]) summary::after { background: var(--red); }
/* overflow clips the copy while the panel animates its height; the JS
   collapses padding-bottom alongside it, since border-box keeps that
   padding inside the height being animated. */
.faq__body { padding: 0 3rem 1.4rem 0; color: var(--steel); overflow: hidden; }
.faq__body p:last-child { margin-bottom: 0; }
/* Every industry-page FAQ sits inside .section--dark, where --steel drops to
   2.51:1. --steel-lt clears 4.5:1 on both --graphite and --ink. */
.section--dark .faq__body,
.section--ink .faq__body { color: var(--steel-lt); }

/* --------------------------------------------------------------------------
   15. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.pagehead {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(2.6rem, 2rem + 3.2vw, 4.8rem);
  position: relative; overflow: hidden;
}
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 80% at 20% 30%, #000 10%, transparent 75%);
}
.pagehead__inner { position: relative; display: grid; grid-template-columns: minmax(0,1.4fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; }
@media (max-width: 900px) { .pagehead__inner { grid-template-columns: 1fr; align-items: start; } }
/* One column since the header badges were removed (Oct client edit); the
   grid template is kept so a second column can return without a rethink. */
.pagehead h1 { font-size: var(--step-4); color: var(--white); margin-bottom: .8rem; }
.pagehead .lede { color: var(--steel-lt); margin-bottom: 0; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-lt); margin-bottom: 1.4rem;
}
.crumbs a { color: var(--steel-lt); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); }
.crumbs span[aria-current] { color: var(--white); }
.crumbs li { list-style: none; }
.crumbs ol { display: contents; }

/* --------------------------------------------------------------------------
   16. CTA BANDS
   -------------------------------------------------------------------------- */
.cta-band {
  border: 2px solid var(--ink);
  background: var(--red);
  color: var(--white);
  padding: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1.8rem; align-items: center;
}
.cta-band h2 { font-size: var(--step-3); color: var(--white); margin-bottom: .5rem; }
/* 24px: large text, so white passes on --red at normal weight. */
.cta-band p { color: var(--white); margin-bottom: 0; max-width: 40ch; font-size: 1.5rem; line-height: 1.35; }
.cta-band .btn { background: var(--white); color: var(--ink); border-color: var(--ink); }
.cta-band .btn:hover { background: var(--ink); color: var(--white); }

/* .cta-band .btn is two classes, so it outranks the single .btn--ghost class
   and was painting the ghost button white on a white background - readable
   only on hover, when the band's hover rule darkened it. Restore the ghost
   treatment at matching specificity, and place it after the rule it corrects
   so the equal-weight :hover selector resolves in its favour. */
.cta-band .btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  box-shadow: none;
}
.cta-band .btn--ghost:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  box-shadow: none;
  transform: none;
}
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(1.6rem, 1rem + 2.5vw, 3.2rem);
  padding-bottom: 3rem;
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand img { width: 168px; margin-bottom: 1.1rem; }
.footer__brand p { color: var(--steel-lt); font-size: .92rem; max-width: 34ch; }

.footer .footer__h {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .55rem;
}
.footer .footer__h::before { content: ""; width: 18px; height: 2px; background: var(--red); flex: none; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: var(--paper); text-decoration: none; font-size: .93rem; }
.footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }

.footer__contact { font-style: normal; color: var(--steel-lt); font-size: .93rem; line-height: 1.7; }
.footer__contact a { display: inline-block; }
.footer__contact strong { color: var(--white); display: block; font-family: var(--display); font-size: 1.3rem; letter-spacing: .02em; margin-bottom: .1rem; }

/* Six icons at 46px need 276px before gaps. The narrowest container that holds
   a social row is 273px (the Media page plate), so one row is impossible there
   at the enlarged size the client asked for. Rather than let each container
   wrap wherever it lands — 5+1 in several places, which reads as a mistake —
   they are capped to three per row everywhere. Even 3x2, same at every width. */
.social {
  display: grid; grid-template-columns: repeat(3, 46px);
  gap: .55rem; margin-top: 1.2rem; justify-content: start;
}
.social a {
  width: 46px; height: 46px; border-radius: 999px;
  border: 2px solid var(--line-dark);
  display: grid; place-items: center;
  transition: .16s var(--ease);
}
.social a:hover { background: var(--red); border-color: var(--red); }
.social svg { width: 21px; height: 21px; fill: currentColor; }

.footer__bar {
  border-top: 1px solid var(--line-dark);
  padding: 1.3rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--steel-lt);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__bar a { font-size: .72rem; color: var(--steel-lt); }

/* --------------------------------------------------------------------------
   18. CATALOG / FILTER PAGE
   -------------------------------------------------------------------------- */
.catalog { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
@media (max-width: 940px) { .catalog { grid-template-columns: 1fr; } }

.filters {
  border: 2px solid var(--ink); background: var(--white);
  padding: 1.2rem 1.2rem 1.4rem;
  position: sticky; top: 96px;
}
@media (max-width: 940px) { .filters { position: static; } }
.filters h2 {
  font-size: var(--step-1); margin-bottom: .2rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
}
.filters__note { font-family: var(--mono); font-size: .68rem; color: var(--steel); letter-spacing: .06em; margin-bottom: 1.2rem; display: block; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
.filters legend {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink); padding: 0; margin-bottom: .7rem;
}
.filters__opt {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .1rem; cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.filters__opt:last-child { border-bottom: 0; }
.filters__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.filters__box {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--line-strong); background: var(--white);
  display: grid; place-items: center; transition: .15s var(--ease);
}
.filters__box::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(0); transition: transform .15s var(--ease);
  margin-top: -2px;
}
.filters__opt:hover .filters__box { border-color: var(--ink); }
.filters__opt input:checked + .filters__box { background: var(--red); border-color: var(--ink); }
.filters__opt input:checked + .filters__box::after { transform: rotate(-45deg) scale(1); }
.filters__opt input:focus-visible + .filters__box { outline: 3px solid var(--red); outline-offset: 2px; }
.filters__opt .count {
  margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--steel);
  /* These stack in a column beside the checkboxes. The old monospace face
     aligned them for free; a proportional one needs telling. */
  font-variant-numeric: tabular-nums;
}

.catalog__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: .9rem; margin-bottom: 1.5rem;
}
.catalog__count { font-family: var(--mono); font-size: .8rem; color: var(--steel); }
.catalog__count b { color: var(--ink); }

.active-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.pill-clear {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 2px solid var(--ink); background: var(--ink); color: var(--white);
  border-radius: 999px; padding: .28rem .5rem .28rem .8rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer;
}
.pill-clear:hover { box-shadow: 3px 3px 0 var(--red); }
.pill-clear b { font-size: .95rem; line-height: 1; }

/* Fixed 3-up rather than auto-fill: the card count per row stays predictable
   as the sidebar collapses, and the product shot gets more room. */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 820px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .products { grid-template-columns: 1fr; } }
.product {
  border: 2px solid var(--ink); background: var(--white);
  padding: 1rem 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease);
  animation: fadein .25s var(--ease) both;
}
.product:hover { border-color: var(--red); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.product__sku { font-family: var(--mono); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; }
.product__series { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.product__spec { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .35rem; }
.product__spec span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--steel); border: 1px solid var(--line); border-radius: 999px; padding: .18rem .5rem;
}

.empty {
  border: 2px dashed var(--line-strong); padding: 3rem 1.5rem; text-align: center;
  grid-column: 1 / -1;
}
.empty h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.empty p { color: var(--steel); margin-bottom: 1.2rem; }

/* --------------------------------------------------------------------------
   19. FORMS
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel); margin-bottom: .45rem;
}
.field label .req { color: inherit; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  border: 2px solid var(--line-strong); background: var(--white);
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  border-radius: 0; transition: border-color .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); outline: 3px solid var(--red); outline-offset: 2px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field__hint { font-size: .8rem; color: var(--steel); margin-top: .35rem; }
.field__error { font-size: .82rem; color: var(--ink); margin-top: .35rem; font-weight: 600; display: none; border-left: 3px solid var(--red); padding-left: .55rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field.has-error .field__error { display: block; }

.form-note { font-size: .85rem; color: var(--steel); }
.form-status {
  border: 2px solid var(--ink); background: var(--white);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem; display: none;
}
.form-status[data-show="true"] { display: block; }
.form-status h3 { font-size: var(--step-1); margin-bottom: .3rem; color: var(--red); }
.form-status p { margin: 0; font-size: .93rem; color: var(--steel); }

/* --------------------------------------------------------------------------
   20. MEDIA / ARTICLE CARDS
   -------------------------------------------------------------------------- */
.post {
  display: flex; flex-direction: column;
  border: 2px solid var(--ink); background: var(--white);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease);
}
.post:hover { border-color: var(--red); }
.post__kind {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--white); padding: .45rem .9rem; display: flex; justify-content: space-between; gap: 1rem;
}
.post__kind time { color: var(--steel-lt); }
.post__body { padding: 1.15rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.post__body h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.post__body p { font-size: .92rem; color: var(--steel); margin-bottom: 1rem; }
.post__body .arrow-link { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   21. UTILITIES + MOTION
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }
.section__head { max-width: 66ch; margin-bottom: clamp(1.8rem, 1.4rem + 1.6vw, 3rem); }
.section__head--split {
  max-width: none; display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1.5rem; align-items: end;
}
@media (max-width: 760px) { .section__head--split { grid-template-columns: 1fr; align-items: start; } }

/* Reveal only engages when JS is present — without it, content shows immediately. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .topbar, .site-footer, .cta-band, .finder { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   22. SERVICE PAGE LAYOUT
   -------------------------------------------------------------------------- */
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1000px) { .svc-layout { grid-template-columns: 1fr; } }

.svc-aside { position: sticky; top: 100px; }
@media (max-width: 1000px) { .svc-aside { position: static; } }
.svc-aside .specrow { grid-template-columns: 92px minmax(0,1fr); gap: .8rem; padding: .7rem 0; }
.svc-aside .specrow dt { font-size: .66rem; letter-spacing: .1em; }
.svc-aside .specrow dd { font-size: .9rem; }
.svc-aside .btn { width: 100%; }
.svc-aside p { font-size: .85rem; color: var(--steel); }

.aside-links { list-style: none; padding: 0; margin: 0; }
.aside-links li { margin: 0; border-bottom: 1px solid var(--line); }
.aside-links li:last-child { border-bottom: 0; }
.aside-links a {
  display: block; padding: .6rem 0; font-size: .92rem;
  text-decoration: none; color: var(--ink); transition: color .15s var(--ease), padding .15s var(--ease);
}
.aside-links a:hover { padding-left: .35rem; }
.aside-links a[aria-current="page"] { font-weight: 600; padding-left: .7rem; box-shadow: inset 3px 0 0 var(--red); }

/* Document pages — performance curves, installation manuals, parts lists,
   rebuild kits. One .docset per series, one .doc row per PDF. */
.docs { min-width: 0; }
.docjump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.4rem; }
.docjump a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--white); line-height: 1;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.docjump a span { font-family: var(--body); font-weight: 500; font-size: .78rem; color: var(--steel); letter-spacing: 0; }
.docjump a:hover { background: var(--ink); color: var(--white); }
.docjump a:hover span { color: var(--steel-lt); }

.docset { scroll-margin-top: 120px; }
.docset + .docset { margin-top: clamp(2.6rem, 2rem + 2vw, 3.8rem); }
.docset__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem;
  border-bottom: 2px solid var(--ink); padding-bottom: .55rem;
}
.docset__h { font-size: var(--step-2); margin: 0; }
.docset__n { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.docset__sub {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.05rem; letter-spacing: .04em; margin: 1.7rem 0 0; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-strong);
}
.docset__sub::before { content: ""; width: 18px; height: 2px; background: var(--red); flex: none; }
.docset__note { font-size: .92rem; color: var(--steel); margin: 1rem 0 0; max-width: 62ch; }

.doclist { list-style: none; padding: 0; margin: 0; }
.doc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .4rem 1.3rem;
  margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.doc__file { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink); text-decoration: none; min-width: 0; }
.doc__icon { width: 22px; height: 22px; flex: none; color: var(--red); margin-top: .1rem; }
.doc__txt { min-width: 0; }
.doc__t { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.doc__d { display: block; font-size: .88rem; color: var(--steel); line-height: 1.45; margin-top: .1rem; }
.doc__file:hover .doc__t { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.doc__meta { font-size: .8rem; color: var(--steel); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc__pump {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 1px;
}
.doc__pump:hover { border-bottom-color: var(--ink); }
@media (max-width: 640px) {
  .doc { grid-template-columns: minmax(0, 1fr) auto; }
  .doc__meta { grid-column: 1; padding-left: calc(22px + .75rem); }
  .doc__pump { grid-column: 2; grid-row: 1; }
}

.kits-wrap { overflow-x: auto; margin-top: .2rem; }
.kits { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.kits th {
  text-align: left; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .75rem 1rem .5rem 0; border-bottom: 2px solid var(--ink);
}
.kits td { padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kits__no { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Feature list — the "what's included" spec bullets */
.feature-grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .1rem 1.6rem;
  border-top: 2px solid var(--ink);
  margin: 0 0 1.8rem;
}
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  display: grid; grid-template-columns: 22px minmax(0,1fr); gap: .75rem;
  align-items: start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem; line-height: 1.55;
  margin: 0;
}
.feature__tick {
  width: 18px; height: 18px; margin-top: .22em; flex: none;
  border: 2px solid var(--ink); background: var(--red); border-radius: 999px;
  display: grid; place-items: center; position: relative;
}
.feature__tick::after {
  content: ""; width: 7px; height: 4px; margin-top: -1px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}
/* prose ul styling must not leak into the feature grid and the card grids */
.prose ul.feature-grid li,
.prose ul.app-grid li,
.prose ul.fn-grid li { padding-left: 0; }
.prose ul.feature-grid li::before,
.prose ul.app-grid li::before,
.prose ul.fn-grid li::before { display: none; }

/* --------------------------------------------------------------------------
   23. HOME — series strip, media, split CTA
   -------------------------------------------------------------------------- */
.split-cta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 2px solid var(--ink); }
@media (max-width: 760px) { .split-cta { grid-template-columns: 1fr; } }
.split-cta__half {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  background: var(--white);
  border-right: 2px solid var(--ink);
  display: flex; flex-direction: column;
  transition: background .2s var(--ease);
  text-decoration: none; color: inherit;
}
.split-cta__half:last-child { border-right: 0; }
@media (max-width: 760px) {
  .split-cta__half { border-right: 0; border-bottom: 2px solid var(--ink); }
  .split-cta__half:last-child { border-bottom: 0; }
}
.split-cta__half:hover { background: var(--paper); }
.split-cta__half h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.split-cta__half p { color: var(--steel); font-size: .95rem; margin-bottom: 1.2rem; }
.split-cta__half .arrow-link { margin-top: auto; align-self: flex-start; }

/* Marquee-free scrolling ticker replacement: a static rule of proof points */
.proof {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-lt);
}
.proof span { display: inline-flex; align-items: center; gap: .5rem; }
.proof span::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 999px; }

/* Locations / distributor list */
.dist-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
@media (max-width: 820px) { .dist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dist-grid { grid-template-columns: 1fr; } }
.dist-grid li {
  padding: .8rem 0; border-bottom: 1px solid var(--line); margin: 0;
  font-family: var(--mono); font-size: .86rem; letter-spacing: .02em;
}
.section--dark .dist-grid li { border-color: var(--line-dark); }

/* Timeline (About) */
.timeline { border-top: 2px solid var(--ink); }
.timeline__row {
  display: grid; grid-template-columns: 130px minmax(0,1fr);
  gap: 1.6rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line);
}
.timeline__yr {
  font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--red);
}
.timeline__row p { margin: 0; color: var(--steel); }
.section--dark .timeline, .section--dark .timeline__row { border-color: var(--line-dark); }
.section--dark .timeline__row p { color: var(--steel-lt); }
@media (max-width: 620px) { .timeline__row { grid-template-columns: 88px 1fr; gap: 1rem; } .timeline__yr { font-size: 1.4rem; } }

/* Notice / callout */
.notice {
  border: 2px dashed var(--line-strong);
  padding: 1rem 1.15rem; font-size: .88rem; color: var(--steel);
  display: flex; gap: .8rem; align-items: flex-start;
}
.notice b { color: var(--ink); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.notice p { margin: .2rem 0 0; }

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

/* --------------------------------------------------------------------------
   24. SMALL LABELS ON DARK SURFACES
   Were --red-lt until the single-red change. --red is too dark for small
   text on --ink / --graphite, so the labels go white; step numbers and years
   are large display type and keep --red from their base rules.
   -------------------------------------------------------------------------- */
.section--dark .plate__no,
.section--ink .plate__no,
.pagehead .plate__no,
.hero .plate__no { color: var(--white); }

.section--dark .specrow dt, .section--dark .specrow__k,
.section--ink .specrow dt,  .section--ink .specrow__k { color: var(--white); }

/* --------------------------------------------------------------------------
   25. PRODUCT CARD MEDIA (catalog grid)
   -------------------------------------------------------------------------- */
.product__media {
  display: block; margin: -1rem -1rem .35rem; /* bleed to the card's border */
  background: var(--white);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3; overflow: hidden;
}
.product__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s var(--ease);
}
.product:hover .product__media img { transform: scale(1.045); }

/* --------------------------------------------------------------------------
   26. PRODUCT DETAIL PAGE (PDP)
   -------------------------------------------------------------------------- */
.pagehead--product { padding-block: 1.4rem; }
.pagehead--product .crumbs { margin-bottom: 0; }

.pdp {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.6rem, 1rem + 3.5vw, 3.6rem);
  align-items: start;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.pdp__shot {
  margin: 0; background: var(--white);
  border: 2px solid var(--ink);
  aspect-ratio: 4 / 3; overflow: hidden;
}
.pdp__shot img { width: 100%; height: 100%; object-fit: contain; }
/* Low-resolution legacy source: cap how far it is allowed to blow up, so the
   softness stays contained instead of filling the frame edge-to-edge. */
.pdp__shot--low img { padding: 6%; image-rendering: auto; }
.pdp__lownote {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel); margin: .8rem 0 0;
}

.pdp__info h1 {
  font-family: var(--mono); font-weight: 600; text-transform: none;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); letter-spacing: -.01em;
  line-height: 1.05; margin-bottom: .5rem;
}
.pdp__headline { font-size: var(--step-1); color: var(--steel); margin-bottom: 1.5rem; }

.pdp__keys { list-style: none; padding: 0; margin: 0 0 1.6rem; border-top: 2px solid var(--ink); }
.pdp__keys li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.pdp__keys b {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.pdp__keys span { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-align: right; }

.pdp__desc { color: var(--steel); margin-bottom: 1.6rem; }
/* Quote, Call and Warranty: one row from 1240px up. Below that they wrap;
   on phones each stretches to its line so the wrap reads as intended. */
.pdp__info .btn-row { gap: .75rem; }
.pdp__info .btn-row .btn { padding-inline: 1.25rem; }
@media (max-width: 560px) { .pdp__info .btn-row .btn { flex: 1 1 auto; } }

.pdp__meta { margin: 1.8rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pdp__meta > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.pdp__meta dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel);
}
.pdp__meta dd { margin: 0; font-size: .9rem; font-weight: 500; }
.pdp__meta .mono { font-family: var(--mono); }

.pdp__lower {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.6rem, 1rem + 3vw, 3.2rem); align-items: start;
}
@media (max-width: 900px) { .pdp__lower { grid-template-columns: 1fr; } }
.pdp__foot { margin-top: 1.6rem; color: var(--steel-lt); font-size: .92rem; }

/* --------------------------------------------------------------------------
   27. SERIES IMAGERY
   -------------------------------------------------------------------------- */
.series-shot {
  /* order:-1 lifts the shot to the top of the plate, so the margin belongs
     BELOW it — the card's own padding already spaces it from the top edge. */
  margin: 0 0 1.25rem; background: var(--white);
  border: 1px solid var(--line); aspect-ratio: 4 / 3; overflow: hidden;
  order: -1;
}
.series-shot img { width: 100%; height: 100%; object-fit: contain; }

/* Homepage series cards. The markup puts the shot first, but the dark mark strip
   is the card's identity, so flex order restores: mark -> photo -> copy. */
.series-card__top  { order: 0; }
.series-card__shot { order: 1; }
.series-card__body { order: 2; }
.series-card__shot {
  display: block; background: var(--white);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 5 / 3; overflow: hidden;
}
.series-card__shot img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s var(--ease);
}
.series-card:hover .series-card__shot img { transform: scale(1.05); }

/* Quote-request prefill notice (contact form, arriving from a product page) */
.form-sku {
  border-left: 4px solid var(--red); background: var(--white);
  padding: .8rem 1rem; margin: 0 0 1.4rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
}
.form-sku b { font-weight: 600; }
.form-sku a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; }

/* Trust badges under the product shot. Centred and sized up at the client's
   request (Sept 2026); usa-badge.webp carries real alpha, so it sits on the
   paper ground without a white box. */
.pdp__badges {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 1.6rem;
}
.pdp__badges img { width: min(340px, 100%); height: auto; }
.pdp__badges .pdp__badges-nsf { width: 84px; }
/* NSF publish a live listing rather than issuing a certificate, so the
   certified pumps link to it (client, Oct 2026). */
.pdp__nsf {
  display: block; text-align: center; margin-top: .8rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.pdp__nsf:hover { text-decoration-color: var(--ink); }
/* Two filter groups: give each legend room and grey out impossible options */
.filters fieldset + fieldset { margin-top: 1.4rem; }
.filters__opt.is-empty { opacity: .42; }
.filters__opt.is-empty .count { color: var(--steel-lt); }

/* --------------------------------------------------------------------------
   28. PAGE HEADER IMAGERY
   -------------------------------------------------------------------------- */
.pagehead--media { position: relative; }
.pagehead__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Heaviest under the heading on the left, lightest on the right where only the
   capsule sits. The generated headers already sit at luminance 17-70, so this
   only has to hold the brightest few percent clear of white type. */
.pagehead__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(14,16,19,.90) 0%,
    rgba(14,16,19,.78) 42%,
    rgba(14,16,19,.56) 76%,
    rgba(14,16,19,.48) 100%);
}
.pagehead--media::before { z-index: 1; }        /* existing grid texture */
.pagehead--media .pagehead__inner { position: relative; z-index: 2; }

@media (max-width: 700px) {
  /* Stacked, the heading runs full width, so even out the scrim. */
  .pagehead__media::after {
    background: linear-gradient(180deg,
      rgba(14,16,19,.80) 0%, rgba(14,16,19,.86) 100%);
  }
}

/* --------------------------------------------------------------------------
   29. SECTION + CARD IMAGERY
   -------------------------------------------------------------------------- */

/* Industry tiles (homepage + 404). The plate is a flex column, so the shot is
   ordered above the heading and bleeds to the card's border. */
.tile__media {
  display: block; order: -1;
  margin: -1.5rem -1.35rem 1rem;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--graphite);
}
.tile__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
a.plate--drop:hover .tile__media img { transform: scale(1.05); }

/* Build-process steps. Replaces the counter with a real image, so the
   generated number is suppressed to avoid showing both. */
/* Build-process steps carrying imagery become a 2x2 card grid rather than the
   hairline list the text-only version uses. The counter stays — this is a real
   sequence — but moves to a badge on the image corner. */
.steps:has(.step__media) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap); border-top: 0;
}
.steps:has(.step__media) .step {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border-bottom: 0;
  border: 2px solid var(--ink); background: var(--white);
  grid-template-columns: none;
}
.steps:has(.step__media) .step::before {
  display: block; position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 1.05rem; line-height: 1;
  padding: .5rem .75rem .55rem;
  background: var(--ink); color: var(--white);
}
.steps:has(.step__media) .step > div { padding: 1.1rem 1.2rem 1.3rem; }
.steps:has(.step__media) .step h3 { font-size: var(--step-1); margin-bottom: .45rem; }

.step__media {
  display: block; overflow: hidden; background: var(--graphite);
  aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line);
}
.step__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.steps:has(.step__media) .step:hover .step__media img { transform: scale(1.04); }

@media (max-width: 620px) {
  .steps:has(.step__media) { grid-template-columns: 1fr; }
}

/* Media / blog cards */
.post__media {
  display: block; order: -1;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--graphite);
}
.post__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.post:hover .post__media img { transform: scale(1.05); }
.post__kind { order: 0; }
.post__body { order: 1; }

/* Split CTA halves ("Two ways to buy") — full-bleed background behind the copy.
   The heading, paragraph and link all run the width of the card, so unlike the
   header images there is no quiet half to aim for: the scrim has to work
   everywhere. Both sources are graded dark for exactly this reason. */
.split-cta__half--media { position: relative; color: var(--paper); }
.split-cta__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.split-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
/* Both sources came back at mean luminance ~39, so the scrim only has to take
   the top of the histogram off. At .86 the picture disappeared entirely for
   17:1 contrast when 4.5:1 is the bar; this lands around 11:1 and the image
   is actually visible. */
.split-cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,16,19,.44) 0%, rgba(14,16,19,.36) 45%, rgba(14,16,19,.54) 100%);
}
.split-cta__half--media > *:not(.split-cta__bg) { position: relative; z-index: 1; }
.split-cta__half--media h3 { color: var(--white); }
.split-cta__half--media p  { color: var(--paper); }
.split-cta__half--media .arrow-link { color: var(--white); }
/* "Buy direct" was removed (Oct client edit), leaving one half. */
.split-cta:has(> :only-child) { grid-template-columns: 1fr; }
.split-cta__half--media:hover { background: transparent; }
.split-cta__half--media:hover .split-cta__bg img { transform: scale(1.04); }

/* about-us field-record plates */
.plate__media {
  display: block; order: -1;
  margin: -1.5rem -1.35rem 1.1rem;
  aspect-ratio: 3 / 4; max-height: 230px; overflow: hidden;
  background: var(--graphite); border-bottom: 1px solid var(--line);
}
.plate__media img { width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed section background (find-pacer distributor / retailer blocks) */
.section--media { position: relative; overflow: hidden; }
.section--media > .section__media { position: absolute; inset: 0; z-index: 0; }
.section--media > .section__media img { width: 100%; height: 100%; object-fit: cover; }
.section--media > .section__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(14,16,19,.93) 0%, rgba(14,16,19,.86) 45%, rgba(14,16,19,.66) 100%);
}
.section--media:not(.section--dark) > .section__media::after {
  background: linear-gradient(90deg,
    rgba(236,238,241,.96) 0%, rgba(236,238,241,.90) 45%, rgba(236,238,241,.72) 100%);
}
.section--media > .wrap { position: relative; z-index: 1; }

/* Section heading that should run the full wrap rather than the 66ch measure
   used for reading copy — for short headings that would otherwise wrap. */
.section__head--wide { max-width: none; }
.section__head--wide h2 { text-wrap: nowrap; }
@media (max-width: 760px) { .section__head--wide h2 { text-wrap: balance; } }

/* Industry tile description */
.tile__media + .plate__no,
a.plate--drop h3 + p { margin-top: 0; }
a.plate--drop p {
  font-size: .88rem; color: var(--steel); line-height: 1.55;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   30. FOOTER BACKGROUND
   Source measured at mean luminance 31 / p95 60, so the scrim is only holding
   the top of the histogram down — it does not need to bury the picture.
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; }
.footer__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.footer__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,16,19,.42) 0%, rgba(14,16,19,.52) 55%, rgba(14,16,19,.68) 100%);
}
.site-footer > .wrap { position: relative; z-index: 1; }

/* Under 900px the footer stacks to a 0.26 portrait box; a 16:9 source crops to
   a useless vertical sliver there, so skip the download entirely. */
@media (max-width: 900px) { .footer__bg { display: none; } }

/* --------------------------------------------------------------------------
   30b. PARTNER DIRECTORY — find-pacer
   The old site showed these as a wall of logos with empty alt text, so the
   only way to know who a partner was, was to recognise the mark. Here the
   name is real text next to the logo, which makes the list searchable and
   readable to a screen reader.
   -------------------------------------------------------------------------- */
.partners__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.6rem;
}
.partners__find {
  display: flex; align-items: center; gap: .6rem;
  background: var(--white); border: 2px solid var(--ink);
  padding: .1rem .9rem .1rem 1rem; border-radius: 999px;
  min-width: min(340px, 100%);
}
.partners__find-label {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel); flex: none;
}
.partners__find input {
  flex: 1; border: 0; background: none; outline-offset: 4px;
  font-family: var(--body); font-size: .95rem; color: var(--ink);
  padding: .62rem 0;
}
.partners__find input::-webkit-search-cancel-button { cursor: pointer; }
.partners__count {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel); margin: 0;
}
.section--dark .partners__count { color: var(--steel-lt); }

.partners__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
@media (max-width: 1080px) { .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .partners__grid { grid-template-columns: 1fr; } }

.partner { display: flex; }
.partner[hidden] { display: none; }
.partner__link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--white); border: 2px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: border-color .18s var(--ease);
}
a.partner__link:hover, a.partner__link:focus-visible { border-color: var(--red); }
.partner__logo {
  display: grid; place-items: center;
  padding: 1.1rem 1.1rem .6rem;
  background: var(--white);
}
.partner__logo img { width: 100%; max-width: 132px; height: auto; }
.partner__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .95rem; line-height: 1.15; letter-spacing: .01em;
  padding: 0 1.1rem; margin-top: auto;
}
.partner__go {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  padding: .5rem 1.1rem 1.05rem;
}
.partner__go--none { color: var(--steel); }
.partners__empty {
  margin: 1.4rem 0 0; color: var(--steel);
  font-size: .95rem;
}
.section--dark .partners__empty { color: var(--steel-lt); }

/* --------------------------------------------------------------------------
   30c. INDUSTRY PAGE SECTION IMAGERY
   Four treatments, all driven by the shape of the copy that was already there.
   -------------------------------------------------------------------------- */

/* --- "Top applications" — five items, so the first leads at double width.
       A flat five-up always orphans one card on the second row. --- */
.app-grid {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
}
.app__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--ink);
  transition: border-color .18s var(--ease);
}
.app__card:hover { border-color: var(--red); }
.app__card--lead { grid-column: span 2; }
.app__n {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  background: var(--ink); color: var(--white); padding: .42rem .62rem .46rem;
}
.app__media { margin: 0; overflow: hidden; background: var(--paper-2); }
.app__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.app__card--lead .app__media img { aspect-ratio: 16 / 9; }
.app__body { padding: 1.1rem 1.2rem 1.3rem; }
.app__label {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.15; margin: 0 0 .45rem;
}
.app__body p { margin: 0; color: var(--steel); font-size: .95rem; }
.section--dark .app__card, .section--ink .app__card { background: var(--white); }
@media (max-width: 560px) {
  .app-grid { grid-template-columns: 1fr; }
  .app__card--lead { grid-column: auto; }
  .app__card--lead .app__media img { aspect-ratio: 4 / 3; }
}

/* --- "How it functions" — four numbered items, already a clean 2x2. --- */
.fn-grid {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
}
.fn__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--ink);
  transition: border-color .18s var(--ease);
}
.fn__card:hover { border-color: var(--red); }
.fn__n {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--white); padding: .42rem .68rem .46rem;
}
.fn__media { margin: 0; overflow: hidden; background: var(--paper-2); }
.fn__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.fn__body { padding: 1.15rem 1.3rem 1.4rem; }
.fn__label {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; line-height: 1.15; margin: 0 0 .5rem;
}
.fn__body p { margin: 0; color: var(--steel); font-size: .95rem; }
@media (max-width: 640px) { .fn-grid { grid-template-columns: 1fr; } }

/* --- Spec list + portrait plate. These four pages are short: one intro, an
       eight-item list, one closing paragraph. The plate gives the list a
       second column so it stops reading as a bare bulleted stack. --- */
.spec-split {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start;
  margin: 1.6rem 0 0;
}
/* The list is eight items tall against one plate, so the plate rides down
   with it rather than leaving a column of dead space. */
.spec-split__plate {
  margin: 0; border: 2px solid var(--ink); overflow: hidden;
  position: sticky; top: calc(var(--chrome-h, 122px) + 1.5rem);
}
/* Two columns inside a 400px cell wraps to four words a line. */
.spec-split .feature-grid { grid-template-columns: 1fr; }
.spec-split__plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.spec-split__list .feature-grid { margin-top: 0; }
@media (max-width: 860px) {
  .spec-split { grid-template-columns: 1fr; }
  .spec-split__plate { max-width: 420px; }
}

/* --- Inline figures. The two long pages run eleven prose sections with no
       visual rest anywhere; these are scanning anchors, not decoration. --- */
.prose-fig { margin: 1.8rem 0; }
.prose-fig img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--ink); aspect-ratio: 16 / 9; object-fit: cover;
}
.prose-fig figcaption {
  margin-top: .7rem; padding-left: .9rem;
  border-left: 3px solid var(--red);
  font-size: .88rem; line-height: 1.5; color: var(--steel);
}

/* --------------------------------------------------------------------------
   30d. ENGINEERED FOR REAL-WORLD CONDITIONS — homepage, under the hero
   Copy left, product right, a pale industrial photograph behind it and one
   red arc sweeping out from under the pump. The photograph carries no
   information, so it is knocked back until it reads as depth rather than
   as a picture.
   -------------------------------------------------------------------------- */
.engineered {
  position: relative; overflow: hidden;
  background: var(--white);
  padding-block: clamp(2.6rem, 1.8rem + 3.2vw, 4.6rem);
}
.engineered__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.engineered__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center right;
  opacity: .75;   /* tuned against the delivered file: it arrived at mean L 208,
                      so .30 only moved the ground 15 points and read as nothing */
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 46%, transparent 78%);
}
.engineered__sweep {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100%; height: clamp(90px, 14vw, 190px);
  pointer-events: none;
  color: var(--red);              /* the line strokes with currentColor */
  /* The fill runs past the viewBox to avoid a subpixel seam at the section
     edge; .engineered already clips it. */
  overflow: visible;
}
/* Everything under the curve is the ground of the section below, so the red
   line reads as the join rather than sitting on a white band above a rule.
   The section below is the dark series band, so this is graphite. */
.engineered__sweep .sweep__fill { fill: var(--graphite); }
.engineered__sweep .sweep__line { fill: none; stroke: currentColor; stroke-width: 4; }
.engineered__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, .8rem + 3vw, 3.4rem);
  align-items: center;
}
.engineered__title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 1.4rem + 2.7vw, 3.5rem);
  line-height: .94; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 1rem;
}
.engineered__title em { font-style: normal; color: var(--red); display: block; }
.engineered .lede { margin: 0 0 1.4rem; max-width: 42ch; }
.engineered__list { list-style: none; padding: 0; margin: 0; }
/* No rules between rows here — the mockup separates them with space alone. */
.engineered__list .feature { border-bottom: 0; padding: .42rem 0; align-items: start; }
.engineered__list .feature strong { color: var(--ink); }

.engineered__shot { margin: 0; }
@media (min-width: 901px) {
  /* The pump runs past the wrap on the right; the mockup has it leaving the
     frame rather than sitting politely inside a column. */
  .engineered__shot { margin-right: calc(-1 * clamp(1rem, -1rem + 5vw, 4rem)); }
}
.engineered__shot img {
  display: block; width: 95%; height: auto;
  /* The product is cut out, so it needs its own contact shadow to sit down
     on the ground rather than float. */
  filter: drop-shadow(0 18px 22px rgba(14, 16, 19, .18));
}
@media (min-width: 901px) {
  /* Dropped clear of the heading so it sits into the arc. Transform rather
     than margin, so the section keeps its height and nothing below moves. */
  .engineered__shot img { transform: translateY(60px); }
}

@media (max-width: 900px) {
  .engineered__inner { grid-template-columns: 1fr; }
  .engineered__shot { order: -1; max-width: 520px; margin-inline: auto; }
  .engineered__bg img { object-position: center; opacity: .42; -webkit-mask-image: none; mask-image: none; }
  .engineered__sweep { height: 70px; }
}

/* QR into the bottom-right of the Engineered widget (client feedback item 4).
   It lands on the graphite wedge under the red curve, so the white tile reads
   without needing a plate behind it. */
/* Pill-shaped and at twice the size (Oct client edit: "round the corners to
   look consistent with the other buttons, should be bigger"). */
.engineered__yt {
  position: absolute; z-index: 3;
  right: clamp(1rem, -1rem + 5vw, 4rem); bottom: clamp(.9rem, .4rem + 1.6vw, 1.8rem);
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 1.1rem;
  text-decoration: none;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: .95rem 1.9rem .95rem 1.3rem;
  box-shadow: 4px 4px 0 var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.engineered__yt:hover, .engineered__yt:focus-visible {
  border-color: var(--red); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
}
.engineered__yt svg { display: block; width: clamp(68px, 6.4vw, 86px); height: auto; color: var(--red); }
.engineered__yt span {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.42rem; line-height: 1.02; color: var(--ink);
}
@media (max-width: 900px) {
  /* stacked layout has no bottom-right corner to sit in */
  .engineered__yt { position: static; justify-self: start; margin-top: 1.4rem; }
}

/* --------------------------------------------------------------------------
   30e. SECTION BLEND — light section dissolving into the light one below it
   -------------------------------------------------------------------------- */
/* Light into light — "Pick the work" (white) into "What we are publishing"
   (paper). This one cannot use the overlay above: the marine swell is
   anchored into that exact bottom corner, and an opaque paper fade on top of
   it would erase the one vivid part of the picture. So the gradient lives in
   the section's own background instead, underneath the image, and only the
   ground changes. */
.section--blend-paper {
  --blend-run: clamp(90px, 10vw, 145px);
  /* Paper at both edges, white through the middle: the sections above and
     below are both paper, so this one rises out of one and settles back into
     the other instead of meeting either at a step. */
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    var(--white) var(--blend-run),
    var(--white) calc(100% - var(--blend-run)),
    var(--paper) 100%);
}
/* Only the bottom needs the extra room — the top gradient runs behind the
   eyebrow and heading, and paper-to-white is too small a range to affect
   their contrast (measured 19:1). Widening the top as well would undo this
   section's --tight rhythm for no gain. */
.section--tight.section--blend-paper { padding-bottom: calc(var(--pad-sec) + 4rem); }

/* Four steps carries the aquaculture band now. The section below it is white,
   so the water tapers out before the edge rather than ending in a hard cut —
   same reasoning as the marine swell above. */
#build-steps > .wash img {
  /* On its old section a graphite blend sat over this and held it down. With
     nothing on top it has to be knocked back here instead, or the net-pen rail
     cuts straight through the build-step cards. */
  opacity: .8;
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, #000 16%, rgba(0,0,0,.42) 34%, transparent 56%),
    linear-gradient(to top, transparent 0, #000 clamp(60px, 6vw, 90px));
  mask-image:
    linear-gradient(to top, #000 0%, #000 16%, rgba(0,0,0,.42) 34%, transparent 56%),
    linear-gradient(to top, transparent 0, #000 clamp(60px, 6vw, 90px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The swell is anchored into this corner at full strength, so on its own it
   ends in a hard horizontal cut at the section edge. Taper it over exactly
   the band where the ground turns to paper, so image and ground arrive at
   the same value together. */
/* Equal specificity to the --tl rule further down the file would lose on
   source order, so this carries both classes. */
.section--wash--tl.section--blend-paper > .wash img {
  -webkit-mask-image:
    linear-gradient(to top,  #000 0%, #000 14%, rgba(0,0,0,.34) 34%, transparent 58%),
    linear-gradient(to left, #000 0%, #000 12%, rgba(0,0,0,.34) 36%, transparent 62%),
    linear-gradient(to top, transparent 0, #000 var(--blend-run));
  mask-image:
    linear-gradient(to top,  #000 0%, #000 14%, rgba(0,0,0,.34) 34%, transparent 58%),
    linear-gradient(to left, #000 0%, #000 12%, rgba(0,0,0,.34) 36%, transparent 62%),
    linear-gradient(to top, transparent 0, #000 var(--blend-run));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --------------------------------------------------------------------------
   30f. CHILD PAGE NAV — parent category pages listing their subcategories
   Per the August edit list: subcategories come out of the top-level menu and
   live inside their parent page instead, so each parent has to carry the
   route down to them.
   -------------------------------------------------------------------------- */
.childnav { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.prose ul.childnav li { padding-left: 0; }
.prose ul.childnav li::before { display: none; }
.childnav a {
  display: block; padding: 1rem 1.15rem;
  background: var(--white); border: 2px solid var(--ink);
  text-decoration: none; color: var(--ink);
  transition: border-color .18s var(--ease);
}
.childnav a:hover, .childnav a:focus-visible { border-color: var(--red); }
.childnav__name {
  display: block; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 1.02rem; line-height: 1.15;
  margin-bottom: .3rem;
}
.childnav__name::after { content: " \2192"; color: var(--red); }
.childnav__desc { display: block; color: var(--steel); font-size: .95rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   31. MADE IN THE USA BAND
   Sits between the last content section and the footer on every page.
   Deliberately the only white band at the bottom of the page: it separates
   the content from the image-backed footer, and the badge artwork is drawn
   for a white ground — its grey type would disappear on --ink.
   -------------------------------------------------------------------------- */
.usa {
  background: var(--white);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-block: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  position: relative;
}
/* Hairline red rule tying it to the rest of the system */
.usa::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red);
}
.usa__inner {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(1.6rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.usa__badge { width: 100%; max-width: 420px; height: auto; }
.usa__copy p {
  font-size: var(--step-1); color: var(--steel); max-width: 54ch;
  margin-bottom: 1.1rem; text-wrap: pretty;
}
.usa__copy .arrow-link { color: var(--ink); }

@media (max-width: 820px) {
  .usa__inner { grid-template-columns: 1fr; gap: 1.4rem; justify-items: start; }
  .usa__badge { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   32. SECTION BACKGROUNDS
   Real photographs that dissolve into the section rather than sitting on it.
   The fade is baked into the picture; the mask below only carries the pale end
   the last step to fully transparent, because "pale" in the file is about 218
   and the section grounds are 236 and 255 — close, but not close enough to
   meet without a seam.
   -------------------------------------------------------------------------- */
.section--wash { position: relative; overflow: hidden; }
.section--wash > .wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section--wash > .wash img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;
}
.section--wash > .wrap { position: relative; z-index: 1; }

/* Six things — the picture is a band along the bottom, fading up. */
.section--wash--br > .wash img {
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0,0,0,.55) 62%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0,0,0,.55) 62%, transparent 92%);
}

/* Pick the work — anchored into the empty bottom-right grid cell, dissolving
   up and to the left. Two masks so it thins on both axes at once. */
.section--wash--tl > .wash img {
  object-position: right bottom;
  -webkit-mask-image:
    linear-gradient(to top,  #000 0%, #000 14%, rgba(0,0,0,.34) 34%, transparent 58%),
    linear-gradient(to left, #000 0%, #000 12%, rgba(0,0,0,.34) 36%, transparent 62%);
  mask-image:
    linear-gradient(to top,  #000 0%, #000 14%, rgba(0,0,0,.34) 34%, transparent 58%),
    linear-gradient(to left, #000 0%, #000 12%, rgba(0,0,0,.34) 36%, transparent 62%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Stacked on mobile the cards fill the column and the picture has nowhere to
   read, so it only costs bandwidth. */
@media (max-width: 760px) { .section--wash > .wash { display: none; } }

/* --------------------------------------------------------------------------
   33. NEWSLETTER POP-UP + CHAT LAUNCHER  (mock-ups, October 2026)
   Both are injected by site.js; no page carries markup for them. Neither
   talks to a server, and nothing third-party is loaded.
   -------------------------------------------------------------------------- */
.popup { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem; }
body.has-popup { overflow: hidden; }
.popup__scrim { position: absolute; inset: 0; background: rgba(14, 16, 19, .66); }
.popup__card {
  position: relative; z-index: 1; width: min(100%, 440px);
  background: var(--white); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--red);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); text-align: left;
}
/* Scoped to the shown state: assigned while the dialog is still [hidden] the
   animation never advances, and `both` then pins the card at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .popup:not([hidden]) .popup__card { animation: popup-in .22s var(--ease); }
}
@keyframes popup-in { from { opacity: 0; transform: translateY(10px); } }
.popup__logo { width: 136px; height: auto; margin-bottom: 1rem; }
.popup__card h2 { font-size: var(--step-2); margin-bottom: .5rem; }
.popup__card p { font-size: .95rem; color: var(--steel); margin-bottom: 1.1rem; }
.popup__x {
  position: absolute; top: .5rem; right: .6rem; z-index: 2;
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--ink); padding: .2rem .4rem;
}
.popup__x:hover { color: var(--red); }
.popup__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.popup__form input {
  flex: 1 1 190px; min-width: 0; padding: .72rem .9rem;
  border: 2px solid var(--line-strong); background: var(--white);
  font-family: var(--body); font-size: 1rem; color: var(--ink); border-radius: 0;
}
.popup__form input:focus { border-color: var(--ink); outline: 3px solid var(--red); outline-offset: 2px; }
.popup__note { font-size: .78rem !important; color: var(--steel) !important; margin: .8rem 0 0 !important; }

.chat { position: fixed; right: clamp(.8rem, .4rem + 1vw, 1.4rem); bottom: clamp(.8rem, .4rem + 1vw, 1.4rem); z-index: 250; }
/* Deliberately NOT the site's button language: this mirrors the chat widget on
   the current live site (white pill + #ACE0F9 circle), so the client sees the
   control they already recognise. Decorative. */
.chat__launch {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: 0; border: 0; background: none; line-height: 1;
}
.chat__label {
  background: var(--white); color: #0B1220;
  font-family: var(--body); font-size: 1.02rem; font-weight: 500;
  padding: .78rem 1.15rem; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(14, 16, 19, .16);
  white-space: nowrap;
}
.chat__bubble {
  width: 56px; height: 56px; border-radius: 999px; flex: none;
  background: #ACE0F9; color: #2F5680;
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(14, 16, 19, .16);
  transition: transform .18s var(--ease);
}
.chat__launch:hover .chat__bubble { transform: scale(1.06); }
.chat__launch svg { width: 26px; height: 26px; }
@media (max-width: 480px) { .chat__label { display: none; } }
.chat__panel {
  position: absolute; right: 0; bottom: calc(100% + .7rem); width: min(86vw, 330px);
  background: var(--white); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--red);
  display: flex; flex-direction: column; max-height: min(70vh, 460px);
}
.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--white); padding: .6rem .5rem .6rem .9rem;
  font-family: var(--display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.chat__x { background: none; border: 0; color: var(--white); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .5rem; }
.chat__log { padding: .9rem; overflow-y: auto; display: grid; gap: .5rem; }
.chat__msg { margin: 0; font-size: .9rem; line-height: 1.45; padding: .55rem .75rem; max-width: 88%; }
.chat__msg--them { background: var(--paper); color: var(--ink); justify-self: start; }
.chat__msg--me { background: var(--ink); color: var(--white); justify-self: end; }
.chat__chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .9rem .6rem; }
.chat__chip {
  cursor: pointer; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink);
  border-radius: 999px; padding: .32rem .7rem; font-family: var(--body); font-size: .78rem;
}
.chat__chip:hover { border-color: var(--ink); box-shadow: 2px 2px 0 var(--red); }
.chat__note { margin: 0; padding: 0 .9rem .8rem; font-size: .72rem; color: var(--steel); }
@media print { .chat, .popup { display: none !important; } }

/* ===========================================================================
   Newsletter popup — two-column redesign (matches newsletter-mockup.png)
   =========================================================================== */
.popup--nl { padding: 1rem; }
.nl__card {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  width: min(960px, 100%);
  max-height: calc(100vh - 2rem);
  background: var(--white, #fff);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(14,16,19,.55);
}
.popup--nl:not([hidden]) .nl__card { animation: popup-in .24s var(--ease); }

.nl__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 8px;
}
.nl__x svg { width: 22px; height: 22px; }
.nl__x:hover { color: var(--red); background: rgba(14,16,19,.05); }

/* left media column */
.nl__media {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 2rem 1.6rem; background: var(--white, #fff);
  border-right: 1px solid var(--line, #e7e4df);
}
.nl__brand {
  align-self: flex-start;
  font-family: var(--display); font-weight: 800; color: var(--red);
  letter-spacing: .14em; text-transform: uppercase; font-size: .9rem;
}
.nl__shot { width: 100%; max-width: 330px; height: auto; object-fit: contain; }
.nl__flag {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--steel); letter-spacing: .12em; text-transform: uppercase;
  font-size: .68rem; font-weight: 600;
}
.nl__flag span { font-size: 1rem; }

/* right panel */
.nl__panel {
  display: flex; flex-direction: column;
  padding: 2.4rem 2.4rem 2rem;
  background: var(--paper, #f6f4ef);
  overflow: auto;
}
.nl__eyebrow {
  color: var(--red); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; font-size: .78rem; margin: 0 0 .5rem;
}
.nl__title {
  font-family: var(--body); font-weight: 800; color: var(--ink);
  text-transform: none; letter-spacing: -.02em;
  font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.02; margin: 0 0 .8rem;
}
.nl__sub { color: var(--steel); font-size: 1.02rem; line-height: 1.45; margin: 0 0 1.4rem; }

.nl__feats {
  display: flex; gap: 1.2rem; list-style: none; margin: 0 0 1.6rem; padding: 0;
  border-top: 1px solid var(--line, #e7e4df); border-bottom: 1px solid var(--line, #e7e4df);
  padding: 1rem 0;
}
.nl__feats li {
  display: flex; align-items: center; gap: .6rem; flex: 1;
  font-weight: 600; color: var(--ink); font-size: .92rem;
}
.nl__feats li + li { border-left: 1px solid var(--line, #e7e4df); padding-left: 1.2rem; }
.nl__ico { width: 34px; height: 34px; color: var(--red); flex: none; }

.nl__form label { display: block; font-weight: 700; color: var(--ink); font-size: .9rem; margin: 0 0 .45rem; }
.nl__form input[type="email"] {
  width: 100%; padding: .95rem 1.1rem; font-size: 1rem;
  border: 1px solid var(--line-strong, #cfcac2); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.nl__form input[type="email"]:focus { border-color: var(--ink); outline: 3px solid var(--red); outline-offset: 2px; }
.nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.nl__submit {
  width: 100%; margin-top: .8rem; justify-content: center; gap: .6rem;
  padding: 1rem 1.2rem; font-size: 1.05rem;
  font-family: var(--body); font-weight: 700; text-transform: none; letter-spacing: 0;
  border-radius: 10px;
}
.nl__status { font-size: .85rem; color: var(--red); margin: .6rem 0 0; min-height: 0; }
.nl__note { text-align: center; color: var(--steel); font-size: .82rem; margin: .9rem 0 .4rem; }
.nl__decline {
  display: block; margin: 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--steel); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}
.nl__decline:hover { color: var(--ink); }

@media (max-width: 720px) {
  .nl__card { grid-template-columns: 1fr; }
  .nl__media { display: none; }
  .nl__panel { padding: 2.4rem 1.5rem 1.8rem; }
  .nl__feats { flex-direction: column; gap: 0; }
  .nl__feats li + li { border-left: 0; border-top: 1px solid var(--line, #e7e4df); padding-left: 0; padding-top: .8rem; margin-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .popup--nl:not([hidden]) .nl__card { animation: none; } }