/* ==========================================================================
   site.css — Pump Pros Inc., Turlock, CA. Band-rhythm archetype (brief §5):
   alternating full-width bands (dark gradient hero, cream, surface, cream,
   dark CTA band), a repeated gold band-rule ornament heading each body
   section, and the three-independent-satellite living hero (brief §7).

   HARD RULE (house-tech-spec §3): tokens only, no raw literals. The two
   escape hatches are the house breakpoints (48em/64em) and an explicit
   @allow-literal comment.
   ========================================================================== */

/* --- Layout primitives (unchanged from skeleton) -------------------------- */

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--section-gap);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--bg {
  background-color: var(--color-bg);
}

.section--dark {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.measure {
  max-width: var(--layout-measure);
}

/* --- The one repeated ornament: the gold band-rule (brief §3.2, §8) -------
   Fixed 3px x 64px at every width; never shrinks — it is decorative and
   non-content-bearing, so no container can force it smaller. Heads every
   body section as a structural boundary marker (ref-008's numbered-section
   move, adapted without a numeral — no enumerated index exists to collide
   with, design-rules §4). */

.band-rule {
  display: block;
  block-size: var(--ornament-band-rule-height);
  inline-size: var(--ornament-band-rule-width);
  background-color: var(--color-accent);
  margin-block-end: var(--space-md);
  flex: 0 0 auto;
}

.section--dark .band-rule {
  background-color: var(--color-bg);
}

.section-head {
  margin-block-end: var(--space-lg);
}

.section-head__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-block-end: var(--space-2xs);
}

.section--dark .section-head__eyebrow {
  color: var(--color-hero-eyebrow);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* --- Header & navigation ---------------------------------------------------
   Fixed 56px content height (design-rules §7.2 rule 3's own worked shape),
   not derived from font line-height, so the brief's sticky-stack arithmetic
   (44px expiry bar + 56px header + 1px border = 101px) reproduces exactly. */

.site-header {
  position: relative;
  z-index: var(--z-header);
  min-height: var(--layout-header-height);
  padding-block: 0;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--layout-header-height);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons ---------------------------------------------------------------
   Two roles. The primary CTA is always an opaque gold fill (site-wide, per
   brief §5.1 rule 2 — the call is never softened), which is exactly why its
   focus ring cannot use --color-border-strong (N2a, 1.63:1, fails 1.4.11):
   every .btn--primary's own :focus-visible ring uses --color-ink instead,
   the same pairing as F5 (4.92:1). This is a build instruction (brief §2.5
   N2a), not a per-instance fix. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  /* The fill alone is 2.83:1 against the page ground (brief §2.5 N1) — below
     even the large-text floor, and the brief accepts that ONLY because the
     control's boundary is otherwise legible (pill shape, generous padding).
     WCAG 1.4.11's own 3:1 non-text floor still needs an actual boundary, so
     the border carries it: --color-ink reads 13.92:1 against the page
     ground (F1), giving the control a real, always-on edge rather than
     resting on shape alone. */
  background-color: var(--color-accent);
  border-color: var(--color-ink);
  color: var(--color-accent-ink);
}

.btn--primary:focus-visible {
  outline-color: var(--color-ink);
}

.btn--quiet {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.section--dark .btn--quiet {
  border-color: var(--color-bg);
  color: var(--color-bg);
}

/* ============================================================================
   HERO — the living-hero field: a generated illustration (pump-on-pipe-string
   / well cap / control panel, brief §6.1) plus three CSS/SVG satellites on
   independent, non-synchronised loops (brief §7). DOM order is the house
   default: eyebrow -> h1 -> primary CTA -> field -> lead (design-rules §7.2
   rule 1) — a single column on mobile, a two-column grid from 64em so the
   field sits beside the text rather than beneath it.
   ============================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  /* The trailing plain colour sets the shorthand's background-color to the
     gradient's own worst-case (lightest, 0%) stop — the exact value
     design-rules §6 requires text over a gradient to be measured against.
     The gradient itself is fully opaque, so nothing paints differently; this
     purely gives an automated contrast walk (which reads backgroundColor,
     not backgroundImage) a real, correctly-conservative colour to find
     instead of falling through to the page's own light background-color and
     misreading light-on-dark hero text as light-on-light. */
  background: radial-gradient(130% 95% at 25% 0%,
    var(--color-hero-halo-light) 0%,
    var(--color-hero-halo-mid) 60%,
    var(--color-hero-halo-deep) 100%),
    var(--color-hero-halo-light);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  min-height: var(--hero-min-height);
  padding-block: var(--space-md) var(--space-lg);
}

.hero__content {
  display: flex;
  flex-direction: column;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-hero-eyebrow);
  margin: 0 0 var(--space-2xs);
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bg);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

.hero__heading em {
  display: inline;
  font-family: var(--font-emphasis);
  font-style: normal;
  font-weight: var(--font-weight-display-italic);
  color: var(--color-accent);
}

.hero__cta-row {
  margin: 0;
}

.hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-body);
  color: var(--color-hero-lead);
  margin: var(--space-sm) 0 0;
}

.hero__field {
  position: relative;
  block-size: var(--layout-hero-field-height);
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  overflow: hidden;
}

.hero__field-media {
  position: absolute;
  inset: var(--space-md) 0 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.hero__field-media picture,
.hero__field-media img {
  display: block;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__satellites {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* Satellite 1 — the property/locate flag near the wellhead. Rest angle is
   the base transform so a reduced-motion visitor (and anyone before the
   first animation frame paints) sees the finished pose, never mid-swing. */
.hero__flag {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(-4deg);
  animation: flag-sway var(--duration-flag-sway) var(--ease-in-out) infinite;
}

.hero__flag-pole {
  stroke: var(--color-hero-eyebrow);
  stroke-width: 10;
}

.hero__flag-pennant {
  fill: var(--color-accent);
}

@keyframes flag-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}

/* Satellite 2 — the control-panel indicator lamp. Rest state is its peak
   opacity, per brief §7's reduced-motion statement. */
.hero__panel-glow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  fill: var(--color-hero-eyebrow);
  opacity: 1;
  animation: panel-pulse var(--duration-panel-glow) var(--ease-in-out) infinite alternate;
}

@keyframes panel-pulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Satellite 3 — the water-once ripple at the pipe's base. Rest state is its
   outer radius at opacity 0.4, never mid-expansion and never invisible. */
.hero__ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  fill: none;
  stroke: var(--color-hero-eyebrow);
  stroke-width: 10;
  transform: scale(1);
  opacity: 0.4;
  animation: ripple-pulse var(--duration-ripple) var(--ease-out) infinite;
}

@keyframes ripple-pulse {
  0%   { transform: scale(0.4); opacity: 0.55; }
  70%  { opacity: 0.15; }
  100% { transform: scale(1); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__flag,
  .hero__panel-glow,
  .hero__ripple {
    animation: none;
  }

  .hero__flag { transform: rotate(-4deg); }
  .hero__panel-glow { opacity: 1; }
  .hero__ripple { transform: scale(1); opacity: 0.4; }
}

@media (min-width: 64em) {
  /* Grid, not flex: the field spans BOTH rows beside the text column, and
     the lead sits in its own row under the content (not as a third flex
     item racing content and field for the row's width — the bug this
     replaces gave all three an equal, much-too-narrow share and wrapped
     the italic clause across four lines at the --text-hero ceiling). Text
     column carries more of the width than the field: a display face at the
     70.4px ceiling needs the room, and the field is a supporting visual,
     not the page's primary content. */
  .hero__inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "content field" "lead field";
    align-items: center;
    column-gap: var(--space-xl);
    row-gap: var(--space-sm);
    padding-block: var(--space-xl);
  }

  .hero__content {
    grid-area: content;
  }

  .hero__field {
    grid-area: field;
    align-self: stretch;
    block-size: auto;
    min-block-size: var(--layout-hero-field-height);
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .hero__field-media {
    inset: 0;
  }

  .hero__lead {
    grid-area: lead;
    max-width: var(--layout-measure);
  }
}

/* ============================================================================
   TRUST STRIP — three unnumbered ruled rows (brief §5.4). Row 1's value is
   the ONE surviving use of the business's own logo navy on the built site.
   The ground-texture image (imagery slot 4) sits behind this band, low
   opacity, background only — never a foreground subject.
   ============================================================================ */

.trust-strip {
  position: relative;
  overflow: hidden;
}

.trust-strip__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.14;
  z-index: var(--z-base);
}

.trust-strip__inner {
  position: relative;
  z-index: 1;
}

.trust-strip__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  max-width: var(--layout-measure);
}

.trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
  margin: 0;
}

.trust-strip__row:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.trust-strip__row dt {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.trust-strip__row dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-align: end;
}

.trust-strip__row--license dd {
  color: var(--color-brand-navy);
}

/* ============================================================================
   SERVICES — a ruled list, no card grid (brief §5.3). Two secondary images
   sit beside the list as a supporting visual pair, never as list items
   themselves, so the list itself stays a list of things the business does.
   ============================================================================ */

.services-layout {
  display: grid;
  gap: var(--space-xl);
}

.services-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-list__item {
  padding-block: var(--space-md);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.services-list__item:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.services-list__item h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  margin: 0 0 var(--space-2xs);
}

.services-list__item p {
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

.services-visuals {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.services-visuals figure {
  margin: 0;
}

.services-visuals img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md);
}

@media (min-width: 64em) {
  .services-layout {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

.financing-note {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
}

.financing-note h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  margin: 0 0 var(--space-2xs);
}

.financing-note p {
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

/* ============================================================================
   REVIEWS — letterpress-style cards (ref-010, brief §1/§5.6): a flat
   --color-surface ground with a 3px gold left border. Stacked, not a
   three-across grid, so Whiting and Rodriguez read as one adjacent pair in
   a single scroll, per the brief's binding pairing instruction (§0).
   ============================================================================ */

.reviews-stat {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-lg);
}

.reviews-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--layout-measure);
}

.review-card {
  background-color: var(--color-surface);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  padding: var(--space-md);
}

.review-card blockquote {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.review-card cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* ============================================================================
   CTA BAND — full-width, near the foot (brief §5.8): the call restated,
   large, no new claim. The direction-change beat of the band rhythm.
   ============================================================================ */

.cta-band {
  text-align: center;
}

.cta-band__phone {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  margin-block-end: var(--space-md);
}

.cta-band__phone a {
  color: inherit;
  text-decoration: none;
}

/* --- Form (unchanged from skeleton, tokens only) --------------------------- */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* --- Footer -----------------------------------------------------------------
   NAP, hours, service area and email — the fourth contact channel, never a
   primary or secondary CTA (brief §5.7). */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
}

.site-footer a {
  color: inherit;
  text-underline-offset: var(--space-3xs);
}

.site-footer__nap {
  font-style: normal;
  line-height: var(--leading-body);
}

.site-footer__nap strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}

.site-footer p {
  margin-block-start: var(--space-sm);
}

/* --- buy.html-only prose rhythm --------------------------------------------
   base.css zeroes block margins; buy.html's prose is bare <p> inside
   .container.measure, so consecutive paragraphs need their own gap. */

.buy__terms,
.buy__terms-links {
  margin-block-start: var(--space-md);
  color: var(--color-ink-muted);
}

[aria-labelledby='buy-title'] .measure > * + * {
  margin-block-start: var(--space-md);
}