/* ==========================================================================
   Asphalt Los Angeles — style.css
   MOBILE-FIRST · BEM · 62.5% root (1rem = 10px) · rem units · clamp() fluid
   Breakpoints (px, intentionally not rem): sm 560 · md 768 · lg 880
   ========================================================================== */

/* ----- Design tokens ----- */
:root {
  /* Colors — inspired by San Diego's red · white · golden yellow (refined) */
  --primary:        #9e1b2e;   /* deep red — dark/brand sections, footer, overlays */
  --secondary:      #7c1623;   /* darker red — trust bar, hero gradient stop */
  --tertiary:       #6a7079;   /* slate — muted / secondary text */
  --accent:         #f5b301;   /* golden yellow — CTAs & highlights */

  --bg-body:        #ffffff;   /* page background + light text on dark */
  --bg-surface:     #f7f3ee;   /* warm off-white — alternate sections */

  --text-body:      #23262b;   /* default copy */
  --text-title:     #15171c;   /* headings */

  --border-primary: #e6e0d9;
  --shadow-primary: 0 0.6rem 2.4rem rgba(20, 24, 30, 0.10);

  /* Accent helpers */
  --accent-strong:  #a81d2d;   /* red — links, eyebrows, icons (legible on white) */
  --accent-soft:    color-mix(in srgb, var(--accent) 16%, #fff);   /* pale gold tint */

  /* Type scale — -m is the default body size (~1.6rem = 16px) */
  --text-xs:  clamp(1.2rem, 1.15rem + 0.15vw, 1.3rem);
  --text-s:   clamp(1.4rem, 1.34rem + 0.2vw, 1.5rem);
  --text-m:   clamp(1.6rem, 1.54rem + 0.25vw, 1.75rem);
  --text-l:   clamp(1.9rem, 1.7rem + 0.6vw, 2.2rem);
  --text-xl:  clamp(2.4rem, 2.0rem + 1.4vw, 3.2rem);
  --text-2xl: clamp(3.2rem, 2.4rem + 3vw, 5rem);

  /* Gap scale — for flex/grid gaps. -m default */
  --gap-xs: clamp(0.6rem, 0.5rem + 0.2vw, 0.8rem);
  --gap-s:  clamp(1.0rem, 0.9rem + 0.3vw, 1.2rem);
  --gap-m:  clamp(1.6rem, 1.4rem + 0.4vw, 2.0rem);
  --gap-l:  clamp(2.4rem, 2.0rem + 1vw, 3.2rem);
  --gap-xl: clamp(3.2rem, 2.6rem + 1.6vw, 4.8rem);

  /* Space scale — for padding/margins. -m default */
  --space-xs: clamp(0.6rem, 0.5rem + 0.2vw, 0.8rem);
  --space-s:  clamp(1.0rem, 0.85rem + 0.4vw, 1.4rem);
  --space-m:  clamp(1.6rem, 1.4rem + 0.5vw, 2.0rem);
  --space-l:  clamp(2.4rem, 1.9rem + 1.5vw, 3.6rem);
  --space-xl: clamp(4.0rem, 2.8rem + 4vw, 6.4rem);

  /* Structure */
  --container: 114rem;
  --container-narrow: 76rem;
  --radius-sm: 0.6rem;
  --radius:    1.2rem;
  --radius-lg: 2rem;
  --ring: 0 0 0 0.3rem color-mix(in srgb, var(--accent) 35%, transparent);

  --lh-tight: 1.15;
  --lh-base:  1.65;
  --font-sans: "Segoe UI", Roboto, system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* ----- Reset / base ----- */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--lh-base);
  color: var(--text-body);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--text-title); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-xl); }
.section--mist { background: var(--bg-surface); }
.section--dark { background: var(--primary); color: var(--bg-body); }
.section--accent { background: var(--accent-soft); }
.section__head { max-width: 72rem; margin-bottom: var(--space-l); }
.section__eyebrow { display: inline-block; font-size: var(--text-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: var(--space-xs); }
.section--dark .section__eyebrow { color: var(--accent); }
.section__title { margin-bottom: var(--space-s); }
.section__lead { font-size: var(--text-l); color: var(--tertiary); }
.section--dark .section__lead { color: color-mix(in srgb, var(--bg-body) 80%, transparent); }
.center { text-align: center; margin-inline: auto; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  font-weight: 700; font-size: var(--text-m); line-height: 1; min-height: 4.8rem;
  padding: 0.9em 1.5em; border-radius: var(--radius-sm); border: 0.2rem solid transparent;
  cursor: pointer; transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-0.1rem); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: var(--text-title); box-shadow: var(--shadow-primary); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent), #000 12%); color: var(--text-title); }
.btn--call { background: var(--primary); color: var(--bg-body); }
.btn--call:hover { background: color-mix(in srgb, var(--primary), #fff 14%); color: var(--bg-body); }
.btn--ghost { background: transparent; color: var(--bg-body); border-color: color-mix(in srgb, var(--bg-body) 35%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--bg-body) 10%, transparent); color: #fff; }
.btn--lg { font-size: var(--text-l); padding: 1em 1.8em; }
.btn--block { display: flex; width: 100%; }

/* ----- Header (mobile-first: hamburger by default) ----- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-body); border-bottom: 0.1rem solid var(--border-primary); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-m); min-height: 6.4rem; }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--gap-xs); color: var(--text-title); font-weight: 800; }
.site-header__brand:hover { text-decoration: none; }
.site-header__brand-mark { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--accent); font-size: var(--text-s); font-weight: 800; }
.site-header__brand-text { font-size: var(--text-l); letter-spacing: -0.02em; }
.site-header__brand-text strong { color: var(--accent-strong); }
.site-header__logo { height: 4.8rem; width: auto; display: block; }
@media (min-width: 880px) { .site-header__logo { height: 5.4rem; } }

.nav-toggle { display: none; }
.nav-toggle__btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  width: 4.8rem; height: 4.8rem; padding: 1.2rem; border: 0.1rem solid var(--border-primary);
  border-radius: var(--radius-sm); background: var(--bg-body); cursor: pointer;
}
.nav-toggle__btn span, .nav-toggle__btn::before, .nav-toggle__btn::after {
  content: ""; display: block; height: 0.2rem; background: var(--text-title); border-radius: 0.2rem; transition: .2s;
}
.site-nav {
  position: fixed; inset: 6.4rem 0 auto 0; display: flex; flex-direction: column; align-items: stretch;
  background: var(--bg-body); border-bottom: 0.1rem solid var(--border-primary);
  padding: var(--space-m); gap: var(--gap-s);
  transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow-primary);
}
.site-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__list li { border-bottom: 0.1rem solid var(--border-primary); }
.site-nav__list a { display: block; padding: var(--space-s) var(--space-xs); color: var(--text-body); font-weight: 600; }
.site-nav__list a:hover { color: var(--accent-strong); text-decoration: none; }
.site-nav__call { width: 100%; }
.nav-toggle:checked ~ .site-nav { transform: translateY(0); }

@media (min-width: 880px) {
  .site-header__inner { min-height: 6.8rem; }
  .nav-toggle__btn { display: none; }
  .site-nav {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: var(--gap-m);
    background: none; border: 0; padding: 0; transform: none; box-shadow: none;
  }
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--gap-m); }
  .site-nav__list li { border: 0; }
  .site-nav__list a { padding: 0; font-size: var(--text-s); }
  .site-nav__call { width: auto; }
}

/* ----- Hero ----- */
.hero { position: relative; color: var(--bg-body); overflow: hidden;
  background-color: var(--secondary);
  background-image: linear-gradient(110deg, color-mix(in srgb, var(--primary) 93%, transparent) 0%, color-mix(in srgb, var(--primary) 80%, transparent) 55%, color-mix(in srgb, var(--primary) 6%, transparent) 100%), var(--hero, none);
  background-size: cover; background-position: center; }
.hero__inner { display: grid; gap: var(--gap-l); align-items: center; padding-block: var(--space-xl); }
.hero__badge { display: inline-flex; align-items: center; gap: var(--gap-xs); background: color-mix(in srgb, var(--bg-body) 10%, transparent); border: 0.1rem solid color-mix(in srgb, var(--bg-body) 18%, transparent); padding: .4em .8em; border-radius: 10rem; font-size: var(--text-s); font-weight: 600; width: max-content; max-width: 100%; }
.hero__title { font-size: var(--text-2xl); color: var(--bg-body); margin-block: var(--space-s); max-width: 16ch; }
.hero__title span { color: var(--accent); }
.hero__lead { font-size: var(--text-l); color: color-mix(in srgb, var(--bg-body) 85%, transparent); max-width: 52ch; margin-bottom: var(--space-m); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
.hero__actions .btn { flex: 1 1 100%; }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m); margin-top: var(--space-m); font-size: var(--text-s); color: color-mix(in srgb, var(--bg-body) 85%, transparent); }
.hero__trust li { display: flex; align-items: center; gap: var(--gap-xs); }
.hero__trust li::before { content: "✓"; color: var(--accent); font-weight: 800; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 1 auto; } }

/* ----- Trust bar ----- */
.trustbar { background: var(--secondary); color: var(--bg-body); }
.trustbar__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-m); padding-block: var(--space-l); text-align: center; }
.trustbar__item strong { display: block; font-size: var(--text-l); color: var(--accent); }
.trustbar__item span { font-size: var(--text-s); color: color-mix(in srgb, var(--bg-body) 78%, transparent); }
@media (min-width: 680px) { .trustbar__list { grid-template-columns: repeat(4, 1fr); } }

/* ----- Grid + cards ----- */
.grid { display: grid; gap: var(--gap-l); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--split { grid-template-columns: 1.1fr .9fr; align-items: center; }
}
@media (min-width: 880px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--bg-body); border: 0.1rem solid var(--border-primary); border-radius: var(--radius); padding: var(--space-l); box-shadow: var(--shadow-primary); height: 100%; }
.card--link { transition: transform .12s ease, box-shadow .15s ease; }
.card--link:hover { transform: translateY(-0.3rem); box-shadow: 0 1.6rem 4.8rem rgba(20,24,30,.16); }
.card__icon { width: 5.2rem; height: 5.2rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: 2.6rem; margin-bottom: var(--space-s); }
.card__title { font-size: var(--text-l); margin-bottom: var(--space-xs); }
.card__text { color: var(--tertiary); font-size: var(--text-s); }
.card__more { display: inline-block; margin-top: var(--space-s); font-weight: 700; }

/* Feature list with checks */
.checklist { display: grid; gap: var(--gap-xs); }
.checklist li { position: relative; padding-left: 1.9em; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-strong); font-weight: 800; }

/* Steps */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--gap-l); }
.steps__item { position: relative; }
.steps__num { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; margin-bottom: var(--space-s); }
@media (min-width: 480px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4,1fr); } }

/* Testimonials */
.quote { background: var(--bg-body); border: 0.1rem solid var(--border-primary); border-left: 0.4rem solid var(--accent); border-radius: var(--radius); padding: var(--space-l); box-shadow: var(--shadow-primary); }
.quote__stars { color: var(--accent); letter-spacing: 0.2rem; margin-bottom: var(--space-xs); }
.quote__text { font-size: var(--text-l); margin-bottom: var(--space-s); }
.quote__who { font-weight: 700; font-size: var(--text-s); }
.quote__where { color: var(--tertiary); font-size: var(--text-s); }

/* ----- CTA band ----- */
.cta-band { background: var(--primary); color: #fff; }
.cta-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-m); padding-block: var(--space-l); }
.cta-band__title { font-size: var(--text-xl); color: #fff; max-width: 20ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); width: 100%; }
.cta-band__actions .btn { flex: 1 1 100%; }
.cta-band .btn--primary { background: var(--accent); color: var(--text-title); }
.cta-band .btn--primary:hover { background: color-mix(in srgb, var(--accent), #000 12%); color: var(--text-title); }
.cta-band .btn--ghost { border-color: color-mix(in srgb, #fff 60%, transparent); color: #fff; }
@media (min-width: 700px) {
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .cta-band__actions { width: auto; }
  .cta-band__actions .btn { flex: 0 1 auto; }
}

/* ----- Forms ----- */
.form { display: grid; gap: var(--gap-s); background: var(--bg-body); border: 0.1rem solid var(--border-primary); border-radius: var(--radius); padding: var(--space-l); box-shadow: var(--shadow-primary); }
.form__row { display: grid; gap: var(--gap-s); grid-template-columns: 1fr; }
.form__group { display: grid; gap: var(--gap-xs); }
.form__label { font-weight: 600; font-size: var(--text-s); }
.form__label span { color: var(--accent-strong); }
.form__control { font: inherit; font-size: 1.6rem; padding: 0.75em 0.9em; border: 0.1rem solid var(--border-primary); border-radius: var(--radius-sm); background: #fff; color: var(--text-body); width: 100%; min-height: 4.8rem; }
.form__control:focus-visible { border-color: var(--accent); }
textarea.form__control { min-height: 12rem; resize: vertical; }
.form__hp { position: absolute; left: -9999px; width: 0.1rem; height: 0.1rem; overflow: hidden; }
.form__note { font-size: var(--text-xs); color: var(--tertiary); }
.form__error { background: #fde8e8; border: 0.1rem solid #f5b5b5; color: #9b1c1c; padding: var(--space-s); border-radius: var(--radius-sm); font-size: var(--text-s); }
.form__fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.form__checks { display: grid; grid-template-columns: 1fr; gap: var(--gap-xs) var(--gap-m); margin-top: var(--space-xs); }
.form__check { display: flex; align-items: center; gap: var(--gap-xs); font-size: var(--text-s); font-weight: 500; cursor: pointer; }
.form__check input { width: 1.8rem; height: 1.8rem; accent-color: var(--accent); flex: none; }
@media (min-width: 480px) { .form__checks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 520px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

/* ----- Breadcrumb ----- */
.breadcrumb { padding-block: var(--space-s); font-size: var(--text-s); color: var(--tertiary); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.breadcrumb li::after { content: "›"; margin-left: var(--gap-xs); color: var(--border-primary); }
.breadcrumb li:last-child::after { content: ""; }

/* ----- Page hero (interior) ----- */
.page-hero { background: var(--primary); color: var(--bg-body); padding-block: var(--space-l); }
.page-hero--image {
  background-image: linear-gradient(90deg, rgba(20,24,30,.94) 0%, rgba(20,24,30,.78) 45%, rgba(20,24,30,.5) 100%), var(--hero);
  background-size: cover; background-position: center; padding-block: var(--space-xl);
}
.page-hero__title { font-size: var(--text-xl); color: var(--bg-body); margin-bottom: var(--space-xs); }
.page-hero__lead { color: color-mix(in srgb, var(--bg-body) 80%, transparent); font-size: var(--text-l); max-width: 60ch; }

/* ----- Prose ----- */
.prose > * + * { margin-top: var(--space-m); }
.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }
.prose ul { display: grid; gap: var(--gap-xs); padding-left: 1.2em; list-style: disc; }
.prose p { color: var(--text-body); }

/* FAQ */
.faq__item { border: 0.1rem solid var(--border-primary); border-radius: var(--radius); margin-bottom: var(--space-s); background: var(--bg-body); overflow: hidden; }
.faq__item > summary { cursor: pointer; padding: var(--space-m); font-weight: 700; font-size: var(--text-l); list-style: none; display: flex; justify-content: space-between; gap: var(--gap-s); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; color: var(--accent-strong); font-weight: 800; }
.faq__item[open] > summary::after { content: "–"; }
.faq__body { padding: 0 var(--space-m) var(--space-m); color: var(--tertiary); }

/* ----- Sticky mobile call bar ----- */
.call-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--accent); color: var(--text-title); font-weight: 700; min-height: 5.6rem;
  padding: var(--space-s); box-shadow: 0 -0.4rem 1.6rem rgba(0,0,0,.2);
}
.call-bar:hover { text-decoration: none; color: var(--text-title); }
body { padding-bottom: 5.6rem; }
@media (min-width: 720px) {
  .call-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ----- Footer ----- */
.site-footer { background: var(--primary); color: color-mix(in srgb, var(--bg-body) 78%, transparent); padding-block: var(--space-xl) var(--space-l); }
.site-footer a { color: color-mix(in srgb, var(--bg-body) 78%, transparent); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-l); }
.site-footer__brand .site-header__brand-text { color: #fff; }
.site-footer__title { color: #fff; font-size: var(--text-s); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-s); }
.site-footer__list { display: grid; gap: var(--gap-xs); font-size: var(--text-s); }
.site-footer__phone { color: #fff; font-weight: 800; font-size: var(--text-l); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap-s); margin-top: var(--space-l); padding-top: var(--space-m); border-top: 0.1rem solid var(--secondary); font-size: var(--text-xs); }
@media (min-width: 480px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ----- Utilities ----- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack-sm > * + * { margin-top: var(--space-s); }
.stack-md > * + * { margin-top: var(--space-m); }
.text-soft { color: var(--tertiary); }
.visually-hidden { position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}