/* Halal Auto Financing Edmonton — site styles
   Design tokens taken verbatim from the signed-off design.
   ink #0E1F18 · body #2A3D34 · muted #6B7A72 · surface #F5F1E8 · sand #ECE5D3
   line #DCD3BD · green #0E3D2E · copper #B8732B · amber #D89149 */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F5F1E8; color: #0E1F18; font-family: Geist, system-ui, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: #B8732B; text-decoration: none; }
a:hover { color: #8f581d; }
:focus-visible { outline: 2px solid #0E3D2E; outline-offset: 2px; }

@keyframes aurora-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .aurora-btn::before { animation: none !important; } }

/* ---------- generated hover / pseudo-element rules (hoisted from the design) ---------- */
.hv1:hover { border-color: #0E1F18; background: #ECE5D3; }
.bf2::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: linear-gradient(110deg, #0E3D2E 0%, #14543F 30%, #D89149 60%, #0E3D2E 100%); background-size: 200% 200%; filter: blur(10px); opacity: .85; animation: aurora-shift 4s linear infinite; }
.af3::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #0B1220; }
.hv4:hover { color: #B8732B; }
.hv5:hover { border-color: #2A3D34; color: #0E1F18; }

/* ---------- header navigation ---------- */
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 1px solid #DCD3BD; border-radius: 10px; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: #0E1F18; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#site-nav { display: none; }
#site-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #F5F1E8; border-bottom: 1px solid #DCD3BD; padding: 6px 20px 14px; box-shadow: 0 18px 40px -20px rgba(14,31,24,.35); }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; color: #2A3D34; white-space: nowrap; }
.nav-link:hover { color: #B8732B; }
.nav-link-current { color: #0E1F18; font-weight: 600; }

/* ---------- responsive: single column that widens ---------- */
@media (min-width: 760px) {
  header, main > div, main > nav, footer { padding-left: max(22px, calc((100% - 780px) / 2)) !important; padding-right: max(22px, calc((100% - 780px) / 2)) !important; }
  .cards { flex-direction: row !important; flex-wrap: wrap !important; }
  .cards > * { flex: 1 1 300px; }
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  #site-nav { display: flex !important; position: static; flex-direction: row; align-items: center; gap: 14px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .nav-link { font-size: 15px; }
}
@media (min-width: 900px) {
  .callbar { display: none !important; }
  .h1 { font-size: 52px !important; }
  .h2 { font-size: 36px !important; }
}

/* ---------- FAQ accordions ---------- */
.faq summary::-webkit-details-marker { display: none; }
.faq summary { list-style: none; }
.faq summary:hover { color: #B8732B; }
.faq-chev { font-size: 22px; font-weight: 400; color: #B8732B; line-height: 1; transition: transform .18s ease; }
.faq[open] .faq-chev { transform: rotate(45deg); }

/* ---------- form ---------- */
input:focus, select:focus, textarea:focus { border-color: #0E3D2E !important; }
[aria-invalid="true"] { border-color: #B8732B !important; }
.field-error { margin: 0; font-size: 13px; font-weight: 600; color: #B8732B; }

/* ---------- one continuous page: no section divider rules ---------- */
main > div { border-top: 0 !important; border-bottom: 0 !important; }
.svc-grid > div { border-bottom: 0 !important; border-right: 0 !important; }

/* ---------- social proof: manufacturer logo row (home) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 46s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-group:last-child { display: none; }
  .marquee-group { flex-wrap: wrap; justify-content: center; }
}
.make-item { display: inline-flex; align-items: center; padding: 0 22px; }
.make { font-size: 17px; font-weight: 600; letter-spacing: .04em; color: #2A3D34; white-space: nowrap; }
.make-logo { height: 30px; width: auto; display: block; flex: none; opacity: .8; filter: grayscale(1); transition: opacity .18s ease, filter .18s ease; }
.make-item:hover .make-logo { opacity: 1; filter: grayscale(0); }
@media (min-width: 900px) { .make-logo { height: 34px; } }

/* ---------- alternating feature rows ---------- */
.feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #DCD3BD; border-radius: 11px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(14,31,24,.06); flex: none; }
.feat-rows { display: flex; flex-direction: column; gap: 36px; }
.feat-row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.check-list { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-item { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.5; color: #2A3D34; }
.check-item svg { flex: none; margin-top: 2px; }
.mockup { border: 1px solid #DCD3BD; border-radius: 16px; background: #FFFFFF; padding: 5px; box-shadow: 0 14px 44px -20px rgba(14,31,24,.3); }
.mockup-inner { border: 1px solid #E8DFC8; border-radius: 12px; overflow: hidden; background: #ECE5D3; }
.img-ph { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: #6B7A72; }


@media (min-width: 760px) {
  .feat-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .feat-row-alt .feat-copy { order: 2; }
  .feat-rows { gap: 52px; }
}