/* 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;
}

.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;
}

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

.hero-quote-panel .hero-quote-sub {
 font-size: 13px;
 color: var(--text-muted);
 margin-bottom: 16px;
}

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

.hero-quote-form label {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--text-muted);
}

.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 stats, sleek grid on mobile, no overlap with quote form */
@media (max-width: 1024px) {
  .hero {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    align-items: stretch;
  }

  .hero .container.hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: clamp(32px, 6vw, 56px);
    padding-bottom: 40px;
    grid-template-areas: none;
    grid-template-rows: none;
    grid-template-columns: none;
  }

  .hero-main,
  .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: 1px;
    margin-top: 28px;
    padding: 0;
    border: 1px solid rgba(77, 184, 224, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(77, 184, 224, 0.08);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }

 .hero-stat {
 padding: 18px 16px;
 text-align: center;
 background: rgba(3, 5, 8, 0.82);
 }

 .hero-stat .num {
 font-size: clamp(22px, 6vw, 28px) !important;
 line-height: 1.1;
 font-style: normal !important;
 }

 .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-content .pill-row {
 flex-wrap: wrap;
 gap: 10px;
 }

 .hero-content .pill-row .btn {
 flex: 1 1 calc(50% - 5px);
 min-width: 140px;
 text-align: center;
 padding: 12px 16px;
 font-size: 11px;
 }

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

 .hero-quote-form label {
 font-size: 10px;
 }

 .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%;
 }

 .hero-stats {
 grid-template-columns: 1fr 1fr;
 }
}

/* 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 {
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-height: 420px;
 overflow-y: auto;
}

.installer-card {
 background: var(--dark-surface);
 border: 1px solid rgba(77, 184, 224, 0.15);
 border-radius: 8px;
 padding: 16px;
}

.installer-card h3 {
 font-size: 15px;
 margin-bottom: 4px;
}

.installer-loc {
 font-size: 13px;
 color: var(--text-muted);
 margin-bottom: 8px;
}

.installer-marker-pin {
 display: block;
 width: 14px;
 height: 14px;
 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 {
 width: 18px;
 height: 18px;
 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 { max-height: none; }
}

/* ── 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;
}

.mega-menu {
 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);
}

.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-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 {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) translateY(0);
}

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

.nav-dropdown {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%) translateY(8px);
 min-width: 240px;
 padding: 8px 0;
 background: rgba(10, 14, 20, 0.98);
 border: 1px solid rgba(77, 184, 224, 0.2);
 border-top: 2px solid var(--bright-cyan);
 border-radius: 0 0 8px 8px;
 box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
 z-index: 1200;
}

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

.nav-dropdown li { margin: 0; }

.nav-dropdown a {
 display: block;
 padding: 10px 18px;
 border-radius: 0;
 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;
 transition: background 0.2s, color 0.2s;
}

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

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

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

.header-inner {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 32px;
 min-height: 72px;
 height: auto;
 padding-top: 10px;
 padding-bottom: 10px;
 justify-content: unset;
}

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

.logo img {
 display: block;
 height: 38px;
 width: auto;
 max-width: 170px;
}

.header-nav { justify-self: center; }

.nav-desktop {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-desktop a {
 font-family: var(--font-display);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.72);
 padding: 10px 14px;
 border-radius: 4px;
 transition: color 0.2s, background 0.2s;
}

.nav-desktop a:hover,
.nav-desktop a.active {
 color: #fff;
 background: rgba(77, 184, 224, 0.08);
}

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

.nav-chevron {
 display: inline-block;
 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;
 gap: 10px;
 flex-shrink: 0;
}

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

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

.header-utility {
 display: flex;
 gap: 8px;
 padding-right: 8px;
 border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.header-utility-link {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.45);
 padding: 6px 8px;
}

.header-utility-link:hover { color: var(--bright-cyan); }

.header-phone-compact {
 font-family: var(--font-display);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.04em;
 color: rgba(255, 255, 255, 0.85);
 white-space: nowrap;
}

.header-phone-compact:hover { color: var(--bright-cyan); }

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

.cart-btn {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 padding: 0;
 font-size: 12px;
 border: 1px solid rgba(77, 184, 224, 0.25);
 background: transparent;
 border-radius: 4px;
 cursor: pointer;
 flex-shrink: 0;
}

.cart-btn .cart-icon {
 display: block;
}

.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;
 gap: 5px;
 width: 44px;
 height: 44px;
 padding: 8px;
 background: transparent;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 4px;
 cursor: pointer;
 z-index: 1;
 -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
 display: block;
 height: 2px;
 background: #fff;
 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 {
 background: rgba(3, 5, 8, 0.98);
 border-top: 1px solid rgba(77, 184, 224, 0.12);
 padding: 16px 0 24px;
}

.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 20px;
}

.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.85);
 text-decoration: none;
}

.nav-mobile a:hover,
.nav-mobile a.active {
 color: var(--bright-cyan);
}

.nav-mobile-group-label {
 display: block;
 padding: 16px 0 8px;
 font-family: var(--font-display);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--bright-cyan);
}

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

.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;
}

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

.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 {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
}

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

.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: 1025px) {
 .menu-toggle { display: none !important; }
 .nav-mobile-panel { display: none !important; }
}

@media (max-width: 1100px) {
 .header-utility { display: none; }
 .nav-desktop { gap: 2px; }
 .nav-desktop a { padding: 8px 10px; font-size: 12px; }
}

/* Tablet / mobile, logo + cart + hamburger only */
@media (max-width: 1024px) {
 .header-nav { display: none !important; }

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

 .header-inner {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 min-height: 64px;
 padding-top: 8px;
 padding-bottom: 8px;
 padding-left: var(--site-gutter);
 padding-right: var(--site-gutter);
 }

 .logo {
 flex: 0 1 auto;
 min-width: 0;
 max-width: calc(100% - 120px);
 }

 .logo img {
 display: block;
 height: 36px;
 width: auto;
 max-width: 100%;
 object-fit: contain;
 object-position: left center;
 }

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

 #site-header .cart-btn {
 width: 44px !important;
 height: 44px !important;
 min-width: 44px !important;
 padding: 0 !important;
 clip-path: none !important;
 }

 #site-header .cart-btn .cart-icon {
 width: 18px;
 height: 18px;
 }

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

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

 .nav-mobile-panel {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 z-index: 1200;
 max-height: min(80vh, 520px);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
 }

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

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

@media (max-width: 900px) {
 .installer-layout { grid-template-columns: 1fr; }
 .installer-map { height: 360px; }
 .installer-list { max-height: none; }
}

@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 {
 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-block;
 width: 100%;
 text-align: center;
 margin-top: 4px;
}

.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: 12px;
 width: 100%;
}

/* Subtle Alientech yellow accents */
.section-label {
 color: var(--bright-cyan);
}

.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: grid !important;
 grid-template-columns: auto 1fr auto !important;
 height: auto !important;
 min-height: 72px !important;
 justify-content: unset !important;
}

#site-header .logo img {
 height: 38px !important;
 max-height: 38px !important;
 filter: none !important;
}

#site-header .cart-btn {
 clip-path: none !important;
 font-size: 0 !important;
 letter-spacing: 0 !important;
 text-transform: none !important;
}

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

 #site-header .logo img {
 height: 36px !important;
 max-height: 36px !important;
 }
}

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

.hero-panel-label::before {
 background: var(--bright-cyan);
}

/* 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;
}

.reviews-badge-row {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 margin-bottom: 32px;
}

.reviews-badge {
 flex: 1 1 140px;
 padding: 20px 24px;
 text-align: center;
 background: rgba(10, 14, 20, 0.8);
 border: 1px solid rgba(77, 184, 224, 0.2);
 border-radius: 8px;
}

.reviews-badge strong {
 display: block;
 font-family: var(--font-display);
 font-size: 28px;
 color: var(--bright-cyan);
 margin-bottom: 4px;
}

.reviews-badge span {
 font-size: 11px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-muted);
}

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

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

.review-card p {
 font-size: 14px;
 line-height: 1.65;
 color: rgba(255, 255, 255, 0.88);
 margin: 0 0 14px;
 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: 40px;
 padding: 28px 32px;
 text-align: center;
 background: rgba(10, 14, 20, 0.75);
 border: 1px solid rgba(77, 184, 224, 0.18);
 border-radius: 8px;
}

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

.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;
 height: 220px;
 min-height: 220px;
 max-height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 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;
 border-bottom: 1px solid rgba(8, 146, 212, 0.1) !important;
 position: relative;
 overflow: hidden;
}

.page-hero.has-hero-image::before,
.page-hero.page-hero--image::before,
.article-hero.has-hero-image::before,
.article-hero.page-hero--image::before {
 display: block !important;
 content: '' !important;
 position: absolute;
 inset: 0;
 background: linear-gradient(105deg, rgba(3, 5, 8, 0.88) 0%, rgba(3, 5, 8, 0.72) 55%, rgba(3, 5, 8, 0.55) 100%);
 z-index: 0;
 pointer-events: none;
}

.page-hero:not(.has-hero-image):not(.page-hero--image)::before,
.article-hero:not(.has-hero-image):not(.page-hero--image)::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: 1;
 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 8px !important;
 font-size: clamp(26px, 4vw, 40px) !important;
 font-weight: 800 !important;
 line-height: 1.1 !important;
 color: #fff !important;
 background: none !important;
 -webkit-text-fill-color: #fff !important;
 background-clip: border-box !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.page-hero-desc,
.article-excerpt {
 margin: 0 !important;
 color: var(--text-muted) !important;
 max-width: 680px;
 font-size: 15px !important;
 line-height: 1.5 !important;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.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::after {
 background: linear-gradient(90deg, var(--bright-cyan) 0%, var(--brand-blue) 45%, var(--bright-cyan) 75%, transparent 100%) !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;
}

.section-label {
 color: var(--bright-cyan) !important;
}

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

.review-stars {
 display: block;
 margin-bottom: 12px;
 line-height: 1;
}

.review-stars::before {
 content: '\2605\2605\2605\2605\2605';
 color: #f5c518;
 font-size: 15px;
 letter-spacing: 3px;
 text-shadow: 0 0 12px rgba(245, 197, 24, 0.25);
}

.review-card {
 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;
}

.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;
}

@media (max-width: 768px) {
 .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);
}