/* ============ Summit Roofing — Design System ============
   Single consistent palette: charcoal/slate + amber accent (trade-professional,
   not AI-slop). Craft details per Emil design-eng: ease-out transitions,
   scoped properties (never `transition: all`), visible focus states. */

:root {
  --accent: #ff6b00;          /* bold orange */
  --accent-dark: #d95b00;
  --ink: #f4f4f5;             /* zinc-100 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: #09090b; color: #f4f4f5; }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* Accessible focus rings (ui-ux-pro-max: focus-states CRITICAL) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scoped transitions only — never `transition: all` (emil-design-eng) */
.btn {
  transition: background-color .18s ease-out, transform .12s ease-out,
              box-shadow .18s ease-out;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }   /* press feedback */

.card {
  transition: transform .2s ease-out, box-shadow .2s ease-out,
              border-color .2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); }
}

/* Responsive service/feature grid — stacks at 400px, fills wider panels */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Before/After slider */
.ba-wrap { position: relative; overflow: hidden; border-radius: 1rem; touch-action: none; width: 100%; }
.ba-after { position: absolute; inset: 0; overflow: hidden; width: 50%; border-right: 3px solid var(--accent); }
.ba-after img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center; cursor: ew-resize;
  transition: transform 0.15s ease-out;
}
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.ba-knob {
  position: relative; width: 40px; height: 40px; border-radius: 999px; background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 10px rgba(255, 107, 0, 0.3); display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #000; font-size: 16px; border: 2px solid var(--accent);
  transition: transform 0.15s ease-out;
}
.ba-handle:hover .ba-knob {
  transform: scale(1.1);
  box-shadow: 0 4px 25px rgba(0,0,0,.6), 0 0 15px rgba(255, 107, 0, 0.6);
}

/* FAQ accordion */
.faq-q { transition: color .15s ease-out; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease-out; }
.faq-item[open-state="1"] .faq-a { max-height: 480px; }
.faq-item[open-state="1"] .faq-chev { transform: rotate(180deg); }
.faq-chev { transition: transform .2s ease-out; }

/* Count-up stat reveal (subtle, MOTION_INTENSITY moderate) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}