/* All Tech Auto Repair — Standard tier custom demo */
/* Thesis: A trust-card spec sheet for a real working shop —
   reviews, BBB rating, and phone number printed cleanly on
   shop-floor paper, like a service quote you'd actually take home. */

:root {
  --ink:        #0c0d0f;          /* near-black, shop-stamp ink */
  --ink-soft:   #2a2c30;
  --paper:      #e9eaec;          /* cool spec-paper / shop-floor light */
  --paper-2:    #dee0e4;          /* secondary surface */
  --print:      #ffffff;          /* card / panel — clean print white */
  --muted:      #5a6470;          /* blue-gray secondary text */
  --line:       #b8bcc4;          /* hairline rule */
  --line-soft:  #cdd0d6;
  --line-dark:  #2a2c30;          /* heavy rule */
  --safety:     #ffcd00;          /* safety yellow — single accent */
  --safety-deep:#d9ad00;
  --rust:       #a8221c;          /* used ONLY on BBB stamp */
}

html { scroll-behavior: smooth; color-scheme: light; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
}

::selection { background: var(--safety); color: var(--ink); }

/* Display utility — Big Shoulders Display 700/800 — industrial signage feel */
.font-display { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 800; letter-spacing: 0.005em; }
.font-body    { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; }
.font-mono    { font-family: 'Space Mono', ui-monospace, 'Courier New', monospace; }

/* Stamp label — like an inked rubber stamp on a work order.
   Kept distinct from any em-dash kicker pattern (Shingle locked
   vocabulary) and any line-flanked kicker pattern (Bishop). */
.stamp {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  color: var(--ink);
  background: transparent;
}
.stamp-yellow { background: var(--safety); border-color: var(--ink); color: var(--ink); }
.stamp-rust   { color: var(--rust); border-color: var(--rust); }

/* Index column — spec-sheet item numbering (01, 02, 03 ...) */
.indexnum {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Heavy rule and thin rule */
.rule       { border: 0; border-top: 2px solid var(--ink); height: 0; }
.rule-thin  { border: 0; border-top: 1px solid var(--line); }

/* Form-row treatment — like the lines on a clipboard work order */
.form-row {
  border-bottom: 1px solid var(--line);
}
.form-row:last-child { border-bottom: 0; }

/* Top stripe — letterhead band */
.stripe-top {
  background: var(--ink);
  color: var(--paper);
}

/* Buttons — utility, unrounded, work-order feel */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--safety); color: var(--ink);
  padding: 14px 22px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-primary:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  padding: 14px 22px;
  border: 2px solid var(--ink);
  transition: background 0.12s ease;
}
.btn-secondary:hover { background: var(--ink); color: var(--safety); }

/* Trust card — the BBB / rating / years-in-business stamps in the hero */
.trust-card {
  background: var(--print);
  border: 1.5px solid var(--ink);
  padding: 18px 22px;
  position: relative;
}
.trust-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 0.5px solid var(--line);
  pointer-events: none;
}

/* Service row — spec-sheet line item */
.spec-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.spec-row:first-child { border-top: 2px solid var(--ink); }
.spec-row:last-child  { border-bottom: 2px solid var(--ink); }

/* Hero photo placeholder — fluorescent-shop-light aesthetic */
.shop-fill {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(255, 205, 0, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(58, 68, 82, 0.55), transparent 60%),
    linear-gradient(165deg, #2a2c30 0%, #1a1c20 60%, #0c0d0f 100%);
  position: relative;
  overflow: hidden;
}
.shop-fill::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 205, 0, 0.04) 23px 24px);
  pointer-events: none;
}

/* Hazard band — alternating yellow-and-black diagonal stripes */
.hazard-band {
  height: 8px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--safety) 0 14px,
    var(--ink) 14px 28px
  );
}

/* Big stat tile — the 4.7 / 282 / A+ trust trio */
.stat-tile {
  background: var(--print);
  border: 2px solid var(--ink);
  padding: 22px 18px;
  text-align: left;
}
.stat-tile .num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--ink);
}

/* Form input — clipboard line treatment */
.work-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  padding: 14px 0 10px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 1rem;
  color: var(--ink);
}
.work-input:focus {
  outline: 0;
  border-bottom-color: var(--safety-deep);
  background: rgba(255, 205, 0, 0.06);
}
.work-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Subtle perforation rule — used between hero and content */
.perforation {
  height: 12px;
  background-image: radial-gradient(circle at 4px 6px, var(--ink) 1.2px, transparent 1.5px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
}

/* Photo of a wrench / icon container */
.icon-tile {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--print);
}

/* Subtle tick marks for sidebar lists */
.tick::before {
  content: '+';
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  color: var(--safety-deep);
  margin-right: 10px;
}

/* Footer */
.foot {
  background: var(--ink);
  color: var(--paper);
}
.foot a { color: var(--paper); }
.foot a:hover { color: var(--safety); }