/* Self-hosted so no visitor request ever reaches a Google server. Variable
   fonts: Libre Baskerville wght 400-700, Source Sans 3 wght 200-900.
   latin-ext is unicode-range gated, so it only downloads if a page needs it. */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@charset "utf-8";
/* ==========================================================================
   CreekWell Plumbing & Water Treatment — site stylesheet
   Hand-written, no build step. Shared across every page so it caches once.

   Colour policy: the brand kit's raw palette has three WCAG failures
   (white on #B87333 = 3.79:1; #2EA8E8 on cream = 2.37:1; copper on teal
   = 2.17:1). The corrected values below keep the same hue and saturation
   and pass AA. Decorative uses of the raw brand colours are untouched.
   Measured ratios are in the comments.
   ========================================================================== */

:root {
  /* --- Teal ------------------------------------------------------------ */
  --teal:        #0F4B4F;   /* white on 9.81:1 · on cream 8.73:1 */
  --teal-hover:  #0C3D40;   /* white on 11.95:1 */
  --teal-active: #0A3335;   /* white on 13.66:1 */
  --teal-edge:   #06282B;   /* hard bottom shadow */

  /* --- Copper ---------------------------------------------------------- */
  --copper:        #A3662D; /* white on 4.67:1 ✓ AA · on cream 4.16:1 ✓ 1.4.11 */
  --copper-hover:  #915B28; /* white on 5.63:1 */
  --copper-active: #815124; /* white on 6.70:1 */
  --copper-edge:   #5E3A1A;
  --copper-line:   #B77333; /* rules, borders, accents — never text on cream */

  /* --- Neutrals & accents ---------------------------------------------- */
  --cream:      #F8F1E3;
  --limestone:  #EADDC4;
  --white:      #FFFDF8;
  --charcoal:   #26373A;   /* on cream 11.05:1 */
  --muted:      #4C5C60;   /* on cream 6.15:1 · on limestone 5.00:1 · on white 6.86:1 */
  --sandstone:  #C95A3F;   /* accent only — 3.72:1 on cream */
  --sand-dark:  #C15136;   /* error text / white on 4.67:1 */
  --pine:       #1F5D3A;
  --water-blue: #2EA8E8;   /* DECORATIVE ONLY — 2.37:1 on cream, never text */
  --link:       #0E5C86;   /* 6.46:1 on cream, 6.26:1 on the notice band */
  --link-hover: #0A4766;  /* darker than --link, so hover raises contrast */
  --rule:       #DDCDB2;   /* decorative hairlines ONLY — 1.39:1 */
  --edge:       #B08A55;   /* meaningful borders — 3.02:1 on cream ✓ 1.4.11 */

  /* --- Geometry & motion ------------------------------------------------ */
  --radius:      10px;
  --radius-card: 14px;
  --wrap:        1200px;
  --shadow-card: 0 12px 30px rgb(15 75 79 / 10%);
  --t-press: 130ms cubic-bezier(.2,0,.2,1);
  --t-color: 170ms ease-out;
}

/* ==========================================================================
   Base — 18px root. The customer base skews retirement age; this is
   deliberate and every size below is derived from it.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 9.5rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  color: var(--teal);
  line-height: 1.18;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.15rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.28rem; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
img, svg, picture { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--link-hover); }

strong, b { font-weight: 700; }
::selection { background: var(--limestone); color: var(--charcoal); }

/* Keyboard focus is never invisible, anywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A8492F;                       /* sandstone darkened — 4.53:1 on cream */
  margin-bottom: .7rem;
}
.lede { font-size: 1.16rem; color: var(--muted); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  background: var(--teal); color: var(--white);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; text-decoration: none;
  transition: top 140ms ease-out;
}
.skip-link:focus-visible, .skip-link:focus {
  top: 0; color: var(--white);
  /* the global focus ring is charcoal, which is 1.27:1 on this teal chip.
     Cream on teal is 9:1 and stays visible in forced-colors mode. */
  outline: 3px solid var(--cream); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--charcoal);
}

/* ==========================================================================
   BUTTONS — the "clay" system.
   Evidence (NN/g eyetracking, n=71): weak signifiers cost +22% time on task
   and +25% fixations. So every button is a physical object — a hard bottom
   edge, a cast shadow, a lit top face — and it depresses when pressed.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 58px;
  padding: 0 1.8rem;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .008em;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-color), box-shadow var(--t-press),
              transform var(--t-press), color var(--t-color);
}
.btn svg { width: 1.3em; height: 1.3em; flex: 0 0 auto; }
.btn-xl { min-height: 66px; font-size: 1.2rem; padding: 0 2.2rem; }
.btn-sm { min-height: 46px; font-size: .95rem; padding: 0 1.1rem; border-radius: 8px; }

/* Two-layer focus ring: one layer always carries 3:1, on any background. */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--charcoal);
}
/* Windows High Contrast discards box-shadow, so the ring has to be a real
   outline there or keyboard focus disappears entirely. */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .btn:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .card, .faq details { border: 1px solid CanvasText; }
}

/* --- Copper: the single highest-intent action on a surface -------------- */
.btn-call {
  background: var(--copper);
  color: #fff;
  box-shadow: 0 5px 0 var(--copper-edge), 0 11px 22px rgb(94 58 26 / 30%),
              inset 0 2px 3px rgb(255 255 255 / 22%);
}
@media (hover: hover) {
  .btn-call:hover {
    background: var(--copper-hover); color: #fff; transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--copper-edge), 0 15px 28px rgb(94 58 26 / 38%),
                inset 0 2px 3px rgb(255 255 255 / 26%);
  }
}
.btn-call:active {
  background: var(--copper-active); transform: translateY(4px);
  box-shadow: 0 1px 0 var(--copper-edge), 0 3px 8px rgb(94 58 26 / 26%),
              inset 0 2px 4px rgb(0 0 0 / 18%);
  transition-duration: 0ms;
}

/* --- Teal: strong secondary action -------------------------------------- */
.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 5px 0 var(--teal-edge), 0 11px 22px rgb(6 40 43 / 28%),
              inset 0 2px 3px rgb(255 255 255 / 18%);
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--teal-hover); color: #fff; transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--teal-edge), 0 15px 28px rgb(6 40 43 / 36%),
                inset 0 2px 3px rgb(255 255 255 / 22%);
  }
}
.btn-primary:active {
  background: var(--teal-active); transform: translateY(4px);
  box-shadow: 0 1px 0 var(--teal-edge), 0 3px 8px rgb(6 40 43 / 24%),
              inset 0 2px 4px rgb(0 0 0 / 18%);
  transition-duration: 0ms;
}

/* --- Outline: a real 2.5px boundary, never a ghost button --------------- */
.btn-secondary {
  background: var(--white);
  color: var(--teal);
  border: 2.5px solid var(--teal);
  box-shadow: 0 4px 0 rgb(15 75 79 / 34%), 0 8px 18px rgb(38 55 58 / 12%);
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--teal); color: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 0 rgb(15 75 79 / 42%), 0 12px 22px rgb(38 55 58 / 18%);
  }
}
.btn-secondary:active {
  background: var(--teal-active); color: #fff; border-color: var(--teal-active);
  transform: translateY(3px); box-shadow: 0 1px 0 rgb(15 75 79 / 42%);
  transition-duration: 0ms;
}

/* On dark ground the outline inverts so it never disappears */
.on-dark .btn-secondary {
  background: rgb(255 255 255 / 10%); color: var(--white); border-color: var(--white);
  box-shadow: 0 4px 0 rgb(0 0 0 / 30%), 0 8px 18px rgb(0 0 0 / 26%);
}
@media (hover: hover) {
  .on-dark .btn-secondary:hover { background: rgb(255 255 255 / 22%); color: var(--white); }
}
.on-dark .btn:focus-visible {
  box-shadow: 0 0 0 3px var(--teal), 0 0 0 6px var(--cream);
}

/* Text button — underline is not optional here */
.btn-text {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 48px; padding: .6rem .4rem;
  font-weight: 700; color: var(--link);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.btn-text:hover { color: var(--link-hover); text-decoration-thickness: 3px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
@media (max-width: 640px) {
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

.btn[aria-disabled="true"], .btn:disabled {
  background: #6B675F; color: var(--cream); border-color: #6B675F;
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* ==========================================================================
   Utility bar + header
   ========================================================================== */
.utility {
  background: var(--teal);
  color: var(--cream);
  font-size: .92rem;
  font-weight: 600;
}
.utility .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .55rem 0;
}
.utility a { color: var(--white); font-weight: 800; text-decoration: none; }
.utility a:hover { text-decoration: underline; }
.utility-phone { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; }
.utility-phone svg { width: 1.15em; height: 1.15em; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 14px rgb(38 55 58 / 7%);
}
.site-header .wrap {
  width: min(100% - 2.4rem, 1560px);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 1rem; padding: .6rem 0;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 268px; }
@media (max-width: 900px) { .brand img { width: 200px; } }

.nav { display: flex; align-items: center; gap: 1.05rem; flex-wrap: nowrap; }
/* Menu items are treated as buttons, not bare text. Two reasons beyond looks.
   (1) NN/g eyetracking (Moran 2017, n=71) found weak clickability signifiers
   cost +22% time-on-task and +25% fixations -- the extra looking is the user
   being unsure it is clickable, and a 3px underline that only appears after
   you are already hovering is about the weakest signifier there is.
   (2) Horizontal padding makes the hit area the whole pill rather than the
   glyphs, which matters for WCAG 2.2 SC 2.5.8 and for an audience where
   roughly half have arthritis. Rounded on top, square at the bottom so the
   copper underline still reads as an underline. */
.nav > a:not(.btn) {
  color: var(--teal); font-weight: 650; font-size: .98rem;
  text-decoration: none; padding: .55rem .72rem; border-bottom: 3px solid transparent;
  border-radius: 7px 7px 0 0;
  white-space: nowrap;
  transition: background-color var(--t-color), border-color var(--t-color), color var(--t-color);
}
@media (hover: hover) and (pointer: fine) {
  .nav > a:not(.btn):hover {
    background: rgb(15 75 79 / 9%);
    border-bottom-color: var(--copper); color: var(--teal-hover);
  }
}
.nav > a:not(.btn):active { background: rgb(15 75 79 / 16%); }
.nav > a[aria-current="page"]:not(.btn) {
  border-bottom-color: var(--copper); background: rgb(15 75 79 / 6%);
}
@media (forced-colors: active) {
  .nav > a:not(.btn):hover { background: Highlight; color: HighlightText; }
}
.nav .btn-call {
  white-space: nowrap; flex: 0 0 auto;
  color: #fff;                     /* explicit: the nav link rule must never win */
  font-size: .95rem; font-weight: 700;
}
.nav .btn-call:hover { color: #fff; }
@media (max-width: 1279px) { .nav { display: none; } }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  min-height: 50px; padding: 0 1rem;
  background: var(--white); color: var(--teal);
  border: 2.5px solid var(--teal); border-radius: var(--radius);
  font: inherit; font-weight: 700; cursor: pointer;
}
@media (max-width: 1279px) { .nav-toggle { display: inline-flex; } }

.mobile-nav { display: none; border-top: 1px solid var(--rule); background: var(--cream); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: .6rem 0 1.2rem; }
.mobile-nav a {
  display: block; padding: .95rem .8rem; font-size: 1.05rem; font-weight: 650;
  color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--rule);
  border-left: 4px solid transparent; border-radius: 0 8px 8px 0;
  transition: background-color var(--t-color), border-left-color var(--t-color);
}
/* The drawer is touch-first, so :active carries the feedback -- :hover never
   fires on a phone, and when it does fire it sticks after the tap. */
.mobile-nav a:active,
.mobile-nav a[aria-current="page"] {
  background: rgb(15 75 79 / 8%); border-left-color: var(--copper);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav a:hover { background: rgb(15 75 79 / 8%); border-left-color: var(--copper); }
}
.mobile-nav a:focus-visible {
  outline: 3px solid var(--charcoal); outline-offset: -3px;
}
@media (forced-colors: active) {
  .mobile-nav a:active, .mobile-nav a:hover { background: Highlight; color: HighlightText; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--teal); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgb(10 51 53 / 97%) 0%, rgb(10 51 53 / 94%) 40%,
    rgb(10 51 53 / 78%) 58%, rgb(10 51 53 / 30%) 86%);
}
/* On a narrow screen the copy sits over the whole image, so the scrim goes
   near-solid rather than diagonal. */
@media (max-width: 860px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgb(10 51 53 / 93%) 0%, rgb(10 51 53 / 95%) 55%, rgb(10 51 53 / 97%) 100%);
  }
}
.hero-inner { position: relative; padding: clamp(2.8rem, 6vw, 5.4rem) 0; }
.hero-copy { max-width: 33rem; color: var(--cream); }
.hero h1 { color: var(--white); margin-bottom: .45em; }
.hero .eyebrow { color: #F0C9A0; }        /* 7.6:1 on the scrim */
.hero-sub { font-size: 1.16rem; color: #DDE7E6; margin-bottom: 1.5rem; }
.hero-areas {
  margin: 1.4rem 0 0; font-size: .86rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #BBCFCD;
}
.hero-note { margin: .85rem 0 0; font-size: .95rem; color: #C8D8D7; }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust { background: var(--limestone); border-bottom: 1px solid var(--rule); }
.trust ul {
  list-style: none; margin: 0; padding: 1.5rem 0;
  display: grid; gap: 1.4rem; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .trust ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust ul { grid-template-columns: 1fr; } }
.trust li { display: flex; gap: .85rem; align-items: flex-start; }
.trust svg { width: 2rem; height: 2rem; flex: 0 0 auto; color: var(--teal); }
.trust b { display: block; color: var(--teal); font-size: 1rem; }
.trust span { font-size: .92rem; color: var(--muted); }

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.grid { display: grid; gap: 1.3rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--edge);
  border-top: 4px solid var(--copper-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: .97rem; color: var(--muted); }
.card-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: var(--cream);
  display: grid; place-items: center; margin-bottom: .3rem;
}
.card-icon svg { width: 24px; height: 24px; }
.card .btn-text { margin-top: auto; align-self: flex-start; }
.price {
  margin-top: auto; padding-top: .9rem;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.35rem; font-weight: 700; color: var(--teal);
}
.price small { display: block; font-family: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.6rem, 4vw, 3.4rem); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.feature img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }
.feature-alt { direction: rtl; }
.feature-alt > * { direction: ltr; }

.checklist { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.02rem; }
.checklist svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; color: var(--pine); margin-top: .15rem; }

/* Numbered process */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4.2rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--copper); color: #fff;
  font-family: "Libre Baskerville", Georgia, serif; font-size: 1.25rem; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--copper-edge);
}

/* Dark band. Cards sitting inside a band keep their own light-ground
   colours — otherwise the white heading rule erases them. */
.band { background: var(--teal); color: var(--cream); }
.band > .wrap > h2, .band > .wrap > h3,
.band .center h2, .band .center h3 { color: var(--white); }
.band > .wrap > p, .band .center p { color: #D5E2E1; }
.band .card { background: var(--white); }
.band .card h3 { color: var(--teal); }
.band .card p  { color: var(--muted); }
.band .price   { color: var(--teal); }
.band .price small { color: var(--muted); }

/* Texture band — text sits on opaque cards, never on the texture */
/* The brand kit is explicit that text must sit on opaque ground, so the
   texture is veiled rather than used raw. */
.textured {
  background:
    linear-gradient(rgb(248 241 227 / 84%), rgb(248 241 227 / 84%)),
    url("../img/texture-1100.webp") center / cover no-repeat;
  background-color: var(--cream);
}

/* ==========================================================================
   FAQ — native <details>, so keyboard, AT and in-page find all work free
   ========================================================================== */
.faq { display: grid; gap: .8rem; }
.faq details {
  background: var(--white); border: 1px solid var(--edge);
  border-left: 4px solid var(--copper-line); border-radius: var(--radius);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; min-height: 58px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.05rem; font-weight: 700; color: var(--teal);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: .72rem; height: .72rem;
  border-right: 3px solid var(--copper); border-bottom: 3px solid var(--copper);
  transform: rotate(45deg) translateY(-25%); transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq .answer { padding: 0 1.3rem 1.2rem; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer p:first-child { font-weight: 600; color: var(--charcoal); }

/* ==========================================================================
   Service areas
   ========================================================================== */
.areas { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.areas a {
  display: inline-block; padding: .6rem 1rem; min-height: 46px; line-height: 1.9;
  background: var(--white); border: 2px solid var(--edge); border-radius: 999px;
  color: var(--teal); font-weight: 650; font-size: .95rem; text-decoration: none;
}
.areas a:hover { border-color: var(--teal); background: var(--limestone); color: var(--teal); }

/* ==========================================================================
   Disclosure — legally required on every advertising surface
   (A.R.S. § 32-1121(A)(14)(c))
   ========================================================================== */
.disclosure {
  display: inline-block;
  border: 2px solid var(--copper-line);
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #0A3335; color: #BBCFCD; padding: 3rem 0 7rem; }
.site-footer h4 { color: var(--white); font-size: 1rem; margin-bottom: .8rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer li a { display: inline-block; padding: .25rem 0; }
.footer-bottom {
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgb(255 255 255 / 38%);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .88rem;
}
.site-footer .disclosure { color: var(--white); }

/* ==========================================================================
   Sticky mobile call bar — cream, because copper on teal is 2.17:1
   and fails SC 1.4.11.
   ========================================================================== */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--cream);
  border-top: 3px solid var(--copper-line);
  box-shadow: 0 -4px 18px rgb(38 55 58 / 18%);
}
.callbar .btn { flex: 1; width: auto; min-height: 60px; font-size: 1.1rem; padding: 0 .9rem; }
.callbar .btn-call { flex: 1.45; }
.callbar .btn { white-space: nowrap; }
@media (min-width: 1280px) { .callbar { display: none; } }
@media (max-width: 1279px) {
  /* Reserve the bar's height on the document, not just the footer, so it
     cannot sit on top of the hero CTAs. */
  body { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }
  .callbar .btn { font-size: 1rem; padding: 0 .7rem; }
  .callbar .btn svg { width: 1.15em; height: 1.15em; }
}

/* ==========================================================================
   Motion, contrast and print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .btn:active { transform: none; }
}
@media (prefers-contrast: more) {
  .card, .faq details { border-width: 2px; }
  .btn-secondary { border-width: 3px; }
  .lede, .card p, .trust span { color: var(--charcoal); }
}
@media print {
  .no-print, .callbar, .site-header, .utility, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero-media, .hero-scrim { display: none; }
  .hero, .band { background: #fff !important; color: #000 !important; }
  .hero h1, .band h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* Footer column labels — styled like headings but not in the heading outline,
   so the document does not jump H2 → H4. */
.footer-head {
  margin: 0 0 .8rem;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1rem; font-weight: 700; color: var(--white);
}
/* Big display tagline above the H1 */
.hero-tagline {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2.3rem, 5.6vw, 3.4rem);
  line-height: 1.08; color: var(--white);
  margin: 0 0 .5rem; letter-spacing: -.015em;
}
.hero h1 {
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600; color: #DDE7E6; letter-spacing: 0;
  margin: 0 0 1rem;
}

/* ==========================================================================
   Mobile hero — sized so the primary CTA clears the sticky call bar at
   390x844 (the most common phone viewport). Verified in the browser.
   ========================================================================== */
@media (max-width: 700px) {
  .hero-inner { padding: 1.1rem 0 1.15rem; }
  .hero-tagline { font-size: 2.05rem; margin-bottom: .35rem; }
  .hero h1 { font-size: 1.05rem; margin-bottom: .7rem; }
  .hero-sub { font-size: .98rem; line-height: 1.48; margin-bottom: .8rem; }
  .hero .btn-xl { min-height: 58px; font-size: 1.08rem; }
  .hero .btn-row { gap: .6rem; }
  .hero-note { font-size: .85rem; margin-top: .5rem; }
  .hero-areas { display: none; }        /* repeated in full lower down */
  .eyebrow { font-size: .72rem; margin-bottom: .5rem; }
}

/* Header: keep the illustrated lockup at its usable size without letting the
   bar grow past ~112px. Below 1280 the hamburger takes over. */
.brand img { width: auto; height: 84px; }
@media (max-width: 1279px) { .brand img { height: 66px; } }
@media (max-width: 420px)  { .brand img { height: 56px; } }

/* Utility bar: two compact rows on a phone, one line on desktop. */
@media (max-width: 760px) {
  .utility { font-size: .82rem; }
  .utility .wrap { padding: .4rem 0; gap: .15rem; flex-direction: column; align-items: flex-start; }
  .utility-hint { display: block; }
  .utility-hint::before { content: none; }
  .utility-phone { font-size: .95rem; }
}

/* ==========================================================================
   Interior pages — breadcrumbs, page hero, data tables, note box
   ========================================================================== */
.crumbs { background: var(--limestone); border-bottom: 1px solid var(--rule); font-size: .92rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: .6rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
}
.crumbs li { display: flex; align-items: center; color: var(--muted); }
.crumbs li + li::before {
  content: "›"; margin: 0 .55rem; color: var(--copper); font-weight: 700;
}
.crumbs a { color: var(--teal); font-weight: 600; text-decoration: none; padding: .3rem 0; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 600; color: var(--charcoal); }

.page-hero {
  background: var(--teal);
  color: var(--cream);
  padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(2.2rem, 5vw, 3.6rem);
  border-bottom: 5px solid var(--copper-line);
}
.page-hero h1 { color: var(--white); margin-bottom: .5em; }
.page-hero .eyebrow { color: #F0C9A0; }
.page-hero .lede { color: #D5E2E1; max-width: 62ch; }
.page-hero .btn-secondary {
  background: rgb(255 255 255 / 10%); color: var(--white); border-color: var(--white);
  box-shadow: 0 4px 0 rgb(0 0 0 / 30%), 0 8px 18px rgb(0 0 0 / 26%);
}
@media (hover: hover) { .page-hero .btn-secondary:hover { background: rgb(255 255 255 / 22%); color: var(--white); } }
.page-hero .btn:focus-visible { box-shadow: 0 0 0 3px var(--teal), 0 0 0 6px var(--cream); }

/* Data tables — used for water chemistry and price lists */
table.data {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--edge); border-radius: var(--radius-card); overflow: hidden;
  font-size: .98rem;
}
table.data thead tr { background: var(--teal); color: var(--white); text-align: left; }
table.data th, table.data td { padding: .85rem 1rem; vertical-align: top; }
table.data thead th { font-family: "Libre Baskerville", Georgia, serif; font-size: .98rem; }
table.data tbody tr { border-top: 1px solid var(--rule); }
table.data tbody tr:nth-child(even) { background: #FDFBF6; }
table.data tbody th { text-align: left; font-weight: 700; color: var(--charcoal); }
table.data a { font-weight: 600; }

.note-box {
  background: #FFF6EC; border: 1px solid #E8C9B4; border-left: 5px solid var(--copper);
  border-radius: var(--radius-card); padding: 1.6rem 1.8rem;
}
.note-box h2 { color: #8A3D22; }

/* Ordered lists inside body copy */
.section ol { max-width: 62ch; padding-left: 1.4rem; }
.section ol li { margin-bottom: .5rem; }
.section h3 { margin-top: 1.8rem; }
.section h3:first-child { margin-top: 0; }

/* ==========================================================================
   Data tables on a phone — the 3-column price table was scrolling sideways
   and pushing the third column off-screen. Below 640px each row becomes a
   card with the column header as a label.
   ========================================================================== */
@media (max-width: 640px) {
  table.data, table.data tbody, table.data tr, table.data th, table.data td { display: block; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data { border: none; background: none; }
  table.data tbody tr {
    background: var(--white); border: 1px solid var(--edge);
    border-left: 4px solid var(--copper-line); border-radius: var(--radius-card);
    margin-bottom: 1rem; padding: .2rem .2rem .6rem;
  }
  table.data tbody tr:nth-child(even) { background: var(--white); }
  table.data tbody th {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 1.08rem; color: var(--teal); padding-bottom: .3rem;
  }
  table.data tbody td { padding-top: .2rem; padding-bottom: .2rem; }
  table.data tbody td::before {
    content: attr(data-label);
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); margin-bottom: .15rem;
  }
}

/* Footer phone and nav links need a real target, not a 20px text line —
   WCAG 2.5.8 and a 65+ audience. */
.site-footer li a, .site-footer p a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }

/* Eyebrow labels were 12.96px. Small caps at that size is hard work for
   older eyes; 14.4px with the same tracking reads far better. */
.eyebrow { font-size: .8rem; }

/* Interior page hero on a phone — same problem the homepage hero had: the
   lede pushed the CTA pair under the sticky call bar. Verified at 390x844. */
@media (max-width: 700px) {
  .page-hero { padding: 1.3rem 0 1.5rem; }
  .page-hero h1 { font-size: 1.85rem; margin-bottom: .45em; }
  .page-hero .lede { font-size: 1.02rem; line-height: 1.45; margin-bottom: .2rem; }
  .page-hero .btn-row { margin-top: 1rem !important; gap: .6rem; }
  .page-hero .btn { min-height: 54px; font-size: 1.02rem; }
}

/* ==========================================================================
   Transition bar — rebrand and licensing status, September 2026.
   Removed sitewide by setting SHOW_TRANSITION = False in pages.py and
   rebuilding; nothing else references these rules.
   Contrast: charcoal 10.1:1, teal link 7.98:1, rust icon 6.16:1 on #F6E6C8.
   ========================================================================== */
.transition-bar {
  background: #F6E6C8;
  border-bottom: 1px solid #D8BE8C;
  color: var(--charcoal);
}
.transition-bar .wrap {
  display: flex; align-items: flex-start; gap: .7rem; padding: .72rem 0;
}
.transition-bar .tb-icon {
  width: 1.35rem; height: 1.35rem; flex: 0 0 auto;
  color: #8A3D22; margin-top: .14rem;
}
.transition-bar p {
  margin: 0; max-width: none;
  font-size: .96rem; line-height: 1.5; font-weight: 500;
}
.transition-bar strong { font-weight: 800; }
.transition-bar a {
  color: var(--teal); font-weight: 800;
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.transition-bar a:hover { color: #8A3D22; }
.transition-bar .tb-brief { display: none; }
@media (max-width: 720px) {
  .transition-bar p { font-size: .88rem; line-height: 1.45; }
  .transition-bar a { white-space: normal; }
  .transition-bar .wrap { padding: .6rem 0; gap: .55rem; }
  .transition-bar .tb-icon { width: 1.2rem; height: 1.2rem; }
  .transition-bar .tb-full { display: none; }
  .transition-bar .tb-brief { display: inline; }
}
@media (forced-colors: active) {
  .transition-bar { border-bottom: 2px solid CanvasText; }
}

.note-box-alert { background: #F9EDD6; border-color: #D8BE8C; border-left-color: #8A3D22; }
.note-box-alert .eyebrow { color: #8A3D22; }
ol.transition-points { max-width: 62ch; padding-left: 1.35rem; margin: 1.1rem 0 1.2rem; }
ol.transition-points li { margin-bottom: .8rem; }
ol.transition-points li::marker { color: #8A3D22; font-weight: 800; }

#transition .note-box { max-width: 76ch; }

/* ==========================================================================
   Waitlist form. Big targets and 1.05rem input text on purpose — the audience
   skews 65+. Input border #6E5A3E is 6.57:1 on white, well over the 3:1 that
   WCAG 1.4.11 asks of a form control boundary.
   ========================================================================== */
.form-card {
  background: #FFF6EC; border: 1px solid #E8C9B4; border-left: 5px solid var(--copper);
  border-radius: var(--radius-card); padding: 1.8rem; max-width: 46rem;
}
.form-card h2 { font-size: 1.5rem; margin: .2rem 0 .7rem; }
.form-card > p { max-width: 54ch; }

.wl-form { display: grid; gap: 1.05rem; margin-top: 1.5rem; }
.wl-row { display: grid; gap: .35rem; }
.wl-row label { font-weight: 700; color: var(--charcoal); font-size: 1rem; }
.wl-opt { font-weight: 400; color: var(--muted); }
.wl-form input, .wl-form select, .wl-form textarea {
  font: inherit; font-size: 1.05rem; color: var(--charcoal);
  background: #fff; border: 2px solid #6E5A3E; border-radius: 10px;
  padding: .72rem .8rem; width: 100%; min-height: 48px;
  -webkit-appearance: none; appearance: none;
}
.wl-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326373A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem;
  padding-right: 2.6rem;
}
.wl-form textarea { min-height: 92px; resize: vertical; }
.wl-form input:focus-visible, .wl-form select:focus-visible, .wl-form textarea:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px; border-color: var(--teal);
}
.wl-form button { justify-self: start; margin-top: .3rem; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wl-status:empty { display: none; }
.wl-status {
  margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: 10px;
  border-left: 5px solid var(--copper); background: #F6E6C8; color: var(--charcoal);
}
.wl-status.wl-ok  { border-left-color: #1F6B3F; background: #E6F1E6; }
.wl-status.wl-bad { border-left-color: #8A3D22; background: #F9E3DA; }
.wl-status p { margin: 0 0 .6rem; max-width: 54ch; }
.wl-status p:last-child { margin-bottom: 0; }
.wl-copy {
  font: inherit; font-size: .95rem; width: 100%; padding: .6rem .7rem;
  border: 2px solid #6E5A3E; border-radius: 8px; background: #fff; color: var(--charcoal);
  margin-bottom: .7rem; resize: vertical;
}
/* Expectation-setting block under the form. Baymard's finding on "notify me"
   patterns is that abandonment comes from not knowing what the submission
   actually triggers -- so this states it in three lines, with a date. */
.wl-next {
  margin-top: 1.5rem; padding: 1.15rem 1.25rem;
  background: var(--limestone); border-radius: 10px;
}
.wl-next h3 {
  margin: 0 0 .6rem; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--charcoal);
}
.wl-next ol { margin: 0; padding-left: 1.3rem; }
.wl-next li { margin-bottom: .45rem; line-height: 1.55; color: var(--charcoal); }
.wl-next li:last-child { margin-bottom: 0; }
@media (forced-colors: active) {
  .wl-next { border: 1px solid; }
}

.wl-alt { margin-top: 1.1rem; color: var(--muted); }
.wl-alt a { font-weight: 700; }

@media (max-width: 640px) {
  .form-card { padding: 1.3rem 1.1rem; }
  .wl-form button { justify-self: stretch; width: 100%; }
}
@media (forced-colors: active) {
  .wl-form input, .wl-form select, .wl-form textarea { border: 2px solid CanvasText; }
  .wl-status { border: 1px solid CanvasText; }
}

.wl-consent {
  font-size: .92rem; line-height: 1.5; color: var(--muted);
  margin: .3rem 0 0; max-width: 58ch;
}
.wl-consent a { color: var(--link); font-weight: 700; }