/* V5 Civic+Brand Red Design Tokens */
:root {
  --teal: #0E7C7B;
  --teal-dark: #065A5A;
  --teal-light: #E8F4F3;
  --red: #C23B3B;
  --red-light: #FEF2F2;
  --charcoal: #2D3436;
  --warm-bg: #FAFAF7;
  --warm-white: #FFFFFF;
  --text-dark: #1A2B3C;
  --text-body: #4A5568;
  --text-muted: #8896A6;
  --border: #E8E6E1;
  --coral: #D4725C;
  --coral-light: #FFF0EC;
  --green: #2E7D5B;
}

/* Base */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text-body); background: var(--warm-bg); }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.active { display: flex; }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-item.active .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }

/* Hero image */
.hero-image {
  background-size: cover;
  background-position: center;
}

/* Responsive table wrapper */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Link hover */
a:hover { opacity: 0.8; }

/* Btn hover */
.btn-primary:hover { background: #a83232 !important; }
.btn-outline:hover { background: var(--warm-bg) !important; }