/* site.css — nations-best-appliance-repair-indianapolis-in. Archetype:
   sidebar-anchor (brief §3). Tokens only, no raw literals (spec §3). */

/* base.css's default skip-link is accent/accent-ink; this brief bars accent
   from every text role (§2.4), and accent-ink was measured against bg/
   surface only, not accent (3.85:1, under AA). Overridden to ink/bg
   (13.34:1), the primary CTA's own pairing. */
.skip-link {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

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

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

.section {
  padding-block: var(--section-gap);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

/* The hero is never bordered like a plain section boundary (§7.1). */
.hero {
  border-top: 0;
}

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

/* --- The page shell: rail + scrolling content (brief §3.1) ---------------- */

.layout {
  display: block;
}

@media (min-width: 64em) {
  .layout {
    display: flex;
    align-items: flex-start;
  }

  .content {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* --- Buttons — --radius-sm (brief §2.8, stamped edge not a pill).
   --color-accent never appears on a button (brief §2.4); ink/bg fill. --- */

.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-body);
  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-ink);
  color: var(--color-bg);
}

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

/* --- THE RAIL — persistent sidebar (>=64em) / sticky top call rail (<64em),
   brief §3.1. Reuses .site-nav/.nav-toggle/data-nav* at a custom 64em
   collapse point instead of the house 48em default. */

.rail {
  position: sticky;
  /* --expiry-height lives in preview.css (deleted at purchase); the var()
     fallback (0px) is what the sold site resolves to, reverting cleanly to
     a top:0 sticky rail rather than a dangling preview-only reference. */
  inset-block-start: var(--expiry-height, 0px);
  z-index: var(--z-header);
  background-color: var(--color-bg);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.rail__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  padding-inline: var(--layout-gutter);
}

.rail__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-decoration: none;
}

.rail__dot {
  flex: 0 0 auto;
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  /* control boundary (WCAG 1.4.11, >=3:1) — border-strong, not border. */
  border: var(--border-hairline) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.rail .nav-toggle {
  margin-inline-start: auto;
}

.rail__cta {
  flex: 0 0 auto;
}

.rail__cta--stack {
  display: none;
}

.rail__tagline,
.rail__signed {
  display: none;
}

.rail__nav-item--desktop {
  display: none;
}

.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  padding-block: var(--space-2xs) var(--space-sm);
  padding-inline: var(--layout-gutter);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.rail__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

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

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

/* Clears the sticky mobile chrome; desktop's rail is a left column, no offset needed. */
section[id] {
  scroll-margin-block-start: calc(var(--expiry-height, 0px) + var(--rail-collapsed-height));
}

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

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

@media (min-width: 64em) {
  section[id] {
    scroll-margin-block-start: var(--space-lg);
  }

  .rail {
    position: sticky;
    inset-block-start: 0;
    inset-block-end: auto;
    flex: 0 0 var(--rail-width);
    width: var(--rail-width);
    /* @allow-literal: full-viewport floor is structural (base.css's own precedent), brief §3.1's "height: 100vh (or min-height)" */
    height: 100vh; max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-block: var(--space-lg);
    padding-inline: var(--space-md);
    border-block-end: 0;
    border-inline-end: var(--border-hairline) var(--border-style) var(--color-border);
  }

  .rail__row {
    padding: 0;
    flex-wrap: wrap;
  }

  .rail .nav-toggle {
    display: none;
  }

  .rail__cta--row {
    display: none;
  }

  .rail__tagline {
    display: block;
    margin-block-start: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-ink-muted);
  }

  .rail__cta--stack {
    display: flex;
    width: 100%;
    margin-block-start: var(--space-md);
  }

  .site-nav {
    display: block;
    margin-block-start: var(--space-lg);
    padding: 0;
    border: 0;
  }

  [data-nav-ready] .site-nav[data-nav-open='true'] {
    padding: 0;
    border: 0;
  }

  .rail__nav-item--desktop {
    display: block;
  }

  .rail__nav-item--mobile {
    display: none;
  }

  .rail__signed {
    display: block;
    margin-block-start: auto;
    padding-block-start: var(--space-md);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  }
}

/* --- Hero — brief §3.2 DOM order, §5.1 living-hero device ------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block-start: var(--space-md);
  padding-block-end: var(--section-gap);
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 30% 0%, var(--color-hero-atmosphere) 0%, var(--color-bg) 55%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
}

.eyebrow {
  margin: 0;
  color: var(--color-ink);
  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;
  line-height: var(--leading-snug);
}

.hero__title {
  margin: 0;
  margin-block-start: var(--space-2xs); /* brief §3.2 step 2's own margin value */
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

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

.hero__field {
  margin-block-start: var(--space-md);
  block-size: var(--hero-field-height);
  max-width: 100%;
}

/* Shrink-wraps to the photo's own box so the dial overlay's viewBox lands
   exactly on it (brief §5.1: overlaid on top, never baked into the raster). */
.hero__device-wrap {
  position: relative;
  display: inline-block;
  height: 100%;
  max-width: 100%;
}

/* picture has no height by default (base.css) — without one here, the img's
   height:100% below resolves against an auto containing block. */
.hero__device-wrap picture {
  height: 100%;
  max-width: 100%;
}

.hero__device-img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.hero__dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__lead {
  margin: 0;
  margin-block-start: var(--space-sm);
  max-width: var(--layout-measure);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

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

/* --- The dial device — brief §6. Accent (non-text UI, §2.4) governs the
   ring/needle strokes, 3:1+ per brief §2.5/row 12-13. Stroke weights ~2x
   the QA-round-2 values: the overlay viewBox is now the photo's own
   700x523 grid (brief §5.1), so the same rendered line weight needs
   thicker strokes in the larger coordinate space. Radius, colours and
   motion are unchanged — only this unit recalibration. --- */

.dial__outer {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 6;
}

.dial__face {
  fill: var(--color-bg);
  stroke: var(--color-accent);
  stroke-width: 10;
}

.dial__ring-glint {
  transform-origin: 0 0;
  animation: dial-ring-sweep var(--dial-ring-duration) linear infinite;
}

.dial__ring-glint path {
  fill: none;
  stroke: var(--color-bg);
  stroke-width: 10;
  opacity: 0.75;
}

.dial__hub {
  fill: var(--color-ink);
}

.dial__needle {
  transform-origin: 0 0;
  animation: dial-needle-settle var(--dial-needle-duration) var(--dial-needle-ease) 1 both;
}

.dial__needle rect {
  fill: var(--color-ink);
}

.dial__tag {
  transform-origin: 0 0;
  animation: dial-tag-sway var(--dial-tag-duration) var(--ease-in-out) infinite;
}

.dial__tag line,
.dial__tag circle {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2.8;
}

.dial__tag rect {
  fill: var(--color-bg);
  stroke: var(--color-ink);
  stroke-width: 4;
}

@keyframes dial-ring-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dial-needle-settle {
  0% { transform: rotate(-95deg); }
  70% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes dial-tag-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* Reduced motion (brief §6) — each motion freezes at its stated resting
   state; base.css's duration collapse doesn't reach --dial-* tokens. */
@media (prefers-reduced-motion: reduce) {
  .dial__ring-glint {
    animation: none;
  }

  .dial__needle {
    animation: none;
    transform: rotate(0deg);
  }

  .dial__tag {
    animation: none;
    transform: rotate(-1deg);
  }
}

/* --- Appliances We Service — brief §3.7 row 2 ------------------------------ */

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

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

.services-grid {
  margin: 0;
  margin-block-start: var(--space-lg);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
}

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

.service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.service__icon {
  inline-size: var(--space-2xl);
  block-size: var(--space-2xl);
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* --- The Service Call, Plainly — brief §3.7 row 3, §3.6 nested-counter --- */

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

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

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

/* Plain --color-ink digits (brief §3.6): never accent, not a ticket-stamp echo. */
.process-step__num {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-h3);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

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

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

/* --- Trust strip — brief §3.8, ref-010 letterpress-ticket craft ----------- */

.trust {
  position: relative;
  background-color: var(--color-surface);
}

/* Imagery slot 2 (brief §5.3): real raster texture, AVIF+WebP, ≤50KB. */
.trust__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  overflow: hidden;
}

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

.trust .container {
  position: relative;
  z-index: 1;
}

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

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

/* Flat ticket stock, --radius-none, a punched perforation-notch device
   rather than a rounded card (brief §2.8). */
.ticket {
  position: relative;
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
  border-radius: var(--radius-none);
}

.ticket::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-2xs));
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-ink);
}

.ticket__stamp {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

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

.ticket__sig {
  margin: 0;
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  border-block-start: var(--border-hairline) dashed var(--color-border-strong);
}

/* --- What Customers Say — brief §3.7 row 5 --------------------------------- */

.reviews__rating {
  margin: 0;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

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

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

.review {
  margin: 0;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-none);
}

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

.review__attribution {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-style: normal;
  color: var(--color-ink-muted);
}

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

/* --- Where We Work — brief §3.7 row 6 -------------------------------------- */

#area p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

#area p + p {
  margin-block-start: var(--space-sm);
}

/* --- Questions We Get — brief §3.7 row 7, native disclosure --------------- */

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

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

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  list-style: none;
}

.qa__q::-webkit-details-marker {
  display: none;
}

/* The disclosure chevron — the sub-list's own ornament, no numeral
   (brief §3.6). Plain CSS triangle via border, no raw hex. */
.qa__q::after {
  content: '';
  flex: 0 0 auto;
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  border-inline-end: var(--border-thick) var(--border-style) var(--color-ink-muted);
  border-block-end: var(--border-thick) var(--border-style) var(--color-ink-muted);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.qa[open] .qa__q::after {
  transform: rotate(-135deg);
}

.qa__a {
  margin: 0;
  margin-block-start: var(--space-sm);
  max-width: var(--layout-measure);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* --- Final CTA / Contact — brief §3.7 row 8 -------------------------------- */

.contact {
  position: relative;
}

/* Imagery slot 3 (brief §5.3): real raster macro study, AVIF+WebP, ≤60KB. */
.contact__accent {
  position: absolute;
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--layout-gutter);
  inline-size: var(--space-3xl);
  opacity: 0.5;
  display: none;
}

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

@media (min-width: 64em) {
  .contact__accent {
    display: block;
  }
}

.contact__email {
  margin: 0;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

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

.contact form {
  margin-block-start: var(--space-lg);
}

.contact > .container > p:has(> .btn) {
  margin-block-start: var(--space-md);
}

/* --- Form (spec §6) — skeleton structure, tokenised colours only. --- */

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

.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-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  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-family: var(--font-body);
  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-family: var(--font-body);
  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-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

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

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

.site-footer p {
  margin: 0;
  margin-block-start: var(--space-sm);
}

.site-footer__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

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

.site-footer small {
  color: var(--color-ink-muted);
}