/* ==========================================================================
   site.css — Parks & Parks and Sons Masonry, Moline IL (Quad Cities).

   split-hero archetype (design-rules §7): text block vs. visual block,
   asymmetric weight. One breakpoint only — 64rem (brief §5.2). No hex/px/
   font literal below — tokens only (house-tech-spec §3).
   ========================================================================== */

/* --- Layout primitives (house pattern, unchanged from the skeleton) ------- */

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

/* --- The struck-joint mark — this site's recurring signature device
   (brief §6.6, §8). In the hero it draws once on load across the brick
   field; reused everywhere else, already settled, as the head-rule of every
   section from services-specific through estimate-cta. Fixed 48px width, a
   fixed --space-md inset — no minimum-collapse case (brief §6.6).

   COLOUR — corrected 2026-09-22 (`ad-ruling--head-rule-color.md`, confirmed
   independently in `c3-addendum--head-rule-color.md`): every non-hero reuse
   renders in `--color-accent` at `--border-thick`, reusing F5 (6.65:1 on
   `--color-bg`, brief §4.1) — every section on this site sits on the page's
   own `--color-bg`, never `--color-surface`, so F5 is the pairing every
   instance uses; F6 is named in the brief for a section that would sit on
   `--color-surface`, which none here does. Cream (the Builder's interim fix)
   is a hero-image-only pairing and never applies to a flat-ground reuse. */

.joint-mark {
  display: block;
  width: var(--joint-mark-width);
  height: var(--border-thick);
  margin-inline-start: var(--space-md);
  margin-block-end: var(--space-sm);
  background-color: var(--color-accent);
}

/* The hero's own instance draws once on load, left to right, across the
   brick field (a struck-joint gesture, not a decorative underline). Safe
   default (and the prefers-reduced-motion state, house-tech-spec §8) is
   fully drawn; the animation only runs when motion is welcome. */
.joint-strike {
  display: block;
  width: 100%;
  height: var(--border-thick);
  background-color: var(--color-bg);
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .joint-strike {
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: joint-strike-draw var(--duration-joint-strike) var(--ease-out) forwards;
  }
}

@keyframes joint-strike-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Running kicker label. Authored in natural case, uppercased with
   text-transform — never typed in caps (house-tech-spec §8). */
.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Sticky bar (brief §6 "Sticky bar") — wordmark + tel: link only, no
   nav item list (brief: "no nav item list ships"). Sticky chrome arithmetic
   (brief §5.3) treats the header as persistent chrome. ---------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--layout-header-height);
  display: flex;
  align-items: center;
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border-strong);
  background-color: var(--color-bg);
}

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

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

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

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

/* --- Buttons (design-rules §4: no pill token exists on this site) --------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-thick) 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: transform var(--duration-fast) var(--ease-out);
}

/* Letterpress construction (ref-010): a heavy ink border with a hard,
   un-blurred colour offset behind it. The site's only shadow, and it
   appears on exactly two element types — this button and the trust-strip
   cards (brief §3.3, §6.3). */
.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-ink);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-letterpress);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translate(calc(var(--press-shift) * -1), calc(var(--press-shift) * -1));
}

.btn--quiet {
  /* Outline button: the border is the whole control, so it takes the 3:1
     control-boundary token (WCAG 1.4.11). */
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

/* --- Hero (split-hero archetype, brief §5) --------------------------------
   Below 64rem: single-column stack. At/above 64rem: two-column split, text
   ~52% / field ~48%, align-items: start (never center — brief §5.1 rule 2).
   The field appears exactly once on the page and carries the only ambient
   motion and the only gradient atmosphere (brief §5.1 rule 3, §4.3). ------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  background: radial-gradient(120% 90% at 30% 0%,
    var(--color-halo-cream) 0%, var(--color-bg) 62%, var(--color-halo-clay) 100%);
}

.hero__inner {
  position: relative;
}

.hero__eyebrow {
  margin-block-end: var(--space-2xs);
}

.hero h1 {
  margin: 0;
  font-size: var(--text-hero);
  color: var(--color-ink);
}

.hero h1 .accent {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
}

.hero__cta-row .btn {
  margin: 0;
}

.hero__secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink);
  text-decoration: none;
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border-strong);
}

.hero__secondary-link:hover,
.hero__secondary-link:focus-visible {
  color: var(--color-accent);
}

.hero__field {
  position: relative;
  isolation: isolate;
  overflow: clip;
  height: var(--field-height);
  margin-block-start: var(--space-md);
  border: var(--border-thick) var(--border-style) var(--color-ink);
}

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

.hero__joint-strike {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 52%;
  z-index: 1;
}

/* The independent trowel-glint — a slow, separately-timed sweep across the
   struck joint (brief §8, ref-001's satellite-float logic). Rest state
   under reduced motion: held at 40% travel, 0.5 opacity, never invisible
   and never mid-sweep. */
.hero__glint {
  position: absolute;
  inset-block-start: 46%;
  inset-inline-start: -20%;
  z-index: 2;
  width: 30%;
  height: 12%;
  background: linear-gradient(90deg,
    transparent 0%, var(--color-halo-cream) 50%, transparent 100%);
  opacity: var(--glint-rest-opacity);
  transform: var(--glint-rest-transform);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__glint {
    animation: glint-sweep var(--loop-glint) linear infinite;
  }
}

@keyframes glint-sweep {
  from { transform: translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translateX(300%); opacity: 0.6; }
  90%  { opacity: 0.6; }
  to   { transform: translateX(500%); opacity: 0; }
}

.hero__lead {
  margin-block-start: var(--space-sm);
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

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

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

@media (min-width: 64rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    /* Five explicit rows, one per text element, so the field's
       `grid-row: 1 / -1` spans a known, named set of tracks rather than
       triggering implicit-row inflation across an ambiguous auto-row
       count — the same house pattern hytek-water-conditioning-north-logan-ut
       uses for the same reason. */
    grid-template-rows: repeat(5, auto);
    align-items: start;
    column-gap: var(--space-xl);
  }

  .hero__eyebrow,
  .hero h1,
  .hero__cta-row,
  .hero__lead,
  .hero__facts {
    grid-column: 1;
  }

  /* Fourth in DOM, second in the grid: the ask stays ahead of the picture
     (design-rules §7.2 rule 1). */
  .hero__field {
    grid-column: 2;
    grid-row: 1 / -1;
    height: var(--field-height-desktop);
    margin-block-start: 0;
  }

  .hero__cta-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }
}

/* --- §II services-specific [LOAD-BEARING] — a ruled index, never an icon
   grid (design-rules §4). Roman-numeral marks in the italic display face
   (brief §2.1). --------------------------------------------------------- */

.services-index {
  margin: 0;
  margin-block-start: var(--space-md);
}

.services-index__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

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

.services-index__num {
  flex: 0 0 auto;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lead);
  color: var(--color-accent);
}

.services-index__name {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* The stone row carries the slot-3 image, beside the row it illustrates
   (copy.md §1.4) — a small inline specimen chip, not a block image, at
   every width. Critic r1 lensB/rhythm: a full-width block image made this
   one row 4.7x-6.4x taller than every sibling row in the LOAD-BEARING
   services index, reading as broken spacing rather than a deliberate
   accent; a fixed-height inline thumbnail keeps the row within a small,
   deliberate-looking multiple of its siblings at every width. */
.services-index__row--stone {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-sm);
}

.services-index__media {
  flex: 0 0 auto;
  margin-inline-start: auto;
  height: var(--services-media-height);
  border: var(--border-thick) var(--border-style) var(--color-ink);
}

.services-index__media img {
  display: block;
  width: auto;
  height: 100%;
}

/* --- §III trust-strip [LOAD-BEARING] — letterpress cards (ref-010). ------- */

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

.trust-card {
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-thick) var(--border-style) var(--color-ink);
  box-shadow: var(--shadow-letterpress);
}

.trust-card__heading {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-h3);
  color: var(--color-ink);
}

.trust-card__body {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

@media (min-width: 64rem) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- §IV process — numbered index, numeral as a separate badge, never
   concatenated with its heading (copy.md §1.6). The Build row carries the
   slot-2 image beside it. ------------------------------------------------- */

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

.process-index__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
}

.process-index__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
  color: var(--color-accent);
}

.process-index__heading {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-h3);
  color: var(--color-ink);
}

.process-index__desc {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

.process-index__media {
  /* Spans both of the row's columns so it never auto-places into column 1
     alongside the numeral, where its own intrinsic size would inflate that
     column's auto track and squeeze the heading/description into column 2
     (found at build, 375px). */
  grid-column: 1 / -1;
  margin-block-start: var(--space-sm);
  max-width: var(--process-media-width);
  border: var(--border-thick) var(--border-style) var(--color-ink);
}

.process-index__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 64rem) {
  .process-index__row--build {
    grid-template-columns: auto 1fr auto;
  }

  .process-index__media {
    grid-row: 1 / 1;
    grid-column: 3;
    align-self: start;
    margin-block-start: 0;
  }
}

/* --- §V reviews [LOAD-BEARING] — figure/blockquote, honest attribution --- */

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

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

.review__quote {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-ink);
}

.review__attr {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.review__media {
  margin-block-start: var(--space-sm);
  max-width: var(--review-media-width);
  border: var(--border-thick) var(--border-style) var(--color-ink);
}

.review__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 64rem) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- §VII faq — native <details>/<summary>, no JS required (house-tech-spec
   §8's native-UX-integrity list: keyboard behaviour stays standard). ------ */

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

.faq__item {
  padding-block: var(--space-sm);
  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__question {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  cursor: pointer;
}

.faq__answer {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

/* --- §VIII estimate-cta / form (skeleton default shape) ------------------- */

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

.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-strong);
  border-radius: var(--radius-sm);
}

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

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

/* Honeypot: present in the DOM for bots, unreachable for humans and
   assistive tech. Not display:none — some bots skip those. */
.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 ---------------------------------------------------------------- */

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

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

.site-footer__nap {
  font-style: normal;
  color: var(--color-ink);
}

.site-footer__nap a {
  color: var(--color-accent);
}