/* ============================================================================
   ClearPath Junk Removal — design system
   Token reference:
     ink     #16212B   steel    #355264
     paper   #F1F3EE   moss     #4F6B43
     paper2  #E8EBE3   gold     #FFB23E
     signal  #FF5A2A
   Display: "Big Shoulders Display" | Body: "Inter" | Utility: "IBM Plex Mono"
   ============================================================================ */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body { font-feature-settings: "ss01"; }

::selection { background: #FF5A2A; color: #fff; }

:focus-visible {
  outline: 3px solid #FF5A2A;
  outline-offset: 2px;
}

.font-display { letter-spacing: -0.01em; }

/* ----------------------------------------------------------------------------
   Stamp-style primary CTA button — a notched corner like a permit/work-order
   stamp. Used for every primary "Book Online" call to action.
   ---------------------------------------------------------------------------- */
.btn-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #FF5A2A;
  color: #16212B;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid #16212B;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.btn-stamp:hover { background: #ffd1bf; transform: translate(-1px,-1px); }
.btn-stamp:active { transform: translate(0,1px); }

.btn-stamp-lg {
  font-size: 1.05rem;
  padding: 1rem 2rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.btn-outline-steel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: #16212B;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border: 2px solid #355264;
  border-radius: 0.4rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-outline-steel:hover { background: #355264; color: #F1F3EE; }

/* ----------------------------------------------------------------------------
   Ticket / work-order tag — small mono label used on service & city cards.
   ---------------------------------------------------------------------------- */
.ticket-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #355264;
  background: #E8EBE3;
  border: 1px solid #16212B;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  display: inline-block;
}

/* ----------------------------------------------------------------------------
   SIGNATURE ELEMENT: the Load Meter — a horizontal truck-bed fill gauge used
   in the hero, pricing section, and booking form to visualize volume-based
   pricing (the actual mechanic behind how junk removal is priced).
   ---------------------------------------------------------------------------- */
.load-meter {
  display: flex;
  gap: 4px;
  width: 100%;
}
.load-meter .seg {
  flex: 1;
  height: 18px;
  background: #E8EBE3;
  border: 2px solid #16212B;
  position: relative;
  overflow: hidden;
}
.load-meter .seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FF5A2A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.load-meter.is-filled .seg::after { transform: scaleX(1); }
.load-meter .seg:nth-child(1)::after { transition-delay: 0.05s; }
.load-meter .seg:nth-child(2)::after { transition-delay: 0.15s; }
.load-meter .seg:nth-child(3)::after { transition-delay: 0.25s; }
.load-meter .seg:nth-child(4)::after { transition-delay: 0.35s; }

.load-meter-option {
  cursor: pointer;
  border: 2px solid #16212B;
  background: #fff;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.load-meter-option:hover { background: #E8EBE3; }
.load-meter-option.is-selected { background: #16212B; color: #F1F3EE; }
.load-meter-option.is-selected .load-meter .seg { border-color: #F1F3EE; }

/* ----------------------------------------------------------------------------
   Torn-stub divider — used once, beneath the hero only.
   ---------------------------------------------------------------------------- */
.torn-edge {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 97.5% 80%, 95% 100%, 92.5% 80%, 90% 100%, 87.5% 80%, 85% 100%, 82.5% 80%, 80% 100%, 77.5% 80%, 75% 100%, 72.5% 80%, 70% 100%, 67.5% 80%, 65% 100%, 62.5% 80%, 60% 100%, 57.5% 80%, 55% 100%, 52.5% 80%, 50% 100%, 47.5% 80%, 45% 100%, 42.5% 80%, 40% 100%, 37.5% 80%, 35% 100%, 32.5% 80%, 30% 100%, 27.5% 80%, 25% 100%, 22.5% 80%, 20% 100%, 17.5% 80%, 15% 100%, 12.5% 80%, 10% 100%, 7.5% 80%, 5% 100%, 2.5% 80%, 0% 100%);
}

/* ----------------------------------------------------------------------------
   Count-up stat numbers
   ---------------------------------------------------------------------------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   Scroll-reveal (IntersectionObserver toggles .is-visible in main.js)
   ---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------------------
   Service / city cards
   ---------------------------------------------------------------------------- */
.card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 #16212B; }

/* ----------------------------------------------------------------------------
   Hazard stripe rule — used sparingly as a section accent
   ---------------------------------------------------------------------------- */
.hazard-rule {
  height: 6px;
  background-image: repeating-linear-gradient(135deg, #16212B 0 14px, #FFB23E 14px 28px);
}

/* ----------------------------------------------------------------------------
   Step ticket (How It Works) — numbered process, legitimately sequential
   ---------------------------------------------------------------------------- */
.step-ticket {
  border: 2px solid #16212B;
  background: #fff;
  position: relative;
}
.step-ticket .step-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: #E8EBE3;
  -webkit-text-stroke: 2px #16212B;
}

/* ----------------------------------------------------------------------------
   Multi-step booking form
   ---------------------------------------------------------------------------- */
.form-step { display: none; }
.form-step.is-active { display: block; }

.input-field {
  width: 100%;
  border: 2px solid #16212B;
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  font-size: 0.95rem;
  transition: box-shadow 0.15s ease;
}
.input-field:focus { box-shadow: 3px 3px 0 #FF5A2A; outline: none; }
.input-field.field-error { border-color: #d9342b; }

.progress-rail {
  height: 6px;
  background: #E8EBE3;
  border: 2px solid #16212B;
  position: relative;
  overflow: hidden;
}
.progress-rail .fill {
  position: absolute;
  inset: 0;
  background: #FF5A2A;
  width: 25%;
  transition: width 0.35s ease;
}

/* ----------------------------------------------------------------------------
   Accordion (FAQ)
   ---------------------------------------------------------------------------- */
.accordion-btn[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform 0.2s ease; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }