@charset "UTF-8";
/* LEGACY CONTROLS v10 - 2026-08-25 */

/* ---------------------------------------------------------------------------
   Deliberately NOT the Wastewater Developments design system. Different type
   family, different palette, different page furniture. Two sites in the same
   trade that share a typeface read as the same shop no matter how careful the
   words are, so the separation starts here.
   Line 1 is @charset. Line 2 is the version marker. Same house rule as WD:
   any CSS or JS change bumps the marker AND every page's ?v=.
--------------------------------------------------------------------------- */

:root{
  --jet:#0E0F12;          /* near-black ground */
  --jet-2:#17191E;        /* raised surface on dark */
  --flame:#F26522;        /* the orange */
  --ember:#C2410C;        /* pressed / hover */
  --cream:#FFF6EE;        /* warm callout, straight off the manuals */
  --paper:#F5F6F8;        /* light band */
  --steel:#61697A;        /* muted text */
  --steel-2:#8A93A3;      /* muted on dark */
  --hair:#E2E5EA;
  --hair-dark:#2A2E36;
  --ok:#15803D; --warn:#B45309; --bad:#B91C1C;

  --s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem; --s-6:3rem; --s-7:4rem; --s-8:6rem;
  --radius:4px;           /* squarer than WD on purpose - reads like equipment */
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cond:"Barlow Condensed",var(--body);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:76rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--jet);font:400 17px/1.65 var(--body);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember);text-underline-offset:3px}
[hidden]{display:none!important}

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

/* ---------- bands ---------- */
.band{padding:var(--s-7) 0}
.band--paper{background:var(--paper)}
.band--jet{background:var(--jet);color:#fff}
.band--jet h2,.band--jet h3{color:#fff}
.band--jet .lede{color:var(--steel-2)}
.band--flame{background:var(--flame);color:var(--jet)}
/* Text on the orange band is JET, not white. Measured: white on #F26522 is 3.15:1,
   which fails WCAG AA for body text and looks washed out in daylight on a phone;
   #0E0F12 on the same orange is 6.08:1. The band is the loudest thing on the page,
   so it has to be the most readable, not the least. */
.band--flame h2,.band--flame h3,.band--flame a,.band--flame .eyebrow{color:var(--jet)}
.band--flame .lede{color:var(--jet)}
.band--tight{padding:var(--s-5) 0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--cond);font-weight:600;line-height:1.08;
            letter-spacing:-.01em;margin:0 0 var(--s-3)}
h1{font-size:clamp(2.4rem,6vw,4rem);text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);text-transform:uppercase}
h3{font-size:1.22rem}
p{margin:0 0 var(--s-3)}
.lede{font-size:1.13rem;color:var(--steel);max-width:56ch}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
         text-transform:uppercase;color:var(--flame);margin-bottom:var(--s-2)}
.eyebrow--dark{color:var(--ember)}
.rule{height:3px;width:3.5rem;background:var(--flame);margin:0 0 var(--s-4)}

/* ---------- header ---------- */
.site-header{background:var(--jet);position:sticky;top:0;z-index:50;
             border-bottom:1px solid var(--hair-dark)}
.site-header__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--s-4);
  display:flex;align-items:center;gap:var(--s-4);min-height:64px}
/* The wordmark is an SVG whose LEGACY paths use currentColor, so the colour is set
   here rather than in the file — one asset serves the black header and any light
   page. A thin flame underline and a slight lift on hover give it presence without
   decorating the mark itself. */
.brand{display:flex;align-items:center;text-decoration:none;color:#fff;padding:.35rem 0 .5rem;
       position:relative}
.brand__mark{width:clamp(160px,20vw,215px);height:auto;display:block}
.brand::after{content:"";position:absolute;left:0;bottom:.15rem;height:2px;width:0;
              background:var(--flame);transition:width .28s ease}
.brand:hover::after{width:100%}
.brand:hover .brand__mark{filter:drop-shadow(0 0 14px rgba(242,101,34,.45))}
.brand__mark{transition:filter .28s ease}
@media(max-width:860px){.brand__mark{width:150px}}
.nav{margin-left:auto;display:flex;gap:var(--s-4);align-items:center}
.nav a{color:#D7DBE2;text-decoration:none;font-size:.95rem;padding:.4rem 0;
       border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:#fff;border-bottom-color:var(--flame)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--hair-dark);
  color:#fff;font:inherit;font-size:.9rem;padding:.35rem .7rem;border-radius:var(--radius)}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--jet);
       flex-direction:column;align-items:stretch;gap:0;padding:var(--s-2) var(--s-4) var(--s-4);
       border-bottom:1px solid var(--hair-dark)}
  .nav[data-open="1"]{display:flex}
  .nav a{padding:.7rem 0;border-bottom:1px solid var(--hair-dark)}
}

/* ---------- hero ---------- */
.hero{background:var(--jet);color:#fff;padding:var(--s-8) 0 var(--s-7);position:relative;
      overflow:hidden}
/* Photographic hero. The image is a real build board, so it carries the page on its
   own — but text over a busy photograph is unreadable without help. Two layers do
   that work: a near-black wash over the whole frame, and a stronger gradient down
   the left where the headline sits. The image is set on ::before rather than on the
   element so the overlay can sit above it without a wrapper. */
/* PHOTO HERO — every knob is a custom property, so a page can set its own image
   AND its own treatment inline with no new CSS and no version bump. The defaults
   below are the original entry-6 treatment, so index.html is unchanged by this.
     --shot          the image
     --shot-opacity  how much photograph shows through the jet ground
     --shot-filter   grayscale / colour, contrast, saturation
     --shot-fade-0/1/2  the left-to-right darkening at 0%, 42% and 100%
   The fade exists to keep the headline readable. Lift --shot-opacity without
   holding --shot-fade-0 high and the text starts to fight the photograph — that
   is the trade, and it was checked by rendering, not guessed. */
.hero--shot::before{content:"";position:absolute;inset:0;
  background-image:var(--shot,url("images/hero-panel-build.webp"));
  background-size:cover;background-position:center;
  opacity:var(--shot-opacity,.42);
  filter:var(--shot-filter,grayscale(100%) contrast(108%))}
.hero--shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(14,15,18,var(--shot-fade-0,.94)) 0%,
    rgba(14,15,18,var(--shot-fade-1,.78)) 42%,
    rgba(14,15,18,var(--shot-fade-2,.35)) 100%)}
.hero--shot > *{position:relative;z-index:2}
.hero--shot .hero__rule{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--flame) 0 38%,var(--hair-dark) 38%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
             background:linear-gradient(90deg,var(--flame) 0 38%,var(--hair-dark) 38%)}
.hero h1{max-width:16ch}
.hero .lede{color:var(--steel-2);font-size:1.2rem;max-width:52ch}
.hero--shot .lede{color:var(--cream)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-6);align-items:center}
@media(max-width:860px){.hero__grid{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--cond);font-size:1.02rem;font-weight:600;
     text-transform:uppercase;letter-spacing:.06em;padding:.7rem 1.4rem;border-radius:var(--radius);
     text-decoration:none;border:2px solid transparent;cursor:pointer}
/* Same 3.15:1 problem as the orange band. Jet on flame is 6.08:1; on hover the
   background darkens to --ember, where WHITE is the readable one (5.18:1) and jet
   would drop to 3.7:1 — so the text colour flips with the background. */
.btn--primary{background:var(--flame);color:var(--jet)}
.btn--primary:hover{background:var(--ember);color:#fff}
.btn--ghost{border-color:#4A505C;color:#fff}
.btn--ghost:hover{border-color:var(--flame);color:var(--flame)}
.btn--outline{border-color:var(--jet);color:var(--jet)}
.btn--outline:hover{background:var(--jet);color:#fff}
.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:var(--s-4)}
.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:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
      padding:var(--s-4);border-top:3px solid var(--flame)}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--steel);font-size:.96rem;margin:0}
.card--dark{background:var(--jet-2);border-color:var(--hair-dark);color:#fff}
.card--dark p{color:var(--steel-2)}

/* ---------- OEM brand card (horizontal) ----------
   A partner's logo is their artwork, not ours: never recoloured, never put on a
   coloured wash, never squeezed into a tiny slot.
   WHY CREAM AND NOT WHITE: on the jet band a white card is louder than the logo
   inside it and reads as a sticker. Cream is the site's own warm callout colour,
   taken from the manuals, so the card belongs to this design system while still
   giving the mark the light ground it was drawn for — its dark green goes muddy on
   jet and its pale swirl greys out. Measured before choosing, not guessed.
   WHY HORIZONTAL: the logo is a tall swirl over a wordmark. In a tall card it
   floats in dead space; in a wide card, set beside its own description, it sits.
   The flame spine on the left edge is the callout's rule, reused so the card reads
   as part of the family rather than an import. */
.brandcard{display:grid;grid-template-columns:auto 1px 1fr;align-items:center;
  gap:var(--s-4);background:var(--cream);border:1px solid var(--hair);
  border-left:4px solid var(--flame);border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s-4) var(--s-5);text-decoration:none;color:var(--jet);
  transition:transform .18s ease,box-shadow .18s ease}
.brandcard:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.30)}
.brandcard__logo{width:clamp(170px,22vw,240px);height:auto;display:block}
.brandcard__div{background:var(--hair);align-self:stretch;margin:.4rem 0}
.brandcard__name{font-family:var(--cond);font-size:1.5rem;line-height:1.15;
  text-transform:none;margin:0 0 .4rem;color:var(--jet)}
.brandcard__what{color:var(--steel);font-size:.96rem;margin:0}
.brandcard__go{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;color:var(--ember);margin:.9rem 0 0}
.brandcard:hover .brandcard__go{color:var(--flame)}
/* On a phone the three columns become one and the divider is dropped: a 1px rule
   turned sideways is just a scar across the card. */
@media(max-width:760px){
  .brandcard{grid-template-columns:1fr;gap:var(--s-3);text-align:left}
  .brandcard__div{display:none}
  .brandcard__logo{width:min(240px,70%)}
}

/* Model badge — distinguishes panels whose titles are identical (two of the OEM
   panels are both "Aerobic Treatment Control Panel"). Mono uppercase, the house
   register for part numbers and designations. */
.badge{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .5rem;border-radius:3px;
  background:var(--flame);color:var(--jet);margin-bottom:.55rem}
.card--dark .doclist{color:var(--steel);font-family:var(--mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.85rem;padding-top:.7rem;
  border-top:1px solid var(--hair-dark)}

/* ---------- spec list ---------- */
.spec{border-top:2px solid var(--jet);margin:0}
.spec__row{display:flex;gap:var(--s-3);padding:.65rem 0;border-bottom:1px solid var(--hair)}
.spec__row dt{flex:0 0 14rem;margin:0;font-family:var(--mono);font-size:.78rem;
              letter-spacing:.06em;text-transform:uppercase;color:var(--steel);padding-top:.15rem}
.spec__row dd{margin:0;flex:1}
@media(max-width:600px){.spec__row{display:block}.spec__row dt{margin-bottom:.15rem}}

/* ---------- checks ---------- */
.checks{list-style:none;padding:0;margin:0 0 var(--s-3)}
.checks li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;color:var(--steel)}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
                   background:var(--flame)}
.band--jet .checks li{color:var(--steel-2)}

/* ---------- callout, straight off the manuals ---------- */
/* The callout OWNS its text colour. It has a light cream ground, so if it sits inside
   .band--jet it would otherwise inherit that band's white and render white-on-cream —
   invisible. That is exactly what happened on simplex.html and duplex.html, where the
   serviceability callout is the first callout ever placed on a dark band. Setting the
   colour here fixes it wherever a callout is put in future, rather than page by page. */
.callout{background:var(--cream);color:var(--jet);border-left:4px solid var(--flame);
         padding:var(--s-3) var(--s-4);
         border-radius:0 var(--radius) var(--radius) 0;margin:var(--s-4) 0}
.band--jet .callout{color:var(--jet)}
.callout strong{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--ember);margin-bottom:.3rem}
.callout p{margin:0;font-size:.97rem}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__n{font-family:var(--cond);font-size:2.4rem;font-weight:600;line-height:1;color:var(--flame)}
.stat__l{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
         color:var(--steel-2);margin-top:.35rem}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s-4)}}

/* ---------- footer ---------- */
.site-footer{background:var(--jet);color:var(--steel-2);padding:var(--s-6) 0 var(--s-4);
             font-size:.93rem}
.site-footer a{color:#D7DBE2;text-decoration:none}
.site-footer a:hover{color:var(--flame)}
.site-footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
                color:var(--flame);margin:0 0 var(--s-2)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-5)}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr;gap:var(--s-4)}}
.foot__list{list-style:none;padding:0;margin:0}
.foot__list li{margin-bottom:.4rem}
.foot__base{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--hair-dark);
            display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:.85rem}
.mark{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--steel-2)}

/* ---------- forms ---------- */
.field{margin-bottom:var(--s-3)}
.field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
             text-transform:uppercase;color:var(--steel);margin-bottom:.3rem}
.field input,.field textarea,.field select{width:100%;font:inherit;padding:.65rem .8rem;
  border:1px solid var(--hair);border-radius:var(--radius);background:#fff;color:var(--jet)}
.field input:focus,.field textarea:focus{outline:2px solid var(--flame);outline-offset:1px;
  border-color:var(--flame)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.table-note{font-size:.85rem;color:var(--steel)}