/* =========================================================================
   VISTA WATER SOLUTIONS — design system
   copper-on-navy, Fraunces / Hanken Grotesk / IBM Plex Mono, water-report motif
   ========================================================================= */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Fraunces';font-weight:500;font-style:normal;font-display:optional;src:url('/fonts/fraunces-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:optional;src:url('/fonts/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/hankengrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/hankengrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/hankengrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/hankengrotesk-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/ibmplexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/ibmplexmono-500.woff2') format('woff2')}

/* ---- tokens ---- */
:root{
  --ink:#0A2540; --ink-2:#0E3050; --ink-3:#13395f;
  --paper:#F3F5F3; --paper-2:#FBFAF7; --white:#fff;
  --copper:#C36A2D; --copper-2:#E08A4A;
  --water:#3E8FB8; --rust:#B4541F; --good:#3E7C5A;
  --text:#0A2540; --text-dim:#5B7186; --text-light:#7C8FA1;
  --line:rgba(10,37,64,.14); --line-2:rgba(10,37,64,.08); --line-light:rgba(255,255,255,.14);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem; --s-6:6rem;
  --radius:4px; --radius-lg:6px;
  --shadow:0 18px 50px rgba(10,37,64,.10);
  --shadow-lg:0 30px 70px rgba(10,37,64,.16);
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-body);background:var(--paper);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.015em}

/* ---- layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:var(--s-6) 0}
.eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--copper)}
.eyebrow.on-dark{color:var(--copper-2)}.eyebrow.on-dark::before{background:var(--copper-2)}
.section-head{max-width:40rem;margin-bottom:var(--s-4)}
.section-head h2{font-size:clamp(2rem,3.6vw,2.7rem);margin-bottom:14px}
.section-head p{color:var(--text-dim);font-size:1.08rem}

/* ---- buttons (must win the cascade in every context) ---- */
.btn{font-family:var(--font-body);font-weight:600;font-size:.98rem;text-decoration:none;padding:.92rem 1.5rem;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:var(--copper-2);transform:translateY(-1px)}
.btn-ghost{color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.nav a.btn-primary,.drawer a.btn-primary,.mobile-cta a.btn-primary{color:#fff}
.btn-ghost.on-dark{color:#fff;border-color:var(--line-light)}
.btn-ghost.on-dark:hover{border-color:#fff}

/* ---- skip link ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--copper);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff;border-bottom:1px solid var(--line-light)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.94rem}
.nav-links a:not(.btn):not(.phone){color:rgba(255,255,255,.82);text-decoration:none;transition:color .15s}
.nav-links a:not(.btn):not(.phone):hover{color:#fff}
.nav-links .phone{font-family:var(--font-mono);font-size:.84rem;color:#fff;text-decoration:none;border:1px solid var(--line-light);padding:.5rem .8rem;border-radius:var(--radius);transition:border-color .15s,color .15s}
.nav-links .phone:hover{border-color:var(--copper-2);color:var(--copper-2)}
.has-sub{position:relative}
.has-sub>span{cursor:default;color:rgba(255,255,255,.82)}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:.5rem;min-width:184px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:.55rem .7rem;border-radius:var(--radius);font-size:.9rem;color:var(--ink)!important;text-decoration:none}
.submenu a:hover{background:var(--paper)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:#fff}
.nav-toggle svg{width:26px;height:26px}

/* drawer (mobile) */
.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--ink);color:#fff;z-index:150;transform:translateX(100%);transition:transform .25s ease;padding:84px 26px 26px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer a{color:rgba(255,255,255,.9);text-decoration:none;padding:.8rem 0;border-bottom:1px solid var(--line-light);font-size:1.02rem}
.drawer a.btn-primary{border:0;margin-top:14px;text-align:center}
.drawer .sub-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-2);padding-top:16px}
.drawer-close{position:absolute;top:20px;right:22px;background:none;border:0;color:#fff;cursor:pointer}
.scrim{position:fixed;inset:0;background:rgba(5,18,32,.5);z-index:140;opacity:0;visibility:hidden;transition:opacity .25s}
.scrim.open{opacity:1;visibility:visible}

/* ---- hero ---- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 88% 14%, rgba(62,143,184,.20), transparent 55%),
  repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 88px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding:74px 28px 86px}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,5vw,3.7rem);line-height:1.04;letter-spacing:-.018em;margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--copper-2)}
.hero .sub{font-size:1.08rem;color:rgba(255,255,255,.8);max-width:33rem;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stats{display:flex;gap:30px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line-light);flex-wrap:wrap}
.stat .n{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1}
.stat .l{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:7px}

/* ---- water report card (signature) ---- */
.report{background:var(--paper-2);color:var(--text);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.report-head{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line)}
.report-head .t{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim)}
.report-head .badge{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:.32rem .6rem;border-radius:var(--radius)}
.report-cols{display:grid;grid-template-columns:1fr auto 1fr;padding:8px 22px 2px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.report-cols .r{text-align:right}
.report-cols .mid{width:42px}
.rrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 22px;border-top:1px solid var(--line)}
.rrow .name{font-weight:600;font-size:.92rem}
.rrow .name span{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase;margin-top:2px}
.rrow .arrow{width:42px;text-align:center;color:var(--text-light)}
.rrow .vals{display:flex;justify-content:space-between}
.val{font-family:var(--font-mono);font-size:.95rem;font-weight:500}
.val.bad{color:var(--rust)}.val.good{color:var(--good)}
.report-foot{padding:13px 22px;background:var(--ink);color:rgba(255,255,255,.85);font-size:.78rem;display:flex;align-items:center;gap:9px}
.report-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.report-note{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42);text-align:center;margin-top:13px}

/* ---- services ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:28px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.svc .ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:rgba(195,106,45,.1);color:var(--copper);margin-bottom:18px}
.svc .ico svg{width:24px;height:24px}
.svc h3{font-size:1.22rem;margin-bottom:8px}
.svc p{color:var(--text-dim);font-size:.96rem}

/* ---- difference (alt section on navy) ---- */
.diff{background:var(--ink);color:#fff}
.diff .section-head h2{color:#fff}
.diff .section-head p{color:rgba(255,255,255,.72)}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--radius-lg);overflow:hidden}
.diff-item{background:var(--ink);padding:30px 26px}
.diff-item .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--copper-2);margin-bottom:14px}
.diff-item h3{font-size:1.14rem;margin-bottom:8px;color:#fff}
.diff-item p{color:rgba(255,255,255,.72);font-size:.94rem}

/* ---- process ---- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding-top:26px;border-top:2px solid var(--line)}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-14px;left:0;font-family:var(--font-mono);font-size:.78rem;color:var(--copper);background:var(--paper);padding-right:10px}
.step h3{font-size:1.12rem;margin-bottom:8px}
.step p{color:var(--text-dim);font-size:.94rem}

/* ---- cta band ---- */
.cta-band{background:linear-gradient(100deg,var(--ink),var(--ink-3));color:#fff;text-align:center}
.cta-band h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.78);max-width:34rem;margin:0 auto 28px}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:start}
.contact-info h2{font-size:clamp(2rem,3.4vw,2.6rem);margin-bottom:14px}
.contact-info>p{color:var(--text-dim);margin-bottom:30px;max-width:30rem}
.cinfo{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line-2)}
.cinfo .ico{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:rgba(10,37,64,.06);color:var(--ink)}
.cinfo .ico svg{width:20px;height:20px}
.cinfo h3{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;font-weight:500}
.cinfo p,.cinfo a{font-size:1.02rem;color:var(--text);text-decoration:none}
.cinfo a:hover{color:var(--copper)}
.qform{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.qform h3{font-size:1.4rem;margin-bottom:6px}
.qform .lead{color:var(--text-dim);font-size:.95rem;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);color:var(--text)}
.field input:focus,.field textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper)}
.qform button{width:100%;margin-top:6px}
.form-status{margin-top:14px;font-size:.92rem;color:var(--good);min-height:1.2em}
.hp{position:absolute;left:-9999px}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#fff;padding:var(--s-5) 0 var(--s-3)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:var(--s-4);border-bottom:1px solid var(--line-light)}
.foot-brand img{height:42px;margin-bottom:16px}
.foot-brand p{color:rgba(255,255,255,.66);font-size:.92rem;max-width:24rem}
.foot-col h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-2);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;color:rgba(255,255,255,.78);text-decoration:none;padding:.32rem 0;font-size:.94rem}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px;flex-wrap:wrap;gap:12px}
.foot-bottom .legal{color:rgba(255,255,255,.5);font-size:.84rem}
.st-credit{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;color:#fff;opacity:.6;text-decoration:none;transition:color .2s ease,opacity .2s ease}
.st-credit:hover{opacity:1;color:#BFFF00}
.st-wm{font-weight:700}.st-wm u{color:#BFFF00;text-decoration:none}

/* ---- mobile cta bar ---- */
.mobile-cta{display:none}
@media(max-width:640px){
  .mobile-cta{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.55rem;background:var(--ink);border-top:1px solid var(--line-light)}
  .mobile-cta a{flex:1;text-align:center;padding:.85rem;border-radius:var(--radius);font-weight:600;text-decoration:none;font-size:.95rem}
  .mobile-cta a.call{color:#fff;border:1px solid var(--line-light)}
  .mobile-cta a.primary{background:var(--copper);color:#fff}
  body{padding-bottom:4.2rem}
}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(16px);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}}

/* ---- responsive ---- */
@media(max-width:980px){
  .svc-grid,.diff-grid{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(2,1fr);gap:30px 22px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding:50px 28px 60px}
  .report{max-width:440px}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .nav-links{display:none}
  .nav-toggle{display:block}
}
@media(max-width:560px){
  section{padding:var(--s-5) 0}
  .svc-grid,.diff-grid,.proc{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .stats{gap:22px}
}

/* ---- service-area pages ---- */
.area-intro{font-size:1.12rem;color:var(--text-dim);max-width:46rem;margin-bottom:var(--s-4)}
.area-split{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}
.area-split .body p{margin-bottom:14px;color:var(--text)}
.issues{display:grid;gap:14px}
.issue{display:flex;gap:14px;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:18px 20px}
.issue .ico{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:rgba(195,106,45,.1);color:var(--copper)}
.issue .ico svg{width:20px;height:20px}
.issue h3{font-size:1.04rem;margin-bottom:3px}
.issue p{font-size:.9rem;color:var(--text-dim)}
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-2)}
.town{font-family:var(--font-mono);font-size:.84rem;border:1px solid var(--line);border-radius:var(--radius);padding:.5rem .85rem;background:#fff;color:var(--ink)}
.svc-recap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc-recap a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.96rem;transition:border-color .15s,transform .15s}
.svc-recap a:hover{border-color:var(--copper);transform:translateY(-2px)}
.svc-recap a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper);flex:none}
@media(max-width:980px){.area-split{grid-template-columns:1fr;gap:30px}.svc-recap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-recap{grid-template-columns:1fr}}