/* ==========================================================================
   site.css — Patriot Plumbing, Prescott AZ. Components from brief.md (C3
   approved), built FROM tokens. No raw hex/size/font literal outside
   tokens.css; no !important (house-tech-spec §3, §12).

   Archetype spec-plate ("comes prepared"): a stamped, rivet-cornered
   equipment placard settles once, on load, over a graded photograph of the
   trade's own work; its corner rivet recurs as a small static head-mark
   opening every section below. Two-depth red: --color-accent (bright) for
   large numerals/rule-work/icon fills only, --color-accent-button
   (deepened) for every text-bearing role. Two radius treatments:
   --radius-sm on buttons/inputs/the plate frame, --radius-none on index
   rows/hairlines/trust-strip/FAQ — square objects. No dark band (brief
   §2.1).
   ========================================================================== */

/* Family register: bold-industrial is uppercase-tracked (tile-b's own
   specimen). copy.md's natural-case strings pass through unmodified —
   uppercased here via text-transform (house-tech-spec §8). */

h1, h2, h3,
.eyebrow,
.btn {
  text-transform: uppercase;
}

/* --- Layout primitives ---------------------------------------------------- */

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

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

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

/* Brief §4: the ruled/bordered ledger sections (service roster, equipment
   index, trust-strip) carry the wider figure; every other below-hero
   section uses .measure (720px) instead. */
.container--ledger {
  max-width: var(--layout-ledger);
}

/* --- Recurring corner-rivet head-mark (brief §4/§6) ------------------------
   The settled hero plate's top-left rivet recurs as a small, static
   head-mark opening every section below the hero. Fixed 8px dot, never
   scales down; the 28px hairline yields first if a label string runs long
   (brief §4's own stated minimum). */

.section-head-mark {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-sm);
}

.section-head-mark__dot {
  flex: 0 0 auto;
  width: var(--size-headmark-dot);
  height: var(--size-headmark-dot);
  background-color: var(--color-accent);
  border-radius: var(--radius-none);
}

.section-head-mark__rule {
  flex: 0 0 auto;
  width: var(--size-headmark-rule);
  height: var(--border-hairline);
  background-color: var(--color-border-strong);
}

/* --- Section head (eyebrow + h2), reused across every section below the
   hero. --------------------------------------------------------------- */

.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);
  color: var(--color-accent-button);
  margin-block-end: var(--space-2xs);
}

.section__head {
  margin-block-end: var(--space-md);
}

.section__head h2 {
  font-size: var(--text-h2);
  margin: 0;
}

/* --- Header & navigation (house shell + brief's sticky stack, brief §4). -- */

.site-header {
  position: relative;
  z-index: var(--z-header);
  min-height: var(--size-header-height);
  display: flex;
  align-items: center;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.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);
}

.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-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.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-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
}

.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. --radius-sm, uppercase/tracked labels (Chivo 700), matching
   the tile's own specimen. ------------------------------------------------- */

.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);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent-button);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background-color: var(--color-ink);
}

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

/* ==========================================================================
   HERO — spec-plate archetype (brief §3/§4). House order: eyebrow -> h1 ->
   primary CTA -> field (living-hero) -> lead -> facts. Desktop (>=64em):
   two columns, text ~52% / field ~48%, vertically centered. One grid whose
   named areas re-flow at the breakpoint, so DOM order stays mobile-first.
   ========================================================================== */

.hero {
  position: relative;
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  /* The hero's atmosphere gradient (brief §2.1 contrast row 10 — the ground
     the eyebrow is measured against, carried byte-identical from the tile). */
  background-image:
    radial-gradient(120% 90% at 22% 0%, var(--color-hero-atmosphere-1) 0%, transparent 55%),
    radial-gradient(130% 100% at 92% 100%, var(--color-hero-atmosphere-2) 0%, transparent 60%);
  background-color: var(--color-bg);
}

.hero__grid {
  display: grid;
  grid-template-areas:
    'eyebrow'
    'title'
    'cta'
    'field'
    'lead'
    'facts';
  row-gap: var(--space-sm);
}

.hero__eyebrow { grid-area: eyebrow; margin-block-end: 0; }
.hero__title   { grid-area: title; font-size: var(--text-hero); font-weight: var(--font-weight-display-black); line-height: var(--leading-tight); margin: 0; }
.hero__cta     { grid-area: cta; margin: 0; }
.hero__field   { grid-area: field; }
.hero__lead    { grid-area: lead; margin: 0; font-size: var(--text-lead); color: var(--color-ink-muted); max-width: var(--layout-measure); }
.hero__facts   { grid-area: facts; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-small); color: var(--color-ink-muted); }
.hero__facts li { list-style: none; }
.hero__facts li:not(:first-child)::before { content: '\00B7'; margin-inline-end: var(--space-sm); color: var(--color-border-strong); }

@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: 52fr 48fr;
    grid-template-areas:
      'eyebrow field'
      'title   field'
      'cta     field'
      'lead    field'
      'facts   field';
    column-gap: var(--space-xl);
    align-items: center;
  }

  .hero__field {
    align-self: center;
  }
}

/* The living-hero field: a stamped equipment placard riveting into place
   over a graded macro photograph (brief §5/§6). <picture> is the LCP
   element — fetchpriority high, no lazy load. The SVG overlay carries the
   plate's real, accessible <text> (design-rules §8: no baked-in text) and
   the rivet-glint physics; it never carries the photograph itself. */
.hero__field {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-surface);
}

.hero__field picture,
.hero__field img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The plate settles once on load: translateY(-14px) scale(.97) ->
   translateY(0) scale(1), 1.2s, ease-overshoot (brief §6). */
.hero__plate {
  transform-origin: 50% 50%;
  animation: plate-settle var(--duration-settle) var(--ease-overshoot) forwards;
  opacity: 0;
}

@keyframes plate-settle {
  0% { opacity: 0; transform: translateY(var(--size-plate-lift)) scale(.97); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The plate's four corner rivets glint on one shared 8.8s loop, staggered
   at 0/2.1/4.2/6.3s offsets (brief §6, tile-specified values unchanged). */
.hero__rivet {
  animation: rivet-glint var(--duration-glint) linear infinite;
}

.hero__rivet--2 { animation-delay: 2.1s; }
.hero__rivet--3 { animation-delay: 4.2s; }
.hero__rivet--4 { animation-delay: 6.3s; }

@keyframes rivet-glint {
  0%, 90%, 100% { opacity: .4; }
  94% { opacity: 1; }
}

.hero__plate-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-black);
  text-transform: uppercase;
}

.hero__plate-item {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .hero__plate {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__rivet {
    animation: none;
    opacity: .55;
  }
}

/* ==========================================================================
   FULL SERVICE ROSTER — brief §3 step 3 (LOAD-BEARING). Numbered ledger,
   plain ink-muted numerals — distinct from the equipment index's colour AND
   size (design-rules §5's nested-counter rule: two distinctions, not one).
   ========================================================================== */

.roster-list {
  margin-block-start: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.roster-row {
  display: flex;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.roster-row__num {
  flex: 0 0 auto;
  min-width: var(--size-spec-num-width);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  line-height: var(--leading-body);
}

.roster-row__label {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* ==========================================================================
   EQUIPMENT ON BOARD — brief §3 step 4. 3-row stamped ledger, large
   numerals in accent-button, on surface (brief §2.1's ledger-row role).
   ========================================================================== */

.equipment-panel {
  margin-block-start: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-none);
}

.equipment-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.equipment-row:last-child {
  border-block-end: none;
}

.equipment-row__num {
  flex: 0 0 auto;
  min-width: var(--size-spec-num-width);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-black);
  font-size: var(--text-numeral);
  color: var(--color-accent-button);
  line-height: 1;
}

.equipment-row__label {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  padding-block-start: var(--size-spec-label-offset);
}

.equipment-row__label strong {
  color: var(--color-ink);
}

.equipment-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: var(--size-equipment-media-max);
  margin-inline: auto;
  overflow: hidden;
}

.equipment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   TRUST-STRIP — brief §3 step 5 (LOAD-BEARING-adjacent). Cards on surface, square (radius-none).
   ========================================================================== */

.trust-grid {
  margin-block-start: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

@media (min-width: 40em) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trust-card {
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-none);
}

.trust-card__item {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  margin: 0;
}

/* Trust-strip / reviews divider — a narrow horizontal seam image (brief §5
   slot 3), secondary, lazy-loaded, decorative. */
.trust-divider {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 382;
  overflow: hidden;
  margin-block-start: var(--space-lg);
}

.trust-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   REVIEWS — brief §3 step 6 (LOAD-BEARING). Three verbatim Google quotes,
   left border in the tile's own reviewed treatment (tiles/tile-b.html
   .review-quote): Chivo italic quote, Barlow attribution.
   ========================================================================== */

.review-list {
  margin-block-start: var(--space-md);
  display: grid;
  gap: var(--space-lg);
}

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

.review-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-body);
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
}

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

/* ==========================================================================
   PROCESS — brief §3 step 7 (FLAVOR). Four unnumbered flow steps —
   deliberately no numerals; the roster and equipment sections already own
   the page's two numeral systems (design-rules §4/§5, "two counters, one
   costume").
   ========================================================================== */

.process-list {
  margin-block-start: var(--space-md);
  display: grid;
  gap: var(--space-lg);
}

.process-step h3 {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-2xs);
}

.process-step p {
  margin: 0;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   SERVICE AREA — brief §3 step 8 (FLAVOR, near-unoccupied). Six named
   towns, deliberately low visual weight (brief §5).
   ========================================================================== */

.service-area-motif {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 502;
  overflow: hidden;
  margin-block-start: var(--space-md);
  max-width: var(--size-motif-max);
}

.service-area-motif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   FAQ — brief §3 step 9 (FLAVOR, unoccupied in Cache Valley). Native
   <details>/<summary>.
   ========================================================================== */

.faq-list {
  margin-block-start: var(--space-md);
  display: grid;
  gap: 0;
}

.faq-item {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.faq-item summary {
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: '+';
  display: inline-block;
  inline-size: var(--size-marker-width);
  color: var(--color-accent-button);
  font-weight: var(--font-weight-display-black);
}

.faq-item[open] summary::before {
  content: '\2212';
}

.faq-item p {
  padding-block-end: var(--space-sm);
  margin: 0;
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

/* ==========================================================================
   QUOTE-FORM CTA — brief §3 step 10 (LOAD-BEARING). House form contract
   (spec §6).
   ========================================================================== */

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

.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);
  font-size: var(--text-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);
}

.contact__secondary {
  margin-block-start: var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.contact__secondary a {
  color: var(--color-ink);
}

/* --- Footer (house shell, unmodified register). ---------------------------- */

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

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

.site-footer__nap {
  font-style: normal;
}

.site-footer__nap strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
  text-transform: uppercase;
}

/* --- thanks.html vertical rhythm ---------------------------------------
   base.css zeroes block margins and thanks.html's prose is bare <p> inside
   .container.measure, same shape buy.html had before preview.css's own fix
   (see that file). Same answer, one step of the same scale, this time in
   site.css because thanks.html is not preview-only chrome. */
[aria-labelledby='thanks-title'] .measure > * + * {
  margin-block-start: var(--space-md);
}