/* site.css — Wilton Krause Septic. Archetype `pour-and-set` (brief §3).
   Tokens only (house-tech-spec §3); escape hatches: house breakpoints
   (48em/64em/90em) and `@allow-literal: reason`. */

/* --- 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);
}

/* --- Settled form-line head-rule (brief §4/§5/§7): the struck form's edge,
   flattened to a static 4px rule, reused atop every section below the hero. */

.rule-head {
  display: block;
  width: 100%;
  height: var(--rule-head-height);
  margin-block-end: var(--space-lg);
  background-color: var(--color-accent);
  border: 0;
}

/* --- Header & nav. Sticky stack (brief §3.4/§4): bar+header both sticky.
   padding-block: 4px mobile -> 53px total w/ 44px tap+1px border; 12px at
   64em+ -> 69px total (brief §4 rule 6: 44+69=113). */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
  z-index: var(--z-header);
  padding-block: var(--space-3xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

@media (min-width: 64em) {
  .site-header {
    padding-block: var(--space-xs);
  }
}

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

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

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

/* House default: closed below 48em with no JS gate (QA r3 FIX precedent —
   collapsing AFTER first paint is a CLS race). <noscript> override in
   @shared:head-boilerplate restores it for JS-off visitors. */
.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;
  }
}

.site-header__call {
  flex: 0 0 auto;
}

/* --- Buttons ---------------------------------------------------------------- */

.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 {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

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

/* --- Eyebrow ----------------------------------------------------------------
   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);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Hero — "the form is struck" (brief §3, §6, §7) ------------------------
   DOM order (design-rules §7.2): eyebrow->h1->CTA->field->lead->facts.
   <64em: stacked, gradient behind text (brief §2.2). 64em+: 2-col grid,
   field col1/text col2 via grid-column; text column flat bg (brief §4
   rule 5). */

.hero {
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  background: radial-gradient(ellipse 130% 90% at 50% 0%, var(--color-glow) 0%, var(--color-bg) 65%);
}

@media (min-width: 64em) {
  .hero {
    background: var(--color-bg);
  }
}

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

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  hyphens: auto;
  overflow-wrap: break-word;
}

.hero__cta-row {
  margin: 0;
  margin-block-start: var(--space-sm);
}

.hero__field {
  position: relative;
  isolation: isolate;
  overflow: clip;
  height: var(--hero-field-height);
  margin-block-start: var(--space-md);
  background-color: var(--color-surface);
}

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

/* The struck form: a flat mask that retracts upward once on load, never
   repeating (brief §7). Reduced motion: tokens.css collapses
   --duration-settle to ~0, finishing the 1-shot at first paint, already
   settled, nothing visibly moving. */
.hero__strike-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-bg);
  transform-origin: top;
  animation: form-struck var(--duration-settle) var(--ease-settle) 1 both;
  pointer-events: none;
}

@keyframes form-struck {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* Ambient loop 1: the work-light glow at the hook's pivot, 5.2s, independent
   of loop 2. Starts once the strike settles. Rest state under reduced
   motion: a fixed mid-opacity glow, never invisible, never mid-pulse. */
.hero__worklight {
  position: absolute;
  inset-inline-end: 12%;
  inset-block-start: 18%;
  z-index: 1;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  opacity: var(--worklight-rest-opacity);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__worklight {
    animation: worklight-pulse var(--duration-ambient-a) var(--ease-ambient) var(--duration-settle) infinite;
  }
}

@keyframes worklight-pulse {
  0%, 100% { opacity: var(--worklight-rest-opacity); }
  50%      { opacity: 0.95; }
}

/* Ambient loop 2: two rebar-tie glints, 7.4s, independent of loop 1 (not a
   multiple of 5.2s). Critic r1 FIX: the old 14%x3% bar at 0.4-0.85 opacity
   read as a flat artifact over blank concrete. Rebuilt small/blurred/near-
   invisible at rest, anchored over two real tie-rod marks in the hero
   master (~46.4%/37.8%, ~67.4%/48.5%) rather than a block over plain
   texture. */
.hero__glint {
  position: absolute;
  z-index: 1;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-ink) 0%, transparent 72%);
  filter: blur(var(--glint-blur));
  opacity: var(--glint-rest-opacity);
  pointer-events: none;
}

.hero__glint--1 {
  inset-inline-start: 46.4%;
  inset-block-start: 37.8%;
}

.hero__glint--2 {
  inset-inline-start: 67.4%;
  inset-block-start: 48.5%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__glint {
    animation: glint-pulse var(--duration-ambient-b) var(--ease-ambient) var(--duration-settle) infinite;
  }
}

@keyframes glint-pulse {
  0%, 100% { opacity: var(--glint-rest-opacity); }
  50%      { opacity: 0.55; }
}

/* Reduced motion: frozen at the brief's own stated rest value (§7: "rebar-
   glint 0.4"), not the live loop's much-lower trough above. */
@media (prefers-reduced-motion: reduce) {
  .hero__glint {
    opacity: var(--glint-reduced-motion-opacity);
  }
}

.hero__lead {
  margin: 0;
  margin-block-start: var(--space-md);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

.hero__facts {
  margin: 0;
  margin-block-start: var(--space-sm);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
}

@media (min-width: 64em) {
  .hero__grid {
    display: grid;
    grid-template-columns: 1fr var(--hero-text-col);
    /* Explicit rows: the field's grid-row:1/-1 span needs a known row count,
       or track-sizing inflates row 1 alone, opening a false ~243px gap
       between eyebrow and H1 (measured at 1024px). */
    grid-template-rows: repeat(5, auto);
    align-items: start;
    column-gap: var(--hero-gap);
  }

  .hero__eyebrow,
  .hero__title,
  .hero__cta-row,
  .hero__lead,
  .hero__facts {
    grid-column: 2;
  }

  .hero__field {
    grid-column: 1;
    grid-row: 1 / -1;
    height: auto;
    aspect-ratio: 843 / 460;
    margin-block-start: 0;
  }
}

@media (min-width: 90em) {
  .hero__grid {
    grid-template-columns: 1fr var(--hero-text-col-wide);
  }
}

/* --- Trust strip — four-plate spec index (brief §3.1 row 4, §4) -----------
   Mobile: stacked list, each plate headed by its own top rule + rivet
   corners. Desktop (>=64em): repeat(4,1fr), no gap, shared border-right
   dividers instead.

   Critic r1 FIX: imagery slot 2 (brief §6.2) was generated but never wired,
   undelivering ref-008's "tactile architecture" register. Wired as a lazy
   decorative <img> (alt="") full-bleed behind the content at 18% opacity
   over --color-bg, so brief §2.2's verified contrast pairs hold. */
.trust-strip {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg);
}

.trust-strip__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
}

.trust-strip__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.trust__list {
  margin: 0;
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

.trust__plate {
  position: relative;
  padding-block-start: var(--space-md);
  padding-inline-start: var(--space-sm);
  border-block-start: var(--border-thick) var(--border-style) var(--color-accent);
}

.trust__plate::before,
.trust__plate::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--rivet-size) * -0.5 - var(--border-thick));
  width: var(--rivet-size);
  height: var(--rivet-size);
  border-radius: 50%;
  background-color: var(--color-accent);
}

.trust__plate::before {
  inset-inline-start: 0;
}

.trust__plate::after {
  inset-inline-end: var(--space-sm);
}

.trust__figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: var(--leading-tight);
  color: var(--color-accent);
}

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

@media (min-width: 64em) {
  .trust__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .trust__plate {
    padding: var(--space-md);
    padding-inline-end: var(--space-lg);
    border-block-start: none;
    border-inline-end: var(--border-hairline) var(--border-style) var(--color-border);
  }

  .trust__plate:last-child {
    border-inline-end: none;
  }

  .trust__plate::before,
  .trust__plate::after {
    inset-block-start: 0;
  }
}

/* --- Services — "What We Do" (brief §3.1 row 5) ----------------------------
   Verbatim list, house order. Desktop: repeat(2,1fr) inside a centred 64rem
   inner container (brief §4). */

.services__intro {
  margin-block-start: var(--space-sm);
}

.services__list {
  margin: 0;
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.services__list li {
  max-width: none;
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.services__list strong {
  display: block;
  color: var(--color-ink);
}

.services__cta {
  margin: 0;
  margin-block-start: var(--space-lg);
}

@media (min-width: 64em) {
  .services__inner {
    max-width: var(--content-maxw-mid);
  }

  .services__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-xl);
  }
}

/* --- Build Sequence (brief §3.1 row 6). Leading-zero/ink-muted numerals,
   visually distinct from the trust-strip's bare figures (brief §5). Plan-
   view diagram (slot 3) spans full width above the grid. Desktop: 4-up. */

.build__diagram {
  margin: 0;
  margin-block-start: var(--space-lg);
  max-width: var(--build-diagram-maxw);
}

.build__diagram img {
  width: 100%;
  height: auto;
}

.build__list {
  margin: 0;
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

.build__step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
  align-items: baseline;
}

.build__num {
  font-family: var(--font-display);
  font-size: var(--text-index);
  line-height: var(--leading-tight);
  color: var(--color-ink-muted);
}

.build__step-title {
  display: block;
  margin-block-end: var(--space-3xs);
  color: var(--color-ink);
}

.build__step p {
  margin: 0;
}

@media (min-width: 64em) {
  .build__inner {
    max-width: var(--content-maxw-mid);
  }

  .build__list {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--space-lg);
  }

  .build__step {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 90em) {
  .build__inner {
    /* brief §4: 64rem@1024, 80rem@1440 — the inner container widens a step
       at the upper design target rather than staying fixed like Services'. */
    max-width: var(--content-maxw-wide);
  }
}

/* --- Reviews — "What New Braunfels Says" (brief §3.1 row 7) ---------------
   Verbatim quotes, attribution as displayed on Google (house-tech-spec §8:
   authored in natural case, never typed in caps). Desktop: repeat(2,1fr). */

.reviews__list {
  margin: 0;
  margin-block-start: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

.review {
  padding: var(--space-md);
  background-color: var(--color-surface);
  max-width: var(--prose-maxw-wide);
}

.review blockquote {
  margin: 0;
  color: var(--color-ink);
}

.review cite {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-emphasis);
  font-style: italic;
  color: var(--color-ink-muted);
}

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

  .review {
    max-width: none;
  }
}

/* --- Service area — "Where We Work" (brief §3.1 row 8) --------------------- */

.area__body {
  margin-block-start: var(--space-sm);
}

.area__chips {
  margin: 0;
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}

.area__chips li {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-ink);
}

.area__divider {
  margin: 0;
  margin-block-end: var(--space-md);
  width: var(--divider-img-width);
}

.area__divider img {
  width: 100%;
  height: auto;
}

@media (min-width: 64em) {
  .area__inner {
    max-width: var(--area-maxw);
  }
}

/* --- FAQ — "Septic Questions, Answered Plainly" (brief §3.1 row 9) --------
   Centred 70ch, unchanged at every desktop width (a stated narrow
   composition, brief §4). */

.faq__inner {
  max-width: var(--prose-maxw-wide);
  margin-inline: auto;
}

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

.faq__item {
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__q {
  margin: 0;
  color: var(--color-ink);
}

.faq__a {
  margin: 0;
  margin-block-start: var(--space-2xs);
  color: var(--color-ink-muted);
}

/* --- CTA band — "Get a Septic Estimate" (brief §3.1 row 10) ----------------
   Full-bleed surface band, centred inner content, 1 column, 50ch headline
   cap (brief §4). Doubles as the house #contact section/form. */

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

.cta-band__inner {
  max-width: var(--cta-band-maxw);
  margin-inline: auto;
  text-align: center;
}

.cta-band__lead {
  margin-inline: auto;
}

.cta-band__inner .rule-head {
  margin-inline: auto;
}

.cta-band__cta {
  margin-block-start: var(--space-md);
}

.cta-band .form {
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  text-align: start;
}

/* --- Form ------------------------------------------------------------------- */

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

.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 ------------------------------------------------------------------
   Brief §4: full-width, inner capped 64rem centred, repeat(3,1fr) @1024+
   (NAP · nav · hours/licence line). */

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

.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
}

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

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

.site-footer__nav {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}

@media (min-width: 64em) {
  .site-footer__inner {
    max-width: var(--content-maxw-mid);
    margin-inline: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}