/* ECU option icons on service pages */
.ecu-options-title {
 font-family: var(--font-display);
 font-size: 1.5rem;
 margin-bottom: 8px;
}

.ecu-options-sub {
 color: var(--text-muted);
 font-size: 14px;
 margin-bottom: 24px;
}

.ecu-options-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 16px;
}

.ecu-option-card {
 background: var(--dark-surface);
 border: 1px solid rgba(0, 212, 255, 0.12);
 border-radius: 8px;
 padding: 20px 16px;
 text-align: center;
 transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.ecu-option-card:hover {
 border-color: rgba(0, 212, 255, 0.35);
 transform: translateY(-3px);
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ecu-option-card img {
 display: block;
 margin: 0 auto 12px;
 filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.2));
}

.ecu-option-card h3 {
 font-size: 12px;
 font-weight: 600;
 line-height: 1.35;
 color: var(--text-muted);
}

/* Manufacturer logo in vehicle search */
.select-container {
 position: relative;
 overflow: visible;
}

.make-logo-preview {
 position: absolute;
 right: 44px;
 top: 50%;
 transform: translateY(-50%);
 z-index: 2;
 pointer-events: none;
}

.make-logo-preview img {
 width: 36px;
 height: 36px;
 object-fit: contain;
 filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.25));
}

.admin-preview-img {
 display: block;
 max-width: 200px;
 margin-top: 8px;
 border-radius: 6px;
 border: 1px solid rgba(77, 184, 224, 0.2);
}

/* Hero quote form */
.hero-main {
  min-width: 0;
}

.hero-grid > .hero-stats {
  margin-top: 0;
}

:root {
  --hero-block-gap: clamp(32px, 4vw, 48px);
  --home-section-gap: clamp(48px, 6vw, 72px);
  --section-pad-y: clamp(56px, 7vw, 88px);
  --section-header-gap: clamp(28px, 4vw, 40px);
  --content-stack-gap: clamp(16px, 2vw, 24px);
  --card-gap: clamp(16px, 2vw, 24px);
}

.hero.hero-slider .container.hero-grid {
  padding-bottom: 0 !important;
}

.vehicle-search-section {
  position: relative;
  z-index: 1;
  padding-top: var(--hero-block-gap, 28px) !important;
  padding-bottom: clamp(28px, 4vw, 36px) !important;
  clear: both;
  overflow: visible !important;
}

.vehicle-search-container {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  overflow: visible !important;
}

.v-search-head {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 1024px) {
  .hero.hero-slider {
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .hero.hero-slider .container.hero-grid {
    padding-bottom: 24px !important;
  }

  .hero-grid > .hero-stats {
    margin-bottom: 0;
  }

  .hero + .vehicle-search-section {
    margin-top: 0;
    padding-top: 24px !important;
  }
}

@media (min-width: 1025px) {
  .hero-main {
    display: block;
  }

  .hero.hero-slider .hero-quote-panel {
    grid-row: 1;
    align-self: end;
    margin-bottom: calc(14px + 6px);
  }

  .hero.hero-slider .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin-top: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    width: 100%;
    max-width: 100%;
    align-self: start;
    justify-self: stretch;
    justify-items: center;
  }

  .hero.hero-slider .hero-stat,
  .hero.hero-slider .hero-stat-mobile {
    padding: 0;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    min-height: 72px;
  }

  .hero.hero-slider .hero-stat .num,
  .hero.hero-slider .hero-stat-mobile .num {
    text-align: center;
  }

  .hero.hero-slider .hero-stat .lbl,
  .hero.hero-slider .hero-stat-mobile .lbl {
    text-align: center;
  }
}

.hero-quote-panel .hero-quote-sub {
 font-size: var(--text-body-sm);
 color: rgba(139, 156, 176, 0.95);
 margin-bottom: 16px;
 line-height: 1.65;
}

.hero-quote-detail {
 display: none;
}

.hero-quote-form {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.hero-quote-form label {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: var(--text-caption);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: rgba(232, 240, 248, 0.78);
}

.hero-quote-form input {
 padding: 10px 12px;
 background: rgba(0, 0, 0, 0.35);
 border: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 4px;
 color: #fff;
 font-size: 14px;
}

.hero-quote-form input:focus {
 outline: none;
 border-color: var(--brand-blue);
}

.hero-quote-form input:focus-visible {
 outline: 2px solid var(--bright-cyan);
 outline-offset: 3px;
 border-color: var(--brand-blue);
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.footer-newsletter-form input:focus-visible {
 outline: 2px solid var(--bright-cyan);
 outline-offset: 3px;
}

/* Hero stats, sleek grid on mobile, no overlap with quote form */
@media (max-width: 1024px) {
  .hero:not(.hero-slider) {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    align-items: stretch;
  }

  .hero:not(.hero-slider) .container.hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    padding-bottom: 40px;
    grid-template-areas: none;
    grid-template-rows: none;
    grid-template-columns: none;
  }

  .hero-main {
    padding: 0;
    position: relative;
    z-index: 2;
    background: transparent;
  }
  .hero-quote-panel,
  .hero-grid > .hero-stats {
    grid-area: unset;
    width: 100%;
  }

  .hero-content {
    padding: 0;
  }

  .hero-quote-panel {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
    padding: 24px 20px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .hero-grid > .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 4vw, 28px);
    margin-top: var(--hero-block-gap, 28px);
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    justify-items: center;
  }

 .hero-stat {
 padding: 0;
 text-align: center;
 background: transparent;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 min-width: 0;
 width: 100%;
 }

 .hero-stat-mobile {
 padding: 0;
 background: transparent;
 }

 .hero-stat .num {
 font-family: 'Orbitron', var(--font-display), sans-serif;
 font-size: clamp(24px, 6.5vw, 32px) !important;
 line-height: 1.1;
 font-style: normal !important;
 font-weight: 500;
 letter-spacing: 0.06em;
 }

 .hero-stat .lbl {
 margin-top: 6px;
 font-size: 10px;
 line-height: 1.35;
 }

 .hero-stat-mobile .num {
 font-size: clamp(18px, 5vw, 22px) !important;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 }

 .hero-stat-mobile {
 opacity: 0;
 transform: translateY(12px);
 transition:
  opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
 text-align: center;
 margin-left: 0;
 }

 .hero-stat-mobile.is-visible {
 opacity: 1;
 transform: translateY(0);
 }

 @media (prefers-reduced-motion: reduce) {
  .hero-stat-mobile {
   opacity: 1;
   transform: none;
   transition: none;
  }
 }

 .hero-content .pill-row {
 flex-wrap: wrap;
 gap: 10px;
 }

 .hero-slider .hero-content .pill-row {
 display: grid !important;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 width: 100%;
 }

 .hero-content .pill-row .btn {
 flex: 1 1 calc(50% - 5px);
 min-width: 140px;
 text-align: center;
 padding: 13px 18px;
 font-size: 13px;
 letter-spacing: 0.08em;
 min-height: 48px;
 }

 .hero-slider .hero-content .pill-row .btn {
 flex: none !important;
 width: 100%;
 min-width: 0;
 min-height: 46px;
 height: 46px;
 padding: 0 10px;
 font-size: clamp(11px, 3.2vw, 13px);
 line-height: 1.15;
 white-space: normal;
 }

 .hero-quote-form {
 gap: 14px;
 }

 .hero-quote-form label {
 font-size: 13px;
 letter-spacing: 0.1em;
 color: rgba(232, 240, 248, 0.78);
 gap: 6px;
 }

 .hero-panel-label {
 font-size: 14px;
 letter-spacing: 0.12em;
 margin-bottom: 14px;
 }

 .hero-quote-sub {
 font-size: 15px;
 line-height: 1.6;
 color: rgba(139, 156, 176, 0.95);
 margin-bottom: 14px;
 }

 .hero-stat .lbl {
 font-size: 12px;
 line-height: 1.35;
 }

 .hero-badge {
 font-size: 13px;
 }

 .form-group label {
 font-size: 12px;
 letter-spacing: 0.1em;
 color: rgba(232, 240, 248, 0.78);
 margin-bottom: 8px;
 }

 .form-hint {
 font-size: 13px;
 line-height: 1.55;
 color: rgba(200, 214, 228, 0.88);
 }

 .contact-form .form-group input,
 .contact-form .form-group select,
 .contact-form .form-group textarea {
 font-size: 16px;
 min-height: 48px;
 }

 .hero-quote-form input {
 width: 100%;
 box-sizing: border-box;
 font-size: 16px;
 padding: 12px 14px;
 min-height: 48px;
 }

 .hero-panel-cta {
 margin-top: 4px;
 min-height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
}

@media (max-width: 480px) {
 .hero-content .pill-row .btn {
 flex: 1 1 100%;
 }
}

/* Vehicle search results visuals */
.results-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 16px;
 flex-wrap: wrap;
}

.results-heading {
 font-family: var(--font-display);
 font-size: 14px;
 letter-spacing: 2px;
 margin: 0;
 text-transform: uppercase;
}

.alientech-logo--compact {
 max-height: 22px !important;
 max-width: 90px !important;
 width: auto;
 opacity: 0.75;
 margin-left: auto;
}

.vehicle-results-visual {
 margin-bottom: 16px;
}

.vehicle-results-logos {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
}

.result-make-logo {
 height: 48px;
 width: auto;
 max-width: 120px;
 object-fit: contain;
 filter: drop-shadow(0 0 8px rgba(77, 184, 224, 0.2));
}

.result-vehicle-image {
 height: 72px;
 width: auto;
 max-width: 200px;
 object-fit: contain;
 border-radius: 4px;
}

.price-deposit-primary {
 font-size: 15px !important;
 line-height: 1.5;
}

.price-deposit-primary strong {
 color: var(--bright-cyan);
}

/* Find installer map */
.installer-layout {
 display: grid;
 grid-template-columns: 1fr 340px;
 gap: 28px;
 align-items: start;
}

.installer-map {
 height: 520px;
 border-radius: 8px;
 border: 1px solid rgba(77, 184, 224, 0.2);
 z-index: 1;
}

.installer-sidebar h2 {
 font-family: var(--font-display);
 margin-bottom: 8px;
}

.installer-intro {
 font-size: 14px;
 color: var(--text-muted);
 margin-bottom: 20px;
 line-height: 1.6;
}

.installer-list {
 --installer-card-h: 78px;
 --installer-list-gap: 10px;
 display: flex;
 flex-direction: column;
 gap: var(--installer-list-gap);
 /* Show 3 installers; scroll for the rest */
 max-height: calc((3 * var(--installer-card-h)) + (2 * var(--installer-list-gap)));
 overflow-y: auto;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
 scrollbar-gutter: stable;
 scrollbar-width: thin;
 scrollbar-color: rgba(77, 184, 224, 0.45) rgba(255, 255, 255, 0.06);
}

.installer-list::-webkit-scrollbar {
 width: 8px;
}

.installer-list::-webkit-scrollbar-track {
 background: rgba(255, 255, 255, 0.06);
 border-radius: 8px;
}

.installer-list::-webkit-scrollbar-thumb {
 background: rgba(77, 184, 224, 0.45);
 border-radius: 8px;
}

.installer-card {
 background: var(--dark-surface);
 border: 1px solid rgba(77, 184, 224, 0.15);
 border-radius: 8px;
 padding: 12px 14px;
 flex: 0 0 auto;
 min-height: var(--installer-card-h, 78px);
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 6px;
}

.installer-card h3 {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 17px;
 line-height: 1.25;
 margin: 0;
 letter-spacing: 0.04em;
}

.installer-flag {
 flex-shrink: 0;
 width: 20px;
 height: 15px;
 object-fit: cover;
 border-radius: 2px;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.installer-name {
 min-width: 0;
}

.installer-card-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}

.installer-loc {
 font-size: 12.5px;
 color: var(--text-muted);
 margin: 0;
 line-height: 1.35;
 flex: 1 1 auto;
 min-width: 0;
}

/* Leaflet divIcon reset — prevents white box / offset drift */
.installer-marker.leaflet-div-icon {
 background: transparent !important;
 border: none !important;
}

.installer-marker-pin {
 display: block;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 background: var(--brand-blue);
 border: 2px solid #fff;
 border-radius: 50%;
 box-shadow: 0 0 12px rgba(77, 184, 224, 0.6);
}

.installer-marker-pin.featured {
 background: var(--racing-red);
}

.shop-pagination .btn.is-active {
 background: var(--brand-blue);
 border-color: var(--brand-blue);
 color: #fff;
}

.shop-page-ellipsis {
 padding: 0 6px;
 color: var(--text-muted);
}

@media (max-width: 900px) {
 .installer-layout { grid-template-columns: 1fr; }
 .installer-map { height: 360px; }
 .installer-list {
  --installer-card-h: 76px;
  max-height: calc((3 * var(--installer-card-h)) + (2 * var(--installer-list-gap)));
  overflow-y: auto;
 }
}

/* ── Sleek luxury header ── */
.announcement-bar { display: none; }

#site-header {
 position: relative;
 z-index: 1100;
}

.site-header {
 background: rgba(3, 5, 8, 0.92);
 border-bottom: 1px solid rgba(77, 184, 224, 0.12);
 overflow: visible;
 position: sticky;
 top: 0;
}

.header-inner,
.header-nav,
.nav-desktop,
.nav-has-mega,
.nav-has-dropdown {
 overflow: visible;
}

.nav-has-mega,
.nav-has-dropdown {
 position: relative;
 z-index: 1101;
}

/* Critical mega-menu chrome (also lives in premium.css — duplicated so header
   still works if premium.css fails to load). Logo left / nav center / icons right. */
.nav-has-mega {
 position: relative;
}

.mega-menu {
 position: absolute;
 top: 100%;
 left: 50%;
 display: none;
 transform: translateX(-50%) translateY(8px);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 z-index: 1200 !important;
 min-width: 880px;
 max-width: min(1040px, 94vw);
 padding: 28px 32px 32px;
 border-top: 2px solid var(--bright-cyan);
 border-radius: 0 0 8px 8px;
 box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
 background: rgba(10, 14, 20, 0.98);
 border: 1px solid rgba(8, 146, 212, 0.2);
 box-sizing: border-box;
 transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.mega-menu-inner {
 display: grid !important;
 grid-template-columns: repeat(4, 1fr);
 gap: 28px 20px;
}

.mega-col h4 {
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--bright-cyan);
 margin: 0 0 12px;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mega-col ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.mega-col li {
 margin: 0 0 2px;
}

.mega-col a {
 display: block;
 padding: 8px 10px;
 border-radius: 4px;
 font-family: var(--font-body) !important;
 font-size: 13px !important;
 font-weight: 500 !important;
 letter-spacing: 0 !important;
 text-transform: none !important;
 color: rgba(255, 255, 255, 0.72) !important;
 line-height: 1.35;
 transition: background 0.2s, color 0.2s, padding-left 0.2s;
}

.mega-col a:hover {
 background: rgba(0, 212, 255, 0.1);
 color: #fff !important;
 padding-left: 14px;
}

.mega-subgroup {
 margin: 10px 0 4px;
}

.mega-subgroup-label {
 display: block;
 padding: 6px 10px 4px;
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.45);
}

.mega-subgroup-links {
 list-style: none;
 margin: 0;
 padding: 0 0 4px;
}

.mega-subgroup-links a {
 padding-left: 16px !important;
}

.mega-subgroup-links a:hover {
 padding-left: 20px !important;
}

.nav-mobile-subgroup {
 margin: 6px 0 2px;
}

.nav-mobile-subgroup-label {
 display: block;
 padding: 8px 16px 4px;
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.4);
}

.nav-mobile-subgroup ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-mobile-subgroup a {
 padding-left: 28px !important;
}

.mega-menu-footer {
 margin-top: 20px;
 padding-top: 16px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 text-align: center;
}

.mega-menu-footer a {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-display);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--bright-cyan) !important;
 padding: 8px 16px;
 border-radius: 4px;
 transition: background 0.2s, color 0.2s;
}

.mega-menu-footer a:hover {
 background: rgba(0, 212, 255, 0.12);
 color: #fff !important;
}

.nav-has-mega:hover > .mega-menu,
.nav-has-mega:focus-within > .mega-menu {
 display: block;
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateX(-50%) translateY(0);
}

.nav-has-mega > a::after { content: none !important; }

.nav-dropdown {
 position: absolute;
 top: 100%;
 left: 50%;
 display: none;
 transform: translateX(-50%) translateY(8px);
 min-width: 280px;
 max-width: min(360px, 92vw);
 padding: 16px 14px 14px;
 background: rgba(10, 14, 20, 0.98);
 border: 1px solid rgba(8, 146, 212, 0.2);
 border-top: 2px solid var(--bright-cyan);
 border-radius: 0 0 8px 8px;
 box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
 box-sizing: border-box;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
 z-index: 1200 !important;
}

.nav-dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-dropdown li {
 margin: 0 0 2px;
}

.nav-dropdown a {
 display: block;
 padding: 8px 10px;
 border-radius: 4px;
 font-family: var(--font-body) !important;
 font-size: 13px !important;
 font-weight: 500 !important;
 letter-spacing: 0 !important;
 text-transform: none !important;
 color: rgba(255, 255, 255, 0.72) !important;
 line-height: 1.35;
 transition: background 0.2s, color 0.2s, padding-left 0.2s;
}

.nav-dropdown a:hover {
 background: rgba(0, 212, 255, 0.1);
 color: #fff !important;
 padding-left: 14px;
}

.nav-dropdown .mega-subgroup {
 margin: 8px 0 4px;
}

.nav-dropdown .mega-subgroup-label {
 display: block;
 padding: 6px 10px 4px;
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--bright-cyan);
}

.nav-dropdown .mega-subgroup-links {
 list-style: none;
 margin: 0;
 padding: 0 0 4px;
}

.nav-dropdown .mega-subgroup-links a {
 padding-left: 16px !important;
 font-size: 13px !important;
}

.nav-dropdown .mega-subgroup-links a:hover {
 padding-left: 20px !important;
}

.nav-dropdown-footer {
 margin-top: 12px;
 padding-top: 12px;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 text-align: center;
}

.nav-dropdown-footer a {
 display: inline-flex !important;
 align-items: center;
 gap: 8px;
 font-family: var(--font-display) !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 letter-spacing: 0.12em !important;
 text-transform: uppercase !important;
 color: var(--bright-cyan) !important;
 padding: 8px 16px !important;
 border-radius: 4px;
 transition: background 0.2s, color 0.2s;
}

.nav-dropdown-footer a:hover {
 background: rgba(0, 212, 255, 0.12);
 color: #fff !important;
 padding-left: 16px !important;
}

.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown {
 display: block;
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateX(-50%) translateY(0);
}

.nav-has-dropdown > a::after { content: none !important; }

.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 min-height: var(--header-height);
 height: var(--header-height);
}

#site-header .logo {
 flex-shrink: 0;
 min-width: 0;
}

.logo img {
 display: block;
 height: clamp(32px, 3.8vw, 36px);
 width: auto;
 max-width: none;
 min-height: 32px;
 object-fit: contain;
 object-position: left center;
}

.header-nav {
 flex: 1 1 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 min-width: 0;
 padding-inline: clamp(8px, 1.2vw, 20px);
}

.nav-desktop {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: center;
 width: 100%;
 gap: clamp(10px, 1.15vw, 22px);
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-desktop > li {
 flex-shrink: 0;
}

.nav-desktop > li > a {
 display: inline-flex;
 align-items: center;
 font-family: var(--font-display);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 white-space: nowrap;
 color: rgba(255, 255, 255, 0.72);
 padding: 10px 2px;
 border-radius: 4px;
 transition: color 0.2s, background 0.2s;
}

.nav-desktop > li > a:hover,
.nav-desktop > li > a.active {
 color: var(--accent-link, #4db8e0);
 background: rgba(77, 184, 224, 0.08);
}

.nav-desktop > li > a.active {
 color: var(--accent-link, #4db8e0);
}

.nav-desktop > li > a::after { display: none; }

.nav-chevron {
 display: inline-block;
 flex-shrink: 0;
 width: 0;
 height: 0;
 margin-left: 6px;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 5px solid currentColor;
 vertical-align: middle;
 opacity: 0.6;
}

#site-header .header-actions {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 flex-shrink: 0;
 margin-left: auto;
 min-width: 0;
}

#site-header .header-toolbar {
 display: inline-flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 flex-shrink: 0;
}

#site-header .cart-btn,
#site-header #cartBtn {
 display: inline-flex !important;
 visibility: visible !important;
 opacity: 1 !important;
}

/* Unified square icon buttons  -  sign in, phone, cart */
.header-icon-btn,
#site-header .header-icon-btn {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 min-width: 44px;
 padding: 0;
 flex-shrink: 0;
 border: 1px solid rgba(77, 184, 224, 0.25);
 background: transparent;
 border-radius: 4px;
 color: rgba(255, 255, 255, 0.92);
 cursor: pointer;
 text-decoration: none;
 box-sizing: border-box;
 transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 clip-path: none !important;
 -webkit-clip-path: none !important;
 font-size: 0 !important;
 letter-spacing: 0 !important;
 text-transform: none !important;
 line-height: 0;
 -webkit-tap-highlight-color: transparent;
}

#site-header .cart-btn {
 padding: 0 !important;
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible,
#site-header .header-icon-btn:hover,
#site-header .header-icon-btn:focus-visible {
 border-color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.1);
 color: var(--bright-cyan);
 outline: none;
 box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15);
}

.header-icon-btn__svg,
.header-icon-btn .cart-icon,
.header-signin-icon,
.header-phone-icon {
 display: block;
 width: 18px;
 height: 18px;
 flex-shrink: 0;
}

.header-phone-compact {
 display: none !important;
}

.header-signin-text {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

.cart-btn .cart-count {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 18px;
 height: 18px;
 padding: 0 4px;
 font-size: 10px;
 line-height: 18px;
 text-align: center;
 border-radius: 999px;
 background: var(--bright-cyan);
 color: #030508;
 font-weight: 700;
}

.menu-toggle {
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 5px;
 width: 44px;
 height: 44px;
 min-width: 44px;
 padding: 8px;
 background: transparent;
 border: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 4px;
 cursor: pointer;
 z-index: 1;
 flex-shrink: 0;
 -webkit-tap-highlight-color: transparent;
 transition: border-color 0.2s ease, background 0.2s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
 border-color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.1);
 outline: none;
}

.menu-toggle span {
 display: block;
 width: 22px;
 height: 2px;
 background: #fff;
 border-radius: 1px;
 transition: transform 0.2s, opacity 0.2s;
}

.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
 display: none;
}

.nav-mobile-panel .nav-mobile {
 display: block;
}

.nav-mobile-panel[aria-hidden="true"] {
 display: none;
}

.nav-mobile-panel.open {
 display: block;
}

.nav-mobile {
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-mobile a {
 display: block;
 padding: 14px 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 font-family: var(--font-display);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: rgba(255, 255, 255, 0.88);
 text-decoration: none;
}

.nav-mobile a:hover {
 color: #fff;
}

.nav-mobile a.active,
.nav-mobile a[aria-current="page"] {
 color: var(--bright-cyan);
}

.nav-mobile-group-label {
 flex: 1;
 padding: 0;
 font-family: var(--font-display);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: inherit;
}

.nav-mobile-group-links {
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-mobile-group-links a {
 padding: 11px 0 11px 14px;
 font-size: 14px;
 text-transform: none;
 letter-spacing: 0.01em;
 font-family: var(--font-body);
 border-bottom: none;
 color: rgba(255, 255, 255, 0.72);
}

.nav-mobile-sub a {
 padding-left: 12px;
 font-size: 13px;
 text-transform: none;
 letter-spacing: 0.02em;
 font-family: var(--font-body);
}

.nav-mobile-cta {
 padding-top: 20px;
 border: none;
}

.nav-mobile-cta .btn {
 width: 100%;
 text-align: center;
}

.nav-mobile-phone {
 padding-top: 12px;
 border: none;
}

.nav-mobile-phone a {
 border: none;
 text-align: center;
 color: var(--bright-cyan);
 font-size: 15px;
}

body.nav-open {
 overflow: hidden;
}

body.nav-open #site-header,
body.nav-open .site-header {
 z-index: 1500 !important;
 background: rgba(5, 8, 13, 0.97);
 border-bottom-color: rgba(0, 212, 255, 0.18);
}

body.nav-open .menu-toggle {
 position: relative;
 z-index: 1510;
}

/* Prevent accidental home navigation while menu is open */
body.nav-open .site-header .logo {
 pointer-events: none;
}

/* Vehicle gallery */
.section-gallery { padding-top: 20px; }

/* Performance Calculator  -  match Real Results backdrop; flow into stats bar */
.vehicle-search-section {
 background: transparent !important;
 border: none !important;
}

.vehicle-search-section::before {
 content: none !important;
 display: none !important;
}

.vehicle-search-section + .stats-bar {
 border-top: none;
}

.trust-marquee--signals {
 margin: 0;
}

.vehicle-search-section + .trust-marquee--signals {
 margin-top: 0;
 border-top: none;
}

.trust-marquee--signals + .section-gallery,
.stats-bar + .section-gallery {
 padding-top: var(--home-section-gap, 36px);
}

/* Homepage  -  consistent section rhythm (calculator → marquee → gallery → services) */
[data-page="index"] .vehicle-search-section {
 padding-bottom: var(--home-section-gap, 36px) !important;
}

[data-page="index"] .trust-marquee--signals + .section.section-gallery {
 padding-top: var(--home-section-gap, 36px) !important;
 padding-bottom: var(--home-section-gap, 36px) !important;
}

[data-page="index"] .section.section-gallery + .section {
 padding-top: var(--home-section-gap, 36px) !important;
}

[data-page="index"] .section.section-gallery .section-header {
 margin-bottom: var(--section-header-gap);
}

.vehicle-search-container .section-label {
 display: block;
 margin-bottom: 14px;
}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}

.gallery-item {
 position: relative;
 margin: 0;
 border-radius: 8px;
 overflow: hidden;
 aspect-ratio: 4 / 3;
 border: 1px solid rgba(77, 184, 224, 0.12);
}

.gallery-item img,
.gallery-item video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
 background: #0a1018;
}

.gallery-item:hover img,
.gallery-item:hover video { transform: scale(1.04); }

.gallery-item--video .gallery-video-badge {
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 2;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-family: var(--font-display);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #fff;
 background: rgba(8, 146, 212, 0.88);
 padding: 4px 8px;
 border-radius: 3px;
 pointer-events: none;
}

.gallery-item--video {
 cursor: pointer;
}

.gallery-item--video.is-playing .gallery-video-badge {
 background: rgba(0, 212, 255, 0.95);
 color: #030508;
}

.gallery-item figcaption {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 10px 12px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #fff;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.service-card-image {
 background-size: cover;
 background-position: center;
 min-height: 180px;
}

@media (min-width: 1281px) {
 .menu-toggle { display: none !important; }
 .nav-mobile-panel { display: none !important; }
}

@media (min-width: 1281px) and (max-width: 1440px) {
 .nav-desktop { gap: clamp(8px, 0.75vw, 14px); }
 .nav-desktop > li > a { padding: 9px 1px; font-size: 12px; letter-spacing: 0.04em; }
 .nav-desktop > li > a.nav-cta { padding: 8px 14px !important; margin: 0; }
}

/* Tablet / mobile  -  burger before nav items compress or wrap */
@media (max-width: 1280px) {
 .header-nav { display: none !important; }

 .header-inner {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 min-height: 64px;
 height: auto;
 }

 .logo {
 flex: 0 0 auto;
 min-width: 0;
 max-width: min(240px, 52vw);
 }

 .logo img,
 .logo-mark img {
 display: block;
 height: clamp(28px, 5.5vw, 32px);
 width: auto;
 max-width: none;
 min-height: 28px;
 object-fit: contain;
 object-position: left center;
 }

 .header-actions {
 flex: 0 0 auto;
 margin-left: auto;
 gap: 8px;
 }

 .menu-toggle {
 display: flex;
 flex-shrink: 0;
 }

 .site-header {
 position: sticky;
 top: 0;
 }

 .nav-mobile-panel {
 display: block;
 position: fixed;
 inset: 0;
 z-index: 1400;
 pointer-events: none;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.28s ease, visibility 0.28s ease;
 background: #030508;
 border: none;
 padding: 0;
 max-height: none;
 overflow: visible;
 box-shadow: none;
 /* Escape any transformed/filtered ancestors */
 transform: translateZ(0);
 }

 .nav-mobile-panel[aria-hidden="true"] {
 display: block;
 pointer-events: none;
 visibility: hidden;
 opacity: 0;
 }

 .nav-mobile-panel.open {
 display: block;
 pointer-events: auto;
 visibility: visible;
 opacity: 1;
 background: #030508;
 }

 .nav-mobile-backdrop {
 position: absolute;
 inset: 0;
 border: none;
 padding: 0;
 margin: 0;
 cursor: pointer;
 background: #030508;
 }

 .nav-mobile-sheet {
 position: absolute;
 inset: 0;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 max-height: 100dvh;
 background-color: #030508;
 background-image:
  radial-gradient(ellipse 80% 36% at 100% 0%, rgba(0, 212, 255, 0.07), transparent 58%),
  linear-gradient(180deg, #0b121a 0%, #05080d 48%, #030508 100%);
 border-top: none;
 box-shadow: none;
 transform: translate3d(0, 8px, 0);
 opacity: 0;
 transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
 will-change: transform, opacity;
 }

 .nav-mobile-panel.open .nav-mobile-sheet {
 transform: translate3d(0, 0, 0);
 opacity: 1;
 }

 .nav-mobile-sheet-scroll {
 flex: 1 1 auto;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 padding: calc(var(--header-height, 72px) + 8px) var(--site-gutter) 20px;
 scrollbar-width: thin;
 scrollbar-color: rgba(0, 212, 255, 0.28) transparent;
 }

 .nav-mobile {
 padding: 4px 0 0;
 }

 .nav-mobile > li > a {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 8px;
 font-family: var(--font-display);
 font-size: 12.5px;
 font-weight: 700;
 letter-spacing: 0.13em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.9) !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
 border-radius: 4px;
 }

 .nav-mobile > li > a .nav-mobile-ico {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 color: var(--bright-cyan);
 opacity: 0.88;
 }

 .nav-mobile > li > a .nav-mobile-link-text {
 min-width: 0;
 }

 .nav-mobile > li > a:hover,
 .nav-mobile > li > a:focus-visible {
 color: #fff !important;
 padding-left: 12px;
 background: rgba(255, 255, 255, 0.03);
 outline: none;
 }

 .nav-mobile > li > a:hover .nav-mobile-ico,
 .nav-mobile > li > a:focus-visible .nav-mobile-ico {
 opacity: 1;
 color: var(--bright-cyan);
 }

 .nav-mobile-top-cta {
 color: var(--bright-cyan) !important;
 }

 .nav-mobile-top-cta .nav-mobile-ico {
 color: var(--bright-cyan) !important;
 opacity: 1;
 }

 .nav-mobile-services {
 margin: 12px 0 2px;
 border-bottom: none !important;
 padding-bottom: 0 !important;
 }

 .nav-mobile-services > a {
 display: flex !important;
 align-items: center;
 gap: 12px;
 font-size: 12.5px !important;
 letter-spacing: 0.13em !important;
 color: rgba(0, 212, 255, 0.95) !important;
 border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
 padding: 12px 8px 10px !important;
 margin-bottom: 0;
 }

 .nav-mobile-services > a .nav-mobile-ico {
 color: var(--bright-cyan);
 opacity: 1;
 }

 /* Step service categories under Services (align with the “i”) */
 .nav-mobile-services-branch {
 list-style: none;
 margin: 0;
 padding: 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .nav-mobile-services-groups {
 list-style: none;
 margin: 0;
 padding: 0 0 6px 18px;
 }

 .nav-mobile-services-groups > .nav-mobile-group {
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .nav-mobile-services-groups > .nav-mobile-group:last-child {
 border-bottom: none;
 }

 .nav-mobile-group {
 margin: 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .nav-mobile-group-toggle {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 width: 100%;
 min-height: 48px;
 padding: 13px 8px;
 background: transparent;
 border: none;
 color: rgba(255, 255, 255, 0.9);
 cursor: pointer;
 text-align: left;
 font-family: var(--font-display);
 font-size: 12.5px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
 border-radius: 6px;
 -webkit-tap-highlight-color: transparent;
 }

 .nav-mobile-group-label {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 flex: 1;
 min-width: 0;
 font-size: inherit;
 letter-spacing: inherit;
 line-height: 1.3;
 }

 .nav-mobile-group-label-text {
 min-width: 0;
 }

 .nav-mobile-group-ico {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 object-fit: contain;
 display: block;
 image-rendering: -webkit-optimize-contrast;
 }

 .nav-mobile-group-ico--photo {
 width: 32px;
 height: 32px;
 border-radius: 4px;
 }

 .nav-mobile-group-ico--compact {
 width: 26px;
 height: 26px;
 }

 .nav-mobile-group-toggle:hover,
 .nav-mobile-group-toggle:focus-visible {
 color: var(--bright-cyan);
 background: rgba(0, 212, 255, 0.06);
 outline: none;
 padding-left: 12px;
 }

 .nav-mobile-group-toggle[aria-expanded="true"] {
 color: var(--bright-cyan);
 background: rgba(0, 212, 255, 0.05);
 }

 .nav-mobile-group-icon {
 position: relative;
 width: 22px;
 height: 22px;
 flex-shrink: 0;
 margin-left: 8px;
 border: 1px solid rgba(255, 255, 255, 0.16);
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.025);
 transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
 }

 .nav-mobile-group-icon::before,
 .nav-mobile-group-icon::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 width: 10px;
 height: 1.5px;
 background: currentColor;
 transform: translate(-50%, -50%);
 transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
 }

 .nav-mobile-group-icon::after {
 transform: translate(-50%, -50%) rotate(90deg);
 }

 .nav-mobile-group-toggle[aria-expanded="true"] .nav-mobile-group-icon {
 border-color: rgba(0, 212, 255, 0.5);
 background: rgba(0, 212, 255, 0.1);
 color: var(--bright-cyan);
 }

 .nav-mobile-group-toggle[aria-expanded="true"] .nav-mobile-group-icon::after {
 transform: translate(-50%, -50%) rotate(0deg);
 opacity: 0;
 }

 .nav-mobile-group-links {
 max-height: 0;
 overflow: hidden;
 opacity: 0;
 transition: max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, padding 0.24s ease;
 padding: 0;
 border-left: 2px solid transparent;
 margin: 0 0 0 10px;
 }

 .nav-mobile-group-links[data-expanded="true"] {
 max-height: 3200px;
 opacity: 1;
 border-left-color: rgba(0, 212, 255, 0.32);
 margin-bottom: 12px;
 padding: 6px 0 10px;
 background: linear-gradient(90deg, rgba(0, 212, 255, 0.04), transparent 70%);
 border-radius: 0 6px 6px 0;
 }

 .nav-mobile-group-links > li > a {
 padding: 12px 12px 12px 14px;
 min-height: 44px;
 display: flex;
 align-items: center;
 font-size: 15px;
 font-weight: 500;
 line-height: 1.4;
 letter-spacing: 0.01em;
 text-transform: none;
 font-family: var(--font-body);
 color: rgba(232, 240, 248, 0.86) !important;
 border-bottom: none;
 border-radius: 6px;
 }

 .nav-mobile-group-links a:hover,
 .nav-mobile-group-links a:focus-visible {
 color: #fff !important;
 background: rgba(0, 212, 255, 0.1);
 outline: none;
 }

 /* Contact panel: same group rows as Services (Car & 4X4 style) */
 .nav-mobile-contact-panel {
 list-style: none;
 margin: 0;
 padding: 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .nav-mobile-contact-groups {
 padding-bottom: 6px;
 }

 /* Links must beat .nav-mobile a so they match Areas We Cover (button.group-toggle) */
 .nav-mobile a.nav-mobile-group-toggle,
 .nav-mobile a.nav-mobile-group-link {
 display: flex !important;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 width: 100%;
 min-height: 48px;
 padding: 13px 8px !important;
 margin: 0;
 background: transparent;
 border: none !important;
 border-bottom: none !important;
 border-radius: 6px;
 color: rgba(255, 255, 255, 0.9) !important;
 text-decoration: none;
 text-align: left;
 box-sizing: border-box;
 font-family: var(--font-display) !important;
 font-size: 12.5px !important;
 font-weight: 700 !important;
 letter-spacing: 0.1em !important;
 text-transform: uppercase !important;
 line-height: 1.3;
 transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
 }

 .nav-mobile a.nav-mobile-group-toggle:hover,
 .nav-mobile a.nav-mobile-group-toggle:focus-visible,
 .nav-mobile a.nav-mobile-group-link:hover,
 .nav-mobile a.nav-mobile-group-link:focus-visible {
 color: var(--bright-cyan) !important;
 background: rgba(0, 212, 255, 0.06);
 outline: none;
 padding-left: 12px !important;
 }

 .nav-mobile a.nav-mobile-group-toggle .nav-mobile-group-label,
 .nav-mobile a.nav-mobile-group-link .nav-mobile-group-label {
 font-family: inherit;
 font-size: inherit;
 font-weight: inherit;
 letter-spacing: inherit;
 text-transform: inherit;
 color: inherit;
 }

 .nav-mobile-group-links--static {
 max-height: none !important;
 overflow: visible !important;
 opacity: 1 !important;
 border-left: 2px solid rgba(0, 212, 255, 0.28);
 margin: 0 0 10px 10px;
 padding: 6px 0 10px;
 background: linear-gradient(90deg, rgba(0, 212, 255, 0.04), transparent 70%);
 border-radius: 0 6px 6px 0;
 }

 /* Nested folders (Popular Models, Van Remapping, Marine groups, Areas) — match leaf link type */
 .nav-mobile-group--nested {
 margin: 2px 0;
 border-bottom: none;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle,
 .nav-mobile-group--nested > .nav-mobile-group-toggle .nav-mobile-group-label {
 font-family: var(--font-body) !important;
 font-size: 15px !important;
 font-weight: 500 !important;
 letter-spacing: 0.01em !important;
 text-transform: none !important;
 line-height: 1.4 !important;
 color: rgba(232, 240, 248, 0.86) !important;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle {
 min-height: 44px;
 padding: 12px 12px 12px 14px;
 border-radius: 6px;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle:hover,
 .nav-mobile-group--nested > .nav-mobile-group-toggle:focus-visible {
 color: #fff !important;
 background: rgba(0, 212, 255, 0.1);
 padding-left: 14px;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle:hover .nav-mobile-group-label,
 .nav-mobile-group--nested > .nav-mobile-group-toggle:focus-visible .nav-mobile-group-label {
 color: #fff !important;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle[aria-expanded="true"],
 .nav-mobile-group--nested > .nav-mobile-group-toggle[aria-expanded="true"] .nav-mobile-group-label {
 color: var(--bright-cyan) !important;
 }

 .nav-mobile-group--nested > .nav-mobile-group-toggle[aria-expanded="true"] {
 background: rgba(0, 212, 255, 0.08);
 }

 .nav-mobile-group--nested .nav-mobile-group-icon {
 width: 20px;
 height: 20px;
 margin-left: 8px;
 }

 .nav-mobile-group--nested > .nav-mobile-group-links {
 margin-left: 12px;
 border-left-color: transparent;
 background: none;
 }

 .nav-mobile-group--nested > .nav-mobile-group-links[data-expanded="true"] {
 max-height: 1200px;
 border-left-color: rgba(0, 212, 255, 0.22);
 background: linear-gradient(90deg, rgba(0, 212, 255, 0.035), transparent 75%);
 margin-bottom: 6px;
 padding: 2px 0 6px;
 }

 .nav-mobile-group--nested > .nav-mobile-group-links > li > a {
 padding: 12px 12px 12px 16px;
 min-height: 44px;
 font-size: 15px;
 font-weight: 500;
 color: rgba(232, 240, 248, 0.86) !important;
 }

 .nav-mobile-subgroup {
 margin: 0;
 }

 .nav-mobile-subgroup-label {
 display: none;
 }

 .nav-mobile-subgroup ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

 .nav-mobile-subgroup a {
 padding-left: 16px !important;
 }

 .nav-mobile-foot {
 flex: 0 0 auto;
 display: grid;
 grid-template-columns: 1.12fr 1fr;
 gap: 10px;
 padding: 14px var(--site-gutter) calc(14px + env(safe-area-inset-bottom));
 border-top: 1px solid rgba(0, 212, 255, 0.14);
 background:
  linear-gradient(180deg, rgba(10, 16, 24, 0.92), rgba(3, 5, 8, 0.98));
 box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
 }

 .nav-mobile-foot .btn {
 width: 100%;
 justify-content: center;
 text-align: center;
 min-height: 48px;
 font-size: 11.5px;
 letter-spacing: 0.12em;
 border-radius: 6px;
 }

 .nav-mobile-foot-call {
 color: var(--bright-cyan) !important;
 border-color: rgba(0, 212, 255, 0.38) !important;
 background: rgba(0, 212, 255, 0.04) !important;
 }

 @media (prefers-reduced-motion: reduce) {
  .nav-mobile-panel,
  .nav-mobile-sheet,
  .nav-mobile-group-links,
  .nav-mobile-group-icon::before,
  .nav-mobile-group-icon::after {
   transition: none !important;
  }
  .nav-mobile-sheet {
   transform: none;
  }
 }

 .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
 .installer-layout { grid-template-columns: 1fr; }
 .installer-map { height: 360px; }
 .installer-list {
  --installer-card-h: 76px;
  max-height: calc((3 * var(--installer-card-h)) + (2 * var(--installer-list-gap)));
  overflow-y: auto;
 }
}

@media (max-width: 520px) {
 .gallery-grid { grid-template-columns: 1fr; }
}

/* Installer map popup */
.installer-leaflet-popup .leaflet-popup-content-wrapper {
 background: var(--dark-surface);
 color: var(--text);
 border: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 8px;
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.installer-leaflet-popup .leaflet-popup-tip {
 background: var(--dark-surface);
}

.installer-popup h3 {
 display: flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-display);
 font-size: 16px;
 margin: 0 0 8px;
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.installer-popup-loc {
 font-size: 13px;
 color: var(--text-muted);
 margin: 0 0 14px;
 line-height: 1.5;
}

.installer-enquiry-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: auto;
 text-align: center;
 margin-top: 0;
}

.installer-card {
 cursor: pointer;
 transition: border-color 0.2s, background 0.2s;
}

.installer-card:hover,
.installer-card:focus {
 border-color: rgba(0, 212, 255, 0.35);
 outline: none;
}

.installer-card .installer-enquiry-btn {
 margin-top: 0;
 width: auto;
 flex: 0 0 auto;
 padding: 7px 11px;
 min-height: 34px;
 font-size: 10.5px;
 letter-spacing: 0.08em;
 white-space: nowrap;
 line-height: 1.2;
}

@media (max-width: 420px) {
 .installer-card .installer-enquiry-btn {
  padding: 6px 9px;
  font-size: 10px;
 }
 .installer-card h3 {
  font-size: 15px;
 }
}

/* Subtle accent polish */
.trust-marquee-item .dot {
 background: var(--bright-cyan);
 box-shadow: 0 0 6px var(--accent-yellow-glow);
}

.btn-primary {
 box-shadow: 0 4px 20px var(--glow-blue), inset 0 1px 0 rgba(0, 212, 255, 0.12);
}

.site-header::after {
 background: linear-gradient(90deg, var(--bright-cyan), var(--brand-blue) 40%, transparent 80%);
}

/* Force identical header on every page (overrides main/premium/f1-theme) */
#site-header .site-header {
 background: rgba(3, 5, 8, 0.92) !important;
 backdrop-filter: blur(20px) saturate(180%) !important;
 -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
 border-bottom: 1px solid rgba(77, 184, 224, 0.12) !important;
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

#site-header .header-inner {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 24px !important;
 height: var(--header-height) !important;
 min-height: var(--header-height) !important;
 width: 100%;
 max-width: var(--site-max-width) !important;
 margin-left: auto !important;
 margin-right: auto !important;
 padding-left: var(--site-gutter) !important;
 padding-right: var(--site-gutter) !important;
 box-sizing: border-box;
}

#site-header .header-nav {
 flex: 1 1 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 justify-self: unset;
 min-width: 0;
 padding-inline: clamp(8px, 1.2vw, 20px);
}

#site-header .header-actions {
 flex: 0 0 auto;
 margin-left: auto;
}

#site-header .logo img,
#site-header .logo-mark img {
 height: clamp(32px, 3.8vw, 36px) !important;
 max-height: none !important;
 width: auto !important;
 max-width: none !important;
 min-height: 32px;
}

@media (max-width: 1280px) {
 #site-header .logo {
  flex: 0 0 auto;
  max-width: min(180px, 45vw);
 }

 #site-header .logo img,
 #site-header .logo-mark img {
  height: clamp(30px, 4.5vw, 34px) !important;
  min-height: 30px;
 }
}

@media (max-width: 1024px) {
 #site-header .header-inner {
  display: flex !important;
  min-height: 64px !important;
  height: auto !important;
 }

 #site-header .logo img,
 #site-header .logo-mark img {
  height: clamp(28px, 5.5vw, 32px) !important;
  min-height: 28px;
 }
}

#site-header .nav-desktop a::after {
 display: none !important;
}

#site-header .header-phone {
 display: none;
}

.header-book-btn {
 padding: 10px 22px !important;
 font-size: 12px !important;
 letter-spacing: 0.08em;
 min-width: auto;
}

.hero-quote-panel::before {
 background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(8, 146, 212, 0.08));
}

.hero-quote-panel .section-label {
 margin-bottom: 14px;
}

.hero-quote-panel .section-label::before {
 display: inline-block;
 vertical-align: middle;
 width: 8px;
 height: 8px;
 margin-right: 8px;
 border-radius: 50%;
 background: #22c55e;
 box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
 animation: quote-led-pulse 2.2s ease-in-out infinite;
}

@keyframes quote-led-pulse {
 0%, 100% {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
 }
 50% {
  opacity: 0.5;
  transform: scale(0.88);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.75);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero-quote-panel .section-label::before {
  animation: none;
  opacity: 1;
  transform: none;
 }
}

/* Become Installer page */
.installer-page-hero {
 position: relative;
 min-height: 420px;
 display: flex;
 align-items: center;
 background-size: cover;
 background-position: center;
 overflow: hidden;
}

.installer-page-hero-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(105deg, rgba(3, 5, 8, 0.94) 0%, rgba(3, 5, 8, 0.72) 55%, rgba(3, 5, 8, 0.5) 100%);
}

.installer-page-hero-inner {
 position: relative;
 z-index: 1;
 max-width: 720px;
 padding: clamp(48px, 8vw, 88px) 0;
}

.installer-page-lead {
 color: var(--text-muted);
 font-size: 17px;
 line-height: 1.7;
 margin: 16px 0 28px;
 max-width: 620px;
}

.installer-checklist {
 list-style: none;
 margin: 16px 0 0;
 padding: 0;
}

.installer-checklist li {
 position: relative;
 padding: 0 0 12px 22px;
 color: var(--text-muted);
 line-height: 1.6;
 font-size: 14px;
}

.installer-checklist li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 8px;
 width: 8px;
 height: 8px;
 background: var(--bright-cyan);
 border-radius: 50%;
 box-shadow: 0 0 8px rgba(0, 212, 255, 0.35);
}

.kess3-layout {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 48px;
 align-items: center;
}

.kess3-visual img {
 width: 100%;
 height: auto;
 border-radius: 8px;
 border: 1px solid rgba(77, 184, 224, 0.2);
}

.kess3-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 24px;
}

/* Become Installer  -  KESS3 image rotation & expanded page */
.installer-hero-kess3 {
 background-image: none !important;
}

.installer-hero-kess3-bg {
 position: absolute;
 inset: 0;
 overflow: hidden;
 z-index: 0;
 pointer-events: none;
 background:
  radial-gradient(ellipse 70% 80% at 72% 45%, rgba(8, 146, 212, 0.14) 0%, transparent 55%),
  linear-gradient(180deg, rgba(3, 5, 8, 0.35) 0%, rgba(3, 5, 8, 0.82) 100%);
}

.installer-hero-kess3-bg img {
 position: absolute;
 top: 50%;
 right: 4%;
 left: auto;
 width: auto;
 height: 78%;
 max-width: min(52vw, 520px);
 transform: translateY(-50%);
 object-fit: contain;
 opacity: 0.95;
}

.installer-kess3-visual {
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 min-height: 300px;
 max-height: 520px;
 padding: 24px;
 border-radius: 8px;
 border: 1px solid rgba(77, 184, 224, 0.2);
 background:
  radial-gradient(ellipse 80% 70% at 50% 50%, rgba(8, 146, 212, 0.1) 0%, transparent 70%),
  rgba(3, 5, 8, 0.45);
}

.installer-kess3-visual img {
 width: 100%;
 height: auto;
 max-height: 460px;
 object-fit: contain;
 border: none;
 border-radius: 0;
}

.installer-cap-card {
 background: var(--dark-surface);
 border: 1px solid rgba(77, 184, 224, 0.18);
 border-radius: 8px;
 padding: 0;
 overflow: hidden;
}

.installer-cap-card h3 {
 padding: 16px 20px 0;
 font-size: 18px;
 margin-bottom: 10px;
}

.installer-cap-card p {
 padding: 0 20px 20px;
 color: var(--text-muted);
 line-height: 1.7;
 font-size: 14px;
 margin: 0;
}

.installer-product-shot {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 200px;
 padding: 20px 16px 12px;
 background:
  radial-gradient(ellipse 90% 80% at 50% 40%, rgba(8, 146, 212, 0.08) 0%, transparent 65%),
  rgba(3, 5, 8, 0.35);
}

.installer-product-shot img {
 display: block;
 width: 100%;
 max-width: 340px;
 height: auto;
 max-height: 220px;
 object-fit: contain;
}

.installer-stats-bar {
 background: var(--dark-surface);
 border-top: 1px solid rgba(8, 146, 212, 0.12);
 border-bottom: 1px solid rgba(8, 146, 212, 0.12);
 padding: 28px 0;
}

.installer-stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 text-align: center;
}

.installer-stat-num {
 display: block;
 font-family: var(--font-display);
 font-size: clamp(28px, 4vw, 40px);
 font-weight: 800;
 color: var(--bright-cyan);
 line-height: 1;
 margin-bottom: 6px;
}

.installer-stat-lbl {
 font-size: 11px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--text-muted);
}

.installer-cap-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}

.installer-portal-shot {
 margin: 0;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid rgba(77, 184, 224, 0.2);
 background: var(--dark-bg);
}

.installer-portal-shot img {
 display: block;
 width: 100%;
 height: auto;
}

.installer-hero-actions {
 padding: 24px 0 8px;
}

 @media (max-width: 900px) {
 .installer-hero-kess3-bg img {
  right: 50%;
  height: 55%;
  max-width: 90%;
  transform: translate(50%, -50%);
  opacity: 0.35;
 }

 .installer-kess3-visual {
  min-height: 240px;
  max-height: none;
 }

 .installer-product-shot {
  min-height: 160px;
  padding: 16px 12px 8px;
 }

 .installer-product-shot img {
  max-height: 180px;
 }

 .installer-stats-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
 }

 .installer-cap-grid {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 600px) {
 .installer-stats-grid {
  grid-template-columns: 1fr 1fr;
 }
}

.reviews-badge-row {
 display: flex;
 flex-wrap: wrap;
 gap: clamp(20px, 3vw, 40px);
 margin-bottom: 32px;
}

.stat-num,
.hero-stat .num,
.reviews-badge .stat-num,
.installer-stat-num.stat-num {
 font-family: 'Orbitron', var(--font-display), sans-serif;
 font-size: clamp(24px, 3.2vw, 34px);
 font-weight: 500;
 font-style: normal;
 letter-spacing: 0.06em;
 color: var(--bright-cyan);
 line-height: 1.1;
}

.hero-stat .lbl,
.reviews-badge span,
.installer-stat-lbl {
 font-family: var(--font-display);
 font-size: clamp(0.6875rem, 2vw, 0.75rem);
 font-weight: 600;
 letter-spacing: 0.1em;
 line-height: 1.35;
 text-transform: uppercase;
 color: rgba(232, 240, 248, 0.85);
}

.reviews-badge {
 flex: 1 1 140px;
 padding: 0;
 text-align: left;
 background: transparent;
 border: none;
 border-radius: 0;
}

.reviews-badge strong {
 display: block;
 margin-bottom: 6px;
}

.reviews-badge span {
 display: block;
 font-size: clamp(0.6875rem, 2vw, 0.75rem);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: rgba(232, 240, 248, 0.85);
}

.installer-stat-num {
 font-family: 'Orbitron', var(--font-display), sans-serif;
 font-size: clamp(24px, 3.2vw, 34px);
 font-weight: 500;
 letter-spacing: 0.06em;
}

.reviews-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--card-gap);
}

.review-card {
 margin: 0;
 padding: clamp(24px, 3vw, 32px);
 background: rgba(3, 5, 8, 0.85);
 border: 1px solid rgba(77, 184, 224, 0.15);
 border-radius: 10px;
 border-left: 2px solid var(--bright-cyan);
}

.review-card p {
 font-size: 15px;
 line-height: 1.75;
 color: rgba(255, 255, 255, 0.88);
 margin: 0 0 18px;
 font-style: italic;
}

.review-card footer {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.review-card footer strong {
 font-size: 13px;
 color: var(--bright-cyan);
}

.review-card footer span {
 font-size: 11px;
 color: var(--text-muted);
}

.social-connect {
 margin-top: clamp(48px, 6vw, 64px);
 padding: clamp(32px, 4vw, 44px) clamp(28px, 4vw, 40px);
 text-align: center;
 background: rgba(10, 14, 20, 0.75);
 border: 1px solid rgba(77, 184, 224, 0.18);
 border-radius: 10px;
}

.social-connect h3 {
 font-size: 20px;
 margin-bottom: 12px;
}

.social-connect p {
 color: var(--text-muted);
 margin-bottom: 20px;
}

.social-connect-links {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 12px;
}

@media (max-width: 900px) {
 .reviews-grid,
 .kess3-layout {
 grid-template-columns: 1fr;
 }

 .kess3-layout {
 gap: 28px;
 }
}

@media (max-width: 600px) {
 .reviews-grid {
 grid-template-columns: 1fr;
 }
}

/* Inner page hero  -  unified band; optional background image via CMS or inline style */
.page-hero,
.article-hero {
 box-sizing: border-box;
 min-height: 200px;
 height: auto;
 max-height: none;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: clamp(36px, 5vw, 48px) 0 !important;
 background-color: var(--dark-bg);
 background-image: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg) 60%);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 background-clip: padding-box;
 border-bottom: none !important;
 box-shadow: inset 0 -1px 0 rgba(8, 146, 212, 0.1);
 position: relative;
 isolation: isolate;
 overflow: hidden;
}

.page-hero.has-hero-image,
.page-hero.page-hero--image,
.page-hero[style*="background-image"],
.article-hero.has-hero-image,
.article-hero.page-hero--image,
.article-hero[style*="background-image"] {
 background-clip: padding-box;
}

/* Full-bleed overlay (injected by syncPageHeroOverlays in components.js)
   Soft left scrim for type; right side stays open so photos read on dark UI. */
.page-hero-overlay {
 position: absolute;
 inset: -4px;
 width: auto;
 height: auto;
 min-width: calc(100% + 8px);
 min-height: calc(100% + 8px);
 margin: 0;
 padding: 0;
 border: none;
 z-index: 1;
 pointer-events: none;
 box-sizing: border-box;
 background:
  linear-gradient(
   to bottom,
   rgba(3, 5, 8, 0.1) 0%,
   rgba(3, 5, 8, 0.22) 50%,
   rgba(3, 5, 8, 0.55) 100%
  ),
  linear-gradient(
   105deg,
   rgba(3, 5, 8, 0.55) 0%,
   rgba(3, 5, 8, 0.28) 42%,
   rgba(3, 5, 8, 0.08) 100%
  );
}

/* Disable conflicting pseudo-element accents from other stylesheets */
.page-hero::before,
.article-hero::before,
.page-hero::after,
.article-hero::after {
 display: none !important;
 content: none !important;
}

.page-hero > .container,
.article-hero > .container,
.article-hero > .article-hero-inner {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: var(--site-max-width) !important;
 margin-left: auto !important;
 margin-right: auto !important;
 padding-left: var(--site-gutter) !important;
 padding-right: var(--site-gutter) !important;
 box-sizing: border-box;
}

.page-hero .breadcrumb,
.article-hero .breadcrumb {
 margin: 0 0 10px !important;
 font-family: var(--font-display) !important;
 font-size: 11px !important;
 font-weight: 600 !important;
 letter-spacing: 0.1em !important;
 text-transform: uppercase !important;
 color: var(--text-muted) !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.page-hero h1,
.article-hero h1 {
 margin: 0 0 10px !important;
 font-size: clamp(28px, 4vw, 42px) !important;
 font-weight: 800 !important;
 line-height: 1.08 !important;
 color: #fff !important;
 background: none !important;
 -webkit-text-fill-color: #fff !important;
 background-clip: border-box !important;
}

.page-hero-desc,
.article-excerpt {
 margin: 0 !important;
 color: var(--text-muted) !important;
 max-width: 56ch;
 font-size: 15px !important;
 line-height: 1.6 !important;
}

.article-hero .section-label,
.article-hero .article-date {
 display: none !important;
}

.services-jump-wrap {
 padding: 20px 0 0;
}

.services-jump-wrap .services-jump-nav {
 margin-top: 0;
}

/* ECU options compatibility browser */
.ecu-options-panel {
 background: var(--dark-surface);
 border: 1px solid rgba(8, 146, 212, 0.15);
 border-radius: 12px;
 padding: 24px;
 margin-bottom: 32px;
}

.ecu-options-toolbar {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 margin-bottom: 20px;
}

@media (max-width: 768px) {
 .ecu-options-toolbar { grid-template-columns: 1fr; }
}

.ecu-options-toolbar label {
 display: flex;
 flex-direction: column;
 gap: 6px;
 font-size: 13px;
 color: var(--text-muted);
}

.ecu-options-toolbar select,
.ecu-options-toolbar input {
 width: 100%;
 padding: 10px 12px;
 border-radius: 8px;
 border: 1px solid rgba(8, 146, 212, 0.2);
 background: var(--dark-bg);
 color: var(--text);
 font: inherit;
}

.ecu-options-meta {
 font-size: 14px;
 color: var(--text-muted);
 margin-bottom: 16px;
}

.ecu-options-table-wrap {
 max-height: 520px;
 overflow: auto;
 border: 1px solid rgba(8, 146, 212, 0.12);
 border-radius: 8px;
}

.ecu-options-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}

.ecu-options-table th,
.ecu-options-table td {
 padding: 10px 14px;
 text-align: left;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ecu-options-table th {
 position: sticky;
 top: 0;
 background: #111820;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--bright-cyan);
}

.ecu-options-table tr:hover td {
 background: rgba(8, 146, 212, 0.06);
}

.ecu-options-empty {
 padding: 32px;
 text-align: center;
 color: var(--text-muted);
}

.ecu-options-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 24px;
}

.ecu-options-chip {
 display: inline-block;
 padding: 6px 12px;
 border-radius: 999px;
 font-size: 12px;
 background: rgba(8, 146, 212, 0.12);
 color: var(--bright-cyan);
 border: 1px solid rgba(8, 146, 212, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   Site-wide blue brand + layout fixes (loads last)
   ═══════════════════════════════════════════════════════════════ */

.hero:not(.hero-slider)::after {
 background: linear-gradient(90deg, var(--bright-cyan) 0%, var(--brand-blue) 45%, var(--bright-cyan) 75%, transparent 100%) !important;
}

/* Our Services intro  -  F1 pit-wall panel + telemetry card */
.services-intro-wrap {
 margin-bottom: 0;
}

.services-intro-wrap + .services-grid {
 margin-top: clamp(48px, 6vw, 72px);
}

.services-intro-grid {
 position: relative;
 display: grid;
 grid-template-columns: 1fr;
 gap: clamp(28px, 3.5vw, 40px);
 align-items: start;
 margin-bottom: 0;
 padding: clamp(28px, 3.5vw, 44px);
 background:
  linear-gradient(145deg, rgba(10, 14, 22, 0.92) 0%, rgba(4, 6, 10, 0.96) 100%);
 border: 1px solid rgba(77, 184, 224, 0.14);
 clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
 overflow: hidden;
 isolation: isolate;
}

.services-intro-grid::before {
 content: '';
 position: absolute;
 inset: 0;
 background: var(--carbon-weave);
 opacity: 0.35;
 pointer-events: none;
 z-index: 0;
}

.services-intro-grid::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--racing-red) 0%, var(--brand-blue) 38%, var(--bright-cyan) 62%, transparent 100%);
 z-index: 1;
 pointer-events: none;
}

.services-intro-main,
.services-why-card {
 position: relative;
 z-index: 2;
}

.services-intro-main > .services-pill-row.pill-row {
 display: grid;
 grid-template-columns: repeat(4, minmax(112px, 1fr));
 gap: 10px;
 width: 100%;
 max-width: none;
 margin: 8px 0 0;
}

.services-intro-main {
 display: flex;
 flex-direction: column;
 gap: clamp(16px, 2vw, 22px);
 min-width: 0;
}

.services-intro-header {
 margin: 0;
 padding-left: 20px;
 max-width: none;
 border-left: 3px solid var(--racing-red);
}

.services-intro-header::before {
 box-shadow: 0 0 14px var(--racing-red-glow, rgba(225, 6, 0, 0.35));
}

.services-intro-header .section-label {
 margin-bottom: 10px;
 font-size: var(--section-label-size, 12px);
 letter-spacing: 0.14em;
}

.services-intro-header h2 {
 margin: 0 0 12px;
 font-size: clamp(26px, 3.2vw, 36px);
}

.services-intro-lead {
 margin: 0;
 max-width: 52ch;
 font-size: clamp(12px, 1.25vw, 13px);
 line-height: 1.75;
 color: rgba(159, 176, 194, 0.92);
}

.services-tagline {
 margin: 0;
 padding-left: 20px;
 color: var(--bright-cyan);
 font-family: var(--font-display);
 font-size: clamp(0.9rem, 1.6vw, 1.05rem);
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 line-height: 1.35;
 text-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.services-intro-copy {
 display: flex;
 flex-direction: column;
 gap: 14px;
 margin: 0;
 padding-left: 20px;
 border-left: 1px solid rgba(77, 184, 224, 0.12);
}

.services-intro-copy p {
 margin: 0;
 color: rgba(159, 176, 194, 0.9);
 font-size: clamp(14px, 1.45vw, 15px);
 line-height: 1.8;
 max-width: 56ch;
 text-transform: none;
 letter-spacing: normal;
}

.services-pill-row.pill-row .btn.hero-btn {
 width: 100%;
 min-width: 0;
 max-width: none;
 justify-self: stretch;
 height: 46px;
 min-height: 46px;
 padding: 0 10px;
 font-size: clamp(9px, 0.8vw, 11px);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 white-space: nowrap;
}

.services-why-card {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: clamp(20px, 2.5vw, 28px);
 border-radius: 0;
 border: 1px solid rgba(77, 184, 224, 0.24);
 background: linear-gradient(165deg, rgba(8, 12, 20, 0.98) 0%, rgba(4, 6, 10, 0.99) 100%);
 box-shadow:
  0 20px 50px rgba(0, 0, 0, 0.4),
  inset 0 1px 0 rgba(0, 212, 255, 0.08),
  inset 0 0 0 1px rgba(255, 255, 255, 0.03);
 clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
 overflow: hidden;
 align-self: stretch;
 height: fit-content;
 justify-content: flex-start;
}

.services-why-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--bright-cyan), var(--brand-blue) 55%, transparent);
 z-index: 2;
}

.services-why-card::after {
 content: '';
 position: absolute;
 bottom: 12px;
 right: 12px;
 width: 28px;
 height: 28px;
 border-right: 2px solid rgba(0, 212, 255, 0.35);
 border-bottom: 2px solid rgba(0, 212, 255, 0.35);
 pointer-events: none;
 opacity: 0.7;
}

.services-why-card__media {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 height: clamp(120px, 13vw, 150px);
 max-height: clamp(120px, 13vw, 150px);
 overflow: hidden;
 padding: 12px;
 margin-bottom: 2px;
 flex-shrink: 0;
 background: transparent;
 border: 1px solid rgba(77, 184, 224, 0.16);
 clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.services-why-card__media::before {
 content: '';
 position: absolute;
 top: 8px;
 left: 8px;
 width: 18px;
 height: 18px;
 border-top: 2px solid rgba(0, 212, 255, 0.55);
 border-left: 2px solid rgba(0, 212, 255, 0.55);
 pointer-events: none;
 z-index: 1;
}

.services-why-card__media picture {
 display: contents;
}

.services-why-card__media img {
 position: relative;
 z-index: 1;
 width: clamp(128px, 14vw, 168px);
 height: auto;
 max-height: clamp(112px, 12vw, 140px);
 aspect-ratio: 336 / 301;
 object-fit: contain;
 background: transparent;
 filter: drop-shadow(0 10px 22px rgba(8, 146, 212, 0.28));
}

.services-why-card__label {
 margin: 0;
 font-size: clamp(10px, 1vw, 11px);
 letter-spacing: 0.16em;
}

.services-why-card h3 {
 margin: 0;
 font-family: var(--font-display);
 font-size: clamp(1rem, 1.7vw, 1.15rem);
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #fff;
 line-height: 1.2;
}

.services-why-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
 flex: 0 0 auto;
}

.services-why-list li {
 position: relative;
 padding-left: 20px;
 font-size: 13px;
 line-height: 1.6;
 color: rgba(232, 240, 248, 0.9);
}

.services-why-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 7px;
 height: 7px;
 border-radius: 0;
 background: var(--bright-cyan);
 clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
 box-shadow: 0 0 10px rgba(0, 212, 255, 0.45);
 transform: translateY(-50%);
}

.services-why-card__actions {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 margin-top: 6px;
 flex: 0 0 auto;
}

.services-why-card__cta {
 align-self: stretch;
 min-width: 0;
 width: 100%;
 margin: 0;
 height: 46px;
 min-height: 46px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}

 @media (min-width: 1025px) {
 .services-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: clamp(32px, 3.5vw, 44px);
  align-items: stretch;
 }

 .services-intro-main {
  padding-right: 4px;
 }

 .services-intro-main > .services-pill-row.pill-row {
  margin-top: clamp(10px, 1.4vw, 14px);
  margin-bottom: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
}

@media (max-width: 1100px) and (min-width: 769px) {
 .services-intro-main > .services-pill-row.pill-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 420px;
  margin-top: clamp(12px, 2vw, 16px);
  margin-bottom: 0;
 }

 .services-pill-row.pill-row .btn.hero-btn {
  font-size: clamp(10px, 1.4vw, 12px);
  white-space: normal;
 }
}

@media (max-width: 768px) {
 .services-intro-grid {
  padding: clamp(20px, 5vw, 28px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
 }

 .services-intro-header {
  margin-bottom: 0;
  padding-left: 14px;
 }

 .services-tagline,
 .services-intro-copy {
  padding-left: 14px;
 }

 .services-intro-copy {
  margin-bottom: 0;
 }

 .services-intro-main > .services-pill-row.pill-row {
  max-width: none;
  margin-top: clamp(10px, 2.5vw, 14px);
  margin-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
 }

 .services-why-card {
  margin-top: 0;
 }

 .services-why-card__cta {
  width: 100%;
  align-self: stretch;
  margin-top: 0;
 }

 .services-pill-row.pill-row .btn.hero-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 6px;
  font-size: clamp(8px, 2.4vw, 10px);
  letter-spacing: 0.08em;
  line-height: 1.15;
  white-space: normal;
 }

 .services-why-card__media {
  height: clamp(140px, 38vw, 180px);
  max-height: none;
 }

 .services-why-card__media img {
  width: clamp(160px, 48vw, 220px);
  height: auto;
  max-height: clamp(140px, 42vw, 200px);
 }
}

/* Homepage scroll  -  subtle tech reveal animations (visible by default) */
[data-page="index"] .reveal {
 transition:
  opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-page="index"] .reveal.is-visible {
 opacity: 1;
 transform: translate3d(0, 0, 0);
 filter: blur(0);
}

[data-page="index"] .reveal-fade {
 transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-page="index"] .reveal-fade.is-visible {
 opacity: 1;
}

[data-page="index"] .reveal-stagger > .reveal,
[data-page="index"] .reveal-stagger > .service-card {
 transition:
  opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
  filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-page="index"] .reveal-stagger.is-visible > .reveal,
[data-page="index"] .reveal-stagger.is-visible > .service-card {
 opacity: 1;
 transform: translate3d(0, 0, 0);
 filter: blur(0);
}

[data-page="index"] .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-page="index"] .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-page="index"] .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-page="index"] .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.22s; }
[data-page="index"] .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-page="index"] .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.34s; }

[data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn {
 animation: index-tech-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn:nth-child(1) { animation-delay: 0.12s; }
[data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn:nth-child(2) { animation-delay: 0.18s; }
[data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn:nth-child(3) { animation-delay: 0.24s; }
[data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn:nth-child(4) { animation-delay: 0.3s; }

[data-page="index"] .services-intro-grid.is-visible .services-why-card {
 animation: index-tech-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item {
 animation: index-tech-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(1) { animation-delay: 0.06s; }
[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(2) { animation-delay: 0.12s; }
[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(3) { animation-delay: 0.18s; }
[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(4) { animation-delay: 0.24s; }

[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step {
 animation: index-tech-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(1) { animation-delay: 0.08s; }
[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(2) { animation-delay: 0.16s; }
[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(3) { animation-delay: 0.24s; }
[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(4) { animation-delay: 0.32s; }

[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step-icon {
 animation: process-icon-pulse 2.8s ease-in-out infinite;
}

[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(2) .process-step-icon { animation-delay: 0.4s; }
[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(3) .process-step-icon { animation-delay: 0.8s; }
[data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step:nth-child(4) .process-step-icon { animation-delay: 1.2s; }

[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-icon {
 animation: guarantee-icon-glow 3s ease-in-out infinite;
}

[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(2) .guarantee-icon { animation-delay: 0.5s; }
[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(3) .guarantee-icon { animation-delay: 1s; }
[data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item:nth-child(4) .guarantee-icon { animation-delay: 1.5s; }

[data-page="index"] .reveal.is-visible .btn,
[data-page="index"] .reveal.is-visible .book-now-btn,
[data-page="index"] .reveal.is-visible .tuning-btn {
 animation: index-tech-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
 animation-delay: 0.08s;
}

[data-page="index"] .vehicle-search-container.reveal.is-visible {
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(77, 184, 224, 0.08);
}

[data-page="index"] .vehicle-search-section.reveal.is-visible .vehicle-search-container {
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(77, 184, 224, 0.08);
 transition: box-shadow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

@keyframes index-tech-in {
 from {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
 }
 to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
 }
}

@keyframes guarantee-icon-glow {
 0%, 100% {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 0 16px rgba(0, 212, 255, 0.08);
 }
 50% {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 0 22px rgba(0, 212, 255, 0.22);
 }
}

@keyframes process-icon-pulse {
 0%, 100% {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.15), 0 0 18px rgba(0, 212, 255, 0.1);
 }
 50% {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4), 0 0 28px rgba(0, 212, 255, 0.25);
 }
}

@keyframes process-line-draw {
 from { transform: scaleX(0); }
 to { transform: scaleX(1); }
}

@keyframes process-line-draw-vertical {
 from { transform: scaleY(0); }
 to { transform: scaleY(1); }
}

/* Guarantee strip  -  tech icons + effects */
[data-page="index"] .guarantee-strip {
 position: relative;
 background: rgba(8, 12, 18, 0.92);
 border: 1px solid rgba(77, 184, 224, 0.18);
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

[data-page="index"] .guarantee-strip::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image:
  linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
 background-size: 24px 24px;
 pointer-events: none;
 opacity: 0.55;
}

[data-page="index"] .guarantee-strip::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--bright-cyan), var(--brand-blue), transparent);
 opacity: 0.85;
}

[data-page="index"] .guarantee-item {
 position: relative;
 z-index: 1;
 background: linear-gradient(180deg, rgba(14, 20, 28, 0.96) 0%, rgba(10, 14, 20, 0.98) 100%);
 padding: 28px 18px;
 transition: background 0.25s ease;
}

[data-page="index"] .guarantee-item:hover {
 background: linear-gradient(180deg, rgba(18, 28, 38, 0.98) 0%, rgba(12, 18, 26, 0.98) 100%);
}

[data-page="index"] .guarantee-item:hover .guarantee-icon {
 border-color: rgba(0, 212, 255, 0.5);
 transform: translateY(-2px);
}

.guarantee-icon {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 56px;
 margin: 0 auto 14px;
 border-radius: 8px;
 border: 1px solid rgba(77, 184, 224, 0.28);
 background: linear-gradient(145deg, rgba(0, 212, 255, 0.1) 0%, rgba(8, 146, 212, 0.04) 100%);
 color: var(--bright-cyan);
 overflow: hidden;
 transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.guarantee-icon::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(120deg, transparent 30%, rgba(0, 212, 255, 0.14) 50%, transparent 70%);
 transform: translateX(-120%);
 animation: guarantee-scan 4s ease-in-out infinite;
}

.guarantee-icon svg {
 position: relative;
 z-index: 1;
 width: 26px;
 height: 26px;
 display: block;
}

@keyframes guarantee-scan {
 0%, 100% { transform: translateX(-120%); }
 45%, 55% { transform: translateX(120%); }
}

/* Process timeline  -  tech icons + animated connector */
[data-page="index"] .process-timeline {
 margin-top: 44px;
}

[data-page="index"] .process-timeline::before {
 content: '';
 position: absolute;
 top: 34px;
 left: 12.5%;
 right: 12.5%;
 height: 2px;
 background: linear-gradient(90deg, var(--brand-blue), var(--bright-cyan), var(--brand-blue));
 opacity: 0.45;
 transform-origin: left center;
}

[data-page="index"] .process-timeline.is-visible::before {
 animation: process-line-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.process-step-icon {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 64px;
 height: 64px;
 margin: 0 auto 18px;
 border-radius: 50%;
 border: 2px solid rgba(77, 184, 224, 0.35);
 background: radial-gradient(circle at 30% 25%, rgba(0, 212, 255, 0.14) 0%, rgba(10, 14, 20, 0.98) 68%);
 color: var(--bright-cyan);
 z-index: 1;
 transition: transform 0.25s ease, border-color 0.25s ease;
}

[data-page="index"] .process-step:hover .process-step-icon {
 transform: scale(1.06);
 border-color: rgba(0, 212, 255, 0.55);
}

.process-step-icon svg {
 width: 28px;
 height: 28px;
 display: block;
}

.process-step-badge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 20px;
 height: 20px;
 padding: 0 5px;
 border-radius: 999px;
 background: var(--brand-blue);
 color: #fff;
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 800;
 line-height: 20px;
 letter-spacing: 0.04em;
 box-shadow: 0 0 12px rgba(8, 146, 212, 0.45);
}

[data-page="index"] .process-step .process-step-num {
 display: none;
}

[data-page="index"] .guarantee-item h3, .guarantee-item h4 {
 color: #fff;
}

[data-page="index"] .guarantee-item p {
 font-size: 13px;
 line-height: 1.55;
}

[data-page="index"] .process-step h3 {
 color: #fff;
 letter-spacing: 0.08em;
}

@media (max-width: 900px) {
 [data-page="index"] .process-timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
 }

 [data-page="index"] .process-timeline::before {
  display: none;
 }
}

@media (max-width: 749px) {
 [data-page="index"] .guarantee-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 [data-page="index"] .process-timeline {
  grid-template-columns: 1fr;
  gap: 0;
  padding-left: 8px;
 }

 [data-page="index"] .process-timeline::before {
  display: block;
  top: 36px;
  bottom: 36px;
  left: 39px;
  right: auto;
  width: 2px;
  height: auto;
  transform-origin: top center;
  transform: scaleY(0);
 }

 [data-page="index"] .process-timeline.is-visible::before {
  animation: process-line-draw-vertical 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
 }

 [data-page="index"] .process-step {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  text-align: left;
  padding: 0 0 28px;
 }

 [data-page="index"] .process-step:last-child {
  padding-bottom: 0;
 }

 [data-page="index"] .process-step-icon {
  margin: 0;
  grid-row: 1 / span 2;
 }

 .guarantee-icon {
  width: 50px;
  height: 50px;
 }

 .guarantee-icon svg {
  width: 22px;
  height: 22px;
 }
}

@media (max-width: 1024px) {
 [data-page="index"] .reveal,
 [data-page="index"] .reveal-fade,
 [data-page="index"] .reveal-stagger > .reveal,
 [data-page="index"] .reveal-stagger > .service-card,
 [data-page="index"] .guarantee-strip.reveal-stagger:not(.is-visible) .guarantee-item,
 [data-page="index"] .process-timeline.reveal-stagger:not(.is-visible) .process-step {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
 }

 [data-page="index"] .process-timeline::before,
 [data-page="index"] .guarantee-icon::after {
  animation: none !important;
  transform: none !important;
 }
}

@media (max-width: 480px) {
 .services-intro-main > .services-pill-row.pill-row {
  gap: 4px;
 }

 .services-pill-row.pill-row .btn.hero-btn {
  height: 38px;
  min-height: 38px;
  font-size: 7px;
 }
}

@media (prefers-reduced-motion: reduce) {
 [data-page="index"] .reveal,
 [data-page="index"] .reveal-fade,
 [data-page="index"] .reveal-stagger > .reveal,
 [data-page="index"] .reveal-stagger > .service-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
 }

 [data-page="index"] .services-intro-main > .services-pill-row.is-visible .btn.hero-btn,
 [data-page="index"] .services-intro-grid.is-visible .services-why-card,
 [data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-item,
 [data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step,
 [data-page="index"] .process-timeline.reveal-stagger.is-visible .process-step-icon,
 [data-page="index"] .guarantee-strip.reveal-stagger.is-visible .guarantee-icon,
 [data-page="index"] .reveal.is-visible .btn,
 [data-page="index"] .reveal.is-visible .book-now-btn,
 [data-page="index"] .reveal.is-visible .tuning-btn {
  animation: none !important;
 }
}

.stats-bar::before {
 background: linear-gradient(90deg, transparent, var(--bright-cyan), var(--brand-blue), var(--bright-cyan), transparent) !important;
 opacity: 0.65 !important;
}

.stats-bar-item .num,
.stats-bar-item .lbl {
 color: #fff !important;
}

.stats-bar-item .lbl {
 opacity: 0.92;
}

.reviews-badge strong {
 color: var(--bright-cyan) !important;
}

.review-stars {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-bottom: 12px;
 line-height: 1;
}

.review-star {
 display: inline-block;
 color: #f5c518;
 font-size: 15px;
 text-shadow: 0 0 12px rgba(245, 197, 24, 0.25);
 opacity: 1;
 transform: none;
}

.reviews-grid.is-visible .review-star {
 animation: none;
}

.reviews-grid.is-visible .review-star:nth-child(1) { animation-delay: 0.05s; }
.reviews-grid.is-visible .review-star:nth-child(2) { animation-delay: 0.11s; }
.reviews-grid.is-visible .review-star:nth-child(3) { animation-delay: 0.17s; }
.reviews-grid.is-visible .review-star:nth-child(4) { animation-delay: 0.23s; }
.reviews-grid.is-visible .review-star:nth-child(5) { animation-delay: 0.29s; }

@keyframes review-star-spin-in {
 from {
  opacity: 0;
  transform: rotate(-220deg) scale(0.15);
 }
 to {
  opacity: 1;
  transform: rotate(0deg) scale(1);
 }
}

@media (prefers-reduced-motion: reduce) {
 .review-star {
  opacity: 1;
  transform: none;
  animation: none !important;
 }
}

.review-card {
 border-left-width: 1px !important;
 border-left-color: var(--bright-cyan) !important;
}

.trust-card-logo {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 96px;
 margin-bottom: 18px;
 padding: 10px 8px 18px;
 border-bottom: 1px solid rgba(77, 184, 224, 0.12);
}

.trust-card-logo img {
 display: block;
 width: min(100%, 260px);
 max-height: 88px;
 height: auto;
 object-fit: contain;
 opacity: 0.98;
}

.hero,
.service-hero {
 position: relative;
}

.seo-hero-img {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* Homepage: real LCP image (not CSS background) — same look, much faster paint.
   Img sits inside <picture>, so use descendant selectors (not >). */
.hero.hero-slider .hero-slider-media .seo-hero-img,
.hero.hero-slider .hero-slider-media .hero-lcp-img,
.hero.hero-slider .hero-slider-media picture {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
 clip: auto;
 overflow: hidden;
 white-space: normal;
 z-index: 0;
 pointer-events: none;
}

.hero.hero-slider .hero-slider-media .seo-hero-img,
.hero.hero-slider .hero-slider-media .hero-lcp-img {
 object-fit: cover;
 object-position: center center;
 opacity: 1;
 transition: opacity 0.45s ease;
}

.hero.hero-slider .hero-slider-media .seo-hero-img.is-hidden,
.hero.hero-slider .hero-slider-media .hero-lcp-img.is-hidden {
 opacity: 0;
}

.hero.hero-slider .hero-slide-bg {
 z-index: 1;
}

.hero.hero-slider .hero-slide-bg--lcp-placeholder {
  background-image: none !important;
  background-color: transparent !important;
}

/* Keep LCP hero image painted for Core Web Vitals — never fade it out */
.hero.hero-slider .hero-slider-media .seo-hero-img.is-hidden,
.hero.hero-slider .hero-slider-media .hero-lcp-img.is-hidden {
  opacity: 1 !important;
}

.local-seo-grid,
.local-coverage-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 margin-top: 28px;
}

.local-seo-card,
.local-coverage-card {
 background: var(--dark-surface, #111);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 12px;
 padding: 24px;
}

.local-seo-card h3,
.local-coverage-card h3 {
 font-size: 1.05rem;
 margin-bottom: 10px;
 color: var(--bright-cyan);
}

.local-seo-card p,
.local-coverage-card p {
 color: var(--text-muted);
 line-height: 1.7;
 font-size: 0.95rem;
 margin-bottom: 12px;
}

.local-seo-card p:last-child,
.local-coverage-card p:last-child {
 margin-bottom: 0;
}

.local-seo-prose {
 margin-top: 32px;
 padding: 28px 24px;
 background: var(--dark-surface, #111);
 border: 1px solid rgba(77, 184, 224, 0.14);
 border-radius: 12px;
}

.local-seo-prose h3 {
 font-size: clamp(18px, 2.4vw, 22px);
 margin-bottom: 14px;
 color: #fff;
}

.local-seo-prose p {
 color: var(--text-muted);
 line-height: 1.75;
 font-size: var(--text-body-sm);
 margin-bottom: 14px;
}

.local-seo-prose p:last-child {
 margin-bottom: 0;
}

@media (max-width: 768px) {
 .about-values-grid {
  grid-template-columns: 1fr;
 }

 .local-seo-grid,
 .local-coverage-grid {
 grid-template-columns: 1fr;
 }
}

/* Services hub  -  text always visible; image-only hover polish */
.services-hub-grid .service-hub-card.reveal {
 opacity: 1 !important;
 transform: none !important;
 transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.service-hub-card-image {
 position: relative;
 overflow: hidden;
 flex-shrink: 0;
}

.service-hub-card-image::after {
 display: none !important;
}

.seo-card-img {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}

.service-hub-card-body {
 position: relative;
 z-index: 2;
 opacity: 1 !important;
 visibility: visible !important;
}

.services-hub-grid .service-hub-card:hover {
 transform: translateY(-4px);
 border-color: var(--brand-blue);
 box-shadow: 0 16px 48px rgba(8, 146, 212, 0.12);
}

.services-hub-grid .service-hub-card:hover .service-hub-card-image {
 transform: scale(1.04);
}

/* Package cards: reveal animation must not block hover lift */
.services-grid .feature-card-premium:hover,
.feature-card-premium.reveal.is-visible:hover {
 transform: translateY(-6px);
}

.faq-jump-nav {
 margin-bottom: 32px;
}

.faq-group-section {
 scroll-margin-top: 96px;
 margin-bottom: 40px;
}

.faq-group-section:last-child {
 margin-bottom: 0;
}

.faq-group-title {
 font-size: clamp(20px, 3vw, 26px);
 margin-bottom: 16px;
 font-style: normal;
 text-transform: none;
 letter-spacing: 0.02em;
 color: var(--bright-cyan);
}

.faq-groups .faq-list {
 max-width: none;
}

.installer-application-section .contact-form {
 max-width: 720px;
}

.installer-application-success {
 max-width: 720px;
 padding: 32px;
 background: var(--dark-surface);
 border: 1px solid rgba(8, 146, 212, 0.2);
 border-radius: 12px;
}

.installer-application-success h3 {
 margin-bottom: 12px;
 font-style: normal;
 text-transform: none;
}

body[data-page="booking"] #cartBtn,
body[data-page="booking"] #site-cart {
 display: none !important;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
 border-color: #e74c3c;
}

.form-field-error {
 font-size: 12px;
 color: #e74c3c;
 margin-top: 4px;
}

/* Primary nav CTA  -  Book Now */
.nav-desktop .nav-cta {
 background: var(--brand-blue);
 color: #fff !important;
 padding: 8px 16px !important;
 margin: 0;
 border-radius: 4px;
 border: 1px solid var(--brand-blue);
 letter-spacing: 0.08em;
 transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.nav-desktop .nav-cta:hover {
 background: #0778b0;
 border-color: #0778b0;
 color: #fff !important;
}

.footer-newsletter-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   Homepage & header polish  -  contrast, Sign In, mobile hierarchy
   ═══════════════════════════════════════════════════════════════ */

.hero h1 {
 background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 42%, #c5d8e8 100%) !important;
 -webkit-background-clip: text !important;
 background-clip: text !important;
 -webkit-text-fill-color: transparent !important;
 filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.82)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
 letter-spacing: 0.03em !important;
}

.hero-subtitle {
 color: #7ee8ff !important;
 text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
 font-weight: 700 !important;
}

.hero p {
 color: rgba(232, 240, 248, 0.92) !important;
 text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

 @media (max-width: 1024px) {
 .hero-content {
  position: relative;
  z-index: 1;
 }

 .hero-content::before {
  display: none;
 }

 .hero h1,
 .hero-slide-text h1,
 .hero-slide-text h2.hero-slide-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
 }

 .hero-badge {
  margin-bottom: 14px;
 }

 .hero h1,
 .hero-slide-text h1,
 .hero-slide-text h2.hero-slide-title {
  font-size: clamp(30px, 8.5vw, 42px) !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
 }

 .hero-subtitle {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 12px !important;
 }

 .hero p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 22px !important;
 }
}

 @media (max-width: 480px) {
 #site-header .header-actions {
  gap: 6px;
 }

 #site-header .header-toolbar {
  gap: 6px;
 }

 .header-icon-btn,
 #site-header .header-icon-btn,
 .menu-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
 }

 .header-icon-btn__svg,
 .header-icon-btn .cart-icon,
 .header-signin-icon,
 .header-phone-icon {
  width: 17px;
  height: 17px;
 }
}

.service-hub-card-image {
 background-position: center center !important;
 background-size: cover !important;
}

/* Vehicle catalog PNGs  -  uniform height, centred with breathing room */
.service-hub-card-image.service-hub-card-image--vehicle {
 background-color: #080d14 !important;
 background-size: 78% auto !important;
 background-repeat: no-repeat !important;
 background-position: center center !important;
}

.service-hub-card-image.service-hub-card-image--icon {
 background-color: #080d14 !important;
 background-size: 58% auto !important;
 background-repeat: no-repeat !important;
 background-position: center center !important;
}

.service-hub-card-image.service-hub-card-image--vehicle::after,
.service-hub-card-image.service-hub-card-image--icon::after {
 display: none !important;
}

.service-hub-card-image .seo-card-img {
 object-fit: cover;
}

/* Homepage service cards  -  vehicle PNG sizing (matches services hub) */
.service-card-image::after {
 display: none !important;
}

.service-card-image {
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 image-rendering: auto;
 -webkit-font-smoothing: antialiased;
}

.service-card:hover .service-card-image {
 transform: none;
}

.service-card-image.service-card-image--vehicle {
 background-color: #080d14;
 background-size: 72% auto !important;
 background-repeat: no-repeat;
 background-position: center center;
}

/* Bike PNG has more frame  -  scale down to match jet-ski & van */
.service-card-image.service-card-image--vehicle[data-cms-image="service_bike"] {
 background-size: 58% auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   Site-wide typography  -  mobile readability floor (13px min)
   ═══════════════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
 font-size: max(16px, 1rem);
}

@media (max-width: 1024px) {
 .page-hero-desc {
  font-size: var(--text-body-sm);
  line-height: 1.65;
 }

 .stats-bar-item .lbl {
  font-size: 12px;
  line-height: 1.35;
 }

 .product-badge {
  font-size: 11px;
 }

 .trust-marquee-item {
  font-size: 13px;
 }

 .filter-list label {
  font-size: 14px;
  min-height: 36px;
 }

 .product-card-body h3 {
  font-size: 15px;
  line-height: 1.35;
 }

 .product-card-body p {
  font-size: 14px;
 }

 .service-card-body h3,
 .step-card h3 {
  font-size: 16px;
 }

 .pill-link {
  font-size: 13px;
 }
}

/* Page-load telemetry pulse  -  slim strip along hero base */
.page-pulse {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 3;
 pointer-events: none;
 height: 36px;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 padding: 0 20px 5px;
 background: linear-gradient(180deg, transparent 0%, rgba(3, 5, 8, 0.28) 100%);
 opacity: 0;
 animation: page-pulse-fade 1.75s ease forwards;
}

.page-hero .page-pulse,
.article-hero .page-pulse {
 height: 28px;
 padding-bottom: 3px;
}

.page-pulse.is-done {
 opacity: 0;
 transition: opacity 0.3s ease;
}

.page-pulse-grid {
 position: absolute;
 inset: 0;
 background-image:
  linear-gradient(rgba(77, 184, 224, 0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(77, 184, 224, 0.04) 1px, transparent 1px);
 background-size: 18px 18px;
 opacity: 0.5;
 mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 55%, #000 100%);
}

.page-pulse-wave {
 position: relative;
 z-index: 1;
 width: 100%;
 height: 22px;
 overflow: visible;
}

.page-hero .page-pulse-wave,
.article-hero .page-pulse-wave {
 height: 18px;
}

.page-pulse-line {
 fill: none;
 stroke: url(#pagePulseGrad);
 stroke-width: 1.15;
 stroke-linecap: round;
 stroke-linejoin: round;
 filter: url(#pagePulseGlow);
 stroke-dasharray: 2400;
 stroke-dashoffset: 2400;
 animation: page-pulse-draw 1.15s cubic-bezier(0.35, 0, 0.2, 1) 0.08s forwards;
}

.page-pulse-line--ghost {
 stroke: rgba(0, 212, 255, 0.06);
 stroke-width: 0.85;
 filter: none;
 stroke-dashoffset: 0;
 animation: none;
}

.page-pulse-sweep {
 position: absolute;
 left: -12%;
 bottom: 6px;
 width: 18%;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.45), transparent);
 box-shadow: 0 0 8px rgba(0, 212, 255, 0.25);
 animation: page-pulse-sweep 1.15s ease-out 0.08s forwards;
 opacity: 0;
}

@keyframes page-pulse-draw {
 to { stroke-dashoffset: 0; }
}

@keyframes page-pulse-sweep {
 0% { left: -12%; opacity: 0; }
 15% { opacity: 0.7; }
 100% { left: 112%; opacity: 0; }
}

@keyframes page-pulse-fade {
 0%, 10% { opacity: 1; }
 72%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
 .page-pulse { display: none !important; }
}

/* Guest checkout modal */
.guest-checkout-overlay {
 position: fixed;
 inset: 0;
 z-index: 3000;
 background: rgba(0, 0, 0, 0.72);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.25s, visibility 0.25s;
}

.guest-checkout-overlay.open {
 opacity: 1;
 visibility: visible;
}

.guest-checkout-modal {
 width: 100%;
 max-width: 420px;
 background: var(--dark-surface);
 border: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 10px;
 padding: 24px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.guest-checkout-modal h3 {
 margin: 0 0 8px;
 font-family: var(--font-display);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.guest-checkout-modal p {
 margin: 0 0 18px;
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.55;
}

.guest-checkout-actions {
 display: flex;
 gap: 10px;
 margin-top: 18px;
}

.guest-checkout-actions .btn {
 flex: 1;
 min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   Spacing & layout rhythm  -  professional vertical flow
   ═══════════════════════════════════════════════════════════════ */

.section-header {
 margin-bottom: var(--section-header-gap);
}

.section-header h2 {
 margin-bottom: 14px;
}

.section-header p {
 max-width: 58ch;
 line-height: 1.75;
}

.section {
 padding: var(--section-pad-y) 0;
}

[data-page="index"] .section {
 padding-top: var(--section-pad-y);
 padding-bottom: var(--section-pad-y);
}

[data-page="index"] .vehicle-search-section {
 padding-top: var(--hero-block-gap) !important;
 padding-bottom: var(--home-section-gap) !important;
}

[data-page="index"] .trust-marquee--signals {
 margin-top: 0;
 margin-bottom: 0;
}

[data-page="index"] .trust-marquee--signals + .section.section-gallery {
 padding-top: var(--home-section-gap) !important;
 padding-bottom: var(--home-section-gap) !important;
}

[data-page="index"] .section.section-gallery + .section {
 padding-top: var(--home-section-gap) !important;
}

[data-page="index"] .section-header {
 margin-bottom: var(--section-header-gap);
}

[data-page="index"] .reviews-section .section-header {
 margin-bottom: var(--section-header-gap);
}

.section-cta-center {
 text-align: center;
 margin-top: clamp(48px, 6vw, 64px);
}

.section-link-more {
 margin-top: clamp(28px, 4vw, 40px);
}

.section-link-more a {
 font-weight: 600;
}

/* Vehicle search  -  breathing room */
.vehicle-search-container {
 padding: clamp(36px, 5vw, 52px) clamp(28px, 4.5vw, 56px) clamp(32px, 4.5vw, 44px);
}

.v-search-head {
 margin-bottom: clamp(32px, 4.5vw, 48px);
}

.v-search-subtitle {
 margin-top: 12px;
 max-width: 52ch;
 line-height: 1.75;
}

.dropdown-row {
 gap: clamp(16px, 2.5vw, 24px);
 margin-bottom: clamp(20px, 3vw, 28px);
}

.v-search-actions {
 gap: 16px;
 margin-top: 4px;
 margin-bottom: 12px;
}

.results-section {
 margin-top: clamp(24px, 3vw, 36px);
 padding: clamp(28px, 3.5vw, 36px);
}

.stats-table th,
.stats-table td {
 padding: 18px 8px;
}

.tuning-options-row {
 gap: 12px;
 margin-top: 28px;
 margin-bottom: 28px;
}

.price-action-bar {
 margin-top: 28px;
 padding: 20px 24px;
 gap: 20px;
}

.vehicle-select {
 padding: 16px 44px 16px 18px;
 min-height: 52px;
}

.trust-marquee--signals {
 padding: 18px 0;
}

.trust-marquee-item {
 letter-spacing: 0.02em;
}

/* Service cards */
.services-grid {
 gap: var(--card-gap);
}

.service-card-body {
 padding: clamp(22px, 2.5vw, 28px);
}

.service-card-body h3 {
 margin-bottom: 12px;
}

.service-card-body p {
 margin-bottom: 20px;
 line-height: 1.7;
}

[data-page="index"] .guarantee-strip {
 margin-top: clamp(56px, 7vw, 80px);
}

[data-page="index"] .guarantee-item {
 padding: clamp(28px, 3.5vw, 36px) clamp(20px, 2.5vw, 28px);
}

[data-page="index"] .guarantee-item h3, .guarantee-item h4 {
 margin-bottom: 10px;
}

[data-page="index"] .guarantee-item p {
 line-height: 1.65;
}

[data-page="index"] .process-timeline {
 margin-top: clamp(40px, 5vw, 56px);
 gap: clamp(16px, 2vw, 24px);
}

[data-page="index"] .process-step h3 {
 margin-bottom: 12px;
}

[data-page="index"] .process-step p {
 line-height: 1.7;
 max-width: 22ch;
 margin-left: auto;
 margin-right: auto;
}

/* Trust / industry */
.trust-grid {
 gap: var(--card-gap);
}

.trust-card {
 padding: clamp(24px, 3vw, 32px);
}

.industry-note {
 margin-top: clamp(40px, 5vw, 56px);
 padding: clamp(24px, 3vw, 32px);
 line-height: 1.8;
 max-width: 72ch;
 margin-left: auto;
 margin-right: auto;
}

/* FAQ */
.faq-list--home {
 max-width: 760px;
}

.faq-item {
 margin-bottom: 14px;
 border-radius: 8px;
}

.faq-item summary {
 padding: clamp(18px, 2.5vw, 22px) clamp(20px, 3vw, 28px);
 font-size: 15px;
 line-height: 1.5;
}

.faq-answer {
 padding: 0 clamp(20px, 3vw, 28px) clamp(20px, 2.5vw, 24px);
 font-size: 15px;
 line-height: 1.8;
}

.faq-answer p {
 margin: 0;
}

/* SEO content block */
.seo-content--home {
 max-width: 72ch;
 margin-top: 0;
 padding-top: 0;
 border-top: none;
}

.seo-content--home h2 {
 margin-bottom: 20px;
 line-height: 1.35;
}

.seo-content--home p {
 margin-bottom: 18px;
 line-height: 1.85;
 font-size: 15px;
}

.seo-content--home p:last-child {
 margin-bottom: 0;
}

/* CTA strip  -  Ferrari photo card on all pages */
.cta-strip-inner {
 padding: clamp(40px, 6vw, 56px) clamp(32px, 5vw, 48px);
 gap: clamp(24px, 4vw, 32px);
 background-color: var(--dark-bg);
 background-image:
  linear-gradient(
   105deg,
   rgba(3, 5, 8, 0.9) 0%,
   rgba(3, 5, 8, 0.78) 50%,
   rgba(3, 5, 8, 0.68) 100%
  ),
  url("../images/24t-vehicles/_MAIN/Ferrari Remap Chip-Tuning  Bournemouth Dorset 24Tuning (1).webp");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.cta-strip-inner::before {
 display: none;
}

.cta-strip-inner > * {
 position: relative;
 z-index: 1;
}

.cta-strip h2 {
 margin-bottom: 12px;
 color: #fff;
}

.cta-strip p {
 line-height: 1.75;
 max-width: 42ch;
}

.cta-strip-actions {
 gap: 16px;
}

/* Gallery slider */
[data-page="index"] .gallery-slider {
 margin-top: 4px;
}

.gallery-slider-viewport {
 margin-bottom: clamp(24px, 3vw, 32px);
}

.gallery-slider-track {
 gap: 14px;
}

.gallery-slider-item {
 gap: 12px;
}

/* Reviews  -  calmer grid on smaller screens */
@media (max-width: 1100px) {
 .reviews-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 680px) {
 .reviews-grid {
  grid-template-columns: 1fr;
  gap: 16px;
 }

 .services-intro-main > .services-pill-row.pill-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
 }

 .section {
  padding: clamp(56px, 12vw, 80px) 0;
 }

 [data-page="index"] .section {
  padding-top: clamp(56px, 12vw, 80px);
  padding-bottom: clamp(56px, 12vw, 80px);
 }
}

@media (min-width: 1024px) {
 .services-intro-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
 }
}

/*  -  -  SEO / service page upgrades  -  -  */
.page-hero--fade-bottom::after {
 content: '';
 position: absolute;
 inset: auto 0 0;
 height: 22%;
 background: linear-gradient(to bottom, transparent, rgba(3, 5, 8, 0.65));
 pointer-events: none;
 z-index: 1;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .hero-cta-row { margin-top: 20px; flex-wrap: wrap; }

.mobile-sticky-cta {
 display: none;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 90;
 padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
 background: rgba(3, 5, 8, 0.94);
 backdrop-filter: blur(14px);
 border-top: 1px solid rgba(0, 212, 255, 0.18);
 gap: 10px;
}
.mobile-sticky-cta .btn { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 768px) {
 .mobile-sticky-cta { display: flex; }
 body[data-page^="services/"] { padding-bottom: 76px; }
}

/* Quote modal (sticky Get Quote) */
body.quote-modal-open {
 overflow: hidden;
}
.quote-modal {
 position: fixed;
 inset: 0;
 z-index: 1600;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 pointer-events: none;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.25s ease, visibility 0.25s ease;
}
.quote-modal.is-open {
 pointer-events: auto;
 visibility: visible;
 opacity: 1;
}
.quote-modal__backdrop {
 position: absolute;
 inset: 0;
 background: rgba(3, 5, 8, 0.78);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: none;
 cursor: pointer;
}
.quote-modal__dialog {
 position: relative;
 z-index: 1;
 width: min(560px, 100%);
 max-height: min(92vh, 820px);
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 margin: 0;
 padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
 background:
  radial-gradient(ellipse 80% 40% at 100% 0%, rgba(0, 212, 255, 0.08), transparent 55%),
  linear-gradient(180deg, #0c121a 0%, #06090e 100%);
 border: 1px solid rgba(0, 212, 255, 0.2);
 border-bottom: none;
 border-radius: 14px 14px 0 0;
 box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55);
 transform: translate3d(0, 18px, 0);
 transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.quote-modal.is-open .quote-modal__dialog {
 transform: translate3d(0, 0, 0);
}
@media (min-width: 769px) {
 .quote-modal {
  align-items: center;
  padding: 24px;
 }
 .quote-modal__dialog {
  border-radius: 12px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  max-height: min(88vh, 760px);
  padding: 28px 26px 24px;
 }
}
.quote-modal__close {
 position: absolute;
 top: 12px;
 right: 12px;
 width: 40px;
 height: 40px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 6px;
 background: rgba(255, 255, 255, 0.04);
 color: #fff;
 font-size: 22px;
 line-height: 1;
 cursor: pointer;
}
.quote-modal__close:hover,
.quote-modal__close:focus-visible {
 border-color: rgba(0, 212, 255, 0.45);
 color: var(--bright-cyan);
 outline: none;
}
.quote-modal__head {
 padding-right: 44px;
 margin-bottom: 18px;
}
.quote-modal__head .section-label {
 margin-bottom: 8px;
}
.quote-modal__head h2 {
 margin: 0 0 8px;
 font-family: var(--font-display);
 font-size: clamp(22px, 5vw, 28px);
 letter-spacing: 0.04em;
 text-transform: uppercase;
}
.quote-modal__head p {
 margin: 0;
 color: var(--text-muted);
 font-size: 14px;
 line-height: 1.5;
}
.quote-modal__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}
.quote-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
}
.quote-field span {
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.55);
}
.quote-field input,
.quote-field select,
.quote-field textarea {
 width: 100%;
 min-height: 44px;
 padding: 10px 12px;
 border-radius: 6px;
 border: 1px solid rgba(255, 255, 255, 0.12);
 background: rgba(3, 5, 8, 0.65);
 color: var(--text);
 font: inherit;
 font-size: 15px;
}
.quote-field textarea {
 min-height: 88px;
 resize: vertical;
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
 outline: none;
 border-color: rgba(0, 212, 255, 0.55);
 box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}
.quote-field--full {
 grid-column: 1 / -1;
 margin-top: 12px;
}
.quote-field--vrm.is-hidden,
.quote-field--vrm[hidden] {
 display: none !important;
}
.quote-modal__status {
 margin: 12px 0 0;
 font-size: 13px;
 color: var(--text-muted);
}
.quote-modal__status.is-success { color: var(--success, #00e676); }
.quote-modal__status.is-error { color: #ff6b7a; }
.quote-modal__submit {
 width: 100%;
 margin-top: 16px;
 min-height: 48px;
}
@media (max-width: 520px) {
 .quote-modal__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
 .quote-modal,
 .quote-modal__dialog { transition: none !important; }
}

.trust-strip {
 margin-top: 16px;
 padding: 16px;
 border: 1px solid rgba(0, 212, 255, 0.12);
 border-radius: 8px;
 background: rgba(0, 212, 255, 0.04);
 display: grid;
 gap: 10px;
}
.trust-strip .trust-item {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.trust-strip .trust-item strong {
 font-family: var(--font-display);
 color: var(--bright-cyan);
 font-size: 1.1rem;
}
.trust-strip .trust-item span,
.trust-strip .trust-equipment {
 font-size: 0.8125rem;
 color: var(--text-muted);
 margin: 0;
}

.service-compare {
 width: 100%;
 border-collapse: collapse;
 margin: 16px 0;
 font-size: 0.9375rem;
}
.service-compare th,
.service-compare td {
 padding: 12px 14px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 text-align: left;
}
.service-compare th {
 color: var(--bright-cyan);
 font-family: var(--font-display);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 font-size: 0.75rem;
}

.booking-steps {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 24px;
}
.booking-step {
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 padding: 8px 12px;
 border: 1px solid rgba(0, 212, 255, 0.2);
 border-radius: 4px;
 color: var(--text-muted);
}
.booking-step.is-active {
 color: var(--bright-cyan);
 border-color: var(--bright-cyan);
 background: rgba(0, 212, 255, 0.08);
}

.areas-city-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 gap: 16px;
 margin-top: 24px;
}
.areas-city-card .btn-sm { padding: 8px 14px; font-size: 0.75rem; display: inline-block; margin-top: 4px; }
.areas-city-card {
 text-decoration: none;
 color: inherit;
 display: block;
 padding: 20px;
 border: 1px solid rgba(0, 212, 255, 0.12);
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.02);
 transition: border-color 0.2s ease;
}
.areas-city-card:hover {
 border-color: rgba(0, 212, 255, 0.35);
}
.areas-city-card h3 {
 margin: 0 0 8px;
 font-size: 1.05rem;
}
.areas-city-card p {
 margin: 0 0 12px;
 font-size: 0.875rem;
 color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Layout consistency  -  left-aligned, professional rhythm
   ═══════════════════════════════════════════════════════════════ */

/* Prose only: justified body copy */
.content-body p,
.section-header > p,
.service-intro > p,
.faq-answer p,
.seo-content p,
.process-step p,
.trust-card p,
.guarantee-item p,
.review-card p,
.industry-note,
.services-hub-card-body p,
.service-card-body p {
 text-align: justify;
 text-align-last: left;
 hyphens: auto;
}

/* UI chrome: always left-aligned */
.page-hero > .container,
.page-hero .page-hero-content,
.breadcrumb,
.section-label,
.page-hero h1,
.page-hero-desc,
.services-intro-lead,
.services-tagline,
.services-intro-copy p,
.content-section h2,
.service-intro,
.hero-slide-desc,
.hero-quote-sub,
.hero-subtitle {
 text-align: left;
}

@media (max-width: 1024px) {
 .hero.hero-slider .hero-slide-text .hero-slide-desc {
  text-align: justify !important;
  text-justify: inter-word;
 }
}

/* Section header accent  -  draw animation on scroll */
.section-header::before {
 transform-origin: top center;
 transform: scaleY(0);
 opacity: 0.6;
}

.section-header.is-tech-visible::before,
.reveal.is-visible .section-header::before {
 animation: section-accent-draw 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes section-accent-draw {
 from {
  transform: scaleY(0);
  opacity: 0.35;
  box-shadow: none;
 }
 to {
  transform: scaleY(1);
  opacity: 1;
  box-shadow: 0 0 12px var(--racing-red-glow, rgba(8, 146, 212, 0.3));
 }
}

/* Content sections  -  service pages only */
body[data-page^="services/"] .service-main .content-section {
 padding-left: 16px;
 border-left: 2px solid rgba(8, 146, 212, 0.12);
}

body[data-page^="services/"] .service-main .content-section.is-accent-visible::before {
 content: '';
 position: absolute;
 left: -2px;
 top: 0;
 width: 2px;
 height: 100%;
 background: linear-gradient(180deg, var(--bright-cyan), var(--brand-blue));
 transform-origin: top center;
 animation: section-accent-draw 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Standard inner-page heroes  -  match booking / find-installer */
.page-hero > .container {
 text-align: left;
}

.page-hero h1,
.article-hero h1 {
 white-space: normal !important;
 overflow: visible !important;
 text-overflow: unset !important;
 text-align: left !important;
}

.page-hero-desc,
.article-excerpt {
 display: block !important;
 -webkit-line-clamp: unset !important;
 overflow: visible !important;
 text-align: left !important;
 max-width: 640px;
}

/* Service + area page heroes with CTA row */
.page-hero--service,
.page-hero:has(.hero-cta-row) {
 height: auto !important;
 min-height: 228px !important;
 max-height: none !important;
 align-items: stretch !important;
}

.page-hero--service > .container,
.page-hero:has(.hero-cta-row) > .container {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 justify-content: space-between;
 gap: 14px 28px;
 padding-top: 26px !important;
 padding-bottom: 26px !important;
 min-height: 176px;
 text-align: left;
}

/* Service heroes: related links sit under copy (not a narrow right stack) */
.page-hero--service > .container {
 display: block;
 align-items: stretch;
 min-height: 0;
}

.page-hero--service .page-hero-content,
.page-hero:has(.hero-cta-row) .page-hero-content {
 flex: 1 1 300px;
 min-width: 0;
 max-width: 920px;
 padding-left: 0;
 border-left: none;
}

.page-hero--service .page-hero-content {
 max-width: 100%;
}

.page-hero--service .page-hero-content::before {
 display: none;
}

.page-hero--service .section-label,
.page-hero:has(.hero-cta-row) .section-label {
 margin-bottom: 6px;
 text-align: left;
}

.page-hero--service .section-label::before,
.page-hero:has(.hero-cta-row) .section-label::before {
 display: none !important;
}

.page-hero--service h1,
.page-hero--service .page-hero-desc,
.page-hero--service .hero-cta-row,
.page-hero--service .section-label,
.page-hero:has(.hero-cta-row) h1,
.page-hero:has(.hero-cta-row) .page-hero-desc,
.page-hero:has(.hero-cta-row) .hero-cta-row,
.page-hero:has(.hero-cta-row) .section-label {
 animation: none !important;
 opacity: 1 !important;
 transform: none !important;
 filter: none !important;
}

.page-hero:has(.hero-cta-row) h1,
.page-hero:has(.hero-cta-row) .page-hero-desc {
 white-space: normal !important;
 overflow: visible !important;
 text-overflow: unset !important;
 display: block !important;
 -webkit-line-clamp: unset !important;
 text-align: left !important;
}

/* Default (non-service) hero CTA column */
.page-hero:has(.hero-cta-row):not(.page-hero--service) .hero-cta-row {
 flex: 0 0 auto;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 8px;
 width: auto;
 max-width: 188px;
 margin: 0;
}

.page-hero:has(.hero-cta-row):not(.page-hero--service) .hero-cta-row .btn {
 width: 100%;
 max-width: 188px;
 min-width: 0;
 min-height: 38px;
 height: 38px;
 font-size: 10px;
 padding: 0 10px;
 letter-spacing: 0.07em;
 white-space: normal;
 line-height: 1.15;
}

/* Related service buttons  -  wrap row under title/desc */
.page-hero--service .hero-cta-row,
.page-hero--service .hero-cta-row--related {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 width: 100%;
 max-width: 720px;
 margin: 18px 0 0;
}

.page-hero--service .hero-cta-row .btn,
.page-hero--service .hero-cta-row .btn.hero-btn,
.page-hero--service .hero-related-btn {
 width: auto;
 max-width: none;
 min-width: 0;
 min-height: 42px;
 height: auto;
 padding: 10px 16px;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 white-space: nowrap;
 line-height: 1.2;
 border-radius: 2px;
}

.page-hero--service .hero-related-btn--book {
 background: var(--brand-blue) !important;
 border-color: var(--brand-blue) !important;
 color: #fff !important;
 box-shadow: 0 4px 18px rgba(8, 146, 212, 0.28) !important;
}

.page-hero--service .hero-related-btn--book:hover {
 background: #0aa0e0 !important;
 border-color: #0aa0e0 !important;
 color: #fff !important;
}

.page-hero:has(.hero-cta-row) .hero-cta-row .btn-primary {
 background: rgba(8, 146, 212, 0.05) !important;
 border: 1px solid rgba(77, 184, 224, 0.3) !important;
 color: rgba(232, 240, 248, 0.9) !important;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.page-hero--service .hero-related-btn--book.btn-primary {
 background: var(--brand-blue) !important;
 border-color: var(--brand-blue) !important;
 color: #fff !important;
 box-shadow: 0 4px 18px rgba(8, 146, 212, 0.28) !important;
}

/* Transparent glass outline buttons (non-primary) */
.btn-outline,
.pill-row .btn-outline.hero-btn,
.page-hero--service .hero-cta-row .btn:not(.btn-primary) {
 background: rgba(8, 146, 212, 0.05) !important;
 border: 1px solid rgba(77, 184, 224, 0.3) !important;
 color: rgba(232, 240, 248, 0.9) !important;
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.btn-outline:hover,
.pill-row .btn-outline.hero-btn:hover,
.page-hero--service .hero-cta-row .btn:not(.btn-primary):hover {
 background: rgba(8, 146, 212, 0.12) !important;
 border-color: rgba(0, 212, 255, 0.42) !important;
 color: #fff !important;
 box-shadow: 0 0 18px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Quote form  -  angled corners matching hero buttons */
.hero-quote-panel,
.hero-panel.hero-quote-panel {
 clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
 border-radius: 0;
 padding: clamp(18px, 2.2vw, 22px) !important;
}

.hero-quote-panel .section-label--quote,
.hero-quote-panel .section-label {
 font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
 letter-spacing: 0.1em;
 margin-bottom: 10px !important;
 text-align: left;
}

.hero-quote-panel .section-label--quote::before,
.hero-quote-panel .section-label::before {
 display: inline-block !important;
 content: '';
 width: 14px;
 height: 14px;
 margin-right: 10px;
 border-radius: 2px;
 vertical-align: -2px;
 background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(8, 146, 212, 0.28));
 border: 1px solid rgba(0, 212, 255, 0.45);
 box-shadow: 0 0 10px rgba(0, 212, 255, 0.28), inset 0 0 6px rgba(0, 212, 255, 0.15);
 clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
 animation: quote-chip-pulse 2.4s ease-in-out infinite;
}

@keyframes quote-chip-pulse {
 0%, 100% { box-shadow: 0 0 8px rgba(0, 212, 255, 0.22), inset 0 0 4px rgba(0, 212, 255, 0.12); }
 50% { box-shadow: 0 0 14px rgba(0, 212, 255, 0.45), inset 0 0 8px rgba(0, 212, 255, 0.22); }
}

.hero-quote-panel .hero-quote-sub {
 font-size: clamp(12px, 1.2vw, 13px);
 line-height: 1.55;
 margin-bottom: 12px;
 color: rgba(139, 156, 176, 0.9);
 text-align: left;
 text-transform: none;
 letter-spacing: normal;
}

.hero-quote-form {
 gap: 8px;
}

.hero-quote-form input {
 padding: 9px 12px;
 font-size: 13px;
 border-radius: 0;
 clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
 background: rgba(0, 0, 0, 0.42);
 border-color: rgba(77, 184, 224, 0.2);
}

.hero-quote-form input::placeholder {
 color: rgba(232, 240, 248, 0.52);
 text-transform: uppercase;
 letter-spacing: 0.12em;
 font-size: 10px;
 font-family: var(--font-display);
 font-weight: 600;
 opacity: 1;
}

.hero-quote-form label {
 display: none;
}

.hero-quote-form .hero-panel-cta,
.hero-quote-form .btn {
 min-height: 40px;
 height: 40px;
 font-size: 11px;
 padding: 0 14px;
 clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Hero stats */
.hero-stat .num,
.hero-stat-mobile .num {
 font-size: clamp(22px, 2.9vw, 32px) !important;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}

.hero-stat .lbl,
.hero-stat-mobile .lbl {
 font-size: clamp(0.75rem, 1.6vw, 0.875rem) !important;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

/* Homepage services intro  -  layout sync */
.services-intro-main > .services-pill-row {
 padding-left: 0;
}

.services-intro-header {
 padding-left: 20px;
 margin-bottom: 0;
}

.services-intro-copy p {
 max-width: 58ch;
}

/* Homepage gallery rhythm */
[data-page="index"] .vehicle-search-section {
 padding-bottom: var(--home-section-gap) !important;
}

[data-page="index"] .vehicle-search-section + .section.section-gallery {
 padding-top: var(--home-section-gap) !important;
 padding-bottom: var(--home-section-gap) !important;
}

[data-page="index"] .section.section-gallery + .trust-marquee--signals {
 margin-top: 0;
}

[data-page="index"] .trust-marquee--signals + .section {
 padding-top: var(--home-section-gap) !important;
}

/* Vehicle search compact */
.vehicle-search-section {
 padding-top: clamp(24px, 3.5vw, 36px) !important;
 padding-bottom: clamp(20px, 3vw, 28px) !important;
}

.vehicle-search-container {
 padding: clamp(22px, 3vw, 32px) clamp(20px, 3.5vw, 40px) clamp(18px, 2.5vw, 26px) !important;
}

.v-search-head {
 margin-bottom: clamp(16px, 2.5vw, 22px) !important;
 text-align: left;
}

.v-search-actions {
 display: none !important;
}

/* Hub / area pages without sidebar */
body[data-page^="services/"] .service-main[style*="max-width"] .content-section,
.areas-page .content-section {
 padding-left: 0;
 border-left: none;
}

@media (max-width: 1024px) {
 .page-hero--service > .container,
 .page-hero:has(.hero-cta-row) > .container {
  flex-direction: column;
  align-items: stretch;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
 }

 .page-hero--service .hero-cta-row,
 .page-hero:has(.hero-cta-row) .hero-cta-row {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
 }

 .page-hero--service .hero-cta-row .btn,
 .page-hero--service .hero-related-btn,
 .page-hero:has(.hero-cta-row):not(.page-hero--service) .hero-cta-row .btn {
  flex: 1 1 calc(50% - 6px);
  max-width: none;
  white-space: normal;
  text-align: center;
 }

 .page-hero--service .hero-related-btn--book {
  flex: 1 1 100%;
 }

 .hero-slider .pill-row.pill-row--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
 }

 .hero-slide-bg,
 .hero-slide-bg--ferrari { background-position: center 58%; }
 .hero-slide-bg--bike-atv { background-position: center 42%; }
 .hero-slide-bg:nth-child(2) { background-position: center 56%; }
 .hero-slide-bg:nth-child(4) { background-position: center 54%; }
 .hero-slide-bg:nth-child(5) { background-position: center 58%; }
 .hero-slide-bg--installer { background-position: center 55%; }
}

@media (prefers-reduced-motion: reduce) {
 body[data-page^="services/"] .service-main .content-section.is-accent-visible::before,
 .section-header.is-tech-visible::before {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
 }

 .hero-slide-bg.is-active {
  animation: none !important;
 }
}

/* ═══════════════════════════════════════════════════════════════
   Footer redesign  -  service columns, social, legal, reveal
   ═══════════════════════════════════════════════════════════════ */

.site-footer.footer-reveal {
 position: relative;
 background: #020408;
 border-top: none;
 padding: 0 0 28px;
 margin-top: 0;
 overflow: hidden;
 isolation: isolate;
}

.site-footer.footer-reveal::before {
 display: none !important;
}

.footer-carbon {
 position: absolute;
 inset: 0;
 background: var(--carbon-weave);
 opacity: 0.22;
 pointer-events: none;
 z-index: 0;
}

.footer-accent {
 display: block;
 height: 3px;
 width: 100%;
 background: linear-gradient(90deg, var(--racing-red, #e10600) 0%, var(--brand-blue, #0892d4) 32%, var(--bright-cyan, #00d4ff) 58%, rgba(8, 146, 212, 0.12) 100%);
 box-shadow: 0 0 28px rgba(0, 212, 255, 0.22);
 position: relative;
 z-index: 2;
}

.footer-inner {
 position: relative;
 z-index: 1;
 padding-top: clamp(44px, 5.5vw, 60px);
}

.footer-layout {
 display: grid;
 grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
 gap: clamp(36px, 4.5vw, 56px);
 align-items: start;
 margin-bottom: clamp(32px, 4vw, 44px);
}

.footer-brand-col {
 display: flex;
 flex-direction: column;
 gap: 18px;
 text-align: left;
}

.footer-brand-panel {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding-bottom: 4px;
}

.footer-logo-link {
 display: inline-block;
 line-height: 0;
}

.footer-logo-link img {
 height: 38px;
 width: auto;
 margin: 0;
 filter: drop-shadow(0 2px 12px rgba(0, 212, 255, 0.08));
}

.footer-brand-desc {
 font-size: 12.5px;
 line-height: 1.65;
 color: rgba(159, 176, 194, 0.9);
 margin: 0;
 text-align: left;
 max-width: 30ch;
}

.footer-brand-col .footer-trust-badges {
 margin-top: 2px;
 gap: 8px;
 flex-wrap: wrap;
}

.footer-brand-col .trust-badge {
 font-size: 9px;
 padding: 5px 10px;
 clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
 border-color: rgba(77, 184, 224, 0.28);
 background: rgba(8, 146, 212, 0.08);
}

.footer-contact-compact {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 4px;
}

.footer-contact-chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 11.5px;
 color: rgba(159, 176, 194, 0.92);
 text-decoration: none;
 transition: color 0.2s ease, transform 0.2s ease;
 width: fit-content;
 letter-spacing: 0.02em;
}

.footer-contact-chip svg {
 flex-shrink: 0;
 color: var(--bright-cyan);
 opacity: 0.85;
}

.footer-contact-chip:hover {
 color: #fff;
 transform: translateX(2px);
}

.footer-contact-chip--static {
 cursor: default;
}

.footer-uk-flag {
 flex-shrink: 0;
 width: 18px;
 height: 13px;
 object-fit: cover;
 border-radius: 2px;
 box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
 margin-left: 2px;
}

.footer-social-block {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.footer-social-label {
 font-family: var(--font-display);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: rgba(0, 212, 255, 0.7);
}

.footer-social-label::before {
 content: '';
 display: inline-block;
 width: 3px;
 height: 0.9em;
 margin-right: 8px;
 background: var(--bright-cyan);
 box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
 vertical-align: -0.12em;
}

.footer-social-row {
 display: flex;
 align-items: flex-end;
 gap: 10px;
 flex-wrap: wrap;
}

.footer-social-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 color: var(--bright-cyan);
 background: rgba(8, 146, 212, 0.08);
 border: 1px solid rgba(77, 184, 224, 0.24);
 clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
 transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
 flex-shrink: 0;
}

.footer-social-icon:hover {
 color: #fff;
 background: rgba(8, 146, 212, 0.16);
 border-color: rgba(0, 212, 255, 0.5);
 box-shadow: 0 0 18px rgba(0, 212, 255, 0.15);
 transform: translateY(-2px);
}

.footer-social-icon--pending {
 opacity: 0.55;
 cursor: default;
 pointer-events: none;
}

.footer-social-icon--pending:hover {
 color: var(--bright-cyan);
 background: rgba(8, 146, 212, 0.08);
 border-color: rgba(77, 184, 224, 0.24);
 box-shadow: none;
 transform: none;
}

/* Facebook page preview card - fixed 320x120 */
.footer-fb-card {
 display: block;
 width: 320px;
 max-width: 100%;
 height: 120px;
 flex-shrink: 0;
 text-decoration: none;
 color: inherit;
 background: #0b1018;
 border: 1px solid rgba(77, 184, 224, 0.22);
 border-radius: 6px;
 overflow: hidden;
 box-shadow:
  0 10px 32px rgba(0, 0, 0, 0.42),
  inset 0 1px 0 rgba(255, 255, 255, 0.04);
 transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.footer-fb-card:hover {
 border-color: rgba(24, 119, 242, 0.55);
 box-shadow:
  0 14px 36px rgba(0, 0, 0, 0.48),
  0 0 24px rgba(24, 119, 242, 0.14),
  inset 0 1px 0 rgba(255, 255, 255, 0.06);
 transform: translateY(-2px);
}

.footer-fb-card-cover {
 height: 56px;
 background-color: #121820;
 background-size: cover;
 background-position: center bottom;
 background-repeat: no-repeat;
 position: relative;
}

.footer-fb-card-cover::after {
 content: '';
 position: absolute;
 inset: 0;
 background:
  linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 35%),
  linear-gradient(180deg, transparent 25%, rgba(11, 16, 24, 0.72) 72%, #0b1018 100%);
}

.footer-fb-card-cover-badge {
 position: absolute;
 top: 8px;
 right: 8px;
 z-index: 2;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: #1877f2;
 color: #fff;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.footer-fb-card-body {
 display: flex;
 align-items: center;
 gap: 10px;
 height: 64px;
 padding: 0 10px 8px;
 position: relative;
}

.footer-fb-card-avatar-wrap {
 flex-shrink: 0;
 margin-top: -16px;
 position: relative;
 z-index: 3;
}

.footer-fb-card-avatar {
 display: block;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border: 2px solid #0b1018;
 background: #0d1219;
 object-fit: cover;
 box-shadow:
  0 0 0 1px rgba(255, 255, 255, 0.12),
  0 3px 10px rgba(0, 0, 0, 0.45);
}

.footer-fb-card-meta {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 1px;
 padding-top: 1px;
}

.footer-fb-card-name {
 font-family: var(--font-display);
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.03em;
 color: #fff;
 line-height: 1.2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.footer-fb-card-tagline {
 font-size: 9.5px;
 line-height: 1.3;
 color: #c9d5e3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 letter-spacing: 0.02em;
}

.footer-fb-card-stats {
 font-size: 10px;
 line-height: 1.35;
 color: #c9d5e3;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.footer-fb-card-stats strong {
 color: #eef2f7;
 font-weight: 700;
}

.footer-fb-card-dot {
 margin: 0 3px;
 opacity: 0.55;
}

.footer-fb-card-rating {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 margin-top: 1px;
}

.footer-fb-stars {
 display: inline-flex;
 gap: 0;
 color: #f5b301;
 font-size: 9px;
 line-height: 1;
 letter-spacing: -1px;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.footer-fb-rating-num {
 font-size: 9.5px;
 font-weight: 700;
 color: rgba(232, 240, 248, 0.8);
}

.footer-fb-card-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 align-self: center;
 flex-shrink: 0;
 min-width: 58px;
 height: 28px;
 padding: 0 10px;
 font-family: var(--font-display);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #ffffff;
 background: #0b5bb5;
 border-radius: 4px;
 box-shadow: 0 2px 8px rgba(24, 119, 242, 0.35);
 transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.footer-fb-card:hover .footer-fb-card-cta {
 background: #0d65d9;
 box-shadow: 0 4px 14px rgba(24, 119, 242, 0.45);
 transform: scale(1.03);
}

.footer-nav-wrap {
 min-width: 0;
}

.footer-nav-panel {
 padding: clamp(20px, 2.5vw, 28px);
 background: linear-gradient(155deg, rgba(10, 14, 22, 0.72) 0%, rgba(5, 8, 14, 0.55) 100%);
 border: 1px solid rgba(77, 184, 224, 0.12);
 clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.footer-nav-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 24px);
}

.footer-col-title,
.footer-col h4.footer-col-title,
.footer-col h2.footer-col-title {
 font-family: var(--font-display);
 font-size: clamp(11px, 1.1vw, 12px) !important;
 font-weight: 700 !important;
 letter-spacing: 0.14em !important;
 text-transform: uppercase !important;
 color: var(--bright-cyan) !important;
 margin: 0 0 14px !important;
 line-height: 1.25;
 text-align: left;
 padding-bottom: 8px;
 border-bottom: 1px solid rgba(77, 184, 224, 0.12);
}

.footer-col-title::before,
.footer-col h4.footer-col-title::before {
 content: '';
 display: inline-block;
 width: 3px;
 height: 0.85em;
 margin-right: 8px;
 background: var(--bright-cyan);
 box-shadow: 0 0 8px rgba(0, 212, 255, 0.35);
 vertical-align: -0.1em;
}

.footer-links {
 list-style: none;
 margin: 0;
 padding: 0;
}

.footer-links li {
 margin: 0 0 7px;
}

.footer-links a {
 position: relative;
 font-size: 12.5px;
 line-height: 1.45;
 color: rgba(159, 176, 194, 0.88);
 text-decoration: none;
 transition: color 0.2s ease, padding-left 0.2s ease;
 display: inline-block;
 padding-left: 0;
}

.footer-links a::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 0;
 height: 1px;
 background: var(--bright-cyan);
 transition: width 0.2s ease;
 opacity: 0.8;
}

.footer-links a:hover {
 color: #fff;
 padding-left: 10px;
}

.footer-links a.active,
.footer-links a[aria-current="page"] {
 color: var(--bright-cyan);
}

.footer-links a:hover::before {
 width: 6px;
}

.footer-contact-col,
.footer-services-wrap,
.footer-services-grid,
.footer-fb-feed,
.footer-social {
 display: none !important;
}

.footer-legal-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px 20px;
 padding-top: clamp(22px, 3vw, 30px);
 margin-top: 4px;
 border-top: 1px solid rgba(77, 184, 224, 0.14);
 position: relative;
}

.footer-legal-bar::before {
 content: '';
 position: absolute;
 top: -1px;
 left: 0;
 width: min(120px, 30%);
 height: 1px;
 background: linear-gradient(90deg, var(--bright-cyan), transparent);
}

.footer-copy {
 font-size: 12px;
 color: rgba(159, 176, 194, 0.75);
 line-height: 1.5;
}

.footer-legal-links {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 20px;
}

.footer-legal-links a {
 font-family: var(--font-display);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: rgba(159, 176, 194, 0.85);
 text-decoration: none;
 transition: color 0.2s ease;
}

.footer-legal-links a:hover {
 color: var(--bright-cyan);
}

/* Footer scroll reveal - visible by default so pages without motion.js are not blank */
.footer-reveal .footer-brand-col,
.footer-reveal .footer-nav-wrap,
.footer-reveal .footer-legal-bar {
 opacity: 1;
 transform: none;
 filter: none;
}

.footer-reveal.js-footer-animate:not(.is-footer-visible) .footer-brand-col,
.footer-reveal.js-footer-animate:not(.is-footer-visible) .footer-nav-wrap,
.footer-reveal.js-footer-animate:not(.is-footer-visible) .footer-legal-bar {
 opacity: 0;
 transform: translate3d(0, 20px, 0);
 filter: blur(4px);
}

.footer-reveal.is-footer-visible .footer-brand-col {
 animation: footer-reveal-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.footer-reveal.is-footer-visible .footer-nav-wrap {
 animation: footer-reveal-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.footer-reveal.is-footer-visible .footer-legal-bar {
 animation: footer-reveal-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

.footer-reveal.is-footer-visible .footer-col {
 opacity: 0;
 animation: footer-col-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.footer-reveal.is-footer-visible .footer-col:nth-child(1) { animation-delay: 0.14s; }
.footer-reveal.is-footer-visible .footer-col:nth-child(2) { animation-delay: 0.18s; }
.footer-reveal.is-footer-visible .footer-col:nth-child(3) { animation-delay: 0.22s; }
.footer-reveal.is-footer-visible .footer-col:nth-child(4) { animation-delay: 0.26s; }

@keyframes footer-reveal-in {
 from {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  filter: blur(4px);
 }
 to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
 }
}

@keyframes footer-col-in {
 from {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
 }
 to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
 }
}

/* Hide legacy footer blocks */
.footer-newsletter,
.footer-grid,
.footer-bottom,
.social-links {
 display: none !important;
}

/* Typography sync  -  section and UI hierarchy */
.section-header h2,
.v-search-title,
.services-intro-header h2 {
 font-family: var(--font-display);
 font-weight: 800;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 color: #fff;
}

.section-label,
.footer-col-title {
 font-family: var(--font-display);
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--bright-cyan);
}

.content-body,
.service-intro,
.page-hero-desc,
.section-header > p {
 font-family: var(--font-body);
 font-size: clamp(14px, 1.4vw, 15px);
 line-height: 1.7;
}

@media (max-width: 1100px) {
 .footer-layout {
  grid-template-columns: 1fr;
  gap: 36px;
 }

 .footer-brand-col {
  max-width: 520px;
 }

 .footer-nav-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

 @media (max-width: 768px) {
 .footer-layout {
  gap: 32px;
 }

 .footer-nav-panel {
  padding: 18px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
 }

 .footer-nav-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
 }

 .footer-legal-bar {
  flex-direction: column;
  align-items: flex-start;
 }

 .footer-social-row {
  flex-direction: row;
  align-items: flex-end;
 }

 .footer-fb-card {
  width: 100%;
  max-width: 320px;
 }
}

@media (max-width: 480px) {
 .footer-nav-grid {
  grid-template-columns: 1fr;
 }
}

@media (prefers-reduced-motion: reduce) {
 .footer-reveal .footer-brand-col,
 .footer-reveal .footer-nav-wrap,
 .footer-reveal .footer-legal-bar,
 .footer-reveal .footer-col {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
 }

 .back-to-top::before {
  display: none;
 }
}