/*
  apexautocaremcr — additions layered on top of the master template stylesheet (webflow.css).
  Everything here reuses the template's own colour, radius and type tokens. It only covers pieces the
  template did not ship: a five-link navbar fit, stats grid, service-area grid, gallery filters + lightbox,
  the quote modal options and form status messages.
*/

.apex-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
}
.apex-social-link:hover { background: #087fc1; border-color: #087fc1; }
.apex-social-link:focus-visible { outline: 2px solid #48b5f2; outline-offset: 4px; }
.apex-social-link svg { display: block; width: 24px; height: 24px; }

/* Apex palette preserves the template's dimensions, breakpoints and motion. */
:root {
  --_color---colour--neutral--white: #fff;
  --_color---colour--brand--brand-950: #111214;
  --_color---colour--brand--brand-900: #1b1c20;
  --_color---colour--brand--brand-800: #303137;
  --_color---colour--brand--brand-700: #42434a;
  --_color---colour--brand2--brand2-50: #fff;
  --_color---colour--brand2--brand2-100: #e9e9eb;
  --_color---colour--brand2--brand2-200: #c9c9cd;
  --_color---colour--brand2--brand2-300: #48b5f2;
  --_color---colour--brand2--brand2-500: #087fc1;
}
body { background: #111214; color: #fff; }
h1, h2, h3,
.heading-style-6xl, .heading-style-7xl, .heading-style-3xl, .heading-style-xl {
  overflow: visible;
}
.heading-style-6xl, .heading-style-7xl { line-height: 1.16; padding-block: .035em; }
.apex-wordmark { line-height: 1.12; overflow-wrap: anywhere; }
[data-theme="light"] {
  background-color: #1b1c20;
  color: #fff;
  --_color---colour--neutral--black: #fff;
  --color-scheme-1--text-primary: #fff;
  --color-scheme-1--text-secondary: #ddd;
}
.navbar_component.navbar-light,
.navbar_component.navbar-light .navbar_logo,
.navbar_component.navbar-light .navbar_link,
.navbar_component.navbar-light .button.is-navbar-button { color: #fff; }
.navbar_component.navbar-light .menu-icon_line-top,
.navbar_component.navbar-light .menu-icon_line-middle,
.navbar_component.navbar-light .menu-icon_line-bottom { background-color: #fff; }
.button:not(.is-link), .button.is-alternate:not(.is-link) { background-color: #087fc1; border-color: #087fc1; color: #fff; }
.button:not(.is-link):hover { background-color: #066ba6; border-color: #066ba6; }
.button.is-secondary, .button.is-secondary.is-alternate { background-color: transparent; border-color: #fff; color: #fff; }
.button.is-secondary:hover { background-color: #087fc1; border-color: #087fc1; }
.button.is-link { color: inherit; }
.apex-wordmark { display: block; width: 100%; font-family: Inter, sans-serif; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.apex-wordmark > span { display: block; white-space: nowrap; }
.apex-wordmark small { display: block; font-size: .3em; line-height: 1.6; letter-spacing: .32em; font-weight: 500; }
.navbar_logo .apex-wordmark { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.modal_logo .apex-wordmark { font-size: 2rem; }
.hero_logo .apex-wordmark, .footer_image .apex-wordmark { font-size: clamp(2.8rem, 13vw, 13rem); }
.hero_logo .apex-wordmark { font-size: clamp(2.6rem, 9vw, 7.5rem); }
.hero_logo-wrapper { align-items: center; }
.hero_logo { padding-top: 0; }
.section_hero .button.is-secondary[data-modal-trigger="quote"] { background: #087fc1; border-color: #087fc1; color: #fff; }
.modal_component, .modal_content-wrapper { color: #fff; }
.modal_content-wrapper { background-color: #1b1c20; }
.modal_content-form { background-color: #25262b; color: #fff; }
.modal-content, .modal_bg { background-color: #25262b; }
.pg-drawer_logo .apex-wordmark { font-size: 1.5rem; }
.apex-includes { padding-left: 1.2em; margin: .5rem 0; line-height: 1.65; }
.apex-includes li + li { margin-top: .3rem; }
.apex-review-pending { max-width: 42rem; border-left: 3px solid #087fc1; padding-left: 1.5rem; }
.form_input option { background: #fff; color: #111214; }
.pg-stat_number, .stats42_number { color: #48b5f2; }

/* Ease back the template's heavy image treatments so the vehicle photos read clearly. */
.hero_image-overlay-layer { background-color: rgba(0, 0, 0, .24); }
.header_image-overlay-layer { background-color: rgba(0, 0, 0, .22); }
.map_image-overlay-layer { background-color: rgba(0, 0, 0, .1); }
.recentwork_image-overlay {
  background-image: linear-gradient(0deg, rgba(17, 18, 20, .58), transparent 52%, transparent 76%, rgba(17, 18, 20, .48));
  opacity: 1;
  mix-blend-mode: normal;
}
.hero_background-image, .header_background-image, .map_background-image,
.recentwork_image, .image-right_image, .image-left_image, .stats42_image,
.header108_image-list img { filter: brightness(1.06); }

/* These cards used a light surface token while inheriting white copy. */
.timeline10_item { background-color: #25262b; color: #fff; border-color: #54555c; }
.timeline10_circle { background-color: #087fc1; box-shadow: 0 0 0 8px #1b1c20; }
.timeline10_line { background-color: #54555c; }
.timeline10_progress-line { background-color: #087fc1; }
.timeline10_progress-line-cover { background-color: #1b1c20; }
.timeline10_fade-overlay-top { background-image: linear-gradient(#1b1c20, transparent); }
.timeline10_fade-overlay-bottom { background-image: linear-gradient(transparent, #1b1c20); }
.stats42_item { background-color: #25262b; color: #fff; }

/* Single static photo for the About page's Care, Finish and Communication section. */
.header108_component.is-static { height: auto; }
.apex-care-photos {
  max-width: 44rem;
  margin-inline: auto;
  padding: 3rem 5%;
}
.apex-care-photo { overflow: hidden; border-radius: var(--_ui-styles---radius--xs); }
.apex-care-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Keep photos caption-free, including lightboxes created by older cached scripts. */
.recentwork_content, .recentwork_number, .pg-ba-caption,
.pg-lightbox_caption, .w-lightbox-caption { display: none !important; }
/* The shared template leaves these small CTA labels at zero opacity. */
.cta_top .text-size-s { opacity: .75 !important; visibility: visible !important; }

/* Keep the supplied logo intact and readable in each existing brand slot. */
.apex-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.navbar_logo .apex-logo { width: 2.4rem; height: 2.4rem; margin: auto; }
.pg-drawer_logo .apex-logo { width: 5rem; height: 5rem; }
.pg-drawer_logo .apex-logo { display: block; margin: 0; }
.modal_logo .apex-logo { width: 8rem; height: 8rem; }
.hero_logo .apex-logo { width: 9rem; height: 9rem; margin: auto; }
.footer_image .apex-logo { width: min(100%, 22rem); height: auto; margin: auto; }
.pg-drawer_logo img { display: block; width: 5rem; height: 5rem; object-fit: contain; }
@media (max-width: 991px) {
.navbar_logo .apex-logo { width: 2.2rem; height: 2.2rem; margin: 0; }
}

/* Apex vehicle gallery and comparison sliders. */
.apex-gallery-section .apex-comparison-list { padding: 0 1rem; }
.apex-ba-item { max-width: 64rem; margin: 0 auto 5rem; }
.apex-ba-item .pg-ba-caption { max-width: 44rem; margin: 0 auto 1.5rem; }
.apex-ba-item .pg-ba-caption p { margin-top: .75rem; color: rgba(255,255,255,.75); }
.apex-ba-item .project-ba_slider { width: min(100%, 48rem); height: auto; aspect-ratio: 4 / 5; max-height: 82svh; margin: 0 auto; border-radius: 12px; }
.apex-ba-item .project-ba_before-image,
.apex-ba-item .project-ba_after-image { object-fit: cover; object-position: center; }
.apex-ba-item .project-ba_drag-handle { color: #111214; background-color: #fff; border: 2px solid #087fc1; border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; }
@media (max-width: 767px) {
  .apex-gallery-section .apex-comparison-list { padding: 0 1rem; }
  .apex-ba-item { margin-bottom: 3.5rem; }
  .apex-ba-item .project-ba_slider { width: 100%; max-height: 76svh; aspect-ratio: 4 / 5; }
}

/* Webflow's first-paint rules hide animated copy until its runtime runs. Keep the
   content readable if a script, font request or reduced-motion setting interrupts it. */
html.w-mod-js [data="scroll-text"],
html.w-mod-js .service_item,
html.w-mod-js .cta_top .text-size-s,
html.w-mod-js .cta_top .divider-white,
html.w-mod-js .cta_top .heading-style-7xl,
html.w-mod-js .cta_bottom .button-group .button,
html.w-mod-js .button.is-secondary.is-alternate { visibility: visible !important; }

/* Accessible focus ring (keyboard only) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Navbar: room for five links instead of three */
@media screen and (min-width: 992px) {
  .navbar_component { max-width: 72rem; }
  .navbar_link { padding: .5rem .75rem; }
  .navbar_logo { max-width: 14rem; }
}
@media screen and (min-width: 992px) and (max-width: 1150px) {
  .navbar_link { padding: .5rem .5rem; }
}

/* Stats row (replaces the logo strip) */
.pg-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
  margin-top: 1rem;
}
.pg-stat {
  border-top: var(--_ui-styles---stroke--divider-width) solid var(--_color---opacity--alpha-white-30);
  padding-top: 1.25rem;
}
.pg-stat_number { margin-bottom: .5rem; }
@media screen and (max-width: 767px) {
  .pg-stats { gap: 2rem 1.5rem; }
  .heading-style-6xl, .heading-style-7xl { line-height: 1.18; padding-block: .055em; }
  .footer_left-wrapper h2, .footer_credit-text { overflow-wrap: anywhere; }
}

/* Service areas (uses the template's gallery-details items) */
.pg-areas {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr .8fr;
  gap: 2rem;
  width: 100%;
}
.pg-areas .text-size-s { line-height: 1.7; }
@media screen and (max-width: 767px) {
  .pg-areas { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Gallery: filters, grid, lightbox */
.pg-filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.pg-filter { cursor: pointer; font: inherit; }
.pg-filter.is-active,
.pg-filter.is-active:hover {
  background-color: var(--_color---colour--neutral--black);
  border-color: var(--_color---colour--neutral--black);
  color: var(--_color---colour--brand--brand-50);
}
.pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.pg-tile { transition: opacity .35s ease, transform .35s ease; cursor: zoom-in; text-decoration: none; }
.pg-tile.is-hiding { opacity: 0; transform: scale(.97); }
.pg-tile[hidden] { display: none; }
.pg-tile .recentwork_image { transition: transform .6s ease; }
.pg-tile:hover .recentwork_image { transform: scale(1.05); }
.pg-tile_label { margin-top: .5rem; font-size: .8125rem; opacity: .75; }
.pg-empty { display: none; margin-top: 2rem; }
.pg-empty.is-visible { display: block; }
@media screen and (max-width: 991px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .pg-grid { grid-template-columns: 1fr; } }

.pg-ba-caption { margin-bottom: 2rem; }
.pg-ba-item + .pg-ba-item { margin-top: var(--_ui-styles---spacing--12); }

.pg-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--_ui-styles---z-index--highest);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 3.5rem 1rem 2rem;
  background-color: rgba(27, 30, 27, .94);
  color: var(--_color---colour--neutral--white);
  opacity: 0;
  transition: opacity .3s ease;
}
.pg-lightbox.is-open { display: flex; }
.pg-lightbox.is-visible { opacity: 1; }
.pg-lightbox_img { max-width: 100%; max-height: 78dvh; object-fit: contain; border-radius: var(--_ui-styles---radius--xs); }
.pg-lightbox_caption { text-align: center; font-size: .9375rem; }
.pg-lightbox_btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--_color---colour--neutral--white);
  border-radius: var(--_ui-styles---radius--xs);
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color .2s;
}
.pg-lightbox_btn:hover { background-color: var(--_color---opacity--alpha-white-10); }
.pg-lightbox_close { top: 1rem; right: 1rem; }
.pg-lightbox_prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.pg-lightbox_next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media screen and (max-width: 767px) {
  .pg-lightbox_prev, .pg-lightbox_next { top: auto; bottom: 1rem; transform: none; }
}

/* Booking dialog: content determines height; short screens scroll inside the card. */
.apex-booking-modal {
  width: min(34rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid #42434a;
  border-radius: 1.5rem;
  background: #1b1c20;
  color: #fff;
  box-shadow: 0 24px 80px #0009;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}
.apex-booking-modal::backdrop { background: #080a10c9; backdrop-filter: blur(8px); }
.apex-booking-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #ffffff1f;
  background: #1b1c20;
  position: sticky;
  top: 0;
  z-index: 2;
}
.apex-booking-logo { width: 3rem; height: 3rem; object-fit: contain; flex: 0 0 3rem; }
.apex-booking-header > span { font-size: .625rem; letter-spacing: .08em; line-height: 1.5; color: #c9c9cd; }
.apex-booking-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
.apex-booking-close:hover { background: #303137; }
.apex-booking-body { padding: 1.5rem; }
.apex-booking-body h2 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; }
.apex-booking-body > p { margin: 0; color: #c9c9cd; font-size: 1rem; line-height: 1.55; }
.apex-booking-options { display: grid; gap: .75rem; margin: 1.5rem 0; }
.apex-booking-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid #54555c;
  border-radius: .875rem;
  color: #fff;
  background: #25262b;
  text-decoration: none;
}
.apex-booking-option > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.apex-booking-option strong { display: block; font-size: 1rem; line-height: 1.4; }
.apex-booking-option small { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.5; color: #ddd; }
.apex-booking-option.is-primary { background: #087fc1; border-color: #48b5f2; }
.apex-booking-option.is-primary small { color: #fff; }
.apex-booking-option:hover { border-color: #48b5f2; background: #303137; }
.apex-booking-option.is-primary:hover { background: #066ba6; }
.apex-booking-arrow { font-size: 1.375rem; flex-shrink: 0; }
.apex-booking-footer a { color: #77cfff; font-size: .9375rem; text-underline-offset: .25em; }
.apex-booking-footer p { margin: .75rem 0 0; color: #c9c9cd; font-size: .8125rem; line-height: 1.5; }
.apex-booking-modal :is(a, button):focus-visible { outline: 2px solid #77cfff; outline-offset: 3px; }
@media (max-width: 479px) {
  .apex-booking-header { padding: .75rem 1rem; }
  .apex-booking-body { padding: 1.25rem 1rem; }
}

/* Contact form status */
.pg-form-status { display: none; margin-top: 1rem; }
.pg-form-status.is-visible { display: block; }
.pg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form_component .form_form { max-width: 40rem; }
.pg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media screen and (max-width: 479px) { .pg-form-row { grid-template-columns: 1fr; } }

/* Prevent narrow mobile columns and tight leading from clipping copy or glyphs. */
@media screen and (max-width: 767px) {
  /* Let mobile flex/grid content shrink to the viewport instead of keeping
     long headings and package names at their intrinsic width. */
  .image-right_image-wrapper,
  .image-left_image-wrapper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .page-wrapper,
  main,
  .container-large,
  .max-width-large,
  .max-width-medium,
  .max-width-small,
  .intro_component > *,
  .process_link-block,
  .process_link-block > *,
  .process_content-wrapper,
  .service_item,
  .service_item-content,
  .timeline10_row,
  .timeline10_row > *,
  .recentwork_title,
  .cta_component,
  .footer_top-wrapper > * {
    min-width: 0;
    max-width: 100%;
  }
  .process_link-block { align-items: flex-start; }
  .process_content-wrapper { flex: 1 1 0%; }
  .process_link-text { overflow-wrap: anywhere; }
  /* Keep the progress cover above the timeline from painting over its heading.
     Clipping preserves the progress line's sticky scrolling behavior. */
  .timeline10_progress { clip-path: inset(0); }
  /* The timeline markup alternates card and marker order. Give both versions
     the same mobile columns so the text card never lands in a max-content col. */
  .timeline10_row {
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: stretch;
  }
  .timeline10_circle-wrapper { grid-column: 1; grid-row: 1; }
  .timeline10_item {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: visible;
    padding: 1.25rem;
  }
  .timeline10_item h3,
  .timeline10_item p { min-width: 0; overflow-wrap: anywhere; }

  h1, h2, h3, h4, h5, h6,
  [class*="heading-style-"] {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    line-height: 1.22;
    padding-block: .055em;
  }
  p, li, .text-size-xs, .text-size-s, .text-size-m, .text-size-l,
  .text-size-xl, .footer_credit-text {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .button-group { flex-wrap: wrap; }
  .button-group .button { max-width: 100%; white-space: normal; line-height: 1.35; }
  .apex-wordmark > span { white-space: normal; overflow-wrap: anywhere; }
}