/* ==========================================================================
   Granite Well & Pump — design system
   Technical and dependable. Distinct from every other site in the portfolio:
   condensed sans display (Barlow Semi Condensed), granite/aquifer palette,
   a persistent EMERGENCY STRIP above every page, and a two-track homepage
   (emergency path vs. planning path) that no other site uses.
   Red is reserved exclusively for genuine urgency — never for decoration.
   Served immutable for a year, so build.py links it as /style.css?v=<hash>.
   ========================================================================== */

:root{
  --granite:#4A5459;       /* ink */
  --granite-dk:#343C40;
  --granite-lt:#6E7A80;
  --aquifer:#2E86AB;       /* primary accent */
  --aquifer-dk:#22688A;
  --aquifer-lt:#5BA8C9;
  --alert:#C0392B;         /* EMERGENCY ONLY */
  --alert-dk:#9C2E22;
  --paper:#FDFDFD;
  --panel:#EEF3F5;
  --rule:#D3DCE0;
  --ink:var(--granite);
  --muted:#7E8A90;
  --white:#FFFFFF;
  --radius:6px;            /* rounded cards, per spec */
  --shadow:0 1px 2px rgba(74,84,89,.08), 0 8px 20px -14px rgba(74,84,89,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--aquifer-dk); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--alert)}
h1,h2,h3{font-family:"Barlow Semi Condensed",Arial Narrow,sans-serif; font-weight:700;
  line-height:1.1; letter-spacing:.005em; margin:0 0 .5em; color:var(--granite-dk)}
h1{font-size:clamp(2.3rem,5.4vw,3.8rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:0}
h3{font-size:1.25rem; font-weight:600}
p{margin:0 0 1rem}
strong{font-weight:600; color:var(--granite-dk)}
em{font-style:normal; color:var(--aquifer)}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px}

/* ---- header -------------------------------------------------------------- */
header{background:var(--granite-dk); color:var(--white); position:sticky; top:0; z-index:40}
.nav{max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:1.2rem; min-height:70px}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--white); text-decoration:none; flex:0 0 auto}
.logo .mark{width:38px; height:38px}
.logo .lt{font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:1.3rem;
  line-height:1; letter-spacing:.01em; text-transform:uppercase}
.logo .lt small{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--aquifer-lt); margin-top:.3rem}
.nav ul{list-style:none; display:flex; gap:1.05rem; margin:0 0 0 auto; padding:0; flex-wrap:wrap}
.nav ul a{color:#D5DEE2; text-decoration:none; font-size:.88rem; font-weight:500; white-space:nowrap}
.nav ul a:hover{color:var(--aquifer-lt)}
.call-btn{background:var(--aquifer); color:var(--white); font-weight:600; padding:.62rem 1.1rem;
  border-radius:var(--radius); text-decoration:none; font-size:.89rem; white-space:nowrap}
.call-btn:hover{background:var(--aquifer-lt); color:var(--white)}
.stripe{height:3px; background:var(--aquifer)}

/* ---- THE SIGNATURE: emergency strip -------------------------------------- */
.emergency-strip{background:var(--alert); color:#fff; font-size:.92rem; padding:.62rem 0}
.emergency-strip .wrap{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap}
.emergency-strip strong{color:#fff; font-family:"Barlow Semi Condensed",sans-serif;
  font-size:1.08rem; text-transform:uppercase; letter-spacing:.06em}
.emergency-strip a{color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.emergency-strip a:hover{color:#FFE2DE}
.emergency-strip .es-note{color:#F6CFCA; font-size:.84rem}
@media(max-width:700px){.emergency-strip .es-note{display:none}}

/* mobile nav */
.navtoggle{display:none}
.burger{display:none; margin-left:auto; cursor:pointer; padding:.5rem; color:var(--white)}
.burger span{display:block; width:24px; height:2px; background:currentColor; margin:5px 0; border-radius:2px}
@media(max-width:940px){
  .nav ul{display:none; order:3; width:100%; flex-direction:column; gap:0; margin:0; padding:.4rem 0 1rem}
  .nav ul li{border-top:1px solid #4C565B}
  .nav ul a{display:block; padding:.78rem .1rem; font-size:1rem}
  .burger{display:block}
  .navtoggle:checked ~ ul{display:flex}
  .nav{flex-wrap:wrap; padding-bottom:0; min-height:62px}
  .call-btn{order:2; margin-left:.4rem}
  .logo{flex:1 1 auto}
}

/* ---- hero ---------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--panel) 0%,var(--paper) 100%);
  padding:3.4rem 0 3rem; border-bottom:1px solid var(--rule)}
.hero h1{max-width:19ch}
.hero .lede{font-size:clamp(1.08rem,2vw,1.32rem); color:var(--granite-lt); max-width:60ch; margin-bottom:1.4rem}
.hero .kicker{display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--aquifer-dk); margin-bottom:.9rem}
.hero.split .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:2.6rem; align-items:center}
@media(max-width:880px){.hero.split .wrap{grid-template-columns:1fr; gap:1.8rem}}
.crumb{font-size:.82rem; color:var(--muted); margin-bottom:1rem; padding:0}
.crumb a{color:var(--aquifer-dk); text-decoration:none}
.crumb a:hover{color:var(--alert)}

/* ---- buttons ------------------------------------------------------------- */
.cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem}
.btn{display:inline-block; background:var(--aquifer); color:var(--white); font-weight:600;
  padding:.85rem 1.6rem; border-radius:var(--radius); text-decoration:none; font-size:1rem;
  border:2px solid var(--aquifer); cursor:pointer; font-family:"IBM Plex Sans",sans-serif}
.btn:hover{background:var(--aquifer-dk); border-color:var(--aquifer-dk); color:var(--white)}
.btn.ghost{background:transparent; color:var(--aquifer-dk); border-color:var(--rule)}
.btn.ghost:hover{background:var(--panel); color:var(--aquifer-dk); border-color:var(--aquifer)}
.btn.urgent{background:var(--alert); border-color:var(--alert)}
.btn.urgent:hover{background:var(--alert-dk); border-color:var(--alert-dk)}
.dark .btn.ghost{color:var(--white); border-color:#5E6A70}
.dark .btn.ghost:hover{border-color:var(--aquifer-lt); color:var(--aquifer-lt)}

/* ---- sections ------------------------------------------------------------ */
section{padding:3.4rem 0}
section.tight{padding:2rem 0}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--aquifer-dk); margin-bottom:.7rem;
  background:var(--panel); padding:.28rem .65rem; border-radius:var(--radius)}
.dark{background:var(--granite-dk); color:#CBD5DA}
.dark h2,.dark h3{color:var(--white)}
.dark p{color:#B8C4CA}
.dark .tag{color:var(--aquifer-lt); background:rgba(46,134,171,.18)}
.dark a:not(.btn):not(.call-btn){color:var(--aquifer-lt)}
.band{background:var(--panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}

/* ---- two-track homepage split (the other signature) ---------------------- */
.tracks{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:2rem 0; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow)}
@media(max-width:820px){.tracks{grid-template-columns:1fr}}
.track{padding:2rem 1.8rem}
.track.emergency{background:#FCF0EE; border-right:1px solid var(--rule)}
.track.planning{background:var(--white)}
@media(max-width:820px){.track.emergency{border-right:none; border-bottom:1px solid var(--rule)}}
.track h3{font-size:1.5rem; margin-bottom:.4rem}
.track.emergency h3{color:var(--alert-dk)}
.track.planning h3{color:var(--aquifer-dk)}
.track .track-label{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:.7rem; padding:.25rem .6rem; border-radius:var(--radius)}
.track.emergency .track-label{background:var(--alert); color:#fff}
.track.planning .track-label{background:var(--aquifer); color:#fff}
.track ul{list-style:none; padding:0; margin:1rem 0}
.track ul li{padding:.4rem 0 .4rem 1.4rem; position:relative; font-size:.96rem}
.track ul li:before{content:"›"; position:absolute; left:.2rem; top:.32rem; font-size:1.1rem; font-weight:700}
.track.emergency ul li:before{color:var(--alert)}
.track.planning ul li:before{color:var(--aquifer)}

/* ---- cards & grids ------------------------------------------------------- */
.grid{display:grid; gap:1.2rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid.c2,.grid.c3{grid-template-columns:1fr}}
.card{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card h3 a{text-decoration:none}
.card.tip{border-left:4px solid var(--aquifer); background:var(--panel); box-shadow:none}
.card.tip h3{color:var(--aquifer-dk); font-size:.98rem; text-transform:uppercase; letter-spacing:.08em}
.callout{border-left:4px solid var(--aquifer); background:var(--panel); padding:1.1rem 1.3rem;
  margin:1.6rem 0; border-radius:0 var(--radius) var(--radius) 0}
.callout.warn{border-left-color:var(--alert); background:#FCF0EE}
.callout.warn strong{color:var(--alert-dk)}

/* ---- lists --------------------------------------------------------------- */
ul.checks{list-style:none; padding:0; margin:1.2rem 0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:.55rem 1.5rem}
@media(max-width:760px){ul.checks{grid-template-columns:1fr}}
ul.checks li{padding-left:1.6rem; position:relative; font-size:.97rem}
ul.checks li:before{content:""; position:absolute; left:.1rem; top:.52em; width:8px; height:8px;
  border-radius:50%; background:var(--aquifer)}
.dark ul.checks li:before{background:var(--aquifer-lt)}
ul.towns{list-style:none; padding:0; margin:1rem 0; display:flex; flex-wrap:wrap; gap:.45rem}
ul.towns li a{display:inline-block; background:var(--white); border:1px solid var(--rule);
  border-radius:var(--radius); padding:.4rem .8rem; font-size:.9rem; text-decoration:none; color:var(--granite)}
ul.towns li a:hover{border-color:var(--aquifer); color:var(--aquifer-dk)}
.steps{counter-reset:s; list-style:none; padding:0; margin:1.5rem 0}
.steps li{counter-increment:s; position:relative; padding:0 0 1.4rem 3.2rem}
.steps li:before{content:counter(s); position:absolute; left:0; top:0; width:2.2rem; height:2.2rem;
  background:var(--aquifer); color:#fff; border-radius:var(--radius); display:grid; place-items:center;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:1.1rem}
.steps li h3{margin-bottom:.25rem}

/* ---- stats --------------------------------------------------------------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; margin:1.6rem 0}
@media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--white); padding:1.05rem .9rem; text-align:center}
.stat b{display:block; font-family:"Barlow Semi Condensed",sans-serif; font-size:1.18rem;
  color:var(--aquifer-dk); line-height:1.25}
.stat span{display:block; font-size:.75rem; color:var(--muted); margin-top:.3rem; line-height:1.35}

/* ---- details / FAQ ------------------------------------------------------- */
details{border-bottom:1px solid var(--rule); padding:.95rem 0}
details summary{cursor:pointer; font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  font-size:1.14rem; list-style:none; position:relative; padding-right:2rem; color:var(--granite-dk)}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+"; position:absolute; right:.3rem; top:-.05rem; color:var(--aquifer);
  font-size:1.4rem; font-weight:400; line-height:1; font-family:"IBM Plex Sans",sans-serif}
details[open] summary:after{content:"\2212"}
details p{margin:.7rem 0 0; color:var(--granite-lt)}

/* ---- tables -------------------------------------------------------------- */
.table-scroll{overflow-x:auto; margin:1.5rem 0; border:1px solid var(--rule); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:.93rem; background:var(--white)}
th,td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rule); vertical-align:top}
th{background:var(--granite-dk); color:var(--white); font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:600; font-size:.88rem; letter-spacing:.03em}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#F7FAFB}

/* ---- photos -------------------------------------------------------------- */
/* width/height attributes on <img> override aspect-ratio unless height is reset */
.feature-photo{margin:1.8rem 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--rule)}
.feature-photo img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.8rem 0}
@media(max-width:760px){.photo-pair{grid-template-columns:1fr}}
.photo-pair img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--rule)}
figure.shot-fig{margin:0}
figure.shot-fig figcaption{font-size:.83rem; color:var(--muted); margin-top:.45rem}

/* ---- well cross-section diagram ------------------------------------------ */
.wellcut{display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center; margin:1.6rem 0}
@media(max-width:860px){.wellcut{grid-template-columns:1fr}}
.wellcut img{margin:0 auto}
.wellcut-key{list-style:none; padding:0; margin:0}
.wellcut-key li{border-bottom:1px solid var(--rule); padding:.7rem 0}
.wellcut-key li:last-child{border-bottom:none}
.wellcut-key b{font-family:"Barlow Semi Condensed",sans-serif; display:block; font-size:1.05rem;
  color:var(--granite-dk)}
.wellcut-key span{font-size:.9rem; color:var(--granite-lt)}

/* ---- interactive tools --------------------------------------------------- */
.qc{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow)}
.qc h3{margin-top:0}
.qc .opt{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius); padding:.85rem 1.05rem; margin:.45rem 0; cursor:pointer; font-size:1rem;
  font-family:"IBM Plex Sans",sans-serif; color:var(--ink)}
.qc .opt:hover{border-color:var(--aquifer); background:var(--panel)}
.qc-result{margin-top:1.3rem; padding:1.3rem; border-radius:var(--radius); background:var(--panel);
  border-left:4px solid var(--aquifer)}
.qc-result.stop{background:#FCF0EE; border-left-color:var(--alert)}
.qc-result h4{font-family:"Barlow Semi Condensed",sans-serif; font-size:1.3rem; margin:0 0 .5rem;
  color:var(--granite-dk)}
.qc-result .urgency{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.26rem .65rem; border-radius:var(--radius); margin-bottom:.7rem}
.urgency.diy{background:#DCEBE0; color:#2E5A3A}
.urgency.soon{background:#FBEBCF; color:#7A5410}
.urgency.now{background:var(--alert); color:#fff}
.est{font-family:"Barlow Semi Condensed",sans-serif; font-size:2.3rem; color:var(--aquifer-dk); margin:.3rem 0}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.8rem 0}
@media(max-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:.72rem; text-align:center; cursor:pointer; font-size:.9rem; color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif; line-height:1.35}
.tile small{color:var(--muted); font-size:.77rem}
.tile:hover{border-color:var(--aquifer)}
.tile.on{border-color:var(--aquifer); background:var(--panel); color:var(--aquifer-dk); font-weight:600}
.tile.on small{color:var(--aquifer-dk)}
.slider-row{margin:1rem 0}
.slider-row label{display:flex; justify-content:space-between; font-size:.88rem; font-weight:600;
  margin-bottom:.45rem; color:var(--granite-dk)}
.slider-row output{font-family:"Barlow Semi Condensed",sans-serif; color:var(--aquifer-dk); font-size:1.15rem}
input[type=range]{width:100%; accent-color:var(--aquifer)}

/* ---- forms --------------------------------------------------------------- */
form{display:grid; gap:.9rem; max-width:620px; margin-top:1.3rem}
form label{display:block; font-size:.86rem; font-weight:600; margin-bottom:.3rem; color:#C7D2D7}
section:not(.dark) form label{color:var(--granite-dk)}
input,select,textarea{width:100%; padding:.72rem .85rem; border:1px solid #5E6A70; border-radius:var(--radius);
  background:var(--white); color:var(--ink); font-family:"IBM Plex Sans",sans-serif; font-size:1rem}
section:not(.dark) input,section:not(.dark) select,section:not(.dark) textarea{border-color:var(--rule)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aquifer); outline-offset:1px; border-color:var(--aquifer)}
form .btn{justify-self:start}
.form-trust{margin:.6rem 0 0}
.assurances{list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.32rem}
.assurances li{font-size:.89rem; padding-left:1.4rem; position:relative; color:#B8C4CA}
.assurances li:before{content:""; position:absolute; left:.1rem; top:.52em; width:8px; height:8px;
  border-radius:50%; background:var(--aquifer-lt)}
section:not(.dark) .assurances li{color:var(--granite-lt)}
section:not(.dark) .assurances li:before{background:var(--aquifer)}
.sla{font-size:.86rem; color:var(--aquifer-lt); font-weight:600}
section:not(.dark) .sla{color:var(--aquifer-dk)}
.form-consent{font-size:.78rem; color:#94A2A8; line-height:1.5}
section:not(.dark) .form-consent{color:var(--muted)}

/* ---- proof --------------------------------------------------------------- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.2rem}
@media(max-width:860px){.proof-grid{grid-template-columns:1fr}}
.proof-card{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:1.2rem}
.proof-stars{color:var(--aquifer); letter-spacing:.1em; font-size:.95rem}
.proof-card .quote{font-size:.96rem; margin:.5rem 0}
.proof-card .where{font-size:.84rem; color:var(--muted)}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--granite-dk); color:#AEBBC1; padding:3rem 0 1.5rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:2.2rem}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr}}
footer h3{color:var(--white); font-size:1rem; margin-bottom:.6rem}
footer p{font-size:.9rem; line-height:1.8}
footer a{color:#C7D2D7; text-decoration:none}
footer a:hover{color:var(--aquifer-lt); text-decoration:underline}
.fine{border-top:1px solid #4C565B; margin-top:2rem; padding-top:1.2rem; font-size:.8rem; color:#8A969C}

/* ---- sticky mobile CTA --------------------------------------------------- */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--granite-dk); border-top:2px solid var(--aquifer); padding:.6rem .8rem; gap:.6rem}
  .sticky-cta a{flex:1; text-align:center; background:var(--aquifer); color:#fff; font-weight:600;
    padding:.8rem; border-radius:var(--radius); text-decoration:none}
  .sticky-cta.two a:last-child{background:transparent; color:var(--white); border:1px solid #5E6A70}
  body{padding-bottom:4.5rem}
}

/* ---- print --------------------------------------------------------------- */
@media print{
  header,footer,.sticky-cta,.cta-row,form,.stripe,.emergency-strip{display:none}
  body{background:#fff; font-size:12pt}
  .hero{background:#fff; padding:0; border:none}
}