/* ==========================================================================
   FilterXpert public website — brand stylesheet
   --------------------------------------------------------------------------
   Plain CSS on purpose. The approved design was prototyped with the Tailwind
   CDN, but a marketing site lives or dies on how fast Google sees it, and a
   render-blocking CDN script is the wrong first thing to load. Same tokens as
   the product (frontend/shared/theme.css and the filterxpert-website skill),
   expressed the way this codebase actually ships: static files, no build step.

   Two gradients, two jobs, never blurred:
     --grad-brand  (blue to cyan)  = primary action / this is the brand
     --grad-good   (emerald)       = positive / verified / active
   Everything else stays neutral zinc/slate so those two keep their meaning.
   ========================================================================== */

:root{
  --blue-600:#2563eb; --blue-500:#3b82f6; --cyan-500:#06b6d4; --cyan-600:#0891b2;
  --emerald-600:#059669; --teal-600:#0d9488;
  --ink:#18181b;            /* zinc-900, headings           */
  --ink-soft:#3f3f46;       /* zinc-700, strong body        */
  --muted:#71717a;          /* zinc-500, supporting copy    */
  --faint:#a1a1aa;          /* zinc-400, labels             */
  --line:#e4e4e7;           /* zinc-200, borders            */
  --line-soft:#f4f4f5;      /* zinc-100                     */
  --paper:#ffffff;
  --wash:#f8fafc;           /* slate-50, section grounds    */
  --blue-wash:#eff6ff;      /* blue-50                      */
  --emerald-wash:#ecfdf5;   /* emerald-50                   */
  --amber:#fbbf24;
  --grad-brand:linear-gradient(90deg,var(--blue-600),var(--cyan-600));
  --grad-brand-br:linear-gradient(135deg,var(--blue-600),var(--blue-500),var(--cyan-500));
  --grad-good:linear-gradient(90deg,var(--emerald-600),var(--teal-600));
  --shadow-sm:0 2px 12px -4px rgba(37,99,235,.18);
  --shadow-card:0 12px 36px -28px rgba(15,23,42,.22);
  --shadow-lift:0 22px 50px -32px rgba(15,23,42,.35);
  --r-sm:12px; --r:16px; --r-lg:24px; --r-xl:28px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.12;font-weight:700;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,52px);letter-spacing:-.03em}
h2{font-size:clamp(24px,3.4vw,36px)}
h3{font-size:19px}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600);
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font:600 15px/1 var(--font);padding:14px 22px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:0 10px 28px -8px rgba(37,99,235,.4)}
.btn-ghost{background:#fff;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-500);color:var(--blue-600)}
.btn-good{background:var(--grad-good);color:#fff}
.btn-lg{padding:16px 28px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:default}

/* ---- pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;padding:6px 13px;
}
.pill-brand{background:var(--blue-wash);color:#1d4ed8}
.pill-good{background:var(--emerald-wash);color:#047857}
.dot{width:8px;height:8px;border-radius:999px;background:var(--grad-brand);position:relative}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;background:var(--grad-brand-br);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:16px;
  box-shadow:0 8px 20px -6px rgba(37,99,235,.45);flex:none;
}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.05}
.brand-tag{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.nav{display:none;gap:26px;font-size:14px;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:12px}
.header-phone{display:none;font-weight:700;font-size:14px;color:var(--ink-soft)}
@media(min-width:820px){ .nav{display:flex} .header-phone{display:inline} }

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% -20%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(700px 380px at 92% 8%, rgba(6,182,212,.12), transparent 50%),
    linear-gradient(105deg,#fff 0%,#f8fafc 45%,#eff6ff 100%);
}
.hero .wrap{padding-top:64px;padding-bottom:64px}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.15fr .85fr} }
.hero h1{margin-top:20px}
.hero .grad{background:var(--grad-brand-br);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:16px;max-width:30em;font-size:clamp(15px,1.6vw,17px);color:var(--muted);font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* the little "how water gets clean" card */
.spec-card{
  background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-lift);backdrop-filter:blur(8px);
}
.spec-steps{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:18px}
.spec-step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1}
.spec-ico{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:19px}
.spec-arrow{color:var(--faint);font-size:14px}
.spec-label{font-size:11px;font-weight:600;color:var(--muted)}

/* ---- generic sections ---- */
.section{padding:64px 0}
.section-wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:34em;margin-bottom:36px}
.section-head h2{margin-top:12px}
.section-head p{margin-top:12px;color:var(--muted)}

/* ---- cards grid ---- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .grid-3{grid-template-columns:1fr 1fr 1fr} .grid-4{grid-template-columns:repeat(4,1fr)} }
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--shadow-card);
}
.card-ico{width:48px;height:48px;border-radius:14px;background:var(--grad-brand-br);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:14px;color:var(--blue-600)}

/* "Why FilterXpert" - every tile is a positive assurance, so the badges take
   the emerald gradient (--grad-good = positive/verified), and the brand
   gradient stays where it belongs: on the section's primary CTA. */
.card-ico.good{background:var(--grad-good)}
.cta-nudge{text-align:center;color:var(--muted);margin-top:38px;font-size:15.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:16px}

/* "How we work" explainer - reading page, so the copy gets a real measure,
   and each promise ends in an emerald callout: the one thing YOU can do.
   Emerald on its tinted wash = the positive colour doing its stated job. */
.prose{max-width:44em}
.prose p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;margin-top:14px}
.you-can{display:flex;gap:10px;align-items:flex-start;max-width:44em;margin-top:22px;
  background:var(--emerald-wash);border:1px solid #a7f3d0;border-radius:var(--r);
  padding:13px 16px;font-size:14.5px;color:#047857;font-weight:500}
.you-can .k{flex:none}

/* trust row */
.trust{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(min-width:820px){ .trust{grid-template-columns:repeat(4,1fr)} }
.trust-item{display:flex;flex-direction:column;gap:4px}
.trust-num{font-size:26px;font-weight:800;letter-spacing:-.02em}
.trust-lbl{font-size:13px;color:var(--muted);font-weight:500}

/* ---- the conversational lead form ---- */
.leadwrap{background:var(--grad-brand-br);border-radius:var(--r-xl);padding:clamp(20px,4vw,44px);box-shadow:var(--shadow-lift)}
.leadwrap .eyebrow{color:rgba(255,255,255,.85)}
.leadwrap h2{color:#fff}
.leadwrap .lead-intro{color:rgba(255,255,255,.9);margin-top:10px}
.lead-card{background:#fff;border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);margin-top:24px;box-shadow:var(--shadow-card)}
.lead-progress{height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-bottom:22px}
.lead-bar{height:100%;width:20%;background:var(--grad-brand);border-radius:999px;transition:width .35s ease}
.lead-step{display:none}
.lead-step.on{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lead-q{font-size:20px;font-weight:700;letter-spacing:-.02em}
.lead-hint{color:var(--muted);font-size:14px;margin-top:6px}
.choices{display:grid;gap:10px;margin-top:18px}
@media(min-width:520px){ .choices.two{grid-template-columns:1fr 1fr} }
.choice{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:15px 16px;cursor:pointer;
  font:600 15px/1.3 var(--font);color:var(--ink-soft);transition:border-color .15s,background .15s,transform .1s;
}
.choice:hover{border-color:var(--blue-500)}
.choice:active{transform:translateY(1px)}
.choice.sel{border-color:var(--blue-600);background:var(--blue-wash);color:#1d4ed8}
.choice .c-ico{font-size:20px;flex:none}
.field{margin-top:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 15px;font:500 15px/1.4 var(--font);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;background:#fff;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 4px var(--blue-wash)}
.lead-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.lead-back{background:none;border:none;color:var(--muted);font:600 14px var(--font);cursor:pointer;padding:8px 4px}
.lead-back:hover{color:var(--ink)}
.lead-msg{font-size:14px;margin-top:10px;font-weight:500}
.lead-msg.err{color:#b91c1c}
.lead-done{text-align:center;padding:14px 0}
.lead-done .tick{width:64px;height:64px;border-radius:999px;background:var(--grad-good);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto 16px}
.lead-done h3{font-size:22px}
.lead-done .ref{display:inline-block;margin-top:12px;font-weight:700;background:var(--emerald-wash);color:#047857;border-radius:999px;padding:6px 16px;font-size:14px}

/* ---- FAQ accordion ---- */
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:none;text-align:left;padding:18px 20px;font:700 16px var(--font);color:var(--ink);cursor:pointer}
.faq-chev{width:30px;height:30px;border-radius:999px;background:var(--line-soft);display:grid;place-items:center;flex:none;transition:transform .25s,background .25s,color .25s;color:var(--muted)}
.faq-item.open .faq-chev{transform:rotate(180deg);background:var(--grad-brand);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:15px}
.faq-a > div{padding:0 20px 20px}

/* ---- branch strip / branch page ---- */
.branch-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card)}
.branch-card h3{display:flex;align-items:center;gap:10px}
.branch-meta{margin-top:14px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-soft)}
.branch-meta .row{display:flex;gap:10px;align-items:flex-start}
.branch-meta .k{color:var(--faint);flex:none;width:22px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}

/* ---- footer ---- */
.site-footer{background:#0b1220;color:#cbd5e1;padding:52px 0 30px;margin-top:8px}
.site-footer a{color:#cbd5e1}
.site-footer a:hover{color:#fff}
.foot-grid{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:720px){ .foot-grid{grid-template-columns:2fr 1fr 1fr} }
.foot-brand .brand-name{color:#fff}
.foot-brand p{color:#94a3b8;font-size:14px;margin-top:12px;max-width:26em}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#64748b;margin:0 0 14px}
.foot-col a{display:block;font-size:14px;margin-bottom:10px;color:#cbd5e1}
.foot-legal{border-top:1px solid #1e293b;margin-top:36px;padding-top:20px;font-size:13px;color:#64748b;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* reveal-on-scroll (progressive; content is visible without JS) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---- "we service every brand": two reels ----------------------------------
   Brand NAMES as uniform wordmarks, not copied logos - lawful to say we
   service them, and no trademarked artwork on the page. The disclaimer scrolls
   the other way underneath, on the amber band the design system reserves for
   "read this". Both pause on hover, and reduced-motion turns each reel into a
   plain wrapped list that anyone can read at rest. The tracks carry the list
   twice so translateX(-50%) loops without a visible seam. */
.brandwall{position:relative;overflow:hidden;margin-top:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brandwall-track{display:flex;align-items:center;gap:14px;width:max-content;
  padding:10px 0;animation:brand-scroll 48s linear infinite}
.brandwall:hover .brandwall-track{animation-play-state:paused}
.brand-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:128px;height:62px;padding:0 24px;border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:var(--shadow-card);
  font-weight:800;font-size:17px;letter-spacing:.01em;color:#3f3f46;white-space:nowrap;filter:grayscale(1)}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.disc-reel{overflow:hidden;margin-top:16px;background:#fffbeb;
  border-top:1px solid #fde68a;border-bottom:1px solid #fde68a;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.disc-reel-track{display:flex;gap:64px;width:max-content;padding:9px 0;
  animation:brand-scroll 64s linear infinite reverse;
  font-size:12.5px;font-weight:600;color:#92400e;white-space:nowrap;letter-spacing:.01em}
.disc-reel:hover .disc-reel-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .brandwall-track,.disc-reel-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:12px}
}

/* ---- Google reviews on branch pages ---- */
.stars{color:var(--amber);font-size:15px;letter-spacing:2px;white-space:nowrap}
.stars-off{color:var(--line)}
.rev-card{display:flex;flex-direction:column;gap:8px}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rev-text{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}