/* ==========================================================================
   Fix Auto Puyallup - Design System
   ========================================================================== */

/* ---------- Self-hosted typeface ----------
   Source Sans 3, served from this origin instead of Google Fonts.

   The site previously pulled a stylesheet from fonts.googleapis.com which in
   turn pulled two woff2 files from fonts.gstatic.com: three third-party
   requests, on a site whose whole point is that it has no dependencies. Only
   the maps embed is documented as an allowed outside load. Hosting the fonts
   here removes all three, removes a render-blocking stylesheet on a connection
   that has to be opened first, and means no visitor request goes to a third
   party just to read the page.

   These are the two latin subsets, which are the only ones a browser ever
   actually fetched here. They are variable fonts: one file covers every normal
   weight from 200 to 900, a second covers the italics, so all seven weights the
   design uses cost two files totalling 56KB.

   unicode-range is kept from Google's own CSS so a character outside latin
   falls through to the next family in the stack rather than rendering blank.
   font-display: swap keeps text visible while the file loads.

   To update: refetch the woff2 from the Google Fonts CSS with a modern browser
   user agent, drop them in assets/fonts, and leave these rules alone. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --red: #E21B52;
  --red-dark: #B01340;
  --black: #003056;
  --charcoal: #00223D;
  --gray-900: #222222;
  --gray-700: #4d4d4d;
  --gray-500: #747678;
  --gray-300: #d9d9d9;
  --gray-100: #f4f4f4;
  --white: #ffffff;

  --font-heading: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --container: 1320px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Keep anchor targets clear of the sticky header on deep links and jump links. */
[id] { scroll-margin-top: clamp(80px, 8vw, 108px); }

body {
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { color: var(--gray-700); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: clamp(58px, 6.4vw, 96px) 0;
}

.section-alt {
  background: linear-gradient(180deg, #fbfbfb 0%, var(--gray-100) 42%, #efefef 100%);
}

.section-dark {
  background: linear-gradient(135deg, #3a3a3a 0%, #262626 55%, #003056 100%);
  color: var(--white);
}
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: #f2f2f2; }
.section-dark a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

.eyebrow {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head p { margin-top: 12px; }
.section-head .section-lead {
  font-weight: 600;
  color: var(--black);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover { background: var(--red-dark); }

.btn-dark {
  background: var(--black);
  color: var(--white);
}
.btn-dark:hover { background: #000; }
/* Drawer buttons. .main-nav a sets a dark link colour at specificity 0,1,1,
   which outranks .btn-dark's own 0,1,0 colour rule, so the Book Appointment
   button in the mobile menu came out near-black on its own dark background -
   about 1.3:1, a label you cannot read. Scoped to .btn so only the buttons in
   the drawer are affected, not the menu links. */
.main-nav a.btn { color: var(--white); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--white);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--black);
  color: var(--black);
}
.btn-outline-dark:hover { background: var(--black); color: var(--white); }

.btn-block { width: 100%; }

/* ---------- Top bar ---------- */

.topbar {
  background: var(--black);
  color: #d8d8d8;
  font-size: 0.85rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #d8d8d8; }
.topbar a:hover { color: var(--white); }
.topbar-left span { color: var(--white); font-weight: 600; }
.topbar-left, .topbar-right {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
/* On desktop, dissolve the left/right wrappers so the address, hours, and
   phone number become three siblings spread evenly across the bar, instead
   of two items clustered left with the phone alone on the far right.
   (Must come after the display:flex rule above to win the cascade.) */
@media (min-width: 761px) {
  .topbar-left, .topbar-right { display: contents; }
}
.topbar strong { color: var(--white); }

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Longhand on purpose: the shorthand `16px 0` was wiping out .container's
     24px side padding and parking the logo on the screen edge. */
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  line-height: 1.1;
}
.logo img { height: 58px; width: auto; display: block; }
.logo-tagline {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 4px;
}
@media (max-width: 760px) {
  .logo img { height: 42px; }
  .logo-tagline { font-size: 0.56rem; }
}
.logo .brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--black);
  letter-spacing: -0.01em;
}
.logo .brand span {
  background: var(--gray-500);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
}
.logo .tagline {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 2px;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-nav > ul {
  display: flex;
  gap: 32px;
  align-items: center;
}

.dropdown {
  display: block;
}

.main-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-900);
  padding: 8px 2px 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.has-dropdown { position: relative; }
.has-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
.has-dropdown > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.6;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 230px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
}
.dropdown li a::after { content: none; }
.dropdown li a { border-bottom: none; padding: 9px 12px; }
.dropdown li a:hover { background: var(--gray-100); color: var(--red); border-bottom: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px square: the minimum comfortable tap target on a phone. */
  width: 44px;
  height: 44px;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--black);
  border-radius: 2px;
}
/* Everything that exists only for the mobile drawer is hidden by default and
   switched on inside the mobile media query. The markup is shared across both
   layouts, so without this the desktop nav grows an icon above every link and
   two section labels wedged into the horizontal bar. */
.nav-panel-head, .nav-panel-foot, .nav-sec { display: none; }
.main-nav > ul > li > a > .nav-ico { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background-color: #17191c;
  /* The repair-bay photo sits under a heavy near-black scrim, so it reads as
     depth and texture behind the content rather than as an image. */
  background-image:
    linear-gradient(120deg, rgba(16, 17, 19, 0.96) 0%, rgba(22, 24, 27, 0.88) 55%, rgba(10, 11, 13, 0.95) 100%),
    url("/assets/social/car-in-bay.webp");
  background-size: cover, cover;
  background-position: center, center 42%;
  color: var(--white);
  padding: 110px 0 100px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero p.lead {
  color: #f2f2f2;
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-slogan {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 18px;
}
.hero-slogan span { color: var(--red); font-style: normal; }

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-stats {
  display: flex;
  gap: 28px 36px;
  flex-wrap: wrap;
}
/* Four stats sit as an even 2x2 rather than wrapping 3 + 1 */
.hero-stats > div {
  flex: 0 1 calc(50% - 18px);
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--red);
}
.hero-stats div span {
  font-size: 0.82rem;
  color: #c9c9c9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-visual {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  padding: 28px;
}

.page-hero {
  background: var(--black);
  color: var(--white);
  padding: 70px 0;
  text-align: center;
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: #f0f0f0; max-width: 620px; margin: 14px auto 0; }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ---------- Cards / Grids ---------- */

.grid {
  display: grid;
  gap: 28px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* Blog listing as horizontal rows (long rectangles) */
.blog-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.blog-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.blog-row .post-main { flex: 1; }
.blog-row .post-main h2 { margin: 8px 0; font-size: 1.25rem; }
.blog-row .post-main p { margin: 0; }
.blog-row .learn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .blog-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.icon-badge svg { width: 28px; height: 28px; }

.card h3 { margin-bottom: 10px; }

.service-card a.learn {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--red);
  font-size: 0.9rem;
}

/* ---------- Why choose / features ---------- */

.feature-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 30px;
}
.feature-row .icon-badge { flex-shrink: 0; margin-bottom: 0; }
.feature-row h3 { margin-bottom: 6px; }

/* ---------- Testimonials ---------- */

.stars { color: var(--red); font-size: 1rem; letter-spacing: 2px; margin-bottom: 14px; }

.testimonial-card p.quote {
  font-style: italic;
  color: var(--gray-700);
  margin-bottom: 18px;
}
.testimonial-name { font-weight: 700; color: var(--black); }
.testimonial-role { font-size: 0.85rem; color: var(--gray-500); }

/* ---------- Insurance partner strip ---------- */


/* ---------- CTA banner ---------- */

.cta-banner {
  background: var(--red);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}
.cta-banner h2 { color: var(--white); margin-bottom: 12px; }
.cta-banner p { color: #FFD9E3; margin-bottom: 26px; }

/* ---------- Steps (claims process) ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.step {
  position: relative;
  padding-top: 10px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 16px;
}
/* Connector line joining the numbered steps (scoped to the homepage row) */
.steps-connected .step::before {
  position: relative;
  z-index: 1;
}
.steps-connected .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;                 /* padding-top (10) + circle radius (22) */
  left: 22px;                /* horizontal centre of the circle */
  width: calc(100% + 28px);  /* reaches the next circle's centre: column width + 28px gap */
  height: 3px;
  background: var(--black);
  transform: translateY(-50%);
  z-index: 0;
}
/* ---------- 13-step repair journey (homepage) ----------
   One rail, thirteen numbered nodes on it, three labelled phases. The phase
   name sits to the left; its steps run down a single vertical spine on the
   right, numbered 1-13 continuously so the whole thing reads as one journey
   from drop-off to delivery rather than three separate lists. The earlier
   layout wrapped the steps as pills, which read as a tag cloud and drew no
   path at all. Markup is unchanged: same ol.journey-flow and li as before. */
.journey {
  counter-reset: jstep;
  max-width: 1040px;
  margin: 0 auto;
}
.journey-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px 64px;
  align-items: start;
  padding: 28px 0;
}
/* A hairline between phases. The spine is inset from the top and bottom of
   each list, so the line crosses a gap in the rail: a visible phase break
   rather than a line drawn through the journey. */
.journey-row + .journey-row { border-top: 1px solid var(--gray-300); }
.journey-phase-tag {
  display: inline-block;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 6px;
}
.journey-info h3 { margin-bottom: 6px; }
.journey-info p { font-size: 0.92rem; line-height: 1.55; }
.journey-flow {
  list-style: none; /* the global reset only strips ul markers, not ol */
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
/* The rail. Sits behind the nodes, running from the centre of the first
   node to the centre of the last: 16px is half the node's 32px height plus
   the 9px row padding, minus 1px for the 2px stroke. */
.journey-flow::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 25px;
  bottom: 25px;
  width: 2px;
  background: var(--gray-300);
}
.journey-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--black);
}
/* Numbered node, drawn on top of the rail. Outlined and white-filled so the
   rail visibly passes behind it, which is what makes it read as a stop on a
   route instead of a badge next to a label. */
.journey-flow li::before {
  counter-increment: jstep;
  content: counter(jstep);
  flex: none;
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}
/* The payoff step: the one solid node on the rail, in the brand red. */
.journey-flow li.journey-final { color: var(--red); }
.journey-flow li.journey-final::before {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

@media (max-width: 960px) {
  .journey-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .journey-flow li { font-size: 0.95rem; }
}

/* ---------- FAQ ---------- */

.faq-item {
  border-bottom: 1px solid var(--gray-300);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-question .plus {
  font-size: 1.4rem;
  color: var(--red);
  transition: transform 0.2s ease;
}
.faq-item.open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.25s ease, visibility 0s linear 0.25s;
}
.faq-answer p { padding-bottom: 22px; }
/* generous cap: long answers wrap much taller on narrow screens, and overflow is hidden */
.faq-item.open .faq-answer {
  max-height: 1200px;
  visibility: visible;
  transition: max-height 0.25s ease, visibility 0s;
}

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gray-900);
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-900);
  background: var(--white);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
}
.field textarea { resize: vertical; min-height: 110px; }
.field small { color: var(--gray-500); font-size: 0.78rem; }

.form-note {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 14px;
}

.form-panel {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}


/* ---------- Contact info blocks ---------- */

.contact-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.contact-block .icon-badge { flex-shrink: 0; margin-bottom: 0; }
.contact-block h2 { margin-bottom: 4px; font-size: 1.05rem; }
.contact-block p { margin: 0; }

.map-frame {
  border: 0;
  width: 100%;
  height: 220px;
  border-radius: var(--radius);
}

/* ---------- Team / values ---------- */



/* Full-width decorative section imagery */

/* Blog list thumbnails */
.blog-row .blog-thumb { flex-shrink: 0; display: block; width: 190px; height: 128px; border-radius: var(--radius); overflow: hidden; }
.blog-row .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .blog-row .blog-thumb { width: 100%; height: 190px; } }

/* Blog post featured image */

.cert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.cert-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cert-chip.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cert-chip:hover {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px) scale(1);
  cursor: default;
}
.cert-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  transition: background 0.2s ease;
}
.cert-chip:hover .dot { background: var(--white); }


/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: #cfcfcf;
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  /* brand, Services, Resources, Company, Service Area, Contact. Six explicit
     tracks: a column added to the markup without a track here would land
     outside the template and stack unstyled. */
  grid-template-columns: 1.2fr 1fr 0.85fr 0.9fr 1fr 1.15fr;
  gap: 36px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid h3 {
  color: var(--white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a:hover { color: var(--white); }
.footer-brand .brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--white);
}
.footer-brand .brand span {
  background: var(--gray-500);
  color: var(--white);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 4px;
}
.footer-brand p { margin-top: 14px; max-width: 280px; color: #a9a9a9; }
/* Nothing sized the footer mark, so it just filled its column. On desktop that
   happened to land near the header logo's size, but once the footer stacks to
   one column on a phone it grew to 87% of the screen: bigger on a small screen
   than on a large one. Cap it so it stays a footer logo. */
.footer-logo img { max-width: 240px; }

.social-label {
  display: block;
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}
.social-row { display: flex; gap: 12px; margin-top: 0; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { background: var(--red); }
.social-row svg { width: 18px; height: 18px; }

.footer-bottom {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: #999;
}
.footer-bottom a:hover { color: var(--white); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  /* No order flip here. The hero column order is source order on one column:
     headline, lead, estimate buttons, then the trust cards. Lifting
     .hero-visual above the copy pushed the h1 1,282px down the page at 375px
     and the Get a Free Estimate button to 1,648px, two full phone screens
     below the fold, on the device most people reach for after a collision. */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps-connected .step::after { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar .container { justify-content: center; text-align: center; }
  /* Slide-in menu, anchored to the left so it opens under the toggle button.
     z-index must beat .nav-overlay (90): without it the panel sits UNDER the
     dark overlay, which greys the menu out and swallows every tap. That is
     what made the mobile menu look broken. */
  .main-nav {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(300px, 86vw);
    background: var(--white);
    box-shadow: 8px 0 24px rgba(0,0,0,0.18);
    padding: 0 0 28px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 95;
    /* Column layout: header and the call block stay put, only the links
       scroll. Otherwise the phone number sits below the fold, and on a
       collision shop's site the call is the most valuable action there is. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .main-nav.open { transform: translateX(0); }
  .nav-panel-head { flex-shrink: 0; }
  .main-nav > ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 28px 10px 0;
  }
  .nav-toggle { display: flex; }

  /* Branded bar across the top of the drawer, with the way out. Dark so the
     white logo reads and the panel feels like part of the site, not a default
     browser menu. Sticky so the X stays reachable while scrolling the links. */
  .nav-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 12px 16px 22px;
    background: var(--black);
    border-bottom: 3px solid var(--red);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .nav-panel-logo { width: 132px; height: auto; display: block; }
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 8px;
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .nav-close svg { width: 20px; height: 20px; }
  .nav-close:hover, .nav-close:focus-visible { background: var(--red); transform: rotate(90deg); }

  /* Links: full-width rows with a red marker that slides in, so the current
     page and the one being tapped are obvious at a glance. */
  .main-nav > ul > li { width: 100%; }
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 12px 0 12px 18px;
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 1.02rem;
    transition: border-color 0.15s ease, background 0.15s ease, padding-left 0.15s ease, color 0.15s ease;
  }
  /* An icon per destination. Gives the eye something to land on and makes the
     list scannable at a glance instead of reading as a wall of similar words. */
  .main-nav > ul > li > a > .nav-ico,
  .nav-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--gray-500);
    transition: color 0.15s ease;
  }
  .nav-ico svg { width: 100%; height: 100%; }
  .main-nav > ul > li > a:hover .nav-ico,
  .main-nav > ul > li > a.active .nav-ico { color: var(--red); }
  .nav-txt { min-width: 0; }

  /* Two quiet labels split ten links into three groups, so the eye gets a
     resting point instead of one uninterrupted run. */
  .nav-sec {
    display: block;
    width: 100%;
    padding: 16px 0 5px 21px;
    margin-top: 4px;
    border-top: 1px solid var(--gray-300);
  }
  .nav-sec:first-child { border-top: none; margin-top: 0; }
  .nav-sec span {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a:focus-visible {
    border-left-color: var(--red);
    background: var(--gray-100);
    padding-left: 24px;
  }
  .main-nav > ul > li > a.active {
    border-left-color: var(--red);
    background: rgba(198,12,48,0.06);
    color: var(--red);
  }

  /* Services sub-list, tied to its parent by a rule down the left and set a
     step smaller so it reads as detail under Services, not more top-level. */
  .main-nav .dropdown {
    border-left: 2px solid var(--gray-300);
    margin: 2px 0 6px 52px;
    padding: 2px 0 2px 14px;
  }
  .main-nav .dropdown li a {
    display: block;
    padding: 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: none;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .main-nav .dropdown li a:hover { color: var(--red); transform: translateX(3px); }

  /* Call and estimate, pinned to the bottom of the drawer. For a collision
     shop the phone call is the most valuable action on the whole site. */
  .nav-panel-foot {
    display: block;
    flex-shrink: 0;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--gray-300);
    background: var(--white);
  }
  .nav-call {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 16px;
  }
  .nav-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
  }
  .nav-call-icon svg { width: 18px; height: 18px; }
  .nav-call-text { display: flex; flex-direction: column; line-height: 1.25; }
  .nav-call-text strong { font-family: var(--font-heading); font-size: 1.02rem; color: var(--black); }
  .nav-call-text small { font-size: 0.76rem; color: var(--gray-500); margin-top: 2px; }

  /* The button inside the drawer is still an <a> inside .main-nav, so the
     nav's own link colour (.main-nav a, one class + one element) outranked
     .btn-primary (one class) and painted the label dark grey on red. Two
     classes here win it back. */
  .main-nav .btn-primary,
  .main-nav .btn-primary:hover {
    color: var(--white);
    border-bottom: none;
  }
  .main-nav .nav-panel-foot .btn { padding: 13px 20px; font-size: 0.95rem; }

  /* Links ease in behind the panel rather than appearing all at once. */
  .main-nav.open > ul > li,
  .main-nav.open .nav-panel-foot {
    animation: navItemIn 0.32s ease both;
  }
  .main-nav.open > ul > li:nth-child(1) { animation-delay: 0.04s; }
  .main-nav.open > ul > li:nth-child(2) { animation-delay: 0.07s; }
  .main-nav.open > ul > li:nth-child(3) { animation-delay: 0.10s; }
  .main-nav.open > ul > li:nth-child(4) { animation-delay: 0.13s; }
  .main-nav.open > ul > li:nth-child(5) { animation-delay: 0.16s; }
  .main-nav.open > ul > li:nth-child(6) { animation-delay: 0.19s; }
  .main-nav.open > ul > li:nth-child(7) { animation-delay: 0.22s; }
  .main-nav.open > ul > li:nth-child(8) { animation-delay: 0.25s; }
  .main-nav.open .nav-panel-foot { animation-delay: 0.28s; }
  @keyframes navItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .main-nav.open > ul > li,
    .main-nav.open .nav-panel-foot { animation: none; }
    .nav-close:hover, .nav-close:focus-visible { transform: none; }
  }
  .nav-actions .btn-primary.desktop-only { display: none; }
  .has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 6px 0 6px 16px;
    margin-top: 8px;
    min-width: 0;
  }
  .has-dropdown > a::after { content: none; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}
.nav-overlay.open { display: block; }

/* ---------- Trust bar (no boxes/cards, divider-separated) ---------- */

.trust-bar {
  display: flex;
  align-items: flex-start;
  gap: 0;
  /* Built for three items across. The bar now carries four here (Tesla, I-CAR,
     years, OEM) and five on a shop with a second marque certification, which
     crushes each column past readable if the row cannot break. Wrapping with a
     210px floor keeps them on one row on a wide screen and breaks to a second
     row instead of squeezing further. The vertical stack below 760px is
     unaffected. */
  flex-wrap: wrap;
  row-gap: 30px;
  /* Keeps the dividers honest once the row breaks. Every item carries a left
     border and is pulled 1px left, so whichever item starts a row lays its
     border outside the bar, where this clips it. With the border on
     `.trust-item + .trust-item` instead, the first item of the second row kept
     a rule that had nothing to its left, which read as a stray vertical line. */
  overflow: hidden;
}

.trust-item {
  flex: 1 1 210px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  margin-left: -1px;
  border-left: 1px solid var(--gray-300);
}

.trust-item:first-child {
  padding-left: 0;
}

.trust-item:last-child {
  padding-right: 0;
}

.trust-stat {
  flex-shrink: 0;
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--red);
}

.trust-item .icon-badge {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}
.trust-item .icon-badge svg {
  width: 22px;
  height: 22px;
}

.trust-label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--black);
}

.trust-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gray-700);
}

.trust-item .learn {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .trust-bar {
    flex-direction: column;
    gap: 40px;
  }
  .trust-item {
    padding: 0 !important;
    border-left: none !important;
    /* The 1px pull only exists to hide a left border there is none of here. */
    margin-left: 0;
  }
  .trust-item + .trust-item {
    border-left: none;
    border-top: 1px solid var(--gray-300);
    padding-top: 32px !important;
  }
}

/* ---------- All-makes banner ---------- */

/* ---------- Exclusion / plain bullet list ---------- */

.exclusion-list {
  columns: 2;
  column-gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.exclusion-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  break-inside: avoid;
  color: var(--gray-700);
}
.exclusion-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}
@media (max-width: 760px) {
  .exclusion-list { columns: 1; }
}

/* ---------- Before/after photo placeholders ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.photo-placeholder {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-500);
  text-align: center;
  padding: 20px;
}
.photo-placeholder svg { width: 34px; height: 34px; }
.photo-placeholder span { font-weight: 700; font-size: 0.85rem; }

@media (max-width: 960px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* ---------- Placeholder / verify callouts (remove once real content is added) ---------- */



/* ---------- Legal / policy documents (Terms, Privacy) ---------- */
.legal-doc {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--gray-700);
}

.legal-doc > h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--black);
  letter-spacing: 0.01em;
  margin: 2.75em 0 0.7em;
  padding-top: 1.4em;
  border-top: 1px solid var(--gray-300);
}

.legal-doc > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-doc p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700);
  margin: 0 0 1.15em;
}

.legal-doc p:last-child { margin-bottom: 0; }

.legal-doc a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover { color: var(--red-dark); }

/* contact block at the end of a policy */
.legal-contact {
  background: var(--gray-100);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-top: 0.6em;
  line-height: 1.9;
}
.legal-contact strong {
  display: block;
  color: var(--black);
  font-size: 1.02rem;
  margin-bottom: 2px;
}

@media (max-width: 640px) {
  .legal-doc > h2 { font-size: 1.08rem; margin-top: 2.2em; padding-top: 1.1em; }
  .legal-doc p { line-height: 1.75; }
  .legal-contact { padding: 18px 20px; }
}

/* Lists inside legal documents: no bullet markers, single column */
.legal-doc ul,
.legal-doc .exclusion-list {
  columns: 1;
  list-style: none;
  max-width: none;
  margin: 0 0 1.15em;
  padding-left: 0;
}

.legal-doc .exclusion-list li,
.legal-doc ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: 0.55em;
  line-height: 1.8;
  color: var(--gray-700);
}

.legal-doc .exclusion-list li::before {
  content: none;
}

.legal-doc ul li:last-child { margin-bottom: 0; }

/* Full-width map below the contact grid */
.map-frame-wide {
  height: 380px;
  margin-top: 44px;
}
@media (max-width: 760px) {
  .map-frame-wide { height: 280px; margin-top: 32px; }
}

/* VIP Rentals feature panel + supporting perks (insurance page) */
.vip-rentals {
  border-left: 4px solid var(--red);
  padding: 40px 44px;
  margin-bottom: 26px;
}
.vip-rentals-body { max-width: 760px; }
.vip-rentals .eyebrow { display: block; margin-bottom: 8px; }
.vip-rentals h3 {
  margin-bottom: 16px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.25;
}
.vip-rentals p { margin-bottom: 14px; line-height: 1.75; }
.vip-rentals .btn { margin-top: 10px; }
/* Companion card for non-Tesla drivers: same shape, quieter accent, so the
   two rental paths read as equals rather than headline and afterthought. */
.vip-rentals-allmakes { border-left-color: var(--black); padding-top: 32px; padding-bottom: 32px; }
.vip-rentals-allmakes .eyebrow { color: var(--gray-700); }
.vip-rentals-allmakes p { margin-bottom: 0; }

.vip-perks .card { padding: 26px 24px; }
.vip-perks .card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.vip-perks .card p { font-size: 0.95rem; line-height: 1.65; margin-bottom: 0; }
.vip-perks .icon-badge { margin-bottom: 14px; }

@media (max-width: 760px) {
  .vip-rentals { padding: 28px 24px; }
}

/* ---------- Header fit: prevent nav overflow between 760px and full desktop ---------- */
/* The desktop header tightens progressively as the viewport narrows, rather than
   letting it push past the viewport and cause sideways scroll.

   Every threshold below was measured, not estimated. Each one has to sit at or
   above the width the header actually needs once that step's tightening is in
   force, because the step releases as soon as the viewport passes it. The old
   values were all roughly 50 to 80px too low, so the header sprang back to a
   wider layout before there was room for it, and the page scrolled sideways in
   four separate bands: 761-806, 961-1041, 1181-1253 and 1321-1373. Two of those
   are iPad portrait and iPad landscape. Measured widths needed:

       full size                     1374px  ->  threshold 1380
       with gaps tightened           1254px  ->  threshold 1260
       with the phone button gone    1041px  ->  threshold 1060
       with the estimate button gone  807px  ->  threshold  860

   If a menu item, a button or a longer trading name is ever added to the header,
   re-measure and raise these again. Checked from 320px to 1440px with no
   horizontal overflow at any width. */
@media (max-width: 1380px) {
  .nav-wrap { gap: 22px; }
  .main-nav > ul { gap: 20px; }
}

@media (max-width: 1260px) {
  /* the phone number is already in the topbar, so drop the duplicate button first */
  .nav-actions .btn-outline-dark { display: none; }
  .nav-wrap { gap: 18px; }
  .main-nav > ul { gap: 16px; }
  .main-nav a { font-size: 0.95rem; }
}

@media (max-width: 1060px) {
  .logo-tagline { display: none; }
  .main-nav > ul { gap: 12px; }
  .main-nav a { font-size: 0.9rem; }
  /* topbar already carries the phone number and the mobile menu is close behind */
  .nav-actions .btn-primary.desktop-only { display: none; }
  .nav-wrap { gap: 14px; }
  /* Tap targets. Between 761 and 1060 the horizontal desktop nav is on screen at
     sizes that are almost always a touch device, iPad portrait and landscape
     included, and the base padding leaves each link only 35 to 37px tall. This
     brings them to roughly 44px, the house minimum. Vertical padding only, so it
     cannot reintroduce the horizontal overflow the thresholds above exist to
     prevent; it costs about 9px of header height in this band and nothing
     elsewhere. Below 761 the slide-in menu takes over and sets its own, larger,
     targets. */
  .main-nav > ul > li > a { padding-top: 12px; padding-bottom: 11px; }
}

@media (max-width: 860px) {
  /* Last step before the mobile menu takes over at 760. Without this the full
     desktop nav is still on screen between 761 and 806 with nothing left to
     give, which is the iPad portrait case. height:auto on the logo is required:
     capping max-width while another rule sets an explicit height squashes the
     mark instead of scaling it. */
  .nav-wrap { gap: 10px; }
  .main-nav > ul { gap: 9px; }
  .main-nav a { font-size: 0.85rem; }
  .logo img { max-width: 150px; height: auto; }
}

@media (max-width: 760px) {
  /* mobile menu takes over; restore the phone button since the nav collapses */
  .nav-actions .btn-outline-dark { display: inline-flex; }
}

/* Small phones: the header needs to fit 375px without sideways scroll.
   Keep the tap-to-call button (valuable for a collision shop) but shrink it. */
@media (max-width: 560px) {
  .nav-wrap { gap: 10px; }
  /* height:auto is required. The 760px rule above sets an explicit height, and
     a fixed height plus a max-width squashes the logo instead of scaling it:
     the 484x116 mark was rendering 118x42, a third narrower than it should be.
     Letting height follow the capped width keeps the lockup in proportion. */
  .logo img { max-width: 150px; height: auto; }
  .footer-logo img { max-width: 185px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-outline-dark {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

@media (max-width: 400px) {
  .logo img { max-width: 128px; height: auto; }
  .nav-actions .btn-outline-dark { padding: 9px 11px; font-size: 0.8rem; }
}

/* ---------- Before & after pairs ---------- */

.ba-card {
  padding: 0;
  overflow: hidden;
}
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--gray-300);
}
.ba-slot {
  position: relative;
  background: var(--gray-100);
}
.ba-slot .photo-placeholder {
  border: 0;
  border-radius: 0;
  height: 100%;
}
.ba-slot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ba-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}
.ba-slot.is-after .ba-tag { background: var(--red); }
.ba-body { padding: 22px 26px 26px; }
.ba-body h3 { font-size: 1.15rem; margin-bottom: 6px; }
.ba-body p { font-size: 0.95rem; margin: 0; }

/* Before & After runs wider than the rest of the site so the photos are larger */
.ba-container { max-width: 1560px; }
.ba-container .ba-tag { top: 12px; left: 12px; font-size: 0.75rem; padding: 5px 11px; }
.ba-container .photo-placeholder svg { width: 44px; height: 44px; }
.ba-container .photo-placeholder span { font-size: 0.95rem; }
/* Below full desktop, give each pair the whole row so the photos stay large */
@media (max-width: 1200px) {
  .ba-container .grid-2 { grid-template-columns: 1fr; }
}
/* On phones, stack before over after so each photo gets the full width */
@media (max-width: 600px) {
  .ba-container .ba-pair { grid-template-columns: 1fr; }
}

/* ---------- Team group photo ---------- */

.team-photo {
  margin: 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.team-photo img,
.team-photo .photo-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.team-photo figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-500);
}
@media (max-width: 760px) {
  .team-photo img,
  .team-photo .photo-placeholder { aspect-ratio: 4 / 3; }
}

/* ---------- Owner portrait (About page) ----------
   Mobile-first: full width and 4/3 on a phone, then capped and square once it
   sits beside the copy. Width is capped, so height stays auto by aspect-ratio
   rather than being fixed anywhere. */

.owner-photo {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.owner-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.owner-photo .photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) {
  .owner-photo img,
  .owner-photo .photo-placeholder { aspect-ratio: 1 / 1; }
}

/* ---------- Skip to main content ---------- */

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* ---------- Featured lead card (Tesla panel in "Every Make and Model") ---------- */

.lead-card {
  border-left: 4px solid var(--red);
  padding: 34px 38px;
}
.lead-card .eyebrow { margin-bottom: 8px; }
.lead-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.lead-card p { max-width: 70ch; margin-bottom: 20px; }
@media (max-width: 760px) {
  .lead-card { padding: 26px 22px; }
  .lead-card h3 { font-size: 1.15rem; }
}

/* ---------- Before & after card badge ---------- */

.ba-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ba-badge.is-tesla {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ---------- Before & after group headings ---------- */

.ba-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-300);
}
.ba-group-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ba-group-tag.is-tesla {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
@media (max-width: 620px) {
  .ba-group-head { font-size: 1rem; gap: 9px; }
}

/* ==========================================================================
   Scroll rhythm & motion

   These are scroll-driven CSS animations: progress is tied to scroll position
   rather than to a timer, so nothing runs on the main thread and nothing can
   jank. Everything sits behind @supports, so a browser without
   animation-timeline simply renders the finished state, and behind
   prefers-reduced-motion, so anyone who has asked for stillness gets it.
   ========================================================================== */

@keyframes reveal-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: none; }
}

@keyframes hero-drift {
  to { translate: 0 -34px; opacity: 0.6; }
}

@keyframes header-settle {
  to { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.13); }
}

/* Soften the seam where the dark hero hands off to the first white section, so
   the page below reads as emerging rather than as an abrupt colour flip. */
.hero > .container { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Content lifts into place as it enters the viewport. This animates
       `translate` rather than `transform` on purpose: the animation's filled
       end state would otherwise outrank the .card:hover lift and kill it. */
    .section-head,
    .journey-row,
    .card,
    .step,
    .feature-row,
    .trust-item,
    .testimonial-card,
    .ba-card,
    .ba-group-head,
    .faq-item,
    .team-photo,
    .blog-row,
    .cta-banner .container {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 55%;
    }

    /* Side-by-side grid children share one entry timeline, so the stagger comes
       from shifting each range later within the entry phase. Percentages of that
       phase rather than pixels, so a short element still finishes revealing
       instead of stalling partway. animation-delay is a time offset and a scroll
       timeline has no clock, so it would do nothing here. */
    .grid > *:nth-child(2),
    .journey > *:nth-child(2) { animation-range: entry 14% entry 68%; }
    .grid > *:nth-child(3),
    .journey > *:nth-child(3) { animation-range: entry 26% entry 81%; }
    .grid > *:nth-child(4) { animation-range: entry 38% entry 94%; }

    /* Hero copy drifts up slightly faster than the page scrolls and dims as it
       leaves, which gives the top of the site a sense of depth. */
    .hero > .container {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 440px;
    }
  }
}

/* Not motion, so this one runs regardless of the reduced-motion setting: the
   sticky header earns a real shadow once it is floating over content. */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-settle linear both;
    animation-timeline: scroll(root);
    animation-range: 30px 150px;
  }
}

/* A printed page has no scroll container, so a scroll-driven reveal could leave
   content stuck at its opening keyframe. Force the finished state on paper. */
@media print {
  .site-header,
  .hero > .container,
  .section-head,
  .card,
  .step,
  .feature-row,
  .trust-item,
  .testimonial-card,
  .ba-card,
  .ba-group-head,
  .faq-item,
  .team-photo,
  .blog-row,
  .cta-banner .container {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
  .hero::after { display: none; }
}

/* ---------- Blog article body ---------- */

/* Long-form post copy: one centered measure, with real vertical rhythm.
   The global reset zeroes all margins, so every element here sets its own. */
.article-body {
  max-width: 760px;
  margin: 0 auto;
}
.article-body > p {
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: 24px;
}
.article-body > p:last-child { margin-bottom: 0; }

/* Section headers sit centered over the column, with clear air above them so
   each one reads as the start of a new section rather than part of the para
   it follows. */
.article-body > h2 {
  text-align: center;
  max-width: 640px;
  margin: 64px auto 24px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.28;
}
.article-body > h2:first-child { margin-top: 0; }

.article-body > h3 {
  text-align: center;
  margin: 44px auto 16px;
}

.article-body > ul,
.article-body > ol {
  margin: 0 0 24px 24px;
  padding-left: 4px;
}
.article-body > ul { list-style: disc; }
.article-body > ol { list-style: decimal; }
.article-body > ul li,
.article-body > ol li {
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 10px;
}

.article-body img {
  border-radius: var(--radius);
  margin: 8px auto 28px;
}

/* The FAQ block that closes most posts: give the accordion room to breathe
   under its heading and before whatever follows it. */
.article-body .faq-item:first-of-type { border-top: 1px solid var(--gray-300); }
.article-body .faq-item + .faq-item { margin-top: 0; }

@media (max-width: 640px) {
  .article-body > p { margin-bottom: 20px; }
  .article-body > h2 { margin: 46px auto 18px; }
  .article-body > h3 { margin: 34px auto 14px; }
}

/* 320px is the tightest real phone width and the header is where this site runs
   out of room first. The 400px step above still left the tap-to-call pill 5px
   past the viewport, so at 360px and below the gutter and the pill's side
   padding both come in. Vertical padding is deliberately untouched, so the
   button keeps its height and stays a comfortable tap target. */
@media (max-width: 360px) {
  .nav-wrap { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .nav-actions .btn-outline-dark { padding-left: 9px; padding-right: 9px; }
}

/* Reviews section head with a leave-a-review button. The heading block stays
   centred like every other section head on the site; the button sits under it
   on a phone and beside it on a desktop. */
.reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 44px;
}
.reviews-head .section-head { margin-bottom: 0; }
.reviews-head-cta { margin-top: 20px; }

@media (min-width: 900px) {
  .reviews-head { display: block; position: relative; }
  /* The heading block is centred on the section, not on the space left over, so
     it has to be kept out of the button's corner itself: 210px is the button
     plus a gap, taken off BOTH sides so the heading stays centred over the
     cards below. Without it the 640px block runs under the button between
     900px and about 1100px, where the container is not yet wide enough for
     both. */
  .reviews-head .section-head { max-width: min(640px, calc(100% - 420px)); }
  .reviews-head-cta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
  }
  .reviews-head-cta:hover { transform: translateY(-50%) translateY(-2px); }
}
/* ==========================================================================
   Fix Auto brand accents - appended by _build/build.ps1
   ========================================================================== */

:root {
  --navy: #003056;
  --navy-dark: #00223D;
  --yellow: #FFF200;
  --crimson: #E21B52;
  --crimson-text: #C0143F;
}

/* Navy carries the accent text. The logo crimson is bright enough for fills
   (white on it clears AA) but measures only 4.20 as small text on the grey
   sections, under the 4.5 floor - so crimson is reserved for CTAs and fills. */
.eyebrow,
.main-nav a.active,
.dropdown li a:hover,
.hero-slogan span,
.hero-stats div strong,
.breadcrumb,
.service-card a.learn,
.faq-question .plus,
.partner-strip .partner-chip:hover,
.trust-stat { color: var(--navy); }

/* Yellow on navy passes contrast comfortably; yellow on white does not, so it
   is confined to the navy surfaces and never used as text on a light one. */
.section-dark .eyebrow { color: var(--white); }
.topbar a:hover { color: var(--white); text-decoration: underline; }
.site-footer h4 { color: var(--white); }

/* Muted greys were tuned against the old near-black surfaces; navy is lighter,
   so they drop below AA (.social-label measured 2.76, .footer-bottom 4.42). */
.social-label { color: #B8BCC2; }
.footer-bottom { color: #B8BCC2; }
.footer-brand p { color: #B8BCC2; }

/* No tint of the crimson banner reaches 4.5 against it, so the banner body
   copy is plain white rather than a pale wash. */
.cta-banner p { color: var(--white); }

/* Visible keyboard focus in a brand colour that reads on both surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* The topbar used space-between, which pinned the address/hours hard left and
   the phone/email hard right with a wide dead gap between them. Centring the
   row groups them in the middle instead. Desktop only - below 760px the base
   stylesheet already centres this bar. */
@media (min-width: 761px) {
  .topbar .container { justify-content: center; gap: 48px; }
}

/* The hero sits on a near-black panel, but the accent rules above paint its
   .eyebrow, .hero-slogan span and stat figures navy - about 1.4:1 against that
   panel, effectively unreadable. On this one dark surface the accent goes white,
   and the greys come up with it so the column reads as one block. .hero p.lead
   needs the tag to outrank the template's own .hero p.lead. The .hero-visual
   card is deliberately left on its own greys. */
.hero .eyebrow,
.hero .hero-slogan span,
.hero p.lead,
.hero .hero-stats strong,
.hero .hero-stats span { color: var(--white); }

/* The three logo colours carry the accents: navy ground, crimson fills, yellow
   highlights. Crimson is the logo's own red and white on it measures 4.66:1, so
   it clears AA as a fill behind white labels. It is never small text on a light
   section - that is what --crimson-text is for (6.2:1 on white, 5.6:1 on the
   grey sections). Crimson holds 2.9:1 as a shape on the navy hero, under the 3:1
   graphic floor, but that is the logo's own pairing and the white labels on top
   read at 4.66:1 regardless. */
:root {
  /* Every crimson surface resolves through --red, so setting it here returns all
     27 usages to the logo red in one place: CTA banner, nav active underline,
     stars, card accents, learn-more links, buttons, icon badges, cert dots. */
  --red: #E21B52;
  --red-dark: #B01340;
  --crimson: #E21B52;
  --crimson-text: #C0143F;
  /* Legacy alias. The Rivian announcement eyebrow was authored against --blue
     while the accents were blue; it is pointed at the crimson so anything still
     referencing it lands on a logo colour rather than an unbranded one. */
  --blue: #C0143F;
  --blue-dark: #B01340;
}
.btn-primary { background: var(--crimson); }
.btn-primary:hover { background: var(--red-dark); }
.icon-badge { background: var(--crimson); }
.rivian-news-copy .eyebrow { color: var(--crimson-text); }

/* Accent text on the light sections. The block above this one put these on navy
   because plain crimson measures 4.20 as small text on the grey; the darkened
   crimson clears the 4.5 floor on both the white and the grey sections. */
.eyebrow,
.main-nav a.active,
.dropdown li a:hover,
.service-card a.learn,
.faq-question .plus,
.partner-strip .partner-chip:hover,
.stars { color: var(--crimson-text); }
.main-nav a.active { border-bottom-color: var(--crimson); }

/* The stat figures stay navy. They sit beside crimson icon badges in the trust
   bar, and two reds competing in one row reads as noise rather than emphasis. */
.trust-stat { color: var(--navy); }

/* Accent text on the navy surfaces is white. Yellow reads at 11.5:1 here and was
   used for it, but at paragraph and label sizes it carried more weight than the
   copy next to it; white sits back and lets the crimson fills lead. Yellow stays
   on this site only as graphic accents - the heading rules and the footer edge -
   never as type. These cannot go navy: that is the ground they sit on. */
.hero .eyebrow,
.hero .hero-slogan span,
.hero .hero-stats strong,
.breadcrumb,
.section-dark .eyebrow { color: var(--white); }

/* The dark sections were a grey-to-navy gradient carried over from the template.
   Navy at both ends drops the off-brand grey and gives the yellow accents on
   these panels a cleaner ground. */
.section-dark {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, #0A3D6B 100%);
}

/* Yellow wedge under the section headings, echoing the arrow in the logo and
   matching the rule already under the inner-page h1s. Decorative, so it carries
   no contrast requirement of its own. */
/* The template stylesheet has .team-photo (the group shot) but not the owner
   portrait beside it: a single 1:1 crop at the group photo's 960px would tower
   over the page, so it gets its own much narrower box. */
.team-photo-owner {
  max-width: 340px;
  margin-top: 44px;
}
.team-photo-owner img { aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .team-photo-owner img { aspect-ratio: 1 / 1; }
}

/* Body copy that sat in one column of a two-column grid beside an owner portrait.
   With the portrait gone it needs its own measure, or it runs the full container
   width and the line length becomes unreadable. */
.prose-block { max-width: 68ch; margin: 0 auto; }

.section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
  margin: 16px auto 0;
}

/* The CTA band goes back to crimson, where the yellow button is the strongest
   thing on the page: 3.98:1 for the button shape against the band and 11.5:1
   for the navy label. */
.cta-banner { background: var(--crimson); }
/* Rivian announcement: copy left, artwork right. .section-head is not reused
   here because it centres its text, and this block reads as a news item rather
   than a section heading. Collapses to one column at 860px, where two columns
   would leave the paragraph too narrow to read comfortably. */
.rivian-news {
  display: grid;
  /* The artwork gets the larger share so it renders at its native 640px instead
     of being downscaled to ~520px, which was softening the badge text along the
     bottom of the graphic. 640px is the ceiling: the supplied file is 640x503,
     so anything wider is interpolation rather than detail. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 40px;
  align-items: center;
}
/* "Big News" carries the announcement, so it is scaled up from the site-wide
   eyebrow (0.8rem/700) rather than reading as a quiet section label. Scoped to
   this block so every other eyebrow on the site is untouched. */
.rivian-news-copy .eyebrow {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--crimson-text);
}
@media (max-width: 860px) { .rivian-news-copy .eyebrow { font-size: 1.9rem; } }.rivian-news-copy { text-align: left; }
.rivian-news-copy h2 { margin: 6px 0 14px; }
.rivian-news-copy p { margin-bottom: 24px; max-width: 46ch; }
.rivian-news-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) {
  .rivian-news { grid-template-columns: 1fr; gap: 28px; }
  .rivian-news-copy { text-align: center; }
  .rivian-news-copy p { margin-left: auto; margin-right: auto; }
}

/* The trust-bar wrap rules used to be appended here, scoped with
   :has(.trust-item:nth-child(4)) so a three-item bar stayed untouched. The
   template stylesheet now carries flex-wrap, the 210px basis and the
   divider-clipping for every item count, so repeating them here would just be a
   second place to keep in sync. Removed 2026-09-10. */

/* The CTA banner is crimson, and its button is .btn-dark (brand navy), which
   measures only 2.9:1 against that crimson - the label would read but the button
   shape would not. The yellow treatment below replaces it. */
/* ---- Yellow accents -------------------------------------------------------
   #FFF200 measures about 1.2:1 against white, so it never appears as text on a
   light surface. It is confined to the navy and crimson surfaces, or used as a
   fill carrying dark text, which is how the logo uses it too. */

/* Topbar phone number. Navy ground, so yellow clears 11:1 and it pulls the eye
   to the number, which is the thing we actually want clicked. */
.topbar a[href^="tel:"] { color: var(--white); font-weight: 700; }
.topbar a[href^="tel:"]:hover { color: var(--white); text-decoration: underline; }

/* CTA banner button: yellow ground, navy label. 6.0:1 against the blue band and
   11:1 for the label, and it is the strongest call to action on the page. This
   replaces the white-on-blue treatment, which was safe but quiet. */
.cta-banner .btn-dark { background: var(--white); color: var(--crimson-text); }
.cta-banner .btn-dark:hover { background: #F2F2F2; color: var(--crimson-text); }

/* A yellow rule where the footer meets the page above it. */
.site-footer { border-top: 4px solid var(--yellow); }

/* Short rule under inner-page headings. Scoped to .page-hero: those are navy
   and centred, while the homepage .hero is a different class and left-aligned. */
.page-hero h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
  margin: 20px auto 0;
}

/* The footer mark has no height of its own in the base stylesheet - only a
   240px max-width - which an SVG wordmark satisfied but a bitmap does not, so
   it would render at its full intrinsic height. A fixed 44px height fixed that
   and then undershot badly: the Fix Auto lockup is 3.7:1, so 44px tall is just
   163px wide inside a 243px column, leaving 77px unused and squeezing the city
   line under COLLISION down to under 4px of cap height - unreadable at any
   zoom, on every Fix Auto site. Fill the column and let the height follow.
   Both axes move together on purpose: capping one while the other is fixed
   squashes the mark instead of scaling it. */
.footer-logo img { width: 100%; max-width: 240px; height: auto; }