/* ============================================================
   PACIFIC WATER CO | Instant Quote funnel
   Loaded only by instant-quote.html, on top of styles.css. Kept
   separate so this page can change without bumping ?v= on 32 pages.
   Tokens all come from styles.css. No new colours.
   ============================================================ */

/* An explicit display beats the hidden attribute, so say it once here.
   Without this the progress bar shows on the ZIP step, where there is
   nothing to go back to. */
.iq-bar[hidden],
.iq-bar-send[hidden],
.iq-bar-count[hidden],
.iq-result[hidden] { display: none; }

/* ---------- Progress ---------- */
.iq-bar {
  /* Sits under the site header, which is also sticky: 72px tall plus its
     1px border, the same at every width. At top: 0 the header covered
     this bar the moment you scrolled, so Back disappeared. */
  position: sticky; top: 73px; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem var(--pad);
  background: rgba(250, 252, 252, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.iq-bar-track {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--foam); overflow: hidden;
}
.iq-bar-fill {
  height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--aqua-deep), var(--aqua));
  transition: width 0.4s ease;
}
.iq-bar-count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
#iq-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--tide);
  padding: 0.2rem 0.1rem;
}
#iq-back:hover { color: var(--ink); text-decoration: underline; }

/* The form is at the very bottom of a long build page. This keeps a way
   to it on screen the whole time, and steps aside once the form shows. */
.iq-bar-send {
  padding: 0.5rem 1rem; min-height: 0;
  font-size: 0.85rem; white-space: nowrap;
}
#iq-send { scroll-margin-top: 8rem; }   /* header + bar */

/* the price inside the button, in aqua so the number is the thing you read */
.iq-bar-price { color: var(--aqua); font-weight: 600; margin-left: 0.15rem; }
/* on the smallest phones the price must not squeeze the progress track
   to nothing or push the button off screen */
.iq-bar-track { min-width: 2rem; }
@media (max-width: 380px) {
  .iq-bar { gap: 0.6rem; }
  .iq-bar-send { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
}

/* The pulse. instant-quote.js adds .is-pulsing at 3s, then every 10s, six
   times. The button swells by a third, flashes from ink to aqua, and
   throws a wide aqua ring, then settles back with a small bounce.
   It grows from its right edge, leftwards over the progress track, so a
   bigger swell can never push past the edge of a phone screen.
   transform, background and box-shadow only: nothing else in the bar
   moves. */
.iq-bar-send { position: relative; transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) {
  .iq-bar-send.is-pulsing { animation: iq-pulse 1.5s cubic-bezier(0.22, 0.9, 0.3, 1) 1; }
}
/* motion-sensitive visitors get the glow without the grow or the ripple */
@media (prefers-reduced-motion: reduce) {
  .iq-bar-send.is-pulsing { box-shadow: 0 0 0 4px rgba(99, 195, 205, 0.7); }
}
@keyframes iq-pulse {
  0%   { transform: scale(1);
         box-shadow: 0 0 0 0 rgba(99, 195, 205, 0.85), 0 0 0 0 rgba(99, 195, 205, 0.5); }
  28%  { transform: scale(1.34); background: var(--aqua-deep);
         box-shadow: 0 0 0 8px rgba(99, 195, 205, 0.6), 0 0 30px 8px rgba(99, 195, 205, 0.55); }
  55%  { transform: scale(0.96); }
  75%  { transform: scale(1.06); }
  100% { transform: scale(1);
         box-shadow: 0 0 0 26px rgba(99, 195, 205, 0), 0 0 0 0 rgba(99, 195, 205, 0); }
}

/* ---------- ZIP hero ----------
   The Georgia page feels alive because the one thing you have to do is
   made to look special: a big bold field, a warm glowing button that
   wakes up once the ZIP is in, and a headline with a phrase picked out.
   Same moves here, in our own palette and type. The words stay ours. */
.iq-hero {
  position: relative; isolation: isolate;
  overflow-x: clip;   /* the glow must never widen the page on a phone */
  /* top and bottom only: .container owns the side padding, and a
     shorthand here would zero it and run the text into the screen edge */
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
/* a soft pool of aqua behind the form, so the eye lands there */
.iq-hero::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 58%; width: min(44rem, 100%); height: 26rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(99, 195, 205, 0.22), rgba(99, 195, 205, 0));
  pointer-events: none;
}
.iq-hero .eyebrow { color: var(--aqua-deep); }
.iq-hero h1 {
  max-width: 13em; margin: 0.7rem auto 0;
  font-size: clamp(2.2rem, 6.6vw, 3.9rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.024em;
  text-wrap: balance;
}
.iq-hero .lede { max-width: 32em; margin: 1.1rem auto 0; }

.iq-zip-wrap { max-width: 23rem; margin: 2.2rem auto 0; text-align: left; }
.iq-zip-wrap label {
  display: block; font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tide); font-weight: 500;
  margin-bottom: 0.5rem; text-align: center;
}
#iq-zip {
  width: 100%; text-align: center;
  font-size: 2rem; font-weight: 600; color: var(--ink);
  letter-spacing: 0.42em; text-indent: 0.42em;
  padding: 0.8rem 1rem;
  background: var(--white);
  border: 2px solid rgba(99, 195, 205, 0.55);
  border-radius: 12px;
  box-shadow: 0 10px 30px -14px rgba(34, 112, 126, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#iq-zip::placeholder { letter-spacing: 0.42em; color: rgba(91, 112, 120, 0.3); font-weight: 400; }
#iq-zip:focus {
  outline: none; border-color: var(--aqua-deep);
  box-shadow: 0 0 0 4px rgba(99, 195, 205, 0.25), 0 12px 32px -14px rgba(34, 112, 126, 0.5);
}

/* The button is quiet until the ZIP is complete, then it lights up.
   It stays clickable the whole time: an early click just gets the
   "five digits, please" message rather than silently doing nothing. */
.iq-go {
  position: relative; overflow: hidden;
  width: 100%; margin-top: 0.9rem; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--aqua-deep), var(--tide));
  color: var(--white);
  opacity: 0.5;
  box-shadow: none;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;
}
.iq-zip-wrap.is-ready .iq-go {
  opacity: 1;
  box-shadow: 0 14px 34px -14px rgba(34, 112, 126, 0.75);
}
.iq-zip-wrap.is-ready .iq-go:hover { transform: translateY(-1px); }
.iq-arrow { display: inline-block; transition: transform 0.2s ease; }
.iq-zip-wrap.is-ready .iq-go:hover .iq-arrow { transform: translateX(4px); }
/* one slow sheen across the button the moment it becomes ready */
.iq-go::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .iq-zip-wrap.is-ready .iq-go::after { animation: iq-sheen 0.9s ease 0.1s 1 both; }
  @keyframes iq-sheen {
    from { left: -60%; opacity: 1; }
    to   { left: 130%; opacity: 1; }
  }
}

.iq-error { min-height: 1.2rem; margin-top: 0.5rem; font-size: 0.85rem; color: #B3261E; text-align: center; }
.iq-trust {
  list-style: none; padding: 0;
  margin-top: 1.4rem; font-size: 0.85rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: center;
}
.iq-trust li { display: inline-flex; align-items: center; gap: 0.35rem; }
.iq-trust svg { width: 1rem; height: 1rem; color: var(--aqua-deep); flex: 0 0 auto; }

/* ---------- Question steps ---------- */
.iq-step { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0; }
.iq-step-title { font-size: clamp(1.7rem, 4.2vw, 2.6rem); margin-top: 0.7rem; line-height: 1.12; }
.iq-step-sub { color: var(--muted); margin-top: 0.7rem; max-width: 32em; }
.iq-options {
  margin-top: 2rem; display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.iq-option {
  display: flex; align-items: center; gap: 0.9rem; text-align: left;
  padding: 1.05rem 1.1rem; cursor: pointer;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.iq-option:hover {
  border-color: var(--aqua-deep);
  box-shadow: 0 8px 24px -16px rgba(10, 47, 60, 0.4);
  transform: translateY(-1px);
}
.iq-option-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--foam); color: var(--aqua-deep);
}
.iq-option-icon svg { width: 1.3rem; height: 1.3rem; }
.iq-option-label { flex: 1; font-weight: 500; }
.iq-option-label small {
  display: block; margin-top: 0.15rem;
  font-size: 0.78rem; font-weight: 400; color: var(--muted);
}
.iq-option-chev { color: var(--muted); font-size: 1.3rem; line-height: 1; }

/* ---------- Result: shared ----------
   These sections are not inside .container, so they carry their own side
   padding. The max-width grows by the padding so the text column stays
   48rem wide on a desktop. */
.iq-r-hero,
.iq-r-section,
.iq-components { padding-left: var(--pad); padding-right: var(--pad); }
.iq-r-hero { max-width: calc(48rem + var(--pad) * 2); margin: 0 auto; padding-top: clamp(2.2rem, 6vw, 4rem); }

/* The headline is the moment the visitor sees their own build, so it is
   set as big as the grid allows. Switzer has no italic cut, so the
   emphasis is weight and colour rather than a browser-faked oblique. */
.iq-r-hero h2 {
  margin-top: 0.9rem;
  font-size: clamp(2.1rem, 6.4vw, 3.7rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.iq-em { color: var(--aqua-deep); font-weight: 600; }
.iq-r-hero .lede { margin-top: 1.2rem; max-width: 34em; }

/* Pill eyebrow, the "✓ your personalised build" chip. */
.iq-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.38rem 0.85rem; border-radius: 999px;
  background: var(--foam); color: var(--tide);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
/* The photograph of a finished job, straight under the headline. */
.iq-r-shot {
  max-width: calc(52rem + var(--pad) * 2);
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  padding-left: var(--pad); padding-right: var(--pad);
}
.iq-r-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.iq-r-shot figcaption {
  margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); text-align: center;
}

.iq-r-section { max-width: calc(48rem + var(--pad) * 2); margin: clamp(1.9rem, 5vw, 3.2rem) auto 0; }
.iq-r-section h3 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.16; margin-top: 0.6rem; }
.iq-r-section > p { margin-top: 0.7rem; }
.iq-r-section--tint {
  max-width: none; padding: clamp(1.7rem, 4.5vw, 2.6rem) var(--pad);
  background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.iq-r-section--tint > * { max-width: 48rem; margin-left: auto; margin-right: auto; }
.iq-fine { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
.iq-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--aqua-deep);
}

/* ---------- Cards ---------- */
.iq-grid-2 { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.iq-card {
  padding: 1.05rem 1.2rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.iq-card h4 { font-size: 1.02rem; line-height: 1.3; }
.iq-card p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }

/* ---------- Hard water damage ----------
   A thumbnail of the damage beside the copy, the way the Georgia funnel
   lays this section out. The photo does the arguing. */
.iq-damage { display: grid; gap: 0.6rem; }
.iq-damage-row {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem;
  align-items: start;
  padding: 1rem 1.1rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.iq-damage-shot {
  background: var(--mist); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 1;
}
.iq-damage-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iq-damage-row h4 { font-size: 1.02rem; line-height: 1.3; }
.iq-damage-row p { margin-top: 0.45rem; font-size: 0.9rem; color: var(--muted); }
@media (min-width: 620px) {
  .iq-damage-row { grid-template-columns: 7rem 1fr; gap: 1.3rem; }
}

/* ---------- Contaminants ---------- */
.iq-contaminants { display: grid; gap: 0.6rem; }
.iq-contaminant {
  padding: 1.05rem 1.2rem; background: var(--white);
  border: 1px solid var(--line); border-left: 3px solid var(--aqua-deep);
  border-radius: var(--radius);
}
.iq-contaminant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.iq-contaminant-head h4 { font-size: 1.05rem; line-height: 1.3; }
.iq-contaminant-x { text-align: right; flex: 0 0 auto; }
.iq-contaminant-x strong { display: block; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.iq-contaminant-x span {
  display: block; margin-top: 0.2rem; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.iq-contaminant-level {
  margin-top: 0.5rem; padding-bottom: 0.7rem;
  font-size: 0.82rem; color: var(--muted); border-bottom: 1px solid var(--line);
}
.iq-contaminant .iq-component-block { margin-top: 0.6rem; }

/* The caveat block. Deliberately prominent: it is the reason the page
   is credible, not a disclaimer to hide. */
.iq-honest {
  padding: 1.05rem 1.2rem; background: var(--foam);
  border-radius: var(--radius); border: 1px solid var(--line);
}
.iq-honest p { font-size: 0.92rem; }
.iq-honest p + p { margin-top: 0.7rem; }
.iq-ewg { font-weight: 500; color: var(--aqua-deep); }

/* ---------- Build components ---------- */
.iq-components {
  max-width: calc(48rem + var(--pad) * 2); margin: clamp(1.1rem, 3vw, 1.8rem) auto 0;
  display: grid; gap: 0.9rem;
}
/* The equipment photos are tall and narrow: a tank is about 250 by 560.
   A wide banner shot puts them in a sea of empty background, so the
   photo gets its own column beside the copy and fills the height of it.
   Stacks on a phone, where a short band is the only thing that fits. */
.iq-component {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.iq-component-shot {
  background: linear-gradient(160deg, var(--foam), var(--mist));
  display: grid; place-items: center; padding: 1.1rem;
}
/* The height is fixed and the width is the column, so the box has a size
   before the file arrives. With width:auto a lazy image collapses to
   nothing, never enters the viewport, and so never loads at all. */
.iq-component-shot img {
  display: block; width: 100%; height: 11rem;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(10, 47, 60, 0.18));
}
.iq-component-body { position: relative; padding: 1.2rem 1.3rem 1.1rem; }

/* A photograph of the real thing installed, rather than a cut out of the
   product, fills its whole panel instead of floating in the middle. */
.iq-component-shot--photo { padding: 0; background: var(--mist); }
.iq-component-shot--photo img {
  width: 100%; height: 13rem; object-fit: cover; filter: none;
}

@media (min-width: 620px) {
  .iq-component { display: grid; grid-template-columns: 13.5rem 1fr; align-items: stretch; }
  .iq-component-shot { border-right: 1px solid var(--line); padding: 1.5rem 1rem; }
  .iq-component-shot img { height: 18rem; }
  .iq-component-shot--photo { padding: 0; }
  .iq-component-shot--photo img { height: 100%; min-height: 18rem; }
}
@media (max-width: 619px) {
  .iq-component-shot { border-bottom: 1px solid var(--line); }
}
.iq-component-num {
  position: absolute; top: 1rem; right: 1.3rem;
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: rgba(99, 195, 205, 0.45);
}
.iq-component-body h3 { font-size: 1.2rem; line-height: 1.3; padding-right: 3rem; }
.iq-component-tech { margin-top: 0.3rem; font-size: 0.84rem; color: var(--muted); }
.iq-component-block { margin-top: 0.75rem; }
.iq-component-block p + p { margin-top: 0.3rem; font-size: 0.92rem; }
.iq-badge {
  margin-top: 0.85rem; display: inline-block;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: var(--foam); color: var(--tide);
  font-size: 0.76rem; font-weight: 500;
}
.iq-component-foot {
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
}
.iq-included { font-weight: 600; color: var(--ink); }
.iq-link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.iq-link-btn:hover { color: var(--ink); }
.iq-link-btn--up { color: var(--aqua-deep); font-weight: 500; }

/* ---------- RO: remove box and the removed line ---------- */
.iq-confirm {
  margin-top: 0.9rem; padding: 1rem 1.1rem;
  background: var(--mist); border: 1px solid var(--line);
  border-left: 3px solid var(--aqua-deep); border-radius: var(--radius);
}
.iq-confirm-title { font-weight: 600; color: var(--ink); }
.iq-confirm p + p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.iq-confirm ul { margin-top: 0.6rem; list-style: none; display: grid; gap: 0.35rem; }
.iq-confirm li { position: relative; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text); }
.iq-confirm li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--aqua);
}
.iq-confirm .iq-confirm-note { margin-top: 0.7rem; font-size: 0.84rem; }
.iq-confirm-actions {
  margin-top: 0.9rem; display: flex; align-items: center;
  gap: 0.6rem 1.1rem; flex-wrap: wrap;
}
.iq-confirm-actions .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }

.iq-removed {
  background: var(--white); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.iq-removed-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.92rem; color: var(--muted); text-align: left;
}
.iq-removed-toggle span { color: var(--aqua-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.iq-removed-list { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.iq-removed-item { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.iq-removed-item strong { display: block; color: var(--ink); font-weight: 500; }
.iq-removed-item span { display: block; font-size: 0.8rem; color: var(--muted); }

/* ---------- Other options under the build: a quiet list, not a pitch ---------- */
.iq-alts h4 { font-size: 1.1rem; margin-top: 0.5rem; }
.iq-alts > p { font-size: 0.92rem; color: var(--muted); margin-top: 0.3rem; }
.iq-alt-list {
  margin-top: 0.9rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.iq-alt {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1rem;
  flex-wrap: wrap; padding: 0.8rem 1rem;
}
.iq-alt + .iq-alt { border-top: 1px solid var(--line); }
.iq-alt-body { flex: 1 1 16rem; }
.iq-alt-body strong { display: block; color: var(--ink); font-weight: 500; }
.iq-alt-body span { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
.iq-alt-side { display: flex; align-items: center; gap: 0.9rem; }
.iq-alt-price { font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Quick guide under the options: closed until tapped */
.iq-guide {
  margin-top: 0.75rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.iq-guide summary {
  list-style: none; cursor: pointer; padding: 0.8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.iq-guide summary::-webkit-details-marker { display: none; }
.iq-guide summary::after {
  content: '+'; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  color: var(--aqua-deep); border: 1px solid var(--line);
}
.iq-guide[open] summary::after { content: '\2212'; }
.iq-guide summary:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 2px; border-radius: var(--radius); }
.iq-guide-title { color: var(--ink); font-weight: 500; }
.iq-guide-title small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-top: 0.1rem; }
.iq-guide-body { padding: 0.2rem 1rem 0.9rem; border-top: 1px solid var(--line); }
.iq-guide-body .iq-label { margin-top: 0.85rem; }
.iq-guide-body ul { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text); }
.iq-guide-body li { margin-bottom: 0.4rem; }
.iq-guide-body li strong { color: var(--ink); font-weight: 600; }

/* ---------- Flag (well water) ---------- */

/* ---------- Faucet finishes ---------- */
/* Three to a row on a phone, all five in one row on a desktop. */
.iq-finishes { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr)); }
.iq-finish {
  /* image pinned to the top, name to the bottom, so a name that wraps
     ("Oil rubbed bronze" on a phone) does not knock its row out of line */
  display: flex; flex-direction: column;
  padding: 0.5rem; cursor: pointer; font: inherit;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: center; color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
/* height:auto matters. The img tag carries height="560", and without
   this the browser takes it literally and every card is 560px tall. */
.iq-finish img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.iq-finish span { display: block; margin-top: auto; padding-top: 0.3rem; font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.iq-finish:hover { border-color: var(--aqua-deep); }
.iq-finish.is-on {
  border-color: var(--aqua-deep);
  box-shadow: 0 0 0 2px rgba(34, 112, 126, 0.25);
}
.iq-finish.is-on span { color: var(--ink); font-weight: 500; }

/* ---------- Why your build looks like this ---------- */
.iq-because { margin-top: 1.1rem; list-style: none; display: grid; gap: 0.75rem; }
.iq-because li { padding-left: 1.2rem; position: relative; font-size: 0.95rem; color: var(--muted); }
.iq-because li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--aqua);
}
.iq-because strong { color: var(--ink); font-weight: 500; }

/* ---------- Price ---------- */
.iq-price {
  max-width: none; margin-top: clamp(1.9rem, 5vw, 3.2rem);
  padding: clamp(1.9rem, 5vw, 3rem) var(--pad);
  background: var(--ink); color: var(--foam);
}
.iq-price > * { max-width: 48rem; margin-left: auto; margin-right: auto; }
.iq-price .eyebrow { color: var(--aqua); }
.iq-price h3 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.16; margin-top: 0.6rem; color: var(--white); }
.iq-price > p { margin-top: 0.9rem; color: rgba(232, 242, 243, 0.85); }
.iq-not-paying {
  margin-top: 1.6rem; list-style: none; display: grid; gap: 0.6rem;
  font-size: 0.94rem; color: rgba(232, 242, 243, 0.85);
}
.iq-not-paying li { padding-left: 1.4rem; position: relative; }
.iq-not-paying li::before { content: '\2013'; position: absolute; left: 0; color: var(--aqua); }
.iq-price-box {
  margin-top: 1.5rem; padding: 1.4rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(232, 242, 243, 0.18);
  border-radius: var(--radius); text-align: center;
}
.iq-price-anchor span, .iq-price-now span {
  display: block; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(232, 242, 243, 0.6);
}
.iq-price-anchor s { display: block; margin-top: 0.3rem; font-size: 1.3rem; color: rgba(232, 242, 243, 0.55); }
.iq-price-anchor--next { margin-top: 1rem; }
.iq-price-arrow { margin-top: 0.5rem; color: var(--aqua); font-size: 1.1rem; line-height: 1; }
.iq-price-now { margin-top: 0.5rem; }
.iq-price-now span { color: var(--aqua); }
.iq-price-pay {
  margin: 1rem auto 0; max-width: 24rem; padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(99, 195, 205, 0.4); border-radius: var(--radius);
  font-size: 0.98rem; color: var(--white); line-height: 1.45;
}
.iq-price-pay strong { color: var(--aqua); }
.iq-price-pay span { font-size: 0.8rem; color: rgba(232, 242, 243, 0.7); }
.iq-price-now strong {
  display: block; margin-top: 0.3rem;
  font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1; color: var(--white);
}
.iq-price-note { margin-top: 0.9rem; font-size: 0.84rem; color: rgba(232, 242, 243, 0.7); }
.iq-price-save {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(232, 242, 243, 0.18);
  font-size: 0.94rem; color: rgba(232, 242, 243, 0.85);
}
.iq-price-save strong { color: var(--aqua); }
.iq-price .iq-fine { color: rgba(232, 242, 243, 0.6); }

/* ---------- Lead form ---------- */
.iq-lead { padding-bottom: clamp(2.5rem, 7vw, 4rem); }
.iq-lead .form-card { box-shadow: var(--shadow); }

/* A tighter form than the site default, on this page only: the visitor has
   already scrolled a long build to get here, and a tall form at the end of
   it looks like more work than it is. Inputs stay at 16px text so iOS does
   not zoom in on focus. contact.html keeps the roomier default. */
.iq-lead .form-card.mt-3 { margin-top: 1rem; }
.iq-lead .form-card { padding: clamp(1rem, 3vw, 1.4rem); }
.iq-lead .form-grid { gap: 0.55rem 0.75rem; }
.iq-lead .field label { font-size: 0.7rem; margin-bottom: 0.2rem; }
.iq-lead .field input,
.iq-lead .field select,
.iq-lead .field textarea { padding: 0.5rem 0.7rem; font-size: 1rem; line-height: 1.35; }
.iq-lead .field textarea { min-height: 3.4rem; }
.iq-lead .consent { margin-top: 0.15rem; }
.iq-lead .consent-row { padding: 0.5rem 0.65rem; gap: 0.55rem; }
.iq-lead .consent-row span { font-size: 0.76rem; line-height: 1.4; }
.iq-lead .consent-row input[type="checkbox"] { margin-top: 0.1rem; }
.iq-lead .consent-row + .consent-row { margin-top: 0.35rem; }
.iq-lead .consent .form-note { margin-top: 0.4rem; font-size: 0.76rem; }
.iq-lead .form-note.mt-1 { margin-top: 0.4rem; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .iq-result .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .iq-result .reveal.in-view { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .iq-offer { grid-template-columns: 4.5rem 1fr; gap: 0.9rem; }
  .iq-contaminant-head { flex-direction: column; gap: 0.4rem; }
  .iq-contaminant-x { text-align: left; }
  .iq-component-num { font-size: 1.6rem; }
}