/* ==========================================================================
   site.css — skeleton primitives (header/nav, buttons, form, footer) plus
   brief.md §3-§6's components, built on top. Tokens only (house-tech-spec
   §3). Archetype: annotated-profile. Full-bleed bands throughout (brief §4):
   no section uses the house centred 72rem container, so .container's
   max-width is dropped once below and every section states its own inline
   gutter at the house 64em breakpoint (brief's own declared desktop
   switch), with Header and Services stepping through an intermediate
   48-64em tier exactly as the brief's table states.
   ========================================================================== */

/* --- Layout primitives (skeleton, unmodified). ----------------------------- */

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

/* --- Header & navigation (skeleton, unmodified). --------------------------- */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  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);
  column-gap: var(--space-xs);
}

.site-header__brand {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-body);
  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-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;
  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);
}

.site-nav {
  display: none;
  flex-basis: 100%;
  order: 1;
}

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

.site-header .site-header__call {
  flex: none;
  padding: 0;
  min-inline-size: var(--layout-tap-min);
}

@media (min-width: 48em) {
  .site-header__inner {
    column-gap: var(--space-sm);
  }

  .site-nav {
    display: block;
    flex-basis: auto;
    order: 0;
    margin-inline-start: auto;
  }

  .site-header__brand {
    flex: none;
    font-size: var(--text-h3);
  }

  .site-header .site-header__call {
    padding: var(--space-xs) var(--space-md);
  }

  .site-header__call .visually-hidden:not(:focus):not(:active) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

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

/* --- Buttons (skeleton, unmodified). ---------------------------------------- */

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

/* --- Form (skeleton, unmodified). ------------------------------------------- */

.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-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 (skeleton primitives — extended by the brief's own grid below). - */

.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 {
  text-underline-offset: var(--space-3xs);
}

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

/* BRIEF COMPONENTS — everything below is this site's own (archetype: annotated-profile). */

/* Full-bleed override (brief §4: every section is its own band, no
   page-level max-width box). Wins on source order at equal specificity
   over the skeleton rule above — no !important (spec §12). */
.container {
  max-width: none;
}

/* Desktop inline gutter — 4rem at >=64em everywhere (brief §4), Header and
   Services stepping through 3rem at 48-64em first. padding-block stays
   .section's alone (--section-gap, brief §2.4) — never repeated here. */
@media (min-width: 48em) {
  .site-header__inner,
  #services > .container {
    padding-inline: var(--space-gap-lg);
  }
}

@media (min-width: 64em) {
  .site-header__inner,
  .hero__inner,
  .hero > .container,
  #trust > .container,
  #services > .container,
  #permit > .container,
  #service-area > .container,
  .about__inner,
  #hours > .container,
  #contact > .container,
  .site-footer__grid,
  .site-footer > .container {
    padding-inline: var(--space-xl);
  }
}

/* Alternating band grounds (brief §4's Band-bg column). */
.section--surface {
  background-color: var(--color-surface);
}

/* The recurring head-rule (brief §2.5): the settled hero device, flattened
   into a 3px stacked bar (topsoil/caliche/clay) with an 8px accent dot,
   reused atop every section after the hero. Below 240px the dot drops
   first; the three bands alone still carry the motif. */
.head-rule {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--rule-height);
  margin-block-end: var(--space-md);
  background-image: linear-gradient(
    to bottom,
    var(--color-strata-topsoil) 0,
    var(--color-strata-topsoil) 33.33%,
    var(--color-strata-caliche) 33.33%,
    var(--color-strata-caliche) 66.66%,
    var(--color-strata-clay) 66.66%,
    var(--color-strata-clay) 100%
  );
}

.head-rule__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: var(--rule-dot-size);
  height: var(--rule-dot-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

@media (max-width: 240px) {
  /* @allow-literal: brief §2.5's own stated failure-mode breakpoint */
  .head-rule__dot {
    display: none;
  }
}

/* Eyebrow / accent word (shared typographic primitives). */
.eyebrow {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.accent-word {
  font-family: var(--font-emphasis);
  font-weight: var(--font-weight-emphasis);
  font-style: italic;
  color: var(--color-accent);
}

/* HERO — archetype: annotated-profile (brief §3.2, §4 row 2, §6). Mobile:
   single column, device in a fixed 190px field. Desktop (>=64em): grid 50ch
   1fr, visual column fills the remainder, device becomes aspect-ratio. */

.hero {
  padding-block-start: var(--space-xl);
  /* §2.4's hard rule: --section-gap is the only padding-block token, used
     here at the hero's own padding-block-end; §4's "5rem" figure is that
     table's own derived approximation, superseded (see README). */
  padding-block-end: var(--section-gap);
  background-color: var(--color-bg);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hero__heading {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  margin-block: 0 var(--space-md);
}

.hero__text > .btn {
  margin-block-end: var(--space-md);
}

.hero__lead-wrap {
  margin-block-start: var(--space-lg);
}

.hero__lead {
  max-width: var(--layout-measure);
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-lead);
}

.hero__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero-field {
  position: relative;
  overflow: hidden;
  /* Mobile: the brief's own 190px-tall device field (§3.2 arithmetic). */
  height: var(--hero-field-height);
}

.hero-field__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Strata settle — fade + rise on load (brief §6 step 1); the base state
   IS the final appearance, so reduced motion just removes the animation. */
.hero-field__img {
  animation: hero-strata-settle var(--duration-strata-settle) var(--ease-out) both;
}

@keyframes hero-strata-settle {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Index line draws left-to-right, 0->1.1s (brief §6 step 2), positioned
   along the strata boundary (measured ~63% down the frame). */
.hero-device-line {
  position: absolute;
  inset-inline: 8% 8%;
  inset-block-start: 63%;
  width: 84%;
  height: var(--icon-size-md);
  color: var(--color-accent);
  overflow: visible;
}

.hero-device-line__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transform-origin: left center;
  animation: hero-line-draw var(--duration-line-draw) var(--ease-out) both;
}

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

/* The four nodes pop in sequence (brief §6 step 3). Real, readable text —
   never aria-hidden (copy.md: ordinary content, paired with the caption). */
.hero-device-nodes {
  position: absolute;
  inset-inline: 8% 8%;
  inset-block-start: 63%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-device-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  transform: scale(0);
  opacity: 0;
  animation-name: hero-node-pop;
  animation-duration: var(--duration-node-pop);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}

.hero-device-node--1 { animation-delay: var(--delay-node-1); }
.hero-device-node--2 { animation-delay: var(--delay-node-2); }
.hero-device-node--3 { animation-delay: var(--delay-node-3); }
.hero-device-node--4 { animation-delay: var(--delay-node-4); }

@keyframes hero-node-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-device-node__dot {
  width: var(--rule-dot-size);
  height: var(--rule-dot-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.hero-device-node__label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  background-color: var(--color-bg);
  padding-inline: var(--space-3xs);
  white-space: nowrap;
}

/* Two independent, non-synced ambient loops (ref-001), brief §6 step 4. */
.hero-device-pencil {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-end: 22%;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: var(--color-ink-muted);
  opacity: 0;
  animation: hero-pencil-glint var(--duration-ambient-pencil) var(--ease-in-out) var(--delay-ambient-start) infinite;
}

@keyframes hero-pencil-glint {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

.hero-device-compass {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: 6%;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--color-ink-muted);
  opacity: 0.6;
}

.hero-device-compass__needle {
  transform-origin: center;
  animation: hero-compass-turn var(--duration-ambient-compass) linear var(--delay-ambient-start) infinite;
}

@keyframes hero-compass-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* tokens.css collapses durations to 0.01ms; this pairs it with
   `animation: none` so an infinite loop actually stops (spec §12, no
   !important — wins on source order). */
@media (prefers-reduced-motion: reduce) {
  .hero-field__img,
  .hero-device-line__path,
  .hero-device-node,
  .hero-device-pencil,
  .hero-device-compass__needle {
    animation: none;
  }

  .hero-field__img { opacity: 1; transform: none; }
  .hero-device-line__path { transform: scaleX(1); }
  .hero-device-node { opacity: 1; transform: scale(1); }
  .hero-device-pencil { opacity: 0.9; }
}

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

@media (min-width: 64em) {
  .hero__inner {
    display: grid;
    grid-template-columns: var(--measure-course) 1fr;
    gap: var(--space-gap-lg);
    align-items: start;
  }

  .hero-field {
    height: auto;
    aspect-ratio: 14 / 9;
  }
}

/* TRUST STRIP (brief §4 row 3). */

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

.trust-card__figure {
  margin: 0 0 var(--space-3xs);
  max-width: var(--measure-card);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
}

.trust-card__caption {
  margin: 0;
  max-width: var(--measure-card);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

@media (min-width: 64em) {
  .trust-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gap-md);
  }

  .trust-card {
    align-self: start;
  }
}

/* SERVICES (brief §4 row 4). */

.services__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.services__diagram {
  width: 100%;
  max-width: var(--image-box-sm);
  height: auto;
  margin-block-end: var(--space-md);
}

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

.services-list__item {
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  max-width: var(--measure-course);
}

@media (min-width: 64em) {
  .services__grid {
    display: grid;
    grid-template-columns: var(--measure-intro) 1fr;
    gap: var(--space-gap-lg);
    align-items: start;
  }

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

  .services__diagram {
    max-width: var(--image-box-sm);
  }

  .services-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-gap-md);
    row-gap: var(--space-md);
  }

  .services__grid > * {
    align-self: start;
  }
}

/* THE PERMIT, EXPLAINED — the representative/binding section (brief §4 row 5). */

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

.permit-step__index {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  color: var(--color-accent);
}

.permit-step__heading {
  margin: 0 0 var(--space-xs);
  max-width: var(--measure-heading);
  font-size: var(--text-h3);
}

.permit-step p:not(.permit-step__index) {
  margin: 0;
  max-width: var(--measure-course);
}

@media (min-width: 64em) {
  .permit-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gap-md);
  }

  .permit-step {
    align-self: start;
  }
}

/* SERVICE AREA (brief §4 row 6). */

.service-area__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.towns-list {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  font-weight: var(--font-weight-body-strong);
}

.towns-list li {
  padding-block: var(--space-3xs);
}

.service-area__image {
  width: 100%;
  max-width: var(--image-box-area);
  height: auto;
  margin-inline: auto;
}

@media (min-width: 64em) {
  .service-area__grid {
    display: grid;
    grid-template-columns: var(--measure-area) 1fr;
    gap: var(--space-gap-lg);
    align-items: center;
  }

  .service-area__text {
    max-width: var(--measure-area);
  }
}

/* ABOUT & CREDENTIALS (brief §4 row 7) — texture behind a 94%-opacity scrim (§2.2), never bare under text. */

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

.about__scrim {
  background-image:
    linear-gradient(var(--color-surface-scrim), var(--color-surface-scrim)),
    image-set(
      url('/assets/img/about-caliche-texture.avif') type('image/avif'),
      url('/assets/img/about-caliche-texture.webp') type('image/webp')
    );
  background-size: cover;
  background-position: center;
}

.about__inner {
  max-width: var(--layout-measure);
  margin-inline: auto;
}

/* HOURS & SEASON (brief §4 row 8) — flex row at 48em, the brief's own exception to the house 64em default. */

.hours__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hours-list {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--row-max-hours);
  padding-block: var(--space-3xs);
}

.hours-list__day {
  font-weight: var(--font-weight-body-strong);
}

.hours__season-heading {
  font-size: var(--text-h2);
}

@media (min-width: 48em) {
  .hours__grid {
    flex-direction: row;
    align-items: start;
    gap: var(--space-gap-md);
  }

  .hours__block {
    max-width: var(--measure-wide);
    flex: 1 1 0;
  }
}

/* CTA BAND / CONTACT (brief §4 row 9) — stays on --color-surface, not inverted. */

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

.contact__phone {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  color: var(--color-accent);
}

.contact__inner .form {
  max-width: none;
  margin-block-start: var(--space-lg);
}

.form__heading {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-sm);
}

.form__row {
  display: grid;
  gap: var(--space-md);
}

.contact__address {
  margin-block-start: var(--space-lg);
  font-style: normal;
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

@media (min-width: 48em) {
  .contact__inner .form {
    max-width: var(--measure-contact);
  }

  .form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* FOOTER — full-bleed (brief §4 row 10), 4-column grid at desktop. */

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.site-footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}

.site-footer__nav,
.site-footer__hours-col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav li {
  padding-block: var(--space-3xs);
}

.site-footer__license {
  margin-block-start: var(--space-xs);
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gap-md);
  }

  .site-footer__grid > * {
    max-width: var(--measure-footer-col);
  }
}