/* ==========================================================================
   site.css — HKY Services (Hickory, NC). editorial-modern family,
   editorial-stack archetype (brief.md, approved C3 2026-09-16).

   HARD RULE (house-tech-spec §3): no raw hex, no px/rem size literals, no
   font-name literals in this file. Tokens only, except the house breakpoints
   (48em/64em) and an explicit @allow-literal comment.
   ========================================================================== */

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

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

/* Section headings: Prata, restrained, editorial register throughout. */
.section h2 {
  font-size: var(--text-h2);
  margin-block-end: var(--space-md);
}

.section .measure + h2,
.section h2 + .measure,
.section h2 + p {
  margin-block-start: var(--space-sm);
}

/* --- Header & navigation ----------------------------------------------------
   Sticky, house chrome (brief §4.2 row 0). Fixed block-size so the sticky
   stack's height is deterministic rather than a function of content or the
   nav-toggle's post-JS reveal (design-rules §7.2 rule 3: measured, not
   assumed) — verified against the real render, see README.md. Preview-only
   stacking offset (below the expiry bar) lives in css/preview.css, never
   here, so the header's own permanent behaviour survives purchase. */

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

@media (min-width: 64em) {
  .site-header {
    block-size: var(--bar-height-lg);
  }
}

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

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

.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-md);
  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 ---------------------------------------------------------------
   Near-zero radius throughout (tile-c precedent, editorial-modern register).
   Accent text only ever sits on --color-bg or as accent-ink on an opaque
   accent fill (brief §2 binding constraint) — never on --color-surface. */

.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);
  font-size: var(--text-small);
  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),
              border-color var(--duration-fast) var(--ease-out);
}

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

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

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

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

/* --- Hero — the living-hero moment -----------------------------------------
   editorial-stack single column at <64em; two-column split at >=64em, the
   field running the right column's full height beside the text (brief
   §4.4). Atmosphere gradient geometry is REPRODUCED VERBATIM from brief §2.1
   — the tightened layer-2 values, load-bearing for contrast, never the
   original tile's 70%/.08. */

.hero {
  position: relative;
  overflow: clip;
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(179, 77, 20, .14), transparent 58%),
    radial-gradient(90% 30% at 6% 8%, rgba(28, 27, 25, .06), transparent 55%),
    var(--color-bg);
}

.hero__eyebrow {
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-xs);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.hero__title {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  max-width: var(--hero-title-measure);
}

.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

/* --- The field: full 8-item numbered index + satellites + texture plate -- */

.hero__field {
  position: relative;
  margin-block-start: var(--space-md);
  padding: var(--space-sm);
}

.hero__field-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
}

.hero__index {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Nested-counter compliance (design-rules §5, brief §6): the HERO index's own
   costume — Prata numerals, accent colour, hairline rule under each row.
   The Process section below uses a deliberately different costume (Work
   Sans, ink, no hairline) so the two counters never read as one system. */
.hero__index-n {
  flex: none;
  inline-size: var(--field-numeral-col);
  font-family: var(--font-display);
  font-size: var(--text-small);
  color: var(--color-accent);
}

.hero__index-label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

/* Ambient satellites — two hand-tool sketches on slow, independent,
   non-synchronised loops (design-rules §0; brief §4.3/§6). Decorative,
   aria-hidden, no contrast obligation. Reduced-motion freezes both in place
   via the shared block at the foot of this file — the static shapes plus
   the numbered index plus the atmosphere still read as the moment. */
.hero__satellite {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero__satellite--pencil {
  inset-inline-end: var(--space-sm);
  inset-block-start: calc(-1 * var(--space-lg));
  inline-size: var(--space-2xl);
  animation: hky-drift-pencil var(--orbit-pencil) ease-in-out infinite;
}

.hero__satellite--level {
  inset-inline-end: var(--space-2xl);
  inset-block-end: calc(-1 * var(--space-md));
  inline-size: var(--space-xl);
  animation: hky-drift-level var(--orbit-level) ease-in-out infinite;
}

@keyframes hky-drift-pencil {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(calc(-1 * var(--drift-sm))) rotate(3deg); }
}

@keyframes hky-drift-level {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(var(--drift-sm)) rotate(-2deg); }
}

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

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

.hero__facts strong {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
}

/* Desktop split — >=64em: text column left, living-hero field runs the
   right column's full height beside it (brief §4.4, editorial-stack's own
   "columns" device, ref-011). */
@media (min-width: 64em) {
  .hero__inner {
    display: grid;
    grid-template-columns: var(--hero-columns-lg);
    align-items: start;
    column-gap: var(--space-2xl);
  }

  .hero__field {
    grid-column: 2;
    grid-row: 1 / span 6;
    inline-size: var(--panel-media-col);
    justify-self: end;
    margin-block-start: 0;
  }

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

/* --- Trust strip ------------------------------------------------------------
   Plain three-item list, hairline-separated — no cards, no icons, no shadow
   (design-rules §4 banned defaults). */

.trust-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border-hairline) var(--border-style) var(--color-ink);
}

.trust-list li {
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
}

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

  .trust-list li {
    border-inline-end: var(--border-hairline) var(--border-style) var(--color-border);
    padding-inline-end: var(--space-md);
  }

  .trust-list li:last-child {
    border-inline-end: 0;
  }
}

/* --- Estimate CTA + form ---------------------------------------------------- */

.estimate__form-block {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.estimate__form-block h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-2xs);
}

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

/* --- Service area (ships thin, honestly — brief §4.2 row 4) ---------------- */

.service-area p {
  font-size: var(--text-lead);
}

/* --- Process — own numeral costume, distinct from the hero index ----------
   Work Sans numerals, ink colour, NO hairline rule (design-rules §5's
   two-of-three test: differs on face AND colour role from the hero's Prata
   accent-coloured, hairline-ruled index). */

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

@media (min-width: 48em) {
  .process-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.process-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.process-list .process-n {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-h3);
  color: var(--color-ink);
}

.process-list h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.process-list p {
  color: var(--color-ink-muted);
}

/* --- Reviews pull-quote band ------------------------------------------------ */

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

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

.pullquote p {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

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

/* --- Hours & contact --------------------------------------------------------- */

.hours-contact p + p {
  margin-block-start: var(--space-sm);
}

/* --- FAQ ---------------------------------------------------------------------
   Plain question/answer pairs — no accordion chrome, no numeral treatment
   at all (design-rules §5's second limit: a sub-list with its own ornament
   gets no counter; the FAQ carries none). */

.faq-list {
  display: grid;
  gap: var(--space-lg);
}

.faq-list h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-2xs);
}

.faq-list p {
  color: var(--color-ink-muted);
}

/* --- Process/trust/reviews/faq media object shared with IMG-2/IMG-3 -------- */

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

.media-figure img {
  width: 100%;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

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

/* --- Footer ------------------------------------------------------------------ */

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

/* --- Reduced motion: this site's own keyframe-driven satellites ------------
   base.css already collapses --duration-* and --reveal-shift for the shared
   reveal system; the hero satellites use a bespoke keyframe pair, so they
   get their own explicit stop here — brief §6: "under prefers-reduced-motion:
   reduce, both satellites stop (animation: none)". Same specificity as the
   rule that starts them, so this wins on source order alone (spec §12). */
@media (prefers-reduced-motion: reduce) {
  .hero__satellite {
    animation: none;
  }
}