/* Bluewell Plumbing & Drain — "Flow" layout primitive: a stacked
   photo-then-band hero (not offset-panel, not split-screen), a fixed
   vertical "pipe spine" accent running the length of the page, and a
   non-interactive escalation timeline instead of another tab-picker.
   Own CSS variables and class taxonomy — see img/SOURCES.md and
   README.md for the rest of the build notes. */

:root {
  --indigo: #101a2e;
  --indigo-2: #16213d;
  --slate: #3d4c68;
  --slate-light: #6b7c99;
  --aqua: #29b8c9;
  --aqua-dim: #1f96a1;
  --copper: #b8733a;
  --copper-dim: #935a2c;
  --pale: #f4f9fa;
  --pale-2: #e6eff1;
  --deep: #16202c;
  --haze: #5c6b78;

  --font-display: 'Sora', sans-serif;
  --font-text: 'Nunito Sans', sans-serif;

  --curve: 12px;
  --lift: 0 16px 34px rgba(16, 26, 46, 0.2);
  --measure: 62ch;
  --edge: clamp(20px, 5vw, 72px);
  --spine: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--pale);
  color: var(--deep);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--indigo);
}

p { margin: 0 0 1em; max-width: var(--measure); color: var(--haze); }

a { color: var(--aqua-dim); }

:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Persistent pipe spine ---------- */
.pipe-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  z-index: 30;
  background: linear-gradient(180deg, var(--aqua) 0%, var(--copper) 100%);
  background-image:
    radial-gradient(circle, rgba(244, 249, 250, 0.9) 3px, transparent 3.5px),
    linear-gradient(180deg, var(--aqua) 0%, var(--copper) 100%);
  background-size: 100% 110px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  pointer-events: none;
}
@media (max-width: 640px) { .pipe-spine { display: none; } }

/* ---------- Buttons ---------- */
.drip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--curve);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.drip:hover { transform: translateY(-2px); }
.drip--copper { background: var(--copper); color: #fff; box-shadow: 0 10px 22px rgba(184, 115, 58, 0.35); }
.drip--copper:hover { background: var(--copper-dim); }
.drip--aqua { background: var(--aqua); color: var(--indigo); }
.drip--aqua:hover { background: var(--aqua-dim); color: #fff; }
.drip--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.drip--outline:hover { border-color: #fff; }
.drip--ghost { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.drip--ghost:hover { background: var(--indigo); color: #fff; }
.drip--full { width: 100%; justify-content: center; }

/* ---------- Topbar ---------- */
.rail-top {
  background: var(--indigo);
  color: var(--pale-2);
  font-size: 0.82rem;
  padding-left: var(--spine);
}
.rail-top-inner {
  padding: 0.5em var(--edge);
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

/* ---------- Masthead: helm ---------- */
.helm {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 249, 250, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(16, 26, 46, 0.08);
  padding-left: var(--spine);
}
.helm-row {
  padding: 0.9em var(--edge);
  display: flex;
  align-items: center;
  gap: 2em;
}
.crest {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--indigo);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-right: auto;
}
.crest svg { flex: none; color: var(--aqua-dim); }
.routes { display: flex; gap: 1.6em; }
.routes a { text-decoration: none; color: var(--deep); font-weight: 600; font-size: 0.95rem; }
.routes a:hover { color: var(--aqua-dim); }
.spout {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--copper);
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.spout:hover { background: var(--copper-dim); }
.valve-toggle { background: none; border: none; padding: 0.4em; display: none; }
.valve-toggle span { display: block; width: 22px; height: 2px; background: var(--indigo); margin: 5px 0; }
.routes.is-open { display: flex; }

@media (max-width: 860px) {
  .routes {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pale);
    flex-direction: column;
    padding: 1em var(--edge) 1.4em;
    border-bottom: 1px solid rgba(16, 26, 46, 0.08);
    gap: 0.9em;
  }
  .valve-toggle { display: block; }
}

/* ---------- Hero: flow ---------- */
.flow-photo {
  position: relative;
  height: 56vh;
  min-height: 340px;
  overflow: hidden;
  margin-left: var(--spine);
}
.flow-photo img { width: 100%; height: 100%; object-fit: cover; }
.flow-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 26, 46, 0.75) 0%, rgba(16, 26, 46, 0.05) 45%);
}
.flow-band {
  background: var(--indigo);
  color: var(--pale);
  padding: clamp(2em, 5vw, 3.2em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
}
.flow-band .flow-tag {
  font-family: var(--font-display);
  color: var(--aqua);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
.flow-band h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; }
.flow-band p { color: rgba(244, 249, 250, 0.78); max-width: 56ch; }
.flow-actions { display: flex; gap: 0.9em; flex-wrap: wrap; margin: 1.2em 0 1.6em; }
.flow-stats { display: flex; gap: 2.4em; flex-wrap: wrap; border-top: 1px solid rgba(244, 249, 250, 0.15); padding-top: 1.3em; }
.flow-stats div { display: flex; flex-direction: column; }
.flow-stats strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--aqua); }
.flow-stats span { font-size: 0.78rem; color: rgba(244, 249, 250, 0.65); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Trust band: tally ---------- */
.tally-band { background: var(--indigo-2); color: var(--pale-2); padding-left: var(--spine); }
.tally-inner {
  padding: 1em var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 2.4em;
  justify-content: center;
  font-size: 0.9rem;
  text-align: center;
}
.tally-inner strong { color: var(--aqua); font-family: var(--font-display); }

/* ---------- Escalation timeline (bespoke, non-interactive) ---------- */
.escalation {
  padding: clamp(3em, 7vw, 5.5em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
  background: var(--pale);
}
.escalation-lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  max-width: 48ch;
  margin-bottom: 1.6em;
}
.escalation-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2em;
}
.escalation-stop {
  border-top: 3px solid var(--slate-light);
  padding-top: 1em;
  position: relative;
}
.escalation-stop::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--slate-light);
}
.escalation-stop[data-severity="high"] { border-top-color: var(--copper); }
.escalation-stop[data-severity="high"]::before { background: var(--copper); }
.escalation-stop .when {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aqua-dim);
  margin-bottom: 0.5em;
}
.escalation-stop[data-severity="high"] .when { color: var(--copper-dim); }
.escalation-stop p { font-size: 0.92rem; margin: 0; color: var(--deep); }
.escalation-stop .cost { display: block; margin-top: 0.6em; font-size: 0.82rem; font-weight: 700; color: var(--haze); }
@media (max-width: 800px) {
  .escalation-line { grid-template-columns: 1fr; gap: 1.6em; }
}

/* ---------- Services: ledger ---------- */
.ledger-section {
  padding: clamp(3em, 7vw, 5.5em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
}
.ledger-open {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  max-width: 46ch;
  margin-bottom: 1.4em;
}
.ledger { border-top: 1px solid rgba(16, 26, 46, 0.12); max-width: 900px; }
.ledger-row {
  display: grid;
  grid-template-columns: 2.4em 1.6fr 1fr 1fr;
  gap: 1em;
  align-items: center;
  padding: 1em 0;
  border-bottom: 1px solid rgba(16, 26, 46, 0.12);
}
.ledger-row .step-num { font-family: var(--font-display); color: var(--slate-light); font-size: 1rem; }
.ledger-row h3 { margin: 0; font-size: 1.05rem; }
.ledger-row .eta { font-size: 0.85rem; color: var(--aqua-dim); font-weight: 700; }
.ledger-row .price { font-size: 0.85rem; color: var(--copper-dim); font-weight: 700; text-align: right; }
@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 2em 1fr; }
  .ledger-row .eta, .ledger-row .price { grid-column: 2; text-align: left; }
}

/* ---------- Recent jobs gallery (bespoke) ---------- */
.jobs-section {
  padding: clamp(3em, 7vw, 5.5em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
  background: var(--indigo);
  color: var(--pale);
}
.jobs-filter { display: flex; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1.8em; }
.jobs-filter button {
  background: rgba(244, 249, 250, 0.08);
  border: 1px solid rgba(244, 249, 250, 0.25);
  color: var(--pale);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.jobs-filter button[aria-pressed="true"] { background: var(--aqua); border-color: var(--aqua); color: var(--indigo); }
.jobs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; }
.jobs-item {
  position: relative;
  border-radius: 999px 999px var(--curve) var(--curve);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.jobs-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.jobs-item:hover img { transform: scale(1.06); }
.jobs-tag {
  position: absolute;
  left: 0.7em;
  bottom: 0.7em;
  background: rgba(16, 26, 46, 0.82);
  color: var(--pale);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3em 0.7em;
  border-radius: 999px;
}
.jobs-item.is-hidden { display: none; }
@media (max-width: 900px) { .jobs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Reviews: voices ---------- */
.voices-section {
  padding: clamp(3em, 7vw, 5.5em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
  background: var(--pale-2);
}
.voices-frame { max-width: 1100px; margin: 0 auto; }
.voices-open { display: flex; align-items: baseline; gap: 0.6em; margin-bottom: 1.6em; flex-wrap: wrap; }
.voices-open .stars-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--indigo); }
.voices-open .stars-note { color: var(--haze); font-size: 0.95rem; }
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.voice-card { background: var(--pale); border-radius: var(--curve); padding: 1.7em; box-shadow: 0 8px 20px rgba(16, 26, 46, 0.08); }
.voice-drop {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--aqua);
  transform: rotate(45deg);
  margin-bottom: 1.1em;
}
.voice-card p { font-size: 0.95rem; color: var(--deep); margin-bottom: 1em; }
.voice-who { font-size: 0.85rem; color: var(--haze); }
.voice-who strong { color: var(--indigo); }
@media (max-width: 860px) { .voices-grid { grid-template-columns: 1fr; } }

/* ---------- Service area: reach ---------- */
.reach-section { padding: clamp(2em, 5vw, 3em) var(--edge); padding-left: calc(var(--edge) + var(--spine)); text-align: center; }
.reach-tags { display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: center; margin-top: 1em; }
.reach-tags span { background: var(--pale-2); color: var(--deep); padding: 0.5em 1em; border-radius: 999px; font-size: 0.88rem; }

/* ---------- Closer CTA: surge ---------- */
.surge {
  position: relative;
  padding: clamp(4em, 10vw, 7em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: var(--indigo);
}
.surge-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 160%;
  background: radial-gradient(circle, rgba(41, 184, 201, 0.22), transparent 70%);
  z-index: 0;
}
.surge-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.surge h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.surge .tap-big {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: #fff;
  text-decoration: none;
  margin: 0.5em 0 1.1em;
}
.surge-actions { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact + footer ---------- */
.intake {
  padding: clamp(3em, 7vw, 5.5em) var(--edge);
  padding-left: calc(var(--edge) + var(--spine));
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3em;
}
.intake .tap-lead {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  display: block;
  margin-bottom: 0.3em;
  text-decoration: none;
  color: var(--indigo);
}
.spec { margin-bottom: 1em; }
.spec label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35em; }
.spec input, .spec select, .spec textarea {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1.5px solid rgba(16, 26, 46, 0.18);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--deep);
}
.spec input:focus, .spec select:focus, .spec textarea:focus { border-color: var(--aqua-dim); outline: none; }
.drip-note { font-size: 0.85rem; margin-top: 0.8em; min-height: 1.2em; }
.drip-note[data-state="ok"] { color: var(--aqua-dim); }
.drip-note[data-state="err"] { color: var(--copper-dim); }
.tally-list { list-style: none; margin: 0; padding: 0; }
.tally-item { margin-bottom: 1.3em; }
.tally-item strong { display: block; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-light); margin-bottom: 0.25em; }
.tally-item a, .tally-item span { color: var(--deep); text-decoration: none; font-size: 1.02rem; }
.tally-item a:hover { color: var(--aqua-dim); }
@media (max-width: 800px) { .intake { grid-template-columns: 1fr; } }

.footing {
  background: var(--indigo);
  color: var(--pale-2);
  padding: 3em var(--edge) 2em;
  padding-left: calc(var(--edge) + var(--spine));
}
.footing-top { display: flex; flex-wrap: wrap; gap: 2.5em; justify-content: space-between; margin-bottom: 2em; }
.footing .crest { color: #fff; }
.footing-tagline { max-width: 32ch; color: var(--slate-light); font-size: 0.92rem; }
.footing-nav { display: flex; flex-direction: column; gap: 0.6em; }
.footing-nav a { color: var(--pale-2); text-decoration: none; font-size: 0.92rem; }
.footing-nav a:hover { color: #fff; }
.footing-bottom {
  border-top: 1px solid rgba(244, 249, 250, 0.12);
  padding-top: 1.4em;
  font-size: 0.8rem;
  color: var(--slate-light);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em;
}

/* ---------- Persistent CTA: floating call button ---------- */
.fab-call {
  position: fixed;
  right: 1.2em;
  bottom: 1.2em;
  z-index: 50;
  background: var(--copper);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 26px rgba(16, 26, 46, 0.35);
}
.fab-call:hover { background: var(--copper-dim); }
.fab-call svg { flex: none; }
@media (max-width: 480px) {
  .fab-call span { display: none; }
  .fab-call { padding: 0.9em; }
}