:root{
    --ink:#16191c; --ink-soft:#3d4248; --paper:#f4f1ea; --paper-deep:#ebe6db;
    --line:#d2ccbf; --accent:#6b4f2e; --night:#1a232b; --night-text:#9fb0bb;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:300;letter-spacing:-.025em;line-height:1.1;}
  .serif{font-family:'Fraunces',serif;font-style:italic;font-weight:300;letter-spacing:-.01em;}
  .eyebrow{font-family:'Archivo';font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);}


  /* breadcrumb + hero */
  .ac-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
  .ac-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;}
  .ac-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,38,46,.40) 0%,rgba(28,38,46,.10) 38%,rgba(26,34,42,.74) 100%);}
  @media(max-width:600px){
    /* Water-filtration hero phone-portrait crop: weight horizontal to 66% to keep the pour and splash crown (the subject) framed; vertical stays 35% to match the desktop center 35% base. header.ac-hero img.bg is (0,2,2), beating the .ac-hero img.bg (0,2,1) base regardless of load order. Scrim left as-is (already the cool-blue, already eased). */
    header.ac-hero img.bg{ object-position:66% 35%; }
  }
  .ac-hero .inner{position:relative;padding-bottom:74px;width:100%;}
  .crumb{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:26px;}
  .crumb a{color:rgba(255,255,255,.7);text-decoration:none;}
  .crumb a:hover{color:#e8c79a;}
  .ac-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,3.4rem);max-width:16ch;margin-bottom:14px;}
  .ac-hero h1 em{font-family:'Fraunces';font-style:italic;color:#e8c79a;font-size:1.04em;}
  .ac-hero .sub{color:rgba(255,255,255,.9);font-size:1.2rem;max-width:48ch;margin-bottom:18px;}
  .ac-hero .servesline{color:rgba(255,255,255,.62);font-size:.92rem;letter-spacing:.04em;}
  .ac-hero .cta-row{margin-top:34px;display:flex;gap:18px;flex-wrap:wrap;}

  /* stat strip */
  .stats{background:var(--night);color:var(--night-text);padding:40px 0;}
  .stats .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
  /* Cells size to their own content so the justify-content:space-between above
     finally does something: the leftover width is shared out evenly, giving three
     equal gaps between the four stats. With flex:1 the cells filled the line, which
     left space-between inert and pooled all the slack inside whichever cell had the
     shortest subtitle. gap:30px stays as the minimum floor. This page only. */
  .stat{flex:0 1 auto;min-width:0;}
  .stat .n{font-family:'Archivo';font-weight:500;font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);color:#efe4d2;letter-spacing:-.03em;line-height:1;}
  .stat .t{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}
  /* Mobile guard. Once the cells are content-width, space-between would push a
     wrapped row of one or two stats out to opposite edges, which reads as broken.
     Below the estate breakpoint we go back to left-aligned wrapping with a 160px
     basis, which reproduces the pre-change stacking exactly: four across down to
     roughly 780px of content, then three, then two, then one, each row growing to
     fill its width rather than spreading to the edges. */
  @media(max-width:860px){
    .stats .row{justify-content:flex-start;}
    .stat{flex:1 1 160px;min-width:160px;}
  }

  /* method */
  .sec{padding:120px 0;}
  .sec-head{max-width:44ch;margin-bottom:60px;}
  .sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;}
  .sec-head h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .sec-head p{color:var(--ink-soft);font-size:1.1rem;}
  .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .m-card{border-top:1px solid var(--line);padding-top:24px;}
  .m-card .idx{font-family:'Fraunces';font-style:italic;color:var(--accent);font-size:.9rem;}
  .m-card h3{font-size:1.35rem;margin:8px 0 12px;}
  .m-card p{color:var(--ink-soft);font-size:1rem;max-width:46ch;}
  @media(max-width:760px){.method-grid{grid-template-columns:1fr;}}

  /* two-product split */
  .prod{background:var(--paper-deep);}
  .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px;}
  .prod-card{background:var(--paper);border:1px solid var(--line);padding:42px 40px;display:flex;flex-direction:column;}
  .prod-card .eyebrow{color:var(--accent);}
  .prod-card h3{font-size:1.7rem;margin:14px 0 6px;}
  .prod-card h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .prod-card .lead{color:var(--ink);font-size:1.02rem;margin-bottom:18px;}
  .prod-card ul{list-style:none;margin-top:4px;}
  .prod-card li{padding:9px 0;border-top:1px solid var(--line);font-size:.97rem;color:var(--ink-soft);}
  /* factual note under the two product cards. Same rule as assets/page-water.css,
     page-air.css, page-surfaces.css, page-surface-disinfection.css and
     page-residential-ac-cleaning.css, copied byte-identical, no new token. */
  .frontier{margin-top:26px;font-family:'Fraunces';font-style:italic;color:var(--ink-soft);font-size:.98rem;max-width:72ch;}
  @media(max-width:760px){.prod-grid{grid-template-columns:1fr;}}

  /* the difference - light contrast block */
  .diff{background:var(--paper);}
  .diff .eyebrow{color:var(--accent);}
  .diff h2{color:var(--ink);font-size:clamp(1.9rem,3.8vw,3rem);margin:18px 0;max-width:22ch;}
  .diff h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;}
  .compare>div{background:var(--paper);padding:38px 36px;}
  .compare .them{background:var(--paper-deep);}
  .compare h4{font-family:'Archivo';font-weight:600;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px;}
  .compare .them h4{color:var(--ink-soft);}
  .compare .us h4{color:var(--accent);}
  .compare .us h4::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px;}
  .compare ul{list-style:none;}
  .compare li{padding:11px 0;border-top:1px solid var(--line);font-size:.98rem;color:var(--ink-soft);}
  .compare .us li{color:var(--ink);}
  @media(max-width:680px){.compare{grid-template-columns:1fr;}}

  /* process steps */
  .steps{counter-reset:step;}
  .step-row{display:grid;grid-template-columns:80px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line);}
  .step-row .num{font-family:'Fraunces';font-style:italic;font-size:2.2rem;color:var(--accent);line-height:1;}
  .step-row h3{font-size:1.4rem;margin-bottom:8px;}
  .step-row p{color:var(--ink-soft);max-width:54ch;}

  /* next steps */
  .nextstep{background:var(--paper-deep);}
  .next-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .next-card{background:var(--paper);border:1px solid var(--line);padding:40px 38px;display:flex;flex-direction:column;}
  .next-card .eyebrow{color:var(--accent);}
  .next-card h3{font-size:1.6rem;margin:14px 0;}
  .next-card h3 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .next-card p{color:var(--ink-soft);flex-grow:1;}
  .next-card a{margin-top:20px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;}
  @media(max-width:760px){.next-grid{grid-template-columns:1fr;}}

  /* FAQ — native details/summary, no JS */
  .faq{padding:120px 0;border-top:1px solid var(--line);}
  .faq .eyebrow{color:var(--accent);}
  .faq h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:18px 0;max-width:24ch;}
  .faq h2 em{font-family:'Fraunces';font-style:italic;color:var(--accent);}
  .faq-list{margin-top:2.5rem;border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;font-family:'Archivo',sans-serif;font-weight:500;color:var(--ink);font-size:1.125rem;}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::after{content:'+';position:absolute;right:0;top:1.35rem;color:var(--accent);font-size:1.5rem;font-weight:300;line-height:1;}
  .faq-item[open] .faq-q::after{content:'\2013';}
  .faq-a{padding:0 0 1.75rem;color:var(--ink-soft);max-width:65ch;}
  .faq-a p{margin:0;}

  /* CTA */
  .final{background:var(--night);color:var(--night-text);text-align:center;padding:120px 0;}
  .final .eyebrow{color:#cbab78;}
  .final h2{color:#efe4d2;font-size:clamp(2rem,4.4vw,3.4rem);margin:22px auto;max-width:22ch;}
  .final h2 em{font-family:'Fraunces';font-style:italic;color:#e0c79a;}
  .final p{color:#a89c84;max-width:46ch;margin:0 auto 36px;}


  .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
/* ---------------------------------------------------------------------------
   REMINERALIZATION additions.
   The base of this sheet is a donor copy of page-water-filtration-system.css
   (hero, stat strip, .steps, .faq, .nextstep cross-band, .final, .servesline).
   The two blocks below are lifted VERBATIM from page-water.css, which is the
   only water sheet that defines them, because this page needs both the numbered
   .steps component (filtration sheet) and the citation + references components
   (hub sheet). No new design language, no new hex beyond the existing tokens
   and the one #c9a673 already present in the donor rule.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   LAYOUT ROUND 2, 2026-08-18. Two real defects, both from this page's copy being
   longer than the donor page's, not from any missing port: every selector the
   filtration sheet defines is already present above.
   =========================================================================== */

/* (1) STAT STRIP WRAPPED ONTO A SECOND ROW.
   The donor sets .stat{flex:0 1 auto} with no cap on .t, which is fine for its own
   chips ("technology", "Approved for UAE") but this page's chip descriptions run
   44 to 65 characters, so four content-sized cells overflow .wrap and flex-wrap
   pushed "Near zero" and "Measured" down. The hub sheet already solved exactly
   this for its own long chip text; these four declarations are that solution,
   ported verbatim from page-water.css lines 43 and 45.
   flex:1 makes the four cells share the row equally regardless of text length, and the
   24ch cap keeps each description inside its share. flex-wrap stays as the donor set it,
   so narrow viewports still wrap rather than overflow. */
.stat{flex:1;min-width:170px;}
.stat .t{letter-spacing:.08em;margin-top:10px;max-width:24ch;}

/* (2) BODY PROSE READ AS A 44ch RIBBON.
   .sec-head is a heading block, capped at 44ch in all three water sheets, and the
   siblings only ever put an eyebrow, an h2 and one short lead line in it: their
   substance lives in .svc-grid / .flow / .steps / .caps-grid. This page's deck
   supplies multi-paragraph body copy, which had been placed inside .sec-head and
   so inherited that 44ch cap. .remin-prose gives that copy the estate's own
   article measure and type, taken verbatim from .lr-artcol / .lr-artcol p in
   page-larsen.css (66ch, 1.12rem, 1.8), which is the house treatment for running
   prose. No new scale, no new hex. Inline links keep the global .sec p a rule. */
.remin-prose{max-width:66ch;}
.remin-prose p{color:var(--ink-soft);font-size:1.12rem;line-height:1.8;margin-bottom:1.2em;}
.remin-prose p:last-child{margin-bottom:0;}
/* NB round 2 added .sec-head.lead-only{margin-bottom:26px} for the stacked
   heading-then-prose arrangement. Round 3 replaced that with .remin-split, which sets
   the rail's margin itself, so the rule is removed rather than left as dead CSS. */

/* ===========================================================================
   STYLE ELEVATION ROUND 3, 2026-08-18.
   =========================================================================== */

/* (3) PROSE SECTIONS NOW FILL THE WIDTH: heading rail left, running prose right.
   Recorded honestly: NO existing estate page uses a heading-left / prose-right
   split. The nearest house precedent is .oli-grid in page-water.css, which is a
   two-column section at gap:60px with prose on one side and a VISUAL on the other
   (.dial). There is no visual asset for these three sections, so the right column
   takes the prose and the left becomes the heading rail. The gutter (60px) is
   .oli-grid's; the 40/60 ratio is the work-order's specified 38-40% / 56-60%.
   Resolved at the 1100px .wrap content width: rail 416px, prose 624px, which keeps
   the 66ch measure intact with room to spare. align-items:start (not .oli-grid's
   center) because a heading rail must top-align to its prose.
   Collapses at 1024px, earlier than .oli-grid's 760px, because a text-only rail
   below roughly 350px reads broken where a dial still works. */
.remin-split{display:grid;grid-template-columns:.4fr .6fr;gap:60px;align-items:start;}
.remin-split .sec-head{max-width:none;margin-bottom:0;}
.remin-split .remin-prose{max-width:66ch;}
@media(max-width:1024px){
  .remin-split{grid-template-columns:1fr;gap:34px;}
}

/* (2) CROSS-BAND CARDS: the component itself is already byte-identical to the
   filtration sheet above (full border, padding:40px 38px, flex column, p{flex-grow:1}
   for equal height). The one genuine gap is the link hover, which the filtration
   donor omits but page-air, page-the-lab, page-surfaces and page-water all carry.
   Ported from page-water.css line 139. */
.next-card a:hover{text-decoration:underline;}

/* citation markers, from page-water.css */
sup.cite{font-family:'Archivo';font-weight:500;font-size:.62em;line-height:0;vertical-align:super;}
sup.cite a{color:var(--accent);text-decoration:none;padding:0 1px;}
sup.cite a:hover{text-decoration:underline;}
.stat .t sup.cite a{color:#c9a673;}

/* Closing line under the i-iv methods comparison. The donor filtration page has no line
   after its .steps block, so there is no donor rule to copy. This mirrors the existing
   .step-row p / .sec-head p treatment exactly (same token, same soft ink) and only adds
   the top rule that separates it from the last step. */
.steps-close{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:1.1rem;max-width:64ch;}

/* Contact line inside the dark .final band. .servesline is scoped to .ac-hero and the
   termite sheet's .tc-contactline uses a light-background ink colour, so neither applies
   here. This reuses #a89c84, already the .final p colour in this sheet: no new hex. */
.final .contactline{margin:26px auto 0;max-width:none;color:#a89c84;font-size:.95rem;letter-spacing:.02em;}

/* references & standards block, from page-water.css */
.refs{background:var(--paper-deep);padding:70px 0;}
.refs .eyebrow{margin-bottom:26px;}
.refs ol{margin:0;padding-left:22px;max-width:94ch;}
.refs li{font-size:.82rem;color:var(--ink-soft);line-height:1.6;margin-bottom:14px;}
.refs li b{color:var(--ink);font-weight:500;}
.refs a{color:var(--accent);text-decoration:none;}
.refs a:hover{text-decoration:underline;}
.refs .note{margin-top:26px;font-family:'Fraunces';font-style:italic;font-size:.86rem;color:var(--ink-soft);max-width:80ch;}