/* AZ Collision — post-audit additions (sticky header, mobile bar, footer, a11y) */

/* --- Accessibility utilities --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 2000;
  padding: 10px 18px;
  background: #fff;
  color: #050607;
  border-radius: 999px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.accordion-item---v1 > summary:focus-visible,
.services-viewport:focus-visible,
.w-nav-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Form field border contrast (WCAG 1.4.11) */
.input,
.text-area,
.select-field {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Native select made consistent with inputs */
.select-field {
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.select-field option {
  color: #050607;
  background: #fff;
}

/* --- Sticky header --- */
.header-wrapper.header-floating.navm {
  position: sticky;
  top: 0;
  z-index: 990;
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(5, 6, 7, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* A useful navigation path remains available when the Webflow menu runtime is
   unavailable. The element exists only inside <noscript>. */
.no-js-nav {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 12px 20px 18px;
  background: #050607;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.no-js-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 991px) {
  .no-js-nav {
    display: flex;
  }
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Hero proof strip --- */
.hero-proof {
  margin-top: 20px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

/* Logo marquee: fixed height stops layout shift */
.logo-marquee-image-wrapper img {
  height: 44px;
  width: auto;
}

/* --- Review source links --- */
.review-links {
  margin-top: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
}
.review-links a,
.review-source-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-links a:hover,
.review-source-link:hover {
  opacity: 0.8;
}

/* --- Footer --- */
.site-footer {
  background: #08090b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 56px 24px 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.6;
}
/* Column ratios, not an even 1fr each: the "Visit us" column carries the hours,
   which are now unbreakable whole phrases, and a 1fr track resolves to
   minmax(auto, 1fr) -- its auto minimum is the phrase's max-content. At 2fr the
   track was landing on exactly 170.5px, the width of "Sat-Sun: by appointment
   only" to the pixel, so the phrase was sizing the grid rather than fitting in
   it and any font-metric shift would have pushed the row past 1118px. Trading
   0.3fr from the brand column (315px -> ~278px, which still clears the 283px
   logo and both text lines) buys the hours column ~18px of genuine slack and
   widens the Contact column, whose "info@azcollisionla.com" was equally tight. */
.footer-inner {
  max-width: 1118px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1.15fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .footer-logo {
  height: 64px;
  width: auto;
}
.footer-name {
  margin-top: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 17px;
}
.footer-tag {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-heading {
  padding: 0;
  color: #fff;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12.5px;
}
.footer-page-title.get-in-touch {
  margin-top: 0;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-col address {
  font-style: normal;
}
.footer-hours {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom {
  max-width: 1118px;
  margin: 40px auto 0;
  padding: 18px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}
@media (max-width: 991px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 479px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --- Mobile sticky action bar --- */
.mobile-action-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-action-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 995;
    background: rgba(8, 9, 11, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-action-bar a {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  .mobile-action-bar a:last-child {
    border-right: 0;
  }
  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: 8px;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Webflow's reduced-motion session skips its reveal transforms. Override the
   inline starting state as well so skipped animations cannot leave content
   transparent or translated off screen. */
@media (prefers-reduced-motion: reduce) {
  body[data-wf-ix-vacation] [style*="opacity:0"] {
    opacity: 1 !important;
    transform: none !important;
  }
  .logo-link:hover,
  .accordion-item---v1:hover,
  .service-card:hover {
    transform: none;
  }
}

/* Keep the phone number on one line in the header pill */
.btn-with-icon {
  white-space: nowrap;
}
@media (max-width: 479px) {
  .container-default.navigation {
    padding-left: 16px;
    padding-right: 16px;
  }
  .header-container-wrapper {
    column-gap: 8px;
  }
  .logo-icon-wrapper._34px {
    width: 72px;
  }
  .nav-menu-right-side {
    column-gap: 8px;
  }
  .nav-menu-right-side .container-2 {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .button.btn-with-icon {
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    border: 1px solid #383838;
    border-radius: 10px;
    background: linear-gradient(#161616, #222);
    gap: 4px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .button.btn-with-icon .image-23 {
    width: 16px;
    padding-right: 0;
    opacity: 1;
  }
  /* Webflow gives every 494px inner container 60px side margins on phones.
     That leaves this heading only 200px at 320px, narrower than the word
     "craftsmanship" and creates document-level horizontal scrolling. */
  .inner-container._494px.center.about {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* --- Real-review grid (replaces marquee) --- */
.rating-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 36px;
}
.rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.rating-chip:hover {
  background: rgba(255, 255, 255, 0.09);
}
.stars {
  color: #E7B008;
  letter-spacing: 2px;
  font-size: 15px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.review-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}
.review-card .stars {
  font-size: 16px;
}
.review-card blockquote {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  text-align: left;
}
.review-card figcaption {
  text-align: left;
}
/* Avatar left, name + meta stacked to its right. The 14px padding-top and the
   rule above it are the card's existing rhythm and stay untouched -- only the
   axis changes, and .review-who keeps the old 3px name/meta stack. */
.review-card figcaption {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.review-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.review-name {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.review-meta {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}
.review-meta a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-meta a:hover {
  color: #fff;
}
@media (max-width: 991px) {
  .reviews-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 649px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Reviews section: tighten the template's dead space --- */
.section.testimonial {
  padding-top: 96px;
  padding-bottom: 72px;
}
.section.testimonial .divider.mg-48px {
  margin: 28px 0;
}

/* --- Item 12: reviews-section gutters --------------------------------------
   az-collision.css:5393 zeroes this container's gutter outright
   (.container-default.cus { padding-left: 0; padding-right: 0 }), and index.html
   uses that class pair exactly once -- the testimonial wrapper on line 447.
   Above 1118px the inner .inner-container._1118px.center caps the content width
   so the missing padding never shows; below it the heading, the rating chips,
   the review cards, the CTA and the links row all lose their gutter, because the
   template's generic .container-default padding rules are only (0,1,0) and lose
   to .cus. One rule on the outer container moves all of them together -- the
   inner container adds no padding of its own.

   .section.testimonial .container-default.cus is (0,4,0) and custom.css loads
   second, so no !important is needed. 24px matches the services/FAQ gutter that
   the template itself uses in this range; below 768px it steps to 20px, which
   keeps the card's own 24px interior padding dominant while leaving the section
   visible breathing room on a phone. */
@media (max-width: 1118px) {
  .section.testimonial .container-default.cus {
    padding-left: var(--core--container-default--padding--default); /* 24px */
    padding-right: var(--core--container-default--padding--default);
  }
}
@media (max-width: 767px) {
  .section.testimonial .container-default.cus {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Map embed in Get in touch --- */
.map-embed {
  margin-top: 32px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  /* Quick dark-map treatment for the cross-origin Google Maps embed. */
  filter: invert(90%) hue-rotate(180deg) saturate(75%) contrast(88%);
}

/* The Business Hours block reuses .contact-icon-link for layout but is a <div>,
   not a link. az-collision.css gives .contact-icon-link:hover a slide + recolor,
   which made it read as clickable. div.contact-icon-link:hover (0,1,1 + pseudo)
   outweighs that (0,1,0 + pseudo) and restores the resting appearance. */
div.contact-icon-link:hover {
  color: var(--components--titles-paragraphs--text-titles);
  transform: none;
  cursor: default;
}

/* --- Mobile directions chooser (bottom sheet, opened by js/site.js) --- */
.dir-sheet-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  animation: dir-sheet-fade 200ms ease-out;
}
/* [hidden] must beat display:flex */
.dir-sheet-backdrop[hidden] {
  display: none;
}

.dir-sheet {
  width: 100%;
  max-width: 480px;
  background: #101216;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.5);
  padding: 0 0 calc(10px + env(safe-area-inset-bottom));
  animation: dir-sheet-up 200ms ease-out;
}

/* The sheet container takes focus on a pointer/touch open (see site.js). It is a
   parking spot, never a control, so it must never paint a ring -- keyboard opens
   focus the first action row instead, which keeps its ring. */
.dir-sheet:focus,
.dir-sheet:focus-visible {
  outline: none;
}

.dir-sheet-title {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.dir-sheet-action,
.dir-sheet-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  background: none;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.dir-sheet-action {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dir-sheet-action:hover,
.dir-sheet-action:active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.dir-sheet-cancel {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.dir-sheet-cancel:hover,
.dir-sheet-cancel:active {
  color: #fff;
}

@keyframes dir-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes dir-sheet-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* The JS gate means this normally never opens on desktop; keep it presentable
   if it ever does (e.g. a touch-capable laptop). */
@media (min-width: 768px) {
  .dir-sheet-backdrop {
    align-items: center;
  }
  .dir-sheet {
    margin: 0 16px;
    border-radius: 18px;
    padding-bottom: 10px;
    animation: dir-sheet-fade 200ms ease-out;
  }
}

/* Must stay the LAST rule touching .dir-sheet animation: the min-width block
   above re-declares it, so an earlier reduced-motion override would lose to it
   at >=768px. */
@media (prefers-reduced-motion: reduce) {
  .dir-sheet,
  .dir-sheet-backdrop {
    animation: none;
  }
}

/* --- Services card grid (replaces the Webflow slider) --- */
.services-section .display-8 {
  text-align: center;
}
.services-sub {
  margin: 12px auto 0;
  max-width: 640px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* Paged carousel. Two rows everywhere; columns flow horizontally, so the 10
   cards make 5 columns and the viewport shows a whole page at a time. Native
   swipe/drag works with no JS at all -- site.js only adds the arrows and dots. */
.services-viewport {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  column-gap: 18px;
  row-gap: 18px;
  margin-top: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.services-viewport::-webkit-scrollbar {
  display: none;
}

/* >=992px: three columns per page (a 2x3 page of six cards). */
@media (min-width: 992px) {
  .services-viewport {
    grid-auto-columns: calc((100% - 36px) / 3);
  }
}
@media (min-width: 640px) and (max-width: 991px) {
  .services-viewport {
    grid-auto-columns: calc((100% - 18px) / 2);
  }
}
@media (max-width: 639px) {
  .services-viewport {
    grid-auto-columns: 68%;
  }
}

/* --- Carousel controls (revealed by site.js) --- */
.services-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.services-controls[hidden] {
  display: none;
}

.services-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 150ms ease;
}
.services-arrow:hover {
  background: rgba(255, 255, 255, 0.08);
}
.services-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}
.services-arrow[aria-disabled="true"]:hover {
  background: none;
}

.services-dots {
  display: flex;
  align-items: center;
  gap: 0;
}
.services-dot {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.services-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease, transform 150ms ease;
}
.services-dot[aria-current="page"]::before {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Native FAQ disclosure controls. Closed <details> content is removed from the
   accessibility tree, and Summary supplies pointer, Enter and Space behavior
   without depending on Webflow's interaction runtime. */
.accordion-wrapper {
  cursor: default;
}
.accordion-item---v1 > summary {
  display: list-item;
  position: relative;
  width: 100%;
  padding: 0;
  color: inherit;
  list-style: none;
  text-align: left;
  cursor: pointer;
}
.accordion-item---v1 > summary .display-6.faq {
  display: block;
  padding-right: 64px;
}
.accordion-item---v1 > summary::-webkit-details-marker {
  display: none;
}
.accordion-item---v1 > summary .secondary-button-icon.large.accordion-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.accordion-item---v1[open] > summary .accordion-icon-line.vertical {
  opacity: 0;
  transform: rotate(0deg);
}

.service-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0e1013;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
.service-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.service-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.service-card-title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.service-card-desc {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
}
.service-card-cta {
  margin-top: auto;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.service-card:hover .service-card-cta {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .service-card {
    transition: none;
  }
  .service-card:hover {
    transform: none;
  }
  .services-arrow,
  .services-dot {
    transition: none;
  }
  /* Jump between pages instead of gliding. */
  .services-viewport {
    scroll-behavior: auto;
  }
}

/* ===========================================================================
   SPACING RHYTHM
   The Webflow template pads .section with 200px top and bottom, which on this
   one-pager stacks into 200-265px voids between sections. Every rule below is a
   scoped override on an existing class combination -- az-collision.css is not
   touched. Values were measured on the rendered page (1280x900 and 375x812)
   with IX2 reveals settled; each comment records the measured before -> after
   gap, defined as: bottom of the previous section's last painted content ->
   top of the next section's first painted content.
   Target: 88-120px on desktop, 64-88px under 768px.
   =========================================================================== */

/* hero -> services 200 -> 104; services -> logo marquee 206 -> 102 */
.section.services-section {
  padding-top: 104px;
  padding-bottom: 96px;
}

/* logo marquee -> "Why choose us?" 198 -> 114.
   The marquee wrapper is pulled up 58px by position:relative, so 58px of this
   gap is structural and only the section's own padding-top is available. */
.section.pd-top-0px.overflow-hidden.az-advantage {
  padding-top: 56px;
}

/* form card -> get-in-touch card 143 -> 111.
   .card.get-in-touch paints no background on this page, so its 80px interior
   padding reads as dead space rather than as card padding.
   All four classes are needed: az-collision.css targets this element with
   .card.footer-card-top.footer.get-in-touch inside its <768px query, and a
   two-class selector loses to it there. */
.card.footer-card-top.footer.get-in-touch {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* get-in-touch -> FAQs 265 -> 101, together with the two rules below. */
#Free-Estimate.section.hero.pd-top-64px---bottom-0px.form {
  margin-bottom: 0;
}
#FAQs.section.hero.pd-top-64px {
  padding-top: 32px;
  /* FAQs -> footer 176 -> 120. Not cut further: the footer paints its own
     background and 56px top padding, so the visible band between the last FAQ
     row and the footer edge is 64px of this. */
  padding-bottom: 144px;
}

@media (max-width: 767px) {
  /* Left at the template's 100px on purpose: the hero image overhangs its own
     section here, so hero -> services already measures only 33px, and
     services -> marquee is 74px. Restated so the desktop rule cannot leak in. */
  .section.services-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  /* marquee -> "Why choose us?" 158 -> 82 */
  .section.pd-top-0px.overflow-hidden.az-advantage {
    padding-top: 24px;
  }

  /* stats -> testimonials 217 -> 157. The stats block is a full-bleed photo
     with the figures overlaid on it, and 60px of the void below is this
     wrapper's margin. The rest is interior to the photo and to the testimonial
     section's 96px padding-top, which stays as tightened earlier. */
  .section-2 {
    margin-bottom: 0;
  }

  /* about -> form 155 -> ~83. The inner wrapper carries -80px block margins,
     so this section's own padding-bottom is the only clean lever. */
  .section.pd-120px.position-relative.about {
    padding-bottom: 8px;
  }

  /* form card -> get-in-touch 130 -> 88. The template already uses a 20px
     bottom padding here, restated so the desktop 48px does not leak in and
     re-inflate get-in-touch -> FAQs. */
  .card.footer-card-top.footer.get-in-touch {
    padding-top: 36px;
    padding-bottom: 20px;
  }

  /* get-in-touch -> FAQs 149 -> 89 (the form's margin-bottom is already 0 from
     the rule above); FAQs -> footer 156 -> 124, of which 57px is the footer's
     own top padding -- the visible band is 67px. */
  #FAQs.section.hero.pd-top-64px {
    padding-top: 44px;
    padding-bottom: 8px;
  }
}

/* ===========================================================================
   VISUAL FEEDBACK BATCH (Aug 2026) -- items 1, 3-7, 9
   =========================================================================== */

/* --- Item 1: hero copy legibility over AZ__HERO.jpg -------------------------
   .image-wrapper.hero-full-image-section.v2 is inset:0 of the hero section on
   desktop and is pulled up under the copy (margin-top:-140px, position:relative)
   below 768px, so the subtitle, CTA and proof strip all land on the photo. The
   template only ships a BOTTOM gradient here (.bg-image-gradient-overlay
   .gradient-bottom), which left the proof strip sitting on the car's spoiler and
   windshield with almost no contrast -- the top complaint.

   Measured at 1280x900: the wrapper spans y=174..1232 and the copy occupies
   y=250..521, i.e. 7%..33% of the wrapper. The scrim below is therefore opaque
   through 28% and gone by 62%. It uses the page's own #050607 (body computed
   background-color, = --core--colors--neutral--100), so the top of the frame --
   already a near-black studio wall -- reads as an unbroken continuation of the
   section above rather than as an overlay. The car, the split damaged/repaired
   halves, the headlights and both technicians all sit below 40% and keep their
   contrast.

   Stacking: the ::before is a positioned descendant of the wrapper, so it paints
   above the in-flow <img>; the copy's container carries .z-index-1 (z-index:1,
   position:relative) and stays above both. */
.image-wrapper.hero-full-image-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    #050607 0%,
    rgba(5, 6, 7, 0.99) 20%,
    rgba(5, 6, 7, 0.94) 28%,
    rgba(5, 6, 7, 0.84) 34%,
    rgba(5, 6, 7, 0.66) 41%,
    rgba(5, 6, 7, 0.42) 48%,
    rgba(5, 6, 7, 0.2) 55%,
    rgba(5, 6, 7, 0) 100%
  );
}

/* The proof strip is the lowest line of copy and the one that overlaps the
   brightest part of the photo, so it gets both a contrast lift and a shadow. */
.hero-proof {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 16px rgba(5, 6, 7, 0.85);
}

/* Subtitle: scoped to the hero so the other .display-2.mid uses are untouched.
   At 375px the copy runs longer and its last line reaches the photo. */
.section.hero .subtitle-wrapper .display-2.mid {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* --- Item 9: Google / Yelp / Instagram brand marks --------------------------
   Glyphs live once each in the <symbol> sprite at the top of <body> and are
   pulled in with <use>; inlining them at all ten call sites would have added
   ~33KB to a 74KB page. */
.brand-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.brand-ico {
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -0.18em;
  fill: currentColor;
}

/* --- Items 2 + 9: rating chips ---------------------------------------------
   The chip is already inline-flex with gap:8px, so the logo and the label are
   siblings and the removed &nbsp; is no longer needed for spacing. */
.rating-chip .brand-ico {
  width: 16px;
  height: 16px;
}

/* --- Item 3: review avatars ------------------------------------------------
   46px display against 120px (Yelp) and 144px (Google) sources = 2.6x-3.1x, so
   they stay crisp on retina. Elizaveta and Sean have only Yelp's default
   silhouette, so they get initial circles instead; the two hues are Material 600
   values chosen to sit beside the ones Google itself generated for Gustavo
   (Deep Orange 600 #F4511E) and Emilee (Brown 600 #5D4037). */
.review-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #16181c;
  object-fit: cover;
}
.review-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}
.review-avatar-initial.tone-teal {
  background-color: #00897b; /* Material Teal 600 */
}
.review-avatar-initial.tone-indigo {
  background-color: #3949ab; /* Material Indigo 600 */
}
.review-meta .brand-ico {
  width: 13.5px;
  height: 13.5px;
  margin-right: 5px;
  vertical-align: -0.16em;
}

/* --- Item 4: reviews grid -> CTA -> links rhythm ----------------------------
   .mg-top-default.mg-top-24px---mbl resolves to margin-top:0 above 768px and
   24px below it, so the CTA button was sitting flush against the reviews grid
   (measured 0px at 1280x900, ~24px at 375px). Scoped to .section.testimonial so
   the identical wrapper in the hero is untouched. */
.section.testimonial .mg-top-default.mg-top-24px---mbl {
  margin-top: 60px;
}
.section.testimonial .review-links {
  margin-top: 24px;
}
@media (max-width: 767px) {
  /* 34px, not 40: below 768px the reviews grid contributes ~7px of its own
     trailing box before this wrapper's margin starts, so 34 lands on a measured
     41px where 40 measured 47. */
  .section.testimonial .mg-top-default.mg-top-24px---mbl {
    margin-top: 34px;
  }
}

/* --- Item 5: review links row ----------------------------------------------
   The sentence is gone; only the three logo links remain, kept muted so they
   read as a footnote under the CTA rather than as a second call to action. */
.review-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
}
.review-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.review-links a:hover {
  color: #fff;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-links-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* --- Item 6: stats grid is three items now ---------------------------------
   .grid-3-columns.stats-grid is declared 1fr 1fr 1fr 1fr despite its name, so
   dropping "850+ / Happy clients" would have left the three survivors packed
   into the left three quarters with an empty fourth column. Bounded below at
   480px because az-collision.css collapses this grid to a single centred column
   there, and an unscoped rule in this file would out-cascade it. */
@media (min-width: 480px) {
  .grid-3-columns.stats-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
  }
  .grid-3-columns.stats-grid > * {
    justify-self: center;
  }
}

/* --- Item 9: footer "Follow" column ---------------------------------------- */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.footer-social .brand-ico {
  width: 15px;
  height: 15px;
}

/* --- Item 11: CA Bureau of Automotive Repair registration -------------------
   Two clauses on one line where they fit, stacked below that. The interpunct
   lives on .footer-reg::before so it disappears with the wrap instead of being
   left dangling at the end of the first line, and every phrase that must not
   split carries .text-no-wrap -- same rule as the business hours (item 8). */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
}
.footer-reg::before {
  content: "\00B7";
  margin-right: 14px;
  color: rgba(255, 255, 255, 0.3);
}
.footer-reg a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Measured: the two clauses need 537px of line box, so they stop fitting at a
   viewport of ~595px (container = viewport - 48px of footer padding). Dropping
   the interpunct at 639px keeps a margin of error -- between 595 and 639 the two
   clauses share a line separated by the 14px column-gap alone, which still reads
   as deliberate, and below that they stack cleanly with no dangling glyph. */
@media (max-width: 639px) {
  .footer-reg::before {
    content: none;
  }
}

/* --- Items 13 + 15: business hours as whole lines --------------------------
   Every hours phrase renders on one line at every width, in both the footer and
   the contact card. The footer needed nothing beyond .text-no-wrap: its widest
   phrase is 170.5px at 14px and the narrowest column it ever occupies is 272px.

   The contact card needed the compact labels of item 15 plus one lever. The
   labels cut the widest phrase from 277.3px to 227.2px at 18px; the gutter
   reclaim below then takes the cell from 176px to 256px at a 320px viewport.
   227.2px against 256px is 29px of slack -- 245px even if the fallback font
   renders ~8% wider before Inter Tight swaps in, so it still holds. No type
   reduction was needed: the hours stay at the card's native 18px, matching the
   address, phone and email beside them.

   Note the icon does NOT eat into this budget on phones: .contact-icon-link is
   flex-direction:column below 768px, so the icon stacks above the text and the
   text block gets the full cell. Above 768px the row is horizontal and the cell
   is 656px, which clears 227.2px + 24px icon + 12px gap with room to spare. */
.hours-line {
  white-space: nowrap;
}

/* Both the section wrapper and the card inside it carry .container-default
   .contact, so one rule takes each from 40px and 32px to a common 16px, worth
   +80px. That is the only place the width could come from -- the card's own
   32px, even zeroed, leaves the phrase short. It also widens the estimate form,
   which shares the wrapper: its fields go from 192px to 240px at a 320px
   viewport, a straight improvement on a screen that narrow, and it brings this
   section's gutter in line with the 16-24px the rest of the page uses. */
@media (max-width: 767px) {
  .section.hero.form .container-default.contact {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Item 16: a primary button with a lone child centres at every width -----
   Below 479px az-collision.css:11843 gives .primary-button
   justify-content: space-between. That is right for the buttons it was drawn
   for -- a label div plus an .item-icon-right arrow, pushed to opposite ends --
   but a flex container holding a single item resolves space-between to
   flex-start, so every button whose only child is its label renders hard
   against the left edge with the entire surplus pooled on the right. Measured
   on thanks.html at 375px: "Back to the site" sat 14.45px from the left edge
   and 117.45px from the right.

   Auto margins on the lone child absorb the free space before justify-content
   is ever consulted, so the label centres without the multi-child case having
   to be excluded by hand: :only-child cannot match an element that has an
   element sibling, so the hero and review CTAs are provably out of reach. Their
   boxes were measured at 320/360/375/479/480/1280 with and without this rule
   and are identical to the hundredth of a pixel.

   Deliberately not wrapped in a breakpoint. Above 479px .primary-button is
   already justify-content: center, and a single item with auto margins on both
   sides splits the free space evenly -- the same position -- so the rule is a
   no-op there today and stays correct if another space-between step is ever
   added below it.

   This cannot reach .ew-next, whose label is a bare text node rather than an
   element: the anonymous flex item a text node generates is not selectable.
   That button keeps its own justify-content: center at
   estimate-wizard.css:944, which is still load-bearing -- removing it moves the
   label 20.9px left at 375px. */
.primary-button > *:only-child {
  margin-left: auto;
  margin-right: auto;
}

/* --- Item 17: the homepage estimate hero, compacted on phones --------------
   #Free-Estimate hosts the three-step wizard now, but it kept the template's
   hero typography, so a phone spends most of a screen on chrome before the
   first service card -- the one thing the section exists to get someone into.
   estimate-preview.html already shows the target shape, and its rules
   deliberately cannot reach here: .ew-scope .display-10 needs the heading to be a
   descendant of the scope host and it is a sibling of it, and
   .ew-scope .mg-top-48px needs the gap div to be a descendant and it IS the
   host. So the homepage gets its own set, keyed on the section id.

   Measured from the section's top edge to the first service card:
     390x844   373.2px -> 273.8px   (5 cards fully on screen -> 6)
     360x780   394.2px -> 292.2px   (4 -> 5)
     320x720   409.2px -> 305.3px   (3 -> 4)
   At 375x812 and wider the whole six-card stack now fits in one screen after
   the anchor jump instead of 439px of it.

   The proof line needs nothing of its own: estimate-wizard.css's .ew-lede rule
   is unscoped and already puts it at 15px/1.4 with an 8px top margin under
   768px, which is the prototype's spacing.

   Every rule here sits inside the 767px query az-collision.css already uses for
   this section's own mobile rhythm -- .section.hero.pd-top-64px---bottom-0px,
   .mg-top-48px and .display-10 each have a 767px step -- so 768px and up keeps
   every value it had. Verified unchanged at 768 and 1280: 56/60px two-line h2,
   0 section padding-top, 48px gap, 14px lede margin, first card at the same
   offset to the hundredth of a pixel. */
@media (max-width: 767px) {
  /* The two <br>s stay in the markup: they are what gives desktop its intended
     two-line "Get your / free estimate", and the heading text is not this
     sheet's to rewrite. Switching them off here lets the same words reflow to
     one line on a phone. */
  #Free-Estimate .display-10 br {
    display: none;
  }
  /* One line down to 320px, measured rather than hoped for. The heading's
     usable width is the viewport less 32px of container padding, and "Get your
     free estimate" costs 9.544px of line box per px of type, so 320px allows
     30.1px before it wraps. 7.7vw resolves to 24.6px there and the 26px floor
     takes over: the line then measures 247.5px inside 288px. That 14% of slack
     is what absorbs the ~8% the fallback face renders wider before Inter Tight
     swaps in -- the same margin the hours and CTA rules above budget for. The
     34px ceiling engages at 415px and holds to 767px. Same three values as
     estimate-preview.html, so the two hero treatments stay in step. */
  #Free-Estimate .display-10 {
    font-size: clamp(26px, 7.7vw, 34px);
    line-height: 1.12;
  }
  /* 54px between 480 and 767px, 20px below that
     (az-collision.css:10761 and :12197). This section follows
     .section.pd-120px.position-relative.about, which already contributes 8px of
     its own padding-bottom here, so 16px leaves a 24px band above the heading.
     Not the prototype's 12px: there the section opens the page under a header
     rule, here it lands under a full-bleed photo and wants the extra air. */
  #Free-Estimate.section.hero.pd-top-64px---bottom-0px.form {
    padding-top: 16px;
  }
  /* Named for 48px but rendering at 40px on a phone -- az-collision.css:10210
     already steps it down under 768px. 18px is the prototype's gap. */
  #Free-Estimate .mg-top-48px {
    margin-top: 18px;
  }
}

/* --- Item 18: anchor jumps clear the sticky header --------------------------
   The header is position: sticky (Item at :69), 94px tall at phone widths and
   ~90px from 768px up, and nothing has ever offset the anchor targets for it --
   so every in-page jump to #Services, #About-us or #Free-Estimate has always
   parked the section's first line underneath it. That was survivable while the
   estimate hero opened with a tall two-line heading; once Item 17 compacted it,
   the jump began landing past the proof line entirely. scroll-margin-top is the
   modern fix and needs no JS: the browser subtracts it when scrolling the
   element into view, and it is inert for every other kind of scrolling.
   The value is per-section, because a uniform one lands each section's first
   words somewhere different: what a jump should frame is the heading, and each
   section buries its heading at a different depth below its own box top --
   Services 100px (its own kicker padding), About-us 153px on a phone and 178px
   at 1280 (it opens with a full-bleed photo), Free-Estimate 16px (Item 17 cut
   its padding to almost nothing), FAQs 64px / 52px.

   The target is one number for all four: the heading should sit ~50px below the
   header, which is where Free-Estimate already landed and was signed off. Each
   value is therefore (header height + 50) - that section's content offset,
   measured at 430px (header 94) and 1440px (header 90). About-us needs a
   breakpoint of its own because its internal image/content geometry changes at
   768px. Its desktop value is tuned to keep the heading about 40-50px below the
   sticky header after the layout-spacing adjustments below. */
#Services {
  scroll-margin-top: 40px;
}
#About-us {
  scroll-margin-top: -10px;
}
#FAQs {
  scroll-margin-top: 84px;
}
#Free-Estimate {
  scroll-margin-top: 128px;
}
@media (min-width: 768px) {
  #About-us {
    scroll-margin-top: 20px;
  }
}

/* --- Item 19: in-page scrolling stays INSTANT ------------------------------
   Deliberately no scroll-behavior: smooth here. It was tried and reverted the
   same day. Setting it on html does not just animate anchor clicks -- it also
   takes over the scroll restoration the browser performs on reload and on
   back/forward, turning an instant restore into an animation that runs while
   the page's 53 lazy images are still arriving and reflowing the document. The
   restore aims at a pixel offset, the content underneath moves during the
   animation, and every refresh lands somewhere different. Measured directly:
   with smooth active a window.scrollTo(0, 3000) had still not moved the page
   1.8s later, while the same call with behavior auto landed exactly on 3000.
   Anchor jumps are instant now, which is also what they were before Webflow's
   handler was unbound. Do not reintroduce this globally; if smooth anchor
   scrolling is ever wanted, scope it to the click itself
   (scrollIntoView({behavior:'smooth'})) so restoration is left alone. */

/* --- Item 20: external-link arrow on the wraps card ------------------------
   Was the character U+2197. iOS and Android both give that codepoint emoji
   presentation by default, so it rendered as a blue rounded tile next to a
   monochrome link -- the one piece of colour in the whole services grid. An
   inline SVG cannot be substituted by the platform's emoji font, and drawing
   it with currentColor means it inherits the link's muted white and brightens
   with the card on hover, which the emoji never did. */
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.service-card-cta .ext-arrow {
  width: 0.82em;
  height: 0.82em;
  flex: none;
  /* The underline belongs to the domain text, not the glyph. */
  transform: translateY(0.5px);
}

/* --- Item 21: the reviews section was mostly empty space on a phone --------
   Three desktop-scale margins stack up between the heading and the rating
   chips: the h2's own 85px bottom margin, the heading container's 100px, and
   the divider's 28+28. Measured on a 430px screen that is a 214px void below
   "What our customers are saying", with another 96px of section padding above
   it -- most of a phone screen showing nothing. These values are right at
   1440px, where the section is wide and the type is large, so the correction
   is mobile-only and leaves desktop untouched. */
@media (max-width: 767px) {
  .section.testimonial {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .section.testimonial .display-8.review {
    margin-bottom: 20px;
  }
  .section.testimonial .container-default.customers {
    margin-bottom: 24px;
  }
  .section.testimonial .divider.mg-48px {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ===========================================================================
   RESIDUAL LAYOUT CLEANUP (Aug 2026)
   These overrides remove the remaining template-era spacing cliffs without
   changing the estimate wizard's stable card height or the mobile action bar.
   =========================================================================== */

/* The stats image wrapper is intentionally pulled above its section box. Keep
   enough margin that only its black top blend sits near the cards and the car
   itself never crowds the Advantage content. */
.section.pd-top-0px.overflow-hidden.az-advantage {
  margin-bottom: 97px;
}
@media (max-width: 991px) {
  .section.pd-top-0px.overflow-hidden.az-advantage {
    margin-bottom: 52px;
  }
}

/* Keep the FAQ title connected to its first question and tighten the repeated
   closed rows. The last item intentionally keeps no trailing interior pad; the
   section owns the final separation from the footer. */
#FAQs .display-10.f {
  margin-bottom: 24px;
}
#FAQs .accordion-item---v1 {
  padding-top: 32px;
  padding-bottom: 32px;
}
#FAQs .accordion-item---v1.last {
  padding-bottom: 0;
}

/* Preserve the three wide wordmarks at the common 44px logo height. Their
   template max-widths were squeezing only the horizontal axis. */
.logo-marquee-image-wrapper img.image-10,
.logo-marquee-image-wrapper img.image-11,
.logo-marquee-image-wrapper img.image-19 {
  max-width: none;
}

/* The carousel is a clipping scrollport. Keep feedback inside the card box so
   the top row never loses a hover edge or keyboard focus ring. */
.service-card:hover {
  transform: none;
}
.service-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff;
}

/* The Audi source photo has a nearly black upper third. Enlarge only the paint
   inside its existing clipped wrapper so the car enters sooner without
   changing the wrapper/card relationship or disturbing the stats overlay. */
@media (min-width: 480px) {
  main .section-2 .image-wrapper.full-image-card-section.alt---v1 > .image.cover-image {
    transform: scale(1.18);
    transform-origin: 50% 100%;
  }
}

/* Stable content is preferable to delayed template reveals on this one-page
   site. Keep the marquee itself moving, but do not hide whole sections while a
   visitor scrolls or leave them blank when IX2 only partially initializes. */
main .position-relative.overflow-hidden.logos,
main .az-advantage [data-w-id],
main .section-2 [data-w-id],
main .section.testimonial [data-w-id],
main #About-us [data-w-id],
main #FAQs [data-w-id] {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 768px) {
  /* The source photo already has a dark studio floor. The template stacked a
     200-350px fade and 104px of Services padding after it, making the finished
     car appear separated from the next heading by a near-empty screen. Crop
     only the unused floor, keep a short blend, and restore normal section
     rhythm. Phone composition remains unchanged below this breakpoint. */
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .image-wrapper.hero-full-image-section.v2 > img {
    transform: scale(1.08);
    transform-origin: 50% 0;
  }
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .image-wrapper.hero-full-image-section.v2 > .bg-image-gradient-overlay.gradient-bottom {
    min-height: 96px;
  }
  .section.services-section {
    padding-top: 56px;
  }

  /* Reviews -> About label: 249px -> about 116px.
     About copy -> Estimate title: 300-320px -> about 96px. */
  .section.testimonial {
    padding-bottom: 48px;
  }
  #About-us.section.pd-120px.position-relative.about {
    padding-top: 0;
    padding-bottom: 48px;
  }
  #About-us .section-image-wrapper.interior.v2.ab {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* The former 142px heading-to-rating gap was especially detached on tablet. */
  .section.testimonial .display-8.review {
    margin-bottom: 48px;
  }
  .section.testimonial .divider.mg-48px {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  /* The footer has another 57px of painted top padding; 48px here keeps the
     combined transition deliberate without leaving an empty half-screen. */
  #FAQs.section.hero.pd-top-64px {
    padding-bottom: 48px;
  }
}

@media (min-width: 992px) {
  /* Webflow jumps this wrapper from 650px to 1058px at 992px. A viewport-aware
     cap removes that 408px cliff while leaving ample space below the proof line
     for the complete vehicle composition. */
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .section-image-wrapper.hero-v2.header {
    min-height: clamp(650px, 74svh, 840px);
  }
}

@media (max-width: 767px) {
  /* Keep the About label connected to the review links above it. Webflow's
     140px inner pad stacks with the review section's own 48px footer space. */
  #About-us .section-image-wrapper.interior.v2.ab {
    padding-top: 112px;
  }

  /* Carry the accepted phone hero composition through the full phone range so
     479px and 480px no longer switch between unrelated layout systems. */
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .section-image-wrapper.hero-v2.header {
    height: auto;
    min-height: 80svh;
    display: block;
  }
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .image-wrapper.hero-full-image-section.v2 {
    width: 100%;
    min-width: auto;
    margin: 0 auto;
    position: absolute;
    inset: auto 0 0;
    transform: scale(1.5);
  }
  main > .section.hero.pd-top-64px---bottom-0px:first-child
  .image-wrapper.hero-full-image-section.v2 > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 auto;
    padding-bottom: 60px;
  }

  #FAQs .accordion-item---v1 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #FAQs .accordion-item---v1.last {
    padding-bottom: 0;
  }
}

@media (max-width: 479px) {
  /* Webflow's generic mobile utility scaled every matching wrapper to 85%.
     That unintentionally shrank both CTA groups and the full FAQ accordion. */
  main .mg-top-default.mg-top-24px---mbl {
    transform: none;
  }
  #FAQs .mg-top-default.mg-top-24px---mbl.mobile {
    margin-top: 8px;
    top: auto;
  }

  /* Keep the About photograph covering its absolute full-section wrapper.
     The template changed this one image to auto height plus 60px padding. */
  #About-us .image-wrapper.full-image-card-section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
  }
  #About-us ._w-h-100.fit-cover.scale-animation-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    object-fit: cover;
  }
  #About-us .inner-container._494px.center.about {
    margin-top: 20px;
  }

  /* The one-column contact grid already owns a 15px row gap. */
  #Free-Estimate .contact-icon-link.footer-link {
    margin-bottom: 0;
  }
  #Free-Estimate .grid-1-column.gap-row-small.gap {
    grid-row-gap: 24px;
  }

  /* Webflow visually lifts this complete section by 61px with `top`, which
     otherwise leaves the same 61px behind in normal flow. */
  .section-2 .client-feedback.z-index-1 {
    margin-bottom: -61px;
  }
}